Deploy UI within fidesops

.dockerignore

@@ -0,0 +1,11 @@
+.idea
+.vscode
+.DS_Store
+.git
+.mypy_cache
+
+venv/
+clients/admin-ui/node_modules
+clients/admin-ui/.next
+clients/privacy-center/node_modules
+clients/privacy-center/.next

CHANGELOG.md

@@ -25,6 +25,7 @@ The types of changes are:
 * Redis SSL Support [#611](https://github.com/ethyca/fidesops/pull/611)
 * Celery as a dependency for use in the execution layer [#610](https://github.com/ethyca/fidesops/pull/610)
 * Cache and Surface Resume/Restart Instructions [#591](https://github.com/ethyca/fidesops/pull/591)
+* Build and deploy Admin UI from webserver [#625](https://github.com/ethyca/fidesops/pull/625)
 
 ### Changed
 

Dockerfile

@@ -1,4 +1,13 @@
-FROM --platform=linux/amd64 python:3.9.13-slim-buster
+FROM node:16 as frontend
+
+WORKDIR /fidesops/clients/admin-ui
+COPY clients/admin-ui/ .
+RUN npm install
+# Build the frontend static files
+RUN npm run export
+
+
+FROM --platform=linux/amd64 python:3.9.13-slim-buster as backend
 
 ARG MSSQL_REQUIRED
 
@@ -38,11 +47,17 @@ RUN pip install -U pip  \
 
 RUN if [ "$MSSQL_REQUIRED" = "true" ] ; then pip install -U pip -r mssql-requirements.txt ; fi
 
+
 # Copy in the application files and install it locally
 COPY . /fidesops
 WORKDIR /fidesops
 RUN pip install -e .
 
+# Make a static files directory
+RUN mkdir -p /fidesops/src/fidesops/build/static/
+# Copy frontend build over
+COPY --from=frontend /fidesops/clients/admin-ui/out/ /fidesops/src/fidesops/build/static/
+
 # Enable detection of running within Docker
 ENV RUNNING_IN_DOCKER=true
 

clients/admin-ui/.gitignore

@@ -107,3 +107,6 @@ dist
 
 # msw web worker script
 public/mockServiceWorker.js
+
+
+out/

clients/admin-ui/__tests__/pages/login.test.tsx

@@ -1,6 +1,7 @@
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 
+import { BASE_API_URN } from '../../src/constants'
 import LoginPage from '../../src/pages/login';
 import { act, fireEvent, render, screen, waitFor } from '../test-utils';
 
@@ -13,7 +14,7 @@ afterAll(() => {
 describe('/login', () => {
   it('Should redirect when the user logs in successfully', async () => {
     const server = setupServer(
-      rest.post(`/login`, (req, res, ctx) =>
+      rest.post(`${BASE_API_URN}/login`, (req, res, ctx) =>
         res(
           ctx.json({
             user_data: {

clients/admin-ui/package.json

@@ -12,7 +12,10 @@
     "test:ci": "jest",
     "analyze": "cross-env ANALYZE=true next build",
     "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
-    "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"
+    "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build",
+    "export": "next build && next export",
+    "copy-export": "rsync -a --delete out/ ../../src/fidesops/build/static/",
+    "prod-export": "npm run export && npm run copy-export"
   },
   "dependencies": {
     "@chakra-ui/react": "^1.8.0",

clients/admin-ui/src/constants.ts

@@ -1,5 +1,8 @@
 import { UserPrivileges } from './features/user-management/types';
 
+export const BASE_API_URN = '/api/v1';
+export const BASE_ASSET_URN = '/static';
+
 export const STORED_CREDENTIALS_KEY = 'auth.fidesops-admin-ui';
 
 export const USER_PRIVILEGES: UserPrivileges[] = [

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

@@ -6,7 +6,7 @@ import {
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
 import type { RootState } from '../../app/store';
-import { STORED_CREDENTIALS_KEY } from '../../constants';
+import { BASE_API_URN, STORED_CREDENTIALS_KEY } from '../../constants';
 import { User } from '../user-management/types';
 import { LoginRequest, LoginResponse } from './types';
 
@@ -74,7 +74,7 @@ credentialStorage.startListening({
 export const authApi = createApi({
   reducerPath: 'authApi',
   baseQuery: fetchBaseQuery({
-    baseUrl: process.env.NEXT_PUBLIC_FIDESOPS_API!,
+    baseUrl: BASE_API_URN,
     prepareHeaders: (headers, { getState }) => {
       const token = selectToken(getState() as RootState);
       headers.set('Access-Control-Allow-Origin', '*');

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

@@ -0,0 +1,16 @@
+import Head from 'next/head';
+import React from 'react';
+
+import {BASE_ASSET_URN} from "../../constants"
+
+
+
+const FidesHead = () => (
+    <Head>
+    <title>fidesops</title>
+    <meta name='description' content='admin ui' />
+    <link rel='icon' href={`${BASE_ASSET_URN}/favicon.ico`} />
+  </Head> 
+  );
+
+export default FidesHead;

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

@@ -14,6 +14,7 @@ import NextLink from 'next/link';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { BASE_ASSET_URN } from "../../constants"
 import { logout, selectUser } from '../auth';
 import { UserIcon } from './Icon';
 import Image from './Image';
@@ -43,7 +44,7 @@ const Header: React.FC = () => {
         <NextLink href="/" passHref>
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
           <Link display="flex">
-            <Image src="/logo.svg" width={83} height={26} alt="FidesOps Logo" />
+            <Image src={`${BASE_ASSET_URN}/logo.svg`} width={83} height={26} alt="FidesOps Logo" />
           </Link>
         </NextLink>
         <Flex alignItems="center">

clients/admin-ui/src/features/privacy-requests/privacy-requests.slice.ts

@@ -2,6 +2,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
 import type { RootState } from '../../app/store';
+import { BASE_API_URN } from '../../constants';
 import { selectToken } from '../auth';
 import {
   DenyPrivacyRequest,
@@ -49,7 +50,7 @@ export function mapFiltersToSearchParams({
 export const privacyRequestApi = createApi({
   reducerPath: 'privacyRequestApi',
   baseQuery: fetchBaseQuery({
-    baseUrl: process.env.NEXT_PUBLIC_FIDESOPS_API!,
+    baseUrl: BASE_API_URN,
     prepareHeaders: (headers, { getState }) => {
       const token = selectToken(getState() as RootState);
       headers.set('Access-Control-Allow-Origin', '*');
@@ -116,9 +117,7 @@ export const requestCSVDownload = async ({
   }
 
   return fetch(
-    `${
-      process.env.NEXT_PUBLIC_FIDESOPS_API
-    }/privacy-request?${new URLSearchParams({
+    `${BASE_API_URN}/privacy-request?${new URLSearchParams({
       ...mapFiltersToSearchParams({
         id,
         from,

clients/admin-ui/src/features/user-management/user-management.slice.ts

@@ -2,6 +2,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
 import type { RootState } from '../../app/store';
+import { BASE_API_URN } from '../../constants';
 import { selectToken } from '../auth';
 import {
   User,
@@ -78,7 +79,7 @@ export const mapFiltersToSearchParams = ({
 export const userApi = createApi({
   reducerPath: 'userApi',
   baseQuery: fetchBaseQuery({
-    baseUrl: process.env.NEXT_PUBLIC_FIDESOPS_API!,
+    baseUrl: BASE_API_URN,
     prepareHeaders: (headers, { getState }) => {
       const token = selectToken(getState() as RootState);
       headers.set('Access-Control-Allow-Origin', '*');

clients/admin-ui/src/pages/404.tsx

@@ -1,16 +1,12 @@
 import { Box, Button, Heading, Stack, Text } from '@fidesui/react';
-import Head from 'next/head';
 import NextLink from 'next/link';
 
+import Head from '../features/common/Head'
 import Image from '../features/common/Image';
 
 const Custom404 = () => (
   <div>
-    <Head>
-      <title>FidesUI App</title>
-      <meta name='description' content='Generated from FidesUI template' />
-      <link rel='icon' href='/favicon.ico' />
-    </Head>
+    <Head/>
 
     <main>
       <Stack minH='100vh' align='center' justify='center' spacing={6}>

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

@@ -1,21 +1,16 @@
 import { Box, Heading } from '@fidesui/react';
 import type { NextPage } from 'next';
-import Head from 'next/head';
 
 import ProtectedRoute from '../features/auth/ProtectedRoute';
+import Head from '../features/common/Head'
 import NavBar from '../features/common/NavBar';
 import RequestFilters from '../features/privacy-requests/RequestFilters';
 import RequestTable from '../features/privacy-requests/RequestTable';
 
 const Home: NextPage = () => (
   <ProtectedRoute redirectUrl="/login">
     <>
-      <Head>
-        <title>Fides Admin UI</title>
-        <meta name="description" content="Generated from FidesUI template" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
+      <Head/>
       <NavBar />
 
       <main>

clients/admin-ui/src/pages/login.tsx

@@ -13,12 +13,12 @@ import {
 } from '@fidesui/react';
 import { Formik } from 'formik';
 import type { NextPage } from 'next';
-import Head from 'next/head';
 import { useRouter } from 'next/router';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { login, selectToken, useLoginMutation } from '../features/auth';
+import Head from '../features/common/Head';
 import Image from '../features/common/Image';
 
 const useLogin = () => {
@@ -94,14 +94,7 @@ const Login: NextPage = () => {
         values,
       }) => (
         <div>
-          <Head>
-            <title>FidesUI App</title>
-            <meta
-              name="description"
-              content="Generated from FidesUI template"
-            />
-            <link rel="icon" href="/favicon.ico" />
-          </Head>
+          <Head />
 
           <main>
             <Stack

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

@@ -8,11 +8,11 @@ import {
   Text,
 } from '@fidesui/react';
 import type { NextPage } from 'next';
-import Head from 'next/head';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import ProtectedRoute from '../../features/auth/ProtectedRoute';
+import Head from '../../features/common/Head';
 import NavBar from '../../features/common/NavBar';
 import { useGetAllPrivacyRequestsQuery } from '../../features/privacy-requests';
 import SubjectRequest from '../../features/subject-request/SubjectRequest';
@@ -49,11 +49,7 @@ const SubjectRequestDetails: NextPage = () => {
   return (
     <ProtectedRoute>
       <div>
-        <Head>
-          <title>Fides Admin UI - Subject Request Details</title>
-          <meta name='description' content='Subject Request Details' />
-          <link rel='icon' href='/favicon.ico' />
-        </Head>
+        <Head/>
 
         <NavBar />
 

clients/admin-ui/src/pages/user-management/index.tsx

@@ -1,21 +1,17 @@
 import { Box, Heading } from '@fidesui/react';
 import type { NextPage } from 'next';
-import Head from 'next/head';
 import React from 'react';
 
 import ProtectedRoute from '../../features/auth/ProtectedRoute';
+import Head from '../../features/common/Head'
 import NavBar from '../../features/common/NavBar';
 import UserManagementTable from '../../features/user-management/UserManagementTable';
 import UserManagementTableActions from '../../features/user-management/UserManagementTableActions';
 
 const UserManagement: NextPage = () => (
   <ProtectedRoute>
     <div>
-      <Head>
-        <title>Fides Admin UI - User Management</title>
-        <meta name="description" content="Generated from FidesUI template" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
+      <Head />
 
       <NavBar />
 

clients/privacy-center/pages/404.tsx

@@ -1,7 +1,6 @@
 import Head from 'next/head';
-import Image from 'next/image';
 import NextLink from 'next/link';
-import { Stack, Heading, Box, Text, Button, Link } from '@fidesui/react';
+import { Stack, Heading, Box, Text, Button, Link, Image } from '@fidesui/react';
 
 const Custom404 = () => (
   <div>
@@ -55,7 +54,7 @@ const Custom404 = () => (
             <Box display={[null, null, 'none']}>
               <Image
                 src="/logo.svg"
-                alt="FidesUI logo"
+                alt="FidesOps logo"
                 width="124px"
                 height="38px"
               />
@@ -68,7 +67,7 @@ const Custom404 = () => (
             <Link>
               <Image
                 src="/logo.svg"
-                alt="FidesUI logo"
+                alt="FidesOps logo"
                 width="124px"
                 height="38px"
               />

clients/privacy-center/pages/index.tsx

@@ -11,8 +11,8 @@ import {
   AlertIcon,
   AlertDescription,
   CloseButton,
+  Image
 } from "@fidesui/react";
-import Image from "next/image";
 
 import { useRequestModal, RequestModal } from "../components/RequestModal";
 import type { AlertState } from "../types/AlertState";
@@ -123,8 +123,8 @@ const Home: NextPage = () => {
                   <Image
                     src={action.icon_path}
                     alt={action.description}
-                    width={54}
-                    height={54}
+                    width='54px'
+                    height='54px'
                   />
                   <Stack spacing={1} textAlign="center">
                     <Heading

data/config/fidesops.toml

@@ -37,3 +37,6 @@ MASKING_STRICT = true
 [root_user]
 ANALYTICS_OPT_OUT = true
 ANALYTICS_ID = "internal"
+
+[admin_ui]
+ENABLED = true