refactor: Migrate user code to new validation message API

spinnaker · Oct 10, 2019 · a9469e9 · a9469e9
1 parent 4c5f532
commit a9469e9
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 46 deletions.
diff --git a/app/scripts/modules/core/src/forms/mapEditor/MapEditorInput.tsx b/app/scripts/modules/core/src/forms/mapEditor/MapEditorInput.tsx
@@ -86,9 +86,7 @@ export function MapEditorInput({
   const columnCount = labelsLeft ? 5 : 3;
   const tableClass = label ? '' : 'no-border-top';
   const isParameterized = isString(value);
-  const backingModel = !isString(value)
-    ? objectToTuples(value, (validation && validation.validationMessage) || {})
-    : null;
+  const backingModel = !isString(value) ? objectToTuples(value, (validation && validation.messageNode) || {}) : null;
 
   // Register/unregister validator, if a validation prop was supplied
   React.useEffect(() => {

diff --git a/app/scripts/modules/core/src/pipeline/config/triggers/artifactory/ArtifactoryTrigger.tsx b/app/scripts/modules/core/src/pipeline/config/triggers/artifactory/ArtifactoryTrigger.tsx
@@ -1,17 +1,14 @@
 import * as React from 'react';
 
-import { FormikFormField, ReactSelectInput, useLatestPromise } from 'core/presentation';
+import { FormikFormField, ReactSelectInput, errorMessage, useLatestPromise } from 'core/presentation';
 
 import { ArtifactoryReaderService } from './artifactoryReader.service';
 
 export function ArtifactoryTrigger() {
   const fetchNames = useLatestPromise(() => ArtifactoryReaderService.getArtifactoryNames(), []);
 
-  const validationStatus = fetchNames.status === 'REJECTED' ? 'error' : null;
-  const validationMessage =
-    fetchNames.status === 'REJECTED'
-      ? `Error fetching artifactory names: ${fetchNames.error.data.status} ${fetchNames.error.data.error}`
-      : null;
+  const fetchError = `Error fetching artifactory names: ${fetchNames.error.data.status} ${fetchNames.error.data.error}`;
+  const validationMessage = fetchNames.status === 'REJECTED' ? errorMessage(fetchError) : null;
 
   return (
     <FormikFormField
@@ -20,7 +17,6 @@ export function ArtifactoryTrigger() {
       touched={true}
       fastField={false}
       validationMessage={validationMessage}
-      validationStatus={validationStatus}
       input={props => (
         <ReactSelectInput
           {...props}

diff --git a/app/scripts/modules/core/src/pipeline/config/triggers/nexus/NexusTrigger.tsx b/app/scripts/modules/core/src/pipeline/config/triggers/nexus/NexusTrigger.tsx
@@ -1,17 +1,14 @@
 import * as React from 'react';
 
-import { FormikFormField, ReactSelectInput, useLatestPromise } from 'core/presentation';
+import { errorMessage, FormikFormField, ReactSelectInput, useLatestPromise } from 'core/presentation';
 
 import { NexusReaderService } from './nexusReader.service';
 
 export function NexusTrigger() {
   const fetchNames = useLatestPromise(() => NexusReaderService.getNexusNames(), []);
 
-  const validationStatus = fetchNames.status === 'REJECTED' ? 'error' : null;
-  const validationMessage =
-    fetchNames.status === 'REJECTED'
-      ? `Error fetching nexus names: ${fetchNames.error.data.status} ${fetchNames.error.data.error}`
-      : null;
+  const fetchError = `Error fetching nexus names: ${fetchNames.error.data.status} ${fetchNames.error.data.error}`;
+  const validationMessage = fetchNames.status === 'REJECTED' ? errorMessage(fetchError) : null;
 
   return (
     <FormikFormField
@@ -20,7 +17,6 @@ export function NexusTrigger() {
       touched={true}
       fastField={false}
       validationMessage={validationMessage}
-      validationStatus={validationStatus}
       input={props => (
         <ReactSelectInput
           {...props}

diff --git a/app/scripts/modules/core/src/pipeline/manualExecution/layout/ManualExecutionFieldLayout.tsx b/app/scripts/modules/core/src/pipeline/manualExecution/layout/ManualExecutionFieldLayout.tsx
@@ -1,38 +1,30 @@
 import * as React from 'react';
 import { isEmpty } from 'lodash';
 
-import { IValidationMessageProps, ValidationMessage } from 'core/validation';
-import { IFieldLayoutProps } from 'core/presentation';
+import { ILayoutProps } from 'core/presentation';
 
-export class ManualExecutionFieldLayout extends React.Component<IFieldLayoutProps> {
-  public render() {
-    const { label, help, input, actions, touched, required, validationMessage, validationStatus } = this.props;
+export function ManualExecutionFieldLayout(props: ILayoutProps) {
+  const { label, help, input, actions, validation, required } = props;
 
-    const showLabel = !isEmpty(label) || !isEmpty(help);
+  const showLabel = !isEmpty(label) || !isEmpty(help);
+  const { hidden, messageNode } = validation;
 
-    const renderMessage = (message: React.ReactNode, type: IValidationMessageProps['type']) =>
-      typeof message === 'string' ? <ValidationMessage type={type} message={message} /> : message;
-
-    const isErrorOrWarning = validationStatus === 'error' || validationStatus === 'warning';
-    const validation = isErrorOrWarning && !touched ? null : renderMessage(validationMessage, validationStatus);
-
-    return (
-      <div className="sp-margin-m-bottom">
-        <div className="form-group">
-          {showLabel && (
-            <label className="col-md-4 sm-label-right break-word">
-              {label}
-              {required && <span>*</span>} {help}
-            </label>
-          )}
-          <div className="col-md-6">
-            <div>
-              {input} {actions}
-            </div>
-            <div className="message">{validation}</div>
+  return (
+    <div className="sp-margin-m-bottom">
+      <div className="form-group">
+        {showLabel && (
+          <label className="col-md-4 sm-label-right break-word">
+            {label}
+            {required && <span>*</span>} {help}
+          </label>
+        )}
+        <div className="col-md-6">
+          <div>
+            {input} {actions}
           </div>
+          {!hidden && <div className="message">{messageNode}</div>}
         </div>
       </div>
-    );
-  }
+    </div>
+  );
 }
diff --git a/app/scripts/modules/core/src/projects/configure/FormikApplicationsPicker.tsx b/app/scripts/modules/core/src/projects/configure/FormikApplicationsPicker.tsx
@@ -34,7 +34,7 @@ export class FormikApplicationsPicker extends React.Component<IFormikApplication
 
     const ReadOnlyApplicationInput = (props: IFormInputProps) => {
       const appClassName = 'body-small zombie-label flex-1 sp-padding-xs-yaxis sp-padding-s-xaxis sp-margin-xs-yaxis';
-      const isError = props.validation.validationStatus === 'error';
+      const isError = props.validation.category === 'error';
       // When there is an error, render a disabled TextInput with failed validation, else render the weird box ui
       return isError ? <TextInput disabled={true} {...props} /> : <p className={appClassName}>{props.value}</p>;
     };