Subject request details page (#563)

* Get initial page setup and fix some eslints * Finish majority of UI styling * Finished clipboard button * refactor page component * Add prettier to project * Format project with prettier * Add format command * rename files * Add icons and lines * WIP event details table * Run prettier on codbase 😭 * Add finishing touches for latest mock ups * Fix frontend lint error * Update Request type to use rule action types * Fix typing issue * Fix lint issues * Fix last lint issue 🤞 * Update changelog * Run prettier formatter * Remove unused clipboard icon * Remove comment * Remove ts-ignore * Fix changelog file
ethyca · Jun 6, 2022 · 554a214 · 554a214
1 parent 4f3a60e
commit 554a214
Show file tree

Hide file tree

Showing 43 changed files with 1,141 additions and 500 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,9 @@ The types of changes are:
 
 ## [Unreleased](https://github.com/ethyca/fidesops/compare/1.5.2...main)
 
+### Added
+* Subject Request Details page [#563](https://github.com/ethyca/fidesops/pull/563)
+
 
 ## [1.5.2](https://github.com/ethyca/fidesops/compare/1.5.1...1.5.2)
 
@@ -38,6 +41,7 @@ The types of changes are:
 ### Developer Experience
 * Adds a script for MSSQL schema exploration [#557](https://github.com/ethyca/fidesops/pull/581)
 
+
 ## [1.5.1](https://github.com/ethyca/fidesops/compare/1.5.0...1.5.1) - 2022-05-27
 
 ### Added

diff --git a/clients/admin-ui/.prettierignore b/clients/admin-ui/.prettierignore
@@ -0,0 +1,3 @@
+.idea/
+.next/
+node_modules/
diff --git a/clients/admin-ui/.prettierrc.json b/clients/admin-ui/.prettierrc.json
@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true
+}
diff --git a/clients/admin-ui/__tests__/test-utils.tsx b/clients/admin-ui/__tests__/test-utils.tsx
@@ -18,7 +18,9 @@ function render(
     ...renderOptions
   }: CustomRenderOptions = {}
 ) {
-  const Wrapper: React.FC = ({ children }) => <Provider store={store}>{children}</Provider>;
+  const Wrapper: React.FC = ({ children }) => (
+    <Provider store={store}>{children}</Provider>
+  );
   return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
 }
 

diff --git a/clients/admin-ui/package-lock.json b/clients/admin-ui/package-lock.json
diff --git a/clients/admin-ui/package.json b/clients/admin-ui/package.json
@@ -7,6 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "eslint . --ext .ts,.tsx",
+    "format": "prettier --write .",
     "test": "jest --watch",
     "test:ci": "jest",
     "analyze": "cross-env ANALYZE=true next build",
@@ -59,6 +60,7 @@
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
+    "prettier": "^2.6.2",
     "typescript": "4.5.5"
   },
   "msw": {

diff --git a/clients/admin-ui/src/features/common/ClipboardButton.tsx b/clients/admin-ui/src/features/common/ClipboardButton.tsx
@@ -0,0 +1,90 @@
+import { Icon, Tooltip, useClipboard } from '@fidesui/react';
+import React, { useState } from 'react';
+
+enum TooltipText {
+  COPY = 'Copy',
+  COPIED = 'Copied',
+}
+
+const useClipboardButton = (requestId: string) => {
+  const { onCopy } = useClipboard(requestId);
+
+  const [highlighted, setHighlighted] = useState(false);
+  const [tooltipText, setTooltipText] = useState(TooltipText.COPY);
+
+  const handleMouseDown = () => {
+    setTooltipText(TooltipText.COPIED);
+    onCopy();
+  };
+  const handleMouseUp = () => {
+    setHighlighted(false);
+  };
+
+  const handleMouseEnter = () => {
+    setHighlighted(true);
+  };
+  const handleMouseLeave = () => {
+    setHighlighted(false);
+  };
+
+  return {
+    tooltipText,
+    highlighted,
+    handleMouseDown,
+    handleMouseUp,
+    handleMouseEnter,
+    handleMouseLeave,
+    setTooltipText,
+  };
+};
+
+type ClipboardButtonProps = {
+  requestId: string;
+};
+
+const ClipboardButton = ({ requestId }: ClipboardButtonProps) => {
+  const {
+    tooltipText,
+    highlighted,
+    handleMouseDown,
+    handleMouseUp,
+    handleMouseEnter,
+    handleMouseLeave,
+    setTooltipText,
+  } = useClipboardButton(requestId);
+
+  const iconColor = !highlighted ? 'gray.600' : 'complimentary.500';
+
+  return (
+    <Tooltip
+      label={tooltipText}
+      placement='top'
+      closeDelay={500}
+      onOpen={() => {
+        setTooltipText(TooltipText.COPY);
+      }}
+      onClose={() => {
+        setTooltipText(TooltipText.COPY);
+      }}
+    >
+      <Icon
+        cursor='pointer'
+        width={18}
+        height={18}
+        viewBox='0 0 18 18'
+        color={iconColor}
+        onClick={handleMouseDown}
+        onMouseUp={handleMouseUp}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        <path
+          fill='currentColor'
+          d='M13.7045 2.25H11.8677C11.417 0.942187 10.217 0 8.79545 0C7.37386 0 6.17386 0.942187 5.72386 2.25H3.88636C2.98295 2.25 2.25 3.00516 2.25 3.9375V16.3125C2.25 17.2441 2.98295 18 3.88636 18H13.7045C14.608 18 15.3409 17.2448 15.3409 16.3125V3.9375C15.3409 3.00516 14.608 2.25 13.7045 2.25ZM8.79545 2.25C9.39784 2.25 9.88636 2.75379 9.88636 3.375C9.88636 3.99621 9.39784 4.5 8.79545 4.5C8.19307 4.5 7.70455 3.99727 7.70455 3.375C7.70455 2.75379 8.19205 2.25 8.79545 2.25ZM11.5227 7.875H6.06818C5.76818 7.875 5.52273 7.62188 5.52273 7.3125C5.52273 7.00312 5.76818 6.75 6.06818 6.75H11.5227C11.8227 6.75 12.0682 7.00312 12.0682 7.3125C12.0682 7.62188 11.8227 7.875 11.5227 7.875'
+        />
+      </Icon>
+    </Tooltip>
+  );
+};
+
+export default ClipboardButton;
diff --git a/clients/admin-ui/src/features/common/Header.tsx b/clients/admin-ui/src/features/common/Header.tsx
@@ -24,27 +24,27 @@ interface HeaderProps {
 const Header: React.FC<HeaderProps> = ({ username }) => (
   <header>
     <Flex
-      bg="gray.50"
-      width="100%"
+      bg='gray.50'
+      width='100%'
       py={3}
       px={10}
-      justifyContent="space-between"
-      alignItems="center"
+      justifyContent='space-between'
+      alignItems='center'
     >
-      <NextLink href="/" passHref>
+      <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" />
+        <Link display='flex'>
+          <Image src='/logo.svg' width={83} height={26} alt='FidesOps Logo' />
         </Link>
       </NextLink>
-      <Flex alignItems="center">
+      <Flex alignItems='center'>
         <Menu>
-          <MenuButton as={Button} size="sm" variant="ghost">
-            <UserIcon color="gray.700" />
+          <MenuButton as={Button} size='sm' variant='ghost'>
+            <UserIcon color='gray.700' />
           </MenuButton>
-          <MenuList shadow="xl">
+          <MenuList shadow='xl'>
             <Stack px={3} py={2} spacing={0}>
-              <Text fontWeight="medium">{username}</Text>
+              <Text fontWeight='medium'>{username}</Text>
               {/* This text should only show if actually an admin */}
               {/* <Text fontSize="sm" color="gray.600">
                 Administrator

diff --git a/clients/admin-ui/src/features/common/Icon/GreenCheckCircle.tsx b/clients/admin-ui/src/features/common/Icon/GreenCheckCircle.tsx
@@ -0,0 +1,16 @@
+import { createIcon } from '@chakra-ui/react';
+
+export default createIcon({
+  displayName: 'GreenCheckCircle',
+  viewBox: '0 0 16 16',
+  defaultProps: {
+    width: '16px',
+    height: '16px',
+  },
+  path: (
+    <path
+      fill='#38A169'
+      d='M7.00065 13.6663C3.31865 13.6663 0.333984 10.6817 0.333984 6.99967C0.333984 3.31767 3.31865 0.333008 7.00065 0.333008C10.6827 0.333008 13.6673 3.31767 13.6673 6.99967C13.6673 10.6817 10.6827 13.6663 7.00065 13.6663ZM6.33598 9.66634L11.0493 4.95234L10.1067 4.00967L6.33598 7.78101L4.44998 5.89501L3.50732 6.83767L6.33598 9.66634Z'
+    />
+  ),
+});
diff --git a/clients/admin-ui/src/features/common/Icon/index.tsx b/clients/admin-ui/src/features/common/Icon/index.tsx
@@ -2,6 +2,7 @@ export { default as ArrowDownLineIcon } from './ArrowDownLine';
 export { default as CloseSolidIcon } from './CloseSolid';
 export { default as DownloadSolidIcon } from './DownloadSolid';
 export { default as GearIcon } from './Gear';
+export { default as GreenCheckCircle } from './GreenCheckCircle';
 export { default as MoreIcon } from './More';
 export { default as SearchLineIcon } from './SearchLine';
 export { default as UserIcon } from './User';
diff --git a/clients/admin-ui/src/features/common/NavBar.tsx b/clients/admin-ui/src/features/common/NavBar.tsx
@@ -1,11 +1,11 @@
-import { Button,Flex } from '@fidesui/react';
+import { Button, Flex } from '@fidesui/react';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';
 import { useSession } from 'next-auth/react';
 import React from 'react';
 
 import Header from './Header';
-import { ArrowDownLineIcon } from "./Icon";
+import { ArrowDownLineIcon } from './Icon';
 
 const NavBar = () => {
   const { data: session } = useSession();
@@ -16,16 +16,16 @@ const NavBar = () => {
     <>
       <Header username={username} />
       <Flex
-        borderBottom="1px"
-        borderTop="1px"
+        borderBottom='1px'
+        borderTop='1px'
         px={9}
         py={1}
-        borderColor="gray.100"
+        borderColor='gray.100'
       >
-        <NextLink href="/" passHref>
+        <NextLink href='/' passHref>
           <Button
-            as="a"
-            variant="ghost"
+            as='a'
+            variant='ghost'
             mr={4}
             colorScheme={
               router && router.pathname === '/' ? 'complimentary' : 'ghost'
@@ -35,16 +35,16 @@ const NavBar = () => {
           </Button>
         </NextLink>
 
-        <NextLink href="#" passHref>
-          <Button as="a" variant="ghost" disabled mr={4}>
+        <NextLink href='#' passHref>
+          <Button as='a' variant='ghost' disabled mr={4}>
             Datastore Connections
           </Button>
         </NextLink>
 
-        <NextLink href="/user-management" passHref>
+        <NextLink href='/user-management' passHref>
           <Button
-            as="a"
-            variant="ghost"
+            as='a'
+            variant='ghost'
             mr={4}
             colorScheme={
               router && router.pathname.startsWith('/user-management')
@@ -56,10 +56,10 @@ const NavBar = () => {
           </Button>
         </NextLink>
 
-        <NextLink href="#" passHref>
+        <NextLink href='#' passHref>
           <Button
-            as="a"
-            variant="ghost"
+            as='a'
+            variant='ghost'
             disabled
             rightIcon={<ArrowDownLineIcon />}
           >

diff --git a/clients/admin-ui/src/features/common/PII.tsx b/clients/admin-ui/src/features/common/PII.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { useObscuredPII } from '../privacy-requests/helpers';
+
+const PII: React.FC<{ data: string }> = ({ data }) => (
+  <>{useObscuredPII(data)}</>
+);
+
+export default PII;
diff --git a/...c/features/privacy-requests/PIIToggle.tsx → ...dmin-ui/src/features/common/PIIToggle.tsx b/...c/features/privacy-requests/PIIToggle.tsx → ...dmin-ui/src/features/common/PIIToggle.tsx
@@ -2,13 +2,13 @@ import { Switch } from '@fidesui/react';
 import React, { ChangeEvent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { setRevealPII } from './privacy-requests.slice';
+import { setRevealPII } from '../privacy-requests/privacy-requests.slice';
 
 const PIIToggle: React.FC = () => {
   const dispatch = useDispatch();
   const handleToggle = (event: ChangeEvent<HTMLInputElement>) =>
     dispatch(setRevealPII(event.target.checked));
-  return <Switch colorScheme="secondary" onChange={handleToggle} />;
+  return <Switch colorScheme='secondary' onChange={handleToggle} />;
 };
 
 export default PIIToggle;
diff --git a/...eatures/privacy-requests/RequestBadge.tsx → ...rc/features/common/RequestStatusBadge.tsx b/...eatures/privacy-requests/RequestBadge.tsx → ...rc/features/common/RequestStatusBadge.tsx
@@ -1,7 +1,7 @@
 import { Badge } from '@fidesui/react';
 import { ComponentProps } from 'react';
 
-import { PrivacyRequestStatus } from './types';
+import { PrivacyRequestStatus } from '../privacy-requests/types';
 
 export const statusPropMap: {
   [key in PrivacyRequestStatus]: ComponentProps<typeof Badge>;
@@ -40,16 +40,16 @@ interface RequestBadgeProps {
   status: keyof typeof statusPropMap;
 }
 
-const RequestBadge: React.FC<RequestBadgeProps> = ({ status }) => (
+const RequestStatusBadge: React.FC<RequestBadgeProps> = ({ status }) => (
   <Badge
-    color="white"
+    color='white'
     bg={statusPropMap[status].bg}
     width={107}
-    lineHeight="18px"
-    textAlign="center"
+    lineHeight='18px'
+    textAlign='center'
   >
     {statusPropMap[status].label}
   </Badge>
 );
 
-export default RequestBadge;
+export default RequestStatusBadge;