Add initial support for deleting plan snapshots though backend may no…

…t yet support this

src/components/menus/MenuDivider.svelte

@@ -0,0 +1,8 @@
+<hr class="menu-divider" />
+
+<style>
+  hr.menu-divider {
+    opacity: 0.3;
+    width: 90%;
+  }
+</style>

src/components/menus/PlanMenu.svelte

@@ -14,6 +14,7 @@
   import { featurePermissions } from '../../utilities/permissions';
   import Menu from '../menus/Menu.svelte';
   import MenuItem from '../menus/MenuItem.svelte';
+  import MenuDivider from './MenuDivider.svelte';
 
   export let plan: Plan;
   export let user: User | null;
@@ -66,7 +67,7 @@
         <div class="column-name">View merge requests</div>
       </MenuItem>
       {#if plan.parent_plan !== null}
-        <hr class="menu-divider" />
+        <MenuDivider />
         <MenuItem
           on:click={createMergePlanBranchRequest}
           use={[
@@ -85,7 +86,7 @@
           <div class="column-name">Open parent plan</div>
         </MenuItem>
       {/if}
-      <hr class="menu-divider" />
+      <MenuDivider />
       <MenuItem on:click={createPlanSnapshot}>
         <div class="column-name">Take Snapshot</div>
       </MenuItem>

src/components/plan/PlanForm.svelte

@@ -151,6 +151,7 @@
               {planSnapshot}
               on:click={() => setQueryParam(SearchParameters.SNAPSHOT_ID, `${planSnapshot.snapshot_id}`)}
               on:restore={() => effects.restorePlanSnapshot(planSnapshot, user)}
+              on:delete={() => effects.deletePlanSnapshot(planSnapshot, user)}
             />
           {/each}
         </CardList>

src/components/plan/PlanSnapshot.svelte

@@ -6,6 +6,7 @@
   import type { PlanSnapshot } from '../../types/plan-snapshot';
   import { getSimulationProgress, getSimulationStatus } from '../../utilities/simulation';
   import Menu from '../menus/Menu.svelte';
+  import MenuDivider from '../menus/MenuDivider.svelte';
   import MenuItem from '../menus/MenuItem.svelte';
   import Card from '../ui/Card.svelte';
   import StatusBadge from '../ui/StatusBadge.svelte';
@@ -39,6 +40,8 @@
           <Menu bind:this={menu}>
             <MenuItem on:click={() => dispatch('click')}>Preview</MenuItem>
             <MenuItem on:click={() => dispatch('restore')}>Restore</MenuItem>
+            <MenuDivider />
+            <MenuItem disabled on:click={() => dispatch('delete')}>Delete</MenuItem>
           </Menu>
         </button>
       </div>
@@ -51,7 +54,6 @@
     --aerie-menu-item-template-columns: auto;
     --aerie-menu-item-line-height: 1rem;
     --aerie-menu-item-font-size: 12px;
-    /* --aerie-menu-item-padding: 4px; */
     align-items: center;
     display: flex;
     gap: 8px;

src/utilities/gql.ts

@@ -496,7 +496,7 @@ const gql = {
 
   DELETE_PLAN_SNAPSHOT: `#graphql
     mutation DeletePlanSnapshot($snapshot_id: Int!) {
-      deletePlanSnapshot: delete_plan_snapshot(snapshot_id: $snapshot_id) {
+      deletePlanSnapshot: delete_plan_snapshot_by_pk(snapshot_id: $snapshot_id) {
         snapshot_id
       }
     }