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

feat: Deprecation 'Note' changed to Markdown Renderable (#9396)

Browse Source 
Setting auto merge after test cases are passed
This commit is contained in:
kushagra-apptware 2023-12-18 11:02:33 +05:30 committed by GitHub
parent caef6771b8
commit e58e2bf3be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 86 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
datahub-web-react/src/app/entity/shared/EntityDropdown/UpdateDeprecationModal.tsx
View File

@ -1,7 +1,10 @@
import React from 'react';
import { Button, DatePicker, Form, Input, message, Modal } from 'antd';
import { Button, DatePicker, Form, message, Modal } from 'antd';
import styled from 'styled-components';
import { useBatchUpdateDeprecationMutation } from '../../../../graphql/mutations.generated';
import { handleBatchError } from '../utils';
import { Editor } from '../tabs/Documentation/components/editor/Editor';
import { ANTD_GRAY } from '../constants';
type Props = {
urns: string[];
@ -9,6 +12,10 @@ type Props = {
refetch?: () => void;
};
const StyledEditor = styled(Editor)`
border: 1px solid ${ANTD_GRAY[4.5]};
`;
export const UpdateDeprecationModal = ({ urns, onClose, refetch }: Props) => {
const [batchUpdateDeprecation] = useBatchUpdateDeprecationMutation();
const [form] = Form.useForm();
@ -64,10 +71,11 @@ export const UpdateDeprecationModal = ({ urns, onClose, refetch }: Props) => {
</Button>
</>
}
width='40%'
>
<Form form={form} name="addDeprecationForm" onFinish={handleOk} layout="vertical">
<Form.Item name="note" label="Note" rules={[{ whitespace: true }, { min: 0, max: 100 }]}>
<Input placeholder="Add Note" autoFocus />
<Form.Item name="note" label="Note" rules={[{ whitespace: true }]}>
<StyledEditor/>
</Form.Item>
<Form.Item name="decommissionTime" label="Decommission Date">
<DatePicker style={{ width: '100%' }} />

82
datahub-web-react/src/app/entity/shared/components/styled/DeprecationPill.tsx
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Divider, message, Modal, Popover, Tooltip, Typography } from 'antd';
import { blue } from '@ant-design/colors';
@ -8,6 +8,8 @@ import { Deprecation } from '../../../../../types.generated';
import { getLocaleTimezone } from '../../../../shared/time/timeUtils';
import { ANTD_GRAY } from '../../constants';
import { useBatchUpdateDeprecationMutation } from '../../../../../graphql/mutations.generated';
import { Editor } from '../../tabs/Documentation/components/editor/Editor';
import StripMarkdownText, { removeMarkdown } from './StripMarkdownText';
const DeprecatedContainer = styled.div`
height: 18px;
@ -38,11 +40,6 @@ const DeprecatedTitle = styled(Typography.Text)`
font-weight: bold;
`;
const DeprecatedSubTitle = styled(Typography.Text)`
display: block;
margin-bottom: 5px;
`;
const LastEvaluatedAtLabel = styled.div`
padding: 0;
margin: 0;
@ -70,15 +67,42 @@ const IconGroup = styled.div`
}
`;
const DescriptionContainer = styled.div`
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 22px;
margin-bottom: 14px;
`;
const StyledViewer = styled(Editor)`
padding-right: 8px;
display: block;
.remirror-editor.ProseMirror {
padding: 0;
}
`;
const ExpandedActions = styled.div`
height: 10px;
`;
const ReadLessText = styled(Typography.Link)`
margin-right: 4px;
`;
type Props = {
urn: string;
deprecation: Deprecation;
refetch?: () => void;
showUndeprecate: boolean | null;
};
const ABBREVIATED_LIMIT = 80;
export const DeprecationPill = ({ deprecation, urn, refetch, showUndeprecate }: Props) => {
const [batchUpdateDeprecationMutation] = useBatchUpdateDeprecationMutation();
const [expanded, setExpanded] = useState(false);
const overLimit = deprecation?.note && removeMarkdown(deprecation?.note).length > 80;
/**
* Deprecation Decommission Timestamp
*/
@ -131,14 +155,56 @@ export const DeprecationPill = ({ deprecation, urn, refetch, showUndeprecate }:
return (
<Popover
overlayStyle={{ maxWidth: 240 }}
overlayStyle={{ maxWidth: 480 }}
placement="right"
content={
hasDetails ? (
<>
{deprecation?.note !== '' && <DeprecatedTitle>Deprecation note</DeprecatedTitle>}
{isDividerNeeded && <ThinDivider />}
{deprecation?.note !== '' && <DeprecatedSubTitle>{deprecation.note}</DeprecatedSubTitle>}
<DescriptionContainer>
{expanded || !overLimit ? (
<>
{
deprecation?.note && deprecation?.note !== '' &&
<>
<StyledViewer content={deprecation.note} readOnly />
<ExpandedActions>
{overLimit && (
<ReadLessText
onClick={() => {
setExpanded(false);
}}
>
Read Less
</ReadLessText>
)}
</ExpandedActions>
</>
}
</>
) : (
<>
<StripMarkdownText
limit={ABBREVIATED_LIMIT}
readMore={
<>
<Typography.Link
onClick={() => {
setExpanded(true);
}}
>
Read More
</Typography.Link>
</>
}
shouldWrap
>
{deprecation.note}
</StripMarkdownText>
</>
)}
</DescriptionContainer>
{deprecation?.decommissionTime !== null && (
<Typography.Text type="secondary">
<Tooltip placement="right" title={decommissionTimeGMT}>

2
smoke-test/tests/cypress/cypress/support/commands.js
View File

@ -171,7 +171,7 @@ Cypress.Commands.add("deleteFromDropdown", () => {
Cypress.Commands.add("addViaFormModal", (text, modelHeader) => {
cy.waitTextVisible(modelHeader);
cy.get(".ant-form-item-control-input-content > input[type='text']").first().type(text);
cy.get('.ProseMirror-focused').type(text);
cy.get(".ant-modal-footer > button:nth-child(2)").click();
});