From 7d3cb0ee249fc43f1e9bd49f6b911f47d587559d Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Tue, 21 May 2024 17:28:29 -0700
Subject: [PATCH 1/3] Add logic to dim button when in a disabled state

---
 app/ui/lib/CreateButton.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/ui/lib/CreateButton.tsx b/app/ui/lib/CreateButton.tsx
index 9d479aa790..989efeef80 100644
--- a/app/ui/lib/CreateButton.tsx
+++ b/app/ui/lib/CreateButton.tsx
@@ -6,15 +6,18 @@
  * Copyright Oxide Computer Company
  */
 
+import cn from 'classnames'
 import { Link, type LinkProps } from 'react-router-dom'
 
 import { AddRoundel12Icon } from '@oxide/design-system/icons/react'
 
 import { Button, buttonStyle, type ButtonProps } from '~/ui/lib/Button'
 
-export const CreateButton = ({ children, ...props }: ButtonProps) => (
-  <Button size="sm" className="shrink-0" {...props}>
-    <AddRoundel12Icon className="mr-2 text-accent-secondary" />
+export const CreateButton = ({ children, disabled, ...props }: ButtonProps) => (
+  <Button size="sm" className="shrink-0" disabled={disabled} {...props}>
+    <AddRoundel12Icon
+      className={cn(disabled ? 'text-accent-disabled' : 'text-accent-secondary', 'mr-2')}
+    />
     {children}
   </Button>
 )

From 5752e5170e709b6c51be78fffd29d11e1a97085f Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Tue, 21 May 2024 17:32:40 -0700
Subject: [PATCH 2/3] small test improvement

---
 test/e2e/instance-networking.e2e.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/test/e2e/instance-networking.e2e.ts b/test/e2e/instance-networking.e2e.ts
index 2810982964..bf38f1a38f 100644
--- a/test/e2e/instance-networking.e2e.ts
+++ b/test/e2e/instance-networking.e2e.ts
@@ -35,9 +35,13 @@ test('Instance networking tab — NIC table', async ({ page }) => {
     '/projects/mock-project/vpcs/mock-vpc'
   )
 
+  // Ensure that the 'Add network interface' button is disabled when the instance is running
+  await expect(page.getByRole('button', { name: 'Add network interface' })).toBeDisabled()
+
   // Have to stop instance to edit NICs
   await stopInstance(page)
 
+  await expect(page.getByRole('button', { name: 'Add network interface' })).toBeEnabled()
   await page.click('role=button[name="Add network interface"]')
 
   // Add network interface

From 076f5f7f4d84b8187b2cb7e2fc751955c59fe071 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Wed, 22 May 2024 09:20:16 -0700
Subject: [PATCH 3/3] refactor CreateButton, tests

---
 app/ui/lib/CreateButton.tsx         | 8 +++++---
 test/e2e/instance-networking.e2e.ts | 8 +++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/ui/lib/CreateButton.tsx b/app/ui/lib/CreateButton.tsx
index 989efeef80..7f6e9431cf 100644
--- a/app/ui/lib/CreateButton.tsx
+++ b/app/ui/lib/CreateButton.tsx
@@ -13,10 +13,12 @@ import { AddRoundel12Icon } from '@oxide/design-system/icons/react'
 
 import { Button, buttonStyle, type ButtonProps } from '~/ui/lib/Button'
 
-export const CreateButton = ({ children, disabled, ...props }: ButtonProps) => (
-  <Button size="sm" className="shrink-0" disabled={disabled} {...props}>
+export const CreateButton = ({ children, ...props }: ButtonProps) => (
+  <Button size="sm" className="shrink-0" {...props}>
     <AddRoundel12Icon
-      className={cn(disabled ? 'text-accent-disabled' : 'text-accent-secondary', 'mr-2')}
+      // dim the icon color from the default (text accent) because it looks a
+      // lot brighter than text, but default disabled color is fine
+      className={cn('mr-2', { 'text-accent-secondary': !props.disabled })}
     />
     {children}
   </Button>
diff --git a/test/e2e/instance-networking.e2e.ts b/test/e2e/instance-networking.e2e.ts
index bf38f1a38f..11e9695ef0 100644
--- a/test/e2e/instance-networking.e2e.ts
+++ b/test/e2e/instance-networking.e2e.ts
@@ -35,14 +35,16 @@ test('Instance networking tab — NIC table', async ({ page }) => {
     '/projects/mock-project/vpcs/mock-vpc'
   )
 
+  const addNicButton = page.getByRole('button', { name: 'Add network interface' })
+
   // Ensure that the 'Add network interface' button is disabled when the instance is running
-  await expect(page.getByRole('button', { name: 'Add network interface' })).toBeDisabled()
+  await expect(addNicButton).toBeDisabled()
 
   // Have to stop instance to edit NICs
   await stopInstance(page)
 
-  await expect(page.getByRole('button', { name: 'Add network interface' })).toBeEnabled()
-  await page.click('role=button[name="Add network interface"]')
+  await expect(addNicButton).toBeEnabled()
+  await addNicButton.click()
 
   // Add network interface
   // TODO: modal title is not getting hooked up, IDs are wrong