ISV catalog refresh must bring control back to previously selected se…

…rvice.
eclipse-xpanse · Dec 5, 2023 · 0629e74 · 0629e74
1 parent 2ed8c0e
commit 0629e74
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 9 deletions.
diff --git a/src/components/content/catalog/services/details/ServiceProvider.tsx b/src/components/content/catalog/services/details/ServiceProvider.tsx
@@ -9,8 +9,8 @@ import ServiceDetail from './ServiceDetail';
 import {
     ApiError,
     CloudServiceProvider,
-    Response,
     DeployedService,
+    Response,
     ServiceTemplateDetailVo,
 } from '../../../../../xpanse-api/generated';
 import { Tab } from 'rc-tabs/lib/interface';
@@ -21,6 +21,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { getQueryKey } from '../query/useAvailableServiceTemplatesQuery';
 import { cspMap } from '../../../common/csp/CspLogo';
 import { ServiceHostingOptions } from './ServiceHostingOptions';
+import { useCurrentCatalogTreeSelectKeyStore } from '../store/CatalogTreeStore';
 
 let lastServiceName: string = '';
 
@@ -38,14 +39,16 @@ function ServiceProvider({
     const [activeKey, setActiveKey] = useState<string>('');
     const [serviceDetails, setServiceDetails] = useState<ServiceTemplateDetailVo[] | undefined>(undefined);
     const [activeServiceDetail, setActiveServiceDetail] = useState<ServiceTemplateDetailVo | undefined>(undefined);
-
     const detailMapper: Map<string, ServiceTemplateDetailVo[]> = new Map<string, ServiceTemplateDetailVo[]>();
     const [name, version] = currentServiceName.split('@');
     const unregisterStatus = useRef<string>('');
     const [unregisterTips, setUnregisterTips] = useState<React.JSX.Element | undefined>(undefined);
     const [unregisterServiceId, setUnregisterServiceId] = useState<string>('');
     const [unregisterTabsItemDisabled, setUnregisterTabsItemDisabled] = useState<boolean>(false);
     const queryClient = useQueryClient();
+    const updateCurrentCatalogTreeSelectKey = useCurrentCatalogTreeSelectKeyStore(
+        (state) => state.addCurrentCatalogTreeSelectKey
+    );
 
     const getCspTabs = (categoryOclData: Map<string, ServiceTemplateDetailVo[]>): Tab[] => {
         const items: Tab[] = [];
@@ -83,19 +86,23 @@ function ServiceProvider({
     };
 
     const items: Tab[] = getCspTabs(categoryOclData);
+
     function updateServiceDetails(serviceKey: string): void {
         const details = detailMapper.get(serviceKey);
         if (details) {
             setServiceDetails(details);
             setActiveServiceDetail(details[0]);
         }
     }
+
     useEffect(() => {
         if (items.length > 0 && lastServiceName !== currentServiceName) {
             updateServiceDetails(currentServiceName + '@' + items[0].key);
             setActiveKey(items[0]?.key);
+            updateCurrentCatalogTreeSelectKey('', false, [], items[0]?.key);
         } else if (items.length > 0 && lastServiceName === currentServiceName) {
             setActiveKey(items[0]?.key);
+            updateCurrentCatalogTreeSelectKey('', false, [], items[0]?.key);
         }
         lastServiceName = currentServiceName;
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -108,6 +115,7 @@ function ServiceProvider({
 
     const onChange = (key: string) => {
         setActiveKey(key);
+        updateCurrentCatalogTreeSelectKey('', false, [], key);
     };
 
     const onChangeServiceHostingType = (serviceTemplateDetailVo: ServiceTemplateDetailVo) => {
@@ -191,9 +199,16 @@ function ServiceProvider({
                                     id={activeServiceDetail.id}
                                     unregisterStatus={unregisterStatus}
                                     category={category}
+                                    currentServiceName={currentServiceName}
+                                    activeKey={activeKey}
                                 />
                                 {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
-                                <UnregisterService id={activeServiceDetail.id} onConfirmHandler={onConfirmUnregister} />
+                                <UnregisterService
+                                    id={activeServiceDetail.id}
+                                    onConfirmHandler={onConfirmUnregister}
+                                    currentServiceName={currentServiceName}
+                                    activeKey={activeKey}
+                                />
                             </div>
                         </>
                     ) : null}

diff --git a/src/components/content/catalog/services/store/CatalogTreeStore.ts b/src/components/content/catalog/services/store/CatalogTreeStore.ts
@@ -0,0 +1,59 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ * SPDX-FileCopyrightText: Huawei Inc.
+ */
+
+import { createWithEqualityFn } from 'zustand/traditional';
+import { shallow } from 'zustand/shallow';
+import { createJSONStorage, persist } from 'zustand/middleware';
+import React from 'react';
+
+interface CurrentCatalogTreeSelectKeyStore {
+    currentCatalogTreeSelectKey: React.Key | undefined;
+    isUnRegister: boolean;
+    currentCatalogTreeExpandKeys: React.Key[];
+    currentCsp: string | undefined;
+}
+
+const initialState: CurrentCatalogTreeSelectKeyStore = {
+    currentCatalogTreeSelectKey: undefined,
+    isUnRegister: false,
+    currentCatalogTreeExpandKeys: [],
+    currentCsp: undefined,
+};
+
+interface updateState {
+    addCurrentCatalogTreeSelectKey: (
+        currentSelectKey: React.Key,
+        unregisterSelectKey: boolean,
+        currentExpandKeys: React.Key[],
+        currentCsp: string
+    ) => void;
+    clearCurrentCatalogTreeSelectKey: () => void;
+}
+
+export const useCurrentCatalogTreeSelectKeyStore = createWithEqualityFn<
+    CurrentCatalogTreeSelectKeyStore & updateState
+>()(
+    persist(
+        (set) => ({
+            ...initialState,
+            addCurrentCatalogTreeSelectKey: (currentSelectKey, isUnRegister, currentExpandKeys, currentCsp) => {
+                set({
+                    currentCatalogTreeSelectKey: currentSelectKey,
+                    isUnRegister: isUnRegister,
+                    currentCatalogTreeExpandKeys: currentExpandKeys,
+                    currentCsp: currentCsp,
+                });
+            },
+            clearCurrentCatalogTreeSelectKey: () => {
+                set(initialState);
+            },
+        }),
+        {
+            name: 'storage',
+            storage: createJSONStorage(() => localStorage),
+        }
+    ),
+    shallow
+);
diff --git a/src/components/content/catalog/services/tree/CategoryCatalog.tsx b/src/components/content/catalog/services/tree/CategoryCatalog.tsx
@@ -8,11 +8,13 @@ import '../../../../../styles/catalog.css';
 import { DataNode } from 'antd/es/tree';
 import ServiceProvider from '../details/ServiceProvider';
 import { HomeOutlined, TagOutlined } from '@ant-design/icons';
-import { ApiError, Response, DeployedService, ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
+import { ApiError, DeployedService, Response, ServiceTemplateDetailVo } from '../../../../../xpanse-api/generated';
 import { Alert, Empty, Skeleton, Tree } from 'antd';
 import { convertStringArrayToUnorderedList } from '../../../../utils/generateUnorderedList';
 import { getServiceMapper, getVersionMapper } from '../../../common/catalog/catalogProps';
 import { useAvailableServiceTemplatesQuery } from '../query/useAvailableServiceTemplatesQuery';
+import { useCurrentCatalogTreeSelectKeyStore } from '../store/CatalogTreeStore';
+import { TreeProps } from 'antd/lib';
 
 function CategoryCatalog({ category }: { category: DeployedService.category }): React.JSX.Element {
     const [selectKey, setSelectKey] = useState<React.Key>('');
@@ -24,6 +26,13 @@ function CategoryCatalog({ category }: { category: DeployedService.category }):
     const [unregisteredDisabled, setUnregisteredDisabled] = useState<boolean>(false);
 
     const availableServiceTemplatesQuery = useAvailableServiceTemplatesQuery(category);
+    const currentCatalogTreeSelectKey: React.Key | undefined = useCurrentCatalogTreeSelectKeyStore(
+        (state) => state.currentCatalogTreeSelectKey
+    );
+    const isUnRegister: boolean | undefined = useCurrentCatalogTreeSelectKeyStore((state) => state.isUnRegister);
+    const updateCurrentCatalogTreeSelectKey = useCurrentCatalogTreeSelectKeyStore(
+        (state) => state.addCurrentCatalogTreeSelectKey
+    );
 
     useEffect(() => {
         const categoryTreeData: DataNode[] = [];
@@ -56,15 +65,42 @@ function CategoryCatalog({ category }: { category: DeployedService.category }):
                 categoryTreeData.push(dataNode);
             });
             setTreeData(categoryTreeData);
-            setSelectKey(tExpandKeys[0]);
             setExpandKeys(tExpandKeys);
+            if (isUnRegister && currentCatalogTreeSelectKey !== undefined) {
+                let currentServiceKey = '';
+                serviceNameList.forEach((serviceName: string) => {
+                    if (serviceName === currentCatalogTreeSelectKey.toString().split('@')[0]) {
+                        const versionMapper: Map<string, ServiceTemplateDetailVo[]> = getVersionMapper(
+                            serviceName,
+                            userAvailableServiceList
+                        );
+                        const versionList: string[] = Array.from(versionMapper.keys());
+                        currentServiceKey = serviceName + '@' + versionList[0];
+                    }
+                });
+                setSelectKey(currentServiceKey);
+            }
+            if (!isUnRegister && currentCatalogTreeSelectKey !== undefined) {
+                setSelectKey(currentCatalogTreeSelectKey);
+            }
+            if (!isUnRegister && !currentCatalogTreeSelectKey) {
+                setSelectKey(tExpandKeys[0]);
+            }
+            updateCurrentCatalogTreeSelectKey('', false, tExpandKeys, '');
         } else {
             setTreeData([]);
             setSelectKey('');
             setExpandKeys([]);
             setCategoryOclData(new Map<string, ServiceTemplateDetailVo[]>());
+            updateCurrentCatalogTreeSelectKey('', false, [], '');
         }
-    }, [availableServiceTemplatesQuery.data, availableServiceTemplatesQuery.isSuccess]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        availableServiceTemplatesQuery.data,
+        availableServiceTemplatesQuery.isSuccess,
+        isUnRegister,
+        currentCatalogTreeSelectKey,
+    ]);
 
     function isParentTreeSelected(selectKey: React.Key): boolean {
         let isParentNode: boolean = false;
@@ -76,11 +112,12 @@ function CategoryCatalog({ category }: { category: DeployedService.category }):
         return isParentNode;
     }
 
-    const onSelect = (selectedKeys: React.Key[]) => {
+    const onSelect: TreeProps['onSelect'] = (selectedKeys: React.Key[]) => {
         if (selectedKeys.length === 0 || isParentTreeSelected(selectedKeys[0])) {
             return;
         }
         setSelectKey(selectedKeys[0]);
+        updateCurrentCatalogTreeSelectKey(selectedKeys[0], false, [], '');
     };
 
     const onConfirmUnregister = (disabled: boolean) => {

diff --git a/src/components/content/catalog/services/unregister/UnregisterService.tsx b/src/components/content/catalog/services/unregister/UnregisterService.tsx
@@ -7,14 +7,23 @@ import { Button, Popconfirm } from 'antd';
 import { ServiceVendorService } from '../../../../../xpanse-api/generated';
 import { useMutation } from '@tanstack/react-query';
 import React from 'react';
+import { useCurrentCatalogTreeSelectKeyStore } from '../store/CatalogTreeStore';
 
 function UnregisterService({
     id,
     onConfirmHandler,
+    currentServiceName,
+    activeKey,
 }: {
     id: string;
     onConfirmHandler: (message: string | Error, unregisterResult: boolean, id: string) => void;
+    currentServiceName: string;
+    activeKey: string;
 }): React.JSX.Element {
+    const updateCurrentCatalogTreeSelectKey = useCurrentCatalogTreeSelectKeyStore(
+        (state) => state.addCurrentCatalogTreeSelectKey
+    );
+
     const unregisterRequest = useMutation({
         mutationFn: () => {
             return ServiceVendorService.unregister(id);
@@ -35,6 +44,7 @@ function UnregisterService({
                 cancelText='Yes'
                 okText='No'
                 onCancel={() => {
+                    updateCurrentCatalogTreeSelectKey(currentServiceName, true, [], activeKey);
                     unregisterRequest.mutate();
                 }}
             >
@@ -49,4 +59,5 @@ function UnregisterService({
         </div>
     );
 }
+
 export default UnregisterService;
diff --git a/src/components/content/catalog/services/update/UpdateService.tsx b/src/components/content/catalog/services/update/UpdateService.tsx
@@ -8,11 +8,11 @@ import { Button, Modal, Upload, UploadFile } from 'antd';
 import { AppstoreAddOutlined, CloudUploadOutlined, UploadOutlined } from '@ant-design/icons';
 import {
     ApiError,
+    DeployedService,
     Ocl,
-    ServiceTemplateDetailVo,
     Response,
+    ServiceTemplateDetailVo,
     ServiceVendorService,
-    DeployedService,
 } from '../../../../../xpanse-api/generated';
 import { RcFile } from 'antd/es/upload';
 import UpdateResult from './UpdateResult';
@@ -22,15 +22,20 @@ import loadOclFile from '../../../common/ocl/loadOclFile';
 import OclSummaryDisplay from '../../../common/ocl/OclSummaryDisplay';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { getQueryKey } from '../query/useAvailableServiceTemplatesQuery';
+import { useCurrentCatalogTreeSelectKeyStore } from '../store/CatalogTreeStore';
 
 function UpdateService({
     id,
     unregisterStatus,
     category,
+    currentServiceName,
+    activeKey,
 }: {
     id: string;
     unregisterStatus: MutableRefObject<string>;
     category: DeployedService.category;
+    currentServiceName: string;
+    activeKey: string;
 }): React.JSX.Element {
     const ocl = useRef<Ocl | undefined>(undefined);
     const files = useRef<UploadFile[]>([]);
@@ -41,6 +46,10 @@ function UpdateService({
     const [oclValidationStatus, setOclValidationStatus] = useState<ValidationStatus>('notStarted');
     const [isModalOpen, setIsModalOpen] = useState(false);
     const queryClient = useQueryClient();
+    const updateCurrentCatalogTreeSelectKey = useCurrentCatalogTreeSelectKeyStore(
+        (state) => state.addCurrentCatalogTreeSelectKey
+    );
+
     const updateServiceRequest = useMutation({
         mutationFn: (ocl: Ocl) => {
             return ServiceVendorService.update(id, ocl);
@@ -112,9 +121,11 @@ function UpdateService({
             };
         }
     }
+
     const sendRequestRequest = () => {
         if (ocl.current) {
             updateServiceRequest.mutate(ocl.current);
+            updateCurrentCatalogTreeSelectKey(currentServiceName, false, [], activeKey);
         }
     };
 
@@ -223,4 +234,5 @@ function UpdateService({
         </div>
     );
 }
+
 export default UpdateService;