fix(core/presentation): Fix null reference in FieldLayout components

spinnaker · Oct 15, 2019 · 64d88cc · 64d88cc
1 parent b41a8c6
commit 64d88cc
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 47 deletions.
diff --git a/app/scripts/modules/core/src/presentation/forms/layouts/ResponsiveFieldLayout.tsx b/app/scripts/modules/core/src/presentation/forms/layouts/ResponsiveFieldLayout.tsx
@@ -7,35 +7,33 @@ import { ILayoutProps } from './interface';
 
 import '../forms.less';
 
-export class ResponsiveFieldLayout extends React.Component<ILayoutProps> {
-  public render() {
-    const { label, help, input, actions, validation } = this.props;
-    const { hidden, messageNode, category } = validation;
-    const showLabel = !!label || !!help;
+export function ResponsiveFieldLayout(props: ILayoutProps) {
+  const { label, help, input, actions, validation = {} } = props;
+  const { hidden, messageNode, category } = validation;
+  const showLabel = !!label || !!help;
 
-    const helpUnder = false;
+  const helpUnder = false;
 
-    return (
-      <HelpTextExpandedContext.Provider value={helpUnder}>
-        <div className="sp-formItem">
-          <div className="sp-formItem__left">
-            {showLabel && (
-              <div className="sp-formLabel">
-                {label} {!helpUnder && help}
-              </div>
-            )}
-          </div>
-          <div className="sp-formItem__right">
-            <div className="sp-form">
-              <span className="field">
-                {input} {actions}
-              </span>
+  return (
+    <HelpTextExpandedContext.Provider value={helpUnder}>
+      <div className="sp-formItem">
+        <div className="sp-formItem__left">
+          {showLabel && (
+            <div className="sp-formLabel">
+              {label} {!helpUnder && help}
             </div>
-            {helpUnder && help && <div className="description">{help}</div>}
-            {!hidden && <ValidationMessage message={messageNode} type={category} />}
+          )}
+        </div>
+        <div className="sp-formItem__right">
+          <div className="sp-form">
+            <span className="field">
+              {input} {actions}
+            </span>
           </div>
+          {helpUnder && help && <div className="description">{help}</div>}
+          {!hidden && <ValidationMessage message={messageNode} type={category} />}
         </div>
-      </HelpTextExpandedContext.Provider>
-    );
-  }
+      </div>
+    </HelpTextExpandedContext.Provider>
+  );
 }
diff --git a/app/scripts/modules/core/src/presentation/forms/layouts/StandardFieldLayout.tsx b/app/scripts/modules/core/src/presentation/forms/layouts/StandardFieldLayout.tsx
@@ -4,30 +4,28 @@ import { ValidationMessage } from '../validation';
 import { ILayoutProps } from './interface';
 import './StandardFieldLayout.css';
 
-export class StandardFieldLayout extends React.Component<ILayoutProps> {
-  public render() {
-    const { label, help, input, actions, validation } = this.props;
-    const { hidden, messageNode, category } = validation;
-    const showLabel = !isUndefined(label) || !isUndefined(help);
+export function StandardFieldLayout(props: ILayoutProps) {
+  const { label, help, input, actions, validation = {} } = props;
+  const { hidden, messageNode, category } = validation;
+  const showLabel = !isUndefined(label) || !isUndefined(help);
 
-    return (
-      <div className="StandardFieldLayout flex-container-h baseline margin-between-lg">
-        {showLabel && (
-          <div className="StandardFieldLayout_Label sm-label-right">
-            {label} {help}
-          </div>
-        )}
-
-        <div className="flex-grow">
-          <div className="flex-container-v margin-between-md">
-            <div className="flex-container-h baseline margin-between-lg StandardFieldLayout_Contents">
-              {input} {actions}
-            </div>
+  return (
+    <div className="StandardFieldLayout flex-container-h baseline margin-between-lg">
+      {showLabel && (
+        <div className="StandardFieldLayout_Label sm-label-right">
+          {label} {help}
+        </div>
+      )}
 
-            {!hidden && <ValidationMessage message={messageNode} type={category} />}
+      <div className="flex-grow">
+        <div className="flex-container-v margin-between-md">
+          <div className="flex-container-h baseline margin-between-lg StandardFieldLayout_Contents">
+            {input} {actions}
           </div>
+
+          {!hidden && <ValidationMessage message={messageNode} type={category} />}
         </div>
       </div>
-    );
-  }
+    </div>
+  );
 }