fix: volume error validation

the errors lens for volumes was not correct in that it did not looks at the correct path. there's a `volume` portion in the errors. while correcting that, we also converted one other trivial errorLens in the healthchecks form section, as we want to get rid of Objektiv, which even has a special place in our webpack config, because it needs to be compiled (as the ONLY node_module).
dcos · Sep 30, 2020 · 2c8f8d8 · 2c8f8d8
1 parent a5227d1
commit 2c8f8d8
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 94 deletions.
diff --git a/plugins/dss/components/DSSInput.tsx b/plugins/dss/components/DSSInput.tsx
@@ -2,7 +2,6 @@ import { Trans } from "@lingui/macro";
 
 import * as React from "react";
 
-import Objektiv from "objektiv";
 import { MountService } from "foundation-ui";
 
 import FieldAutofocus from "#SRC/js/components/form/FieldAutofocus";
@@ -17,8 +16,6 @@ import VolumeConstants from "#PLUGINS/services/src/js/constants/VolumeConstants"
 import { omit } from "#SRC/js/utils/Util";
 import { getContainerNameWithIcon } from "#PLUGINS/services/src/js/utils/ServiceConfigDisplayUtil";
 
-const errorsLens = Objektiv.attr("container", {}).attr("volumes", []);
-
 function getContainerMounts(containers, volumeMountIndex, volumeMounts) {
   return containers.map((container, containerIndex) => {
     let containersLabel = null;
@@ -77,10 +74,8 @@ export default function (props) {
     );
   }
 
-  const nameError = errorsLens
-    .at(index + offset, {})
-    .attr("volumes", {})
-    .get(props.errors).name;
+  const nameError =
+    props.errors.container?.volumes?.[index + offset]?.volumes?.name;
 
   return (
     <div>

diff --git a/plugins/dss/components/DSSVolumeConfig.tsx b/plugins/dss/components/DSSVolumeConfig.tsx
@@ -2,7 +2,6 @@ import { Trans } from "@lingui/macro";
 
 import * as React from "react";
 
-import Objektiv from "objektiv";
 import { MountService } from "foundation-ui";
 
 import FieldAutofocus from "#SRC/js/components/form/FieldAutofocus";
@@ -14,25 +13,17 @@ import FormGroupHeading from "#SRC/js/components/form/FormGroupHeading";
 import FormGroupHeadingContent from "#SRC/js/components/form/FormGroupHeadingContent";
 import FormRow from "#SRC/js/components/form/FormRow";
 
-const errorsLens = Objektiv.attr("container", {}).attr("volumes", []);
-
 export default function (props) {
   const { volume, index } = props;
   if (volume.type !== "DSS") {
     return null;
   }
 
-  const sizeError = errorsLens
-    .at(index, {})
-    .attr("persistent", {})
-    .get(props.errors).size;
-  const profileNameError = errorsLens
-    .at(index, {})
-    .attr("persistent", {})
-    .get(props.errors).profileName;
-  const containerPathError = errorsLens.at(index, {}).get(props.errors)
-    .containerPath;
-  const typeError = errorsLens.at(index, {}).get(props.errors).type;
+  const errs = props.errors?.container?.volumes?.[index];
+  const sizeError = errs?.persistent?.size;
+  const profileNameError = errs?.persistent?.profileName;
+  const containerPathError = errs?.containerPath;
+  const typeError = errs?.type;
 
   return (
     <div>

diff --git a/plugins/services/src/js/components/forms/HealthChecksFormSection.tsx b/plugins/services/src/js/components/forms/HealthChecksFormSection.tsx
@@ -2,7 +2,6 @@ import { Trans } from "@lingui/macro";
 import PropTypes from "prop-types";
 import * as React from "react";
 import { Tooltip } from "reactjs-components";
-import Objektiv from "objektiv";
 
 import AddButton from "#SRC/js/components/form/AddButton";
 import AdvancedSection from "#SRC/js/components/form/AdvancedSection";
@@ -32,8 +31,6 @@ import {
 import { FormReducer as healthChecks } from "../../reducers/serviceForm/FormReducers/HealthChecks";
 import HealthCheckUtil from "../../utils/HealthCheckUtil";
 
-const errorsLens = Objektiv.attr("healthChecks", []);
-
 class HealthChecksFormSection extends React.Component {
   static defaultProps = {
     data: {},
@@ -56,7 +53,7 @@ class HealthChecksFormSection extends React.Component {
       return null;
     }
 
-    const errors = errorsLens.at(key, {}).get(this.props.errors);
+    const errors = this.props.errors?.healthChecks?.[key] || {};
 
     const gracePeriodHelpText = (
       <Trans render="span">
@@ -232,10 +229,7 @@ class HealthChecksFormSection extends React.Component {
       return null;
     }
 
-    const errors = errorsLens
-      .at(key, {})
-      .attr("command", {})
-      .get(this.props.errors);
+    const errors = this.props.errors?.healthChecks?.[key]?.command || {};
 
     return (
       <FormRow>
@@ -311,7 +305,7 @@ class HealthChecksFormSection extends React.Component {
       return null;
     }
 
-    const errors = errorsLens.at(key, {}).get(this.props.errors);
+    const errors = this.props.errors?.healthChecks?.[key] || {};
 
     const endpointHelpText = (
       <Trans render="span">
@@ -404,7 +398,7 @@ class HealthChecksFormSection extends React.Component {
 
   getHealthChecksLines(data) {
     return data.map((healthCheck, key) => {
-      const errors = errorsLens.at(key, {}).get(this.props.errors);
+      const errors = this.props.errors?.healthChecks?.[key] || {};
 
       if (
         !HealthCheckUtil.isKnownProtocol(healthCheck.protocol) &&

diff --git a/plugins/services/src/js/components/forms/MultiContainerHealthChecksFormSection.tsx b/plugins/services/src/js/components/forms/MultiContainerHealthChecksFormSection.tsx
@@ -2,7 +2,6 @@ import { Trans } from "@lingui/macro";
 import PropTypes from "prop-types";
 import * as React from "react";
 import { Tooltip } from "reactjs-components";
-import Objektiv from "objektiv";
 import { Icon } from "@dcos/ui-kit";
 import { SystemIcons } from "@dcos/ui-kit/dist/packages/icons/dist/system-icons-enum";
 import {
@@ -44,9 +43,7 @@ class MultiContainerHealthChecksFormSection extends React.Component {
     onAddItem: PropTypes.func,
     onRemoveItem: PropTypes.func,
   };
-  getAdvancedSettings(healthCheck, path, errorsLens) {
-    const errors = errorsLens.get(this.props.errors);
-
+  getAdvancedSettings(healthCheck, path, errors) {
     const gracePeriodHelpText = (
       <Trans render="span">
         (Optional. Default: 300): Health check failures are ignored within this
@@ -211,16 +208,13 @@ class MultiContainerHealthChecksFormSection extends React.Component {
     );
   }
 
-  getCommandFields(healthCheck, path, errorsLens) {
+  getCommandFields(healthCheck, path, errors) {
     if (healthCheck.protocol !== COMMAND) {
       return null;
     }
 
     const { exec } = healthCheck;
-    const errors = errorsLens
-      .attr("exec", {})
-      .attr("command", {})
-      .get(this.props.errors);
+    errors = errors?.exec?.command || {};
 
     return (
       <FormRow>
@@ -260,13 +254,11 @@ class MultiContainerHealthChecksFormSection extends React.Component {
     ));
   }
 
-  getHTTPFields(healthCheck, container, path, errorsLens) {
+  getHTTPFields(healthCheck, container, path, errors) {
     if (healthCheck.protocol !== HTTP) {
       return null;
     }
 
-    const errors = errorsLens.at("http", {}).get(this.props.errors);
-
     const endpointHelpText = (
       <Trans render="span">
         Select a service endpoint that you configured in Networking.
@@ -380,9 +372,7 @@ class MultiContainerHealthChecksFormSection extends React.Component {
   getHealthChecksBody(container, index) {
     const { healthCheck } = container;
     const path = `containers.${index}.healthCheck`;
-    const errorsLens = Objektiv.attr("containers", [])
-      .at(index, {})
-      .attr("healthCheck", {});
+    const errors = this.props.errors?.containers?.healthCheck;
 
     if (healthCheck == null) {
       return (
@@ -441,10 +431,10 @@ class MultiContainerHealthChecksFormSection extends React.Component {
             </FieldSelect>
           </FormGroup>
         </FormRow>
-        {this.getHTTPFields(healthCheck, container, path, errorsLens)}
+        {this.getHTTPFields(healthCheck, container, path, errors?.http || {})}
         {this.getTCPFields(healthCheck, container, path)}
-        {this.getCommandFields(healthCheck, path, errorsLens)}
-        {this.getAdvancedSettings(healthCheck, path, errorsLens)}
+        {this.getCommandFields(healthCheck, path, errors)}
+        {this.getAdvancedSettings(healthCheck, path, errors)}
       </FormGroupContainer>
     );
   }

diff --git a/plugins/services/src/js/components/forms/MultiContainerVolumesFormSection.tsx b/plugins/services/src/js/components/forms/MultiContainerVolumesFormSection.tsx
@@ -2,7 +2,6 @@ import { Trans } from "@lingui/macro";
 import { Tooltip, Select, SelectOption } from "reactjs-components";
 import PropTypes from "prop-types";
 import * as React from "react";
-import Objektiv from "objektiv";
 import { MountService } from "foundation-ui";
 
 import AddButton from "#SRC/js/components/form/AddButton";
@@ -25,7 +24,6 @@ import { getContainerNameWithIcon } from "../../utils/ServiceConfigDisplayUtil";
 import { FormReducer as volumeMounts } from "../../reducers/serviceForm/MultiContainerVolumes";
 import VolumeConstants from "../../constants/VolumeConstants";
 
-const errorsLens = Objektiv.attr("container", {}).attr("volumes", []);
 const excludedTypes = ["DSS", "EXTERNAL"];
 
 class MultiContainerVolumesFormSection extends React.Component {
@@ -121,10 +119,8 @@ class MultiContainerVolumesFormSection extends React.Component {
     const { containers } = this.props.data;
 
     return data.map((volumes, key) => {
-      const nameError = errorsLens
-        .at(key + offset, {})
-        .attr("volumes", {})
-        .get(this.props.errors).name;
+      const nameError = this.props.errors?.container?.volumes?.[key + offset]
+        ?.volumes?.name;
       const removeHandler = this.props.onRemoveItem.bind(this, {
         value: key,
         path: "volumeMounts",

diff --git a/plugins/services/src/js/components/forms/VolumesFormSection.tsx b/plugins/services/src/js/components/forms/VolumesFormSection.tsx
@@ -2,7 +2,6 @@ import { Trans } from "@lingui/macro";
 import { Tooltip, Select, SelectOption } from "reactjs-components";
 import PropTypes from "prop-types";
 import * as React from "react";
-import Objektiv from "objektiv";
 import { MountService } from "foundation-ui";
 
 import AddButton from "#SRC/js/components/form/AddButton";
@@ -28,10 +27,11 @@ import { FormReducer as volumes } from "../../reducers/serviceForm/FormReducers/
 
 const { DOCKER } = ContainerConstants.type;
 
-const errorsLens = Objektiv.attr("container", {}).attr("volumes", []);
 const excludedTypes = ["EPHEMERAL", "DSS"];
 
-class VolumesFormSection extends React.Component {
+class VolumesFormSection extends React.Component<{
+  errors: Record<string, unknown>;
+}> {
   static defaultProps = {
     data: {},
     errors: {},
@@ -49,12 +49,9 @@ class VolumesFormSection extends React.Component {
       return null;
     }
 
-    const sizeError = errorsLens
-      .at(key, {})
-      .attr("persistent", {})
-      .get(this.props.errors).size;
-    const containerPathError = errorsLens.at(key, {}).get(this.props.errors)
-      .containerPath;
+    const volumeErrors = this.props.errors?.container?.volumes?.[key]?.volumes;
+    const sizeError = volumeErrors?.persistent?.size;
+    const containerPathError = volumeErrors?.containerPath;
     const tooltipContent = (
       <Trans render="span">
         The path where your application will read and write data. This must be a{" "}
@@ -123,10 +120,9 @@ class VolumesFormSection extends React.Component {
       return null;
     }
 
-    const errors = errorsLens.at(key, {}).get(this.props.errors);
-    const hostPathError = errors.hostPath;
-    const containerPathError = errors.containerPath;
-    const modeError = errors.mode;
+    const errors = this.props.errors?.container?.volumes?.[key];
+    const hostPathError = errors?.hostPath;
+    const containerPathError = errors?.containerPath;
     const tooltipContent = (
       <Trans render="span">
         If you are using the Mesos containerizer, this must be a single-level{" "}
@@ -185,7 +181,7 @@ class VolumesFormSection extends React.Component {
           />
           <FieldError>{containerPathError}</FieldError>
         </FormGroup>
-        <FormGroup className="column-4" showError={Boolean(modeError)}>
+        <FormGroup className="column-4" showError={Boolean(errors?.mode)}>
           <FieldLabel>
             <FormGroupHeading>
               <Trans render={<FormGroupHeadingContent primary={true} />}>
@@ -207,18 +203,10 @@ class VolumesFormSection extends React.Component {
       return null;
     }
 
-    const nameError = errorsLens
-      .at(key, {})
-      .attr("external", {})
-      .get(this.props.errors).name;
-
-    const sizeError = errorsLens
-      .at(key, {})
-      .attr("external", {})
-      .get(this.props.errors).size;
-
-    const containerPathError = errorsLens.at(key, {}).get(this.props.errors)
-      .containerPath;
+    const volumeErrors = this.props.errors?.container?.volumes?.[key]?.volume;
+    const nameError = volumeErrors?.external?.name;
+    const sizeError = volumeErrors?.external?.size;
+    const containerPathError = volumeErrors?.containerPath;
 
     const runtimeType = findNestedPropertyInObject(
       this.props.data,
@@ -329,7 +317,7 @@ class VolumesFormSection extends React.Component {
 
   getVolumesLines(data) {
     return data.map((volume, key) => {
-      const typeError = errorsLens.at(key, {}).get(this.props.errors).type;
+      const typeError = this.props.errors?.container?.volumes?.[key]?.type;
 
       if (
         volume.type != null &&