[MM-54835] Convert LocalizedInput of 'custom_url_schemes_setting.tsx' to regular input component (#24854)

webapp/channels/src/components/admin_console/__snapshots__/custom_url_schemes_setting.test.tsx.snap

@@ -1,121 +1,465 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/AdminConsole/CustomUrlSchemeSetting initial state with multiple items 1`] = `
+<CustomURLSchemesSetting
+  disabled={false}
+  id="MySetting"
+  intl={
+    Object {
+      "$t": [Function],
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
+      "formatDate": [Function],
+      "formatDateTimeRange": [Function],
+      "formatDateToParts": [Function],
+      "formatDisplayName": [Function],
+      "formatList": [Function],
+      "formatListToParts": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatNumberToParts": [Function],
+      "formatPlural": [Function],
+      "formatRelativeTime": [Function],
+      "formatTime": [Function],
+      "formatTimeToParts": [Function],
+      "formats": Object {},
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getDisplayNames": [Function],
+        "getListFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralRules": [Function],
+        "getRelativeTimeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": Object {},
+      "onError": [Function],
+      "onWarn": [Function],
+      "textComponent": "span",
+      "timeZone": "Etc/UTC",
+    }
+  }
+  onChange={[MockFunction]}
+  setByEnv={false}
+  value={
+    Array [
+      "git",
+      "smtp",
+      "steam",
+    ]
+  }
+>
   <Settings
     helpText="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
     inputId="MySetting"
     label="Custom URL Schemes:"
     setByEnv={false}
   >
-  <LocalizedInput
+    <div
+      className="form-group"
+      data-testid="MySetting"
+    >
+      <label
+        className="control-label col-sm-4"
+        htmlFor="MySetting"
+      >
+        Custom URL Schemes:
+      </label>
+      <div
+        className="col-sm-8"
+      >
+        <input
           className="form-control"
           disabled={false}
           id="MySetting"
           onChange={[Function]}
-    placeholder={
+          placeholder="E.g.: \\"git,smtp\\""
-      Object {
-        "defaultMessage": "E.g.: \\"git,smtp\\"",
-        "id": "admin.customization.customUrlSchemesPlaceholder",
-      }
-    }
           type="text"
           value="git,smtp,steam"
         />
+        <div
+          className="help-text"
+          data-testid="MySettinghelp-text"
+        >
+          Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: "http", "https", "ftp", "tel", and "mailto".
+        </div>
+      </div>
+    </div>
   </Settings>
+</CustomURLSchemesSetting>
 `;
 
 exports[`components/AdminConsole/CustomUrlSchemeSetting initial state with no items 1`] = `
+<CustomURLSchemesSetting
+  disabled={false}
+  id="MySetting"
+  intl={
+    Object {
+      "$t": [Function],
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
+      "formatDate": [Function],
+      "formatDateTimeRange": [Function],
+      "formatDateToParts": [Function],
+      "formatDisplayName": [Function],
+      "formatList": [Function],
+      "formatListToParts": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatNumberToParts": [Function],
+      "formatPlural": [Function],
+      "formatRelativeTime": [Function],
+      "formatTime": [Function],
+      "formatTimeToParts": [Function],
+      "formats": Object {},
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getDisplayNames": [Function],
+        "getListFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralRules": [Function],
+        "getRelativeTimeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": Object {},
+      "onError": [Function],
+      "onWarn": [Function],
+      "textComponent": "span",
+      "timeZone": "Etc/UTC",
+    }
+  }
+  onChange={[MockFunction]}
+  setByEnv={false}
+  value={Array []}
+>
   <Settings
     helpText="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
     inputId="MySetting"
     label="Custom URL Schemes:"
     setByEnv={false}
   >
-  <LocalizedInput
+    <div
+      className="form-group"
+      data-testid="MySetting"
+    >
+      <label
+        className="control-label col-sm-4"
+        htmlFor="MySetting"
+      >
+        Custom URL Schemes:
+      </label>
+      <div
+        className="col-sm-8"
+      >
+        <input
           className="form-control"
           disabled={false}
           id="MySetting"
           onChange={[Function]}
-    placeholder={
+          placeholder="E.g.: \\"git,smtp\\""
-      Object {
-        "defaultMessage": "E.g.: \\"git,smtp\\"",
-        "id": "admin.customization.customUrlSchemesPlaceholder",
-      }
-    }
           type="text"
           value=""
         />
+        <div
+          className="help-text"
+          data-testid="MySettinghelp-text"
+        >
+          Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: "http", "https", "ftp", "tel", and "mailto".
+        </div>
+      </div>
+    </div>
   </Settings>
+</CustomURLSchemesSetting>
 `;
 
 exports[`components/AdminConsole/CustomUrlSchemeSetting initial state with one item 1`] = `
+<CustomURLSchemesSetting
+  disabled={false}
+  id="MySetting"
+  intl={
+    Object {
+      "$t": [Function],
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
+      "formatDate": [Function],
+      "formatDateTimeRange": [Function],
+      "formatDateToParts": [Function],
+      "formatDisplayName": [Function],
+      "formatList": [Function],
+      "formatListToParts": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatNumberToParts": [Function],
+      "formatPlural": [Function],
+      "formatRelativeTime": [Function],
+      "formatTime": [Function],
+      "formatTimeToParts": [Function],
+      "formats": Object {},
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getDisplayNames": [Function],
+        "getListFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralRules": [Function],
+        "getRelativeTimeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": Object {},
+      "onError": [Function],
+      "onWarn": [Function],
+      "textComponent": "span",
+      "timeZone": "Etc/UTC",
+    }
+  }
+  onChange={[MockFunction]}
+  setByEnv={false}
+  value={
+    Array [
+      "git",
+    ]
+  }
+>
   <Settings
     helpText="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
     inputId="MySetting"
     label="Custom URL Schemes:"
     setByEnv={false}
   >
-  <LocalizedInput
+    <div
+      className="form-group"
+      data-testid="MySetting"
+    >
+      <label
+        className="control-label col-sm-4"
+        htmlFor="MySetting"
+      >
+        Custom URL Schemes:
+      </label>
+      <div
+        className="col-sm-8"
+      >
+        <input
           className="form-control"
           disabled={false}
           id="MySetting"
           onChange={[Function]}
-    placeholder={
+          placeholder="E.g.: \\"git,smtp\\""
-      Object {
-        "defaultMessage": "E.g.: \\"git,smtp\\"",
-        "id": "admin.customization.customUrlSchemesPlaceholder",
-      }
-    }
           type="text"
           value="git"
         />
+        <div
+          className="help-text"
+          data-testid="MySettinghelp-text"
+        >
+          Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: "http", "https", "ftp", "tel", and "mailto".
+        </div>
+      </div>
+    </div>
   </Settings>
+</CustomURLSchemesSetting>
 `;
 
 exports[`components/AdminConsole/CustomUrlSchemeSetting renders properly when disabled 1`] = `
+<CustomURLSchemesSetting
+  disabled={true}
+  id="MySetting"
+  intl={
+    Object {
+      "$t": [Function],
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
+      "formatDate": [Function],
+      "formatDateTimeRange": [Function],
+      "formatDateToParts": [Function],
+      "formatDisplayName": [Function],
+      "formatList": [Function],
+      "formatListToParts": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatNumberToParts": [Function],
+      "formatPlural": [Function],
+      "formatRelativeTime": [Function],
+      "formatTime": [Function],
+      "formatTimeToParts": [Function],
+      "formats": Object {},
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getDisplayNames": [Function],
+        "getListFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralRules": [Function],
+        "getRelativeTimeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": Object {},
+      "onError": [Function],
+      "onWarn": [Function],
+      "textComponent": "span",
+      "timeZone": "Etc/UTC",
+    }
+  }
+  onChange={[MockFunction]}
+  setByEnv={false}
+  value={
+    Array [
+      "git",
+      "smtp",
+    ]
+  }
+>
   <Settings
     helpText="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
     inputId="MySetting"
     label="Custom URL Schemes:"
     setByEnv={false}
   >
-  <LocalizedInput
+    <div
+      className="form-group"
+      data-testid="MySetting"
+    >
+      <label
+        className="control-label col-sm-4"
+        htmlFor="MySetting"
+      >
+        Custom URL Schemes:
+      </label>
+      <div
+        className="col-sm-8"
+      >
+        <input
           className="form-control"
           disabled={true}
           id="MySetting"
           onChange={[Function]}
-    placeholder={
+          placeholder="E.g.: \\"git,smtp\\""
-      Object {
-        "defaultMessage": "E.g.: \\"git,smtp\\"",
-        "id": "admin.customization.customUrlSchemesPlaceholder",
-      }
-    }
           type="text"
           value="git,smtp"
         />
+        <div
+          className="help-text"
+          data-testid="MySettinghelp-text"
+        >
+          Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: "http", "https", "ftp", "tel", and "mailto".
+        </div>
+      </div>
+    </div>
   </Settings>
+</CustomURLSchemesSetting>
 `;
 
 exports[`components/AdminConsole/CustomUrlSchemeSetting renders properly when set by environment variable 1`] = `
+<CustomURLSchemesSetting
+  disabled={false}
+  id="MySetting"
+  intl={
+    Object {
+      "$t": [Function],
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
+      "formatDate": [Function],
+      "formatDateTimeRange": [Function],
+      "formatDateToParts": [Function],
+      "formatDisplayName": [Function],
+      "formatList": [Function],
+      "formatListToParts": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatNumberToParts": [Function],
+      "formatPlural": [Function],
+      "formatRelativeTime": [Function],
+      "formatTime": [Function],
+      "formatTimeToParts": [Function],
+      "formats": Object {},
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getDisplayNames": [Function],
+        "getListFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralRules": [Function],
+        "getRelativeTimeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": Object {},
+      "onError": [Function],
+      "onWarn": [Function],
+      "textComponent": "span",
+      "timeZone": "Etc/UTC",
+    }
+  }
+  onChange={[MockFunction]}
+  setByEnv={true}
+  value={
+    Array [
+      "git",
+      "smtp",
+    ]
+  }
+>
   <Settings
     helpText="Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: \\"http\\", \\"https\\", \\"ftp\\", \\"tel\\", and \\"mailto\\"."
     inputId="MySetting"
     label="Custom URL Schemes:"
     setByEnv={true}
   >
-  <LocalizedInput
+    <div
+      className="form-group"
+      data-testid="MySetting"
+    >
+      <label
+        className="control-label col-sm-4"
+        htmlFor="MySetting"
+      >
+        Custom URL Schemes:
+      </label>
+      <div
+        className="col-sm-8"
+      >
+        <input
           className="form-control"
           disabled={true}
           id="MySetting"
           onChange={[Function]}
-    placeholder={
+          placeholder="E.g.: \\"git,smtp\\""
-      Object {
-        "defaultMessage": "E.g.: \\"git,smtp\\"",
-        "id": "admin.customization.customUrlSchemesPlaceholder",
-      }
-    }
           type="text"
           value="git,smtp"
         />
+        <div
+          className="help-text"
+          data-testid="MySettinghelp-text"
+        >
+          Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: "http", "https", "ftp", "tel", and "mailto".
+        </div>
+        <SetByEnv>
+          <div
+            className="alert alert-warning"
+          >
+            <FormattedMessage
+              defaultMessage="This setting has been set through an environment variable. It cannot be changed through the System Console."
+              id="admin.set_by_env"
+            >
+              <span>
+                This setting has been set through an environment variable. It cannot be changed through the System Console.
+              </span>
+            </FormattedMessage>
+          </div>
+        </SetByEnv>
+      </div>
+    </div>
   </Settings>
+</CustomURLSchemesSetting>
 `;

webapp/channels/src/components/admin_console/custom_url_schemes_setting.test.tsx

@@ -1,11 +1,11 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {shallow} from 'enzyme';
 import React from 'react';
 
 import CustomURLSchemesSetting from 'components/admin_console/custom_url_schemes_setting';
-import LocalizedInput from 'components/localized_input/localized_input';
+
+import {mountWithIntl} from 'tests/helpers/intl-test-helper';
 
 describe('components/AdminConsole/CustomUrlSchemeSetting', () => {
     const baseProps = {
@@ -23,7 +23,7 @@ describe('components/AdminConsole/CustomUrlSchemeSetting', () => {
                 value: [],
             };
 
-            const wrapper = shallow(
+            const wrapper = mountWithIntl(
                 <CustomURLSchemesSetting {...props}/>,
             );
             expect(wrapper).toMatchSnapshot();
@@ -37,7 +37,7 @@ describe('components/AdminConsole/CustomUrlSchemeSetting', () => {
                 value: ['git'],
             };
 
-            const wrapper = shallow(
+            const wrapper = mountWithIntl(
                 <CustomURLSchemesSetting {...props}/>,
             );
             expect(wrapper).toMatchSnapshot();
@@ -51,7 +51,7 @@ describe('components/AdminConsole/CustomUrlSchemeSetting', () => {
                 value: ['git', 'smtp', 'steam'],
             };
 
-            const wrapper = shallow(
+            const wrapper = mountWithIntl(
                 <CustomURLSchemesSetting {...props}/>,
             );
             expect(wrapper).toMatchSnapshot();
@@ -67,11 +67,11 @@ describe('components/AdminConsole/CustomUrlSchemeSetting', () => {
                 onChange: jest.fn(),
             };
 
-            const wrapper = shallow(
+            const wrapper = mountWithIntl(
                 <CustomURLSchemesSetting {...props}/>,
             );
 
-            wrapper.find(LocalizedInput).simulate('change', {target: {value: ''}});
+            wrapper.find('input').simulate('change', {target: {value: ''}});
 
             expect(props.onChange).toBeCalledWith(baseProps.id, []);
         });
@@ -82,11 +82,11 @@ describe('components/AdminConsole/CustomUrlSchemeSetting', () => {
                 onChange: jest.fn(),
             };
 
-            const wrapper = shallow(
+            const wrapper = mountWithIntl(
                 <CustomURLSchemesSetting {...props}/>,
             );
 
-            wrapper.find(LocalizedInput).simulate('change', {target: {value: '  steam  '}});
+            wrapper.find('input').simulate('change', {target: {value: '  steam  '}});
 
             expect(props.onChange).toBeCalledWith(baseProps.id, ['steam']);
         });
@@ -97,11 +97,11 @@ describe('components/AdminConsole/CustomUrlSchemeSetting', () => {
                 onChange: jest.fn(),
             };
 
-            const wrapper = shallow(
+            const wrapper = mountWithIntl(
                 <CustomURLSchemesSetting {...props}/>,
             );
 
-            wrapper.find(LocalizedInput).simulate('change', {target: {value: 'steam, git'}});
+            wrapper.find('input').simulate('change', {target: {value: 'steam, git'}});
 
             expect(props.onChange).toBeCalledWith(baseProps.id, ['steam', 'git']);
         });
@@ -112,11 +112,11 @@ describe('components/AdminConsole/CustomUrlSchemeSetting', () => {
                 onChange: jest.fn(),
             };
 
-            const wrapper = shallow(
+            const wrapper = mountWithIntl(
                 <CustomURLSchemesSetting {...props}/>,
             );
 
-            wrapper.find(LocalizedInput).simulate('change', {target: {value: 'ts3server, smtp, ms-excel'}});
+            wrapper.find('input').simulate('change', {target: {value: 'ts3server, smtp, ms-excel'}});
 
             expect(props.onChange).toBeCalledWith(baseProps.id, ['ts3server', 'smtp', 'ms-excel']);
         });
@@ -127,11 +127,11 @@ describe('components/AdminConsole/CustomUrlSchemeSetting', () => {
                 onChange: jest.fn(),
             };
 
-            const wrapper = shallow(
+            const wrapper = mountWithIntl(
                 <CustomURLSchemesSetting {...props}/>,
             );
 
-            wrapper.find(LocalizedInput).simulate('change', {target: {value: ',,,,,chrome,,,,ms-excel,,'}});
+            wrapper.find('input').simulate('change', {target: {value: ',,,,,chrome,,,,ms-excel,,'}});
 
             expect(props.onChange).toBeCalledWith(baseProps.id, ['chrome', 'ms-excel']);
         });
@@ -143,7 +143,7 @@ describe('components/AdminConsole/CustomUrlSchemeSetting', () => {
             disabled: true,
         };
 
-        const wrapper = shallow(
+        const wrapper = mountWithIntl(
             <CustomURLSchemesSetting {...props}/>,
         );
         expect(wrapper).toMatchSnapshot();
@@ -155,7 +155,7 @@ describe('components/AdminConsole/CustomUrlSchemeSetting', () => {
             setByEnv: true,
         };
 
-        const wrapper = shallow(
+        const wrapper = mountWithIntl(
             <CustomURLSchemesSetting {...props}/>,
         );
         expect(wrapper).toMatchSnapshot();

webapp/channels/src/components/admin_console/custom_url_schemes_setting.tsx

@@ -1,14 +1,9 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import PropTypes from 'prop-types';
 import React, {PureComponent} from 'react';
 import type {ChangeEvent} from 'react';
-
+import {injectIntl, type IntlShape} from 'react-intl';
-import LocalizedInput from 'components/localized_input/localized_input';
-
-import {t} from 'utils/i18n';
-import * as Utils from 'utils/utils';
 
 import Setting from './setting';
 
@@ -18,24 +13,15 @@ type Props = {
     onChange: (id: string, valueAsArray: string[]) => void;
     disabled: boolean;
     setByEnv: boolean;
+    intl: IntlShape;
 }
 
 type State = {
     value: string;
 }
 
-export default class CustomURLSchemesSetting extends
+class CustomURLSchemesSetting extends
     PureComponent<Props, State> {
-    static get propTypes() {
-        return {
-            id: PropTypes.string.isRequired,
-            value: PropTypes.array.isRequired,
-            onChange: PropTypes.func.isRequired,
-            disabled: PropTypes.bool,
-            setByEnv: PropTypes.bool.isRequired,
-        };
-    }
-
     constructor(props: Props) {
         super(props);
 
@@ -63,24 +49,24 @@ export default class CustomURLSchemesSetting extends
     };
 
     render() {
-        const label = Utils.localizeMessage('admin.customization.customUrlSchemes', 'Custom URL Schemes:');
-        const helpText = Utils.localizeMessage(
-            'admin.customization.customUrlSchemesDesc',
-            'Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: "http", "https", "ftp", "tel", and "mailto".',
-        );
-
         return (
             <Setting
-                label={label}
+                label={this.props.intl.formatMessage({
-                helpText={helpText}
+                    id: 'admin.customization.customUrlSchemes',
+                    defaultMessage: 'Custom URL Schemes:',
+                })}
+                helpText={this.props.intl.formatMessage({
+                    id: 'admin.customization.customUrlSchemesDesc',
+                    defaultMessage: 'Allows message text to link if it begins with any of the comma-separated URL schemes listed. By default, the following schemes will create links: "http", "https", "ftp", "tel", and "mailto".',
+                })}
                 inputId={this.props.id}
                 setByEnv={this.props.setByEnv}
             >
-                <LocalizedInput
+                <input
                     id={this.props.id}
                     className='form-control'
                     type='text'
-                    placeholder={{id: t('admin.customization.customUrlSchemesPlaceholder'), defaultMessage: 'E.g.: "git,smtp"'}}
+                    placeholder={this.props.intl.formatMessage({id: 'admin.customization.customUrlSchemesPlaceholder', defaultMessage: 'E.g.: "git,smtp"'})}
                     value={this.state.value}
                     onChange={this.handleChange}
                     disabled={this.props.disabled || this.props.setByEnv}
@@ -89,3 +75,5 @@ export default class CustomURLSchemesSetting extends
         );
     }
 }
+
+export default injectIntl(CustomURLSchemesSetting);