[GH-190] Add global option to disable randomized card icons (#310)

Relates to: #190

webapp/i18n/en.json

@@ -105,6 +105,7 @@
   "Sidebar.logout": "Log out",
   "Sidebar.no-views-in-board": "No pages inside",
   "Sidebar.occitan": "Occitan",
+  "Sidebar.random-icons": "Random icons",
   "Sidebar.russian": "Russian",
   "Sidebar.select-a-template": "Select a template",
   "Sidebar.set-language": "Set language",

webapp/src/components/centerPanel.tsx

@@ -11,6 +11,7 @@ import {CardFilter} from '../cardFilter'
 import mutator from '../mutator'
 import {Utils} from '../utils'
 import {BoardTree} from '../viewModel/boardTree'
+import {UserSettings} from '../userSettings'
 
 import './centerPanel.scss'
 import CardDialog from './cardDialog'
@@ -217,7 +218,7 @@ class CenterPanel extends React.Component<Props, State> {
             }
         }
         card.properties = {...card.properties, ...propertiesThatMeetFilters}
-        if (!card.icon) {
+        if (!card.icon && UserSettings.prefillRandomIcons) {
             card.icon = BlockIcons.shared.randomIcon()
         }
         await mutator.insertBlock(

webapp/src/components/sidebar/sidebarSettingsMenu.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React, {useContext} from 'react'
+import React, {useContext, useState} from 'react'
 import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
 
 import {Archiver} from '../../archiver'
@@ -8,6 +8,7 @@ import {darkTheme, defaultTheme, lightTheme, setTheme, Theme} from '../../theme'
 import Menu from '../../widgets/menu'
 import MenuWrapper from '../../widgets/menuWrapper'
 import {SetLanguageContext} from '../../setLanguageContext'
+import {UserSettings} from '../../userSettings'
 
 import './sidebarSettingsMenu.scss'
 
@@ -26,6 +27,12 @@ const SidebarSettingsMenu = React.memo((props: Props) => {
         props.setWhiteLogo(whiteLogo)
     }
 
+    const [randomIcons, setRandomIcons] = useState(UserSettings.prefillRandomIcons)
+    const toggleRandomIcons = () => {
+        UserSettings.prefillRandomIcons = !UserSettings.prefillRandomIcons
+        setRandomIcons(!randomIcons)
+    }
+
     return (
         <div className='SidebarSettingsMenu'>
             <MenuWrapper>
@@ -128,6 +135,12 @@ const SidebarSettingsMenu = React.memo((props: Props) => {
                             onClick={async () => updateTheme(null)}
                         />
                     </Menu.SubMenu>
+                    <Menu.Switch
+                        id='random-icons'
+                        name={intl.formatMessage({id: 'Sidebar.random-icons', defaultMessage: 'Random icons'})}
+                        isOn={randomIcons}
+                        onClick={async () => toggleRandomIcons()}
+                    />
                 </Menu>
             </MenuWrapper>
         </div>

webapp/src/userSettings.ts

@@ -0,0 +1,14 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+class UserSettings {
+    static get prefillRandomIcons(): boolean {
+        return localStorage.getItem('randomIcons') !== 'false'
+    }
+
+    static set prefillRandomIcons(newValue: boolean) {
+        localStorage.setItem('randomIcons', JSON.stringify(newValue))
+    }
+}
+
+export {UserSettings}