SigningKeyRow() — supabase Function Reference

Source Code

apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/signing-key-row.tsx lines 45–219

export const SigningKeyRow = ({
  signingKey,
  setSelectedKey,
  setShownDialog,
  handlePreviouslyUsedKey,
  handleStandbyKey,
  legacyKey,
  standbyKey,
  isLoading = false,
}: SigningKeyRowProps) => (
  <MotionTableRow
    key={signingKey.id}
    layout
    initial={{ opacity: 0, height: 0 }}
    animate={{
      opacity: 1,
      height: 'auto',
      transition: { duration: 0.2 },
    }}
    exit={{ opacity: 0, height: 0 }}
    className={cn(
      signingKey.status !== 'in_use' ? 'border-b border-dashed border-border' : 'border-b'
    )}
  >
    <TableCell className="w-[150px] pr-0 py-2">
      <div className="flex -space-x-px items-center">
        <Badge
          className={cn(
            statusColors[signingKey.status],
            'rounded-r-none',
            'gap-2 w-full h-6',
            'uppercase font-mono',
            'border-r-0'
          )}
        >
          {signingKey.status === 'standby' ? (
            <Timer className="flex-shrink-0" size={14} />
          ) : (
            <Key className="flex-shrink-0" size={14} />
          )}
          <span className="truncate text-xs">{statusLabels[signingKey.status]}</span>
        </Badge>
      </div>
    </TableCell>
    <TableCell className="font-mono truncate w-[315px] pl-0 py-2">
      <div className="min-w-0 flex">
        <Badge
          className={cn(
            'bg-opacity-100 bg-200 border-foreground-muted',
            'rounded-l-none',
            'gap-2 py-2 h-6 min-w-0 overflow-hidden flex items-center flex-1'
          )}
        >
          <span className="truncate flex-1 text-xs" title={signingKey.id}>
            {signingKey.id}
          </span>
        </Badge>
      </div>
    </TableCell>
    <TableCell className="truncate py-2">
      <AlgorithmHoverCard
        algorithm={signingKey.algorithm}
        legacy={signingKey.id === legacyKey?.id}
      />
    </TableCell>
    {signingKey.status === 'previously_used' || signingKey.status === 'revoked' ? (
      <TableCell className="max-w-[100px] text-right py-2 text-sm text-foreground-light whitespace-nowrap hidden lg:table-cell">
        <TimestampInfo
          className="text-sm"
          utcTimestamp={signingKey.updated_at}
          label={dayjs(signingKey.updated_at).fromNow()}
        />
      </TableCell>
    ) : (
      <TableCell />
    )}
    <TableCell className="text-right py-2">
      {(signingKey.status !== 'in_use' || signingKey.algorithm !== 'HS256') && (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              type="text"
              className="px-1.5"
              loading={isLoading}
              icon={<MoreVertical className="size-4" />}
            />
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-52">
            {signingKey.algorithm !== 'HS256' && (
              <DropdownMenuItem
                onSelect={() => {
                  setSelectedKey(signingKey)
                  setShownDialog('key-details')
                }}
              >
                <Eye className="mr-2 size-4" />
                View key details
              </DropdownMenuItem>
            )}
            {signingKey.status === 'standby' && (
              <>
                <DropdownMenuItem
                  onSelect={() => handlePreviouslyUsedKey(signingKey.id)}
                  className="text-destructive"
                >
                  <CircleArrowDown className="mr-2 size-4" />
                  Move to previously used
                </DropdownMenuItem>
              </>
            )}
            {signingKey.status === 'previously_used' && (
              <>
                <DropdownMenuItemTooltip
                  disabled={!!standbyKey}
                  onSelect={() => handleStandbyKey(signingKey.id)}
                  tooltip={{
                    content: {
                      side: 'left',
                      text: !!standbyKey
                        ? 'You may only have one standby key at a time'
                        : undefined,
                    },
                  }}
                >
                  <CircleArrowUp className="mr-2 size-4" />
                  Move to standby key
                </DropdownMenuItemTooltip>
                <DropdownMenuItem
                  onSelect={() => {
                    setSelectedKey(signingKey)
                    setShownDialog('revoke')
                  }}
                  className="text-destructive"
                >
                  <ShieldOff className="mr-2 size-4" />
                  Revoke key
                </DropdownMenuItem>
              </>
            )}
            {signingKey.status === 'revoked' && (
              <>
                <DropdownMenuItemTooltip
                  disabled={!!standbyKey}
                  onSelect={() => handleStandbyKey(signingKey.id)}
                  tooltip={{
                    content: {
                      side: 'left',
                      text: !!standbyKey
                        ? 'You may only have one standby key at a time'
                        : undefined,
                    },
                  }}
                >
                  <CircleArrowUp className="mr-2 size-4" />
                  Move to standby key
                </DropdownMenuItemTooltip>
                <DropdownMenuItem
                  onSelect={() => {
                    setSelectedKey(signingKey)
                    setShownDialog('delete')
                  }}
                  className="text-destructive"
                  disabled={legacyKey?.id === signingKey.id}
                >
                  <Trash2 className="mr-2 size-4" />
                  Delete permanently
                </DropdownMenuItem>
              </>
            )}
          </DropdownMenuContent>
        </DropdownMenu>
      )}
    </TableCell>
  </MotionTableRow>
)