Add Date picker

provisioning/dashboards/dateTime.json

@@ -74,7 +74,7 @@
         "header": true,
         "isUseLocalTime": false,
         "minimizeDisplayMode": "dateTimePicker",
-        "minimizeOutputFormat": "date",
+        "minimizeOutputFormat": "dateTime",
         "padding": 10,
         "persistent": false,
         "saveSelectedGroup": false,
@@ -89,7 +89,6 @@
         "tabsInOrder": true,
         "variable": "first"
       },
-      "pluginVersion": "3.6.0",
       "targets": [
         {
           "datasource": {
@@ -102,6 +101,86 @@
       "title": "Variable: First - ISO string",
       "type": "volkovlabs-variable-panel"
     },
+    {
+      "datasource": {
+        "name": "Static",
+        "type": "marcusolsson-static-datasource",
+        "uid": "P1D2C73DC01F2359B"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "custom": {
+            "thresholdsStyle": {
+              "mode": "color",
+              "thresholds": []
+            }
+          },
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          }
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 4,
+        "w": 5,
+        "x": 5,
+        "y": 0
+      },
+      "id": 4,
+      "options": {
+        "alwaysVisibleFilter": false,
+        "autoScroll": false,
+        "collapsedByDefault": false,
+        "customValue": false,
+        "displayMode": "minimize",
+        "emptyValue": false,
+        "favorites": {
+          "enabled": false,
+          "storage": "browser"
+        },
+        "filter": false,
+        "groupSelection": false,
+        "header": true,
+        "isUseLocalTime": true,
+        "minimizeDisplayMode": "dateTimePicker",
+        "minimizeOutputFormat": "date",
+        "padding": 10,
+        "persistent": false,
+        "saveSelectedGroup": false,
+        "saveSelectedGroupKey": "",
+        "showGroupTotal": false,
+        "showLabel": false,
+        "showName": false,
+        "showResetButton": false,
+        "showTotal": false,
+        "statusSort": false,
+        "sticky": false,
+        "tabsInOrder": true,
+        "variable": "DateOnly"
+      },
+      "targets": [
+        {
+          "datasource": {
+            "type": "marcusolsson-static-datasource",
+            "uid": "P1D2C73DC01F2359B"
+          },
+          "refId": "A"
+        }
+      ],
+      "title": "Variable: Date Only",
+      "type": "volkovlabs-variable-panel"
+    },
     {
       "datasource": {
         "name": "Static",
@@ -170,7 +249,6 @@
         "tabsInOrder": true,
         "variable": "second"
       },
-      "pluginVersion": "3.6.0",
       "targets": [
         {
           "datasource": {
@@ -251,7 +329,6 @@
         "tabsInOrder": true,
         "variable": "third"
       },
-      "pluginVersion": "3.6.0",
       "targets": [
         {
           "datasource": {
@@ -285,7 +362,7 @@
             "value": "2024-05-05T14:48:00.000Z"
           }
         ],
-        "query": "2024-05-18T14:48:00.000Z",
+        "query": "2024-05-03T14:48:00.000Z",
         "type": "textbox"
       },
       {
@@ -302,7 +379,7 @@
             "value": "1722429030000"
           }
         ],
-        "query": "1721305830000",
+        "query": "1720873830000",
         "type": "textbox"
       },
       {
@@ -312,6 +389,23 @@
         "options": [],
         "query": "",
         "type": "textbox"
+      },
+      {
+        "current": {
+          "text": "2025-01-03",
+          "value": "2025-01-03"
+        },
+        "label": "DateOnly",
+        "name": "DateOnly",
+        "options": [
+          {
+            "selected": true,
+            "text": "2025-01-03",
+            "value": "2025-01-03"
+          }
+        ],
+        "query": "2025-01-03",
+        "type": "textbox"
       }
     ]
   },

src/__mocks__/@grafana/ui.tsx

@@ -22,6 +22,29 @@ const DateTimePickerMock = ({ onChange, date, ...restProps }: any) => {
 
 const DateTimePicker = jest.fn(DateTimePickerMock);
 
+/**
+ * Mock DatePickerWithInput component
+ */
+const DatePickerWithInputMock = ({ onChange, value, ...restProps }: any) => {
+  return (
+    <input
+      data-testid={restProps['data-testid']}
+      value={value}
+      onChange={(event) => {
+        /**
+         * Check Date type handle
+         */
+        const value = event.target.value === '2009-09-09' ? new Date(event.target.value) : event.target.value;
+        if (onChange) {
+          onChange(value);
+        }
+      }}
+    />
+  );
+};
+
+const DatePickerWithInput = jest.fn(DatePickerWithInputMock);
+
 /**
  * Mock Select component
  */
@@ -83,11 +106,13 @@ beforeEach(() => {
   Select.mockImplementation(SelectMock);
   DateTimePicker.mockImplementation(DateTimePickerMock);
   ToolbarButtonRow.mockImplementation(ToolbarButtonRowMock);
+  DatePickerWithInput.mockImplementation(DatePickerWithInputMock);
 });
 
 module.exports = {
   ...actual,
   ToolbarButtonRow,
   Select,
   DateTimePicker,
+  DatePickerWithInput,
 };

src/components/DateSelector/DateSelector.test.tsx

@@ -0,0 +1,168 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { getJestSelectors } from '@volkovlabs/jest-selectors';
+import React from 'react';
+
+import { TEST_IDS } from '../../constants';
+import { getDateInLocalTimeFormat, selectVariableValues } from '../../utils';
+import { DateSelector } from './DateSelector';
+
+/**
+ * Mock utils
+ */
+jest.mock('../../utils', () => ({
+  selectVariableValues: jest.fn(),
+  getDateInLocalTimeFormat: jest.fn(),
+}));
+
+/**
+ * Persistent Storage Mock
+ */
+const persistentStorageMock = {
+  remove: jest.fn(),
+};
+
+/**
+ * Mock hooks
+ */
+jest.mock('../../hooks', () => ({
+  ...jest.requireActual('../../hooks'),
+  usePersistentStorage: jest.fn(() => persistentStorageMock),
+}));
+
+/**
+ * Properties
+ */
+type Props = React.ComponentProps<typeof DateSelector>;
+
+/**
+ * Date Selector
+ */
+describe('Date Time Selector', () => {
+  const defaultVariable = {
+    label: 'dateTimeTS',
+    current: {
+      value: '2025-01-21',
+    },
+  };
+
+  /**
+   * Selectors
+   */
+  const getSelectors = getJestSelectors(TEST_IDS.datePicker);
+  const selectors = getSelectors(screen);
+
+  /**
+   * Get Tested Component
+   */
+  const getComponent = (props: Partial<Props>) => {
+    return <DateSelector variable={defaultVariable} panelEventBus={{} as any} {...(props as any)} />;
+  };
+
+  beforeEach(() => {
+    jest.mocked(selectVariableValues).mockClear();
+    jest.mocked(getDateInLocalTimeFormat).mockClear();
+  });
+
+  it('Should apply initial variable value from variable', () => {
+    render(
+      getComponent({
+        variable: defaultVariable as any,
+      })
+    );
+
+    expect(selectors.root()).toBeVisible();
+    expect(selectors.root()).toHaveValue('2025-01-21');
+  });
+
+  it('Should apply initial variable value from variable if value is empty', () => {
+    const variable = {
+      label: 'dateTimeTS',
+      current: {
+        value: '',
+      },
+    } as any;
+
+    render(
+      getComponent({
+        variable: variable,
+      })
+    );
+
+    expect(selectors.root()).toBeVisible();
+    expect(selectors.root()).toHaveValue('');
+  });
+
+  it('Should update variable value from string', async () => {
+    render(
+      getComponent({
+        variable: defaultVariable as any,
+        persistent: true,
+      })
+    );
+
+    expect(selectors.root()).toBeVisible();
+    expect(selectors.root()).toHaveValue('2025-01-21');
+
+    /**
+     * Change Date
+     */
+    const date = new Date('2024-07-31 12:30:30');
+    await act(() => fireEvent.change(selectors.root(), { target: { value: date.toISOString() } }));
+
+    expect(selectVariableValues).toHaveBeenCalledWith({
+      values: ['2024-07-31'],
+      runtimeVariable: defaultVariable,
+      panelEventBus: {},
+    });
+
+    expect(persistentStorageMock.remove).toHaveBeenCalled();
+  });
+
+  it('Should update variable value', async () => {
+    render(
+      getComponent({
+        variable: defaultVariable as any,
+        persistent: true,
+      })
+    );
+
+    expect(selectors.root()).toBeVisible();
+    expect(selectors.root()).toHaveValue('2025-01-21');
+
+    /**
+     * Change Date
+     */
+    const date = '2009-09-09';
+    await act(() => fireEvent.change(selectors.root(), { target: { value: date } }));
+
+    expect(selectVariableValues).toHaveBeenCalledWith({
+      values: ['2009-09-09'],
+      runtimeVariable: defaultVariable,
+      panelEventBus: {},
+    });
+
+    expect(persistentStorageMock.remove).toHaveBeenCalled();
+  });
+
+  it('Should update variable value in local time', async () => {
+    render(
+      getComponent({
+        variable: defaultVariable as any,
+        persistent: true,
+        isUseLocalTime: true,
+      })
+    );
+
+    expect(selectors.root()).toBeVisible();
+    expect(selectors.root()).toHaveValue('2025-01-21');
+
+    /**
+     * Change Date
+     */
+    const date = '2009-09-09';
+    await act(() => fireEvent.change(selectors.root(), { target: { value: date } }));
+
+    const checkDate = new Date(date);
+    expect(getDateInLocalTimeFormat).toHaveBeenCalledWith(checkDate);
+  });
+});