fix: debug

okta · Jul 24, 2024 · 443199e · 443199e
1 parent 3b3376b
commit 443199e
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 84 deletions.
diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx
@@ -14,7 +14,7 @@
 import { useMemo, useCallback } from "react";
 import { DataFilter } from "@okta/odyssey-react-mui/labs";
 import { DataTable, DataTableSortingState } from "@okta/odyssey-react-mui";
-import { columns, data, OdysseyComponent } from "./roadmapData";
+import { useColumns, data, OdysseyComponent } from "./roadmapData";
 import {
   Callout,
   CssBaseline,
@@ -127,6 +127,8 @@ const processData = ({
 };
 
 export const InnerRoadmapTable = () => {
+  const columns = useColumns(); // Use the hook to get columns
+
   // Memoize filter options
   const typeOptions = useMemo(
     () => [
@@ -186,9 +188,7 @@ export const InnerRoadmapTable = () => {
         sort,
       });
     },
-    [
-      /* Add data as a dependency if it can change */
-    ],
+    [data], // Add data as a dependency if it can change
   );
 
   // Memoize the filters array
@@ -218,7 +218,7 @@ export const InnerRoadmapTable = () => {
 
   return (
     <DataTable
-      columns={columns}
+      columns={columns} // Use the columns from the hook
       totalRows={data.length}
       getRowId={({ name }) => name}
       getData={fetchData}

diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/roadmapData.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/roadmapData.tsx
@@ -10,6 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+/* eslint-disable import/no-extraneous-dependencies */
+import { useMemo } from "react";
 import {
   DataTableRowData,
   Status,
@@ -19,7 +21,6 @@ import {
 import { DataTableColumn } from "@okta/odyssey-react-mui";
 
 import rawData from "./roadmap.json";
-export const data: OdysseyComponent[] = rawData as OdysseyComponent[];
 
 export type OdysseyComponent = {
   name: string;
@@ -31,86 +32,109 @@ export type OdysseyComponent = {
   deliverableTiming: string;
 };
 
-export const columns: DataTableColumn<DataTableRowData>[] = [
-  {
-    accessorKey: "name",
-    header: "Name",
-    enableHiding: false,
-    size: 325,
-  },
-  {
-    accessorKey: "type",
-    header: "Type",
-    enableHiding: true,
-    size: 200,
-  },
-  {
-    accessorKey: "status",
-    header: "Status",
-    size: 200,
-    Cell: ({ cell, row }) => {
-      const statusValue = cell.getValue<string>();
-      const defineValue = row.original.define;
-      const designValue = row.original.design;
-      const developValue = row.original.develop;
-      const severityMap = new Map<
-        string,
-        (typeof statusSeverityValues)[number]
-      >([
-        ["Released", "success"],
-        ["In Labs", "warning"],
-        ["In progress", "default"],
-        ["Not started", "error"],
-      ]);
-      const severity = severityMap.get(statusValue) || "default";
+export const data: OdysseyComponent[] = rawData as OdysseyComponent[];
+
+const severityMap = new Map<string, (typeof statusSeverityValues)[number]>([
+  ["Released", "success"],
+  ["In Labs", "warning"],
+  ["In progress", "default"],
+  ["Not started", "error"],
+]);
+
+const getTooltipText = (
+  defineValue: string,
+  designValue: string,
+  developValue: string,
+): string => {
+  let text = "";
+  if (defineValue === "In progress") {
+    text += "Project definition in progress";
+  }
+  if (["Complete", "In progress"].includes(designValue)) {
+    text += (text ? " " : "") + "Design: " + designValue;
+  }
+  if (["Complete", "In progress"].includes(developValue)) {
+    text += (text ? " " : "") + "Develop: " + developValue;
+  }
+  return text.trim();
+};
+
+type CellProps = {
+  cell: { getValue: () => string }; // Updated to string
+  row: { original: OdysseyComponent };
+};
 
-      // First priority: Check if the define stage is "In Progress"
-      if (defineValue === "In Progress") {
-        // Return a Tooltip specifically for this condition and do nothing else
-        return (
-          <Tooltip
-            ariaType="label"
-            placement="top"
-            text="Planning and research in progress"
-          >
-            <Status
-              label="Planning and research in progress"
-              severity={severity}
-            />
-          </Tooltip>
-        );
-      }
+const StatusCell: React.FC<CellProps> = ({ cell, row }) => {
+  const statusValue = cell.getValue();
+  const {
+    define: defineValue,
+    design: designValue,
+    develop: developValue,
+  } = row.original;
 
-      // If defineValue is not "In Progress", then proceed with this logic:
-      let tooltipText = "";
-      if (defineValue === "In progress") {
-        tooltipText += "Project definition in progress";
-      }
-      if (["Complete", "In progress"].includes(designValue)) {
-        tooltipText += "Design: " + designValue + " ";
-      }
-      if (["Complete", "In progress"].includes(developValue)) {
-        tooltipText += "Develop: " + developValue;
-      }
+  const severity = useMemo(
+    () => severityMap.get(statusValue) || "default",
+    [statusValue],
+  );
+  const tooltipText = useMemo(
+    () => getTooltipText(defineValue, designValue, developValue),
+    [defineValue, designValue, developValue],
+  );
 
-      // Only show the tooltip if there's relevant information to display
-      if (tooltipText && statusValue !== "Released") {
-        return (
-          <Tooltip ariaType="label" placement="top" text={tooltipText.trim()}>
-            <Status label={statusValue} severity={severity} />
-          </Tooltip>
-        );
-      }
+  if (defineValue === "In Progress") {
+    return (
+      <Tooltip
+        ariaType="label"
+        placement="top"
+        text="Planning and research in progress"
+      >
+        <Status label="Planning and research in progress" severity={severity} />
+      </Tooltip>
+    );
+  }
 
-      // If there is no relevant tooltip text, just show the status without any tooltip
-      return <Status label={statusValue} severity={severity} />;
-    },
-  },
+  if (tooltipText && statusValue !== "Released") {
+    return (
+      <Tooltip ariaType="label" placement="top" text={tooltipText}>
+        <Status label={statusValue} severity={severity} />
+      </Tooltip>
+    );
+  }
 
-  {
-    accessorKey: "deliverableTiming",
-    header: "Deliverable timing",
-    enableHiding: false,
-    size: 200,
-  },
-];
+  return <Status label={statusValue} severity={severity} />;
+};
+
+export const useColumns = (): DataTableColumn<DataTableRowData>[] => {
+  return useMemo(
+    () =>
+      [
+        {
+          accessorKey: "name",
+          header: "Name",
+          enableHiding: false,
+          size: 325,
+        },
+        {
+          accessorKey: "type",
+          header: "Type",
+          enableHiding: true,
+          size: 200,
+        },
+        {
+          accessorKey: "status",
+          header: "Status",
+          size: 200,
+          Cell: ({ cell, row }: CellProps) => (
+            <StatusCell cell={cell} row={row} />
+          ),
+        },
+        {
+          accessorKey: "deliverableTiming",
+          header: "Deliverable timing",
+          enableHiding: false,
+          size: 200,
+        },
+      ] as DataTableColumn<DataTableRowData>[],
+    [],
+  );
+};