MM-52845 : Migrate "components/admin_console/elasticsearch_settings.jsx" and tests to Typescript (#23821)

webapp/channels/src/components/admin_console/admin_definition.jsx

@@ -62,7 +62,7 @@ import GlobalDataRetentionForm from './data_retention_settings/global_policy_for
 import CustomDataRetentionForm from './data_retention_settings/custom_policy_form';
 import MessageExportSettings from './message_export_settings.jsx';
 import DatabaseSettings from './database_settings.jsx';
-import ElasticSearchSettings from './elasticsearch_settings.jsx';
+import ElasticSearchSettings from './elasticsearch_settings';
 import BleveSettings from './bleve_settings';
 import FeatureFlags from './feature_flags.tsx';
 import ClusterSettings from './cluster_settings.jsx';

webapp/channels/src/components/admin_console/elasticsearch_settings.test.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 import {shallow} from 'enzyme';
 
 import SaveButton from 'components/save_button';
-import ElasticSearchSettings from 'components/admin_console/elasticsearch_settings.jsx';
+import ElasticSearchSettings from 'components/admin_console/elasticsearch_settings';
 
 jest.mock('actions/admin_actions.jsx', () => {
     return {

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

@@ -11,15 +11,39 @@ import {t} from 'utils/i18n';
 
 import ExternalLink from 'components/external_link';
 
-import AdminSettings from './admin_settings';
+import AdminSettings, {BaseProps, BaseState} from './admin_settings';
 import BooleanSetting from './boolean_setting';
 import JobsTable from './jobs';
 import RequestButton from './request_button/request_button';
 import SettingsGroup from './settings_group';
 import TextSetting from './text_setting';
+import {AdminConfig} from '@mattermost/types/config';
+import {Job, JobType} from '@mattermost/types/jobs';
 
-export default class ElasticsearchSettings extends AdminSettings {
+interface State extends BaseState {
-    getConfigFromState = (config) => {
+    connectionUrl: string;
+    skipTLSVerification: boolean;
+    ca: string;
+    clientCert: string;
+    clientKey: string;
+    username: string;
+    password: string;
+    sniff: boolean;
+    enableIndexing: boolean;
+    enableSearching: boolean;
+    enableAutocomplete: boolean;
+    configTested: boolean;
+    canSave: boolean;
+    canPurgeAndIndex: boolean;
+    ignoredPurgeIndexes: string;
+}
+
+type Props = BaseProps & {
+    config: AdminConfig;
+};
+
+export default class ElasticsearchSettings extends AdminSettings<Props, State> {
+    getConfigFromState = (config: AdminConfig) => {
         config.ElasticsearchSettings.ConnectionURL = this.state.connectionUrl;
         config.ElasticsearchSettings.SkipTLSVerification = this.state.skipTLSVerification;
         config.ElasticsearchSettings.CA = this.state.ca;
@@ -36,7 +60,7 @@ export default class ElasticsearchSettings extends AdminSettings {
         return config;
     };
 
-    getStateFromConfig(config) {
+    getStateFromConfig(config: AdminConfig) {
         return {
             connectionUrl: config.ElasticsearchSettings.ConnectionURL,
             skipTLSVerification: config.ElasticsearchSettings.SkipTLSVerification,
@@ -56,7 +80,7 @@ export default class ElasticsearchSettings extends AdminSettings {
         };
     }
 
-    handleSettingChanged = (id, value) => {
+    handleSettingChanged = (id: string, value: boolean) => {
         if (id === 'enableIndexing') {
             if (value === false) {
                 this.setState({
@@ -97,7 +121,7 @@ export default class ElasticsearchSettings extends AdminSettings {
         return this.state.canSave;
     };
 
-    doTestConfig = (success, error) => {
+    doTestConfig = (success: () => void, error: (error: string) => void): void => {
         const config = JSON.parse(JSON.stringify(this.props.config));
         this.getConfigFromState(config);
 
@@ -110,7 +134,7 @@ export default class ElasticsearchSettings extends AdminSettings {
                 });
                 success();
             },
-            (err) => {
+            (err: string) => {
                 this.setState({
                     configTested: false,
                     canSave: false,
@@ -120,7 +144,7 @@ export default class ElasticsearchSettings extends AdminSettings {
         );
     };
 
-    getExtraInfo(job) {
+    getExtraInfo(job: Job) {
         if (job.status === JobStatuses.IN_PROGRESS) {
             return (
                 <FormattedMessage
@@ -382,8 +406,8 @@ export default class ElasticsearchSettings extends AdminSettings {
                     <div className='col-sm-8'>
                         <div className='job-table-setting'>
                             <JobsTable
-                                jobType={JobTypes.ELASTICSEARCH_POST_INDEXING}
+                                jobType={JobTypes.ELASTICSEARCH_POST_INDEXING as JobType}
-                                disabled={!this.state.canPurgeAndIndex || this.props.isDisabled}
+                                disabled={!this.state.canPurgeAndIndex || this.props.isDisabled!}
                                 createJobButtonText={
                                     <FormattedMessage
                                         id='admin.elasticsearch.createJob.title'

webapp/channels/src/components/admin_console/jobs/table.tsx

@@ -21,7 +21,7 @@ import './table.scss';
 
 export type Props = {
     jobs: Job[];
-    getExtraInfoText?: (job: Job) => string | React.ReactElement;
+    getExtraInfoText?: (job: Job) => React.ReactNode;
     disabled: boolean;
     createJobHelpText: React.ReactElement;
     jobType: JobType;