MM-18972 (#4061)

* Added types to bool settings and settings files of components/widgets/settings

* Migrated text settings and radio settings components of components/widget/settings dir

components/widgets/settings/bool_setting.test.jsx → components/widgets/settings/bool_setting.test.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import BoolSetting from './bool_setting.jsx';
+import BoolSetting from './bool_setting';
 
 describe('components/widgets/settings/BoolSetting', () => {
  test('render component with required props', () => {

components/widgets/settings/bool_setting.jsx → components/widgets/settings/bool_setting.tsx

@@ -1,33 +1,32 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import PropTypes from 'prop-types';
 import React from 'react';
 
-import Setting from './setting.jsx';
+import Setting from './setting';
 
-export default class BoolSetting extends React.Component {
- static propTypes = {
- id: PropTypes.string.isRequired,
- label: PropTypes.node.isRequired,
- labelClassName: PropTypes.string,
- helpText: PropTypes.node,
- placeholder: PropTypes.string.isRequired,
- value: PropTypes.bool.isRequired,
- inputClassName: PropTypes.string,
- onChange: PropTypes.func,
- };
+type Props = {
+ id: string;
+ label: React.ReactNode;
+ labelClassName: string;
+ helpText?: React.ReactNode;
+ placeholder: string;
+ value: boolean;
+ inputClassName: string;
+ onChange(name: string, value: any): void; // value is any since onChange is a common func for inputs and checkboxes
+}
 
- static defaultProps = {
+export default class BoolSetting extends React.Component<Props> {
+ public static defaultProps: Partial<Props> = {
  labelClassName: '',
  inputClassName: '',
  };
 
- handleChange = (e) => {
+ private handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
  this.props.onChange(this.props.id, e.target.checked);
  }
 
- render() {
+ public render(): JSX.Element {
  return (
  <Setting
  label={this.props.label}

components/widgets/settings/radio_setting.test.jsx → components/widgets/settings/radio_setting.test.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import RadioSetting from './radio_setting.jsx';
+import RadioSetting from './radio_setting';
 
 describe('components/widgets/settings/RadioSetting', () => {
  test('render component with required props', () => {

components/widgets/settings/radio_setting.jsx → components/widgets/settings/radio_setting.tsx

@@ -1,37 +1,34 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import PropTypes from 'prop-types';
 import React from 'react';
 
-import Setting from './setting.jsx';
+import Setting from './setting';
 
-export default class RadioSetting extends React.Component {
- static propTypes = {
- id: PropTypes.string.isRequired,
- options: PropTypes.arrayOf(PropTypes.shape({
- text: PropTypes.string,
- value: PropTypes.string,
- })),
- label: PropTypes.node.isRequired,
- onChange: PropTypes.func.isRequired,
- value: PropTypes.string,
- labelClassName: PropTypes.string,
- inputClassName: PropTypes.string,
- helpText: PropTypes.node,
- };
+type Props = {
+ id: string;
+ options: {text: string;value: string}[];
+ label: React.ReactNode;
+ onChange(name: string, value: any): void;
+ value?: string;
+ labelClassName?: string;
+ inputClassName?: string;
+ helpText?: React.ReactNode;
+
+}
 
- static defaultProps = {
+export default class RadioSetting extends React.Component<Props> {
+ public static defaultProps: Partial<Props> = {
  labelClassName: '',
  inputClassName: '',
  options: [],
  };
 
- handleChange = (e) => {
+ private handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
  this.props.onChange(this.props.id, e.target.value);
  }
 
- render() {
+ public render(): JSX.Element {
  return (
  <Setting
  label={this.props.label}

components/widgets/settings/setting.jsx → components/widgets/settings/setting.tsx

@@ -2,19 +2,26 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const Setting = (props) => {
- const {
- children,
- footer,
- helpText,
- inputId,
- label,
- labelClassName,
- inputClassName,
- } = props;
+type Props = {
+ inputId?: string;
+ label: React.ReactNode;
+ labelClassName?: string;
+ inputClassName?: string;
+ children: React.ReactNode;
+ helpText?: React.ReactNode;
+ footer?: React.ReactNode;
+}
 
+const Setting: React.FC<Props> = ({
+ inputId,
+ label,
+ labelClassName,
+ inputClassName,
+ children,
+ footer,
+ helpText,
+}: Props) => {
  return (
  <div className='form-group'>
  <label
@@ -34,14 +41,4 @@ const Setting = (props) => {
  );
 };
 
-Setting.propTypes = {
- inputId: PropTypes.string,
- label: PropTypes.node.isRequired,
- labelClassName: PropTypes.string,
- inputClassName: PropTypes.string,
- children: PropTypes.node.isRequired,
- helpText: PropTypes.node,
- footer: PropTypes.node,
-};
-
 export default Setting;

components/widgets/settings/text_setting.test.jsx → components/widgets/settings/text_setting.test.tsx

@@ -3,99 +3,67 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import TextSetting from './text_setting.jsx';
+import TextSetting from './text_setting';
 
 describe('components/widgets/settings/TextSetting', () => {
  test('render component with required props', () => {
+ const onChange = jest.fn();
  const wrapper = shallow(
  <TextSetting
  id='string.id'
  label='some label'
  value='some value'
+ onChange={onChange}
  />
  );
  expect(wrapper).toMatchInlineSnapshot(`
-<Setting
- inputClassName=""
- inputId="string.id"
- label="some label"
- labelClassName=""
->
- <input
- className="form-control"
- id="string.id"
- maxLength={null}
- onChange={[Function]}
- type="input"
- value="some value"
- />
-</Setting>
-`);
+ <Setting
+  inputClassName=""
+  inputId="string.id"
+  label="some label"
+  labelClassName=""
+ >
+  <input
+  className="form-control"
+  id="string.id"
+  maxLength={-1}
+  onChange={[Function]}
+  type="input"
+  value="some value"
+  />
+ </Setting>
+ `);
  });
 
  test('render with textarea type', () => {
+ const onChange = jest.fn();
  const wrapper = shallow(
  <TextSetting
  id='string.id'
  label='some label'
  value='some value'
  type='textarea'
+ onChange={onChange}
  />
  );
  expect(wrapper).toMatchInlineSnapshot(`
-<Setting
- inputClassName=""
- inputId="string.id"
- label="some label"
- labelClassName=""
->
- <textarea
- className="form-control"
- id="string.id"
- maxLength={null}
- onChange={[Function]}
- rows="5"
- style={Object {}}
- value="some value"
- />
-</Setting>
-`);
- });
-
- test('render with bad type', () => {
- console.originalError = console.error;
- console.error = jest.fn();
-
- const wrapper = shallow(
- <TextSetting
- id='string.id'
- label='some label'
- value='some value'
- type='junk'
+ <Setting
+ inputClassName=""
+ inputId="string.id"
+ label="some label"
+ labelClassName=""
+ >
+ <textarea
+ className="form-control"
+ id="string.id"
+ maxLength={-1}
+ onChange={[Function]}
+ rows={5}
+ style={Object {}}
+ value="some value"
  />
- );
-
- expect(console.error).toBeCalledTimes(1);
-
- console.error = console.originalError;
-
- expect(wrapper).toMatchInlineSnapshot(`
-<Setting
- inputClassName=""
- inputId="string.id"
- label="some label"
- labelClassName=""
->
- <input
- className="form-control"
- id="string.id"
- maxLength={null}
- onChange={[Function]}
- type="input"
- value="some value"
- />
-</Setting>
-`);
+ </Setting>
+ `);
  });
 
  test('onChange', () => {