From daff7a39c5d8f59d5853a71fd336ae76333e2e5e Mon Sep 17 00:00:00 2001 From: Ivy Gesare <83957195+Gesare5@users.noreply.github.com> Date: Mon, 26 Aug 2024 11:39:05 +0300 Subject: [PATCH] [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 --- .../bleve_settings.test.tsx.snap | 88 +- .../cluster_settings.test.tsx.snap | 240 +---- ...sable_guest_accounts_setting.test.tsx.snap | 28 +- .../database_settings.test.tsx.snap | 28 +- .../elasticsearch_settings.test.tsx.snap | 142 +-- .../message_export_settings.test.tsx.snap | 60 +- .../schema_admin_settings.test.tsx.snap | 42 +- .../admin_console/boolean_setting.tsx | 143 +-- .../custom_plugin_settings.test.tsx.snap | 28 +- .../plugin_management.test.tsx.snap | 994 ++---------------- 10 files changed, 189 insertions(+), 1604 deletions(-) diff --git a/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap index 5729db13f0..69fcbb601e 100644 --- a/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap +++ b/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap @@ -16,14 +16,7 @@ exports[`components/BleveSettings should match snapshot, disabled 1`] = ` /> - - } + Learn more about Bleve in our documentation." @@ -44,12 +37,6 @@ exports[`components/BleveSettings should match snapshot, disabled 1`] = ` } onChange={[Function]} setByEnv={false} - trueText={ - - } value={false} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={false} /> @@ -257,14 +220,7 @@ exports[`components/BleveSettings should match snapshot, enabled 1`] = ` /> - - } + Learn more about Bleve in our documentation." @@ -285,12 +241,6 @@ exports[`components/BleveSettings should match snapshot, enabled 1`] = ` } onChange={[Function]} setByEnv={false} - trueText={ - - } value={true} /> - - } + - } value={false} /> - - } + - } value={false} /> diff --git a/webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.tsx.snap index 5252d6dd93..d1d3bd975b 100644 --- a/webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.tsx.snap +++ b/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" /> - - } + - } value={true} /> - - } + - } value={false} /> - - } + - } value={false} /> - - } + - } value={false} /> - - } + - } value={true} /> - - } + - } value={false} /> - - } + - } value={false} /> - - } + - } value={true} /> - - } + - } value={true} /> - - } + - } value={false} /> - - } + - } value={false} /> - - } + - } value={false} /> - - } + - } value={true} /> - - } + - } value={false} /> - - } + - } value={true} /> - - } + - } value={false} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={true} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={true} />
- - } + Learn more about Elasticsearch in our documentation." @@ -44,12 +37,6 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] = } onChange={[Function]} setByEnv={false} - trueText={ - - } value={false} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={false} /> @@ -580,14 +519,7 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = ` /> - - } + Learn more about Elasticsearch in our documentation." @@ -608,12 +540,6 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = ` } onChange={[Function]} setByEnv={false} - trueText={ - - } value={true} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={false} /> diff --git a/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.tsx.snap index 0c30f68f8b..431bf38195 100644 --- a/webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.tsx.snap +++ b/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 /> - - } + - } value={false} /> - - } + - } value={false} /> - - } + - } value={true} /> - - } + - } value={true} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={true} /> - - } helpText={ - } value={true} /> diff --git a/webapp/channels/src/components/admin_console/boolean_setting.tsx b/webapp/channels/src/components/admin_console/boolean_setting.tsx index b3bb65d28e..6d2165d3af 100644 --- a/webapp/channels/src/components/admin_console/boolean_setting.tsx +++ b/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 { - public static defaultProps = { - trueText: ( - - ), - falseText: ( - - ), - disabled: false, - }; - - private handleChange = (e: React.ChangeEvent) => { - this.props.onChange(this.props.id, e.target.value === 'true'); - }; - - public render() { - let helpText; - if (this.props.disabled && this.props.disabledText) { - helpText = ( +const BooleanSetting = ({ + id, + label, + value, + onChange, + trueText = ( + + ), + falseText = ( + + ), + disabled = false, + setByEnv, + disabledText, + helpText, +}: Props) => { + const helptext = useMemo(() => { + if (disabled && disabledText) { + return (
- {this.props.disabledText} + {disabledText} - {this.props.helpText} + {helpText}
); - } else { - helpText = this.props.helpText; } + return helpText; + }, [helpText, disabled, disabledText]); - return ( - - - - - - ); - } -} + const handleChange = useCallback((e: React.ChangeEvent) => { + onChange(id, e.target.value === 'true'); + }, [id, onChange]); + + return ( + + + + + + ); +}; + +export default React.memo(BooleanSetting); diff --git a/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap index d3ae8581c9..582e392bcb 100644 --- a/webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap +++ b/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" /> - - } helpText={ - } value={true} /> - - } helpText={ - } value={false} /> - - } + - } value={true} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={true} />
- - } helpText={ - } value={true} /> - - } helpText={ - } value={true} /> - - } + - } value={true} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={true} />
- - } helpText={ - } value={false} /> - - } helpText={ - } value={true} /> - - } + - } value={true} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={true} />
- - } helpText={ - } value={true} /> - - } helpText={ - } value={false} /> - - } + - } value={true} /> - - } helpText={ - } value={true} /> - - } helpText={ - } value={true} />
- - } helpText={ - } value={true} /> - - } helpText={ - } value={true} /> - - } + - } value={true} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={true} />
- - } helpText={ - } value={true} /> - - } helpText={ - } value={true} /> - - } + - } value={true} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={true} />
- - } helpText={ - } value={true} /> - - } helpText={ - } value={true} /> - - } + - } value={false} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={true} />
- - } helpText={ - } value={true} /> - - } helpText={ - } value={true} /> - - } + - } value={true} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={true} />
- - } helpText={ - } value={true} /> - - } helpText={ - } value={true} /> - - } + - } value={true} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={true} />
- - } helpText={ - } value={true} /> - - } helpText={ - } value={true} /> - - } + - } value={true} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={true} />
- - } helpText={ - } value={true} /> - - } helpText={ - } value={true} /> - - } + - } value={true} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={true} />
- - } helpText={ - } value={true} /> - - } helpText={ - } value={true} /> - - } + - } value={true} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={true} />
- - } helpText={ - } value={true} /> - - } helpText={ - } value={true} /> - - } + - } value={true} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={true} />
- - } helpText={ - } value={true} /> - - } helpText={ - } value={true} /> - - } + - } value={true} /> - - } helpText={ - } value={false} /> - - } helpText={ - } value={true} />
- - } helpText={ - } value={true} /> - - } helpText={ - } value={true} />