View subscription refactor and bug fixes (#1021)

* Use capture for context menu keydown and stop propagation on escape keydown if shown
* Do not include view definition in view subscription and full view on demand. 
* Fix bug with deletion of views.
* Fix delete view permissions check

src/components/context-menu/ContextMenu.svelte

@@ -63,13 +63,14 @@
   }
 
   function onKeyDown(event: KeyboardEvent) {
-    if (event.key === 'Escape') {
+    if (shown && event.key === 'Escape') {
       hide(true);
+      event.stopPropagation();
     }
   }
 </script>
 
-<svelte:body on:click={() => hide(true)} on:keydown={onKeyDown} />
+<svelte:body on:click={() => hide(true)} on:keydown|capture={onKeyDown} />
 
 {#if shown}
   <!-- svelte-ignore a11y-mouse-events-have-key-events -->

src/components/modals/SavedViewsModal.svelte

@@ -5,9 +5,10 @@
   import { SearchParameters } from '../../enums/searchParameters';
   import { initializeView, view, views } from '../../stores/views';
   import type { User } from '../../types/app';
-  import type { View } from '../../types/view';
+  import type { View, ViewSlim } from '../../types/view';
   import effects from '../../utilities/effects';
   import { setQueryParam } from '../../utilities/generic';
+  import { downloadView as downloadViewUtil } from '../../utilities/view';
   import Tab from '../ui/Tabs/Tab.svelte';
   import TabPanel from '../ui/Tabs/TabPanel.svelte';
   import Tabs from '../ui/Tabs/Tabs.svelte';
@@ -22,12 +23,12 @@
 
   const dispatch = createEventDispatcher();
 
-  let userViews: View[] = [];
+  let userViews: ViewSlim[] = [];
 
-  $: userViews = $views.filter((view: View) => view.owner === user?.id);
+  $: userViews = $views.filter((view: ViewSlim) => view.owner === user?.id);
 
   async function deleteView({ detail: viewId }: CustomEvent<number>) {
-    const matchingView = userViews.find(v => v.id === viewId);
+    const matchingView = $views.find(v => v.id === viewId);
     if (matchingView) {
       const success = await effects.deleteView(matchingView, user);
 
@@ -40,7 +41,7 @@
   }
 
   async function deleteViews({ detail: viewIds }: CustomEvent<number[]>) {
-    const matchingViews = userViews.filter(v => viewIds.some(viewId => viewId === v.id));
+    const matchingViews = $views.filter(v => viewIds.some(viewId => viewId === v.id));
     const success = await effects.deleteViews(matchingViews, user);
 
     if (success) {
@@ -58,13 +59,26 @@
     }
   }
 
-  async function openView({ detail: viewId }: CustomEvent<number>) {
+  async function getFullView(viewId: number): Promise<View | null> {
     const query = new URLSearchParams(`?${SearchParameters.VIEW_ID}=${viewId}`);
-    const newView = await effects.getView(query, user);
+    return await effects.getView(query, user);
+  }
+
+  async function openView({ detail: viewId }: CustomEvent<number>) {
+    const view = await getFullView(viewId);
+    if (view !== null) {
+      initializeView({ ...view });
+      setQueryParam(SearchParameters.VIEW_ID, `${view.id}`);
+      dispatch('close');
+    } else {
+      console.log(`No view found for ID: ${viewId}`);
+    }
+  }
 
-    if (view !== null && newView !== null) {
-      initializeView({ ...newView });
-      setQueryParam(SearchParameters.VIEW_ID, `${newView.id}`);
+  async function downloadView({ detail: viewId }: CustomEvent<number>) {
+    const view = await getFullView(viewId);
+    if (view !== null) {
+      downloadViewUtil(view);
       dispatch('close');
     } else {
       console.log(`No view found for ID: ${viewId}`);
@@ -87,6 +101,7 @@
           on:deleteView={deleteView}
           on:deleteViews={deleteViews}
           on:openView={openView}
+          on:downloadView={downloadView}
         />
       </TabPanel>
       <TabPanel>
@@ -96,6 +111,7 @@
           on:deleteView={deleteView}
           on:deleteViews={deleteViews}
           on:openView={openView}
+          on:downloadView={downloadView}
         />
       </TabPanel>
     </Tabs>

src/components/view/ViewsTable.svelte

@@ -5,21 +5,20 @@
   import { createEventDispatcher } from 'svelte';
   import type { User } from '../../types/app';
   import type { DataGridColumnDef } from '../../types/data-grid';
-  import type { View } from '../../types/view';
+  import type { View, ViewSlim } from '../../types/view';
   import { featurePermissions } from '../../utilities/permissions';
-  import { downloadView as downloadViewUtil } from '../../utilities/view';
   import BulkActionDataGrid from '../ui/DataGrid/BulkActionDataGrid.svelte';
   import DataGridActions from '../ui/DataGrid/DataGridActions.svelte';
 
-  export let views: View[] = [];
+  export let views: ViewSlim[] = [];
   export let user: User | null;
 
   type CellRendererParams = {
-    deleteView: (view: View) => void;
-    downloadView: (view: View) => void;
-    openView: (view: View) => void;
+    deleteView: (view: ViewSlim) => void;
+    downloadView: (view: ViewSlim) => void;
+    openView: (view: ViewSlim) => void;
   };
-  type ViewCellRendererParams = ICellRendererParams<View> & CellRendererParams;
+  type ViewCellRendererParams = ICellRendererParams<ViewSlim> & CellRendererParams;
 
   const dispatch = createEventDispatcher();
   const baseColumnDefs: DataGridColumnDef[] = [
@@ -91,7 +90,7 @@
       },
       cellRendererParams: {
         deleteView,
-        downloadView: downloadViewUtil,
+        downloadView,
         openView,
       } as CellRendererParams,
       field: 'actions',
@@ -104,20 +103,24 @@
     },
   ];
 
-  function deleteView({ id: viewId }: View) {
+  function deleteView({ id: viewId }: ViewSlim) {
     dispatch('deleteView', viewId);
   }
 
-  function deleteViews({ detail: views }: CustomEvent<View[]>) {
+  function downloadView({ id: viewId }: ViewSlim) {
+    dispatch('downloadView', viewId);
+  }
+
+  function deleteViews({ detail: views }: CustomEvent<ViewSlim[]>) {
     const viewIds = views.map(({ id }) => id);
     dispatch('deleteViews', viewIds);
   }
 
-  function hasDeletePermission(user: User | null, view: View) {
+  function hasDeletePermission(user: User | null, view: ViewSlim) {
     return featurePermissions.view.canDelete(user, view);
   }
 
-  function openView({ id: viewId }: Partial<View>) {
+  function openView({ id: viewId }: Partial<ViewSlim>) {
     dispatch('openView', viewId);
   }
 </script>

src/stores/views.ts

@@ -1,6 +1,6 @@
 import { isEqual } from 'lodash-es';
 import { derived, get, writable, type Writable } from 'svelte/store';
-import type { View, ViewGrid, ViewTable, ViewToggleEvent } from '../types/view';
+import type { View, ViewGrid, ViewSlim, ViewTable, ViewToggleEvent } from '../types/view';
 import { getTarget } from '../utilities/generic';
 import gql from '../utilities/gql';
 import { TimelineInteractionMode, TimelineLockStatus } from '../utilities/timeline';
@@ -9,7 +9,7 @@ import { gqlSubscribable } from './subscribable';
 
 /* Subscriptions. */
 
-export const views = gqlSubscribable<View[]>(gql.SUB_VIEWS, {}, [], null);
+export const views = gqlSubscribable<ViewSlim[]>(gql.SUB_VIEWS, {}, [], null);
 
 /* Writeable. */
 

src/types/view.ts

@@ -92,3 +92,5 @@ export type View = {
   owner: UserId;
   updated_at: string;
 };
+
+export type ViewSlim = Omit<View, 'definition'>;

src/utilities/effects.ts

@@ -125,7 +125,7 @@ import type {
   TagsSetInput,
 } from '../types/tags';
 import type { Row, Timeline } from '../types/timeline';
-import type { View, ViewDefinition, ViewInsertInput, ViewUpdateInput } from '../types/view';
+import type { View, ViewDefinition, ViewInsertInput, ViewSlim, ViewUpdateInput } from '../types/view';
 import { ActivityDeletionAction } from './activities';
 import { convertToQuery, getSearchParameterNumber, setQueryParam, sleep } from './generic';
 import gql, { convertToGQLArray } from './gql';
@@ -2171,7 +2171,7 @@ const effects = {
     }
   },
 
-  async deleteView(view: View, user: User | null): Promise<boolean> {
+  async deleteView(view: ViewSlim, user: User | null): Promise<boolean> {
     try {
       if (!queryPermissions.DELETE_VIEW(user, view)) {
         throwPermissionError('delete this view');
@@ -2186,25 +2186,27 @@ const effects = {
       if (confirm) {
         const data = await reqHasura<{ id: number }>(gql.DELETE_VIEW, { id: view.id }, user);
         if (data.deletedView != null) {
+          showSuccessToast('View Deleted Successfully');
           return true;
         } else {
           throw Error(`Unable to delete view "${view.name}"`);
         }
       }
     } catch (e) {
+      showFailureToast('View Delete Failed');
       catchError(e as Error);
     }
 
     return false;
   },
 
-  async deleteViews(views: View[], user: User | null): Promise<boolean> {
+  async deleteViews(views: ViewSlim[], user: User | null): Promise<boolean> {
     try {
       const hasPermission = views.reduce((previousValue, view) => {
-        return previousValue || queryPermissions.DELETE_VIEWS(user, view);
+        return previousValue && queryPermissions.DELETE_VIEWS(user, view);
       }, true);
       if (!hasPermission) {
-        throwPermissionError('delete these views');
+        throwPermissionError('delete one or all of these views');
       }
 
       const { confirm } = await showConfirmModal(
@@ -2225,12 +2227,14 @@ const effects = {
           if (leftoverViewIds.length > 0) {
             throw new Error(`Some views were not successfully deleted: ${leftoverViewIds.join(', ')}`);
           }
+          showSuccessToast('Views Deleted Successfully');
           return true;
         } else {
           throw Error('Unable to delete views');
         }
       }
     } catch (e) {
+      showFailureToast('View Deletes Failed');
       catchError(e as Error);
     }
 

src/utilities/gql.ts

@@ -2098,7 +2098,6 @@ const gql = {
     subscription SubViews {
       views: view {
         created_at
-        definition
         id
         name
         owner

src/utilities/permissions.ts

@@ -19,7 +19,7 @@ import type { SchedulingCondition, SchedulingGoal } from '../types/scheduling';
 import type { UserSequence } from '../types/sequencing';
 import type { Simulation, SimulationTemplate } from '../types/simulation';
 import type { Tag } from '../types/tags';
-import type { View } from '../types/view';
+import type { View, ViewSlim } from '../types/view';
 import { showFailureToast } from './toast';
 
 export const ADMIN_ROLE = 'aerie_admin';
@@ -506,10 +506,10 @@ const queryPermissions = {
   DELETE_USER_SEQUENCE: (user: User | null, sequence: AssetWithOwner<UserSequence>): boolean => {
     return isUserAdmin(user) || (getPermission(['delete_user_sequence_by_pk'], user) && isUserOwner(user, sequence));
   },
-  DELETE_VIEW: (user: User | null, view: View): boolean => {
+  DELETE_VIEW: (user: User | null, view: ViewSlim): boolean => {
     return isUserAdmin(user) || (getPermission(['delete_view_by_pk'], user) && isUserOwner(user, view));
   },
-  DELETE_VIEWS: (user: User | null, view: View): boolean => {
+  DELETE_VIEWS: (user: User | null, view: ViewSlim): boolean => {
     return isUserAdmin(user) || (getPermission(['delete_view'], user) && isUserOwner(user, view));
   },
   DUPLICATE_PLAN: (user: User | null, plan: PlanWithOwners, model: ModelWithOwner): boolean => {
@@ -870,7 +870,7 @@ interface FeaturePermissions {
   simulation: RunnableCRUDPermission<AssetWithOwner<Simulation>>;
   simulationTemplates: PlanSimulationTemplateCRUDPermission;
   tags: CRUDPermission<Tag>;
-  view: CRUDPermission<View>;
+  view: CRUDPermission<ViewSlim>;
 }
 
 const featurePermissions: FeaturePermissions = {