better read of custom comp

Author: soleksy-splunk

ui/.eslintrc.cjs

@@ -55,7 +55,7 @@ module.exports = {
                 'testing-library/await-async-queries': 'error', // Prevent missing awaits on async queries
                 'testing-library/no-await-sync-queries': 'error', // Prevent unnecessary await on sync queries
                 'testing-library/no-dom-import': 'error', // Prevent wrong imports; enforce @testing-library/react
-                'testing-library/prefer-presence-queries': 'error', // prefers getBy*/queryBy* over findBy* for presence/absence checks 
+                'testing-library/prefer-presence-queries': 'error', // prefers getBy*/queryBy* over findBy* for presence/absence checks
             },
         },
     ],

ui/src/components/BaseFormView/BaseFormView.tsx

@@ -1116,8 +1116,7 @@ class BaseFormView extends PureComponent<BaseFormProps, BaseFormState> {
                     this.props.groupName
                 );
                 resolve(Hook);
-            }
-            if (type === 'external') {
+            } else if (type === 'external') {
                 import(/* @vite-ignore */ `${getBuildDirPath()}/custom/${module}.js`).then(
                     (external) => {
                         const Hook = external.default as CustomHookConstructor;

ui/src/components/table/CustomTableCell.tsx

@@ -7,6 +7,7 @@ import { getBuildDirPath } from '../../util/script';
 import { RowDataFields } from '../../context/TableContext';
 import { CustomCellBase, CustomCellConstructor } from './CustomTableCellBase';
 import { invariant } from '../../util/invariant';
+import { CustomComponentContextType } from '../../context/CustomComponentContext';
 
 type CustomCellError = {
     methodName: string;
@@ -26,6 +27,7 @@ type CustomTableCellProps = {
     field: string;
     fileName: string;
     type: string;
+    customComponentContext?: CustomComponentContextType;
 };
 
 type CustomTableCellState = {
@@ -36,6 +38,8 @@ type CustomTableCellState = {
 };
 
 class CustomTableCell extends Component<CustomTableCellProps, CustomTableCellState> {
+    customComponentContext?: CustomComponentContextType;
+
     customCell?: CustomCellBase;
 
     el: HTMLSpanElement | null = null;
@@ -48,6 +52,7 @@ class CustomTableCell extends Component<CustomTableCellProps, CustomTableCellSta
             methodNotPresentError: '', // Stores error message if a method is missing
             rowUpdatedByControl: false, // Flag to track if the row was updated by custom control
         };
+        this.customComponentContext = props.customComponentContext; // Store custom component context
     }
 
     // Lifecycle method that updates the component's state when props change
@@ -83,8 +88,10 @@ class CustomTableCell extends Component<CustomTableCellProps, CustomTableCellSta
         new Promise((resolve, reject) => {
             const { type, fileName } = this.props;
             const globalConfig = getUnifiedConfigs();
-
-            if (type === 'external') {
+            if (this.customComponentContext?.[this.props.fileName]) {
+                const Control = this.customComponentContext?.[this.props.fileName];
+                resolve(Control as CustomCellConstructor);
+            } else if (type === 'external') {
                 import(/* webpackIgnore: true */ `${getBuildDirPath()}/custom/${fileName}.js`)
                     .then((external) => resolve(external.default))
                     .catch((error) => reject(error));
@@ -137,12 +144,14 @@ class CustomTableCell extends Component<CustomTableCellProps, CustomTableCellSta
 
                 this.handleNoRender();
             })
-            .catch(() =>
+            .catch((e) => {
                 this.setState({
                     loading: false,
                     methodNotPresentError: 'Error loading custom Cell module',
-                })
-            );
+                });
+                // eslint-disable-next-line no-console
+                console.error(`[Custom Cell] Error loading custom control ${e}`);
+            });
     }
 
     render() {

ui/src/components/table/CustomTableControl.tsx

@@ -8,6 +8,7 @@ import { getBuildDirPath } from '../../util/script';
 import { getExpansionRowData } from './TableExpansionRowData';
 import { RowDataFields } from '../../context/TableContext';
 import { CustomRowBase, CustomRowConstructor } from './CustomRowBase';
+import { CustomComponentContextType } from '../../context/CustomComponentContext';
 
 type CustomControlError = {
     methodName: string;
@@ -27,6 +28,7 @@ type CustomTableControlProps = {
     fileName: string;
     type: string;
     moreInfo: Array<{ name: string; value: string; mapping?: Record<string, string> }>;
+    customComponentContext?: CustomComponentContextType;
 };
 
 type CustomTableControlState = {
@@ -38,6 +40,8 @@ type CustomTableControlState = {
 };
 
 class CustomTableControl extends Component<CustomTableControlProps, CustomTableControlState> {
+    customComponentContext?: CustomComponentContextType;
+
     customControl?: CustomRowBase; // Custom control instance
 
     el: HTMLSpanElement | null = null; // Reference to the DOM element for the custom control
@@ -54,6 +58,7 @@ class CustomTableControl extends Component<CustomTableControlProps, CustomTableC
             rowUpdatedByControl: false, // Flag to track if the row was updated by custom control
         };
         this.shouldRender = true; // Flag to control rendering logic
+        this.customComponentContext = props.customComponentContext; // Store custom component context
     }
 
     // Lifecycle method that updates the component's state when props change
@@ -101,8 +106,10 @@ class CustomTableControl extends Component<CustomTableControlProps, CustomTableC
         new Promise((resolve, reject) => {
             const { type, fileName } = this.props;
             const globalConfig = getUnifiedConfigs();
-
-            if (type === 'external') {
+            if (this.customComponentContext?.[this.props.fileName]) {
+                const Control = this.customComponentContext?.[this.props.fileName];
+                resolve(Control as CustomRowConstructor);
+            } else if (type === 'external') {
                 import(/* @vite-ignore */ `${getBuildDirPath()}/custom/${fileName}.js`)
                     .then((external) => resolve(external.default))
                     .catch((error) => reject(error));
@@ -195,12 +202,14 @@ class CustomTableControl extends Component<CustomTableControlProps, CustomTableC
                     this.handleNoGetDLRows();
                 }
             })
-            .catch(() =>
+            .catch((e) => {
                 this.setState({
                     loading: false,
                     methodNotPresentError: 'Error loading custom control',
-                })
-            );
+                });
+                // eslint-disable-next-line no-console
+                console.error(`[Custom Control] Error loading custom control ${e}`);
+            });
     }
 
     render() {

ui/src/components/table/tests/TableExpansionRow.test.tsx

@@ -153,12 +153,12 @@ const getExpandable = (inputRow: HTMLElement) => {
 };
 
 async function expectIntervalInExpandedRow(inputRow: HTMLElement, expectedInterval: number) {
-    mockCustomRowInput();
     const expandable = getExpandable(inputRow);
     if (expandable.getAttribute('aria-expanded') === 'false') {
         await userEvent.click(expandable);
         await waitFor(() => expect(expandable.getAttribute('aria-expanded')).not.toBe('false'));
     }
+
     const loading = screen.queryByText('Loading...');
     if (loading) {
         await waitForElementToBeRemoved(loading);
@@ -173,7 +173,7 @@ async function expectIntervalInExpandedRow(inputRow: HTMLElement, expectedInterv
     });
 }
 
-it('should update custom Expansion Row when Input has changed', async () => {
+it('should correctly display custom Expansion Row for Input', async () => {
     mockCustomRowInput();
     setup();
     const inputRow = await screen.findByRole('row', { name: `row-${inputName}` });
@@ -201,10 +201,6 @@ it('should update custom Expansion Row when Input has changed', async () => {
             }
         )
     );
-    await expectIntervalInExpandedRow(
-        await screen.findByRole('row', { name: `row-${inputName}` }),
-        interval
-    );
 
     await userEvent.click(within(inputRow).getByRole('button', { name: /edit/i }));
     const dialog = await screen.findByRole('dialog');
@@ -224,6 +220,18 @@ it('should update custom Expansion Row when Input has changed', async () => {
     );
 });
 
+it('should update custom Expansion Row when Input has changed', async () => {
+    mockCustomRowInput();
+    setup();
+
+    expect(
+        await expectIntervalInExpandedRow(
+            await screen.findByRole('row', { name: `row-${inputName}` }),
+            interval
+        )
+    ).toBeUndefined();
+});
+
 it('Should display error message as getDLRows throws Error', async () => {
     mockCustomRowInputGetDLError();