diff --git a/webapp/channels/src/components/user_settings/display/__snapshots__/user_settings_display.test.tsx.snap b/webapp/channels/src/components/user_settings/display/__snapshots__/user_settings_display.test.tsx.snap index 5a1d7c9f7e..18bdd5c3ae 100644 --- a/webapp/channels/src/components/user_settings/display/__snapshots__/user_settings_display.test.tsx.snap +++ b/webapp/channels/src/components/user_settings/display/__snapshots__/user_settings_display.test.tsx.snap @@ -3552,7 +3552,6 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps allowCustomThemes={true} areAllSectionsInactive={false} selected={true} - setEnforceFocus={[MockFunction]} setRequireConfirm={[MockFunction]} updateSection={[Function]} /> diff --git a/webapp/channels/src/components/user_settings/display/user_settings_display.test.tsx b/webapp/channels/src/components/user_settings/display/user_settings_display.test.tsx index 734db5ccc5..17cdddf666 100644 --- a/webapp/channels/src/components/user_settings/display/user_settings_display.test.tsx +++ b/webapp/channels/src/components/user_settings/display/user_settings_display.test.tsx @@ -34,7 +34,6 @@ describe('components/user_settings/display/UserSettingsDisplay', () => { closeModal: jest.fn(), collapseModal: jest.fn(), setRequireConfirm: jest.fn(), - setEnforceFocus: jest.fn(), enableLinkPreviews: true, enableThemeSelection: false, locales: getAllLanguages(), diff --git a/webapp/channels/src/components/user_settings/display/user_settings_display.tsx b/webapp/channels/src/components/user_settings/display/user_settings_display.tsx index 15c75d4ab8..e80febfdc8 100644 --- a/webapp/channels/src/components/user_settings/display/user_settings_display.tsx +++ b/webapp/channels/src/components/user_settings/display/user_settings_display.tsx @@ -94,7 +94,6 @@ type Props = OwnProps & { closeModal: () => void; collapseModal: () => void; setRequireConfirm?: () => void; - setEnforceFocus?: () => void; timezones: Timezone[]; userTimezone: UserTimezone; allowCustomThemes: boolean; @@ -1105,7 +1104,6 @@ export default class UserSettingsDisplay extends React.PureComponent
diff --git a/webapp/channels/src/components/user_settings/display/user_settings_theme/__snapshots__/user_settings_theme.test.tsx.snap b/webapp/channels/src/components/user_settings/display/user_settings_theme/__snapshots__/user_settings_theme.test.tsx.snap index 467724ee96..dd2df7cb64 100644 --- a/webapp/channels/src/components/user_settings/display/user_settings_theme/__snapshots__/user_settings_theme.test.tsx.snap +++ b/webapp/channels/src/components/user_settings/display/user_settings_theme/__snapshots__/user_settings_theme.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`components/user_settings/display/user_settings_theme/user_settings_theme.jsx should match snapshot 1`] = ` +exports[`components/user_settings/display/user_settings_theme/user_settings_theme should match snapshot 1`] = ` - - - - - - -
- -

- Themes\\". Open the custom theme option, copy the theme color values and paste them here:" - id="user.settings.import_theme.importBody" - /> -

-
-
- -
-
-
- - - - - - - - -`; diff --git a/webapp/channels/src/components/user_settings/display/user_settings_theme/import_theme_modal/index.test.tsx b/webapp/channels/src/components/user_settings/display/user_settings_theme/import_theme_modal/index.test.tsx deleted file mode 100644 index beb2712277..0000000000 --- a/webapp/channels/src/components/user_settings/display/user_settings_theme/import_theme_modal/index.test.tsx +++ /dev/null @@ -1,53 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React from 'react'; - -import {setThemeDefaults} from 'mattermost-redux/utils/theme_utils'; - -import {mountWithIntl, shallowWithIntl} from 'tests/helpers/intl-test-helper'; - -import ImportThemeModal from './index'; - -describe('components/user_settings/ImportThemeModal', () => { - const props = { - intl: {} as any, - onExited: jest.fn(), - callback: jest.fn(), - }; - - it('should match snapshot', () => { - const wrapper = shallowWithIntl(); - expect(wrapper).toMatchSnapshot(); - }); - - it('should correctly parse a Slack theme', () => { - const theme = setThemeDefaults({ - type: 'custom', - sidebarBg: '#1d2229', - sidebarText: '#ffffff', - sidebarUnreadText: '#ffffff', - sidebarTextHoverBg: '#313843', - sidebarTextActiveBorder: '#537aa6', - sidebarTextActiveColor: '#ffffff', - sidebarHeaderBg: '#0b161e', - sidebarTeamBarBg: '#081118', - sidebarHeaderTextColor: '#ffffff', - onlineIndicator: '#94e864', - mentionBg: '#78af8f', - }); - - const themeString = '#1d2229,#0b161e,#537aa6,#ffffff,#313843,#ffffff,#94e864,#78af8f,#0b161e,#ffffff'; - const wrapper = mountWithIntl(); - const instance = wrapper.instance(); - - instance.setState({show: true}); - wrapper.update(); - - wrapper.find('input').simulate('change', {target: {value: themeString}}); - - wrapper.find('#submitButton').simulate('click'); - - expect(props.callback).toHaveBeenCalledWith(theme); - }); -}); diff --git a/webapp/channels/src/components/user_settings/display/user_settings_theme/import_theme_modal/index.tsx b/webapp/channels/src/components/user_settings/display/user_settings_theme/import_theme_modal/index.tsx deleted file mode 100644 index aafd135896..0000000000 --- a/webapp/channels/src/components/user_settings/display/user_settings_theme/import_theme_modal/index.tsx +++ /dev/null @@ -1,237 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React from 'react'; -import {Modal} from 'react-bootstrap'; -import {FormattedMessage, injectIntl} from 'react-intl'; -import type {WrappedComponentProps} from 'react-intl'; - -import type {Theme} from 'mattermost-redux/selectors/entities/preferences'; -import {setThemeDefaults} from 'mattermost-redux/utils/theme_utils'; - -interface Props extends WrappedComponentProps { - callback: ((args: Theme) => void) | null; - onExited: () => void; -} - -type State = { - value: string; - inputError: React.ReactNode | null; - show: boolean; -} - -class ImportThemeModal extends React.PureComponent { - public constructor(props: Props) { - super(props); - - this.state = { - value: '', - inputError: null, - show: true, - }; - } - - private handleOnHide = () => { - this.setState({show: false}); - }; - - private handleSubmit = (e: React.MouseEvent) => { - e.preventDefault(); - - const text = this.state.value; - - if (!ImportThemeModal.isInputValid(text)) { - this.setState({ - inputError: ( - - ), - }); - return; - } - - /* - * index mapping of slack theme format (index => slack-property name) - * - * |-------|-------------------------|-------------------------| - * | index | Slack theme-property | MM theme-property | - * |-------|-------------------------|-------------------------| - * | 0 | Column BG | sidebarBg | - * | 1 | ??? | sidebarHeaderBg | - * | 2 | Active Item BG | sidebarTextActiveBorder | - * | 3 | Active Item Text | sidebarTextActiveColor | - * | 4 | Hover Item BG | sidebarTextHoverBg | - * | 5 | Text Color | sidebarText | - * | 6 | Active Presence | onlineIndicator | - * | 7 | Mention Badge | mentionBg | - * | 8 | TOP-NAV BG | --- (desktop only) | - * | 9 | TOP-NAV Text | --- (desktop only) | - * |-------|-------------------------|-------------------------| - * - * values at index 8 + 9 are only for the desktop app - */ - - const [ - sidebarBg, // 0 - sidebarHeaderBg, // 1 - sidebarTextActiveBorder, // 2 - sidebarTextActiveColor, // 3 - sidebarTextHoverBg, // 4 - sidebarText, // 5 - onlineIndicator, // 6 - mentionBg, // 7 - ] = text.split(','); - - const theme = setThemeDefaults({ - type: 'custom', - sidebarBg, - sidebarText, - sidebarUnreadText: sidebarText, - sidebarTextHoverBg, - sidebarTextActiveBorder, - sidebarTextActiveColor, - sidebarHeaderBg, - sidebarHeaderTextColor: sidebarText, - onlineIndicator, - mentionBg, - }); - - this.props.callback?.(theme as Theme); - - this.handleOnHide(); - }; - - private static isInputValid(text: string) { - if (text.length === 0) { - return false; - } - - if (text.indexOf(' ') !== -1) { - return false; - } - - if (text.length > 0 && text.indexOf(',') === -1) { - return false; - } - - if (text.length > 0) { - const colors = text.split(','); - - if (colors.length !== 10) { - return false; - } - - for (let i = 0; i < colors.length; i++) { - if (colors[i].length !== 7 && colors[i].length !== 4) { - return false; - } - - if (colors[i].charAt(0) !== '#') { - return false; - } - } - } - - return true; - } - - handleChange = (e: React.ChangeEvent) => { - const value = e.target.value; - this.setState({value}); - - if (ImportThemeModal.isInputValid(value)) { - this.setState({inputError: null}); - } else { - this.setState({ - inputError: ( - - ), - }); - } - }; - - render() { - return ( - - - - - - - -
- -

- -

-
-
- -
- {this.state.inputError} -
-
-
- - - - - -
- - - ); - } -} - -export default injectIntl(ImportThemeModal); diff --git a/webapp/channels/src/components/user_settings/display/user_settings_theme/user_settings_theme.test.tsx b/webapp/channels/src/components/user_settings/display/user_settings_theme/user_settings_theme.test.tsx index c3598d347f..65553c135a 100644 --- a/webapp/channels/src/components/user_settings/display/user_settings_theme/user_settings_theme.test.tsx +++ b/webapp/channels/src/components/user_settings/display/user_settings_theme/user_settings_theme.test.tsx @@ -7,8 +7,6 @@ import type {ComponentProps} from 'react'; import {Preferences} from 'mattermost-redux/constants'; -import {fireEvent, renderWithContext, screen} from 'tests/react_testing_utils'; - import UserSettingsTheme from './user_settings_theme'; jest.mock('utils/utils', () => ({ @@ -17,28 +15,13 @@ jest.mock('utils/utils', () => ({ a11yFocus: jest.fn(), })); -describe('components/user_settings/display/user_settings_theme/user_settings_theme.jsx', () => { - const initialState = { - entities: { - general: { - config: {}, - license: { - Cloud: 'false', - }, - }, - users: { - currentUserId: 'currentUserId', - }, - }, - }; - +describe('components/user_settings/display/user_settings_theme/user_settings_theme', () => { const requiredProps: ComponentProps = { theme: Preferences.THEMES.denim, currentTeamId: 'teamId', selected: false, updateSection: jest.fn(), setRequireConfirm: jest.fn(), - setEnforceFocus: jest.fn(), actions: { saveTheme: jest.fn().mockResolvedValue({data: true}), deleteTeamSpecificThemes: jest.fn().mockResolvedValue({data: true}), @@ -93,22 +76,4 @@ describe('components/user_settings/display/user_settings_theme/user_settings_the expect(props.actions.deleteTeamSpecificThemes).toHaveBeenCalled(); }); - - it('should call openModal when slack import theme button is clicked', async () => { - const props = { - ...requiredProps, - allowCustomThemes: true, - selected: true, - }; - - renderWithContext( - , - initialState, - ); - - // Click the Slack Import button - fireEvent.click(screen.getByText('Import theme colors from Slack')); - - expect(props.actions.openModal).toHaveBeenCalledTimes(1); - }); }); diff --git a/webapp/channels/src/components/user_settings/display/user_settings_theme/user_settings_theme.tsx b/webapp/channels/src/components/user_settings/display/user_settings_theme/user_settings_theme.tsx index 9ccf54571a..88593c1d5c 100644 --- a/webapp/channels/src/components/user_settings/display/user_settings_theme/user_settings_theme.tsx +++ b/webapp/channels/src/components/user_settings/display/user_settings_theme/user_settings_theme.tsx @@ -11,9 +11,8 @@ import ExternalLink from 'components/external_link'; import SettingItemMax from 'components/setting_item_max'; import SettingItemMin from 'components/setting_item_min'; import type SettingItemMinComponent from 'components/setting_item_min'; -import ImportThemeModal from 'components/user_settings/display/user_settings_theme/import_theme_modal'; -import {Constants, ModalIdentifiers} from 'utils/constants'; +import {Constants} from 'utils/constants'; import {applyTheme} from 'utils/utils'; import type {ModalData} from 'types/actions'; @@ -28,7 +27,6 @@ type Props = { areAllSectionsInactive: boolean; updateSection: (section: string) => void; setRequireConfirm?: (requireConfirm: boolean) => void; - setEnforceFocus?: (enforceFocus: boolean) => void; allowCustomThemes: boolean; showAllTeamsCheckbox: boolean; applyToAllTeams: boolean; @@ -147,18 +145,6 @@ export default class ThemeSetting extends React.PureComponent { this.props.setRequireConfirm?.(false); }; - handleImportModal = (): void => { - this.props.actions.openModal({ - modalId: ModalIdentifiers.IMPORT_THEME_MODAL, - dialogType: ImportThemeModal, - dialogProps: { - callback: this.updateTheme, - }, - }); - - this.props.setEnforceFocus?.(false); - }; - handleUpdateSection = (section: string): void => this.props.updateSection(section); render() { @@ -261,24 +247,6 @@ export default class ThemeSetting extends React.PureComponent {
, ); - - inputs.push( -
- -
, - ); } let allTeamsCheckbox = null; diff --git a/webapp/channels/src/components/user_settings/index.test.tsx b/webapp/channels/src/components/user_settings/index.test.tsx index efdcf07374..97d5c8773e 100644 --- a/webapp/channels/src/components/user_settings/index.test.tsx +++ b/webapp/channels/src/components/user_settings/index.test.tsx @@ -35,7 +35,6 @@ function getBaseProps(): Props { uiName: 'other plugin', }, }, - setEnforceFocus: jest.fn(), setRequireConfirm: jest.fn(), updateSection: jest.fn(), updateTab: jest.fn(), diff --git a/webapp/channels/src/components/user_settings/index.tsx b/webapp/channels/src/components/user_settings/index.tsx index 9d161d0092..ac4c8be5e1 100644 --- a/webapp/channels/src/components/user_settings/index.tsx +++ b/webapp/channels/src/components/user_settings/index.tsx @@ -24,7 +24,6 @@ export type Props = { updateTab: (notifications: string) => void; closeModal: () => void; collapseModal: () => void; - setEnforceFocus: () => void; setRequireConfirm: () => void; pluginSettings: {[tabName: string]: PluginConfiguration}; userPreferences?: PreferencesType; @@ -81,7 +80,6 @@ export default function UserSettings(props: Props) { updateSection={props.updateSection} closeModal={props.closeModal} collapseModal={props.collapseModal} - setEnforceFocus={props.setEnforceFocus} setRequireConfirm={props.setRequireConfirm} adminMode={props.adminMode} userPreferences={props.userPreferences} diff --git a/webapp/channels/src/components/user_settings/modal/user_settings_modal.tsx b/webapp/channels/src/components/user_settings/modal/user_settings_modal.tsx index 1be70bda87..ccca9dd2a2 100644 --- a/webapp/channels/src/components/user_settings/modal/user_settings_modal.tsx +++ b/webapp/channels/src/components/user_settings/modal/user_settings_modal.tsx @@ -398,7 +398,6 @@ class UserSettingsModal extends React.PureComponent { updateTab={this.updateTab} closeModal={this.closeModal} collapseModal={this.collapseModal} - setEnforceFocus={(enforceFocus?: boolean) => this.setState({enforceFocus})} setRequireConfirm={ (requireConfirm?: boolean, customConfirmAction?: () => () => void) => { this.requireConfirm = requireConfirm!; diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json index f31108f25d..8f48fc8c8b 100644 --- a/webapp/channels/src/i18n/en.json +++ b/webapp/channels/src/i18n/en.json @@ -5627,7 +5627,6 @@ "user.settings.display.theme.applyToAllTeams": "Apply new theme to all my teams", "user.settings.display.theme.customTheme": "Custom Theme", "user.settings.display.theme.describe": "Open to manage your theme", - "user.settings.display.theme.import": "Import theme colors from Slack", "user.settings.display.theme.otherThemes": "See other themes", "user.settings.display.theme.themeColors": "Theme Colors", "user.settings.display.theme.title": "Theme", @@ -5685,11 +5684,6 @@ "user.settings.general.usernameRestrictions": "Username must begin with a letter, and contain between {min} to {max} lowercase characters made up of numbers, letters, and the symbols '.', '-', and '_'.", "user.settings.general.validEmail": "Please enter a valid email address", "user.settings.general.validImage": "Only BMP, JPG or PNG images may be used for profile pictures", - "user.settings.import_theme.cancel": "Cancel", - "user.settings.import_theme.importBody": "To import a theme, go to a Slack team and look for \"Preferences -> Sidebar Theme\". Open the custom theme option, copy the theme color values and paste them here:", - "user.settings.import_theme.importHeader": "Import Slack Theme", - "user.settings.import_theme.submit": "Submit", - "user.settings.import_theme.submitError": "Invalid format, please try copying and pasting in again.", "user.settings.languages.change": "Change interface language", "user.settings.languages.dropdown.arialabel": "Dropdown selector to change the interface language", "user.settings.languages.promote1": "Select which language Mattermost displays in the user interface.", diff --git a/webapp/channels/src/utils/constants.tsx b/webapp/channels/src/utils/constants.tsx index a0b54f0eb7..8e8feea609 100644 --- a/webapp/channels/src/utils/constants.tsx +++ b/webapp/channels/src/utils/constants.tsx @@ -405,7 +405,6 @@ export const ModalIdentifiers = { EDIT_GROUP_MODAL: 'edit_group_modal', POST_DELETED_MODAL: 'post_deleted_modal', FILE_PREVIEW_MODAL: 'file_preview_modal', - IMPORT_THEME_MODAL: 'import_theme_modal', LEAVE_PRIVATE_CHANNEL_MODAL: 'leave_private_channel_modal', GET_PUBLIC_LINK_MODAL: 'get_public_link_modal', KEYBOARD_SHORTCUTS_MODAL: 'keyboar_shortcuts_modal',