Bug 1678195: Prevent unmounting and mounting of create secret form

openshift · Mar 18, 2019 · 89b1375 · 89b1375
1 parent abdf645
commit 89b1375
Showing 1 changed file with 48 additions and 16 deletions.
diff --git a/frontend/public/components/secrets/create-secret.tsx b/frontend/public/components/secrets/create-secret.tsx
@@ -877,22 +877,40 @@ const secretFormFactory = (secretType: SecretTypeAbstraction) => {
   }
 };
 
-const SecretLoadingWrapper = props => {
-  if (!props.obj.loaded) {
-    return <LoadingBox />;
-  }
-  const secretTypeAbstraction = toTypeAbstraction(props.obj.data);
-  const SecretFormComponent = secretFormFactory(secretTypeAbstraction);
-  const fixed = _.reduce(props.fixedKeys, (acc, k) => ({...acc, k: _.get(props.obj.data, k)}), {});
-  return <StatusBox {...props.obj}>
-    <SecretFormComponent {...props}
-      secretTypeAbstraction={secretTypeAbstraction}
-      obj={props.obj.data}
-      fixed={fixed}
-      explanation={secretFormExplanation[secretTypeAbstraction]}
-    />
-  </StatusBox>;
-};
+class SecretLoadingWrapper extends React.Component<SecretLoadingWrapperProps, SecretLoadingWrapperState> {
+  readonly state: SecretLoadingWrapperState = {
+    formComponent: null,
+    secretTypeAbstraction: SecretTypeAbstraction.generic,
+  };
+  componentDidUpdate() {
+    // Set the proper secret form component, once the secret is received by Firehose.
+    // 'formComponent' needs to be set only once, to avoid losing form state,
+    // caused by component mounting/unmounting.
+    if (!this.state.formComponent && !_.isEmpty(this.props.obj.data)) {
+      const secretTypeAbstraction = toTypeAbstraction(this.props.obj.data);
+      this.setState({
+        formComponent: secretFormFactory(secretTypeAbstraction),
+        secretTypeAbstraction: secretTypeAbstraction});
+    }
+  }
+  render() {
+    const { obj, fixedKeys} = this.props;
+    const { secretTypeAbstraction } = this.state;
+    if (!this.state.formComponent) {
+      return <LoadingBox />;
+    }
+    const SecretFormComponent = this.state.formComponent;
+    const fixed = _.reduce(fixedKeys, (acc, k) => ({...acc, k: _.get(obj.data, k)}), {});
+    return <StatusBox {...obj}>
+      <SecretFormComponent {...this.props}
+        secretTypeAbstraction={secretTypeAbstraction}
+        obj={obj.data}
+        fixed={fixed}
+        explanation={secretFormExplanation[secretTypeAbstraction]}
+      />
+    </StatusBox>;
+  }
+}
 
 export const CreateSecret = ({match: {params}}) => {
   const SecretFormComponent = secretFormFactory(params.type);
@@ -908,6 +926,20 @@ export const EditSecret = ({match: {params}, kind}) => <Firehose resources={[{ki
   <SecretLoadingWrapper fixedKeys={['kind', 'metadata']} titleVerb="Edit" saveButtonText="Save" />
 </Firehose>;
 
+export type SecretLoadingWrapperProps = {
+  obj?: {
+    [key: string]: Object;
+  };
+  fixedKeys: string[];
+  titleVerb: string,
+  saveButtonText: string,
+};
+
+export type SecretLoadingWrapperState = {
+  formComponent: React.ReactType;
+  secretTypeAbstraction: SecretTypeAbstraction;
+};
+
 export type BaseEditSecretState_ = {
   secretTypeAbstraction?: SecretTypeAbstraction;
   secret: K8sResourceKind;