Initial Conifguration Vue3 nuxt

.github/workflows/Vue3cicd.yml

@@ -0,0 +1,167 @@
+name: Vue3 cicd
+on:
+  workflow_dispatch:
+    inputs:
+      pr-number:
+        description: "Pull Request Number:"
+        type: string
+        required: true
+      namespace:
+        description: "Deploy To:"
+        type: choice
+        required: true
+        options:
+        - The Q Dev
+
+jobs:
+
+  ##### SETUP ##################################################################
+
+  parse-inputs:
+    name: refs/pull/${{ github.event.inputs.pr-number }}/head to ${{ github.event.inputs.namespace }}
+    runs-on: ubuntu-latest
+    outputs:
+      environment: ${{ steps.parse.outputs.environment }}
+      image-tag: ${{ steps.parse.outputs.image-tag }}
+      push-qms: ${{ steps.parse.outputs.push-qms }}
+      push-theq: ${{ steps.parse.outputs.push-theq }}
+      ref: ${{ steps.parse.outputs.ref }}
+
+    steps:
+    # Use the input values to create more coding-friendly values.
+    - name: Parse Inputs
+      id: parse
+      run: |
+        # Gets "dev" or "test".
+        ENVIRONMENT=$(echo ${{ github.event.inputs.namespace }} | \
+            awk -F' ' '{print $NF}' | tr '[:upper:]' '[:lower:]')
+        echo ENVIRONMENT:$ENVIRONMENT
+        echo "environment=$ENVIRONMENT" >> $GITHUB_OUTPUT
+        IMAGE_TAG=pr${{ github.event.inputs.pr-number }}
+        echo IMAGE_TAG:$IMAGE_TAG
+        echo "image-tag=$IMAGE_TAG" >> $GITHUB_OUTPUT
+        if [ $GITHUB_REPOSITORY_OWNER != "bcgov" ]; then
+          # Never push in forks - useful and safer for development.
+          PUSH_QMS=false
+          PUSH_THEQ=false
+        elif [[ "${{ github.event.inputs.namespace }}" == QMS* ]]; then
+          PUSH_QMS=true
+          PUSH_THEQ=false
+        else
+          PUSH_QMS=false
+          PUSH_THEQ=true
+        fi
+        echo PUSH_QMS:$PUSH_QMS
+        echo "push-qms=$PUSH_QMS" >> $GITHUB_OUTPUT
+        echo PUSH_THEQ:$PUSH_THEQ
+        echo "push-theq=$PUSH_THEQ" >> $GITHUB_OUTPUT
+        REF=refs/pull/${{ github.event.inputs.pr-number }}/head
+        echo REF:$REF
+        echo "ref=$REF" >> $GITHUB_OUTPUT
+
+
+  ##### TEST ###################################################################
+
+  # queue-management-frontend-cypress:
+  #   name: Queue Management Frontend Cypress
+  #   needs: parse-inputs
+  #   uses: ./.github/workflows/reusable-queue-management-frontend-cypress.yaml
+  #   secrets:
+  #     cypress-project-id: ${{ secrets.CYPRESS_PROJECT_ID }}
+  #     cypress-record-key: ${{ secrets.CYPRESS_RECORD_KEY }}
+  #     keycloak-auth-url: ${{ secrets.KEYCLOAK_AUTH_URL_DEV }}/auth/
+  #     keycloak-client: ${{ secrets.KEYCLOAK_APPOINTMENTS_FRONTEND_CLIENT }}
+  #     keycloak-realm: ${{ secrets.KEYCLOAK_REALM }}
+  #   with:
+  #     ref: ${{ needs.parse-inputs.outputs.ref }}
+
+  ##### BUILD ##################################################################
+
+  queue-management-frontend:
+    name: queue-management-frontend
+    needs: [parse-inputs, queue-management-frontend-cypress, appointment-frontend-cypress]
+    uses: ./.github/workflows/reusable-build-dockerfile.yaml
+    secrets:
+      artifactory-password: ${{ secrets.ARTIFACTORY_PASSWORD }}
+      artifactory-registry: ${{ secrets.ARTIFACTORY_REGISTRY }}
+      artifactory-username: ${{ secrets.ARTIFACTORY_USERNAME }}
+      namespace-theq: ${{ secrets.LICENCE_PLATE_THEQ }}-tools
+      namespace-theq-password: ${{ secrets.SA_PASSWORD_THEQ_TOOLS }}
+      namespace-theq-username: ${{ secrets.SA_USERNAME }}
+      namespace-qms: ${{ secrets.LICENCE_PLATE_QMS }}-tools
+      namespace-qms-password: ${{ secrets.SA_PASSWORD_QMS_TOOLS }}
+      namespace-qms-username: ${{ secrets.SA_USERNAME }}
+      openshift-registry: ${{ secrets.OPENSHIFT_REGISTRY }}
+    with:
+      ref: ${{ needs.parse-inputs.outputs.ref }}
+      directory: frontend
+      image-name: queue-management-nginx-frontend-vue3
+      image-tags: ${{ needs.parse-inputs.outputs.image-tag }}
+      push-qms: ${{ needs.parse-inputs.outputs.push-qms == 'true' }}
+      push-theq: ${{ needs.parse-inputs.outputs.push-theq == 'true' }}
+
+
+  ##### DEPLOY #################################################################
+
+  tag:
+    name: Tag
+    if: github.repository_owner == 'bcgov'
+    needs: [parse-inputs, appointment-frontend, feedback-api, notifications-api, queue-management-api, queue-management-frontend, send-appointment-reminder-crond]
+    uses: ./.github/workflows/reusable-tag-image.yaml
+    secrets:
+      licence-plate: ${{ needs.parse-inputs.outputs.push-qms == 'true' && secrets.LICENCE_PLATE_QMS || secrets.LICENCE_PLATE_THEQ }}
+      openshift-api: ${{ secrets.OPENSHIFT_API }}
+      token: ${{ needs.parse-inputs.outputs.push-qms == 'true' && secrets.SA_PASSWORD_QMS_TOOLS || secrets.SA_PASSWORD_THEQ_TOOLS }}
+    with:
+      image-names: queue-management-nginx-frontend-vue3
+      tag-from: ${{ needs.parse-inputs.outputs.image-tag }}
+      tag-to: ${{ needs.parse-inputs.outputs.environment }}
+
+  wait-for-rollouts:
+    name: Wait for Rollouts
+    if: github.repository_owner == 'bcgov'
+    needs: [parse-inputs, tag]
+    uses: ./.github/workflows/reusable-wait-for-rollouts.yaml
+    secrets:
+      licence-plate: ${{ needs.parse-inputs.outputs.push-qms == 'true' && secrets.LICENCE_PLATE_QMS || secrets.LICENCE_PLATE_THEQ }}
+      openshift-api: ${{ secrets.OPENSHIFT_API }}
+      token: ${{ needs.parse-inputs.outputs.push-qms == 'true' && secrets.SA_PASSWORD_QMS_DEV || ( needs.parse-inputs.outputs.environment == 'dev' && secrets.SA_PASSWORD_THEQ_DEV || secrets.SA_PASSWORD_THEQ_TEST ) }}
+    with:
+      image-names: queue-management-nginx-frontend-vue3
+      tag-to: ${{ needs.parse-inputs.outputs.environment }}
+
+  ##### TEST ###################################################################
+
+  owasp-staff:
+    name: OWASP ZAP Scan of Staff Frontend
+    needs: [parse-inputs, wait-for-rollouts]
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Get Parameters
+        run: |
+          if [ ${{ needs.parse-inputs.outputs.push-qms }} == true ]; then
+            echo "ZAP_URL=${{ secrets.ZAP_STAFFURL_QMS_DEV }}" >> $GITHUB_ENV
+          elif [ ${{ needs.parse-inputs.outputs.environment }} == dev ]; then
+            echo "ZAP_URL=${{ secrets.ZAP_STAFFURL_THEQ_DEV }}" >> $GITHUB_ENV
+          else
+            echo "ZAP_URL=${{ secrets.ZAP_STAFFURL_THEQ_TEST }}" >> $GITHUB_ENV
+          fi
+      - name: OWASP ZAP Scan
+        uses: zaproxy/[email protected]
+        with:
+          allow_issue_writing: false
+          cmd_options: '-z "-config scanner.threadPerHost=20"'
+          target: ${{ env.ZAP_URL }}
+
+      - name: Upload Report as Artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: OWASP ZAP - Staff Front End Report
+          path: report_html.html
+
+      - name: Upload Report as Artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: OWASP ZAP - Appointment Front End Report
+          path: report_html.html

frontend/.babelrc

@@ -0,0 +1,16 @@
+{
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "targets": {
+              "node": "current"
+            }
+          }
+        ]
+      ]
+    }
+  }
+}

frontend/.editorconfig

@@ -1,9 +1,13 @@
+# editorconfig.org
 root = true
 
 [*]
-charset = utf-8
 indent_style = space
 indent_size = 2
 end_of_line = lf
-insert_final_newline = true
+charset = utf-8
 trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

frontend/.eslintrc.js

@@ -1,95 +1,51 @@
-// http://eslint.org/docs/user-guide/configuring
-
-// module.exports = {
-//   root: true,
-//   parser: "babel-eslint",
-//   parserOptions: {
-//     sourceType: "module"
-//   },
-//   env: {
-//     browser: true
-//   },
-//   // required to lint *.vue files
-//   // plugins: [
-//   //   'html'
-//   // ],
-//   // add your custom rules here
-//   rules: {
-//     // allow debugger during development
-//     "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0
-//   }
-// };
-
 module.exports = {
-  root: false,
+  parser: '@typescript-eslint/parser',
   env: {
-    node: true
-  },
-  extends: ["plugin:vue/essential", "@vue/standard", "@vue/typescript"],
-  rules: {
-    strict: "off",
-    "no-console": "warn",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
-    // "sort-imports": "error",
-    "space-before-function-paren": 1,
-    quotes: ["warn", "single", { avoidEscape: true }],
-    "vue/no-unused-components": "warn",
-    "sort-imports": "warn",
-    camelcase: "warn",
-    "vue/valid-template-root": "warn",
-    "indent": ["warn", 2],
-    "eqeqeq": "warn",
-    "handle-callback-err": "warn",
-    "prefer-promise-reject-errors": "warn",
-    "no-unused-vars": "warn",
-    "no-undef": "warn",
-    "new-cap": "warn",
-    "vue/return-in-computed-property": "warn",
-    "vue/require-v-for-key": "warn",
-    "vue/no-side-effects-in-computed-properties": "warn",
-    "vue/valid-v-for": "warn",
-    "no-mixed-operators": "warn",
-    "vue/no-parsing-error": "warn",
-    "vue/no-unused-vars": "warn",
-    "vue/no-use-v-if-with-v-for": "warn",
-    "no-unused-expressions": "warn",
-    "semi": "warn",
-    "no-case-declarations": "warn",
-    "space-in-parens": "warn",
-    "no-throw-literal": "warn",
-    "key-spacing": "warn",
-    "space-infix-ops": "warn",
-    "operator-linebreak": "warn",
-    "eol-last": "warn",
-    "padded-blocks": "warn",
-    "comma-spacing": "warn",
-    "no-trailing-spaces": "warn",
-    "no-multiple-empty-lines": "warn",
-    "brace-style": "warn",
-    "dot-notation": "warn",
-    "no-redeclare": "warn",
-    "no-multi-spaces": "warn",
-    "no-tabs": "warn",
-    "no-mixed-spaces-and-tabs": "warn",
-    "space-unary-ops": "warn",
-    "keyword-spacing": "warn",
-    "no-return-assign": "warn",
-    "no-shadow-restricted-names": "warn",
-    "multiline-ternary": "off",
-    "array-callback-return": "off",
-    "node/handle-callback-err": "off",
-    "prefer-regex-literals": "off"
+    browser: true,
+    es2021: true
   },
+  extends: [
+    'google',
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/base',
+    'plugin:vue/essential',
+    'plugin:vue/recommended',
+    'plugin:vue/strongly-recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:vue/vue3-strongly-recommended',
+    '@vue/standard',
+    '@vue/typescript'
+  ],
   parserOptions: {
-    parser: "@typescript-eslint/parser"
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  },
+  plugins: ['vue', '@typescript-eslint'],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'max-len': ['warn', { code: 120, ignoreRegExpLiterals: true }],
+    'vue/attribute-hyphenation': 'off',
+    'vue/multi-word-component-names': 'off',
+    'vue/no-deprecated-filter': 'warn',
+    'vue/no-deprecated-slot-scope-attribute': 'warn',
+    'vue/no-deprecated-v-on-native-modifier': 'warn',
+    'vue/no-v-for-template-key-on-child': 'warn',
+    'vue/v-on-event-hyphenation': 'off',
+    '@typescript-eslint/ban-types': 'warn',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-explicit-any': 'off'
   },
   overrides: [
     {
-      files: ["*.js", "*.vue"],
-      rules: {
-        "@typescript-eslint/no-var-requires": "off"
+      files: ['*.vue'],
+      parser: 'vue-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+        ecmaVersion: 2020
       }
     }
-  ],
-  ignorePatterns: ['*.GENERATED.*']
-};
+  ]
+}