Replace transformation from UTC to local

src/components/ElementEditor/ElementEditor.tsx

@@ -15,6 +15,7 @@ import {
   RequestMethod,
   STRING_ELEMENT_OPTIONS,
   TEST_IDS,
+  TIME_TRANSFORMATION_OPTIONS,
 } from '../../constants';
 import { CodeLanguage, LocalFormElement, QueryField } from '../../types';
 import {
@@ -356,6 +357,18 @@ export const ElementEditor: React.FC<Props> = ({
             value={element.max}
             data-testid={TEST_IDS.formElementsEditor.fieldMaxDate}
           />
+          <InlineField label="Time Zone" data-testid={TEST_IDS.formElementsEditor.fieldTimeZone}>
+            <RadioButtonGroup
+              options={TIME_TRANSFORMATION_OPTIONS}
+              value={element.isUseLocalTime}
+              onChange={(value) => {
+                onChange({
+                  ...element,
+                  isUseLocalTime: value,
+                });
+              }}
+            />
+          </InlineField>
         </>
       )}
 

src/components/FormElement/FormElement.tsx

@@ -283,7 +283,7 @@ export const FormElement: React.FC<Props> = ({ element, onChange, highlightClass
               onChange={(dateTime: DateTime) => {
                 onChange<typeof element>({
                   ...element,
-                  value: dateTime.toISOString(),
+                  value: dateTime.toISOString(element.isUseLocalTime),
                 });
               }}
               data-testid={TEST_IDS.formElements.fieldDateTime}

src/components/FormElementsEditor/FormElementsEditor.test.tsx

@@ -1334,6 +1334,29 @@ describe('Form Elements Editor', () => {
       expect(fieldSelectors.fieldMinDate(true)).not.toBeInTheDocument();
     });
 
+    it('Should update timeZone', async () => {
+      const element = { ...FORM_ELEMENT_DEFAULT, id: 'timeID', type: FormElementType.DATETIME, isUseLocalTime: false };
+      const elements = [element];
+      const onChange = jest.fn();
+
+      render(getComponent({ value: elements, onChange }));
+
+      /**
+       * Open id element
+       */
+      const elementSelectors = openElement(element.id, element.type);
+
+      /**
+       * Choose hidden option
+       */
+      const fieldVisibilitySelectors = getFormElementsEditorSelectors(within(elementSelectors.fieldTimeZone()));
+      expect(fieldVisibilitySelectors.timeTransformationOption(false, 'time-utc')).toBeInTheDocument();
+
+      await act(() => fireEvent.click(fieldVisibilitySelectors.timeTransformationOption(true, 'time-local')));
+
+      expect(fieldVisibilitySelectors.timeTransformationOption(true, 'time-local')).toBeChecked();
+    });
+
     it('Should update Code Language', async () => {
       const element = {
         ...FORM_ELEMENT_DEFAULT,

src/constants/form-element.ts

@@ -150,6 +150,24 @@ export const STRING_ELEMENT_OPTIONS: SelectableValue[] = [
   },
 ];
 
+/**
+ * Options to Hide String element
+ */
+export const TIME_TRANSFORMATION_OPTIONS: SelectableValue[] = [
+  {
+    ariaLabel: TEST_IDS.formElementsEditor.timeTransformationOption('time-utc'),
+    description: 'UTC',
+    label: 'UTC',
+    value: false,
+  },
+  {
+    ariaLabel: TEST_IDS.formElementsEditor.timeTransformationOption('time-local'),
+    description: 'Local',
+    label: 'Local',
+    value: true,
+  },
+];
+
 /**
  * Auto Save timeout ms
  */

src/constants/tests.ts

@@ -90,6 +90,7 @@ export const TEST_IDS = {
     fieldDisableIf: 'form-elements-editor field-disable-if',
     fieldUnit: 'data-testid form-elements-editor field-unit',
     fieldVisibility: 'data-testid form-elements-editor field-visibility',
+    fieldTimeZone: 'data-testid form-elements-editor field-time-zone',
     fieldWidth: 'data-testid form-elements-editor field-width',
     fieldNamePicker: 'data-testid form-elements-editor field-name-picker',
     fieldAccept: 'data-testid form-elements-editor field-accept',
@@ -105,6 +106,7 @@ export const TEST_IDS = {
     newElementLabel: 'data-testid form-elements-editor new-element-label',
     newElementType: 'form-elements-editor new-element-type',
     radioOption: (name: string) => `form-elements-editor option-${name}`,
+    timeTransformationOption: (name: string) => `form-elements-editor time-option-${name}`,
     root: 'data-testid form-elements-editor',
     sectionContent: (id: string, type: string) => `data-testid form-elements-editor section-content-${id}-${type}`,
     sectionLabel: (id: string, type: string) => `data-testid form-elements-editor section-label-${id}-${type}`,

src/types/form-element.ts

@@ -323,6 +323,13 @@ export interface DateTimeOptions {
    * @type {string}
    */
   value?: string;
+
+  /**
+   * Is Transfrom to UTC
+   *
+   * @type {boolean}
+   */
+  isUseLocalTime: boolean;
 }
 
 /**

src/utils/form-element.test.ts

@@ -305,9 +305,25 @@ describe('Utils', () => {
       {
         element: {
           type: FormElementType.DATETIME,
+          isUseLocalTime: true,
         },
         name: 'datetime',
         value: date.toISOString(),
+        /**
+         * None UTC format
+         */
+        expectedResult: '2022-02-02T00:00:00.000+00:00',
+      },
+      {
+        element: {
+          type: FormElementType.DATETIME,
+          isUseLocalTime: false,
+        },
+        name: 'datetime',
+        value: date.toISOString(),
+        /**
+         * UTC format
+         */
         expectedResult: date.toISOString(),
       },
       {

src/utils/form-element.ts

@@ -150,6 +150,7 @@ export const getElementWithNewType = (
         ...baseValues,
         value: '',
         type: newType,
+        isUseLocalTime: false,
       };
     }
     case FormElementType.BOOLEAN: {
@@ -552,7 +553,7 @@ export const formatElementValue = (element: LocalFormElement, value: unknown): s
       return '*********';
     }
     case FormElementType.DATETIME: {
-      return value && typeof value === 'string' ? dateTime(value).toISOString() : '';
+      return value && typeof value === 'string' ? dateTime(value).toISOString(element.isUseLocalTime) : '';
     }
     case FormElementType.TIME: {
       return value && typeof value === 'string'