MM-52827, MM-52840 : Migrate "components/admin_console/session_length_settings.jsx" & "components/admin_console/cluster_table_container.jsx" to Typescript (#23509)

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

@@ -173,8 +173,8 @@ export default abstract class AdminSettings <Props extends BaseProps, State exte
         return n;
     };
 
-    private parseIntZeroOrMin = (str: string, minimumValue = 1) => {
+    protected parseIntZeroOrMin = (str: string | number, minimumValue = 1) => {
-        const n = parseInt(str, 10);
+        const n = typeof str === 'string' ? parseInt(str, 10) : str;
 
         if (isNaN(n) || n < 0) {
             return 0;
@@ -186,8 +186,8 @@ export default abstract class AdminSettings <Props extends BaseProps, State exte
         return n;
     };
 
-    protected parseIntNonZero = (str: string, defaultValue?: number, minimumValue = 1) => {
+    protected parseIntNonZero = (str: string | number, defaultValue?: number, minimumValue = 1) => {
-        const n = parseInt(str, 10);
+        const n = typeof str === 'string' ? parseInt(str, 10) : str;
 
         if (isNaN(n) || n < minimumValue) {
             if (defaultValue) {

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

@@ -14,7 +14,7 @@ import ExternalLink from 'components/external_link';
 
 import AdminSettings from './admin_settings';
 import BooleanSetting from './boolean_setting';
-import ClusterTableContainer from './cluster_table_container.jsx';
+import ClusterTableContainer from './cluster_table_container';
 import SettingsGroup from './settings_group';
 import TextSetting from './text_setting';
 import DocLinks from 'utils/constants';

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

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {CSSProperties} from 'react';
+import React, {CSSProperties, MouseEvent, PureComponent} from 'react';
 import {FormattedMessage} from 'react-intl';
 import * as Utils from 'utils/utils';
 import statusGreen from 'images/status_green.png';
@@ -16,7 +16,7 @@ type Props = {
         hostname: string;
         ipaddress: string;
     }>;
-    reload: () => void;
+    reload: (e: MouseEvent<HTMLButtonElement>) => void;
 }
 
 type Style = {
@@ -25,7 +25,7 @@ type Style = {
     warning: CSSProperties;
 }
 
-export default class ClusterTable extends React.PureComponent<Props> {
+export default class ClusterTable extends PureComponent<Props> {
     render() {
         let versionMismatch = (
             <img

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

@@ -1,15 +1,22 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {MouseEvent, PureComponent} from 'react';
 
+import {ClusterInfo} from '@mattermost/types/admin';
 import {getClusterStatus} from 'actions/admin_actions.jsx';
 import LoadingScreen from '../loading_screen';
 
 import ClusterTable from './cluster_table';
 
-export default class ClusterTableContainer extends React.PureComponent {
+interface State {
-    constructor(props) {
+    clusterInfos: ClusterInfo[] | null;
+}
+
+export default class ClusterTableContainer extends PureComponent<null, State> {
+    interval: NodeJS.Timeout | null;
+
+    constructor(props: null) {
         super(props);
 
         this.interval = null;
@@ -21,7 +28,7 @@ export default class ClusterTableContainer extends React.PureComponent {
 
     load = () => {
         getClusterStatus(
-            (data) => {
+            (data: ClusterInfo[]) => {
                 this.setState({
                     clusterInfos: data,
                 });
@@ -43,7 +50,7 @@ export default class ClusterTableContainer extends React.PureComponent {
         }
     }
 
-    reload = (e) => {
+    reload = (e: MouseEvent<HTMLButtonElement>) => {
         if (e) {
             e.preventDefault();
         }

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

@@ -4,16 +4,32 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import {AdminConfig, ClientLicense, ServiceSettings} from '@mattermost/types/config';
+
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import * as Utils from 'utils/utils';
 
-import AdminSettings from './admin_settings';
+import AdminSettings, {BaseState, BaseProps} from './admin_settings';
 import BooleanSetting from './boolean_setting';
 import SettingsGroup from './settings_group';
 import TextSetting from './text_setting';
 
-export default class SessionLengthSettings extends AdminSettings {
+interface State extends BaseState {
-    getConfigFromState = (config) => {
+    extendSessionLengthWithActivity: ServiceSettings['ExtendSessionLengthWithActivity'];
+    sessionLengthWebInHours: ServiceSettings['SessionLengthWebInHours'];
+    sessionLengthMobileInHours: ServiceSettings['SessionLengthMobileInHours'];
+    sessionLengthSSOInHours: ServiceSettings['SessionLengthSSOInHours'];
+    sessionCacheInMinutes: ServiceSettings['SessionCacheInMinutes'];
+    sessionIdleTimeoutInMinutes: ServiceSettings['SessionIdleTimeoutInMinutes'];
+    sessionIdleTimeoutMobileInMinutes: ClientLicense['SessionIdleTimeoutMobileInMinutes'];
+}
+
+interface Props extends BaseProps {
+    license: ClientLicense;
+}
+
+export default class SessionLengthSettings extends AdminSettings<Props, State> {
+    getConfigFromState = (config: AdminConfig) => {
         const MINIMUM_IDLE_TIMEOUT = 5;
 
         config.ServiceSettings.ExtendSessionLengthWithActivity = this.state.extendSessionLengthWithActivity;
@@ -26,7 +42,7 @@ export default class SessionLengthSettings extends AdminSettings {
         return config;
     };
 
-    getStateFromConfig(config) {
+    getStateFromConfig(config: AdminConfig) {
         return {
             extendSessionLengthWithActivity: config.ServiceSettings.ExtendSessionLengthWithActivity,
             sessionLengthWebInHours: config.ServiceSettings.SessionLengthWebInHours,
@@ -94,6 +110,7 @@ export default class SessionLengthSettings extends AdminSettings {
             sessionTimeoutSetting = (
                 <TextSetting
                     id='sessionIdleTimeoutInMinutes'
+                    type='number'
                     label={
                         <FormattedMessage
                             id='admin.service.sessionIdleTimeout'
@@ -150,6 +167,7 @@ export default class SessionLengthSettings extends AdminSettings {
                     onChange={this.handleChange}
                     setByEnv={this.isSetByEnv('ServiceSettings.SessionLengthWebInHours')}
                     disabled={this.props.isDisabled}
+                    type='number'
                 />
                 <TextSetting
                     id='sessionLengthMobileInHours'
@@ -157,14 +175,14 @@ export default class SessionLengthSettings extends AdminSettings {
                         <FormattedMessage
                             id='admin.service.mobileSessionHours'
                             defaultMessage='Session Length Mobile (hours):'
-                        />
+                        />}
-                    }
                     placeholder={Utils.localizeMessage('admin.service.sessionHoursEx', 'E.g.: "720"')}
                     helpText={sessionLengthMobileHelpText}
                     value={this.state.sessionLengthMobileInHours}
                     onChange={this.handleChange}
                     setByEnv={this.isSetByEnv('ServiceSettings.SessionLengthMobileInHours')}
                     disabled={this.props.isDisabled}
+                    type='number'
                 />
                 <TextSetting
                     id='sessionLengthSSOInHours'
@@ -172,14 +190,14 @@ export default class SessionLengthSettings extends AdminSettings {
                         <FormattedMessage
                             id='admin.service.ssoSessionHours'
                             defaultMessage='Session Length SSO (hours):'
-                        />
+                        />}
-                    }
                     placeholder={Utils.localizeMessage('admin.service.sessionHoursEx', 'E.g.: "720"')}
                     helpText={sessionLengthSSOHelpText}
                     value={this.state.sessionLengthSSOInHours}
                     onChange={this.handleChange}
                     setByEnv={this.isSetByEnv('ServiceSettings.SessionLengthSSOInHours')}
                     disabled={this.props.isDisabled}
+                    type='number'
                 />
                 <TextSetting
                     id='sessionCacheInMinutes'
@@ -187,19 +205,18 @@ export default class SessionLengthSettings extends AdminSettings {
                         <FormattedMessage
                             id='admin.service.sessionCache'
                             defaultMessage='Session Cache (minutes):'
-                        />
+                        />}
-                    }
                     placeholder={Utils.localizeMessage('admin.service.sessionMinutesEx', 'E.g.: "10"')}
                     helpText={
                         <FormattedMessage
                             id='admin.service.sessionCacheDesc'
                             defaultMessage='The number of minutes to cache a session in memory:'
-                        />
+                        />}
-                    }
                     value={this.state.sessionCacheInMinutes}
                     onChange={this.handleChange}
                     setByEnv={this.isSetByEnv('ServiceSettings.SessionCacheInMinutes')}
                     disabled={this.props.isDisabled}
+                    type='number'
                 />
                 {sessionTimeoutSetting}
             </SettingsGroup>