refactor

Author: lucasgoral

src/components/ControlPlane/ManagedResources.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { Fragment, useMemo, useState, useContext, useRef, useCallback } from 'react';
+import { Fragment, useMemo, useState, useRef, useCallback } from 'react';
 import {
   AnalyticalTable,
   AnalyticalTableColumnDefinition,
@@ -32,12 +32,9 @@ import {
 import { useResourcePluralNames } from '../../hooks/useResourcePluralNames';
 import { useSplitter } from '../Splitter/SplitterContext.tsx';
 import { YamlSidePanel } from '../Yaml/YamlSidePanel.tsx';
-
-import { ApiConfigContext } from '../Shared/k8s';
 import { ErrorDialog, ErrorDialogHandle } from '../Shared/ErrorMessageBox.tsx';
 import { APIError } from '../../lib/api/error.ts';
-
-import { handleResourcePatch } from '../../lib/api/types/crossplane/handleResourcePatch.ts';
+import { useHandleResourcePatch } from '../../lib/api/types/crossplane/useHandleResourcePatch.ts';
 
 interface StatusFilterColumn {
   filterValue?: string;
@@ -64,9 +61,9 @@ export function ManagedResources() {
   const { t } = useTranslation();
   const toast = useToast();
   const { openInAside } = useSplitter();
-  const apiConfig = useContext(ApiConfigContext);
   const [pendingDeleteItem, setPendingDeleteItem] = useState<ManagedResourceItem | null>(null);
   const errorDialogRef = useRef<ErrorDialogHandle>(null);
+  const handlePatch = useHandleResourcePatch(errorDialogRef);
 
   const {
     data: managedResources,
@@ -104,22 +101,12 @@ export function ManagedResources() {
             isEdit={true}
             resource={item as unknown as Resource}
             filename={`${item.kind}_${item.metadata.name}`}
-            onApply={async (parsed) =>
-              await handleResourcePatch({
-                item,
-                parsed,
-                getPluralKind,
-                apiConfig,
-                t,
-                toast,
-                errorDialogRef,
-              })
-            }
+            onApply={async (parsed) => await handlePatch(item, parsed)}
           />
         </Fragment>,
       );
     },
-    [openInAside, getPluralKind, apiConfig, t, toast, errorDialogRef],
+    [openInAside, handlePatch],
   );
 
   const columns = useMemo<AnalyticalTableColumnDefinition[]>(

src/components/ControlPlane/ProvidersConfig.tsx

@@ -15,16 +15,13 @@ import { formatDateAsTimeAgo } from '../../utils/i18n/timeAgo';
 
 import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
 
-import { Fragment, useCallback, useContext, useMemo, useRef } from 'react';
+import { Fragment, useCallback, useMemo, useRef } from 'react';
 import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 import { ProviderConfigItem } from '../../lib/shared/types.ts';
 import { ProviderConfigsRowActionsMenu } from './ProviderConfigsActionMenu.tsx';
 import { useSplitter } from '../Splitter/SplitterContext.tsx';
 import { YamlSidePanel } from '../Yaml/YamlSidePanel.tsx';
-import { handleResourcePatch } from '../../lib/api/types/crossplane/handleResourcePatch.ts';
-import { useToast } from '../../context/ToastContext.tsx';
-import { useResourcePluralNames } from '../../hooks/useResourcePluralNames';
-import { ApiConfigContext } from '../Shared/k8s';
+import { useHandleResourcePatch } from '../../lib/api/types/crossplane/useHandleResourcePatch.ts';
 import { ErrorDialog, ErrorDialogHandle } from '../Shared/ErrorMessageBox.tsx';
 
 type Rows = {
@@ -42,18 +39,15 @@ interface CellRow<T> {
 export function ProvidersConfig() {
   const { t } = useTranslation();
   const { openInAside } = useSplitter();
-  const toast = useToast();
-  const apiConfig = useContext(ApiConfigContext);
   const errorDialogRef = useRef<ErrorDialogHandle>(null);
+  const handlePatch = useHandleResourcePatch(errorDialogRef);
 
   const rows: Rows[] = [];
 
   const { data: providerConfigsList, isLoading } = useProvidersConfigResource({
     refreshInterval: 60000, // Resources are quite expensive to fetch, so we refresh every 60 seconds
   });
 
-  const { getPluralKind } = useResourcePluralNames();
-
   if (providerConfigsList) {
     providerConfigsList.forEach((provider) => {
       provider.items.forEach((config) => {
@@ -77,25 +71,15 @@ export function ProvidersConfig() {
             isEdit={true}
             resource={item as unknown as Resource}
             filename={`${item.kind}_${item.metadata.name}`}
-            onApply={async (parsed) =>
-              await handleResourcePatch({
-                item,
-                parsed,
-                getPluralKind,
-                apiConfig,
-                t,
-                toast,
-                errorDialogRef,
-              })
-            }
+            onApply={async (parsed) => await handlePatch(item, parsed)}
           />
         </Fragment>,
       );
     },
-    [openInAside, getPluralKind, apiConfig, t, toast],
+    [openInAside, handlePatch],
   );
 
-  const columns = useMemo(
+  const columns = useMemo<AnalyticalTableColumnDefinition[]>(
     () =>
       [
         {

src/lib/api/types/crossplane/useHandleResourcePatch.ts

@@ -0,0 +1,52 @@
+import { useContext } from 'react';
+import type { RefObject } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ApiConfigContext } from '../../../../components/Shared/k8s';
+import { useToast } from '../../../../context/ToastContext.tsx';
+import { useResourcePluralNames } from '../../../../hooks/useResourcePluralNames';
+import { ErrorDialogHandle } from '../../../../components/Shared/ErrorMessageBox.tsx';
+import { fetchApiServerJson } from '../../fetch.ts';
+import { APIError } from '../../error.ts';
+
+export type PatchableResourceRef = {
+  kind: string;
+  apiVersion?: string;
+  metadata: {
+    name: string;
+    namespace?: string;
+  };
+};
+
+export const useHandleResourcePatch = (errorDialogRef?: RefObject<ErrorDialogHandle | null>) => {
+  const { t } = useTranslation();
+  const toast = useToast();
+  const apiConfig = useContext(ApiConfigContext);
+  const { getPluralKind } = useResourcePluralNames();
+
+  return async (item: PatchableResourceRef, parsed: unknown): Promise<boolean> => {
+    const resourceName = item?.metadata?.name ?? '';
+    const apiVersion = item?.apiVersion ?? '';
+    const pluralKind = getPluralKind(item.kind);
+    const namespace = item?.metadata?.namespace;
+
+    toast.show(t('ManagedResources.patchStarted', { resourceName }));
+
+    try {
+      const basePath = `/apis/${apiVersion}`;
+      const path = namespace
+        ? `${basePath}/namespaces/${namespace}/${pluralKind}/${resourceName}`
+        : `${basePath}/${pluralKind}/${resourceName}`;
+
+      await fetchApiServerJson(path, apiConfig, undefined, 'PATCH', JSON.stringify(parsed));
+      toast.show(t('ManagedResources.patchSuccess', { resourceName }));
+      return true;
+    } catch (e) {
+      toast.show(t('ManagedResources.patchError', { resourceName }));
+      if (e instanceof APIError && errorDialogRef?.current) {
+        errorDialogRef.current.showErrorDialog(`${e.message}: ${JSON.stringify(e.info)}`);
+      }
+      console.error('Failed to patch resource', e);
+      return false;
+    }
+  };
+};