Merge branch 'permanent-configuration' into cm/remove-remove-location…

…-button
mbta · Apr 24, 2024 · 33fc3e1 · 33fc3e1
2 parents 434062e + 255ccab
commit 33fc3e1
Show file tree

Hide file tree

Showing 54 changed files with 345 additions and 425 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -16,7 +16,5 @@ updates:
       time: "10:00"
     open-pull-requests-limit: 5
     ignore:
-      - dependency-name: "phoenix"
-      - dependency-name: "phoenix_html"
       - dependency-name: "*"
         update-types: ["version-update:semver-minor"]
diff --git a/assets/.eslintrc.js b/assets/.eslintrc.js
@@ -1,52 +1,48 @@
 module.exports = {
-    root: true,
-    parser: "@typescript-eslint/parser",
-    plugins: [
-      "@typescript-eslint",
-      "react",
-      "jsx-a11y",
-    ],
-    extends: [
-      "eslint:recommended",
-      "plugin:@typescript-eslint/recommended",
-      "plugin:react/recommended",
-      "plugin:jsx-a11y/recommended",
-    ],
-    "settings": {
-      "react": {
-        "version": "detect",
-      },
+  root: true,
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint", "react", "jsx-a11y"],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended",
+  ],
+  settings: {
+    react: {
+      version: "detect",
     },
-    "parserOptions": {
-      "ecmaFeatures": {
-        "jsx": true,
-      },
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
     },
-    "reportUnusedDisableDirectives": true,
-    "rules": {
-      "no-console": 0,
-      "prefer-rest-params": "off",
-      "@typescript-eslint/ban-ts-comment": "off",
-      "@typescript-eslint/no-explicit-any": "off",
-      "@typescript-eslint/no-unused-vars": [
-        "error",
-        {
-          "argsIgnorePattern": "^_.*",
-          "varsIgnorePattern": "^_.*",
-          "destructuredArrayIgnorePattern": "^_.*",
-        }
-      ],
-      "react/display-name": "off",
-      "react/function-component-definition": [
-        "error",
-        {
-          "namedComponents": "arrow-function",
-          "unnamedComponents": "arrow-function",
-        },
-      ],
-      "react/hook-use-state": "error",
-      "react/no-danger": "error",
-      "jsx-a11y/no-static-element-interactions": "off",
-      "jsx-a11y/click-events-have-key-events": "off"
-    }
-  };
+  },
+  reportUnusedDisableDirectives: true,
+  rules: {
+    "no-console": 0,
+    "prefer-rest-params": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_.*",
+        varsIgnorePattern: "^_.*",
+        destructuredArrayIgnorePattern: "^_.*",
+      },
+    ],
+    "react/display-name": "off",
+    "react/function-component-definition": [
+      "error",
+      {
+        namedComponents: "arrow-function",
+        unnamedComponents: "arrow-function",
+      },
+    ],
+    "react/hook-use-state": "error",
+    "react/no-danger": "error",
+    "jsx-a11y/no-static-element-interactions": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+  },
+};
diff --git a/assets/index.d.ts b/assets/index.d.ts
@@ -1,3 +1,3 @@
 declare module "*.png";
 declare module "*.jpg";
-declare module '*.svg';
+declare module "*.svg";
diff --git a/assets/js/app.tsx b/assets/js/app.tsx
@@ -6,13 +6,6 @@ import "../css/app.scss";
 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured
 // in "webpack.config.js".
-//
-// Import deps with the dep name or local files with a relative path, for example:
-//
-//     import {Socket} from "phoenix"
-//     import socket from "./socket"
-//
-import "phoenix_html";
 
 import "regenerator-runtime/runtime";
 
@@ -21,7 +14,7 @@ import ReactDOM from "react-dom";
 
 import App from "./components/App";
 import * as Sentry from "@sentry/react";
-import * as FullStory from "@fullstory/browser";
+import { FullStory, init as initFullStory } from "@fullstory/browser";
 
 const environment = document
   .querySelector("meta[name=environment-name]")
@@ -49,7 +42,14 @@ const fullstoryOrgId = document
   ?.getAttribute("content");
 
 if (fullstoryOrgId) {
-  FullStory.init({ orgId: fullstoryOrgId, recordCrossDomainIFrames: true });
+  initFullStory({ orgId: fullstoryOrgId, recordCrossDomainIFrames: true });
+
+  if (username) {
+    FullStory("setIdentity", {
+      uid: username,
+      properties: { displayName: username },
+    });
+  }
 }
 
 ReactDOM.render(<App />, document.getElementById("app"));
diff --git a/assets/js/components/App.tsx b/assets/js/components/App.tsx
@@ -4,20 +4,20 @@ import { ScreenplayProvider } from "../hooks/useScreenplayContext";
 import GlEinkWorkflow from "./Dashboard/PermanentConfiguration/Workflows/GlEink/GlEinkWorkflow";
 
 const OutfrontTakeoverTool = React.lazy(
-  () => import("./OutfrontTakeoverTool/OutfrontTakeoverTool")
+  () => import("./OutfrontTakeoverTool/OutfrontTakeoverTool"),
 );
 const Dashboard = React.lazy(() => import("./Dashboard/Dashboard"));
 const PlacesPage = React.lazy(() => import("./Dashboard/PlacesPage"));
 const AlertsPage = React.lazy(() => import("./Dashboard/AlertsPage"));
 const AlertDetails = React.lazy(() => import("./Dashboard/AlertDetails"));
 const PendingScreensPage = React.lazy(
-  () => import("./Dashboard/PendingScreensPage")
+  () => import("./Dashboard/PendingScreensPage"),
 );
 const ConfigureScreensPage = React.lazy(
-  () => import("./Dashboard/PermanentConfiguration/ConfigureScreensPage")
+  () => import("./Dashboard/PermanentConfiguration/ConfigureScreensPage"),
 );
 const SelectScreenTypeComponent = React.lazy(
-  () => import("./Dashboard/PermanentConfiguration/SelectScreenType")
+  () => import("./Dashboard/PermanentConfiguration/SelectScreenType"),
 );
 
 class AppRoutes extends React.Component {

diff --git a/assets/js/components/Dashboard/AlertBanner.tsx b/assets/js/components/Dashboard/AlertBanner.tsx
@@ -30,7 +30,7 @@ const AlertBanner: ComponentType<AlertBannerProps> = ({
       return translateRouteID(alert.affected_list[0]);
     } else if (
       alert.affected_list.every((routeId: string) =>
-        routeId.startsWith("green")
+        routeId.startsWith("green"),
       )
     ) {
       return "Green Line";
@@ -69,7 +69,7 @@ const AlertBanner: ComponentType<AlertBannerProps> = ({
           <>
             <span className="bold">
               {`${aOrAn(
-                affectedListString
+                affectedListString,
               )} ${affectedListString} ${formatEffect(alert.effect)}
               alert was just closed.`}
             </span>{" "}

diff --git a/assets/js/components/Dashboard/AlertCard.tsx b/assets/js/components/Dashboard/AlertCard.tsx
@@ -30,7 +30,7 @@ const AlertCard = (props: AlertCardProps): JSX.Element => {
       numberOfScreens,
     ],
     prevAlert,
-    showAnimationOnMount
+    showAnimationOnMount,
   );
   const isRecurring = alert.active_period.length > 1;
 

diff --git a/assets/js/components/Dashboard/AlertDetails.tsx b/assets/js/components/Dashboard/AlertDetails.tsx
@@ -54,11 +54,11 @@ const AlertDetails: ComponentType = () => {
 
   const [placesListState, placesListDispatch] = useReducer(
     placesListReducer,
-    initialPlacesListState
+    initialPlacesListState,
   );
 
   const validAlertId = contextState.allAPIAlertIds.find(
-    (alert) => alert === id
+    (alert) => alert === id,
   );
 
   return selectedAlert ? (
@@ -93,7 +93,7 @@ const AlertDetails: ComponentType = () => {
               places={placesWithSelectedAlert(
                 selectedAlert,
                 places,
-                screensByAlertMap
+                screensByAlertMap,
               )}
               noModeFilter
               isAlertPlacesList

diff --git a/assets/js/components/Dashboard/AlertsPage.tsx b/assets/js/components/Dashboard/AlertsPage.tsx
@@ -28,7 +28,7 @@ const AlertsPage: ComponentType = () => {
   const { places, alerts, screensByAlertMap } = useScreenplayContext();
 
   const alertsWithPlaces = alerts.filter(
-    (alert) => screensByAlertMap[alert.id]
+    (alert) => screensByAlertMap[alert.id],
   );
 
   return (
@@ -117,7 +117,7 @@ const AlertsList: ComponentType<AlertsListProps> = ({
       numPlaces = placesWithSelectedAlert(
         alert,
         places,
-        screensByAlertMap
+        screensByAlertMap,
       ).length;
     }
 
@@ -145,22 +145,22 @@ const AlertsList: ComponentType<AlertsListProps> = ({
     if (screenTypeFilterValue !== SCREEN_TYPES[0]) {
       filteredAlerts = filterAlertsByScreenType(
         filteredAlerts,
-        screenTypeFilterValue
+        screenTypeFilterValue,
       );
     }
 
     if (modeLineFilterValue !== MODES_AND_LINES[0]) {
       filteredAlerts = filterAlertsByModeOrLine(
         filteredAlerts,
-        modeLineFilterValue
+        modeLineFilterValue,
       );
     }
     return filteredAlerts;
   };
 
   const filterAlertsByModeOrLine = (
     alerts: Alert[],
-    { label, ids }: { label: string; ids: string[] }
+    { label, ids }: { label: string; ids: string[] },
   ) => {
     const isRelevantIE: (ie: InformedEntity) => boolean = (() => {
       switch (label) {
@@ -197,23 +197,23 @@ const AlertsList: ComponentType<AlertsListProps> = ({
 
   const filterAlertsByScreenType = (
     alerts: Alert[],
-    { ids }: { label: string; ids: string[] }
+    { ids }: { label: string; ids: string[] },
   ) => {
     return alerts.filter((alert) => {
       // Get this alert's list of affected screens.
       const screensWithAlert = screensByAlertMap[alert.id];
 
       return screensWithAlert
         ? screensWithAlert.find((screen_id) =>
-            ids.includes(screenMetaData[screen_id].type)
+            ids.includes(screenMetaData[screen_id].type),
           )
         : false;
     });
   };
 
   const compareAlerts = (
     { active_period: active_period_1 }: Alert,
-    { active_period: active_period_2 }: Alert
+    { active_period: active_period_2 }: Alert,
   ) => {
     // Get the soonest start time
     const start1 = moment(active_period_1[0].start);

diff --git a/assets/js/components/Dashboard/Dashboard.tsx b/assets/js/components/Dashboard/Dashboard.tsx
@@ -34,11 +34,11 @@ const Dashboard: ComponentType = () => {
           allAPIAlertIds: allAPIalertIds,
           screensByAlertMap: screensByAlertMap,
         });
-      }
+      },
     );
 
     fetchPlaces().then((placesList) =>
-      dispatch({ type: "SET_PLACES", places: placesList })
+      dispatch({ type: "SET_PLACES", places: placesList }),
     );
   }, []);
 
@@ -57,7 +57,7 @@ const Dashboard: ComponentType = () => {
           allAPIAlertIds: allAPIalertIds,
           screensByAlertMap: screensByAlertMap,
         });
-      }
+      },
     );
   }, 4000);
 
@@ -129,7 +129,7 @@ const Dashboard: ComponentType = () => {
         })
         // sort them in descending order to get the most recently created or updated alert
         .sort((a1, a2) =>
-          new Date(a1.updated_at) < new Date(a2.updated_at) ? 1 : -1
+          new Date(a1.updated_at) < new Date(a2.updated_at) ? 1 : -1,
         )
         // get the first alert in the list or underfined if there are none
         .find((alert) => alert)
@@ -143,7 +143,7 @@ const Dashboard: ComponentType = () => {
           type: "SET_BANNER_ALERT",
           bannerAlert: undefined,
         }),
-      5000
+      5000,
     );
   };
 

diff --git a/assets/js/components/Dashboard/FilterDropdown.tsx b/assets/js/components/Dashboard/FilterDropdown.tsx
@@ -37,7 +37,7 @@ const CustomMenu = React.forwardRef<HTMLElement, CustomMenuProps>(
         <ul>{children}</ul>
       </div>
     );
-  }
+  },
 );
 
 /**
@@ -62,7 +62,7 @@ const FilterDropdown = (props: FilterDropdownProps): JSX.Element => {
           "filter-dropdown__dropdown-button--small": !isDefault(),
           "filter-dropdown__dropdown-button--large": isDefault(),
           disabled: props.disabled,
-        }
+        },
       )}
       title={props.disabled ? "Coming Soon!" : selectedValue.label}
       data-testid="filter-dropdown-button"
@@ -79,7 +79,7 @@ const FilterDropdown = (props: FilterDropdownProps): JSX.Element => {
     <ButtonGroup
       className={classWithModifier(
         "filter-dropdown__button-group",
-        props.className
+        props.className,
       )}
     >
       {!isDefault() && (
@@ -98,7 +98,7 @@ const FilterDropdown = (props: FilterDropdownProps): JSX.Element => {
         onSelect={onSelect}
         className={classWithModifier(
           "filter-dropdown__dropdown",
-          props.className
+          props.className,
         )}
       >
         {props.disabled ? (