feat: support PII on the dashboard

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [0.16.0](https://github.com/stacklok/codegate-ui/compare/v0.15.0...v0.16.0) (2025-02-17)
+
+
+### Features
+
+* add activate workspace button into detail page ([#328](https://github.com/stacklok/codegate-ui/issues/328)) ([c85e1aa](https://github.com/stacklok/codegate-ui/commit/c85e1aa8011c688d435e0abb11b44cf297d05e61))
+
+
+### Bug Fixes
+
+* cert instructions ([#317](https://github.com/stacklok/codegate-ui/issues/317)) ([2eb9579](https://github.com/stacklok/codegate-ui/commit/2eb95794f63988fa7f7f29daf2e0c41a9cd9c356))
+
 ## [0.15.0](https://github.com/stacklok/codegate-ui/compare/v0.14.1...v0.15.0) (2025-02-14)
 
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-project",
   "private": true,
-  "version": "0.15.0",
+  "version": "0.16.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -69,7 +69,7 @@
     "@types/hast": "^3.0.4",
     "@types/node": "^22.13.1",
     "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.2",
+    "@types/react-dom": "^19.0.3",
     "@typescript-eslint/parser": "^8.23.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "@vitest/coverage-istanbul": "^3.0.5",
@@ -83,7 +83,7 @@
     "eslint-plugin-react-refresh": "^0.4.16",
     "eslint-plugin-tailwindcss": "3.17.5",
     "globals": "^15.12.0",
-    "hast": "^0.0.2",
+    "hast": "^1.0.0",
     "husky": "^9.1.6",
     "jsdom": "^25.0.1",
     "knip": "^5.43.6",

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/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() {

src/lib/is-alert-pii.ts

@@ -0,0 +1,14 @@
+import { Alert, AlertConversation, Conversation } from '@/api/generated'
+
+export function isConversationWithPII(
+  conversation: Conversation | null
+): boolean {
+  return conversation?.alerts?.some(isAlertPii) ?? false
+}
+
+export function isAlertPii(alert: Alert | AlertConversation | null) {
+  return (
+    alert?.trigger_category === 'critical' &&
+    alert.trigger_type === 'codegate-pii'
+  )
+}

src/mocks/msw/mockers/alert.mock.ts

@@ -1,11 +1,16 @@
-import { Alert, AlertSeverity } from "@/api/generated";
-import { faker } from "@faker-js/faker";
+import { Alert, AlertSeverity } from '@/api/generated'
+import { faker } from '@faker-js/faker'
 
 const ALERT_SECRET_FIELDS = {
   trigger_string: 'foo',
   trigger_type: 'codegate-secrets',
 } satisfies Pick<Alert, 'trigger_string' | 'trigger_type'>
 
+const ALERT_PII_FIELDS = {
+  trigger_string: '[email protected]',
+  trigger_type: 'codegate-pii',
+} satisfies Pick<Alert, 'trigger_string' | 'trigger_type'>
+
 const ALERT_MALICIOUS_FIELDS = {
   trigger_string: {
     name: 'invokehttp',
@@ -31,7 +36,7 @@ const getBaseAlert = ({
 export const mockAlert = ({
   type,
 }: {
-  type: 'secret' | 'malicious'
+  type: 'secret' | 'malicious' | 'pii'
 }): Alert => {
   const timestamp = faker.date.recent().toISOString()
 
@@ -54,6 +59,14 @@ export const mockAlert = ({
         ...ALERT_SECRET_FIELDS,
       }
 
+      return result
+    }
+    case 'pii': {
+      const result: Alert = {
+        ...base,
+        ...ALERT_PII_FIELDS,
+      }
+
       return result
     }
   }

src/mocks/msw/mockers/conversation.mock.ts

@@ -12,7 +12,7 @@ export function mockConversation({
   withTokenUsage?: boolean
   alertsConfig?: {
     numAlerts?: number
-    type?: 'secret' | 'malicious' | 'any'
+    type?: 'secret' | 'malicious' | 'any' | 'pii'
   }
 } = {}) {
   const timestamp = faker.date.recent().toISOString()