From a6822aa0942c841a6b8a811f29aea44388d220e0 Mon Sep 17 00:00:00 2001 From: Aniket Katkar <51777795+aniketkatkar97@users.noreply.github.com> Date: Thu, 10 Nov 2022 18:02:37 +0530 Subject: [PATCH] Fix(UI): Explore page bugs (#8607) * - Made changes to show more information about tables in data card on explore page - Fixed bugs related to entity summary panel * Replaced Space components for vertical flex with Row and Col for ColumnSummary --- .../ColumnSummary/ColumnSummary.component.tsx | 92 ++++++++------- .../EntitySummaryPanel.component.tsx | 108 ++++++++++-------- .../EntitySummaryPanel.style.less | 6 +- .../components/Explore/Explore.component.tsx | 82 +++++++------ .../EntitySummaryDetails.tsx | 5 +- .../table-data-card-v2/TableDataCardV2.tsx | 38 +++--- .../searched-data/SearchedData.interface.ts | 2 +- .../resources/ui/src/constants/constants.ts | 1 + 8 files changed, 187 insertions(+), 147 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/ColumnSummary/ColumnSummary.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/ColumnSummary/ColumnSummary.component.tsx index 385dd13376a..1f92cccfa29 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/ColumnSummary/ColumnSummary.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/ColumnSummary/ColumnSummary.component.tsx @@ -11,10 +11,11 @@ * limitations under the License. */ -import { Divider, Space, Typography } from 'antd'; +import { Col, Divider, Row, Space, Typography } from 'antd'; import { toLower } from 'lodash'; import React, { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; +import { MAX_CHAR_LIMIT_ENTITY_SUMMARY } from '../../../constants/constants'; import { getTagValue } from '../../../utils/CommonUtils'; import SVGIcons from '../../../utils/SvgUtils'; import RichTextEditorPreviewer from '../../common/rich-text-editor/RichTextEditorPreviewer'; @@ -38,50 +39,59 @@ export default function ColumnSummary({ columns }: ColumnSummaryProps) { }, [columns]); return ( - + {columns && formattedColumnsData.map((column) => ( - - - {column.name} - - - {`${t('label.type')}:`} - {toLower(column.type)} - - {column.tags?.length !== 0 && ( - <> - - - + + + + {column.name} + + + + + {`${t('label.type')}:`} + + {toLower(column.type)} + + + {column.tags?.length !== 0 && ( + <> + + + - - getTagValue(tag) - )} - /> - - - )} - - - {column.description ? ( - - ) : ( - t('label.no-description') - )} - - + + getTagValue(tag) + )} + /> + + + )} + + + + + {column.description ? ( + + ) : ( + t('label.no-description') + )} + + + - + ))} - + ); } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.component.tsx index e3cf5cd302b..b95f910bc4a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.component.tsx @@ -12,7 +12,7 @@ */ import { CloseOutlined } from '@ant-design/icons'; -import { Col, Divider, Row, Space, Typography } from 'antd'; +import { Col, Divider, Row, Typography } from 'antd'; import classNames from 'classnames'; import React from 'react'; import { useTranslation } from 'react-i18next'; @@ -46,54 +46,70 @@ export default function EntitySummaryPanel({ 'summary-panel-container', showPanel ? 'show-panel' : '' )}> - - {entityDetails.name} - - {Object.keys(basicTableInfo).map((fieldName) => ( - - - {fieldName} + + + {entityDetails.name} + + + + {Object.keys(basicTableInfo).map((fieldName) => ( + + + + {fieldName} + + + {basicTableInfo[fieldName as keyof BasicTableInfo]} + + - - {basicTableInfo[fieldName as keyof BasicTableInfo]} + ))} + + + + + + + + {t('label.profiler-amp-data-quality')} + + + + + {overallSummery.map((field) => ( + + + + + {field.title} + + + + + {field.value} + + + - - ))} - - + ))} + + + - - - {t('label.profiler-amp-data-quality')} - - - {overallSummery.map((field) => ( - - - - {field.title} - - - {field.value} - - - - ))} - - - - - - {t('label.schema')} - - - + + + + {t('label.schema')} + + + + + + ); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.style.less b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.style.less index 8952bfc585c..a657d6e670e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.style.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.style.less @@ -37,10 +37,6 @@ -ms-overflow-style: none; scrollbar-width: none; - .basic-info-container { - width: calc(100% - 32px); - } - .text-gray { color: @label-color; } @@ -64,7 +60,7 @@ } .ant-divider-horizontal { - margin: 8px 0px; + margin: 16px 0px; } div.ant-typography { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx index 46bedf11034..2357f2a6380 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx @@ -16,10 +16,18 @@ import { faSortAmountUpAlt, } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Card, Space, Tabs } from 'antd'; +import { Card, Tabs } from 'antd'; import { AxiosError } from 'axios'; import unique from 'fork-ts-checker-webpack-plugin/lib/utils/array/unique'; -import { isNil, isNumber, lowerCase, noop, omit, toUpper } from 'lodash'; +import { + isNil, + isNumber, + lowerCase, + noop, + omit, + toLower, + toUpper, +} from 'lodash'; import { EntityType } from 'Models'; import React, { useEffect, useMemo, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -43,6 +51,7 @@ import { import { updateTestResults } from '../../utils/DataQualityAndProfilerUtils'; import { generateEntityLink } from '../../utils/TableUtils'; import { showErrorToast } from '../../utils/ToastUtils'; +import { Entities } from '../AddWebhook/WebhookConstants'; import AdvancedSearch from '../AdvancedSearch/AdvancedSearch.component'; import { FacetFilterProps } from '../common/facetfilter/facetFilter.interface'; import PageLayoutV1 from '../containers/PageLayoutV1'; @@ -293,6 +302,7 @@ const Explore: React.FC = ({ } onChange={(tab) => { tab && onChangeSearchIndex(tab as ExploreSearchIndex); + setShowSummaryPanel(false); }}> {Object.entries(tabsInfo).map(([tabSearchIndex, tabDetail]) => ( = ({ /> ))} - -
- onChangeAdvancedSearchJsonTree(nTree)} - onChangeQueryFilter={(nQueryFilter) => - onChangeAdvancedSearchQueryFilter(nQueryFilter) +
+ onChangeAdvancedSearchJsonTree(nTree)} + onChangeQueryFilter={(nQueryFilter) => + onChangeAdvancedSearchQueryFilter(nQueryFilter) + } + /> + {!loading ? ( + { + if (isNumber(value)) { + onChangePage(value); + } else if (!isNaN(Number.parseInt(value))) { + onChangePage(Number.parseInt(value)); + } + }} + totalValue={searchResults?.hits.total.value ?? 0} /> - {!loading ? ( - { - if (isNumber(value)) { - onChangePage(value); - } else if (!isNaN(Number.parseInt(value))) { - onChangePage(Number.parseInt(value)); - } - }} - totalValue={searchResults?.hits.total.value ?? 0} - /> - ) : ( - - )} -
+ ) : ( + + )} +
+ {tab === toLower(Entities.table) && ( - + )} ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx index 6a8e2992d41..14661956e18 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx @@ -219,7 +219,10 @@ const EntitySummaryDetails = ({ data-testid="owner-link" href={data.value as string} rel="noopener noreferrer" - target={data.openInNewTab ? '_blank' : '_self'}> + target={data.openInNewTab ? '_blank' : '_self'} + onClick={(e) => { + e.stopPropagation(); + }}> {displayVal} {data.openInNewTab && ( <> diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardV2.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardV2.tsx index 7ca8633a775..af68ba65abe 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardV2.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardV2.tsx @@ -13,7 +13,7 @@ import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { isNil, isString, startCase, uniqueId } from 'lodash'; +import { isString, startCase, uniqueId } from 'lodash'; import { ExtraInfo } from 'Models'; import React, { useMemo } from 'react'; import { Link, useLocation } from 'react-router-dom'; @@ -49,7 +49,7 @@ export interface TableDataCardPropsV2 { value: number; }[]; searchIndex: SearchIndex | EntityType; - handleSummaryPanelDisplay: (source: Table) => void; + handleSummaryPanelDisplay?: (source: Table) => void; } const TableDataCardV2: React.FC = ({ @@ -62,19 +62,8 @@ const TableDataCardV2: React.FC = ({ const location = useLocation(); const otherDetails = useMemo(() => { - const _otherDetails: ExtraInfo[] = []; - - if ('tier' in source && !isNil(source.tier)) { - _otherDetails.push({ - key: 'Tier', - value: isString(source.tier) - ? source.tier - : source.tier.tagFQN.split(FQN_SEPARATOR_CHAR)[1], - }); - } - - if ('owner' in source && !isNil(source.owner)) { - _otherDetails.push({ + const _otherDetails: ExtraInfo[] = [ + { key: 'Owner', value: getOwnerValue(source.owner as EntityReference), placeholderText: getEntityPlaceHolder( @@ -89,8 +78,16 @@ const TableDataCardV2: React.FC = ({ source.owner?.type === OwnerType.USER ? source.owner?.name : undefined, - }); - } + }, + { + key: 'Tier', + value: source.tier + ? isString(source.tier) + ? source.tier + : source.tier?.tagFQN.split(FQN_SEPARATOR_CHAR)[1] + : '', + }, + ]; if ('usageSummary' in source) { _otherDetails.push({ @@ -110,7 +107,8 @@ const TableDataCardV2: React.FC = ({ return _otherDetails; }, [source]); - const handleLinkClick = () => { + const handleLinkClick = (e: React.MouseEvent) => { + e.stopPropagation(); if (location.pathname.includes(ROUTES.TOUR)) { AppState.currentTourPage = CurrentTourPageType.DATASET_PAGE; } @@ -145,7 +143,9 @@ const TableDataCardV2: React.FC = ({
handleSummaryPanelDisplay(source as Table)}> + onClick={() => { + handleSummaryPanelDisplay && handleSummaryPanelDisplay(source as Table); + }}>
{'databaseSchema' in source && 'database' in source && ( void; + handleSummaryPanelDisplay?: (source: Table) => void; } diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts index 27bac4f198d..af71a063537 100644 --- a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts +++ b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts @@ -45,6 +45,7 @@ export const ADD_USER_CONTAINER_HEIGHT = 250; export const INGESTION_PROGRESS_START_VAL = 20; export const INGESTION_PROGRESS_END_VAL = 80; export const DEPLOYED_PROGRESS_VAL = 100; +export const MAX_CHAR_LIMIT_ENTITY_SUMMARY = 130; export const LOCALSTORAGE_RECENTLY_VIEWED = `recentlyViewedData_${COOKIE_VERSION}`; export const LOCALSTORAGE_RECENTLY_SEARCHED = `recentlySearchedData_${COOKIE_VERSION}`; export const LOCALSTORAGE_USER_PROFILES = 'userProfiles';