Update date and time input timezone

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 4.5.0 (IN PROGRESS)
+
+### Features / Enhancements
+
+- Updated date and time input timezone (#452)
+
 ## 4.4.0 (2024-08-29)
 
 ### Features / Enhancements

README.md

@@ -2,7 +2,7 @@
 
 ![Forms](https://raw.githubusercontent.com/volkovlabs/business-forms/main/src/img/panel.png)
 
-![Grafana](https://img.shields.io/badge/Grafana-11.1-orange)
+![Grafana](https://img.shields.io/badge/Grafana-11.2-orange)
 [![YouTube](https://img.shields.io/badge/YouTube-Playlist-red)](https://www.youtube.com/playlist?list=PLPow72ygztmRXSNBxyw0sFnnvNRY_CsSA)
 ![CI](https://github.com/volkovlabs/business-forms/workflows/CI/badge.svg)
 ![E2E](https://github.com/volkovlabs/business-forms/workflows/E2E/badge.svg)

package.json

@@ -2,9 +2,9 @@
   "author": "Volkov Labs",
   "dependencies": {
     "@emotion/css": "^11.11.2",
-    "@grafana/data": "^11.1.0",
-    "@grafana/runtime": "^11.1.0",
-    "@grafana/ui": "^11.1.0",
+    "@grafana/data": "^11.2.0",
+    "@grafana/runtime": "^11.2.0",
+    "@grafana/ui": "^11.2.0",
     "@hello-pangea/dnd": "^16.6.0",
     "@volkovlabs/components": "^2.8.1",
     "react": "^18.3.1",
@@ -77,5 +77,5 @@
     "test:ci": "jest --maxWorkers 4 --coverage",
     "upgrade": "npm upgrade --save"
   },
-  "version": "4.4.0"
+  "version": "4.5.0"
 }

src/components/CustomCodeEditor/CustomCodeEditor.test.tsx

@@ -1,11 +1,12 @@
 import { getTemplateSrv } from '@grafana/runtime';
 import { CodeEditor, CodeEditorSuggestionItemKind } from '@grafana/ui';
 import { render, screen } from '@testing-library/react';
-import React from 'react';
+import React, { useEffect } from 'react';
+
+import { CODE_EDITOR_SUGGESTIONS } from '@/constants';
+import { CodeEditorType } from '@/types';
+import { getCustomCodeEditorSelectors } from '@/utils';
 
-import { CODE_EDITOR_SUGGESTIONS } from '../../constants';
-import { CodeEditorType } from '../../types';
-import { getCustomCodeEditorSelectors } from '../../utils';
 import { CustomCodeEditor } from './CustomCodeEditor';
 
 /**
@@ -70,7 +71,9 @@ describe('Custom Code Editor', () => {
     };
 
     jest.mocked(CodeEditor).mockImplementationOnce(({ onEditorDidMount }: any) => {
-      onEditorDidMount(editor);
+      useEffect(() => {
+        onEditorDidMount(editor);
+      }, [onEditorDidMount]);
       return null;
     });
 

src/components/ElementSections/ElementSections.tsx

@@ -64,6 +64,13 @@ interface Props {
    * Execute Custom Code
    */
   executeCustomCode: (params: ExecuteCustomCodeParams) => Promise<unknown>;
+
+  /**
+   * Time Zone
+   *
+   * @type {string}
+   */
+  timeZone: string;
 }
 
 /**
@@ -79,6 +86,7 @@ export const ElementSections: React.FC<Props> = ({
   sectionsExpandedState,
   onChangeSectionExpandedState,
   executeCustomCode,
+  timeZone,
 }) => {
   /**
    * Theme and Styles
@@ -135,6 +143,7 @@ export const ElementSections: React.FC<Props> = ({
                 replaceVariables={replaceVariables}
                 data={data}
                 executeCustomCode={executeCustomCode}
+                timeZone={timeZone}
               />
             )}
           </div>

src/components/FormElement/FormElement.tsx

@@ -3,8 +3,9 @@ import { InterpolateFunction } from '@grafana/data';
 import { InlineFieldRow, InlineLabel, useStyles2 } from '@grafana/ui';
 import React from 'react';
 
-import { FormElementType, TEST_IDS } from '../../constants';
-import { CustomButtonShow, ExecuteCustomCodeParams, LocalFormElement } from '../../types';
+import { FormElementType, TEST_IDS } from '@/constants';
+import { CustomButtonShow, ExecuteCustomCodeParams, LocalFormElement } from '@/types';
+
 import {
   BooleanElement,
   CheckboxListElement,
@@ -67,6 +68,13 @@ interface Props {
    * @type {[id: string]: unknown}
    */
   initial: { [id: string]: unknown };
+
+  /**
+   * Time Zone
+   *
+   * @type {string}
+   */
+  timeZone: string;
 }
 
 /**
@@ -79,6 +87,7 @@ export const FormElement: React.FC<Props> = ({
   executeCustomCode,
   elements,
   initial,
+  timeZone,
 }) => {
   /**
    * Styles and Theme
@@ -115,10 +124,10 @@ export const FormElement: React.FC<Props> = ({
         return <BooleanElement element={element} onChange={onChange} highlightClass={highlightClass} />;
       }
       case FormElementType.DATETIME: {
-        return <DateTimeElement element={element} onChange={onChange} />;
+        return <DateTimeElement element={element} onChange={onChange} timeZone={timeZone} />;
       }
       case FormElementType.TIME: {
-        return <TimeElement element={element} onChange={onChange} />;
+        return <TimeElement element={element} onChange={onChange} timeZone={timeZone} />;
       }
       case FormElementType.SLIDER: {
         return <SliderElement element={element} onChange={onChange} />;

src/components/FormElement/components/DateTimeElement/DateTimeElement.tsx

@@ -21,12 +21,19 @@ interface Props {
    * On Change
    */
   onChange: <T extends LocalFormElement>(element: T) => void;
+
+  /**
+   * Time Zone
+   *
+   * @type {string}
+   */
+  timeZone: string;
 }
 
 /**
  * Date Time Element
  */
-export const DateTimeElement: React.FC<Props> = ({ element, onChange }) => {
+export const DateTimeElement: React.FC<Props> = ({ element, onChange, timeZone }) => {
   return (
     <InlineField
       label={element.title}
@@ -57,6 +64,7 @@ export const DateTimeElement: React.FC<Props> = ({ element, onChange }) => {
             }
           }}
           data-testid={TEST_IDS.formElements.fieldDateTime}
+          timeZone={timeZone}
         />
       )}
     </InlineField>

src/components/FormElement/components/TimeElement/TimeElement.tsx

@@ -1,6 +1,6 @@
-import { DateTime, dateTime } from '@grafana/data';
+import { DateTime, dateTimeForTimeZone, getTimeZone } from '@grafana/data';
 import { InlineField, TimeOfDayPicker } from '@grafana/ui';
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { FormElementType, TEST_IDS } from '@/constants';
 import { FormElementByType, LocalFormElement } from '@/types';
@@ -21,12 +21,29 @@ interface Props {
    * On Change
    */
   onChange: <T extends LocalFormElement>(element: T) => void;
+
+  /**
+   * Time Zone
+   *
+   * @type {string}
+   */
+  timeZone: string;
 }
 
 /**
  * Time Element
  */
-export const TimeElement: React.FC<Props> = ({ element, onChange }) => {
+export const TimeElement: React.FC<Props> = ({ element, onChange, timeZone }) => {
+  /**
+   * To Date Time With Time Zone
+   */
+  const toDateTimeWithTimeZone = useCallback(
+    (date?: string) => {
+      return dateTimeForTimeZone(getTimeZone({ timeZone }), date);
+    },
+    [timeZone]
+  );
+
   return (
     <InlineField
       label={element.title}
@@ -38,7 +55,7 @@ export const TimeElement: React.FC<Props> = ({ element, onChange }) => {
     >
       <TimeOfDayPicker
         data-testid={TEST_IDS.formElements.fieldTime}
-        value={element.value ? dateTime(element.value) : dateTime(new Date().toISOString())}
+        value={element.value ? toDateTimeWithTimeZone(element.value) : toDateTimeWithTimeZone(new Date().toISOString())}
         onChange={(dateTime: DateTime) => {
           onChange<typeof element>({
             ...element,

src/components/FormElements/FormElements.tsx

@@ -3,8 +3,9 @@ import { InterpolateFunction, PanelData } from '@grafana/data';
 import { useTheme2 } from '@grafana/ui';
 import React, { useCallback, useMemo } from 'react';
 
-import { INITIAL_HIGHLIGHT_COLOR_DEFAULT, TEST_IDS } from '../../constants';
-import { ExecuteCustomCodeParams, LayoutSection, LocalFormElement, PanelOptions } from '../../types';
+import { INITIAL_HIGHLIGHT_COLOR_DEFAULT, TEST_IDS } from '@/constants';
+import { ExecuteCustomCodeParams, LayoutSection, LocalFormElement, PanelOptions } from '@/types';
+
 import { FormElement } from '../FormElement';
 
 /**
@@ -56,6 +57,13 @@ interface Props {
    * Execute Custom Code
    */
   executeCustomCode: (params: ExecuteCustomCodeParams) => Promise<unknown>;
+
+  /**
+   * Time Zone
+   *
+   * @type {string}
+   */
+  timeZone: string;
 }
 
 /**
@@ -70,6 +78,7 @@ export const FormElements: React.FC<Props> = ({
   replaceVariables,
   data,
   executeCustomCode,
+  timeZone,
 }) => {
   /**
    * Theme and Styles
@@ -137,6 +146,7 @@ export const FormElements: React.FC<Props> = ({
             executeCustomCode={executeCustomCode}
             initial={initial}
             elements={elements}
+            timeZone={timeZone}
           />
         );
       })}

src/components/FormPanel/FormPanel.tsx

@@ -80,6 +80,7 @@ export const FormPanel: React.FC<Props> = ({
   eventBus,
   replaceVariables,
   data,
+  timeZone,
 }) => {
   /**
    * State
@@ -944,6 +945,7 @@ export const FormPanel: React.FC<Props> = ({
               section={null}
               replaceVariables={replaceVariables}
               executeCustomCode={executeCustomCode}
+              timeZone={timeZone}
             />
           </div>
         ) : (
@@ -957,6 +959,7 @@ export const FormPanel: React.FC<Props> = ({
             sectionsExpandedState={sectionsExpandedState}
             onChangeSectionExpandedState={onChangeSectionExpandedState}
             executeCustomCode={executeCustomCode}
+            timeZone={timeZone}
           />
         )}
       </div>