Merge branch 'main' into cory/agency-settings-design-udpates-feature

agency-dashboard/package.json

@@ -48,10 +48,10 @@
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.5.2",
-    "@babel/core": "^7.24.0",
+    "@babel/core": "^7.24.3",
     "@types/jest": "^27.5.2",
     "@types/node": "^20.6.2",
-    "@types/react": "^18.2.64",
+    "@types/react": "^18.2.78",
     "@types/react-dom": "^18.0.6",
     "@types/react-router-dom": "^5.3.3",
     "customize-cra": "^1.0.0",

agency-dashboard/src/AgencyOverview/AgencyOverview.tsx

@@ -65,6 +65,7 @@ export const AgencyOverview = observer(() => {
   const { slug } = useParams();
   const { agencyDataStore } = useStore();
   const {
+    agency,
     agencyName,
     agencyDescription,
     agencyHomepageUrl,
@@ -91,8 +92,8 @@ export const AgencyOverview = observer(() => {
     category: string,
     currSystem: string | undefined
   ) => {
-    if (isClickable) {
-      navigate(`/agency/${slug}/${slugify(category)}`, {
+    if (isClickable && agency?.id) {
+      navigate(`/agency/${agency.id}/${slug}/${slugify(category)}`, {
         state: { currentSystem: currSystem },
       });
     }

agency-dashboard/src/App.tsx

@@ -29,15 +29,15 @@ function App() {
     <Routes>
       <Route path="/" element={<Home />} />
       <Route
-        path="/agency/:slug"
+        path="/agency/:agencyId/:slug"
         element={
           <Protected>
             <AgencyOverview />
           </Protected>
         }
       />
       <Route
-        path="/agency/:slug/:category"
+        path="/agency/:agencyId/:slug/:category"
         element={
           <Protected>
             <CategoryOverview />

agency-dashboard/src/Home/Home.tsx

@@ -66,7 +66,9 @@ export const Home = observer(() => {
         {agenciesMetadataSortedByName.map((agency) => (
           <Styled.AgencyDetailsWrapper
             key={agency.id}
-            onClick={() => navigate(`/agency/${encodeURI(agency.name)}`)}
+            onClick={() =>
+              navigate(`/agency/${agency.id}/${encodeURI(agency.name)}`)
+            }
           >
             <Styled.AgencyName>{agency.name}</Styled.AgencyName>
             <Styled.NumberOfPublishedMetrics>

agency-dashboard/src/Protected/Protected.tsx

@@ -30,27 +30,39 @@ export const Protected: React.FC<PropsWithChildren> = observer(
   ({ children }) => {
     const navigate = useNavigate();
     const { agencyDataStore, api } = useStore();
-    const { slug } = useParams();
+    const { agencyId, slug } = useParams();
     const isProductionEnv = api.environment === environment.PRODUCTION;
     const isDenied =
-      agencyDataStore.agency &&
-      agencyDataStore.agency.is_dashboard_enabled !== true;
-
+      (agencyDataStore.agency &&
+        agencyDataStore.agency.is_dashboard_enabled !== true) ||
+      !agencyId;
     const [loading, setLoading] = useState(true);
 
     useAsyncEffect(async () => {
       try {
-        await agencyDataStore.fetchAgencyData(slug as string);
-        setLoading(false);
+        if (!agencyId) {
+          setLoading(false);
+          showToast({
+            message: `No agency ID was specified in the URL path.`,
+            color: "red",
+            timeout: 4000,
+          });
+        } else {
+          await agencyDataStore.fetchAgencyData(
+            parseInt(agencyId),
+            slug as string
+          );
+          setLoading(false);
+        }
       } catch (error) {
         navigate("/404");
         showToast({
-          message: `No agency found with path /${slug}.`,
+          message: `No agency found with path ${agencyId}/${slug}.`,
           color: "red",
           timeout: 4000,
         });
       }
-    }, [slug]);
+    }, [agencyId, slug]);
 
     if (loading) {
       return <Loading />;

agency-dashboard/src/stores/AgencyDataStore.ts

@@ -196,13 +196,16 @@ class AgencyDataStore {
     return result;
   }
 
-  async fetchAgencyData(agencySlug: string): Promise<void | Error> {
+  async fetchAgencyData(
+    agencyId: number,
+    agencySlug: string
+  ): Promise<void | Error> {
     try {
       runInAction(() => {
         this.loading = true;
       });
       const response = (await API.request({
-        path: `/api/v2/agencies/${encodeURIComponent(
+        path: `/api/agencies/${agencyId}/${encodeURIComponent(
           agencySlug
         )}/published_data`,
         method: "GET",

common/components/Dropdown/Dropdown.styled.tsx

@@ -194,18 +194,34 @@ export const CustomInputWrapper = styled.div`
   padding: 20px 16px 8px 16px;
 `;
 
-export const CustomInput = styled.input`
+export const CustomInput = styled.input<{
+  customClearButton?: boolean;
+}>`
   ${typography.sizeCSS.normal}
   width: 100%;
-  padding: 4px 8px 4px 8px;
+  padding: 4px 10px;
   border: 1px solid ${palette.solid.lightgrey3};
-  color: ${palette.highlight.grey9};
+  color: ${palette.solid.darkgrey};
   background: ${palette.solid.lightgrey2};
   border-radius: 2px;
 
   &::placeholder {
     color: ${palette.highlight.grey5};
   }
+
+  ${({ customClearButton }) =>
+    customClearButton &&
+    `&::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+  }`}
+`;
+
+export const CustomClearButton = styled.button`
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: ${palette.highlight.grey8};
+  cursor: pointer;
 `;
 
 export const NoResultsFoundWrapper = styled.div`

common/components/Dropdown/Dropdown.tsx

@@ -15,9 +15,11 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
+import { Icon, IconSVG } from "@recidiviz/design-system";
 import React, { useEffect, useRef, useState } from "react";
 
 import dropdownCaret from "../../assets/dropdown-caret.svg";
+import { palette } from "../GlobalStyles";
 import * as Styled from "./Dropdown.styled";
 import {
   DropdownMenuAlignment,
@@ -40,6 +42,7 @@ type DropdownProps = {
   fullHeight?: boolean;
   highlightIcon?: React.ReactNode;
   typeaheadSearch?: { placeholder: string };
+  customClearSearchButton?: string;
 };
 
 /**
@@ -71,6 +74,7 @@ export function Dropdown({
   fullHeight,
   highlightIcon,
   typeaheadSearch,
+  customClearSearchButton,
 }: DropdownProps) {
   const [filteredOptions, setFilteredOptions] = useState<DropdownOption[]>();
   const [inputValue, setInputValue] = useState("");
@@ -133,8 +137,17 @@ export function Dropdown({
         <>
           {typeaheadSearch && (
             <Styled.CustomInputWrapper>
+              {customClearSearchButton && (
+                <Icon
+                  color={palette.highlight.grey8}
+                  kind={IconSVG.Search}
+                  width={20}
+                  rotate={270}
+                />
+              )}
               <Styled.CustomInput
                 ref={inputRef}
+                customClearButton={Boolean(customClearSearchButton)}
                 id="dropdown-typeahead"
                 name="dropdown-typeahead"
                 type="search"
@@ -145,6 +158,17 @@ export function Dropdown({
                   updateFilteredOptions(e.target.value);
                 }}
               />
+              {customClearSearchButton && (
+                <Styled.CustomClearButton
+                  type="button"
+                  onClick={() => {
+                    setInputValue("");
+                    updateFilteredOptions("");
+                  }}
+                >
+                  {customClearSearchButton}
+                </Styled.CustomClearButton>
+              )}
             </Styled.CustomInputWrapper>
           )}
 

common/package.json

@@ -15,15 +15,15 @@
     "@types/jest": "^27.5.2",
     "@types/lodash": "^4.14.202",
     "@types/node": "^20.6.2",
-    "@types/react": "^18.2.64",
+    "@types/react": "^18.2.78",
     "@types/react-dom": "^18.0.6",
     "@types/styled-components": "^5.1.34",
     "crypto-browserify": "^3.12.0",
     "mobx": "^6.11.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-tooltip": "^5.26.3",
-    "recharts": "^2.12.3",
+    "recharts": "^2.12.4",
     "styled-components": "^5.3.11",
     "typescript": "^5.2.2"
   },
@@ -42,7 +42,7 @@
   },
   "devDependencies": {
     "@babel/preset-env": "^7.22.20",
-    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.23.2",
     "@recidiviz/tsconfig": "^2.0.0",
     "@storybook/addon-essentials": "^7.6.14",

common/types.ts

@@ -103,6 +103,12 @@ export interface UserAgency {
   super_agency_id: number | null | undefined;
 }
 
+export type ChildAgency = {
+  id: number;
+  name: string;
+  systems: AgencySystem[];
+};
+
 export type ReportFrequency = "MONTHLY" | "ANNUAL";
 
 export type ReportStatus = "NOT_STARTED" | "DRAFT" | "PUBLISHED";

common/utils/helperUtils.ts

@@ -23,8 +23,8 @@ export const slugify = (str: string): string =>
   str?.replace(/\s/g, "-")?.toLowerCase();
 
 export const frequencyString = (frequency?: string) => {
-  if (frequency === "ANNUAL") {
-    return "ANNUALLY";
+  if (frequency?.includes("ANNUAL")) {
+    return frequency.replaceAll("ANNUAL", "ANNUALLY");
   }
   return frequency;
 };

publisher/package.json

@@ -25,7 +25,7 @@
     "react-is": "^18.2.0",
     "react-router-dom": "^6",
     "react-tooltip": "^5.26.3",
-    "recharts": "^2.12.3",
+    "recharts": "^2.12.4",
     "recharts-to-png": "^2.3.1",
     "styled-components": "^5.3.11",
     "typescript": "^5.2.2"
@@ -57,9 +57,9 @@
   },
   "homepage": "/",
   "devDependencies": {
-    "@auth0/auth0-spa-js": "^1.20.1",
-    "@babel/core": "^7.24.0",
-    "@babel/plugin-syntax-flow": "^7.22.5",
+    "@auth0/auth0-spa-js": "^1.22.6",
+    "@babel/core": "^7.24.3",
+    "@babel/plugin-syntax-flow": "^7.24.1",
     "@babel/plugin-transform-react-jsx": "^7.23.4",
     "@recidiviz/eslint-config": "^3.0.0",
     "@recidiviz/tsconfig": "^2.0.0",
@@ -75,7 +75,7 @@
     "@types/node": "^20.6.2",
     "@types/qs": "^6.9.11",
     "@types/reach__router": "^1.3.15",
-    "@types/react": "^18.2.64",
+    "@types/react": "^18.2.78",
     "@types/react-dom": "^18.0.6",
     "@types/react-modal": "^3.16.3",
     "@types/react-router-dom": "^5.3.3",
@@ -88,7 +88,7 @@
     "customize-cra": "^1.0.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-header": "^3.1.1",
@@ -97,7 +97,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "eslint-plugin-simple-import-sort": "^12.1.0",
     "file-saver": "^2.0.5",
     "jest-fetch-mock": "^3.0.3",
     "postcss": "^8.4.33",

publisher/src/components/AdminPanel/AdminPanel.styles.tsx

@@ -826,17 +826,16 @@ export const GraphicLines = styled.div<{ type?: SaveConfirmationType }>`
 
 export const WarningMessage = styled.div`
   ${typography.sizeCSS.small}
-  max-width: 350px;
+  max-width: 750px;
   color: ${palette.solid.red};
-  margin-top: 5px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   border: 1px solid ${palette.solid.red};
   border-radius: 4px;
   padding: 16px;
-  margin-left: 12px;
+  margin: 5px auto 16px;
 
   p {
     text-align: center;