tags in service detail not updated after chagnes to service state (#1400

)
eclipse-xpanse · Jan 3, 2025 · 1ebe3eb · 1ebe3eb
1 parent fcab424
commit 1ebe3eb
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 21 deletions.
diff --git a/src/components/content/catalog/services/details/ServiceProvider.tsx b/src/components/content/catalog/services/details/ServiceProvider.tsx
@@ -182,11 +182,13 @@ function ServiceProvider({
                                     isViewDisabled={isViewDisabled}
                                 />
                                 <UnpublishService
+                                    category={category}
                                     serviceDetail={activeServiceDetail}
                                     setIsViewDisabled={setIsViewDisabled}
                                     unPublishRequest={unPublishRequest}
                                 />
                                 <RepublishService
+                                    category={category}
                                     serviceDetail={activeServiceDetail}
                                     setIsViewDisabled={setIsViewDisabled}
                                     republishRequest={republishRequest}

diff --git a/src/components/content/catalog/services/republish/RepublishService.tsx b/src/components/content/catalog/services/republish/RepublishService.tsx
@@ -8,27 +8,41 @@ import { Button, Popconfirm } from 'antd';
 import React from 'react';
 import catalogStyles from '../../../../../styles/catalog.module.css';
 import {
+    category,
     ServiceTemplateDetailVo,
     serviceTemplateRegistrationState,
     ServiceTemplateRequestInfo,
 } from '../../../../../xpanse-api/generated';
 
-import { UseMutationResult } from '@tanstack/react-query';
+import { UseMutationResult, useQueryClient } from '@tanstack/react-query';
+import { useGetDeleteMutationState } from '../delete/DeleteServiceMutation';
+import { getQueryKey } from '../query/useAvailableServiceTemplatesQuery';
 
 function RepublishService({
+    category,
     serviceDetail,
     setIsViewDisabled,
     republishRequest,
 }: {
+    category: category;
     serviceDetail: ServiceTemplateDetailVo;
     setIsViewDisabled: (isViewDisabled: boolean) => void;
     republishRequest: UseMutationResult<ServiceTemplateRequestInfo, Error, void>;
 }): React.JSX.Element {
+    const deleteState = useGetDeleteMutationState(serviceDetail.serviceTemplateId);
+    const queryClient = useQueryClient();
+
     const republish = () => {
         setIsViewDisabled(true);
-        republishRequest.mutate();
+        republishRequest.mutate(undefined, {
+            onSuccess: () => {
+                void queryClient.invalidateQueries({ queryKey: getQueryKey(category) });
+            },
+            onSettled: () => {
+                setIsViewDisabled(false);
+            },
+        });
     };
-
     return (
         <div className={catalogStyles.updateUnpublishBtnClass}>
             <Popconfirm
@@ -46,6 +60,7 @@ function RepublishService({
                     className={catalogStyles.catalogManageBtnClass}
                     disabled={
                         republishRequest.isSuccess ||
+                        (deleteState.length > 0 && deleteState[0].status === 'success') ||
                         serviceDetail.serviceTemplateRegistrationState !== serviceTemplateRegistrationState.APPROVED ||
                         serviceDetail.isReviewInProgress ||
                         serviceDetail.isAvailableInCatalog

diff --git a/src/components/content/catalog/services/unpublish/UnpublishService.tsx b/src/components/content/catalog/services/unpublish/UnpublishService.tsx
@@ -4,28 +4,40 @@
  */
 
 import { MinusCircleOutlined } from '@ant-design/icons';
-import { UseMutationResult } from '@tanstack/react-query';
+import { UseMutationResult, useQueryClient } from '@tanstack/react-query';
 import { Button, Popconfirm } from 'antd';
 import React from 'react';
 import catalogStyles from '../../../../../styles/catalog.module.css';
 import {
+    category,
     ServiceTemplateDetailVo,
     serviceTemplateRegistrationState,
     ServiceTemplateRequestInfo,
 } from '../../../../../xpanse-api/generated';
+import { getQueryKey } from '../query/useAvailableServiceTemplatesQuery';
 
 function UnpublishService({
+    category,
     serviceDetail,
     setIsViewDisabled,
     unPublishRequest,
 }: {
+    category: category;
     serviceDetail: ServiceTemplateDetailVo;
     setIsViewDisabled: (isViewDisabled: boolean) => void;
     unPublishRequest: UseMutationResult<ServiceTemplateRequestInfo, Error, void>;
 }): React.JSX.Element {
+    const queryClient = useQueryClient();
     const unpublish = () => {
         setIsViewDisabled(true);
-        unPublishRequest.mutate();
+        unPublishRequest.mutate(undefined, {
+            onSuccess: () => {
+                void queryClient.invalidateQueries({ queryKey: getQueryKey(category) });
+            },
+            onSettled: () => {
+                setIsViewDisabled(false);
+            },
+        });
     };
 
     return (

diff --git a/src/styles/catalog.module.css b/src/styles/catalog.module.css
@@ -133,19 +133,3 @@
     height: 26px;
     display: inline-block;
 }
-
-.service-template-state {
-    animation: blink-animation 1s infinite;
-}
-
-@keyframes blink-animation {
-    0% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}