Merge branch 'fix/ui-fixes-2' into 'release'

Misc UI Fixes

See merge request theappsmith/internal-tools-client!268

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 {

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" : ""}

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>

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

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}

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;

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,

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 || [""]}

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
       />
     );
   }

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 {

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;