gdpr updates; make decision flow updates; style and copy updates

coralproject · Nov 1, 2023 · aee29f9 · aee29f9
1 parent 1609bd1
commit aee29f9
Show file tree

Hide file tree

Showing 11 changed files with 431 additions and 196 deletions.
diff --git a/client/src/core/client/admin/routes/Reports/ReportHistory.tsx b/client/src/core/client/admin/routes/Reports/ReportHistory.tsx
@@ -7,7 +7,10 @@ import { graphql } from "react-relay";
 import { useDateTimeFormatter } from "coral-framework/hooks";
 import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
 import { required } from "coral-framework/lib/validation";
-import { GQLDSAReportHistoryType } from "coral-framework/schema";
+import {
+  GQLDSAReportHistoryType,
+  GQLDSAReportStatus,
+} from "coral-framework/schema";
 import { AddIcon, BinIcon, ButtonSvgIcon } from "coral-ui/components/icons";
 import {
   Button,
@@ -39,6 +42,7 @@ export const statusMappings = {
   AWAITING_REVIEW: "Awaiting review",
   UNDER_REVIEW: "In review",
   COMPLETED: "Completed",
+  VOID: "Void",
   "%future added value": "Unknown status",
 };
 
@@ -97,7 +101,9 @@ const ReportHistory: FunctionComponent<Props> = ({
           userID,
         });
         form.change("note", undefined);
-        setShowChangeStatusModal(true);
+        if (dsaReport.status === GQLDSAReportStatus.AWAITING_REVIEW) {
+          setShowChangeStatusModal(true);
+        }
       }
     },
     [addReportNote, dsaReport, userID, setShowChangeStatusModal]
@@ -163,17 +169,28 @@ const ReportHistory: FunctionComponent<Props> = ({
                     )}
 
                     {h?.type === GQLDSAReportHistoryType.STATUS_CHANGED && (
-                      <Localized
-                        id="reports-singleReport-changedStatus"
-                        vars={{
-                          status: statusMapping(h.status),
-                          username: h.createdBy?.username,
-                        }}
-                      >
-                        <div className={styles.reportHistoryText}>{`${
-                          h.createdBy?.username
-                        } changed status to "${statusMapping(h.status)}"`}</div>
-                      </Localized>
+                      <>
+                        {h.status === GQLDSAReportStatus.VOID ? (
+                          // TODO: Localize
+                          <div className={styles.reportHistoryText}>
+                            User deleted their account. Report is void.
+                          </div>
+                        ) : (
+                          <Localized
+                            id="reports-singleReport-changedStatus"
+                            vars={{
+                              status: statusMapping(h.status),
+                              username: h.createdBy?.username,
+                            }}
+                          >
+                            <div className={styles.reportHistoryText}>{`${
+                              h.createdBy?.username
+                            } changed status to "${statusMapping(
+                              h.status
+                            )}"`}</div>
+                          </Localized>
+                        )}
+                      </>
                     )}
 
                     {h?.type === GQLDSAReportHistoryType.SHARE && (
@@ -188,16 +205,29 @@ const ReportHistory: FunctionComponent<Props> = ({
                     )}
 
                     {h?.type === GQLDSAReportHistoryType.DECISION_MADE && (
-                      <Localized
-                        id="reports-singleReport-madeDecision"
-                        vars={{ username: h.createdBy?.username }}
-                      >
-                        <div className={styles.reportHistoryText}>{`${
-                          h.createdBy?.username
-                        } made a decision that this report ${decisionMapping(
-                          h.decision?.legality
-                        )}`}</div>
-                      </Localized>
+                      <>
+                        <Localized
+                          id="reports-singleReport-madeDecision"
+                          vars={{ username: h.createdBy?.username }}
+                        >
+                          <div className={styles.reportHistoryText}>{`${
+                            h.createdBy?.username
+                          } made a decision that this report ${decisionMapping(
+                            h.decision?.legality
+                          )}`}</div>
+                        </Localized>
+                        {h.decision?.legality === "ILLEGAL" && (
+                          <>
+                            <div className={styles.reportHistoryText}>
+                              Legal grounds: {`${h.decision?.legalGrounds}`}
+                            </div>
+                            <div className={styles.reportHistoryText}>
+                              Explanation:{" "}
+                              {`${h.decision?.detailedExplanation}`}
+                            </div>
+                          </>
+                        )}
+                      </>
                     )}
 
                     <div className={styles.reportHistoryCreatedAt}>
@@ -250,6 +280,7 @@ const enhanced = withFragmentContainer<Props>({
   dsaReport: graphql`
     fragment ReportHistory_dsaReport on DSAReport {
       id
+      status
       createdAt
       history {
         id

diff --git a/client/src/core/client/admin/routes/Reports/ReportShareButton.tsx b/client/src/core/client/admin/routes/Reports/ReportShareButton.tsx
@@ -10,6 +10,7 @@ import {
   withFragmentContainer,
 } from "coral-framework/lib/relay";
 import { GQLDSAReportStatus } from "coral-framework/schema";
+import { DrawerDownloadIcon, SvgIcon } from "coral-ui/components/icons";
 import { Button } from "coral-ui/components/v2";
 
 import { ReportShareButton_dsaReport } from "coral-admin/__generated__/ReportShareButton_dsaReport.graphql";
@@ -85,7 +86,10 @@ const ReportShareButton: FunctionComponent<Props> = ({
   ]);
 
   return (
-    <Localized id="reports-singleReport-shareButton">
+    <Localized
+      id="reports-singleReport-shareButton"
+      elems={{ icon: <SvgIcon Icon={DrawerDownloadIcon} /> }}
+    >
       <Button
         className={styles.shareButton}
         variant="outlined"
@@ -94,8 +98,10 @@ const ReportShareButton: FunctionComponent<Props> = ({
         target="_blank"
         rel="noreferrer"
         onClick={onShareButtonClick}
+        iconLeft
       >
-        Download
+        <SvgIcon Icon={DrawerDownloadIcon} />
+        CSV
       </Button>
     </Localized>
   );

diff --git a/client/src/core/client/admin/routes/Reports/ReportStatusMenu.tsx b/client/src/core/client/admin/routes/Reports/ReportStatusMenu.tsx
@@ -39,7 +39,7 @@ const ReportStatusMenu: FunctionComponent<Props> = ({
         }
       }
     },
-    [reportID, userID, changeReportStatus]
+    [reportID, userID, changeReportStatus, onChangeReportStatusCompleted]
   );
   return (
     <>
@@ -53,7 +53,7 @@ const ReportStatusMenu: FunctionComponent<Props> = ({
         id="coral-reports-report-statusMenu"
         onChange={(e) => onChangeStatus(e.target.value as DSAReportStatus)}
         value={value ?? "AWAITING_REVIEW"}
-        disabled={value === "COMPLETED"}
+        disabled={value === "COMPLETED" || value === "VOID"}
       >
         <Localized id="reports-reportStatusMenu-awaitingReview">
           <Option value="AWAITING_REVIEW">Awaiting review</Option>
@@ -64,6 +64,11 @@ const ReportStatusMenu: FunctionComponent<Props> = ({
         <Localized id="reports-reportStatusMenu-completed">
           <Option value="COMPLETED">Completed</Option>
         </Localized>
+        {/* <Localized id="reports-reportStatusMenu-awaitingReview"> */}
+        <Option hidden value="VOID">
+          Void
+        </Option>
+        {/* </Localized> */}
       </SelectField>
     </>
   );

diff --git a/client/src/core/client/admin/routes/Reports/ReportsTableContainer.tsx b/client/src/core/client/admin/routes/Reports/ReportsTableContainer.tsx
@@ -47,7 +47,10 @@ const ReportsTableContainer: React.FunctionComponent<Props> = (props) => {
   );
 
   const onShowCompleted = useCallback(() => {
-    setStatusFilter([GQLDSAREPORT_STATUS_FILTER.COMPLETED]);
+    setStatusFilter([
+      GQLDSAREPORT_STATUS_FILTER.COMPLETED,
+      GQLDSAREPORT_STATUS_FILTER.VOID,
+    ]);
     setFilterButton("open");
   }, []);
 
@@ -84,7 +87,7 @@ const ReportsTableContainer: React.FunctionComponent<Props> = (props) => {
               color="dark"
               uppercase={false}
             >
-              Show completed reports
+              Show closed reports
             </Button>
           ) : (
             <Button

diff --git a/client/src/core/client/admin/routes/Reports/SingleReportRoute.css b/client/src/core/client/admin/routes/Reports/SingleReportRoute.css
@@ -4,12 +4,14 @@
 
 .reportsLink {
   padding: var(--spacing-3) var(--spacing-7);
+  background-color: var(--palette-grey-200);
 }
 
 .header {
-  background-color: var(--palette-grey-200);
+  background-color: var(--palette-primary-900);
   padding: var(--spacing-3) var(--spacing-7);
   font-family: var(--font-family-secondary);
+  color: var(--palette-text-000);
 
   .label {
     font-weight: var(--font-weight-secondary-bold);
@@ -38,7 +40,15 @@
   flex-grow: 1;
 }
 
-.statusAndShare {
+.decisionButton {
+  margin-left: var(--spacing-2);
+}
+
+.yesButton {
+  margin-right: var(--spacing-2);
+}
+
+.autoMarginLeft {
   margin-left: auto;
 }