ENG-3098: PBAC management UI — data purposes, consumers, query log config

.fides/db_dataset.yml

@@ -1246,6 +1246,23 @@ dataset:
     - name: replaceable
       description: 'Fides Generated Description for Column: replaceable'
       data_categories: [system.operations]
+  - name: dashboard_snapshot
+    data_categories: [system.operations]
+    fields:
+    - name: created_at
+      data_categories: [system.operations]
+    - name: id
+      data_categories: [system.operations]
+    - name: metadata
+      data_categories: [system.operations]
+    - name: metric_key
+      data_categories: [system.operations]
+    - name: snapshot_date
+      data_categories: [system.operations]
+    - name: updated_at
+      data_categories: [system.operations]
+    - name: value
+      data_categories: [system.operations]
   - name: datasetconfig
     data_categories: []
     fields:

changelog/7700-pbac-ui-management.yaml

@@ -0,0 +1,4 @@
+type: Added
+description: Add PBAC management UI for data purposes, consumers, and query log configuration
+pr: 7700
+labels: []

clients/admin-ui/src/features/common/api.slice.ts

@@ -71,6 +71,9 @@ export const baseApi = createApi({
     "Property",
     "Property-Specific Messaging Templates",
     "Purpose",
+    "DataPurpose",
+    "DataConsumer",
+    "QueryLogConfig",
     "Shared Monitor Configs",
     "System",
     "System Assets",

clients/admin-ui/src/features/common/nav/nav-config.tsx

@@ -254,6 +254,20 @@ export const NAV_CONFIG: NavConfigGroup[] = [
           ScopeRegistryEnum.CONFIG_UPDATE,
         ],
       },
+      {
+        title: "Data purposes",
+        path: routes.DATA_PURPOSES_ROUTE,
+        requiresPlus: true,
+        requiresFlag: "alphaPurposeBasedAccessControl",
+        scopes: [ScopeRegistryEnum.DATA_PURPOSE_READ],
+      },
+      {
+        title: "Data consumers",
+        path: routes.DATA_CONSUMERS_ROUTE,
+        requiresPlus: true,
+        requiresFlag: "alphaPurposeBasedAccessControl",
+        scopes: [ScopeRegistryEnum.DATA_CONSUMER_READ],
+      },
       {
         title: "Access policies",
         path: routes.ACCESS_POLICIES_ROUTE,
@@ -392,6 +406,12 @@ if (process.env.NEXT_PUBLIC_APP_ENV === "development") {
         scopes: [ScopeRegistryEnum.DEVELOPER_READ],
         requiresPlus: true,
       },
+      {
+        title: "Seed Data",
+        path: routes.SEED_DATA_ROUTE,
+        scopes: [ScopeRegistryEnum.DEVELOPER_READ],
+        requiresPlus: true,
+      },
       {
         title: "Test monitors",
         path: routes.TEST_MONITORS_ROUTE,

clients/admin-ui/src/features/common/nav/routes.ts

@@ -105,6 +105,7 @@ export const ERRORS_POC_ROUTE = "/poc/error";
 export const TABLE_MIGRATION_POC_ROUTE = "/poc/table-migration";
 export const FIDES_JS_DOCS = "/fides-js-docs";
 export const PROMPT_EXPLORER_ROUTE = "/poc/prompt-explorer";
+export const SEED_DATA_ROUTE = "/poc/seed-data";
 export const TEST_MONITORS_ROUTE = "/poc/test-monitors";
 
 // RBAC routes
@@ -120,6 +121,16 @@ export const SANDBOX_PRIVACY_NOTICES_ROUTE = "/sandbox/privacy-notices";
 export const PRIVACY_ASSESSMENTS_ROUTE = "/privacy-assessments";
 export const PRIVACY_ASSESSMENTS_DETAIL_ROUTE = "/privacy-assessments/[id]";
 
+// Data Purposes (Core Configuration)
+export const DATA_PURPOSES_ROUTE = "/data-purposes";
+export const DATA_PURPOSES_NEW_ROUTE = "/data-purposes/new";
+export const DATA_PURPOSES_EDIT_ROUTE = "/data-purposes/[fidesKey]";
+
+// Data Consumers (Core Configuration)
+export const DATA_CONSUMERS_ROUTE = "/data-consumers";
+export const DATA_CONSUMERS_NEW_ROUTE = "/data-consumers/new";
+export const DATA_CONSUMERS_EDIT_ROUTE = "/data-consumers/[id]";
+
 // Access Policies (Core Configuration)
 export const ACCESS_POLICIES_ROUTE = "/access-policies";
 export const ACCESS_POLICIES_ONBOARDING_ROUTE = "/access-policies/onboarding";

clients/admin-ui/src/features/dashboard/constants.ts

@@ -74,8 +74,15 @@ export const ACTION_CTA: Record<
   },
   [ActionType.DSR_ACTION]: {
     label: "View request",
-    route: (d) =>
-      d.request_id ? `/privacy-requests/${d.request_id}` : "/privacy-requests",
+    route: (d) => {
+      if (d.request_id) {
+        return `/privacy-requests/${d.request_id}`;
+      }
+      if (d.is_overdue) {
+        return "/privacy-requests?is_overdue=true";
+      }
+      return "/privacy-requests";
+    },
   },
   [ActionType.SYSTEM_REVIEW]: {
     label: "Review system",

clients/admin-ui/src/features/data-consumers/DataConsumerActionsCell.tsx

@@ -0,0 +1,40 @@
+import { Button, Flex, Icons } from "fidesui";
+import { useRouter } from "next/router";
+
+import { DATA_CONSUMERS_ROUTE } from "~/features/common/nav/routes";
+import Restrict from "~/features/common/Restrict";
+import { ScopeRegistryEnum } from "~/types/api";
+
+import { DataConsumer } from "./data-consumer.slice";
+import DeleteDataConsumerModal from "./DeleteDataConsumerModal";
+
+interface Props {
+  consumer: DataConsumer;
+}
+
+const DataConsumerActionsCell = ({ consumer }: Props) => {
+  const router = useRouter();
+
+  const handleEdit = () => {
+    router.push(`${DATA_CONSUMERS_ROUTE}/${consumer.id}`);
+  };
+
+  return (
+    <Flex gap="small">
+      <Restrict scopes={[ScopeRegistryEnum.DATA_CONSUMER_UPDATE]}>
+        <Button
+          aria-label="Edit data consumer"
+          data-testid="edit-data-consumer-button"
+          size="small"
+          icon={<Icons.Edit />}
+          onClick={handleEdit}
+        />
+      </Restrict>
+      <Restrict scopes={[ScopeRegistryEnum.DATA_CONSUMER_DELETE]}>
+        <DeleteDataConsumerModal consumer={consumer} />
+      </Restrict>
+    </Flex>
+  );
+};
+
+export default DataConsumerActionsCell;

clients/admin-ui/src/features/data-consumers/DataConsumerForm.tsx

@@ -0,0 +1,169 @@
+import { Button, Flex, Form, Input, Select, Spin } from "fidesui";
+import { useRouter } from "next/router";
+import { useCallback, useMemo } from "react";
+
+import { DATA_CONSUMERS_ROUTE } from "~/features/common/nav/routes";
+import { useGetAllDataPurposesQuery } from "~/features/data-purposes/data-purpose.slice";
+
+import { CONSUMER_TYPE_OPTIONS } from "./constants";
+import { DataConsumer } from "./data-consumer.slice";
+
+export interface DataConsumerFormValues {
+  name: string;
+  type: string;
+  contact_email: string;
+  description: string;
+  tags: string[];
+  purposeFidesKeys: string[];
+}
+
+interface DataConsumerFormProps {
+  consumer?: DataConsumer;
+  handleSubmit: (values: DataConsumerFormValues) => Promise<void>;
+}
+
+const DataConsumerForm = ({
+  consumer,
+  handleSubmit,
+}: DataConsumerFormProps) => {
+  const [form] = Form.useForm<DataConsumerFormValues>();
+  const router = useRouter();
+
+  const { data: purposesData, isLoading: purposesLoading } =
+    useGetAllDataPurposesQuery({ size: 200 });
+
+  const purposeOptions = useMemo(
+    () =>
+      (purposesData?.items ?? []).map((p) => ({
+        value: p.fides_key,
+        label: p.name || p.fides_key,
+      })),
+    [purposesData],
+  );
+
+  const initialValues = useMemo<DataConsumerFormValues>(
+    () => ({
+      name: consumer?.name ?? "",
+      type: consumer?.type ?? "",
+      contact_email: consumer?.contact_email ?? "",
+      description: consumer?.description ?? "",
+      tags: consumer?.tags ?? [],
+      purposeFidesKeys: consumer?.purpose_fides_keys ?? [],
+    }),
+    [consumer],
+  );
+
+  const handleCancel = useCallback(() => {
+    router.push(DATA_CONSUMERS_ROUTE);
+  }, [router]);
+
+  if (purposesLoading) {
+    return (
+      <Flex justify="center" align="center" className="py-12">
+        <Spin />
+      </Flex>
+    );
+  }
+
+  return (
+    <Form
+      form={form}
+      layout="vertical"
+      onFinish={handleSubmit}
+      initialValues={initialValues}
+      key={consumer?.id ?? "create"}
+      data-testid="data-consumer-form"
+      style={{ maxWidth: 720 }}
+    >
+      <Form.Item
+        name="name"
+        label="Name"
+        rules={[{ required: true, message: "Name is required" }]}
+      >
+        <Input
+          placeholder="Enter consumer name"
+          data-testid="data-consumer-name-input"
+        />
+      </Form.Item>
+
+      <Form.Item
+        name="type"
+        label="Type"
+        rules={[{ required: true, message: "Type is required" }]}
+        tooltip="The type of data consumer (service, application, group, or user)"
+      >
+        <Select
+          placeholder="Select consumer type"
+          options={CONSUMER_TYPE_OPTIONS}
+          aria-label="Type"
+          data-testid="data-consumer-type-select"
+        />
+      </Form.Item>
+
+      <Form.Item
+        name="contact_email"
+        label="Contact email"
+        tooltip="The email address used to identify this consumer in query logs"
+      >
+        <Input
+          placeholder="Enter contact email"
+          data-testid="data-consumer-contact-input"
+        />
+      </Form.Item>
+
+      <Form.Item
+        name="purposeFidesKeys"
+        label="Assigned purposes"
+        tooltip="Which data purposes is this consumer authorized for?"
+      >
+        <Select
+          mode="multiple"
+          placeholder="Select purposes"
+          options={purposeOptions}
+          aria-label="Assigned purposes"
+          data-testid="data-consumer-purposes-select"
+        />
+      </Form.Item>
+
+      <Form.Item
+        name="description"
+        label="Description"
+        tooltip="An optional description of this data consumer"
+      >
+        <Input.TextArea
+          placeholder="Enter a description"
+          rows={3}
+          data-testid="data-consumer-description-input"
+        />
+      </Form.Item>
+
+      <Form.Item
+        name="tags"
+        label="Tags"
+        tooltip="Optional tags for organizing consumers"
+      >
+        <Select
+          mode="tags"
+          placeholder="Add tags"
+          aria-label="Tags"
+          data-testid="data-consumer-tags-select"
+        />
+      </Form.Item>
+
+      <Flex justify="space-between" className="pt-4">
+        <Button onClick={handleCancel} data-testid="cancel-button">
+          Cancel
+        </Button>
+        <Button
+          type="primary"
+          htmlType="submit"
+          data-testid="save-data-consumer-button"
+        >
+          Save
+        </Button>
+      </Flex>
+    </Form>
+  );
+};
+
+export default DataConsumerForm;

clients/admin-ui/src/features/data-consumers/DataConsumersTable.tsx

@@ -0,0 +1,43 @@
+import { Button, Flex, Table } from "fidesui";
+import { useRouter } from "next/router";
+
+import { DebouncedSearchInput } from "~/features/common/DebouncedSearchInput";
+import { DATA_CONSUMERS_NEW_ROUTE } from "~/features/common/nav/routes";
+import Restrict from "~/features/common/Restrict";
+import { ScopeRegistryEnum } from "~/types/api";
+
+import useDataConsumersTable from "./useDataConsumersTable";
+
+const DataConsumersTable = () => {
+  const router = useRouter();
+  const { tableProps, columns, searchQuery, updateSearch } =
+    useDataConsumersTable();
+
+  return (
+    <Flex vertical gap="middle">
+      <Flex justify="space-between" className="mb-2">
+        <DebouncedSearchInput
+          value={searchQuery}
+          onChange={updateSearch}
+          placeholder="Search data consumers..."
+        />
+        <Restrict scopes={[ScopeRegistryEnum.DATA_CONSUMER_CREATE]}>
+          <Button
+            type="primary"
+            onClick={() => router.push(DATA_CONSUMERS_NEW_ROUTE)}
+            data-testid="add-data-consumer-button"
+          >
+            Add data consumer
+          </Button>
+        </Restrict>
+      </Flex>
+      <Table
+        {...tableProps}
+        columns={columns}
+        data-testid="data-consumers-table"
+      />
+    </Flex>
+  );
+};
+
+export default DataConsumersTable;