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

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>

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>

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

@@ -669,10 +669,9 @@ const Explore: React.FC<ExploreProps> = ({
 
   const fetchLeftPanel = () => {
     return (
-      <div className="tw-h-full">
       <Card
         data-testid="data-summary-container"
-          style={{ ...leftPanelAntCardStyle, marginTop: '16px' }}>
+        style={{ ...leftPanelAntCardStyle, marginTop: '16px', height: '98%' }}>
         <Fragment>
           <div className="tw-w-64 tw-mr-5 tw-flex-shrink-0">
             <Button
@@ -700,7 +699,6 @@ const Explore: React.FC<ExploreProps> = ({
           )}
         </Fragment>
       </Card>
-      </div>
     );
   };
 

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 {

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}

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}"` : ''
-                  }`}
+          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>
+          )
         )}
       </div>
     );

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>
       );
     }

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

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,11 +126,14 @@ 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">
+        <Empty
+          description={
+            <p>
               <span>
-          Data Profiler is an optional configuration in Ingestion. Please enable
-          the data profiler by following the documentation
+                Data Profiler is an optional configuration in Ingestion. Please
+                enable the data profiler by following the documentation
               </span>
               <Link
                 className="tw-ml-1"
@@ -141,6 +144,9 @@ const TableProfilerV1: FC<TableProfilerProps> = ({ table, onAddTestClick }) => {
                 }}>
                 here.
               </Link>
+            </p>
+          }
+        />
       </div>
     );
   }

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';

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}

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;
+}