[GH-778] Remove date format from the user settings (#790)

* Preferred date format removed from user settings.
Date format is always `MM/DD/YYYY` for editing in the input.

* Snapshots for jest tests updated.

webapp/src/components/propertyValueElement.tsx

@@ -19,7 +19,6 @@ import EditableDayPicker from '../widgets/editableDayPicker'
 import Switch from '../widgets/switch'
 
 import {CardTree} from '../viewModel/cardTree'
-import {UserSettings} from '../userSettings'
 
 import UserProperty from './properties/user/user'
 import MultiSelectProperty from './properties/multiSelect'
@@ -160,7 +159,6 @@ const PropertyValueElement = (props:Props): JSX.Element => {
             <EditableDayPicker
                 className='octo-propertyvalue'
                 value={value as string}
-                dateFormat={UserSettings.preferredDateFormat}
                 onChange={(newValue) => mutator.changePropertyValue(card, propertyTemplate.id, newValue)}
             />
         )

webapp/src/components/sidebar/__snapshots__/sidebarSettingsMenu.test.tsx.snap

@@ -301,28 +301,6 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                 />
               </svg>
             </div>
-            <div
-              class="MenuOption SubMenuOption menu-option"
-              id="date-format"
-            >
-              <div
-                class="noicon"
-              />
-              <div
-                class="menu-name"
-              >
-                Set date format
-              </div>
-              <svg
-                class="SubmenuTriangleIcon Icon"
-                viewBox="0 0 100 100"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <polygon
-                  points="50,35 75,50 50,65"
-                />
-              </svg>
-            </div>
             <div
               class="MenuOption SwitchOption menu-option"
             >
@@ -486,28 +464,6 @@ exports[`components/sidebar/SidebarSettingsMenu settings menu open should match
                 />
               </svg>
             </div>
-            <div
-              class="MenuOption SubMenuOption menu-option"
-              id="date-format"
-            >
-              <div
-                class="noicon"
-              />
-              <div
-                class="menu-name"
-              >
-                Set date format
-              </div>
-              <svg
-                class="SubmenuTriangleIcon Icon"
-                viewBox="0 0 100 100"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <polygon
-                  points="50,35 75,50 50,65"
-                />
-              </svg>
-            </div>
             <div
               class="MenuOption SwitchOption menu-option"
             >
@@ -753,28 +709,6 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
                 </div>
               </div>
             </div>
-            <div
-              class="MenuOption SubMenuOption menu-option"
-              id="date-format"
-            >
-              <div
-                class="noicon"
-              />
-              <div
-                class="menu-name"
-              >
-                Set date format
-              </div>
-              <svg
-                class="SubmenuTriangleIcon Icon"
-                viewBox="0 0 100 100"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <polygon
-                  points="50,35 75,50 50,65"
-                />
-              </svg>
-            </div>
             <div
               class="MenuOption SwitchOption menu-option"
             >

webapp/src/components/sidebar/sidebarSettingsMenu.tsx

@@ -14,9 +14,6 @@ import {
     setTheme, systemThemeName,
     Theme,
 } from '../../theme'
-import {
-    defaultDateFormat, dmyDateFormat,
-} from '../../dateFormat'
 import Menu from '../../widgets/menu'
 import MenuWrapper from '../../widgets/menuWrapper'
 import {useAppDispatch} from '../../store/hooks'
@@ -53,12 +50,6 @@ const SidebarSettingsMenu = React.memo((props: Props) => {
         setRandomIcons(!randomIcons)
     }
 
-    const [preferredDateFormat, setPreferredDateFormat] = useState(UserSettings.preferredDateFormat)
-    const updatePreferredDateFormat = (newDateFormat: string) => {
-        UserSettings.preferredDateFormat = newDateFormat
-        setPreferredDateFormat(newDateFormat)
-    }
-
     const languages = [
         {
             code: 'en',
@@ -140,19 +131,6 @@ const SidebarSettingsMenu = React.memo((props: Props) => {
         },
     ]
 
-    const dateFormats = [
-        {
-            id: defaultDateFormat,
-            displayName: 'MM/DD/YYYY',
-            value: 'MM/DD/YYYY',
-        },
-        {
-            id: dmyDateFormat,
-            displayName: 'DD/MM/YYYY',
-            value: 'DD/MM/YYYY',
-        },
-    ]
-
     return (
         <div className='SidebarSettingsMenu'>
             <MenuWrapper>
@@ -209,25 +187,6 @@ const SidebarSettingsMenu = React.memo((props: Props) => {
                             )
                         }
                     </Menu.SubMenu>
-                    <Menu.SubMenu
-                        id='date-format'
-                        name={intl.formatMessage({id: 'Sidebar.set-date-format', defaultMessage: 'Set date format'})}
-                        position='top'
-                    >
-                        {
-                            dateFormats.map((dateFormat) =>
-                                (
-                                    <Menu.Text
-                                        key={dateFormat.id}
-                                        id={dateFormat.id}
-                                        name={intl.formatMessage({id: `Sidebar.${dateFormat.id}`, defaultMessage: dateFormat.displayName})}
-                                        onClick={async () => updatePreferredDateFormat(dateFormat.value)}
-                                        rightIcon={preferredDateFormat === dateFormat.value ? <CheckIcon/> : null}
-                                    />
-                                ),
-                            )
-                        }
-                    </Menu.SubMenu>
                     <Menu.Switch
                         id='random-icons'
                         name={intl.formatMessage({id: 'Sidebar.random-icons', defaultMessage: 'Random icons'})}

webapp/src/dateFormat.ts

@@ -1,4 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-export const defaultDateFormat = 'default-date-format'
-export const dmyDateFormat = 'dmy-date-format'

webapp/src/userSettings.ts

@@ -9,17 +9,9 @@ export class UserSettings {
     static set prefillRandomIcons(newValue: boolean) {
         localStorage.setItem('randomIcons', JSON.stringify(newValue))
     }
-
-    static get preferredDateFormat(): string {
-        return localStorage.getItem('preferredDateFormat') || 'MM/DD/YYYY'
-    }
-
-    static set preferredDateFormat(newValue: string) {
-        localStorage.setItem('preferredDateFormat', newValue)
-    }
 }
 
-const keys = ['language', 'theme', 'lastBoardId', 'lastViewId', 'emoji-mart.last', 'emoji-mart.frequently', 'randomIcons', 'preferredDateFormat']
+const keys = ['language', 'theme', 'lastBoardId', 'lastViewId', 'emoji-mart.last', 'emoji-mart.frequently', 'randomIcons']
 
 export function exportUserSettingsBlob(): string {
     return window.btoa(exportUserSettings())

webapp/src/widgets/editableDayPicker.tsx

@@ -13,7 +13,6 @@ import './editableDayPicker.scss'
 type Props = {
     className: string
     value: string
-    dateFormat: string
     onChange: (value: string | undefined) => void
 }
 
@@ -37,8 +36,10 @@ const displayDate = (date: Date | undefined, intl: IntlShape): string | undefine
     return Utils.displayDate(date, intl)
 }
 
+const dateFormat = 'MM/DD/YYYY'
+
 function EditableDayPicker(props: Props): JSX.Element {
-    const {className, onChange, dateFormat} = props
+    const {className, onChange} = props
     const intl = useIntl()
     const [value, setValue] = useState(() => parseValue(props.value))
     const [dayPickerVisible, setDayPickerVisible] = useState(false)