MM-60376 removed the feature to import theme from Slack (#28891)

* MM-60376 removed the feature to import theme from Slack

* removed unnecessary keywords from en.json

* removed setEnforceFocus props

* updated snapshot

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

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]}
       />

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(),

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<Props, Stat
                         areAllSectionsInactive={this.props.activeSection === ''}
                         updateSection={this.updateSection}
                         setRequireConfirm={this.props.setRequireConfirm}
-                        setEnforceFocus={this.props.setEnforceFocus}
                         allowCustomThemes={this.props.allowCustomThemes}
                     />
                     <div className='divider-dark'/>

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`] = `
 <SettingItemMin
   describe={
     <Memo(MemoizedFormattedMessage)

webapp/channels/src/components/user_settings/display/user_settings_theme/import_theme_modal/__snapshots__/index.test.tsx.snap

@@ -1,113 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/user_settings/ImportThemeModal should match snapshot 1`] = `
-<span>
-  <Modal
-    animation={true}
-    aria-labelledby="importThemeModalLabel"
-    autoFocus={true}
-    backdrop={true}
-    bsClass="modal"
-    dialogClassName="a11y__modal"
-    dialogComponentClass={[Function]}
-    enforceFocus={true}
-    keyboard={true}
-    manager={
-      ModalManager {
-        "add": [Function],
-        "containers": Array [],
-        "data": Array [],
-        "handleContainerOverflow": true,
-        "hideSiblingNodes": true,
-        "isTopModal": [Function],
-        "modals": Array [],
-        "remove": [Function],
-      }
-    }
-    onExited={[MockFunction]}
-    onHide={[Function]}
-    renderBackdrop={[Function]}
-    restoreFocus={true}
-    role="dialog"
-    show={true}
-  >
-    <ModalHeader
-      bsClass="modal-header"
-      closeButton={true}
-      closeLabel="Close"
-    >
-      <ModalTitle
-        bsClass="modal-title"
-        componentClass="h1"
-        id="importThemeModalLabel"
-      >
-        <MemoizedFormattedMessage
-          defaultMessage="Import Slack Theme"
-          id="user.settings.import_theme.importHeader"
-        />
-      </ModalTitle>
-    </ModalHeader>
-    <form
-      className="form-horizontal"
-      role="form"
-    >
-      <ModalBody
-        bsClass="modal-body"
-        componentClass="div"
-      >
-        <p>
-          <MemoizedFormattedMessage
-            defaultMessage="To import a theme, go to a Slack team and look for \\"Preferences -> Themes\\". Open the custom theme option, copy the theme color values and paste them here:"
-            id="user.settings.import_theme.importBody"
-          />
-        </p>
-        <div
-          className="form-group less"
-        >
-          <div
-            className="col-sm-12"
-          >
-            <input
-              className="form-control"
-              id="themeVector"
-              onChange={[Function]}
-              type="text"
-              value=""
-            />
-            <div
-              className="input__help"
-            />
-          </div>
-        </div>
-      </ModalBody>
-      <ModalFooter
-        bsClass="modal-footer"
-        componentClass="div"
-      >
-        <button
-          className="btn btn-tertiary"
-          id="cancelButton"
-          onClick={[Function]}
-          type="button"
-        >
-          <MemoizedFormattedMessage
-            defaultMessage="Cancel"
-            id="user.settings.import_theme.cancel"
-          />
-        </button>
-        <button
-          className="btn btn-primary"
-          id="submitButton"
-          onClick={[Function]}
-          type="submit"
-        >
-          <MemoizedFormattedMessage
-            defaultMessage="Submit"
-            id="user.settings.import_theme.submit"
-          />
-        </button>
-      </ModalFooter>
-    </form>
-  </Modal>
-</span>
-`;

webapp/channels/src/components/user_settings/display/user_settings_theme/import_theme_modal/index.test.tsx

@@ -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(<ImportThemeModal {...props}/>);
-        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(<ImportThemeModal {...props}/>);
-        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);
-    });
-});

webapp/channels/src/components/user_settings/display/user_settings_theme/import_theme_modal/index.tsx

@@ -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<Props, State> {
-    public constructor(props: Props) {
-        super(props);
-
-        this.state = {
-            value: '',
-            inputError: null,
-            show: true,
-        };
-    }
-
-    private handleOnHide = () => {
-        this.setState({show: false});
-    };
-
-    private handleSubmit = (e: React.MouseEvent<HTMLElement>) => {
-        e.preventDefault();
-
-        const text = this.state.value;
-
-        if (!ImportThemeModal.isInputValid(text)) {
-            this.setState({
-                inputError: (
-                    <FormattedMessage
-                        id='user.settings.import_theme.submitError'
-                        defaultMessage='Invalid format, please try copying and pasting in again.'
-                    />
-                ),
-            });
-            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<HTMLInputElement>) => {
-        const value = e.target.value;
-        this.setState({value});
-
-        if (ImportThemeModal.isInputValid(value)) {
-            this.setState({inputError: null});
-        } else {
-            this.setState({
-                inputError: (
-                    <FormattedMessage
-                        id='user.settings.import_theme.submitError'
-                        defaultMessage='Invalid format, please try copying and pasting in again.'
-                    />
-                ),
-            });
-        }
-    };
-
-    render() {
-        return (
-            <span>
-                <Modal
-                    dialogClassName='a11y__modal'
-                    show={this.state.show}
-                    onHide={this.handleOnHide}
-                    onExited={this.props.onExited}
-                    role='dialog'
-                    aria-labelledby='importThemeModalLabel'
-                >
-                    <Modal.Header closeButton={true}>
-                        <Modal.Title
-                            componentClass='h1'
-                            id='importThemeModalLabel'
-                        >
-                            <FormattedMessage
-                                id='user.settings.import_theme.importHeader'
-                                defaultMessage='Import Slack Theme'
-                            />
-                        </Modal.Title>
-                    </Modal.Header>
-                    <form
-                        role='form'
-                        className='form-horizontal'
-                    >
-                        <Modal.Body>
-                            <p>
-                                <FormattedMessage
-                                    id='user.settings.import_theme.importBody'
-                                    defaultMessage='To import a theme, go to a Slack team and look for "Preferences -> Themes". Open the custom theme option, copy the theme color values and paste them here:'
-                                />
-                            </p>
-                            <div className='form-group less'>
-                                <div className='col-sm-12'>
-                                    <input
-                                        id='themeVector'
-                                        type='text'
-                                        className='form-control'
-                                        value={this.state.value}
-                                        onChange={this.handleChange}
-                                    />
-                                    <div className='input__help'>
-                                        {this.state.inputError}
-                                    </div>
-                                </div>
-                            </div>
-                        </Modal.Body>
-                        <Modal.Footer>
-                            <button
-                                id='cancelButton'
-                                type='button'
-                                className='btn btn-tertiary'
-                                onClick={this.handleOnHide}
-                            >
-                                <FormattedMessage
-                                    id='user.settings.import_theme.cancel'
-                                    defaultMessage='Cancel'
-                                />
-                            </button>
-                            <button
-                                id='submitButton'
-                                onClick={this.handleSubmit}
-                                type='submit'
-                                className='btn btn-primary'
-                            >
-                                <FormattedMessage
-                                    id='user.settings.import_theme.submit'
-                                    defaultMessage='Submit'
-                                />
-                            </button>
-                        </Modal.Footer>
-                    </form>
-                </Modal>
-            </span>
-        );
-    }
-}
-
-export default injectIntl(ImportThemeModal);

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', () => {
+describe('components/user_settings/display/user_settings_theme/user_settings_theme', () => {
-    const initialState = {
-        entities: {
-            general: {
-                config: {},
-                license: {
-                    Cloud: 'false',
-                },
-            },
-            users: {
-                currentUserId: 'currentUserId',
-            },
-        },
-    };
-
     const requiredProps: ComponentProps<typeof UserSettingsTheme> = {
         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(
-            <UserSettingsTheme {...props}/>,
-            initialState,
-        );
-
-        // Click the Slack Import button
-        fireEvent.click(screen.getByText('Import theme colors from Slack'));
-
-        expect(props.actions.openModal).toHaveBeenCalledTimes(1);
-    });
 });

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<Props, State> {
         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<Props, State> {
                         </ExternalLink>
                     </div>,
                 );
-
-                inputs.push(
-                    <div
-                        key='importSlackThemeButton'
-                        className='pt-2'
-                    >
-                        <button
-                            id='slackImportTheme'
-                            className='theme style--none color--link'
-                            onClick={this.handleImportModal}
-                        >
-                            <FormattedMessage
-                                id='user.settings.display.theme.import'
-                                defaultMessage='Import theme colors from Slack'
-                            />
-                        </button>
-                    </div>,
-                );
             }
 
             let allTeamsCheckbox = null;

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(),

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}

webapp/channels/src/components/user_settings/modal/user_settings_modal.tsx

@@ -398,7 +398,6 @@ class UserSettingsModal extends React.PureComponent<Props, State> {
                                     updateTab={this.updateTab}
                                     closeModal={this.closeModal}
                                     collapseModal={this.collapseModal}
-                                    setEnforceFocus={(enforceFocus?: boolean) => this.setState({enforceFocus})}
                                     setRequireConfirm={
                                         (requireConfirm?: boolean, customConfirmAction?: () => () => void) => {
                                             this.requireConfirm = requireConfirm!;

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.",

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',