From ba200bdb34b53231fa11e16bc1c0c6bf26d6a7a2 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Thu, 17 Oct 2024 12:13:36 -0500
Subject: [PATCH] be fussy

---
 app/pages/project/instances/InstancesPage.tsx | 10 +++--
 app/pages/project/instances/actions.tsx       | 42 +++++++------------
 .../instances/instance/InstancePage.tsx       | 10 ++---
 3 files changed, 25 insertions(+), 37 deletions(-)

diff --git a/app/pages/project/instances/InstancesPage.tsx b/app/pages/project/instances/InstancesPage.tsx
index 94f940836..97de119b4 100644
--- a/app/pages/project/instances/InstancesPage.tsx
+++ b/app/pages/project/instances/InstancesPage.tsx
@@ -64,8 +64,7 @@ const POLL_INTERVAL_SLOW = 60 * sec
 
 export function InstancesPage() {
   const { project } = useProjectSelector()
-
-  const { makeActions } = useMakeInstanceActions(
+  const { makeButtonActions, makeMenuActions } = useMakeInstanceActions(
     { project },
     { onSuccess: refetchInstances, onDelete: refetchInstances }
   )
@@ -182,9 +181,12 @@ export function InstancesPage() {
         }
       ),
       colHelper.accessor('timeCreated', Columns.timeCreated),
-      getActionsCol(makeActions),
+      getActionsCol((instance: Instance) => [
+        ...makeButtonActions(instance),
+        ...makeMenuActions(instance),
+      ]),
     ],
-    [project, makeActions]
+    [project, makeButtonActions, makeMenuActions]
   )
 
   if (!instances) return null
diff --git a/app/pages/project/instances/actions.tsx b/app/pages/project/instances/actions.tsx
index db6c27e1b..2fca5344a 100644
--- a/app/pages/project/instances/actions.tsx
+++ b/app/pages/project/instances/actions.tsx
@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useCallback, useMemo } from 'react'
+import { useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { instanceCan, useApiMutation, type Instance } from '@oxide/api'
@@ -47,9 +47,8 @@ export const useMakeInstanceActions = (
     onSuccess: options.onDelete,
   })
 
-  const makeActions = useCallback(
+  const makeButtonActions = useCallback(
     (instance: Instance) => {
-      const instanceSelector = { project, instance: instance.name }
       const instanceParams = { path: { instance: instance.name }, query: { project } }
       return [
         {
@@ -98,6 +97,16 @@ export const useMakeInstanceActions = (
             <>Only {fancifyStates(instanceCan.stop.states)} instances can be stopped</>
           ),
         },
+      ]
+    },
+    [project, startInstance, stopInstanceAsync]
+  )
+
+  const makeMenuActions = useCallback(
+    (instance: Instance) => {
+      const instanceSelector = { project, instance: instance.name }
+      const instanceParams = { path: { instance: instance.name }, query: { project } }
+      return [
         {
           label: 'Reboot',
           onActivate() {
@@ -140,31 +149,8 @@ export const useMakeInstanceActions = (
         },
       ]
     },
-    [
-      project,
-      deleteInstanceAsync,
-      navigate,
-      rebootInstance,
-      startInstance,
-      stopInstanceAsync,
-    ]
+    [project, deleteInstanceAsync, navigate, rebootInstance]
   )
 
-  const useInstanceActions = (instance: Instance) => {
-    const allActions = useMemo(() => makeActions(instance), [instance])
-
-    const buttonActions = useMemo(
-      () => allActions.filter((a) => a.label === 'Start' || a.label === 'Stop'),
-      [allActions]
-    )
-
-    const menuActions = useMemo(
-      () => allActions.filter((a) => a.label !== 'Start' && a.label !== 'Stop'),
-      [allActions]
-    )
-
-    return { allActions, buttonActions, menuActions }
-  }
-
-  return { useInstanceActions, makeActions }
+  return { makeButtonActions, makeMenuActions }
 }
diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx
index 7bfb2c2de..f9c7fc30c 100644
--- a/app/pages/project/instances/instance/InstancePage.tsx
+++ b/app/pages/project/instances/instance/InstancePage.tsx
@@ -94,7 +94,7 @@ export function InstancePage() {
 
   const navigate = useNavigate()
 
-  const { useInstanceActions } = useMakeInstanceActions(instanceSelector, {
+  const { makeButtonActions, makeMenuActions } = useMakeInstanceActions(instanceSelector, {
     onSuccess: refreshData,
     // go to project instances list since there's no more instance
     onDelete: () => {
@@ -134,7 +134,6 @@ export function InstancePage() {
     { enabled: !!primaryVpcId }
   )
 
-  const { buttonActions, menuActions } = useInstanceActions(instance)
   const allMenuActions = useMemo(
     () => [
       {
@@ -143,9 +142,9 @@ export function InstancePage() {
           window.navigator.clipboard.writeText(instance.id || '')
         },
       },
-      ...menuActions,
+      ...makeMenuActions(instance),
     ],
-    [instance.id, menuActions]
+    [instance, makeMenuActions]
   )
 
   const memory = filesize(instance.memory, { output: 'object', base: 2 })
@@ -158,13 +157,14 @@ export function InstancePage() {
           <RefreshButton onClick={refreshData} />
           <InstanceDocsPopover />
           <div className="flex space-x-2 border-l pl-2 border-default">
-            {buttonActions.map((action) => (
+            {makeButtonActions(instance).map((action) => (
               <Button
                 key={action.label}
                 variant="ghost"
                 size="sm"
                 onClick={action.onActivate}
                 disabled={!!action.disabled}
+                disabledReason={action.disabled}
               >
                 {action.label}
               </Button>