From 464181f074a33308f1186f1a2de92497f7125c49 Mon Sep 17 00:00:00 2001
From: darth-coder00 <86726556+darth-coder00@users.noreply.github.com>
Date: Mon, 10 Jan 2022 18:09:05 +0530
Subject: [PATCH] Fix: Flashy Popover, uneven UI for Tags, Teams and Services
 page (#2132)

---
 .../src/components/common/popover/PopOver.tsx |   4 +
 .../components/common/popover/PopOverTypes.ts |   2 +
 .../resources/ui/src/pages/services/index.tsx | 326 +++++++++---------
 .../resources/ui/src/pages/tags/index.tsx     |  35 +-
 .../resources/ui/src/pages/teams/index.tsx    |  28 +-
 .../main/resources/ui/src/styles/tailwind.css |   4 +-
 .../resources/ui/src/utils/CommonUtils.tsx    |   4 +
 7 files changed, 201 insertions(+), 202 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOver.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOver.tsx
index f3cb75a0e6b..043e025cf4a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOver.tsx
+++ b/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}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOverTypes.ts b/openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOverTypes.ts
index 0da448c8838..5a8959c94ca 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/popover/PopOverTypes.ts
+++ b/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;
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
index 2671520501a..558bd870581 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
+++ b/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,174 +487,135 @@ const ServicesPage = () => {
   return (
     <>
       {!isLoading ? (
-        <PageContainerV1 className="tw-pt-1">
-          <PageLayout>
+        <PageContainerV1 className="tw-pt-4">
+          <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-grid tw-grid-cols-4 tw-gap-4 tw-mb-4"
-                  data-testid="data-container">
-                  {serviceList.map((service, index) => (
+                <>
+                  <div
+                    className="tw-flex tw-justify-between"
+                    data-testid="header">
                     <div
-                      className="tw-card tw-flex tw-py-2 tw-px-3 tw-justify-between tw-text-grey-muted"
-                      key={index}>
-                      <div className="tw-flex-auto">
-                        <Link
-                          to={getServiceDetailsPath(
-                            service.name,
-                            service.serviceType || '',
-                            serviceName
-                          )}>
-                          <button>
-                            <h6
-                              className="tw-text-base tw-text-grey-body tw-font-medium"
-                              data-testid={`service-name-${service.name}`}>
-                              {service.name}
-                            </h6>
-                          </button>
-                        </Link>
-                        <div
-                          className="tw-text-grey-body tw-pb-1 tw-break-all description-text"
-                          data-testid="service-description">
-                          {service.description ? (
-                            <RichTextEditorPreviewer
-                              markdown={service.description}
-                            />
-                          ) : (
-                            <span className="tw-no-description">
-                              No description added
-                            </span>
-                          )}
-                        </div>
-                        {getOptionalFields(service)}
-                        <div
-                          className="tw-mb-1"
-                          data-testid="service-ingestion">
-                          <label className="tw-mb-0">Ingestion:</label>
-                          <span className=" tw-ml-1 tw-font-normal tw-text-grey-body">
-                            {service.ingestionSchedule?.repeatFrequency
-                              ? getFrequencyTime(
-                                  service.ingestionSchedule.repeatFrequency
-                                )
-                              : '--'}
-                          </span>
-                        </div>
-                        <div className="" data-testid="service-type">
-                          <label className="tw-mb-0">Type:</label>
-                          <span className=" tw-ml-1 tw-font-normal tw-text-grey-body">
-                            {service.serviceType}
-                          </span>
-                        </div>
-                      </div>
-                      <div className="tw-flex tw-flex-col tw-justify-between tw-flex-none">
-                        <div className="tw-flex tw-justify-end">
-                          <NonAdminAction
-                            position="top"
-                            title={TITLE_FOR_NON_ADMIN_ACTION}>
-                            <button
-                              className="tw-pr-3 focus:tw-outline-none"
-                              data-testid={`edit-service-${service.name}`}
-                              onClick={() => handleEdit(service)}>
-                              <SVGIcons
-                                alt="edit"
-                                icon="icon-edit"
-                                title="Edit"
-                                width="12px"
-                              />
-                            </button>
-                          </NonAdminAction>
-                          <NonAdminAction
-                            position="top"
-                            title={TITLE_FOR_NON_ADMIN_ACTION}>
-                            <button
-                              className="focus:tw-outline-none"
-                              data-testid={`delete-service-${service.name}`}
-                              onClick={() =>
-                                ConfirmDelete(service.id || '', service.name)
-                              }>
-                              <SVGIcons
-                                alt="delete"
-                                icon="icon-delete"
-                                title="Delete"
-                                width="12px"
-                              />
-                            </button>
-                          </NonAdminAction>
-                        </div>
-                        <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>
+                      className="tw-heading tw-text-link tw-text-base"
+                      data-testid="service-name">
+                      {servicesDisplayName[serviceName]}
                     </div>
-                  ))}
-                </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">
+                    {serviceList.map((service, index) => (
+                      <div
+                        className="tw-card tw-flex tw-py-2 tw-px-3 tw-justify-between tw-text-grey-muted"
+                        key={index}>
+                        <div className="tw-flex-auto">
+                          <Link
+                            to={getServiceDetailsPath(
+                              service.name,
+                              service.serviceType || '',
+                              serviceName
+                            )}>
+                            <button>
+                              <h6
+                                className="tw-text-base tw-text-grey-body tw-font-medium"
+                                data-testid={`service-name-${service.name}`}>
+                                {service.name}
+                              </h6>
+                            </button>
+                          </Link>
+                          <div
+                            className="tw-text-grey-body tw-pb-1 tw-break-all description-text"
+                            data-testid="service-description">
+                            {service.description ? (
+                              <RichTextEditorPreviewer
+                                markdown={service.description}
+                              />
+                            ) : (
+                              <span className="tw-no-description">
+                                No description added
+                              </span>
+                            )}
+                          </div>
+                          {getOptionalFields(service)}
+                          <div
+                            className="tw-mb-1"
+                            data-testid="service-ingestion">
+                            <label className="tw-mb-0">Ingestion:</label>
+                            <span className=" tw-ml-1 tw-font-normal tw-text-grey-body">
+                              {service.ingestionSchedule?.repeatFrequency
+                                ? getFrequencyTime(
+                                    service.ingestionSchedule.repeatFrequency
+                                  )
+                                : '--'}
+                            </span>
+                          </div>
+                          <div className="" data-testid="service-type">
+                            <label className="tw-mb-0">Type:</label>
+                            <span className=" tw-ml-1 tw-font-normal tw-text-grey-body">
+                              {service.serviceType}
+                            </span>
+                          </div>
+                        </div>
+                        <div className="tw-flex tw-flex-col tw-justify-between tw-flex-none">
+                          <div className="tw-flex tw-justify-end">
+                            <NonAdminAction
+                              position="top"
+                              title={TITLE_FOR_NON_ADMIN_ACTION}>
+                              <button
+                                className="tw-pr-3 focus:tw-outline-none"
+                                data-testid={`edit-service-${service.name}`}
+                                onClick={() => handleEdit(service)}>
+                                <SVGIcons
+                                  alt="edit"
+                                  icon="icon-edit"
+                                  title="Edit"
+                                  width="12px"
+                                />
+                              </button>
+                            </NonAdminAction>
+                            <NonAdminAction
+                              position="top"
+                              title={TITLE_FOR_NON_ADMIN_ACTION}>
+                              <button
+                                className="focus:tw-outline-none"
+                                data-testid={`delete-service-${service.name}`}
+                                onClick={() =>
+                                  ConfirmDelete(service.id || '', service.name)
+                                }>
+                                <SVGIcons
+                                  alt="delete"
+                                  icon="icon-delete"
+                                  title="Delete"
+                                  width="12px"
+                                />
+                              </button>
+                            </NonAdminAction>
+                          </div>
+                          <div
+                            className="tw-flex tw-justify-end"
+                            data-testid="service-icon">
+                            {getServiceLogo(service.serviceType || '')}
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </>
               ) : (
                 <div className="tw-flex tw-items-center tw-flex-col">
                   <div className="tw-mt-24">
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
index d7c4b1c4b23..a7ad9e794e9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
+++ b/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">
-          <h6 className="tw-heading">Tag Categories</h6>
+        <div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
+          <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(
-                category.name
+              className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
+                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}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx
index 60ed2efe345..81c08ef75da 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx
+++ b/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">
-          <h6 className="tw-heading">Teams</h6>
+        <div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
+          <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(
-                team.name
+              className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
+                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 || ''}
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css b/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css
index d4e923c32d8..e431a0cb0e7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css
+++ b/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 {
-    @apply tw-text-primary tw-font-medium;
+  .activeCategory .label-category {
+    @apply tw-text-primary;
   }
 
   .custom-checkbox {
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 29bada3f7fd..3e1581b82c7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx
+++ b/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' : '';
+};