Fix tabs

src/components/Assets/index.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useContext, useEffect, useState } from "react";
 import { actions as globalActions } from "../../actions";
+import { ROUTES } from "../../constants";
 import { useDebounce } from "../../hooks/useDebounce";
 import { usePrevious } from "../../hooks/usePrevious";
 import { ChangeViewPayload } from "../../types";
@@ -63,7 +64,7 @@ export const Assets = ({ selectedTypeId }: AssetsProps) => {
 
   const handleGoToAllAssets = () => {
     setSelectedAssetTypeId(null);
-    changeView("/assets");
+    changeView(ROUTES.ASSETS);
   };
 
   const handleSearchInputChange = (val: string | null) => {
@@ -72,7 +73,7 @@ export const Assets = ({ selectedTypeId }: AssetsProps) => {
 
   const handleAssetTypeSelect = (assetTypeId: string) => {
     setSelectedAssetTypeId(assetTypeId);
-    changeView(`/assets/${assetTypeId}`);
+    changeView(`${ROUTES.ASSETS}/${assetTypeId}`);
   };
 
   const handleApplyFilters = (filters: AssetFilterQuery) => {

src/components/Highlights/Performance/index.tsx

@@ -1,5 +1,6 @@
 import { Row, createColumnHelper } from "@tanstack/react-table";
 import { useContext, useEffect, useState } from "react";
+import { ROUTES } from "../../../constants";
 import { usePrevious } from "../../../hooks/usePrevious";
 import { isBoolean } from "../../../typeGuards/isBoolean";
 import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
@@ -116,7 +117,7 @@ export const Performance = () => {
       handleEnvironmentTableRowClick(
         config.environments,
         row.original.environment.id,
-        "/analytics"
+        ROUTES.ANALYTICS
       );
     };
 

src/components/Highlights/TopIssues/highlightCards/EndpointBottleneckHighlightCard/index.tsx

@@ -1,5 +1,6 @@
 import { Row, createColumnHelper } from "@tanstack/react-table";
 import { useContext } from "react";
+import { ROUTES } from "../../../../../constants";
 import { Duration } from "../../../../../globals";
 import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
 import { getDurationString } from "../../../../../utils/getDurationString";
@@ -76,7 +77,7 @@ export const EndpointBottleneckHighlightCard = ({
     handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentId,
-      "/insights"
+      ROUTES.INSIGHTS
     );
   };
 

src/components/Highlights/TopIssues/highlightCards/EndpointChattyApiV2HighlightCard/index.tsx

@@ -1,5 +1,6 @@
 import { Row, createColumnHelper } from "@tanstack/react-table";
 import { useContext } from "react";
+import { ROUTES } from "../../../../../constants";
 import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
 import { ConfigContext } from "../../../../common/App/ConfigContext";
 import { Table } from "../../../common/Table";
@@ -46,7 +47,7 @@ export const EndpointChattyApiV2HighlightCard = ({
     handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentId,
-      "/insights"
+      ROUTES.INSIGHTS
     );
   };
 

src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/index.tsx

@@ -1,5 +1,6 @@
 import { Row, createColumnHelper } from "@tanstack/react-table";
 import { useContext } from "react";
+import { ROUTES } from "../../../../../constants";
 import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
 import { ConfigContext } from "../../../../common/App/ConfigContext";
 import { Table } from "../../../common/Table";
@@ -63,7 +64,7 @@ export const EndpointHighNumberOfQueriesHighlightCard = ({
     handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentId,
-      "/insights"
+      ROUTES.INSIGHTS
     );
   };
 

src/components/Highlights/TopIssues/highlightCards/EndpointQueryOptimizationV2HighlightCard/index.tsx

@@ -1,5 +1,6 @@
 import { Row, createColumnHelper } from "@tanstack/react-table";
 import { useContext } from "react";
+import { ROUTES } from "../../../../../constants";
 import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
 import { getDurationString } from "../../../../../utils/getDurationString";
 import { ConfigContext } from "../../../../common/App/ConfigContext";
@@ -50,7 +51,7 @@ export const EndpointQueryOptimizationV2HighlightCard = ({
     handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentId,
-      "/insights"
+      ROUTES.INSIGHTS
     );
   };
 

src/components/Highlights/TopIssues/highlightCards/EndpointSessionInViewHighlightCard/index.tsx

@@ -1,5 +1,6 @@
 import { Row, createColumnHelper } from "@tanstack/react-table";
 import { useContext } from "react";
+import { ROUTES } from "../../../../../constants";
 import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
 import { ConfigContext } from "../../../../common/App/ConfigContext";
 import { Table } from "../../../common/Table";
@@ -34,7 +35,7 @@ export const EndpointSessionInViewHighlightCard = ({
     handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentId,
-      "/insights"
+      ROUTES.INSIGHTS
     );
   };
 

src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/index.tsx

@@ -1,5 +1,6 @@
 import { Row, createColumnHelper } from "@tanstack/react-table";
 import { useContext } from "react";
+import { ROUTES } from "../../../../../constants";
 import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
 import { getDurationString } from "../../../../../utils/getDurationString";
 import { ConfigContext } from "../../../../common/App/ConfigContext";
@@ -50,7 +51,7 @@ export const EndpointSlowdownSourceHighlightCard = ({
     handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentId,
-      "/insights"
+      ROUTES.INSIGHTS
     );
   };
 

src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/index.tsx

@@ -1,5 +1,6 @@
 import { Row, createColumnHelper } from "@tanstack/react-table";
 import { useContext } from "react";
+import { ROUTES } from "../../../../../constants";
 import { Duration } from "../../../../../globals";
 import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
 import { getDurationString } from "../../../../../utils/getDurationString";
@@ -68,7 +69,7 @@ export const EndpointSpanNPlusOneHighlightCard = ({
     handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentId,
-      "/insights"
+      ROUTES.INSIGHTS
     );
   };
 

src/components/Highlights/TopIssues/highlightCards/HotSpotHighlightCard/index.tsx

@@ -1,5 +1,6 @@
 import { Row, createColumnHelper } from "@tanstack/react-table";
 import { useContext } from "react";
+import { ROUTES } from "../../../../../constants";
 import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
 import { ConfigContext } from "../../../../common/App/ConfigContext";
 import { Table } from "../../../common/Table";
@@ -39,7 +40,7 @@ export const HotSpotHighlightCard = ({ data }: HotSpotHighlightCardProps) => {
     handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentId,
-      "/insights"
+      ROUTES.INSIGHTS
     );
   };
 

src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/index.tsx

@@ -1,5 +1,6 @@
 import { Row, createColumnHelper } from "@tanstack/react-table";
 import { useContext } from "react";
+import { ROUTES } from "../../../../../constants";
 import { Duration } from "../../../../../globals";
 import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
 import { getDurationString } from "../../../../../utils/getDurationString";
@@ -77,7 +78,7 @@ export const SpaNPlusOneHighlightCard = ({
     handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentId,
-      "/insights"
+      ROUTES.INSIGHTS
     );
   };
 

src/components/Highlights/TopIssues/highlightCards/SpanEndpointBottleneckHighlightCard/index.tsx

@@ -1,5 +1,6 @@
 import { Row, createColumnHelper } from "@tanstack/react-table";
 import { useContext } from "react";
+import { ROUTES } from "../../../../../constants";
 import { Duration } from "../../../../../globals";
 import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
 import { getDurationString } from "../../../../../utils/getDurationString";
@@ -74,7 +75,7 @@ export const SpanEndpointBottleneckHighlightCard = ({
     handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentId,
-      "/insights"
+      ROUTES.INSIGHTS
     );
   };
 

src/components/Highlights/TopIssues/highlightCards/SpanQueryOptimizationHighlightCard/index.tsx

@@ -1,5 +1,6 @@
 import { Row, createColumnHelper } from "@tanstack/react-table";
 import { useContext } from "react";
+import { ROUTES } from "../../../../../constants";
 import { Duration } from "../../../../../globals";
 import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
 import { getDurationString } from "../../../../../utils/getDurationString";
@@ -81,7 +82,7 @@ export const SpanQueryOptimizationHighlightCard = ({
     handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentId,
-      "/insights"
+      ROUTES.INSIGHTS
     );
   };
 

src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/index.tsx

@@ -1,5 +1,6 @@
 import { Row, createColumnHelper } from "@tanstack/react-table";
 import { useContext } from "react";
+import { ROUTES } from "../../../../../constants";
 import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
 import { ConfigContext } from "../../../../common/App/ConfigContext";
 import { Table } from "../../../common/Table";
@@ -47,7 +48,7 @@ export const SpanScalingHighlightCard = ({
     handleEnvironmentTableRowClick(
       config.environments,
       row.original.environmentId,
-      "/insights"
+      ROUTES.INSIGHTS
     );
   };
 

src/components/Highlights/TopIssues/index.tsx

@@ -1,5 +1,6 @@
 import { Fragment, useEffect, useState } from "react";
 import { actions as globalActions } from "../../../actions";
+import { ROUTES } from "../../../constants";
 import { usePrevious } from "../../../hooks/usePrevious";
 import { ChangeViewPayload } from "../../../types";
 import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
@@ -97,7 +98,7 @@ export const TopIssues = () => {
     window.sendMessageToDigma<ChangeViewPayload>({
       action: globalActions.CHANGE_VIEW,
       payload: {
-        view: "/insights"
+        view: ROUTES.INSIGHTS
       }
     });
   };

src/components/Highlights/handleEnvironmentTableRowClick.ts

@@ -1,12 +1,11 @@
 import { actions as globalActions } from "../../actions";
 import { ChangeEnvironmentPayload, ChangeViewPayload } from "../../types";
-import { View } from "../Main/types";
 import { Environment } from "../common/App/types";
 
 export const handleEnvironmentTableRowClick = (
   environments: Environment[] | undefined,
   environmentIdToSelect: string,
-  viewToSelect: View
+  viewToSelect: string
 ) => {
   const environmentChangeTo = environments?.find(
     (x) => x.id === environmentIdToSelect

src/components/Main/Main.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 
 import { Main } from ".";
+import { ROUTES } from "../../constants";
 import { mockedViewsData } from "../Navigation/mockData";
 import { SetViewsPayload } from "../Navigation/types";
 import { actions } from "./actions";
@@ -34,12 +35,22 @@ const updateSelectedView = (
 };
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Highlights: Story = {
+  play: () => {
+    window.postMessage({
+      type: "digma",
+      action: actions.SET_VIEWS,
+      payload: updateSelectedView(mockedViewsData, ROUTES.HIGHLIGHTS)
+    });
+  }
+};
+
 export const Insights: Story = {
   play: () => {
     window.postMessage({
       type: "digma",
       action: actions.SET_VIEWS,
-      payload: updateSelectedView(mockedViewsData, "insights")
+      payload: updateSelectedView(mockedViewsData, ROUTES.INSIGHTS)
     });
   }
 };
@@ -49,7 +60,17 @@ export const Assets: Story = {
     window.postMessage({
       type: "digma",
       action: actions.SET_VIEWS,
-      payload: updateSelectedView(mockedViewsData, "assets")
+      payload: updateSelectedView(mockedViewsData, ROUTES.ASSETS)
+    });
+  }
+};
+
+export const Analytics: Story = {
+  play: () => {
+    window.postMessage({
+      type: "digma",
+      action: actions.SET_VIEWS,
+      payload: updateSelectedView(mockedViewsData, ROUTES.ANALYTICS)
     });
   }
 };
@@ -59,7 +80,7 @@ export const Tests: Story = {
     window.postMessage({
       type: "digma",
       action: actions.SET_VIEWS,
-      payload: updateSelectedView(mockedViewsData, "tests")
+      payload: updateSelectedView(mockedViewsData, ROUTES.TESTS)
     });
   }
 };

src/components/Main/index.tsx

@@ -1,4 +1,5 @@
 import { useContext, useLayoutEffect, useState } from "react";
+import { ROUTES } from "../../constants";
 import { dispatcher } from "../../dispatcher";
 import { Assets } from "../Assets";
 import { Highlights } from "../Highlights";
@@ -11,7 +12,7 @@ import { actions } from "./actions";
 import { ViewData } from "./types";
 
 export const Main = () => {
-  const [view, setView] = useState<ViewData>({ id: "/insights" });
+  const [view, setView] = useState<ViewData>({ id: ROUTES.INSIGHTS });
   const config = useContext(ConfigContext);
 
   useLayoutEffect(() => {
@@ -39,15 +40,15 @@ export const Main = () => {
   }
 
   switch (view.id) {
-    case "/highlights":
+    case ROUTES.HIGHLIGHTS:
       return <Highlights />;
-    case "/insights":
-      return <Insights insightViewType={"Issues"} key={"/insights"} />;
-    case "/assets":
+    case ROUTES.INSIGHTS:
+      return <Insights insightViewType={"Issues"} key={"insights"} />;
+    case ROUTES.ASSETS:
       return <Assets selectedTypeId={view.path} />;
-    case "/analytics":
-      return <Insights insightViewType={"Analytics"} key={"/analytics"} />;
-    case "/tests":
+    case ROUTES.ANALYTICS:
+      return <Insights insightViewType={"Analytics"} key={"analytics"} />;
+    case ROUTES.TESTS:
       return <Tests />;
     default:
       return null;

src/components/Main/types.ts

@@ -1,13 +1,3 @@
-export type View =
-  | "/highlights"
-  | "/insights"
-  | "/assets"
-  | "/analytics"
-  | "/errors"
-  | "/errors/details"
-  | "/tests";
-// | "/assets/{categoryType}" supported path for category
-
 export interface GetHighlightsTopIssuesDataPayload {
   query: {
     scopedCodeObjectId: string | null;