diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
index 9bf7d2b0f..e5ebaceab 100644
--- a/.storybook/preview-body.html
+++ b/.storybook/preview-body.html
@@ -15,6 +15,7 @@
window.assetsRefreshInterval;
window.assetsSearch = true;
+ window.assetsSelectedServices = [];
window.dashboardEnvironment = "SAMPLE_ENV";
window.dashboardRefreshInterval;
diff --git a/src/components/Assets/Assets.stories.tsx b/src/components/Assets/Assets.stories.tsx
index d3356d864..460964847 100644
--- a/src/components/Assets/Assets.stories.tsx
+++ b/src/components/Assets/Assets.stories.tsx
@@ -18,17 +18,5 @@ type Story = StoryObj;
// 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: {}
};
diff --git a/src/components/Assets/actions.ts b/src/components/Assets/actions.ts
index 5bab91285..e580ae2a0 100644
--- a/src/components/Assets/actions.ts
+++ b/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"
});
diff --git a/src/components/Assets/index.tsx b/src/components/Assets/index.tsx
index 7dd08b1b4..cc0fbd45c 100644
--- a/src/components/Assets/index.tsx
+++ b/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(
null
);
const [services, setServices] = useState([]);
const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState();
const [selectedServices, setSelectedServices] = useState([]);
+ 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);
diff --git a/src/components/Assets/types.ts b/src/components/Assets/types.ts
index f03b422fa..6ba235c99 100644
--- a/src/components/Assets/types.ts
+++ b/src/components/Assets/types.ts
@@ -1,7 +1,3 @@
export interface ServiceData {
services: string[];
}
-
-export type AssetsProps = {
- services?: string[];
-};
diff --git a/src/globals.d.ts b/src/globals.d.ts
index da901416b..4f5cbc559 100644
--- a/src/globals.d.ts
+++ b/src/globals.d.ts
@@ -38,6 +38,7 @@ declare global {
isDockerComposeInstalled?: unknown;
assetsRefreshInterval?: unknown;
assetsSearch?: unknown;
+ assetsSelectedServices?: unknown;
dashboardEnvironment?: unknown;
dashboardRefreshInterval?: unknown;
documentationPage?: unknown;
diff --git a/webpackEntries.ts b/webpackEntries.ts
index 631b21c72..d99d5c055 100644
--- a/webpackEntries.ts
+++ b/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"),