Dim plus sign on disabled button (#2256)

* Add logic to dim button when in a disabled state

* small test improvement

* refactor CreateButton, tests

Author: charliepark

app/ui/lib/CreateButton.tsx

@@ -6,6 +6,7 @@
  * Copyright Oxide Computer Company
  */
 
+import cn from 'classnames'
 import { Link, type LinkProps } from 'react-router-dom'
 
 import { AddRoundel12Icon } from '@oxide/design-system/icons/react'
@@ -14,7 +15,11 @@ 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" />
+    <AddRoundel12Icon
+      // 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>
 )

test/e2e/instance-networking.e2e.ts

@@ -35,10 +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(addNicButton).toBeDisabled()
+
   // Have to stop instance to edit NICs
   await stopInstance(page)
 
-  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