Merge branch 'main' into fix/visualise-resources-on-graph-by-name-and-version

Author: Hubert-Szczepanski-SAP

public/locales/en.json

@@ -34,7 +34,15 @@
     "tableHeaderName": "Name",
     "tableHeaderCreated": "Created",
     "tableHeaderSynced": "Synced",
-    "tableHeaderReady": "Ready"
+    "tableHeaderReady": "Ready",
+    "tableHeaderDelete": "Delete",
+    "deleteAction": "Delete resource",
+    "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.",
+    "deleteStarted": "Deleting {{resourceName}} initialized",
+    "actionColumnHeader": " "
   },
   "ProvidersConfig": {
     "tableHeaderProvider": "Provider",

src/components/ComponentsSelection/ComponentsSelection.module.css

@@ -3,3 +3,37 @@
   background: var(--sapBackgroundColor);
   border-bottom: 1px solid var(--sapList_BorderColor);
 }
+
+.row:hover {
+  background: var(--sapList_Hover_Background);
+}
+
+.row.providerRow {
+  position: relative;
+  padding-inline-start: calc(1rem + 16px);
+  background: color-mix(in srgb, var(--sapBackgroundColor) 98%, #000 2%);
+}
+
+@media (prefers-color-scheme: dark) {
+  .row.providerRow {
+    background: color-mix(in srgb, var(--sapBackgroundColor) 97%, #fff 3%);
+  }
+}
+
+.row.providerRow:hover {
+  background: var(--sapList_Hover_Background);
+}
+
+.row.providerRow::before {
+  content: "";
+  position: absolute;
+  inset-block: 6px;
+  inset-inline-start: 1.6rem;
+  width: 2px;
+  background: var(--sapList_BorderColor);
+}
+
+.providerRow :global(ui5-checkbox) {
+  transform: scale(0.9);
+  transform-origin: left center;
+}

src/components/ComponentsSelection/ComponentsSelection.tsx

@@ -40,10 +40,31 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
 
   const selectedComponents = useMemo(() => getSelectedComponents(componentsList), [componentsList]);
 
+  const isProvider = useCallback((componentName: string) => {
+    return componentName.includes('provider') && componentName !== 'crossplane';
+  }, []);
+
   const searchResults = useMemo(() => {
     const lowerSearch = searchTerm.toLowerCase();
-    return componentsList.filter(({ name }) => name.toLowerCase().includes(lowerSearch));
-  }, [componentsList, searchTerm]);
+    const filtered = componentsList.filter(({ name }) => name.toLowerCase().includes(lowerSearch));
+
+    // Sort components: crossplane first, then providers, then rest
+    return filtered.sort((a, b) => {
+      const isCrossplaneA = a.name === 'crossplane';
+      const isCrossplaneB = b.name === 'crossplane';
+
+      if (isCrossplaneA && !isCrossplaneB) return -1;
+      if (isCrossplaneB && !isCrossplaneA) return 1;
+
+      const isProviderA = isProvider(a.name);
+      const isProviderB = isProvider(b.name);
+
+      if (isProviderA && !isProviderB) return -1;
+      if (isProviderB && !isProviderA) return 1;
+
+      return a.name.localeCompare(b.name);
+    });
+  }, [componentsList, searchTerm, isProvider]);
 
   const handleSelectionChange = useCallback(
     (e: Ui5CustomEvent<CheckBoxDomRef, { checked: boolean }>) => {
@@ -105,10 +126,12 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
           {searchResults.length > 0 ? (
             searchResults.map((component) => {
               const providerDisabled = isProviderDisabled(component);
+              const isProviderComponent = isProvider(component.name);
+
               return (
                 <FlexBox
                   key={component.name}
-                  className={styles.row}
+                  className={`${styles.row} ${isProviderComponent ? styles.providerRow : ''}`}
                   gap={10}
                   justifyContent="SpaceBetween"
                   data-testid={`component-row-${component.name}`}
@@ -120,6 +143,7 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
                     checked={component.isSelected}
                     disabled={providerDisabled}
                     aria-label={component.name}
+                    className={isProviderComponent ? styles.checkBox : ''}
                     onChange={handleSelectionChange}
                   />
                   <FlexBox gap={10} justifyContent="SpaceBetween" alignItems="Baseline">

src/components/ControlPlane/ManagedResources.tsx

@@ -8,19 +8,28 @@ import {
   Toolbar,
   ToolbarSpacer,
 } from '@ui5/webcomponents-react';
-import { useApiResource } 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';
-import '@ui5/webcomponents-icons/dist/sys-enter-2';
-import '@ui5/webcomponents-icons/dist/sys-cancel-2';
 import { resourcesInterval } from '../../lib/shared/constants';
 
 import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
 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 { useToast } from '../../context/ToastContext.tsx';
+import {
+  DeleteManagedResourceType,
+  DeleteMCPManagedResource,
+  PatchResourceForForceDeletion,
+  PatchResourceForForceDeletionBody,
+} from '../../lib/api/types/crate/deleteResource';
+import { useResourcePluralNames } from '../../hooks/useResourcePluralNames';
 
 interface CellData<T> {
   cell: {
@@ -46,15 +55,32 @@ type ResourceRow = {
 
 export function ManagedResources() {
   const { t } = useTranslation();
+  const toast = useToast();
+  const [pendingDeleteItem, setPendingDeleteItem] = useState<ManagedResourceItem | null>(null);
 
   const {
     data: managedResources,
     error,
     isLoading,
   } = useApiResource(ManagedResourcesRequest, {
-    refreshInterval: resourcesInterval, // Resources are quite expensive to fetch, so we refresh every 30 seconds
+    refreshInterval: resourcesInterval,
   });
 
+  const { getPluralKind, isLoading: isLoadingPluralNames, error: pluralNamesError } = useResourcePluralNames();
+
+  const resourceName = pendingDeleteItem?.metadata?.name ?? '';
+  const apiVersion = pendingDeleteItem?.apiVersion ?? '';
+  const pluralKind = pendingDeleteItem ? getPluralKind(pendingDeleteItem.kind) : '';
+  const namespace = pendingDeleteItem?.metadata?.namespace ?? '';
+
+  const { trigger: deleteTrigger } = useApiResourceMutation<DeleteManagedResourceType>(
+    DeleteMCPManagedResource(apiVersion, pluralKind, resourceName, namespace),
+  );
+
+  const { trigger: patchTrigger } = useApiResourceMutation<DeleteManagedResourceType>(
+    PatchResourceForForceDeletion(apiVersion, pluralKind, resourceName, namespace),
+  );
+
   const columns: AnalyticalTableColumnDefinition[] = useMemo(
     () => [
       {
@@ -109,10 +135,24 @@ export function ManagedResources() {
         width: 75,
         accessor: 'yaml',
         disableFilters: true,
-        Cell: (cellData: CellData<ResourceRow>) =>
-          cellData.cell.row.original?.item ? (
+        Cell: (cellData: CellData<ResourceRow>) => {
+          return cellData.cell.row.original?.item ? (
             <YamlViewButton variant="resource" resource={cellData.cell.row.original?.item as Resource} />
-          ) : undefined,
+          ) : undefined;
+        },
+      },
+      {
+        Header: t('ManagedResources.actionColumnHeader'),
+        hAlign: 'Center',
+        width: 60,
+        disableFilters: true,
+        Cell: (cellData: CellData<ResourceRow>) => {
+          const item = cellData.cell.row.original?.item as ManagedResourceItem;
+
+          return cellData.cell.row.original?.item ? (
+            <RowActionsMenu item={item} onOpen={openDeleteDialog} />
+          ) : undefined;
+        },
       },
     ],
     [t],
@@ -141,11 +181,34 @@ export function ManagedResources() {
         }),
       ) ?? [];
 
+  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(PatchResourceForForceDeletionBody);
+      }
+    } catch (_) {
+      // Ignore errors - will be handled by the mutation hook
+    } finally {
+      setPendingDeleteItem(null);
+    }
+  };
+
+  const combinedError = error || pluralNamesError;
+  const combinedLoading = isLoading || isLoadingPluralNames;
+
   return (
     <>
-      {error && <IllustratedError details={error.message} />}
+      {combinedError && <IllustratedError details={combinedError.message} />}
 
-      {!error && (
+      {!combinedError && (
         <Panel
           fixed
           header={
@@ -155,28 +218,36 @@ export function ManagedResources() {
             </Toolbar>
           }
         >
-          <AnalyticalTable
-            columns={columns}
-            data={rows}
-            minRows={1}
-            groupBy={['kind']}
-            scaleWidthMode={AnalyticalTableScaleWidthMode.Smart}
-            loading={isLoading}
-            filterable
-            // Prevent the table from resetting when the data changes
-            retainColumnWidth
-            reactTableOptions={{
-              autoResetHiddenColumns: false,
-              autoResetPage: false,
-              autoResetExpanded: false,
-              autoResetGroupBy: false,
-              autoResetSelectedRows: false,
-              autoResetSortBy: false,
-              autoResetFilters: false,
-              autoResetRowState: false,
-              autoResetResize: false,
-            }}
-          />
+          <>
+            <AnalyticalTable
+              columns={columns}
+              data={rows}
+              minRows={1}
+              groupBy={['kind']}
+              scaleWidthMode={AnalyticalTableScaleWidthMode.Smart}
+              loading={combinedLoading}
+              filterable
+              retainColumnWidth
+              reactTableOptions={{
+                autoResetHiddenColumns: false,
+                autoResetPage: false,
+                autoResetExpanded: false,
+                autoResetGroupBy: false,
+                autoResetSelectedRows: false,
+                autoResetSortBy: false,
+                autoResetFilters: false,
+                autoResetRowState: false,
+                autoResetResize: false,
+              }}
+            />
+
+            <ManagedResourceDeleteDialog
+              open={!!pendingDeleteItem}
+              item={pendingDeleteItem}
+              onClose={() => setPendingDeleteItem(null)}
+              onDeletionConfirmed={handleDeletionConfirmed}
+            />
+          </>
         </Panel>
       )}
     </>

src/components/ControlPlane/ManagedResourcesActionMenu.tsx

@@ -0,0 +1,44 @@
+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;
+}
+
+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" design="Transparent" onClick={handleOpenerClick} />
+      <Menu
+        ref={popoverRef}
+        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" data-action="delete" />
+      </Menu>
+    </>
+  );
+};

src/components/Dialogs/DeleteConfirmationDialog.cy.tsx

@@ -42,15 +42,15 @@ describe('DeleteConfirmationDialog', () => {
   it('should enable Delete button when correct resource name is typed', () => {
     mountDialog();
 
-    cy.get('ui5-input[id*="mcp-name-input"]').find(' input[id*="inner"]').type('test-resource', { force: true });
+    cy.get('ui5-input[id*="delete-confirm-input"]').find(' input[id*="inner"]').type('test-resource', { force: true });
 
     cy.get('ui5-button').contains('Delete').should('not.have.attr', 'disabled');
   });
 
   it('should keep Delete button disabled when incorrect name is typed', () => {
     mountDialog();
 
-    cy.get('ui5-input[id*="mcp-name-input"]').find(' input[id*="inner"]').type('wrong-name', { force: true });
+    cy.get('ui5-input[id*="delete-confirm-input"]').find(' input[id*="inner"]').type('wrong-name', { force: true });
 
     cy.get('ui5-button').contains('Delete').should('have.attr', 'disabled');
   });
@@ -68,7 +68,7 @@ describe('DeleteConfirmationDialog', () => {
   it('should call onDeletionConfirmed and setIsOpen when Delete is confirmed', () => {
     mountDialog();
 
-    cy.get('ui5-input[id*="mcp-name-input"]').find(' input[id*="inner"]').type('test-resource');
+    cy.get('ui5-input[id*="delete-confirm-input"]').find(' input[id*="inner"]').type('test-resource');
 
     cy.get('ui5-button').contains('Delete').click();
 
@@ -82,15 +82,15 @@ describe('DeleteConfirmationDialog', () => {
     mountDialog();
 
     // Type something
-    cy.get('ui5-input[id*="mcp-name-input"]').find(' input[id*="inner"]').type('test-resource', { force: true });
+    cy.get('ui5-input[id*="delete-confirm-input"]').find(' input[id*="inner"]').type('test-resource', { force: true });
 
     // Close dialog
     cy.get('ui5-button').contains('Cancel').click();
 
     // Reopen dialog
     mountDialog();
 
-    cy.get('ui5-input[id*="mcp-name-input"]').find(' input[id*="inner"]').should('have.value', '');
+    cy.get('ui5-input[id*="delete-confirm-input"]').find(' input[id*="inner"]').should('have.value', '');
   });
 
   it('should display correct resource name in all labels', () => {