Try swagger-typescript-api for real

.github/workflows/packer.yaml

@@ -46,7 +46,7 @@ jobs:
           CLOUDFLARE_TOKEN: ${{secrets.CLOUDFLARE_TOKEN}}
           SSL_CERT: ${{secrets.SSL_CERT}}
           SSL_KEY: ${{secrets.SSL_KEY}}
-          API_VERSION: de84bb85d6ca264b1adddac9822e173aeb2b433a
+          API_VERSION: 038dbd04fbc292b5f7880c0d0c723ef182145cb2
 
       # get the image information from gcloud
       - name: Get image information

README.md

@@ -8,7 +8,7 @@ Web client to the [Oxide control plane API](https://github.com/oxidecomputer/omi
 - [React](https://reactjs.org/) (+ [React Router](https://reactrouter.com/), [React Query](https://react-query.tanstack.com), [React Table](https://react-table.tanstack.com))
 - [Jest](https://jestjs.io/) + [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
 - [Tailwind](https://tailwindcss.com/)
-- [OpenAPI Generator](https://openapi-generator.tech/) (generates typed API client from Nexus's [OpenAPI spec](app/docs/nexus-openapi.json))
+- [OpenAPI Generator](https://github.com/acacode/swagger-typescript-api) (generates typed API client from Nexus's [OpenAPI spec](app/docs/nexus-openapi.json))
 - [Vite](https://vitejs.dev/)
 - [Storybook](https://storybook.js.org/) (see main branch Storybook [here](https://console-ui-storybook.vercel.app/))
 

app/components/InstancesTable.tsx

@@ -61,7 +61,7 @@ const columns = [
           className="!no-underline"
           title={value.timeRunStateUpdated.toLocaleString()}
         >
-          {timeAgoAbbr(value.timeRunStateUpdated)}
+          {timeAgoAbbr(new Date(value.timeRunStateUpdated))}
         </abbr>
       </span>
     ),
@@ -171,7 +171,7 @@ export const InstancesTable = ({ className }: { className?: string }) => {
     {
       organizationName: orgName,
       projectName,
-      pageToken: currentPage,
+      page_token: currentPage,
       limit: PAGE_SIZE,
     },
     { refetchInterval: 5000, keepPreviousData: true }
@@ -223,13 +223,13 @@ export const InstancesTable = ({ className }: { className?: string }) => {
           </PageButton>
           <PageButton
             onClick={() =>
-              instances.nextPage && goToNextPage(instances.nextPage)
+              instances.next_page && goToNextPage(instances.next_page)
             }
-            disabled={!instances.nextPage}
+            disabled={!instances.next_page}
             aria-label="Next"
           >
             {/* filled triangle right, outline triangle right */}
-            {instances.nextPage ? '\u25B6' : '\u25B7'}
+            {instances.next_page ? '\u25B6' : '\u25B7'}
           </PageButton>
         </span>
       </div>

app/pages/LoginPage.tsx

@@ -21,6 +21,7 @@ import { useToast } from '../hooks'
 export default function LoginPage() {
   const navigate = useNavigate()
   const addToast = useToast()
+  // TODO these are not under organizations. annoying. should really just use plain react-query
   const loginPost = useApiMutation('spoofLogin', {
     onSuccess: () => {
       addToast({
@@ -58,9 +59,7 @@ export default function LoginPage() {
           variant="solid"
           className="w-full"
           disabled={loginPost.isLoading}
-          onClick={() =>
-            loginPost.mutate({ loginParams: { username: 'privileged' } })
-          }
+          onClick={() => loginPost.mutate({ body: { username: 'privileged' } })}
         >
           Privileged
         </Button>
@@ -70,7 +69,7 @@ export default function LoginPage() {
           className="w-full"
           disabled={loginPost.isLoading}
           onClick={() =>
-            loginPost.mutate({ loginParams: { username: 'unprivileged' } })
+            loginPost.mutate({ body: { username: 'unprivileged' } })
           }
         >
           Unprivileged
@@ -80,9 +79,7 @@ export default function LoginPage() {
           variant="ghost"
           className="w-full"
           disabled={loginPost.isLoading}
-          onClick={() =>
-            loginPost.mutate({ loginParams: { username: 'other' } })
-          }
+          onClick={() => loginPost.mutate({ body: { username: 'other' } })}
         >
           Bad Request
         </Button>

app/pages/ProjectCreatePage.tsx

@@ -13,6 +13,7 @@ import {
   Success16Icon,
   FieldTitle,
 } from '@oxide/ui'
+import type { Project } from '@oxide/api'
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
 import { useParams, useToast } from '../hooks'
 import { getServerError } from '../util/errors'
@@ -24,40 +25,23 @@ const ERROR_CODES = {
 }
 
 // exists primarily so we can test it without worrying about route params
-export function ProjectCreateForm({ orgName }: { orgName: string }) {
-  const navigate = useNavigate()
-
-  const queryClient = useApiQueryClient()
-  const addToast = useToast()
-
+export function ProjectCreateForm({
+  orgName,
+  onSuccess,
+}: {
+  orgName: string
+  onSuccess: (p: Project) => void
+}) {
   const createProject = useApiMutation('organizationProjectsPost', {
-    onSuccess: (data) => {
-      // refetch list of projects in sidebar
-      queryClient.invalidateQueries('organizationProjectsGet', {
-        organizationName: orgName,
-      })
-      // avoid the project fetch when the project page loads since we have the data
-      queryClient.setQueryData(
-        'organizationProjectsGetProject',
-        { organizationName: orgName, projectName: data.name },
-        data
-      )
-      addToast({
-        icon: <Success16Icon />,
-        title: 'Success!',
-        content: 'Your project has been created.',
-        timeout: 5000,
-      })
-      navigate(`/orgs/${orgName}/projects/${data.name}`)
-    },
+    onSuccess,
   })
   return (
     <Formik
       initialValues={{ name: '', description: '' }}
       onSubmit={({ name, description }) => {
         createProject.mutate({
           organizationName: orgName,
-          projectCreate: { name, description },
+          body: { name, description },
         })
       }}
     >
@@ -105,6 +89,10 @@ export function ProjectCreateForm({ orgName }: { orgName: string }) {
 }
 
 export default function ProjectCreatePage() {
+  const queryClient = useApiQueryClient()
+  const addToast = useToast()
+  const navigate = useNavigate()
+
   const { orgName } = useParams('orgName')
   return (
     <>
@@ -113,7 +101,28 @@ export default function ProjectCreatePage() {
           Create a new project
         </PageTitle>
       </PageHeader>
-      <ProjectCreateForm orgName={orgName} />
+      <ProjectCreateForm
+        orgName={orgName}
+        onSuccess={(project) => {
+          // refetch list of projects in sidebar
+          queryClient.invalidateQueries('organizationProjectsGet', {
+            organizationName: orgName,
+          })
+          // avoid the project fetch when the project page loads since we have the data
+          queryClient.setQueryData(
+            'organizationProjectsGetProject',
+            { organizationName: orgName, projectName: project.name },
+            project
+          )
+          addToast({
+            icon: <Success16Icon />,
+            title: 'Success!',
+            content: 'Your project has been created.',
+            timeout: 5000,
+          })
+          navigate(`../${project.name}`)
+        }}
+      />
     </>
   )
 }

app/pages/ProjectsPage.tsx

@@ -76,7 +76,7 @@ const ProjectsPage = () => {
             </section>
             <footer className="p-4 border-t border-gray-400 text-xs">
               <span className="uppercase">
-                {formatDistanceToNowStrict(item.timeCreated, {
+                {formatDistanceToNowStrict(new Date(item.timeCreated), {
                   addSuffix: true,
                 })}
               </span>

app/pages/__tests__/InstanceCreateForm.spec.tsx

@@ -20,13 +20,20 @@ const instancesUrl = `${projectUrl}/instances`
 const disksUrl = `${projectUrl}/disks`
 const vpcsUrl = `${projectUrl}/vpcs`
 
+let successSpy: jest.Mock
+
 describe('InstanceCreateForm', () => {
   beforeEach(() => {
     // existing disk modal fetches disks on render even if it's not visible
     fetchMock.get(disksUrl, 200)
     fetchMock.get(vpcsUrl, 200)
+    successSpy = jest.fn()
     renderWithRouter(
-      <InstanceCreateForm orgName={org.name} projectName={project.name} />
+      <InstanceCreateForm
+        orgName={org.name}
+        projectName={project.name}
+        onSuccess={successSpy}
+      />
     )
   })
 
@@ -62,7 +69,10 @@ describe('InstanceCreateForm', () => {
   })
 
   it('shows generic message for unknown server error', async () => {
-    fetchMock.post(instancesUrl, 400)
+    fetchMock.post(instancesUrl, {
+      status: 400,
+      body: { error_code: 'UnknownCode' },
+    })
 
     fireEvent.click(submitButton())
 
@@ -89,16 +99,15 @@ describe('InstanceCreateForm', () => {
     )
   })
 
-  it('navigates to project page on success', async () => {
+  it('calls onSuccess on success', async () => {
     const mock = fetchMock.post(instancesUrl, { status: 201, body: instance })
 
-    const projectPath = `/orgs/${org.name}/projects/${project.name}`
-    expect(window.location.pathname).not.toEqual(projectPath)
+    expect(successSpy).not.toHaveBeenCalled()
 
     fireEvent.click(submitButton())
 
     await waitFor(() => expect(mock.called(instancesUrl)).toBeTruthy())
     await waitFor(() => expect(mock.done()).toBeTruthy())
-    await waitFor(() => expect(window.location.pathname).toEqual(projectPath))
+    await waitFor(() => expect(successSpy).toHaveBeenCalled())
   })
 })

app/pages/__tests__/ProjectCreatePage.spec.tsx

@@ -22,9 +22,14 @@ function enterName(value: string) {
   fireEvent.change(nameInput, { target: { value } })
 }
 
+let successSpy: jest.Mock
+
 describe('ProjectCreateForm', () => {
   beforeEach(() => {
-    renderWithRouter(<ProjectCreateForm orgName={org.name} />)
+    successSpy = jest.fn()
+    renderWithRouter(
+      <ProjectCreateForm orgName={org.name} onSuccess={successSpy} />
+    )
     enterName('valid-name')
   })
 
@@ -78,7 +83,10 @@ describe('ProjectCreateForm', () => {
   })
 
   it('shows generic message for unknown server error', async () => {
-    fetchMock.post(projectsUrl, { status: 400 })
+    fetchMock.post(projectsUrl, {
+      status: 400,
+      body: { error_code: 'UnknownCode' },
+    })
 
     fireEvent.click(submitButton())
 
@@ -95,19 +103,18 @@ describe('ProjectCreateForm', () => {
     )
   })
 
-  it('navigates to project page on success', async () => {
+  it('calls onSuccess on success', async () => {
     const mock = fetchMock.post(projectsUrl, {
       status: 201,
       body: project,
     })
 
-    const projectPath = `/orgs/${org.name}/projects/${project.name}`
-    expect(window.location.pathname).not.toEqual(projectPath)
+    expect(successSpy).not.toHaveBeenCalled()
 
     fireEvent.click(submitButton())
 
     await waitFor(() => expect(mock.called()).toBeTruthy())
     await waitFor(() => expect(mock.done()).toBeTruthy())
-    await waitFor(() => expect(window.location.pathname).toEqual(projectPath))
+    await waitFor(() => expect(successSpy).toHaveBeenCalled())
   })
 })

app/pages/project/instances/create/InstancesCreatePage.tsx

@@ -44,24 +44,20 @@ const ERROR_CODES = {
 type InstanceCreateFormProps = {
   orgName: string
   projectName: string
+  onSuccess: () => void
 }
 
 export function InstanceCreateForm({
   orgName,
   projectName,
+  onSuccess,
 }: InstanceCreateFormProps) {
-  const navigate = useNavigate()
-
   // modals
   const [showNewDiskModal, setShowNewDiskModal] = useState(false)
   const [showExistingDiskModal, setShowExistingDiskModal] = useState(false)
   const [showNetworkModal, setShowNetworkModal] = useState(false)
 
-  const createInstance = useApiMutation('projectInstancesPost', {
-    onSuccess: () => {
-      navigate(`/orgs/${orgName}/projects/${projectName}`)
-    },
-  })
+  const createInstance = useApiMutation('projectInstancesPost', { onSuccess })
 
   const renderLargeRadioCards = (category: string) => {
     return INSTANCE_SIZES.filter((option) => option.category === category).map(
@@ -95,7 +91,7 @@ export function InstanceCreateForm({
           createInstance.mutate({
             organizationName: orgName,
             projectName,
-            instanceCreate: {
+            body: {
               name: values['instance-name'],
               hostname: values.hostname,
               description: `An instance in project: ${projectName}`,
@@ -336,6 +332,7 @@ export function InstanceCreateForm({
 }
 
 const InstanceCreatePage = () => {
+  const navigate = useNavigate()
   const { orgName, projectName } = useParams('orgName', 'projectName')
 
   return (
@@ -345,7 +342,11 @@ const InstanceCreatePage = () => {
           Create a new instance
         </PageTitle>
       </PageHeader>
-      <InstanceCreateForm orgName={orgName} projectName={projectName} />
+      <InstanceCreateForm
+        orgName={orgName}
+        projectName={projectName}
+        onSuccess={() => navigate('..')} // project page
+      />
     </>
   )
 }

app/pages/project/networking/VpcPage/tabs/VpcSubnetsTab.tsx

@@ -20,7 +20,7 @@ export const VpcSubnetsTab = () => {
       <Column
         id="ip-block"
         header="IP Block"
-        accessor={(vpc) => [vpc.ipv4Block, vpc.ipv6Block]}
+        accessor={(vpc) => [vpc.ipv4_block, vpc.ipv6_block]}
         cell={TwoLineCell}
       />
       <Column id="created" accessor="identity.timeCreated" cell={DateCell} />