yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-12-24 16:38:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(react): update schema history visualizing, truncate long type, original desc bug (#2901)

Browse Source
This commit is contained in:
Brian 2021-07-17 03:13:20 +08:00 committed by GitHub
parent 89bdfdf1a8
commit e075a0a004
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
datahub-web-react/src/app/entity/dataset/profile/__tests__/SchemaDescriptionField.test.tsx
View File

@ -18,7 +18,12 @@ describe('SchemaDescriptionField', () => {
it('renders update description modal', async () => {
const { getByText, getByRole, queryByText } = render(
<TestPageContainer>
<SchemaDescriptionField description="test description" isEdited onUpdate={async () => {}} />
<SchemaDescriptionField
description="test description"
original="test description"
isEdited
onUpdate={async () => {}}
/>
</TestPageContainer>,
);
expect(queryByText('Update description')).not.toBeInTheDocument();

1
datahub-web-react/src/app/entity/dataset/profile/schema/SchemaTable.tsx
View File

@ -143,6 +143,7 @@ export default function SchemaTable({
return (
<DescriptionField
description={editMode ? relevantEditableFieldInfo?.description || description : description}
original={record.description}
isEdited={!!relevantEditableFieldInfo?.description}
onUpdate={(updatedDescription) => onUpdateDescription(updatedDescription, record)}
editable={editMode}

18
datahub-web-react/src/app/entity/dataset/profile/schema/components/CustomPagination.tsx
View File

@ -32,8 +32,8 @@ type Props = {
};
export default function CustomPagination({ onChange, maxVersion }: Props) {
const [version1, setVersion1] = useState(maxVersion || 1);
const [version2, setVersion2] = useState(maxVersion ? maxVersion - 1 : 0);
const [version1, setVersion1] = useState(maxVersion || 1); // current version - first dropdown selected
const [version2, setVersion2] = useState(maxVersion ? maxVersion - 1 : 0); // past version comparing with current - second dropdown
const onNextClick = () => {
setVersion1((v) => v - 1);
@ -64,8 +64,8 @@ export default function CustomPagination({ onChange, maxVersion }: Props) {
<Menu onClick={onVersion1Click} selectedKeys={[`${version1}`]}>
{[...Array(maxVersion)].map((_, i) => (
// eslint-disable-next-line react/no-array-index-key
<Menu.Item key={i + 1}>
<Typography.Text>{`version ${i + 1}`}</Typography.Text>
<Menu.Item key={maxVersion - i}>
<Typography.Text>{i === 0 ? 'latest' : `version ${maxVersion + 1 - i}`}</Typography.Text>
</Menu.Item>
))}
</Menu>
@ -75,8 +75,8 @@ export default function CustomPagination({ onChange, maxVersion }: Props) {
<Menu onClick={onVersion2Click} selectedKeys={[`${version2}`]}>
{[...Array(version1)].map((_, i) => (
// eslint-disable-next-line react/no-array-index-key
<Menu.Item key={i}>
<Typography.Text>{`version ${i}`}</Typography.Text>
<Menu.Item key={version1 - i - 1}>
<Typography.Text>{`version ${version1 - i}`}</Typography.Text>
</Menu.Item>
))}
</Menu>
@ -93,11 +93,13 @@ export default function CustomPagination({ onChange, maxVersion }: Props) {
/>
<DescriptionText>Comparing</DescriptionText>
<Dropdown overlay={menu1} trigger={['click']}>
<VersionText strong type="success">{`version ${version1}`}</VersionText>
<VersionText strong type="success">
{version1 === maxVersion ? 'latest' : `version ${version1 + 1}`}
</VersionText>
</Dropdown>
<DescriptionText>to</DescriptionText>
<Dropdown overlay={menu2} trigger={['click']}>
<VersionRightText strong type="success">{`version ${version2}`}</VersionRightText>
<VersionRightText strong type="success">{`version ${version2 + 1}`}</VersionRightText>
</Dropdown>
<NavButton
size="small"

11
datahub-web-react/src/app/entity/dataset/profile/schema/components/SchemaDescriptionField.tsx
View File

@ -65,6 +65,7 @@ const EditedLabel = styled(Typography.Text)`
type Props = {
description: string;
original?: string | null;
onUpdate: (
description: string,
) => Promise<FetchResult<UpdateDatasetMutation, Record<string, any>, Record<string, any>> | void>;
@ -72,7 +73,13 @@ type Props = {
isEdited?: boolean;
};
export default function DescriptionField({ description, onUpdate, editable = true, isEdited = false }: Props) {
export default function DescriptionField({
description,
onUpdate,
editable = true,
isEdited = false,
original,
}: Props) {
const [showAddModal, setShowAddModal] = useState(false);
const onCloseModal = () => setShowAddModal(false);
@ -105,7 +112,7 @@ export default function DescriptionField({ description, onUpdate, editable = tru
<UpdateDescriptionModal
title={description ? 'Update description' : 'Add description'}
description={description}
original={description}
original={original || ''}
onClose={onCloseModal}
onSubmit={onUpdateModal}
isAddDesc={!description}

10
datahub-web-react/src/app/entity/dataset/profile/schema/components/TypeIcon.tsx
View File

@ -70,6 +70,14 @@ const DATA_TYPE_ICON_MAP: Record<SchemaFieldDataType, { icon: FC<{ style: any }>
[SchemaFieldDataType.Struct]: { icon: null, size: 0, text: 'Struct' },
};
const truncate = (length: number, input?: string | null) => {
if (!input) return '';
if (input.length > length) {
return `${input.substring(0, length)}...`;
}
return input;
};
type Props = {
type: SchemaFieldDataType;
nativeDataType: string | null | undefined;
@ -96,7 +104,7 @@ export default function TypeIcon({ type, nativeDataType }: Props) {
<TypeIconContainer data-testid={`icon-${type}`}>
{Icon && <Icon style={{ fontSize: size }} />}
<TypeSubtitle type="secondary" hasicon={Icon ? 'yes' : undefined}>
{nativeFallback ? nativeDataType : text}
{nativeFallback ? truncate(250, nativeDataType) : text}
</TypeSubtitle>
</TypeIconContainer>
</NativeDataTypeTooltip>