Fix: UI changes from feedback (#1731)

* Fix: UI changes from feedback * Minor change
2025-08-23 16:38:17 +00:00 · 2021-12-14 00:17:04 +05:30 · 2021-12-14 00:17:04 +05:30 · 324573dc76
commit 324573dc76
parent 52571efdc9
19 changed files with 225 additions and 176 deletions
--- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/tag-grey.svg
+++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/tag-grey.svg
@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.85588 12C6.85617 12 6.85654 12 6.8569 12C7.23244 11.9997 7.58557 11.8532 7.85102 11.5874L11.5899 7.84343C12.1367 7.29558 12.1367 6.40415 11.5899 5.85637L6.54985 0.807056C6.03045 0.28667 5.33936 0 4.60396 0H1.40635C0.630953 0 0 0.630762 0 1.40625V4.59382C0 5.32866 0.286397 6.01941 0.806307 6.5387L5.86198 11.5887C6.12758 11.854 6.48056 12 6.85588 12ZM4.60396 0.9375C5.08857 0.9375 5.54394 1.12639 5.88623 1.46931L10.9263 6.51863C11.1086 6.70129 11.1086 6.99836 10.9263 7.18103L7.18747 10.925C7.09906 11.0135 6.98142 11.0624 6.85617 11.0625H6.8558C6.7307 11.0625 6.61306 11.0138 6.52458 10.9255L1.4689 5.87549C1.12625 5.5333 0.937566 5.07803 0.937566 4.59382V1.40625C0.937566 1.14778 1.14786 0.9375 1.40635 0.9375H4.60396ZM3.39875 4.75781C4.17422 4.75781 4.8051 4.12705 4.8051 3.35156C4.8051 2.57607 4.17422 1.94531 3.39875 1.94531C2.62328 1.94531 1.9924 2.57607 1.9924 3.35156C1.9924 4.12705 2.62328 4.75781 3.39875 4.75781ZM3.39875 2.88281C3.65724 2.88281 3.86753 3.09309 3.86753 3.35156C3.86753 3.61003 3.65724 3.82031 3.39875 3.82031C3.14019 3.82031 2.92997 3.61003 2.92997 3.35156C2.92997 3.09309 3.14019 2.88281 3.39875 2.88281Z" fill="#6b7280"/>
+</svg>
--- a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx
@ -424,6 +424,7 @@ const DashboardDetails = ({
                                  editable={editChartTags?.index === index}
                                  selectedTags={chart.tags as EntityTags[]}
                                  tagList={tagList}
+                                  type="label"
                                  onCancel={() => {
                                    handleChartTagSelection();
                                  }}
--- a/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx
@ -12,7 +12,7 @@
 */

 import { isEqual, isNil, isUndefined } from 'lodash';
-import { ColumnJoins, EntityTags } from 'Models';
+import { ColumnJoins, EntityTags, ExtraInfo } from 'Models';
 import React, { useEffect, useState } from 'react';
 import { getTeamDetailsPath } from '../../constants/constants';
 import { CSMode } from '../../enums/codemirror.enum';
@ -93,7 +93,8 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
  ) => {
    if (!isNil(usageSummary?.weeklyStats?.percentileRank)) {
      const percentile = getUsagePercentile(
-        usageSummary?.weeklyStats?.percentileRank || 0
+        usageSummary?.weeklyStats?.percentileRank || 0,
+        true
      );
      setUsage(percentile);
    } else {
@ -201,13 +202,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
    return freqJoin;
  };

-  const extraInfo: Array<{
-    key?: string;
-    value: string | number | React.ReactNode;
-    isLink?: boolean;
-    placeholderText?: string;
-    openInNewTab?: boolean;
-  }> = [
+  const extraInfo: Array<ExtraInfo> = [
    {
      key: 'Owner',
      value:
@ -219,37 +214,42 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
      openInNewTab: false,
    },
    { key: 'Tier', value: tier?.tagFQN ? tier.tagFQN.split('.')[1] : '' },
-    { key: 'Usage', value: usage },
-    { key: 'Queries', value: `${weeklyUsageCount} past week` },
+    { value: usage },
+    { value: `${weeklyUsageCount} queries past week` },
    {
      key: 'Columns',
      value:
        tableProfile && tableProfile[0]?.columnCount
-          ? tableProfile[0].columnCount
-          : '--',
+          ? `${tableProfile[0].columnCount} columns`
+          : columns.length
+          ? `${columns.length} columns`
+          : '',
    },
    {
      key: 'Rows',
      value:
        !isUndefined(tableProfile) && tableProfile.length > 0 ? (
-          <TableProfilerGraph
-            className="tw--mt-5"
-            data={
-              tableProfile
-                ?.map((d) => ({
-                  date: d.profileDate,
-                  value: d.rowCount ?? 0,
-                }))
-                .reverse() as Array<{
-                date: Date;
-                value: number;
-              }>
-            }
-            height={38}
-            toolTipPos={{ x: 20, y: -30 }}
-          />
+          <>
+            <TableProfilerGraph
+              className="tw--mt-5"
+              data={
+                tableProfile
+                  ?.map((d) => ({
+                    date: d.profileDate,
+                    value: d.rowCount ?? 0,
+                  }))
+                  .reverse() as Array<{
+                  date: Date;
+                  value: number;
+                }>
+              }
+              height={38}
+              toolTipPos={{ x: 20, y: -30 }}
+            />
+            rows
+          </>
        ) : (
-          '--'
+          ''
        ),
    },
  ];
--- a/openmetadata-ui/src/main/resources/ui/src/components/DatasetVersion/DatasetVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DatasetVersion/DatasetVersion.component.tsx
@ -13,6 +13,7 @@

 import classNames from 'classnames';
 import { cloneDeep, isEqual, isUndefined } from 'lodash';
+import { ExtraInfo } from 'Models';
 import React, { useEffect, useState } from 'react';
 import {
  ChangeDescription,
@ -103,7 +104,7 @@ const DatasetVersion: React.FC<DatasetVersionProp> = ({
      ),
    ].find((t) => (t?.tagFQN as string).startsWith('Tier'));

-    const extraInfo = [
+    const extraInfo: Array<ExtraInfo> = [
      {
        key: 'Owner',
        value:
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx
@ -529,6 +529,7 @@ const EntityTable = ({
                                    key={i}
                                    startWith="#"
                                    tag={tag}
+                                    type="label"
                                  />
                                )
                              )}
@ -549,6 +550,7 @@ const EntityTable = ({
                                  editable={editColumnTag?.index === row.id}
                                  selectedTags={cell.value || []}
                                  tagList={allTags}
+                                  type="label"
                                  onCancel={() => {
                                    handleTagSelection();
                                  }}
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
@ -383,7 +383,7 @@ const Explore: React.FC<ExploreProps> = ({
  const getTabs = () => {
    return (
      <div className="tw-mb-5">
-        <nav className="tw-flex tw-flex-row tw-gh-tabs-container tw-mx-6 tw-justify-around">
+        <nav className="tw-flex tw-flex-row tw-gh-tabs-container tw-mx-9 tw-pl-72 tw-pr-80 tw-justify-between">
          <div>
            {tabsInfo.map((tabDetail, index) => (
              <button
--- 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
@ -76,11 +76,23 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({

  const getConfigDetails = () => {
    return [
-      { key: 'Partitions', value: partitions },
-      { key: 'Replication Factor', value: replicationFactor },
-      { key: 'Retention Size', value: bytesToSize(retentionSize) },
-      { key: 'CleanUp Policies', value: cleanupPolicies.join(',') },
-      { key: 'Max Message Size', value: bytesToSize(maximumMessageSize) },
+      { key: 'Partitions', value: `${partitions} partitions` },
+      {
+        key: 'Replication Factor',
+        value: `${replicationFactor} replication factor`,
+      },
+      {
+        key: 'Retention Size',
+        value: `${bytesToSize(retentionSize)} retention size`,
+      },
+      {
+        key: 'Clean-up Policies',
+        value: `${cleanupPolicies.join(', ')} clean-up policies`,
+      },
+      {
+        key: 'Max Message Size',
+        value: `${bytesToSize(maximumMessageSize)} maximum size`,
+      },
    ];
  };

--- a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
@ -12,13 +12,14 @@
 */

 import classNames from 'classnames';
-import { isNil, isUndefined } from 'lodash';
-import { EntityTags, TableDetail } from 'Models';
+import { isUndefined } from 'lodash';
+import { EntityTags, ExtraInfo, TableDetail } from 'Models';
 import React, { useEffect, useState } from 'react';
 import { FOLLOWERS_VIEW_CAP, LIST_SIZE } from '../../../constants/constants';
 import { User } from '../../../generated/entity/teams/user';
 import { TagLabel } from '../../../generated/type/tagLabel';
 import { getHtmlForNonAdminAction } from '../../../utils/CommonUtils';
+import { getInfoElements } from '../../../utils/EntityUtils';
 import SVGIcons from '../../../utils/SvgUtils';
 import { getFollowerDetail } from '../../../utils/TableUtils';
 import TagsContainer from '../../tags-container/tags-container';
@ -30,14 +31,6 @@ import TitleBreadcrumb from '../title-breadcrumb/title-breadcrumb.component';
 import { TitleBreadcrumbProps } from '../title-breadcrumb/title-breadcrumb.interface';
 import FollowersModal from './FollowersModal';

-type ExtraInfo = {
-  key?: string;
-  value: string | number | React.ReactNode;
-  isLink?: boolean;
-  placeholderText?: string;
-  openInNewTab?: boolean;
-};
-
 type Props = {
  titleLinks: TitleBreadcrumbProps['titleLinks'];
  isFollowing?: boolean;
@ -253,80 +246,40 @@ const EntityPageInfo = ({
          </div>
        </div>
      </div>
-      <div className="tw-flex tw-gap-1 tw-mb-2 tw-mt-1">
+      <div className="tw-flex tw-gap-1 tw-mb-2 tw-mt-1 tw-ml-7">
        {extraInfo.map((info, index) => (
          <span className="tw-flex" key={index}>
-            {!isNil(info.key) ? (
-              <>
-                <span className="tw-text-grey-muted tw-font-normal">
-                  {info.key} :
-                </span>{' '}
-                <span className="tw-pl-1 tw-font-normal">
-                  {info.isLink ? (
-                    <a
-                      className="link-text"
-                      href={info.value as string}
-                      rel="noopener noreferrer"
-                      target={info.openInNewTab ? '_blank' : '_self'}>
-                      <>
-                        <span className="tw-mr-1">
-                          {info.placeholderText || info.value}
-                        </span>
-                        {info.openInNewTab && (
-                          <SVGIcons
-                            alt="external-link"
-                            className="tw-align-middle"
-                            icon="external-link"
-                            width="12px"
-                          />
-                        )}
-                      </>
-                    </a>
-                  ) : (
-                    info.value || '--'
-                  )}
-                </span>
-                {extraInfo.length !== 1 && index < extraInfo.length - 1 ? (
-                  <span className="tw-mx-3 tw-inline-block tw-text-gray-400">
-                    •
-                  </span>
-                ) : null}
-              </>
-            ) : !isNil(info.value) ? (
-              <>
-                <span className="tw-font-normal">{info.value}</span>
-                {extraInfo.length !== 1 && index < extraInfo.length - 1 ? (
-                  <span className="tw-mx-3 tw-inline-block tw-text-gray-400">
-                    •
-                  </span>
-                ) : null}
-              </>
+            {getInfoElements(info)}
+            {extraInfo.length !== 1 && index < extraInfo.length - 1 ? (
+              <span className="tw-mx-3 tw-inline-block tw-text-gray-400">
+                |
+              </span>
            ) : null}
          </span>
        ))}
      </div>
-      <div className="tw-flex tw-flex-wrap tw-pt-1 tw-group">
+      <div className="tw-flex tw-flex-wrap tw-pt-1 tw-ml-7 tw-group">
        {(!isEditable || !isTagEditable) && (
          <>
            {(tags.length > 0 || tier) && (
-              <i className="fas fa-tags tw-px-1 tw-mt-2 tw-text-grey-muted" />
+              <SVGIcons
+                alt="icon-tag"
+                className="tw-mx-1"
+                icon="icon-tag-grey"
+                width="16"
+              />
            )}
            {tier?.tagFQN && (
              <Tags
-                className="tw-bg-tag"
                startWith="#"
                tag={{ ...tier, tagFQN: tier.tagFQN.split('.')[1] }}
+                type="label"
              />
            )}
            {tags.length > 0 && (
              <>
                {tags.slice(0, LIST_SIZE).map((tag, index) => (
-                  <Tags
-                    className="tw-bg-tag"
-                    key={index}
-                    startWith="#"
-                    tag={tag}
-                  />
+                  <Tags key={index} startWith="#" tag={tag} type="label" />
                ))}

                {tags.slice(LIST_SIZE).length > 0 && (
@ -335,11 +288,7 @@ const EntityPageInfo = ({
                      <>
                        {tags.slice(LIST_SIZE).map((tag, index) => (
                          <p className="tw-text-left" key={index}>
-                            <Tags
-                              className="tw-bg-tag tw-px-2"
-                              startWith="#"
-                              tag={tag}
-                            />
+                            <Tags startWith="#" tag={tag} type="label" />
                          </p>
                        ))}
                      </>
@ -386,12 +335,12 @@ const EntityPageInfo = ({
                    />
                  </button>
                ) : (
-                  <span className="">
+                  <span>
                    <Tags
-                      className="tw-border-main tw-text-primary"
+                      className="tw-text-primary"
                      startWith="+ "
                      tag="Add tag"
-                      type="outlined"
+                      type="label"
                    />
                  </span>
                )}
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx
@ -12,16 +12,14 @@
 */

 import { isString, isUndefined, startCase, uniqueId } from 'lodash';
+import { ExtraInfo } from 'Models';
 import React, { FunctionComponent } from 'react';
 import { Link } from 'react-router-dom';
 import { SearchIndex } from '../../../enums/search.enum';
 import { TagLabel } from '../../../generated/type/tagLabel';
+import { serviceTypeLogo } from '../../../utils/ServiceUtils';
 import { stringToHTML } from '../../../utils/StringsUtils';
-import {
-  getEntityIcon,
-  getEntityLink,
-  getUsagePercentile,
-} from '../../../utils/TableUtils';
+import { getEntityLink, getUsagePercentile } from '../../../utils/TableUtils';
 import TableDataCardBody from './TableDataCardBody';

 type Props = {
@ -44,7 +42,7 @@ type Props = {

 const TableDataCard: FunctionComponent<Props> = ({
  name,
-  owner = '--',
+  owner = '',
  description,
  tier = '',
  usage,
@ -60,12 +58,12 @@ const TableDataCard: FunctionComponent<Props> = ({
      return isString(tier) ? tier : tier.tagFQN.split('.')[1];
    }

-    return 'No Tier';
+    return '';
  };

-  const OtherDetails = [
+  const OtherDetails: Array<ExtraInfo> = [
    { key: 'Owner', value: owner },
-    { key: 'Service', value: serviceType },
+    // { key: 'Service', value: serviceType },
    { key: 'Tier', value: getTier() },
  ];
  if (indexType !== SearchIndex.DASHBOARD && usage !== undefined) {
@ -81,6 +79,7 @@ const TableDataCard: FunctionComponent<Props> = ({
    OtherDetails.push({
      key: 'Database',
      value: database,
+      showLabel: true,
    });
  }
  const getAssetTags = () => {
@ -100,7 +99,12 @@ const TableDataCard: FunctionComponent<Props> = ({
      data-testid="table-data-card">
      <div>
        <div className="tw-flex">
-          {getEntityIcon(indexType)}
+          {/* {getEntityIcon(indexType)} */}
+          <img
+            alt=""
+            className="tw-inline tw-h-5 tw-w-5"
+            src={serviceTypeLogo(serviceType || '')}
+          />
          <h6 className="tw-flex tw-items-center tw-m-0 tw-heading tw-pl-2">
            <Link
              data-testid="table-link"
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCardBody.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCardBody.tsx
@ -12,20 +12,17 @@
 */

 import { isNil, isString } from 'lodash';
+import { ExtraInfo } from 'Models';
 import React, { FunctionComponent } from 'react';
 import { TagLabel } from '../../../generated/type/tagLabel';
-import { serviceTypeLogo } from '../../../utils/ServiceUtils';
+import { getInfoElements } from '../../../utils/EntityUtils';
 import SVGIcons from '../../../utils/SvgUtils';
 import Tag from '../../tags/tags';
-import Avatar from '../avatar/Avatar';
 import RichTextEditorPreviewer from '../rich-text-editor/RichTextEditorPreviewer';

 type Props = {
  description: string;
-  extraInfo: {
-    key: string;
-    value?: string;
-  }[];
+  extraInfo: Array<ExtraInfo>;
  tags?: string[] | TagLabel[];
 };

@ -46,42 +43,14 @@ const TableDataCardBody: FunctionComponent<Props> = ({
      };
    }
  };
-  const getInfoLabel = (data: { key: string; value: string }) => {
-    switch (data.key) {
-      case 'Owner':
-        return data.value !== '--' ? (
-          <div className="tw-inline-block">
-            <Avatar name={data.value} textClass="tw-text-xs" width="22" />
-          </div>
-        ) : (
-          `${data.key} : `
-        );
-      case 'Service':
-        return (
-          <img
-            alt=""
-            className="tw-inline tw-h-5 tw-w-5"
-            src={serviceTypeLogo(data.value)}
-          />
-        );
-      case 'Tier':
-        return <SVGIcons alt="icon-tier" icon="icon-tier" width="16px" />;
-
-      default:
-        return `${data.key} : `;
-    }
-  };

  return (
    <div data-testid="table-body">
      <div className="tw-mb-4">
-        {extraInfo.map(({ key, value }, i) =>
-          !isNil(value) ? (
+        {extraInfo.map((info, i) =>
+          !isNil(info.value) ? (
            <span key={i}>
-              <span className="tw-text-grey-muted">
-                {getInfoLabel({ key, value })}
-              </span>{' '}
-              <span className="tw-pl-1 ">{value}</span>
+              {getInfoElements(info)}
              {i !== extraInfo.length - 1 && (
                <span className="tw-mx-3 tw-inline-block tw-text-gray-400">
                  |
@ -105,9 +74,10 @@ const TableDataCardBody: FunctionComponent<Props> = ({
            <SVGIcons
              alt="icon-tag"
              className="tw-absolute tw-top-1.5"
-              icon="icon-tag"
+              icon="icon-tag-grey"
+              width="14"
            />
-            <div className="tw-ml-2">
+            <div className="tw-ml-4">
              {tags?.map((tag, index) => (
                <Tag
                  key={index}
--- a/openmetadata-ui/src/main/resources/ui/src/components/tags-container/tags-container.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/tags-container/tags-container.interface.ts
@ -13,12 +13,14 @@

 import { EntityTags } from 'Models';
 import { ReactNode } from 'react';
+import { TagProps } from '../tags/tags.interface';

 export type TagsContainerProps = {
  children?: ReactNode;
  editable?: boolean;
  selectedTags: Array<EntityTags>;
  tagList: Array<string>;
+  type?: TagProps['type'];
  showTags?: boolean;
  onSelectionChange: (selectedTags: Array<EntityTags>) => void;
  onCancel: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
--- a/openmetadata-ui/src/main/resources/ui/src/components/tags-container/tags-container.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/tags-container/tags-container.tsx
@ -32,6 +32,7 @@ const TagsContainer: FunctionComponent<TagsContainerProps> = ({
  onCancel,
  onSelectionChange,
  showTags = true,
+  type,
 }: TagsContainerProps) => {
  const [tags, setTags] = useState<Array<EntityTags>>(selectedTags);
  const [newTag, setNewTag] = useState<string>('');
@ -129,7 +130,9 @@ const TagsContainer: FunctionComponent<TagsContainerProps> = ({
  const getTagsElement = (tag: EntityTags, index: number) => {
    return (
      <Tags
-        className="tw-bg-gray-200"
+        className={classNames({
+          'tw-bg-gray-200': editable || type === 'contained',
+        })}
        editable={editable}
        isRemovable={tag.isRemovable}
        key={index}
@ -138,6 +141,7 @@ const TagsContainer: FunctionComponent<TagsContainerProps> = ({
        }}
        startWith="#"
        tag={tag}
+        type={editable ? 'contained' : type}
      />
    );
  };
--- a/openmetadata-ui/src/main/resources/ui/src/components/tags/tags.styles.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/tags/tags.styles.ts
@ -12,18 +12,18 @@
 */

 export const tagStyles = {
-  base: `tw-relative tw-inline-flex tw-text-xs tw-font-medium 
+  base: `tw-relative tw-inline-flex tw-text-xs tw-font-normal 
      tw-rounded tw-whitespace-nowrap`,
  contained: 'tw-bg-tag tw-mr-2 tw-my-0.5 tw-font-medium ',
  outlined: 'tw-bg-transparent tw-mr-2 tw-my-0.5 tw-font-medium ',
-  label: 'tw-bg-transparent tw-border-none tw-text-primary',
+  label: 'tw-bg-transparent tw-border-none tw-text-grey-body tw-text-body',

  text: {
    base: 'tw-no-underline hover:tw-no-underline',
    default: 'tw-px-2',
    editable: 'tw-pl-2 tw-pr-1',
-    contained: 'tw-py-0.5',
-    outlined: 'tw-py-0.5',
-    label: '',
+    contained: 'tw-py-0.5 tw-px-2',
+    outlined: 'tw-py-0.5 tw-px-2',
+    label: 'tw-px-1',
  },
 };
--- a/openmetadata-ui/src/main/resources/ui/src/components/tags/tags.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/tags/tags.tsx
@ -31,9 +31,8 @@ const Tags: FunctionComponent<TagProps> = ({
  const baseStyle = tagStyles.base;
  const layoutStyles = tagStyles[type];
  const textBaseStyle = tagStyles.text.base;
-  const textLayoutStyles = editable
-    ? tagStyles.text.editable
-    : tagStyles.text.default;
+  const textLayoutStyles = tagStyles.text[type] || tagStyles.text.default;
+  const textEditStyles = editable ? tagStyles.text.editable : '';

  const getTagString = (tag: string) => {
    return tag.startsWith('#') ? tag.slice(1) : tag;
@ -44,12 +43,17 @@ const Tags: FunctionComponent<TagProps> = ({
      <span
        className={classNames(baseStyle, layoutStyles, className)}
        data-testid="tags">
-        <span className={classNames(textBaseStyle, textLayoutStyles)}>
+        <span
+          className={classNames(
+            textBaseStyle,
+            textLayoutStyles,
+            textEditStyles
+          )}>
          {`${startWith}${tag}`}
        </span>
        {editable && isRemovable && (
          <span
-            className="tw-py-1 tw-px-2 tw-rounded tw-cursor-pointer"
+            className="tw-py-0.5 tw-px-2 tw-rounded tw-cursor-pointer"
            data-testid="remove"
            onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
              e.preventDefault();
--- a/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts
@ -413,4 +413,13 @@ declare module 'Models' {
    id: string | undefined;
    state: boolean;
  }
+
+  export type ExtraInfo = {
+    key?: string;
+    value: string | number | React.ReactNode;
+    isLink?: boolean;
+    placeholderText?: string;
+    openInNewTab?: boolean;
+    showLabel?: boolean;
+  };
 }
--- a/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
@ -408,7 +408,6 @@ const DatabaseDetails: FunctionComponent = () => {
                              <td className="tableBody-cell">
                                {table.tags?.map((tag, tagIndex) => (
                                  <Tags
-                                    className="tw-bg-gray-200"
                                    key={tagIndex}
                                    startWith="#"
                                    tag={{
@ -419,15 +418,16 @@ const DatabaseDetails: FunctionComponent = () => {
                                        ? tag.tagFQN.split('.')[1]
                                        : tag.tagFQN,
                                    }}
+                                    type="label"
                                  />
                                ))}
                                {getTableTags(table.columns).map(
                                  (tag, tagIdx) => (
                                    <Tags
-                                      className="tw-bg-gray-200"
                                      key={tagIdx}
                                      startWith="#"
                                      tag={tag}
+                                      type="label"
                                    />
                                  )
                                )}
--- a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
@ -11,9 +11,10 @@
 *  limitations under the License.
 */

-import { isEmpty, isNil } from 'lodash';
-import { Bucket, LeafNodes, LineagePos } from 'Models';
+import { isEmpty, isNil, isString } from 'lodash';
+import { Bucket, ExtraInfo, LeafNodes, LineagePos } from 'Models';
 import React from 'react';
+import Avatar from '../components/common/avatar/Avatar';
 import TableProfilerGraph from '../components/TableProfiler/TableProfilerGraph.component';
 import {
  getDatabaseDetailsPath,
@ -30,6 +31,7 @@ import { Edge, EntityLineage } from '../generated/type/entityLineage';
 import { EntityReference } from '../generated/type/entityUsage';
 import { TagLabel } from '../generated/type/tagLabel';
 import { getPartialNameFromFQN } from './CommonUtils';
+import SVGIcons from './SvgUtils';
 import {
  getOwnerFromId,
  getTierFromTableTags,
@ -324,3 +326,81 @@ export const isLeafNode = (
    return false;
  }
 };
+
+export const getInfoElements = (data: ExtraInfo) => {
+  let retVal = <></>;
+  const displayVal = data.placeholderText || data.value;
+
+  switch (data.key) {
+    case 'Owner':
+      {
+        retVal =
+          displayVal && displayVal !== '--' ? (
+            isString(displayVal) ? (
+              <div className="tw-inline-block tw-mr-2">
+                <Avatar name={displayVal} textClass="tw-text-xs" width="22" />
+              </div>
+            ) : (
+              <></>
+            )
+          ) : (
+            <>No Owner</>
+          );
+      }
+
+      break;
+    case 'Tier':
+      {
+        retVal = !displayVal || displayVal === '--' ? <>No Tier</> : <></>;
+      }
+
+      break;
+    default:
+      {
+        retVal = (
+          <>
+            {data.key
+              ? displayVal
+                ? data.showLabel
+                  ? `${data.key}: `
+                  : null
+                : `No ${data.key}`
+              : null}
+          </>
+        );
+      }
+
+      break;
+  }
+
+  return (
+    <>
+      <span className="tw-text-grey-muted">{retVal}</span>
+      {displayVal ? (
+        <span>
+          {data.isLink ? (
+            <a
+              className="link-text"
+              href={data.value as string}
+              rel="noopener noreferrer"
+              target={data.openInNewTab ? '_blank' : '_self'}>
+              <>
+                <span className="tw-mr-1">{displayVal}</span>
+                {data.openInNewTab && (
+                  <SVGIcons
+                    alt="external-link"
+                    className="tw-align-middle"
+                    icon="external-link"
+                    width="12px"
+                  />
+                )}
+              </>
+            </a>
+          ) : (
+            displayVal
+          )}
+        </span>
+      ) : null}
+    </>
+  );
+};
--- a/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx
@ -82,6 +82,7 @@ import IconSlackGrey from '../assets/svg/slack-grey.svg';
 import IconSlack from '../assets/svg/slack.svg';
 import IconTableGrey from '../assets/svg/table-grey.svg';
 import IconTable from '../assets/svg/table.svg';
+import IconTagGrey from '../assets/svg/tag-grey.svg';
 import IconTag from '../assets/svg/tag.svg';
 import IconTerns from '../assets/svg/terms.svg';
 import IconTier from '../assets/svg/tier.svg';
@ -179,6 +180,7 @@ export const Icons = {
  ICON_PLUS: 'icon-plus',
  ICON_MINUS: 'icon-minus',
  TAG: 'icon-tag',
+  TAG_GREY: 'icon-tag-grey',
  TIER: 'icon-tier',
  SEARCHV1: 'icon-searchv1',
 };
@ -506,6 +508,10 @@ const SVGIcons: FunctionComponent<Props> = ({
    case Icons.TAG:
      IconComponent = IconTag;

+      break;
+    case Icons.TAG_GREY:
+      IconComponent = IconTagGrey;
+
      break;
    case Icons.TIER:
      IconComponent = IconTier;
--- a/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
@ -51,11 +51,13 @@ export const usageSeverity = (value: number): string => {
  }
 };

-export const getUsagePercentile = (pctRank: number) => {
+export const getUsagePercentile = (pctRank: number, isLiteral = false) => {
  const percentile = Math.round(pctRank * 10) / 10;
  const ordinalPercentile = ordinalize(percentile);
  const strSeverity = usageSeverity(percentile);
-  const usagePercentile = `${strSeverity} - ${ordinalPercentile} pctile`;
+  const usagePercentile = `${strSeverity}${
+    isLiteral ? ' usage' : ''
+  } - ${ordinalPercentile} pctile`;

  return usagePercentile;
 };