fix(shared-link-settings-modal): correct expiration date formatting (#…

…3545) * fix(shared-link-settings-modal): correct expiration date formatting * fix(shared-link-settings-modal): unit tests * fix(shared-link-settings-modal): unit tests * fix(shared-link-settings-modal): translations * fix(shared-link-settings-modal): translations
box · May 15, 2024 · e47892f · e47892f
1 parent 79a7b40
commit e47892f
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 5 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -5,6 +5,6 @@
     "javascript.validate.enable": false,
     "typescript.validate.enable": true,
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
+        "source.fixAll.eslint": "explicit"
     }
 }
diff --git a/src/features/shared-link-settings-modal/ExpirationSection.js b/src/features/shared-link-settings-modal/ExpirationSection.js
@@ -8,7 +8,7 @@ import Fieldset from '../../components/fieldset';
 
 import messages from './messages';
 
-const displayFormat = {
+export const defaultDisplayFormat = {
     weekday: 'short',
     year: 'numeric',
     month: 'short',
@@ -18,6 +18,7 @@ const displayFormat = {
 const ExpirationSection = ({
     canChangeExpiration,
     dateFormat,
+    dateDisplayFormat = defaultDisplayFormat,
     error,
     expirationCheckboxProps = {},
     expirationDate,
@@ -31,7 +32,7 @@ const ExpirationSection = ({
         <div>
             <DatePicker
                 dateFormat={dateFormat}
-                displayFormat={displayFormat}
+                displayFormat={dateDisplayFormat}
                 error={error}
                 hideLabel
                 inputProps={expirationInputProps}
@@ -65,6 +66,7 @@ const ExpirationSection = ({
 
 ExpirationSection.propTypes = {
     canChangeExpiration: PropTypes.bool.isRequired,
+    dateDisplayFormat: PropTypes.object,
     /** The format of the date value for form submit */
     dateFormat: PropTypes.string,
     error: PropTypes.string,

diff --git a/src/features/shared-link-settings-modal/SharedLinkSettingsModal.js b/src/features/shared-link-settings-modal/SharedLinkSettingsModal.js
@@ -49,6 +49,8 @@ function getAccessNoticeMessageId(accessLevel, canDownload) {
 
 class SharedLinkSettingsModal extends Component {
     static propTypes = {
+        /* Pass dateDisplayFormat to define INTL timezone for formatting date for utc format */
+        dateDisplayFormat: PropTypes.object,
         /** The format of the expiration date value for form submit */
         dateFormat: PropTypes.string,
         hideVanityNameSection: PropTypes.bool,
@@ -291,12 +293,19 @@ class SharedLinkSettingsModal extends Component {
     }
 
     renderExpirationSection() {
-        const { canChangeExpiration, dateFormat, expirationCheckboxProps, expirationInputProps } = this.props;
+        const {
+            canChangeExpiration,
+            dateDisplayFormat,
+            dateFormat,
+            expirationCheckboxProps,
+            expirationInputProps,
+        } = this.props;
         const { expirationDate, isExpirationEnabled, expirationError } = this.state;
 
         return (
             <ExpirationSection
                 canChangeExpiration={canChangeExpiration}
+                dateDisplayFormat={dateDisplayFormat}
                 dateFormat={dateFormat}
                 error={expirationError}
                 expirationCheckboxProps={expirationCheckboxProps}

diff --git a/src/features/shared-link-settings-modal/__tests__/ExpirationSection.test.js b/src/features/shared-link-settings-modal/__tests__/ExpirationSection.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import sinon from 'sinon';
 
-import ExpirationSection from '../ExpirationSection';
+import ExpirationSection, { defaultDisplayFormat } from '../ExpirationSection';
 
 const sandbox = sinon.sandbox.create();
 
@@ -12,6 +12,13 @@ describe('features/shared-link-settings-modal/ExpirationSection', () => {
     const onCheckboxChange = sandbox.stub();
     const onExpirationDateChange = sandbox.stub();
 
+    const dateDisplayFormat = {
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric',
+        timeZone: 'Europe/Warsaw',
+    };
+
     const getWrapper = (props = {}) =>
         shallow(
             <ExpirationSection
@@ -104,5 +111,19 @@ describe('features/shared-link-settings-modal/ExpirationSection', () => {
 
             expect(wrapper.prop('dateFormat')).toEqual(dateFormat);
         });
+
+        test('should use default displayFormat in DatePicker when dateDisplayFormat not defined', () => {
+            const wrapper = getSubsection();
+
+            expect(wrapper.prop('displayFormat')).toEqual(defaultDisplayFormat);
+        });
+
+        test('should pass dateDisplayFormat to DatePicker displayFormat', () => {
+            const wrapper = getSubsection({
+                dateDisplayFormat,
+            });
+
+            expect(wrapper.prop('displayFormat')).toEqual(dateDisplayFormat);
+        });
     });
 });
diff --git a/src/features/shared-link-settings-modal/__tests__/SharedLinkSettingsModal.test.js b/src/features/shared-link-settings-modal/__tests__/SharedLinkSettingsModal.test.js
@@ -26,6 +26,7 @@ describe('features/shared-link-settings-modal/SharedLinkSettingsModal', () => {
     const isDirectLinkAvailable = true;
     const isDirectLinkUnavailableDueToDownloadSettings = true;
     const isDirectLinkUnavailableDueToAccessPolicy = true;
+    const isDirectLinkUnavailableDueToMaliciousContent = false;
 
     const getWrapper = (props = {}) =>
         shallow(
@@ -59,6 +60,7 @@ describe('features/shared-link-settings-modal/SharedLinkSettingsModal', () => {
                 isDirectLinkAvailable={isDirectLinkAvailable}
                 isDirectLinkUnavailableDueToDownloadSettings={isDirectLinkUnavailableDueToDownloadSettings}
                 isDirectLinkUnavailableDueToAccessPolicy={isDirectLinkUnavailableDueToAccessPolicy}
+                isDirectLinkUnavailableDueToMaliciousContent={isDirectLinkUnavailableDueToMaliciousContent}
                 {...props}
             />,
         );
@@ -244,9 +246,16 @@ describe('features/shared-link-settings-modal/SharedLinkSettingsModal', () => {
         test('should render an ExpirationSection', () => {
             const dateFormat = 'utcTime';
             const expirationDate = new Date('11/7/17');
+            const dateDisplayFormat = {
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric',
+                timeZone: 'Europe/Warsaw',
+            };
 
             const wrapper = getWrapper({
                 dateFormat,
+                dateDisplayFormat,
                 expirationTimestamp: 123,
             });
 
@@ -260,6 +269,7 @@ describe('features/shared-link-settings-modal/SharedLinkSettingsModal', () => {
             expect(section.length).toBe(1);
             expect(section.prop('canChangeExpiration')).toEqual(canChangeExpiration);
             expect(section.prop('dateFormat')).toEqual(dateFormat);
+            expect(section.prop('dateDisplayFormat')).toEqual(dateDisplayFormat);
             expect(section.prop('expirationDate')).toEqual(expirationDate);
             expect(section.prop('isExpirationEnabled')).toBe(true);
             expect(section.prop('onCheckboxChange')).toEqual(wrapper.instance().onExpirationCheckboxChange);