Style : Changing some styles on explore page. (#1515)

* Style : Changing some styles on explore page.

* Move PageContainerV1  from exploreComponent to ExplorePageComponent.

openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx

@@ -19,7 +19,13 @@ import {
   FormatedTableData,
   SearchResponse,
 } from 'Models';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  Fragment,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { Button } from '../../components/buttons/Button/Button';
 import ErrorPlaceHolderES from '../../components/common/error-with-placeholder/ErrorPlaceHolderES';
@@ -51,7 +57,6 @@ import { getCountBadge } from '../../utils/CommonUtils';
 import { getFilterString } from '../../utils/FilterUtils';
 import { dropdownIcon as DropDownIcon } from '../../utils/svgconstant';
 import SVGIcons from '../../utils/SvgUtils';
-import PageContainerV1 from '../containers/PageContainerV1';
 import PageLayout from '../containers/PageLayout';
 import { ExploreProps } from './explore.interface';
 
@@ -344,18 +349,18 @@ const Explore: React.FC<ExploreProps> = ({
     });
   };
 
-  const getTabCount = (index: string, className = '') => {
+  const getTabCount = (index: string, isActive: boolean, className = '') => {
     switch (index) {
       case SearchIndex.TABLE:
-        return getCountBadge(tabCounts.table, className);
+        return getCountBadge(tabCounts.table, className, isActive);
       case SearchIndex.TOPIC:
-        return getCountBadge(tabCounts.topic, className);
+        return getCountBadge(tabCounts.topic, className, isActive);
       case SearchIndex.DASHBOARD:
-        return getCountBadge(tabCounts.dashboard, className);
+        return getCountBadge(tabCounts.dashboard, className, isActive);
       case SearchIndex.PIPELINE:
-        return getCountBadge(tabCounts.pipeline, className);
+        return getCountBadge(tabCounts.pipeline, className, isActive);
       case SearchIndex.DBT_MODEL:
-        return getCountBadge(tabCounts.dbtModel, className);
+        return getCountBadge(tabCounts.dbtModel, className, isActive);
       default:
         return getCountBadge();
     }
@@ -394,16 +399,7 @@ const Explore: React.FC<ExploreProps> = ({
                   icon={tabDetail.icon}
                 />
                 {tabDetail.label}
-                {getTabCount(
-                  tabDetail.index,
-                  classNames(
-                    { 'tw-bg-tag': tabDetail.tab !== currentTab },
-                    {
-                      'tw-bg-primary tw-text-white tw-border-none':
-                        tabDetail.tab === currentTab,
-                    }
-                  )
-                )}
+                {getTabCount(tabDetail.index, tabDetail.tab === currentTab)}
               </button>
             ))}
           </div>
@@ -509,7 +505,7 @@ const Explore: React.FC<ExploreProps> = ({
   };
 
   return (
-    <PageContainerV1>
+    <Fragment>
       {!connectionError && getTabs()}
       <PageLayout
         leftPanel={Boolean(!error) && fetchLeftPanel()}
@@ -528,7 +524,7 @@ const Explore: React.FC<ExploreProps> = ({
           />
         )}
       </PageLayout>
-    </PageContainerV1>
+    </Fragment>
   );
 };
 

openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FilterContainer.tsx

@@ -49,16 +49,7 @@ const FilterContainer: FunctionComponent<FilterContainerProp> = ({
           {name.startsWith('Tier.Tier') ? name.split('.')[1] : name}
         </div>
       </div>
-      {getCountBadge(
-        count,
-        classNames(
-          'tw-text-center tw-py-0 tw-px-0',
-          { 'tw-bg-tag': !isSelected },
-          {
-            'tw-bg-primary tw-text-white tw-border-none': isSelected,
-          }
-        )
-      )}
+      {getCountBadge(count, classNames('tw-py-0 tw-px-0'), isSelected)}
     </div>
   );
 };

openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCardBody.tsx

@@ -101,8 +101,12 @@ const TableDataCardBody: FunctionComponent<Props> = ({
       {Boolean(tags?.length) && (
         <div className="tw-mt-4" data-testid="tags-container">
           <hr className="tw--mx-3 tw-pt-2" />
-          <div className="tw-flex">
-            <SVGIcons alt="icon-tag" icon="icon-tag" />
+          <div className="tw-flex tw-relative">
+            <SVGIcons
+              alt="icon-tag"
+              className="tw-absolute tw-top-1.5"
+              icon="icon-tag"
+            />
             <div className="tw-ml-2">
               {tags?.map((tag, index) => (
                 <Tag

openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx

@@ -17,6 +17,7 @@ import React, { FunctionComponent, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import AppState from '../../AppState';
 import { searchData } from '../../axiosAPIs/miscAPI';
+import PageContainerV1 from '../../components/containers/PageContainerV1';
 import Explore from '../../components/Explore/Explore.component';
 import {
   ExploreSearchData,
@@ -253,30 +254,32 @@ const ExplorePage: FunctionComponent = () => {
       {isLoading || isLoadingForData ? (
         <Loader />
       ) : (
-        <Explore
-          error={error}
-          fetchCount={fetchCounts}
-          fetchData={fetchData}
-          handlePathChange={handlePathChange}
-          handleSearchText={handleSearchText}
-          searchQuery={searchQuery}
-          searchResult={searchResult}
-          searchText={searchText}
-          sortValue={initialSortField}
-          tab={tab}
-          tabCounts={{
-            table: tableCount,
-            topic: topicCount,
-            dashboard: dashboardCount,
-            pipeline: pipelineCount,
-            dbtModel: dbtModelCount,
-          }}
-          updateDashboardCount={handleDashboardCount}
-          updateDbtModelCount={handleDbtModelCount}
-          updatePipelineCount={handlePipelineCount}
-          updateTableCount={handleTableCount}
-          updateTopicCount={handleTopicCount}
-        />
+        <PageContainerV1>
+          <Explore
+            error={error}
+            fetchCount={fetchCounts}
+            fetchData={fetchData}
+            handlePathChange={handlePathChange}
+            handleSearchText={handleSearchText}
+            searchQuery={searchQuery}
+            searchResult={searchResult}
+            searchText={searchText}
+            sortValue={initialSortField}
+            tab={tab}
+            tabCounts={{
+              table: tableCount,
+              topic: topicCount,
+              dashboard: dashboardCount,
+              pipeline: pipelineCount,
+              dbtModel: dbtModelCount,
+            }}
+            updateDashboardCount={handleDashboardCount}
+            updateDbtModelCount={handleDbtModelCount}
+            updatePipelineCount={handlePipelineCount}
+            updateTableCount={handleTableCount}
+            updateTopicCount={handleTopicCount}
+          />
+        </PageContainerV1>
       )}
     </>
   );

openmetadata-ui/src/main/resources/ui/src/styles/x-master.css

@@ -751,8 +751,32 @@ body .profiler-graph .recharts-active-dot circle {
 }
 #center {
   grid-area: centerarea;
+  overflow-y: auto;
 }
 
+/* Hide scrollbar for Chrome, Safari and Opera */
+/* #center::-webkit-scrollbar,
+#left-panel::-webkit-scrollbar,
+#right-panel::-webkit-scrollbar {
+  display: none;
+  width: 4px;
+} */
+/* #center::-webkit-scrollbar-track {
+  background: #f8f9fa;
+}
+#center::-webkit-scrollbar-thumb {
+  background: #aaa;
+  border-radius: 12px;
+} */
+
+/* Hide scrollbar for IE, Edge and Firefox */
+/* #center,
+#left-panel,
+#right-panel {
+  -ms-overflow-style: none;
+  scrollbar-width: 4px;
+} */
+
 .page-layout-container {
   display: grid;
   grid-template-columns: 256px auto 256px;

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

@@ -12,7 +12,7 @@
  */
 
 import classNames from 'classnames';
-import { isEmpty } from 'lodash';
+import { isEmpty, isUndefined } from 'lodash';
 import {
   RecentlySearchData,
   RecentlyViewed,
@@ -129,11 +129,22 @@ export const getTabClasses = (
   return 'tw-gh-tabs' + (activeTab === tab ? ' active' : '');
 };
 
-export const getCountBadge = (count = 0, className = '') => {
+export const getCountBadge = (
+  count = 0,
+  className = '',
+  isActive?: boolean
+) => {
+  const clsBG = isUndefined(isActive)
+    ? ''
+    : isActive
+    ? 'tw-bg-primary tw-text-white tw-border-none'
+    : 'tw-bg-badge';
+
   return (
     <span
       className={classNames(
-        'tw-py-0.5 tw-px-1 tw-ml-1 tw-border tw-rounded tw-text-xs tw-min-w-badgeCount',
+        'tw-py-px tw-px-1 tw-ml-1 tw-border tw-rounded tw-text-xs tw-min-w-badgeCount tw-text-center',
+        clsBG,
         className
       )}>
       <span data-testid="filter-count">{count}</span>

openmetadata-ui/src/main/resources/ui/tailwind.config.js

@@ -40,6 +40,7 @@ const statusQueued = '#777777';
 const bodyBG = '#F8F9FA';
 const bodyHoverBG = '#F9F8FD';
 const tagBG = '#EEEAF8';
+const badgeBG = '#D5D8DC';
 const primaryBG = '#7147E840'; // 'rgba(113, 71, 232, 0.25)';
 const backdropBG = '#302E36';
 
@@ -93,6 +94,7 @@ module.exports = {
         'body-main': bodyBG,
         'body-hover': bodyHoverBG,
         tag: tagBG,
+        badge: badgeBG,
         success: success,
         error: error,
         warning: warning,