Settings: Scaffolding (#59)

* Restructure settings files, rename, extract styles * Refactor settings page and set up existing components in new structure * Styling adjustment * Change text to Your Account * Settings: Metric Configuration (1/n) (#64) * Initial work on metric config refactor in settings * Continue iterating on refactor up to the breakdown page * Remove routing to old metrics page - remove from menu * Styling adjustment * Fix key warning Co-authored-by: Mahmoud <[email protected]> Co-authored-by: Mahmoud <[email protected]>
Recidiviz · Oct 7, 2022 · 2f95741 · 2f95741
1 parent 317b35e
commit 2f95741
Show file tree

Hide file tree

Showing 13 changed files with 416 additions and 342 deletions.
diff --git a/publisher/src/App.tsx b/publisher/src/App.tsx
@@ -23,12 +23,11 @@ import { trackNavigation } from "./analytics";
 import { DataUpload } from "./components/DataUpload";
 import { PageWrapper } from "./components/Forms";
 import Header from "./components/Header";
-import { MetricsView } from "./components/MetricsView";
 import CreateReports from "./components/Reports/CreateReport";
 import ReportDataEntry from "./components/Reports/ReportDataEntry";
 import ReviewMetrics from "./components/ReviewMetrics/ReviewMetrics";
-import AccountSettings from "./pages/AccountSettings";
 import Reports from "./pages/Reports";
+import Settings from "./pages/Settings";
 
 const App: React.FC = (): ReactElement => {
   const location = useLocation();
@@ -45,8 +44,7 @@ const App: React.FC = (): ReactElement => {
           <Route path="/" element={<Reports />} />
           <Route path="/reports/create" element={<CreateReports />} />
           <Route path="/reports/:id" element={<ReportDataEntry />} />
-          <Route path="/settings" element={<AccountSettings />} />
-          <Route path="/metrics" element={<MetricsView />} />
+          <Route path="/settings" element={<Settings />} />
           <Route path="/upload" element={<DataUpload />} />
           <Route path="/review-metrics" element={<ReviewMetrics />} />
         </Routes>

diff --git a/publisher/src/components/Badge/Badge.tsx b/publisher/src/components/Badge/Badge.tsx
@@ -28,19 +28,21 @@ export type BadgeProps = {
   color: BadgeColors;
   disabled?: boolean;
   loading?: boolean;
+  noMargin?: boolean;
 };
 
 export const BadgeElement = styled.div<{
   color?: BadgeColors;
   disabled?: boolean;
+  noMargin?: boolean;
 }>`
   height: 24px;
   display: flex;
   justify-content: center;
   align-items: center;
   background: ${({ color, disabled }) => {
     if (color === "GREY" || disabled) {
-      return palette.highlight.grey9;
+      return palette.highlight.grey8;
     }
     if (color === "RED") {
       return palette.solid.red;
@@ -55,21 +57,22 @@ export const BadgeElement = styled.div<{
   }};
   color: ${palette.solid.white};
   padding: 4px 8px;
-  margin-left: 10px;
   font-size: 0.65rem;
   font-weight: 600;
   white-space: nowrap;
   text-transform: capitalize;
+  ${({ noMargin }) => !noMargin && `margin-left: 10px;`};
 `;
 
 export const Badge: React.FC<BadgeProps> = ({
   color,
   disabled,
   loading,
+  noMargin,
   children,
 }) => {
   return (
-    <BadgeElement color={color} disabled={disabled}>
+    <BadgeElement color={color} disabled={disabled} noMargin={noMargin}>
       {children}
       {loading && <MiniLoader />}
     </BadgeElement>

diff --git a/publisher/src/components/DataUpload/DataUpload.styles.tsx b/publisher/src/components/DataUpload/DataUpload.styles.tsx
@@ -513,19 +513,14 @@ export const ConfirmationPageContainer = styled.div`
   align-items: center;
 `;
 
-export const UploadedFilesContainer = styled.div`
-  max-height: 50vh;
-  overflow-y: scroll;
-`;
+export const UploadedFilesContainer = styled.div``;
 
 export const UploadedFilesWrapper = styled.div`
-  margin-top: 50px;
   position: relative;
 `;
 
 export const UploadedFilesTable = styled(Table)`
   padding: unset;
-  max-height: 40vh;
   overflow-y: scroll;
   padding-bottom: 50px;
 `;

diff --git a/publisher/src/components/DataUpload/UploadedFiles.tsx b/publisher/src/components/DataUpload/UploadedFiles.tsx
@@ -24,6 +24,7 @@ import { useStore } from "../../stores";
 import { removeSnakeCase } from "../../utils";
 import downloadIcon from "../assets/download-icon.png";
 import { Badge, BadgeColorMapping, BadgeColors } from "../Badge";
+import { Title, TitleWrapper } from "../Forms";
 import { Loader } from "../Loading";
 import { showToast } from "../Toast";
 import {
@@ -33,13 +34,15 @@ import {
   ExtendedCell,
   ExtendedLabelCell,
   ExtendedLabelRow,
+  ExtendedOpacityGradient,
   ExtendedRow,
   UploadedFile,
   UploadedFilesContainer,
   UploadedFilesError,
   UploadedFilesLoading,
   UploadedFilesTable,
   UploadedFileStatus,
+  UploadedFilesWrapper,
 } from ".";
 
 export const UploadedFileRow: React.FC<{
@@ -315,26 +318,35 @@ export const UploadedFiles: React.FC = observer(() => {
   }
 
   return (
-    <UploadedFilesContainer>
-      <ExtendedLabelRow>
-        {dataUploadColumnTitles.map((title) => (
-          <ExtendedLabelCell key={title}>{title}</ExtendedLabelCell>
-        ))}
-      </ExtendedLabelRow>
-      <UploadedFilesTable>
-        {uploadedFiles.map((fileDetails) => {
-          const fileRowDetails = getFileRowDetails(fileDetails);
-
-          return (
-            <UploadedFileRow
-              key={fileRowDetails.key}
-              fileRowDetails={fileRowDetails}
-              deleteUploadedFile={deleteUploadedFile}
-              updateUploadedFileStatus={updateUploadedFileStatus}
-            />
-          );
-        })}
-      </UploadedFilesTable>
-    </UploadedFilesContainer>
+    <UploadedFilesWrapper>
+      <TitleWrapper>
+        <Title>Uploaded Files</Title>
+      </TitleWrapper>
+
+      <UploadedFilesContainer>
+        <ExtendedLabelRow>
+          {dataUploadColumnTitles.map((title) => (
+            <ExtendedLabelCell key={title}>{title}</ExtendedLabelCell>
+          ))}
+        </ExtendedLabelRow>
+
+        <UploadedFilesTable>
+          {uploadedFiles.map((fileDetails) => {
+            const fileRowDetails = getFileRowDetails(fileDetails);
+
+            return (
+              <UploadedFileRow
+                key={fileRowDetails.key}
+                fileRowDetails={fileRowDetails}
+                deleteUploadedFile={deleteUploadedFile}
+                updateUploadedFileStatus={updateUploadedFileStatus}
+              />
+            );
+          })}
+        </UploadedFilesTable>
+      </UploadedFilesContainer>
+
+      <ExtendedOpacityGradient />
+    </UploadedFilesWrapper>
   );
 });
diff --git a/publisher/src/components/Menu/Menu.tsx b/publisher/src/components/Menu/Menu.tsx
@@ -37,7 +37,6 @@ enum MenuItems {
   LearnMore = "LEARN MORE",
   Settings = "SETTINGS",
   Agencies = "AGENCIES",
-  Metrics = "METRICS",
 }
 
 const Menu = () => {
@@ -77,8 +76,6 @@ const Menu = () => {
       setActiveMenuItem(MenuItems.CreateReport);
     } else if (location.pathname === "/settings") {
       setActiveMenuItem(MenuItems.Settings);
-    } else if (location.pathname === "/metrics") {
-      setActiveMenuItem(MenuItems.Metrics);
     } else {
       setActiveMenuItem(undefined);
     }
@@ -92,14 +89,6 @@ const Menu = () => {
           `Welcome, ${userStore.nameOrEmail} at ${userStore.currentAgency.name}`}
       </WelcomeUser>
 
-      {/* Metrics View */}
-      <MenuItem
-        onClick={() => navigate("/metrics")}
-        active={activeMenuItem === MenuItems.Metrics}
-      >
-        Metrics
-      </MenuItem>
-
       {/* Reports */}
       <MenuItem
         onClick={() => navigate("/")}

diff --git a/publisher/src/components/MetricsView/MetricsView.styles.tsx b/publisher/src/components/MetricsView/MetricsView.styles.tsx
@@ -31,6 +31,7 @@ export const MetricsViewControlPanel = styled.div`
   height: calc(100% - 170px);
   width: 100%;
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
 `;
 
@@ -55,33 +56,29 @@ export const PanelContainerRight = styled.div`
 
 type MetricBoxContainerProps = {
   enabled?: boolean;
-  selected?: boolean;
 };
 
 export const MetricBoxContainer = styled.div<MetricBoxContainerProps>`
+  height: 197px;
+  max-width: 50%;
   display: flex;
+  flex: 1 1 50%;
   flex-direction: column;
-  border: 1px solid
-    ${({ selected }) =>
-      selected ? palette.solid.blue : palette.highlight.grey2};
-  border-radius: 12px;
-  padding: 15px;
-  margin-bottom: 11px;
+  justify-content: space-between;
+  border: 1px solid ${palette.highlight.grey2};
+  padding: 27px 24px;
   transition: 0.2s ease;
   color: ${({ enabled }) =>
-    enabled ? palette.solid.darkgrey : palette.highlight.grey7};
-  ${({ selected }) =>
-    selected && `box-shadow: 0px 4px 10px ${palette.highlight.blue};`}
+    enabled ? palette.solid.darkgrey : palette.highlight.grey10};
 
   &:hover {
     cursor: pointer;
-    ${({ selected }) =>
-      !selected && `border: 1px solid ${palette.highlight.lightblue2}`};
+    border: 1px solid ${palette.solid.blue};
   }
 `;
 
 export const MetricBoxWrapper = styled.div`
-  display: block;
+  display: flex;
 `;
 
 export const ActiveMetricSettingHeader = styled.div`
@@ -106,12 +103,13 @@ type MetricNameProps = { isTitle?: boolean };
 
 export const MetricName = styled.div<MetricNameProps>`
   ${({ isTitle }) =>
-    isTitle ? typography.sizeCSS.title : typography.sizeCSS.medium}
+    isTitle ? typography.sizeCSS.title : typography.sizeCSS.large}
 `;
 
 export const MetricDescription = styled.div`
   ${typography.sizeCSS.normal}
-  color: ${palette.highlight.grey9};
+  height: 100%;
+  margin: 11px 0;
 
   @media only screen and (max-width: 1000px) {
     ${typography.sizeCSS.small}
@@ -121,7 +119,7 @@ export const MetricDescription = styled.div`
 export const MetricDetailsDisplay = styled.div`
   width: 100%;
   overflow-y: scroll;
-  padding: 24px 15px 0 15px;
+  padding: 24px 0;
 `;
 
 export const MetricOnOffWrapper = styled.div`
@@ -328,3 +326,28 @@ export const MetricSettingsDisplayError = styled.div`
   justify-content: center;
   margin-top: 50px;
 `;
+
+export const StickyHeader = styled.div`
+  width: 100%;
+  position: sticky;
+  top: 0;
+  background: ${palette.solid.white};
+  margin-bottom: 29px;
+`;
+
+export const BackToMetrics = styled.div`
+  color: ${palette.solid.blue};
+  transition: 0.2s ease;
+  margin-bottom: 24px;
+
+  &:hover {
+    cursor: pointer;
+    opacity: 0.85;
+  }
+`;
+
+export const MetricConfigurationDisplay = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;