Support links to Span/Error in Web Admin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "digma-ui",
-  "version": "16.2.1",
+  "version": "16.3.0-alpha.3",
   "description": "Digma UI",
   "scripts": {
     "lint:eslint": "eslint --cache .",

src/components/Admin/ErrorLinkResolver/index.tsx

@@ -0,0 +1,52 @@
+import { Navigate, useParams } from "react-router";
+import { useGetErrorEnvironmentQuery } from "../../../redux/services/digma";
+import { Spinner } from "../../common/v3/Spinner";
+import { TAB_IDS } from "../../Navigation/Tabs/types";
+import type { TabLocation } from "../common/RepositorySidebarOverlay/types";
+import * as s from "./styles";
+
+const REFRESH_INTERVAL = 10 * 1000; // in milliseconds
+
+export const ErrorLinkResolver = () => {
+  const params = useParams();
+
+  const { data } = useGetErrorEnvironmentQuery(
+    {
+      id: params.id ?? ""
+    },
+    {
+      skip: !params.id,
+      pollingInterval: REFRESH_INTERVAL
+    }
+  );
+
+  if (!data) {
+    return (
+      <s.Container>
+        <s.LoadingContainer>
+          <Spinner size={50} />
+        </s.LoadingContainer>
+      </s.Container>
+    );
+  }
+
+  const sidebarLocation: TabLocation = {
+    id: TAB_IDS.ERRORS,
+    path: params.id
+  };
+
+  if (data) {
+    return (
+      <Navigate
+        replace={true}
+        to={{
+          pathname: "/home",
+          search: new URLSearchParams({
+            environment: data.environmentId,
+            "sidebar-view": JSON.stringify(sidebarLocation)
+          }).toString()
+        }}
+      />
+    );
+  }
+};

src/components/Admin/ErrorLinkResolver/styles.ts

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  height: 100%;
+`;
+
+export const LoadingContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+`;

src/components/Admin/Header/index.tsx

@@ -16,6 +16,16 @@ export const Header = () => (
           </HeaderContent>
         }
       />
+      <Route path={"navigate"}>
+        <Route
+          path={"*"}
+          element={
+            <HeaderContent>
+              <Greeting />
+            </HeaderContent>
+          }
+        />
+      </Route>
       <Route path={"reports"}>
         <Route
           path={"*"}

src/components/Admin/Home/index.tsx

@@ -5,18 +5,37 @@ import {
 } from "../../../containers/Admin/hooks";
 import { useMount } from "../../../hooks/useMount";
 import { useStableSearchParams } from "../../../hooks/useStableSearchParams";
+import { useGetSpanByIdQuery } from "../../../redux/services/digma";
 import { InsightsSortingCriterion } from "../../../redux/services/types";
 import {
   setSelectedEnvironmentId,
   setSelectedServices
 } from "../../../redux/slices/issuesReportSlice";
 import { RepositorySidebarOverlay } from "../common/RepositorySidebarOverlay";
-import type { RepositorySidebarQuery } from "../common/RepositorySidebarOverlay/types";
+import type {
+  RepositorySidebarQuery,
+  TabLocation
+} from "../common/RepositorySidebarOverlay/types";
 import { Environments } from "./Environments";
 import { Overview } from "./Overview";
 import { Reports } from "./Reports";
 import * as s from "./styles";
 
+const getRepositorySidebarLocation = (
+  locationParam: string | null
+): TabLocation | undefined => {
+  if (!locationParam) {
+    return undefined;
+  }
+
+  try {
+    const parsedLocation = JSON.parse(locationParam) as TabLocation;
+    return parsedLocation;
+  } catch {
+    return undefined;
+  }
+};
+
 export const Home = () => {
   const environmentId = useAdminSelector(
     (state) => state.codeIssuesReport.selectedEnvironmentId
@@ -29,11 +48,26 @@ export const Home = () => {
   const [searchParams, setSearchParams] = useStableSearchParams();
   const environmentParam = searchParams.get("environment");
   const issuesParam = searchParams.get("issues");
+  const [sidebarScope, setSidebarScope] = useState(
+    searchParams.get("sidebar-scope") ?? undefined
+  );
+  const [sidebarLocation, setSidebarLocation] = useState(
+    getRepositorySidebarLocation(searchParams.get("sidebar-view"))
+  );
   const servicesParam = useMemo(
     () => searchParams.getAll("services"),
     [searchParams]
   );
 
+  const { data: spanInfo } = useGetSpanByIdQuery(
+    {
+      id: sidebarScope ?? ""
+    },
+    {
+      skip: !sidebarScope
+    }
+  );
+
   const queries: Record<string, RepositorySidebarQuery> = useMemo(
     () => ({
       "top-criticality": {
@@ -64,6 +98,8 @@ export const Home = () => {
 
   const handleRepositorySidebarClose = () => {
     setIssuesQuery(undefined);
+    setSidebarScope(undefined);
+    setSidebarLocation(undefined);
   };
 
   // TODO: replace with useEffect
@@ -112,7 +148,48 @@ export const Home = () => {
     });
   }, [setSearchParams, issuesQuery]);
 
-  const repositorySidebarQuery = issuesQuery ? queries[issuesQuery] : undefined;
+  useEffect(() => {
+    setSearchParams((params) => {
+      if (sidebarScope) {
+        params.set("sidebar-scope", sidebarScope);
+      } else {
+        params.delete("sidebar-scope");
+      }
+      return params;
+    });
+  }, [setSearchParams, sidebarScope]);
+
+  useEffect(() => {
+    setSearchParams((params) => {
+      if (sidebarLocation) {
+        params.set("sidebar-view", JSON.stringify(sidebarLocation));
+      } else {
+        params.delete("sidebar-view");
+      }
+      return params;
+    });
+  }, [setSearchParams, sidebarLocation]);
+
+  const repositorySidebarQuery: RepositorySidebarQuery | undefined =
+    sidebarScope && spanInfo
+      ? {
+          query: {
+            environment: environmentId ?? undefined,
+            scopedSpanCodeObjectId: spanInfo?.spanCodeObjectId
+          }
+        }
+      : sidebarLocation
+      ? {
+          query: {
+            environment: environmentId ?? undefined
+          }
+        }
+      : issuesQuery
+      ? queries[issuesQuery]
+      : undefined;
+  const isRepositorySidebarOpen = Boolean(
+    repositorySidebarQuery ?? sidebarLocation
+  );
 
   return (
     <s.Container>
@@ -124,7 +201,8 @@ export const Home = () => {
       <Environments />
       <RepositorySidebarOverlay
         sidebarQuery={repositorySidebarQuery}
-        isSidebarOpen={Boolean(repositorySidebarQuery)}
+        sidebarLocation={sidebarLocation}
+        isSidebarOpen={isRepositorySidebarOpen}
         onSidebarClose={handleRepositorySidebarClose}
       />
     </s.Container>

src/components/Admin/SpanLinkResolver/index.tsx

@@ -0,0 +1,52 @@
+import { Navigate, useParams } from "react-router";
+import { useGetSpanByIdQuery } from "../../../redux/services/digma";
+import { Spinner } from "../../common/v3/Spinner";
+import { TAB_IDS } from "../../Navigation/Tabs/types";
+import type { TabLocation } from "../common/RepositorySidebarOverlay/types";
+import * as s from "./styles";
+
+const REFRESH_INTERVAL = 10 * 1000; // in milliseconds
+
+export const SpanLinkResolver = () => {
+  const params = useParams();
+
+  const { data } = useGetSpanByIdQuery(
+    {
+      id: params.id ?? ""
+    },
+    {
+      skip: !params.id,
+      pollingInterval: REFRESH_INTERVAL
+    }
+  );
+
+  if (!data) {
+    return (
+      <s.Container>
+        <s.LoadingContainer>
+          <Spinner size={50} />
+        </s.LoadingContainer>
+      </s.Container>
+    );
+  }
+
+  const sidebarLocation: TabLocation = {
+    id: TAB_IDS.ISSUES
+  };
+
+  if (data) {
+    return (
+      <Navigate
+        replace={true}
+        to={{
+          pathname: "/home",
+          search: new URLSearchParams({
+            environment: data.environmentId,
+            "sidebar-scope": params.id ?? "",
+            "sidebar-view": JSON.stringify(sidebarLocation)
+          }).toString()
+        }}
+      />
+    );
+  }
+};

src/components/Admin/SpanLinkResolver/styles.ts

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  height: 100%;
+`;
+
+export const LoadingContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+`;

src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Issues/index.tsx

@@ -10,6 +10,7 @@ import {
   setIssuesInsightInfoToOpenTicket,
   setScope
 } from "../../../../../../redux/slices/repositorySlice";
+import { initialState } from "../../../../../../store/insights/insightsSlice";
 import { useStore } from "../../../../../../store/useStore";
 import { useInsightsData } from "../../../../../Insights/hooks/useInsightsData";
 import { InsightsContent } from "../../../../../Insights/InsightsContent";
@@ -24,7 +25,7 @@ export const Issues = ({
   onScopeChange,
   onGoToTab
 }: IssuesProps) => {
-  const { setInsightViewType } = useStore.getState();
+  const { setInsightViewType, setInsightsSorting } = useStore.getState();
   const [isDrawerTransitioning, setIsDrawerTransitioning] = useState(false);
   const drawerRef = useRef<HTMLDivElement>(null);
   const dispatch = useAdminDispatch();
@@ -110,6 +111,14 @@ export const Issues = ({
     );
   }, [query, dispatch]);
 
+  // Set sorting on query change
+  useEffect(() => {
+    setInsightsSorting({
+      criterion: query?.sortBy ?? initialState.sorting.criterion,
+      order: query?.sortOrder ?? initialState.sorting.order
+    });
+  }, [query?.sortBy, query?.sortOrder, setInsightsSorting]);
+
   return (
     <s.Container>
       <InsightsContent

src/components/Admin/common/RepositorySidebarOverlay/index.tsx

@@ -55,11 +55,13 @@ export const RepositorySidebarOverlay = ({
   isSidebarOpen,
   onSidebarClose,
   sidebarQuery,
-  scopeDisplayName
+  scopeDisplayName,
+  sidebarLocation
 }: RepositorySidebarOverlayProps) => {
   const [isSidebarTransitioning, setIsSidebarTransitioning] = useState(false);
-  const [currentTabLocation, setCurrentTabLocation] =
-    useState<TabLocation>(initialTabLocation);
+  const [currentTabLocation, setCurrentTabLocation] = useState<TabLocation>(
+    sidebarLocation ?? initialTabLocation
+  );
   const [currentSpanCodeObjectId, setCurrentSpanCodeObjectId] = useState(
     sidebarQuery?.query?.scopedSpanCodeObjectId
   );
@@ -155,10 +157,10 @@ export const RepositorySidebarOverlay = ({
       },
       {
         spanCodeObjectId: newSpanCodeObjectId,
-        tabLocation: { id: TAB_IDS.ISSUES }
+        tabLocation: sidebarLocation ?? { id: TAB_IDS.ISSUES }
       }
     );
-  }, [history, sidebarQuery?.query?.scopedSpanCodeObjectId]);
+  }, [history, sidebarQuery?.query?.scopedSpanCodeObjectId, sidebarLocation]);
 
   const handleSidebarClose = useCallback(() => {
     dispatch(clear());

src/components/Admin/common/RepositorySidebarOverlay/types.ts

@@ -8,6 +8,7 @@ export interface RepositorySidebarOverlayProps {
   isSidebarOpen: boolean;
   onSidebarClose: () => void;
   sidebarQuery?: RepositorySidebarQuery;
+  sidebarLocation?: TabLocation;
   scopeDisplayName?: string;
 }