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"),