tweak: Allow the dropdown to appear in read-only mode

mbta · Jan 2, 2025 · f1f5cae · f1f5cae
1 parent 592dec4
commit f1f5cae
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 78 deletions.
diff --git a/assets/src/components/routeLadder.tsx b/assets/src/components/routeLadder.tsx
@@ -56,15 +56,15 @@ export const Header = ({
   routeName,
   onClose,
   hasAlert,
-  showDropdown,
+  isAdmin,
   onClickAddDetour,
   onOpenDetour,
   skateDetoursForRoute,
 }: {
   routeName: string
   onClose: () => void
   hasAlert: boolean
-  showDropdown: boolean
+  isAdmin: boolean
   onClickAddDetour?: () => void
   onOpenDetour?: (detourId: DetourId) => void
   skateDetoursForRoute?: DetoursMap
@@ -80,76 +80,74 @@ export const Header = ({
             hasAlert && "c-route-ladder__dropdown--non-skate-alert",
           ])}
         >
-          {showDropdown && (
-            <Dropdown className="border-box inherit-box">
-              <Dropdown.Toggle
-                className="c-route-ladder__dropdown-button d-none d-sm-flex"
-                aria-labelledby={joinTruthy([
-                  routePillId,
-                  routeOptionsToggleId,
-                ])}
-              >
-                <ThreeDotsVertical />
-                <span className="visually-hidden" id={routeOptionsToggleId}>
-                  Route Options
-                </span>
-              </Dropdown.Toggle>
-              <Dropdown.Menu>
-                <Dropdown.Header>
-                  <div className="c-route-ladder__dropdown-header-text">
-                    Adjustments
-                  </div>
-                </Dropdown.Header>
-                <Dropdown.Item
-                  className="icon-link"
-                  onClick={onClickAddDetour}
-                  data-fs-element="Add Detour on Route"
-                >
-                  <PlusSquare /> Add detour
-                </Dropdown.Item>
-                <Dropdown.Divider className="border-top-0" />
-                <Dropdown.Header>
-                  <div className="c-route-ladder__dropdown-header-text">
-                    Active detours
-                  </div>
-                </Dropdown.Header>
-                {hasAlert && (
-                  <>
-                    {skateDetoursForRoute &&
-                      Object.values(skateDetoursForRoute).map((detour) => (
-                        <Dropdown.Item
-                          key={detour.id}
-                          className="icon-link"
-                          onClick={() => onOpenDetour?.(detour.id)}
-                        >
-                          {detour.direction === "Outbound" ? (
-                            <ArrowDownLeftSquare />
-                          ) : (
-                            <ArrowUpRightSquare />
-                          )}
-                          <div>
-                            {detour.route} - {detour.intersection}
-                          </div>
-                        </Dropdown.Item>
-                      ))}
-                    {skateDetoursForRoute &&
-                      Object.values(skateDetoursForRoute).length == 0 && (
-                        <Dropdown.ItemText className="lh-base pb-4">
-                          This route has an active detour. View detour details
-                          on <a href="https://www.mbta.com/">mbta.com</a> or in
-                          IRIS.
-                        </Dropdown.ItemText>
-                      )}
-                  </>
-                )}
-                {!hasAlert && (
-                  <Dropdown.ItemText className="lh-base pb-4">
-                    No active detours
-                  </Dropdown.ItemText>
-                )}
-              </Dropdown.Menu>
-            </Dropdown>
-          )}
+          <Dropdown className="border-box inherit-box">
+            <Dropdown.Toggle
+              className="c-route-ladder__dropdown-button d-none d-sm-flex"
+              aria-labelledby={joinTruthy([routePillId, routeOptionsToggleId])}
+            >
+              <ThreeDotsVertical />
+              <span className="visually-hidden" id={routeOptionsToggleId}>
+                Route Options
+              </span>
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              {isAdmin && (
+                <>
+                  <Dropdown.Header>
+                    <div className="c-route-ladder__dropdown-header-text">
+                      Adjustments
+                    </div>
+                  </Dropdown.Header>
+                  <Dropdown.Item
+                    className="icon-link"
+                    onClick={onClickAddDetour}
+                    data-fs-element="Add Detour on Route"
+                  >
+                    <PlusSquare /> Add detour
+                  </Dropdown.Item>
+                  <Dropdown.Divider className="border-top-0" />
+                </>
+              )}
+              <Dropdown.Header>
+                <div className="c-route-ladder__dropdown-header-text">
+                  Active detours
+                </div>
+              </Dropdown.Header>
+              {hasAlert && (
+                <>
+                  {skateDetoursForRoute &&
+                    Object.values(skateDetoursForRoute).map((detour) => (
+                      <Dropdown.Item
+                        key={detour.id}
+                        className="icon-link"
+                        onClick={() => onOpenDetour?.(detour.id)}
+                      >
+                        {detour.direction === "Outbound" ? (
+                          <ArrowDownLeftSquare />
+                        ) : (
+                          <ArrowUpRightSquare />
+                        )}
+                        <div>
+                          {detour.route} - {detour.intersection}
+                        </div>
+                      </Dropdown.Item>
+                    ))}
+                  {skateDetoursForRoute &&
+                    Object.values(skateDetoursForRoute).length == 0 && (
+                      <Dropdown.ItemText className="lh-base pb-4">
+                        This route has an active detour. View detour details on{" "}
+                        <a href="https://www.mbta.com/">mbta.com</a> or in IRIS.
+                      </Dropdown.ItemText>
+                    )}
+                </>
+              )}
+              {!hasAlert && (
+                <Dropdown.ItemText className="lh-base pb-4">
+                  No active detours
+                </Dropdown.ItemText>
+              )}
+            </Dropdown.Menu>
+          </Dropdown>
         </div>
         <RoutePill
           id={routePillId}
@@ -289,7 +287,7 @@ const RouteLadder = ({
         onClose={() => {
           deselectRoute(route.id)
         }}
-        showDropdown={inTestGroup(TestGroups.DetoursPilot)}
+        isAdmin={inTestGroup(TestGroups.DetoursPilot)}
         onClickAddDetour={() => {
           onAddDetour?.(route)
         }}

diff --git a/assets/stories/skate-components/routeLadderHeader.stories.tsx b/assets/stories/skate-components/routeLadderHeader.stories.tsx
@@ -8,7 +8,7 @@ const meta = {
     routeName: "39",
     onClose: () => {},
     hasAlert: false,
-    showDropdown: false,
+    isAdmin: false,
   },
   argTypes: {
     onClose: { table: { disable: true } },
@@ -24,14 +24,14 @@ export const WithAlert: Story = {
     hasAlert: true,
   },
 }
-export const WithDetourDropdown: Story = {
+export const AdminView: Story = {
   args: {
-    showDropdown: true,
+    isAdmin: true,
   },
 }
-export const WithAlertAndDropdown: Story = {
+export const AdminViewWithAlert: Story = {
   args: {
     hasAlert: true,
-    showDropdown: true,
+    isAdmin: true,
   },
 }