State.

src/Squidex/app/features/settings/pages/workflows/workflow-transition.component.ts

@@ -25,6 +25,9 @@ export class WorkflowTransitionComponent {
     @Input()
     public roles: RoleDto[];
 
+    @Input()
+    public disabled: boolean;
+
     @Output()
     public update = new EventEmitter<WorkflowTransitionValues>();
 

src/Squidex/app/features/settings/pages/workflows/workflows-page.component.html

@@ -10,7 +10,7 @@
 
         <sqx-shortcut keys="ctrl+shift+r" (trigger)="reload()"></sqx-shortcut>
 
-        <ng-container>
+        <ng-container *ngIf="workflow && workflow.canUpdate">
             <button type="button" class="btn btn-primary" (click)="save()" title="Save (CTRL + S)">
                 Save
             </button>
@@ -20,23 +20,25 @@
     </ng-container>
 
     <ng-container content>
-        <ng-container *ngIf="rolesState.roles | async; let roles">
-            <sqx-workflow-step *ngFor="let step of workflow.steps; trackBy: trackByStep"
-                [workflow]="workflow"
-                [step]="step"
-                [roles]="roles"
-                (makeInitial)="setInitial(step)"
-                (rename)="renameStep(step, $event)"
-                (remove)="removeStep(step)"
-                (transitionAdd)="addTransiton(step, $event)"
-                (transitionRemove)="removeTransition(step, $event)"
-                (transitionUpdate)="updateTransition($event)"
-                (update)="updateStep(step, $event)">
-            </sqx-workflow-step>
-        </ng-container>
+        <ng-component *ngIf="workflow">
+            <ng-container *ngIf="rolesState.roles | async; let roles">
+                <sqx-workflow-step *ngFor="let step of workflow.steps; trackBy: trackByStep"
+                    [workflow]="workflow"
+                    [step]="step"
+                    [roles]="roles"
+                    (makeInitial)="setInitial(step)"
+                    (rename)="renameStep(step, $event)"
+                    (remove)="removeStep(step)"
+                    (transitionAdd)="addTransiton(step, $event)"
+                    (transitionRemove)="removeTransition(step, $event)"
+                    (transitionUpdate)="updateTransition($event)"
+                    (update)="updateStep(step, $event)">
+                </sqx-workflow-step>
+            </ng-container>
     
-        <button class="btn btn-success" (click)="addStep()">
-            Add Step
-        </button>
+            <button class="btn btn-success" (click)="addStep()" *ngIf="workflow.canUpdate">
+                Add Step
+            </button>
+        </ng-component>
     </ng-container>
 </sqx-panel>

src/Squidex/app/features/settings/pages/workflows/workflows-page.component.ts

@@ -11,6 +11,7 @@ import {
     MathHelper,
     RolesState,
     WorkflowDto,
+    WorkflowsState,
     WorkflowStep,
     WorkflowStepValues,
     WorkflowTransition,
@@ -28,31 +29,29 @@ export class WorkflowsPageComponent implements OnInit {
     public workflow: WorkflowDto;
 
     constructor(
-        public readonly rolesState: RolesState
+        public readonly rolesState: RolesState,
+        public readonly workflowsState: WorkflowsState
     ) {
     }
 
     public ngOnInit() {
-        this.rolesState.load();
+        this.workflowsState.load()
+            .subscribe(workflow => {
+                this.workflow = workflow;
+            });
 
-        this.workflow =
-            new WorkflowDto()
-                .setStep('Archived', { color: '#eb3142', noUpdate: true })
-                .setStep('Draft', { color: '#8091a5' })
-                .setStep('Published', { color: '#4bb958', isLocked: true })
-                .setTransition('Archived', 'Draft')
-                .setTransition('Draft', 'Archived')
-                .setTransition('Draft', 'Published')
-                .setTransition('Published', 'Draft')
-                .setTransition('Published', 'Archived');
+        this.rolesState.load();
     }
 
     public reload() {
-        return;
+        this.workflowsState.load(true)
+            .subscribe(workflow => {
+                this.workflow = workflow;
+            });
     }
 
     public save() {
-        return;
+        this.workflowsState.save(this.workflow);
     }
 
     public addStep() {

src/Squidex/app/shared/services/workflows.service.ts

@@ -10,6 +10,7 @@ import { Observable, of } from 'rxjs';
 
 import {
     compareStringsAsc,
+    hasAnyLink,
     Resource,
     ResourceLinks,
     Version,
@@ -22,6 +23,8 @@ export type WorkflowPayload = { workflow: WorkflowDto; } & Resource;
 export class WorkflowDto {
     public readonly _links: ResourceLinks;
 
+    public readonly canUpdate: boolean;
+
     public static DEFAULT =
         new WorkflowDto()
             .setStep('Archived', { color: '#eb3142', noUpdate: true })
@@ -43,6 +46,8 @@ export class WorkflowDto {
         this.transitions.sort((a, b) => compareStringsAsc(a.to, b.to));
 
         this._links = links;
+
+        this.canUpdate = hasAnyLink(links, 'update');
     }
 
     public getOpenSteps(step: WorkflowStep) {

src/Squidex/app/shared/state/workflows.state.spec.ts

@@ -87,9 +87,11 @@ describe('WorkflowsState', () => {
             workflowsService.setup(x => x.putWorkflow(app, oldWorkflow, request, version))
                 .returns(() => of(versioned(newVersion, updated))).verifiable();
 
-            workflowsState.save().subscribe();
+            workflowsState.save(oldWorkflow.workflow).subscribe();
 
             expectNewWorkflows(updated);
+
+            dialogs.verify(x => x.notifyInfo(It.isAnyString()), Times.once());
         });
 
         function expectNewWorkflows(updated: WorkflowPayload) {

src/Squidex/app/shared/state/workflows.state.ts

@@ -13,6 +13,7 @@ import { tap } from 'rxjs/operators';
 
 import {
     DialogService,
+    shareMapSubscribed,
     shareSubscribed,
     State,
     Version
@@ -53,7 +54,7 @@ export class WorkflowsState extends State<Snapshot> {
         super({ version: Version.EMPTY });
     }
 
-    public load(isReload = false): Observable<any> {
+    public load(isReload = false): Observable<WorkflowDto> {
         if (!isReload) {
             this.resetState();
         }
@@ -66,15 +67,15 @@ export class WorkflowsState extends State<Snapshot> {
 
                 this.replaceWorkflow(payload, version);
             }),
-            shareSubscribed(this.dialogs));
+            shareMapSubscribed(this.dialogs, x => x.payload.workflow));
     }
 
-    public save(): Observable<any> {
-        const workflow = this.snapshot.workflow!;
-
+    public save(workflow: WorkflowDto): Observable<any> {
         return this.workflowsService.putWorkflow(this.appName, workflow, workflow.serialize(), this.version).pipe(
             tap(({ version, payload }) => {
                 this.replaceWorkflow(payload, version);
+
+                this.dialogs.notifyInfo('Workflow has been saved.');
             }),
             shareSubscribed(this.dialogs));
     }