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/forms/silo-create.tsx

@@ -8,6 +8,7 @@
 import { useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 import { useNavigate } from 'react-router'
+import { match } from 'ts-pattern'
 
 import { useApiMutation, useApiQueryClient, type SiloCreate } from '@oxide/api'
 
@@ -146,15 +147,20 @@ export default function CreateSiloSideModalForm() {
         column
         control={form.control}
         items={[
-          { value: 'saml_jit', label: 'SAML' },
+          { value: 'saml_jit', label: 'SAML + JIT' },
+          { value: 'saml_scim', label: 'SAML + SCIM' },
           { value: 'local_only', label: 'Local only' },
         ]}
       />
-      {identityMode === 'saml_jit' && (
+      {match(identityMode)
+        .with('saml_jit', () => true)
+        .with('saml_scim', () => true)
+        .with('local_only', () => false)
+        .exhaustive() && (
         <TextField
           name="adminGroupName"
           label="Admin group name"
-          description="This group will be created and granted the Silo Admin role."
+          description="This group will be created and granted the admin role on the silo."
           control={form.control}
         />
       )}

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,264 @@
+/*
+ * 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 Tokens"
+          titleId="scim-tokens-label"
+          description="Tokens for authenticating requests to SCIM endpoints"
+        >
+          <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>
+        {/* TODO: put this back!
+        <CardBlock.Footer>
+          <LearnMore href={links.scimDocs} text="SCIM" />
+        </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 SCIM token">
+      <Modal.Section>
+        Anyone with this token can manage users and groups in this silo via SCIM. Since
+        group membership grants roles, this token can be used to give a user admin
+        privileges. 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="SCIM token created">
+      <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>