refactor : use generic function for table ExpandableConfig (#9410)

* refactor : use generic function for table ExpandableConfig

* Add margin

* Fix : unit test

* Address comments

* Address comments

openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx

@@ -11,8 +11,6 @@
  *  limitations under the License.
  */
 
-import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Popover, Table, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import classNames from 'classnames';
@@ -48,6 +46,7 @@ import SVGIcons, { Icons } from '../../utils/SvgUtils';
 import {
   getConstraintIcon,
   getDataTypeString,
+  getTableExpandableConfig,
   makeData,
 } from '../../utils/TableUtils';
 import { getTagCategories, getTaglist } from '../../utils/TagsUtils';
@@ -680,22 +679,8 @@ const EntityTable = ({
         data-testid="entity-table"
         dataSource={data}
         expandable={{
-          rowExpandable: (record) => {
+          ...getTableExpandableConfig<Column>(),
-            return (record.children && record.children.length > 0) || false;
+          rowExpandable: (record) => !isEmpty(record.children),
-          },
-          expandIcon: ({ expanded, onExpand, expandable, record }) =>
-            expandable && (
-              <span
-                className="m-r-xs cursor-pointer"
-                onClick={(e) =>
-                  onExpand(
-                    record,
-                    e as unknown as React.MouseEvent<HTMLElement, MouseEvent>
-                  )
-                }>
-                <FontAwesomeIcon icon={expanded ? faCaretDown : faCaretRight} />
-              </span>
-            ),
         }}
         pagination={false}
         size="small"

openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/DataQualityTab.tsx

@@ -17,8 +17,6 @@ import { isEmpty, isUndefined } from 'lodash';
 import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import { ReactComponent as ArrowDown } from '../../../assets/svg/arrow-down.svg';
-import { ReactComponent as ArrowRight } from '../../../assets/svg/arrow-right.svg';
 import { useAuthContext } from '../../../authentication/auth-provider/AuthProvider';
 import { getTableTabPath } from '../../../constants/constants';
 import { NO_PERMISSION_FOR_ACTION } from '../../../constants/HelperTextUtil';
@@ -30,6 +28,7 @@ import { getDecodedFqn } from '../../../utils/StringsUtils';
 import SVGIcons, { Icons } from '../../../utils/SvgUtils';
 import {
   getEntityFqnFromEntityLink,
+  getTableExpandableConfig,
   getTestResultBadgeIcon,
 } from '../../../utils/TableUtils';
 import { getFormattedDateFromSeconds } from '../../../utils/TimeUtils';
@@ -217,31 +216,10 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
         columns={columns}
         dataSource={testCases.map((test) => ({ ...test, key: test.name }))}
         expandable={{
+          ...getTableExpandableConfig<TestCase>(),
           expandRowByClick: true,
           rowExpandable: () => true,
           expandedRowRender: (recode) => <TestSummary data={recode} />,
-          expandIcon: ({ expanded, onExpand, record }) =>
-            expanded ? (
-              <ArrowDown
-                className="mx-auto"
-                onClick={(e: React.MouseEvent) =>
-                  onExpand(
-                    record,
-                    e as React.MouseEvent<HTMLElement, MouseEvent>
-                  )
-                }
-              />
-            ) : (
-              <ArrowRight
-                className="mx-auto"
-                onClick={(e: React.MouseEvent) =>
-                  onExpand(
-                    record,
-                    e as React.MouseEvent<HTMLElement, MouseEvent>
-                  )
-                }
-              />
-            ),
         }}
         loading={{
           indicator: <Loader size="small" />,

openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.test.tsx

@@ -109,7 +109,7 @@ describe('Team Hierarchy page', () => {
 
     expect(table).toBeInTheDocument();
 
-    const expandableTableRow = await screen.getAllByTestId('expand-table-row');
+    const expandableTableRow = await screen.getAllByTestId('expand-icon');
     fireEvent.click(expandableTableRow[0]);
 
     const totalRows = await screen.findAllByText('entityName');

openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.tsx

@@ -26,13 +26,12 @@ import { TABLE_CONSTANTS } from '../../constants/Teams.constants';
 import { Team } from '../../generated/entity/teams/team';
 import { getEntityName } from '../../utils/CommonUtils';
 import { getTeamsWithFqnPath } from '../../utils/RouterUtils';
-import SVGIcons, { Icons } from '../../utils/SvgUtils';
+import { getTableExpandableConfig } from '../../utils/TableUtils';
 import { getMovedTeamData } from '../../utils/TeamUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import {
   DraggableBodyRowProps,
   MovedTeamProps,
-  TableExpandableDataProps,
   TeamHierarchyProps,
 } from './team.interface';
 import './teams.less';
@@ -133,50 +132,16 @@ const TeamHierarchy: FC<TeamHierarchyProps> = ({
     }
   };
 
-  const tableExpandableIconData = useMemo(
-    () =>
-      ({ expanded, onExpand, expandable, record }: TableExpandableDataProps) =>
-        expandable ? (
-          <div
-            draggable
-            className="expand-cell-icon-container"
-            data-testid="expand-table-row"
-            onClick={(e) =>
-              onExpand(
-                record,
-                e as unknown as React.MouseEvent<HTMLElement, MouseEvent>
-              )
-            }>
-            <SVGIcons
-              className="drag-icon"
-              draggable="true"
-              icon={Icons.DRAG}
-            />
-            <SVGIcons
-              className="expand-icon"
-              icon={expanded ? Icons.ARROW_DOWN_LIGHT : Icons.ARROW_RIGHT_LIGHT}
-            />
-          </div>
-        ) : (
-          <>
-            <SVGIcons className="drag-icon" icon={Icons.DRAG} />
-            <div className="expand-cell-empty-icon-container" />
-          </>
-        ),
-    []
-  );
-
   const expandableConfig: ExpandableConfig<Team> = useMemo(
     () => ({
+      ...getTableExpandableConfig<Team>(),
       onExpand: (isOpen, record) => {
         if (isOpen && isEmpty(record.children)) {
           onTeamExpand(false, record.fullyQualifiedName, true);
         }
       },
-      expandIcon: ({ expanded, onExpand, expandable, record }) =>
-        tableExpandableIconData({ expanded, onExpand, expandable, record }),
     }),
-    [onTeamExpand, tableExpandableIconData]
+    [onTeamExpand]
   );
 
   return (

openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.tsx

@@ -247,7 +247,10 @@ const TopicSchemaFields: FC<TopicSchemaFieldsProps> = ({
         columns={columns}
         data-testid="topic-schema-fields-table"
         dataSource={messageSchema?.schemaFields}
-        expandable={getTableExpandableConfig<Field>()}
+        expandable={{
+          ...getTableExpandableConfig<Field>(),
+          rowExpandable: (record) => !isEmpty(record.children),
+        }}
         pagination={false}
         rowKey="name"
         size="small"

openmetadata-ui/src/main/resources/ui/src/components/VersionTable/VersionTable.component.tsx

@@ -10,8 +10,6 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Col, Row, Table } from 'antd';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -20,7 +18,7 @@ import {
   getFrequentlyJoinedColumns,
   searchInColumns,
 } from '../../utils/EntityUtils';
-import { makeData } from '../../utils/TableUtils';
+import { getTableExpandableConfig, makeData } from '../../utils/TableUtils';
 import RichTextEditorPreviewer from '../common/rich-text-editor/RichTextEditorPreviewer';
 import Searchbar from '../common/searchbar/Searchbar';
 import TagsViewer from '../tags-viewer/tags-viewer';
@@ -129,20 +127,8 @@ const VersionTable = ({ columnName, columns, joins }: VersionTableProps) => {
           data-testid="entity-table"
           dataSource={data}
           expandable={{
+            ...getTableExpandableConfig<Column>(),
             defaultExpandedRowKeys: [],
-            expandIcon: ({ expanded, onExpand, record }) =>
-              record.children ? (
-                <FontAwesomeIcon
-                  className="m-r-xs cursor-pointer"
-                  icon={expanded ? faCaretDown : faCaretRight}
-                  onClick={(e) =>
-                    onExpand(
-                      record,
-                      e as unknown as React.MouseEvent<HTMLElement>
-                    )
-                  }
-                />
-              ) : null,
           }}
           pagination={false}
           size="small"

openmetadata-ui/src/main/resources/ui/src/pages/AlertsPage/AlertsPage.tsx

@@ -10,14 +10,11 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import Icon from '@ant-design/icons/lib/components/Icon';
 import { Button, Col, Row, Table, Tag, Tooltip, Typography } from 'antd';
 import { isNil } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import { ReactComponent as DropDownIcon } from '../../assets/svg/DropDown.svg';
-import { ReactComponent as RightArrowIcon } from '../../assets/svg/ic-right-arrow.svg';
 import { getAllAlerts } from '../../axiosAPIs/alertsAPI';
 import DeleteWidgetModal from '../../components/common/DeleteWidget/DeleteWidgetModal';
 import NextPrevious from '../../components/common/next-previous/NextPrevious';
@@ -34,6 +31,7 @@ import { Paging } from '../../generated/type/paging';
 import { getDisplayNameForTriggerType } from '../../utils/Alerts/AlertsUtil';
 import { getSettingPath } from '../../utils/RouterUtils';
 import SVGIcons, { Icons } from '../../utils/SvgUtils';
+import { getTableExpandableConfig } from '../../utils/TableUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import { AlertsExpanded } from './AlertRowExpanded';
 
@@ -171,15 +169,8 @@ const AlertsPage = () => {
             columns={columns}
             dataSource={alerts}
             expandable={{
+              ...getTableExpandableConfig<Alerts>(),
               expandedRowRender: (record) => <AlertsExpanded alert={record} />,
-              expandIcon: ({ expanded, onExpand, expandable, record }) =>
-                expandable && (
-                  <Icon
-                    component={expanded ? DropDownIcon : RightArrowIcon}
-                    size={16}
-                    onClick={(e) => onExpand(record, e)}
-                  />
-                ),
             }}
             loading={{ spinning: loading, indicator: <Loader /> }}
             pagination={false}

openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx

@@ -11,15 +11,16 @@
  *  limitations under the License.
  */
 
-import { Typography } from 'antd';
+import Icon from '@ant-design/icons/lib/components/Icon';
 import { ExpandableConfig } from 'antd/lib/table/interface';
 import classNames from 'classnames';
 import { t } from 'i18next';
-import { isEmpty, upperCase } from 'lodash';
+import { upperCase } from 'lodash';
 import { EntityTags } from 'Models';
 import React from 'react';
 import { ReactComponent as DashboardIcon } from '../assets/svg/dashboard-grey.svg';
 import { ReactComponent as DropDownIcon } from '../assets/svg/DropDown.svg';
+import { ReactComponent as RightArrowIcon } from '../assets/svg/ic-right-arrow.svg';
 import { ReactComponent as MlModelIcon } from '../assets/svg/mlmodal.svg';
 import { ReactComponent as PipelineIcon } from '../assets/svg/pipeline-grey.svg';
 import { ReactComponent as TableIcon } from '../assets/svg/table-grey.svg';
@@ -360,20 +361,17 @@ export const getTestResultBadgeIcon = (status?: TestCaseStatus) => {
   }
 };
 
-export function getTableExpandableConfig<
+export function getTableExpandableConfig<T>(): ExpandableConfig<T> {
-  T extends { children?: T[] }
->(): ExpandableConfig<T> {
   const expandableConfig: ExpandableConfig<T> = {
-    rowExpandable: (record: T) => !isEmpty(record.children),
-
     expandIcon: ({ expanded, onExpand, expandable, record }) =>
       expandable && (
-        <Typography.Text
+        <Icon
-          className="m-r-xs cursor-pointer"
+          className="mr-1"
+          component={expanded ? DropDownIcon : RightArrowIcon}
           data-testid="expand-icon"
-          onClick={(e) => onExpand(record, e)}>
+          size={16}
-          {expanded ? <DropDownIcon /> : <DropDownIcon />}
+          onClick={(e) => onExpand(record, e)}
-        </Typography.Text>
+        />
       ),
   };