PolicyTemplates() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx lines 25–146

export const PolicyTemplates = ({
  schema,
  table,
  selectedPolicy,
  selectedTemplate,
  onSelectTemplate,
}: PolicyTemplatesProps) => {
  const [search, setSearch] = useState('')

  const templates =
    schema === 'realtime'
      ? getRealtimePolicyTemplates()
      : schema === 'pgmq'
        ? getQueuePolicyTemplates()
        : getGeneralPolicyTemplates(schema, table.length > 0 ? table : 'table_name')

  const baseTemplates =
    selectedPolicy !== undefined
      ? templates.filter((t) => t.command === selectedPolicy.command)
      : templates
  const filteredTemplates =
    search.length > 0
      ? baseTemplates.filter(
          (template) =>
            template.name.toLowerCase().includes(search.toLowerCase()) ||
            template.command.toLowerCase().includes(search.toLowerCase())
        )
      : baseTemplates

  return (
    <div className="h-full px-content py-content flex flex-col gap-3">
      <label className="sr-only" htmlFor="template-search">
        Search templates
      </label>
      <Input
        size="small"
        id="template-search"
        icon={<Search className="text-foreground-muted" />}
        placeholder="Search templates"
        value={search}
        onChange={(event) => setSearch(event.target.value)}
      />

      {search.length > 0 && filteredTemplates.length === 0 && (
        <NoSearchResults searchString={search} className="min-w-full" />
      )}

      <div className="flex flex-col gap-1.5">
        {filteredTemplates.map((template) => {
          return (
            <HoverCard key={template.id} openDelay={100} closeDelay={100}>
              <HoverCardTrigger>
                <CardButton
                  title={template.name}
                  titleClass="text-sm"
                  className={cn(
                    'transition w-full',
                    template.id === selectedTemplate
                      ? '!border-stronger bg-surface-200 hover:!border-stronger'
                      : ''
                  )}
                  key={template.id}
                  onClick={() => onSelectTemplate(template)}
                  hideChevron
                  fixedHeight={false}
                  icon={
                    <div className="min-w-16 flex items-start">
                      <Badge
                        className={cn(
                          '!rounded font-mono',
                          template.command === 'UPDATE'
                            ? 'bg-blue-400 text-blue-900 border border-blue-800'
                            : ''
                        )}
                        variant={
                          template.command === 'ALL'
                            ? 'default'
                            : template.command === 'SELECT'
                              ? 'success'
                              : template.command === 'UPDATE'
                                ? 'default'
                                : template.command === 'DELETE'
                                  ? 'destructive'
                                  : 'warning'
                        }
                      >
                        {template.command}
                      </Badge>
                    </div>
                  }
                >
                  <Markdown content={template.description} className="[&>p]:m-0 space-y-2" />
                </CardButton>
              </HoverCardTrigger>
              <HoverCardContent
                hideWhenDetached
                side="left"
                align="center"
                className="w-[500px] flex"
                animate="slide-in"
              >
                <SimpleCodeBlock
                  showCopy={false}
                  className="sql"
                  parentClassName="!p-0 [&>div>span]:text-xs"
                >
                  {template.statement}
                </SimpleCodeBlock>
                <CopyButton
                  iconOnly
                  type="default"
                  className="px-1 absolute top-1.5 right-1.5"
                  text={template.statement}
                />
              </HoverCardContent>
            </HoverCard>
          )
        })}
      </div>
    </div>
  )
}