feat: support PII on the dashboard

src/constants/empty-state-strings.ts

@@ -7,6 +7,8 @@ export const emptyStateStrings = {
     anErrorOccurred: 'An error occurred',
     noLeakedSecretsDetected: 'No leaked secrets detected',
     noMaliciousPackagesDetected: 'No malicious packages detected',
+    noPIIDetected:
+      'No leaked personally identifiable information (PII) detected',
     noSearchResultsFor: (x: string | undefined): string =>
       !x ? 'No search results' : `No search results for "${x}"`,
   },
@@ -22,6 +24,8 @@ export const emptyStateStrings = {
       'Messages are issues that CodeGate has detected and mitigated in your interactions with the LLM.',
     secretsDesc:
       'CodeGate helps you protect sensitive information from being accidentally exposed to AI models and third-party AI provider systems by redacting detected secrets from your prompts using encryption.',
+    piiDesc:
+      'CodeGate helps you protect sensitive personally identifiable information (PII) from being accidentally exposed to AI models and third-party AI provider systems by redacting detected PII from your prompts using encryption.',
     maliciousDesc:
       "CodeGate's dependency risk insight helps protect your codebase from malicious or vulnerable dependencies. It identifies potentially risky packages and suggests fixed versions or alternative packages to consider.",
   },

src/features/dashboard-messages/components/__tests__/table-messages.alerts.test.tsx

@@ -33,6 +33,11 @@ it('shows zero in alerts counts when no alerts', async () => {
       name: /secrets count/i,
     })
   ).toHaveTextContent('0')
+  expect(
+    screen.getByRole('button', {
+      name: /personally identifiable information.*count/i,
+    })
+  ).toHaveTextContent('0')
 })
 
 it('shows count of malicious alerts in row', async () => {
@@ -80,3 +85,26 @@ it('shows count of secret alerts in row', async () => {
     })
   ).toHaveTextContent('10')
 })
+
+it('shows count of pii alerts in row', async () => {
+  server.use(
+    http.get(mswEndpoint('/api/v1/workspaces/:workspace_name/messages'), () =>
+      HttpResponse.json([
+        mockConversation({
+          alertsConfig: { numAlerts: 10, type: 'pii' },
+        }),
+      ])
+    )
+  )
+  render(<TableMessages />)
+
+  await waitFor(() => {
+    expect(screen.queryByText(/loading.../i)).not.toBeInTheDocument()
+  })
+
+  expect(
+    screen.getByRole('button', {
+      name: /pii/i,
+    })
+  ).toHaveTextContent('10')
+})

src/features/dashboard-messages/components/__tests__/table-messages.empty-state.test.tsx

@@ -304,6 +304,48 @@ const TEST_CASES: TestCase[] = [
       actions: null,
     },
   },
+  {
+    testDescription: 'Has alerts, view is "pii"',
+    handlers: [
+      http.get(mswEndpoint('/api/v1/workspaces'), () => {
+        return HttpResponse.json({
+          workspaces: [
+            {
+              name: 'default',
+              is_active: true,
+            },
+            {
+              name: 'foo-bar',
+              is_active: false,
+            },
+          ],
+        })
+      }),
+      http.get(mswEndpoint('/api/v1/workspaces/archive'), () => {
+        return HttpResponse.json({
+          workspaces: [],
+        })
+      }),
+      http.get(
+        mswEndpoint('/api/v1/workspaces/:workspace_name/messages'),
+        () => {
+          return HttpResponse.json(
+            Array.from({ length: 10 }).map(() => mockAlert({ type: 'pii' }))
+          )
+        }
+      ),
+    ],
+    searchParams: {
+      view: AlertsFilterView.PII,
+      search: null,
+    },
+    expected: {
+      title: emptyStateStrings.title.noPIIDetected,
+      body: emptyStateStrings.body.piiDesc,
+      illustrationTestId: IllustrationTestId.DONE,
+      actions: null,
+    },
+  },
 ]
 
 test.each(TEST_CASES)('$testDescription', async (testCase) => {

src/features/dashboard-messages/components/__tests__/tabs-messages.test.tsx

@@ -40,56 +40,42 @@ test('shows correct count of all packages', async () => {
   })
 })
 
-test('shows correct count of malicious packages', async () => {
-  server.use(
-    http.get(mswEndpoint('/api/v1/workspaces/:workspace_name/messages'), () => {
-      return HttpResponse.json(
-        Array.from({ length: 13 }).map(() =>
-          mockConversation({
-            alertsConfig: {
-              type: 'malicious',
-              numAlerts: 1,
-            },
-          })
-        )
+const filteredCases = [
+  { tabLabel: /malicious/i, alertType: 'malicious' as const, count: 13 },
+  { tabLabel: /secrets/i, alertType: 'secret' as const, count: 10 },
+  { tabLabel: /pii/i, alertType: 'pii' as const, count: 9 },
+]
+
+filteredCases.forEach(({ tabLabel, alertType, count }) => {
+  test(`shows correct count of ${alertType} packages`, async () => {
+    server.use(
+      http.get(
+        mswEndpoint('/api/v1/workspaces/:workspace_name/messages'),
+        () => {
+          return HttpResponse.json(
+            Array.from({ length: count }).map(() =>
+              mockConversation({
+                alertsConfig: {
+                  type: alertType,
+                  numAlerts: 1,
+                },
+              })
+            )
+          )
+        }
       )
-    })
-  )
+    )
 
-  const { getByRole } = render(
-    <TabsMessages>
-      <div>foo</div>
-    </TabsMessages>
-  )
+    const { getByRole } = render(
+      <TabsMessages>
+        <div>foo</div>
+      </TabsMessages>
+    )
 
-  await waitFor(() => {
-    expect(getByRole('tab', { name: /malicious/i })).toHaveTextContent('13')
-  })
-})
-
-test('shows correct count of secret packages', async () => {
-  server.use(
-    http.get(mswEndpoint('/api/v1/workspaces/:workspace_name/messages'), () => {
-      return HttpResponse.json(
-        Array.from({ length: 13 }).map(() =>
-          mockConversation({
-            alertsConfig: {
-              type: 'secret',
-              numAlerts: 1,
-            },
-          })
-        )
+    await waitFor(() => {
+      expect(getByRole('tab', { name: tabLabel })).toHaveTextContent(
+        String(count)
       )
     })
-  )
-
-  const { getByRole } = render(
-    <TabsMessages>
-      <div>foo</div>
-    </TabsMessages>
-  )
-
-  await waitFor(() => {
-    expect(getByRole('tab', { name: /secrets/i })).toHaveTextContent('13')
   })
 })

src/features/dashboard-messages/components/conversation-summary.tsx

@@ -12,6 +12,7 @@ import {
   Hash01,
   Key01,
   PackageX,
+  Passport,
   Server05,
 } from '@untitled-ui/icons-react'
 
@@ -51,8 +52,8 @@ function AlertsSummaryCount({
 }: {
   count: number
   type: {
-    singular: 'malicious package' | 'secret'
-    plural: 'malicious packages' | 'secrets'
+    singular: string
+    plural: string
   }
 }) {
   const typeText = count === 1 ? type.singular : type.plural
@@ -97,9 +98,9 @@ export function ConversationSummary({
 }: {
   conversation: Conversation
 }) {
-  const { malicious, secrets } = conversation.alerts
+  const { malicious, secrets, pii } = conversation.alerts
     ? countConversationAlerts(conversation.alerts)
-    : { malicious: 0, secrets: 0 }
+    : { malicious: 0, secrets: 0, pii: 0 }
 
   return (
     <div className="flex gap-4">
@@ -166,6 +167,19 @@ export function ConversationSummary({
             />
           }
         />
+        <ConversationSummaryListItem
+          icon={Passport}
+          title="PII"
+          value={
+            <AlertsSummaryCount
+              type={{
+                singular: 'personally identifiable information',
+                plural: 'personally identifiable information',
+              }}
+              count={pii}
+            />
+          }
+        />
       </ConversationSummaryList>
     </div>
   )

src/features/dashboard-messages/components/table-messages-empty-state.tsx

@@ -120,6 +120,17 @@ function EmptyStateSecrets() {
   )
 }
 
+function EmptyStatePII() {
+  return (
+    <EmptyState
+      title={emptyStateStrings.title.noPIIDetected}
+      body={emptyStateStrings.body.piiDesc}
+      illustration={IllustrationDone}
+      actions={null}
+    />
+  )
+}
+
 export function EmptyStateError() {
   return (
     <EmptyState
@@ -209,6 +220,15 @@ export function TableMessagesEmptyState() {
       },
       () => <EmptyStateNoMessagesInWorkspace />
     )
+    .with(
+      {
+        hasWorkspaceMessages: true,
+        hasMultipleWorkspaces: P.any,
+        view: AlertsFilterView.PII,
+        isLoading: false,
+      },
+      () => <EmptyStatePII />
+    )
     .with(
       {
         hasWorkspaceMessages: true,

src/features/dashboard-messages/components/table-messages.tsx

@@ -16,7 +16,7 @@ import { useClientSidePagination } from '@/hooks/useClientSidePagination'
 import { TableAlertTokenUsage } from './table-alert-token-usage'
 
 import { useMessagesFilterSearchParams } from '../hooks/use-messages-filter-search-params'
-import { Key01, PackageX } from '@untitled-ui/icons-react'
+import { Key01, PackageX, Passport } from '@untitled-ui/icons-react'
 import {
   EmptyStateError,
   TableMessagesEmptyState,
@@ -31,6 +31,7 @@ import {
   TableMessagesColumn,
 } from '../constants/table-messages-columns'
 import { formatTime } from '@/lib/format-time'
+import { isAlertPii } from '@/lib/is-alert-pii'
 
 const getPromptText = (conversation: Conversation) => {
   return (conversation.question_answers[0]?.question?.message ?? 'N/A')
@@ -52,10 +53,12 @@ function getTypeText(type: QuestionType) {
 function countAlerts(alerts: Alert[]): {
   secrets: number
   malicious: number
+  pii: number
 } {
   return {
     secrets: alerts.filter(isAlertSecret).length,
     malicious: alerts.filter(isAlertMalicious).length,
+    pii: alerts.filter(isAlertPii).length,
   }
 }
 
@@ -93,7 +96,7 @@ function AlertsSummaryCount({
 }
 
 function AlertsSummaryCellContent({ alerts }: { alerts: Alert[] }) {
-  const { malicious, secrets } = countAlerts(alerts)
+  const { malicious, secrets, pii } = countAlerts(alerts)
 
   return (
     <div className="flex items-center gap-2">
@@ -113,6 +116,14 @@ function AlertsSummaryCellContent({ alerts }: { alerts: Alert[] }) {
         count={secrets}
         icon={Key01}
       />
+      <AlertsSummaryCount
+        strings={{
+          singular: 'personally identifiable information (PII)',
+          plural: 'personally identifiable information (PII)',
+        }}
+        count={pii}
+        icon={Passport}
+      />
     </div>
   )
 }

src/features/dashboard-messages/components/tabs-messages.tsx

@@ -18,11 +18,13 @@ import {
 import { SearchFieldMessages } from './search-field-messages'
 import { tv } from 'tailwind-variants'
 import { useQueryGetWorkspaceMessages } from '@/hooks/use-query-get-workspace-messages'
+import { isConversationWithPII } from '@/lib/is-alert-pii'
 
 type AlertsCount = {
   all: number
   malicious: number
   secrets: number
+  pii: number
 }
 
 function select(data: V1GetWorkspaceMessagesResponse): AlertsCount {
@@ -36,10 +38,13 @@ function select(data: V1GetWorkspaceMessagesResponse): AlertsCount {
     isConversationWithSecretAlerts,
   ]).length
 
+  const pii: number = multiFilter(data, [isConversationWithPII]).length
+
   return {
     all,
     malicious,
     secrets,
+    pii,
   }
 }
 
@@ -103,6 +108,7 @@ export function TabsMessages({ children }: { children: React.ReactNode }) {
             count={data?.secrets ?? 0}
             id={AlertsFilterView.SECRETS}
           />
+          <Tab title="PII" count={data?.pii ?? 0} id={AlertsFilterView.PII} />
         </TabList>
 
         <SearchFieldMessages className="ml-auto" />

src/features/dashboard-messages/hooks/use-messages-filter-search-params.ts

@@ -6,6 +6,7 @@ export enum AlertsFilterView {
   ALL = 'all',
   MALICIOUS = 'malicious',
   SECRETS = 'secrets',
+  PII = 'pii',
 }
 
 const alertsFilterSchema = z.object({

src/features/dashboard-messages/hooks/use-query-get-workspace-messages-table.ts

@@ -9,6 +9,7 @@ import { isConversationWithMaliciousAlerts } from '../../../lib/is-alert-malicio
 import { isConversationWithSecretAlerts } from '../../../lib/is-alert-secret'
 import { filterMessagesBySubstring } from '../lib/filter-messages-by-substring'
 import { useQueryGetWorkspaceMessages } from '@/hooks/use-query-get-workspace-messages'
+import { isConversationWithPII } from '@/lib/is-alert-pii'
 
 const FILTER: Record<
   AlertsFilterView,
@@ -17,6 +18,7 @@ const FILTER: Record<
   all: () => true,
   malicious: isConversationWithMaliciousAlerts,
   secrets: isConversationWithSecretAlerts,
+  pii: isConversationWithPII,
 }
 
 export function useQueryGetWorkspaceMessagesTable() {