From 321d7cede67c7219fbd7f80b6df4420b8802eaf7 Mon Sep 17 00:00:00 2001
From: Cora Grant <cgrant2@mbta.com>
Date: Mon, 26 Aug 2024 14:07:25 -0400
Subject: [PATCH] feat: link to Inspector from admin tables

---
 assets/css/admin.scss                        |  6 ++++++
 assets/src/components/admin/admin_cells.tsx  | 14 ++++++++++++++
 assets/src/components/admin/admin_tables.tsx | 19 +++++++++++++++++--
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/assets/css/admin.scss b/assets/css/admin.scss
index 643977dd0..575937d89 100644
--- a/assets/css/admin.scss
+++ b/assets/css/admin.scss
@@ -84,6 +84,12 @@
   width: 240px;
 }
 
+.admin-table__inspector-link {
+  color: unset;
+  text-decoration: none;
+  border-bottom: 1px dotted;
+}
+
 .admin-modal__background {
   position: fixed;
   top: 0;
diff --git a/assets/src/components/admin/admin_cells.tsx b/assets/src/components/admin/admin_cells.tsx
index 3dcfb1700..92d88424d 100644
--- a/assets/src/components/admin/admin_cells.tsx
+++ b/assets/src/components/admin/admin_cells.tsx
@@ -1,4 +1,5 @@
 import React, { useRef, useMemo, useEffect } from "react";
+import { Link } from "react-router-dom";
 import _ from "lodash";
 
 import { gatherSelectOptions } from "Util/admin";
@@ -168,6 +169,18 @@ const IndeterminateCheckbox = ({ indeterminate, ...rest }) => {
   );
 };
 
+const InspectorLink = ({ value }) => {
+  return (
+    <Link
+      to={`/inspector?id=${value}`}
+      className="admin-table__inspector-link"
+      title="🔍 View in Inspector"
+    >
+      {value}
+    </Link>
+  );
+};
+
 export {
   EditableCell,
   EditableList,
@@ -176,4 +189,5 @@ export {
   EditableCheckbox,
   EditableTextarea,
   IndeterminateCheckbox,
+  InspectorLink,
 };
diff --git a/assets/src/components/admin/admin_tables.tsx b/assets/src/components/admin/admin_tables.tsx
index 51682b553..5a964229b 100644
--- a/assets/src/components/admin/admin_tables.tsx
+++ b/assets/src/components/admin/admin_tables.tsx
@@ -14,6 +14,7 @@ import {
   EditableSelect,
   EditableCheckbox,
   EditableTextarea,
+  InspectorLink,
 } from "Components/admin/admin_cells";
 
 import {
@@ -42,6 +43,7 @@ const AllScreensTable = (): JSX.Element => {
     {
       Header: "Screen ID",
       accessor: "id",
+      Cell: InspectorLink,
       Filter: DefaultColumnFilter,
       FormCell: FormStaticCell,
     },
@@ -115,7 +117,12 @@ const AllScreensTable = (): JSX.Element => {
 
 const SolariScreensTable = (): JSX.Element => {
   const columns = [
-    { Header: "Screen ID", accessor: "id", Filter: DefaultColumnFilter },
+    {
+      Header: "Screen ID",
+      accessor: "id",
+      Cell: InspectorLink,
+      Filter: DefaultColumnFilter,
+    },
     {
       Header: "Station Name",
       accessor: buildAppParamAccessor("station_name"),
@@ -182,7 +189,12 @@ const SolariScreensTable = (): JSX.Element => {
 
 const DupV2ScreensTable = (): JSX.Element => {
   const columns = [
-    { Header: "Screen ID", accessor: "id", Filter: DefaultColumnFilter },
+    {
+      Header: "Screen ID",
+      accessor: "id",
+      Cell: InspectorLink,
+      Filter: DefaultColumnFilter,
+    },
     {
       Header: "Header",
       accessor: buildAppParamAccessor("header"),
@@ -235,6 +247,7 @@ const v2Columns = [
   {
     Header: "Screen ID",
     accessor: "id",
+    Cell: InspectorLink,
     Filter: DefaultColumnFilter,
     FormCell: FormStaticCell,
   },
@@ -282,6 +295,7 @@ const v2Columns = [
 const screenIDColumn = {
   Header: "Screen ID",
   accessor: "id",
+  Cell: InspectorLink,
   Filter: DefaultColumnFilter,
   FormCell: FormStaticCell,
 };
@@ -515,6 +529,7 @@ const BuswayV2ScreensTable = (): JSX.Element => {
     {
       Header: "Screen ID",
       accessor: "id",
+      Cell: InspectorLink,
       Filter: DefaultColumnFilter,
       FormCell: FormStaticCell,
     },