From 9b588c998a50c2c902f15190c7a53ff57a4b019c Mon Sep 17 00:00:00 2001
From: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Date: Mon, 27 Jun 2022 22:32:24 +0530
Subject: [PATCH] Fixed: Fixed service and services page issue and other miner
 fixes (#5669)

* Fixed service and services page issue and other miner fixes

* fixed failing unit test
---
 .../EntityLineage/EntityLineage.component.tsx | 90 +++++++++----------
 .../Entitylineage.component.test.tsx          | 27 +++++-
 .../ServiceConfig/ServiceConfig.tsx           |  5 ++
 .../components/TeamDetails/TeamDetails.tsx    |  4 +-
 .../common/description/Description.tsx        | 43 ++++++---
 .../title-breadcrumb.component.tsx            |  2 +-
 .../resources/ui/src/constants/constants.ts   |  3 +
 .../resources/ui/src/pages/service/index.tsx  |  4 +-
 .../resources/ui/src/pages/services/index.tsx | 12 +--
 9 files changed, 116 insertions(+), 74 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx
index 25f70394338..b0d507a5732 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx
@@ -1280,60 +1280,56 @@ const Entitylineage: FunctionComponent<EntityLineageProp> = ({
     }
   }, [entityLineage]);
 
-  if (isLoading) {
+  if (isLoading || (nodes.length === 0 && !deleted)) {
     return <Loader />;
   }
 
   return deleted ? (
     getDeletedLineagePlaceholder()
   ) : (
-    <Fragment>
-      <div
-        className={classNames(
-          'tw-relative tw-h-full tw--ml-4 tw--mr-7 tw--mt-4'
-        )}
-        data-testid="lineage-container">
-        <div className="tw-w-full tw-h-full" ref={reactFlowWrapper}>
-          <ReactFlowProvider>
-            <ReactFlow
-              data-testid="react-flow-component"
-              edgeTypes={{ buttonedge: CustomEdge }}
-              edges={edges}
-              maxZoom={2}
-              minZoom={0.5}
-              nodeTypes={nodeTypes}
-              nodes={nodes}
-              nodesConnectable={isEditMode}
-              selectNodesOnDrag={false}
-              zoomOnDoubleClick={false}
-              zoomOnScroll={false}
-              onConnect={onConnect}
-              onDragOver={onDragOver}
-              onDrop={onDrop}
-              onEdgesChange={onEdgesChange}
-              onInit={(reactFlowInstance: ReactFlowInstance) => {
-                onLoad(reactFlowInstance, nodes.length);
-                setReactFlowInstance(reactFlowInstance);
-              }}
-              onNodeClick={(_e, node) => onNodeClick(node)}
-              onNodeContextMenu={onNodeContextMenu}
-              onNodeDrag={dragHandle}
-              onNodeDragStart={dragHandle}
-              onNodeDragStop={dragHandle}
-              onNodeMouseEnter={onNodeMouseEnter}
-              onNodeMouseLeave={onNodeMouseLeave}
-              onNodeMouseMove={onNodeMouseMove}
-              onNodesChange={onNodesChange}>
-              {getCustomControlElements()}
-              {getGraphBackGround()}
-            </ReactFlow>
-          </ReactFlowProvider>
-        </div>
-        {getEntityDrawer()}
-        <EntityLineageSidebar newAddedNode={newAddedNode} show={isEditMode} />
-        {getConfirmationModal()}
+    <div
+      className={classNames('tw-relative tw-h-full tw--ml-4 tw--mr-7 tw--mt-4')}
+      data-testid="lineage-container">
+      <div className="tw-w-full tw-h-full" ref={reactFlowWrapper}>
+        <ReactFlowProvider>
+          <ReactFlow
+            data-testid="react-flow-component"
+            edgeTypes={{ buttonedge: CustomEdge }}
+            edges={edges}
+            maxZoom={2}
+            minZoom={0.5}
+            nodeTypes={nodeTypes}
+            nodes={nodes}
+            nodesConnectable={isEditMode}
+            selectNodesOnDrag={false}
+            zoomOnDoubleClick={false}
+            zoomOnScroll={false}
+            onConnect={onConnect}
+            onDragOver={onDragOver}
+            onDrop={onDrop}
+            onEdgesChange={onEdgesChange}
+            onInit={(reactFlowInstance: ReactFlowInstance) => {
+              onLoad(reactFlowInstance, nodes.length);
+              setReactFlowInstance(reactFlowInstance);
+            }}
+            onNodeClick={(_e, node) => onNodeClick(node)}
+            onNodeContextMenu={onNodeContextMenu}
+            onNodeDrag={dragHandle}
+            onNodeDragStart={dragHandle}
+            onNodeDragStop={dragHandle}
+            onNodeMouseEnter={onNodeMouseEnter}
+            onNodeMouseLeave={onNodeMouseLeave}
+            onNodeMouseMove={onNodeMouseMove}
+            onNodesChange={onNodesChange}>
+            {getCustomControlElements()}
+            {getGraphBackGround()}
+          </ReactFlow>
+        </ReactFlowProvider>
       </div>
-    </Fragment>
+      {getEntityDrawer()}
+      <EntityLineageSidebar newAddedNode={newAddedNode} show={isEditMode} />
+      {getConfirmationModal()}
+    </div>
   );
 };
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/Entitylineage.component.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/Entitylineage.component.test.tsx
index e4615496cca..b4d1c2a155c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/Entitylineage.component.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/Entitylineage.component.test.tsx
@@ -127,6 +127,29 @@ const mockEntityLineageProp = {
   entityLineageHandler: jest.fn(),
 };
 
+const mockFlowData = {
+  node: [
+    {
+      id: 'a4b21449-b03b-4527-b482-148f52f92ff2',
+      sourcePosition: 'right',
+      targetPosition: 'left',
+      type: 'default',
+      className: 'leaf-node core',
+      data: {
+        label: 'dim_address etl',
+        isEditMode: false,
+        columns: {},
+        isExpanded: false,
+      },
+      position: {
+        x: 0,
+        y: 0,
+      },
+    },
+  ],
+  edge: [],
+};
+
 jest.mock('../../utils/EntityLineageUtils', () => ({
   dragHandle: jest.fn(),
   getDataLabel: jest
@@ -138,8 +161,8 @@ jest.mock('../../utils/EntityLineageUtils', () => ({
       <p>Lineage data is not available for deleted entities.</p>
     ),
   getHeaderLabel: jest.fn().mockReturnValue(<p>Header label</p>),
-  getLayoutedElementsV1: jest.fn().mockReturnValue([]),
-  getLineageDataV1: jest.fn().mockReturnValue([]),
+  getLayoutedElementsV1: jest.fn().mockImplementation(() => mockFlowData),
+  getLineageDataV1: jest.fn().mockImplementation(() => mockFlowData),
   getModalBodyText: jest.fn(),
   onLoad: jest.fn(),
   onNodeContextMenu: jest.fn(),
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ServiceConfig/ServiceConfig.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ServiceConfig/ServiceConfig.tsx
index 76d6b05c16b..7958c43263a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ServiceConfig/ServiceConfig.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ServiceConfig/ServiceConfig.tsx
@@ -66,6 +66,10 @@ const ServiceConfig = ({
       });
   };
 
+  const onCancel = () => {
+    history.goBack();
+  };
+
   const getDynamicFields = () => {
     return (
       <ConnectionConfigForm
@@ -79,6 +83,7 @@ const ServiceConfig = ({
         serviceCategory={serviceCategory}
         serviceType={serviceType}
         status={status}
+        onCancel={onCancel}
         onSave={handleOnSaveClick}
       />
     );
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx
index 78264aff7b1..31dc72f0371 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx
@@ -606,9 +606,7 @@ const TeamDetails = ({
               blurWithBodyBG
               description={currentTeam?.description || ''}
               entityName={currentTeam?.displayName ?? currentTeam?.name}
-              hasEditAccess={isActionAllowed(
-                userPermissions[Operation.UpdateDescription]
-              )}
+              hasEditAccess={isOwner()}
               isEdit={isDescriptionEditable}
               onCancel={() => descriptionHandler(false)}
               onDescriptionEdit={() => descriptionHandler(true)}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/description/Description.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/description/Description.tsx
index 912bc0386bd..5d0dc5fdc7b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/description/Description.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/description/Description.tsx
@@ -17,6 +17,7 @@ import { EntityFieldThreads } from 'Models';
 import React, { FC, Fragment } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useAuthContext } from '../../../authentication/auth-provider/AuthProvider';
+import { TITLE_FOR_UPDATE_DESCRIPTION } from '../../../constants/constants';
 import { EntityType } from '../../../enums/entity.enum';
 import { Operation } from '../../../generated/entity/policies/accessControl/rule';
 import { useAuth } from '../../../hooks/authHooks';
@@ -28,6 +29,7 @@ import {
   TASK_ENTITIES,
 } from '../../../utils/TasksUtils';
 import { ModalWithMarkdownEditor } from '../../Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor';
+import NonAdminAction from '../non-admin-action/NonAdminAction';
 import PopOver from '../popover/PopOver';
 import RichTextEditorPreviewer from '../rich-text-editor/RichTextEditorPreviewer';
 import { DescriptionProps } from './Description.interface';
@@ -68,16 +70,22 @@ const Description: FC<DescriptionProps> = ({
     );
   };
 
+  const checkPermission = () => {
+    if (!isAuthDisabled && !isAdminUser) {
+      if (!isUndefined(hasEditAccess)) {
+        return Boolean(hasEditAccess);
+      } else {
+        return userPermissions[Operation.UpdateDescription];
+      }
+    }
+
+    return true;
+  };
+
   const handleUpdate = () => {
-    const check =
-      isAdminUser ||
-      hasEditAccess ||
-      isAuthDisabled ||
-      userPermissions[Operation.UpdateDescription] ||
-      !TASK_ENTITIES.includes(entityType as EntityType);
-    if (check) {
+    if (checkPermission()) {
       onDescriptionEdit && onDescriptionEdit();
-    } else {
+    } else if (TASK_ENTITIES.includes(entityType as EntityType)) {
       handleUpdateDescription();
     }
   };
@@ -151,12 +159,19 @@ const Description: FC<DescriptionProps> = ({
           'tw-w-5 tw-min-w-max tw-flex',
           description?.trim() ? 'tw-pl-1' : ''
         )}>
-        <button
-          className="focus:tw-outline-none tw-self-baseline"
-          data-testid="edit-description"
-          onClick={handleUpdate}>
-          <SVGIcons alt="edit" icon="icon-edit" title="Edit" width="16px" />
-        </button>
+        <NonAdminAction
+          isOwner={
+            checkPermission() ||
+            TASK_ENTITIES.includes(entityType as EntityType)
+          }
+          title={TITLE_FOR_UPDATE_DESCRIPTION}>
+          <button
+            className="focus:tw-outline-none tw-self-baseline"
+            data-testid="edit-description"
+            onClick={handleUpdate}>
+            <SVGIcons alt="edit" icon="icon-edit" title="Edit" width="16px" />
+          </button>
+        </NonAdminAction>
 
         <RequestDescriptionEl descriptionThread={thread} />
         <DescriptionThreadEl descriptionThread={thread} />
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/title-breadcrumb/title-breadcrumb.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/title-breadcrumb/title-breadcrumb.component.tsx
index 9c51bb2a798..8616a0828ab 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/title-breadcrumb/title-breadcrumb.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/title-breadcrumb/title-breadcrumb.component.tsx
@@ -83,7 +83,7 @@ const TitleBreadcrumb: FunctionComponent<TitleBreadcrumbProps> = ({
                     className={classes}
                     style={{
                       maxWidth,
-                      fontSize: '14px',
+                      fontSize: '16px',
                     }}
                     to={link.url}>
                     {link.name}
diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
index a100736663f..446b939541a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
@@ -433,6 +433,9 @@ export const TITLE_FOR_NON_ADMIN_ACTION =
 export const TITLE_FOR_UPDATE_OWNER =
   'You do not have permissions to update the owner.';
 
+export const TITLE_FOR_UPDATE_DESCRIPTION =
+  'You do not have permissions to update the description.';
+
 export const configOptions = {
   headers: { 'Content-type': 'application/json-patch+json' },
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
index a11bd4592ac..07dde99ca0a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
@@ -175,6 +175,7 @@ const ServicePage: FunctionComponent = () => {
       },
 
       isProtected: !isAdminUser && !isAuthDisabled,
+      isHidden: !isAdminUser && !isAuthDisabled,
       position: 3,
     },
     {
@@ -925,6 +926,7 @@ const ServicePage: FunctionComponent = () => {
                 entityFqn={serviceFQN}
                 entityName={serviceFQN}
                 entityType={serviceCategory.slice(0, -1)}
+                hasEditAccess={isAdminUser || isAuthDisabled}
                 isEdit={isEdit}
                 onCancel={onCancel}
                 onDescriptionEdit={onDescriptionEdit}
@@ -1033,7 +1035,7 @@ const ServicePage: FunctionComponent = () => {
                       </Button>
                     </div>
                     <ServiceConnectionDetails
-                      connectionDetails={connectionDetails as ConfigData}
+                      connectionDetails={connectionDetails || {}}
                       serviceCategory={serviceCategory}
                       serviceFQN={serviceDetails?.serviceType || ''}
                     />
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 306087e836f..1be2ddc776e 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
@@ -307,7 +307,7 @@ const ServicesPage = () => {
               <span
                 className=" tw-ml-1 tw-font-normal tw-text-grey-body"
                 data-testid="dashboard-url">
-                {getDashboardURL(dashboardService.connection.config)}
+                {getDashboardURL(dashboardService.connection?.config)}
               </span>
             </div>
           </>
@@ -323,7 +323,7 @@ const ServicesPage = () => {
               <span
                 className=" tw-ml-1 tw-font-normal tw-text-grey-body"
                 data-testid="pipeline-url">
-                {pipelineService.connection.config?.hostPort}
+                {pipelineService.connection?.config?.hostPort || '--'}
               </span>
             </div>
           </>
@@ -340,7 +340,7 @@ const ServicesPage = () => {
               <span
                 className=" tw-ml-1 tw-font-normal tw-text-grey-body"
                 data-testid="pipeline-url">
-                {mlmodel.connection.config?.registryUri}
+                {mlmodel.connection?.config?.registryUri || '--'}
               </span>
             </div>
             <div className="tw-mb-1 tw-truncate" data-testid="additional-field">
@@ -348,7 +348,7 @@ const ServicesPage = () => {
               <span
                 className=" tw-ml-1 tw-font-normal tw-text-grey-body"
                 data-testid="pipeline-url">
-                {mlmodel.connection.config?.trackingUri}
+                {mlmodel.connection?.config?.trackingUri || '--'}
               </span>
             </div>
           </>
@@ -508,7 +508,7 @@ const ServicesPage = () => {
           <p className="tw-text-lg tw-text-center">
             {noServicesText(searchText)}
           </p>
-          <p className="tw-text-lg tw-text-center">
+          <div className="tw-text-lg tw-text-center">
             <NonAdminAction
               position="bottom"
               title={TITLE_FOR_NON_ADMIN_ACTION}>
@@ -522,7 +522,7 @@ const ServicesPage = () => {
               </Button>
             </NonAdminAction>{' '}
             to add new {servicesDisplayName[serviceName]}
-          </p>
+          </div>
         </div>
       </div>
     );