fix overzealous dep arrays

Author: david-crespo

app/pages/project/instances/instance/tabs/NetworkingTab.tsx

@@ -133,6 +133,31 @@ const staticCols = [
 
 const updateNicStates = fancifyStates(instanceCan.updateNic.states)
 
+const ipColHelper = createColumnHelper<ExternalIp>()
+const staticIpCols = [
+  ipColHelper.accessor('ip', {
+    cell: (info) => <CopyableIp ip={info.getValue()} />,
+  }),
+  ipColHelper.accessor('kind', {
+    header: () => (
+      <>
+        Kind
+        <TipIcon className="ml-2">
+          Floating IPs can be detached from this instance and attached to another.
+        </TipIcon>
+      </>
+    ),
+    cell: (info) => <Badge color="neutral">{info.getValue()}</Badge>,
+  }),
+  ipColHelper.accessor('name', {
+    cell: (info) => (info.getValue() ? info.getValue() : <EmptyCell />),
+  }),
+  ipColHelper.accessor((row) => ('description' in row ? row.description : undefined), {
+    header: 'description',
+    cell: (info) => <DescriptionCell text={info.getValue()} />,
+  }),
+]
+
 export function NetworkingTab() {
   const instanceSelector = useInstanceSelector()
   const { instance: instanceName, project } = instanceSelector
@@ -157,13 +182,13 @@ export function NetworkingTab() {
       setCreateModalOpen(false)
     },
   })
-  const deleteNic = useApiMutation('instanceNetworkInterfaceDelete', {
+  const { mutateAsync: deleteNic } = useApiMutation('instanceNetworkInterfaceDelete', {
     onSuccess() {
       queryClient.invalidateQueries('instanceNetworkInterfaceList')
       addToast({ content: 'Network interface deleted' })
     },
   })
-  const editNic = useApiMutation('instanceNetworkInterfaceUpdate', {
+  const { mutate: editNic } = useApiMutation('instanceNetworkInterfaceUpdate', {
     onSuccess() {
       queryClient.invalidateQueries('instanceNetworkInterfaceList')
     },
@@ -180,7 +205,7 @@ export function NetworkingTab() {
       {
         label: 'Make primary',
         onActivate() {
-          editNic.mutate({
+          editNic({
             path: { interface: nic.name },
             query: instanceSelector,
             body: { ...nic, primary: true },
@@ -211,7 +236,7 @@ export function NetworkingTab() {
         label: 'Delete',
         onActivate: confirmDelete({
           doDelete: () =>
-            deleteNic.mutateAsync({
+            deleteNic({
               path: { interface: nic.name },
               query: instanceSelector,
             }),
@@ -243,32 +268,7 @@ export function NetworkingTab() {
     query: { project },
   })
 
-  const ipColHelper = createColumnHelper<ExternalIp>()
-  const staticIpCols = [
-    ipColHelper.accessor('ip', {
-      cell: (info) => <CopyableIp ip={info.getValue()} />,
-    }),
-    ipColHelper.accessor('kind', {
-      header: () => (
-        <>
-          Kind
-          <TipIcon className="ml-2">
-            Floating IPs can be detached from this instance and attached to another.
-          </TipIcon>
-        </>
-      ),
-      cell: (info) => <Badge color="neutral">{info.getValue()}</Badge>,
-    }),
-    ipColHelper.accessor('name', {
-      cell: (info) => (info.getValue() ? info.getValue() : <EmptyCell />),
-    }),
-    ipColHelper.accessor((row) => ('description' in row ? row.description : undefined), {
-      header: 'description',
-      cell: (info) => <DescriptionCell text={info.getValue()} />,
-    }),
-  ]
-
-  const ephemeralIpDetach = useApiMutation('instanceEphemeralIpDetach', {
+  const { mutateAsync: ephemeralIpDetach } = useApiMutation('instanceEphemeralIpDetach', {
     onSuccess() {
       queryClient.invalidateQueries('instanceExternalIpList')
       addToast({ content: 'Your ephemeral IP has been detached' })
@@ -278,7 +278,7 @@ export function NetworkingTab() {
     },
   })
 
-  const floatingIpDetach = useApiMutation('floatingIpDetach', {
+  const { mutateAsync: floatingIpDetach } = useApiMutation('floatingIpDetach', {
     onSuccess() {
       queryClient.invalidateQueries('floatingIpList')
       queryClient.invalidateQueries('instanceExternalIpList')
@@ -301,12 +301,12 @@ export function NetworkingTab() {
       const doAction =
         externalIp.kind === 'floating'
           ? () =>
-              floatingIpDetach.mutateAsync({
+              floatingIpDetach({
                 path: { floatingIp: externalIp.name },
                 query: { project },
               })
           : () =>
-              ephemeralIpDetach.mutateAsync({
+              ephemeralIpDetach({
                 path: { instance: instanceName },
                 query: { project },
               })

mock-api/instance.ts

@@ -18,7 +18,7 @@ export const instance: Json<Instance> = {
   description: 'an instance',
   hostname: 'oxide.com',
   project_id: project.id,
-  run_state: 'running',
+  run_state: 'stopping',
   time_created: new Date().toISOString(),
   time_modified: new Date().toISOString(),
   time_run_state_updated: new Date().toISOString(),