UI: Refactoring singletonMode in rule chain nodes

ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html

@@ -24,7 +24,7 @@
 <form [formGroup]="ruleNodeFormGroup" class="mat-padding">
   <fieldset [disabled]="(isLoading$ | async) || !isEdit || isReadOnly">
     <section>
-      <section fxLayout="column" fxLayout.gt-sm="row">
+      <section class="title-row">
         <mat-form-field fxFlex class="mat-block">
           <mat-label translate>rulenode.name</mat-label>
           <input matInput formControlName="name" required>
@@ -36,12 +36,14 @@
             {{ 'rulenode.name-max-length' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-checkbox formControlName="debugMode">
-          {{ 'rulenode.debug-mode' | translate }}
-        </mat-checkbox>
-        <mat-checkbox *ngIf="isSingletonEditAllowed()" formControlName="singletonMode">
-          {{ 'rulenode.singleton-mode' | translate }}
-        </mat-checkbox>
+        <section class="node-setting">
+          <mat-slide-toggle formControlName="debugMode">
+            {{ 'rulenode.debug-mode' | translate }}
+          </mat-slide-toggle>
+          <mat-slide-toggle *ngIf="isSingletonEditAllowed()" formControlName="singletonMode">
+            {{ 'rulenode.singleton-mode' | translate }}
+          </mat-slide-toggle >
+        </section>
       </section>
       <tb-rule-node-config #ruleNodeConfigComponent
         formControlName="configuration"

ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.scss

@@ -13,8 +13,30 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import './../scss/constants';
+
 :host {
   form {
     overflow-x: hidden !important;
   }
+  .title-row {
+    display: flex;
+    flex-direction: column;
+
+    .node-setting {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin-bottom: 5px;
+    }
+
+    @media #{$mat-gt-sm} {
+      flex-direction: row;
+      gap: 8px;
+
+      .node-setting {
+        margin-top: 5px;
+      }
+    }
+  }
 }

ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts

@@ -26,7 +26,7 @@ import { RuleChainService } from '@core/http/rule-chain.service';
 import { RuleNodeConfigComponent } from './rule-node-config.component';
 import { Router } from '@angular/router';
 import { RuleChainType } from '@app/shared/models/rule-chain.models';
-import { ComponentSingletonSupport } from "@shared/models/component-descriptor.models";
+import { ComponentSingletonSupport } from '@shared/models/component-descriptor.models';
 
 @Component({
   selector: 'tb-rule-node',

ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts

@@ -89,6 +89,7 @@ import { DebugEventType, EventType } from '@shared/models/event.models';
 import { MatMiniFabButton } from '@angular/material/button';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { VersionControlComponent } from '@home/components/vc/version-control.component';
+import { ComponentSingletonSupport } from '@shared/models/component-descriptor.models';
 import Timeout = NodeJS.Timeout;
 
 @Component({
@@ -469,6 +470,7 @@ export class RuleChainPageComponent extends PageComponent
         component: ruleNodeComponent,
         name: '',
         nodeClass: desc.nodeClass,
+        singletonMode: ruleNodeComponent.singleton !== ComponentSingletonSupport.NOT_SUPPORTED,
         icon,
         iconUrl,
         x: 30,

ui-ngx/src/app/shared/models/rule-node.models.ts

@@ -309,6 +309,7 @@ export interface RuleNodeComponentDescriptor extends ComponentDescriptor {
 
 export interface FcRuleNodeType extends FcNode {
   component?: RuleNodeComponentDescriptor;
+  singletonMode?: boolean;
   nodeClass?: string;
   icon?: string;
   iconUrl?: string;
@@ -319,7 +320,6 @@ export interface FcRuleNode extends FcRuleNodeType {
   additionalInfo?: any;
   configuration?: RuleNodeConfiguration;
   debugMode?: boolean;
-  singletonMode?: boolean;
   error?: string;
   highlighted?: boolean;
   componentClazz?: string;