From cc4cb20e234a6960701ac8332d007f40f544848e Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Thu, 17 Oct 2024 13:42:03 +0100
Subject: [PATCH 01/14] Instance action buttons

---
 app/components/DocsPopover.tsx                |  4 +-
 app/pages/project/instances/InstancesPage.tsx |  2 +-
 app/pages/project/instances/actions.tsx       | 47 +++++++++----------
 .../instances/instance/InstancePage.tsx       | 29 +++++++++---
 4 files changed, 49 insertions(+), 33 deletions(-)

diff --git a/app/components/DocsPopover.tsx b/app/components/DocsPopover.tsx
index b393f167c5..a4f5544326 100644
--- a/app/components/DocsPopover.tsx
+++ b/app/components/DocsPopover.tsx
@@ -9,7 +9,7 @@
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
 import cn from 'classnames'
 
-import { OpenLink12Icon, Question12Icon } from '@oxide/design-system/icons/react'
+import { Info12Icon, OpenLink12Icon } from '@oxide/design-system/icons/react'
 
 import { buttonStyle } from '~/ui/lib/Button'
 
@@ -45,7 +45,7 @@ export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps)
   return (
     <Popover>
       <PopoverButton className={cn(buttonStyle({ size: 'sm', variant: 'ghost' }), 'w-8')}>
-        <Question12Icon aria-label="Links to docs" className="shrink-0" />
+        <Info12Icon aria-label="Links to docs" className="shrink-0" />
       </PopoverButton>
       <PopoverPanel
         // DocsPopoverPanel needed for enter animation
diff --git a/app/pages/project/instances/InstancesPage.tsx b/app/pages/project/instances/InstancesPage.tsx
index 343f4c1871..94f940836e 100644
--- a/app/pages/project/instances/InstancesPage.tsx
+++ b/app/pages/project/instances/InstancesPage.tsx
@@ -65,7 +65,7 @@ const POLL_INTERVAL_SLOW = 60 * sec
 export function InstancesPage() {
   const { project } = useProjectSelector()
 
-  const makeActions = useMakeInstanceActions(
+  const { makeActions } = useMakeInstanceActions(
     { project },
     { onSuccess: refetchInstances, onDelete: refetchInstances }
   )
diff --git a/app/pages/project/instances/actions.tsx b/app/pages/project/instances/actions.tsx
index df251f3ab5..823ccd53a8 100644
--- a/app/pages/project/instances/actions.tsx
+++ b/app/pages/project/instances/actions.tsx
@@ -5,8 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useCallback, useMemo } from 'react'
 
 import { instanceCan, useApiMutation, type Instance } from '@oxide/api'
 
@@ -14,8 +13,6 @@ import { HL } from '~/components/HL'
 import { confirmAction } from '~/stores/confirm-action'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
-import type { MakeActions } from '~/table/columns/action-col'
-import { pb } from '~/util/path-builder'
 
 import { fancifyStates } from './instance/tabs/common'
 
@@ -31,9 +28,7 @@ type Options = {
 export const useMakeInstanceActions = (
   { project }: { project: string },
   options: Options = {}
-): MakeActions<Instance> => {
-  const navigate = useNavigate()
-
+) => {
   // if you also pass onSuccess to mutate(), this one is not overridden — this
   // one runs first, then the one passed to mutate().
   //
@@ -49,9 +44,8 @@ export const useMakeInstanceActions = (
     onSuccess: options.onDelete,
   })
 
-  return useCallback(
-    (instance) => {
-      const instanceSelector = { project, instance: instance.name }
+  const makeActions = useCallback(
+    (instance: Instance) => {
       const instanceParams = { path: { instance: instance.name }, query: { project } }
       return [
         {
@@ -117,12 +111,6 @@ export const useMakeInstanceActions = (
             <>Only {fancifyStates(instanceCan.reboot.states)} instances can be rebooted</>
           ),
         },
-        {
-          label: 'View serial console',
-          onActivate() {
-            navigate(pb.serialConsole(instanceSelector))
-          },
-        },
         {
           label: 'Delete',
           onActivate: confirmDelete({
@@ -142,13 +130,24 @@ export const useMakeInstanceActions = (
         },
       ]
     },
-    [
-      project,
-      navigate,
-      deleteInstanceAsync,
-      rebootInstance,
-      startInstance,
-      stopInstanceAsync,
-    ]
+    [project, deleteInstanceAsync, rebootInstance, startInstance, stopInstanceAsync]
   )
+
+  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 }
 }
diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx
index 9736ad1bef..aeb7e941af 100644
--- a/app/pages/project/instances/instance/InstancePage.tsx
+++ b/app/pages/project/instances/instance/InstancePage.tsx
@@ -26,6 +26,7 @@ import { RouteTabs, Tab } from '~/components/RouteTabs'
 import { InstanceStateBadge } from '~/components/StateBadge'
 import { getInstanceSelector, useInstanceSelector } from '~/hooks/use-params'
 import { EmptyCell } from '~/table/cells/EmptyCell'
+import { Button } from '~/ui/lib/Button'
 import { DateTime } from '~/ui/lib/DateTime'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
@@ -92,7 +93,8 @@ export function InstancePage() {
   const instanceSelector = useInstanceSelector()
 
   const navigate = useNavigate()
-  const makeActions = useMakeInstanceActions(instanceSelector, {
+
+  const { useInstanceActions } = useMakeInstanceActions(instanceSelector, {
     onSuccess: refreshData,
     // go to project instances list since there's no more instance
     onDelete: () => {
@@ -132,7 +134,8 @@ export function InstancePage() {
     { enabled: !!primaryVpcId }
   )
 
-  const actions = useMemo(
+  const { buttonActions, menuActions } = useInstanceActions(instance)
+  const allMenuActions = useMemo(
     () => [
       {
         label: 'Copy ID',
@@ -140,9 +143,9 @@ export function InstancePage() {
           window.navigator.clipboard.writeText(instance.id || '')
         },
       },
-      ...makeActions(instance),
+      ...menuActions,
     ],
-    [instance, makeActions]
+    [instance.id, menuActions]
   )
 
   const memory = filesize(instance.memory, { output: 'object', base: 2 })
@@ -152,9 +155,23 @@ export function InstancePage() {
       <PageHeader>
         <PageTitle icon={<Instances24Icon />}>{instance.name}</PageTitle>
         <div className="inline-flex gap-2">
-          <InstanceDocsPopover />
           <RefreshButton onClick={refreshData} />
-          <MoreActionsMenu label="Instance actions" actions={actions} />
+          <InstanceDocsPopover />
+          <div className="flex space-x-2 border-l pl-2 border-default">
+            {buttonActions.map((action) => (
+              <Button
+                key={action.label}
+                variant="ghost"
+                size="sm"
+                onClick={action.onActivate}
+                disabled={!!action.disabled}
+                className="text-sm bg-gray-200 rounded px-2 py-1"
+              >
+                {action.label}
+              </Button>
+            ))}
+          </div>
+          <MoreActionsMenu label="Instance actions" actions={allMenuActions} />
         </div>
       </PageHeader>
       <PropertiesTable.Group className="-mt-8 mb-16">

From d746d46dc1eb8e87da9de91b44eb58977dfed29e Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Thu, 17 Oct 2024 13:49:06 +0100
Subject: [PATCH 02/14] Re-add serial console link

---
 app/pages/project/instances/actions.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/app/pages/project/instances/actions.tsx b/app/pages/project/instances/actions.tsx
index 823ccd53a8..db6c27e1bc 100644
--- a/app/pages/project/instances/actions.tsx
+++ b/app/pages/project/instances/actions.tsx
@@ -6,6 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useCallback, useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
 
 import { instanceCan, useApiMutation, type Instance } from '@oxide/api'
 
@@ -13,6 +14,7 @@ import { HL } from '~/components/HL'
 import { confirmAction } from '~/stores/confirm-action'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
+import { pb } from '~/util/path-builder'
 
 import { fancifyStates } from './instance/tabs/common'
 
@@ -29,6 +31,7 @@ export const useMakeInstanceActions = (
   { project }: { project: string },
   options: Options = {}
 ) => {
+  const navigate = useNavigate()
   // if you also pass onSuccess to mutate(), this one is not overridden — this
   // one runs first, then the one passed to mutate().
   //
@@ -46,6 +49,7 @@ export const useMakeInstanceActions = (
 
   const makeActions = useCallback(
     (instance: Instance) => {
+      const instanceSelector = { project, instance: instance.name }
       const instanceParams = { path: { instance: instance.name }, query: { project } }
       return [
         {
@@ -111,6 +115,12 @@ export const useMakeInstanceActions = (
             <>Only {fancifyStates(instanceCan.reboot.states)} instances can be rebooted</>
           ),
         },
+        {
+          label: 'View serial console',
+          onActivate() {
+            navigate(pb.serialConsole(instanceSelector))
+          },
+        },
         {
           label: 'Delete',
           onActivate: confirmDelete({
@@ -130,7 +140,14 @@ export const useMakeInstanceActions = (
         },
       ]
     },
-    [project, deleteInstanceAsync, rebootInstance, startInstance, stopInstanceAsync]
+    [
+      project,
+      deleteInstanceAsync,
+      navigate,
+      rebootInstance,
+      startInstance,
+      stopInstanceAsync,
+    ]
   )
 
   const useInstanceActions = (instance: Instance) => {

From d02bf644131a1157f3e60c507c4c1aedf028af7e Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Thu, 17 Oct 2024 13:50:23 +0100
Subject: [PATCH 03/14] Remove test styles

---
 app/pages/project/instances/instance/InstancePage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx
index aeb7e941af..7bfb2c2ded 100644
--- a/app/pages/project/instances/instance/InstancePage.tsx
+++ b/app/pages/project/instances/instance/InstancePage.tsx
@@ -165,7 +165,6 @@ export function InstancePage() {
                 size="sm"
                 onClick={action.onActivate}
                 disabled={!!action.disabled}
-                className="text-sm bg-gray-200 rounded px-2 py-1"
               >
                 {action.label}
               </Button>

From 22d584f449d33ca6347b2f356a3da6b1752e9079 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Thu, 17 Oct 2024 15:16:48 +0100
Subject: [PATCH 04/14] Fix broken `stopInstance` test util

---
 test/e2e/utils.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/test/e2e/utils.ts b/test/e2e/utils.ts
index e74c39e0ae..963fb8ebf9 100644
--- a/test/e2e/utils.ts
+++ b/test/e2e/utils.ts
@@ -107,8 +107,7 @@ export async function expectRowVisible(
 }
 
 export async function stopInstance(page: Page) {
-  await page.getByRole('button', { name: 'Instance actions' }).click()
-  await page.getByRole('menuitem', { name: 'Stop' }).click()
+  await page.getByRole('button', { name: 'Stop' }).click()
   await page.getByRole('button', { name: 'Confirm' }).click()
   await closeToast(page)
   // don't need to manually refresh because of polling

From 05725681d74c657236d3be60f81c95d110b339d0 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 05/14] be fussy

---
 app/pages/project/instances/InstancesPage.tsx | 10 +++--
 app/pages/project/instances/actions.tsx       | 42 +++++++------------
 .../instances/instance/InstancePage.tsx       | 10 ++---
 app/table/columns/action-col.tsx              |  2 +-
 4 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/app/pages/project/instances/InstancesPage.tsx b/app/pages/project/instances/InstancesPage.tsx
index 94f940836e..97de119b4f 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 db6c27e1bc..2fca5344a0 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 7bfb2c2ded..f9c7fc30cc 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>
diff --git a/app/table/columns/action-col.tsx b/app/table/columns/action-col.tsx
index f18d16a04a..a880245b45 100644
--- a/app/table/columns/action-col.tsx
+++ b/app/table/columns/action-col.tsx
@@ -16,7 +16,7 @@ import { Tooltip } from '~/ui/lib/Tooltip'
 import { Wrap } from '~/ui/util/wrap'
 import { kebabCase } from '~/util/str'
 
-export type MakeActions<Item> = (item: Item) => Array<MenuAction>
+type MakeActions<Item> = (item: Item) => Array<MenuAction>
 
 export type MenuAction = {
   label: string

From 0947094fe75b1a574b8aaa93d35a98883b406d54 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Tue, 29 Oct 2024 15:40:23 +0000
Subject: [PATCH 06/14] Button tooltip position default bottom (also flips to
 top)

---
 app/ui/lib/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/ui/lib/Button.tsx b/app/ui/lib/Button.tsx
index 1ced212a58..eeba09391d 100644
--- a/app/ui/lib/Button.tsx
+++ b/app/ui/lib/Button.tsx
@@ -87,7 +87,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <Wrap
         when={isDisabled && disabledReason}
-        with={<Tooltip content={disabledReason} ref={ref} />}
+        with={<Tooltip content={disabledReason} ref={ref} placement="bottom" />}
       >
         <button
           className={cn(buttonStyle({ size, variant }), className, {

From 85a3843f0844a9e7e431c98f0516947309471a07 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Tue, 29 Oct 2024 15:41:09 +0000
Subject: [PATCH 07/14] Use correct info icon size

---
 app/components/DocsPopover.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/DocsPopover.tsx b/app/components/DocsPopover.tsx
index a4f5544326..76ddbcc791 100644
--- a/app/components/DocsPopover.tsx
+++ b/app/components/DocsPopover.tsx
@@ -9,7 +9,7 @@
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
 import cn from 'classnames'
 
-import { Info12Icon, OpenLink12Icon } from '@oxide/design-system/icons/react'
+import { Info16Icon, OpenLink12Icon } from '@oxide/design-system/icons/react'
 
 import { buttonStyle } from '~/ui/lib/Button'
 
@@ -45,7 +45,7 @@ export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps)
   return (
     <Popover>
       <PopoverButton className={cn(buttonStyle({ size: 'sm', variant: 'ghost' }), 'w-8')}>
-        <Info12Icon aria-label="Links to docs" className="shrink-0" />
+        <Info16Icon aria-label="Links to docs" className="shrink-0" />
       </PopoverButton>
       <PopoverPanel
         // DocsPopoverPanel needed for enter animation

From 9ed2b91b7b42024564f0fc44c30709e6dd6d5b74 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Tue, 29 Oct 2024 15:44:30 +0000
Subject: [PATCH 08/14] Add tooltip padding from edge of viewport

---
 app/ui/lib/Tooltip.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/ui/lib/Tooltip.tsx b/app/ui/lib/Tooltip.tsx
index bcda6f480d..bb12f5213f 100644
--- a/app/ui/lib/Tooltip.tsx
+++ b/app/ui/lib/Tooltip.tsx
@@ -13,6 +13,7 @@ import {
   FloatingArrow,
   FloatingPortal,
   offset,
+  shift,
   useDismiss,
   useFloating,
   useFocus,
@@ -68,6 +69,7 @@ export const Tooltip = forwardRef(
          */
         placement ? flip() : autoPlacement(),
         offset(12),
+        shift({ padding: 16 }),
         arrow({ element: arrowRef, padding: 12 }),
       ],
     })

From 2e795ec81d2b45a718e3b9db3b7a07eea76d8dde Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Tue, 29 Oct 2024 15:44:47 +0000
Subject: [PATCH 09/14] Removed disabled cursor for disabled button

---
 app/ui/lib/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/ui/lib/Button.tsx b/app/ui/lib/Button.tsx
index eeba09391d..2c6cdface2 100644
--- a/app/ui/lib/Button.tsx
+++ b/app/ui/lib/Button.tsx
@@ -35,7 +35,7 @@ export const buttonStyle = ({
   variant = 'primary',
 }: ButtonStyleProps = {}) => {
   return cn(
-    'ox-button elevation-1 rounded inline-flex items-center justify-center align-top disabled:cursor-not-allowed shrink-0',
+    'ox-button elevation-1 rounded inline-flex items-center justify-center align-top shrink-0',
     `btn-${variant}`,
     sizeStyle[size],
     variant === 'danger'

From 61a045ac8999027f4732b638ea7bbe06c81b68b1 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Tue, 29 Oct 2024 15:48:09 +0000
Subject: [PATCH 10/14] Add confirm start instance

---
 app/pages/project/instances/actions.tsx | 32 ++++++++++++++++++-------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/app/pages/project/instances/actions.tsx b/app/pages/project/instances/actions.tsx
index 2fca5344a0..20c826c017 100644
--- a/app/pages/project/instances/actions.tsx
+++ b/app/pages/project/instances/actions.tsx
@@ -39,7 +39,7 @@ export const useMakeInstanceActions = (
   // while the whole useMutation result object is not. The async ones are used
   // when we need to confirm because the confirm modals want that.
   const opts = { onSuccess: options.onSuccess }
-  const { mutate: startInstance } = useApiMutation('instanceStart', opts)
+  const { mutateAsync: startInstanceAsync } = useApiMutation('instanceStart', opts)
   const { mutateAsync: stopInstanceAsync } = useApiMutation('instanceStop', opts)
   const { mutate: rebootInstance } = useApiMutation('instanceReboot', opts)
   // delete has its own
@@ -54,14 +54,28 @@ export const useMakeInstanceActions = (
         {
           label: 'Start',
           onActivate() {
-            startInstance(instanceParams, {
-              onSuccess: () => addToast({ title: `Starting instance '${instance.name}'` }),
-              onError: (error) =>
-                addToast({
-                  variant: 'error',
-                  title: `Error starting instance '${instance.name}'`,
-                  content: error.message,
+            confirmAction({
+              actionType: 'primary',
+              doAction: () =>
+                startInstanceAsync(instanceParams, {
+                  onSuccess: () =>
+                    addToast({ title: `Starting instance '${instance.name}'` }),
+                  onError: (error) =>
+                    addToast({
+                      variant: 'error',
+                      title: `Error starting instance '${instance.name}'`,
+                      content: error.message,
+                    }),
                 }),
+              modalTitle: 'Confirm start instance',
+              modalContent: (
+                <div className="space-y-2">
+                  <p>
+                    Are you sure you want to start <HL>{instance.name}</HL>?
+                  </p>
+                </div>
+              ),
+              errorTitle: `Error starting ${instance.name}`,
             })
           },
           disabled: !instanceCan.start(instance) && (
@@ -99,7 +113,7 @@ export const useMakeInstanceActions = (
         },
       ]
     },
-    [project, startInstance, stopInstanceAsync]
+    [project, startInstanceAsync, stopInstanceAsync]
   )
 
   const makeMenuActions = useCallback(

From 34e00c0a472b5eac13ad9d3c5ccf04ed897b6d59 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Tue, 29 Oct 2024 23:03:35 -0500
Subject: [PATCH 11/14] fix e2es

---
 app/pages/project/instances/actions.tsx | 8 +++-----
 test/e2e/instance.e2e.ts                | 2 ++
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/pages/project/instances/actions.tsx b/app/pages/project/instances/actions.tsx
index 689c914c14..a607767fa6 100644
--- a/app/pages/project/instances/actions.tsx
+++ b/app/pages/project/instances/actions.tsx
@@ -68,11 +68,9 @@ export const useMakeInstanceActions = (
                 }),
               modalTitle: 'Confirm start instance',
               modalContent: (
-                <div className="space-y-2">
-                  <p>
-                    Are you sure you want to start <HL>{instance.name}</HL>?
-                  </p>
-                </div>
+                <p>
+                  Are you sure you want to start <HL>{instance.name}</HL>?
+                </p>
               ),
               errorTitle: `Error starting ${instance.name}`,
             })
diff --git a/test/e2e/instance.e2e.ts b/test/e2e/instance.e2e.ts
index 6f967f46c9..75629efbb7 100644
--- a/test/e2e/instance.e2e.ts
+++ b/test/e2e/instance.e2e.ts
@@ -46,6 +46,7 @@ test('can start a failed instance', async ({ page }) => {
   // now start the failed one
   await expectInstanceState(page, 'you-fail', 'failed')
   await clickRowAction(page, 'you-fail', 'Start')
+  await page.getByRole('button', { name: 'Confirm' }).click()
   await expectInstanceState(page, 'you-fail', 'starting')
 })
 
@@ -93,6 +94,7 @@ test('can stop a starting instance, then start it again', async ({ page }) => {
   await expectInstanceState(page, 'not-there-yet', 'stopped')
 
   await clickRowAction(page, 'not-there-yet', 'Start')
+  await page.getByRole('button', { name: 'Confirm' }).click()
   await expectInstanceState(page, 'not-there-yet', 'starting')
   await expectInstanceState(page, 'not-there-yet', 'running')
 })

From 10d5f128011c0fca95fc705315ae8ff99fd2230f Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Wed, 30 Oct 2024 14:12:48 +0000
Subject: [PATCH 12/14] Only "running" instances can be stopped

---
 app/pages/project/instances/actions.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/pages/project/instances/actions.tsx b/app/pages/project/instances/actions.tsx
index a607767fa6..fadcc40583 100644
--- a/app/pages/project/instances/actions.tsx
+++ b/app/pages/project/instances/actions.tsx
@@ -105,7 +105,9 @@ export const useMakeInstanceActions = (
             })
           },
           disabled: !instanceCan.stop(instance) && (
-            <>Only {fancifyStates(instanceCan.stop.states)} instances can be stopped</>
+            <>
+              Only <span className="text-default">running</span> instances can be stopped
+            </>
           ),
         },
       ]

From d447d3a799f80852c3c1bc57280d9d4a90a7f85b Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Wed, 30 Oct 2024 14:14:56 +0000
Subject: [PATCH 13/14] `disabled:cursor-default` on button

---
 app/ui/lib/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/ui/lib/Button.tsx b/app/ui/lib/Button.tsx
index 2c6cdface2..d77c893b6d 100644
--- a/app/ui/lib/Button.tsx
+++ b/app/ui/lib/Button.tsx
@@ -35,7 +35,7 @@ export const buttonStyle = ({
   variant = 'primary',
 }: ButtonStyleProps = {}) => {
   return cn(
-    'ox-button elevation-1 rounded inline-flex items-center justify-center align-top shrink-0',
+    'ox-button elevation-1 rounded inline-flex items-center justify-center align-top disabled:cursor-default shrink-0',
     `btn-${variant}`,
     sizeStyle[size],
     variant === 'danger'

From 7ab2a7f3692cdf6a29fa528508ae730b4ec41608 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Wed, 30 Oct 2024 09:23:24 -0500
Subject: [PATCH 14/14] use helper for symmetry

---
 app/pages/project/instances/actions.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/pages/project/instances/actions.tsx b/app/pages/project/instances/actions.tsx
index fadcc40583..6b50afd038 100644
--- a/app/pages/project/instances/actions.tsx
+++ b/app/pages/project/instances/actions.tsx
@@ -105,9 +105,8 @@ export const useMakeInstanceActions = (
             })
           },
           disabled: !instanceCan.stop(instance) && (
-            <>
-              Only <span className="text-default">running</span> instances can be stopped
-            </>
+            // don't list all the states, it's overwhelming
+            <>Only {fancifyStates(['running'])} instances can be stopped</>
           ),
         },
       ]