Fix: Flashy Popover, uneven UI for Tags, Teams and Services page (#2132)

openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOver.tsx

@@ -21,6 +21,8 @@ const PopOver: React.FC<PopOverProp> = ({
   arrow = true,
   children,
   className = '',
+  delay = 500,
+  hideDelay = 0,
   html,
   position,
   size = 'regular',
@@ -32,6 +34,8 @@ const PopOver: React.FC<PopOverProp> = ({
     <Tooltip
       arrow={arrow}
       className={className}
+      delay={delay}
+      hideDelay={hideDelay}
       html={html}
       position={position}
       size={size}

openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOverTypes.ts

@@ -28,4 +28,6 @@ export type PopOverProp = {
   trigger: Trigger;
   children: ReactNode;
   className?: string;
+  delay?: number;
+  hideDelay?: number;
 };

openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx

@@ -58,7 +58,7 @@ import { MessagingService } from '../../generated/entity/services/messagingServi
 import { PipelineService } from '../../generated/entity/services/pipelineService';
 import { useAuth } from '../../hooks/authHooks';
 import useToastContext from '../../hooks/useToastContext';
-import { getCountBadge, getTabClasses } from '../../utils/CommonUtils';
+import { getActiveCatClass, getCountBadge } from '../../utils/CommonUtils';
 import { getFrequencyTime, serviceTypeLogo } from '../../utils/ServiceUtils';
 import SVGIcons from '../../utils/SvgUtils';
 
@@ -327,6 +327,41 @@ const ServicesPage = () => {
     setServiceList(services[tabName] as unknown as Array<ServiceDataObj>);
   };
 
+  const fetchLeftPanel = () => {
+    return (
+      <>
+        <div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
+          <h6 className="tw-heading tw-text-base">Services</h6>
+        </div>
+
+        {getServiceTabs()?.map((tab, index) => {
+          return (
+            <div
+              className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
+                tab.name,
+                serviceName
+              )}`}
+              data-testid="tab"
+              key={index}
+              onClick={() => {
+                handleTabChange(tab.name);
+              }}>
+              <p className="tw-text-center tw-self-center label-category">
+                {tab.displayName}
+              </p>
+
+              {getCountBadge(
+                servicesCount[tab.name],
+                '',
+                tab.name === serviceName
+              )}
+            </div>
+          );
+        })}
+      </>
+    );
+  };
+
   const getOptionalFields = (service: ServiceDataObj): JSX.Element => {
     switch (serviceName) {
       case ServiceCategory.DATABASE_SERVICES: {
@@ -452,68 +487,35 @@ const ServicesPage = () => {
   return (
     <>
       {!isLoading ? (
-        <PageContainerV1 className="tw-pt-1">
+        <PageContainerV1 className="tw-pt-4">
-          <PageLayout>
+          <PageLayout leftPanel={fetchLeftPanel()}>
             <div data-testid="services-container">
-              <div className="tw-bg-transparent tw-mb-4">
-                <nav className="tw-flex tw-flex-row tw-gh-tabs-container">
-                  {getServiceTabs().map((tab, index) => (
-                    <button
-                      className={getTabClasses(tab.name, serviceName)}
-                      data-testid="tab"
-                      key={index}
-                      onClick={() => handleTabChange(tab.name)}>
-                      {tab.displayName}
-                      {getCountBadge(
-                        servicesCount[tab.name],
-                        '',
-                        tab.name === serviceName
-                      )}
-                    </button>
-                  ))}
-                  <div className="tw-self-end tw-ml-auto">
-                    {serviceList.length > 0 ? (
-                      <NonAdminAction
-                        position="bottom"
-                        title={TITLE_FOR_NON_ADMIN_ACTION}>
-                        <Button
-                          className={classNames('tw-h-8 tw-rounded tw-mb-2', {
-                            'tw-opacity-40': !isAdminUser && !isAuthDisabled,
-                          })}
-                          data-testid="add-new-user-button"
-                          size="small"
-                          theme="primary"
-                          variant="contained"
-                          onClick={() => handleAddService()}>
-                          Add New Service
-                        </Button>
-                      </NonAdminAction>
-                    ) : null}
-                  </div>
-                </nav>
-              </div>
-              {/* <div className="tw-flex">
-              <div className="tw-w-8/12 tw-flex tw-justify-end">
-                {serviceList.length > 0 ? (
-                  <NonAdminAction
-                    position="bottom"
-                    title={TITLE_FOR_NON_ADMIN_ACTION}>
-                    <Button
-                      className={classNames('tw-h-8 tw-rounded tw-mb-2', {
-                        'tw-opacity-40': !isAdminUser && !isAuthDisabled,
-                      })}
-                      data-testid="add-new-user-button"
-                      size="small"
-                      theme="primary"
-                      variant="contained"
-                      onClick={() => handleAddService()}>
-                      Add New Service
-                    </Button>
-                  </NonAdminAction>
-                ) : null}
-              </div>
-            </div> */}
               {serviceList.length ? (
+                <>
+                  <div
+                    className="tw-flex tw-justify-between"
+                    data-testid="header">
+                    <div
+                      className="tw-heading tw-text-link tw-text-base"
+                      data-testid="service-name">
+                      {servicesDisplayName[serviceName]}
+                    </div>
+                    <NonAdminAction
+                      position="bottom"
+                      title={TITLE_FOR_NON_ADMIN_ACTION}>
+                      <Button
+                        className={classNames('tw-h-8 tw-rounded tw-mb-2', {
+                          'tw-opacity-40': !isAdminUser && !isAuthDisabled,
+                        })}
+                        data-testid="add-new-user-button"
+                        size="small"
+                        theme="primary"
+                        variant="contained"
+                        onClick={() => handleAddService()}>
+                        Add New Service
+                      </Button>
+                    </NonAdminAction>
+                  </div>
                   <div
                     className="tw-grid tw-grid-cols-4 tw-gap-4 tw-mb-4"
                     data-testid="data-container">
@@ -607,19 +609,13 @@ const ServicesPage = () => {
                           <div
                             className="tw-flex tw-justify-end"
                             data-testid="service-icon">
-                          {/* {!isNull(serviceTypeLogo(service.serviceType)) && (
-                          <img
-                            alt=""
-                            className="tw-h-10 tw-w-10"
-                            src={serviceTypeLogo(service.serviceType)}
-                          />
-                        )} */}
                             {getServiceLogo(service.serviceType || '')}
                           </div>
                         </div>
                       </div>
                     ))}
                   </div>
+                </>
               ) : (
                 <div className="tw-flex tw-items-center tw-flex-col">
                   <div className="tw-mt-24">

openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx

@@ -44,7 +44,11 @@ import {
 } from '../../generated/api/tags/createTagCategory';
 import { TagCategory, TagClass } from '../../generated/entity/tags/tagCategory';
 import { useAuth } from '../../hooks/authHooks';
-import { getCountBadge, isEven } from '../../utils/CommonUtils';
+import {
+  getActiveCatClass,
+  getCountBadge,
+  isEven,
+} from '../../utils/CommonUtils';
 import SVGIcons from '../../utils/SvgUtils';
 import { getTagCategories, getTaglist } from '../../utils/TagsUtils';
 import Form from './Form';
@@ -93,14 +97,6 @@ const TagsPage = () => {
     }
   };
 
-  const currentCategoryTab = (name: string) => {
-    if (currentCategory?.name === name) {
-      return 'activeCategory';
-    } else {
-      return '';
-    }
-  };
-
   const createCategory = (data: CreateTagCategory) => {
     createTagCategory(data).then((res: AxiosResponse) => {
       if (res.data) {
@@ -180,11 +176,11 @@ const TagsPage = () => {
   const fetchLeftPanel = () => {
     return (
       <>
-        <div className="tw-flex tw-justify-between tw-items-baseline tw-mb-3 tw-border-b">
+        <div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
-          <h6 className="tw-heading">Tag Categories</h6>
+          <h6 className="tw-heading tw-text-base">Tag Categories</h6>
           <NonAdminAction position="bottom" title={TITLE_FOR_NON_ADMIN_ACTION}>
             <Button
-              className={classNames('tw-h-7 tw-px-2', {
+              className={classNames('tw-h-7 tw-px-2 tw-mb-4', {
                 'tw-opacity-40': !isAdminUser && !isAuthDisabled,
               })}
               data-testid="add-category"
@@ -199,15 +195,16 @@ const TagsPage = () => {
         {categories &&
           categories.map((category: TagCategory) => (
             <div
-              className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${currentCategoryTab(
+              className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
-                category.name
+                category.name,
+                currentCategory?.name
               )}`}
               data-testid="side-panel-category"
               key={category.name}
               onClick={() => {
                 fetchCurrentCategory(category.name);
               }}>
-              <p className="tw-text-center tw-self-center tag-category">
+              <p className="tw-text-center tw-self-center tag-category label-category">
                 {category.name}
               </p>
 
@@ -235,7 +232,7 @@ const TagsPage = () => {
               <div data-testid="tags-container">
                 {currentCategory && (
                   <div
-                    className="tw-flex tw-justify-between tw-pl-1"
+                    className="tw-flex tw-justify-between tw-items-center"
                     data-testid="header">
                     <div
                       className="tw-heading tw-text-link tw-text-base"
@@ -246,7 +243,7 @@ const TagsPage = () => {
                       position="bottom"
                       title={TITLE_FOR_NON_ADMIN_ACTION}>
                       <Button
-                        className={classNames('tw-h-8 tw-rounded tw-mb-2', {
+                        className={classNames('tw-h-8 tw-rounded tw-mb-3', {
                           'tw-opacity-40': !isAdminUser && !isAuthDisabled,
                         })}
                         data-testid="add-new-tag-button"
@@ -261,7 +258,9 @@ const TagsPage = () => {
                     </NonAdminAction>
                   </div>
                 )}
-                <div className="tw-mb-3" data-testid="description-container">
+                <div
+                  className="tw-mb-3 tw--ml-5"
+                  data-testid="description-container">
                   <Description
                     description={currentCategory?.description || ''}
                     entityName={currentCategory?.displayName}

openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx

@@ -41,7 +41,7 @@ import { Team } from '../../generated/entity/teams/team';
 import { User } from '../../generated/entity/teams/user';
 import { useAuth } from '../../hooks/authHooks';
 import { UserTeam } from '../../interface/team.interface';
-import { getCountBadge } from '../../utils/CommonUtils';
+import { getActiveCatClass, getCountBadge } from '../../utils/CommonUtils';
 import AddUsersModal from './AddUsersModal';
 import Form from './Form';
 import UserCard from './UserCard';
@@ -143,13 +143,6 @@ const TeamsPage = () => {
     });
   };
 
-  const getCurrentTeamClass = (name: string) => {
-    if (currentTeam?.name === name) {
-      return 'activeCategory';
-    } else {
-      return '';
-    }
-  };
   const getActiveTabClass = (tab: number) => {
     return tab === currentTab ? 'active' : '';
   };
@@ -276,11 +269,11 @@ const TeamsPage = () => {
   const fetchLeftPanel = () => {
     return (
       <>
-        <div className="tw-flex tw-justify-between tw-items-baseline tw-mb-3 tw-border-b">
+        <div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
-          <h6 className="tw-heading">Teams</h6>
+          <h6 className="tw-heading tw-text-base">Teams</h6>
           <NonAdminAction position="bottom" title={TITLE_FOR_NON_ADMIN_ACTION}>
             <Button
-              className={classNames('tw-h-7 tw-px-2', {
+              className={classNames('tw-h-7 tw-px-2 tw-mb-4', {
                 'tw-opacity-40': !isAdminUser && !isAuthDisabled,
               })}
               data-testid="add-teams"
@@ -295,14 +288,15 @@ const TeamsPage = () => {
         {teams &&
           teams.map((team: Team) => (
             <div
-              className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getCurrentTeamClass(
+              className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
-                team.name
+                team.name,
+                currentTeam?.name
               )}`}
               key={team.name}
               onClick={() => {
                 changeCurrentTeam(team.name);
               }}>
-              <p className="tw-text-center tag-category tw-self-center">
+              <p className="tw-text-center tag-category label-category tw-self-center">
                 {team.displayName}
               </p>
             </div>
@@ -382,7 +376,7 @@ const TeamsPage = () => {
                 {teams.length > 0 ? (
                   <>
                     <div
-                      className="tw-flex tw-justify-between tw-pl-1"
+                      className="tw-flex tw-justify-between tw-items-center"
                       data-testid="header">
                       <div className="tw-heading tw-text-link tw-text-base">
                         {currentTeam?.displayName}
@@ -391,7 +385,7 @@ const TeamsPage = () => {
                         position="bottom"
                         title={TITLE_FOR_NON_ADMIN_ACTION}>
                         <Button
-                          className={classNames('tw-h-8 tw-rounded tw-mb-2', {
+                          className={classNames('tw-h-8 tw-rounded tw-mb-3', {
                             'tw-opacity-40': !isAdminUser && !isAuthDisabled,
                           })}
                           data-testid="add-new-user-button"
@@ -404,7 +398,7 @@ const TeamsPage = () => {
                       </NonAdminAction>
                     </div>
                     <div
-                      className="tw-mb-3"
+                      className="tw-mb-3 tw--ml-5"
                       data-testid="description-container">
                       <Description
                         description={currentTeam?.description || ''}

openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css

@@ -232,8 +232,8 @@
     @apply tw-border-b tw-border-separator;
   }
 
-  .side-panel .activeCategory .tag-category {
+  .activeCategory .label-category {
-    @apply tw-text-primary tw-font-medium;
+    @apply tw-text-primary;
   }
 
   .custom-checkbox {

openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx

@@ -274,3 +274,7 @@ export const getOwnerIds = (
     return [getCurrentUserId()];
   }
 };
+
+export const getActiveCatClass = (name: string, activeName = '') => {
+  return activeName === name ? 'activeCategory' : '';
+};