ReportWidget() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Reports/ReportWidget.tsx lines 36–113

const ReportWidget = (props: ReportWidgetProps) => {
  const router = useRouter()
  const { ref } = useParams()
  const projectRef = ref as string

  return (
    <Panel noMargin noHideOverflow className={cn('pb-0', props.className)} wrapWithLoading={false}>
      <Panel.Content className={cn('space-y-4', props.contentClassName)}>
        <div className={cn('flex flex-row items-start justify-between', props.headerClassName)}>
          <div className="gap-2">
            <div className="flex flex-row gap-2">
              <h3 className="w-full h-6">{props.title}</h3>{' '}
              {props?.tooltip && (
                <Tooltip>
                  <TooltipTrigger>
                    <HelpCircle className="text-foreground-light" size={14} strokeWidth={1.5} />
                  </TooltipTrigger>
                  <TooltipContent side="bottom">{props.tooltip}</TooltipContent>
                </Tooltip>
              )}
            </div>
            <p className="text-sm text-foreground-light">{props.description}</p>
          </div>
          {props.params && (
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  type="default"
                  icon={<ExternalLink />}
                  className="px-1"
                  onClick={() => {
                    const isDbQueryType = props.queryType === 'db'

                    const pathname = isDbQueryType
                      ? `/project/${projectRef}/sql/new`
                      : `/project/${projectRef}/logs/explorer`

                    const query: Record<string, string | undefined> = {}

                    if (isDbQueryType) {
                      query.content = props.resolvedSql
                    } else {
                      query.q = props.params?.sql
                      query.its = props.params?.iso_timestamp_start || ''
                      query.ite = props.params?.iso_timestamp_end || ''
                    }

                    router.push({ pathname, query })
                  }}
                />
              </TooltipTrigger>
              <TooltipContent side="left">
                {props.queryType === 'db' ? 'Open in SQL Editor' : 'Open in Logs Explorer'}
              </TooltipContent>
            </Tooltip>
          )}
        </div>

        <Loading active={props.isLoading}>
          {props.data === undefined
            ? null
            : props.renderer({ ...props, router, projectRef: projectRef as string })}
        </Loading>
      </Panel.Content>

      {props.append && (
        <>
          {props.append({
            ...props,
            ...(props.appendProps || {}),
            router,
            projectRef: projectRef as string,
          })}
        </>
      )}
    </Panel>
  )
}