[MM-60077] Convert ./components/admin_console/boolean_setting.tsx from Class Component to Function Component (#27917)

* Change: Convert class component to functional component in boolean_setting
Change: Update test snapshots in settings tests where boolean_setting is used

* Change: Use useMemo instead of useState and useEffect to prevent constant re-rendering

* Change: Use useCallback to cache the handleChange function

* Change: Add onChange to useCallback dependencies

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

@@ -16,14 +16,7 @@ exports[`components/BleveSettings should match snapshot, disabled 1`] = `
       />
     </AdminHeader>
     <Memo(SettingsGroup)>
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, indexing of new posts occurs automatically. Search queries will use database search until \\"Enable Bleve for search queries\\" is enabled. <link>Learn more about Bleve in our documentation.</link>"
@@ -44,12 +37,6 @@ exports[`components/BleveSettings should match snapshot, disabled 1`] = `
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
       <AdminTextSetting
@@ -145,14 +132,8 @@ exports[`components/BleveSettings should match snapshot, disabled 1`] = `
           }
         }
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
         disabled={true}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, Bleve will be used for all search queries using the latest index. Search results may be incomplete until a bulk index of the existing post database is finished. When false, database search is used."
@@ -168,22 +149,10 @@ exports[`components/BleveSettings should match snapshot, disabled 1`] = `
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
         disabled={true}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, Bleve will be used for all autocompletion queries on users and channels using the latest index. Autocompletion results may be incomplete until a bulk index of the existing users and channels database is finished. When false, database autocomplete is used."
@@ -199,12 +168,6 @@ exports[`components/BleveSettings should match snapshot, disabled 1`] = `
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
     </Memo(SettingsGroup)>
@@ -257,14 +220,7 @@ exports[`components/BleveSettings should match snapshot, enabled 1`] = `
       />
     </AdminHeader>
     <Memo(SettingsGroup)>
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, indexing of new posts occurs automatically. Search queries will use database search until \\"Enable Bleve for search queries\\" is enabled. <link>Learn more about Bleve in our documentation.</link>"
@@ -285,12 +241,6 @@ exports[`components/BleveSettings should match snapshot, enabled 1`] = `
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={true}
       />
       <AdminTextSetting
@@ -386,14 +336,7 @@ exports[`components/BleveSettings should match snapshot, enabled 1`] = `
           }
         }
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, Bleve will be used for all search queries using the latest index. Search results may be incomplete until a bulk index of the existing post database is finished. When false, database search is used."
@@ -409,22 +352,9 @@ exports[`components/BleveSettings should match snapshot, enabled 1`] = `
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, Bleve will be used for all autocompletion queries on users and channels using the latest index. Autocompletion results may be incomplete until a bulk index of the existing users and channels database is finished. When false, database autocomplete is used."
@@ -440,12 +370,6 @@ exports[`components/BleveSettings should match snapshot, enabled 1`] = `
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
     </Memo(SettingsGroup)>

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

@@ -25,14 +25,7 @@ exports[`components/ClusterSettings should match snapshot, compression disabled
           id="admin.cluster.noteDescription"
         />
       </div>
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, Mattermost will run in High Availability mode. Please see <link>documentation</link> to learn more about configuring High Availability for Mattermost."
@@ -53,12 +46,6 @@ exports[`components/ClusterSettings should match snapshot, compression disabled
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={true}
       />
       <AdminTextSetting
@@ -109,14 +96,7 @@ exports[`components/ClusterSettings should match snapshot, compression disabled
         setByEnv={false}
         value=""
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, the cluster will attempt to communicate via IP Address vs using the hostname."
@@ -132,22 +112,9 @@ exports[`components/ClusterSettings should match snapshot, compression disabled
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, all communication through the gossip protocol will be encrypted."
@@ -163,22 +130,9 @@ exports[`components/ClusterSettings should match snapshot, compression disabled
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, all communication through the gossip protocol will be compressed. It is recommended to keep this flag disabled."
@@ -194,12 +148,6 @@ exports[`components/ClusterSettings should match snapshot, compression disabled
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
       <AdminTextSetting
@@ -285,14 +233,7 @@ exports[`components/ClusterSettings should match snapshot, compression enabled 1
           id="admin.cluster.noteDescription"
         />
       </div>
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, Mattermost will run in High Availability mode. Please see <link>documentation</link> to learn more about configuring High Availability for Mattermost."
@@ -313,12 +254,6 @@ exports[`components/ClusterSettings should match snapshot, compression enabled 1
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={true}
       />
       <AdminTextSetting
@@ -369,14 +304,7 @@ exports[`components/ClusterSettings should match snapshot, compression enabled 1
         setByEnv={false}
         value=""
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, the cluster will attempt to communicate via IP Address vs using the hostname."
@@ -392,22 +320,9 @@ exports[`components/ClusterSettings should match snapshot, compression enabled 1
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, all communication through the gossip protocol will be encrypted."
@@ -423,22 +338,9 @@ exports[`components/ClusterSettings should match snapshot, compression enabled 1
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, all communication through the gossip protocol will be compressed. It is recommended to keep this flag disabled."
@@ -454,12 +356,6 @@ exports[`components/ClusterSettings should match snapshot, compression enabled 1
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={true}
       />
       <AdminTextSetting
@@ -545,14 +441,7 @@ exports[`components/ClusterSettings should match snapshot, encryption disabled 1
           id="admin.cluster.noteDescription"
         />
       </div>
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, Mattermost will run in High Availability mode. Please see <link>documentation</link> to learn more about configuring High Availability for Mattermost."
@@ -573,12 +462,6 @@ exports[`components/ClusterSettings should match snapshot, encryption disabled 1
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={true}
       />
       <AdminTextSetting
@@ -629,14 +512,7 @@ exports[`components/ClusterSettings should match snapshot, encryption disabled 1
         setByEnv={false}
         value=""
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, the cluster will attempt to communicate via IP Address vs using the hostname."
@@ -652,22 +528,9 @@ exports[`components/ClusterSettings should match snapshot, encryption disabled 1
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, all communication through the gossip protocol will be encrypted."
@@ -683,22 +546,9 @@ exports[`components/ClusterSettings should match snapshot, encryption disabled 1
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, all communication through the gossip protocol will be compressed. It is recommended to keep this flag disabled."
@@ -714,12 +564,6 @@ exports[`components/ClusterSettings should match snapshot, encryption disabled 1
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
       <AdminTextSetting
@@ -805,14 +649,7 @@ exports[`components/ClusterSettings should match snapshot, encryption enabled 1`
           id="admin.cluster.noteDescription"
         />
       </div>
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, Mattermost will run in High Availability mode. Please see <link>documentation</link> to learn more about configuring High Availability for Mattermost."
@@ -833,12 +670,6 @@ exports[`components/ClusterSettings should match snapshot, encryption enabled 1`
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={true}
       />
       <AdminTextSetting
@@ -889,14 +720,7 @@ exports[`components/ClusterSettings should match snapshot, encryption enabled 1`
         setByEnv={false}
         value=""
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, the cluster will attempt to communicate via IP Address vs using the hostname."
@@ -912,22 +736,9 @@ exports[`components/ClusterSettings should match snapshot, encryption enabled 1`
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, all communication through the gossip protocol will be encrypted."
@@ -943,22 +754,9 @@ exports[`components/ClusterSettings should match snapshot, encryption enabled 1`
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={true}
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, all communication through the gossip protocol will be compressed. It is recommended to keep this flag disabled."
@@ -974,12 +772,6 @@ exports[`components/ClusterSettings should match snapshot, encryption enabled 1`
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
       <AdminTextSetting

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

@@ -2,14 +2,8 @@
 
 exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting initial state with false 1`] = `
 <Fragment>
-  <BooleanSetting
+  <Memo(BooleanSetting)
     disabled={false}
-    falseText={
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="False"
-        id="admin.false"
-      />
-    }
     helpText={
       <FormattedMarkdownMessage
         defaultMessage="When true, external guest can be invited to channels within teams. Please see [Permissions Schemes](../user_management/permissions/system_scheme) for which roles can invite guests."
@@ -25,12 +19,6 @@ exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting initial
     }
     onChange={[Function]}
     setByEnv={false}
-    trueText={
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="True"
-        id="admin.true"
-      />
-    }
     value={false}
   />
   <ConfirmModal
@@ -63,14 +51,8 @@ exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting initial
 
 exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting initial state with true 1`] = `
 <Fragment>
-  <BooleanSetting
+  <Memo(BooleanSetting)
     disabled={false}
-    falseText={
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="False"
-        id="admin.false"
-      />
-    }
     helpText={
       <FormattedMarkdownMessage
         defaultMessage="When true, external guest can be invited to channels within teams. Please see [Permissions Schemes](../user_management/permissions/system_scheme) for which roles can invite guests."
@@ -86,12 +68,6 @@ exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting initial
     }
     onChange={[Function]}
     setByEnv={false}
-    trueText={
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="True"
-        id="admin.true"
-      />
-    }
     value={true}
   />
   <ConfirmModal

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

@@ -246,14 +246,8 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
         type="text"
         value={10}
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
         disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="(Development Mode) When true, executing SQL statements are written to the log."
@@ -269,12 +263,6 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
       <RequestButton
@@ -328,14 +316,8 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
           }
         }
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
         disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Disables the use of the database to perform searches. Should only be used when other <link>search engines</link> are configured."
@@ -356,12 +338,6 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={true}
       />
       <div

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

@@ -16,14 +16,7 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
       />
     </AdminHeader>
     <Memo(SettingsGroup)>
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, indexing of new posts occurs automatically. Search queries will use database search until \\"Enable Elasticsearch for search queries\\" is enabled. <link>Learn more about Elasticsearch in our documentation.</link>"
@@ -44,12 +37,6 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
       <AdminTextSetting
@@ -181,14 +168,8 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
         setByEnv={false}
         value="test.key"
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
         disabled={true}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, Mattermost will not require the Elasticsearch certificate to be signed by a trusted Certificate Authority."
@@ -204,12 +185,6 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
       <AdminTextSetting
@@ -262,14 +237,8 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
         setByEnv={false}
         value="test"
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
         disabled={true}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, sniffing finds and connects to all data nodes in your cluster automatically."
@@ -285,12 +254,6 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
       <RequestButton
@@ -468,14 +431,8 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
         }
         setByEnv={false}
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
         disabled={true}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Requires a successful connection to the Elasticsearch server. When true, Elasticsearch will be used for all search queries using the latest index. Search results may be incomplete until a bulk index of the existing post database is finished. When false, database search is used."
@@ -491,22 +448,10 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
         disabled={true}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Requires a successful connection to the Elasticsearch server. When true, Elasticsearch will be used for all autocompletion queries on users and channels using the latest index. Autocompletion results may be incomplete until a bulk index of the existing users and channels database is finished. When false, database autocomplete is used."
@@ -522,12 +467,6 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
     </Memo(SettingsGroup)>
@@ -580,14 +519,7 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
       />
     </AdminHeader>
     <Memo(SettingsGroup)>
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, indexing of new posts occurs automatically. Search queries will use database search until \\"Enable Elasticsearch for search queries\\" is enabled. <link>Learn more about Elasticsearch in our documentation.</link>"
@@ -608,12 +540,6 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={true}
       />
       <AdminTextSetting
@@ -745,14 +671,8 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
         setByEnv={false}
         value="test.key"
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
         disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, Mattermost will not require the Elasticsearch certificate to be signed by a trusted Certificate Authority."
@@ -768,12 +688,6 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
       <AdminTextSetting
@@ -826,14 +740,8 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
         setByEnv={false}
         value="test"
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
         disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="When true, sniffing finds and connects to all data nodes in your cluster automatically."
@@ -849,12 +757,6 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
       <RequestButton
@@ -1031,14 +933,8 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
         }
         setByEnv={false}
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
         disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Requires a successful connection to the Elasticsearch server. When true, Elasticsearch will be used for all search queries using the latest index. Search results may be incomplete until a bulk index of the existing post database is finished. When false, database search is used."
@@ -1054,22 +950,10 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
-      <BooleanSetting
+      <Memo(BooleanSetting)
         disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             defaultMessage="Requires a successful connection to the Elasticsearch server. When true, Elasticsearch will be used for all autocompletion queries on users and channels using the latest index. Autocompletion results may be incomplete until a bulk index of the existing users and channels database is finished. When false, database autocomplete is used."
@@ -1085,12 +969,6 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
     </Memo(SettingsGroup)>

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

@@ -16,14 +16,7 @@ exports[`components/MessageExportSettings should match snapshot, disabled, actia
       />
     </AdminHeader>
     <Memo(SettingsGroup)>
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             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."
@@ -44,12 +37,6 @@ exports[`components/MessageExportSettings should match snapshot, disabled, actia
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
       <AdminTextSetting
@@ -186,14 +173,7 @@ exports[`components/MessageExportSettings should match snapshot, disabled, globa
       />
     </AdminHeader>
     <Memo(SettingsGroup)>
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             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."
@@ -214,12 +194,6 @@ exports[`components/MessageExportSettings should match snapshot, disabled, globa
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={false}
       />
       <AdminTextSetting
@@ -470,14 +444,7 @@ exports[`components/MessageExportSettings should match snapshot, enabled, actian
       />
     </AdminHeader>
     <Memo(SettingsGroup)>
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             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."
@@ -498,12 +465,6 @@ exports[`components/MessageExportSettings should match snapshot, enabled, actian
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={true}
       />
       <AdminTextSetting
@@ -640,14 +601,7 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
       />
     </AdminHeader>
     <Memo(SettingsGroup)>
-      <BooleanSetting
+      <Memo(BooleanSetting)
-        disabled={false}
-        falseText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="False"
-            id="admin.false"
-          />
-        }
         helpText={
           <Memo(MemoizedFormattedMessage)
             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."
@@ -668,12 +622,6 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
         }
         onChange={[Function]}
         setByEnv={false}
-        trueText={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="True"
-            id="admin.true"
-          />
-        }
         value={true}
       />
       <AdminTextSetting

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

@@ -126,14 +126,8 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
             type="text"
             value="fsdsdg"
           />
-          <BooleanSetting
+          <Memo(BooleanSetting)
             disabled={false}
-            falseText={
-              <Memo(MemoizedFormattedMessage)
-                defaultMessage="False"
-                id="admin.false"
-              />
-            }
             helpText={
               <SchemaText
                 text="help-text-b"
@@ -144,12 +138,6 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
             label="label-b"
             onChange={[Function]}
             setByEnv={false}
-            trueText={
-              <Memo(MemoizedFormattedMessage)
-                defaultMessage="True"
-                id="admin.true"
-              />
-            }
             value={false}
           />
           <Memo(DropdownSetting)
@@ -579,14 +567,8 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
               }
             }
           />
-          <BooleanSetting
+          <Memo(BooleanSetting)
             disabled={false}
-            falseText={
-              <Memo(MemoizedFormattedMessage)
-                defaultMessage="False"
-                id="admin.false"
-              />
-            }
             helpText={
               <SchemaText
                 text="help-text-l"
@@ -597,12 +579,6 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
             label="label-l"
             onChange={[Function]}
             setByEnv={true}
-            trueText={
-              <Memo(MemoizedFormattedMessage)
-                defaultMessage="True"
-                id="admin.true"
-              />
-            }
             value={true}
           />
           <Memo(ColorSetting)
@@ -671,14 +647,8 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
             jobType="test"
             key="Config_jobstable_undefined"
           />
-          <BooleanSetting
+          <Memo(BooleanSetting)
             disabled={false}
-            falseText={
-              <Memo(MemoizedFormattedMessage)
-                defaultMessage="False"
-                id="admin.false"
-              />
-            }
             helpText={
               <SchemaText
                 text="escaped-help-text-a"
@@ -689,12 +659,6 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
             label="escaped-label-a"
             onChange={[Function]}
             setByEnv={false}
-            trueText={
-              <Memo(MemoizedFormattedMessage)
-                defaultMessage="True"
-                id="admin.true"
-              />
-            }
             value={true}
           />
         </Memo(SettingsGroup)>

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

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {useCallback, useMemo} from 'react';
 import {FormattedMessage} from 'react-intl';
 import styled from 'styled-components';
 
@@ -74,83 +74,88 @@ type Props = {
     onChange: (id: string, value: boolean) => void;
     trueText?: React.ReactNode;
     falseText?: React.ReactNode;
-    disabled: boolean;
+    disabled?: boolean;
     setByEnv: boolean;
     disabledText?: React.ReactNode;
     helpText: React.ReactNode;
 }
 
-export default class BooleanSetting extends React.PureComponent<Props> {
+const BooleanSetting = ({
-    public static defaultProps = {
+    id,
-        trueText: (
+    label,
-            <FormattedMessage
+    value,
-                id='admin.true'
+    onChange,
-                defaultMessage='True'
+    trueText = (
-            />
+        <FormattedMessage
-        ),
+            id='admin.true'
-        falseText: (
+            defaultMessage='True'
-            <FormattedMessage
+        />
-                id='admin.false'
+    ),
-                defaultMessage='False'
+    falseText = (
-            />
+        <FormattedMessage
-        ),
+            id='admin.false'
-        disabled: false,
+            defaultMessage='False'
-    };
+        />
-
+    ),
-    private handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    disabled = false,
-        this.props.onChange(this.props.id, e.target.value === 'true');
+    setByEnv,
-    };
+    disabledText,
-
+    helpText,
-    public render() {
+}: Props) => {
-        let helpText;
+    const helptext = useMemo(() => {
-        if (this.props.disabled && this.props.disabledText) {
+        if (disabled && disabledText) {
-            helpText = (
+            return (
                 <div>
                     <span className='admin-console__disabled-text'>
-                        {this.props.disabledText}
+                        {disabledText}
                     </span>
-                    {this.props.helpText}
+                    {helpText}
                 </div>
             );
-        } else {
-            helpText = this.props.helpText;
         }
+        return helpText;
+    }, [helpText, disabled, disabledText]);
 
-        return (
+    const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-            <Setting
+        onChange(id, e.target.value === 'true');
-                inputId={this.props.id}
+    }, [id, onChange]);
-                label={this.props.label}
+
-                helpText={helpText}
+    return (
-                setByEnv={this.props.setByEnv}
+        <Setting
-            >
+            inputId={id}
-                <a id={this.props.id}/>
+            label={label}
-                <Label isDisabled={this.props.disabled || this.props.setByEnv}>
+            helpText={helptext}
-                    <input
+            setByEnv={setByEnv}
-                        data-testid={this.props.id + 'true'}
+        >
-                        type='radio'
+            <a id={id}/>
-                        value='true'
+            <Label isDisabled={disabled || setByEnv}>
-                        id={Utils.createSafeId(this.props.id) + 'true'}
+                <input
-                        name={this.props.id}
+                    data-testid={id + 'true'}
-                        checked={this.props.value}
+                    type='radio'
-                        onChange={this.handleChange}
+                    value='true'
-                        disabled={this.props.disabled || this.props.setByEnv}
+                    id={Utils.createSafeId(id) + 'true'}
-                    />
+                    name={id}
-                    {this.props.trueText}
+                    checked={value}
-                </Label>
+                    onChange={handleChange}
-                <Label isDisabled={this.props.disabled || this.props.setByEnv}>
+                    disabled={disabled || setByEnv}
-                    <input
+                />
-                        data-testid={this.props.id + 'false'}
+                {trueText}
-                        type='radio'
+            </Label>
-                        value='false'
+            <Label isDisabled={disabled || setByEnv}>
-                        id={Utils.createSafeId(this.props.id) + 'false'}
+                <input
-                        name={this.props.id}
+                    data-testid={id + 'false'}
-                        checked={!this.props.value}
+                    type='radio'
-                        onChange={this.handleChange}
+                    value='false'
-                        disabled={this.props.disabled || this.props.setByEnv}
+                    id={Utils.createSafeId(id) + 'false'}
-                    />
+                    name={id}
-                    {this.props.falseText}
+                    checked={!value}
-                </Label>
+                    onChange={handleChange}
-            </Setting>
+                    disabled={disabled || setByEnv}
-        );
+                />
-    }
+                {falseText}
-}
+            </Label>
+        </Setting>
+    );
+};
+
+export default React.memo(BooleanSetting);

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

@@ -47,14 +47,8 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
             type="text"
             value="setting_default"
           />
-          <BooleanSetting
+          <Memo(BooleanSetting)
             disabled={false}
-            falseText={
-              <Memo(MemoizedFormattedMessage)
-                defaultMessage="False"
-                id="admin.false"
-              />
-            }
             helpText={
               <SchemaText
                 text="This is some help text for the bool field."
@@ -65,12 +59,6 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
             label="Setting Two"
             onChange={[Function]}
             setByEnv={false}
-            trueText={
-              <Memo(MemoizedFormattedMessage)
-                defaultMessage="True"
-                id="admin.true"
-              />
-            }
             value={true}
           />
           <Memo(DropdownSetting)
@@ -317,14 +305,8 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
             type="text"
             value="fsdsdg"
           />
-          <BooleanSetting
+          <Memo(BooleanSetting)
             disabled={false}
-            falseText={
-              <Memo(MemoizedFormattedMessage)
-                defaultMessage="False"
-                id="admin.false"
-              />
-            }
             helpText={
               <SchemaText
                 text="This is some help text for the bool field."
@@ -335,12 +317,6 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
             label="Setting Two"
             onChange={[Function]}
             setByEnv={false}
-            trueText={
-              <Memo(MemoizedFormattedMessage)
-                defaultMessage="True"
-                id="admin.true"
-              />
-            }
             value={false}
           />
           <Memo(DropdownSetting)