If you delete a Pipeline, the run reference leads to a meaningful mes…

…sage

frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx

@@ -23,6 +23,7 @@ import { PipelineCoreDetailsPageComponent } from '~/concepts/pipelines/content/t
 import DeletePipelineCoreResourceModal from '~/concepts/pipelines/content/DeletePipelineCoreResourceModal';
 import PipelineDetailsActions from './PipelineDetailsActions';
 import SelectedTaskDrawerContent from './SelectedTaskDrawerContent';
+import PipelineNotFound from './PipelineNotFound';
 
 enum PipelineDetailsTab {
   GRAPH,
@@ -39,7 +40,23 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
   const [activeTabKey, setActiveTabKey] = React.useState<string | number>(PipelineDetailsTab.GRAPH);
   const [selectedId, setSelectedId] = React.useState<string | null>(null);
   const { taskMap, nodes } = usePipelineTaskTopology(pipelineRun);
-
+  if (pipelineLoadError) {
+    return (
+      <ApplicationsPage
+        breadcrumb={
+          <Breadcrumb>
+            {breadcrumbPath}
+            <BreadcrumbItem isActive>{'Pipeline not found'}</BreadcrumbItem>
+          </Breadcrumb>
+        }
+        title={'Pipeline not found'}
+        empty={false}
+        loaded={!pipelineLoad}
+      >
+        <PipelineNotFound />
+      </ApplicationsPage>
+    );
+  }
   return (
     <>
       <Drawer isExpanded={!!selectedId}>
@@ -65,9 +82,12 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
               }
               empty={false}
               loaded={pipelineLoad && pipelineTemplateLoaded}
-              loadError={pipelineLoadError || templateLoadError}
+              loadError={templateLoadError}
               headerAction={
-                <PipelineDetailsActions onDelete={() => setDeleting(true)} pipeline={pipeline} />
+                pipelineLoad &&
+                pipelineTemplateLoaded && (
+                  <PipelineDetailsActions onDelete={() => setDeleting(true)} pipeline={pipeline} />
+                )
               }
             >
               <Tabs

frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineNotFound.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Button,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateIcon,
+  EmptyStatePrimary,
+  Title,
+} from '@patternfly/react-core';
+import { CubesIcon } from '@patternfly/react-icons';
+import { usePipelinesAPI } from '~/concepts/pipelines/context';
+const PipelineNotFound: React.FC = () => {
+  const { namespace } = usePipelinesAPI();
+  const navigate = useNavigate();
+  return (
+    <EmptyState>
+      <EmptyStateIcon icon={CubesIcon} />
+      <Title headingLevel="h4" size="lg">
+        Pipeline not found
+      </Title>
+      <EmptyStateBody>To see more pipelines navigate to the pipelines page</EmptyStateBody>
+      <EmptyStatePrimary>
+        <Button variant="primary" onClick={() => navigate(`/pipelines/${namespace}`)}>
+          See all pipelines
+        </Button>
+      </EmptyStatePrimary>
+    </EmptyState>
+  );
+};
+export default PipelineNotFound;