Bug 1801857: Cleanup Pipeline Builder

frontend/packages/dev-console/src/components/pipelines/PipelineDetailsPage.tsx

@@ -7,7 +7,7 @@ import {
   rerunPipelineAndRedirect,
   startPipeline,
   handlePipelineRunSubmit,
-  // editPipeline,
+  editPipeline,
 } from '../../utils/pipeline-actions';
 import { getLatestRun } from '../../utils/pipeline-augment';
 import { PipelineRunModel, PipelineModel } from '../../models';
@@ -49,7 +49,7 @@ class PipelineDetailsPage extends React.Component<DetailsPageProps, PipelineDeta
                 ...(latestRun && latestRun.metadata
                   ? [() => rerunPipelineAndRedirect(PipelineRunModel, latestRun)]
                   : []),
-                // editPipeline,
+                editPipeline,
                 Kebab.factory.Delete,
               ],
             });

frontend/packages/dev-console/src/components/pipelines/PipelinesResourceList.tsx

@@ -30,12 +30,9 @@ const PipelinesResourceList: React.FC<PipelinesResourceListProps> = (props) => {
       canCreate
       createButtonText={`Create ${PipelineModel.label}`}
       createProps={{
-        // to: namespace
-        //   ? `/k8s/ns/${namespace}/${referenceForModel(PipelineModel)}/~new/builder`
-        //   : `/k8s/cluster/${referenceForModel(PipelineModel)}/~new`,
-        to: `/k8s/${namespace ? `ns/${namespace}` : 'cluster'}/${referenceForModel(
-          PipelineModel,
-        )}/~new`,
+        to: namespace
+          ? `/k8s/ns/${namespace}/${referenceForModel(PipelineModel)}/~new/builder`
+          : `/k8s/cluster/${referenceForModel(PipelineModel)}/~new`,
       }}
       filterLabel="by name"
       textFilter="name"

frontend/packages/dev-console/src/components/pipelines/detail-page-tabs/pipeline-details/PipelineVisualizationTask.tsx

@@ -24,6 +24,7 @@ interface TaskProps {
   status?: TaskStatus;
   namespace: string;
   isPipelineRun: boolean;
+  disableTooltip?: boolean;
 }
 
 interface PipelineVisualizationTaskProp {
@@ -39,13 +40,15 @@ interface PipelineVisualizationTaskProp {
   };
   taskRun?: string;
   pipelineRunStatus?: string;
+  disableTooltip?: boolean;
 }
 
 export const PipelineVisualizationTask: React.FC<PipelineVisualizationTaskProp> = ({
   pipelineRunName,
   task,
   namespace,
   pipelineRunStatus,
+  disableTooltip,
 }) => {
   const taskStatus = task.status || {
     duration: '',
@@ -60,6 +63,22 @@ export const PipelineVisualizationTask: React.FC<PipelineVisualizationTaskProp>
       taskStatus.reason = runStatus.Cancelled;
     }
   }
+
+  const taskComponent = (
+    <TaskComponent
+      pipelineRunName={pipelineRunName}
+      name={task.name || ''}
+      namespace={namespace}
+      status={taskStatus}
+      isPipelineRun={!!pipelineRunStatus}
+      disableTooltip={disableTooltip}
+    />
+  );
+
+  if (disableTooltip) {
+    return taskComponent;
+  }
+
   let resources;
   if (task.taskRef.kind === ClusterTaskModel.kind) {
     resources = [
@@ -79,17 +98,7 @@ export const PipelineVisualizationTask: React.FC<PipelineVisualizationTaskProp>
       },
     ];
   }
-  return (
-    <Firehose resources={resources}>
-      <TaskComponent
-        pipelineRunName={pipelineRunName}
-        name={task.name || ''}
-        namespace={namespace}
-        status={taskStatus}
-        isPipelineRun={!!pipelineRunStatus}
-      />
-    </Firehose>
-  );
+  return <Firehose resources={resources}>{taskComponent}</Firehose>;
 };
 const TaskComponent: React.FC<TaskProps> = ({
   pipelineRunName,
@@ -98,18 +107,35 @@ const TaskComponent: React.FC<TaskProps> = ({
   status,
   name,
   isPipelineRun,
+  disableTooltip,
 }) => {
-  const taskData: K8sResourceKind = task.data;
-  const stepList = _.get(taskData, ['spec', 'steps'], []);
+  const stepList = _.get(task, ['data', 'spec', 'steps'], []);
   const stepStatusList: StepStatus[] = stepList.map((step) => createStepStatus(step, status));
   const showStatusState: boolean = isPipelineRun && !!status && !!status.reason;
   const visualName = name || _.get(task, ['metadata', 'name'], '');
   const path = pipelineRunName
     ? `${resourcePathFromModel(PipelineRunModel, pipelineRunName, namespace)}/logs/${name}`
     : undefined;
-  const visTask = (
-    <>
-      <div className="odc-pipeline-vis-task__connector" />
+
+  let taskPill = (
+    <div className="odc-pipeline-vis-task__content">
+      <div
+        className={cx('odc-pipeline-vis-task__title-wrapper', {
+          'is-text-center': !isPipelineRun,
+        })}
+      >
+        <div className="odc-pipeline-vis-task__title">{visualName}</div>
+        {showStatusState && <TaskComponentTaskStatus steps={stepStatusList} />}
+      </div>
+      {isPipelineRun && (
+        <div className="odc-pipeline-vis-task__status">
+          {showStatusState && <ColoredStatusIcon status={status.reason} height={18} width={18} />}
+        </div>
+      )}
+    </div>
+  );
+  if (!disableTooltip) {
+    taskPill = (
       <Tooltip
         position="bottom"
         enableFlip={false}
@@ -121,24 +147,15 @@ const TaskComponent: React.FC<TaskProps> = ({
           />
         }
       >
-        <div className="odc-pipeline-vis-task__content">
-          <div
-            className={cx('odc-pipeline-vis-task__title-wrapper', {
-              'is-text-center': !isPipelineRun,
-            })}
-          >
-            <div className="odc-pipeline-vis-task__title">{visualName}</div>
-            {showStatusState && <TaskComponentTaskStatus steps={stepStatusList} />}
-          </div>
-          {isPipelineRun && (
-            <div className="odc-pipeline-vis-task__status">
-              {showStatusState && (
-                <ColoredStatusIcon status={status.reason} height={18} width={18} />
-              )}
-            </div>
-          )}
-        </div>
+        {taskPill}
       </Tooltip>
+    );
+  }
+
+  const visTask = (
+    <>
+      <div className="odc-pipeline-vis-task__connector" />
+      {taskPill}
     </>
   );
   return (

frontend/packages/dev-console/src/components/pipelines/list-page/PipelineRow.tsx

@@ -10,7 +10,7 @@ import {
   rerunPipelineAndRedirect,
   startPipeline,
   handlePipelineRunSubmit,
-  // editPipeline,
+  editPipeline,
 } from '../../../utils/pipeline-actions';
 import LinkedPipelineRunTaskStatus from '../../pipelineruns/status/LinkedPipelineRunTaskStatus';
 import { tableColumnClasses } from './pipeline-table';
@@ -31,7 +31,7 @@ const PipelineRow: React.FC<PipelineRowProps> = ({ obj, index, key, style }) =>
     ...(obj.latestRun && obj.latestRun.metadata
       ? [() => rerunPipelineAndRedirect(PipelineRunModel, obj.latestRun)]
       : []),
-    // editPipeline,
+    editPipeline,
     Kebab.factory.Delete,
   ];
   return (

frontend/packages/dev-console/src/components/pipelines/pipeline-builder/PipelineBuilderForm.scss

@@ -1,9 +1,9 @@
 .odc-pipeline-builder-form {
-  height: 100%;
-  overflow: hidden;
+  &__grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
 
   &__content {
-    height: 100%;
     overflow: auto;
     padding: 30px;
   }