Feature/home filters

.github/workflows/build.yml

@@ -3,7 +3,7 @@ name: Lint & build
 on:
   push:
     branches: ["main"]
-    # Github Actions do not support YAML anchors yet,so we have to repeat
+    # Github Actions don't support YAML anchors yet, so we have to repeat
     # the paths-ignore in both push and pull_request events.
     # More info: https://github.com/actions/runner/issues/1182
     paths-ignore:

src/actions.ts

@@ -20,7 +20,6 @@ export const actions = addPrefix(ACTION_PREFIX, {
   OPEN_DOCUMENTATION: "OPEN_DOCUMENTATION",
   SET_DIGMA_API_URL: "SET_DIGMA_API_URL",
   SET_USER_REGISTRATION_EMAIL: "SET_USER_REGISTRATION_EMAIL",
-  SET_ENVIRONMENT: "SET_ENVIRONMENT",
   SET_IS_OBSERVABILITY_ENABLED: "SET_IS_OBSERVABILITY_ENABLED",
   SET_OBSERVABILITY: "SET_OBSERVABILITY",
   GET_BACKEND_INFO: "GET_BACKEND_INFO",

src/components/Assets/AssetList/AssetList.stories.tsx

@@ -38,7 +38,6 @@ const mockedConfig: ConfigContextData = {
 
 export const Default: Story = {
   args: {
-    searchQuery: "",
     setRefresher: () => {
       return undefined;
     },
@@ -64,7 +63,6 @@ export const WithPerformanceImpact: Story = {
     )
   ],
   args: {
-    searchQuery: "",
     setRefresher: () => {
       return undefined;
     },

src/components/Assets/AssetList/index.tsx

@@ -3,6 +3,7 @@ import { DefaultTheme, useTheme } from "styled-components";
 import { DigmaMessageError } from "../../../api/types";
 import { dispatcher } from "../../../dispatcher";
 import { usePrevious } from "../../../hooks/usePrevious";
+import { useAssetsSelector } from "../../../store/assets/useAssetsSelector";
 import { useConfigSelector } from "../../../store/config/useConfigSelector";
 import { useStore } from "../../../store/useStore";
 import { isEnvironment } from "../../../typeGuards/isEnvironment";
@@ -20,6 +21,7 @@ import { ChevronIcon } from "../../common/icons/ChevronIcon";
 import { SortIcon } from "../../common/icons/SortIcon";
 import { Direction } from "../../common/icons/types";
 import { AssetFilterQuery } from "../AssetsFilter/types";
+import { ViewMode } from "../AssetsViewScopeConfiguration/types";
 import { actions } from "../actions";
 import { trackingEvents } from "../tracking";
 import { checkIfAnyFiltersApplied, getAssetTypeInfo } from "../utils";
@@ -93,9 +95,9 @@ const getData = (
   page: number,
   sorting: Sorting,
   searchQuery: string,
-  filters: AssetFilterQuery = { services: [], operations: [], insights: [] },
-  isDirect?: boolean,
-  scopedSpanCodeObjectId?: string
+  filters: AssetFilterQuery,
+  viewMode: ViewMode,
+  scopeSpanCodeObjectId?: string
 ) => {
   window.sendMessageToDigma({
     action: actions.GET_DATA,
@@ -106,67 +108,74 @@ const getData = (
         pageSize: PAGE_SIZE,
         sortBy: sorting.criterion,
         sortOrder: sorting.order,
-        directOnly: isDirect,
-        scopedSpanCodeObjectId,
+        directOnly: viewMode === "children",
+        scopedSpanCodeObjectId: scopeSpanCodeObjectId,
         ...(searchQuery.length > 0 ? { displayName: searchQuery } : {}),
-        ...(scopedSpanCodeObjectId ? { ...filters, services: [] } : filters)
+        ...(scopeSpanCodeObjectId ? { ...filters, services: [] } : filters)
       }
     }
   });
 };
 
 export const AssetList = ({
-  searchQuery,
   assetTypeId,
-  filters,
-  scopeViewOptions,
   onAssetCountChange,
   setRefresher,
   onGoToAllAssets
 }: AssetListProps) => {
-  const [data, setData] = useState<AssetsData>();
+  const {
+    assets: data,
+    sorting,
+    page,
+    viewMode,
+    search,
+    filters
+  } = useAssetsSelector();
+  const {
+    setAssets: setData,
+    setAssetsSorting: setSorting,
+    setAssetsPage: setPage,
+    setShowAssetsHeaderToolBox
+  } = useStore.getState();
   const previousData = usePrevious(data);
   const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState<number>();
   const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp);
-  const [sorting, setSorting] = useState<Sorting>({
-    criterion: SORTING_CRITERION.CRITICAL_INSIGHTS,
-    order: SORTING_ORDER.DESC
-  });
   const [isSortingMenuOpen, setIsSortingMenuOpen] = useState(false);
   const theme = useTheme();
   const sortingMenuChevronColor = getSortingMenuChevronColor(theme);
-  const [page, setPage] = useState(0);
   const filteredCount = data?.filteredCount ?? 0;
   const pageStartItemNumber = page * PAGE_SIZE + 1;
   const pageEndItemNumber = Math.min(
     pageStartItemNumber + PAGE_SIZE - 1,
     filteredCount
   );
   const listRef = useRef<HTMLUListElement>(null);
-  const { environment, backendInfo, scope } = useConfigSelector();
   const refreshTimerId = useRef<number>();
+  const { environment, backendInfo, scope } = useConfigSelector();
   const previousEnvironment = usePrevious(environment);
-  const previousViewScope = usePrevious(scopeViewOptions);
-  const isServicesFilterEnabled = !scope?.span?.spanCodeObjectId;
-  const { setShowAssetsHeaderToolBox } = useStore.getState();
+  const previousViewMode = usePrevious(viewMode);
+  const scopeSpanCodeObjectId = scope?.span?.spanCodeObjectId;
+  const previousScopeSpanCodeObjectId = usePrevious(scopeSpanCodeObjectId);
+  const isServicesFilterEnabled = !scopeSpanCodeObjectId;
+  const isInitialLoading = !data;
 
   const refreshData = useCallback(() => {
     getData(
       assetTypeId,
       page,
       sorting,
-      searchQuery,
+      search,
       filters,
-      scopeViewOptions?.isDirect,
-      scopeViewOptions?.scopedSpanCodeObjectId
+      viewMode,
+      scopeSpanCodeObjectId
     );
   }, [
     page,
     assetTypeId,
     filters,
-    scopeViewOptions?.isDirect,
-    scopeViewOptions?.scopedSpanCodeObjectId,
-    searchQuery,
+    viewMode,
+    scopeSpanCodeObjectId,
+    search,
     sorting
   ]);
 
@@ -183,12 +192,10 @@ export const AssetList = ({
 
   const areAnyFiltersApplied = checkIfAnyFiltersApplied(
     filters,
-    searchQuery,
+    search,
     isServicesFilterEnabled
   );
 
-  const isInitialLoading = !data;
-
   useEffect(() => {
     refreshData();
   }, [refreshData]);
@@ -212,7 +219,7 @@ export const AssetList = ({
       dispatcher.removeActionListener(actions.SET_DATA, handleAssetsData);
       window.clearTimeout(refreshTimerId.current);
     };
-  }, []);
+  }, [setData, setShowAssetsHeaderToolBox]);
 
   useEffect(() => {
     if (data && previousData?.filteredCount !== data?.filteredCount) {
@@ -228,15 +235,18 @@ export const AssetList = ({
     if (
       (isEnvironment(previousEnvironment) &&
         previousEnvironment.id !== environment?.id) ||
-      previousViewScope !== scopeViewOptions
+      viewMode !== previousViewMode ||
+      previousScopeSpanCodeObjectId !== scopeSpanCodeObjectId
     ) {
       refreshData();
     }
   }, [
     environment?.id,
     previousEnvironment,
-    previousViewScope,
-    scopeViewOptions,
+    previousViewMode,
+    viewMode,
+    scopeSpanCodeObjectId,
+    previousScopeSpanCodeObjectId,
     refreshData
   ]);
 
@@ -259,21 +269,30 @@ export const AssetList = ({
         order: SORTING_ORDER.DESC
       });
     }
-  }, [isImpactHidden, sorting]);
+  }, [isImpactHidden, sorting, setSorting]);
 
   useEffect(() => {
     setPage(0);
-  }, [environment?.id, searchQuery, sorting, assetTypeId, scopeViewOptions]);
+  }, [
+    environment?.id,
+    search,
+    sorting,
+    assetTypeId,
+    viewMode,
+    scopeSpanCodeObjectId,
+    setPage
+  ]);
 
   useEffect(() => {
     listRef.current?.scrollTo(0, 0);
   }, [
     environment?.id,
-    searchQuery,
+    search,
     sorting,
     page,
     assetTypeId,
-    scopeViewOptions
+    viewMode,
+    scopeSpanCodeObjectId
   ]);
 
   const handleAllAssetsLinkClick = () => {

src/components/Assets/AssetList/types.ts

@@ -1,13 +1,8 @@
 import { Duration } from "../../../globals";
-import { AssetFilterQuery } from "../AssetsFilter/types";
-import { AssetScopeOption } from "../AssetsViewScopeConfiguration/types";
 
 export interface AssetListProps {
   onGoToAllAssets: () => void;
   assetTypeId: string;
-  filters?: AssetFilterQuery;
-  searchQuery: string;
-  scopeViewOptions: AssetScopeOption | null;
   setRefresher: (refresher: () => void) => void;
   onAssetCountChange: (count: number) => void;
 }

src/components/Assets/AssetTypeList/AssetTypeList.stories.tsx

@@ -22,8 +22,7 @@ export const Default: Story = {
   args: {
     setRefresher: () => {
       return undefined;
-    },
-    searchQuery: ""
+    }
   },
   play: () => {
     window.setTimeout(() => {
@@ -65,7 +64,6 @@ export const Default: Story = {
 
 export const Empty: Story = {
   args: {
-    searchQuery: "",
     setRefresher: () => {
       return undefined;
     }
@@ -85,7 +83,6 @@ export const Empty: Story = {
 
 export const EmptyWithParents: Story = {
   args: {
-    searchQuery: "",
     setRefresher: () => {
       return undefined;
     }