Systems frontend scaffolding

CHANGELOG.md

@@ -27,7 +27,9 @@ The types of changes are:
 * Host static files via fidesapi [#621](https://github.com/ethyca/fides/pull/621)
 * New `generate` endpoint to enable capturing systems from infrastructure from the UI [#642](https://github.com/ethyca/fides/pull/642)
 * Navigation bar for management UI
-* Dataset backend integration for management UI
+* Integration for management UI
+  * Datasets
+  * Systems
 * Initial dataset collection UI view
 * Okta, aws and database credentials can now come from `fidesctl.toml` config [#694](https://github.com/ethyca/fides/pull/694)
 

clients/admin-ui/__tests__/features/system.slice.test.tsx

@@ -0,0 +1,19 @@
+import { AnyAction } from "@reduxjs/toolkit";
+
+import { reducer, setSystems } from "~/features/system";
+import { mockSystems } from "~/mocks/data";
+
+const initialState = {
+  systems: [],
+};
+
+describe("System slice", () => {
+  it("should return the initial state", () => {
+    expect(reducer(undefined, {} as AnyAction)).toEqual(initialState);
+  });
+
+  it("should handle a dataset being added", () => {
+    const systems = mockSystems(1);
+    expect(reducer(initialState, setSystems(systems))).toEqual({ systems });
+  });
+});

clients/admin-ui/__tests__/features/system.test.tsx

@@ -0,0 +1,23 @@
+import { render } from "@testing-library/react";
+
+import SystemTable from "~/features/system/SystemTable";
+import { mockSystems } from "~/mocks/data";
+
+describe("SystemTable", () => {
+  it("renders an empty state", () => {
+    const { getByTestId, queryByTestId } = render(<SystemTable systems={[]} />);
+    expect(getByTestId("empty-state")).toBeInTheDocument();
+    expect(queryByTestId("systems-table")).toBeNull();
+  });
+
+  it("renders a table", () => {
+    const numSystems = 10;
+    const systems = mockSystems(numSystems);
+    const { getByTestId, queryByTestId, getAllByTestId } = render(
+      <SystemTable systems={systems} />
+    );
+    expect(queryByTestId("empty-state")).toBeNull();
+    expect(getByTestId("systems-table")).toBeInTheDocument();
+    expect(getAllByTestId("systems-row")).toHaveLength(numSystems);
+  });
+});

clients/admin-ui/src/app/store.ts

@@ -3,16 +3,21 @@ import { setupListeners } from "@reduxjs/toolkit/query/react";
 import { createWrapper } from "next-redux-wrapper";
 
 import { datasetApi } from "~/features/dataset";
+import { systemApi } from "~/features/system";
 import { reducer as userReducer } from "~/features/user";
 
 const makeStore = () => {
   const store = configureStore({
     reducer: {
       user: userReducer,
       [datasetApi.reducerPath]: datasetApi.reducer,
+      [systemApi.reducerPath]: systemApi.reducer,
     },
     middleware: (getDefaultMiddleware) =>
-      getDefaultMiddleware().concat(datasetApi.middleware),
+      getDefaultMiddleware().concat(
+        datasetApi.middleware,
+        systemApi.middleware
+      ),
   });
   setupListeners(store.dispatch);
   return store;

clients/admin-ui/src/features/common/NavBar.tsx

@@ -58,7 +58,7 @@ const NavBar = () => {
         borderColor="gray.100"
       >
         <nav>
-          <NavLink title="Systems" href="/system" disabled />
+          <NavLink title="Systems" href="/system" />
           <NavLink title="Datasets" href="/dataset" />
           <NavLink title="Policies" href="/policy" disabled />
           <NavLink title="Taxonomy" href="/taxonomy" disabled />

clients/admin-ui/src/features/system/SystemTable.tsx

@@ -0,0 +1,32 @@
+import { Table, Tbody, Td, Th, Thead, Tr } from "@fidesui/react";
+
+import { System } from "./types";
+
+interface Props {
+  systems: System[] | undefined;
+}
+const SystemsTable = ({ systems }: Props) => {
+  if (!systems || !systems.length) {
+    return <div data-testid="empty-state">Empty state</div>;
+  }
+  return (
+    <Table size="sm" data-testid="systems-table">
+      <Thead>
+        <Tr>
+          <Th>Name</Th>
+          <Th>Description</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {systems.map((system) => (
+          <Tr key={system.fides_key} data-testid="systems-row">
+            <Td>{system.name}</Td>
+            <Td>{system.description}</Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  );
+};
+
+export default SystemsTable;

clients/admin-ui/src/features/system/index.ts

@@ -0,0 +1 @@
+export * from "./system.slice";

clients/admin-ui/src/features/system/system.slice.ts

@@ -0,0 +1,49 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { HYDRATE } from "next-redux-wrapper";
+
+import { System } from "./types";
+
+export interface State {
+  systems: System[];
+}
+
+const initialState: State = {
+  systems: [],
+};
+
+export const systemApi = createApi({
+  reducerPath: "systemApi",
+  baseQuery: fetchBaseQuery({
+    baseUrl: process.env.NEXT_PUBLIC_FIDESCTL_API,
+  }),
+  tagTypes: ["System"],
+  endpoints: (build) => ({
+    getAllSystems: build.query<System[], void>({
+      query: () => ({ url: `system/` }),
+      providesTags: () => ["System"],
+    }),
+  }),
+});
+
+export const { useGetAllSystemsQuery } = systemApi;
+
+export const systemSlice = createSlice({
+  name: "system",
+  initialState,
+  reducers: {
+    setSystems: (state, action: PayloadAction<System[]>) => ({
+      systems: action.payload,
+    }),
+  },
+  extraReducers: {
+    [HYDRATE]: (state, action) => ({
+      ...state,
+      ...action.payload.datasets,
+    }),
+  },
+});
+
+export const { setSystems } = systemSlice.actions;
+
+export const { reducer } = systemSlice;

clients/admin-ui/src/features/system/types.ts

@@ -0,0 +1,42 @@
+import {
+  ContactDetails,
+  FidesBase,
+  FidesKey,
+} from "~/features/common/fides-types";
+
+export interface System extends FidesBase {
+  registry_id?: number;
+  meta?: Record<string, string>;
+  fidesctl_meta?: SystemMetadata;
+  system_type: string;
+  data_responsibility_title: DataResponsibilityTitle;
+  privacy_declarations: PrivacyDeclaration[];
+  system_dependencies?: FidesKey[];
+  joint_controller?: ContactDetails[];
+  third_country_transfers?: string[];
+  administrating_department?: string;
+  data_protection_impact_assessment: DataProtectionImpactAssessment;
+}
+
+type DataResponsibilityTitle = "Controller" | "Processor" | "Sub-Processor";
+
+interface SystemMetadata {
+  resource_id?: string;
+  endpoint_address?: string;
+  endpoint_port?: string;
+}
+
+interface PrivacyDeclaration {
+  name: string;
+  data_categories: FidesKey[];
+  data_use: FidesKey;
+  data_qualifier: FidesKey;
+  data_subjects: FidesKey[];
+  dataset_references?: FidesKey[];
+}
+
+interface DataProtectionImpactAssessment {
+  is_required: boolean;
+  progress?: string;
+  link?: string;
+}

clients/admin-ui/src/mocks/data.ts

@@ -0,0 +1,28 @@
+import { System } from "~/features/system/types";
+
+/**
+ * Returns a mock system object. Can override default values by
+ * passing in a Partial<System>
+ */
+export const mockSystem = (partialSystem?: Partial<System>): System => {
+  const system: System = {
+    system_type: "Service",
+    data_responsibility_title: "Controller",
+    privacy_declarations: [],
+    data_protection_impact_assessment: { is_required: true },
+    fides_key: "analytics_system",
+    organization_fides_key: "sample_organization",
+  };
+  return Object.assign(system, partialSystem);
+};
+
+/**
+ * Returns a list of mock systems of length `number`
+ */
+export const mockSystems = (number: number) =>
+  Array.from({ length: number }, (_, i) =>
+    mockSystem({
+      system_type: `Service ${i}`,
+      fides_key: `analytics_system_${i}`,
+    })
+  );

clients/admin-ui/src/pages/system/index.tsx

@@ -0,0 +1,31 @@
+import { Heading, Spinner } from "@fidesui/react";
+import type { NextPage } from "next";
+import React from "react";
+
+import Layout from "~/features/common/Layout";
+import { useGetAllSystemsQuery } from "~/features/system";
+import SystemsTable from "~/features/system/SystemTable";
+
+const useSystemsTable = () => {
+  const { data, isLoading } = useGetAllSystemsQuery();
+
+  return {
+    isLoading,
+    systems: data,
+  };
+};
+
+const Systems: NextPage = () => {
+  const { isLoading, systems } = useSystemsTable();
+
+  return (
+    <Layout title="Systems">
+      <Heading mb={8} fontSize="2xl" fontWeight="semibold">
+        Systems
+      </Heading>
+      {isLoading ? <Spinner /> : <SystemsTable systems={systems} />}
+    </Layout>
+  );
+};
+
+export default Systems;