From 6a85b34e3cb71b0d041fb4662b29fc5cf2887139 Mon Sep 17 00:00:00 2001
From: Aniket Katkar <51777795+aniketkatkar97@users.noreply.github.com>
Date: Fri, 26 Aug 2022 14:14:08 +0530
Subject: [PATCH] Fix #6893 : UI improvements and bug fixes 1 (#6934)

* Fix #6893 : UI improvements and bug fixes

* Fixed failing unit tests

* worked on comments to make common styling for left panel
---
 .../ui/src/assets/svg/service-icon-mlflow.svg | 11 ++++
 .../DatasetDetails.component.tsx              |  7 ++-
 .../components/Explore/Explore.component.tsx  | 62 +++++++++----------
 .../GlobalSetting/GlobalSetting.less          |  4 +-
 .../GlobalSetting/GlobalSettingLeftPanel.tsx  |  2 +-
 .../Ingestion/Ingestion.component.tsx         | 40 ++++++++----
 .../MlModelDetail/MlModelFeaturesList.tsx     |  3 +-
 .../TableProfiler/TableProfilerV1.test.tsx    |  3 +
 .../TableProfiler/TableProfilerV1.tsx         | 36 ++++++-----
 .../ui/src/constants/services.const.ts        |  2 +-
 .../resources/ui/src/pages/tags/index.tsx     |  1 +
 .../main/resources/ui/src/styles/x-master.css | 18 +++++-
 12 files changed, 119 insertions(+), 70 deletions(-)
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/service-icon-mlflow.svg

diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/service-icon-mlflow.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/service-icon-mlflow.svg
new file mode 100644
index 00000000000..575781a05b4
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/service-icon-mlflow.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_10915_12970)">
+<path d="M11.8832 0.00221789C9.63958 0.032185 7.44898 0.688287 5.55832 1.89656C3.66766 3.10483 2.15211 4.81723 1.18253 6.8407C0.212951 8.86417 -0.172104 11.1183 0.0707742 13.3488C0.313652 15.5794 1.1748 17.6978 2.55715 19.4652L6.22515 16.7712C5.33384 15.6639 4.77219 14.328 4.60444 12.9164C4.4367 11.5049 4.66963 10.0746 5.2766 8.78918C5.88357 7.50377 6.84007 6.41516 8.03669 5.64784C9.23331 4.88052 10.6217 4.46549 12.0432 4.45022V7.31722L15.4972 4.74722L18.9512 2.17722C16.8825 0.726987 14.4093 -0.0340918 11.8832 0.00221789Z" fill="#6CC6E9"/>
+<path d="M21.4487 4.53516L17.7807 7.23016C18.6723 8.3375 19.2342 9.67345 19.4021 11.0852C19.57 12.4969 19.3371 13.9274 18.7301 15.213C18.1231 16.4986 17.1665 17.5873 15.9697 18.3547C14.7729 19.122 13.3843 19.537 11.9627 19.5522V16.6852L5.05469 21.8252C7.41966 23.4789 10.2997 24.2287 13.1709 23.9381C16.0421 23.6475 18.7135 22.3357 20.6991 20.2416C22.6847 18.1475 23.8525 15.4101 23.9901 12.5276C24.1277 9.64502 23.2258 6.80887 21.4487 4.53516Z" fill="#4192DC"/>
+</g>
+<defs>
+<clipPath id="clip0_10915_12970">
+<rect width="24.0038" height="23.9984" fill="white" transform="translate(0 0.000976562)"/>
+</clipPath>
+</defs>
+</svg>
diff --git 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
index f17b9c1ef41..1b10da5927a 100644
--- 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
@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { Empty } from 'antd';
 import classNames from 'classnames';
 import { isEqual, isNil, isUndefined } from 'lodash';
 import { ColumnJoins, EntityTags, ExtraInfo } from 'Models';
@@ -709,7 +710,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
               )}
               {activeTab === 4 && (
                 <div
-                  className="tw-py-4 tw-px-7 tw-grid tw-grid-cols-3 entity-feed-list"
+                  className="tw-p-2 tw-grid tw-grid-cols-3 entity-feed-list"
                   id="tablequeries">
                   {!isUndefined(tableQueries) && tableQueries.length > 0 ? (
                     <Fragment>
@@ -722,9 +723,9 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
                     </Fragment>
                   ) : (
                     <div
-                      className="tw-mt-4 tw-ml-4 tw-flex tw-justify-center tw-font-medium tw-items-center tw-border tw-border-main tw-rounded-md tw-p-8 tw-col-span-3"
+                      className="tw-flex tw-justify-center tw-font-medium tw-items-center tw-border tw-border-main tw-rounded-md tw-p-8 tw-col-span-3"
                       data-testid="no-queries">
-                      <span>No queries data available.</span>
+                      <Empty description={<p>No queries data available</p>} />
                     </div>
                   )}
                 </div>
diff --git 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
index fd486af738d..ab7d448097a 100644
--- 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
@@ -669,38 +669,36 @@ const Explore: React.FC<ExploreProps> = ({
 
   const fetchLeftPanel = () => {
     return (
-      <div className="tw-h-full">
-        <Card
-          data-testid="data-summary-container"
-          style={{ ...leftPanelAntCardStyle, marginTop: '16px' }}>
-          <Fragment>
-            <div className="tw-w-64 tw-mr-5 tw-flex-shrink-0">
-              <Button
-                className={classNames('tw-underline tw-pb-4')}
-                disabled={!getFilterCount(filters)}
-                size="custom"
-                theme="primary"
-                variant="link"
-                onClick={() => resetFilters(true)}>
-                Clear All
-              </Button>
-            </div>
-            <div className="tw-filter-seperator" />
-            {!error && (
-              <FacetFilter
-                aggregations={getAggrWithDefaultValue(
-                  aggregations,
-                  visibleFilters
-                )}
-                filters={getFacetedFilter()}
-                showDeletedOnly={showDeleted}
-                onSelectDeleted={handleShowDeleted}
-                onSelectHandler={handleSelectedFilter}
-              />
-            )}
-          </Fragment>
-        </Card>
-      </div>
+      <Card
+        data-testid="data-summary-container"
+        style={{ ...leftPanelAntCardStyle, marginTop: '16px', height: '98%' }}>
+        <Fragment>
+          <div className="tw-w-64 tw-mr-5 tw-flex-shrink-0">
+            <Button
+              className={classNames('tw-underline tw-pb-4')}
+              disabled={!getFilterCount(filters)}
+              size="custom"
+              theme="primary"
+              variant="link"
+              onClick={() => resetFilters(true)}>
+              Clear All
+            </Button>
+          </div>
+          <div className="tw-filter-seperator" />
+          {!error && (
+            <FacetFilter
+              aggregations={getAggrWithDefaultValue(
+                aggregations,
+                visibleFilters
+              )}
+              filters={getFacetedFilter()}
+              showDeletedOnly={showDeleted}
+              onSelectDeleted={handleShowDeleted}
+              onSelectHandler={handleSelectedFilter}
+            />
+          )}
+        </Fragment>
+      </Card>
     );
   };
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.less b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.less
index 97597c6663e..82d94f30ba6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.less
@@ -19,9 +19,7 @@
 
 .global-setting-left-panel.ant-menu-root.ant-menu-inline {
   background: @background-color;
-  border: 1px solid @left-panel-border-color;
-  border-radius: 4px;
-  box-shadow: 1px 1px 8px @box-shadow-color;
+  border: 0px;
   overflow: hidden;
 
   .ant-menu-item::after {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSettingLeftPanel.tsx b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSettingLeftPanel.tsx
index a3049a956bc..f69b5a1d67d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSettingLeftPanel.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSettingLeftPanel.tsx
@@ -55,7 +55,7 @@ const GlobalSettingLeftPanel = () => {
   };
 
   return (
-    <div className="tw-mx-1">
+    <div className="tw-mx-1 left-panel-container">
       <Menu
         className="global-setting-left-panel"
         items={items}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx
index 8b51d6f4d44..32ae47333c7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx
@@ -13,12 +13,12 @@
 
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button } from 'antd';
+import { Button, Empty } from 'antd';
 import classNames from 'classnames';
 import cronstrue from 'cronstrue';
 import { capitalize, isNil, lowerCase, startCase } from 'lodash';
 import React, { Fragment, useCallback, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import { useAuthContext } from '../../authentication/auth-provider/AuthProvider';
 import {
   PAGE_SIZE,
@@ -630,17 +630,31 @@ const Ingestion: React.FC<IngestionProps> = ({
             )}
           </div>
         ) : (
-          <div className="tw-flex tw-items-center tw-flex-col">
-            {isRequiredDetailsAvailable && ingestionList.length === 0 && (
-              <div className="tw-mt-24">
-                <p className="tw-text-lg tw-text-center">
-                  {`No ingestion workflows found ${
-                    searchText ? `for "${searchText}"` : ''
-                  }`}
-                </p>
-              </div>
-            )}
-          </div>
+          isRequiredDetailsAvailable &&
+          ingestionList.length === 0 && (
+            <div className="tw-border tw-border-main tw-rounded-md tw-mt-2 tw-p-8 tw-w-full tw-bg-white">
+              <Empty
+                description={
+                  <>
+                    <p>No ingestion data available</p>
+                    <p className="tw-mt-2">
+                      To view Ingestion Data, run the MetaData Ingestion. Please
+                      refer to this doc to schedule the{' '}
+                      <Link
+                        className="tw-ml-1"
+                        target="_blank"
+                        to={{
+                          pathname:
+                            'https://docs.open-metadata.org/openmetadata/ingestion/workflows/metadata',
+                        }}>
+                        MetaData Ingestion
+                      </Link>
+                    </p>
+                  </>
+                }
+              />
+            </div>
+          )
         )}
       </div>
     );
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelFeaturesList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelFeaturesList.tsx
index 8936060d157..5fc9db7f729 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelFeaturesList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelFeaturesList.tsx
@@ -12,6 +12,7 @@
  */
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Empty } from 'antd';
 import classNames from 'classnames';
 import { isEmpty, uniqueId } from 'lodash';
 import { EntityTags, TagOption } from 'Models';
@@ -351,7 +352,7 @@ const MlModelFeaturesList: FC<MlModelFeaturesListProp> = ({
     } else {
       return (
         <div className="tw-flex tw-justify-center tw-font-medium tw-items-center tw-border tw-border-main tw-rounded-md tw-p-8">
-          No features data available
+          <Empty description={<p>No features data available</p>} />
         </div>
       );
     }
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.test.tsx
index 3295f636fb3..5ded40bd256 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.test.tsx
@@ -49,6 +49,9 @@ jest.mock('antd', () => ({
     .mockImplementation(({ children, ...props }) => (
       <div {...props}>{children}</div>
     )),
+  Empty: jest
+    .fn()
+    .mockImplementation(({ description }) => <div>{description}</div>),
 }));
 
 // mock internel imports
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx
index dde41ba0bae..8df4eb6e6ca 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Button, Col, Row } from 'antd';
+import { Button, Col, Empty, Row } from 'antd';
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
 import { isEmpty, isUndefined } from 'lodash';
@@ -126,21 +126,27 @@ const TableProfilerV1: FC<TableProfilerProps> = ({ table, onAddTestClick }) => {
   if (isUndefined(profile)) {
     return (
       <div
-        className="tw-mt-4 tw-ml-4 tw-flex tw-justify-center tw-font-medium tw-items-center tw-border tw-border-main tw-rounded-md tw-p-8"
+        className=" tw-m-2 tw-flex tw-justify-center tw-font-medium tw-items-center tw-border tw-border-main tw-rounded-md tw-p-8"
         data-testid="no-profiler-placeholder-container">
-        <span>
-          Data Profiler is an optional configuration in Ingestion. Please enable
-          the data profiler by following the documentation
-        </span>
-        <Link
-          className="tw-ml-1"
-          target="_blank"
-          to={{
-            pathname:
-              'https://docs.open-metadata.org/openmetadata/ingestion/workflows/profiler',
-          }}>
-          here.
-        </Link>
+        <Empty
+          description={
+            <p>
+              <span>
+                Data Profiler is an optional configuration in Ingestion. Please
+                enable the data profiler by following the documentation
+              </span>
+              <Link
+                className="tw-ml-1"
+                target="_blank"
+                to={{
+                  pathname:
+                    'https://docs.open-metadata.org/openmetadata/ingestion/workflows/profiler',
+                }}>
+                here.
+              </Link>
+            </p>
+          }
+        />
       </div>
     );
   }
diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/services.const.ts b/openmetadata-ui/src/main/resources/ui/src/constants/services.const.ts
index 88f061f4a2a..3a14e94ec4e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/constants/services.const.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/constants/services.const.ts
@@ -34,7 +34,6 @@ import kafka from '../assets/img/service-icon-kafka.png';
 import looker from '../assets/img/service-icon-looker.png';
 import mariadb from '../assets/img/service-icon-mariadb.png';
 import metabase from '../assets/img/service-icon-metabase.png';
-import mlflow from '../assets/img/service-icon-mlflow.png';
 import mode from '../assets/img/service-icon-mode.png';
 import mssql from '../assets/img/service-icon-mssql.png';
 import oracle from '../assets/img/service-icon-oracle.png';
@@ -61,6 +60,7 @@ import dashboardDefault from '../assets/svg/dashboard.svg';
 import iconDefaultService from '../assets/svg/default-service-icon.svg';
 import pipelineDefault from '../assets/svg/pipeline.svg';
 import plus from '../assets/svg/plus.svg';
+import mlflow from '../assets/svg/service-icon-mlflow.svg';
 import topicDefault from '../assets/svg/topic.svg';
 import { ServiceCategory } from '../enums/service.enum';
 import { DashboardServiceType } from '../generated/entity/services/dashboardService';
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 bcbe4c1cb7c..8e234df2fad 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
@@ -415,6 +415,7 @@ const TagsPage = () => {
   const fetchLeftPanel = () => {
     return (
       <Card
+        className="left-panel-container"
         data-testid="data-summary-container"
         size="small"
         style={leftPanelAntCardStyle}
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css b/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
index a05e416bbfe..50cae34636d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
@@ -782,11 +782,12 @@ body .profiler-graph .recharts-active-dot circle {
   height: calc(100vh - 110px);
 }
 
+/* 64 header + ( 16 + 16 )spacing Y = 96*/
 #left-panel {
   position: fixed;
   overflow-y: scroll;
   width: 304px;
-  height: calc(100vh - 90px);
+  height: calc(100vh - 96px);
 }
 
 #right-panel {
@@ -1330,3 +1331,18 @@ div.ant-typography-ellipsis-custom {
 .ant-switch-checked {
   background: rgb(244, 240, 253);
 }
+
+/* 64 header + ( 16 + 16 )spacing Y = 96*/
+.left-panel-container {
+  height: calc(100vh - 96px);
+  border: 1px solid rgb(229, 231, 235);
+  border-radius: 4px;
+  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.06);
+  overflow-y: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.left-panel-container::-webkit-scrollbar {
+  display: none;
+}