refactor: Create common FilterGroup component (#560)

* Refactored out filter group into a reusable component. * Address PR feedback.
mbta · Nov 15, 2024 · e6f30ed · e6f30ed
1 parent 61e5d37
commit e6f30ed
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 142 deletions.
diff --git a/assets/css/dashboard/filter-group.scss b/assets/css/dashboard/filter-group.scss
@@ -0,0 +1,23 @@
+.filter-group {
+  width: 200px;
+
+  .header {
+    font-size: 16px;
+    margin-bottom: 8px;
+    line-height: 24px;
+  }
+
+  .button-group {
+    .filter-button {
+      height: 38px;
+      min-width: 200px;
+      color: $text-secondary;
+      background-color: $cool-gray-20;
+    }
+
+    .selected {
+      color: #ffffff;
+      background: #d9d9d93d;
+    }
+  }
+}
diff --git a/assets/css/dashboard/new-pa-message/associate-alert-page.scss b/assets/css/dashboard/new-pa-message/associate-alert-page.scss
@@ -11,6 +11,7 @@
 .associate-alert-page-header {
   padding-right: 48px;
   max-width: 1380px;
+  height: 48px;
 
   &__cancel {
     flex: none;
@@ -33,40 +34,16 @@
 .associate-alert-page-body {
   flex-wrap: nowrap;
   padding-right: 48px;
+  margin-top: 40px;
 }
 
 .associate-alert-filter-selection {
-  flex: none;
-  font-size: 20px;
-  width: 200px;
-  padding: 0px 12px;
-  margin-top: 40px;
-
-  &__label {
-    margin-bottom: 8px;
-  }
-
-  &__button-group {
-    margin-bottom: 48px;
-  }
-
-  &__selected {
-    color: #ffffff !important;
-    background: #d9d9d93d !important;
-  }
-
-  button {
-    text-align: left;
-    height: 38px;
-    min-width: 200px;
-    color: $text-secondary;
-    background-color: $cool-gray-20;
-    border: none;
-  }
+  max-width: 200px;
+  padding: 0;
 }
 
 .associate-alert-table {
-  margin: 40px;
+  margin: 0 40px;
   max-width: 1096px;
 
   th,

diff --git a/assets/css/dashboard/pa-messages-page.scss b/assets/css/dashboard/pa-messages-page.scss
@@ -16,7 +16,6 @@
   padding-right: 0px;
   display: flex;
   flex-direction: column;
-  gap: 48px;
 
   .add-new-button,
   .system-log-link {
@@ -44,7 +43,7 @@
 
   .system-log-link {
     text-decoration: none;
-    margin-top: 8px;
+    margin-top: 16px;
     color: $text-secondary;
     .link-text {
       text-decoration: underline;
@@ -56,12 +55,7 @@
   section {
     display: flex;
     flex-direction: column;
-    gap: 8px;
-
-    header {
-      font-size: 16px;
-      line-height: 24px;
-    }
+    margin-bottom: 48px;
   }
 }
 

diff --git a/assets/css/screenplay.scss b/assets/css/screenplay.scss
@@ -45,6 +45,7 @@ $form-feedback-invalid-color: $text-error;
 @import "dashboard/picker.scss";
 @import "dashboard/toast.scss";
 @import "dashboard/kebab-menu.scss";
+@import "dashboard/filter-group.scss";
 
 html {
   font-size: 16px;

diff --git a/assets/js/components/Dashboard/FilterGroup.tsx b/assets/js/components/Dashboard/FilterGroup.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { Button, ButtonGroup } from "react-bootstrap";
+import classNames from "classnames";
+
+type Filter = {
+  label: string;
+  value: any;
+};
+
+interface Props {
+  header: string;
+  filters: Filter[];
+  selectedFilter: string;
+  onFilterSelect: (value: string) => void;
+  className?: string;
+}
+
+const FilterGroup = ({
+  header,
+  filters,
+  selectedFilter,
+  onFilterSelect,
+  className,
+}: Props) => {
+  return (
+    <div className={classNames("filter-group", className)}>
+      <div className="header">{header}</div>
+      <ButtonGroup className="button-group" vertical>
+        {filters.map((filter) => {
+          return (
+            <Button
+              key={filter.value}
+              className={classNames("filter-button", {
+                selected: selectedFilter === filter.value,
+              })}
+              onClick={() => onFilterSelect(filter.value)}
+            >
+              {filter.label}
+            </Button>
+          );
+        })}
+      </ButtonGroup>
+    </div>
+  );
+};
+
+export default FilterGroup;
diff --git a/assets/js/components/Dashboard/PaMessageForm/AssociateAlert.tsx b/assets/js/components/Dashboard/PaMessageForm/AssociateAlert.tsx
@@ -1,18 +1,10 @@
 import React, { useState, useEffect } from "react";
-import {
-  Button,
-  Container,
-  Row,
-  Col,
-  ButtonGroup,
-  Modal,
-  Form,
-} from "react-bootstrap";
+import { Button, Container, Row, Col, Modal, Form } from "react-bootstrap";
+import moment from "moment";
+import FilterGroup from "Components/FilterGroup";
 import { fetchActiveAndFutureAlerts } from "Utils/api";
 import { Alert } from "Models/alert";
-import classNames from "classnames";
 import { getAlertEarliestStartLatestEnd } from "../../../util";
-import moment from "moment";
 
 interface AssociateAlertPageProps {
   onApply: (
@@ -67,51 +59,24 @@ const AssociateAlert = ({ onApply, onCancel }: AssociateAlertPageProps) => {
         </Row>
         <Row className="associate-alert-page-body">
           <Col className="associate-alert-filter-selection">
-            <div className="associate-alert-filter-selection__label">
-              Message state
-            </div>
-            <ButtonGroup
-              className="associate-alert-filter-selection__button-group"
-              vertical
-            >
-              <Button
-                className={classNames({
-                  "associate-alert-filter-selection__selected":
-                    selectedMessageState === "active",
-                })}
-                onClick={() => setSelectedMessageState("active")}
-              >
-                Active
-              </Button>
-              <Button
-                className={classNames({
-                  "associate-alert-filter-selection__selected":
-                    selectedMessageState === "future",
-                })}
-                onClick={() => setSelectedMessageState("future")}
-              >
-                Future
-              </Button>
-            </ButtonGroup>
-            <div className="associate-alert-filter-selection__label">
-              Service type
-            </div>
-            <ButtonGroup vertical>
-              {serviceTypes.map((serviceType) => {
-                return (
-                  <Button
-                    key={serviceType}
-                    className={classNames({
-                      "associate-alert-filter-selection__selected":
-                        selectedServiceType === serviceType,
-                    })}
-                    onClick={() => setSelectedServiceType(serviceType)}
-                  >
-                    {serviceType}
-                  </Button>
-                );
+            <FilterGroup
+              className="mb-5"
+              header="Message state"
+              selectedFilter={selectedMessageState}
+              onFilterSelect={setSelectedMessageState}
+              filters={[
+                { label: "Active", value: "active" },
+                { label: "Future", value: "future" },
+              ]}
+            />
+            <FilterGroup
+              header="Service type"
+              selectedFilter={selectedServiceType}
+              onFilterSelect={setSelectedServiceType}
+              filters={serviceTypes.map((serviceType) => {
+                return { label: serviceType, value: serviceType };
               })}
-            </ButtonGroup>
+            />
           </Col>
           <Col>
             <AssociateAlertsTable

diff --git a/assets/js/components/Dashboard/PaMessagesPage.tsx b/assets/js/components/Dashboard/PaMessagesPage.tsx
@@ -3,8 +3,6 @@ import {
   Container,
   Row,
   Col,
-  ButtonGroup,
-  Button,
   Spinner,
   Dropdown,
   FormCheck,
@@ -20,10 +18,12 @@ import KebabMenu from "Components/KebabMenu";
 import { updateExistingPaMessage } from "Utils/api";
 import { UpdatePaMessageBody } from "Models/pa_message";
 import Toast, { type ToastProps } from "Components/Toast";
+import FilterGroup from "./FilterGroup";
 
 type StateFilter = "current" | "future" | "past";
 
 type ServiceType =
+  | "All"
   | "Green"
   | "Red"
   | "Orange"
@@ -147,55 +147,42 @@ const PaMessagesPage: ComponentType = () => {
                 <BoxArrowUpRight />
               </Link>
             </section>
-            <section>
-              <header>Filter by message state</header>
-              <ButtonGroup className="button-group" vertical>
-                <Button
-                  className={cx("button", {
-                    active: stateFilter === "current",
-                  })}
-                  onClick={() => setStateFilter("current")}
-                >
-                  Now
-                </Button>
-                <Button
-                  className={cx("button", { active: stateFilter === "future" })}
-                  onClick={() => setStateFilter("future")}
-                >
-                  Future
-                </Button>
-                <Button
-                  className={cx("button", { active: stateFilter === "past" })}
-                  onClick={() => setStateFilter("past")}
-                >
-                  Done
-                </Button>
-              </ButtonGroup>
-            </section>
-            <section>
-              <header>Filter by service type</header>
-              <ButtonGroup className="button-group" vertical>
-                <Button
-                  className={cx("button", {
-                    active: serviceTypes.length === 0,
-                  })}
-                  onClick={() => setServiceTypes([])}
-                >
-                  All
-                </Button>
-                {SERVICE_TYPES.map((serviceType) => (
-                  <Button
-                    key={serviceType}
-                    className={cx("button", {
-                      active: serviceTypes.includes(serviceType),
-                    })}
-                    onClick={() => setServiceTypes([serviceType])}
-                  >
-                    {getServiceLabel(serviceType)}
-                  </Button>
-                ))}
-              </ButtonGroup>
-            </section>
+            <FilterGroup
+              className="mb-5"
+              header="Filter by message state"
+              onFilterSelect={(selected) =>
+                setStateFilter(selected as StateFilter)
+              }
+              selectedFilter={stateFilter.toLowerCase()}
+              filters={[
+                { label: "Now", value: "current" },
+                { label: "Future", value: "future" },
+                { label: "Done", value: "past" },
+              ]}
+            />
+            <FilterGroup
+              header="Filter by service type"
+              onFilterSelect={(selected) => {
+                const serviceType = selected as ServiceType;
+                if (serviceType === "All") {
+                  setServiceTypes([]);
+                } else {
+                  setServiceTypes([serviceType]);
+                }
+              }}
+              selectedFilter={
+                serviceTypes.length === 0 ? "All" : serviceTypes[0]
+              }
+              filters={[
+                { label: "All", value: "All" },
+                ...SERVICE_TYPES.map((serviceType) => {
+                  return {
+                    label: getServiceLabel(serviceType),
+                    value: serviceType,
+                  };
+                }),
+              ]}
+            />
           </Col>
           <Col className="pa-message-table-container">
             <Row>