Preselect services in Assets filter

.storybook/preview-body.html

@@ -15,6 +15,7 @@
 
   window.assetsRefreshInterval;
   window.assetsSearch = true;
+  window.assetsSelectedServices = [];
 
   window.dashboardEnvironment = "SAMPLE_ENV";
   window.dashboardRefreshInterval;

src/components/Assets/Assets.stories.tsx

@@ -18,17 +18,5 @@ 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"
-    ]
-  }
+  args: {}
 };

src/components/Assets/actions.ts

@@ -10,5 +10,6 @@ export const actions = addPrefix(ACTION_PREFIX, {
   GET_CATEGORIES_DATA: "GET_CATEGORIES_DATA",
   SET_CATEGORIES_DATA: "SET_CATEGORIES_DATA",
   GET_SERVICES: "GET_SERVICES",
-  SET_SERVICES: "SET_SERVICES"
+  SET_SERVICES: "SET_SERVICES",
+  SET_SELECTED_SERVICES: "SET_SELECTED_SERVICES"
 });

src/components/Assets/index.tsx

@@ -7,7 +7,9 @@ import {
 } from "react";
 import { gte, valid } from "semver";
 import { dispatcher } from "../../dispatcher";
+import { usePrevious } from "../../hooks/usePrevious";
 import { isNumber } from "../../typeGuards/isNumber";
+import { isString } from "../../typeGuards/isString";
 import { ConfigContext } from "../common/App/ConfigContext";
 import { NewPopover } from "../common/NewPopover";
 import { ChevronIcon } from "../common/icons/ChevronIcon";
@@ -18,19 +20,26 @@ import { AssetTypeList } from "./AssetTypeList";
 import { FilterMenu } from "./FilterMenu";
 import { actions } from "./actions";
 import * as s from "./styles";
-import { AssetsProps, ServiceData } from "./types";
+import { ServiceData } from "./types";
 
 const REFRESH_INTERVAL = isNumber(window.assetsRefreshInterval)
   ? window.assetsRefreshInterval
   : 10 * 1000; // in milliseconds
 
-export const Assets = (props: AssetsProps) => {
+const preselectedServices =
+  Array.isArray(window.assetsSelectedServices) &&
+  window.assetsSelectedServices.every(isString)
+    ? window.assetsSelectedServices
+    : [];
+
+export const Assets = () => {
   const [selectedAssetTypeId, setSelectedAssetTypeId] = useState<string | null>(
     null
   );
   const [services, setServices] = useState<string[]>([]);
   const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState<number>();
   const [selectedServices, setSelectedServices] = useState<string[]>([]);
+  const previousSelectedServices = usePrevious(selectedServices);
   const [isServiceMenuOpen, setIsServiceMenuOpen] = useState(false);
   const config = useContext(ConfigContext);
 
@@ -50,8 +59,15 @@ export const Assets = (props: AssetsProps) => {
     });
 
     const handleServicesData = (data: unknown, timeStamp: number) => {
-      setServices((data as ServiceData).services);
+      const services = (data as ServiceData).services;
+      setServices(services);
       setLastSetDataTimeStamp(timeStamp);
+      if (lastSetDataTimeStamp === undefined) {
+        const selectedServices = services.filter((x) =>
+          preselectedServices.includes(x)
+        );
+        setSelectedServices(selectedServices);
+      }
     };
 
     dispatcher.addActionListener(actions.SET_SERVICES, handleServicesData);
@@ -74,10 +90,18 @@ export const Assets = (props: AssetsProps) => {
   }, [lastSetDataTimeStamp]);
 
   useEffect(() => {
-    if (props.services) {
-      setServices(props.services);
+    if (
+      previousSelectedServices &&
+      previousSelectedServices !== selectedServices
+    ) {
+      window.sendMessageToDigma({
+        action: actions.SET_SELECTED_SERVICES,
+        payload: {
+          services: selectedServices
+        }
+      });
     }
-  }, [props.services]);
+  }, [previousSelectedServices, selectedServices]);
 
   const handleServiceMenuClose = () => {
     setIsServiceMenuOpen(false);

src/components/Assets/types.ts

@@ -1,7 +1,3 @@
 export interface ServiceData {
   services: string[];
 }
-
-export type AssetsProps = {
-  services?: string[];
-};

src/globals.d.ts

@@ -38,6 +38,7 @@ declare global {
     isDockerComposeInstalled?: unknown;
     assetsRefreshInterval?: unknown;
     assetsSearch?: unknown;
+    assetsSelectedServices?: unknown;
     dashboardEnvironment?: unknown;
     dashboardRefreshInterval?: unknown;
     documentationPage?: unknown;

webpackEntries.ts

@@ -3,7 +3,11 @@ import path from "path";
 export const entries: AppEntries = {
   assets: {
     entry: path.resolve(__dirname, "./src/containers/Assets/index.tsx"),
-    environmentVariables: ["assetsRefreshInterval", "assetsSearch"]
+    environmentVariables: [
+      "assetsRefreshInterval",
+      "assetsSearch",
+      "assetsSelectedServices"
+    ]
   },
   dashboard: {
     entry: path.resolve(__dirname, "./src/containers/Dashboard/index.tsx"),