MM-52825 : Migrate "components/admin_console/database_settings.jsx" and tests to Typescript (#23939)

* moved database_settings to typescript

* remove any and fix types

* fix config type

* fix type related issues and use proper parseInt method

* Uppdate snapshots

---------

Co-authored-by: Manoj Kumawat <manoj@faze.app>
Co-authored-by: Mattermost Build <build@mattermost.com>
Co-authored-by: Ben Schumacher <ben.schumacher@mattermost.com>

webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.jsx.snap

@@ -102,6 +102,7 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
         onChange={[Function]}
         placeholder="E.g.: \\"10\\""
         setByEnv={false}
+        type="text"
         value={10}
       />
       <AdminTextSetting
@@ -121,6 +122,7 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
         onChange={[Function]}
         placeholder="E.g.: \\"10\\""
         setByEnv={false}
+        type="text"
         value={100}
       />
       <AdminTextSetting
@@ -140,6 +142,7 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
         onChange={[Function]}
         placeholder="E.g.: \\"30\\""
         setByEnv={false}
+        type="text"
         value={10}
       />
       <AdminTextSetting
@@ -159,6 +162,7 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
         onChange={[Function]}
         placeholder="E.g.: \\"3600000\\""
         setByEnv={false}
+        type="text"
         value={10}
       />
       <AdminTextSetting
@@ -178,6 +182,7 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
         onChange={[Function]}
         placeholder="E.g.: \\"300000\\""
         setByEnv={false}
+        type="text"
         value={20}
       />
       <AdminTextSetting
@@ -202,6 +207,7 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
         onChange={[Function]}
         placeholder="E.g.: \\"3\\""
         setByEnv={false}
+        type="text"
         value={10}
       />
       <BooleanSetting

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

@@ -51,7 +51,7 @@ import CustomURLSchemesSetting from './custom_url_schemes_setting';
 import DataRetentionSettings from './data_retention_settings';
 import CustomDataRetentionForm from './data_retention_settings/custom_policy_form';
 import GlobalDataRetentionForm from './data_retention_settings/global_policy_form';
-import DatabaseSettings from './database_settings.jsx';
+import DatabaseSettings from './database_settings';
 import ElasticSearchSettings from './elasticsearch_settings';
 import {
     LDAPFeatureDiscovery,

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

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

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

@@ -4,7 +4,7 @@
 import {shallow} from 'enzyme';
 import React from 'react';
 
-import DatabaseSettings from 'components/admin_console/database_settings.jsx';
+import DatabaseSettings from 'components/admin_console/database_settings';
 
 jest.mock('actions/admin_actions.jsx', () => {
     const pingFn = () => {

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

@@ -4,6 +4,8 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import type {AdminConfig} from '@mattermost/types/config';
+
 import {recycleDatabaseConnection, ping} from 'actions/admin_actions';
 
 import ExternalLink from 'components/external_link';
@@ -12,6 +14,7 @@ import {DocLinks} from 'utils/constants';
 import {t} from 'utils/i18n';
 import * as Utils from 'utils/utils';
 
+import type {BaseState} from './admin_settings';
 import AdminSettings from './admin_settings';
 import BooleanSetting from './boolean_setting';
 import MigrationsTable from './database';
@@ -19,8 +22,29 @@ import RequestButton from './request_button/request_button';
 import SettingsGroup from './settings_group';
 import TextSetting from './text_setting';
 
-export default class DatabaseSettings extends AdminSettings {
+interface Props {
-    constructor(props) {
+    license: {
+        IsLicensed: string;
+    };
+    isDisabled: boolean;
+}
+
+interface State extends BaseState {
+    searchBackend: string;
+    maxIdleConns: number;
+    maxOpenConns: number;
+    trace: boolean;
+    disableDatabaseSearch: boolean;
+    queryTimeout: number;
+    connMaxLifetimeMilliseconds: number;
+    connMaxIdleTimeMilliseconds: number;
+    minimumHashtagLength: number;
+    dataSource: string;
+    driverName: string;
+}
+
+export default class DatabaseSettings extends AdminSettings<Props, State> {
+    constructor(props: Props) {
         super(props);
 
         this.state = {
@@ -29,7 +53,7 @@ export default class DatabaseSettings extends AdminSettings {
         };
     }
 
-    getConfigFromState = (config) => {
+    getConfigFromState = (config: AdminConfig) => {
         // driverName and dataSource are read-only from the UI
 
         config.SqlSettings.MaxIdleConns = this.parseIntNonZero(this.state.maxIdleConns);
@@ -55,7 +79,7 @@ export default class DatabaseSettings extends AdminSettings {
         return res.ActiveSearchBackend;
     }
 
-    getStateFromConfig(config) {
+    getStateFromConfig(config: AdminConfig) {
         return {
             driverName: config.SqlSettings.DriverName,
             dataSource: config.SqlSettings.DataSource,
@@ -207,6 +231,7 @@ export default class DatabaseSettings extends AdminSettings {
                     onChange={this.handleChange}
                     setByEnv={this.isSetByEnv('SqlSettings.MaxIdleConns')}
                     disabled={this.props.isDisabled}
+                    type='text'
                 />
                 <TextSetting
                     id='maxOpenConns'
@@ -227,6 +252,7 @@ export default class DatabaseSettings extends AdminSettings {
                     onChange={this.handleChange}
                     setByEnv={this.isSetByEnv('SqlSettings.MaxOpenConns')}
                     disabled={this.props.isDisabled}
+                    type='text'
                 />
                 <TextSetting
                     id='queryTimeout'
@@ -247,6 +273,7 @@ export default class DatabaseSettings extends AdminSettings {
                     onChange={this.handleChange}
                     setByEnv={this.isSetByEnv('SqlSettings.QueryTimeout')}
                     disabled={this.props.isDisabled}
+                    type='text'
                 />
                 <TextSetting
                     id='connMaxLifetimeMilliseconds'
@@ -267,6 +294,7 @@ export default class DatabaseSettings extends AdminSettings {
                     onChange={this.handleChange}
                     setByEnv={this.isSetByEnv('SqlSettings.ConnMaxLifetimeMilliseconds')}
                     disabled={this.props.isDisabled}
+                    type='text'
                 />
                 <TextSetting
                     id='connMaxIdleTimeMilliseconds'
@@ -287,6 +315,7 @@ export default class DatabaseSettings extends AdminSettings {
                     onChange={this.handleChange}
                     setByEnv={this.isSetByEnv('SqlSettings.ConnMaxIdleTimeMilliseconds')}
                     disabled={this.props.isDisabled}
+                    type='text'
                 />
                 <TextSetting
                     id='minimumHashtagLength'
@@ -317,6 +346,7 @@ export default class DatabaseSettings extends AdminSettings {
                     onChange={this.handleChange}
                     setByEnv={this.isSetByEnv('ServiceSettings.MinimumHashtagLength')}
                     disabled={this.props.isDisabled}
+                    type='text'
                 />
                 <BooleanSetting
                     id='trace'