ARTESCA-15484: Extract the logic to the hook to avoid rerendering

Author: ChengYanJin

src/react/endpoint/DeleteEndpoint.tsx

@@ -10,26 +10,23 @@ import { useInstanceId } from '../next-architecture/ui/AuthProvider';
 import DeleteConfirmation from '../ui-elements/DeleteConfirmation';
 import * as T from '../ui-elements/Table';
 import { useShellHooks } from '@scality/module-federation';
-import { ArtescaLibraryNotAvailable } from '../next-architecture/ui/ArtescaLibraryProvider';
-import { useArtescaLibrary } from '../next-architecture/ui/ArtescaLibraryProvider';
 
 export const DeleteEndpoint = ({
   hostname,
-  isBuiltin,
+  endpointsDeletionDisabledMap,
+  endpointsDeletionDisabledStatus,
 }: {
   hostname: string;
-  isBuiltin: boolean;
+  endpointsDeletionDisabledMap: Record<string, boolean>;
+  endpointsDeletionDisabledStatus: 'idle' | 'loading' | 'error' | 'success';
 }) => {
   const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
   const accountsLocationsEndpointsAdapter =
     useAccountsLocationsEndpointsAdapter();
-  const {
-    refetchAccountsLocationsEndpointsMutation,
-    accountsLocationsAndEndpoints,
-    status: accountsLocationsEndpointsStatus,
-  } = useAccountsLocationsAndEndpoints({
-    accountsLocationsEndpointsAdapter,
-  });
+  const { refetchAccountsLocationsEndpointsMutation } =
+    useAccountsLocationsAndEndpoints({
+      accountsLocationsEndpointsAdapter,
+    });
   const instanceId = useInstanceId();
   const managementClient = useManagementClient();
   const { useAuth } = useShellHooks();
@@ -47,37 +44,6 @@ export const DeleteEndpoint = ({
     status: waiterStatus,
   } = useWaitForRunningConfigurationVersionToBeUpdated();
 
-  const artescaLibrary = useArtescaLibrary();
-  const {
-    useArtescaPlusVeeamDefaultOrOpenMode,
-    ARTESCA_PLUS_VEEAM_S3_ENDPOINT_NAME,
-  } =
-    artescaLibrary instanceof ArtescaLibraryNotAvailable
-      ? {
-          useArtescaPlusVeeamDefaultOrOpenMode: undefined,
-          ARTESCA_PLUS_VEEAM_S3_ENDPOINT_NAME: undefined,
-        }
-      : artescaLibrary;
-  const {
-    artescaPlusVeeamDefaultOrOpenMode,
-    artescaPlusVeeamDefaultOrOpenModeStatus,
-  } = useArtescaPlusVeeamDefaultOrOpenMode();
-
-  const isDisabledForArtescaPlusVeeam =
-    hostname === ARTESCA_PLUS_VEEAM_S3_ENDPOINT_NAME;
-
-  // Disable endpoint deletion when there is only one non-Veeam, non-builtin endpoint remaining
-  // to avoid going back to default mode
-  const isLastNonVeeamEndpoint =
-    accountsLocationsEndpointsStatus === 'success' &&
-    accountsLocationsAndEndpoints.endpoints.filter(
-      (endpoint) =>
-        endpoint.hostname !== ARTESCA_PLUS_VEEAM_S3_ENDPOINT_NAME &&
-        endpoint.isBuiltin === false,
-    ).length === 1;
-  const isDisabledForOpenMode =
-    artescaPlusVeeamDefaultOrOpenMode === 'open' && isLastNonVeeamEndpoint;
-
   const handleDeleteApprove = () => {
     setReferenceVersion({
       onRefTaken: () => {
@@ -97,12 +63,8 @@ export const DeleteEndpoint = ({
     }
   }, [waiterStatus, refetchAccountsLocationsEndpointsMutation]);
 
-  const tooltipMessage = isBuiltin
+  const tooltipMessage = endpointsDeletionDisabledMap[hostname]
     ? 'This Data Service can not be deleted'
-    : isDisabledForArtescaPlusVeeam
-    ? 'This is the Data Service created for Artesca + Veeam deployment and it should not be deleted'
-    : isDisabledForOpenMode
-    ? 'The deletion of Data Services has been disabled for Open Mode'
     : 'Delete Data Service';
 
   return (
@@ -117,10 +79,8 @@ export const DeleteEndpoint = ({
         titleText={`Are you sure you want to delete Data Service: ${hostname} ?`}
       />
       <T.ActionButton
-        disabled={
-          isBuiltin || isDisabledForArtescaPlusVeeam || isDisabledForOpenMode
-        }
-        isLoading={artescaPlusVeeamDefaultOrOpenModeStatus === 'loading'}
+        disabled={endpointsDeletionDisabledMap[hostname]}
+        isLoading={endpointsDeletionDisabledStatus === 'loading'}
         icon={<Icon name="Delete" />}
         tooltip={{
           overlay: tooltipMessage,

src/react/endpoint/EndpointList.tsx

@@ -18,6 +18,7 @@ import {
   ArtescaLibraryNotAvailable,
   TOOLTIP_ARTESCA_PLUS_VEEAM_DEFAULT_MODE,
 } from '../next-architecture/ui/ArtescaLibraryProvider';
+import useEndpointsDeletionDisabled from './useEndpointsDeletionDisabled';
 
 type CellProps = {
   row: {
@@ -61,6 +62,11 @@ function EndpointList({ endpoints, locations }: Props) {
     artescaPlusVeeamDefaultOrOpenModeStatus,
   } = useArtescaPlusVeeamDefaultOrOpenMode();
 
+  const {
+    endpointsDeletionDisabledMap,
+    status: endpointsDeletionDisabledStatus,
+  } = useEndpointsDeletionDisabled();
+
   const columns = useMemo(
     () => [
       {
@@ -114,13 +120,14 @@ function EndpointList({ endpoints, locations }: Props) {
           return (
             <DeleteEndpoint
               hostname={original.hostname}
-              isBuiltin={original.isBuiltin}
+              endpointsDeletionDisabledMap={endpointsDeletionDisabledMap}
+              endpointsDeletionDisabledStatus={endpointsDeletionDisabledStatus}
             />
           );
         },
       },
     ],
-    [locations],
+    [locations, endpointsDeletionDisabledMap, endpointsDeletionDisabledStatus],
   );
 
   return (

src/react/endpoint/useEndpointsDeletionDisabled.tsx

@@ -0,0 +1,82 @@
+import { useMemo } from 'react';
+import { useAccountsLocationsAndEndpoints } from '../next-architecture/domain/business/accounts';
+import { useAccountsLocationsEndpointsAdapter } from '../next-architecture/ui/AccountsLocationsEndpointsAdapterProvider';
+import {
+  ArtescaLibraryNotAvailable,
+  useArtescaLibrary,
+} from '../next-architecture/ui/ArtescaLibraryProvider';
+
+// return the list of the endpoint name and a boolean indicating if the endpoint is deletion disabled
+const useEndpointsDeletionDisabled = (): {
+  endpointsDeletionDisabledMap: Record<string, boolean>;
+  status: 'idle' | 'loading' | 'error' | 'success';
+} => {
+  const accountsLocationsEndpointsAdapter =
+    useAccountsLocationsEndpointsAdapter();
+  const {
+    accountsLocationsAndEndpoints,
+    status: accountsLocationsEndpointsStatus,
+  } = useAccountsLocationsAndEndpoints({
+    accountsLocationsEndpointsAdapter,
+  });
+  const artescaLibrary = useArtescaLibrary();
+  const {
+    useArtescaPlusVeeamDefaultOrOpenMode,
+    ARTESCA_PLUS_VEEAM_S3_ENDPOINT_NAME,
+  } =
+    artescaLibrary instanceof ArtescaLibraryNotAvailable
+      ? {
+          useArtescaPlusVeeamDefaultOrOpenMode: undefined,
+          ARTESCA_PLUS_VEEAM_S3_ENDPOINT_NAME: undefined,
+        }
+      : artescaLibrary;
+  const {
+    artescaPlusVeeamDefaultOrOpenMode,
+    artescaPlusVeeamDefaultOrOpenModeStatus,
+  } = useArtescaPlusVeeamDefaultOrOpenMode();
+
+  // Disable endpoint deletion when there is only one non-Veeam, non-builtin endpoint remaining
+  // to avoid going back to default mode
+  const isLastNonVeeamEndpoint =
+    accountsLocationsEndpointsStatus === 'success' &&
+    accountsLocationsAndEndpoints.endpoints.filter(
+      (endpoint) =>
+        endpoint.hostname !== ARTESCA_PLUS_VEEAM_S3_ENDPOINT_NAME &&
+        endpoint.isBuiltin === false,
+    ).length === 1;
+
+  const isDisabledForOpenMode =
+    artescaPlusVeeamDefaultOrOpenMode === 'open' && isLastNonVeeamEndpoint;
+
+  const endpointsDeletionDisabledMap = useMemo(() => {
+    const record: Record<string, boolean> = {};
+    accountsLocationsAndEndpoints.endpoints.forEach((endpoint) => {
+      const hostname = endpoint.hostname;
+      record[hostname] =
+        hostname === ARTESCA_PLUS_VEEAM_S3_ENDPOINT_NAME ||
+        isDisabledForOpenMode ||
+        endpoint.isBuiltin;
+    });
+    return record;
+  }, [
+    accountsLocationsAndEndpoints.endpoints,
+    ARTESCA_PLUS_VEEAM_S3_ENDPOINT_NAME,
+    isDisabledForOpenMode,
+  ]);
+
+  const status =
+    artescaPlusVeeamDefaultOrOpenModeStatus === 'loading' ||
+    accountsLocationsEndpointsStatus === 'loading'
+      ? 'loading'
+      : artescaPlusVeeamDefaultOrOpenModeStatus === 'error' ||
+        accountsLocationsEndpointsStatus === 'error'
+      ? 'error'
+      : accountsLocationsEndpointsStatus === 'success' &&
+        artescaPlusVeeamDefaultOrOpenModeStatus === 'success'
+      ? 'success'
+      : 'idle';
+
+  return { endpointsDeletionDisabledMap, status };
+};
+
+export default useEndpointsDeletionDisabled;