Fix : UI Improvements (#10259)

* UI Improvements * unit test fixes
2025-10-16 19:28:21 +00:00 · 2023-02-22 18:53:18 +05:30 · 2023-02-22 18:53:18 +05:30 · 02d2390afc
commit 02d2390afc
parent 3cb872270c
13 changed files with 260 additions and 253 deletions
--- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/menu.svg
+++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/menu.svg
@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.23743 1.51256C9.92085 2.19598 9.92085 3.30402 9.23743 3.98743C8.55402 4.67085 7.44598 4.67085 6.76256 3.98743C6.07915 3.30402 6.07915 2.19598 6.76256 1.51256C7.44595 0.829146 8.55399 0.829146 9.23743 1.51256Z" fill=
+"currentColor"/>
+<path d="M9.23743 6.76256C9.92085 7.44598 9.92085 8.55402 9.23743 9.23743C8.55402 9.92085 7.44598 9.92085 6.76256 9.23743C6.07915 8.55402 6.07915 7.44598 6.76256 6.76256C7.44595 6.07915 8.55399 6.07915 9.23743 6.76256" fill="currentColor"/>
+<path d="M9.23743 12.0126C9.92085 12.696 9.92085 13.804 9.23743 14.4874C8.55402 15.1709 7.44598 15.1709 6.76256 14.4874C6.07915 13.804 6.07915 12.696 6.76256 12.0126C7.44595 11.3291 8.55399 11.3291 9.23743 12.0126" fill="currentColor"/>
+</svg>
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanelBody.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanelBody.tsx
@ -11,7 +11,7 @@
 *  limitations under the License.
 */

-import { Button, Switch } from 'antd';
+import { Button, Space, Switch } from 'antd';
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
 import { Operation } from 'fast-json-patch';
@ -251,10 +251,13 @@ const ActivityThreadPanelBody: FC<ActivityThreadPanelBodyProp> = ({
          />
        )}
        {isTaskType && (
-          <div className="tw-flex tw-justify-end tw-mr-2 tw-mt-2">
+          <Space
+            align="center"
+            className="w-full justify-end p-r-xs m-t-xs"
+            size={4}>
            <Switch size="small" onChange={onSwitchChange} />
            <span className="tw-ml-1">{t('label.closed-task-plural')}</span>
-          </div>
+          </Space>
        )}

        {!isUndefined(selectedThread) ? (
--- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx
@ -11,11 +11,7 @@
 *  limitations under the License.
 */

-import {
-  CheckOutlined,
-  CloseOutlined,
-  EllipsisOutlined,
-} from '@ant-design/icons';
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
 import {
  Button,
  Col,
@ -42,6 +38,7 @@ import { Link } from 'react-router-dom';
 import { restoreTeam } from 'rest/teamsAPI';
 import AppState from '../../AppState';
 import { ReactComponent as IconEdit } from '../../assets/svg/ic-edit.svg';
+import { ReactComponent as IconDropdown } from '../../assets/svg/menu.svg';
 import {
  getTeamAndUserDetailsPath,
  getUserPath,
@ -1089,14 +1086,13 @@ const TeamDetailsV1 = ({
                trigger={['click']}
                onOpenChange={setShowActions}>
                <Button
-                  className="rounded-4 w-6 manage-dropdown-button"
+                  className="rounded-4 w-6 manage-dropdown-button d-flex justify-center"
                  data-testid="teams-dropdown"
-                  size="small">
-                  <EllipsisOutlined
-                    className="text-primary self-center manage-dropdown-icon"
-                    rotate={90}
-                  />
-                </Button>
+                  icon={
+                    <IconDropdown className="text-primary self-center manage-dropdown-icon" />
+                  }
+                  size="small"
+                />
              </Dropdown>
            )}
          </div>
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/ManageButton/ManageButton.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/ManageButton/ManageButton.tsx
@ -11,16 +11,19 @@
 *  limitations under the License.
 */

-import { EllipsisOutlined } from '@ant-design/icons';
 import { Button, Col, Dropdown, Modal, Row, Tooltip, Typography } from 'antd';
 import { ItemType } from 'antd/lib/menu/hooks/useItems';
 import classNames from 'classnames';
 import React, { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { ReactComponent as IconAnnouncementsBlack } from '../../../../assets/svg/announcements-black.svg';
+import { ReactComponent as IconDelete } from '../../../../assets/svg/ic-delete.svg';
+import { ReactComponent as IconRestore } from '../../../../assets/svg/ic-restore.svg';
+import { ReactComponent as IconDropdown } from '../../../../assets/svg/menu.svg';
+
 import { NO_PERMISSION_FOR_ACTION } from '../../../../constants/HelperTextUtil';
 import { EntityType } from '../../../../enums/entity.enum';
 import { ANNOUNCEMENT_ENTITIES } from '../../../../utils/AnnouncementsUtils';
-import SVGIcons, { Icons } from '../../../../utils/SvgUtils';
 import DeleteWidgetModal from '../../DeleteWidget/DeleteWidgetModal';
 import './ManageButton.less';

@ -70,8 +73,8 @@ const ManageButton: FC<Props> = ({
      label: (
        <Tooltip title={canDelete ? '' : NO_PERMISSION_FOR_ACTION}>
          <Row
-            className={classNames('tw-cursor-pointer manage-button', {
-              'tw-cursor-not-allowed tw-opacity-50': !canDelete,
+            className={classNames('cursor-pointer manage-button', {
+              'cursor-not-allowed opacity-50': !canDelete,
            })}
            onClick={(e) => {
              if (canDelete) {
@ -81,7 +84,7 @@ const ManageButton: FC<Props> = ({
              }
            }}>
            <Col span={3}>
-              <SVGIcons alt="Delete" icon={Icons.DELETE} width="20px" />
+              <IconDelete className="m-t-xss" name="Delete" width={20} />
            </Col>
            <Col span={21}>
              <Row data-testid="delete-button">
@ -112,8 +115,8 @@ const ManageButton: FC<Props> = ({
            label: (
              <Tooltip title={canDelete ? '' : NO_PERMISSION_FOR_ACTION}>
                <Row
-                  className={classNames('tw-cursor-pointer manage-button', {
-                    'tw-cursor-not-allowed tw-opacity-50': !canDelete,
+                  className={classNames('cursor-pointer manage-button', {
+                    'cursor-not-allowed opacity-50': !canDelete,
                  })}
                  onClick={(e) => {
                    if (canDelete) {
@ -123,8 +126,11 @@ const ManageButton: FC<Props> = ({
                    }
                  }}>
                  <Col span={3}>
-                    {' '}
-                    <SVGIcons alt="Restore" icon={Icons.RESTORE} width="20px" />
+                    <IconRestore
+                      className="m-t-xss"
+                      name="Restore"
+                      width={20}
+                    />
                  </Col>
                  <Col span={21}>
                    <Row data-testid="restore-button">
@ -157,17 +163,17 @@ const ManageButton: FC<Props> = ({
          {
            label: (
              <Row
-                className="tw-cursor-pointer manage-button"
+                className="cursor-pointer manage-button"
                onClick={(e) => {
                  e.stopPropagation();
                  setShowActions(false);
                  onAnnouncementClick && onAnnouncementClick();
                }}>
                <Col span={3}>
-                  <SVGIcons
-                    alt="announcement"
-                    icon={Icons.ANNOUNCEMENT_BLACK}
-                    width="20px"
+                  <IconAnnouncementsBlack
+                    className="m-t-xss"
+                    name="announcement"
+                    width={20}
                  />
                </Col>
                <Col span={21}>
@ -213,10 +219,7 @@ const ManageButton: FC<Props> = ({
          title="Manage"
          type="default"
          onClick={() => setShowActions(true)}>
-          <EllipsisOutlined
-            className="tw-text-primary tw-self-center manage-dropdown-icon"
-            rotate={90}
-          />
+          <IconDropdown className="text-primary self-center manage-dropdown-icon" />
        </Button>
      </Dropdown>
      {isDelete && (
--- 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
@ -202,21 +202,22 @@ const RequestDescription = () => {

  return (
    <TaskPageLayout>
-      <TitleBreadcrumb
-        titleLinks={[
-          ...getBreadCrumbList(entityData, entityType as EntityType),
-          {
-            name: t('label.create-entity', {
-              entity: t('label.task'),
-            }),
-            activeTitle: true,
-            url: '',
-          },
-        ]}
-      />
-      <div className="tw-grid tw-grid-cols-3 tw-gap-x-2">
+      <Space className="w-full" direction="vertical" size="middle">
+        <TitleBreadcrumb
+          titleLinks={[
+            ...getBreadCrumbList(entityData, entityType as EntityType),
+            {
+              name: t('label.create-entity', {
+                entity: t('label.task'),
+              }),
+              activeTitle: true,
+              url: '',
+            },
+          ]}
+        />
+
        <Card
-          className="tw-col-span-2"
+          className="m-t-0"
          key="request-description"
          style={{ ...cardStyles }}
          title={t('label.create-entity', {
@ -283,48 +284,48 @@ const RequestDescription = () => {
            </Form.Item>
          </Form>
        </Card>
+      </Space>

-        <div className="tw-pl-2" data-testid="entity-details">
-          <h6 className="tw-text-base">
-            {capitalize(entityType)} {t('label.detail-plural')}
-          </h6>
-          <div className="tw-flex tw-mb-4">
-            <span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '}
-            <span>
-              {entityData.owner ? (
-                <span className="tw-flex tw-ml-1">
-                  <ProfilePicture
-                    displayName={getEntityName(entityData.owner)}
-                    id=""
-                    name={getEntityName(entityData.owner)}
-                    width="20"
-                  />
-                  <span className="tw-ml-1">
-                    {getEntityName(entityData.owner)}
-                  </span>
+      <div className="m-t-xlg p-x-lg w-500" data-testid="entity-details">
+        <h6 className="tw-text-base">
+          {capitalize(entityType)} {t('label.detail-plural')}
+        </h6>
+        <div className="tw-flex tw-mb-4">
+          <span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '}
+          <span>
+            {entityData.owner ? (
+              <span className="tw-flex tw-ml-1">
+                <ProfilePicture
+                  displayName={getEntityName(entityData.owner)}
+                  id=""
+                  name={getEntityName(entityData.owner)}
+                  width="20"
+                />
+                <span className="tw-ml-1">
+                  {getEntityName(entityData.owner)}
                </span>
-              ) : (
-                <span className="tw-text-grey-muted tw-ml-1">
-                  {t('label.no-entity', { entity: t('label.owner') })}
-                </span>
-              )}
-            </span>
-          </div>
-
-          <p data-testid="tier">
-            {entityTier ? (
-              entityTier
+              </span>
            ) : (
-              <span className="tw-text-grey-muted">
-                {t('label.no-entity', { entity: t('label.tier') })}
+              <span className="tw-text-grey-muted tw-ml-1">
+                {t('label.no-entity', { entity: t('label.owner') })}
              </span>
            )}
-          </p>
-
-          <p data-testid="tags">{entityTags}</p>
-
-          {getColumnDetails()}
+          </span>
        </div>
+
+        <p data-testid="tier">
+          {entityTier ? (
+            entityTier
+          ) : (
+            <span className="tw-text-grey-muted">
+              {t('label.no-entity', { entity: t('label.tier') })}
+            </span>
+          )}
+        </p>
+
+        <p data-testid="tags">{entityTags}</p>
+
+        {getColumnDetails()}
      </div>
    </TaskPageLayout>
  );
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestTagPage/RequestTagPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestTagPage/RequestTagPage.tsx
@ -190,21 +190,21 @@ const RequestTag = () => {

  return (
    <TaskPageLayout>
-      <TitleBreadcrumb
-        titleLinks={[
-          ...getBreadCrumbList(entityData, entityType as EntityType),
-          {
-            name: t('label.create-entity', {
-              entity: t('label.task'),
-            }),
-            activeTitle: true,
-            url: '',
-          },
-        ]}
-      />
-      <div className="tw-grid tw-grid-cols-3 tw-gap-x-2">
+      <Space className="w-full" direction="vertical" size="middle">
+        <TitleBreadcrumb
+          titleLinks={[
+            ...getBreadCrumbList(entityData, entityType as EntityType),
+            {
+              name: t('label.create-entity', {
+                entity: t('label.task'),
+              }),
+              activeTitle: true,
+              url: '',
+            },
+          ]}
+        />
        <Card
-          className="tw-col-span-2"
+          className="m-t-0"
          key="request-tags"
          style={{ ...cardStyles }}
          title={t('label.create-entity', {
@ -265,48 +265,48 @@ const RequestTag = () => {
            </Form.Item>
          </Form>
        </Card>
+      </Space>

-        <div className="tw-pl-2" data-testid="entity-details">
-          <h6 className="tw-text-base">
-            {capitalize(entityType)} {t('label.detail-plural')}
-          </h6>
-          <div className="tw-flex tw-mb-4">
-            <span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '}
-            <span>
-              {entityData.owner ? (
-                <span className="tw-flex tw-ml-1">
-                  <ProfilePicture
-                    displayName={getEntityName(entityData.owner)}
-                    id=""
-                    name={getEntityName(entityData.owner)}
-                    width="20"
-                  />
-                  <span className="tw-ml-1">
-                    {getEntityName(entityData.owner)}
-                  </span>
+      <div className="m-t-xlg p-x-lg w-500" data-testid="entity-details">
+        <h6 className="tw-text-base">
+          {capitalize(entityType)} {t('label.detail-plural')}
+        </h6>
+        <div className="tw-flex tw-mb-4">
+          <span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '}
+          <span>
+            {entityData.owner ? (
+              <span className="tw-flex tw-ml-1">
+                <ProfilePicture
+                  displayName={getEntityName(entityData.owner)}
+                  id=""
+                  name={getEntityName(entityData.owner)}
+                  width="20"
+                />
+                <span className="tw-ml-1">
+                  {getEntityName(entityData.owner)}
                </span>
-              ) : (
-                <span className="tw-text-grey-muted tw-ml-1">
-                  {t('label.no-entity', { entity: t('label.owner') })}
-                </span>
-              )}
-            </span>
-          </div>
-
-          <p data-testid="tier">
-            {entityTier ? (
-              entityTier
+              </span>
            ) : (
-              <span className="tw-text-grey-muted">
-                {t('label.no-entity', { entity: t('label.tier') })}
+              <span className="tw-text-grey-muted tw-ml-1">
+                {t('label.no-entity', { entity: t('label.owner') })}
              </span>
            )}
-          </p>
-
-          <p data-testid="tags">{entityTags}</p>
-
-          {getColumnDetails()}
+          </span>
        </div>
+
+        <p data-testid="tier">
+          {entityTier ? (
+            entityTier
+          ) : (
+            <span className="tw-text-grey-muted">
+              {t('label.no-entity', { entity: t('label.tier') })}
+            </span>
+          )}
+        </p>
+
+        <p data-testid="tags">{entityTags}</p>
+
+        {getColumnDetails()}
      </div>
    </TaskPageLayout>
  );
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/TaskDetailPage/TaskDetailPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/TaskDetailPage/TaskDetailPage.tsx
@ -12,7 +12,7 @@
 */

 import { CheckOutlined, CloseOutlined, DownOutlined } from '@ant-design/icons';
-import { Button, Card, Dropdown, Layout, MenuProps, Tabs } from 'antd';
+import { Button, Card, Dropdown, Layout, MenuProps, Space, Tabs } from 'antd';
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
 import ActivityFeedEditor from 'components/ActivityFeed/ActivityFeedEditor/ActivityFeedEditor';
@ -668,9 +668,10 @@ const TaskDetailPage = () => {
                    />
                  )}

-                  <div
-                    className="tw-flex tw-justify-end"
-                    data-testid="task-cta-buttons">
+                  <Space
+                    className="m-t-xss"
+                    data-testid="task-cta-buttons"
+                    size="small">
                    {(hasEditAccess() || isCreator) && !isTaskClosed && (
                      <Button
                        className="ant-btn-link-custom"
@ -711,7 +712,7 @@ const TaskDetailPage = () => {
                        )}
                      </Fragment>
                    )}
-                  </div>
+                  </Space>

                  {isTaskClosed && <ClosedTask task={taskDetail.task} />}
                </Card>
--- 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
@ -208,21 +208,22 @@ const UpdateDescription = () => {

  return (
    <TaskPageLayout>
-      <TitleBreadcrumb
-        titleLinks={[
-          ...getBreadCrumbList(entityData, entityType as EntityType),
-          {
-            name: t('label.create-entity', {
-              entity: t('label.task'),
-            }),
-            activeTitle: true,
-            url: '',
-          },
-        ]}
-      />
-      <div className="tw-grid tw-grid-cols-3 tw-gap-x-2">
+      <Space className="w-full" direction="vertical" size="middle">
+        <TitleBreadcrumb
+          titleLinks={[
+            ...getBreadCrumbList(entityData, entityType as EntityType),
+            {
+              name: t('label.create-entity', {
+                entity: t('label.task'),
+              }),
+              activeTitle: true,
+              url: '',
+            },
+          ]}
+        />
+
        <Card
-          className="tw-col-span-2"
+          className="m-t-0"
          key="update-description"
          style={{ ...cardStyles }}
          title={t('label.create-entity', {
@ -280,48 +281,47 @@ const UpdateDescription = () => {
            </Form.Item>
          </Form>
        </Card>
-
-        <div className="tw-pl-2" data-testid="entity-details">
-          <h6 className="tw-text-base">
-            {capitalize(entityType)} {t('label.detail-plural')}
-          </h6>
-          <div className="tw-flex tw-mb-4">
-            <span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '}
-            <span>
-              {entityData.owner ? (
-                <span className="tw-flex tw-ml-1">
-                  <ProfilePicture
-                    displayName={getEntityName(entityData.owner)}
-                    id=""
-                    name={getEntityName(entityData.owner)}
-                    width="20"
-                  />
-                  <span className="tw-ml-1">
-                    {getEntityName(entityData.owner)}
-                  </span>
+      </Space>
+      <div className="m-t-xlg p-x-lg w-500" data-testid="entity-details">
+        <h6 className="tw-text-base">
+          {capitalize(entityType)} {t('label.detail-plural')}
+        </h6>
+        <div className="tw-flex tw-mb-4">
+          <span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '}
+          <span>
+            {entityData.owner ? (
+              <span className="tw-flex tw-ml-1">
+                <ProfilePicture
+                  displayName={getEntityName(entityData.owner)}
+                  id=""
+                  name={getEntityName(entityData.owner)}
+                  width="20"
+                />
+                <span className="tw-ml-1">
+                  {getEntityName(entityData.owner)}
                </span>
-              ) : (
-                <span className="tw-text-grey-muted tw-ml-1">
-                  {t('label.no-entity', { entity: t('label.owner') })}
-                </span>
-              )}
-            </span>
-          </div>
-
-          <p data-testid="tier">
-            {entityTier ? (
-              entityTier
+              </span>
            ) : (
-              <span className="tw-text-grey-muted">
-                {t('label.no-entity', { entity: t('label.tier') })}
+              <span className="tw-text-grey-muted tw-ml-1">
+                {t('label.no-entity', { entity: t('label.owner') })}
              </span>
            )}
-          </p>
-
-          <p data-testid="tags">{entityTags}</p>
-
-          {getColumnDetails()}
+          </span>
        </div>
+
+        <p data-testid="tier">
+          {entityTier ? (
+            entityTier
+          ) : (
+            <span className="tw-text-grey-muted">
+              {t('label.no-entity', { entity: t('label.tier') })}
+            </span>
+          )}
+        </p>
+
+        <p data-testid="tags">{entityTags}</p>
+
+        {getColumnDetails()}
      </div>
    </TaskPageLayout>
  );
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateTagPage/UpdateTagPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateTagPage/UpdateTagPage.tsx
@ -208,21 +208,21 @@ const UpdateTag = () => {

  return (
    <TaskPageLayout>
-      <TitleBreadcrumb
-        titleLinks={[
-          ...getBreadCrumbList(entityData, entityType as EntityType),
-          {
-            name: t('label.create-entity', {
-              entity: t('label.task'),
-            }),
-            activeTitle: true,
-            url: '',
-          },
-        ]}
-      />
-      <div className="tw-grid tw-grid-cols-3 tw-gap-x-2">
+      <Space className="w-full" direction="vertical" size="middle">
+        <TitleBreadcrumb
+          titleLinks={[
+            ...getBreadCrumbList(entityData, entityType as EntityType),
+            {
+              name: t('label.create-entity', {
+                entity: t('label.task'),
+              }),
+              activeTitle: true,
+              url: '',
+            },
+          ]}
+        />
        <Card
-          className="tw-col-span-2"
+          className="m-t-0"
          key="update-tags"
          style={{ ...cardStyles }}
          title={t('label.create-entity', {
@ -285,48 +285,48 @@ const UpdateTag = () => {
            </Form.Item>
          </Form>
        </Card>
+      </Space>

-        <div className="tw-pl-2" data-testid="entity-details">
-          <h6 className="tw-text-base">
-            {capitalize(entityType)} {t('label.detail-plural')}
-          </h6>
-          <div className="tw-flex tw-mb-4">
-            <span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '}
-            <span>
-              {entityData.owner ? (
-                <span className="tw-flex tw-ml-1">
-                  <ProfilePicture
-                    displayName={getEntityName(entityData.owner)}
-                    id=""
-                    name={getEntityName(entityData.owner)}
-                    width="20"
-                  />
-                  <span className="tw-ml-1">
-                    {getEntityName(entityData.owner)}
-                  </span>
+      <div className="m-t-xlg p-x-lg w-500" data-testid="entity-details">
+        <h6 className="tw-text-base">
+          {capitalize(entityType)} {t('label.detail-plural')}
+        </h6>
+        <div className="tw-flex tw-mb-4">
+          <span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '}
+          <span>
+            {entityData.owner ? (
+              <span className="tw-flex tw-ml-1">
+                <ProfilePicture
+                  displayName={getEntityName(entityData.owner)}
+                  id=""
+                  name={getEntityName(entityData.owner)}
+                  width="20"
+                />
+                <span className="tw-ml-1">
+                  {getEntityName(entityData.owner)}
                </span>
-              ) : (
-                <span className="tw-text-grey-muted tw-ml-1">
-                  {t('label.no-entity', { entity: t('label.owner') })}
-                </span>
-              )}
-            </span>
-          </div>
-
-          <p data-testid="tier">
-            {entityTier ? (
-              entityTier
+              </span>
            ) : (
-              <span className="tw-text-grey-muted">
-                {t('label.no-entity', { entity: t('label.tier') })}
+              <span className="tw-text-grey-muted tw-ml-1">
+                {t('label.no-entity', { entity: t('label.owner') })}
              </span>
            )}
-          </p>
-
-          <p data-testid="tags">{entityTags}</p>
-
-          {getColumnDetails()}
+          </span>
        </div>
+
+        <p data-testid="tier">
+          {entityTier ? (
+            entityTier
+          ) : (
+            <span className="tw-text-grey-muted">
+              {t('label.no-entity', { entity: t('label.tier') })}
+            </span>
+          )}
+        </p>
+
+        <p data-testid="tags">{entityTags}</p>
+
+        {getColumnDetails()}
      </div>
    </TaskPageLayout>
  );
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPageLayout.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPageLayout.test.tsx
@ -22,13 +22,8 @@ describe('Test TaskPageLayout Component', () => {
  it('Should render the component', async () => {
    render(<TaskPageLayout {...mockProps} />);

-    const leftSider = await screen.findByTestId('left-sider');
-    const rightSider = await screen.findByTestId('right-sider');
-
    const children = await screen.findByTestId('children');

-    expect(leftSider).toBeInTheDocument();
-    expect(rightSider).toBeInTheDocument();
    expect(children).toBeInTheDocument();
  });
 });
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPageLayout.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPageLayout.tsx
@ -11,22 +11,18 @@
 *  limitations under the License.
 */

-import { Layout } from 'antd';
+import PageContainerV1 from 'components/containers/PageContainerV1';
+import PageLayoutV1 from 'components/containers/PageLayoutV1';
 import React, { FC, HTMLAttributes } from 'react';
-import { background, contentStyles } from '../TaskPage.styles';

 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface Props extends HTMLAttributes<HTMLDivElement> {}

 const TaskPageLayout: FC<Props> = ({ children }) => {
-  const { Content, Sider } = Layout;
-
  return (
-    <Layout style={{ ...background, height: '100vh' }}>
-      <Sider data-testid="left-sider" style={background} width={180} />
-      <Content style={contentStyles}>{children}</Content>
-      <Sider data-testid="right-sider" style={background} width={180} />
-    </Layout>
+    <PageContainerV1>
+      <PageLayoutV1 center>{children}</PageLayoutV1>
+    </PageContainerV1>
  );
 };

--- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
@ -276,6 +276,9 @@
 .opacity-0 {
  opacity: 0;
 }
+.opacity-50 {
+  opacity: 0.5;
+}
 .opacity-100 {
  opacity: 1;
 }
--- a/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less
@ -50,6 +50,9 @@
 .w-48 {
  width: 12rem;
 }
+.w-500 {
+  width: 500px;
+}
 .w-800 {
  width: 800px;
 }