tapimo 0.9.0 → 0.10.1

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

@@ -59,9 +59,11 @@ function RouteComponent() {
       alert('Enter a name that identifies what uses this key.')
       return
     }
+    const expiresAt_value = field('expiresAt')
+    const expiresAt = expiresAt_value ? new Date(expiresAt_value).toISOString() : undefined
     const orgId = filters.orgId ?? field('orgId')
     const rateLimit = field('rateLimit')
-    const perMinute = rateLimit ? Number(rateLimit) : undefined
+    const limit = rateLimit ? Number(rateLimit) : undefined
     const environment = field('environment') === 'sandbox' ? 'sandbox' : 'production'
     const pendingZoneScopes = (['read', 'write'] as const).map((access) => {
       const chainId = field(`zoneChainId_${access}`)
@@ -87,10 +89,13 @@ function RouteComponent() {
     provision.mutate(
       {
         environment,
+        ...(expiresAt === undefined ? {} : { expiresAt }),
         name,
         ...(orgId ? { orgId } : {}),
         ...(filters.projectId ? { projectId: filters.projectId } : {}),
-        ...(perMinute === undefined ? {} : { rateLimits: { '*': { perMinute } } }),
+        ...(limit === undefined
+          ? {}
+          : { rateLimits: { '*': { limit, period: 'minute' as const } } }),
         scopes: scopes as ApiKeys.provision.Input['scopes'],
       },
       { onError: (error) => alert(error.message), onSuccess: () => setOpen(false) },
@@ -273,7 +278,7 @@ function ProvisionForm(props: {
           </div>
         ) : null}
         <Fields
-          className="min-h-0 flex-1 gap-6 [grid-template-rows:auto_auto_auto_auto_minmax(0,1fr)]"
+          className="min-h-0 flex-1 gap-6 overflow-y-auto overscroll-contain"
           variant="default"
         >
           <OrganizationAutocomplete orgId={props.orgId} />
@@ -289,6 +294,12 @@ function ProvisionForm(props: {
               <option value="sandbox">Sandbox</option>
             </select>
           </div>
+          <Input
+            label="Expires at (optional)"
+            min={toLocalDateTimeCeil(new Date(Date.now() + 2 * 60_000))}
+            name="expiresAt"
+            type="datetime-local"
+          />
           <Input
             defaultValue="10000"
             label="Rate limit"
@@ -298,14 +309,14 @@ function ProvisionForm(props: {
             suffix="req/min"
             type="number"
           />
-          <div className="flex min-h-0 flex-col gap-2 overflow-hidden">
+          <div className="flex flex-col gap-2">
             <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>
             ) : (
-              <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain border border-border">
+              <div className="border border-border">
                 <Rows variant="surface">
                   {(scopes.data?.data ?? []).map((entry) => {
                     const zoneAccess = Scopes.accessFromTemplate(entry.scope)
@@ -618,7 +629,7 @@ function KeyList(props: {
 function KeyRow(props: { currentUser?: string | undefined; record: ApiKeys.ApiKey }) {
   const { currentUser, record } = props
   const [expanded, setExpanded] = useState(false)
-  const perMinute = record.rateLimits?.['*']?.perMinute
+  const rateLimit = record.rateLimits?.['*']
 
   return (
     <>
@@ -659,7 +670,9 @@ function KeyRow(props: { currentUser?: string | undefined; record: ApiKeys.ApiKe
             <Detail label="Key ID">{record.id}</Detail>
             <Detail label="Environment">{record.environment ?? 'production'}</Detail>
             <Detail label="Rate limit">
-              {perMinute === undefined ? 'Inherited' : `${perMinute} req/min`}
+              {rateLimit === undefined
+                ? 'Inherited'
+                : `${rateLimit.limit} req/${rateLimit.period === 'minute' ? 'min' : 'sec'}`}
             </Detail>
             <Detail label="Token">···{record.tokenLast4}</Detail>
             <Detail label="Organization">{organization(record)}</Detail>
@@ -804,9 +817,11 @@ function RevokeDialog(props: { currentUser?: string | undefined; record: ApiKeys
           <Detail label="Project">{project(record)}</Detail>
           <Detail label="Provisioned by">{creator ?? 'Unknown'}</Detail>
           <Detail label="Rate limit">
-            {record.rateLimits?.['*']?.perMinute === undefined
+            {record.rateLimits?.['*'] === undefined
               ? 'Inherited'
-              : `${record.rateLimits['*']!.perMinute} req/min`}
+              : `${record.rateLimits['*']!.limit} req/${
+                  record.rateLimits['*']!.period === 'minute' ? 'min' : 'sec'
+                }`}
           </Detail>
         </dl>
         {differentCreator ? (
@@ -858,6 +873,13 @@ function Detail(props: { children: ReactNode; className?: string; label: ReactNo
   )
 }
 
+/** Rounds an instant up for a minute-precision `datetime-local` control. */
+function toLocalDateTimeCeil(date: Date) {
+  const minute = 60_000
+  const time = Math.ceil(date.getTime() / minute) * minute
+  return new Date(time - date.getTimezoneOffset() * minute).toISOString().slice(0, 16)
+}
+
 function matches(record: ApiKeys.ApiKey, query?: string) {
   const normalized = query?.trim().toLowerCase()
   if (!normalized) return true