Add filter by services

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

@@ -20,6 +20,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     assetTypeId: "Endpoint",
+    services: [],
     data: {
       data: [
         {

src/components/Assets/AssetList/index.tsx

@@ -159,6 +159,7 @@ export const AssetList = (props: AssetListProps) => {
   const refreshTimerId = useRef<number>();
   const previousEnvironment = usePrevious(config.environment);
   const previousAssetTypeId = usePrevious(props.assetTypeId);
+  const previousServices = usePrevious(props.services);
 
   const entries = data?.data || [];
 
@@ -176,7 +177,8 @@ export const AssetList = (props: AssetListProps) => {
           sortOrder: sorting.order,
           ...(debouncedSearchInputValue.length > 0
             ? { displayName: debouncedSearchInputValue }
-            : {})
+            : {}),
+          services: props.services
         }
       }
     });
@@ -204,7 +206,8 @@ export const AssetList = (props: AssetListProps) => {
       (isString(previousDebouncedSearchInputValue) &&
         previousDebouncedSearchInputValue !== debouncedSearchInputValue) ||
       (isString(previousAssetTypeId) &&
-        previousAssetTypeId !== props.assetTypeId)
+        previousAssetTypeId !== props.assetTypeId) ||
+      (Array.isArray(previousServices) && previousServices !== props.services)
     ) {
       window.sendMessageToDigma({
         action: actions.GET_DATA,
@@ -217,7 +220,8 @@ export const AssetList = (props: AssetListProps) => {
             sortOrder: sorting.order,
             ...(debouncedSearchInputValue.length > 0
               ? { displayName: debouncedSearchInputValue }
-              : {})
+              : {}),
+            services: props.services
           }
         }
       });
@@ -232,7 +236,9 @@ export const AssetList = (props: AssetListProps) => {
     previousPage,
     page,
     previousEnvironment,
-    config.environment
+    config.environment,
+    props.services,
+    previousServices
   ]);
 
   useEffect(() => {
@@ -250,7 +256,8 @@ export const AssetList = (props: AssetListProps) => {
               sortOrder: sorting.order,
               ...(debouncedSearchInputValue.length > 0
                 ? { displayName: debouncedSearchInputValue }
-                : {})
+                : {}),
+              services: props.services
             }
           }
         });
@@ -263,7 +270,8 @@ export const AssetList = (props: AssetListProps) => {
     page,
     sorting,
     debouncedSearchInputValue,
-    config.environment
+    config.environment,
+    props.services
   ]);
 
   useEffect(() => {

src/components/Assets/AssetList/styles.ts

@@ -9,7 +9,8 @@ import {
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100%;
+  overflow: hidden;
 `;
 
 export const BackButton = styled.button`
@@ -20,6 +21,13 @@ export const BackButton = styled.button`
   cursor: pointer;
 `;
 
+export const Toolbar = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 8px;
+  gap: 4px;
+`;
+
 export const Header = styled.div`
   display: flex;
   align-items: center;
@@ -47,13 +55,6 @@ export const Header = styled.div`
   }};
 `;
 
-export const Toolbar = styled.div`
-  display: flex;
-  justify-content: space-between;
-  padding: 8px;
-  gap: 4px;
-`;
-
 export const PopoverContainer = styled.div`
   margin-left: auto;
 `;

src/components/Assets/AssetList/types.ts

@@ -4,6 +4,7 @@ export interface AssetListProps {
   data?: AssetsData;
   onBackButtonClick: () => void;
   assetTypeId: string;
+  services: string[];
 }
 
 export enum SORTING_CRITERION {

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

@@ -19,6 +19,7 @@ type Story = StoryObj<typeof meta>;
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Default: Story = {
   args: {
+    services: [],
     data: {
       assetCategories: [
         {

src/components/Assets/AssetTypeList/index.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { actions as globalActions } from "../../../actions";
 import { dispatcher } from "../../../dispatcher";
 import { usePrevious } from "../../../hooks/usePrevious";
@@ -33,13 +33,19 @@ export const AssetTypeList = (props: AssetTypeListProps) => {
   const [data, setData] = useState<AssetCategoriesData>();
   const previousData = usePrevious(data);
   const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState<number>();
+  const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp);
   const [isInitialLoading, setIsInitialLoading] = useState(false);
   const config = useContext(ConfigContext);
   const previousEnvironment = usePrevious(config.environment);
+  const refreshTimerId = useRef<number>();
+  const previousServices = usePrevious(props.services);
 
   useEffect(() => {
     window.sendMessageToDigma({
-      action: actions.GET_CATEGORIES_DATA
+      action: actions.GET_CATEGORIES_DATA,
+      payload: {
+        services: props.services
+      }
     });
     setIsInitialLoading(true);
 
@@ -58,31 +64,43 @@ export const AssetTypeList = (props: AssetTypeListProps) => {
         actions.SET_CATEGORIES_DATA,
         handleCategoriesData
       );
+      window.clearTimeout(refreshTimerId.current);
     };
   }, []);
 
   useEffect(() => {
     if (
-      isString(previousEnvironment) &&
-      previousEnvironment !== config.environment
+      (isString(previousEnvironment) &&
+        previousEnvironment !== config.environment) ||
+      (Array.isArray(previousServices) && previousServices !== props.services)
     ) {
       window.sendMessageToDigma({
-        action: actions.GET_CATEGORIES_DATA
+        action: actions.GET_CATEGORIES_DATA,
+        payload: {
+          services: props.services
+        }
       });
     }
-  }, [previousEnvironment, config.environment]);
+  }, [
+    previousEnvironment,
+    config.environment,
+    previousServices,
+    props.services
+  ]);
 
   useEffect(() => {
-    const timerId = window.setTimeout(() => {
-      window.sendMessageToDigma({
-        action: actions.GET_CATEGORIES_DATA
-      });
-    }, REFRESH_INTERVAL);
-
-    return () => {
-      window.clearTimeout(timerId);
-    };
-  }, [lastSetDataTimeStamp]);
+    if (previousLastSetDataTimeStamp !== lastSetDataTimeStamp) {
+      window.clearTimeout(refreshTimerId.current);
+      refreshTimerId.current = window.setTimeout(() => {
+        window.sendMessageToDigma({
+          action: actions.GET_CATEGORIES_DATA,
+          payload: {
+            services: props.services
+          }
+        });
+      }, REFRESH_INTERVAL);
+    }
+  }, [props.services, previousLastSetDataTimeStamp, lastSetDataTimeStamp]);
 
   useEffect(() => {
     if (props.data) {

src/components/Assets/AssetTypeList/styles.ts

@@ -5,7 +5,7 @@ export const List = styled.ul`
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 8px;
+  padding: 0 8px 8px;
   margin: 0;
   color: ${({ theme }) => {
     switch (theme.mode) {
@@ -19,7 +19,7 @@ export const List = styled.ul`
 `;
 
 export const NoDataContainer = styled.div`
-  min-height: 100vh;
+  flex-grow: 1;
   display: flex;
   flex-direction: column;
   align-items: center;

src/components/Assets/AssetTypeList/types.ts

@@ -1,6 +1,7 @@
 export interface AssetTypeListProps {
   data?: AssetCategoriesData;
   onAssetTypeSelect: (assetTypeId: string) => void;
+  services: string[];
 }
 
 export interface AssetCategoriesData {

src/components/Assets/Assets.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Assets } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof Assets> = {
+  title: "Assets/Assets",
+  component: Assets,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default: Story = {
+  args: {
+    services: [
+      "service_1",
+      "service_2",
+      "service_3",
+      "service_4",
+      "service_5",
+      "service_6",
+      "service_7",
+      "service_8",
+      "service_9"
+    ]
+  }
+};

src/components/Assets/FilterMenu/FilterMenu.stories.tsx

@@ -0,0 +1,94 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { useState } from "react";
+import { FilterMenu } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof FilterMenu> = {
+  title: "Assets/FilterMenu",
+  component: FilterMenu,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default: Story = {
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [selectedItems, setSelectedItems] = useState<string[]>([]);
+
+    const handleItemClick = (value: string) => {
+      const itemIndex = selectedItems.findIndex((x) => x === value);
+
+      if (itemIndex < 0) {
+        setSelectedItems([...selectedItems, value]);
+      } else {
+        setSelectedItems([
+          ...selectedItems.slice(0, itemIndex),
+          ...selectedItems.slice(itemIndex + 1)
+        ]);
+      }
+    };
+
+    const items = args.items.map((x) => ({
+      ...x,
+      selected: selectedItems.includes(x.value)
+    }));
+
+    return <FilterMenu {...args} items={items} onItemClick={handleItemClick} />;
+  },
+  args: {
+    title: "Filter by services",
+    items: [
+      {
+        label: "very_long_long_long_long_name",
+        value: "item_1"
+      },
+      {
+        label: "Item 2",
+        value: "item_2"
+      },
+      {
+        label: "Item 3",
+        value: "item_3"
+      },
+      {
+        label: "Item 4",
+        value: "item_4"
+      },
+      {
+        label: "Item 5",
+        value: "item_5"
+      },
+      {
+        label: "Item 6",
+        value: "item_6"
+      },
+      {
+        label: "Item 7",
+        value: "item_7"
+      },
+      {
+        label: "Item 8",
+        value: "item_8"
+      },
+      {
+        label: "Item 9",
+        value: "item_9"
+      }
+    ]
+  }
+};
+
+export const NoItems: Story = {
+  args: {
+    title: "Filter by services",
+    items: []
+  }
+};