Settings Feature

common/components/DataViz/DatapointsView.styles.tsx

@@ -88,6 +88,7 @@ export const DatapointsViewControlsContainer = styled.div`
   display: flex;
   flex-direction: row;
   border-bottom: 1px solid ${palette.highlight.grey9};
+  border-top: 1px solid ${palette.highlight.grey9};
 `;
 
 const DatapointsViewDropdown = styled(Dropdown)`

common/types.ts

@@ -81,6 +81,15 @@ export type MetricDisaggregationDimensionsWithErrors =
     error?: string;
   };
 
+export type MetricConfigurationSettingsOptions = "Yes" | "No" | "N/A";
+
+export type MetricConfigurationSettings = {
+  key: string;
+  label: string;
+  included: MetricConfigurationSettingsOptions;
+  default: MetricConfigurationSettingsOptions;
+};
+
 export interface Metric {
   key: string;
   system: AgencySystems;
@@ -95,6 +104,8 @@ export interface Metric {
   contexts: MetricContext[];
   disaggregations: MetricDisaggregations[];
   enabled?: boolean;
+  settings?: MetricConfigurationSettings[];
+  frequency?: ReportFrequency;
 }
 
 export interface MetricDefinition {
@@ -107,7 +118,7 @@ export interface MetricContext {
   display_name: string | null | undefined;
   reporting_note: string | null | undefined;
   required: boolean;
-  type: "TEXT" | "NUMBER" | "MULTIPLE_CHOICE";
+  type: "TEXT" | "NUMBER" | "MULTIPLE_CHOICE" | "BOOLEAN";
   value: string | number | boolean | null | undefined;
   multiple_choice_options: string[];
 }
@@ -127,6 +138,8 @@ export interface MetricDisaggregationDimensions {
   value: string | number | boolean | null | undefined;
   reporting_note: string;
   enabled?: boolean;
+  settings?: MetricConfigurationSettings[];
+  display_name?: string;
 }
 
 export interface CreateReportFormValuesType extends Record<string, unknown> {

publisher/src/App.tsx

@@ -23,12 +23,12 @@ 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 { MetricsView } from "./components/MetricConfiguration/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();
@@ -43,10 +43,10 @@ const App: React.FC = (): ReactElement => {
 
         <Routes>
           <Route path="/" element={<Reports />} />
+          <Route path="/data" element={<MetricsView />} />
           <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>

publisher/src/components/Auth/AuthWall.tsx

@@ -24,9 +24,9 @@ import { Loading } from "../Loading";
 import UnauthorizedPage from "./UnauthorizedPage";
 import VerificationPage from "./VerificationPage";
 
-const AuthWall: React.FC<React.PropsWithChildren> = ({
-  children,
-}): React.ReactElement | null => {
+const AuthWall: React.FC<
+  React.PropsWithChildren<{ children?: React.ReactNode }>
+> = ({ children }): React.ReactElement | null => {
   const { authStore } = useStore();
 
   useEffect(

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<React.PropsWithChildren<BadgeProps>> = ({
   color,
   disabled,
   loading,
+  noMargin,
   children,
 }) => {
   return (
-    <BadgeElement color={color} disabled={disabled}>
+    <BadgeElement color={color} disabled={disabled} noMargin={noMargin}>
       {children}
       {loading && <MiniLoader />}
     </BadgeElement>

publisher/src/components/DataUpload/DataUpload.styles.tsx

@@ -517,21 +517,16 @@ 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;
+  overflow-y: scroll;
 `;
 
 export const UploadedFilesTable = styled(Table)`
   padding: unset;
-  max-height: 40vh;
-  overflow-y: scroll;
-  padding-bottom: 50px;
+  padding-bottom: 100px;
 `;
 
 export const ExtendedTabbedBar = styled(TabbedBar)`
@@ -629,5 +624,6 @@ export const CheckIcon = styled.img`
 
 export const ExtendedOpacityGradient = styled(OpacityGradient)`
   height: 50px;
-  position: absolute;
+  position: fixed;
+  bottom: 0;
 `;

publisher/src/components/DataUpload/UploadedFiles.tsx

@@ -25,6 +25,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 {
   ActionButton,
@@ -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>
   );
 });

publisher/src/components/Forms/BinaryRadioButton.tsx

@@ -90,9 +90,8 @@ export const RadioButtonLabel = styled.label<{
   display: flex;
   justify-content: center;
   align-items: center;
-  background: ${palette.highlight.grey1};
   padding: 16px 24px;
-  border: 1px solid ${palette.highlight.grey3};
+  border: 1px solid ${palette.highlight.grey4};
   border-radius: 2px;
   transition: 0.2s ease;
 

publisher/src/components/Forms/NotReportedIcon.tsx

@@ -117,8 +117,8 @@ export const NotReportedIcon: React.FC<{
             This has been disabled by an admin because the data is unavailable.{" "}
             If you have the data for this, consider changing the configuration
             in the{" "}
-            <MetricsViewLink onClick={() => navigate("/metrics")}>
-              Metrics View
+            <MetricsViewLink onClick={() => navigate("/settings")}>
+              Settings
             </MetricsViewLink>
             .
           </NotReportedIconTooltip>

publisher/src/components/Menu/Menu.tsx

@@ -37,7 +37,7 @@ enum MenuItems {
   LearnMore = "LEARN MORE",
   Settings = "SETTINGS",
   Agencies = "AGENCIES",
-  Metrics = "METRICS",
+  Data = "DATA",
 }
 
 const Menu = () => {
@@ -77,8 +77,8 @@ const Menu = () => {
       setActiveMenuItem(MenuItems.CreateReport);
     } else if (location.pathname === "/settings") {
       setActiveMenuItem(MenuItems.Settings);
-    } else if (location.pathname === "/metrics") {
-      setActiveMenuItem(MenuItems.Metrics);
+    } else if (location.pathname === "/data") {
+      setActiveMenuItem(MenuItems.Data);
     } else {
       setActiveMenuItem(undefined);
     }
@@ -92,14 +92,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("/")}
@@ -108,6 +100,14 @@ const Menu = () => {
         Reports
       </MenuItem>
 
+      {/* Data (Visualizations) */}
+      <MenuItem
+        onClick={() => navigate("/data")}
+        active={activeMenuItem === MenuItems.Data}
+      >
+        Data
+      </MenuItem>
+
       {/* Learn More */}
       <MenuItem active={activeMenuItem === MenuItems.LearnMore}>
         <a