[MM-57719] Convert form_error.tsx to function component (#27914)

* solve conflicts

* update snapshots

* Fix types

* update snapshots

webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap

@@ -46,8 +46,7 @@ exports[`components/SettingItemMin should match snapshot with active Save button
         className="setting-list-item"
       >
         <hr />
-        <FormError
+        <Memo(FormError)
-          error={null}
           errors={
             Array [
               "",
@@ -151,8 +150,7 @@ exports[`components/SettingItemMin should match snapshot with active Save button
         className="setting-list-item"
       >
         <hr />
-        <FormError
+        <Memo(FormError)
-          error={null}
           errors={
             Array [
               "",
@@ -266,8 +264,7 @@ exports[`components/SettingItemMin should match snapshot, on loading picture 1`]
         className="setting-list-item"
       >
         <hr />
-        <FormError
+        <Memo(FormError)
-          error={null}
           errors={
             Array [
               "",
@@ -393,8 +390,7 @@ exports[`components/SettingItemMin should match snapshot, profile picture on fil
         className="setting-list-item"
       >
         <hr />
-        <FormError
+        <Memo(FormError)
-          error={null}
           errors={
             Array [
               "",
@@ -508,8 +504,7 @@ exports[`components/SettingItemMin should match snapshot, profile picture on sou
         className="setting-list-item"
       >
         <hr />
-        <FormError
+        <Memo(FormError)
-          error={null}
           errors={
             Array [
               "",
@@ -635,8 +630,7 @@ exports[`components/SettingItemMin should match snapshot, team icon on file 1`]
         className="setting-list-item"
       >
         <hr />
-        <FormError
+        <Memo(FormError)
-          error={null}
           errors={
             Array [
               "",
@@ -790,8 +784,7 @@ exports[`components/SettingItemMin should match snapshot, team icon on source 1`
         className="setting-list-item"
       >
         <hr />
-        <FormError
+        <Memo(FormError)
-          error={null}
           errors={
             Array [
               "",
@@ -945,8 +938,7 @@ exports[`components/SettingItemMin should match snapshot, user icon on source 1`
         className="setting-list-item"
       >
         <hr />
-        <FormError
+        <Memo(FormError)
-          error={null}
           errors={
             Array [
               "",

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

@@ -193,9 +193,8 @@ exports[`components/BleveSettings should match snapshot, disabled 1`] = `
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -395,9 +394,8 @@ exports[`components/BleveSettings should match snapshot, enabled 1`] = `
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>

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

@@ -197,9 +197,8 @@ exports[`components/ClusterSettings should match snapshot, compression disabled
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -405,9 +404,8 @@ exports[`components/ClusterSettings should match snapshot, compression enabled 1
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -613,9 +611,8 @@ exports[`components/ClusterSettings should match snapshot, encryption disabled 1
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -821,9 +818,8 @@ exports[`components/ClusterSettings should match snapshot, encryption enabled 1`
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>

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

@@ -421,9 +421,8 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>

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

@@ -492,9 +492,8 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -994,9 +993,8 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>

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

@@ -146,9 +146,8 @@ exports[`components/MessageExportSettings should match snapshot, disabled, actia
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -417,9 +416,8 @@ exports[`components/MessageExportSettings should match snapshot, disabled, globa
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -574,9 +572,8 @@ exports[`components/MessageExportSettings should match snapshot, enabled, actian
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -845,9 +842,8 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>

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

@@ -179,9 +179,8 @@ exports[`components/PushSettings should match snapshot, licensed 1`] = `
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -313,9 +312,8 @@ exports[`components/PushSettings should match snapshot, unlicensed 1`] = `
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>

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

@@ -683,15 +683,13 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
         className="error-message"
         data-testid="errorMessage"
       >
-        <FormError
+        <Memo(FormError)
           error=""
-          errors={Array []}
           iconClassName="fa-exclamation-triangle"
           textClassName="has-warning"
         />
-        <FormError
+        <Memo(FormError)
           error={null}
-          errors={Array []}
         />
       </div>
     </WithTooltip>

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

@@ -188,15 +188,13 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
         className="error-message"
         data-testid="errorMessage"
       >
-        <FormError
+        <Memo(FormError)
           error=""
-          errors={Array []}
           iconClassName="fa-exclamation-triangle"
           textClassName="has-warning"
         />
-        <FormError
+        <Memo(FormError)
           error={null}
-          errors={Array []}
         />
       </div>
     </WithTooltip>
@@ -242,15 +240,13 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
         className="error-message"
         data-testid="errorMessage"
       >
-        <FormError
+        <Memo(FormError)
           error=""
-          errors={Array []}
           iconClassName="fa-exclamation-triangle"
           textClassName="has-warning"
         />
-        <FormError
+        <Memo(FormError)
           error={null}
-          errors={Array []}
         />
       </div>
     </WithTooltip>
@@ -446,15 +442,13 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
         className="error-message"
         data-testid="errorMessage"
       >
-        <FormError
+        <Memo(FormError)
           error=""
-          errors={Array []}
           iconClassName="fa-exclamation-triangle"
           textClassName="has-warning"
         />
-        <FormError
+        <Memo(FormError)
           error={null}
-          errors={Array []}
         />
       </div>
     </WithTooltip>

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

@@ -38,9 +38,8 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -87,9 +86,8 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -136,9 +134,8 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -185,9 +182,8 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>

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

@@ -50,10 +50,7 @@ exports[`components/OpenIdConvert should match snapshot 1`] = `
         className="error-message"
         data-testid="errorMessage"
       >
-        <FormError
+        <Memo(FormError) />
-          error={null}
-          errors={Array []}
-        />
       </div>
     </div>
   </div>

webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/__snapshots__/permission_system_scheme_settings.test.tsx.snap

@@ -459,9 +459,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
@@ -810,9 +809,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
@@ -1161,9 +1159,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
@@ -1512,9 +1509,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>

webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/__snapshots__/permission_team_scheme_settings.test.tsx.snap

@@ -336,9 +336,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
@@ -727,9 +726,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
@@ -1120,9 +1118,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
@@ -1579,9 +1576,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>

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

@@ -266,9 +266,8 @@ exports[`components/PluginManagement should match snapshot 1`] = `
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -543,9 +542,8 @@ exports[`components/PluginManagement should match snapshot when \`Enable Marketp
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -629,9 +627,8 @@ exports[`components/PluginManagement should match snapshot when \`Enable Plugins
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -906,9 +903,8 @@ exports[`components/PluginManagement should match snapshot when \`Enable Remote
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -1185,9 +1181,8 @@ exports[`components/PluginManagement should match snapshot when \`Require Signat
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -1466,9 +1461,8 @@ exports[`components/PluginManagement should match snapshot, No installed plugins
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -1743,9 +1737,8 @@ exports[`components/PluginManagement should match snapshot, allow insecure URL e
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -1997,9 +1990,8 @@ exports[`components/PluginManagement should match snapshot, disabled 1`] = `
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -2274,9 +2266,8 @@ exports[`components/PluginManagement should match snapshot, text entered into th
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -2558,9 +2549,8 @@ exports[`components/PluginManagement should match snapshot, upload disabled 1`]
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -2898,9 +2888,8 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -3206,9 +3195,8 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -3514,9 +3502,8 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -3822,9 +3809,8 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>
@@ -4162,9 +4148,8 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
         <div
           className="error-message"
         >
-          <FormError
+          <Memo(FormError)
             error={null}
-            errors={Array []}
           />
         </div>
       </WithTooltip>

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

@@ -138,9 +138,8 @@ exports[`SystemUserDetail should match default snapshot 1`] = `
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
@@ -330,9 +329,8 @@ exports[`SystemUserDetail should match snapshot if MFA is enabled 1`] = `
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
@@ -522,9 +520,8 @@ exports[`SystemUserDetail should not show manage user settings button when user
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
@@ -723,9 +720,8 @@ exports[`SystemUserDetail should show manage user settings button as activated 1
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>
@@ -915,9 +911,8 @@ exports[`SystemUserDetail should show manage user settings button as disabled wh
     <div
       className="error-message"
     >
-      <FormError
+      <Memo(FormError)
         error={null}
-        errors={Array []}
       />
     </div>
   </div>

webapp/channels/src/components/emoji/add_emoji/__snapshots__/add_emoji.test.tsx.snap

@@ -107,9 +107,8 @@ exports[`components/emoji/components/AddEmoji should match snapshot 1`] = `
       <div
         className="backstage-form__footer"
       >
-        <FormError
+        <Memo(FormError)
           error={null}
-          errors={Array []}
           type="backstage"
         />
         <Link
@@ -283,9 +282,8 @@ exports[`components/emoji/components/AddEmoji should select a file and match sna
       <div
         className="backstage-form__footer"
       >
-        <FormError
+        <Memo(FormError)
           error={null}
-          errors={Array []}
           type="backstage"
         />
         <Link
@@ -423,9 +421,8 @@ exports[`components/emoji/components/AddEmoji should update emoji name and match
       <div
         className="backstage-form__footer"
       >
-        <FormError
+        <Memo(FormError)
           error={null}
-          errors={Array []}
           type="backstage"
         />
         <Link

webapp/channels/src/components/form_error.tsx

@@ -3,6 +3,9 @@
 
 import React from 'react';
 
+const TYPE_MODAL = 'modal';
+const TYPE_BACKSTAGE = 'backstage';
+
 // accepts either a single error or an array of errors
 type Props = {
     type?: React.ReactNode;
@@ -11,71 +14,71 @@ type Props = {
     iconClassName?: string;
     margin?: boolean;
     errors?: React.ReactNode[];
-}
+};
 
-export default class FormError extends React.PureComponent<Props> {
+const EMPTY_ERROR_LIST: React.ReactNode[] = [];
-    public static defaultProps = {
-        error: null,
-        errors: [],
-    };
-    public render() {
-        const {error = null, errors = [], iconClassName, margin, textClassName, type} = this.props;
 
-        if (!error && errors.length === 0) {
+const FormError: React.FC<Props> = ({
-            return null;
+    error = null,
-        }
+    errors = EMPTY_ERROR_LIST,
+    iconClassName,
+    margin,
+    textClassName,
+    type,
+}) => {
+    if (!error && errors.length === 0) {
+        return null;
+    }
 
-        // look for the first truthy error to display
+    // look for the first truthy error to display
-        let message = error;
+    let message = error;
 
-        if (!message) {
+    if (!message) {
-            for (const err of errors) {
+        for (const err of errors) {
-                if (err) {
+            if (err) {
-                    message = err;
+                message = err;
-                }
             }
         }
+    }
 
-        if (!message) {
+    if (!message) {
-            return null;
+        return null;
-        }
+    }
-
-        if (type === 'modal') {
-            return (
-                <div className='form-group'>
-                    <label className='col-sm-12 has-error'>
-                        {message}
-                    </label>
-                </div>
-            );
-        }
-
-        if (type === 'backstage') {
-            return (
-                <div className='pull-left has-error'>
-                    <label className='control-label'>
-                        {message}
-                    </label>
-                </div>
-            );
-        }
-
-        if (margin) {
-            return (
-                <div className='form-group has-error'>
-                    <label className='control-label'>
-                        {message}
-                    </label>
-                </div>
-            );
-        }
 
+    if (type === TYPE_MODAL) {
         return (
-            <div className={`col-sm-12 ${textClassName || 'has-error'}`}>
+            <div className='form-group'>
-                <label className='control-label'>
+                <label className='col-sm-12 has-error'>{message}</label>
-                    <i className={`fa ${iconClassName || 'fa-exclamation-circle'}`}/> {message}
-                </label>
             </div>
         );
     }
-}
+
+    if (type === TYPE_BACKSTAGE) {
+        return (
+            <div className='pull-left has-error'>
+                <label className='control-label'>{message}</label>
+            </div>
+        );
+    }
+
+    if (margin) {
+        return (
+            <div className='form-group has-error'>
+                <label className='control-label'>{message}</label>
+            </div>
+        );
+    }
+
+    return (
+        <div className={`col-sm-12 ${textClassName || 'has-error'}`}>
+            <label className='control-label'>
+                <i
+                    className={`fa ${iconClassName || 'fa-exclamation-circle'}`}
+                />{' '}
+                {message}
+            </label>
+        </div>
+    );
+};
+
+export default React.memo(FormError);

webapp/channels/src/components/integrations/__snapshots__/abstract_command.test.tsx.snap

@@ -409,8 +409,7 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
       <div
         className="backstage-form__footer"
       >
-        <FormError
+        <Memo(FormError)
-          error={null}
           errors={
             Array [
               "",
@@ -858,8 +857,7 @@ exports[`components/integrations/AbstractCommand should match snapshot when head
       <div
         className="backstage-form__footer"
       >
-        <FormError
+        <Memo(FormError)
-          error={null}
           errors={
             Array [
               "",
@@ -1307,8 +1305,7 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
       <div
         className="backstage-form__footer"
       >
-        <FormError
+        <Memo(FormError)
-          error={null}
           errors={
             Array [
               "server error",

webapp/channels/src/components/integrations/__snapshots__/abstract_incoming_hook.test.tsx.snap

@@ -223,8 +223,7 @@ exports[`components/integrations/AbstractIncomingWebhook should call action func
       <div
         className="backstage-form__footer"
       >
-        <FormError
+        <Memo(FormError)
-          error={null}
           errors={
             Array [
               "",
@@ -484,8 +483,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot 1
       <div
         className="backstage-form__footer"
       >
-        <FormError
+        <Memo(FormError)
-          error={null}
           errors={
             Array [
               "",
@@ -745,8 +743,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
       <div
         className="backstage-form__footer"
       >
-        <FormError
+        <Memo(FormError)
-          error={null}
           errors={
             Array [
               "",
@@ -976,8 +973,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
       <div
         className="backstage-form__footer"
       >
-        <FormError
+        <Memo(FormError)
-          error={null}
           errors={
             Array [
               "",
@@ -1204,8 +1200,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
       <div
         className="backstage-form__footer"
       >
-        <FormError
+        <Memo(FormError)
-          error={null}
           errors={
             Array [
               "",
@@ -1465,8 +1460,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
       <div
         className="backstage-form__footer"
       >
-        <FormError
+        <Memo(FormError)
-          error={null}
           errors={
             Array [
               "serverError",

webapp/channels/src/components/integrations/__snapshots__/abstract_oauth_app.test.tsx.snap

@@ -264,8 +264,7 @@ https://test.com/callback2"
       <div
         className="backstage-form__footer"
       >
-        <FormError
+        <Memo(FormError)
-          error={null}
           errors={
             Array [
               "",
@@ -568,8 +567,7 @@ exports[`components/integrations/AbstractOAuthApp should match snapshot, display
       <div
         className="backstage-form__footer"
       >
-        <FormError
+        <Memo(FormError)
-          error={null}
           errors={
             Array [
               "serverError",

webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.tsx.snap

@@ -309,8 +309,7 @@ callbackUrl2.com
       <div
         className="backstage-form__footer"
       >
-        <FormError
+        <Memo(FormError)
-          error={null}
           errors={
             Array [
               "",

webapp/channels/src/components/integrations/bots/add_bot/__snapshots__/add_bot.test.tsx.snap

@@ -320,8 +320,7 @@ exports[`components/integrations/bots/AddBot blank 1`] = `
       <div
         className="backstage-form__footer"
       >
-        <FormError
+        <Memo(FormError)
-          error={null}
           errors={
             Array [
               "",

webapp/channels/src/components/integrations/installed_oauth_app/__snapshots__/installed_oauth_app.test.tsx.snap

@@ -298,9 +298,8 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot, on err
         />
       </div>
     </div>
-    <FormError
+    <Memo(FormError)
       error="error"
-      errors={Array []}
     />
     <div
       className="item-details__row"

webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/abstract_outgoing_oauth_connection.test.tsx.snap

@@ -392,8 +392,7 @@ exports[`components/integrations/AbstractOutgoingOAuthConnection should match sn
               <div
                 className="backstage-form__footer"
               >
-                <FormError
+                <Memo(FormError)
-                  error={null}
                   errors={
                     Array [
                       "",
@@ -960,8 +959,7 @@ exports[`components/integrations/AbstractOutgoingOAuthConnection should match sn
               <div
                 className="backstage-form__footer"
               >
-                <FormError
+                <Memo(FormError)
-                  error={null}
                   errors={
                     Array [
                       "serverError",
@@ -989,7 +987,7 @@ exports[`components/integrations/AbstractOutgoingOAuthConnection should match sn
                       </FormattedMessage>
                     </label>
                   </div>
-                </FormError>
+                </Memo(FormError)>
                 <Link
                   className="btn btn-tertiary"
                   to="/test/integrations/outgoing-oauth2-connections"

webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/add_outgoing_oauth_connection.test.tsx.snap

@@ -384,8 +384,7 @@ exports[`components/integrations/AddOutgoingOAuthConnection should match snapsho
                 <div
                   className="backstage-form__footer"
                 >
-                  <FormError
+                  <Memo(FormError)
-                    error={null}
                     errors={
                       Array [
                         "",

webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/edit_outgoing_oauth_connection.test.tsx.snap

@@ -459,8 +459,7 @@ https://myothersite.com/api/v2"
                 <div
                   className="backstage-form__footer"
                 >
-                  <FormError
+                  <Memo(FormError)
-                    error={null}
                     errors={
                       Array [
                         "",
@@ -1180,8 +1179,7 @@ https://myothersite.com/api/v2"
                 <div
                   className="backstage-form__footer"
                 >
-                  <FormError
+                  <Memo(FormError)
-                    error={null}
                     errors={
                       Array [
                         "",
@@ -1900,8 +1898,7 @@ https://myothersite.com/api/v2"
                 <div
                   className="backstage-form__footer"
                 >
-                  <FormError
+                  <Memo(FormError)
-                    error={null}
                     errors={
                       Array [
                         "",

webapp/channels/src/components/integrations/outgoing_oauth_connections/abstract_outgoing_oauth_connection.test.tsx

@@ -112,7 +112,7 @@ describe('components/integrations/AbstractOutgoingOAuthConnection', () => {
 
         expect(submitAction).not.toBeCalled();
         expect(wrapper).toMatchSnapshot();
-        expect(wrapper.find('FormError').exists()).toBe(true);
+        expect(wrapper.find('Memo(FormError)').exists()).toBe(true);
     });
 
     test('should call action function', async () => {