Merge branch 'master' into feat/pending-changes-popover

amplication · Jan 3, 2021 · 714cabf · 714cabf
2 parents a53ce4e + 80fe369
commit 714cabf
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 27 deletions.
diff --git a/packages/amplication-client/src/Application/ApplicationForm.tsx b/packages/amplication-client/src/Application/ApplicationForm.tsx
@@ -2,6 +2,7 @@ import React, { useCallback } from "react";
 import { gql, useMutation } from "@apollo/client";
 import { Formik, Form } from "formik";
 import { validate } from "../util/formikValidateJsonSchema";
+import { Icon } from "@rmwc/icon";
 
 import { Snackbar } from "@rmwc/snackbar";
 import "@rmwc/snackbar/styles";
@@ -92,7 +93,10 @@ function ApplicationForm({ app }: Props) {
               />
               <div>
                 <hr />
-                <h2>App Color</h2>
+                <h2>
+                  <Icon icon="color" />
+                  App Color
+                </h2>
                 {COLORS.map((color) => (
                   <ColorSelectButton
                     color={color}

diff --git a/packages/amplication-client/src/Application/ApplicationHome.scss b/packages/amplication-client/src/Application/ApplicationHome.scss
@@ -4,7 +4,8 @@ $info-panel-height: 140px;
 $application-badge-size-large: 100px;
 $app-icon-large-font-size: 70px;
 $circle-badge-border: 2px;
-$tiles-breakpoint: 700px;
+$tiles-min-width: 450px;
+$form-width: 350px;
 
 .application-home {
   background: var(--white);
@@ -80,7 +81,7 @@ $tiles-breakpoint: 700px;
         margin-top: var(--double-spacing);
         margin-bottom: var(--double-spacing);
       }
-      width: 400px;
+      width: $form-width;
       padding: var(--double-spacing);
 
       hr {
@@ -92,14 +93,15 @@ $tiles-breakpoint: 700px;
     }
     &__tiles {
       padding: var(--double-spacing);
-      min-width: $tiles-breakpoint;
+
       flex: 1;
       @include flexFullRow;
       align-items: stretch;
       flex-wrap: wrap;
 
       > * {
         flex: 0 50%;
+        min-width: $tiles-min-width;
       }
     }
   }

diff --git a/packages/amplication-client/src/Entity/EntityFieldForm.tsx b/packages/amplication-client/src/Entity/EntityFieldForm.tsx
@@ -85,7 +85,6 @@ const EntityFieldForm = ({
           values,
           FORM_SCHEMA
         );
-
         //validate the field dynamic properties
         const schema = getSchemaForDataType(values.dataType);
         const propertiesError = validate<Object>(values.properties, schema);

diff --git a/packages/amplication-client/src/Entity/EntityListItem.tsx b/packages/amplication-client/src/Entity/EntityListItem.tsx
@@ -45,7 +45,6 @@ export const EntityListItem = ({
     {
       update(cache, { data }) {
         if (!data) return;
-        console.log(data);
         const deletedEntityId = data.deleteEntity.id;
 
         cache.modify({

diff --git a/packages/amplication-client/src/Entity/OptionSet.tsx b/packages/amplication-client/src/Entity/OptionSet.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { FieldArray, FieldArrayRenderProps, getIn } from "formik";
 import { pascalCase } from "pascal-case";
 import { get } from "lodash";
@@ -20,12 +20,15 @@ type Props = {
 };
 
 const CLASS_NAME = "option-set";
-const NEW_OPTION: OptionItem = { value: "", label: "" };
 
-const OptionSet = ({ label, name, isDisabled }: Props) => {
+const OptionSet = ({ name, label }: Props) => {
   return (
     <div className={CLASS_NAME}>
-      <FieldArray name={name} component={OptionSetOptions} />
+      <FieldArray
+        name={name}
+        validateOnChange
+        render={(props) => <OptionSetOptions {...props} label={label} />}
+      />
     </div>
   );
 };
@@ -35,33 +38,28 @@ export default OptionSet;
 const OptionSetOptions = ({
   form,
   name,
-  push,
   remove,
   replace,
-}: FieldArrayRenderProps) => {
-  const value = get(form.values, name);
-
-  const handleAddOption = useCallback(() => {
-    push(NEW_OPTION);
-  }, [push]);
-
-  useEffect(() => {
-    if (!value || !value.length) {
-      push(NEW_OPTION);
-    }
-  }, [value, push]);
+  label,
+}: {
+  label: string;
+} & FieldArrayRenderProps) => {
+  const value = get(form.values, name) || [];
+  const [push, hasNew] = useVirtualPush(value);
 
   const errors = useMemo(() => {
     const error = getIn(form.errors, name);
     if (typeof error === "string") return error;
     return null;
   }, [form.errors, name]);
 
+  const options = hasNew ? [...value, {}] : value;
+
   return (
     <div>
-      <h3>Options</h3>
+      <h3>{label}</h3>
       {errors && <div className="option-set__error-message">{errors}</div>}
-      {value?.map((option: OptionItem, index: number) => (
+      {options.map((option: OptionItem, index: number) => (
         <OptionSetOption
           key={index}
           index={index}
@@ -70,14 +68,37 @@ const OptionSetOptions = ({
           name={name}
         />
       ))}
-      <Button onClick={handleAddOption} buttonStyle={EnumButtonStyle.Clear}>
+      <Button onClick={push} buttonStyle={EnumButtonStyle.Clear}>
         <Icon icon="plus" />
         Add option
       </Button>
     </div>
   );
 };
 
+/**
+ * Replaces ArrayField's push behavior to indicate when to display an item
+ * before pushing to the array so the new item won't trigger validation and won't be submitted
+ * @param value the array value from the form
+ */
+function useVirtualPush(value: unknown[]): [() => void, boolean] {
+  const [indexOfNew, setIndexOfNew] = useState<number | null>(0);
+
+  const add = useCallback(() => {
+    setIndexOfNew(value.length);
+  }, [setIndexOfNew, value]);
+
+  useEffect(() => {
+    if (indexOfNew !== null && value.length > indexOfNew) {
+      setIndexOfNew(null);
+    }
+  }, [value, indexOfNew, setIndexOfNew]);
+
+  const hasNew = indexOfNew !== null;
+
+  return [add, hasNew];
+}
+
 type OptionSetOption = {
   name: string;
   index: number;

diff --git a/packages/amplication-client/src/util/analytics.ts b/packages/amplication-client/src/util/analytics.ts
@@ -21,7 +21,6 @@ export const useTracking: () => Omit<
 export function dispatch(event: Partial<Event>) {
   if (REACT_APP_AMPLITUDE_API_KEY) {
     const { eventName, ...rest } = event;
-    console.log(REACT_APP_AMPLITUDE_API_KEY, event);
     amplitude.getInstance().logEvent(eventName || MISSING_EVENT_NAME, rest);
   }
 }