feat(custom_row): pass default row value to custom row component

docs/custom_ui_extensions/custom_row.md

@@ -2,18 +2,24 @@ When a row is expanded on the Inputs table, Custom Row is utilized to incorporat
 
 ### Properties
 
-| Property          | Description |
-| ----------------- | ----------- |
-| globalConfig       | is a hierarchical object that contains the globalConfig file's properties and values. |
-| el                | is used to render a customized element on the Inputs table when a row is expanded. |
-| serviceName       | is the name of the service/tab specified in the globalConfig file. |
-| row               | it the object of the record for which the CustomRowInput constructor is called. |
+| Property     | Description                                                                           |
+| ------------ | ------------------------------------------------------------------------------------- |
+| globalConfig | is a hierarchical object that contains the globalConfig file's properties and values. |
+| el           | is used to render a customized element on the Inputs table when a row is expanded.    |
+| serviceName  | is the name of the service/tab specified in the globalConfig file.                    |
+| row          | is the object of the record for which the CustomRowInput constructor is called.       |
 
 ### Methods
 
-| Property          | Description |
-| ----------------- | ----------- |
-| render            | is a method which should have logic for the custom row component, and it will be executed automatically when the create, edit, or clone actions are performed. |
+| Property  | Description                                                                                                                                                    |
+| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| render    | is a method which should have logic for the custom row component, and it will be executed automatically when the create, edit, or clone actions are performed. |
+| getDLRows | is a method which contains the logic to update the custom row values, return a key-value pair.                                                                 |
+
+> Note
+
+> - Atleast one method should be present
+> - If both method is present then the getDLRows method have the high priority.
 
 ### Usage
 
@@ -43,7 +49,8 @@ class CustomInputRow {
      * @param {Object} globalConfig - Global configuration.
      * @param {string} serviceName - Input service name.
      * @param {element} el - The element of the custom cell.
-     * @param {Object} row - custom row object.
+     * @param {Object} row - custom row object,
+     *     use this.row.<field_name>, where <field_name> is a field name
      */
     constructor(globalConfig, serviceName, el, row) {
         this.globalConfig = globalConfig;
@@ -52,17 +59,29 @@ class CustomInputRow {
         this.row = row;
     }
 
+    getDLRows() {
+        return Object.fromEntries(
+            Object.entries(this.row).map(([key, value]) => [
+                key,
+                key === "name" ? `Updated ${value}` : value,
+            ])
+        );
+    }
+
     render() {
         const content_html_template = 'Custom Input Row';
         this.el.innerHTML = content_html_template;
         return this;
     }
 }
- 
+
 export default CustomInputRow;
 ```
 
-> Note: The Javascript file for the custom control should be saved in the custom folder at `appserver/static/js/build/custom/`.
+> Note:
+
+> - The content should be included in the JavaScript file named by customRow.src property in globalConfig (see usage for details).
+> - The Javascript file for the custom control should be saved in the custom folder at `appserver/static/js/build/custom/`.
 
 ### Output
 

ui/src/components/table/CustomTableControl.jsx

@@ -1,9 +1,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import DL from '@splunk/react-ui/DefinitionList';
 import { _ } from '@splunk/ui-utils/i18n';
 
+import ExclamationTriangle from '@splunk/react-icons/ExclamationTriangle';
 import { getUnifiedConfigs } from '../../util/util';
 import { getBuildDirPath } from '../../util/script';
+import { getExpansionRowData } from './TableExpansionRowData';
 
 function onCustomControlError(params) {
     // eslint-disable-next-line no-console
@@ -17,23 +20,65 @@ class CustomTableControl extends Component {
         super(props);
         this.state = {
             loading: true,
+            row: { ...props.row },
+            checkMethodIsPresent: false,
+            methodNotPresentError: '',
         };
         this.shouldRender = true;
     }
 
     componentDidMount() {
         const globalConfig = getUnifiedConfigs();
-        this.setState({ loading: true });
-        this.loadCustomControl().then((Control) => {
-            this.customControl = new Control(
-                globalConfig,
-                this.props.serviceName,
-                this.el,
-                this.props.row,
-                this.props.field
+        this.loadCustomControl()
+            .then((Control) => {
+                if (typeof Control === 'function') {
+                    this.customControl = new Control(
+                        globalConfig,
+                        this.props.serviceName,
+                        this.el,
+                        this.state.row,
+                        this.props.field
+                    );
+
+                    this.callCustomMethod('getDLRows')
+                        .then((result) => {
+                            // check if getDLRow is exist in the custom input row file
+                            if (result && typeof result === 'object' && !Array.isArray(result)) {
+                                this.setState({
+                                    row: { ...result },
+                                    checkMethodIsPresent: true,
+                                    loading: false,
+                                });
+                            } else if (result !== null) {
+                                // check if getDLRow return invalid object
+                                this.setState({
+                                    loading: false,
+                                    checkMethodIsPresent: true,
+                                    methodNotPresentError:
+                                        'getDLRows method did not return a valid object',
+                                });
+                            } else {
+                                // if getDLRow is not present then check render method is present or not
+                                this.handleNoGetDLRows();
+                            }
+                        })
+                        .catch((error) => {
+                            onCustomControlError({ methodName: 'getDLRows', error });
+                            this.handleNoGetDLRows();
+                        });
+                } else {
+                    this.setState({
+                        loading: false,
+                        methodNotPresentError: 'Loaded module is not a constructor function',
+                    });
+                }
+            })
+            .catch(() =>
+                this.setState({
+                    loading: false,
+                    methodNotPresentError: 'Error loading custom control',
+                })
             );
-            this.setState({ loading: false });
-        });
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -48,45 +93,93 @@ class CustomTableControl extends Component {
     }
 
     loadCustomControl = () =>
-        new Promise((resolve) => {
-            if (this.props.type === 'external') {
-                import(
-                    /* webpackIgnore: true */ `${getBuildDirPath()}/custom/${
-                        this.props.fileName
-                    }.js`
-                ).then((external) => {
-                    const Control = external.default;
-                    resolve(Control);
-                });
+        new Promise((resolve, reject) => {
+            const { type, fileName } = this.props;
+            const globalConfig = getUnifiedConfigs();
+
+            if (type === 'external') {
+                import(/* webpackIgnore: true */ `${getBuildDirPath()}/custom/${fileName}.js`)
+                    .then((external) => resolve(external.default))
+                    .catch((error) => reject(error));
             } else {
-                const globalConfig = getUnifiedConfigs();
                 const appName = globalConfig.meta.name;
                 __non_webpack_require__(
-                    [`app/${appName}/js/build/custom/${this.props.fileName}`],
-                    (Control) => resolve(Control)
+                    [`app/${appName}/js/build/custom/${fileName}`],
+                    (Control) => resolve(Control),
+                    (error) => reject(error)
                 );
             }
         });
 
+    callCustomMethod = async (methodName, ...args) => {
+        try {
+            if (typeof this.customControl[methodName] === 'function') {
+                return this.customControl[methodName](...args);
+            }
+            return null;
+        } catch (error) {
+            onCustomControlError({ methodName, error });
+            return null;
+        }
+    };
+
+    handleNoGetDLRows = () => {
+        if (!this.customControl || typeof this.customControl.render !== 'function') {
+            this.setState((prevState) => ({
+                ...prevState,
+                methodNotPresentError:
+                    'At least "render" either "getDLRows" method should be present.',
+            }));
+        }
+        this.setState((prevState) => ({
+            ...prevState,
+            loading: false,
+        }));
+    };
+
     render() {
-        if (!this.state.loading) {
+        const { row, loading, checkMethodIsPresent, methodNotPresentError } = this.state;
+        const { moreInfo } = this.props;
+
+        if (
+            !loading &&
+            !checkMethodIsPresent &&
+            this.customControl &&
+            typeof this.customControl.render === 'function'
+        ) {
             try {
-                this.customControl.render(this.props.row, this.props.field);
+                this.customControl.render(row, moreInfo);
             } catch (error) {
                 onCustomControlError({ methodName: 'render', error });
             }
         }
+
+        let content;
+
+        if (methodNotPresentError) {
+            content = (
+                <span style={{ display: 'flex', alignItems: 'center' }}>
+                    <ExclamationTriangle style={{ color: 'red', marginRight: '4px' }} />
+                    {methodNotPresentError}
+                </span>
+            );
+        } else if (checkMethodIsPresent) {
+            content = <DL termWidth={250}>{getExpansionRowData(row, moreInfo)}</DL>;
+        } else {
+            content = (
+                <span
+                    ref={(el) => {
+                        this.el = el;
+                    }}
+                    style={{ visibility: loading ? 'hidden' : 'visible' }}
+                />
+            );
+        }
+
         return (
             <>
-                {this.state.loading && _('Loading...')}
-                {
-                    <span // nosemgrep: typescript.react.security.audit.react-no-refs.react-no-refs
-                        ref={(el) => {
-                            this.el = el;
-                        }}
-                        style={{ visibility: this.state.loading ? 'hidden' : 'visible' }}
-                    />
-                }
+                {loading && _('Loading...')}
+                {content}
             </>
         );
     }
@@ -98,6 +191,7 @@ CustomTableControl.propTypes = {
     field: PropTypes.string,
     fileName: PropTypes.string.isRequired,
     type: PropTypes.string,
+    moreInfo: PropTypes.array.isRequired,
 };
 
 export default CustomTableControl;

ui/src/components/table/TableExpansionRow.jsx

@@ -2,37 +2,15 @@ import React from 'react';
 import DL from '@splunk/react-ui/DefinitionList';
 import Table from '@splunk/react-ui/Table';
 import styled from 'styled-components';
-import { _ } from '@splunk/ui-utils/i18n';
 
 import CustomTableControl from './CustomTableControl';
 import { getUnifiedConfigs } from '../../util/util';
+import { getExpansionRowData } from './TableExpansionRowData';
 
 const TableCellWrapper = styled(Table.Cell)`
     border-top: none;
 `;
 
-function getExpansionRowData(row, moreInfo) {
-    const DefinitionLists = [];
-
-    if (moreInfo?.length) {
-        moreInfo.forEach((val) => {
-            const label = _(val.label);
-            // remove extra rows which are empty in moreInfo
-            if (val.field in row && row[val.field] !== null && row[val.field] !== '') {
-                DefinitionLists.push(<DL.Term key={val.field}>{label}</DL.Term>);
-                DefinitionLists.push(
-                    <DL.Description key={`${val.field}_decr`}>
-                        {val.mapping && val.mapping[row[val.field]]
-                            ? val.mapping[row[val.field]]
-                            : String(row[val.field])}
-                    </DL.Description>
-                );
-            }
-        });
-    }
-    return DefinitionLists;
-}
-
 export function getExpansionRow(colSpan, row, moreInfo) {
     const inputs = getUnifiedConfigs().pages?.inputs;
 
@@ -50,6 +28,7 @@ export function getExpansionRow(colSpan, row, moreInfo) {
                             row,
                             fileName: customRow.src,
                             type: customRow.type,
+                            moreInfo,
                         })}
                     </>
                 ) : (

ui/src/components/table/TableExpansionRowData.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import DL from '@splunk/react-ui/DefinitionList';
+import { _ } from '@splunk/ui-utils/i18n';
+
+export function getExpansionRowData(row, moreInfo) {
+    const DefinitionLists = [];
+
+    if (moreInfo?.length) {
+        moreInfo.forEach((val) => {
+            const label = _(val.label);
+            // remove extra rows which are empty in moreInfo
+            if (val.field in row && row[val.field] !== null && row[val.field] !== '') {
+                DefinitionLists.push(<DL.Term key={val.field}>{label}</DL.Term>);
+                DefinitionLists.push(
+                    <DL.Description key={`${val.field}_decr`}>
+                        {val.mapping && val.mapping[row[val.field]]
+                            ? val.mapping[row[val.field]]
+                            : String(row[val.field])}
+                    </DL.Description>
+                );
+            }
+        });
+    }
+    return DefinitionLists;
+}