tapimo 0.5.0 → 0.5.2

package/src/admin/ui/src/routes/api-keys.tsx

@@ -36,7 +36,18 @@ function RouteComponent() {
     const rateLimit = field('rateLimit')
     const perMinute = rateLimit ? Number(rateLimit) : undefined
     const environment = field('environment') === 'sandbox' ? 'sandbox' : 'production'
-    const scopes = form.getAll('scopes').filter((v): v is string => typeof v === 'string')
+    const zoneChainId = field('zoneChainId')
+    const pendingZoneScope = zoneChainId ? Scopes.fromZoneChainId(zoneChainId) : undefined
+    if (zoneChainId && !pendingZoneScope) {
+      alert('Enter a positive integer Zone chain ID.')
+      return
+    }
+    const scopes = [
+      ...new Set([
+        ...form.getAll('scopes').filter((v): v is string => typeof v === 'string'),
+        ...(pendingZoneScope ? [pendingZoneScope] : []),
+      ]),
+    ]
     if (scopes.length === 0) {
       alert('Select at least one scope.')
       return
@@ -98,7 +109,7 @@ function RouteComponent() {
           )}
           loading={keys.isPending}
         />
-        <Dialog.Popup>
+        <Dialog.Popup className="flex max-h-[calc(100dvh-2rem)] flex-col overflow-hidden">
           <ProvisionForm
             onSubmit={onSubmit}
             orgId={filters.orgId}
@@ -169,7 +180,7 @@ function ProvisionForm(props: {
           : 'Create a key that authenticates requests to the API.'}
       </Dialog.Description>
       <form
-        className="mt-6 flex flex-col gap-8"
+        className="mt-6 flex min-h-0 flex-1 flex-col gap-8"
         onSubmit={(event) => {
           event.preventDefault()
           props.onSubmit(new FormData(event.currentTarget))
@@ -190,7 +201,10 @@ function ProvisionForm(props: {
             ) : null}
           </div>
         ) : null}
-        <Fields className="gap-6" variant="default">
+        <Fields
+          className="min-h-0 flex-1 gap-6 [grid-template-rows:auto_auto_auto_minmax(0,1fr)]"
+          variant="default"
+        >
           <Input label="Name" name="name" placeholder="e.g. production-api" />
           <div className="flex flex-col gap-2">
             <span className="label-13 text-foreground-secondary">Environment</span>
@@ -212,35 +226,41 @@ function ProvisionForm(props: {
             suffix="req/min"
             type="number"
           />
-          <div className="flex flex-col gap-2">
+          <div className="flex min-h-0 flex-col gap-2 overflow-hidden">
             <span className="label-13 text-foreground-secondary">Scopes</span>
             {scopes.isPending ? (
               <span className="text-label-13 text-foreground-secondary">Loading scopes…</span>
             ) : scopes.error ? (
               <span className="text-label-13 text-negative">{scopes.error.message}</span>
             ) : (
-              <Rows className="border border-border" variant="surface">
-                {(scopes.data?.data ?? []).map((entry) => (
-                  <Rows.Row
-                    key={entry.scope}
-                    className="min-h-[56px] py-3"
-                    render={<label className="cursor-pointer" />}
-                    style={{ height: 'auto' }}
-                  >
-                    <Checkbox
-                      defaultChecked={entry.scope === 'data:read'}
-                      name="scopes"
-                      value={entry.scope}
-                    />
-                    <span className="flex min-w-0 flex-col gap-0.5">
-                      <span className="text-label-13 text-foreground">{entry.scope}</span>
-                      <span className="text-label-12 text-foreground-secondary">
-                        {entry.description}
-                      </span>
-                    </span>
-                  </Rows.Row>
-                ))}
-              </Rows>
+              <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain border border-border">
+                <Rows variant="surface">
+                  {(scopes.data?.data ?? []).map((entry) =>
+                    entry.scope === Scopes.zoneTemplate ? (
+                      <ZoneScopeRow description={entry.description} key={entry.scope} />
+                    ) : (
+                      <Rows.Row
+                        key={entry.scope}
+                        className="min-h-[56px] py-3"
+                        render={<label className="cursor-pointer" />}
+                        style={{ height: 'auto' }}
+                      >
+                        <Checkbox
+                          defaultChecked={entry.scope === 'data:read'}
+                          name="scopes"
+                          value={entry.scope}
+                        />
+                        <span className="flex min-w-0 flex-col gap-0.5">
+                          <span className="text-label-13 text-foreground">{entry.scope}</span>
+                          <span className="text-label-12 text-foreground-secondary">
+                            {entry.description}
+                          </span>
+                        </span>
+                      </Rows.Row>
+                    ),
+                  )}
+                </Rows>
+              </div>
             )}
           </div>
         </Fields>
@@ -255,6 +275,87 @@ function ProvisionForm(props: {
   )
 }
 
+function ZoneScopeRow(props: { description: string }) {
+  const [chainId, setChainId] = useState('')
+  const [selected, setSelected] = useState<readonly string[]>([])
+  const scope = Scopes.fromZoneChainId(chainId)
+  const duplicate = scope ? selected.includes(scope) : false
+  const error =
+    chainId && !scope
+      ? 'Enter a positive integer chain ID.'
+      : duplicate
+        ? 'Zone already added.'
+        : false
+
+  function add() {
+    if (!scope || duplicate) return
+    setSelected((current) => [...current, scope])
+    setChainId('')
+  }
+
+  return (
+    <Rows.Row className="min-h-[56px] flex-col items-stretch py-3" style={{ height: 'auto' }}>
+      <span className="flex min-w-0 flex-col gap-0.5">
+        <span className="text-label-13 text-foreground">{Scopes.zoneTemplate}</span>
+        <span className="text-label-12 text-foreground-secondary">{props.description}</span>
+      </span>
+      <div className="flex items-start gap-2 max-sm:flex-col">
+        <div className="min-w-0 flex-1 max-sm:w-full">
+          <Input
+            aria-label="Zone chain ID"
+            autoComplete="off"
+            error={error}
+            inputMode="numeric"
+            name="zoneChainId"
+            onChange={(event) => setChainId(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key !== 'Enter') return
+              event.preventDefault()
+              add()
+            }}
+            pattern="[0-9]*"
+            placeholder="421700001"
+            prefix="zone:"
+            suffix=":read"
+            value={chainId}
+          />
+        </div>
+        <Button
+          className="max-sm:w-full"
+          disabled={!scope || duplicate}
+          onClick={add}
+          type="button"
+        >
+          Add zone
+        </Button>
+      </div>
+      {selected.length > 0 ? (
+        <ul className="flex flex-col gap-2">
+          {selected.map((scope) => (
+            <li
+              className="flex min-w-0 items-center gap-2 border border-border bg-secondary py-1 pr-1 pl-2"
+              key={scope}
+            >
+              <input name="scopes" type="hidden" value={scope} />
+              <code className="min-w-0 flex-1 truncate text-label-12 text-foreground">{scope}</code>
+              <Button.Icon
+                onClick={() =>
+                  setSelected((current) => current.filter((candidate) => candidate !== scope))
+                }
+                size="md"
+                title={`Remove ${scope}`}
+                variant="plain"
+              >
+                <X className="size-4" />
+              </Button.Icon>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </Rows.Row>
+  )
+}
+
 function KeyList(props: {
   environment: 'production' | 'sandbox'
   error: Error | null