Merge branch 'improvement/ARTESCA-5709-deletion-tooltip-explanation' …

…into q/2.2
scality · May 7, 2024 · 572ce97 · 572ce97
2 parents afa4045 + c28b10e
commit 572ce97
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 51 deletions.
diff --git a/src/react/locations/LocationsList.tsx b/src/react/locations/LocationsList.tsx
@@ -1,5 +1,5 @@
-import { Icon, IconHelp, Stack, Wrap } from '@scality/core-ui';
-import { ComponentType, useMemo, useState } from 'react';
+import { Icon, IconHelp, Stack, Wrap, spacing } from '@scality/core-ui';
+import { useMemo, useState } from 'react';
 import { useMutation, useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
@@ -32,7 +32,8 @@ import { Warning } from '../ui-elements/Warning';
 import { getLocationType } from '../utils/storageOptions';
 import { useWorkflows } from '../workflow/Workflows';
 import { PauseAndResume } from './PauseAndResume';
-import { canDeleteLocation } from './utils';
+import { getLocationDeletionBlocker } from './utils';
+import styled from 'styled-components';
 
 const ActionButtons = ({
   rowValues,
@@ -100,13 +101,42 @@ const ActionButtons = ({
     }
   }, [waiterStatus]);
 
-  const isDeletionEnable = canDeleteLocation(
-    rowValues,
-    replications,
-    transitions,
-    buckets,
-    accountsLocationsAndEndpoints?.endpoints || [],
-  );
+  const { isBuiltin, hasWorkflow, hasBucket, hasEndpoint } =
+    getLocationDeletionBlocker(
+      rowValues,
+      replications,
+      transitions,
+      buckets,
+      accountsLocationsAndEndpoints?.endpoints || [],
+    );
+  const isDeletionDisabled =
+    isBuiltin || hasWorkflow || hasBucket || hasEndpoint;
+
+  const List = styled.ul`
+    margin-left: ${spacing.r8};
+    li {
+      margin-bottom: 0;
+    }
+  `;
+
+  const TooltipOverlay = () => {
+    return isDeletionDisabled ? (
+      isBuiltin ? (
+        <>You cannot delete a default location</>
+      ) : (
+        <div>
+          You cannot delete this location because it has:
+          <List>
+            {hasWorkflow && <li>at least one workflow</li>}
+            {hasBucket && <li>at least one bucket</li>}
+            {hasEndpoint && <li>at least one data service</li>}
+          </List>
+        </div>
+      )
+    ) : (
+      <>Delete location</>
+    );
+  };
 
   return (
     <div>
@@ -139,12 +169,10 @@ const ActionButtons = ({
             onClick={() => setShowModal(true)}
             type="button"
             tooltip={{
-              overlay: isDeletionEnable
-                ? 'Delete Location'
-                : `You can't delete this location`,
-              overlayStyle: { width: '8rem' },
+              overlay: <TooltipOverlay />,
+              overlayStyle: { textAlign: 'left' },
             }}
-            disabled={!isDeletionEnable}
+            disabled={isDeletionDisabled}
           />
         </Stack>
       </Wrap>

diff --git a/src/react/locations/utils.tsx b/src/react/locations/utils.tsx
@@ -88,65 +88,43 @@ function convertToForm(locationProps: LocationInfo): LocationForm {
   return ret;
 }
 
-// TODO: add specific tooltip message about why location can not be deleted
-function canDeleteLocation(
+function getLocationDeletionBlocker(
   location: NextLocation,
   replicationStreams: Array<Replication>,
   transitions: Array<BucketWorkflowTransitionV2>,
   buckets: BucketList,
   endpoints: Array<Endpoint>,
-) {
-  if (!location) {
-    return false;
-  }
-
+): Record<string, boolean> {
   const isBuiltin = location.isBuiltin;
 
-  if (isBuiltin) {
-    return false;
-  }
-
   const checkStreamLocations = replicationStreams.every((r) => {
     //@ts-expect-error fix this when you are working on it
     if (r.destination.location) {
       //@ts-expect-error fix this when you are working on it
       return r.destination.location !== location.name;
     }
-
     return r.destination.locations.every((destLocation) => {
       return destLocation.name !== location.name;
     });
   });
+  const hasReplicationWorkflow = !checkStreamLocations;
 
-  const isTransitionCreatedOnLocation = !!transitions.find(
+  const hasTransitionWorkflow = !!transitions.find(
     (t: BucketWorkflowTransitionV2) => t.locationName === location.name,
   );
 
-  if (isTransitionCreatedOnLocation) {
-    return false;
-  }
-
-  if (!checkStreamLocations) {
-    return false;
-  }
-
-  const checkBucketLocations = buckets.every(
+  const hasBucket = !buckets.every(
     (bucket) => bucket.location !== location.name,
   );
 
-  if (!checkBucketLocations) {
-    return false;
-  }
-
-  const checkEndpointLocations = endpoints.every(
-    (e) => e.locationName !== location.name,
-  );
-
-  if (!checkEndpointLocations) {
-    return false;
-  }
+  const hasEndpoint = !endpoints.every((e) => e.locationName !== location.name);
 
-  return true;
+  return {
+    isBuiltin,
+    hasWorkflow: hasTransitionWorkflow || hasReplicationWorkflow,
+    hasBucket,
+    hasEndpoint,
+  };
 }
 
 function isLocationExists(location: string): boolean {
@@ -205,7 +183,7 @@ export {
   convertToLocation,
   convertToForm,
   newLocationDetails,
-  canDeleteLocation,
+  getLocationDeletionBlocker,
   isLocationExists,
   convertToBucketInfo,
   renderLocation,

diff --git a/src/react/next-architecture/ui/metrics/LatestUsedCapacity.tsx b/src/react/next-architecture/ui/metrics/LatestUsedCapacity.tsx
@@ -35,7 +35,6 @@ export function UsedCapacity({ value }: { value: LatestUsedCapacity }) {
         <PrettyBytes bytes={totalObjects} decimals={2} />{' '}
         <IconHelp
           placement="top"
-          overlayStyle={{ width: '24rem' }}
           tooltipMessage={
             <>
               <Text isGentleEmphazed>