PR changes

Author: Hubert-Szczepanski-SAP

public/locales/en.json

@@ -43,7 +43,9 @@
     "deleteDialogTitle": "Delete resource",
     "advancedOptions": "Advanced options",
     "forceDeletion": "Force deletion",
-    "forceWarningLine": "Force deletion removes finalizers. Related resources may not be deleted and cleanup may be skipped."
+    "forceWarningLine": "Force deletion removes finalizers. Related resources may not be deleted and cleanup may be skipped.",
+    "deleteStarted": "Deleting {{resourceName}} initialized",
+    "actionColumnHeader": " "
   },
   "ProvidersConfig": {
     "headerProviderConfigs": "Provider Configs",

src/components/ControlPlane/ManagedResources.module.css

@@ -5,7 +5,7 @@ import {
   AnalyticalTableScaleWidthMode,
   Title,
 } from '@ui5/webcomponents-react';
-import { useApiResource, useCRDItemsMapping } from '../../lib/api/useApiResource';
+import { useApiResource, useApiResourceMutation } from '../../lib/api/useApiResource';
 import { ManagedResourcesRequest } from '../../lib/api/types/crossplane/listManagedResources';
 import { formatDateAsTimeAgo } from '../../utils/i18n/timeAgo';
 import IllustratedError from '../Shared/IllustratedError';
@@ -19,9 +19,13 @@ import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 import { ManagedResourceItem } from '../../lib/shared/types.ts';
 import { ManagedResourceDeleteDialog } from '../Dialogs/ManagedResourceDeleteDialog.tsx';
 import { RowActionsMenu } from './ManagedResourcesActionMenu.tsx';
-import styles from './ManagedResources.module.css';
-
-const getItemKey = (item: ManagedResourceItem): string => `${item.kind}-${item.metadata.name}`;
+import { useToast } from '../../context/ToastContext.tsx';
+import {
+  DeleteManagedResourceType,
+  DeleteMCPManagedResource,
+  PatchResourceForForceDeletion,
+} from '../../lib/api/types/crate/deleteResource';
+import { useResourcePluralNames } from '../../hooks/useResourcePluralNames';
 
 interface CellData<T> {
   cell: {
@@ -47,9 +51,8 @@ type ResourceRow = {
 
 export function ManagedResources() {
   const { t } = useTranslation();
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [selectedItem, setSelectedItem] = useState<ManagedResourceItem | null>(null);
-  const [deletingItems, setDeletingItems] = useState<Set<string>>(new Set());
+  const toast = useToast();
+  const [pendingDeleteItem, setPendingDeleteItem] = useState<ManagedResourceItem | null>(null);
 
   const {
     data: managedResources,
@@ -59,19 +62,20 @@ export function ManagedResources() {
     refreshInterval: resourcesInterval,
   });
 
-  const openDeleteDialog = (item: ManagedResourceItem) => {
-    setSelectedItem(item);
-    setDeleteDialogOpen(true);
-  };
+  const { getPluralKind, isLoading: isLoadingPluralNames, error: pluralNamesError } = useResourcePluralNames();
 
-  const handleDeleteStart = (item: ManagedResourceItem) => {
-    const itemKey = getItemKey(item);
-    setDeletingItems((prev) => new Set(prev.add(itemKey)));
-  };
+  const resourceName = pendingDeleteItem?.metadata?.name ?? '';
+  const apiVersion = pendingDeleteItem?.apiVersion ?? '';
+  const pluralKind = pendingDeleteItem ? getPluralKind(pendingDeleteItem.kind) : '';
+  const namespace = pendingDeleteItem?.metadata?.namespace ?? '';
 
-  const { data: kindMapping } = useCRDItemsMapping({
-    refreshInterval: resourcesInterval,
-  });
+  const { trigger: deleteTrigger } = useApiResourceMutation<DeleteManagedResourceType>(
+    DeleteMCPManagedResource(apiVersion, pluralKind, resourceName, namespace),
+  );
+
+  const { trigger: patchTrigger } = useApiResourceMutation<undefined>(
+    PatchResourceForForceDeletion(apiVersion, pluralKind, resourceName, namespace),
+  );
 
   const columns: AnalyticalTableColumnDefinition[] = useMemo(
     () => [
@@ -134,32 +138,27 @@ export function ManagedResources() {
         },
       },
       {
-        Header: ' ',
+        Header: t('ManagedResources.actionColumnHeader'),
         hAlign: 'Center',
         width: 60,
         disableFilters: true,
         Cell: (cellData: CellData<ResourceRow>) => {
           const item = cellData.cell.row.original?.item as ManagedResourceItem;
-          const itemKey = item ? getItemKey(item) : '';
-          const isDeleting = deletingItems.has(itemKey);
 
           return cellData.cell.row.original?.item ? (
-            <RowActionsMenu item={item} isDeleting={isDeleting} onOpen={openDeleteDialog} />
+            <RowActionsMenu item={item} onOpen={openDeleteDialog} />
           ) : undefined;
         },
       },
     ],
-    [t, deletingItems],
+    [t],
   );
 
   const rows: ResourceRow[] =
     managedResources
       ?.filter((managedResource) => managedResource.items)
       .flatMap((managedResource) =>
         managedResource.items?.map((item) => {
-          const itemKey = getItemKey(item);
-          const isDeleting = deletingItems.has(itemKey);
-
           const conditionSynced = item.status?.conditions?.find((condition) => condition.type === 'Synced');
           const conditionReady = item.status?.conditions?.find((condition) => condition.type === 'Ready');
 
@@ -174,26 +173,46 @@ export function ManagedResources() {
             item: item,
             conditionSyncedMessage: conditionSynced?.message ?? conditionSynced?.reason ?? '',
             conditionReadyMessage: conditionReady?.message ?? conditionReady?.reason ?? '',
-            className: isDeleting ? styles.deletingRow : undefined,
           };
         }),
       ) ?? [];
 
+  const openDeleteDialog = (item: ManagedResourceItem) => {
+    setPendingDeleteItem(item);
+  };
+
+  const handleDeletionConfirmed = async (item: ManagedResourceItem, force: boolean) => {
+    toast.show(t('ManagedResources.deleteStarted', { resourceName: item.metadata.name }));
+
+    try {
+      await deleteTrigger();
+
+      if (force) {
+        await patchTrigger();
+      }
+    } catch (_) {
+      // Ignore errors - will be handled by the mutation hook
+    }
+  };
+
+  const combinedError = error || pluralNamesError;
+  const combinedLoading = isLoading || isLoadingPluralNames;
+
   return (
     <>
       <Title level="H4">{t('ManagedResources.header')}</Title>
 
-      {error && <IllustratedError details={error.message} />}
+      {combinedError && <IllustratedError details={combinedError.message} />}
 
-      {!error && (
+      {!combinedError && (
         <>
           <AnalyticalTable
             columns={columns}
             data={rows}
             minRows={1}
             groupBy={['kind']}
             scaleWidthMode={AnalyticalTableScaleWidthMode.Smart}
-            loading={isLoading}
+            loading={combinedLoading}
             filterable
             retainColumnWidth
             reactTableOptions={{
@@ -209,11 +228,10 @@ export function ManagedResources() {
             }}
           />
           <ManagedResourceDeleteDialog
-            kindMapping={kindMapping}
-            open={deleteDialogOpen}
-            item={selectedItem}
-            onClose={() => setDeleteDialogOpen(false)}
-            onDeleteStart={handleDeleteStart}
+            open={!!pendingDeleteItem}
+            item={pendingDeleteItem}
+            onClose={() => setPendingDeleteItem(null)}
+            onDeletionConfirmed={handleDeletionConfirmed}
           />
         </>
       )}

src/components/ControlPlane/ManagedResources.tsx

@@ -1,28 +1,43 @@
-import { FC, useRef } from 'react';
+import { FC, useRef, useState } from 'react';
 import { Button, Menu, MenuItem, MenuDomRef } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
 import { ManagedResourceItem } from '../../lib/shared/types';
+import type { ButtonClickEventDetail } from '@ui5/webcomponents/dist/Button.js';
+import type { Ui5CustomEvent, ButtonDomRef } from '@ui5/webcomponents-react';
 
 interface RowActionsMenuProps {
   item: ManagedResourceItem;
   onOpen: (item: ManagedResourceItem) => void;
-  isDeleting: boolean;
 }
 
-export const RowActionsMenu: FC<RowActionsMenuProps> = ({ item, onOpen, isDeleting }) => {
+export const RowActionsMenu: FC<RowActionsMenuProps> = ({ item, onOpen }) => {
   const { t } = useTranslation();
   const popoverRef = useRef<MenuDomRef>(null);
+  const [open, setOpen] = useState(false);
+
+  const handleOpenerClick = (e: Ui5CustomEvent<ButtonDomRef, ButtonClickEventDetail>) => {
+    if (popoverRef.current && e.currentTarget) {
+      popoverRef.current.opener = e.currentTarget as unknown as HTMLElement;
+      setOpen((prev) => !prev);
+    }
+  };
 
   return (
     <>
-      <Button icon="overflow" icon-end disabled={isDeleting} onClick={() => onOpen(item)} />
+      <Button icon="overflow" design="Transparent" onClick={handleOpenerClick} />
       <Menu
         ref={popoverRef}
-        onItemClick={() => {
-          onOpen(item);
+        open={open}
+        onItemClick={(event) => {
+          const element = event.detail.item as HTMLElement;
+          const action = element.dataset.action;
+          if (action === 'delete') {
+            onOpen(item);
+          }
+          setOpen(false);
         }}
       >
-        <MenuItem text={t('ManagedResources.deleteAction')} icon="delete" />
+        <MenuItem text={t('ManagedResources.deleteAction')} icon="delete" data-action="delete" />
       </Menu>
     </>
   );

src/components/ControlPlane/ManagedResourcesActionMenu.tsx

@@ -1,4 +1,4 @@
-import { FC, useState, useMemo, useEffect } from 'react';
+import { FC, useState, useEffect } from 'react';
 import {
   Button,
   CheckBox,
@@ -11,26 +11,19 @@ import {
 } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
 import { ManagedResourceItem } from '../../lib/shared/types';
-import { useApiResourceMutation } from '../../lib/api/useApiResource';
-import {
-  DeleteManagedResourceType,
-  DeleteMCPManagedResource,
-  PatchResourceForForceDeletion,
-} from '../../lib/api/types/crate/deleteResource';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import { DeleteConfirmationForm } from './DeleteConfirmationForm.tsx';
 import styles from './ManagedResourceDeleteDialog.module.css';
-import { getPluralKind } from '../Helper/getPluralKind.ts';
 
 type Props = {
-  kindMapping: Record<string, string>;
   open: boolean;
   onClose: () => void;
   item: ManagedResourceItem | null;
-  onDeleteStart: (item: ManagedResourceItem) => void;
+  onDeletionConfirmed?: (item: ManagedResourceItem, force: boolean) => void;
+  onCanceled?: () => void;
 };
 
-export const ManagedResourceDeleteDialog: FC<Props> = ({ kindMapping, open, onClose, item, onDeleteStart }) => {
+export const ManagedResourceDeleteDialog: FC<Props> = ({ open, onClose, item, onDeletionConfirmed, onCanceled }) => {
   const { t } = useTranslation();
   const [forceDeletion, setForceDeletion] = useState(false);
   const [advancedCollapsed, setAdvancedCollapsed] = useState(true);
@@ -44,59 +37,39 @@ export const ManagedResourceDeleteDialog: FC<Props> = ({ kindMapping, open, onCl
     }
   }, [open]);
 
-  const { apiVersion, resourceName, pluralKind, namespace } = useMemo(
-    () => ({
-      namespace: item?.metadata?.namespace ?? '',
-      apiVersion: item?.apiVersion ?? '',
-      resourceName: item?.metadata?.name ?? '',
-      pluralKind: item ? getPluralKind(item, kindMapping) : '',
-    }),
-    [item, kindMapping],
-  );
+  const resourceName = item?.metadata?.name ?? '';
 
   const onConfirmationInputChange = (event: Ui5CustomEvent<InputDomRef>) => {
     setConfirmationText(event.target.value);
   };
 
   const isConfirmed = confirmationText === resourceName;
 
-  const { trigger: deleteTrigger } = useApiResourceMutation<DeleteManagedResourceType>(
-    DeleteMCPManagedResource(apiVersion, pluralKind, resourceName, namespace),
-  );
-
-  const { trigger: patchTrigger } = useApiResourceMutation<undefined>(
-    PatchResourceForForceDeletion(apiVersion, pluralKind, resourceName, namespace),
-  );
-
   const handleForceDeletionChange = () => {
     setForceDeletion(!forceDeletion);
     if (!forceDeletion) setAdvancedCollapsed(false);
   };
 
-  const handleDelete = async () => {
-    if (!item) return;
-
-    onDeleteStart(item);
-
-    try {
-      await deleteTrigger();
-
-      if (forceDeletion) {
-        await patchTrigger();
-      }
-    } catch (_) {
-      // Ignore errors - item can be deleted before patch and it's ok.
+  const handleDelete = () => {
+    if (item && onDeletionConfirmed) {
+      onDeletionConfirmed(item, forceDeletion);
     }
+    onClose();
+  };
 
+  const handleCancel = () => {
     onClose();
+    if (onCanceled) {
+      onCanceled();
+    }
   };
 
   return (
     <Dialog
       open={open}
       headerText={t('ManagedResources.deleteDialogTitle')}
       className={styles.dialog}
-      onClose={onClose}
+      onClose={handleCancel}
     >
       <FlexBox direction="Column" className={styles.content}>
         <DeleteConfirmationForm
@@ -126,7 +99,7 @@ export const ManagedResourceDeleteDialog: FC<Props> = ({ kindMapping, open, onCl
         </Panel>
 
         <FlexBox justifyContent="End" className={styles.actions}>
-          <Button design="Transparent" onClick={onClose}>
+          <Button design="Transparent" onClick={handleCancel}>
             {t('buttons.cancel')}
           </Button>
           <Button design={ButtonDesign.Negative} disabled={!isConfirmed} onClick={handleDelete}>

src/components/Dialogs/ManagedResourceDeleteDialog.tsx

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+import { useCRDItemsMapping } from '../lib/api/useApiResource';
+import { resourcesInterval } from '../lib/shared/constants';
+
+export const useResourcePluralNames = () => {
+  const {
+    data: kindMapping,
+    isLoading,
+    error,
+  } = useCRDItemsMapping({
+    refreshInterval: resourcesInterval,
+  });
+
+  const getPluralKind = useMemo(() => {
+    return (singularKind: string): string => {
+      if (!kindMapping) return '';
+      return kindMapping[singularKind.toLowerCase()] ?? '';
+    };
+  }, [kindMapping]);
+
+  return {
+    getPluralKind,
+    isLoading,
+    error,
+  };
+};