Memoize edit integration and fix fields not collapsing on edit

elastic · Jul 10, 2020 · 357774b · 357774b
1 parent 1666980
commit 357774b
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 48 deletions.
diff --git a/...sections/agent_config/create_package_config_page/services/has_invalid_but_required_var.ts b/...sections/agent_config/create_package_config_page/services/has_invalid_but_required_var.ts
@@ -11,7 +11,7 @@ export const hasInvalidButRequiredVar = (
   packageConfigVars?: PackageConfigConfigRecord
 ): boolean => {
   return (
-    !packageConfigVars ||
+    (registryVars && !packageConfigVars) ||
     Boolean(
       registryVars &&
         registryVars.find(

diff --git a/...blic/applications/ingest_manager/sections/agent_config/edit_package_config_page/index.tsx b/...blic/applications/ingest_manager/sections/agent_config/edit_package_config_page/index.tsx
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { useRouteMatch, useHistory } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -159,38 +159,45 @@ export const EditPackageConfigPage: React.FunctionComponent = () => {
   const [validationResults, setValidationResults] = useState<PackageConfigValidationResults>();
   const hasErrors = validationResults ? validationHasErrors(validationResults) : false;
 
-  // Update package config method
-  const updatePackageConfig = (updatedFields: Partial<UpdatePackageConfig>) => {
-    const newPackageConfig = {
-      ...packageConfig,
-      ...updatedFields,
-    };
-    setPackageConfig(newPackageConfig);
+  // Update package config validation
+  const updatePackageConfigValidation = useCallback(
+    (newPackageConfig?: UpdatePackageConfig) => {
+      if (packageInfo) {
+        const newValidationResult = validatePackageConfig(
+          newPackageConfig || packageConfig,
+          packageInfo
+        );
+        setValidationResults(newValidationResult);
+        // eslint-disable-next-line no-console
+        console.debug('Package config validation results', newValidationResult);
 
-    // eslint-disable-next-line no-console
-    console.debug('Package config updated', newPackageConfig);
-    const newValidationResults = updatePackageConfigValidation(newPackageConfig);
-    const hasValidationErrors = newValidationResults
-      ? validationHasErrors(newValidationResults)
-      : false;
-    if (!hasValidationErrors) {
-      setFormState('VALID');
-    }
-  };
+        return newValidationResult;
+      }
+    },
+    [packageConfig, packageInfo]
+  );
 
-  const updatePackageConfigValidation = (newPackageConfig?: UpdatePackageConfig) => {
-    if (packageInfo) {
-      const newValidationResult = validatePackageConfig(
-        newPackageConfig || packageConfig,
-        packageInfo
-      );
-      setValidationResults(newValidationResult);
-      // eslint-disable-next-line no-console
-      console.debug('Package config validation results', newValidationResult);
+  // Update package config method
+  const updatePackageConfig = useCallback(
+    (updatedFields: Partial<UpdatePackageConfig>) => {
+      const newPackageConfig = {
+        ...packageConfig,
+        ...updatedFields,
+      };
+      setPackageConfig(newPackageConfig);
 
-      return newValidationResult;
-    }
-  };
+      // eslint-disable-next-line no-console
+      console.debug('Package config updated', newPackageConfig);
+      const newValidationResults = updatePackageConfigValidation(newPackageConfig);
+      const hasValidationErrors = newValidationResults
+        ? validationHasErrors(newValidationResults)
+        : false;
+      if (!hasValidationErrors) {
+        setFormState('VALID');
+      }
+    },
+    [packageConfig, updatePackageConfigValidation]
+  );
 
   // Cancel url
   const cancelUrl = getHref('configuration_details', { configId });
@@ -270,6 +277,39 @@ export const EditPackageConfigPage: React.FunctionComponent = () => {
     packageInfo,
   };
 
+  const configurePackage = useMemo(
+    () => (
+      <>
+        <StepDefinePackageConfig
+          agentConfig={agentConfig}
+          packageInfo={packageInfo}
+          packageConfig={packageConfig}
+          updatePackageConfig={updatePackageConfig}
+          validationResults={validationResults!}
+        />
+
+        <StepConfigurePackage
+          from={'edit'}
+          packageInfo={packageInfo}
+          packageConfig={packageConfig}
+          packageConfigId={packageConfigId}
+          updatePackageConfig={updatePackageConfig}
+          validationResults={validationResults!}
+          submitAttempted={formState === 'INVALID'}
+        />
+      </>
+    ),
+    [
+      agentConfig,
+      formState,
+      packageConfig,
+      packageConfigId,
+      packageInfo,
+      updatePackageConfig,
+      validationResults,
+    ]
+  );
+
   return (
     <CreatePackageConfigPageLayout {...layoutProps} data-test-subj="editPackageConfig">
       {isLoadingData ? (
@@ -300,23 +340,7 @@ export const EditPackageConfigPage: React.FunctionComponent = () => {
               onCancel={() => setFormState('VALID')}
             />
           )}
-          <StepDefinePackageConfig
-            agentConfig={agentConfig}
-            packageInfo={packageInfo}
-            packageConfig={packageConfig}
-            updatePackageConfig={updatePackageConfig}
-            validationResults={validationResults!}
-          />
-
-          <StepConfigurePackage
-            from={'edit'}
-            packageInfo={packageInfo}
-            packageConfig={packageConfig}
-            packageConfigId={packageConfigId}
-            updatePackageConfig={updatePackageConfig}
-            validationResults={validationResults!}
-            submitAttempted={formState === 'INVALID'}
-          />
+          {configurePackage}
           <EuiSpacer size="l" />
           {/* TODO #64541 - Remove classes */}
           <EuiBottomBar