From f6cd07abe5cdaf6c1f44975b1246720aafda9014 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Thu, 10 Nov 2022 10:23:32 -0600
Subject: [PATCH 1/3] refetch button on instances page, update ghost button
 colors

---
 app/pages/project/instances/InstancesPage.tsx | 10 ++++++----
 libs/ui/lib/button/button.css                 |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/pages/project/instances/InstancesPage.tsx b/app/pages/project/instances/InstancesPage.tsx
index c1bcd6f01c..744be16a2a 100644
--- a/app/pages/project/instances/InstancesPage.tsx
+++ b/app/pages/project/instances/InstancesPage.tsx
@@ -11,10 +11,12 @@ import {
   useQueryTable,
 } from '@oxide/table'
 import {
+  Button,
   EmptyMessage,
   Instances24Icon,
   PageHeader,
   PageTitle,
+  Refresh16Icon,
   TableActions,
   buttonStyle,
 } from '@oxide/ui'
@@ -76,10 +78,7 @@ export function InstancesPage() {
   const { Table, Column } = useQueryTable(
     'instanceList',
     { path: projectParams },
-    {
-      refetchInterval: 5000,
-      keepPreviousData: true,
-    }
+    { keepPreviousData: true }
   )
 
   if (!instances) return null
@@ -90,6 +89,9 @@ export function InstancesPage() {
         <PageTitle icon={<Instances24Icon />}>Instances</PageTitle>
       </PageHeader>
       <TableActions>
+        <Button size="sm" variant="ghost" onClick={refetchInstances}>
+          <Refresh16Icon />
+        </Button>
         <Link
           to={pb.instanceNew({ orgName, projectName })}
           className={buttonStyle({ size: 'sm', variant: 'default' })}
diff --git a/libs/ui/lib/button/button.css b/libs/ui/lib/button/button.css
index 303397e3ca..aa1ed82d07 100644
--- a/libs/ui/lib/button/button.css
+++ b/libs/ui/lib/button/button.css
@@ -38,7 +38,7 @@
  * Ghost
  */
 .btn-primary-ghost {
-  @apply border text-accent border-accent-tertiary hover:bg-accent-secondary disabled:bg-transparent;
+  @apply border text-secondary border-default hover:bg-hover disabled:bg-transparent;
 }
 
 /* Removing `-ghost` so this version is default `btn-secondary` */

From b14199dcd26d534c71e840dc0ce784d325c8a579 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Thu, 10 Nov 2022 10:54:04 -0600
Subject: [PATCH 2/3] don't include all the <button> props, too confusing

---
 libs/ui/lib/button/Button.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/libs/ui/lib/button/Button.tsx b/libs/ui/lib/button/Button.tsx
index 66e882ee22..bdb27f36e1 100644
--- a/libs/ui/lib/button/Button.tsx
+++ b/libs/ui/lib/button/Button.tsx
@@ -70,7 +70,17 @@ type ButtonStyleProps = {
   color?: Color
 }
 
-export type ButtonProps = React.ComponentPropsWithRef<'button'> &
+export type ButtonProps = Pick<
+  React.ComponentProps<'button'>,
+  | 'className'
+  | 'onClick'
+  | 'aria-disabled'
+  | 'disabled'
+  | 'children'
+  | 'type'
+  | 'title'
+  | 'form'
+> &
   ButtonStyleProps & {
     innerClassName?: string
     loading?: boolean
@@ -106,6 +116,7 @@ const noop: MouseEventHandler<HTMLButtonElement> = (e) => {
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
+      type = 'button',
       children,
       size,
       variant,
@@ -116,7 +127,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       disabled,
       onClick,
       'aria-disabled': ariaDisabled,
-      ...rest
+      form,
+      title,
     },
     ref
   ) => {
@@ -126,11 +138,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           'visually-disabled': disabled,
         })}
         ref={ref}
-        type="button"
+        type={type}
         onMouseDown={disabled ? noop : undefined}
         onClick={disabled ? noop : onClick}
         aria-disabled={disabled || ariaDisabled}
-        {...rest}
+        form={form}
+        title={title}
       >
         <>
           {loading && <Spinner className="absolute" />}

From 87d19ef998ebb26377e8bf36285a27cce930a301 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Thu, 10 Nov 2022 11:09:02 -0600
Subject: [PATCH 3/3] add "icon" size for buttons

---
 app/pages/project/instances/InstancesPage.tsx | 2 +-
 libs/ui/lib/button/Button.tsx                 | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/pages/project/instances/InstancesPage.tsx b/app/pages/project/instances/InstancesPage.tsx
index 744be16a2a..2c981a7e84 100644
--- a/app/pages/project/instances/InstancesPage.tsx
+++ b/app/pages/project/instances/InstancesPage.tsx
@@ -89,7 +89,7 @@ export function InstancesPage() {
         <PageTitle icon={<Instances24Icon />}>Instances</PageTitle>
       </PageHeader>
       <TableActions>
-        <Button size="sm" variant="ghost" onClick={refetchInstances}>
+        <Button size="icon" variant="ghost" onClick={refetchInstances}>
           <Refresh16Icon />
         </Button>
         <Link
diff --git a/libs/ui/lib/button/Button.tsx b/libs/ui/lib/button/Button.tsx
index bdb27f36e1..0bd3b3f52e 100644
--- a/libs/ui/lib/button/Button.tsx
+++ b/libs/ui/lib/button/Button.tsx
@@ -7,7 +7,7 @@ import { assertUnreachable } from '@oxide/util'
 
 import './button.css'
 
-export const buttonSizes = ['sm', 'base'] as const
+export const buttonSizes = ['sm', 'icon', 'base'] as const
 export const variants = ['default', 'ghost', 'link'] as const
 export const colors = ['primary', 'secondary', 'destructive', 'notice'] as const
 
@@ -17,6 +17,8 @@ export type Color = typeof colors[number]
 
 const sizeStyle: Record<ButtonSize, string> = {
   sm: 'h-8 px-3 text-mono-sm svg:w-4',
+  // meant for buttons that only contain a single icon
+  icon: 'h-8 w-8 text-mono-sm svg:w-4',
   base: 'h-10 px-3 text-mono-md svg:w-5',
 }