SED-3391 plan-editor-does-not-allow-to-set-dynamic-names-for-call-key…

…word-and-call-plan-components-2 (#975)
exense · Nov 1, 2024 · 0c73d67 · 0c73d67
1 parent 617059c
commit 0c73d67
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 41 deletions.
diff --git a/projects/step-core/src/lib/components/artefact-details/artefact-details.component.html b/projects/step-core/src/lib/components/artefact-details/artefact-details.component.html
@@ -33,7 +33,9 @@
     @if (!!artefactMeta?.component) {
       @if (isPlan || isKeyword) {
         <section class="editor plan-or-keyword" [ngClass]="{ 'call-plan': isPlan, 'call-direct-plan': isDirectPlan }">
-          <step-icon class="artefact-hint" [name]="artefactMeta?.icon" [matTooltip]="artefactMeta!.label" />
+          @if (!artefact.dynamicName!.dynamic) {
+            <step-icon class="artefact-hint" [name]="artefactMeta?.icon" [matTooltip]="artefactMeta!.label" />
+          }
           <step-custom-item-render
             id="call-name-input"
             [artefactId]="artefact.id"

diff --git a/projects/step-core/src/lib/components/artefact-details/artefact-details.component.scss b/projects/step-core/src/lib/components/artefact-details/artefact-details.component.scss
@@ -57,10 +57,6 @@ step-artefact-details {
       top: 3rem;
       left: 1rem;
     }
-
-    input {
-      padding-left: 3.5rem;
-    }
   }
   .call-direct-plan {
     .artefact-hint {

diff --git a/...ep-core/src/lib/components/reference-artefact-name/reference-artefact-name.component.html b/...ep-core/src/lib/components/reference-artefact-name/reference-artefact-name.component.html
@@ -1,41 +1,62 @@
 <div class="main-name" [class.with-meta]="referenceMeta">
-  <step-editable-label
-    [ngModel]="artefactName"
-    (ngModelChange)="onArtefactNameChange($event)"
-    [disabled]="isDisabled"
-  />
-  @if (referenceMeta) {
-    <div class="reference-meta" [class.reference-meta-error]="referenceMeta.isError">
-      <step-popover>
-        <step-icon [name]="referenceMeta.icon" />
-        {{ referenceMeta.description }}
-        <step-popover-content>
-          @if (referenceMeta.hintFor === hintFor.KEYWORD) {
-            Click on
-            <step-icon name="edit-2" />
-            to specify selection criteria for any keyword
-          } @else if (referenceMeta.hintFor === hintFor.PLAN) {
-            Click on
-            <step-icon name="edit-2" />
-            to specify selection criteria for any plan
-          }
-        </step-popover-content>
-      </step-popover>
+  @if (!artefact!.dynamicName!.dynamic) {
+    <div class="dynamic-name">
+      <step-editable-label
+        [ngModel]="artefactName"
+        (ngModelChange)="onArtefactNameChange($event)"
+        [disabled]="isDisabled"
+      />
+      <button
+        type="button"
+        matTooltip="Use an expression to replace dynamically the step name at execution time"
+        matTooltipPosition="below"
+        mat-icon-button
+        [disabled]="isDisabled"
+        (click)="switchToDynamicName()"
+      >
+        <step-icon name="zap" />
+      </button>
     </div>
+  } @else {
+    <step-dynamic-textfield
+      label="Name"
+      name="dynamicName"
+      [(ngModel)]="artefact!.dynamicName"
+      (ngModelChange)="syncName($event)"
+      [disabled]="isDisabled"
+    />
   }
-  @if (!isDisabled) {
-    <button
-      type="button"
-      [matTooltip]="_artefactNameConfig.captions.editSelectionCriteria"
-      matTooltipPosition="below"
-      mat-icon-button
-      [color]="isEditorMode ? 'primary' : undefined"
-      (click)="isEditorMode = !isEditorMode"
-    >
-      <step-icon name="edit-2" />
-    </button>
-  }
+  <button
+    type="button"
+    [matTooltip]="_artefactNameConfig.captions.editSelectionCriteria"
+    matTooltipPosition="below"
+    mat-icon-button
+    [color]="isEditorMode ? 'primary' : undefined"
+    (click)="isEditorMode = !isEditorMode"
+    [ngClass]="{ 'dynamic-on': artefact?.dynamicName?.dynamic === true }"
+  >
+    <step-icon name="edit-2" />
+  </button>
 </div>
+@if (referenceMeta) {
+  <div class="reference-meta" [class.reference-meta-error]="referenceMeta.isError">
+    <step-popover>
+      <step-icon [name]="referenceMeta.icon" />
+      {{ referenceMeta.description }}
+      <step-popover-content>
+        @if (referenceMeta.hintFor === hintFor.KEYWORD) {
+          Click on
+          <step-icon name="edit-2" />
+          to specify selection criteria for any keyword
+        } @else if (referenceMeta.hintFor === hintFor.PLAN) {
+          Click on
+          <step-icon name="edit-2" />
+          to specify selection criteria for any plan
+        }
+      </step-popover-content>
+    </step-popover>
+  </div>
+}
 @if (referenceString && referenceString !== artefactName) {
   <div class="references">
     <label>{{ _artefactNameConfig.captions.referenceLabel }}:</label>

diff --git a/...ep-core/src/lib/components/reference-artefact-name/reference-artefact-name.component.scss b/...ep-core/src/lib/components/reference-artefact-name/reference-artefact-name.component.scss
@@ -19,6 +19,7 @@ step-reference-artefact-name {
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    margin-block: 2.5rem;
 
     &.reference-meta-error {
       step-icon {
@@ -29,11 +30,26 @@ step-reference-artefact-name {
 
   .main-name {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    flex: 1;
     gap: 1rem;
 
-    step-editable-label {
+    .dynamic-name {
+      display: flex;
+      flex: 1;
+      justify-content: space-between;
+      align-items: center;
+
+      step-editable-label {
+        flex: 1;
+      }
+    }
+
+    .dynamic-on {
+      align-self: flex-end;
+    }
+
+    step-dynamic-textfield {
       flex: 1;
     }
 

diff --git a/...step-core/src/lib/components/reference-artefact-name/reference-artefact-name.component.ts b/...step-core/src/lib/components/reference-artefact-name/reference-artefact-name.component.ts
@@ -133,6 +133,28 @@ export class ReferenceArtefactNameComponent<A extends Artefact, T = any> impleme
     this.onSave.emit();
   }
 
+  protected syncName(dynamicValue: DynamicValueString): void {
+    if (dynamicValue.dynamic) {
+      return;
+    }
+    this.artefact!.attributes!['name'] = this.artefactName = dynamicValue.value ?? '';
+    this.save();
+  }
+
+  protected switchToDynamicName(): void {
+    this.artefact!.dynamicName!.expression = this.artefact!.attributes!['name'];
+    this.artefact!.dynamicName!.dynamic = true;
+    this.save();
+  }
+
+  save(): void {
+    if (this.isDisabled) {
+      return;
+    }
+    this.artefact!.useDynamicName = this.artefact!.dynamicName!.dynamic;
+    this.onSave.emit(this.artefact);
+  }
+
   private initArtefactName(artefact?: CallFunction): void {
     this.artefactName = '';
     this._changeDetectorRef.detectChanges();