UI : Addressing 0.9.0 Feedback Part 3 (#3350)

* UI : Addressing 0.9.0 Feedback Part 3 * Minor fix * Addressing review comment * Minor style change
2025-11-03 12:08:31 +00:00 · 2022-03-10 21:25:41 +05:30 · 2022-03-10 21:25:41 +05:30 · 3eda561ca9
commit 3eda561ca9
parent 4d1d25a58b
16 changed files with 57 additions and 66 deletions
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.tsx
@ -97,7 +97,6 @@ const FeedHeader: FC<FeedHeaderProp> = ({
  };

  const getUserData = () => {
-    const image = userData.profile?.images?.image512;
    const displayName = userData.displayName ?? '';
    const name = userData.name ?? '';
    const teams = userData.teams;
@ -115,11 +114,7 @@ const FeedHeader: FC<FeedHeaderProp> = ({
              <div>
                <div className="tw-flex">
                  <div className="tw-mr-2">
-                    {image ? (
-                      <img src={image} width="30px" />
-                    ) : (
-                      <Avatar name={createdBy} type="square" width="30" />
-                    )}
+                    <Avatar name={createdBy} type="square" width="30" />
                  </div>
                  <div className="tw-self-center">
                    <p>
--- 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
@ -141,7 +141,7 @@ const DashboardDetails = ({
      position: 1,
    },
    {
-      name: `Activity Feed (${feedCount})`,
+      name: 'Activity Feed',
      icon: {
        alt: 'activity_feed',
        name: 'activity_feed',
@ -150,6 +150,7 @@ const DashboardDetails = ({
      },
      isProtected: false,
      position: 2,
+      count: feedCount,
    },
    {
      name: 'Lineage',
--- 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
@ -183,7 +183,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
      position: 1,
    },
    {
-      name: `Activity Feed (${feedCount})`,
+      name: 'Activity Feed',
      icon: {
        alt: 'activity_feed',
        name: 'activity_feed',
@ -192,6 +192,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
      },
      isProtected: false,
      position: 2,
+      count: feedCount,
    },
    {
      name: 'Sample Data',
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNode.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNode.component.tsx
@ -91,7 +91,7 @@ const CustomNode = (props: any) => {
          'tw-h-36 tw-overflow-y-auto': columns?.length,
        })}
        id="table-columns">
-        <div className="tw-flex tw-flex-col tw-gap-y-1">
+        <div className="tw-flex tw-flex-col tw-gap-y-1 tw-relative">
          {columns?.map(
            (c: { name: string; constraint: string }, i: number) => (
              <Fragment key={i}>
--- 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
@ -316,7 +316,7 @@ const Explore: React.FC<ExploreProps> = ({
          <span className="tw-mr-2">Sort by:</span>
          <span className="tw-relative">
            <Button
-              className="hover:tw-no-underline focus:tw-no-underline"
+              className="focus:tw-no-underline"
              data-testid="sortBy"
              size="custom"
              theme="primary"
--- a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
@ -139,7 +139,7 @@ const PipelineDetails = ({
      position: 1,
    },
    {
-      name: `Activity Feed (${feedCount})`,
+      name: 'Activity Feed',
      icon: {
        alt: 'activity_feed',
        name: 'activity_feed',
@ -148,6 +148,7 @@ const PipelineDetails = ({
      },
      isProtected: false,
      position: 2,
+      count: feedCount,
    },
    {
      name: 'Lineage',
--- a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfiler.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfiler.component.tsx
@ -290,14 +290,12 @@ const TableProfiler: FC<Props> = ({
                              position="bottom"
                              title={TITLE_FOR_NON_ADMIN_ACTION}>
                              <Button
-                                className={classNames(
-                                  'tw-px-2 tw-py-0.5 tw-rounded tw-border-grey-muted',
-                                  {
-                                    'tw-opacity-40':
-                                      !isAdminUser && !isAuthDisabled,
-                                  }
-                                )}
-                                size="custom"
+                                className={classNames({
+                                  'tw-opacity-40':
+                                    !isAdminUser && !isAuthDisabled,
+                                })}
+                                size="small"
+                                theme="primary"
                                type="button"
                                variant="outlined"
                                onClick={() =>
--- 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
@ -143,7 +143,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
      position: 1,
    },
    {
-      name: `Activity Feed (${feedCount})`,
+      name: 'Activity Feed',
      icon: {
        alt: 'activity_feed',
        name: 'activity_feed',
@ -152,6 +152,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
      },
      isProtected: false,
      position: 2,
+      count: feedCount,
    },
    {
      name: 'Config',
--- 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
@ -198,7 +198,7 @@ const EntityPageInfo = ({
          </button>

          <span
-            className="tw-text-xs tw-border-l-0 tw-font-medium tw-py-1 tw-px-2 tw-rounded-r tw-cursor-pointer"
+            className="tw-text-xs tw-border-l-0 tw-font-medium tw-py-1 tw-px-2 tw-rounded-r tw-cursor-pointer hover:tw-underline"
            data-testid="getversions">
            {parseFloat(version).toFixed(1)}
          </span>
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FilterContainer.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FilterContainer.tsx
@ -38,8 +38,8 @@ const FilterContainer: FunctionComponent<FilterContainerProp> = ({
  };

  return (
-    <div
-      className="filter-group tw-justify-between tw-mb-2"
+    <label
+      className="filter-group tw-justify-between tw-mb-2 tw-cursor-pointer"
      data-testid={`filter-container-${name}`}>
      <div className="tw-flex">
        <input
@ -66,7 +66,7 @@ const FilterContainer: FunctionComponent<FilterContainerProp> = ({
      </div>
      {!isNil(count) &&
        getCountBadge(count, classNames('tw-py-0 tw-px-0'), isSelected)}
-    </div>
+    </label>
  );
 };

--- a/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
@ -130,47 +130,35 @@ const NavBar = ({
              className="tw-nav focus:tw-no-underline hover:tw-underline tw-flex-shrink-0"
              data-testid="whatsnew-modal"
              onClick={() => handleFeatureModal(true)}>
-              <PopOver
-                position="bottom"
-                title="What's new?"
-                trigger="mouseenter">
-                <SVGIcons
-                  alt="Doc icon"
-                  className="tw-align-middle tw-mr-1"
-                  icon={Icons.WHATS_NEW}
-                  width="20"
-                />
-              </PopOver>
+              <SVGIcons
+                alt="Doc icon"
+                className="tw-align-middle tw-mr-1"
+                icon={Icons.WHATS_NEW}
+                width="20"
+              />
            </button>
            <button
              className="tw-nav focus:tw-no-underline hover:tw-underline tw-flex-shrink-0"
              data-testid="tour">
-              <PopOver
-                position="bottom"
-                title="Take a tour"
-                trigger="mouseenter">
-                <Link to={ROUTES.TOUR}>
-                  <SVGIcons
-                    alt="tour icon"
-                    className="tw-align-middle tw-mr-0.5"
-                    icon={Icons.TOUR}
-                    width="20"
-                  />
-                </Link>
-              </PopOver>
+              <Link to={ROUTES.TOUR}>
+                <SVGIcons
+                  alt="tour icon"
+                  className="tw-align-middle tw-mr-0.5"
+                  icon={Icons.TOUR}
+                  width="20"
+                />
+              </Link>
            </button>
            <div className="tw-flex-shrink-0">
              <DropDown
                dropDownList={supportDropdown}
                icon={
-                  <PopOver position="bottom" title="Help" trigger="mouseenter">
-                    <SVGIcons
-                      alt="Doc icon"
-                      className="tw-align-middle tw-mt-0.5 tw-mr-1"
-                      icon={Icons.HELP_CIRCLE}
-                      width="20"
-                    />
-                  </PopOver>
+                  <SVGIcons
+                    alt="Doc icon"
+                    className="tw-align-middle tw-mt-0.5 tw-mr-1"
+                    icon={Icons.HELP_CIRCLE}
+                    width="20"
+                  />
                }
                isDropDownIconVisible={false}
                isLableVisible={false}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx
@ -202,9 +202,11 @@ const DatasetDetailsPage: FunctionComponent = () => {
    columnName?: string
  ) => {
    activeTabHandler(tabValue);
-    setTestMode(testMode as DatasetTestModeType);
-    setSelectedColumn(columnName);
-    setShowTestForm(true);
+    if (testMode && columnName) {
+      setTestMode(testMode as DatasetTestModeType);
+      setSelectedColumn(columnName);
+      setShowTestForm(true);
+    }
  };

  const getLineageData = () => {
--- a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesPage.component.tsx
@ -910,7 +910,7 @@ const RolesPage = () => {
                        <span className="tw-font-medium">
                          {defaultRole?.displayName ?? defaultRole?.name}
                        </span>{' '}
-                        role.`
+                        role.
                      </Fragment>
                    }
                    cancelText="Cancel"
--- 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
@ -136,7 +136,7 @@ const DatabaseDetails: FunctionComponent = () => {
      position: 1,
    },
    {
-      name: `Activity Feed (${feedCount})`,
+      name: 'Activity Feed',
      icon: {
        alt: 'activity_feed',
        name: 'activity_feed',
@ -145,6 +145,7 @@ const DatabaseDetails: FunctionComponent = () => {
      },
      isProtected: false,
      position: 2,
+      count: feedCount,
    },
    {
      name: 'Manage',
--- a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
@ -186,7 +186,7 @@ const ServicePage: FunctionComponent = () => {
      count: instanceCount,
    },
    {
-      name: `Activity Feed (${feedCount})`,
+      name: 'Activity Feed',
      icon: {
        alt: 'activity_feed',
        name: 'activity_feed',
@ -195,6 +195,7 @@ const ServicePage: FunctionComponent = () => {
      },
      isProtected: false,
      position: 2,
+      count: feedCount,
    },
    {
      name: 'Ingestions',
--- a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
@ -426,16 +426,18 @@ export const getInfoElements = (data: ExtraInfo) => {
        <span>
          {data.isLink ? (
            <a
-              className="link-text"
              data-testid="owner-link"
              href={data.value as string}
              rel="noopener noreferrer"
              target={data.openInNewTab ? '_blank' : '_self'}>
              <>
                <span
-                  className={classNames('tw-mr-1 tw-inline-block tw-truncate', {
-                    'tw-w-52': (displayVal as string).length > 32,
-                  })}
+                  className={classNames(
+                    'tw-mr-1 tw-inline-block tw-truncate link-text',
+                    {
+                      'tw-w-52': (displayVal as string).length > 32,
+                    }
+                  )}
                  title={displayVal as string}>
                  {displayVal}
                </span>