From 474f98f4fc576775695420600365d3d5ab1ecbdf Mon Sep 17 00:00:00 2001
From: Abhinav Jha <abhinav@appsmith.com>
Date: Tue, 28 Jan 2020 17:16:04 +0530
Subject: [PATCH] Misc UI Fixes

---
 app/client/package.json                       |  1 +
 .../appsmith/TextInputComponent.tsx           |  1 +
 .../blueprint/DatePickerComponent.tsx         |  8 ++-
 .../blueprint/DropdownComponent.tsx           | 11 +--
 .../blueprint/InputComponent.tsx              | 12 ++--
 .../blueprint/RadioGroupComponent.tsx         |  8 ++-
 .../designSystems/blueprint/TextComponent.tsx |  2 +-
 .../editorComponents/DraggableComponent.tsx   | 14 ----
 .../editorComponents/TagInputComponent.tsx    | 15 +++-
 .../form/fields/TextField.tsx                 |  1 +
 .../src/pages/UserAuth/StyledComponents.tsx   | 25 +------
 app/client/src/pages/UserAuth/index.tsx       | 70 ++++++++++---------
 app/client/yarn.lock                          | 15 ++++
 13 files changed, 97 insertions(+), 86 deletions(-)

diff --git a/app/client/package.json b/app/client/package.json
index a719103081..29563d3b19 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -73,6 +73,7 @@
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.3.0",
     "react-select": "^3.0.8",
+    "react-spring": "^8.0.27",
     "react-tabs": "^3.0.0",
     "react-transition-group": "^4.3.0",
     "redux": "^4.0.1",
diff --git a/app/client/src/components/designSystems/appsmith/TextInputComponent.tsx b/app/client/src/components/designSystems/appsmith/TextInputComponent.tsx
index 8f807abf30..9b4af62db3 100644
--- a/app/client/src/components/designSystems/appsmith/TextInputComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/TextInputComponent.tsx
@@ -79,6 +79,7 @@ export interface TextInputProps extends IInputGroupProps {
   className?: string;
   type?: string;
   refHandler?: (ref: HTMLInputElement | null) => void;
+  noValidate?: boolean;
 }
 
 interface TextInputState {
diff --git a/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx b/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
index a9d0b683e5..5ac4acfd4e 100644
--- a/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
@@ -24,9 +24,11 @@ class DatePickerComponent extends React.Component<DatePickerComponentProps> {
   render() {
     return (
       <StyledControlGroup fill>
-        <Label className={Classes.TEXT_OVERFLOW_ELLIPSIS}>
-          {this.props.label}
-        </Label>
+        {this.props.label && (
+          <Label className={Classes.TEXT_OVERFLOW_ELLIPSIS}>
+            {this.props.label}
+          </Label>
+        )}
         {this.props.datePickerType === "DATE_PICKER" ? (
           <DateInput
             className={this.props.isLoading ? "bp3-skeleton" : ""}
diff --git a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
index 6a007fb2ec..07f74d4193 100644
--- a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
@@ -29,6 +29,7 @@ const StyledSingleDropDown = styled(SingleDropDown)`
     width: 100%;
     align-items: center;
     justify-content: space-between;
+    ${labelStyle}
   }
   .bp3-button-text {
     text-overflow: ellipsis;
@@ -72,9 +73,11 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
     return (
       <DropdownContainer>
         <StyledControlGroup fill>
-          <Label className={Classes.TEXT_OVERFLOW_ELLIPSIS}>
-            {this.props.label}
-          </Label>
+          {this.props.label && (
+            <Label className={Classes.TEXT_OVERFLOW_ELLIPSIS}>
+              {this.props.label}
+            </Label>
+          )}
           {this.props.selectionType === "SINGLE_SELECT" ? (
             <StyledSingleDropDown
               className={this.props.isLoading ? "bp3-skeleton" : ""}
@@ -89,7 +92,7 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
                 text={
                   !_.isEmpty(this.props.options)
                     ? this.props.options[this.props.selectedIndex].label
-                    : "Add options"
+                    : "-- Empty --"
                 }
               />
             </StyledSingleDropDown>
diff --git a/app/client/src/components/designSystems/blueprint/InputComponent.tsx b/app/client/src/components/designSystems/blueprint/InputComponent.tsx
index 5eeb0efd15..1b0c63a563 100644
--- a/app/client/src/components/designSystems/blueprint/InputComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/InputComponent.tsx
@@ -104,11 +104,13 @@ class InputComponent extends React.Component<
   render() {
     return (
       <InputComponentWrapper fill>
-        <Label className={Classes.TEXT_OVERFLOW_ELLIPSIS}>
-          <span className={this.props.isLoading ? "bp3-skeleton" : ""}>
-            {this.props.label}
-          </span>
-        </Label>
+        {this.props.label && (
+          <Label className={Classes.TEXT_OVERFLOW_ELLIPSIS}>
+            <span className={this.props.isLoading ? "bp3-skeleton" : ""}>
+              {this.props.label}
+            </span>
+          </Label>
+        )}
 
         {this.isNumberInputType(this.props.inputType) ? (
           <NumericInput
diff --git a/app/client/src/components/designSystems/blueprint/RadioGroupComponent.tsx b/app/client/src/components/designSystems/blueprint/RadioGroupComponent.tsx
index 28cdbfcf66..e76594c507 100644
--- a/app/client/src/components/designSystems/blueprint/RadioGroupComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/RadioGroupComponent.tsx
@@ -30,9 +30,11 @@ class RadioGroupComponent extends React.Component<RadioGroupComponentProps> {
   render() {
     return (
       <StyledControlGroup fill>
-        <Label className={Classes.TEXT_OVERFLOW_ELLIPSIS}>
-          {this.props.label}
-        </Label>
+        {this.props.label && (
+          <Label className={Classes.TEXT_OVERFLOW_ELLIPSIS}>
+            {this.props.label}
+          </Label>
+        )}
         <StyledRadioGroup
           selectedValue={this.props.selectedOptionValue}
           onChange={this.onRadioSelectionChange}
diff --git a/app/client/src/components/designSystems/blueprint/TextComponent.tsx b/app/client/src/components/designSystems/blueprint/TextComponent.tsx
index 713e0ad3ef..25feb7d0dd 100644
--- a/app/client/src/components/designSystems/blueprint/TextComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/TextComponent.tsx
@@ -33,7 +33,7 @@ export const StyledText = styled(Text)<{ scroll: boolean }>`
   display: flex;
   width: 100%;
   justify-content: flex-start;
-  align-items: center;
+  align-items: ${props => (props.scroll ? "flex-start" : "center")};
   &.bp3-heading {
     font-weight: ${props => props.theme.fontWeights[3]};
     font-size: ${props => props.theme.fontSizes[4]}px;
diff --git a/app/client/src/components/editorComponents/DraggableComponent.tsx b/app/client/src/components/editorComponents/DraggableComponent.tsx
index aa7b69e431..69b227b3e0 100644
--- a/app/client/src/components/editorComponents/DraggableComponent.tsx
+++ b/app/client/src/components/editorComponents/DraggableComponent.tsx
@@ -58,15 +58,6 @@ const ClickCaptureMask = styled.div`
   z-index: 2;
 `;
 
-const DragHandle = styled.div`
-  position: absolute;
-  left: 0px;
-  top: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX]}px;
-  cursor: move;
-  display: none;
-  cursor: grab;
-`;
-
 const DeleteControl = styled.div`
   position: absolute;
   right: ${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX]}px;
@@ -85,11 +76,6 @@ const EditControl = styled.div`
 
 const CONTROL_ICON_SIZE = 20;
 
-const moveControlIcon = ControlIcons.MOVE_CONTROL({
-  width: CONTROL_ICON_SIZE,
-  height: CONTROL_ICON_SIZE,
-});
-
 const deleteControlIcon = ControlIcons.DELETE_CONTROL({
   width: CONTROL_ICON_SIZE,
   height: CONTROL_ICON_SIZE,
diff --git a/app/client/src/components/editorComponents/TagInputComponent.tsx b/app/client/src/components/editorComponents/TagInputComponent.tsx
index 5ffd983ca9..34b38c7bec 100644
--- a/app/client/src/components/editorComponents/TagInputComponent.tsx
+++ b/app/client/src/components/editorComponents/TagInputComponent.tsx
@@ -94,10 +94,23 @@ const TagInputComponent = (props: TagInputProps) => {
     }
   };
 
+  const handleInputBlur = (e: any) => {
+    if (e.target.value.trim()) {
+      const newValues = [...values, e.target.value];
+      commitValues(newValues);
+      setCurrentValue("");
+      e.preventDefault();
+    }
+  };
+
   return (
     <TagInputWrapper intent={props.intent}>
       <TagInput
-        inputProps={{ type: props.type, value: currentValue }}
+        inputProps={{
+          type: props.type,
+          value: currentValue,
+          onBlur: handleInputBlur,
+        }}
         onInputChange={handleInputChange}
         placeholder={props.placeholder}
         values={_values || [""]}
diff --git a/app/client/src/components/editorComponents/form/fields/TextField.tsx b/app/client/src/components/editorComponents/form/fields/TextField.tsx
index a414c33458..a5d8cd0c00 100644
--- a/app/client/src/components/editorComponents/form/fields/TextField.tsx
+++ b/app/client/src/components/editorComponents/form/fields/TextField.tsx
@@ -18,6 +18,7 @@ class TextField extends React.Component<
         type={this.props.type || "text"}
         component={BaseTextInput}
         {...this.props}
+        noValidate
       />
     );
   }
diff --git a/app/client/src/pages/UserAuth/StyledComponents.tsx b/app/client/src/pages/UserAuth/StyledComponents.tsx
index a60a3f9f44..49029a9bd5 100644
--- a/app/client/src/pages/UserAuth/StyledComponents.tsx
+++ b/app/client/src/pages/UserAuth/StyledComponents.tsx
@@ -4,28 +4,10 @@ import Form from "components/editorComponents/Form";
 import { Card } from "@blueprintjs/core";
 
 export const AuthContainer = styled.section`
-  width: 100vw;
+  position: absolute;
+  width: 100%;
   height: 100vh;
-  && .fade {
-    position: relative;
-  }
-  && .fade-enter {
-    opacity: 0;
-    z-index: 1;
-  }
-
-  && .fade-enter.fade-enter-active {
-    opacity: 1;
-    transition: opacity 250ms ease-in;
-  }
-  .fade-exit {
-    opacity: 1;
-  }
-  .fade-exit-active {
-    display: none;
-    opacity: 0;
-    transition: opacity 250ms;
-  }
+  will-change: transform, opacity;
 `;
 
 export const AuthCard = styled(Card)`
@@ -34,7 +16,6 @@ export const AuthCard = styled(Card)`
   border-radius: ${props => props.theme.authCard.borderRadius}px;
   padding: ${props => props.theme.authCard.padding}px;
   box-shadow: ${props => props.theme.authCard.shadow};
-  position: relative;
   border: none;
   & h1,
   h5 {
diff --git a/app/client/src/pages/UserAuth/index.tsx b/app/client/src/pages/UserAuth/index.tsx
index c7f6c24854..98d24251f2 100644
--- a/app/client/src/pages/UserAuth/index.tsx
+++ b/app/client/src/pages/UserAuth/index.tsx
@@ -1,49 +1,53 @@
 import React from "react";
 import { Switch, Route, useRouteMatch, useLocation } from "react-router-dom";
-import { TransitionGroup, CSSTransition } from "react-transition-group";
 import Login from "./Login";
 import Centered from "components/designSystems/appsmith/CenteredWrapper";
-
+import { animated, useTransition } from "react-spring";
 import { AuthContainer, AuthCard } from "./StyledComponents";
 import SignUp from "./SignUp";
 import ForgotPassword from "./ForgotPassword";
 import ResetPassword from "./ResetPassword";
 import CreatePassword from "./CreatePassword";
-
+const AnimatedAuthCard = animated(AuthContainer);
 export const UserAuth = () => {
   const { path } = useRouteMatch();
   const location = useLocation();
-  return (
-    <AuthContainer>
-      <Centered>
-        <AuthCard>
-          <TransitionGroup>
-            <CSSTransition key={location.key} classNames="fade" timeout={300}>
-              <Switch location={location}>
-                <Route exact path={`${path}/login`} component={Login} />
-                <Route exact path={`${path}/signup`} component={SignUp} />
-                <Route
-                  exact
-                  path={`${path}/resetPassword`}
-                  component={ResetPassword}
-                />
-                <Route
-                  exact
-                  path={`${path}/forgotPassword`}
-                  component={ForgotPassword}
-                />
-                <Route
-                  exact
-                  path={`${path}/createPassword`}
-                  component={CreatePassword}
-                />
-              </Switch>
-            </CSSTransition>
-          </TransitionGroup>
-        </AuthCard>
-      </Centered>
-    </AuthContainer>
+  const transitions = useTransition(location, location => location.pathname, {
+    from: { opacity: 0, transform: "translate3d(50%,0,0)" },
+    enter: { opacity: 1, transform: "translate3d(0%,0,0)" },
+    leave: { opacity: 0, transform: "translate3d(-50%,0,0)" },
+    reset: true,
+  });
+  const renderTransitions = transitions.map(
+    ({ item: location, props, key }) => (
+      <AnimatedAuthCard key={key} style={props}>
+        <Centered>
+          <AuthCard>
+            <Switch location={location}>
+              <Route exact path={`${path}/login`} component={Login} />
+              <Route exact path={`${path}/signup`} component={SignUp} />
+              <Route
+                exact
+                path={`${path}/resetPassword`}
+                component={ResetPassword}
+              />
+              <Route
+                exact
+                path={`${path}/forgotPassword`}
+                component={ForgotPassword}
+              />
+              <Route
+                exact
+                path={`${path}/createPassword`}
+                component={CreatePassword}
+              />
+            </Switch>
+          </AuthCard>
+        </Centered>
+      </AnimatedAuthCard>
+    ),
   );
+  return <React.Fragment>{renderTransitions}</React.Fragment>;
 };
 
 export default UserAuth;
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index 0a5fe98cda..cb1cddb704 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -936,6 +936,13 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.3.1":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.3.tgz#0811944f73a6c926bb2ad35e918dcc1bfab279f1"
+  integrity sha512-fVHx1rzEmwB130VTkLnxR+HmxcTjGzH12LYQcFFoBwakMd3aOMD4OsRN7tGG/UOYE2ektgFrS8uACAoRk1CY0w==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/template@^7.4.0", "@babel/template@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b"
@@ -12651,6 +12658,14 @@ react-sizeme@^2.6.7:
     shallowequal "^1.1.0"
     throttle-debounce "^2.1.0"
 
+react-spring@^8.0.27:
+  version "8.0.27"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a"
+  integrity sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    prop-types "^15.5.8"
+
 react-syntax-highlighter@^8.0.1:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-8.1.0.tgz#59103ff17a828a27ed7c8f035ae2558f09b6b78c"