Resolved issue with breadcrumb

src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.html

@@ -1,6 +1,6 @@
 <div class="d-flex justify-content-end align-items-center header-container">
   <div class="pipeline-name">
-   Editing {{pipelineData?.name}}
+  <!--  Editing {{pipelineData?.name}} -->
   </div>
   <!-- <sm-clear-filters-button
       *ngIf="!minimizedView"

src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.ts

@@ -13,12 +13,11 @@ import {
   updatePipeline,
   compilePipeline,
   runPipeline,
-  setSelectedPipeline,
   updatePipelineStep,
   deletePipelineStep,
 } from "../pipelines.actions";
 import { selectRouterParams } from "@common/core/reducers/router-reducer";
-import { Observable, Subscription, map } from "rxjs";
+import { Observable, Subscription, combineLatest, map } from "rxjs";
 import { Params } from "@angular/router";
 import { selectSelectedPipeline } from "../pipelines.reducer";
 import {
@@ -28,6 +27,14 @@ import {
 } from "~/business-logic/model/pipelines/models";
 import { cloneDeep } from "lodash-es";
 import { ArtifactModeEnum } from "~/business-logic/model/tasks/models";
+import {
+  selectSelectedProject,
+} from "@common/core/reducers/projects.reducer";
+import {
+  setBreadcrumbsOptions,
+  setTags,
+} from "@common/core/actions/projects.actions";
+import { Project } from "~/business-logic/model/projects/project";
 
 @Component({
   selector: "sm-edit-pipeline-page",
@@ -45,6 +52,9 @@ export class EditPipelinePageComponent implements OnInit, OnDestroy {
   public selectedStepInputOutputOptions: Array<PipelinesStepInputOutputMappingOptions>;
   pipelineId: string;
 
+  // for breadcrumb
+  public selectedProject$: Observable<Project>;
+
   //// nodes and edges state should be managed here for local use
   // changes will be propagated to store only after clicking on save.
   private reactFlowState = { nodes: [], edges: [] };
@@ -80,30 +90,30 @@ export class EditPipelinePageComponent implements OnInit, OnDestroy {
         });
       }
 
-      if(node.data?.experimentDetails?.models?.output?.length) {
+      if (node.data?.experimentDetails?.models?.output?.length) {
-      // models i/o mapping.
+        // models i/o mapping.
-      node.data.experimentDetails.models.output.forEach((model) => {
+        node.data.experimentDetails.models.output.forEach((model) => {
-        options.push({
+          options.push({
-          ...model,
+            ...model,
-          stepName: node.data.name,
+            stepName: node.data.name,
-          id: model.model.id,
+            id: model.model.id,
-          type: "model",
+            type: "model",
-          key: model.name
+            key: model.name,
+          });
         });
-      });
       }
     });
 
     // add pipeline parameters
-    if(this.selectedPipeline?.parameters?.length) {
+    if (this.selectedPipeline?.parameters?.length) {
       this.selectedPipeline.parameters.forEach((param) => {
         options.push({
           ...param,
           stepName: this.selectedPipeline.name,
           type: "pipeline_parameter",
-          key: param.name
+          key: param.name,
         });
-      })
+      });
     }
 
     this.selectedStepInputOutputOptions = options;
@@ -135,12 +145,50 @@ export class EditPipelinePageComponent implements OnInit, OnDestroy {
         console.log(pipelineData);
       })
     );
+
+    this.selectedProject$ = this.store.select(selectSelectedProject);
+
+    this.setupBreadcrumbsOptions();
+  }
+
+  setupBreadcrumbsOptions() {
+    this.subs.add(
+      combineLatest([this.selectedPipeline$, this.selectedProject$]).subscribe(
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        ([selectedPipeline, selectedProject]) => {
+          this.store.dispatch(
+            setBreadcrumbsOptions({
+              breadcrumbOptions: {
+                showProjects: false,
+                featureBreadcrumb: {
+                  name: "PIPELINES",
+                  url: "pipelines",
+                },
+                subFeatureBreadcrumb: {
+                  name: "Edit",
+                },
+                projectsOptions: {
+                  basePath: "pipelines",
+                  filterBaseNameWith: [".pipelines"],
+                  compareModule: null,
+                  showSelectedProject: true,
+                  selectedProjectBreadcrumb: {
+                    name: selectedPipeline.name,
+                  },
+                },
+              },
+            })
+          );
+        }
+      )
+    );
   }
 
   ngOnDestroy() {
     this.subs.unsubscribe();
     this.store.dispatch(resetPipelines());
     this.store.dispatch(resetPipelinesSearchQuery());
+    this.store.dispatch(setTags({ tags: [] }));
   }
 
   savePipeline() {
@@ -253,7 +301,7 @@ export class EditPipelinePageComponent implements OnInit, OnDestroy {
     this.reactFlowState.nodes = cloneDeep(filteredNodes);
     this.reactFlowState.edges = cloneDeep(filteredEdges);
     console.log(this.reactFlowState);
-    setTimeout(() => this.savePipeline(), 1000)
+    setTimeout(() => this.savePipeline(), 1000);
     this.selectedStep = null;
   }
 

src/app/webapp-common/pipelines/pipelines-page/pipelines-page.component.ts

@@ -139,12 +139,12 @@ if __name__ == '__main__':
     this.router.navigate([pipeline.id, /* pipeline.basename, */ "edit"], {
       relativeTo: this.projectId ? this.route.parent.parent.parent : this.route,
     });
-    this.store.dispatch(
+    /* this.store.dispatch(
       setSelectedProjectId({
         projectId: pipeline.id,
         example: isExample(pipeline),
       })
-    );
+    ); */
   }
 
   protected override getName() {

src/app/webapp-common/pipelines/pipelines.reducer.ts

@@ -123,6 +123,8 @@ export const pipelinesReducers = [
     scrollId: null,
     noMorePipelines: pipelinesInitState.noMorePipelines,
     pipelines: pipelinesInitState.pipelines,
+    selectedProjectId: pipelinesInitState.selectedProjectId,
+    selectedPipeline: pipelinesInitState.selectedPipeline
   })),
   on(setPipelinesOrderBy, (state, action) => ({
     ...state,