Handle 40 char tokens in SCIM token copy modal (#2955)

* fix scim token copy field

* Set max width on message inside SCIM modal

---------

Co-authored-by: Benjamin Leonard <benji@oxide.computer>

Author: david-crespo

app/pages/system/silos/SiloScimTab.tsx

@@ -90,6 +90,7 @@ export default function SiloScimTab() {
               path: { tokenId: token.id },
               query: { silo: siloSelector.silo },
             }),
+          resourceKind: 'SCIM token',
           label: token.id,
         }),
       },
@@ -234,19 +235,21 @@ function TokenCreatedModal({
   onDismiss: () => void
 }) {
   return (
-    <Modal isOpen onDismiss={onDismiss} title="SCIM token created">
+    <Modal isOpen onDismiss={onDismiss} title="SCIM token created" width="free">
       <Modal.Section>
         <Message
           variant="notice"
-          content=<>
-            This is the only time you’ll see this token. Copy it now and store it securely.
-          </>
+          content={
+            <div className="max-w-md">
+              You won’t see this token again. Copy it and store it securely.
+            </div>
+          }
         />
 
         <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">
+            <div className="flex-1 overflow-hidden py-2.75 pr-5 pl-3 text-nowrap text-ellipsis">
               {token.bearerToken}
             </div>
             <div className="border-default flex w-8 items-center justify-center border-l">

mock-api/msw/handlers.ts

@@ -53,6 +53,7 @@ import {
   ipRangeLen,
   NotImplemented,
   paginated,
+  randomHex,
   requireFleetAdmin,
   requireFleetCollab,
   requireFleetViewer,
@@ -1903,12 +1904,9 @@ export const handlers = makeHandlers({
     requireFleetCollab(cookies)
     const silo = lookup.silo({ silo: query.silo })
 
-    // Generate a 20-character hex string
-    const hexString = uuid().replace(/-/g, '').slice(0, 20)
-
     const newToken: Json<Api.ScimClientBearerTokenValue> = {
       id: uuid(),
-      bearer_token: `oxide-scim-${hexString}`,
+      bearer_token: `oxide-scim-${randomHex(40)}`,
       time_created: new Date().toISOString(),
     }
 

mock-api/msw/util.ts

@@ -422,3 +422,10 @@ export function handleOxqlMetrics({ query }: TimeseriesQuery): Json<OxqlQueryRes
   const stateValue = getCpuStateFromQuery(query)
   return getMockOxqlInstanceData(metricName, stateValue)
 }
+
+export function randomHex(length: number) {
+  const hexChars = '0123456789abcdef'
+  return Array.from({ length })
+    .map(() => hexChars.charAt(Math.floor(Math.random() * hexChars.length)))
+    .join('')
+}

test/e2e/scim-tokens.e2e.ts

@@ -41,9 +41,9 @@ test('Create SCIM token', async ({ page }) => {
   await expect(tokenCreatedModal).toBeVisible()
 
   // Check that the bearer token is visible and starts with oxide-scim-
-  const bearerTokenDiv = tokenCreatedModal.getByText(/^oxide-scim-[a-f0-9]{20}$/)
+  const bearerTokenDiv = tokenCreatedModal.getByText(/^oxide-scim-[a-f0-9]{40}$/)
   await expect(bearerTokenDiv).toBeVisible()
-  const warning = tokenCreatedModal.getByText('This is the only')
+  const warning = tokenCreatedModal.getByText('You won’t see this token again')
   await expect(warning).toBeVisible()
 
   // Check that copy button is visible