Dataset detail view (#711)

* Pull individual dataset info

* Add a view for individual datasets

* Add breadcrumbs and style Select

* Clean up

* Update changelog

CHANGELOG.md

@@ -27,6 +27,7 @@ The types of changes are:
 * 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
+* 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)
 
 ### Changed

clients/admin-ui/next.config.js

@@ -21,14 +21,16 @@ const nextConfig = {
     return config;
   },
   async rewrites() {
+    // these paths are unnecessarily complicated due to our backend being
+    // picky about trailing slashes https://github.com/ethyca/fides/issues/690
     return [
       {
-        source: `/api/v1/:path*`,
-        // note: we may need to be careful about this in the future
-        // our backend paths are picky about trailing slashes, and
-        // nextjs automatically removes trailing slashes. may have to
-        // be careful when there are query parameters.
-        destination: "http://0.0.0.0:8080/api/v1/:path*/",
+        source: `/api/v1/:path`,
+        destination: "http://0.0.0.0:8080/api/v1/:path/",
+      },
+      {
+        source: `/api/v1/:first/:second*`,
+        destination: "http://0.0.0.0:8080/api/v1/:first/:second*",
       },
     ];
   },

clients/admin-ui/src/features/dataset/DatasetCollectionView.tsx

@@ -0,0 +1,71 @@
+import { Box, Select, Spinner } from "@fidesui/react";
+import { ChangeEvent, useEffect, useState } from "react";
+
+import { FidesKey } from "../common/fides-types";
+import { useGetDatasetByKeyQuery } from "./dataset.slice";
+import DatasetFieldsTable from "./DatasetFieldsTable";
+import { DatasetCollection } from "./types";
+
+const useDataset = (key: FidesKey) => {
+  const { data, isLoading } = useGetDatasetByKeyQuery(key);
+
+  return {
+    isLoading,
+    dataset: data,
+  };
+};
+
+interface Props {
+  fidesKey: FidesKey;
+}
+
+const DatasetCollectionView = ({ fidesKey }: Props) => {
+  const { dataset, isLoading } = useDataset(fidesKey);
+  const [activeCollection, setActiveCollection] = useState<
+    DatasetCollection | undefined
+  >();
+
+  useEffect(() => {
+    if (dataset) {
+      setActiveCollection(dataset.collections[0]);
+    } else {
+      setActiveCollection(undefined);
+    }
+  }, [dataset]);
+
+  if (!dataset) {
+    return <div>Dataset not found</div>;
+  }
+
+  const { collections } = dataset;
+
+  const handleChangeCollection = (event: ChangeEvent<HTMLSelectElement>) => {
+    const collection = collections.filter(
+      (c) => c.name === event.target.value
+    )[0];
+    setActiveCollection(collection);
+  };
+
+  if (isLoading) {
+    return <Spinner />;
+  }
+
+  return (
+    <Box>
+      <Box mb={4} display="flex">
+        <Select onChange={handleChangeCollection} mr={2} width="auto">
+          {collections.map((collection) => (
+            <option key={collection.name} value={collection.name}>
+              {collection.name}
+            </option>
+          ))}
+        </Select>
+      </Box>
+      {activeCollection && (
+        <DatasetFieldsTable fields={activeCollection.fields} />
+      )}
+    </Box>
+  );
+};
+
+export default DatasetCollectionView;

clients/admin-ui/src/features/dataset/DatasetFieldsTable.tsx

@@ -0,0 +1,30 @@
+import { Table, Tbody, Td, Th, Thead, Tr } from "@fidesui/react";
+
+import { DatasetField } from "./types";
+
+interface Props {
+  fields: DatasetField[];
+}
+
+const DatasetFieldsTable = ({ fields }: Props) => (
+  <Table size="sm">
+    <Thead>
+      <Tr>
+        <Th pl={0}>Field Name</Th>
+        <Th pl={0}>Description</Th>
+        <Th pl={0}>Identifiability</Th>
+      </Tr>
+    </Thead>
+    <Tbody>
+      {fields.map((field) => (
+        <Tr key={field.name}>
+          <Td pl={0}>{field.name}</Td>
+          <Td pl={0}>{field.description}</Td>
+          <Td pl={0}>{field.data_qualifier}</Td>
+        </Tr>
+      ))}
+    </Tbody>
+  </Table>
+);
+
+export default DatasetFieldsTable;

clients/admin-ui/src/features/dataset/DatasetTable.tsx

@@ -14,15 +14,17 @@ const DatasetsTable = ({ datasets }: Props) => {
     <Table size="sm">
       <Thead>
         <Tr>
-          <Th>Name</Th>
-          <Th>Description</Th>
+          <Th pl={0}>Name</Th>
+          <Th pl={0}>Fides Key</Th>
+          <Th pl={0}>Description</Th>
         </Tr>
       </Thead>
       <Tbody>
         {datasets.map((dataset) => (
           <Tr key={dataset.fides_key}>
-            <Td>{dataset.name}</Td>
-            <Td>{dataset.description}</Td>
+            <Td pl={0}>{dataset.name}</Td>
+            <Td pl={0}>{dataset.fides_key}</Td>
+            <Td pl={0}>{dataset.description}</Td>
           </Tr>
         ))}
       </Tbody>

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

@@ -2,6 +2,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 import { HYDRATE } from "next-redux-wrapper";
 
+import { FidesKey } from "../common/fides-types";
 import { Dataset } from "./types";
 
 export interface State {
@@ -23,10 +24,14 @@ export const datasetApi = createApi({
       query: () => ({ url: `dataset/` }),
       providesTags: () => ["Dataset"],
     }),
+    getDatasetByKey: build.query<Dataset, FidesKey>({
+      query: (key) => ({ url: `dataset/${key}` }),
+      providesTags: () => ["Dataset"],
+    }),
   }),
 });
 
-export const { useGetAllDatasetsQuery } = datasetApi;
+export const { useGetAllDatasetsQuery, useGetDatasetByKeyQuery } = datasetApi;
 
 export const datasetSlice = createSlice({
   name: "dataset",

clients/admin-ui/src/pages/dataset/[id].tsx

@@ -0,0 +1,39 @@
+import { Box, Breadcrumb, BreadcrumbItem, Heading } from "@fidesui/react";
+import type { NextPage } from "next";
+import NextLink from "next/link";
+import { useRouter } from "next/router";
+
+import Layout from "~/features/common/Layout";
+import DatasetCollectionView from "~/features/dataset/DatasetCollectionView";
+
+const DatasetDetail: NextPage = () => {
+  const router = useRouter();
+  const { id } = router.query;
+
+  if (!id) {
+    return <Layout title="Dataset">Dataset not found</Layout>;
+  }
+
+  const fidesKey = Array.isArray(id) ? id[0] : id;
+
+  return (
+    <Layout title={`Dataset - ${id}`}>
+      <Heading mb={2} fontSize="2xl" fontWeight="semibold">
+        Dataset
+      </Heading>
+      <Box mb={8}>
+        <Breadcrumb fontWeight="medium" fontSize="sm" color="gray.600">
+          <BreadcrumbItem>
+            <NextLink href="/dataset">Datasets</NextLink>
+          </BreadcrumbItem>
+          <BreadcrumbItem>
+            <NextLink href="#">{id}</NextLink>
+          </BreadcrumbItem>
+        </Breadcrumb>
+      </Box>
+      <DatasetCollectionView fidesKey={fidesKey} />
+    </Layout>
+  );
+};
+
+export default DatasetDetail;

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

@@ -1,5 +1,12 @@
-import { Heading, Spinner } from "@fidesui/react";
+import {
+  Box,
+  Breadcrumb,
+  BreadcrumbItem,
+  Heading,
+  Spinner,
+} from "@fidesui/react";
 import type { NextPage } from "next";
+import NextLink from "next/link";
 import React from "react";
 
 import Layout from "~/features/common/Layout";
@@ -20,9 +27,19 @@ const DataSets: NextPage = () => {
 
   return (
     <Layout title="Datasets">
-      <Heading mb={8} fontSize="2xl" fontWeight="semibold">
+      <Heading mb={2} fontSize="2xl" fontWeight="semibold">
         Datasets
       </Heading>
+      <Box mb={8}>
+        <Breadcrumb fontWeight="medium" fontSize="sm" color="gray.600">
+          <BreadcrumbItem>
+            <NextLink href="/dataset">Datasets</NextLink>
+          </BreadcrumbItem>
+          <BreadcrumbItem>
+            <NextLink href="#">Select dataset</NextLink>
+          </BreadcrumbItem>
+        </Breadcrumb>
+      </Box>
       {isLoading ? <Spinner /> : <DatasetsTable datasets={datasets} />}
     </Layout>
   );