diff --git a/src/components/Assets/index.tsx b/src/components/Assets/index.tsx index fd519a440..fb5860262 100644 --- a/src/components/Assets/index.tsx +++ b/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) => { diff --git a/src/components/Highlights/Performance/index.tsx b/src/components/Highlights/Performance/index.tsx index 6284737fd..6ff2b108b 100644 --- a/src/components/Highlights/Performance/index.tsx +++ b/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 ); }; diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointBottleneckHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointBottleneckHighlightCard/index.tsx index eb12ec777..31c83825a 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointBottleneckHighlightCard/index.tsx +++ b/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 ); }; diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointChattyApiV2HighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointChattyApiV2HighlightCard/index.tsx index 4c18e30e9..70f2b250c 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointChattyApiV2HighlightCard/index.tsx +++ b/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 ); }; diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/index.tsx index f5540af96..c45f128b2 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointHighNumberOfQueriesHighlightCard/index.tsx +++ b/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 ); }; diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointQueryOptimizationV2HighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointQueryOptimizationV2HighlightCard/index.tsx index 3bfeae719..d83c67d5e 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointQueryOptimizationV2HighlightCard/index.tsx +++ b/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 ); }; diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointSessionInViewHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointSessionInViewHighlightCard/index.tsx index 0caa5f843..b7e9ddb2c 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointSessionInViewHighlightCard/index.tsx +++ b/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 ); }; diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/index.tsx index aca022379..c43a10c80 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointSlowdownSourceHighlightCard/index.tsx +++ b/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 ); }; diff --git a/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/index.tsx index 2d03a0346..5723d103e 100644 --- a/src/components/Highlights/TopIssues/highlightCards/EndpointSpanNPlusOneHighlightCard/index.tsx +++ b/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 ); }; diff --git a/src/components/Highlights/TopIssues/highlightCards/HotSpotHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/HotSpotHighlightCard/index.tsx index ee4891c0c..4e70bb3b4 100644 --- a/src/components/Highlights/TopIssues/highlightCards/HotSpotHighlightCard/index.tsx +++ b/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 ); }; diff --git a/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/index.tsx index a5909e68e..c1452a628 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpaNPlusOneHighlightCard/index.tsx +++ b/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 ); }; diff --git a/src/components/Highlights/TopIssues/highlightCards/SpanEndpointBottleneckHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/SpanEndpointBottleneckHighlightCard/index.tsx index 1fca86815..8bd5820da 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpanEndpointBottleneckHighlightCard/index.tsx +++ b/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 ); }; diff --git a/src/components/Highlights/TopIssues/highlightCards/SpanQueryOptimizationHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/SpanQueryOptimizationHighlightCard/index.tsx index 01630db39..1aa1a0707 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpanQueryOptimizationHighlightCard/index.tsx +++ b/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 ); }; diff --git a/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/index.tsx b/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/index.tsx index ff8451f67..ae4169688 100644 --- a/src/components/Highlights/TopIssues/highlightCards/SpanScalingHighlightCard/index.tsx +++ b/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 ); }; diff --git a/src/components/Highlights/TopIssues/index.tsx b/src/components/Highlights/TopIssues/index.tsx index a73c2b82e..dc53ddf7c 100644 --- a/src/components/Highlights/TopIssues/index.tsx +++ b/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({ action: globalActions.CHANGE_VIEW, payload: { - view: "/insights" + view: ROUTES.INSIGHTS } }); }; diff --git a/src/components/Highlights/handleEnvironmentTableRowClick.ts b/src/components/Highlights/handleEnvironmentTableRowClick.ts index 47adc6c5a..d7ee215d7 100644 --- a/src/components/Highlights/handleEnvironmentTableRowClick.ts +++ b/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 diff --git a/src/components/Main/Main.stories.tsx b/src/components/Main/Main.stories.tsx index 618a82e22..e086b1e64 100644 --- a/src/components/Main/Main.stories.tsx +++ b/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) }); } }; diff --git a/src/components/Main/index.tsx b/src/components/Main/index.tsx index e9bd8f249..1966cef94 100644 --- a/src/components/Main/index.tsx +++ b/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({ id: "/insights" }); + const [view, setView] = useState({ id: ROUTES.INSIGHTS }); const config = useContext(ConfigContext); useLayoutEffect(() => { @@ -39,15 +40,15 @@ export const Main = () => { } switch (view.id) { - case "/highlights": + case ROUTES.HIGHLIGHTS: return ; - case "/insights": - return ; - case "/assets": + case ROUTES.INSIGHTS: + return ; + case ROUTES.ASSETS: return ; - case "/analytics": - return ; - case "/tests": + case ROUTES.ANALYTICS: + return ; + case ROUTES.TESTS: return ; default: return null; diff --git a/src/components/Main/typeGuards.ts b/src/components/Main/typeGuards.ts deleted file mode 100644 index c18a2631c..000000000 --- a/src/components/Main/typeGuards.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { View } from "./types"; - -export const isView = (view: string): view is View => - ["highlights", "insights", "assets", "analytics", "tests"].includes(view); diff --git a/src/components/Main/types.ts b/src/components/Main/types.ts index 95c9e5257..9a1285a21 100644 --- a/src/components/Main/types.ts +++ b/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; diff --git a/src/components/Navigation/ScopeNavigation/HistoryManager.ts b/src/components/Navigation/ScopeNavigation/HistoryManager.ts index df69b2920..4cf02c70c 100644 --- a/src/components/Navigation/ScopeNavigation/HistoryManager.ts +++ b/src/components/Navigation/ScopeNavigation/HistoryManager.ts @@ -1,4 +1,3 @@ -import { View } from "../../Main/types"; import { Environment, Scope } from "../../common/App/types"; const MAX_STEPS = 15; @@ -6,13 +5,13 @@ const MAX_STEPS = 15; export interface HistoryStep { scope: Scope; environment?: Environment | null; - tabId: View | string | null; + tabId: string | null; } export interface UpdateStepParams { scope?: Scope; environment?: Environment | null; - tabId?: View; + tabId?: string; } export interface HistoryData { diff --git a/src/components/Navigation/ScopeNavigation/types.ts b/src/components/Navigation/ScopeNavigation/types.ts index 5af7ec0e9..6bc3e6522 100644 --- a/src/components/Navigation/ScopeNavigation/types.ts +++ b/src/components/Navigation/ScopeNavigation/types.ts @@ -1,5 +1,3 @@ -import { View } from "../../Main/types"; - export interface ScopeNavigationProps { - currentTabId: View; + currentTabId: string; } diff --git a/src/components/Navigation/Tabs/Tabs.stories.tsx b/src/components/Navigation/Tabs/Tabs.stories.tsx index a7b46eac4..75b5b0ad1 100644 --- a/src/components/Navigation/Tabs/Tabs.stories.tsx +++ b/src/components/Navigation/Tabs/Tabs.stories.tsx @@ -1,6 +1,7 @@ import { Meta, StoryObj } from "@storybook/react"; import { Tabs } from "."; +import { ROUTES } from "../../../constants"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { @@ -22,7 +23,7 @@ export const Default: Story = { tabs: [ { title: "", - id: "/highlights", + id: ROUTES.HIGHLIGHTS, isSelected: true, isDisabled: false, hasNewData: false, @@ -30,8 +31,8 @@ export const Default: Story = { cardName: "highlights" }, { - title: "Insights", - id: "/insights", + title: "Issues", + id: ROUTES.INSIGHTS, isSelected: false, isDisabled: false, hasNewData: false, @@ -40,16 +41,25 @@ export const Default: Story = { }, { title: "Assets", - id: "/assets", + id: ROUTES.ASSETS, isSelected: false, isDisabled: false, hasNewData: true, isHidden: false, cardName: "assets" }, + { + title: "Analytics", + id: ROUTES.ANALYTICS, + isSelected: false, + isDisabled: false, + hasNewData: false, + isHidden: false, + cardName: "insights" + }, { title: "Errors", - id: "/errors", + id: ROUTES.ERRORS, isSelected: false, isDisabled: false, hasNewData: false, @@ -58,7 +68,7 @@ export const Default: Story = { }, { title: "Tests", - id: "/tests", + id: ROUTES.TESTS, isSelected: false, isDisabled: true, hasNewData: false, diff --git a/src/components/Navigation/Tabs/index.tsx b/src/components/Navigation/Tabs/index.tsx index 245ad48af..fb75baac5 100644 --- a/src/components/Navigation/Tabs/index.tsx +++ b/src/components/Navigation/Tabs/index.tsx @@ -1,4 +1,5 @@ import { useContext } from "react"; +import { ROUTES } from "../../../constants"; import { isNumber } from "../../../typeGuards/isNumber"; import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent"; import { ConfigContext } from "../../common/App/ConfigContext"; @@ -11,7 +12,10 @@ import * as s from "./styles"; import { TabsProps } from "./types"; const getTabTooltipMessage = (tab: TabData, scope?: Scope) => { - if (!scope?.span && ["errors", "errorsDetails", "tests"].includes(tab.id)) { + if ( + !scope?.span && + [ROUTES.ERRORS, ROUTES.ERROR_DETAILS, ROUTES.TESTS].includes(tab.id) + ) { return "Global errors and tests is COMING SOON"; } @@ -21,9 +25,13 @@ const getTabTooltipMessage = (tab: TabData, scope?: Scope) => { const getIsTabDisabled = (tab: TabData, scope?: Scope) => { if ( !scope?.span && - ["highlights", "analytics", "errors", "errorsDetails", "tests"].includes( - tab.id - ) + [ + ROUTES.HIGHLIGHTS, + ROUTES.ANALYTICS, + ROUTES.ERRORS, + ROUTES.ERROR_DETAILS, + ROUTES.TESTS + ].includes(tab.id) ) { return true; } @@ -32,7 +40,7 @@ const getIsTabDisabled = (tab: TabData, scope?: Scope) => { }; const getTabIcon = (tab: TabData) => { - if (tab.id === "/highlights") { + if (tab.id === ROUTES.HIGHLIGHTS) { return ; } @@ -41,7 +49,7 @@ const getTabIcon = (tab: TabData) => { const getIsNewIndicatorVisible = (tab: TabData, config: ConfigContextData) => tab.hasNewData || - (tab.id === "/insights" + (tab.id === ROUTES.INSIGHTS ? config.insightStats && config.scope?.span?.spanCodeObjectId === config.insightStats.scope?.span.spanCodeObjectId @@ -52,7 +60,7 @@ const getIsNewIndicatorVisible = (tab: TabData, config: ConfigContextData) => : false); const getTabWidth = (tab: TabData) => { - if (tab.id === "/highlights") { + if (tab.id === ROUTES.HIGHLIGHTS) { return 40; } @@ -98,7 +106,7 @@ export const Tabs = (props: TabsProps) => { {tab.title} {isNewIndicatorVisible && } {config.scope?.hasErrors && - ["errorsDetails", "errors"].includes(tab.id) && ( + [ROUTES.ERRORS, ROUTES.ERROR_DETAILS].includes(tab.id) && ( )} diff --git a/src/components/Navigation/Tabs/types.ts b/src/components/Navigation/Tabs/types.ts index ebe521dfa..252318406 100644 --- a/src/components/Navigation/Tabs/types.ts +++ b/src/components/Navigation/Tabs/types.ts @@ -1,9 +1,8 @@ -import { View } from "../../Main/types"; import { TabData } from "../types"; export interface TabsProps { tabs: TabData[]; - onSelect: (tabId: View) => void; + onSelect: (tabId: string) => void; } export interface TabProps { diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx index 1ffe5d3aa..89dc3b1e2 100644 --- a/src/components/Navigation/index.tsx +++ b/src/components/Navigation/index.tsx @@ -1,5 +1,6 @@ import { useCallback, useContext, useEffect, useState } from "react"; import { actions as globalActions } from "../../actions"; +import { ROUTES } from "../../constants"; import { dispatcher } from "../../dispatcher"; import { usePrevious } from "../../hooks/usePrevious"; import { isNull } from "../../typeGuards/isNull"; @@ -11,7 +12,6 @@ import { } from "../../types"; import { sendUserActionTrackingEvent } from "../../utils/actions/sendUserActionTrackingEvent"; import { AsyncActionResultData } from "../InstallationWizard/types"; -import { View } from "../Main/types"; import { ConfigContext } from "../common/App/ConfigContext"; import { Environment, Scope } from "../common/App/types"; import { EnvironmentIcon } from "../common/EnvironmentIcon"; @@ -102,7 +102,7 @@ export const Navigation = () => { const [isAnnotationAdding, setIsAnnotationAdding] = useState(false); const previousCodeContext = usePrevious(codeContext); const previousEnv = usePrevious(config.environment); - const [currentTab, setCurrentTab] = useState("/insights"); + const [currentTab, setCurrentTab] = useState(ROUTES.INSIGHTS); const codeButtonTooltip = getCodeButtonTooltip(codeContext, config.scope); const isCodeButtonEnabled = codeContext && !isNull(codeContext.methodId); @@ -288,7 +288,7 @@ export const Navigation = () => { }); }; - const changeTab = (tabId: View) => { + const changeTab = (tabId: string) => { setCurrentTab(tabId); window.sendMessageToDigma({ action: globalActions.CHANGE_VIEW, diff --git a/src/components/Navigation/mockData.ts b/src/components/Navigation/mockData.ts index 32681f189..84325ac98 100644 --- a/src/components/Navigation/mockData.ts +++ b/src/components/Navigation/mockData.ts @@ -1,10 +1,11 @@ +import { ROUTES } from "../../constants"; import { SetViewsPayload } from "./types"; export const mockedViewsData: SetViewsPayload = { views: [ { title: "", - id: "/highlights", + id: ROUTES.HIGHLIGHTS, isSelected: true, isDisabled: false, hasNewData: false, @@ -17,7 +18,7 @@ export const mockedViewsData: SetViewsPayload = { hasNewData: false, isHidden: false, title: "Issues", - id: "/insights", + id: ROUTES.INSIGHTS, cardName: "insights" }, { @@ -26,7 +27,7 @@ export const mockedViewsData: SetViewsPayload = { hasNewData: false, isHidden: false, title: "Assets", - id: "/assets", + id: ROUTES.ASSETS, cardName: "assets" }, { @@ -35,7 +36,7 @@ export const mockedViewsData: SetViewsPayload = { hasNewData: false, isHidden: false, title: "Analytics", - id: "/analytics", + id: ROUTES.ANALYTICS, cardName: "analytics" }, { @@ -44,7 +45,7 @@ export const mockedViewsData: SetViewsPayload = { hasNewData: false, isHidden: false, title: "Errors", - id: "/errors", + id: ROUTES.ERRORS, cardName: "errors" }, { @@ -53,7 +54,7 @@ export const mockedViewsData: SetViewsPayload = { hasNewData: false, isHidden: true, title: "Error Details", - id: "/errors/details", + id: ROUTES.ERROR_DETAILS, cardName: "errors" }, { @@ -62,7 +63,7 @@ export const mockedViewsData: SetViewsPayload = { hasNewData: false, isHidden: false, title: "Tests", - id: "/tests", + id: ROUTES.TESTS, cardName: "tests" } ], diff --git a/src/components/Navigation/types.ts b/src/components/Navigation/types.ts index de99406d6..7f8603902 100644 --- a/src/components/Navigation/types.ts +++ b/src/components/Navigation/types.ts @@ -1,9 +1,8 @@ -import { View } from "../Main/types"; import { CodeDetails } from "../common/App/types"; export interface TabData { title: string; - id: View; + id: string; isSelected: boolean; isDisabled: boolean; hasNewData: boolean; diff --git a/src/constants.ts b/src/constants.ts index 818ca5c24..ec0c27298 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -26,3 +26,13 @@ export const PERCENTILES: { { label: "Median", percentile: 0.5, key: "p50" }, { label: "Slowest 5%", percentile: 0.95, key: "p95" } ]; + +export const ROUTES = { + HIGHLIGHTS: "/highlights", + INSIGHTS: "/insights", + ASSETS: "/assets", + ANALYTICS: "/analytics", + ERRORS: "/errors", + ERROR_DETAILS: "/errors/details", + TESTS: "/tests" +}; diff --git a/src/types.ts b/src/types.ts index 14b6cb505..21e67e45d 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,4 +1,3 @@ -import { View } from "./components/Main/types"; import { Duration } from "./globals"; export enum FeatureFlag {} @@ -81,6 +80,6 @@ export interface ChangeScopePayload { } export interface ChangeViewPayload { - view: View | string; + view: string; isUserAction?: boolean; }