Subject request details page

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

clients/admin-ui/.prettierignore

@@ -0,0 +1,3 @@
+.idea/
+.next/
+node_modules/

clients/admin-ui/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true
+}

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 });
 }
 

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": {

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;

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

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'
+    />
+  ),
+});

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';

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 />}
           >

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;

clients/admin-ui/src/features/privacy-requests/PIIToggle.tsx → clients/admin-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;

clients/admin-ui/src/features/privacy-requests/RequestBadge.tsx → clients/admin-ui/src/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;