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

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
-      <div
+      className={classNames('tw-relative tw-h-full tw--ml-4 tw--mr-7 tw--mt-4')}
-        className={classNames(
+      data-testid="lineage-container">
-          'tw-relative tw-h-full tw--ml-4 tw--mr-7 tw--mt-4'
+      <div className="tw-w-full tw-h-full" ref={reactFlowWrapper}>
-        )}
+        <ReactFlowProvider>
-        data-testid="lineage-container">
+          <ReactFlow
-        <div className="tw-w-full tw-h-full" ref={reactFlowWrapper}>
+            data-testid="react-flow-component"
-          <ReactFlowProvider>
+            edgeTypes={{ buttonedge: CustomEdge }}
-            <ReactFlow
+            edges={edges}
-              data-testid="react-flow-component"
+            maxZoom={2}
-              edgeTypes={{ buttonedge: CustomEdge }}
+            minZoom={0.5}
-              edges={edges}
+            nodeTypes={nodeTypes}
-              maxZoom={2}
+            nodes={nodes}
-              minZoom={0.5}
+            nodesConnectable={isEditMode}
-              nodeTypes={nodeTypes}
+            selectNodesOnDrag={false}
-              nodes={nodes}
+            zoomOnDoubleClick={false}
-              nodesConnectable={isEditMode}
+            zoomOnScroll={false}
-              selectNodesOnDrag={false}
+            onConnect={onConnect}
-              zoomOnDoubleClick={false}
+            onDragOver={onDragOver}
-              zoomOnScroll={false}
+            onDrop={onDrop}
-              onConnect={onConnect}
+            onEdgesChange={onEdgesChange}
-              onDragOver={onDragOver}
+            onInit={(reactFlowInstance: ReactFlowInstance) => {
-              onDrop={onDrop}
+              onLoad(reactFlowInstance, nodes.length);
-              onEdgesChange={onEdgesChange}
+              setReactFlowInstance(reactFlowInstance);
-              onInit={(reactFlowInstance: ReactFlowInstance) => {
+            }}
-                onLoad(reactFlowInstance, nodes.length);
+            onNodeClick={(_e, node) => onNodeClick(node)}
-                setReactFlowInstance(reactFlowInstance);
+            onNodeContextMenu={onNodeContextMenu}
-              }}
+            onNodeDrag={dragHandle}
-              onNodeClick={(_e, node) => onNodeClick(node)}
+            onNodeDragStart={dragHandle}
-              onNodeContextMenu={onNodeContextMenu}
+            onNodeDragStop={dragHandle}
-              onNodeDrag={dragHandle}
+            onNodeMouseEnter={onNodeMouseEnter}
-              onNodeDragStart={dragHandle}
+            onNodeMouseLeave={onNodeMouseLeave}
-              onNodeDragStop={dragHandle}
+            onNodeMouseMove={onNodeMouseMove}
-              onNodeMouseEnter={onNodeMouseEnter}
+            onNodesChange={onNodesChange}>
-              onNodeMouseLeave={onNodeMouseLeave}
+            {getCustomControlElements()}
-              onNodeMouseMove={onNodeMouseMove}
+            {getGraphBackGround()}
-              onNodesChange={onNodesChange}>
+          </ReactFlow>
-              {getCustomControlElements()}
+        </ReactFlowProvider>
-              {getGraphBackGround()}
-            </ReactFlow>
-          </ReactFlowProvider>
-        </div>
-        {getEntityDrawer()}
-        <EntityLineageSidebar newAddedNode={newAddedNode} show={isEditMode} />
-        {getConfirmationModal()}
       </div>
-    </Fragment>
+      {getEntityDrawer()}
+      <EntityLineageSidebar newAddedNode={newAddedNode} show={isEditMode} />
+      {getConfirmationModal()}
+    </div>
   );
 };
 

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([]),
+  getLayoutedElementsV1: jest.fn().mockImplementation(() => mockFlowData),
-  getLineageDataV1: jest.fn().mockReturnValue([]),
+  getLineageDataV1: jest.fn().mockImplementation(() => mockFlowData),
   getModalBodyText: jest.fn(),
   onLoad: jest.fn(),
   onNodeContextMenu: jest.fn(),

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

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(
+              hasEditAccess={isOwner()}
-                userPermissions[Operation.UpdateDescription]
-              )}
               isEdit={isDescriptionEditable}
               onCancel={() => descriptionHandler(false)}
               onDescriptionEdit={() => descriptionHandler(true)}

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 =
+    if (checkPermission()) {
-      isAdminUser ||
-      hasEditAccess ||
-      isAuthDisabled ||
-      userPermissions[Operation.UpdateDescription] ||
-      !TASK_ENTITIES.includes(entityType as EntityType);
-    if (check) {
       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
+        <NonAdminAction
-          className="focus:tw-outline-none tw-self-baseline"
+          isOwner={
-          data-testid="edit-description"
+            checkPermission() ||
-          onClick={handleUpdate}>
+            TASK_ENTITIES.includes(entityType as EntityType)
-          <SVGIcons alt="edit" icon="icon-edit" title="Edit" width="16px" />
+          }
-        </button>
+          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} />

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}

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

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 || ''}
                     />

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