From ee05bb412d55d84a8ccbf3a357ec74f64f6a87bd Mon Sep 17 00:00:00 2001 From: Sachin Chaurasiya Date: Tue, 20 Dec 2022 13:36:00 +0530 Subject: [PATCH] refactor : use generic function for table ExpandableConfig (#9410) * refactor : use generic function for table ExpandableConfig * Add margin * Fix : unit test * Address comments * Address comments --- .../EntityTable/EntityTable.component.tsx | 21 ++-------- .../component/DataQualityTab.tsx | 26 +----------- .../TeamDetails/TeamHierarchy.test.tsx | 2 +- .../components/TeamDetails/TeamHierarchy.tsx | 41 ++----------------- .../TopicDetails/TopicSchema/TopicSchema.tsx | 5 ++- .../VersionTable/VersionTable.component.tsx | 18 +------- .../ui/src/pages/AlertsPage/AlertsPage.tsx | 13 +----- .../resources/ui/src/utils/TableUtils.tsx | 22 +++++----- 8 files changed, 27 insertions(+), 121 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx index 6f3fa9f15f8..5bf1f60fb26 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx +++ b/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) => { - return (record.children && record.children.length > 0) || false; - }, - expandIcon: ({ expanded, onExpand, expandable, record }) => - expandable && ( - - onExpand( - record, - e as unknown as React.MouseEvent - ) - }> - - - ), + ...getTableExpandableConfig(), + rowExpandable: (record) => !isEmpty(record.children), }} pagination={false} size="small" diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/DataQualityTab.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/DataQualityTab.tsx index f07300e8647..109e9b020ab 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/DataQualityTab.tsx +++ b/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 = ({ columns={columns} dataSource={testCases.map((test) => ({ ...test, key: test.name }))} expandable={{ + ...getTableExpandableConfig(), expandRowByClick: true, rowExpandable: () => true, expandedRowRender: (recode) => , - expandIcon: ({ expanded, onExpand, record }) => - expanded ? ( - - onExpand( - record, - e as React.MouseEvent - ) - } - /> - ) : ( - - onExpand( - record, - e as React.MouseEvent - ) - } - /> - ), }} loading={{ indicator: , diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.test.tsx index b24397d9ba2..24cd9d6eb20 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.test.tsx +++ b/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'); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.tsx index 5c8504d7d9a..ccc887f75ee 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.tsx +++ b/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 = ({ } }; - const tableExpandableIconData = useMemo( - () => - ({ expanded, onExpand, expandable, record }: TableExpandableDataProps) => - expandable ? ( -
- onExpand( - record, - e as unknown as React.MouseEvent - ) - }> - - -
- ) : ( - <> - -
- - ), - [] - ); - const expandableConfig: ExpandableConfig = useMemo( () => ({ + ...getTableExpandableConfig(), 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 ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.tsx index 560a7d68279..b260fe18e73 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.tsx @@ -247,7 +247,10 @@ const TopicSchemaFields: FC = ({ columns={columns} data-testid="topic-schema-fields-table" dataSource={messageSchema?.schemaFields} - expandable={getTableExpandableConfig()} + expandable={{ + ...getTableExpandableConfig(), + rowExpandable: (record) => !isEmpty(record.children), + }} pagination={false} rowKey="name" size="small" diff --git a/openmetadata-ui/src/main/resources/ui/src/components/VersionTable/VersionTable.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/VersionTable/VersionTable.component.tsx index d0db37c27f7..37d9a6b3f14 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/VersionTable/VersionTable.component.tsx +++ b/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(), defaultExpandedRowKeys: [], - expandIcon: ({ expanded, onExpand, record }) => - record.children ? ( - - onExpand( - record, - e as unknown as React.MouseEvent - ) - } - /> - ) : null, }} pagination={false} size="small" diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/AlertsPage/AlertsPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AlertsPage/AlertsPage.tsx index a6774b0914c..cdf4751e7c0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/AlertsPage/AlertsPage.tsx +++ b/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(), expandedRowRender: (record) => , - expandIcon: ({ expanded, onExpand, expandable, record }) => - expandable && ( - onExpand(record, e)} - /> - ), }} loading={{ spinning: loading, indicator: }} pagination={false} diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx index bfe686ff28e..0263fdb9c70 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx +++ b/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< - T extends { children?: T[] } ->(): ExpandableConfig { +export function getTableExpandableConfig(): ExpandableConfig { const expandableConfig: ExpandableConfig = { - rowExpandable: (record: T) => !isEmpty(record.children), - expandIcon: ({ expanded, onExpand, expandable, record }) => expandable && ( - onExpand(record, e)}> - {expanded ? : } - + size={16} + onClick={(e) => onExpand(record, e)} + /> ), };