feat(react): update schema history visualizing, truncate long type, o…

…riginal desc bug (#2901)
datahub-project · Jul 16, 2021 · e075a0a · e075a0a
1 parent 89bdfdf
commit e075a0a
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 12 deletions.
diff --git a/datahub-web-react/src/app/entity/dataset/profile/__tests__/SchemaDescriptionField.test.tsx b/datahub-web-react/src/app/entity/dataset/profile/__tests__/SchemaDescriptionField.test.tsx
@@ -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();

diff --git a/datahub-web-react/src/app/entity/dataset/profile/schema/SchemaTable.tsx b/datahub-web-react/src/app/entity/dataset/profile/schema/SchemaTable.tsx
@@ -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}

diff --git a/datahub-web-react/src/app/entity/dataset/profile/schema/components/CustomPagination.tsx b/datahub-web-react/src/app/entity/dataset/profile/schema/components/CustomPagination.tsx
@@ -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"

diff --git a/...hub-web-react/src/app/entity/dataset/profile/schema/components/SchemaDescriptionField.tsx b/...hub-web-react/src/app/entity/dataset/profile/schema/components/SchemaDescriptionField.tsx
@@ -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);
@@ -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}

diff --git a/datahub-web-react/src/app/entity/dataset/profile/schema/components/TypeIcon.tsx b/datahub-web-react/src/app/entity/dataset/profile/schema/components/TypeIcon.tsx
@@ -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>