Fix Assets filters rehydration, improve Select width management, add Global Errors filters persistence

src/components/Assets/AssetList/index.tsx

@@ -129,7 +129,12 @@ export const AssetList = ({
   );
   const listRef = useRef<HTMLUListElement>(null);
 
-  const { environment, backendInfo, scope } = useConfigSelector();
+  const {
+    environment,
+    backendInfo,
+    scope,
+    selectedServices: globallySelectedServices
+  } = useConfigSelector();
   const scopeSpanCodeObjectId = scope?.span?.spanCodeObjectId;
   const isServicesFilterEnabled = !scopeSpanCodeObjectId;
   const isInitialLoading = !data;
@@ -150,14 +155,15 @@ export const AssetList = ({
           ...(filters?.consumers ?? []),
           ...(filters?.internals ?? [])
         ],
-        services: scopeSpanCodeObjectId ? [] : filters?.services ?? [],
+        services: scopeSpanCodeObjectId ? [] : globallySelectedServices ?? [],
         directOnly: viewMode === "children"
       }
     }),
     [
       page,
       assetTypeId,
       filters,
+      globallySelectedServices,
       viewMode,
       scopeSpanCodeObjectId,
       search,
@@ -198,7 +204,8 @@ export const AssetList = ({
   const areAnyFiltersApplied = checkIfAnyFiltersApplied(
     filters,
     search,
-    isServicesFilterEnabled
+    isServicesFilterEnabled,
+    globallySelectedServices
   );
 
   useEffect(() => {

src/components/Assets/AssetTypeList/index.tsx

@@ -42,6 +42,7 @@ export const ASSET_TYPE_IDS = [
 
 const getData = (
   filters: AssetsFilters | null,
+  globallySelectedServices: string[] | null,
   searchQuery: string,
   viewMode: ViewMode,
   scopeSpanCodeObjectId?: string
@@ -59,7 +60,7 @@ const getData = (
             ...(filters?.consumers ?? []),
             ...(filters?.internals ?? [])
           ],
-          services: scopeSpanCodeObjectId ? [] : filters?.services ?? []
+          services: scopeSpanCodeObjectId ? [] : globallySelectedServices ?? []
         },
         ...(searchQuery.length > 0 ? { displayName: searchQuery } : {})
       }
@@ -84,7 +85,11 @@ export const AssetTypeList = ({
   const previousData = usePrevious(data);
   const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState<number>();
   const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp);
-  const { scope, environment } = useConfigSelector();
+  const {
+    scope,
+    environment,
+    selectedServices: globallySelectedServices
+  } = useConfigSelector();
   const scopeSpanCodeObjectId = scope?.span?.spanCodeObjectId;
   const previousScopeSpanCodeObjectId = usePrevious(scopeSpanCodeObjectId);
   const previousEnvironment = usePrevious(environment);
@@ -95,8 +100,15 @@ export const AssetTypeList = ({
   const isInitialLoading = !data;
 
   const refreshData = useCallback(
-    () => getData(filters, search, viewMode, scopeSpanCodeObjectId),
-    [filters, scopeSpanCodeObjectId, viewMode, search]
+    () =>
+      getData(
+        filters,
+        globallySelectedServices,
+        search,
+        viewMode,
+        scopeSpanCodeObjectId
+      ),
+    [filters, globallySelectedServices, scopeSpanCodeObjectId, viewMode, search]
   );
 
   useEffect(() => {
@@ -106,7 +118,8 @@ export const AssetTypeList = ({
   const areAnyFiltersApplied = checkIfAnyFiltersApplied(
     filters,
     search,
-    isServicesFilterEnabled
+    isServicesFilterEnabled,
+    globallySelectedServices
   );
 
   useEffect(() => {

src/components/Assets/AssetsFilter/index.tsx

@@ -240,23 +240,23 @@ export const AssetsFilter = () => {
   ]);
 
   const discardChanges = useCallback(() => {
-    setSelectedServices(filters?.services ?? []);
+    setSelectedServices(globallySelectedServices ?? []);
     setSelectedEndpoints(filters?.endpoints ?? []);
     setSelectedConsumers(filters?.consumers ?? []);
     setSelectedInternals(filters?.internals ?? []);
     setSelectedInsights((filters?.insights as InsightType[]) ?? []);
 
     getData({
       ...query,
-      services: filters?.services ?? [],
+      services: globallySelectedServices ?? [],
       operations: [
         ...(filters?.endpoints ?? []),
         ...(filters?.consumers ?? []),
         ...(filters?.internals ?? [])
       ],
       insights: (filters?.insights as InsightType[]) ?? []
     });
-  }, [filters, query]);
+  }, [globallySelectedServices, filters, query]);
 
   // Close popup on environment or scope changes
   useEffect(() => {
@@ -423,7 +423,7 @@ export const AssetsFilter = () => {
 
   const appliedFiltersCount = filters
     ? [
-        ...(isServicesFilterEnabled ? filters.services : []),
+        ...(isServicesFilterEnabled ? globallySelectedServices ?? [] : []),
         ...filters.endpoints,
         ...filters.consumers,
         ...filters.internals,

src/components/Assets/index.tsx

@@ -78,10 +78,17 @@ export const Assets = () => {
   useEffect(() => {
     if (
       isUndefined(previousPersistedFilters) &&
-      !isUndefined(persistedFilters) &&
-      persistedFilters
+      !isUndefined(persistedFilters)
     ) {
-      setFilters(persistedFilters);
+      setFilters(
+        persistedFilters ?? {
+          services: [],
+          endpoints: [],
+          consumers: [],
+          internals: [],
+          insights: []
+        }
+      );
     }
   }, [previousPersistedFilters, persistedFilters, setFilters]);
 
@@ -217,7 +224,6 @@ export const Assets = () => {
           </>
         )}
       </s.Header>
-
       {renderContent()}
     </s.Container>
   );

src/components/Assets/utils.tsx

@@ -55,7 +55,8 @@ export const getAssetTypeInfo = (
 export const checkIfAnyFiltersApplied = (
   filters: AssetsFilters | null,
   searchQuery: string,
-  isServicesFilterEnabled: boolean
+  isServicesFilterEnabled: boolean,
+  globallySelectedServices: string[] | null
 ) =>
   Boolean(
     filters &&
@@ -64,6 +65,6 @@ export const checkIfAnyFiltersApplied = (
         ...filters.endpoints,
         ...filters.consumers,
         ...filters.internals,
-        ...(isServicesFilterEnabled ? filters.services : [])
+        ...(isServicesFilterEnabled ? globallySelectedServices ?? [] : [])
       ].length > 0
   ) || searchQuery.length > 0;

src/components/Dashboard/MetricsReport/Header/index.tsx

@@ -311,6 +311,8 @@ export const Header = ({ onGoBack }: HeaderProps) => {
                   selected: selectedEndpoints.includes(x.spanCodeObjectId)
                 })) ?? []
               }
+              useShift={false}
+              sameWidth={false}
               showSelectedState={true}
               multiselect={true}
               icon={WrenchIcon}

src/components/Errors/GlobalErrorsList/GlobalErrorsFilters/getFiltersOptions.ts

@@ -0,0 +1,96 @@
+import { fetchData } from "../../../../utils/fetchData";
+import { actions } from "../../actions";
+import {
+  EndpointFilterData,
+  GetGlobalErrorsFiltersDataPayload,
+  SetGlobalErrorsFiltersDataPayload
+} from "./types";
+
+export interface FiltersOptions {
+  services: string[];
+  endpoints: EndpointFilterData[];
+  errorTypes: string[];
+}
+
+const toFiltersOptions = (
+  filtersData: SetGlobalErrorsFiltersDataPayload
+): Partial<FiltersOptions> => {
+  const servicesData = filtersData.filters.find(
+    (filter) => filter.filterName === "Services"
+  );
+
+  const endpointsData = filtersData.filters.find(
+    (filter) => filter.filterName === "Endpoints"
+  );
+
+  const errorTypesData = filtersData.filters.find(
+    (filter) => filter.filterName === "ErrorTypes"
+  );
+
+  return {
+    ...(servicesData ? { services: servicesData.values as string[] } : {}),
+    ...(endpointsData
+      ? { endpoints: endpointsData.values as EndpointFilterData[] }
+      : {}),
+    ...(errorTypesData ? { errorTypes: errorTypesData.values as string[] } : {})
+  };
+};
+
+const fetcherConfig = {
+  requestAction: actions.GET_GLOBAL_ERRORS_FILTERS_DATA,
+  responseAction: actions.SET_GLOBAL_ERRORS_FILTERS_DATA
+};
+
+export const getFiltersOptions = async (
+  environmentId: string,
+  selectedServices: string[],
+  selectedEndpoints: string[]
+): Promise<{
+  services: string[];
+  endpoints: EndpointFilterData[];
+  errorTypes: string[];
+}> => {
+  const servicesData = await fetchData<
+    GetGlobalErrorsFiltersDataPayload,
+    SetGlobalErrorsFiltersDataPayload
+  >(fetcherConfig, {
+    environment: environmentId
+  });
+
+  const endpointsData =
+    selectedServices && selectedServices.length > 0
+      ? await fetchData<
+          GetGlobalErrorsFiltersDataPayload,
+          SetGlobalErrorsFiltersDataPayload
+        >(fetcherConfig, {
+          environment: environmentId,
+          filterName: "Services",
+          filterData: {
+            values: selectedServices
+          }
+        })
+      : undefined;
+
+  const errorTypesData =
+    selectedEndpoints && selectedEndpoints.length > 0
+      ? await fetchData<
+          GetGlobalErrorsFiltersDataPayload,
+          SetGlobalErrorsFiltersDataPayload
+        >(fetcherConfig, {
+          environment: environmentId,
+          filterName: "Endpoints",
+          filterData: {
+            values: selectedEndpoints,
+            services: selectedServices
+          }
+        })
+      : undefined;
+
+  const filtersOptions: FiltersOptions = {
+    ...(toFiltersOptions(servicesData) as FiltersOptions),
+    ...(endpointsData ? toFiltersOptions(endpointsData) : {}),
+    ...(errorTypesData ? toFiltersOptions(errorTypesData) : {})
+  };
+
+  return filtersOptions;
+};