yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-11-10 08:21:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(react): update schema table to have fixed description column, set line break with max description width (#2382)

Browse Source
This commit is contained in:
Brian 2021-04-15 10:22:19 +08:00 committed by GitHub
parent f018dd6f3e
commit 9a48e11b7b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
datahub-web-react/src/app/entity/dataset/profile/schema/Schema.tsx
View File

@ -51,6 +51,7 @@ const defaultColumns = [
title: 'Field', title: 'Field',
dataIndex: 'fieldPath', dataIndex: 'fieldPath',
key: 'fieldPath', key: 'fieldPath',
width: 192,
render: (fieldPath: string) => { render: (fieldPath: string) => {
return <Typography.Text strong>{fieldPath}</Typography.Text>; return <Typography.Text strong>{fieldPath}</Typography.Text>;
}, },
@ -153,6 +154,7 @@ export default function SchemaView({ schema, editableSchemaMetadata, updateEdita
dataIndex: 'description', dataIndex: 'description',
key: 'description', key: 'description',
render: descriptionRender, render: descriptionRender,
width: 900,
onCell: (record: SchemaField, rowIndex: number | undefined) => ({ onCell: (record: SchemaField, rowIndex: number | undefined) => ({
onMouseEnter: () => { onMouseEnter: () => {
setDescHoveredIndex(rowIndex); setDescHoveredIndex(rowIndex);

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

@ -8,8 +8,18 @@ import { UpdateDatasetMutation } from '../../../../../graphql/dataset.generated'
const { TextArea } = Input; const { TextArea } = Input;
const DescriptionContainer = styled.div`
position: relative;
display: flex;
flex-direction: row;
`;
const DescriptionText = styled(Typography.Text)` const DescriptionText = styled(Typography.Text)`
padding-right: 8px; padding-right: 8px;
max-width: 600px;
display: block;
overflow-wrap: break-word;
word-wrap: break-word;
`; `;
const DescriptionTextInModal = styled(Typography.Text)` const DescriptionTextInModal = styled(Typography.Text)`
@ -23,7 +33,6 @@ const FormLabel = styled(Typography.Text)`
const EditIcon = styled(EditOutlined)` const EditIcon = styled(EditOutlined)`
cursor: pointer; cursor: pointer;
position: absolute;
margin-top: 4px; margin-top: 4px;
`; `;
@ -52,7 +61,7 @@ export default function DescriptionField({ description, updatedDescription, onHo
}; };
return ( return (
<> <DescriptionContainer>
<DescriptionText>{updatedDescription || description}</DescriptionText> <DescriptionText>{updatedDescription || description}</DescriptionText>
{onHover && <EditIcon twoToneColor="#52c41a" onClick={() => setShowAddModal(true)} />} {onHover && <EditIcon twoToneColor="#52c41a" onClick={() => setShowAddModal(true)} />}
{showAddModal && ( {showAddModal && (
@ -95,6 +104,6 @@ export default function DescriptionField({ description, updatedDescription, onHo
</Form> </Form>
</Modal> </Modal>
)} )}
</> </DescriptionContainer>
); );
} }