Fix filters

.vscode/launch.json

@@ -8,14 +8,14 @@
       "type": "chrome",
       "request": "launch",
       "name": "Open Admin in Chrome",
-      "url": "http://localhost:3000/admin/",
+      "url": "http://localhost:3001/admin/",
       "webRoot": "${workspaceFolder}"
     },
     {
       "type": "chrome",
       "request": "launch",
       "name": "Open Agentic in Chrome",
-      "url": "http://localhost:3000/agentic/",
+      "url": "http://localhost:3001/agentic/",
       "webRoot": "${workspaceFolder}"
     }
   ]

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

@@ -1,18 +1,11 @@
 import { useEffect } from "react";
-import { useAdminDispatch } from "../../../../../../containers/Admin/hooks";
-import { setScope } from "../../../../../../redux/slices/repositorySlice";
 import { useStore } from "../../../../../../store/useStore";
 import { useInsightsData } from "../../../../../Insights/hooks/useInsightsData";
 import * as s from "./styles";
 import type { AnalyticsProps } from "./types";
 
-export const Analytics = ({
-  query,
-  onScopeChange,
-  onGoToTab
-}: AnalyticsProps) => {
+export const Analytics = ({ onScopeChange, onGoToTab }: AnalyticsProps) => {
   const { setInsightViewType } = useStore.getState();
-  const dispatch = useAdminDispatch();
   const { data, isLoading, refresh } = useInsightsData();
 
   const handleRefresh = () => {
@@ -24,32 +17,6 @@ export const Analytics = ({
     setInsightViewType("Analytics");
   }, [setInsightViewType]);
 
-  // Set the scope on query change
-  useEffect(() => {
-    dispatch(
-      setScope({
-        span: query?.scopedSpanCodeObjectId
-          ? {
-              spanCodeObjectId: query.scopedSpanCodeObjectId,
-              displayName: "",
-              methodId: null,
-              serviceName: null,
-              role: null
-            }
-          : null,
-        code: {
-          relatedCodeDetailsList: [],
-          codeDetailsList: []
-        },
-        hasErrors: false,
-        issuesInsightsCount: 0,
-        analyticsInsightsCount: 0,
-        unreadInsightsCount: 0,
-        environmentId: query?.environment
-      })
-    );
-  }, [query, dispatch]);
-
   return (
     <s.Content
       data={data}

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

@@ -1,8 +1,6 @@
-import type { GetIssuesPayload } from "../../../../../../redux/services/types";
 import type { ChangeScopePayload } from "../../../../../../utils/actions/changeScope";
 
 export interface AnalyticsProps {
-  query?: GetIssuesPayload;
   onScopeChange: (payload: ChangeScopePayload) => void;
   onGoToTab: (tabId: string) => void;
 }

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

@@ -10,12 +10,12 @@ import {
   SortingOrder,
   type AssetType
 } from "../../../../../../redux/services/types";
+import { useConfigSelector } from "../../../../../../store/config/useConfigSelector";
 import type { Sorting } from "../../../../../common/SortingSelector/types";
 import * as s from "./styles";
 import type { AssetsProps } from "./types";
 
 export const Assets = ({
-  query,
   onScopeChange,
   selectedAssetTypeId,
   onSelectedAssetTypeIdChange
@@ -24,17 +24,13 @@ export const Assets = ({
     criterion: AssetsSortingCriterion.CriticalInsights,
     order: SortingOrder.Desc
   });
+  const { selectedServices, scope, environment } = useConfigSelector();
 
   const dispatch = useAdminDispatch();
 
   const { data: about } = useGetAboutQuery();
   const { data: environments } = useGetEnvironmentsQuery();
 
-  const environment = useMemo(
-    () => environments?.find((x) => x.id === query?.environment),
-    [environments, query?.environment]
-  );
-
   const isImpactHidden = useMemo(
     () => !(about?.isCentralize && environment?.type === "Public"),
     [about?.isCentralize, environment?.type]
@@ -58,9 +54,9 @@ export const Assets = ({
 
   return (
     <s.Content
-      environmentId={query?.environment}
-      spanCodeObjectId={query?.scopedSpanCodeObjectId}
-      services={query?.services}
+      environmentId={environment?.id}
+      spanCodeObjectId={scope?.span?.spanCodeObjectId}
+      services={selectedServices ?? undefined}
       sorting={sorting}
       setSorting={setSorting}
       onScopeChange={onScopeChange}

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

@@ -1,11 +1,7 @@
-import type {
-  AssetType,
-  GetIssuesPayload
-} from "../../../../../../redux/services/types";
+import type { AssetType } from "../../../../../../redux/services/types";
 import type { ChangeScopePayload } from "../../../../../../utils/actions/changeScope";
 
 export interface AssetsProps {
-  query?: GetIssuesPayload;
   onScopeChange: (payload: ChangeScopePayload) => void;
   selectedAssetTypeId?: AssetType;
   onSelectedAssetTypeIdChange: (assetTypeId?: AssetType) => void;

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

@@ -1,15 +1,16 @@
 import { useGetAboutQuery } from "../../../../../../redux/services/digma";
+import { useConfigSelector } from "../../../../../../store/config/useConfigSelector";
 import * as s from "./styles";
 import type { ErrorsProps } from "./types";
 
 export const Errors = ({
-  query,
   onGoToAssets,
   onScopeChange,
   selectedErrorId,
   onSelectedErrorIdChange
 }: ErrorsProps) => {
   const { data: about } = useGetAboutQuery();
+  const { selectedServices, scope, environment } = useConfigSelector();
 
   const handleGoToErrors = () => {
     onSelectedErrorIdChange(undefined);
@@ -24,11 +25,11 @@ export const Errors = ({
       onGoToAssets={onGoToAssets}
       onGoToErrors={handleGoToErrors}
       onErrorSelect={handleErrorSelect}
-      spanCodeObjectId={query?.scopedSpanCodeObjectId}
-      environmentId={query?.environment}
+      spanCodeObjectId={scope?.span?.spanCodeObjectId}
+      environmentId={environment?.id}
       errorId={selectedErrorId}
       backendInfo={about}
-      selectedServices={query?.services ?? undefined}
+      selectedServices={selectedServices ?? undefined}
       onScopeChange={onScopeChange}
     />
   );

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

@@ -7,8 +7,7 @@ import {
 import { setIsInsightJiraTicketHintShown } from "../../../../../../redux/slices/persistSlice";
 import {
   setIssuesInsightIdToOpenSuggestion,
-  setIssuesInsightInfoToOpenTicket,
-  setScope
+  setIssuesInsightInfoToOpenTicket
 } from "../../../../../../redux/slices/repositorySlice";
 import { initialState } from "../../../../../../store/insights/insightsSlice";
 import { useStore } from "../../../../../../store/useStore";
@@ -85,32 +84,6 @@ export const Issues = ({
     setInsightViewType("Issues");
   }, [setInsightViewType]);
 
-  // Set the scope on query change
-  useEffect(() => {
-    dispatch(
-      setScope({
-        span: query?.scopedSpanCodeObjectId
-          ? {
-              spanCodeObjectId: query.scopedSpanCodeObjectId,
-              displayName: "",
-              methodId: null,
-              serviceName: null,
-              role: null
-            }
-          : null,
-        code: {
-          relatedCodeDetailsList: [],
-          codeDetailsList: []
-        },
-        hasErrors: false,
-        issuesInsightsCount: 0,
-        analyticsInsightsCount: 0,
-        unreadInsightsCount: 0,
-        environmentId: query?.environment
-      })
-    );
-  }, [query, dispatch]);
-
   // Set sorting on query change
   useEffect(() => {
     setInsightsSorting({

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

@@ -19,7 +19,8 @@ import type {
 import {
   clear,
   setIssuesInsightIdToOpenSuggestion,
-  setIssuesInsightInfoToOpenTicket
+  setIssuesInsightInfoToOpenTicket,
+  setScope
 } from "../../../../redux/slices/repositorySlice";
 import { useStore } from "../../../../store/useStore";
 import { isString } from "../../../../typeGuards/isString";
@@ -76,12 +77,10 @@ export const RepositorySidebarOverlay = ({
     resetAssets,
     resetGlobalErrors,
     setSelectedServices,
-    clearInsightsFilters,
-    setInsightsFilteredInsightTypes,
-    setInsightsFilteredInsightTypesInGlobalScope,
     setInsightsFilteredCriticalityLevels,
     setInsightsFilteredCriticalityLevelsInGlobalScope,
-    setInsightsLastDays
+    setInsightsLastDays,
+    setGlobalErrorsLastDays
   } = useStore.getState();
   const dispatch = useAdminDispatch();
   const [history, setHistory] = useState(
@@ -223,14 +222,47 @@ export const RepositorySidebarOverlay = ({
     dispatch
   ]);
 
+  // Set the scope and environment on sidebar open
+  useEffect(() => {
+    if (isSidebarOpen) {
+      dispatch(
+        setScope({
+          span: currentSpanCodeObjectId
+            ? {
+                spanCodeObjectId: currentSpanCodeObjectId,
+                displayName: "",
+                methodId: null,
+                serviceName: null,
+                role: null
+              }
+            : null,
+          code: {
+            relatedCodeDetailsList: [],
+            codeDetailsList: []
+          },
+          hasErrors: false,
+          issuesInsightsCount: 0,
+          analyticsInsightsCount: 0,
+          unreadInsightsCount: 0,
+          environmentId: sidebarQuery?.query?.environment
+        })
+      );
+    }
+  }, [
+    isSidebarOpen,
+    sidebarQuery?.query?.environment,
+    currentSpanCodeObjectId,
+    dispatch
+  ]);
+
   // Set selected services on sidebar open
   useEffect(() => {
     if (isSidebarOpen) {
       setSelectedServices(sidebarQuery?.query?.services ?? []);
     }
   }, [isSidebarOpen, sidebarQuery?.query?.services, setSelectedServices]);
 
-  // Set selected criticality levels on sidebar open
+  // Set insights criticality levels on sidebar open
   useEffect(() => {
     if (isSidebarOpen) {
       setInsightsFilteredCriticalityLevels(
@@ -251,25 +283,13 @@ export const RepositorySidebarOverlay = ({
   useEffect(() => {
     if (isSidebarOpen) {
       setInsightsLastDays(sidebarQuery?.query?.lastDays ?? null);
-    }
-  }, [isSidebarOpen, sidebarQuery?.query?.lastDays, setInsightsLastDays]);
-
-  // Clear issues and analytics filters on sidebar close
-  useEffect(() => {
-    if (!isSidebarOpen) {
-      clearInsightsFilters();
-      setInsightsFilteredInsightTypes([]);
-      setInsightsFilteredInsightTypesInGlobalScope([]);
-      setInsightsFilteredCriticalityLevels([]);
-      setInsightsFilteredCriticalityLevelsInGlobalScope([]);
+      setGlobalErrorsLastDays(sidebarQuery?.query?.lastDays ?? null);
     }
   }, [
     isSidebarOpen,
-    clearInsightsFilters,
-    setInsightsFilteredInsightTypes,
-    setInsightsFilteredInsightTypesInGlobalScope,
-    setInsightsFilteredCriticalityLevels,
-    setInsightsFilteredCriticalityLevelsInGlobalScope
+    sidebarQuery?.query?.lastDays,
+    setInsightsLastDays,
+    setGlobalErrorsLastDays
   ]);
 
   const handleSidebarTransitionStart = () => {
@@ -411,7 +431,6 @@ export const RepositorySidebarOverlay = ({
       case TAB_IDS.ASSETS:
         return (
           <Assets
-            query={currentQuery}
             onScopeChange={handleScopeChange}
             selectedAssetTypeId={
               currentTabLocation.path as AssetType | undefined
@@ -423,7 +442,6 @@ export const RepositorySidebarOverlay = ({
         return (
           <Analytics
             onScopeChange={handleScopeChange}
-            query={currentQuery}
             onGoToTab={handleGoToTab}
           />
         );

src/components/Dashboard/MetricsReport/index.tsx

@@ -1,9 +1,8 @@
-import { useLayoutEffect } from "react";
+import { useEffect, useLayoutEffect, useMemo } from "react";
 import {
   useDashboardDispatch,
   useDashboardSelector
 } from "../../../containers/Dashboard/hooks";
-import { useMount } from "../../../hooks/useMount";
 import {
   type EndpointData,
   type IssueCriticality
@@ -27,6 +26,7 @@ import { ScopeChangeEvent } from "../../../types";
 import { changeScope } from "../../../utils/actions/changeScope";
 import { IssuesReport } from "../../common/IssuesReport";
 import type { TargetScope } from "../../common/IssuesReport/types";
+import { sortEnvironments } from "../../common/IssuesReport/utils";
 import { DigmaLogoIcon } from "../../common/icons/16px/DigmaLogoIcon";
 import { actions } from "../actions";
 import * as s from "./styles";
@@ -61,18 +61,36 @@ export const MetricsReport = () => {
 
   const dispatch = useDashboardDispatch();
 
+  const sortedEnvironments = useMemo(
+    () => (environments ? sortEnvironments(environments) : undefined),
+    [environments]
+  );
+
   useLayoutEffect(() => {
     window.sendMessageToDigma({
       action: actions.INITIALIZE
     });
   }, []);
 
-  // TODO: replace with useEffect
-  useMount(() => {
-    if (isString(window.dashboardEnvironment)) {
+  useEffect(() => {
+    if (
+      isString(window.dashboardEnvironment) &&
+      selectedEnvironmentId !== window.dashboardEnvironment
+    ) {
       dispatch(setSelectedEnvironmentId(window.dashboardEnvironment));
     }
-  });
+  }, [dispatch, selectedEnvironmentId]);
+
+  useEffect(() => {
+    if (
+      sortedEnvironments &&
+      sortedEnvironments.length > 0 &&
+      !selectedEnvironmentId &&
+      !isString(window.dashboardEnvironment)
+    ) {
+      dispatch(setSelectedEnvironmentId(sortedEnvironments[0].id));
+    }
+  }, [sortedEnvironments, selectedEnvironmentId, dispatch]);
 
   const goToEndpointIssues = ({
     spanCodeObjectId,