Upgrade frontend to Vue 2.7

.github/workflows/frontend-ci.yml

@@ -23,8 +23,8 @@ jobs:
       - name: Lint Vue app
         run: yarn run lint --no-fix
 
-      - name: Type-check Vue templates
-        run: yarn run lint:templates
+      - name: Type-check Vue app
+        run: yarn run type
 
       - name: Build Vue app
         run: yarn run build
@@ -135,12 +135,6 @@ jobs:
         run: yarn install --frozen-lockfile --prefer-offline
         working-directory: web
 
-      - name: Lint web app
-        run: |
-          yarn run lint --no-fix --max-warnings=0
-          yarn run lint:templates
-        working-directory: web
-
       - name: Set up Python
         uses: actions/setup-python@v2
         with:

web/package.json

@@ -6,7 +6,7 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "lint:templates": "vue-type-check --workspace . --srcDir src/",
+    "type": "vue-tsc --noEmit",
     "migrate": "ts-node src/migrate.ts"
   },
   "dependencies": {
@@ -15,7 +15,6 @@
     "@koumoul/vjsf": "^2.5.2",
     "@sentry/browser": "^6.3.6",
     "@sentry/integrations": "^6.3.6",
-    "@vue/composition-api": "^1.0.0-rc.8",
     "ajv": "^8.3.0",
     "axios": "^0.21.2",
     "core-js": "^3.12.1",
@@ -24,10 +23,10 @@
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
-    "vue": "^2.6.11",
+    "vue": "^2.7.10",
     "vue-cookie-law": "^1.13.3",
     "vue-gtag": "^1.16.1",
-    "vue-router": "^3.5.1",
+    "vue-router": "^3.6.4",
     "vue-social-sharing": "^3.0.8",
     "vuetify": "~2.3.6",
     "vuex": "^3.6.2",
@@ -37,29 +36,28 @@
     "@types/js-yaml": "^4.0.1",
     "@types/json-schema": "^7.0.7",
     "@types/lodash": "^4.14.168",
-    "@typescript-eslint/eslint-plugin": "^4.23.0",
-    "@typescript-eslint/parser": "^4.23.0",
-    "@vue/cli-plugin-babel": "^4.5.13",
-    "@vue/cli-plugin-eslint": "^4.5.13",
-    "@vue/cli-plugin-typescript": "^4.5.13",
-    "@vue/cli-service": "^4.5.13",
+    "@typescript-eslint/eslint-plugin": "^5.36.1",
+    "@typescript-eslint/parser": "^5.36.1",
+    "@vue/cli-plugin-babel": "^4.5.19",
+    "@vue/cli-plugin-eslint": "^4.5.19",
+    "@vue/cli-plugin-typescript": "^4.5.19",
+    "@vue/cli-service": "^4.5.19",
     "@vue/eslint-config-airbnb": "^5.3.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.26.0",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-vue": "^7.9.0",
-    "eslint-plugin-vuetify": "^1.0.0-beta.8",
+    "eslint-plugin-vue": "^9.4.0",
+    "eslint-plugin-vuetify": "^1.1.0",
     "json-schema-to-typescript": "^10.1.5",
     "moment-locales-webpack-plugin": "^1.2.0",
-    "sass": "^1.32.12",
+    "sass": "~1.32.12",
     "sass-loader": "^10.2.0",
     "ts-node": "^10.4.0",
-    "typescript": "^4.2.4",
+    "typescript": "^4.8.2",
     "vue-cli-plugin-vuetify": "^2.4.0",
-    "vue-template-compiler": "^2.6.11",
-    "vue-type-check": "^1.1.0",
-    "vuetify-loader": "^1.7.2"
+    "vue-tsc": "^0.40.5",
+    "vuetify-loader": "^1.9.2"
   },
   "postcss": {
     "plugins": {

web/src/App.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref } from '@vue/composition-api';
+import { defineComponent, onMounted, ref } from 'vue';
 
 import { dandiRest } from '@/rest';
 import store from '@/store';

web/src/components/AppBar/ApiKeyItem.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from '@vue/composition-api';
+import { defineComponent, ref } from 'vue';
 
 import CopyText from '@/components/CopyText.vue';
 import { dandiRest } from '@/rest';

web/src/components/AppBar/AppBar.vue

@@ -133,7 +133,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from '@vue/composition-api';
+import { computed, defineComponent } from 'vue';
 
 import {
   cookiesEnabled as cookiesEnabledFunc,
@@ -145,6 +145,7 @@ import {
   dandiAboutUrl, dandiDocumentationUrl, dandiHelpUrl, dandihubUrl,
 } from '@/utils/constants';
 import UserMenu from '@/components/AppBar/UserMenu.vue';
+import { useRoute } from 'vue-router/composables';
 
 interface NavigationItem {
   text: string,
@@ -156,9 +157,9 @@ interface NavigationItem {
 export default defineComponent({
   name: 'AppBar',
   components: { UserMenu },
-  setup(props, ctx) {
+  setup() {
     const returnObject = computed(() => {
-      const { name, query, params } = ctx.root.$route;
+      const { name, query, params } = useRoute();
       return JSON.stringify({ name, query, params });
     });
 

web/src/components/AppBar/UserMenu.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from '@vue/composition-api';
+import { computed, defineComponent } from 'vue';
 
 import { user as userFunc, dandiRest } from '@/rest';
 import ApiKeyItem from '@/components/AppBar/ApiKeyItem.vue';

web/src/components/CopyText.vue

@@ -54,7 +54,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, Ref, ref } from '@vue/composition-api';
+import { defineComponent, Ref, ref } from 'vue';
 
 export default defineComponent({
   name: 'ApiKeyItem',

web/src/components/DLP/AccessInformationTab.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'AccessInformationTab',

web/src/components/DLP/AssetSummaryTab.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'AssetSummaryTab',

web/src/components/DLP/ContributorsTab.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'ContributorsTab',

web/src/components/DLP/DandisetOwnersDialog.vue

@@ -10,7 +10,7 @@
         :small="$vuetify.breakpoint.xs"
         color="info"
         elevation="0"
-        @click="save() && $emit('close')"
+        @click="save()"
       >
         Done
       </v-btn>
@@ -218,7 +218,7 @@ import { dandiRest } from '@/rest';
 import store from '@/store';
 import {
   computed, defineComponent, Ref, ref, watch,
-} from '@vue/composition-api';
+} from 'vue';
 import { User } from '@/types';
 
 export default defineComponent({
@@ -229,7 +229,7 @@ export default defineComponent({
       required: true,
     },
   },
-  setup() {
+  setup(props, ctx) {
     const currentDandiset = computed(() => store.state.dandiset.dandiset);
     const owners = computed(() => store.state.dandiset.owners);
 
@@ -342,6 +342,7 @@ export default defineComponent({
         setOwners(data);
         adminWarningDisplay.value = false;
       }
+      ctx.emit('close');
     }
 
     return {

web/src/components/DLP/MetadataCard.vue

@@ -74,7 +74,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from '@vue/composition-api';
+import {
+  computed, defineComponent, getCurrentInstance, PropType,
+} from 'vue';
 
 // The maximum amount of columns to show on a metadata card,
 // regardless of how many entries there are.
@@ -100,15 +102,15 @@ export default defineComponent({
       required: true,
     },
   },
-  setup(props, ctx) {
-    const { $vuetify } = ctx.root;
+  setup(props) {
+    const $vuetify = computed(() => getCurrentInstance()?.proxy.$vuetify);
 
-    const borderLeftColor = computed(() => $vuetify.theme.themes.light.primary);
+    const borderLeftColor = computed(() => $vuetify.value?.theme.themes.light.primary);
 
     // Try to estimate the ideal number of columns to break the items into.
     // When viewing on a smaller screen, force the number of columns to 1.
     const columnCount = computed(
-      () => ($vuetify.breakpoint.mdAndDown
+      () => ($vuetify.value?.breakpoint.mdAndDown
         ? 1 : Math.min(Math.ceil(props.items.length / 2), MAX_COLUMNS)),
     );
 

web/src/components/DLP/OverviewTab.vue

@@ -206,8 +206,8 @@ import { AssociatedProjects, DandisetMetadata, RelatedResource } from '@/types';
 import {
   computed,
   ComputedRef,
-  defineComponent, PropType,
-} from '@vue/composition-api';
+  defineComponent, getCurrentInstance, PropType,
+} from 'vue';
 
 import MetadataCard from '@/components/DLP/MetadataCard.vue';
 
@@ -245,7 +245,9 @@ export default defineComponent({
       required: true,
     },
   },
-  setup(props, ctx) {
+  setup(props) {
+    const $vuetify = computed(() => getCurrentInstance()?.proxy.$vuetify);
+
     const contributors = computed(
       () => props.meta.contributor?.filter(
         (contributor) => !!(contributor.includeInCitation) && !!(contributor.schemaKey === 'Person'),
@@ -267,7 +269,7 @@ export default defineComponent({
       () => props.meta.wasGeneratedBy,
     );
 
-    const assetSummary = computed(
+    const assetSummary = computed<Record<string, any>>(
       () => Object.fromEntries(Object.entries(props.meta.assetsSummary).filter(
         // filter out assetSummary fields we don't want to display
         ([key, value]) => !!value && !ASSET_SUMMARY_BLACKLIST.has(key),
@@ -284,7 +286,7 @@ export default defineComponent({
 
     // Approximate a good column count for asset summary card
     const assetSummaryColumnCount = computed(
-      () => (ctx.root.$vuetify.breakpoint.mdAndDown ? 1
+      () => ($vuetify.value?.breakpoint.mdAndDown ? 1
         : Math.min(Object.keys(assetSummary.value).length, 3)),
     );
 

web/src/components/DLP/RelatedResourcesTab.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'RelatedResourcesTab',

web/src/components/DLP/SubjectMatterTab.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'SubjectMatterTab',

web/src/components/DandiFooter.vue

@@ -78,7 +78,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent } from 'vue';
 import CookieLaw from 'vue-cookie-law';
 
 import { dandiAboutUrl } from '@/utils/constants';

web/src/components/DandisetList.vue

@@ -78,7 +78,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, PropType } from '@vue/composition-api';
+import { defineComponent, computed, PropType } from 'vue';
+import { useRoute } from 'vue-router/composables';
 import moment from 'moment';
 import filesize from 'filesize';
 
@@ -93,18 +94,16 @@ export default defineComponent({
       required: true,
     },
   },
-  setup(props, ctx) {
-    // Will be replaced by `useRoute` if vue-router is upgraded to vue-router@next
-    // https://next.router.vuejs.org/api/#useroute
-    const route = ctx.root.$route;
+  setup() {
+    const route = useRoute();
 
     const origin = computed(() => {
       const { name, params, query } = route;
       return { name, params, query };
     });
     // current position in search result set = items on prev pages + position on current page
     function getPos(index: number) {
-      return (Number(ctx.root.$route.query.page || 1) - 1) * DANDISETS_PER_PAGE + (index + 1);
+      return (Number(route.query.page || 1) - 1) * DANDISETS_PER_PAGE + (index + 1);
     }
     function formatDate(date: string) {
       return moment(date).format('LL');

web/src/components/DandisetSearchField.vue

@@ -24,8 +24,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from '@vue/composition-api';
+import { defineComponent, ref } from 'vue';
 import { RawLocation } from 'vue-router';
+import { useRoute } from 'vue-router/composables';
+import router from '@/router';
 
 export default defineComponent({
   name: 'DandisetSearchField',
@@ -36,8 +38,9 @@ export default defineComponent({
       default: true,
     },
   },
-  setup(props, ctx) {
-    const currentSearch = ref(ctx.root.$route.query.search || '');
+  setup() {
+    const route = useRoute();
+    const currentSearch = ref(route.query.search || '');
 
     function updateSearch(search: string) {
       currentSearch.value = search;
@@ -46,8 +49,6 @@ export default defineComponent({
     function performSearch(evt: Event) {
       evt.preventDefault(); // prevent form submission from refreshing page
 
-      const router = ctx.root.$router;
-      const route = ctx.root.$route;
       if (currentSearch.value === route.query.search) {
         // nothing has changed, do nothing
         return;