Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Jul 16, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
95496fc
feat(react): update schema history visualizing, truncate schema type …
topwebtek7 Jul 16, 2021
cfe6848
fix(schema): fix schema original description bug in modal
topwebtek7 Jul 16, 2021
ddaf91f
fix(react): fix test issue
topwebtek7 Jul 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion datahub-web-react/src/app/entity/dataset/profile/__tests__/SchemaDescriptionField.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
1 change: 1 addition & 0 deletions datahub-web-react/src/app/entity/dataset/profile/schema/SchemaTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
18 changes: 10 additions & 8 deletions datahub-web-react/src/app/entity/dataset/profile/schema/components/CustomPagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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"
Expand Down
11 changes: 9 additions & 2 deletions ...hub-web-react/src/app/entity/dataset/profile/schema/components/SchemaDescriptionField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,14 +65,21 @@ 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>;
editable?: boolean;
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);
Expand Down Expand Up @@ -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}
Expand Down
10 changes: 9 additions & 1 deletion datahub-web-react/src/app/entity/dataset/profile/schema/components/TypeIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>
Expand Down