[MM-52843] : Migrate "components/admin_console/bleve_settings.jsx" and tests to Typescript (#23527)

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

@@ -76,6 +76,7 @@ exports[`components/BleveSettings should match snapshot, disabled 1`] = `
         }
         onChange={[Function]}
         setByEnv={false}
+        type="input"
         value=""
       />
       <div
@@ -335,6 +336,7 @@ exports[`components/BleveSettings should match snapshot, enabled 1`] = `
         }
         onChange={[Function]}
         setByEnv={false}
+        type="input"
         value="bleve.idx"
       />
       <div
@@ -367,6 +369,7 @@ exports[`components/BleveSettings should match snapshot, enabled 1`] = `
                   id="admin.bleve.createJob.help"
                 />
               }
+              disabled={false}
               getExtraInfoText={[Function]}
               jobType="bleve_post_indexing"
             />

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

@@ -63,7 +63,7 @@ import CustomDataRetentionForm from './data_retention_settings/custom_policy_for
 import MessageExportSettings from './message_export_settings.jsx';
 import DatabaseSettings from './database_settings.jsx';
 import ElasticSearchSettings from './elasticsearch_settings.jsx';
-import BleveSettings from './bleve_settings.jsx';
+import BleveSettings from './bleve_settings';
 import FeatureFlags from './feature_flags.tsx';
 import ClusterSettings from './cluster_settings.jsx';
 import CustomTermsOfServiceSettings from './custom_terms_of_service_settings';

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

@@ -63,7 +63,7 @@ export default abstract class AdminSettings <Props extends BaseProps, State exte
 
     protected abstract renderSettings(): React.ReactElement;
 
-    protected handleSaved?: ((config: AdminConfig) => React.ReactElement);
+    protected handleSaved?: ((config: AdminConfig) => React.ReactElement | void);
 
     protected canSave?: () => boolean;
 

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

@@ -4,7 +4,9 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import BleveSettings from 'components/admin_console/bleve_settings.jsx';
+import {AdminConfig} from '@mattermost/types/config';
+
+import BleveSettings from 'components/admin_console/bleve_settings';
 
 jest.mock('actions/admin_actions.jsx', () => {
     return {
@@ -21,7 +23,7 @@ describe('components/BleveSettings', () => {
                 EnableSearching: false,
                 EnableAutocomplete: false,
             },
-        };
+        } as AdminConfig;
         const wrapper = shallow(
             <BleveSettings
                 config={config}
@@ -38,7 +40,7 @@ describe('components/BleveSettings', () => {
                 EnableSearching: false,
                 EnableAutocomplete: false,
             },
-        };
+        } as AdminConfig;
         const wrapper = shallow(
             <BleveSettings
                 config={config}

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

@@ -4,30 +4,47 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import {AdminConfig} from '@mattermost/types/config';
+import {Job} from '@mattermost/types/jobs';
+
 import {blevePurgeIndexes} from 'actions/admin_actions.jsx';
 import {JobStatuses, JobTypes} from 'utils/constants';
 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 TextSetting from './text_setting';
 import JobsTable from './jobs';
 import RequestButton from './request_button/request_button';
 import SettingsGroup from './settings_group';
 
-export default class BleveSettings extends AdminSettings {
+type Props = BaseProps & {
-    getConfigFromState = (config) => {
+    config: AdminConfig;
-        config.BleveSettings.IndexDir = this.state.indexDir;
+};
-        config.BleveSettings.EnableIndexing = this.state.enableIndexing;
-        config.BleveSettings.EnableSearching = this.state.enableSearching;
-        config.BleveSettings.EnableAutocomplete = this.state.enableAutocomplete;
 
+type State = BaseState & {
+    indexDir: string;
+    enableIndexing: boolean;
+    enableSearching: boolean;
+    enableAutocomplete: boolean;
+    canSave: boolean;
+    canPurgeAndIndex: boolean;
+};
+
+export default class BleveSettings extends AdminSettings<Props, State> {
+    getConfigFromState = (config: Props['config']) => {
+        if (config && config.BleveSettings) {
+            config.BleveSettings.IndexDir = this.state.indexDir;
+            config.BleveSettings.EnableIndexing = this.state.enableIndexing;
+            config.BleveSettings.EnableSearching = this.state.enableSearching;
+            config.BleveSettings.EnableAutocomplete = this.state.enableAutocomplete;
+        }
         return config;
     };
 
-    getStateFromConfig(config) {
+    getStateFromConfig(config: Props['config']) {
         return {
             enableIndexing: config.BleveSettings.EnableIndexing,
             indexDir: config.BleveSettings.IndexDir,
@@ -38,7 +55,7 @@ export default class BleveSettings extends AdminSettings {
         };
     }
 
-    handleSettingChanged = (id, value) => {
+    handleSettingChanged = (id: string, value: boolean) => {
         if (id === 'enableIndexing') {
             if (value === false) {
                 this.setState({
@@ -67,7 +84,7 @@ export default class BleveSettings extends AdminSettings {
         return this.state.canSave;
     };
 
-    getExtraInfo(job) {
+    getExtraInfo(job: Job) {
         if (job.status === JobStatuses.IN_PROGRESS) {
             return (
                 <FormattedMessage
@@ -78,7 +95,7 @@ export default class BleveSettings extends AdminSettings {
             );
         }
 
-        return null;
+        return <></>;
     }
 
     renderTitle() {
@@ -143,6 +160,7 @@ export default class BleveSettings extends AdminSettings {
                     onChange={this.handleSettingChanged}
                     setByEnv={this.isSetByEnv('BleveSettings.IndexDir')}
                     disabled={this.props.isDisabled}
+                    type='input'
                 />
                 <div className='form-group'>
                     <label
@@ -157,7 +175,7 @@ export default class BleveSettings extends AdminSettings {
                         <div className='job-table-setting'>
                             <JobsTable
                                 jobType={JobTypes.BLEVE_POST_INDEXING}
-                                disabled={!this.state.canPurgeAndIndex || this.props.isDisabled}
+                                disabled={!this.state.canPurgeAndIndex || Boolean(this.props.isDisabled)}
                                 createJobButtonText={
                                     <FormattedMessage
                                         id='admin.bleve.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;
+    getExtraInfoText?: (job: Job) => string | React.ReactElement;
     disabled: boolean;
     createJobHelpText: React.ReactElement;
     jobType: JobType;

webapp/channels/src/utils/constants.tsx

@@ -931,7 +931,7 @@ export const JobTypes = {
     BLEVE_POST_INDEXING: 'bleve_post_indexing',
     LDAP_SYNC: 'ldap_sync',
     MESSAGE_EXPORT: 'message_export',
-};
+} as const;
 
 export const JobStatuses = {
     PENDING: 'pending',

webapp/platform/types/src/jobs.ts

@@ -3,7 +3,7 @@
 
 import {IDMappedObjects} from './utilities';
 
-export type JobType = 'data_retention' | 'elasticsearch_post_indexing' | 'ldap_sync' | 'message_export';
+export type JobType = 'data_retention' | 'elasticsearch_post_indexing' | 'bleve_post_indexing' | 'ldap_sync' | 'message_export';
 export type JobStatus = 'pending' | 'in_progress' | 'success' | 'error' | 'cancel_requested' | 'canceled' | 'warning';
 export type Job = JobTypeBase & {
     id: string;