From ccf585efbac5634f9666ca451ae02d8d593a73f3 Mon Sep 17 00:00:00 2001
From: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Date: Thu, 29 Jun 2023 22:07:35 +0530
Subject: [PATCH] ui: worked on ui feedback part 2 (#12228)

* updated request description in topic details

* miner fix

* worked on feedback

* fixed redirection link for activity feed

* fixed failing test

* miner fix

* fixed infinite loading issue when there is no permission
---
 .../components/TestCaseForm.tsx               |   6 +-
 .../ui/src/components/AppBar/Appbar.tsx       |   2 +-
 .../NotificationBox.component.tsx             |  10 +-
 .../ui/src/components/Services/Services.tsx   |   2 +-
 .../Component/ProfilerSettingsModal.tsx       |  11 +-
 .../TableProfiler/tableProfiler.less          |   7 +
 .../TopicDetails/TopicDetails.component.tsx   |  15 +-
 .../TopicSchema/TopicSchema.interface.tsx     |   6 +
 .../TopicSchema/TopicSchema.test.tsx          |   1 +
 .../TopicDetails/TopicSchema/TopicSchema.tsx  | 160 ++++++++++++++++--
 .../TopicVersion/TopicVersion.component.tsx   |   1 +
 .../src/components/Users/Users.component.tsx  |  28 +--
 .../common/PopOverCard/EntityPopOverCard.tsx  |   8 +
 .../ui/src/locale/languages/en-us.json        |   1 +
 .../ui/src/locale/languages/es-es.json        |   1 +
 .../ui/src/locale/languages/fr-fr.json        |   1 +
 .../ui/src/locale/languages/ja-jp.json        |   1 +
 .../ui/src/locale/languages/pt-br.json        |   1 +
 .../ui/src/locale/languages/zh-cn.json        |   1 +
 .../AddQueryPage/AddQueryPage.component.tsx   |   4 +-
 .../LogsViewer/LogsViewer.component.test.tsx  |   8 +
 .../pages/LogsViewer/LogsViewer.component.tsx | 150 ++++++++--------
 .../TableDetailsPageV1/TableDetailsPageV1.tsx |   9 +-
 .../resources/ui/src/utils/CommonUtils.tsx    |   4 +
 .../ui/src/utils/LogsViewer.utils.ts          |   9 +-
 .../resources/ui/src/utils/ServiceUtils.tsx   |  10 +-
 .../resources/ui/src/utils/TableUtils.tsx     |   9 +-
 27 files changed, 340 insertions(+), 126 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/components/TestCaseForm.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/components/TestCaseForm.tsx
index c426b35b41a..fb36bb17a5e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/components/TestCaseForm.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/components/TestCaseForm.tsx
@@ -140,9 +140,9 @@ const TestCaseForm: React.FC<TestCaseFormProps> = ({
     );
     const name =
       value.testName?.trim() ||
-      `${columnName ? columnName : table.name}_${snakeCase(
-        selectedTestType
-      )}_${cryptoRandomString({
+      `${replaceAllSpacialCharWith_(
+        columnName ? columnName : table.name
+      )}_${snakeCase(selectedTestType)}_${cryptoRandomString({
         length: 4,
         type: 'alphanumeric',
       })}`;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppBar/Appbar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppBar/Appbar.tsx
index eecf1f3780d..e0c70824271 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AppBar/Appbar.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AppBar/Appbar.tsx
@@ -319,9 +319,9 @@ const Appbar: React.FC = (): JSX.Element => {
                 {remainingTeamsCount} {t('label.more')}
               </Link>
             ) : null}
+            <hr className="m-t-sm" />
           </div>
         ) : null}
-        <hr className="m-t-sm" />
       </div>
     );
   };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/NotificationBox/NotificationBox.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/NotificationBox/NotificationBox.component.tsx
index aad05a5a8fc..275cd772b49 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/NotificationBox/NotificationBox.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/NotificationBox/NotificationBox.component.tsx
@@ -13,6 +13,8 @@
 
 import { Badge, Button, List, Tabs, Typography } from 'antd';
 import { AxiosError } from 'axios';
+import { ActivityFeedTabs } from 'components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface';
+import { EntityTabs } from 'enums/entity.enum';
 import { UserProfileTab } from 'enums/user.enum';
 import { isEmpty } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -52,9 +54,11 @@ const NotificationBox = ({
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const [viewAllPath, setViewAllPath] = useState<string>(
-    `${getUserPath(currentUser?.name as string)}/tasks?feedFilter=${
-      FeedFilter.ASSIGNED_TO
-    }`
+    getUserPath(
+      currentUser?.name as string,
+      EntityTabs.ACTIVITY_FEED,
+      ActivityFeedTabs.TASKS
+    )
   );
 
   const notificationDropDownList = useMemo(() => {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx
index 62573e637a9..729efd42440 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx
@@ -169,7 +169,7 @@ const Services = ({
                         <div>
                           <Link
                             to={getServiceDetailsPath(
-                              service.name,
+                              service.fullyQualifiedName ?? service.name,
                               serviceName
                             )}>
                             <button>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/ProfilerSettingsModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/ProfilerSettingsModal.tsx
index ab219c1aa4e..05f39b3648d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/ProfilerSettingsModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/ProfilerSettingsModal.tsx
@@ -158,11 +158,11 @@ const ProfilerSettingsModal: React.FC<ProfilerSettingsModalProps> = ({
       excludeColumns,
     } = tableProfilerConfig;
     handleStateChange({
-      sqlQuery: profileQuery || '',
+      sqlQuery: profileQuery ?? '',
       profileSample: profileSample,
-      excludeCol: excludeColumns || [],
+      excludeCol: excludeColumns ?? [],
       selectedProfileSampleType:
-        profileSampleType || ProfileSampleType.Percentage,
+        profileSampleType ?? ProfileSampleType.Percentage,
     });
 
     const profileSampleTypeCheck =
@@ -429,6 +429,7 @@ const ProfilerSettingsModal: React.FC<ProfilerSettingsModalProps> = ({
               })}
               name="profileSampleType">
               <Select
+                autoFocus
                 className="w-full"
                 data-testid="profile-sample"
                 options={PROFILE_SAMPLE_OPTIONS}
@@ -477,13 +478,13 @@ const ProfilerSettingsModal: React.FC<ProfilerSettingsModalProps> = ({
           </p>
 
           <SchemaEditor
-            className="custom-query-editor query-editor-h-200"
+            className="sql-editor-container custom-query-editor query-editor-h-200 custom-code-mirror-theme"
             data-testid="profiler-setting-sql-editor"
             mode={{ name: CSMode.SQL }}
             options={{
               readOnly: false,
             }}
-            value={state?.sqlQuery || ''}
+            value={state?.sqlQuery ?? ''}
             onChange={handleCodeMirrorChange}
           />
         </Col>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/tableProfiler.less b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/tableProfiler.less
index 5c6f3cfa3b7..0b8ed011ab0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/tableProfiler.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/tableProfiler.less
@@ -53,6 +53,13 @@
     overflow: scroll;
   }
 }
+.sql-editor-container {
+  .CodeMirror {
+    .CodeMirror-foldgutter {
+      width: 2em;
+    }
+  }
+}
 .include-columns-add-button.ant-btn-icon-only.ant-btn-sm {
   width: 18px;
   height: 18px;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx
index 4b28a18af5b..b12386699ed 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx
@@ -22,7 +22,9 @@ import ErrorPlaceHolder from 'components/common/error-with-placeholder/ErrorPlac
 import QueryViewer from 'components/common/QueryViewer/QueryViewer.component';
 import PageLayoutV1 from 'components/containers/PageLayoutV1';
 import { DataAssetsHeader } from 'components/DataAssets/DataAssetsHeader/DataAssetsHeader.component';
+import EntityLineageComponent from 'components/EntityLineage/EntityLineage.component';
 import { EntityName } from 'components/Modals/EntityNameModal/EntityNameModal.interface';
+import SampleDataTopic from 'components/SampleDataTopic/SampleDataTopic';
 import TabsLabel from 'components/TabsLabel/TabsLabel.component';
 import TagsContainerV2 from 'components/Tag/TagsContainerV2/TagsContainerV2';
 import { getTopicDetailsPath } from 'constants/constants';
@@ -51,8 +53,6 @@ import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import ActivityThreadPanel from '../ActivityFeed/ActivityThreadPanel/ActivityThreadPanel';
 import { CustomPropertyTable } from '../common/CustomPropertyTable/CustomPropertyTable';
 import { CustomPropertyProps } from '../common/CustomPropertyTable/CustomPropertyTable.interface';
-import EntityLineageComponent from '../EntityLineage/EntityLineage.component';
-import SampleDataTopic from '../SampleDataTopic/SampleDataTopic';
 import { TopicDetailsProps } from './TopicDetails.interface';
 import TopicSchemaFields from './TopicSchema/TopicSchema';
 
@@ -294,6 +294,15 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
                   onThreadLinkSelect={onThreadLinkSelect}
                 />
                 <TopicSchemaFields
+                  entityFieldTasks={getEntityFieldThreadCounts(
+                    EntityField.COLUMNS,
+                    entityFieldTaskCount
+                  )}
+                  entityFieldThreads={getEntityFieldThreadCounts(
+                    EntityField.COLUMNS,
+                    entityFieldThreadCount
+                  )}
+                  entityFqn={topicDetails.fullyQualifiedName ?? ''}
                   hasDescriptionEditAccess={
                     topicPermissions.EditAll || topicPermissions.EditDescription
                   }
@@ -302,6 +311,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
                   }
                   isReadOnly={Boolean(topicDetails.deleted)}
                   messageSchema={topicDetails.messageSchema}
+                  onThreadLinkSelect={onThreadLinkSelect}
                   onUpdate={handleSchemaFieldsUpdate}
                 />
               </div>
@@ -464,6 +474,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
         </Col>
         <Col span={24}>
           <Tabs
+            destroyInactiveTabPane
             activeKey={activeTab ?? EntityTabs.SCHEMA}
             className="entity-details-page-tabs"
             data-testid="tabs"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.interface.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.interface.tsx
index ff2e55e5d53..e3a08f566a5 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.interface.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.interface.tsx
@@ -12,6 +12,8 @@
  */
 
 import { TableProps } from 'antd';
+import { ThreadType } from 'generated/api/feed/createThread';
+import { EntityFieldThreads } from 'interface/feed.interface';
 import { HTMLAttributes, ReactNode } from 'react';
 import { Field, Topic } from '../../../generated/entity/data/topic';
 
@@ -27,9 +29,13 @@ export interface TopicSchemaFieldsProps
   hasDescriptionEditAccess: boolean;
   hasTagEditAccess: boolean;
   isReadOnly: boolean;
+  entityFqn: string;
   defaultExpandAllRows?: boolean;
   showSchemaDisplayTypeSwitch?: boolean;
   onUpdate?: (updatedMessageSchema: Topic['messageSchema']) => Promise<void>;
+  entityFieldThreads?: EntityFieldThreads[];
+  entityFieldTasks?: EntityFieldThreads[];
+  onThreadLinkSelect?: (value: string, threadType?: ThreadType) => void;
 }
 
 export enum SchemaViewType {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.test.tsx
index b18acdb7314..c62eb3fd424 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.test.tsx
@@ -35,6 +35,7 @@ const mockProps: TopicSchemaFieldsProps = {
   isReadOnly: false,
   onUpdate: mockOnUpdate,
   hasTagEditAccess: true,
+  entityFqn: 'topic.fqn',
 };
 
 jest.mock('utils/TagsUtils', () => ({
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.tsx
index cdc4234a58b..a10682bf85f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicSchema/TopicSchema.tsx
@@ -28,14 +28,28 @@ import classNames from 'classnames';
 import ErrorPlaceHolder from 'components/common/error-with-placeholder/ErrorPlaceHolder';
 import SchemaEditor from 'components/schema-editor/SchemaEditor';
 import TableTags from 'components/TableTags/TableTags.component';
+import { FQN_SEPARATOR_CHAR } from 'constants/char.constants';
+import { DE_ACTIVE_COLOR } from 'constants/constants';
+import { EntityField } from 'constants/Feeds.constants';
 import { TABLE_SCROLL_VALUE } from 'constants/Table.constants';
 import { CSMode } from 'enums/codemirror.enum';
+import { EntityType } from 'enums/entity.enum';
+import { ThreadType } from 'generated/api/feed/createThread';
 import { TagLabel, TagSource } from 'generated/type/tagLabel';
+import { EntityFieldThreads } from 'interface/feed.interface';
 import { cloneDeep, isEmpty, isUndefined, map } from 'lodash';
 import { EntityTags, TagOption } from 'Models';
-import React, { FC, useMemo, useState } from 'react';
+import React, { FC, Fragment, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { getEntityName } from 'utils/EntityUtils';
+import { useHistory } from 'react-router-dom';
+import { getPartialNameFromTopicFQN } from 'utils/CommonUtils';
+import { ENTITY_LINK_SEPARATOR, getEntityName } from 'utils/EntityUtils';
+import { getFieldThreadElement } from 'utils/FeedElementUtils';
+import {
+  getRequestDescriptionPath,
+  getUpdateDescriptionPath,
+} from 'utils/TasksUtils';
+import { ReactComponent as IconRequest } from '../../../assets/svg/request-icon.svg';
 import { DataTypeTopic, Field } from '../../../generated/entity/data/topic';
 import { getTableExpandableConfig } from '../../../utils/TableUtils';
 import {
@@ -59,13 +73,28 @@ const TopicSchemaFields: FC<TopicSchemaFieldsProps> = ({
   hasTagEditAccess,
   defaultExpandAllRows = false,
   showSchemaDisplayTypeSwitch = true,
+  entityFqn,
+  entityFieldThreads,
+  onThreadLinkSelect,
+  entityFieldTasks,
 }) => {
+  const history = useHistory();
   const { t } = useTranslation();
   const [editFieldDescription, setEditFieldDescription] = useState<Field>();
   const [viewType, setViewType] = useState<SchemaViewType>(
     SchemaViewType.FIELDS
   );
 
+  const getColumnName = (cell: Field) => {
+    const fqn = cell?.fullyQualifiedName || '';
+    const columnName = getPartialNameFromTopicFQN(fqn);
+    // wrap it in quotes if dot is present
+
+    return columnName.includes(FQN_SEPARATOR_CHAR)
+      ? `"${columnName}"`
+      : columnName;
+  };
+
   const handleFieldTagsChange = async (
     selectedTags: EntityTags[],
     editColumnTag: Field
@@ -101,6 +130,66 @@ const TopicSchemaFields: FC<TopicSchemaFieldsProps> = ({
     }
   };
 
+  const onUpdateDescriptionHandler = (cell: Field) => {
+    const field = EntityField.COLUMNS;
+    const value = getColumnName(cell);
+    history.push(
+      getUpdateDescriptionPath(
+        EntityType.TOPIC,
+        entityFqn as string,
+        field,
+        value
+      )
+    );
+  };
+
+  const onRequestDescriptionHandler = (cell: Field) => {
+    const field = EntityField.COLUMNS;
+    const value = getColumnName(cell);
+    history.push(
+      getRequestDescriptionPath(
+        EntityType.TOPIC,
+        entityFqn as string,
+        field,
+        value
+      )
+    );
+  };
+
+  const getRequestDescriptionElement = (cell: Field) => {
+    const hasDescription = Boolean(cell?.description ?? '');
+
+    return (
+      <Button
+        className="p-0 w-7 h-7 flex-none flex-center link-text focus:tw-outline-none hover-cell-icon m-r-xss"
+        data-testid="request-description"
+        type="text"
+        onClick={() =>
+          hasDescription
+            ? onUpdateDescriptionHandler(cell)
+            : onRequestDescriptionHandler(cell)
+        }>
+        <Popover
+          destroyTooltipOnHide
+          content={
+            hasDescription
+              ? t('message.request-update-description')
+              : t('message.request-description')
+          }
+          overlayClassName="ant-popover-request-description"
+          trigger="hover"
+          zIndex={9999}>
+          <IconRequest
+            height={14}
+            name={t('message.request-description')}
+            style={{ color: DE_ACTIVE_COLOR }}
+            width={14}
+          />
+        </Popover>
+      </Button>
+    );
+  };
+
   const renderFieldDescription: CellRendered<Field, 'description'> = (
     description,
     record,
@@ -110,28 +199,68 @@ const TopicSchemaFields: FC<TopicSchemaFieldsProps> = ({
       <Space
         className="custom-group w-full"
         data-testid="description"
+        direction={isEmpty(description) ? 'horizontal' : 'vertical'}
         id={`field-description-${index}`}
         size={4}>
-        <>
+        <div>
           {description ? (
             <RichTextEditorPreviewer markdown={description} />
           ) : (
-            <Typography.Text className="text-grey-muted">
+            <span className="text-grey-muted">
               {t('label.no-entity', {
                 entity: t('label.description'),
               })}
-            </Typography.Text>
+            </span>
           )}
-        </>
-        {isReadOnly && !hasDescriptionEditAccess ? null : (
-          <Button
-            className="p-0 opacity-0 group-hover-opacity-100"
-            data-testid="edit-button"
-            icon={<EditIcon width={16} />}
-            type="text"
-            onClick={() => setEditFieldDescription(record)}
-          />
-        )}
+        </div>
+        <div className="d-flex tw--mt-1.5">
+          {!isReadOnly ? (
+            <Fragment>
+              {hasDescriptionEditAccess && (
+                <>
+                  <Button
+                    className="p-0 tw-self-start flex-center w-7 h-7 d-flex-none hover-cell-icon"
+                    data-testid="edit-button"
+                    type="text"
+                    onClick={() => setEditFieldDescription(record)}>
+                    <EditIcon
+                      height={14}
+                      name={t('label.edit')}
+                      style={{ color: DE_ACTIVE_COLOR }}
+                      width={14}
+                    />
+                  </Button>
+                </>
+              )}
+              {getRequestDescriptionElement(record)}
+              {getFieldThreadElement(
+                getColumnName(record),
+                EntityField.DESCRIPTION,
+                entityFieldThreads as EntityFieldThreads[],
+                onThreadLinkSelect,
+                EntityType.TOPIC,
+                entityFqn,
+                `columns${ENTITY_LINK_SEPARATOR}${getColumnName(
+                  record
+                )}${ENTITY_LINK_SEPARATOR}description`,
+                Boolean(record)
+              )}
+              {getFieldThreadElement(
+                getColumnName(record),
+                EntityField.DESCRIPTION,
+                entityFieldTasks as EntityFieldThreads[],
+                onThreadLinkSelect,
+                EntityType.TOPIC,
+                entityFqn,
+                `columns${ENTITY_LINK_SEPARATOR}${getColumnName(
+                  record
+                )}${ENTITY_LINK_SEPARATOR}description`,
+                Boolean(record),
+                ThreadType.Task
+              )}
+            </Fragment>
+          ) : null}
+        </div>
       </Space>
     );
   };
@@ -264,6 +393,7 @@ const TopicSchemaFields: FC<TopicSchemaFieldsProps> = ({
             isEmpty(messageSchema?.schemaFields) ? (
               messageSchema?.schemaText && (
                 <SchemaEditor
+                  className="custom-code-mirror-theme custom-query-editor"
                   editorClass={classNames('table-query-editor')}
                   mode={{ name: CSMode.JAVASCRIPT }}
                   options={{
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TopicVersion/TopicVersion.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TopicVersion/TopicVersion.component.tsx
index 87e86b52824..912d64efa88 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TopicVersion/TopicVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TopicVersion/TopicVersion.component.tsx
@@ -127,6 +127,7 @@ const TopicVersion: FC<TopicVersionProp> = ({
                   <TopicSchemaFields
                     defaultExpandAllRows
                     isReadOnly
+                    entityFqn={currentVersionData?.fullyQualifiedName ?? ''}
                     hasDescriptionEditAccess={false}
                     hasTagEditAccess={false}
                     messageSchema={messageSchemaDiff}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
index b5093fcfd21..5ed8822abf2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
@@ -273,17 +273,15 @@ const Users = ({
       );
     } else {
       return (
-        <div className="p-x-sm">
-          <p className="m-t-xs">
-            {userData.description || (
-              <span className="text-grey-muted">
-                {t('label.no-entity', {
-                  entity: t('label.description'),
-                })}
-              </span>
-            )}
-          </p>
-        </div>
+        <Typography.Paragraph className="m-b-0">
+          {userData.description || (
+            <span className="text-grey-muted">
+              {t('label.no-entity', {
+                entity: t('label.description'),
+              })}
+            </span>
+          )}
+        </Typography.Paragraph>
       );
     }
   };
@@ -584,7 +582,11 @@ const Users = ({
           )}
           <Space className="p-sm w-full" direction="vertical" size={8}>
             {getDisplayNameComponent()}
-            <p>{userData.email}</p>
+            <Typography.Paragraph
+              className="m-b-0"
+              ellipsis={{ tooltip: true }}>
+              {userData.email}
+            </Typography.Paragraph>
             {getDescriptionComponent()}
             {isAuthProviderBasic &&
               (isAdminUser || isLoggedinUser) &&
@@ -719,7 +721,7 @@ const Users = ({
                 }
               />
             ) : (
-              <ErrorPlaceHolder>
+              <ErrorPlaceHolder className="m-0">
                 <Typography.Paragraph>
                   {tab === UserPageTabs.MY_DATA
                     ? t('server.you-have-not-action-anything-yet', {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/EntityPopOverCard.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/EntityPopOverCard.tsx
index e1cbf6aded4..cf2db23b53f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/EntityPopOverCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/EntityPopOverCard.tsx
@@ -31,6 +31,7 @@ import { getMlModelByFQN } from 'rest/mlModelAPI';
 import { getPipelineByFqn } from 'rest/pipelineAPI';
 import { getTableDetailsByFQN } from 'rest/tableAPI';
 import { getTopicByFqn } from 'rest/topicsAPI';
+import { getTableFQNFromColumnFQN } from 'utils/CommonUtils';
 import { getEntityName } from 'utils/EntityUtils';
 import AppState from '../../../AppState';
 import { EntityType } from '../../../enums/entity.enum';
@@ -60,6 +61,13 @@ const PopoverContent: React.FC<{
       case EntityType.TABLE:
         promise = getTableDetailsByFQN(entityFQN, fields);
 
+        break;
+      case EntityType.TEST_CASE:
+        promise = getTableDetailsByFQN(
+          getTableFQNFromColumnFQN(entityFQN),
+          fields
+        );
+
         break;
       case EntityType.TOPIC:
         promise = getTopicByFqn(entityFQN, fields);
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json
index 126afcf2de2..77edac76390 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json
@@ -508,6 +508,7 @@
     "loading": "Loading",
     "local-config-source": "Local Config Source",
     "log-plural": "Logs",
+    "log-viewer": "Log Viewer",
     "logged-in-user-lowercase": "logged-in user",
     "login": "Login",
     "logo-url": "Logo URL",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json
index 863862421fb..4d26b87165d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json
@@ -508,6 +508,7 @@
     "loading": "Cargando",
     "local-config-source": "Origen de configuración local",
     "log-plural": "Registros",
+    "log-viewer": "Log Viewer",
     "logged-in-user-lowercase": "usuario conectado",
     "login": "Iniciar sesión",
     "logo-url": "Logo URL",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json
index ffad389ddac..d64a805a32c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json
@@ -508,6 +508,7 @@
     "loading": "Chargement",
     "local-config-source": "Source de Configuration Locale",
     "log-plural": "Journal",
+    "log-viewer": "Log Viewer",
     "logged-in-user-lowercase": "Utilisateur Connecté",
     "login": "Se Connecter",
     "logo-url": "Logo URL",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json
index 06003f88589..ec852c05712 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json
@@ -508,6 +508,7 @@
     "loading": "読み込み中",
     "local-config-source": "Local Config Source",
     "log-plural": "ログ",
+    "log-viewer": "Log Viewer",
     "logged-in-user-lowercase": "logged-in user",
     "login": "ログイン",
     "logo-url": "Logo URL",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json
index ad32ed5dd70..842aa661ae2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json
@@ -508,6 +508,7 @@
     "loading": "Carregando",
     "local-config-source": "Origem da configuração local",
     "log-plural": "Logs",
+    "log-viewer": "Log Viewer",
     "logged-in-user-lowercase": "conectar com usuário",
     "login": "Entrar",
     "logo-url": "Logo URL",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json
index b90bd943bf2..8a720b92bcb 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json
@@ -508,6 +508,7 @@
     "loading": "加载中",
     "local-config-source": "本地配置源",
     "log-plural": "日志",
+    "log-viewer": "Log Viewer",
     "logged-in-user-lowercase": "已登录用户",
     "login": "登录",
     "logo-url": "Logo URL",
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/AddQueryPage/AddQueryPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AddQueryPage/AddQueryPage.component.tsx
index 9c00eb54e7e..c20d6b45169 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AddQueryPage/AddQueryPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddQueryPage/AddQueryPage.component.tsx
@@ -267,11 +267,11 @@ const AddQueryPage = () => {
                     <Tooltip
                       placement="top"
                       title={
-                        !permissions.query.Create && NO_PERMISSION_FOR_ACTION
+                        !permissions.query?.Create && NO_PERMISSION_FOR_ACTION
                       }>
                       <Button
                         data-testid="save-btn"
-                        disabled={!permissions.query.Create}
+                        disabled={!permissions.query?.Create}
                         htmlType="submit"
                         loading={isSaving}
                         type="primary">
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/LogsViewer/LogsViewer.component.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/LogsViewer/LogsViewer.component.test.tsx
index 57871254c57..fc6b417383e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/LogsViewer/LogsViewer.component.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/LogsViewer/LogsViewer.component.test.tsx
@@ -22,11 +22,19 @@ jest.mock('react-router-dom', () => ({
     ingestionName: 'ingestion_123456',
   }),
 }));
+jest.mock('../../utils/LogsViewer.utils', () => ({
+  getLogBreadCrumbs: jest
+    .fn()
+    .mockReturnValue({ name: 'getLogBreadCrumbs', url: '' }),
+}));
 
 jest.mock(
   'components/common/title-breadcrumb/title-breadcrumb.component',
   () => () => <>TitleBreadcrumb.component</>
 );
+jest.mock('components/containers/PageLayoutV1', () =>
+  jest.fn().mockImplementation(({ children }) => <div>{children}</div>)
+);
 
 jest.mock('react-lazylog', () => ({
   LazyLog: jest
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/LogsViewer/LogsViewer.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/LogsViewer/LogsViewer.component.tsx
index 9549e4b959f..7ca1aba20a3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/LogsViewer/LogsViewer.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/LogsViewer/LogsViewer.component.tsx
@@ -11,10 +11,11 @@
  *  limitations under the License.
  */
 
-import { Button, Card, Col, Row, Space, Typography } from 'antd';
+import { Button, Col, Row, Space, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import { CopyToClipboardButton } from 'components/buttons/CopyToClipboardButton/CopyToClipboardButton';
 import TitleBreadcrumb from 'components/common/title-breadcrumb/title-breadcrumb.component';
+import PageLayoutV1 from 'components/containers/PageLayoutV1';
 import { IngestionRecentRuns } from 'components/Ingestion/IngestionRecentRun/IngestionRecentRuns.component';
 import Loader from 'components/Loader/Loader';
 import { isEmpty, isNil, isUndefined, toNumber } from 'lodash';
@@ -220,10 +221,12 @@ const LogsViewer = () => {
     };
   }, [ingestionDetails]);
 
-  return isLoading ? (
-    <Loader />
-  ) : (
-    <div className="m-xs ">
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  return (
+    <PageLayoutV1 pageTitle={t('label.log-viewer')}>
       <Space align="start" className="w-full m-md m-t-xs" direction="vertical">
         <Space align="center">
           <TitleBreadcrumb
@@ -241,77 +244,76 @@ const LogsViewer = () => {
         </Space>
       </Space>
 
-      <Card className="h-full p-0 log-card">
-        {!isEmpty(logs) ? (
-          <Row>
-            <Col className="p-md" span={18}>
-              <Row className="relative" gutter={[16, 16]}>
-                <Col span={24}>
-                  <Row justify="end">
-                    <Col>
-                      <Button
-                        ghost
-                        data-testid="jump-to-end-button"
-                        type="primary"
-                        onClick={handleJumpToEnd}>
-                        {t('label.jump-to-end')}
-                      </Button>
-                    </Col>
-                    <Col>
-                      <CopyToClipboardButton copyText={logs} />
-                    </Col>
-                  </Row>
-                </Col>
-                <Col
-                  className="h-min-80 lazy-log-container"
-                  data-testid="lazy-log"
-                  span={24}>
-                  <LazyLog
-                    caseInsensitive
-                    enableSearch
-                    selectableLines
-                    extraLines={1} // 1 is to be add so that linux users can see last line of the log
-                    text={logs}
-                  />
-                </Col>
-              </Row>
-            </Col>
-            <Col span={6}>
-              <Card className="h-full" data-testid="summary-card">
-                <Space className="p-md w-full" direction="vertical">
-                  <Typography.Title level={5}>
-                    {t('label.summary')}
-                  </Typography.Title>
+      {!isEmpty(logs) ? (
+        <Row className="border-top">
+          <Col className="p-md border-right" span={18}>
+            <Row className="relative" gutter={[16, 16]}>
+              <Col span={24}>
+                <Row justify="end">
+                  <Col>
+                    <Button
+                      ghost
+                      data-testid="jump-to-end-button"
+                      type="primary"
+                      onClick={handleJumpToEnd}>
+                      {t('label.jump-to-end')}
+                    </Button>
+                  </Col>
+                  <Col>
+                    <CopyToClipboardButton copyText={logs} />
+                  </Col>
+                </Row>
+              </Col>
+              <Col
+                className="h-min-80 lazy-log-container"
+                data-testid="lazy-log"
+                span={24}>
+                <LazyLog
+                  caseInsensitive
+                  enableSearch
+                  selectableLines
+                  extraLines={1} // 1 is to be add so that linux users can see last line of the log
+                  text={logs}
+                />
+              </Col>
+            </Row>
+          </Col>
+          <Col span={6}>
+            <Space
+              className="p-md w-full"
+              data-testid="summary-card"
+              direction="vertical">
+              <Typography.Title level={5}>
+                {t('label.summary')}
+              </Typography.Title>
 
-                  <div>
-                    <Typography.Text type="secondary">
-                      {t('label.basic-configuration')}
-                    </Typography.Text>
+              <div>
+                <Typography.Text type="secondary">
+                  {t('label.basic-configuration')}
+                </Typography.Text>
 
-                    <Row className="m-t-xs" gutter={[8, 8]}>
-                      {Object.entries(logSummaries).map(([key, value]) => {
-                        return (
-                          <Fragment key={key}>
-                            <Col className="summary-key" span={12}>
-                              {key}
-                            </Col>
-                            <Col className="flex" span={12}>
-                              {value}
-                            </Col>
-                          </Fragment>
-                        );
-                      })}
-                    </Row>
-                  </div>
-                </Space>
-              </Card>
-            </Col>
-          </Row>
-        ) : (
-          <LogViewerSkeleton />
-        )}
-      </Card>
-    </div>
+                <Row className="m-t-xs" gutter={[8, 8]}>
+                  {Object.entries(logSummaries).map(([key, value]) => {
+                    return (
+                      <Fragment key={key}>
+                        <Col className="summary-key" span={12}>
+                          {key}
+                        </Col>
+                        <Col className="flex" span={12}>
+                          {value}
+                        </Col>
+                      </Fragment>
+                    );
+                  })}
+                </Row>
+              </div>
+            </Space>
+          </Col>
+        </Row>
+      ) : (
+        <LogViewerSkeleton />
+      )}
+    </PageLayoutV1>
   );
 };
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx
index c524ddafb50..2dcbf9b39a8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx
@@ -254,6 +254,8 @@ const TableDetailsPageV1 = () => {
             entity: t('label.resource-permission-lowercase'),
           })
         );
+      } finally {
+        setLoading(false);
       }
     },
     [getEntityPermissionByFqn, setTablePermissions]
@@ -862,7 +864,12 @@ const TableDetailsPageV1 = () => {
   }
 
   if (!(tablePermissions.ViewAll || tablePermissions.ViewBasic)) {
-    return <ErrorPlaceHolder type={ERROR_PLACEHOLDER_TYPE.PERMISSION} />;
+    return (
+      <ErrorPlaceHolder
+        className="m-0"
+        type={ERROR_PLACEHOLDER_TYPE.PERMISSION}
+      />
+    );
   }
 
   if (!tableDetails) {
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx
index 1fcd70c7537..8ea348215cb 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx
@@ -977,3 +977,7 @@ export const getEntityDetailLink = (
 
   return path;
 };
+
+export const getPartialNameFromTopicFQN = (fqn: string): string => {
+  return Fqn.split(fqn).slice(2).join(FQN_SEPARATOR_CHAR);
+};
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/LogsViewer.utils.ts b/openmetadata-ui/src/main/resources/ui/src/utils/LogsViewer.utils.ts
index 4ba4c15b75d..fe9f056cdf3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/LogsViewer.utils.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/LogsViewer.utils.ts
@@ -14,6 +14,8 @@
 import { OPEN_METADATA } from 'constants/service-guide.constant';
 import { isUndefined, startCase } from 'lodash';
 import { IngestionPipeline } from '../generated/entity/services/ingestionPipelines/ingestionPipeline';
+import { getNameFromFQN } from './CommonUtils';
+import Fqn from './Fqn';
 import { getSettingsPathFromPipelineType } from './IngestionUtils';
 import { getLogEntityPath } from './RouterUtils';
 
@@ -32,7 +34,8 @@ export const getLogBreadCrumbs = (
   ingestionName: string,
   ingestionDetails: IngestionPipeline | undefined
 ) => {
-  if (ingestionName.split('.')[0] === OPEN_METADATA && ingestionDetails) {
+  const updateIngestionName = Fqn.split(ingestionName);
+  if (updateIngestionName.includes(OPEN_METADATA) && ingestionDetails) {
     return [
       {
         name: startCase(ingestionDetails.pipelineType),
@@ -40,7 +43,7 @@ export const getLogBreadCrumbs = (
         activeTitle: true,
       },
       {
-        name: startCase(ingestionName.split('.')[1]),
+        name: getNameFromFQN(ingestionName),
         url: '',
         activeTitle: true,
       },
@@ -50,7 +53,7 @@ export const getLogBreadCrumbs = (
     return [];
   }
 
-  const urlPath = [serviceType, ...ingestionName.split('.')];
+  const urlPath = [serviceType, ...updateIngestionName];
 
   return urlPath.map((path, index) => {
     return {
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtils.tsx
index a9b5c09b8b8..34db3ff03b7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtils.tsx
@@ -124,7 +124,11 @@ import {
   PipelineServiceType,
 } from '../generated/entity/services/pipelineService';
 import { ServicesType } from '../interface/service.interface';
-import { getEntityDeleteMessage, pluralize } from './CommonUtils';
+import {
+  getEntityDeleteMessage,
+  pluralize,
+  replaceAllSpacialCharWith_,
+} from './CommonUtils';
 import { getDashboardURL } from './DashboardServiceUtils';
 import { getBrokers } from './MessagingServiceUtils';
 import { showErrorToast } from './ToastUtils';
@@ -604,7 +608,9 @@ export const getIngestionName = (
       IngestionPipelineType.Dbt,
     ].includes(type)
   ) {
-    return `${serviceName}_${type}_${cryptoRandomString({
+    return `${replaceAllSpacialCharWith_(
+      serviceName
+    )}_${type}_${cryptoRandomString({
       length: 8,
       type: 'alphanumeric',
     })}`;
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
index 91ded1c5f24..d6f568a79f7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
@@ -51,12 +51,13 @@ import {
   getPipelineDetailsPath,
   getServiceDetailsPath,
   getTableDetailsPath,
+  getTableTabPath,
   getTagsDetailsPath,
   getTopicDetailsPath,
   TEXT_BODY_COLOR,
 } from '../constants/constants';
 import { GlobalSettingsMenuCategory } from '../constants/GlobalSettings.constants';
-import { EntityType, FqnPart } from '../enums/entity.enum';
+import { EntityTabs, EntityType, FqnPart } from '../enums/entity.enum';
 import { SearchIndex } from '../enums/search.enum';
 import { ConstraintTypes, PrimaryTableDataTypes } from '../enums/table.enum';
 import {
@@ -272,6 +273,12 @@ export const getEntityLink = (
     case EntityType.DASHBOARD_DATA_MODEL:
       return getDataModelDetailsPath(fullyQualifiedName);
 
+    case EntityType.TEST_CASE:
+      return `${getTableTabPath(
+        getTableFQNFromColumnFQN(fullyQualifiedName),
+        EntityTabs.PROFILER
+      )}?activeTab=Data Quality`;
+
     case SearchIndex.TABLE:
     case EntityType.TABLE:
     default: