Delete affinity groups / remove affinity group members (#2768)

* Enable removal of group member

* Enable deletion of group

* move away from useMemo for columns

* Update copy in remove confirm modal

* Update copy in delete modal

* use apiq since we're not paginating

* use the id for delete

* merged main and reconciling diffs

---------

Co-authored-by: David Crespo <[email protected]>

Author: charliepark

app/pages/project/affinity/AffinityPage.tsx

@@ -8,22 +8,26 @@
 
 import { useQuery } from '@tanstack/react-query'
 import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
-import { useMemo } from 'react'
+import { useCallback } from 'react'
 import { Link, type LoaderFunctionArgs } from 'react-router'
 
 import {
   apiq,
-  getListQFn,
   queryClient,
+  useApiMutation,
   usePrefetchedQuery,
   type AffinityPolicy,
   type AntiAffinityGroup,
 } from '@oxide/api'
 import { Affinity24Icon } from '@oxide/design-system/icons/react'
 
+import { HL } from '~/components/HL'
 import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
+import { confirmAction } from '~/stores/confirm-action'
+import { addToast } from '~/stores/toast'
 import { EmptyCell, SkeletonCell } from '~/table/cells/EmptyCell'
 import { makeLinkCell } from '~/table/cells/LinkCell'
+import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { Table } from '~/table/Table'
 import { Badge } from '~/ui/lib/Badge'
@@ -37,7 +41,7 @@ import { pb } from '~/util/path-builder'
 import type * as PP from '~/util/path-params'
 
 const antiAffinityGroupList = ({ project }: PP.Project) =>
-  getListQFn('antiAffinityGroupList', { query: { project, limit: ALL_ISH } })
+  apiq('antiAffinityGroupList', { query: { project, limit: ALL_ISH } })
 const memberList = ({ antiAffinityGroup, project }: PP.AntiAffinityGroup) =>
   apiq('antiAffinityGroupMemberList', {
     path: { antiAffinityGroup },
@@ -47,9 +51,7 @@ const memberList = ({ antiAffinityGroup, project }: PP.AntiAffinityGroup) =>
 
 export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { project } = getProjectSelector(params)
-  const groups = await queryClient.fetchQuery(
-    antiAffinityGroupList({ project }).optionsFn()
-  )
+  const groups = await queryClient.fetchQuery(antiAffinityGroupList({ project }))
   const memberFetches = groups.items.map(({ name }) =>
     queryClient.prefetchQuery(memberList({ antiAffinityGroup: name, project }))
   )
@@ -98,8 +100,48 @@ const staticCols = [
 
 export default function AffinityPage() {
   const { project } = useProjectSelector()
-  const columns = useMemo(
-    () => [
+  const { data } = usePrefetchedQuery(antiAffinityGroupList({ project }))
+
+  const { mutateAsync: deleteGroup } = useApiMutation('antiAffinityGroupDelete', {
+    onSuccess(_data, variables) {
+      queryClient.invalidateEndpoint('antiAffinityGroupList')
+      addToast(
+        <>
+          Anti-affinity group <HL>{variables.path.antiAffinityGroup}</HL> deleted
+        </>
+      )
+    },
+  })
+
+  const makeActions = useCallback(
+    (antiAffinityGroup: AntiAffinityGroup): MenuAction[] => [
+      {
+        label: 'Delete',
+        onActivate() {
+          confirmAction({
+            actionType: 'danger',
+            doAction: () =>
+              deleteGroup({
+                path: { antiAffinityGroup: antiAffinityGroup.name },
+                query: { project },
+              }),
+            modalTitle: 'Delete anti-affinity group',
+            modalContent: (
+              <p>
+                Are you sure you want to delete the anti-affinity group{' '}
+                <HL>{antiAffinityGroup.name}</HL>?
+              </p>
+            ),
+            errorTitle: `Error removing ${antiAffinityGroup.name}`,
+          })
+        },
+      },
+    ],
+    [project, deleteGroup]
+  )
+
+  const columns = useColsWithActions(
+    [
       colHelper.accessor('name', {
         cell: makeLinkCell((antiAffinityGroup) =>
           pb.antiAffinityGroup({ project, antiAffinityGroup })
@@ -108,9 +150,8 @@ export default function AffinityPage() {
       }),
       ...staticCols,
     ],
-    [project]
+    makeActions
   )
-  const { data } = usePrefetchedQuery(antiAffinityGroupList({ project }).optionsFn())
 
   const table = useReactTable({
     columns,

app/pages/project/affinity/AntiAffinityGroupPage.tsx

@@ -7,24 +7,28 @@
  */
 
 import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
-import { useMemo } from 'react'
+import { useCallback } from 'react'
 import type { LoaderFunctionArgs } from 'react-router'
 
 import { Affinity24Icon } from '@oxide/design-system/icons/react'
 
 import {
   apiq,
-  getListQFn,
   queryClient,
+  useApiMutation,
   usePrefetchedQuery,
   type AntiAffinityGroupMember,
 } from '~/api'
+import { HL } from '~/components/HL'
 import { makeCrumb } from '~/hooks/use-crumbs'
 import {
   getAntiAffinityGroupSelector,
   useAntiAffinityGroupSelector,
 } from '~/hooks/use-params'
+import { confirmAction } from '~/stores/confirm-action'
+import { addToast } from '~/stores/toast'
 import { makeLinkCell } from '~/table/cells/LinkCell'
+import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { Table } from '~/table/Table'
 import { Badge } from '~/ui/lib/Badge'
@@ -49,7 +53,7 @@ const colHelper = createColumnHelper<AntiAffinityGroupMember>()
 const antiAffinityGroupView = ({ antiAffinityGroup, project }: PP.AntiAffinityGroup) =>
   apiq('antiAffinityGroupView', { path: { antiAffinityGroup }, query: { project } })
 const memberList = ({ antiAffinityGroup, project }: PP.AntiAffinityGroup) =>
-  getListQFn('antiAffinityGroupMemberList', {
+  apiq('antiAffinityGroupMemberList', {
     path: { antiAffinityGroup },
     // member limit in DB is currently 32, so pagination isn't needed
     query: { project, limit: ALL_ISH },
@@ -59,7 +63,7 @@ export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { antiAffinityGroup, project } = getAntiAffinityGroupSelector(params)
   await Promise.all([
     queryClient.fetchQuery(antiAffinityGroupView({ antiAffinityGroup, project })),
-    queryClient.fetchQuery(memberList({ antiAffinityGroup, project }).optionsFn()),
+    queryClient.fetchQuery(memberList({ antiAffinityGroup, project })),
   ])
   return null
 }
@@ -80,19 +84,66 @@ export default function AntiAffinityPage() {
     antiAffinityGroupView({ antiAffinityGroup, project })
   )
   const { id, name, description, policy, timeCreated } = group
-  const { data: members } = usePrefetchedQuery(
-    memberList({ antiAffinityGroup, project }).optionsFn()
-  )
+  const { data: members } = usePrefetchedQuery(memberList({ antiAffinityGroup, project }))
   const membersCount = members.items.length
-  const columns = useMemo(
-    () => [
+
+  const { mutateAsync: removeMember } = useApiMutation(
+    'antiAffinityGroupMemberInstanceDelete',
+    {
+      onSuccess(_data, variables) {
+        queryClient.invalidateEndpoint('antiAffinityGroupMemberList')
+        queryClient.invalidateEndpoint('antiAffinityGroupView')
+        addToast(<>Member <HL>{variables.path.instance}</HL> removed from anti-affinity group <HL>{group.name}</HL></>) // prettier-ignore
+      },
+    }
+  )
+
+  const makeActions = useCallback(
+    (antiAffinityGroupMember: AntiAffinityGroupMember): MenuAction[] => [
+      {
+        label: 'Copy instance ID',
+        onActivate() {
+          navigator.clipboard.writeText(antiAffinityGroupMember.value.id)
+        },
+      },
+      {
+        label: 'Remove from group',
+        onActivate() {
+          confirmAction({
+            actionType: 'danger',
+            doAction: () =>
+              removeMember({
+                path: {
+                  antiAffinityGroup: antiAffinityGroup,
+                  instance: antiAffinityGroupMember.value.name,
+                },
+                query: { project },
+              }),
+            modalTitle: 'Remove instance from anti-affinity group',
+            modalContent: (
+              <p>
+                Are you sure you want to remove{' '}
+                <HL>{antiAffinityGroupMember.value.name}</HL> from the anti-affinity group{' '}
+                <HL>{antiAffinityGroup}</HL>?
+              </p>
+            ),
+            errorTitle: `Error removing ${antiAffinityGroupMember.value.name}`,
+          })
+        },
+      },
+    ],
+    [project, removeMember, antiAffinityGroup]
+  )
+
+  const columns = useColsWithActions(
+    [
       colHelper.accessor('value.name', {
         header: 'Name',
         cell: makeLinkCell((instance) => pb.instance({ project, instance })),
       }),
       colHelper.accessor('value.runState', Columns.instanceState),
     ],
-    [project]
+    makeActions
   )
 
   const table = useReactTable({

mock-api/msw/handlers.ts

@@ -1637,6 +1637,11 @@ export const handlers = makeHandlers({
   },
   antiAffinityGroupView: ({ path, query }) =>
     lookup.antiAffinityGroup({ ...path, ...query }),
+  antiAffinityGroupDelete: ({ path, query }) => {
+    const group = lookup.antiAffinityGroup({ ...path, ...query })
+    db.antiAffinityGroups = db.antiAffinityGroups.filter((i) => i.id !== group.id)
+    return 204
+  },
   antiAffinityGroupMemberList: ({ path, query }) => {
     const antiAffinityGroup = lookup.antiAffinityGroup({ ...path, ...query })
     const members: Json<AntiAffinityGroupMember>[] = db.antiAffinityGroupMemberLists
@@ -1672,7 +1677,6 @@ export const handlers = makeHandlers({
   affinityGroupMemberInstanceView: NotImplemented,
   affinityGroupUpdate: NotImplemented,
   antiAffinityGroupCreate: NotImplemented,
-  antiAffinityGroupDelete: NotImplemented,
   antiAffinityGroupMemberInstanceAdd: NotImplemented,
   antiAffinityGroupMemberInstanceView: NotImplemented,
   antiAffinityGroupUpdate: NotImplemented,