View Definition Auto Migration

e2e-tests/data/valid-view.json

@@ -315,7 +315,6 @@
             "layers": [
               {
                 "activityColor": "#283593",
-                "activityHeight": 20,
                 "chartType": "activity",
                 "filter": {
                   "activity": {

e2e-tests/fixtures/View.ts

@@ -12,6 +12,7 @@ export class View {
   navButtonViewSaveAsMenuButton: Locator;
   navButtonViewSavedViewsMenuButton: Locator;
   navButtonViewUploadViewMenuButton: Locator;
+  outOfDateViewFilePath: string = 'src/tests/mocks/view/v0/view.json';
   renameViewMenuSaveViewButton: Locator;
   saveAsMenuSaveAsButton: Locator;
   table: Locator;

e2e-tests/tests/view.test.ts

@@ -106,4 +106,15 @@ test.describe.serial('View', () => {
     await page.locator('.modal .st-button:has-text("Upload View")').click();
     await expect(page.locator('.modal')).not.toBeVisible();
   });
+
+  test(`Selecting an out of date view file should not display an error and not prevent the file from being uploaded`, async () => {
+    await view.openViewMenu();
+    await expect(view.navButtonViewUploadViewMenuButton).toBeVisible();
+    await view.navButtonViewUploadViewMenuButton.click();
+    await view.fillViewInputName();
+    await view.fillViewInputFile(view.outOfDateViewFilePath);
+    await expect(page.locator('.modal-content .error')).not.toBeVisible();
+    await page.locator('.modal .st-button:has-text("Upload View")').click();
+    await expect(page.locator('.modal')).not.toBeVisible();
+  });
 });

src/components/modals/SavedViewsModal.svelte

@@ -61,9 +61,9 @@
     }
   }
 
-  async function getFullView(viewId: number): Promise<View | null> {
+  async function getFullView(viewId: number, migrate: boolean = true): Promise<View | null> {
     const query = new URLSearchParams(`?${SearchParameters.VIEW_ID}=${viewId}`);
-    return await effects.getView(query, user);
+    return await effects.getView(query, user, migrate);
   }
 
   async function openView({ detail: viewId }: CustomEvent<number>) {
@@ -78,7 +78,7 @@
   }
 
   async function downloadView({ detail: viewId }: CustomEvent<number>) {
-    const view = await getFullView(viewId);
+    const view = await getFullView(viewId, false);
     if (view !== null) {
       downloadViewUtil(view);
       dispatch('close');

src/components/modals/UploadViewModal.svelte

@@ -77,6 +77,7 @@
         name="file"
         required
         type="file"
+        accept="application/json"
         bind:files
         on:click={onClick}
         on:change={onChange}

src/constants/view.ts

@@ -69,3 +69,7 @@ export const ViewXRangeLayerSchemePresets: Record<XRangeLayerColorScheme, readon
   schemeSet3,
   schemeTableau10,
 };
+
+export const viewSchemaVersion = 1;
+
+export const viewSchemaVersionName = `v${viewSchemaVersion}`;

src/routes/plans/[id]/+page.svelte

@@ -527,7 +527,7 @@
     const { detail } = event;
     const { definition, id, name, owner } = detail;
     if (id != null && hasUpdateViewPermission) {
-      const success = await effects.updateView(id, { definition, name, owner }, data.user);
+      const success = await effects.updateView(id, { definition, name, owner }, null, data.user);
       if (success) {
         resetOriginalView();
       }

src/routes/plans/[id]/+page.ts

@@ -49,6 +49,7 @@ export const load: PageLoad = async ({ parent, params, url }) => {
       const initialView = await effects.getView(
         url.searchParams,
         user,
+        true,
         initialActivityTypes,
         initialResourceTypes,
         initialExternalEventTypes,

src/schemas/index.ts

@@ -0,0 +1,7 @@
+import * as v0 from './ui-view-schema-v0.json';
+import * as v1 from './ui-view-schema-v1.json';
+
+export default {
+  v0,
+  v1,
+};