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,18 +1280,15 @@ const Entitylineage: FunctionComponent<EntityLineageProp> = ({
     }
   }, [entityLineage]);
 
-  if (isLoading) {
+  if (isLoading || (nodes.length === 0 && !deleted)) {
     return <Loader />;
   }
 
   return deleted ? (
     getDeletedLineagePlaceholder()
   ) : (
-    <Fragment>
     <div
-        className={classNames(
+      className={classNames('tw-relative tw-h-full tw--ml-4 tw--mr-7 tw--mt-4')}
-          '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>
@@ -1333,7 +1330,6 @@ const Entitylineage: FunctionComponent<EntityLineageProp> = ({
       <EntityLineageSidebar newAddedNode={newAddedNode} show={isEditMode} />
       {getConfirmationModal()}
     </div>
-    </Fragment>
   );
 };
 

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 handleUpdate = () => {
+  const checkPermission = () => {
-    const check =
+    if (!isAuthDisabled && !isAdminUser) {
-      isAdminUser ||
+      if (!isUndefined(hasEditAccess)) {
-      hasEditAccess ||
+        return Boolean(hasEditAccess);
-      isAuthDisabled ||
-      userPermissions[Operation.UpdateDescription] ||
-      !TASK_ENTITIES.includes(entityType as EntityType);
-    if (check) {
-      onDescriptionEdit && onDescriptionEdit();
       } else {
+        return userPermissions[Operation.UpdateDescription];
+      }
+    }
+
+    return true;
+  };
+
+  const handleUpdate = () => {
+    if (checkPermission()) {
+      onDescriptionEdit && onDescriptionEdit();
+    } 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' : ''
         )}>
+        <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} />

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