Merge pull request #13815 from strapi/fix/ui-bug-datetimepicker-from-another-locale-13674

fix/ui-bug-datetimepicker-from-another-locale-13674

packages/core/database/lib/query/helpers/where.js

@@ -134,7 +134,9 @@ const processWhere = (where, ctx) => {
     }
 
     if (isOperator(key)) {
-      throw new Error(`Only $and, $or and $not can only be used as root level operators. Found ${key}.`);
+      throw new Error(
+        `Only $and, $or and $not can only be used as root level operators. Found ${key}.`
+      );
     }
 
     const attribute = meta.attributes[key];

packages/core/helper-plugin/.gitignore

@@ -12,4 +12,5 @@ yarn-error.log
 .DS_Store
 npm-debug.log
 .idea
-stats.html
+stats.html
+coverage

packages/core/helper-plugin/lib/src/components/DateTimePicker/DateTimePicker.stories.mdx

@@ -4,7 +4,22 @@ import { useState } from 'react';
 import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 import DateTimePicker from './index';
 
-<Meta title="components/DateTimePicker" component={DateTimePicker} />
+<Meta 
+  title="components/DateTimePicker" 
+  component={DateTimePicker}
+  argTypes={{
+    label: {
+      control: { 
+        type: 'text'
+      }
+    },
+    value: {
+      control: {
+        type: 'date'
+      }
+    }
+  }}
+/>
 
 # DateTimePicker
 
@@ -38,7 +53,6 @@ Description...
 <Canvas>
   <Story name="error">
     <DateTimePicker
-      label="Date time picker"
       hint="This is a super description"
       error="Very very very very very very very long error"
     />
@@ -54,7 +68,7 @@ Description...
     <DateTimePicker
       label="Date time picker"
       hint="This is a super description"
-      value="2021-10-13T10dd:00:00.000Z"
+      value="2021-10-13T10:00:00.000Z"
     />
   </Story>
 </Canvas>

packages/core/helper-plugin/lib/src/components/DateTimePicker/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Stack } from '@strapi/design-system/Stack';
@@ -109,6 +109,21 @@ const DateTimePicker = ({
     }
   };
 
+  useEffect(() => {
+    if (value) {
+      const parsedData = parseDate(value);
+      setDateValue(parsedData);
+      setTimeValue(
+        parsedData
+          ? `${parsedData.getHours()}:${parsedData.getMinutes()}:${parsedData.getSeconds()}`
+          : null
+      );
+    } else {
+      setDateValue(undefined);
+      setTimeValue(undefined);
+    }
+  }, [value]);
+
   return (
     <CustomField
       name={name}

packages/core/helper-plugin/lib/src/components/DateTimePicker/tests/index.test.js

@@ -40,4 +40,67 @@ describe('DateTimePicker', () => {
 
     expect(datepicker.value).toBe('10/13/2021');
   });
+
+  it('should rerender a new value passed as props', () => {
+    const { rerender } = render(
+      <ThemeProvider theme={lightTheme}>
+        <DateTimePicker
+          value={new Date('2021-10-13T13:43:00.000Z')}
+          step={15}
+          onChange={() => {}}
+          name="datetimepicker"
+          label="Date time picker"
+          hint="This is a super description"
+        />
+      </ThemeProvider>
+    );
+
+    rerender(
+      <ThemeProvider theme={lightTheme}>
+        <DateTimePicker
+          value={new Date('2021-10-04T13:00:00.000Z')}
+          step={15}
+          onChange={() => {}}
+          name="datetimepicker"
+          label="Date time picker"
+          hint="This is a super description"
+        />
+      </ThemeProvider>
+    );
+
+    const datepicker = screen.getByTestId('datetimepicker-date');
+
+    expect(datepicker.value).toBe('10/4/2021');
+  });
+
+  it('should rerender an empty value if it is passed as props', () => {
+    const { rerender } = render(
+      <ThemeProvider theme={lightTheme}>
+        <DateTimePicker
+          value={new Date('2021-10-13T13:43:00.000Z')}
+          step={15}
+          onChange={() => {}}
+          name="datetimepicker"
+          label="Date time picker"
+          hint="This is a super description"
+        />
+      </ThemeProvider>
+    );
+
+    rerender(
+      <ThemeProvider theme={lightTheme}>
+        <DateTimePicker
+          step={15}
+          onChange={() => {}}
+          name="datetimepicker"
+          label="Date time picker"
+          hint="This is a super description"
+        />
+      </ThemeProvider>
+    );
+
+    const datepicker = screen.getByTestId('datetimepicker-date');
+
+    expect(datepicker.value).toBe('');
+  });
 });

packages/core/helper-plugin/package.json

@@ -35,6 +35,7 @@
     "prepublishOnly": "npm run build",
     "storybook": "start-storybook -p 6006",
     "test:front": "jest --config ./jest.config.front.js",
+    "test:front:cov": "jest --config ./jest.config.front.js --coverage --collectCoverageFrom='<rootDir>/packages/core/helper-plugin/lib/src/**/*.js' --coverageDirectory='<rootDir>/packages/core/helper-plugin/coverage'",
     "test:front:watch": "jest --config ./jest.config.front.js --watchAll",
     "watch": "yarn create:index && cross-env NODE_ENV=development webpack-cli -w"
   },

test/config/front/global-setup.js

@@ -1,3 +1,4 @@
 module.exports = async () => {
   process.env.TZ = 'UTC';
+  process.env.LANG = 'en_US.UTF-8';
 };