yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-30 20:06:19 +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 { Button, Col, Row, Typography } from 'antd';
import classNames from 'classnames'; 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 { isUndefined } from 'lodash';
import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'; import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -310,7 +310,11 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
{entityName && feedFilter === FeedFilter.ALL && !threadType ? ( {entityName && feedFilter === FeedFilter.ALL && !threadType ? (
<NoFeedPlaceholder entityName={entityName} /> <NoFeedPlaceholder entityName={entityName} />
) : !refreshFeedCount ? ( ) : !refreshFeedCount ? (
<ErrorPlaceHolder type={ERROR_PLACEHOLDER_TYPE.FILTER} /> <ErrorPlaceHolder
className="mt-0-important pt-8"
size={SIZE.MEDIUM}
type={ERROR_PLACEHOLDER_TYPE.FILTER}
/>
) : null} ) : null}
</div> </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 * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import { Card } from 'antd';
import classNames from 'classnames'; import classNames from 'classnames';
import PageContainer from 'components/containers/PageContainer'; import PageContainerV1 from 'components/containers/PageContainerV1';
import PageLayoutV1 from 'components/containers/PageLayoutV1';
import { import {
ChangeDescription, ChangeDescription,
Column, Column,
@ -384,11 +387,11 @@ const ContainerVersion: React.FC<ContainerVersionProp> = ({
}, [currentVersionData]); }, [currentVersionData]);
return ( return (
<PageContainer> <PageContainerV1>
<div <PageLayoutV1
className={classNames( pageTitle={t('label.entity-detail-plural', {
'tw-px-6 tw-w-full tw-h-full tw-flex tw-flex-col tw-relative' entity: getEntityName(currentVersionData),
)}> })}>
{isVersionLoading ? ( {isVersionLoading ? (
<Loader /> <Loader />
) : ( ) : (
@ -408,7 +411,7 @@ const ContainerVersion: React.FC<ContainerVersionProp> = ({
/> />
<div className="tw-mt-1 tw-flex tw-flex-col tw-flex-grow "> <div className="tw-mt-1 tw-flex tw-flex-col tw-flex-grow ">
<TabsPane activeTab={1} className="tw-flex-initial" tabs={tabs} /> <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-grid tw-grid-cols-4 tw-gap-4 tw-w-full">
<div className="tw-col-span-full"> <div className="tw-col-span-full">
<Description <Description
@ -429,7 +432,7 @@ const ContainerVersion: React.FC<ContainerVersionProp> = ({
/> />
</div> </div>
</div> </div>
</div> </Card>
</div> </div>
</div> </div>
)} )}
@ -441,8 +444,8 @@ const ContainerVersion: React.FC<ContainerVersionProp> = ({
versionList={versionList} versionList={versionList}
onBack={backHandler} onBack={backHandler}
/> />
</div> </PageLayoutV1>
</PageContainer> </PageContainerV1>
); );
}; };

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

@ -859,19 +859,18 @@ const DashboardDetails = ({
</Card> </Card>
)} )}
{activeTab === 4 && ( {activeTab === 4 && (
<Card className={ENTITY_CARD_CLASS}> <CustomPropertyTable
<CustomPropertyTable className="mt-0-important"
entityDetails={ entityDetails={
dashboardDetails as CustomPropertyProps['entityDetails'] dashboardDetails as CustomPropertyProps['entityDetails']
} }
entityType={EntityType.DASHBOARD} entityType={EntityType.DASHBOARD}
handleExtensionUpdate={onExtensionUpdate} handleExtensionUpdate={onExtensionUpdate}
hasEditAccess={ hasEditAccess={
dashboardPermissions.EditAll || dashboardPermissions.EditAll ||
dashboardPermissions.EditCustomFields dashboardPermissions.EditCustomFields
} }
/> />
</Card>
)} )}
<div <div
data-testid="observer-element" 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. * limitations under the License.
*/ */
import { Space, Table } from 'antd'; import { Card, Space, Table } from 'antd';
import { ColumnsType } from 'antd/lib/table'; import { ColumnsType } from 'antd/lib/table';
import classNames from 'classnames'; 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 { isUndefined } from 'lodash';
import { ExtraInfo } from 'Models'; import { ExtraInfo } from 'Models';
import React, { FC, useEffect, useMemo, useState } from 'react'; import React, { FC, useEffect, useMemo, useState } from 'react';
@ -263,69 +264,76 @@ const DashboardVersion: FC<DashboardVersionProp> = ({
); );
return ( return (
<PageContainer> <PageContainerV1>
<div <PageLayoutV1
className={classNames( pageTitle={t('label.entity-detail-plural', {
'tw-px-6 tw-w-full tw-h-full tw-flex tw-flex-col tw-relative' entity: getEntityName(currentVersionData),
)} })}>
data-testid="dashboard-version-container"> <div data-testid="dashboard-version-container">
{isVersionLoading ? ( {isVersionLoading ? (
<Loader /> <Loader />
) : ( ) : (
<div <div
className={classNames('version-data')} className={classNames('version-data')}
data-testid="version-data"> data-testid="version-data">
<EntityPageInfo <EntityPageInfo
isVersionSelected isVersionSelected
deleted={deleted} deleted={deleted}
entityName={ entityName={
currentVersionData.displayName ?? currentVersionData.name ?? '' currentVersionData.displayName ??
} currentVersionData.name ??
extraInfo={getExtraInfo()} ''
followersList={[]} }
serviceType={currentVersionData.serviceType ?? ''} extraInfo={getExtraInfo()}
tags={getTags()} followersList={[]}
tier={{} as TagLabel} serviceType={currentVersionData.serviceType ?? ''}
titleLinks={slashedDashboardName} tags={getTags()}
version={Number(version)} tier={{} as TagLabel}
versionHandler={backHandler} titleLinks={slashedDashboardName}
/> version={Number(version)}
<div className="tw-mt-1 tw-flex tw-flex-col tw-flex-grow "> versionHandler={backHandler}
<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-mt-1 tw-flex tw-flex-col tw-flex-grow ">
<div className="tw-grid tw-grid-cols-4 tw-gap-4 tw-w-full"> <TabsPane
<div className="tw-col-span-full"> activeTab={1}
<Description className="tw-flex-initial"
isReadOnly tabs={tabs}
description={getDashboardDescription()} />
/> <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>
<div className="m-y-md tw-col-span-full"> </Card>
<Table
bordered
columns={tableColumn}
data-testid="schema-table"
dataSource={(currentVersionData as Dashboard)?.charts}
pagination={false}
rowKey="id"
size="small"
/>
</div>
</div>
</div> </div>
</div> </div>
</div> )}
)}
<EntityVersionTimeLine <EntityVersionTimeLine
show show
currentVersion={version} currentVersion={version}
versionHandler={versionHandler} versionHandler={versionHandler}
versionList={versionList} versionList={versionList}
onBack={backHandler} onBack={backHandler}
/> />
</div> </div>
</PageContainer> </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 { findByTestId, findByText, render } from '@testing-library/react';
import React from 'react'; import React, { ReactNode } from 'react';
import { MemoryRouter } from 'react-router-dom'; import { MemoryRouter } from 'react-router-dom';
import DashboardVersion from './DashboardVersion.component'; import DashboardVersion from './DashboardVersion.component';
import { DashboardVersionProp } from './DashboardVersion.interface'; import { DashboardVersionProp } from './DashboardVersion.interface';
@ -65,6 +65,22 @@ jest.mock('../../utils/EntityVersionUtils', () => ({
getTagsDiff: jest.fn(), 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([]); JSON.parse = jest.fn().mockReturnValue([]);
describe('Test DashboardVersion page', () => { 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. * limitations under the License.
*/ */
import { Table, Typography } from 'antd'; import { Card, Table, Typography } from 'antd';
import { ColumnsType } from 'antd/lib/table'; import { ColumnsType } from 'antd/lib/table';
import classNames from 'classnames'; import classNames from 'classnames';
import RichTextEditorPreviewer from 'components/common/rich-text-editor/RichTextEditorPreviewer'; 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 TagsViewer from 'components/Tag/TagsViewer/tags-viewer';
import { import {
ChangeDescription, ChangeDescription,
@ -248,71 +249,78 @@ const DataModelVersion: FC<DataModelVersionProp> = ({
); );
return ( return (
<PageContainer> <PageContainerV1>
<div <PageLayoutV1
className={classNames( pageTitle={t('label.entity-detail-plural', {
'tw-px-6 tw-w-full tw-h-full tw-flex tw-flex-col tw-relative' entity: getEntityName(currentVersionData),
)} })}>
data-testid="data-model-version-container"> <div data-testid="data-model-version-container">
{isVersionLoading ? ( {isVersionLoading ? (
<Loader /> <Loader />
) : ( ) : (
<div <div
className={classNames('version-data')} className={classNames('version-data')}
data-testid="version-data"> data-testid="version-data">
<EntityPageInfo <EntityPageInfo
isVersionSelected isVersionSelected
deleted={deleted} deleted={deleted}
entityName={ entityName={
currentVersionData.displayName ?? currentVersionData.name ?? '' currentVersionData.displayName ??
} currentVersionData.name ??
extraInfo={getExtraInfo()} ''
followersList={[]} }
serviceType={currentVersionData.serviceType ?? ''} extraInfo={getExtraInfo()}
tags={getTags()} followersList={[]}
tier={{} as TagLabel} serviceType={currentVersionData.serviceType ?? ''}
titleLinks={slashedDataModelName} tags={getTags()}
version={Number(version)} tier={{} as TagLabel}
versionHandler={backHandler} titleLinks={slashedDataModelName}
/> version={Number(version)}
<div className="tw-mt-1 tw-flex tw-flex-col tw-flex-grow "> versionHandler={backHandler}
<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-mt-1 tw-flex tw-flex-col tw-flex-grow ">
<div className="tw-grid tw-grid-cols-4 tw-gap-4 tw-w-full"> <TabsPane
<div className="tw-col-span-full"> activeTab={1}
<Description className="tw-flex-initial"
isReadOnly tabs={tabs}
description={getDashboardDescription()} />
/> <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>
<div className="m-y-md tw-col-span-full"> </Card>
<Table
bordered
columns={tableColumn}
data-testid="schema-table"
dataSource={
(currentVersionData as DashboardDataModel)?.columns
}
pagination={false}
rowKey="id"
size="small"
/>
</div>
</div>
</div> </div>
</div> </div>
</div> )}
)}
<EntityVersionTimeLine <EntityVersionTimeLine
show show
currentVersion={version} currentVersion={version}
versionHandler={versionHandler} versionHandler={versionHandler}
versionList={versionList} versionList={versionList}
onBack={backHandler} onBack={backHandler}
/> />
</div> </div>
</PageContainer> </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> </Card>
)} )}
{activeTab === 3 && ( {activeTab === 3 && (
<Card className="m-y-md h-full" id="sampleDataDetails"> <SampleDataTable
<SampleDataTable isTableDeleted={tableDetails.deleted}
isTableDeleted={tableDetails.deleted} tableId={tableDetails.id}
tableId={tableDetails.id} />
/>
</Card>
)} )}
{activeTab === 4 && ( {activeTab === 4 && (
<TableQueries <TableQueries
@ -835,19 +833,16 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
<DbtTab dataModel={dataModel} /> <DbtTab dataModel={dataModel} />
)} )}
{activeTab === 9 && ( {activeTab === 9 && (
<Card className="m-y-md h-full"> <CustomPropertyTable
<CustomPropertyTable entityDetails={
entityDetails={ tableDetails as CustomPropertyProps['entityDetails']
tableDetails as CustomPropertyProps['entityDetails'] }
} entityType={EntityType.TABLE}
entityType={EntityType.TABLE} handleExtensionUpdate={handleExtensionUpdate}
handleExtensionUpdate={handleExtensionUpdate} hasEditAccess={
hasEditAccess={ tablePermissions.EditAll || tablePermissions.EditCustomFields
tablePermissions.EditAll || }
tablePermissions.EditCustomFields />
}
/>
</Card>
)} )}
</div> </div>

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

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

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

@ -439,7 +439,7 @@ const EntityTable = ({
{hasDescriptionEditAccess && ( {hasDescriptionEditAccess && (
<> <>
<Button <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" type="text"
onClick={() => handleUpdate(record, index)}> onClick={() => handleUpdate(record, index)}>
<IconEdit <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> </Card>
)} )}
{activeTab === 5 && ( {activeTab === 5 && (
<Card className={ENTITY_CARD_CLASS}> <CustomPropertyTable
<CustomPropertyTable className="mt-0-important"
entityDetails={ entityDetails={
mlModelDetail as CustomPropertyProps['entityDetails'] mlModelDetail as CustomPropertyProps['entityDetails']
} }
entityType={EntityType.MLMODEL} entityType={EntityType.MLMODEL}
handleExtensionUpdate={onExtensionUpdate} handleExtensionUpdate={onExtensionUpdate}
hasEditAccess={ hasEditAccess={
mlModelPermissions.EditAll || mlModelPermissions.EditAll ||
mlModelPermissions.EditCustomFields mlModelPermissions.EditCustomFields
} }
/> />
</Card>
)} )}
<div <div
data-testid="observer-element" 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 classNames from 'classnames';
import ErrorPlaceHolder from 'components/common/error-with-placeholder/ErrorPlaceHolder'; import ErrorPlaceHolder from 'components/common/error-with-placeholder/ErrorPlaceHolder';
import RichTextEditorPreviewer from 'components/common/rich-text-editor/RichTextEditorPreviewer'; 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 SourceList from 'components/MlModelDetail/SourceList.component';
import TagsContainer from 'components/Tag/TagsContainer/tags-container'; import TagsContainer from 'components/Tag/TagsContainer/tags-container';
import { MlFeature, Mlmodel } from 'generated/entity/data/mlmodel'; import { MlFeature, Mlmodel } from 'generated/entity/data/mlmodel';
@ -22,6 +24,7 @@ import { isUndefined } from 'lodash';
import { ExtraInfo } from 'Models'; import { ExtraInfo } from 'Models';
import React, { FC, Fragment, useEffect, useState } from 'react'; import React, { FC, Fragment, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { getEntityName } from 'utils/EntityUtils';
import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants'; import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
import { EntityField } from '../../constants/Feeds.constants'; import { EntityField } from '../../constants/Feeds.constants';
import { OwnerType } from '../../enums/user.enum'; import { OwnerType } from '../../enums/user.enum';
@ -37,7 +40,6 @@ import { TagLabelWithStatus } from '../../utils/EntityVersionUtils.interface';
import Description from '../common/description/Description'; import Description from '../common/description/Description';
import EntityPageInfo from '../common/entityPageInfo/EntityPageInfo'; import EntityPageInfo from '../common/entityPageInfo/EntityPageInfo';
import TabsPane from '../common/TabsPane/TabsPane'; import TabsPane from '../common/TabsPane/TabsPane';
import PageContainer from '../containers/PageContainer';
import EntityVersionTimeLine from '../EntityVersionTimeLine/EntityVersionTimeLine'; import EntityVersionTimeLine from '../EntityVersionTimeLine/EntityVersionTimeLine';
import Loader from '../Loader/Loader'; import Loader from '../Loader/Loader';
import { MlModelVersionProp } from './MlModelVersion.interface'; import { MlModelVersionProp } from './MlModelVersion.interface';
@ -255,10 +257,11 @@ const MlModelVersion: FC<MlModelVersionProp> = ({
}, [currentVersionData]); }, [currentVersionData]);
return ( return (
<PageContainer> <PageContainerV1>
<div <PageLayoutV1
className={classNames('p-x-lg w-full h-full d-flex flex-col relative')} pageTitle={t('label.entity-detail-plural', {
data-testid="dashboard-version-container"> entity: getEntityName(currentVersionData),
})}>
{isVersionLoading ? ( {isVersionLoading ? (
<Loader /> <Loader />
) : ( ) : (
@ -282,7 +285,7 @@ const MlModelVersion: FC<MlModelVersionProp> = ({
/> />
<div className="m-t-xss"> <div className="m-t-xss">
<TabsPane activeTab={1} tabs={tabs} /> <TabsPane activeTab={1} tabs={tabs} />
<div className="bg-white m--x-6 p-x-lg p-y-md"> <Card className="m-y-md">
<Description <Description
isReadOnly isReadOnly
description={getDashboardDescription()} description={getDashboardDescription()}
@ -397,7 +400,7 @@ const MlModelVersion: FC<MlModelVersionProp> = ({
<ErrorPlaceHolder /> <ErrorPlaceHolder />
)} )}
</div> </div>
</div> </Card>
</div> </div>
</div> </div>
)} )}
@ -409,8 +412,8 @@ const MlModelVersion: FC<MlModelVersionProp> = ({
versionList={versionList} versionList={versionList}
onBack={backHandler} onBack={backHandler}
/> />
</div> </PageLayoutV1>
</PageContainer> </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')} {t('label.custom-property-plural')}
</span> </span>
}> }>
<Card className="h-full"> <CustomPropertyTable
<CustomPropertyTable className="mt-0-important"
entityDetails={ entityDetails={
pipelineDetails as CustomPropertyProps['entityDetails'] pipelineDetails as CustomPropertyProps['entityDetails']
} }
entityType={EntityType.PIPELINE} entityType={EntityType.PIPELINE}
handleExtensionUpdate={onExtensionUpdate} handleExtensionUpdate={onExtensionUpdate}
hasEditAccess={ hasEditAccess={
pipelinePermissions.EditAll || pipelinePermissions.EditAll ||
pipelinePermissions.EditCustomFields pipelinePermissions.EditCustomFields
} }
/> />
</Card>
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane key="*" tab=""> <Tabs.TabPane key="*" tab="">
<Redirect to={ROUTES.NOT_FOUND} /> <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 { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { Space, Typography } from 'antd'; import { Card, Space, Typography } from 'antd';
import { AxiosError } from 'axios'; import { AxiosError } from 'axios';
import classNames from 'classnames'; import classNames from 'classnames';
import { ROUTES } from 'constants/constants'; import { ROUTES } from 'constants/constants';
@ -150,29 +150,29 @@ const SampleDataTable: FunctionComponent<Props> = ({
return <Loader />; return <Loader />;
} }
return ( return sampleData?.rows?.length && sampleData?.columns?.length ? (
<div <Card className="m-y-md h-full" id="sampleDataDetails">
className="tw-relative tw-flex tw-justify-between" <div
data-testid="sample-data" className="tw-relative tw-flex tw-justify-between"
onScrollCapture={() => { data-testid="sample-data"
setScrollOffSet(tableRef.current?.scrollLeft ?? 0); onScrollCapture={() => {
}}> setScrollOffSet(tableRef.current?.scrollLeft ?? 0);
{scrollHandle.left ? ( }}>
<button {scrollHandle.left ? (
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" <button
onClick={() => scrollHandler(-50)}> 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"
<LeftOutlined className="tw-text-grey-muted" /> onClick={() => scrollHandler(-50)}>
</button> <LeftOutlined className="tw-text-grey-muted" />
) : null} </button>
{scrollHandle.right ? ( ) : null}
<button {scrollHandle.right ? (
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" <button
onClick={() => scrollHandler(50)}> 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"
<RightOutlined className="tw-text-grey-muted" /> onClick={() => scrollHandler(50)}>
</button> <RightOutlined className="tw-text-grey-muted" />
) : null} </button>
) : null}
{sampleData?.rows?.length && sampleData?.columns?.length ? (
<div <div
className="tw-table-responsive tw-overflow-x-auto tw-table-container" className="tw-table-responsive tw-overflow-x-auto tw-table-container"
ref={tableRef}> ref={tableRef}>
@ -224,27 +224,27 @@ const SampleDataTable: FunctionComponent<Props> = ({
</tbody> </tbody>
</table> </table>
</div> </div>
) : ( </div>
<ErrorPlaceHolder> </Card>
<Typography.Paragraph> ) : (
<Transi18next <ErrorPlaceHolder>
i18nKey="message.view-sample-data-entity" <Typography.Paragraph>
renderElement={ <Transi18next
<a i18nKey="message.view-sample-data-entity"
href={WORKFLOWS_PROFILER_DOCS} renderElement={
rel="noreferrer" <a
style={{ color: '#1890ff' }} href={WORKFLOWS_PROFILER_DOCS}
target="_blank" rel="noreferrer"
/> style={{ color: '#1890ff' }}
} target="_blank"
values={{
entity: t('label.profiler-ingestion'),
}}
/> />
</Typography.Paragraph> }
</ErrorPlaceHolder> values={{
)} entity: t('label.profiler-ingestion'),
</div> }}
/>
</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"> <div className="tw-mt-1 d-flex items-center">
{tags[type].length && hasTagEditAccess ? ( {tags[type].length && hasTagEditAccess ? (
<Button <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" data-testid="edit-button"
icon={ icon={
<IconEdit height={16} name={t('label.edit')} width={16} /> <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 ? ( {tags.length && showEditTagButton ? (
<Button <Button
className="p-0 flex-center" className="p-0 flex-center text-primary"
data-testid="edit-button" data-testid="edit-button"
icon={ icon={
<IconEdit <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} {loader}
</Card> </Card>
)} )}
{activeTab === 3 && ( {activeTab === 3 && <SampleDataTopic topicFQN={topicFQN} />}
<Card className={ENTITY_CARD_CLASS} data-testid="sample-data">
<SampleDataTopic topicFQN={topicFQN} />
</Card>
)}
{activeTab === 4 && ( {activeTab === 4 && (
<Card <Card
className={ENTITY_CARD_CLASS + ' h-full'} className={ENTITY_CARD_CLASS + ' h-full'}
@ -583,18 +579,17 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
</Card> </Card>
)} )}
{activeTab === 6 && ( {activeTab === 6 && (
<Card className={ENTITY_CARD_CLASS}> <CustomPropertyTable
<CustomPropertyTable className="mt-0-important"
entityDetails={ entityDetails={
topicDetails as CustomPropertyProps['entityDetails'] topicDetails as CustomPropertyProps['entityDetails']
} }
entityType={EntityType.TOPIC} entityType={EntityType.TOPIC}
handleExtensionUpdate={onExtensionUpdate} handleExtensionUpdate={onExtensionUpdate}
hasEditAccess={ hasEditAccess={
topicPermissions.EditAll || topicPermissions.EditCustomFields topicPermissions.EditAll || topicPermissions.EditCustomFields
} }
/> />
</Card>
)} )}
<div <div
data-testid="observer-element" 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, wrapper: MemoryRouter,
} }
); );
const sampleData = await findByTestId(container, 'sample-data'); const sampleData = await findByText(container, 'SampleDataTopic');
expect(sampleData).toBeInTheDocument(); 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. * limitations under the License.
*/ */
import { Card } from 'antd';
import classNames from 'classnames'; 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 { isUndefined } from 'lodash';
import { ExtraInfo } from 'Models'; import { ExtraInfo } from 'Models';
import React, { FC, useEffect, useState } from 'react'; import React, { FC, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { getEntityName } from 'utils/EntityUtils';
import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants'; import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
import { EntityField } from '../../constants/Feeds.constants'; import { EntityField } from '../../constants/Feeds.constants';
import { OwnerType } from '../../enums/user.enum'; import { OwnerType } from '../../enums/user.enum';
@ -258,11 +261,11 @@ const TopicVersion: FC<TopicVersionProp> = ({
}, [currentVersionData]); }, [currentVersionData]);
return ( return (
<PageContainer> <PageContainerV1>
<div <PageLayoutV1
className={classNames( pageTitle={t('label.entity-detail-plural', {
'tw-px-6 tw-w-full tw-h-full tw-flex tw-flex-col tw-relative' entity: getEntityName(currentVersionData),
)}> })}>
{isVersionLoading ? ( {isVersionLoading ? (
<Loader /> <Loader />
) : ( ) : (
@ -282,7 +285,7 @@ const TopicVersion: FC<TopicVersionProp> = ({
/> />
<div className="tw-mt-1 tw-flex tw-flex-col tw-flex-grow "> <div className="tw-mt-1 tw-flex tw-flex-col tw-flex-grow ">
<TabsPane activeTab={1} className="tw-flex-initial" tabs={tabs} /> <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-grid tw-grid-cols-4 tw-gap-4 tw-w-full">
<div className="tw-col-span-full"> <div className="tw-col-span-full">
<Description <Description
@ -310,7 +313,7 @@ const TopicVersion: FC<TopicVersionProp> = ({
</div> </div>
</div> </div>
</div> </div>
</div> </Card>
</div> </div>
</div> </div>
)} )}
@ -322,8 +325,8 @@ const TopicVersion: FC<TopicVersionProp> = ({
versionList={versionList} versionList={versionList}
onBack={backHandler} onBack={backHandler}
/> />
</div> </PageLayoutV1>
</PageContainer> </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 { Col, Row, Table } from 'antd';
import FilterTablePlaceHolder from 'components/common/error-with-placeholder/FilterTablePlaceHolder';
import { NO_DATA_PLACEHOLDER } from 'constants/constants'; import { NO_DATA_PLACEHOLDER } from 'constants/constants';
import React, { useEffect, useMemo, useState } from 'react'; import React, { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -140,6 +141,7 @@ const VersionTable = ({ columnName, columns, joins }: VersionTableProps) => {
</Col> </Col>
<Col> <Col>
<Table <Table
bordered
columns={versionTableColumns} columns={versionTableColumns}
data-testid="entity-table" data-testid="entity-table"
dataSource={data} dataSource={data}
@ -147,6 +149,9 @@ const VersionTable = ({ columnName, columns, joins }: VersionTableProps) => {
...getTableExpandableConfig<Column>(), ...getTableExpandableConfig<Column>(),
defaultExpandedRowKeys: [], defaultExpandedRowKeys: [],
}} }}
locale={{
emptyText: <FilterTablePlaceHolder />,
}}
pagination={false} pagination={false}
rowKey="name" rowKey="name"
scroll={{ x: 1200 }} 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; entityType: EntityType;
handleExtensionUpdate: (updatedTable: EntityDetails) => Promise<void>; handleExtensionUpdate: (updatedTable: EntityDetails) => Promise<void>;
hasEditAccess: boolean; 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. * limitations under the License.
*/ */
import { Table, Typography } from 'antd'; import { Card, Table, Typography } from 'antd';
import { ColumnsType } from 'antd/lib/table'; import { ColumnsType } from 'antd/lib/table';
import { AxiosError } from 'axios'; import { AxiosError } from 'axios';
import Loader from 'components/Loader/Loader'; import Loader from 'components/Loader/Loader';
@ -31,6 +31,7 @@ export const CustomPropertyTable: FC<CustomPropertyProps> = ({
handleExtensionUpdate, handleExtensionUpdate,
entityType, entityType,
hasEditAccess, hasEditAccess,
className,
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [entityTypeDetail, setEntityTypeDetail] = useState<Type>({} as Type); const [entityTypeDetail, setEntityTypeDetail] = useState<Type>({} as Type);
@ -97,7 +98,7 @@ export const CustomPropertyTable: FC<CustomPropertyProps> = ({
return ( return (
<> <>
{isEmpty(entityTypeDetail.customProperties) ? ( {isEmpty(entityTypeDetail.customProperties) ? (
<ErrorPlaceHolder> <ErrorPlaceHolder className={className}>
<Typography.Paragraph> <Typography.Paragraph>
{t('message.adding-new-entity-is-easy-just-give-it-a-spin', { {t('message.adding-new-entity-is-easy-just-give-it-a-spin', {
entity: t('label.custom-property-plural'), entity: t('label.custom-property-plural'),
@ -105,15 +106,17 @@ export const CustomPropertyTable: FC<CustomPropertyProps> = ({
</Typography.Paragraph> </Typography.Paragraph>
</ErrorPlaceHolder> </ErrorPlaceHolder>
) : ( ) : (
<Table <Card className="m-y-md h-full">
bordered <Table
columns={tableColumn} bordered
data-testid="custom-properties-table" columns={tableColumn}
dataSource={entityTypeDetail.customProperties || []} data-testid="custom-properties-table"
pagination={false} dataSource={entityTypeDetail.customProperties || []}
rowKey="name" pagination={false}
size="small" 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}> <Space align="end" size={0}>
{hasEditAccess && ( {hasEditAccess && (
<Button <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" data-testid="edit-description"
icon={<IconEdit height={16} width={16} />} icon={<IconEdit height={16} width={16} />}
type="text" 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}> <Row align="middle" data-testid="entity-tags" gutter={8}>
{!deleted && ( {!deleted && (
<> <>
<Col> <Col className="p-0">
<Space <Space
align="center" align="center"
className="w-full h-full" 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 { export enum SIZE {
SMALL = '60', SMALL = '60',
MEDIUM = '80', MEDIUM = '86',
LARGE = '126', 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')} {t('label.custom-property-plural')}
</span> </span>
}> }>
<Card className="h-full"> <CustomPropertyTable
<CustomPropertyTable className="mt-0-important"
entityDetails={ entityDetails={
containerData as CustomPropertyProps['entityDetails'] containerData as CustomPropertyProps['entityDetails']
} }
entityType={EntityType.CONTAINER} entityType={EntityType.CONTAINER}
handleExtensionUpdate={handleExtensionUpdate} handleExtensionUpdate={handleExtensionUpdate}
hasEditAccess={hasEditCustomFieldsPermission} hasEditAccess={hasEditCustomFieldsPermission}
/> />
</Card>
</Tabs.TabPane> </Tabs.TabPane>
</Tabs> </Tabs>
</div> </div>

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

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

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

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