yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-30 11:56:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI improvements (#11444)

Browse Source
This commit is contained in:
Ashish Gupta 2023-05-05 12:23:24 +05:30 committed by GitHub
parent c77f14bdcf
commit a0e2078320
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 362 additions and 312 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.tsx
View File

@ -13,7 +13,7 @@
import { Button, Col, Row, Typography } from 'antd';
import classNames from 'classnames';
import { ERROR_PLACEHOLDER_TYPE } from 'enums/common.enum';
import { ERROR_PLACEHOLDER_TYPE, SIZE } from 'enums/common.enum';
import { isUndefined } from 'lodash';
import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
@ -310,7 +310,11 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
{entityName && feedFilter === FeedFilter.ALL && !threadType ? (
<NoFeedPlaceholder entityName={entityName} />
) : !refreshFeedCount ? (
<ErrorPlaceHolder type={ERROR_PLACEHOLDER_TYPE.FILTER} />
<ErrorPlaceHolder
className="mt-0-important pt-8"
size={SIZE.MEDIUM}
type={ERROR_PLACEHOLDER_TYPE.FILTER}
/>
) : null}
</div>
)

23
openmetadata-ui/src/main/resources/ui/src/components/ContainerVersion/ContainerVersion.component.tsx
View File

@ -10,8 +10,11 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Card } from 'antd';
import classNames from 'classnames';
import PageContainer from 'components/containers/PageContainer';
import PageContainerV1 from 'components/containers/PageContainerV1';
import PageLayoutV1 from 'components/containers/PageLayoutV1';
import {
ChangeDescription,
Column,
@ -384,11 +387,11 @@ const ContainerVersion: React.FC<ContainerVersionProp> = ({
}, [currentVersionData]);
return (
<PageContainer>
<div
className={classNames(
'tw-px-6 tw-w-full tw-h-full tw-flex tw-flex-col tw-relative'
)}>
<PageContainerV1>
<PageLayoutV1
pageTitle={t('label.entity-detail-plural', {
entity: getEntityName(currentVersionData),
})}>
{isVersionLoading ? (
<Loader />
) : (
@ -408,7 +411,7 @@ const ContainerVersion: React.FC<ContainerVersionProp> = ({
/>
<div className="tw-mt-1 tw-flex tw-flex-col tw-flex-grow ">
<TabsPane activeTab={1} className="tw-flex-initial" tabs={tabs} />
<div className="tw-bg-white tw-flex-grow tw--mx-6 tw-px-7 tw-py-4">
<Card className="m-y-md">
<div className="tw-grid tw-grid-cols-4 tw-gap-4 tw-w-full">
<div className="tw-col-span-full">
<Description
@ -429,7 +432,7 @@ const ContainerVersion: React.FC<ContainerVersionProp> = ({
/>
</div>
</div>
</div>
</Card>
</div>
</div>
)}
@ -441,8 +444,8 @@ const ContainerVersion: React.FC<ContainerVersionProp> = ({
versionList={versionList}
onBack={backHandler}
/>
</div>
</PageContainer>
</PageLayoutV1>
</PageContainerV1>
);
};

25
openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
View File

@ -859,19 +859,18 @@ const DashboardDetails = ({
</Card>
)}
{activeTab === 4 && (
<Card className={ENTITY_CARD_CLASS}>
<CustomPropertyTable
entityDetails={
dashboardDetails as CustomPropertyProps['entityDetails']
}
entityType={EntityType.DASHBOARD}
handleExtensionUpdate={onExtensionUpdate}
hasEditAccess={
dashboardPermissions.EditAll ||
dashboardPermissions.EditCustomFields
}
/>
</Card>
<CustomPropertyTable
className="mt-0-important"
entityDetails={
dashboardDetails as CustomPropertyProps['entityDetails']
}
entityType={EntityType.DASHBOARD}
handleExtensionUpdate={onExtensionUpdate}
hasEditAccess={
dashboardPermissions.EditAll ||
dashboardPermissions.EditCustomFields
}
/>
)}
<div
data-testid="observer-element"

130
openmetadata-ui/src/main/resources/ui/src/components/DashboardVersion/DashboardVersion.component.tsx
View File

@ -11,10 +11,11 @@
* limitations under the License.
*/
import { Space, Table } from 'antd';
import { Card, Space, Table } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import classNames from 'classnames';
import PageContainer from 'components/containers/PageContainer';
import PageContainerV1 from 'components/containers/PageContainerV1';
import PageLayoutV1 from 'components/containers/PageLayoutV1';
import { isUndefined } from 'lodash';
import { ExtraInfo } from 'Models';
import React, { FC, useEffect, useMemo, useState } from 'react';
@ -263,69 +264,76 @@ const DashboardVersion: FC<DashboardVersionProp> = ({
);
return (
<PageContainer>
<div
className={classNames(
'tw-px-6 tw-w-full tw-h-full tw-flex tw-flex-col tw-relative'
)}
data-testid="dashboard-version-container">
{isVersionLoading ? (
<Loader />
) : (
<div
className={classNames('version-data')}
data-testid="version-data">
<EntityPageInfo
isVersionSelected
deleted={deleted}
entityName={
currentVersionData.displayName ?? currentVersionData.name ?? ''
}
extraInfo={getExtraInfo()}
followersList={[]}
serviceType={currentVersionData.serviceType ?? ''}
tags={getTags()}
tier={{} as TagLabel}
titleLinks={slashedDashboardName}
version={Number(version)}
versionHandler={backHandler}
/>
<div className="tw-mt-1 tw-flex tw-flex-col tw-flex-grow ">
<TabsPane activeTab={1} className="tw-flex-initial" tabs={tabs} />
<div className="tw-bg-white tw-flex-grow tw--mx-6 tw-px-7 tw-py-4">
<div className="tw-grid tw-grid-cols-4 tw-gap-4 tw-w-full">
<div className="tw-col-span-full">
<Description
isReadOnly
description={getDashboardDescription()}
/>
<PageContainerV1>
<PageLayoutV1
pageTitle={t('label.entity-detail-plural', {
entity: getEntityName(currentVersionData),
})}>
<div data-testid="dashboard-version-container">
{isVersionLoading ? (
<Loader />
) : (
<div
className={classNames('version-data')}
data-testid="version-data">
<EntityPageInfo
isVersionSelected
deleted={deleted}
entityName={
currentVersionData.displayName ??
currentVersionData.name ??
''
}
extraInfo={getExtraInfo()}
followersList={[]}
serviceType={currentVersionData.serviceType ?? ''}
tags={getTags()}
tier={{} as TagLabel}
titleLinks={slashedDashboardName}
version={Number(version)}
versionHandler={backHandler}
/>
<div className="tw-mt-1 tw-flex tw-flex-col tw-flex-grow ">
<TabsPane
activeTab={1}
className="tw-flex-initial"
tabs={tabs}
/>
<Card className="m-y-md">
<div className="tw-grid tw-grid-cols-4 tw-gap-4 tw-w-full">
<div className="tw-col-span-full">
<Description
isReadOnly
description={getDashboardDescription()}
/>
</div>
<div className="m-y-md tw-col-span-full">
<Table
bordered
columns={tableColumn}
data-testid="schema-table"
dataSource={(currentVersionData as Dashboard)?.charts}
pagination={false}
rowKey="id"
size="small"
/>
</div>
</div>
<div className="m-y-md tw-col-span-full">
<Table
bordered
columns={tableColumn}
data-testid="schema-table"
dataSource={(currentVersionData as Dashboard)?.charts}
pagination={false}
rowKey="id"
size="small"
/>
</div>
</div>
</Card>
</div>
</div>
</div>
)}
)}
<EntityVersionTimeLine
show
currentVersion={version}
versionHandler={versionHandler}
versionList={versionList}
onBack={backHandler}
/>
</div>
</PageContainer>
<EntityVersionTimeLine
show
currentVersion={version}
versionHandler={versionHandler}
versionList={versionList}
onBack={backHandler}
/>
</div>
</PageLayoutV1>
</PageContainerV1>
);
};

18
openmetadata-ui/src/main/resources/ui/src/components/DashboardVersion/DashboardVersion.test.tsx
View File

@ -12,7 +12,7 @@
*/
import { findByTestId, findByText, render } from '@testing-library/react';
import React from 'react';
import React, { ReactNode } from 'react';
import { MemoryRouter } from 'react-router-dom';
import DashboardVersion from './DashboardVersion.component';
import { DashboardVersionProp } from './DashboardVersion.interface';
@ -65,6 +65,22 @@ jest.mock('../../utils/EntityVersionUtils', () => ({
getTagsDiff: jest.fn(),
}));
jest.mock('components/containers/PageContainerV1', () => {
return jest
.fn()
.mockImplementation(({ children }: { children: ReactNode }) => (
<div data-testid="PageContainerV1">{children}</div>
));
});
jest.mock('components/containers/PageLayoutV1', () => {
return jest
.fn()
.mockImplementation(({ children }: { children: ReactNode }) => (
<div data-testid="PageLayoutV1">{children}</div>
));
});
JSON.parse = jest.fn().mockReturnValue([]);
describe('Test DashboardVersion page', () => {

134
openmetadata-ui/src/main/resources/ui/src/components/DataModelVersion/DataModelVersion.component.tsx
View File

@ -11,11 +11,12 @@
* limitations under the License.
*/
import { Table, Typography } from 'antd';
import { Card, Table, Typography } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import classNames from 'classnames';
import RichTextEditorPreviewer from 'components/common/rich-text-editor/RichTextEditorPreviewer';
import PageContainer from 'components/containers/PageContainer';
import PageContainerV1 from 'components/containers/PageContainerV1';
import PageLayoutV1 from 'components/containers/PageLayoutV1';
import TagsViewer from 'components/Tag/TagsViewer/tags-viewer';
import {
ChangeDescription,
@ -248,71 +249,78 @@ const DataModelVersion: FC<DataModelVersionProp> = ({
);
return (
<PageContainer>
<div
className={classNames(
'tw-px-6 tw-w-full tw-h-full tw-flex tw-flex-col tw-relative'
)}
data-testid="data-model-version-container">
{isVersionLoading ? (
<Loader />
) : (
<div
className={classNames('version-data')}
data-testid="version-data">
<EntityPageInfo
isVersionSelected
deleted={deleted}
entityName={
currentVersionData.displayName ?? currentVersionData.name ?? ''
}
extraInfo={getExtraInfo()}
followersList={[]}
serviceType={currentVersionData.serviceType ?? ''}
tags={getTags()}
tier={{} as TagLabel}
titleLinks={slashedDataModelName}
version={Number(version)}
versionHandler={backHandler}
/>
<div className="tw-mt-1 tw-flex tw-flex-col tw-flex-grow ">
<TabsPane activeTab={1} className="tw-flex-initial" tabs={tabs} />
<div className="tw-bg-white tw-flex-grow tw--mx-6 tw-px-7 tw-py-4">
<div className="tw-grid tw-grid-cols-4 tw-gap-4 tw-w-full">
<div className="tw-col-span-full">
<Description
isReadOnly
description={getDashboardDescription()}
/>
<PageContainerV1>
<PageLayoutV1
pageTitle={t('label.entity-detail-plural', {
entity: getEntityName(currentVersionData),
})}>
<div data-testid="data-model-version-container">
{isVersionLoading ? (
<Loader />
) : (
<div
className={classNames('version-data')}
data-testid="version-data">
<EntityPageInfo
isVersionSelected
deleted={deleted}
entityName={
currentVersionData.displayName ??
currentVersionData.name ??
''
}
extraInfo={getExtraInfo()}
followersList={[]}
serviceType={currentVersionData.serviceType ?? ''}
tags={getTags()}
tier={{} as TagLabel}
titleLinks={slashedDataModelName}
version={Number(version)}
versionHandler={backHandler}
/>
<div className="tw-mt-1 tw-flex tw-flex-col tw-flex-grow ">
<TabsPane
activeTab={1}
className="tw-flex-initial"
tabs={tabs}
/>
<Card className="m-y-md">
<div className="tw-grid tw-grid-cols-4 tw-gap-4 tw-w-full">
<div className="tw-col-span-full">
<Description
isReadOnly
description={getDashboardDescription()}
/>
</div>
<div className="m-y-md tw-col-span-full">
<Table
bordered
columns={tableColumn}
data-testid="schema-table"
dataSource={
(currentVersionData as DashboardDataModel)?.columns
}
pagination={false}
rowKey="id"
size="small"
/>
</div>
</div>
<div className="m-y-md tw-col-span-full">
<Table
bordered
columns={tableColumn}
data-testid="schema-table"
dataSource={
(currentVersionData as DashboardDataModel)?.columns
}
pagination={false}
rowKey="id"
size="small"
/>
</div>
</div>
</Card>
</div>
</div>
</div>
)}
)}
<EntityVersionTimeLine
show
currentVersion={version}
versionHandler={versionHandler}
versionList={versionList}
onBack={backHandler}
/>
</div>
</PageContainer>
<EntityVersionTimeLine
show
currentVersion={version}
versionHandler={versionHandler}
versionList={versionList}
onBack={backHandler}
/>
</div>
</PageLayoutV1>
</PageContainerV1>
);
};

33
openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx
View File

@ -796,12 +796,10 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
</Card>
)}
{activeTab === 3 && (
<Card className="m-y-md h-full" id="sampleDataDetails">
<SampleDataTable
isTableDeleted={tableDetails.deleted}
tableId={tableDetails.id}
/>
</Card>
<SampleDataTable
isTableDeleted={tableDetails.deleted}
tableId={tableDetails.id}
/>
)}
{activeTab === 4 && (
<TableQueries
@ -835,19 +833,16 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
<DbtTab dataModel={dataModel} />
)}
{activeTab === 9 && (
<Card className="m-y-md h-full">
<CustomPropertyTable
entityDetails={
tableDetails as CustomPropertyProps['entityDetails']
}
entityType={EntityType.TABLE}
handleExtensionUpdate={handleExtensionUpdate}
hasEditAccess={
tablePermissions.EditAll ||
tablePermissions.EditCustomFields
}
/>
</Card>
<CustomPropertyTable
entityDetails={
tableDetails as CustomPropertyProps['entityDetails']
}
entityType={EntityType.TABLE}
handleExtensionUpdate={handleExtensionUpdate}
hasEditAccess={
tablePermissions.EditAll || tablePermissions.EditCustomFields
}
/>
)}
</div>

23
openmetadata-ui/src/main/resources/ui/src/components/DatasetVersion/DatasetVersion.component.tsx
View File

@ -11,12 +11,15 @@
* limitations under the License.
*/
import { Card } from 'antd';
import classNames from 'classnames';
import PageContainer from 'components/containers/PageContainer';
import PageContainerV1 from 'components/containers/PageContainerV1';
import PageLayoutV1 from 'components/containers/PageLayoutV1';
import { cloneDeep, isEqual, isUndefined, toString } from 'lodash';
import { ExtraInfo } from 'Models';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { getEntityName } from 'utils/EntityUtils';
import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
import { EntityField } from '../../constants/Feeds.constants';
import { FqnPart } from '../../enums/entity.enum';
@ -375,11 +378,11 @@ const DatasetVersion: React.FC<DatasetVersionProp> = ({
}, [currentVersionData]);
return (
<PageContainer>
<div
className={classNames(
'tw-px-6 tw-w-full tw-h-full tw-flex tw-flex-col tw-relative'
)}>
<PageContainerV1>
<PageLayoutV1
pageTitle={t('label.entity-detail-plural', {
entity: getEntityName(currentVersionData),
})}>
{isVersionLoading ? (
<Loader />
) : (
@ -399,7 +402,7 @@ const DatasetVersion: React.FC<DatasetVersionProp> = ({
/>
<div className="tw-mt-1 tw-flex tw-flex-col tw-flex-grow ">
<TabsPane activeTab={1} className="tw-flex-initial" tabs={tabs} />
<div className="tw-bg-white tw-flex-grow tw--mx-6 tw-px-7 tw-py-4">
<Card className="m-y-md">
<div className="tw-grid tw-grid-cols-4 tw-gap-4 tw-w-full">
<div className="tw-col-span-full">
<Description
@ -422,7 +425,7 @@ const DatasetVersion: React.FC<DatasetVersionProp> = ({
/>
</div>
</div>
</div>
</Card>
</div>
</div>
)}
@ -434,8 +437,8 @@ const DatasetVersion: React.FC<DatasetVersionProp> = ({
versionList={versionList}
onBack={backHandler}
/>
</div>
</PageContainer>
</PageLayoutV1>
</PageContainerV1>
);
};

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

@ -439,7 +439,7 @@ const EntityTable = ({
{hasDescriptionEditAccess && (
<>
<Button
className="p-0 tw-self-start flex-center w-7 h-7 focus:tw-outline-none tw-flex-none hover-cell-icon"
className="p-0 tw-self-start flex-center w-7 h-7 text-primary tw-flex-none hover-cell-icon"
type="text"
onClick={() => handleUpdate(record, index)}>
<IconEdit

25
openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx
View File

@ -661,19 +661,18 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
</Card>
)}
{activeTab === 5 && (
<Card className={ENTITY_CARD_CLASS}>
<CustomPropertyTable
entityDetails={
mlModelDetail as CustomPropertyProps['entityDetails']
}
entityType={EntityType.MLMODEL}
handleExtensionUpdate={onExtensionUpdate}
hasEditAccess={
mlModelPermissions.EditAll ||
mlModelPermissions.EditCustomFields
}
/>
</Card>
<CustomPropertyTable
className="mt-0-important"
entityDetails={
mlModelDetail as CustomPropertyProps['entityDetails']
}
entityType={EntityType.MLMODEL}
handleExtensionUpdate={onExtensionUpdate}
hasEditAccess={
mlModelPermissions.EditAll ||
mlModelPermissions.EditCustomFields
}
/>
)}
<div
data-testid="observer-element"

21
openmetadata-ui/src/main/resources/ui/src/components/MlModelVersion/MlModelVersion.component.tsx
View File

@ -15,6 +15,8 @@ import { Card, Col, Divider, Row, Space, Typography } from 'antd';
import classNames from 'classnames';
import ErrorPlaceHolder from 'components/common/error-with-placeholder/ErrorPlaceHolder';
import RichTextEditorPreviewer from 'components/common/rich-text-editor/RichTextEditorPreviewer';
import PageContainerV1 from 'components/containers/PageContainerV1';
import PageLayoutV1 from 'components/containers/PageLayoutV1';
import SourceList from 'components/MlModelDetail/SourceList.component';
import TagsContainer from 'components/Tag/TagsContainer/tags-container';
import { MlFeature, Mlmodel } from 'generated/entity/data/mlmodel';
@ -22,6 +24,7 @@ import { isUndefined } from 'lodash';
import { ExtraInfo } from 'Models';
import React, { FC, Fragment, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { getEntityName } from 'utils/EntityUtils';
import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
import { EntityField } from '../../constants/Feeds.constants';
import { OwnerType } from '../../enums/user.enum';
@ -37,7 +40,6 @@ import { TagLabelWithStatus } from '../../utils/EntityVersionUtils.interface';
import Description from '../common/description/Description';
import EntityPageInfo from '../common/entityPageInfo/EntityPageInfo';
import TabsPane from '../common/TabsPane/TabsPane';
import PageContainer from '../containers/PageContainer';
import EntityVersionTimeLine from '../EntityVersionTimeLine/EntityVersionTimeLine';
import Loader from '../Loader/Loader';
import { MlModelVersionProp } from './MlModelVersion.interface';
@ -255,10 +257,11 @@ const MlModelVersion: FC<MlModelVersionProp> = ({
}, [currentVersionData]);
return (
<PageContainer>
<div
className={classNames('p-x-lg w-full h-full d-flex flex-col relative')}
data-testid="dashboard-version-container">
<PageContainerV1>
<PageLayoutV1
pageTitle={t('label.entity-detail-plural', {
entity: getEntityName(currentVersionData),
})}>
{isVersionLoading ? (
<Loader />
) : (
@ -282,7 +285,7 @@ const MlModelVersion: FC<MlModelVersionProp> = ({
/>
<div className="m-t-xss">
<TabsPane activeTab={1} tabs={tabs} />
<div className="bg-white m--x-6 p-x-lg p-y-md">
<Card className="m-y-md">
<Description
isReadOnly
description={getDashboardDescription()}
@ -397,7 +400,7 @@ const MlModelVersion: FC<MlModelVersionProp> = ({
<ErrorPlaceHolder />
)}
</div>
</div>
</Card>
</div>
</div>
)}
@ -409,8 +412,8 @@ const MlModelVersion: FC<MlModelVersionProp> = ({
versionList={versionList}
onBack={backHandler}
/>
</div>
</PageContainer>
</PageLayoutV1>
</PageContainerV1>
);
};

25
openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
View File

@ -964,19 +964,18 @@ const PipelineDetails = ({
{t('label.custom-property-plural')}
</span>
}>
<Card className="h-full">
<CustomPropertyTable
entityDetails={
pipelineDetails as CustomPropertyProps['entityDetails']
}
entityType={EntityType.PIPELINE}
handleExtensionUpdate={onExtensionUpdate}
hasEditAccess={
pipelinePermissions.EditAll ||
pipelinePermissions.EditCustomFields
}
/>
</Card>
<CustomPropertyTable
className="mt-0-important"
entityDetails={
pipelineDetails as CustomPropertyProps['entityDetails']
}
entityType={EntityType.PIPELINE}
handleExtensionUpdate={onExtensionUpdate}
hasEditAccess={
pipelinePermissions.EditAll ||
pipelinePermissions.EditCustomFields
}
/>
</Tabs.TabPane>
<Tabs.TabPane key="*" tab="">
<Redirect to={ROUTES.NOT_FOUND} />

86
openmetadata-ui/src/main/resources/ui/src/components/SampleDataTable/SampleDataTable.component.tsx
View File

@ -12,7 +12,7 @@
*/
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { Space, Typography } from 'antd';
import { Card, Space, Typography } from 'antd';
import { AxiosError } from 'axios';
import classNames from 'classnames';
import { ROUTES } from 'constants/constants';
@ -150,29 +150,29 @@ const SampleDataTable: FunctionComponent<Props> = ({
return <Loader />;
}
return (
<div
className="tw-relative tw-flex tw-justify-between"
data-testid="sample-data"
onScrollCapture={() => {
setScrollOffSet(tableRef.current?.scrollLeft ?? 0);
}}>
{scrollHandle.left ? (
<button
className="tw-border tw-border-main tw-fixed tw-left-7 tw-top-2/3 tw-rounded-full tw-shadow-md tw-z-50 tw-bg-body-main tw-w-8 tw-h-8"
onClick={() => scrollHandler(-50)}>
<LeftOutlined className="tw-text-grey-muted" />
</button>
) : null}
{scrollHandle.right ? (
<button
className="tw-border tw-border-main tw-fixed tw-right-7 tw-top-2/3 tw-rounded-full tw-shadow-md tw-z-50 tw-bg-body-main tw-w-8 tw-h-8"
onClick={() => scrollHandler(50)}>
<RightOutlined className="tw-text-grey-muted" />
</button>
) : null}
return sampleData?.rows?.length && sampleData?.columns?.length ? (
<Card className="m-y-md h-full" id="sampleDataDetails">
<div
className="tw-relative tw-flex tw-justify-between"
data-testid="sample-data"
onScrollCapture={() => {
setScrollOffSet(tableRef.current?.scrollLeft ?? 0);
}}>
{scrollHandle.left ? (
<button
className="tw-border tw-border-main tw-fixed tw-left-7 tw-top-2/3 tw-rounded-full tw-shadow-md tw-z-50 tw-bg-body-main tw-w-8 tw-h-8"
onClick={() => scrollHandler(-50)}>
<LeftOutlined className="tw-text-grey-muted" />
</button>
) : null}
{scrollHandle.right ? (
<button
className="tw-border tw-border-main tw-fixed tw-right-7 tw-top-2/3 tw-rounded-full tw-shadow-md tw-z-50 tw-bg-body-main tw-w-8 tw-h-8"
onClick={() => scrollHandler(50)}>
<RightOutlined className="tw-text-grey-muted" />
</button>
) : null}
{sampleData?.rows?.length && sampleData?.columns?.length ? (
<div
className="tw-table-responsive tw-overflow-x-auto tw-table-container"
ref={tableRef}>
@ -224,27 +224,27 @@ const SampleDataTable: FunctionComponent<Props> = ({
</tbody>
</table>
</div>
) : (
<ErrorPlaceHolder>
<Typography.Paragraph>
<Transi18next
i18nKey="message.view-sample-data-entity"
renderElement={
<a
href={WORKFLOWS_PROFILER_DOCS}
rel="noreferrer"
style={{ color: '#1890ff' }}
target="_blank"
/>
}
values={{
entity: t('label.profiler-ingestion'),
}}
</div>
</Card>
) : (
<ErrorPlaceHolder>
<Typography.Paragraph>
<Transi18next
i18nKey="message.view-sample-data-entity"
renderElement={
<a
href={WORKFLOWS_PROFILER_DOCS}
rel="noreferrer"
style={{ color: '#1890ff' }}
target="_blank"
/>
</Typography.Paragraph>
</ErrorPlaceHolder>
)}
</div>
}
values={{
entity: t('label.profiler-ingestion'),
}}
/>
</Typography.Paragraph>
</ErrorPlaceHolder>
);
};

2
openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.component.tsx
View File

@ -160,7 +160,7 @@ const TableTags = ({
<div className="tw-mt-1 d-flex items-center">
{tags[type].length && hasTagEditAccess ? (
<Button
className="p-0 w-7 h-7 flex-center link-text focus:tw-outline-none hover-cell-icon"
className="p-0 w-7 h-7 flex-center text-primary hover-cell-icon"
data-testid="edit-button"
icon={
<IconEdit height={16} name={t('label.edit')} width={16} />

2
openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainer/tags-container.tsx
View File

@ -203,7 +203,7 @@ const TagsContainer: FunctionComponent<TagsContainerProps> = ({
{tags.length && showEditTagButton ? (
<Button
className="p-0 flex-center"
className="p-0 flex-center text-primary"
data-testid="edit-button"
icon={
<IconEdit

29
openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx
View File

@ -554,11 +554,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
{loader}
</Card>
)}
{activeTab === 3 && (
<Card className={ENTITY_CARD_CLASS} data-testid="sample-data">
<SampleDataTopic topicFQN={topicFQN} />
</Card>
)}
{activeTab === 3 && <SampleDataTopic topicFQN={topicFQN} />}
{activeTab === 4 && (
<Card
className={ENTITY_CARD_CLASS + ' h-full'}
@ -583,18 +579,17 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
</Card>
)}
{activeTab === 6 && (
<Card className={ENTITY_CARD_CLASS}>
<CustomPropertyTable
entityDetails={
topicDetails as CustomPropertyProps['entityDetails']
}
entityType={EntityType.TOPIC}
handleExtensionUpdate={onExtensionUpdate}
hasEditAccess={
topicPermissions.EditAll || topicPermissions.EditCustomFields
}
/>
</Card>
<CustomPropertyTable
className="mt-0-important"
entityDetails={
topicDetails as CustomPropertyProps['entityDetails']
}
entityType={EntityType.TOPIC}
handleExtensionUpdate={onExtensionUpdate}
hasEditAccess={
topicPermissions.EditAll || topicPermissions.EditCustomFields
}
/>
)}
<div
data-testid="observer-element"

2
openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.test.tsx
View File

@ -225,7 +225,7 @@ describe('Test TopicDetails component', () => {
wrapper: MemoryRouter,
}
);
const sampleData = await findByTestId(container, 'sample-data');
const sampleData = await findByText(container, 'SampleDataTopic');
expect(sampleData).toBeInTheDocument();
});

23
openmetadata-ui/src/main/resources/ui/src/components/TopicVersion/TopicVersion.component.tsx
View File

@ -11,12 +11,15 @@
* limitations under the License.
*/
import { Card } from 'antd';
import classNames from 'classnames';
import PageContainer from 'components/containers/PageContainer';
import PageContainerV1 from 'components/containers/PageContainerV1';
import PageLayoutV1 from 'components/containers/PageLayoutV1';
import { isUndefined } from 'lodash';
import { ExtraInfo } from 'Models';
import React, { FC, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { getEntityName } from 'utils/EntityUtils';
import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
import { EntityField } from '../../constants/Feeds.constants';
import { OwnerType } from '../../enums/user.enum';
@ -258,11 +261,11 @@ const TopicVersion: FC<TopicVersionProp> = ({
}, [currentVersionData]);
return (
<PageContainer>
<div
className={classNames(
'tw-px-6 tw-w-full tw-h-full tw-flex tw-flex-col tw-relative'
)}>
<PageContainerV1>
<PageLayoutV1
pageTitle={t('label.entity-detail-plural', {
entity: getEntityName(currentVersionData),
})}>
{isVersionLoading ? (
<Loader />
) : (
@ -282,7 +285,7 @@ const TopicVersion: FC<TopicVersionProp> = ({
/>
<div className="tw-mt-1 tw-flex tw-flex-col tw-flex-grow ">
<TabsPane activeTab={1} className="tw-flex-initial" tabs={tabs} />
<div className="tw-bg-white tw-flex-grow tw--mx-6 tw-px-7 tw-py-4">
<Card className="m-y-md">
<div className="tw-grid tw-grid-cols-4 tw-gap-4 tw-w-full">
<div className="tw-col-span-full">
<Description
@ -310,7 +313,7 @@ const TopicVersion: FC<TopicVersionProp> = ({
</div>
</div>
</div>
</div>
</Card>
</div>
</div>
)}
@ -322,8 +325,8 @@ const TopicVersion: FC<TopicVersionProp> = ({
versionList={versionList}
onBack={backHandler}
/>
</div>
</PageContainer>
</PageLayoutV1>
</PageContainerV1>
);
};

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

@ -12,6 +12,7 @@
*/
import { Col, Row, Table } from 'antd';
import FilterTablePlaceHolder from 'components/common/error-with-placeholder/FilterTablePlaceHolder';
import { NO_DATA_PLACEHOLDER } from 'constants/constants';
import React, { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
@ -140,6 +141,7 @@ const VersionTable = ({ columnName, columns, joins }: VersionTableProps) => {
</Col>
<Col>
<Table
bordered
columns={versionTableColumns}
data-testid="entity-table"
dataSource={data}
@ -147,6 +149,9 @@ const VersionTable = ({ columnName, columns, joins }: VersionTableProps) => {
...getTableExpandableConfig<Column>(),
defaultExpandedRowKeys: [],
}}
locale={{
emptyText: <FilterTablePlaceHolder />,
}}
pagination={false}
rowKey="name"
scroll={{ x: 1200 }}

1
openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.interface.ts
View File

@ -31,4 +31,5 @@ export interface CustomPropertyProps {
entityType: EntityType;
handleExtensionUpdate: (updatedTable: EntityDetails) => Promise<void>;
hasEditAccess: boolean;
className?: string;
}

25
openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.tsx
View File

@ -11,7 +11,7 @@
* limitations under the License.
*/
import { Table, Typography } from 'antd';
import { Card, Table, Typography } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import { AxiosError } from 'axios';
import Loader from 'components/Loader/Loader';
@ -31,6 +31,7 @@ export const CustomPropertyTable: FC<CustomPropertyProps> = ({
handleExtensionUpdate,
entityType,
hasEditAccess,
className,
}) => {
const { t } = useTranslation();
const [entityTypeDetail, setEntityTypeDetail] = useState<Type>({} as Type);
@ -97,7 +98,7 @@ export const CustomPropertyTable: FC<CustomPropertyProps> = ({
return (
<>
{isEmpty(entityTypeDetail.customProperties) ? (
<ErrorPlaceHolder>
<ErrorPlaceHolder className={className}>
<Typography.Paragraph>
{t('message.adding-new-entity-is-easy-just-give-it-a-spin', {
entity: t('label.custom-property-plural'),
@ -105,15 +106,17 @@ export const CustomPropertyTable: FC<CustomPropertyProps> = ({
</Typography.Paragraph>
</ErrorPlaceHolder>
) : (
<Table
bordered
columns={tableColumn}
data-testid="custom-properties-table"
dataSource={entityTypeDetail.customProperties || []}
pagination={false}
rowKey="name"
size="small"
/>
<Card className="m-y-md h-full">
<Table
bordered
columns={tableColumn}
data-testid="custom-properties-table"
dataSource={entityTypeDetail.customProperties || []}
pagination={false}
rowKey="name"
size="small"
/>
</Card>
)}
</>
);

2
openmetadata-ui/src/main/resources/ui/src/components/common/description/Description.tsx
View File

@ -181,7 +181,7 @@ const Description: FC<DescriptionProps> = ({
<Space align="end" size={0}>
{hasEditAccess && (
<Button
className="w-7 h-7 p-0 flex-center"
className="w-7 h-7 p-0 flex-center text-primary"
data-testid="edit-description"
icon={<IconEdit height={16} width={16} />}
type="text"

2
openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
View File

@ -464,7 +464,7 @@ const EntityPageInfo = ({
<Row align="middle" data-testid="entity-tags" gutter={8}>
{!deleted && (
<>
<Col>
<Col className="p-0">
<Space
align="center"
className="w-full h-full"

2
openmetadata-ui/src/main/resources/ui/src/enums/common.enum.ts
View File

@ -18,7 +18,7 @@ export enum ADMIN_ONLY_ACCESSIBLE_SECTION {
export enum SIZE {
SMALL = '60',
MEDIUM = '80',
MEDIUM = '86',
LARGE = '126',
}

19
openmetadata-ui/src/main/resources/ui/src/pages/ContainerPage/ContainerPage.tsx
View File

@ -743,16 +743,15 @@ const ContainerPage = () => {
{t('label.custom-property-plural')}
</span>
}>
<Card className="h-full">
<CustomPropertyTable
entityDetails={
containerData as CustomPropertyProps['entityDetails']
}
entityType={EntityType.CONTAINER}
handleExtensionUpdate={handleExtensionUpdate}
hasEditAccess={hasEditCustomFieldsPermission}
/>
</Card>
<CustomPropertyTable
className="mt-0-important"
entityDetails={
containerData as CustomPropertyProps['entityDetails']
}
entityType={EntityType.CONTAINER}
handleExtensionUpdate={handleExtensionUpdate}
hasEditAccess={hasEditCustomFieldsPermission}
/>
</Tabs.TabPane>
</Tabs>
</div>

3
openmetadata-ui/src/main/resources/ui/src/styles/app.less
View File

@ -61,6 +61,9 @@
// text color
.text-primary {
color: @primary;
&:hover {
color: @primary;
}
}
.error-text {
color: #ff4c3b;

4
openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
View File

@ -322,6 +322,10 @@
padding-left: 0px;
}
.pt-8 {
padding-top: 2rem;
}
.padding-r-l-l {
padding: 0 @padding-lg;
}