Final UI fixes.

backend/src/Squidex.Infrastructure/Commands/DomainObject.cs

@@ -105,7 +105,7 @@ namespace Squidex.Infrastructure.Commands
                 }),
                 @event =>
                 {
-                    if (@event is IMigratedStateEvent<T> migratable)
+                    if (@event.Payload is IMigratedStateEvent<T> migratable)
                     {
                         var payload = migratable.Migrate(Snapshot);
 

backend/src/Squidex/Config/Domain/MigrationServices.cs

@@ -1,4 +1,4 @@
-// ==========================================================================
+// ==========================================================================
 //  Squidex Headless CMS
 // ==========================================================================
 //  Copyright (c) Squidex UG (haftungsbeschraenkt)
@@ -35,9 +35,6 @@ namespace Squidex.Config.Domain
             services.AddTransientAs<ConvertEventStoreAppId>()
                 .As<IMigration>();
 
-            services.AddTransientAs<CreateAppSettings>()
-                .As<IMigration>();
-
             services.AddTransientAs<ClearRules>()
                 .As<IMigration>();
 
@@ -72,4 +69,4 @@ namespace Squidex.Config.Domain
                 .As<IMigration>();
         }
     }
-}
+}

backend/tests/Squidex.Infrastructure.Tests/Commands/DomainObjectTests.cs

@@ -84,6 +84,18 @@ namespace Squidex.Infrastructure.Commands
             AssertSnapshot(sut.Snapshot, 4, 0);
         }
 
+        [Fact]
+        public async Task Should_create_old_event()
+        {
+            SetupCreated(new ValueChanged { Value = 10 }, new MultipleByTwiceEvent());
+
+            await sut.EnsureLoadedAsync();
+
+            Assert.Equal(1, sut.Version);
+            Assert.Equal(1, sut.Snapshot.Version);
+            Assert.Equal(20, sut.Snapshot.Value);
+        }
+
         [Fact]
         public async Task Should_recreate_with_create_command_if_deleted_before()
         {
@@ -449,6 +461,11 @@ namespace Squidex.Infrastructure.Commands
         }
 
         private void SetupCreated(int value)
+        {
+            SetupCreated(new ValueChanged { Value = value });
+        }
+
+        private void SetupCreated(params IEvent[] @events)
         {
             var handleEvent = new HandleEvent(_ => true);
 
@@ -457,9 +474,12 @@ namespace Squidex.Infrastructure.Commands
             A.CallTo(() => persistence.ReadAsync(-2))
                 .Invokes(() =>
                 {
-                    version = 0;
+                    version++;
 
-                    handleEvent(Envelope.Create(new ValueChanged { Value = value }));
+                    foreach (var @event in events)
+                    {
+                        handleEvent(Envelope.Create(@event));
+                    }
                 });
 
             A.CallTo(() => persistenceFactory.WithSnapshotsAndEventSourcing(typeof(MyDomainObject), id, A<HandleSnapshot<MyDomainState>>._, A<HandleEvent>._))

backend/tests/Squidex.Infrastructure.Tests/TestHelpers/MyDomainState.cs

@@ -34,6 +34,17 @@ namespace Squidex.Infrastructure.TestHelpers
         }
     }
 
+    public sealed class MultipleByTwiceEvent : IEvent, IMigratedStateEvent<MyDomainState>
+    {
+        public IEvent Migrate(MyDomainState state)
+        {
+            return new ValueChanged
+            {
+                Value = state.Value * 2
+            };
+        }
+    }
+
     public sealed class ValueChanged : IEvent
     {
         public long Value { get; set; }

frontend/app/features/rules/module.ts

@@ -25,6 +25,10 @@ const routes: Routes = [
                 path: 'events',
                 component: RuleEventsPageComponent
             },
+            {
+                path: 'simulator',
+                component: RuleSimulatorPageComponent
+            },
             {
                 path: 'help',
                 component: HelpComponent,

frontend/app/features/rules/pages/events/rule-event.component.html

@@ -45,7 +45,7 @@
         </div>
         <div class="row event-dump" *ngIf="event.lastDump">
             <div class="col-12">
-                <sqx-code-editor [ngModel]="event.lastDump" [disabled]="true" [wordWrap]="true" mode="ace/editor/text"></sqx-code-editor>
+                <sqx-code-editor [ngModel]="event.lastDump" [disabled]="true" [wordWrap]="true" height="auto" mode="ace/editor/text"></sqx-code-editor>
             </div>
         </div>
     </td>

frontend/app/features/rules/pages/events/rule-events-page.component.ts

@@ -6,7 +6,8 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { Router2State, RuleEventDto, RuleEventsState } from '@app/shared';
+import { ActivatedRoute } from '@angular/router';
+import { ResourceOwner, Router2State, RuleEventDto, RuleEventsState } from '@app/shared';
 
 @Component({
     selector: 'sqx-rule-events-page',
@@ -16,24 +17,30 @@ import { Router2State, RuleEventDto, RuleEventsState } from '@app/shared';
         Router2State
     ]
 })
-export class RuleEventsPageComponent implements OnInit {
+export class RuleEventsPageComponent extends ResourceOwner implements OnInit {
     public selectedEventId: string | null = null;
 
     constructor(
+        private readonly route: ActivatedRoute,
         public readonly ruleEventsRoute: Router2State,
         public readonly ruleEventsState: RuleEventsState
     ) {
+        super();
     }
 
     public ngOnInit() {
-        const initial =
-            this.ruleEventsRoute.mapTo(this.ruleEventsState)
-                .withPaging('rules', 30)
-                .withString('query')
-                .getInitial();
-
-        this.ruleEventsState.load(false, initial);
-        this.ruleEventsRoute.unlisten();
+        this.own(
+            this.route.queryParams
+                .subscribe(() => {
+                    const initial =
+                        this.ruleEventsRoute.mapTo(this.ruleEventsState)
+                            .withPaging('rules', 30)
+                            .withString('ruleId')
+                            .withString('query')
+                            .getInitial();
+
+                    this.ruleEventsState.load(false, initial);
+                }));
     }
 
     public reload() {

frontend/app/features/rules/pages/rule/rule-page.component.html

@@ -34,7 +34,7 @@
                             </div>
         
                             <div class="col col-icon" *ngIf="currentTrigger">
-                                <sqx-rule-element [type]="currentTrigger.type" [isSmall]="true" [element]="triggerElement"></sqx-rule-element>
+                                <sqx-rule-element [type]="currentTrigger.type" [isSmall]="true" [element]="triggerElement" [disabled]="true"></sqx-rule-element>
                             </div>
 
                             <div class="col text-right" *ngIf="currentTrigger && !rule">
@@ -97,7 +97,7 @@
                             </div>
 
                             <div class="col col-icon" *ngIf="currentAction">
-                                <sqx-rule-element [type]="currentAction.type" [isSmall]="true" [element]="actionElement"></sqx-rule-element>
+                                <sqx-rule-element [type]="currentAction.type" [isSmall]="true" [element]="actionElement" [disabled]="true"></sqx-rule-element>
                             </div>
 
                             <div class="col text-right" *ngIf="currentAction && !rule">

frontend/app/features/rules/pages/rules/rule.component.html

@@ -103,6 +103,10 @@
                 <a routerLink="events" [queryParams]="{ ruleId: rule.id }" *ngIf="rule.canTrigger">
                     {{ 'common.logs' | sqxTranslate }}
                 </a>
+                
+                <a routerLink="simulator" [queryParams]="{ ruleId: rule.id }" *ngIf="!isManual" class="ml-1">
+                    {{ 'rules.simulator' | sqxTranslate }}
+                </a>
             </div>
         </div>
     </div>

frontend/app/features/rules/shared/actions/formattable-input.component.html

@@ -1,6 +1,6 @@
 <ng-container *ngIf="type === 'Text'; else textarea">
     <div class="input-group">
-        <input class="form-control" />
+        <input class="form-control" ngDefaultControl />
 
         <div class="input-group-apppend">
             <select class="custom-select" [ngModel]="mode" (ngModelChange)="setMode($event)" [disabled]="disabled">

frontend/app/features/rules/shared/rule-element.component.html

@@ -1,5 +1,5 @@
 <ng-container *ngIf="isSmall; else large">
-    <div class="small" *ngIf="element" [style.background]="element.iconColor" [sqxHoverBackground]="element.iconColor | sqxDarken:5">
+    <div class="small root" [class.disabled]="disabled" [style.background]="element.iconColor" [sqxHoverBackground]="element.iconColor | sqxDarken:5">
         <div class="small-icon" [style.background]="element.iconColor | sqxDarken:5">
             <sqx-rule-icon size="md" [element]="element"></sqx-rule-icon>
         </div>
@@ -10,7 +10,7 @@
 </ng-container>
 
 <ng-template #large>
-    <div class="row no-gutters large">
+    <div class="row no-gutters large root" [class.disabled]="disabled">
         <div class="col-auto">
             <div class="large-icon" [style.background]="element.iconColor | sqxDarken:5">
                 <sqx-rule-icon size="lg" [element]="element"></sqx-rule-icon>

frontend/app/features/rules/shared/rule-element.component.scss

@@ -1,3 +1,13 @@
+.root {
+    & {
+        cursor: pointer;
+    }
+
+    &.disabled {
+        cursor: default;
+    }
+}
+
 .small {
     & {
         height: 3rem;

frontend/app/features/rules/shared/rule-element.component.ts

@@ -23,4 +23,7 @@ export class RuleElementComponent {
 
     @Input()
     public isSmall?: boolean | null = true;
+
+    @Input()
+    public disabled: boolean;
 }

frontend/app/features/settings/pages/contributors/contributors-page.component.ts

@@ -36,7 +36,6 @@ export class ContributorsPageComponent implements OnInit {
                 .getInitial();
 
         this.contributorsState.load(false, initial);
-        this.contributorsRoute.unlisten();
     }
 
     public reload() {