Small UI tweak to security issues dropdown (supabase#29605)

Author: joshenlim

apps/studio/components/interfaces/Home/SecurityStatus.tsx

@@ -1,4 +1,4 @@
-import { CheckCircle2, Loader2 } from 'lucide-react'
+import { CheckCircle2, ChevronRight, Loader2 } from 'lucide-react'
 import { useState } from 'react'
 import {
  Button,
@@ -13,18 +13,20 @@ import { useSelectedProject } from 'hooks/misc/useSelectedProject'
 import Link from 'next/link'
 
 import { LINTER_LEVELS, LINT_TABS } from '../Linter/Linter.constants'
+import { useParams } from 'common'
 
 export const SecurityStatus = () => {
- const project = useSelectedProject()
+ const { ref } = useParams()
  const [open, setOpen] = useState(false)
- const { data, isLoading } = useProjectLintsQuery({ projectRef: project?.ref })
+ const { data, isLoading } = useProjectLintsQuery({ projectRef: ref })
 
  const securityLints = (data ?? []).filter((lint) => lint.categories.includes('SECURITY'))
  const errorLints = securityLints.filter((lint) => lint.level === 'ERROR')
  const warnLints = securityLints.filter((lint) => lint.level === 'WARN')
  const infoLints = securityLints.filter((lint) => lint.level === 'INFO')
 
- const noIssuesFound = errorLints.length === 0 && warnLints.length === 0 && infoLints.length === 0
+ const totalLints = errorLints.length + warnLints.length + infoLints.length
+ const noIssuesFound = totalLints === 0
 
  return (
  <Popover_Shadcn_ modal={false} open={open} onOpenChange={setOpen}>
@@ -51,12 +53,8 @@ export const SecurityStatus = () => {
  Security Issues
  </Button>
  </PopoverTrigger_Shadcn_>
- <PopoverContent_Shadcn_
- className={`py-1.5 px-0 ${noIssuesFound ? 'w-72' : 'w-84'}`}
- side="bottom"
- align="center"
- >
- <div className="py-2 text-sm flex gap-3">
+ <PopoverContent_Shadcn_ side="bottom" align="center" className={cn('py-1.5 px-0 w-64')}>
+ <div className="text-sm">
  {noIssuesFound ? (
  <div className="flex gap-3 px-4">
  <CheckCircle2 className="text-brand shrink-0" size={18} strokeWidth={1.5} />
@@ -66,42 +64,61 @@ export const SecurityStatus = () => {
  Keep monitoring Security Advisor for updates as your project grows.
  </p>
  <Button asChild type="default" className="w-min mt-2">
- <Link href={`/project/${project?.ref}/database/security-advisor`}>
- Security Advisor
- </Link>
+ <Link href={`/project/${ref}/database/security-advisor`}>Security Advisor</Link>
  </Button>
  </div>
  </div>
  ) : (
- <div className="grid gap-y-3.5">
+ <div className="grid">
+ <p className="text-xs text-foreground-lighter px-3 pb-1.5">
+ {totalLints} issue{totalLints > 1 ? 's' : ''} have been identified
+ </p>
+ <PopoverSeparator_Shadcn_ />
  {[
  { lints: errorLints, level: LINTER_LEVELS.ERROR },
  { lints: warnLints, level: LINTER_LEVELS.WARN },
  { lints: infoLints, level: LINTER_LEVELS.INFO },
- ].map(
- ({ lints, level }) =>
+ ].map(({ lints, level }) => {
+ const { label, descriptionShort } = LINT_TABS.find((tab) => tab.id === level) ?? {}
+ return (
  lints.length > 0 && (
  <>
- <div key={level} className="flex gap-3 pb-0 px-4">
- <StatusDot level={level} />
- <div>
- {lints.length} {level.toLowerCase()} issue{lints.length > 1 ? 's' : ''}
- <p className="text-xs text-foreground-lighter">
- {LINT_TABS.find((tab) => tab.id === level)?.descriptionShort}
- </p>
+ <Link href={`/project/${ref}/database/security-advisor?preset=${level}`}>
+ <div
+ key={level}
+ className="group flex items-center justify-between w-full px-3 py-3 transition hover:bg-surface-300"
+ >
+ <div className="flex gap-x-3">
+ <div>
+ <StatusDot level={level} />
+ </div>
+ <div>
+ <p className="text-xs">
+ {lints.length}{' '}
+ {label === 'Info'
+ ? 'suggestion'
+ : label?.slice(0, label.length - 1).toLowerCase()}
+ {lints.length > 1 ? 's' : ''}
+ </p>
+ <p className="text-xs text-foreground-light">{descriptionShort}</p>
+ </div>
+ </div>
+ <ChevronRight
+ size={14}
+ className="transition opacity-0 group-hover:opacity-100"
+ />
  </div>
- </div>
- <PopoverSeparator_Shadcn_ className="" />
+ </Link>
+ <PopoverSeparator_Shadcn_ />
  </>
  )
- )}
- <Button asChild type="default" className="w-min ml-4">
- <Link
- href={`/project/${project?.ref}/database/security-advisor${errorLints.length === 0 ? '?preset=WARN' : ''}`}
- >
- Security Advisor
- </Link>
- </Button>
+ )
+ })}
+ <div className="flex items-center justify-end pt-2 pb-0.5 px-3">
+ <Button asChild type="default" className="w-min">
+ <Link href={`/project/${ref}/database/security-advisor`}>Security Advisor</Link>
+ </Button>
+ </div>
  </div>
  )}
  </div>

apps/studio/components/interfaces/Linter/Linter.constants.ts

@@ -19,18 +19,18 @@ export const LINT_TABS = [
  id: LINTER_LEVELS.ERROR,
  label: 'Errors',
  description: 'You should consider these issues urgent and fix them as soon as you can.',
- descriptionShort: 'Consider these issues urgent and fix them as soon as you can.',
+ descriptionShort: 'Require immediate attention',
  },
  {
  id: LINTER_LEVELS.WARN,
- label: 'Warnings ',
+ label: 'Warnings',
  description: 'You should try and read through these issues and fix them if necessary.',
- descriptionShort: 'Read through these issues and fix them if necessary.',
+ descriptionShort: 'To resolve only if necessary',
  },
  {
  id: LINTER_LEVELS.INFO,
- label: 'Info ',
+ label: 'Info',
  description: 'You should read through these suggestions and consider implementing them.',
- descriptionShort: 'Read through these suggestions and consider implementing them.',
+ descriptionShort: 'For consideration to implement',
  },
 ]