Upgrade webapp to Vue 3 (#1504)

* [VueUpgrade] start fresh project

* Initial setup graphql

* Fixed dev dependecies

* Changed from webpack to vite

* set tailwind and basic config

* Copying metaspace header

* Copied metaspace header partially

* Setup vitest

* [Test] setup vitest ts config

* Added metaspace footer

* Added sign and creat diags

* Updating filter panel component

* Fixing filter persistence issues

* fixed adduct filter warnings

* [SearchableFilters] fixed tests

* [Tests] set global stubs

* [Tests] fixed filter apollo client on init

* [Tests] renamed mocks

* [Annotation] added pagination

* [AnnotatioPage] added pagination controls

* [AnnotationPage] selected columns mechanism

* [AnnotationTable] adjust new feature badge component

* [AnnotationTable] finished converting annotation table

* [AnnotationTable] converted tests

* [AnnotationView] selected annotation info copy

* [AnnotationView] image viewer header

* [IonImage] replicating ion image

* Tsconfig fix

* [IonImageViewer] changed to vue3

* [AnnotationView] fixed multi channel selector

* [NewFeatureBadge] updated tests

* [ImageViewer] fixed tests

* [AnnotationView] fixed restored state

* [AnnotationView] converted compounds view

* [AnnotationView] converted related annotations view

* [RelatedAnnotations] fixed css

* [AnnotationView] updated diagnostics view

* [AnnotationView] fixed el noritfy style and diagnostics loading

* [AnnotationView] replicated diagnostics component

* [Filters] fixed adduct filter

* [AnnotationView] copied main image component

* [Aboutpage] copied

* [HelpPage] updated help page

* Change scroll behaviour on page change

* [DatasetTable] started datasets page copy

* [DatasetTable] fixing tests

* [ElapsedTime] fixed test

* [UploadPage] started transition to v3

* [UploadPage] updated tests to vitest

* [ProjectPage] porting project page to vue 3

* [ProjectList] fixed create project component

* [ProjecPage] fixed members tab

* [ProjectPage] fixed project tests

* fixed ts warnings

* [Groups] copied group page

* [GroupList] fixed tests

* fixed molecular databases and groups tests

* [DatasetOverview] copied ds overview page

* [DatasetComparisonDialog] fixed tests

* [DatasetOverview] fixed tests

* [DatasetComparisonPage] upgrade to vue3

* [ImzmlBrowserPage] Upgraded to vue 3

* [DatasetEnrichment] migrated to v3

* [DatasetSummary] upgraded to vue 3

* [ImageLoader] upgraded image loader

* fixed tests

* [Detectability] ported to v3

* [UserProfile] migrated to v3

* [Admin] upgraded to v3

* [PublicationPage] upgraded to v3

* [Design] upgraded to v3

* [RoiSettings] fixed load ROI

* postcss upgrade

* fixed formsection scss import typo

* added elementplus css

* fixed group by id load

* change postcss tailwind strategy

* main svg load change

* [Tours] started tour migration

* [TourStep] fixed anchors

* [e2e] cypress config

* Upgraded feat/ml_meta PR 1450 to vue 3

* Linted and prettied code

* Set element-plu base import

* Changed default element-plus import'

* Upgraded PR 1452 to vue 3

* Upgraded PR 1462 to vue 3

* upgraded PR 1455 to vue 3

* upgraded PR 1473 to vue 3

* upgraded PR 1475 to vue 3

* Fixed missing element plus missing icons

* [MemberList] showing email just if valid

* replaced webapp to v3

* [CircleCi] updated webapp image

* [CircleCi] updated webapp image to circlecynode

* [webapp] pushed template clientConfig

* [webapp] removed clientConfig from tracking

* [Webapp] installed coverage lib

* [webapp] removed coverage for testing

* [webapp] added verboseto test

* moved schema for tests

* [ElapsedTime] changed component to moment

* [Test webapp] set default timezone for test

* [webappTest] start fixed date and updated snapshots

* [ViewProjectPage] mocking loading on test

* fixe file lint

* [Filterpanel] remove promise

* [FilterPanel] increased test timeout

* Upgraded PR #1494 to vue3

* [DatabaseFilter] fixed update after dataset filter removal

* [Webapp] added circle ci prettier step

* Fixed circle ci prettier step

* Added prettier ignore

* Fixed prettier ignore file

* [Vietest] fixed type problems

* [DatasetOverview] fixed dataset dialog compare first load and update composable version

* [DatasetComparison] fixed toggle optical image

* [UploadPage] fixed initial current user info loading on fail

* [CircleCi] changed webapp test image to official one

* [Webapp] updated readme

.circleci/config.yml

@@ -110,7 +110,7 @@ jobs:
 
   test-webapp:
     docker:
-      - image: metaspace2020/sm-webapp:0.11
+      - image: metaspace2020/sm-webapp:0.12
 
     working_directory: ~/metaspace/metaspace/webapp
     steps:
@@ -150,11 +150,14 @@ jobs:
           name: Lint code
           when: always
           command: yarn run lint --max-warnings 0 --no-fix
+      - run:
+          name: Prettier code style check
+          when: always
+          command: yarn run format-check
       - run:
           name: Run tests
           command: |
-            cp ~/workspace/graphql-schema.json ./tests/utils/graphql-schema.json
-            yarn run test-ci --coverage --maxWorkers=2
+            yarn run test-ci --mode CI --coverage
       - run:
           name: Upload coverage
           command: |

metaspace/webapp/.eslintrc.cjs

@@ -0,0 +1,60 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  rules: {
+    'vue/multi-word-component-names': 'off',
+    'vue/no-v-text-v-html-on-component': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    'vue/require-default-prop': 'off', // Will props even be relevant if we shift to the Composition API?
+    'vue/require-prop-types': 'off', // Will props even be relevant if we shift to the Composition API?
+    'vue/html-self-closing': ['off'], // Unnecessarily forces template style to differ from TSX
+    'vue/no-v-html': ['off'],
+    'no-mixed-operators': ['off'],
+
+    'no-unused-vars': ['off'], // Does not work well with TypeScript
+    'import/no-duplicates': ['off'], // This keeps breaking stuff: https://github.com/benmosher/eslint-plugin-import/issues/1504
+
+    'space-before-function-paren': ['off'], // Opinion
+    'vue/max-len': [
+      'warn',
+      {
+        // Opinion
+        code: 120,
+        template: 200,
+        ignoreComments: true,
+      },
+    ],
+  },
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+    jest: true,
+  },
+  root: true,
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    'plugin:prettier/recommended',
+  ],
+  overrides: [
+    {
+      files: ['*.vue', '*.tsx'],
+      rules: {
+        // Disable the rule that conflicts with your `onUpdate:modelValue` syntax
+        '@typescript-eslint/ban-ts-comment': 'off',
+        'vue/valid-v-model': 'off', // If you get errors about v-model on components
+      },
+    },
+    {
+      files: ['**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}', 'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}'],
+      extends: ['plugin:cypress/recommended'],
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+  },
+}

metaspace/webapp/.gitignore

@@ -6,7 +6,7 @@ coverage*
 /src/lib/metadataSchemas
 
 # Copy of graphql schema for tests
-/tests/utils/graphql-schema.json
+#/tests/utils/graphql-schema.json
 
 # Compiled output
 stats.json

metaspace/webapp/.prettierignore

@@ -0,0 +1,25 @@
+*.d.ts
+src/**/*.d.ts
+
+clientConfig.json
+db.sqlite
+coverage*
+
+# Dereferenced metadata files
+/src/lib/metadataSchemas
+
+# Copy of graphql schema for tests
+#/tests/utils/graphql-schema.json
+
+# Compiled output
+stats.json
+
+# Passwords and other sensitive data
+conf.js
+src/clientConfig.json
+
+# Screenshots taken by testcafe
+tests/e2e/screenshots
+
+# Build output
+/dist

metaspace/webapp/.prettierrc.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "useTabs": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 120,
+  "trailingComma": "es5"
+}