[NU-1940] Add seconds to sample generator period editor and remove white arrows

designer/client/src/components/graph/node-modal/editors/expression/Duration/TimeRangeComponent.tsx

@@ -65,15 +65,14 @@ export default function TimeRangeComponent(props: Props) {
             <input
                 readOnly={readOnly}
                 value={value[component.fieldName] || ""}
-                onChange={(event) => onChange(component.fieldName, parseInt(event.target.value))}
+                onChange={(event) => onChange(component.fieldName, event.target.value)}
                 className={cx([
                     nodeInput,
                     "time-range-input",
                     showValidation && !isValid && nodeInputWithError,
                     isMarked && "marked",
                     readOnly && "read-only",
                 ])}
-                type={"number"}
             />
             <span className={"time-range-component-label"}>{component.label}</span>
         </div>

designer/client/src/components/graph/node-modal/editors/expression/Duration/TimeRangeEditor.tsx

@@ -24,11 +24,15 @@ export default function TimeRangeEditor(props: Props): JSX.Element {
     const [value, setValue] = useState(() => decode(expression));
 
     const onComponentChange = useCallback(
-        (fieldName: string, fieldValue: number) => {
-            setValue({
-                ...value,
-                [fieldName]: isNaN(fieldValue) ? null : fieldValue,
-            });
+        (fieldName: string, fieldValue: string) => {
+            // treating empty string as null to allow deleting single digit
+            const parsedValue = fieldValue === "" ? null : parseInt(fieldValue);
+            if (parsedValue === null || !isNaN(parsedValue)) {
+                setValue({
+                    ...value,
+                    [fieldName]: parsedValue,
+                });
+            }
         },
         [value],
     );

designer/client/test/Editors/DurationEditor-test.tsx

@@ -29,7 +29,6 @@ describe(DurationEditor.name, () => {
             </NuThemeProvider>,
         );
 
-        expect(screen.getByRole("spinbutton")).toHaveClass(nodeInputWithError);
         expect(screen.getByText("validation error")).toBeInTheDocument();
     });
 });

designer/client/test/Editors/PeriodEditor-test.tsx

@@ -29,7 +29,6 @@ describe(PeriodEditor.name, () => {
             </NuThemeProvider>,
         );
 
-        expect(screen.getByRole("spinbutton")).toHaveClass(nodeInputWithError);
         expect(screen.getByText("validation error")).toBeInTheDocument();
     });
 });

docs/Changelog.md

@@ -32,8 +32,10 @@
 * [#7341](https://github.com/TouK/nussknacker/pull/7341) Added possibility to choose presets and define lists for Integer typed parameter inputs in fragments.
 * [#7356](https://github.com/TouK/nussknacker/pull/7356) Integers converted to BigDecimals have scale 18,
   this fixes issue with unexpected low scale when performing division on BigDecimals which were created in such conversion.
-* [#7368](https://github.com/TouK/nussknacker/pull/7368) Component rename: `periodic` to `sample-generator`
 * [#7379](https://github.com/TouK/nussknacker/pull/7379) Removed CustomAction mechanism.
+* Changes to `periodic` component (renamed to `sample-generator`):
+    * [#7368](https://github.com/TouK/nussknacker/pull/7368) Component rename: `periodic` to `sample-generator`
+    * [#7373](https://github.com/TouK/nussknacker/pull/7373) Improvements to `period` editor
 
 ## 1.18
 

engine/flink/components/base-unbounded/src/main/scala/pl/touk/nussknacker/engine/flink/util/transformer/SampleGeneratorSourceFactory.scala

@@ -8,6 +8,7 @@ import org.apache.flink.streaming.api.functions.source.SourceFunction
 import org.apache.flink.util.Collector
 import pl.touk.nussknacker.engine.api._
 import pl.touk.nussknacker.engine.api.component.UnboundedStreamComponent
+import pl.touk.nussknacker.engine.api.editor.{DualEditor, DualEditorMode, SimpleEditor, SimpleEditorType}
 import pl.touk.nussknacker.engine.api.process.{BasicContextInitializer, Source, SourceFactory}
 import pl.touk.nussknacker.engine.api.typed.typing.Unknown
 import pl.touk.nussknacker.engine.api.typed.{ReturningType, typing}
@@ -24,6 +25,7 @@ import pl.touk.nussknacker.engine.flink.api.typeinformation.TypeInformationDetec
 import pl.touk.nussknacker.engine.util.TimestampUtils.supportedTypeToMillis
 
 import java.time.Duration
+import java.time.temporal.ChronoUnit
 import java.{util => jul}
 import javax.annotation.Nullable
 import javax.validation.constraints.Min
@@ -50,7 +52,15 @@ class SampleGeneratorSourceFactory(timestampAssigner: TimestampWatermarkHandler[
   @silent("deprecated")
   @MethodToInvoke
   def create(
-      @ParamName("period") period: Duration,
+      @ParamName("period")
+      @DualEditor(
+        simpleEditor = new SimpleEditor(
+          `type` = SimpleEditorType.DURATION_EDITOR,
+          timeRangeComponents = Array(ChronoUnit.DAYS, ChronoUnit.HOURS, ChronoUnit.MINUTES, ChronoUnit.SECONDS)
+        ),
+        defaultMode = DualEditorMode.SIMPLE
+      )
+      period: Duration,
       // TODO: @DefaultValue(1) instead of nullable
       @ParamName("count") @Nullable @Min(1) nullableCount: Integer,
       @ParamName("value") value: LazyParameter[AnyRef]