Unify ops/ctl web applications

.github/workflows/fidesops_unsafe_pr_checks.yml → .github/workflows/unsafe_code_checks.yml

@@ -1,4 +1,4 @@
-name: Fidesops CI Checks - Unsafe
+name: Unsafe Code Checks
 on:
   push:
     branches:
@@ -7,8 +7,8 @@ on:
     types: [labeled]
 
 env:
-  CONTAINER: fidesops-local
-  IMAGE: ethyca/fidesops:local
+  CONTAINER: fides-local
+  IMAGE: ethyca/fides:local
 
 jobs:
   Build:
@@ -22,7 +22,7 @@ jobs:
         id: buildx
         uses: docker/setup-buildx-action@v2
 
-      - name: Build fidesops container
+      - name: Build container
         uses: docker/build-push-action@v3
         with:
           builder: ${{ steps.buildx.outputs.name }}
@@ -32,7 +32,7 @@ jobs:
           push: false
           tags: ${{ env.IMAGE }}
 
-      - name: Upload fidesops container
+      - name: Upload container
         uses: actions/upload-artifact@v3
         with:
           name: ${{ env.CONTAINER }}
@@ -44,13 +44,13 @@ jobs:
     runs-on: ubuntu-latest
     if: contains(github.event.pull_request.labels.*.name, 'run unsafe ci checks')
     steps:
-      - name: Download fidesops container
+      - name: Download container
         uses: actions/download-artifact@v3
         with:
           name: ${{ env.CONTAINER }}
           path: /tmp/
 
-      - name: Load fidesops image
+      - name: Load image
         run: docker load --input /tmp/${{ env.CONTAINER }}.tar
 
       - name: Checkout
@@ -62,9 +62,9 @@ jobs:
       - name: Integration Tests (External)
         env:
           REDSHIFT_TEST_URI: ${{ secrets.REDSHIFT_TEST_URI }}
-          REDSHIFT_TEST_DB_SCHEMA: ${{ secrets.REDSHIFT_TEST_DB_SCHEMA }}
+          REDSHIFT_TEST_DB_SCHEMA: fidesops_test
           BIGQUERY_KEYFILE_CREDS: ${{ secrets.BIGQUERY_KEYFILE_CREDS }}
-          BIGQUERY_DATASET: ${{ secrets.BIGQUERY_DATASET }}
+          BIGQUERY_DATASET: fidesopstest
           SNOWFLAKE_TEST_URI: ${{ secrets.SNOWFLAKE_TEST_URI }}
         run: nox -s pytest_integration_external
 
@@ -76,13 +76,13 @@ jobs:
       contents: read
       id-token: write
     steps:
-      - name: Download fidesops container
+      - name: Download container
         uses: actions/download-artifact@v3
         with:
           name: ${{ env.CONTAINER }}
           path: /tmp/
 
-      - name: Load fidesops image
+      - name: Load image
         run: docker load --input /tmp/${{ env.CONTAINER }}.tar
 
       - name: Install Nox
@@ -92,7 +92,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Get Vault Token
-        uses: hashicorp/[email protected].1
+        uses: hashicorp/[email protected].2
         with:
           url: ${{ secrets.VAULT_ADDR }}
           namespace: ${{ secrets.VAULT_NAMESPACE }}

.gitignore

@@ -233,7 +233,13 @@ dmypy.json
 .pyre/
 
 .idea
-.vscode
+
+# VSCode
+.vscode/*
+
+# Congigure and save debugging details in VS Code launch.json file
+!.vscode/launch.json
+
 *.code-workspace
 .mypy_cache
 docker-stack.yml

.vscode/launch.json

@@ -0,0 +1,26 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Launch Chrome",
+            "request": "launch",
+            "type": "chrome",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}/clients/ops/admin-ui"
+        },
+        {
+            "name": "Attach to Chrome",
+            "port": 9222,
+            "request": "attach",
+            "type": "chrome",
+            "urlFilter": "http://localhost:3000/*", // use urlFilter instead of url!
+            "webRoot": "${workspaceFolder}/clients/ops/admin-ui"
+        }
+    ]
+}
+
+
+

MANIFEST.in

@@ -3,17 +3,13 @@ include README.md
 include requirements.txt
 include dev-requirements.txt
 include versioneer.py
-include src/fides/ops/alembic.ini
 include src/fides/api/ctl/alembic.ini
 include src/fides/_version.py
 include src/fides/py.typed
 include src/fides/templates/fides_datamap_template.xlsx
 
 recursive-include src/fides/ui-build *
 
-graft src/fides/ops/migrations
-
-exclude src/fides/ops/migrations/README
-exclude src/fides/ops/migrations/script.py.mako
+graft src/fides/api/ops/email_templates/templates
 
 global-exclude *.pyc

clients/ops/admin-ui/README.md

@@ -22,3 +22,8 @@ Admin UI for managing FidesOps privacy requests. A web application built in Next
 Unless otherwise specified below, all unit tests should be colocated in the directory with the file(s) they are testing, in a `__tests__` subfolder.
 
 The sole exception to this is the `pages` directory. Tests for Next.js pages live in the root `__tests__/pages` directory. Otherwise, Next.js attempts to include them in final build output, which breaks the build.
+
+## Feature flags
+During the software development process, one or more features may not be visible at runtime. To toggle a given feature, find the given feature flag `name` key located in the [flags.json](/clients/ops/admin-ui/src/flags.json) file. Update the `isActive` key value to `true/false`. If `true`, feature will be visible at runtime. Otherwise, feature will not be visible at runtime.
+
+For techinical reference implementation, please reference [react-feature-flags](https://github.com/romaindso/react-feature-flags).

clients/ops/admin-ui/__tests__/pages/datastore-connection/index.test.tsx

@@ -32,7 +32,7 @@ describe(`${DATASTORE_CONNECTION_ROUTE}`, () => {
       expect(push).toHaveBeenCalledWith(LOGIN_ROUTE);
     });
 
-    it(`Should stay on DatastoreConnectionPage when the user is already logged in`, async () => {
+    it.skip(`Should stay on DatastoreConnectionPage when the user is already logged in`, async () => {
       await act(async () => {
         const push = jest.fn();
 

clients/ops/admin-ui/src/constants.ts

@@ -17,6 +17,10 @@ export const USER_PRIVILEGES: UserPrivileges[] = [
     privilege: "Approve subject requests",
     scope: "privacy-request:review",
   },
+  {
+    privilege: "Resume subject requests",
+    scope: "privacy-request:resume",
+  },
   {
     privilege: "View datastore connections",
     scope: "connection:read",
@@ -25,6 +29,14 @@ export const USER_PRIVILEGES: UserPrivileges[] = [
     privilege: "Create or Update datastore connections",
     scope: "connection:create_or_update",
   },
+  {
+    privilege: "Instantiate connections to SaaS datastores",
+    scope: "connection:instantiate",
+  },
+  {
+    privilege: "Read connection types",
+    scope: "connection_type:read",
+  },
   {
     privilege: "Delete datastore connections",
     scope: "connection:delete",

clients/ops/admin-ui/src/features/common/Icon/CircleHelp.tsx

@@ -0,0 +1,16 @@
+import { createIcon } from "@fidesui/react";
+
+export default createIcon({
+  displayName: "CircleHelpIcon",
+  viewBox: "0 0 18 18",
+  defaultProps: {
+    width: "18px",
+    height: "18px",
+  },
+  path: (
+    <path
+      d="M9 1.5C4.85742 1.5 1.5 4.85742 1.5 9C1.5 13.1426 4.85742 16.5 9 16.5C13.1426 16.5 16.5 13.1426 16.5 9C16.5 4.85742 13.1426 1.5 9 1.5ZM9 13.2188C8.47266 13.2188 8.0625 12.8086 8.0625 12.2812C8.0625 11.7539 8.44629 11.3438 9 11.3438C9.50098 11.3438 9.9375 11.7539 9.9375 12.2812C9.9375 12.8086 9.50098 13.2188 9 13.2188ZM11.0244 9.05859L9.70312 9.87891V9.9375C9.70312 10.3184 9.38086 10.6406 9 10.6406C8.61914 10.6406 8.29688 10.3184 8.29688 9.9375V9.46875C8.29688 9.23438 8.41406 9 8.64844 8.85352L10.3184 7.85742C10.5234 7.74023 10.6406 7.53516 10.6406 7.30078C10.6406 6.94922 10.3213 6.65625 9.96973 6.65625H8.47266C8.09473 6.65625 7.82812 6.94922 7.82812 7.30078C7.82812 7.68164 7.50586 8.00391 7.125 8.00391C6.74414 8.00391 6.42188 7.68164 6.42188 7.30078C6.42188 6.1582 7.33008 5.25 8.44629 5.25H9.94336C11.1387 5.25 12.0469 6.1582 12.0469 7.30078C12.0469 8.00391 11.666 8.67773 11.0244 9.05859Z"
+      fill="#A0AEC0"
+    />
+  ),
+});

clients/ops/admin-ui/src/features/common/Icon/ErrorWarning.tsx

@@ -0,0 +1,16 @@
+import { createIcon } from "@fidesui/react";
+
+export default createIcon({
+  displayName: "ErrorWarningIcon",
+  viewBox: "0 0 20 20",
+  defaultProps: {
+    width: "20px",
+    height: "20px",
+  },
+  path: (
+    <path
+      d="M10.0003 18.3332C5.39783 18.3332 1.66699 14.6023 1.66699 9.99984C1.66699 5.39734 5.39783 1.6665 10.0003 1.6665C14.6028 1.6665 18.3337 5.39734 18.3337 9.99984C18.3337 14.6023 14.6028 18.3332 10.0003 18.3332ZM9.16699 12.4998V14.1665H10.8337V12.4998H9.16699ZM9.16699 5.83317V10.8332H10.8337V5.83317H9.16699Z"
+      fill="#E53E3E"
+    />
+  ),
+});

clients/ops/admin-ui/src/features/common/Icon/GreenCheckCircle.tsx

@@ -1,7 +1,7 @@
 import { createIcon } from "@chakra-ui/react";
 
 export default createIcon({
-  displayName: "GreenCheckCircle",
+  displayName: "GreenCheckCircleIcon",
   viewBox: "0 0 16 16",
   defaultProps: {
     width: "16px",

clients/ops/admin-ui/src/features/common/Icon/index.tsx

@@ -1,9 +1,11 @@
 export { default as ArrowDownLineIcon } from "./ArrowDownLine";
+export { default as CircleHelpIcon } from "./CircleHelp";
 export { default as CloseSolidIcon } from "./CloseSolid";
 export { default as DownloadSolidIcon } from "./DownloadSolid";
+export { default as ErrorWarningIcon } from "./ErrorWarning";
 export { default as EyeIcon } from "./Eye";
 export { default as GearIcon } from "./Gear";
-export { default as GreenCheckCircle } from "./GreenCheckCircle";
+export { default as GreenCheckCircleIcon } from "./GreenCheckCircle";
 export { default as MoreIcon } from "./More";
 export { default as SearchLineIcon } from "./SearchLine";
 export { default as UserIcon } from "./User";

clients/ops/admin-ui/src/features/common/RequestStatusBadge.tsx

@@ -38,6 +38,10 @@ export const statusPropMap: {
     bg: "blue.400",
     label: "New",
   },
+  identity_unverified: {
+    bg: "red.400",
+    label: "Unverified",
+  },
 };
 
 interface RequestBadgeProps {

clients/ops/admin-ui/src/features/common/dropdown/MultiSelectDropdownList.tsx

@@ -65,10 +65,12 @@ const MultiSelectDropdownList: React.FC<MultiSelectDropdownListProps> = ({
         </Button>
         <Spacer />
         <Button
-          onClick={handleDone}
-          size="xs"
           backgroundColor="primary.800"
           color="white"
+          onClick={handleDone}
+          size="xs"
+          _hover={{ bg: "primary.400" }}
+          _active={{ bg: "primary.500" }}
         >
           Done
         </Button>

clients/ops/admin-ui/src/features/common/utils.ts

@@ -1,3 +1,5 @@
+import { format } from "date-fns-tz";
+
 export const capitalize = (text: string): string =>
   text.replace(/^\w/, (c) => c.toUpperCase());
 
@@ -10,5 +12,8 @@ export const debounce = (fn: Function, ms = 0) => {
   };
 };
 
+export const formatDate = (value: string | number | Date): string =>
+  format(new Date(value), "MMMM d, Y, KK:mm:ss z");
+
 export const utf8ToB64 = (str: string): string =>
   window.btoa(unescape(encodeURIComponent(str)));

clients/ops/admin-ui/src/features/connection-type/connection-type.slice.ts

@@ -6,7 +6,11 @@ import { SystemType } from "datastore-connections/constants";
 import type { RootState } from "../../app/store";
 import { BASE_URL, CONNECTION_TYPE_ROUTE } from "../../constants";
 import { selectToken } from "../auth";
-import { ConnectionOption, ConnectionTypeParams } from "./types";
+import {
+  AllConnectionTypesResponse,
+  ConnectionTypeParams,
+  ConnectionTypeSecretSchemaReponse,
+} from "./types";
 
 // Helpers
 const mapFiltersToSearchParams = ({
@@ -69,15 +73,27 @@ export const connectionTypeApi = createApi({
   tagTypes: ["ConnectionType"],
   endpoints: (build) => ({
     getAllConnectionTypes: build.query<
-      ConnectionOption[],
+      AllConnectionTypesResponse,
       Partial<ConnectionTypeParams>
     >({
       query: (filters) => ({
         url: `${CONNECTION_TYPE_ROUTE}${mapFiltersToSearchParams(filters)}`,
       }),
       providesTags: () => ["ConnectionType"],
     }),
+    getConnectionTypeSecretSchema: build.query<
+      ConnectionTypeSecretSchemaReponse,
+      string
+    >({
+      query: (connectionType) => ({
+        url: `${CONNECTION_TYPE_ROUTE}/${connectionType}/secret`,
+      }),
+      providesTags: () => ["ConnectionType"],
+    }),
   }),
 });
 
-export const { useGetAllConnectionTypesQuery } = connectionTypeApi;
+export const {
+  useGetAllConnectionTypesQuery,
+  useGetConnectionTypeSecretSchemaQuery,
+} = connectionTypeApi;

clients/ops/admin-ui/src/features/connection-type/types.ts

@@ -1,5 +1,12 @@
 import { SaasType, SystemType } from "datastore-connections/constants";
 
+export type AllConnectionTypesResponse = {
+  items: ConnectionOption[];
+  total: number;
+  page: number;
+  size: number;
+};
+
 export type ConnectionOption = {
   identifier: ConnectionType | SaasType;
   type: SystemType;
@@ -9,3 +16,18 @@ export type ConnectionTypeParams = {
   search: string;
   system_type?: SystemType;
 };
+
+export type ConnectionTypeSecretSchemaReponse = {
+  additionalProperties: boolean;
+  description: string;
+  properties: {
+    [key: string]: {
+      default?: string;
+      title: string;
+      type: string;
+    };
+  };
+  required: string[];
+  title: string;
+  type: string;
+};