yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-10-27 16:55:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix UI : Dashboard request description form (#7889)

Browse Source 
* Fix ui of Dashboard request description form

* Added dashboard name on table level in title

* changes as per comments
This commit is contained in:
Ashish Gupta 2022-10-06 12:51:52 +05:30 committed by GitHub
parent 8427a0d280
commit c19ac8df9d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 121 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx
View File

@ -11,13 +11,13 @@
* limitations under the License. * limitations under the License.
*/ */
import { Button, Card, Input } from 'antd'; import { Button, Card, Form, FormProps, Input, Space } from 'antd';
import { useForm } from 'antd/lib/form/Form';
import { AxiosError } from 'axios'; import { AxiosError } from 'axios';
import { capitalize, isNil } from 'lodash'; import { capitalize, isNil } from 'lodash';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import { EditorContentRef, EntityTags } from 'Models'; import { EditorContentRef, EntityTags } from 'Models';
import React, { import React, {
ChangeEvent,
useCallback, useCallback,
useEffect, useEffect,
useMemo, useMemo,
@ -61,7 +61,7 @@ import { EntityData, Option } from '../TasksPage.interface';
const RequestDescription = () => { const RequestDescription = () => {
const location = useLocation(); const location = useLocation();
const history = useHistory(); const history = useHistory();
const [form] = useForm();
const markdownRef = useRef<EditorContentRef>(); const markdownRef = useRef<EditorContentRef>();
const { entityType, entityFQN } = useParams<{ [key: string]: string }>(); const { entityType, entityFQN } = useParams<{ [key: string]: string }>();
@ -73,7 +73,6 @@ const RequestDescription = () => {
const [entityData, setEntityData] = useState<EntityData>({} as EntityData); const [entityData, setEntityData] = useState<EntityData>({} as EntityData);
const [options, setOptions] = useState<Option[]>([]); const [options, setOptions] = useState<Option[]>([]);
const [assignees, setAssignees] = useState<Array<Option>>([]); const [assignees, setAssignees] = useState<Array<Option>>([]);
const [title, setTitle] = useState<string>('');
const [suggestion, setSuggestion] = useState<string>(''); const [suggestion, setSuggestion] = useState<string>('');
const entityTier = useMemo(() => { const entityTier = useMemo(() => {
@ -90,7 +89,9 @@ const RequestDescription = () => {
const getSanitizeValue = value?.replaceAll(/^"|"$/g, '') || ''; const getSanitizeValue = value?.replaceAll(/^"|"$/g, '') || '';
const message = `Request description for ${getSanitizeValue || entityType}`; const message = `Request description for ${getSanitizeValue || entityType} ${
field !== EntityField.COLUMNS ? getEntityName(entityData) : ''
}`;
// get current user details // get current user details
const currentUser = useMemo( const currentUser = useMemo(
@ -136,20 +137,15 @@ const RequestDescription = () => {
} }
}; };
const onTitleChange = (e: ChangeEvent<HTMLInputElement>) => {
const { value: newValue } = e.target;
setTitle(newValue);
};
const onSuggestionChange = (value: string) => { const onSuggestionChange = (value: string) => {
setSuggestion(value); setSuggestion(value);
}; };
const onCreateTask = () => { const onCreateTask: FormProps['onFinish'] = (value) => {
if (assignees.length) { if (assignees.length) {
const data: CreateThread = { const data: CreateThread = {
from: currentUser?.name as string, from: currentUser?.name as string,
message: title || message, message: value.title || message,
about: getEntityFeedLink(entityType, entityFQN, getTaskAbout()), about: getEntityFeedLink(entityType, entityFQN, getTaskAbout()),
taskDetails: { taskDetails: {
assignees: assignees.map((assignee) => ({ assignees: assignees.map((assignee) => ({
@ -194,7 +190,7 @@ const RequestDescription = () => {
setAssignees(defaultAssignee); setAssignees(defaultAssignee);
setOptions(defaultAssignee); setOptions(defaultAssignee);
} }
setTitle(message); form.setFieldsValue({ title: message.trimEnd() });
}, [entityData]); }, [entityData]);
return ( return (
@ -211,50 +207,52 @@ const RequestDescription = () => {
key="request-description" key="request-description"
style={{ ...cardStyles }} style={{ ...cardStyles }}
title="Create Task"> title="Create Task">
<div data-testid="title"> <Form form={form} layout="vertical" onFinish={onCreateTask}>
<span>Title:</span>{' '} <Form.Item data-testid="title" label="Title:" name="title">
<Input <Input placeholder="Task title" style={{ margin: '4px 0px' }} />
placeholder="Task title" </Form.Item>
style={{ margin: '4px 0px' }} <Form.Item
value={title} data-testid="assignees"
onChange={onTitleChange} label="Assignees:"
/> name="assignees">
</div> <Assignees
assignees={assignees}
options={options}
onChange={setAssignees}
onSearch={onSearch}
/>
</Form.Item>
<Form.Item
data-testid="description-label"
label="Suggest description:"
name="SuggestDescription">
<RichTextEditor
className="tw-my-0"
initialValue=""
placeHolder="Suggest description"
ref={markdownRef}
style={{ marginTop: '4px' }}
onTextChange={onSuggestionChange}
/>
</Form.Item>
<div data-testid="assignees"> <Form.Item noStyle>
<span>Assignees:</span>{' '} <Space
<Assignees className="tw-w-full tw-justify-end"
assignees={assignees} data-testid="cta-buttons"
options={options} size={16}>
onChange={setAssignees} <Button type="link" onClick={back}>
onSearch={onSearch} Back
/> </Button>
</div> <Button
data-testid="submit-test"
<p data-testid="description-label"> htmlType="submit"
<span>Suggest description:</span>{' '} type="primary">
</p> {suggestion ? 'Suggest' : 'Submit'}
</Button>
<RichTextEditor </Space>
className="tw-my-0" </Form.Item>
initialValue="" </Form>
placeHolder="Suggest description"
ref={markdownRef}
style={{ marginTop: '4px' }}
onTextChange={onSuggestionChange}
/>
<div className="tw-flex tw-justify-end" data-testid="cta-buttons">
<Button className="ant-btn-link-custom" type="link" onClick={back}>
Back
</Button>
<Button
className="ant-btn-primary-custom"
type="primary"
onClick={onCreateTask}>
{suggestion ? 'Suggest' : 'Submit'}
</Button>
</div>
</Card> </Card>
<div className="tw-pl-2" data-testid="entity-details"> <div className="tw-pl-2" data-testid="entity-details">

101
openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateDescriptionPage/UpdateDescriptionPage.tsx
View File

@ -11,12 +11,12 @@
* limitations under the License. * limitations under the License.
*/ */
import { Button, Card, Input } from 'antd'; import { Button, Card, Form, FormProps, Input, Space } from 'antd';
import { useForm } from 'antd/lib/form/Form';
import { AxiosError } from 'axios'; import { AxiosError } from 'axios';
import { capitalize, isEmpty, isNil, isUndefined } from 'lodash'; import { capitalize, isEmpty, isNil, isUndefined } from 'lodash';
import { EditorContentRef, EntityTags } from 'Models'; import { EditorContentRef, EntityTags } from 'Models';
import React, { import React, {
ChangeEvent,
useCallback, useCallback,
useEffect, useEffect,
useMemo, useMemo,
@ -60,7 +60,7 @@ import { EntityData, Option } from '../TasksPage.interface';
const UpdateDescription = () => { const UpdateDescription = () => {
const location = useLocation(); const location = useLocation();
const history = useHistory(); const history = useHistory();
const [form] = useForm();
const markdownRef = useRef<EditorContentRef>(); const markdownRef = useRef<EditorContentRef>();
const { entityType, entityFQN } = useParams<{ [key: string]: string }>(); const { entityType, entityFQN } = useParams<{ [key: string]: string }>();
@ -73,7 +73,6 @@ const UpdateDescription = () => {
const [options, setOptions] = useState<Option[]>([]); const [options, setOptions] = useState<Option[]>([]);
const [assignees, setAssignees] = useState<Array<Option>>([]); const [assignees, setAssignees] = useState<Array<Option>>([]);
const [currentDescription, setCurrentDescription] = useState<string>(''); const [currentDescription, setCurrentDescription] = useState<string>('');
const [title, setTitle] = useState<string>('');
const entityTier = useMemo(() => { const entityTier = useMemo(() => {
const tierFQN = getTierTags(entityData.tags || [])?.tagFQN; const tierFQN = getTierTags(entityData.tags || [])?.tagFQN;
@ -95,7 +94,9 @@ const UpdateDescription = () => {
[AppState.userDetails, AppState.nonSecureUserDetails] [AppState.userDetails, AppState.nonSecureUserDetails]
); );
const message = `Update description for ${getSanitizeValue || entityType}`; const message = `Update description for ${getSanitizeValue || entityType} ${
field !== EntityField.COLUMNS ? getEntityName(entityData) : ''
}`;
const back = () => history.goBack(); const back = () => history.goBack();
@ -142,16 +143,11 @@ const UpdateDescription = () => {
} }
}; };
const onTitleChange = (e: ChangeEvent<HTMLInputElement>) => { const onCreateTask: FormProps['onFinish'] = (value) => {
const { value: newValue } = e.target;
setTitle(newValue);
};
const onCreateTask = () => {
if (assignees.length) { if (assignees.length) {
const data: CreateThread = { const data: CreateThread = {
from: currentUser?.name as string, from: currentUser?.name as string,
message: title || message, message: value.title || message,
about: getEntityFeedLink(entityType, entityFQN, getTaskAbout()), about: getEntityFeedLink(entityType, entityFQN, getTaskAbout()),
taskDetails: { taskDetails: {
assignees: assignees.map((assignee) => ({ assignees: assignees.map((assignee) => ({
@ -196,7 +192,7 @@ const UpdateDescription = () => {
setAssignees(defaultAssignee); setAssignees(defaultAssignee);
setOptions(defaultAssignee); setOptions(defaultAssignee);
} }
setTitle(message); form.setFieldsValue({ title: message.trimEnd() });
}, [entityData]); }, [entityData]);
useEffect(() => { useEffect(() => {
@ -217,46 +213,49 @@ const UpdateDescription = () => {
key="update-description" key="update-description"
style={{ ...cardStyles }} style={{ ...cardStyles }}
title="Create Task"> title="Create Task">
<div data-testid="title"> <Form form={form} layout="vertical" onFinish={onCreateTask}>
<span>Title:</span>{' '} <Form.Item data-testid="title" label="Title:" name="title">
<Input <Input placeholder="Task title" style={{ margin: '4px 0px' }} />
placeholder="Task title" </Form.Item>
style={{ margin: '4px 0px' }} <Form.Item
value={title} data-testid="assignees"
onChange={onTitleChange} label="Assignees:"
/> name="assignees">
</div> <Assignees
<div data-testid="assignees"> assignees={assignees}
<span>Assignees:</span>{' '} options={options}
<Assignees onChange={setAssignees}
assignees={assignees} onSearch={onSearch}
options={options}
onChange={setAssignees}
onSearch={onSearch}
/>
</div>
{currentDescription && (
<div data-testid="description-tabs">
<span>Description:</span>{' '}
<DescriptionTabs
description={currentDescription}
markdownRef={markdownRef}
suggestion={currentDescription}
/> />
</div> </Form.Item>
)}
<div className="tw-flex tw-justify-end" data-testid="cta-buttons"> {currentDescription && (
<Button className="ant-btn-link-custom" type="link" onClick={back}> <Form.Item
Back data-testid="description-tabs"
</Button> label="Description:"
<Button name="description">
className="ant-btn-primary-custom" <DescriptionTabs
type="primary" description={currentDescription}
onClick={onCreateTask}> markdownRef={markdownRef}
Submit suggestion={currentDescription}
</Button> />
</div> </Form.Item>
)}
<Form.Item>
<Space
className="tw-w-full tw-justify-end"
data-testid="cta-buttons"
size={16}>
<Button type="link" onClick={back}>
Back
</Button>
<Button htmlType="submit" type="primary">
Submit
</Button>
</Space>
</Form.Item>
</Form>
</Card> </Card>
<div className="tw-pl-2" data-testid="entity-details"> <div className="tw-pl-2" data-testid="entity-details">

21
openmetadata-ui/src/main/resources/ui/src/styles/app.less
View File

@ -17,7 +17,6 @@
@primary-light: rgb(244, 240, 253); @primary-light: rgb(244, 240, 253);
// font size // font size
.text-xs { .text-xs {
font-size: 12px; font-size: 12px;
} }
@ -26,7 +25,6 @@
} }
// text color // text color
.text-primary { .text-primary {
color: @primary; color: @primary;
} }
@ -35,7 +33,6 @@
} }
// Width // Width
.w-8 { .w-8 {
width: 32px; width: 32px;
} }
@ -45,11 +42,21 @@
} }
//Height //Height
.h-7 { .h-7 {
height: 28px; height: 28px;
} }
// Text alignment
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
// flex // flex
.flex { .flex {
display: flex; display: flex;
@ -75,9 +82,6 @@
justify-content: center; justify-content: center;
} }
.text-center {
text-align: center;
}
.break-word { .break-word {
word-break: break-word; word-break: break-word;
} }
@ -89,9 +93,6 @@
.text-semi-bold { .text-semi-bold {
font-weight: 500; font-weight: 500;
} }
.text-center {
text-align: center;
}
.h-min-100 { .h-min-100 {
min-height: 100vh; min-height: 100vh;

6
openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
View File

@ -140,6 +140,12 @@
.m-auto { .m-auto {
margin: auto; margin: auto;
} }
.m-l-auto {
margin-left: auto;
}
.m-r-auto {
margin-right: auto;
}
.m-x-auto { .m-x-auto {
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;