Fix UI : Dashboard request description form (#7889)

* Fix ui of Dashboard request description form * Added dashboard name on table level in title * changes as per comments
2025-10-27 08:44:49 +00:00 · 2022-10-06 12:51:52 +05:30 · 2022-10-06 12:51:52 +05:30 · c19ac8df9d
commit c19ac8df9d
parent 8427a0d280
4 changed files with 121 additions and 117 deletions
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx
@ -11,13 +11,13 @@
 *  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 { capitalize, isNil } from 'lodash';
 import { observer } from 'mobx-react';
 import { EditorContentRef, EntityTags } from 'Models';
 import React, {
-  ChangeEvent,
  useCallback,
  useEffect,
  useMemo,
@ -61,7 +61,7 @@ import { EntityData, Option } from '../TasksPage.interface';
 const RequestDescription = () => {
  const location = useLocation();
  const history = useHistory();
-
+  const [form] = useForm();
  const markdownRef = useRef<EditorContentRef>();

  const { entityType, entityFQN } = useParams<{ [key: string]: string }>();
@ -73,7 +73,6 @@ const RequestDescription = () => {
  const [entityData, setEntityData] = useState<EntityData>({} as EntityData);
  const [options, setOptions] = useState<Option[]>([]);
  const [assignees, setAssignees] = useState<Array<Option>>([]);
-  const [title, setTitle] = useState<string>('');
  const [suggestion, setSuggestion] = useState<string>('');

  const entityTier = useMemo(() => {
@ -90,7 +89,9 @@ const RequestDescription = () => {

  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
  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) => {
    setSuggestion(value);
  };

-  const onCreateTask = () => {
+  const onCreateTask: FormProps['onFinish'] = (value) => {
    if (assignees.length) {
      const data: CreateThread = {
        from: currentUser?.name as string,
-        message: title || message,
+        message: value.title || message,
        about: getEntityFeedLink(entityType, entityFQN, getTaskAbout()),
        taskDetails: {
          assignees: assignees.map((assignee) => ({
@ -194,7 +190,7 @@ const RequestDescription = () => {
      setAssignees(defaultAssignee);
      setOptions(defaultAssignee);
    }
-    setTitle(message);
+    form.setFieldsValue({ title: message.trimEnd() });
  }, [entityData]);

  return (
@ -211,50 +207,52 @@ const RequestDescription = () => {
          key="request-description"
          style={{ ...cardStyles }}
          title="Create Task">
-          <div data-testid="title">
-            <span>Title:</span>{' '}
-            <Input
-              placeholder="Task title"
-              style={{ margin: '4px 0px' }}
-              value={title}
-              onChange={onTitleChange}
-            />
-          </div>
+          <Form form={form} layout="vertical" onFinish={onCreateTask}>
+            <Form.Item data-testid="title" label="Title:" name="title">
+              <Input placeholder="Task title" style={{ margin: '4px 0px' }} />
+            </Form.Item>
+            <Form.Item
+              data-testid="assignees"
+              label="Assignees:"
+              name="assignees">
+              <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">
-            <span>Assignees:</span>{' '}
-            <Assignees
-              assignees={assignees}
-              options={options}
-              onChange={setAssignees}
-              onSearch={onSearch}
-            />
-          </div>
-
-          <p data-testid="description-label">
-            <span>Suggest description:</span>{' '}
-          </p>
-
-          <RichTextEditor
-            className="tw-my-0"
-            initialValue=""
-            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>
+            <Form.Item noStyle>
+              <Space
+                className="tw-w-full tw-justify-end"
+                data-testid="cta-buttons"
+                size={16}>
+                <Button type="link" onClick={back}>
+                  Back
+                </Button>
+                <Button
+                  data-testid="submit-test"
+                  htmlType="submit"
+                  type="primary">
+                  {suggestion ? 'Suggest' : 'Submit'}
+                </Button>
+              </Space>
+            </Form.Item>
+          </Form>
        </Card>

        <div className="tw-pl-2" data-testid="entity-details">
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateDescriptionPage/UpdateDescriptionPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateDescriptionPage/UpdateDescriptionPage.tsx
@ -11,12 +11,12 @@
 *  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 { capitalize, isEmpty, isNil, isUndefined } from 'lodash';
 import { EditorContentRef, EntityTags } from 'Models';
 import React, {
-  ChangeEvent,
  useCallback,
  useEffect,
  useMemo,
@ -60,7 +60,7 @@ import { EntityData, Option } from '../TasksPage.interface';
 const UpdateDescription = () => {
  const location = useLocation();
  const history = useHistory();
-
+  const [form] = useForm();
  const markdownRef = useRef<EditorContentRef>();

  const { entityType, entityFQN } = useParams<{ [key: string]: string }>();
@ -73,7 +73,6 @@ const UpdateDescription = () => {
  const [options, setOptions] = useState<Option[]>([]);
  const [assignees, setAssignees] = useState<Array<Option>>([]);
  const [currentDescription, setCurrentDescription] = useState<string>('');
-  const [title, setTitle] = useState<string>('');

  const entityTier = useMemo(() => {
    const tierFQN = getTierTags(entityData.tags || [])?.tagFQN;
@ -95,7 +94,9 @@ const UpdateDescription = () => {
    [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();

@ -142,16 +143,11 @@ const UpdateDescription = () => {
    }
  };

-  const onTitleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const { value: newValue } = e.target;
-    setTitle(newValue);
-  };
-
-  const onCreateTask = () => {
+  const onCreateTask: FormProps['onFinish'] = (value) => {
    if (assignees.length) {
      const data: CreateThread = {
        from: currentUser?.name as string,
-        message: title || message,
+        message: value.title || message,
        about: getEntityFeedLink(entityType, entityFQN, getTaskAbout()),
        taskDetails: {
          assignees: assignees.map((assignee) => ({
@ -196,7 +192,7 @@ const UpdateDescription = () => {
      setAssignees(defaultAssignee);
      setOptions(defaultAssignee);
    }
-    setTitle(message);
+    form.setFieldsValue({ title: message.trimEnd() });
  }, [entityData]);

  useEffect(() => {
@ -217,46 +213,49 @@ const UpdateDescription = () => {
          key="update-description"
          style={{ ...cardStyles }}
          title="Create Task">
-          <div data-testid="title">
-            <span>Title:</span>{' '}
-            <Input
-              placeholder="Task title"
-              style={{ margin: '4px 0px' }}
-              value={title}
-              onChange={onTitleChange}
-            />
-          </div>
-          <div data-testid="assignees">
-            <span>Assignees:</span>{' '}
-            <Assignees
-              assignees={assignees}
-              options={options}
-              onChange={setAssignees}
-              onSearch={onSearch}
-            />
-          </div>
-          {currentDescription && (
-            <div data-testid="description-tabs">
-              <span>Description:</span>{' '}
-              <DescriptionTabs
-                description={currentDescription}
-                markdownRef={markdownRef}
-                suggestion={currentDescription}
+          <Form form={form} layout="vertical" onFinish={onCreateTask}>
+            <Form.Item data-testid="title" label="Title:" name="title">
+              <Input placeholder="Task title" style={{ margin: '4px 0px' }} />
+            </Form.Item>
+            <Form.Item
+              data-testid="assignees"
+              label="Assignees:"
+              name="assignees">
+              <Assignees
+                assignees={assignees}
+                options={options}
+                onChange={setAssignees}
+                onSearch={onSearch}
              />
-            </div>
-          )}
+            </Form.Item>

-          <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}>
-              Submit
-            </Button>
-          </div>
+            {currentDescription && (
+              <Form.Item
+                data-testid="description-tabs"
+                label="Description:"
+                name="description">
+                <DescriptionTabs
+                  description={currentDescription}
+                  markdownRef={markdownRef}
+                  suggestion={currentDescription}
+                />
+              </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>

        <div className="tw-pl-2" data-testid="entity-details">
--- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
@ -17,7 +17,6 @@
@primary-light: rgb(244, 240, 253);

 // font size
-
 .text-xs {
  font-size: 12px;
 }
@ -26,7 +25,6 @@
 }

 // text color
-
 .text-primary {
  color: @primary;
 }
@ -35,7 +33,6 @@
 }

 // Width
-
 .w-8 {
  width: 32px;
 }
@ -45,11 +42,21 @@
 }

 //Height
-
 .h-7 {
  height: 28px;
 }

+// Text alignment
+.text-left {
+  text-align: left;
+}
+.text-center {
+  text-align: center;
+}
+.text-right {
+  text-align: right;
+}
+
 // flex
 .flex {
  display: flex;
@ -75,9 +82,6 @@
  justify-content: center;
 }

-.text-center {
-  text-align: center;
-}
 .break-word {
  word-break: break-word;
 }
@ -89,9 +93,6 @@
 .text-semi-bold {
  font-weight: 500;
 }
-.text-center {
-  text-align: center;
-}

 .h-min-100 {
  min-height: 100vh;
--- a/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
@ -140,6 +140,12 @@
 .m-auto {
  margin: auto;
 }
+.m-l-auto {
+  margin-left: auto;
+}
+.m-r-auto {
+  margin-right: auto;
+}
 .m-x-auto {
  margin-right: auto;
  margin-left: auto;