fix: grid updates on other fields, reportErrorsAndSubmit fixes

services/frontend/src/components/Modal/network/General.tsx

@@ -6,13 +6,34 @@ const Root = styled("div")`
   display: flex;
   flex-direction: column;
   row-gap: ${({ theme }) => theme.spacing(1)};
+  @media (max-width: 640px) {
+    row-gap: 0;
+  }
+`;
+
+const Group = styled("div")`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  @media (max-width: 640px) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+  column-gap: ${({ theme }) => theme.spacing(1)};
+  width: 100%;
 `;
 
 const General = () => {
   return (
     <Root>
+      <Group>
         <TextField label="Entry name" name="entryName" required={true} />
+      </Group>
+
+      <Group>
         <TextField label="Network name" name="networkName" required={true} />
+      </Group>
+
       <Records
         name="labels"
         title="Labels"

services/frontend/src/components/Modal/network/IPAM.tsx

@@ -5,10 +5,24 @@ import TextField from "../../global/FormElements/TextField";
 import { IFieldType } from "../../Record";
 import Records from "../../Records";
 
-const Fields = styled("div")`
+const Root = styled("div")`
   display: flex;
   flex-direction: column;
   row-gap: ${({ theme }) => theme.spacing(1)};
+  @media (max-width: 640px) {
+    row-gap: 0;
+  }
+`;
+
+const Group = styled("div")`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  @media (max-width: 640px) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+  column-gap: ${({ theme }) => theme.spacing(1)};
   width: 100%;
 `;
 
@@ -44,8 +58,10 @@ const ConfigurationBorder = styled("div")`
 
 const IPAM: FunctionComponent = (): ReactElement => {
   return (
-    <Fields>
+    <Root>
+      <Group>
         <TextField label="Driver" name="driver" />
+      </Group>
 
       <Records
         name="configurations"
@@ -150,7 +166,7 @@ const IPAM: FunctionComponent = (): ReactElement => {
           <Field>{element}</Field>
         )}
       />
-    </Fields>
+    </Root>
   );
 };
 

services/frontend/src/components/Modal/network/NetworkList.tsx

@@ -38,7 +38,7 @@ const ListItem = styled("div")<IListItemProps>`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  column-gap: ${({ theme }) => theme.spacing(2)};
+  column-gap: ${({ theme }) => theme.spacing(1)};
   padding: ${({ theme }) => theme.spacing(1, 1, 1, 2)};
   cursor: pointer;
   background-color: ${({ selected }) => selected && "#f5f5f5"};

services/frontend/src/components/Modal/service/Accordion.tsx

@@ -44,7 +44,6 @@ const Bottom = styled("div")`
   display: flex;
   flex-direction: column;
   row-gap: ${({ theme }) => theme.spacing(1)};
-  padding: ${({ theme }) => theme.spacing(0, 2)};
 `;
 
 const Accordion: FunctionComponent<IAccordionProps> = (

services/frontend/src/components/Modal/service/Build.tsx

@@ -6,6 +6,9 @@ const Root = styled("div")`
   display: flex;
   flex-direction: column;
   row-gap: ${({ theme }) => theme.spacing(1)};
+  @media (max-width: 640px) {
+    row-gap: 0;
+  }
 `;
 
 const Build = () => {
@@ -15,7 +18,7 @@ const Build = () => {
 
       <TextField label="Dockerfile" name="build.dockerfile" />
 
-      <TextField label="Stage" name="build.stage" />
+      <TextField label="Target" name="build.target" />
 
       <TextField label="Isolation" name="build.isolation" />
 

services/frontend/src/components/Modal/service/Data.tsx

@@ -4,7 +4,10 @@ import Records from "../../Records";
 const Root = styled("div")`
   display: flex;
   flex-direction: column;
-  align-items: center;
+  row-gap: ${({ theme }) => theme.spacing(1)};
+  @media (max-width: 640px) {
+    row-gap: 0;
+  }
 `;
 
 const Volumes = () => {

services/frontend/src/components/Modal/service/Deploy.tsx

@@ -9,6 +9,9 @@ const Root = styled("div")`
   display: flex;
   flex-direction: column;
   row-gap: ${({ theme }) => theme.spacing(1)};
+  @media (max-width: 640px) {
+    row-gap: 0;
+  }
 `;
 
 const Group = styled("div")`

services/frontend/src/components/Modal/service/Environment.tsx

@@ -4,7 +4,10 @@ import Records from "../../Records";
 const Root = styled("div")`
   display: flex;
   flex-direction: column;
-  align-items: center;
+  row-gap: ${({ theme }) => theme.spacing(1)};
+  @media (max-width: 640px) {
+    row-gap: 0;
+  }
 `;
 
 const Environment = () => {

services/frontend/src/components/Modal/service/General.tsx

@@ -14,7 +14,7 @@ const Root = styled("div")`
 
 const Group = styled("div")`
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   grid-column-gap: 0px;
   grid-row-gap: 0px;
   @media (max-width: 640px) {
@@ -52,11 +52,15 @@ const General = () => {
       </Group>
 
       <Group>
+        <SpanTwo>
           <TextField label="Command" name="command" required={false} />
+        </SpanTwo>
       </Group>
 
       <Group>
+        <SpanTwo>
           <TextField label="Entrypoint" name="entrypoint" required={false} />
+        </SpanTwo>
       </Group>
 
       <Group>

services/frontend/src/components/Modal/volume/General.tsx

@@ -7,13 +7,34 @@ const Root = styled("div")`
   display: flex;
   flex-direction: column;
   row-gap: ${({ theme }) => theme.spacing(1)};
+  @media (max-width: 640px) {
+    row-gap: 0;
+  }
+`;
+
+const Group = styled("div")`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  @media (max-width: 640px) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+  column-gap: ${({ theme }) => theme.spacing(1)};
+  width: 100%;
 `;
 
 const General = () => {
   return (
     <Root>
+      <Group>
         <TextField label="Entry name" name="entryName" required={true} />
+      </Group>
+
+      <Group>
         <TextField label="Volume name" name="volumeName" required={true} />
+      </Group>
+
       <Records
         name="labels"
         title="Labels"

services/frontend/src/components/Record.tsx

@@ -40,7 +40,7 @@ const Root = styled("div")`
   flex-direction: row;
   justify-content: flex-start;
   align-items: flex-start;
-  column-gap: ${({ theme }) => theme.spacing(2)};
+  column-gap: ${({ theme }) => theme.spacing(1)};
   width: 100%;
 
   @media (max-width: 768px) {

services/frontend/src/components/Records.tsx

@@ -35,19 +35,19 @@ const Group = styled("div", {
   display: flex;
   flex-direction: column;
   align-items: ${({ empty }) => (empty ? "center" : "flex-end")};
-  row-gap: ${({ theme }) => theme.spacing(1)};
   width: 100%;
   @media (max-width: 640px) {
     row-gap: 0;
   }
 `;
 
-const GroupTitle = styled("h5")`
-  font-size: 0.85rem;
-  color: #374151;
+const GroupTitle = styled("label")`
+  display: block;
+  font-size: 0.75rem;
+  line-height: 1rem;
   font-weight: 700;
-  width: 100%;
-  text-align: left;
+  color: #374151;
+  padding: 0;
 `;
 
 const RecordList = styled("div")`
@@ -56,7 +56,6 @@ const RecordList = styled("div")`
   justify-content: center;
   align-items: center;
   row-gap: ${({ theme }) => theme.spacing(1)};
-  margin-top: ${({ theme }) => theme.spacing(1)};
   width: 100%;
 `;
 

services/frontend/src/utils/forms.ts

@@ -196,6 +196,35 @@ export const packArrayAsStrings = (
   );
 };
 
+const isObject = (value: any) => {
+  return !!(value && typeof value === "object" && !Array.isArray(value));
+};
+
+const digForString = (error: any[] | string) => {
+  if (lodash.isString(error) && /\s/.test(error)) {
+    toaster(error as string, "error");
+    return;
+  }
+
+  if (Array.isArray(error)) {
+    for (const message of error) {
+      digForString(message);
+    }
+  }
+
+  if (isObject(error)) {
+    for (const [_, value] of Object.entries(error)) {
+      if (Array.isArray(value)) {
+        digForString(value);
+      }
+
+      if (lodash.isString(value)) {
+        toaster(value as string, "error");
+      }
+    }
+  }
+};
+
 /**
  * Formik is configured to validate fields automatically using Yup.
  * The problem is Formik does not call `onSubmit` function when errors
@@ -204,21 +233,9 @@ export const packArrayAsStrings = (
  * function basically implements this.
  */
 export const reportErrorsAndSubmit = (formik: any) => () => {
-  const errors = Object.entries(formik.errors);
+  const errors: [string, any][] = Object.entries(formik.errors);
   if (errors.length > 0) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    for (const [_field, message] of errors) {
-      if (Array.isArray(message)) {
-        message.forEach((m: object) => {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          for (const [_, value] of Object.entries(m)) {
-            toaster(value as string, "error");
-          }
-        });
-      } else {
-        toaster(message as string, "error");
-      }
-    }
+    digForString(errors);
   } else {
     formik.submitForm();
   }