Add SCIM UI

app/forms/anti-affinity-group-member-add.tsx

@@ -63,9 +63,9 @@ export default function AddAntiAffinityGroupMemberForm({ instances, onDismiss }:
     <Modal isOpen onDismiss={onDismiss} title="Add instance to group">
       <Modal.Body>
         <Modal.Section>
-          <p className="text-sm text-gray-500">
+          <p>
             Select an instance to add to the anti-affinity group{' '}
-            <HL>{antiAffinityGroup}</HL>. Only stopped instances can be added to the group.
+            <HL>{antiAffinityGroup}</HL>.
           </p>
           <form id={formId} onSubmit={onSubmit}>
             <ComboboxField

app/pages/system/silos/SiloPage.tsx

@@ -61,6 +61,7 @@ export default function SiloPage() {
         <Tab to={pb.siloIpPools(siloSelector)}>IP Pools</Tab>
         <Tab to={pb.siloQuotas(siloSelector)}>Quotas</Tab>
         <Tab to={pb.siloFleetRoles(siloSelector)}>Fleet roles</Tab>
+        <Tab to={pb.siloScim(siloSelector)}>SCIM</Tab>
       </RouteTabs>
     </>
   )

app/pages/system/silos/SiloScimTab.tsx

@@ -0,0 +1,273 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+
+import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import { useCallback, useMemo, useState } from 'react'
+import { type LoaderFunctionArgs } from 'react-router'
+
+import { AccessToken24Icon } from '@oxide/design-system/icons/react'
+import { Badge } from '@oxide/design-system/ui'
+
+import {
+  apiQueryClient,
+  useApiMutation,
+  usePrefetchedApiQuery,
+  type ScimClientBearerToken,
+} from '~/api'
+import { getSiloSelector, useSiloSelector } from '~/hooks/use-params'
+import { confirmDelete } from '~/stores/confirm-delete'
+import { addToast } from '~/stores/toast'
+import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
+import { Columns } from '~/table/columns/common'
+import { Table } from '~/table/Table'
+import { CardBlock } from '~/ui/lib/CardBlock'
+import { CopyToClipboard } from '~/ui/lib/CopyToClipboard'
+import { CreateButton } from '~/ui/lib/CreateButton'
+import { DateTime } from '~/ui/lib/DateTime'
+import { EmptyMessage } from '~/ui/lib/EmptyMessage'
+import { Message } from '~/ui/lib/Message'
+import { Modal } from '~/ui/lib/Modal'
+import { TableEmptyBox } from '~/ui/lib/Table'
+import { Truncate } from '~/ui/lib/Truncate'
+
+const colHelper = createColumnHelper<ScimClientBearerToken>()
+
+const EmptyState = () => (
+  <TableEmptyBox border={false}>
+    <EmptyMessage
+      icon={<AccessToken24Icon />}
+      title="No SCIM tokens"
+      body="Create a token to see it here"
+    />
+  </TableEmptyBox>
+)
+
+export async function clientLoader({ params }: LoaderFunctionArgs) {
+  const { silo } = getSiloSelector(params)
+  await apiQueryClient.prefetchQuery('scimTokenList', { query: { silo } })
+  return null
+}
+
+export default function SiloScimTab() {
+  const siloSelector = useSiloSelector()
+  const { data } = usePrefetchedApiQuery('scimTokenList', {
+    query: { silo: siloSelector.silo },
+  })
+
+  // Order tokens by creation date, oldest first
+  const tokens = useMemo(
+    () => [...data].sort((a, b) => a.timeCreated.getTime() - b.timeCreated.getTime()),
+    [data]
+  )
+
+  const [showCreateModal, setShowCreateModal] = useState(false)
+  const [createdToken, setCreatedToken] = useState<{
+    id: string
+    bearerToken: string
+    timeCreated: Date
+    timeExpires?: Date | null
+  } | null>(null)
+
+  const deleteToken = useApiMutation('scimTokenDelete', {
+    onSuccess() {
+      apiQueryClient.invalidateQueries('scimTokenList')
+    },
+  })
+
+  const makeActions = useCallback(
+    (token: ScimClientBearerToken): MenuAction[] => [
+      {
+        label: 'Delete',
+        onActivate: confirmDelete({
+          doDelete: () =>
+            deleteToken.mutateAsync({
+              path: { tokenId: token.id },
+              query: { silo: siloSelector.silo },
+            }),
+          label: token.id,
+        }),
+      },
+    ],
+    [deleteToken, siloSelector.silo]
+  )
+
+  const staticColumns = useMemo(
+    () => [
+      colHelper.accessor('id', {
+        header: 'ID',
+        cell: (info) => (
+          <Truncate text={info.getValue()} position="middle" maxLength={18} />
+        ),
+      }),
+      colHelper.accessor('timeCreated', Columns.timeCreated),
+      colHelper.accessor('timeExpires', {
+        header: 'Expires',
+        cell: (info) => {
+          const expires = info.getValue()
+          return expires ? (
+            <DateTime date={expires} />
+          ) : (
+            <Badge color="neutral">Never</Badge>
+          )
+        },
+        meta: { thClassName: 'lg:w-1/4' },
+      }),
+    ],
+    []
+  )
+
+  const columns = useColsWithActions(staticColumns, makeActions, 'Copy token ID')
+
+  const table = useReactTable({
+    data: tokens,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  })
+  // const { href, linkText } = docLinks.scim
+  return (
+    <>
+      <CardBlock>
+        <CardBlock.Header
+          title="SCIM Bearer Tokens"
+          titleId="scim-tokens-label"
+          description="Manage authentication tokens for SCIM identity provisioning"
+        >
+          <CreateButton onClick={() => setShowCreateModal(true)}>Create token</CreateButton>
+        </CardBlock.Header>
+        <CardBlock.Body>
+          {tokens.length === 0 ? (
+            <EmptyState />
+          ) : (
+            <Table
+              aria-labelledby="scim-tokens-label"
+              table={table}
+              className="table-inline"
+            />
+          )}
+        </CardBlock.Body>
+        {/* <CardBlock.Footer>
+          <div className="text-sans-md text-raise group-hover:bg-tertiary relative -ml-2 inline-block rounded py-1 pr-7 pl-2">
+            <span className="inline-block max-w-[300px] truncate align-middle">
+              Learn more about{' '}
+              <a
+                href={href}
+                className="text-accent group-hover:text-accent"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {linkText}
+                <OpenLink12Icon className="absolute top-1.5 ml-1 translate-y-[1px]" />
+              </a>
+            </span>
+          </div>
+        </CardBlock.Footer> */}
+      </CardBlock>
+
+      {showCreateModal && (
+        <CreateTokenModal
+          siloSelector={siloSelector}
+          onDismiss={() => setShowCreateModal(false)}
+          onSuccess={(token) => {
+            setShowCreateModal(false)
+            setCreatedToken(token)
+          }}
+        />
+      )}
+
+      {createdToken && (
+        <TokenCreatedModal token={createdToken} onDismiss={() => setCreatedToken(null)} />
+      )}
+    </>
+  )
+}
+
+function CreateTokenModal({
+  siloSelector,
+  onDismiss,
+  onSuccess,
+}: {
+  siloSelector: { silo: string }
+  onDismiss: () => void
+  onSuccess: (token: {
+    id: string
+    bearerToken: string
+    timeCreated: Date
+    timeExpires?: Date | null
+  }) => void
+}) {
+  const createToken = useApiMutation('scimTokenCreate', {
+    onSuccess(token) {
+      apiQueryClient.invalidateQueries('scimTokenList')
+      onSuccess(token)
+    },
+    onError(err) {
+      addToast({ variant: 'error', title: 'Failed to create token', content: err.message })
+    },
+  })
+
+  return (
+    <Modal isOpen onDismiss={onDismiss} title="Create token">
+      <Modal.Section>
+        This token will have access to provision users and groups via SCIM. Store it
+        securely and never share it publicly.
+      </Modal.Section>
+
+      <Modal.Footer
+        onDismiss={onDismiss}
+        onAction={() => {
+          createToken.mutate({ query: { silo: siloSelector.silo } })
+        }}
+        actionText="Create"
+        actionLoading={createToken.isPending}
+      />
+    </Modal>
+  )
+}
+
+function TokenCreatedModal({
+  token,
+  onDismiss,
+}: {
+  token: {
+    id: string
+    bearerToken: string
+    timeCreated: Date
+    timeExpires?: Date | null
+  }
+  onDismiss: () => void
+}) {
+  return (
+    <Modal isOpen onDismiss={onDismiss} title="Create token">
+      <Modal.Section>
+        <Message
+          variant="notice"
+          content="This is the only time you'll see this token. Copy it now and store it securely."
+        />
+
+        <div className="mt-4">
+          <div className="text-sans-md text-raise mb-2">Bearer Token</div>
+          <div className="text-sans-md text-raise bg-default border-default flex items-stretch rounded border">
+            <div className="flex-1 overflow-hidden px-3 py-2.75 text-ellipsis">
+              {token.bearerToken}
+            </div>
+            <div className="border-default flex w-8 items-center justify-center border-l">
+              <CopyToClipboard text={token.bearerToken} />
+            </div>
+          </div>
+        </div>
+      </Modal.Section>
+
+      <Modal.Footer
+        onDismiss={onDismiss}
+        actionText="Done"
+        onAction={onDismiss}
+        showCancel={false}
+      />
+    </Modal>
+  )
+}

app/routes.tsx

@@ -154,6 +154,10 @@ export const routes = createRoutesFromElements(
               path="fleet-roles"
               lazy={() => import('./pages/system/silos/SiloFleetRolesTab').then(convert)}
             />
+            <Route
+              path="scim"
+              lazy={() => import('./pages/system/silos/SiloScimTab').then(convert)}
+            />
           </Route>
         </Route>
         <Route path="issues" element={null} />

app/ui/lib/Message.tsx

@@ -38,17 +38,17 @@ const defaultIcon: Record<Variant, ReactElement> = {
 }
 
 const color: Record<Variant, string> = {
-  success: 'bg-accent-secondary',
-  error: 'bg-error-secondary',
-  notice: 'bg-notice-secondary',
-  info: 'bg-info-secondary',
+  success: 'bg-accent-secondary border-accent/10',
+  error: 'bg-error-secondary border-destructive/10',
+  notice: 'bg-notice-secondary border-notice/10',
+  info: 'bg-info-secondary border-blue-800/10',
 }
 
 const textColor: Record<Variant, string> = {
-  success: 'text-accent *:text-accent',
-  error: 'text-error *:text-error',
-  notice: 'text-notice *:text-notice',
-  info: 'text-info *:text-info',
+  success: 'text-accent',
+  error: 'text-error',
+  notice: 'text-notice',
+  info: 'text-info',
 }
 
 const secondaryTextColor: Record<Variant, string> = {
@@ -77,22 +77,26 @@ export const Message = ({
   return (
     <div
       className={cn(
-        'elevation-1 relative flex items-start gap-2.5 overflow-hidden rounded-lg p-4',
+        'elevation-1 relative flex items-start gap-2 overflow-hidden rounded-lg border p-3 pr-5',
         color[variant],
         textColor[variant],
         className
       )}
     >
       {showIcon && (
-        <div className="mt-[2px] flex [&>svg]:h-3 [&>svg]:w-3">{defaultIcon[variant]}</div>
+        <div
+          className={cn(
+            'mt-[2px] flex [&>svg]:h-3 [&>svg]:w-3',
+            `[&>svg]:${textColor[variant]}`
+          )}
+        >
+          {defaultIcon[variant]}
+        </div>
       )}
       <div className="flex-1">
         {title && <div className="text-sans-semi-md">{title}</div>}
         <div
-          className={cn(
-            'text-sans-md [&>a]:underline',
-            title ? secondaryTextColor[variant] : textColor[variant]
-          )}
+          className={cn('text-sans-md [&>a]:tint-underline', secondaryTextColor[variant])}
         >
           {content}
         </div>

app/ui/lib/Modal.tsx

@@ -113,6 +113,7 @@ type FooterProps = {
   actionLoading?: boolean
   cancelText?: string
   disabled?: boolean
+  showCancel?: boolean
 } & MergeExclusive<{ formId: string }, { onAction: () => void }>
 
 Modal.Footer = ({
@@ -125,13 +126,16 @@ Modal.Footer = ({
   cancelText,
   disabled,
   formId,
+  showCancel = true,
 }: FooterProps) => (
   <footer className="border-secondary flex items-center justify-between border-t px-4 py-3">
     <div className="mr-4">{children}</div>
     <div className="space-x-2">
-      <Button variant="secondary" size="sm" onClick={onDismiss}>
-        {cancelText || 'Cancel'}
-      </Button>
+      {showCancel && (
+        <Button variant="secondary" size="sm" onClick={onDismiss}>
+          {cancelText || 'Cancel'}
+        </Button>
+      )}
       <Button
         type={formId ? 'submit' : 'button'}
         form={formId}