fix(ui): allow to edit a non ascode workflow from template (#5187)

Author: richardlt

ui/src/app/shared/ascode/events/ascode.event.html

@@ -1,6 +1,6 @@
 <div class="asCodeEvents">
     <p>
-        <span *ngIf="workflow.from_repository">{{ 'pipeline_from_repository' | translate: {repo: repo} }}</span>
+        <span *ngIf="workflow.from_repository">{{ 'pipeline_from_repository' | translate: {repo: workflow.from_repository} }}</span>
         <span *ngIf="!workflow.from_repository">{{ 'workflow_from_repository_pending' | translate }}</span>
     </p>
     <ul>

ui/src/app/shared/workflow/menu/edit-node/menu.edit.node.component.ts

@@ -51,7 +51,7 @@ export class WorkflowWNodeMenuEditComponent implements OnInit {
         this.workflowrun = state.workflowRun;
         this.noderun = state.workflowNodeRun;
         this.node = state.node;
-        this.readonly = !state.canEdit || !!this.workflow.from_template;
+        this.readonly = !state.canEdit || (!!this.workflow.from_template && !!this.workflow.from_repository);
 
         this.runnable = this.getCanBeRun();
         this._cd.markForCheck();

ui/src/app/shared/workflow/modal/node-edit/node.edit.modal.component.ts

@@ -63,7 +63,7 @@ export class WorkflowNodeEditModalComponent implements AfterViewInit {
     readonly = true;
 
     constructor(private _modalService: SuiModalService, private _store: Store, private _cd: ChangeDetectorRef,
-                private _translate: TranslateService, private _toast: ToastService) {
+        private _translate: TranslateService, private _toast: ToastService) {
         this.projectSubscriber = this._store.select(ProjectState)
             .subscribe((projState: ProjectStateModel) => {
                 this.project = projState.project;
@@ -110,7 +110,7 @@ export class WorkflowNodeEditModalComponent implements AfterViewInit {
                 this.currentNodeName = stateSnap.node.name;
                 this.currentNodeType = stateSnap.node.type;
                 this.groups = cloneDeep(stateSnap.node.groups);
-                this.readonly = !stateSnap.canEdit || !!this.workflow.from_template;
+                this.readonly = !stateSnap.canEdit || (!!this.workflow.from_template && !!this.workflow.from_repository);
                 if (stateSnap.hook) {
                     this.hookSelected = true;
                 }
@@ -209,7 +209,7 @@ export class WorkflowNodeEditModalComponent implements AfterViewInit {
 
     changeView(newView: string): void {
         if (this.selected === newView) {
-         return;
+            return;
         }
         if (this.hasModification) {
             if (confirm(this._translate.instant('workflow_modal_change_view_confirm'))) {

ui/src/app/shared/workflow/wnode/hook/hook.component.ts

@@ -49,7 +49,7 @@ export class WorkflowNodeHookComponent implements OnInit {
     ) {
         this.projectKey = this._store.selectSnapshot(ProjectState.projectSnapshot).key;
         let workflow = this._store.selectSnapshot(WorkflowState.workflowSnapshot);
-        this.isReadOnly = !workflow.permissions.writable || !!workflow.from_template;
+        this.isReadOnly = !workflow.permissions.writable || (!!workflow.from_template && !!workflow.from_repository);
     }
 
     ngOnInit(): void {

ui/src/app/views/pipeline/show/pipeline.show.html

@@ -8,6 +8,7 @@
                 <a class="ui label small basic"
                     [class.green]="pipeline && pipeline.from_repository && (!pipeline.ascode_events || pipeline.ascode_events.length ===0)"
                     [class.orange]="pipeline && pipeline.from_repository && pipeline?.ascode_events?.length > 0"
+                    [class.grey]="pipeline && !pipeline.from_repository && (!pipeline.as_code_events || pipeline.as_code_events.length === 0)"
                     suiPopup [popupTemplate]="popupFromRepository" popupPlacement="bottom right"
                     popupTrigger="outsideClick" #popup="suiPopup">
                     <i class="code icon"></i>as code

ui/src/app/views/workflow/show/workflow.component.ts

@@ -90,7 +90,7 @@ export class WorkflowShowComponent implements OnInit {
                 this.detailedWorkflow = s.workflow;
             }
             if (this.detailedWorkflow) {
-                this.isReadOnly = !!this.detailedWorkflow.from_template;
+                this.isReadOnly = !!this.detailedWorkflow.from_template && !!this.detailedWorkflow.from_repository;
                 let from_repository = this.detailedWorkflow.from_repository;
                 this.previewWorkflow = this.detailedWorkflow.preview;
                 this.groups = cloneDeep(this.detailedWorkflow.groups);