[MM-52831] Migrate "components/admin_console/message_export_settings.jsx" and tests to Typescript (#24933)

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

@@ -70,7 +70,7 @@ import FeatureFlags from './feature_flags.tsx';
 import GroupDetails from './group_settings/group_details';
 import GroupSettings from './group_settings/group_settings';
 import LicenseSettings from './license_settings';
-import MessageExportSettings from './message_export_settings.jsx';
+import MessageExportSettings from './message_export_settings';
 import OpenIdConvert from './openid_convert';
 import PasswordSettings from './password_settings';
 import PermissionSchemesSettings from './permission_schemes_settings';

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

@@ -4,7 +4,7 @@
 import {shallow} from 'enzyme';
 import React from 'react';
 
-import MessageExportSettings from 'components/admin_console/message_export_settings.jsx';
+import MessageExportSettings from 'components/admin_console/message_export_settings';
 
 describe('components/MessageExportSettings', () => {
     test('should match snapshot, disabled, actiance', () => {

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

@@ -2,8 +2,12 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
+import type {ReactNode} from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import type {AdminConfig} from '@mattermost/types/config';
+import type {Job} from '@mattermost/types/jobs';
+
 import ExternalLink from 'components/external_link';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 
@@ -11,6 +15,7 @@ import {DocLinks, JobTypes, exportFormats} from 'utils/constants';
 import {getSiteURL} from 'utils/url';
 import * as Utils from 'utils/utils';
 
+import type {BaseProps, BaseState} from './admin_settings';
 import AdminSettings from './admin_settings';
 import BooleanSetting from './boolean_setting';
 import DropdownSetting from './dropdown_setting';
@@ -19,8 +24,19 @@ import RadioSetting from './radio_setting';
 import SettingsGroup from './settings_group';
 import TextSetting from './text_setting';
 
-export default class MessageExportSettings extends AdminSettings {
+interface State extends BaseState {
-    getConfigFromState = (config) => {
+    enableComplianceExport: AdminConfig['MessageExportSettings']['EnableExport'];
+    exportFormat: AdminConfig['MessageExportSettings']['ExportFormat'];
+    exportJobStartTime: AdminConfig['MessageExportSettings']['DailyRunTime'];
+    globalRelayCustomerType: AdminConfig['MessageExportSettings']['GlobalRelaySettings']['CustomerType'];
+    globalRelaySMTPUsername: AdminConfig['MessageExportSettings']['GlobalRelaySettings']['SMTPUsername'];
+    globalRelaySMTPPassword: AdminConfig['MessageExportSettings']['GlobalRelaySettings']['SMTPPassword'];
+    globalRelayEmailAddress: AdminConfig['MessageExportSettings']['GlobalRelaySettings']['EmailAddress'];
+    globalRelaySMTPServerTimeout: AdminConfig['MessageExportSettings']['GlobalRelaySettings']['SMTPServerTimeout'];
+}
+
+export default class MessageExportSettings extends AdminSettings<BaseProps, State> {
+    getConfigFromState = (config: AdminConfig) => {
         config.MessageExportSettings.EnableExport = this.state.enableComplianceExport;
         config.MessageExportSettings.ExportFormat = this.state.exportFormat;
         config.MessageExportSettings.DailyRunTime = this.state.exportJobStartTime;
@@ -31,18 +47,26 @@ export default class MessageExportSettings extends AdminSettings {
                 SMTPUsername: this.state.globalRelaySMTPUsername,
                 SMTPPassword: this.state.globalRelaySMTPPassword,
                 EmailAddress: this.state.globalRelayEmailAddress,
-
+                SMTPServerTimeout: this.state.globalRelaySMTPServerTimeout,
             };
         }
         return config;
     };
 
-    getStateFromConfig(config) {
+    getStateFromConfig(config: AdminConfig) {
-        const state = {
+        const state: State = {
             enableComplianceExport: config.MessageExportSettings.EnableExport,
             exportFormat: config.MessageExportSettings.ExportFormat,
             exportJobStartTime: config.MessageExportSettings.DailyRunTime,
-            canRunJob: config.MessageExportSettings.EnableExport,
+            globalRelayCustomerType: '',
+            globalRelaySMTPUsername: '',
+            globalRelaySMTPPassword: '',
+            globalRelayEmailAddress: '',
+            globalRelaySMTPServerTimeout: 0,
+            saveNeeded: false,
+            saving: false,
+            serverError: null,
+            errorTooltip: false,
         };
         if (config.MessageExportSettings.GlobalRelaySettings) {
             state.globalRelayCustomerType = config.MessageExportSettings.GlobalRelaySettings.CustomerType;
@@ -53,7 +77,7 @@ export default class MessageExportSettings extends AdminSettings {
         return state;
     }
 
-    getJobDetails = (job) => {
+    getJobDetails = (job: Job) => {
         if (job.data) {
             const message = [];
             if (job.data.messages_exported) {
@@ -246,7 +270,7 @@ export default class MessageExportSettings extends AdminSettings {
                             id='admin.service.complianceExportDesc'
                             defaultMessage='When true, Mattermost will export all messages that were posted in the last 24 hours. The export task is scheduled to run once per day. See <link>the documentation</link> to learn more.'
                             values={{
-                                link: (msg) => (
+                                link: (msg: ReactNode) => (
                                     <ExternalLink
                                         href={DocLinks.COMPILANCE_EXPORT}
                                         location='message_export_settings'
@@ -317,7 +341,7 @@ export default class MessageExportSettings extends AdminSettings {
                         />
                     }
                     getExtraInfoText={this.getJobDetails}
-                    disabled={this.props.isDisabled || !this.state.canRunJob}
+                    disabled={this.props.isDisabled || !this.state.enableComplianceExport}
                 />
             </SettingsGroup>
         );