Show pipeline server error on project pipelines card and tab section

frontend/src/__tests__/cypress/cypress/pages/projects.ts

@@ -307,6 +307,10 @@ class ProjectDetails {
     return cy.findByTestId('unsupported-pipeline-version-alert');
   }
 
+  findPipelineTimeoutErrorMessage() {
+    return cy.findByTestId('timeout-pipeline-error-message');
+  }
+
   findKserveModelsTable() {
     return cy.findByTestId('kserve-inference-service-table');
   }

frontend/src/__tests__/cypress/cypress/tests/mocked/projects/projectDetails.cy.ts

@@ -50,6 +50,8 @@ type HandlersProps = {
   imageStreamPythonDependencies?: string;
   v1PipelineServer?: boolean;
   pipelineServerInstalled?: boolean;
+  pipelineServerInitializing?: boolean;
+  pipelineServerErrorMessage?: string;
 };
 
 const initIntercepts = ({
@@ -65,6 +67,8 @@ const initIntercepts = ({
   templates = false,
   v1PipelineServer = false,
   pipelineServerInstalled = true,
+  pipelineServerInitializing,
+  pipelineServerErrorMessage,
 }: HandlersProps) => {
   cy.interceptK8sList(
     { model: SecretModel, ns: 'test-project' },
@@ -118,12 +122,18 @@ const initIntercepts = ({
       mockK8sResourceList([
         mockDataSciencePipelineApplicationK8sResource({
           dspVersion: v1PipelineServer ? 'v1' : 'v2',
+          message: pipelineServerErrorMessage,
+          initializing: pipelineServerInitializing,
         }),
       ]),
     );
     cy.interceptK8s(
       DataSciencePipelineApplicationModel,
-      mockDataSciencePipelineApplicationK8sResource({ dspVersion: v1PipelineServer ? 'v1' : 'v2' }),
+      mockDataSciencePipelineApplicationK8sResource({
+        dspVersion: v1PipelineServer ? 'v1' : 'v2',
+        message: pipelineServerErrorMessage,
+        initializing: pipelineServerInitializing,
+      }),
     );
   }
   cy.interceptK8sList(PodModel, mockK8sResourceList([mockPodK8sResource({})]));
@@ -272,6 +282,21 @@ describe('Project Details', () => {
       projectDetails.findProjectResourceKindText().should('have.text', 'Project');
     });
 
+    it('Should show pipeline server error when the server has errors', () => {
+      initIntercepts({
+        pipelineServerInitializing: true,
+        pipelineServerErrorMessage: 'Data connection unsuccessfully verified',
+      });
+      projectDetails.visit('test-project');
+      projectDetails
+        .findPipelineTimeoutErrorMessage()
+        .should('have.text', 'Data connection unsuccessfully verified');
+      projectDetails.findTab('Pipelines').click();
+      projectDetails
+        .findPipelineTimeoutErrorMessage()
+        .should('have.text', 'Data connection unsuccessfully verified');
+    });
+
     it('Should not allow actions for non-provisioning users', () => {
       asProjectAdminUser({ isSelfProvisioner: false });
       initIntercepts({ disableKServeConfig: true, disableModelConfig: true });

frontend/src/concepts/pipelines/context/PipelinesContext.tsx

@@ -16,7 +16,6 @@
 import ViewPipelineServerModal from '~/concepts/pipelines/content/ViewPipelineServerModal';
 import useSyncPreferredProject from '~/concepts/projects/useSyncPreferredProject';
 import useManageElyraSecret from '~/concepts/pipelines/context/useManageElyraSecret';
-import { deleteServer } from '~/concepts/pipelines/utils';
 import { conditionalArea, SupportedArea } from '~/concepts/areas';
 import { DEV_MODE } from '~/utilities/const';
 import { MetadataStoreServicePromiseClient } from '~/third_party/mlmd';
@@ -273,38 +272,45 @@
 };
 
 export const PipelineServerTimedOut: React.FC = () => {
-  const { namespace, crName, crStatus, refreshState, ignoreTimedOut } =
-    React.useContext(PipelinesContext);
+  const { crStatus, ignoreTimedOut } = React.useContext(PipelinesContext);
+  const [deleteOpen, setDeleteOpen] = React.useState(false);
   const errorMessage =
     crStatus?.conditions?.find((condition) => condition.type === 'Ready')?.message || '';
   return (
-    <Alert
-      variant="danger"
-      isInline
-      title="Pipeline server failed"
-      actionClose={<AlertActionCloseButton onClose={() => ignoreTimedOut()} />}
-      actionLinks={
-        <>
-          <AlertActionLink
-            onClick={() => deleteServer(namespace, crName).then(() => refreshState())}
-          >
-            Delete pipeline server
-          </AlertActionLink>
-          <AlertActionLink onClick={() => ignoreTimedOut()}>Close</AlertActionLink>
-        </>
-      }
-    >
-      <Stack hasGutter>
-        {errorMessage && (
-          <StackItem data-testid="timeout-pipeline-error-message">{errorMessage}</StackItem>
-        )}
-        <StackItem>
-          We encountered an error creating or loading your pipeline server. To continue, delete this
-          pipeline server and create a new one. Deleting this pipeline server will delete all of its
-          resources, including pipelines, runs, and jobs.
-        </StackItem>
-        <StackItem>To get help contact your administrator.</StackItem>
-      </Stack>
-    </Alert>
+    <>
+      <Alert
+        variant="danger"
+        isInline
+        title="Pipeline server failed"
+        actionClose={<AlertActionCloseButton onClose={() => ignoreTimedOut()} />}
+        actionLinks={
+          <>
+            <AlertActionLink onClick={() => setDeleteOpen(true)}>
+              Delete pipeline server
+            </AlertActionLink>
+            <AlertActionLink onClick={() => ignoreTimedOut()}>Close</AlertActionLink>
+          </>
+        }
+      >
+        <Stack hasGutter>
+          {errorMessage && (
+            <StackItem data-testid="timeout-pipeline-error-message">{errorMessage}</StackItem>
+          )}
+          <StackItem>
+            We encountered an error creating or loading your pipeline server. To continue, delete
+            this pipeline server and create a new one. Deleting this pipeline server will delete all
+            of its resources, including pipelines, runs, and jobs.
+          </StackItem>
+          <StackItem>To get help contact your administrator.</StackItem>
+        </Stack>
+      </Alert>
+      {deleteOpen ? (
+        <DeleteServerModal
+          onClose={() => {
+            setDeleteOpen(false);
+          }}
+        />
+      ) : null}
+    </>
   );
 };

frontend/src/pages/projects/screens/detail/overview/trainModels/PipelinesCard.tsx

@@ -14,7 +14,11 @@ import {
   TextContent,
 } from '@patternfly/react-core';
 import { ProjectDetailsContext } from '~/pages/projects/ProjectDetailsContext';
-import { CreatePipelineServerButton, usePipelinesAPI } from '~/concepts/pipelines/context';
+import {
+  CreatePipelineServerButton,
+  PipelineServerTimedOut,
+  usePipelinesAPI,
+} from '~/concepts/pipelines/context';
 import { useSafePipelines } from '~/concepts/pipelines/apiHooks/usePipelines';
 import EnsureAPIAvailability from '~/concepts/pipelines/EnsureAPIAvailability';
 import EnsureCompatiblePipelineServer from '~/concepts/pipelines/EnsureCompatiblePipelineServer';
@@ -80,6 +84,14 @@ const PipelinesCard: React.FC = () => {
       );
     }
 
+    if (pipelinesServer.timedOut) {
+      return (
+        <CardBody>
+          <PipelineServerTimedOut />
+        </CardBody>
+      );
+    }
+
     return (
       <EnsureAPIAvailability>
         <EnsureCompatiblePipelineServer>

frontend/src/pages/projects/screens/detail/pipelines/PipelinesSection.tsx

@@ -63,7 +63,7 @@ const PipelinesSection: React.FC = () => {
           ) : null
         }
         actions={actions}
-        isLoading={(compatible && !apiAvailable && installed) || initializing}
+        isLoading={(!timedOut && compatible && !apiAvailable && installed) || initializing}
         isEmpty={!installed}
         emptyState={<NoPipelineServer variant={ButtonVariant.primary} />}
         showDivider={isPipelinesEmpty}