fix: empty space is clickable when user edits app name or organisatio…

…n name #9643
appsmithorg · Oct 15, 2024 · cb04f62 · cb04f62
1 parent 3032adc
commit cb04f62
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 9 deletions.
diff --git a/app/client/packages/design-system/ads-old/src/EditableTextSubComponent/index.tsx b/app/client/packages/design-system/ads-old/src/EditableTextSubComponent/index.tsx
@@ -70,6 +70,7 @@ const TextContainer = styled.div<{
 }>`
   display: flex;
   align-items: center;
+  // justify-content: space-evenly;
   .bp3-editable-text.bp3-editable-text-editing::before,
   .bp3-editable-text.bp3-disabled::before {
     display: none;
@@ -80,7 +81,6 @@ const TextContainer = styled.div<{
     color: var(--ads-editable-text-subcomponent-default-text-color);
     overflow: hidden;
     text-overflow: ellipsis;
-    ${(props) => (props.isEditing ? "display: none" : "display: block")};
     width: fit-content !important;
     min-width: auto !important;
     line-height: inherit !important;
@@ -138,6 +138,7 @@ export const EditableTextSubComponent = React.forwardRef(
     const [value, setValue] = useState(defaultValue);
     const [lastValidValue, setLastValidValue] = useState(defaultValue);
     const [changeStarted, setChangeStarted] = useState<boolean>(false);
+    const [isCancelled, setIsCancelled] = useState<boolean>(false);
 
     useEffect(() => {
       if (isError) {
@@ -187,6 +188,8 @@ export const EditableTextSubComponent = React.forwardRef(
 
         if (finalVal && finalVal !== defaultValue) {
           onBlur && onBlur(finalVal);
+          setLastValidValue(finalVal);
+          setValue(finalVal);
         }
 
         setIsEditing(false);
@@ -215,17 +218,31 @@ export const EditableTextSubComponent = React.forwardRef(
         const error = errorMessage ? errorMessage : false;
 
         if (!error && finalVal !== "") {
-          setLastValidValue(finalVal);
           onTextChanged && onTextChanged(finalVal);
         }
 
         setValue(finalVal);
         setIsInvalid(error);
         setChangeStarted(true);
       },
-      [inputValidation, onTextChanged],
+      [inputValidation, onTextChanged, valueTransform],
     );
 
+    const onCancel = useCallback(() => {
+      onBlur && onBlur(lastValidValue);
+      setIsEditing(false);
+      setIsInvalid(false);
+      setSavingState(SavingState.NOT_STARTED);
+      setValue(lastValidValue);
+      setIsCancelled(true);
+    }, [lastValidValue, onBlur]);
+
+    useEffect(() => {
+      if (isCancelled) {
+        setValue(lastValidValue);
+      }
+    }, [isCancelled, lastValidValue]);
+
     const iconName =
       !isEditing &&
       savingState === SavingState.NOT_STARTED &&
@@ -251,15 +268,42 @@ export const EditableTextSubComponent = React.forwardRef(
             className={props.className}
             disabled={!isEditing}
             isEditing={isEditing}
-            onCancel={onConfirm}
             onChange={onInputchange}
-            onConfirm={onConfirm}
             placeholder={props.placeholder || defaultValue}
             ref={ref}
             selectAllOnFocus
             value={value}
           />
 
+          {value && !props.hideEditIcon && isEditing ? (
+            <>
+              <span
+                className="pl-1"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onConfirm(value);
+                }}
+              >
+                <Icon className="cursor-pointer" name="check-line" size="md" />
+              </span>
+              <span
+                className="px-1"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onCancel();
+                }}
+              >
+                <Icon
+                  className="cursor-pointer"
+                  name="close-circle-line"
+                  size="md"
+                />
+              </span>
+            </>
+          ) : null}
+
           {savingState === SavingState.STARTED ? (
             <Spinner size="md" />
           ) : value && !props.hideEditIcon && iconName ? (

diff --git a/app/client/src/pages/Applications/ApplicationCard.tsx b/app/client/src/pages/Applications/ApplicationCard.tsx
@@ -117,7 +117,7 @@ export function ApplicationCard(props: ApplicationCardProps) {
   const [isDeleting, setIsDeleting] = useState(false);
   const [isForkApplicationModalopen, setForkApplicationModalOpen] =
     useState(false);
-  const [lastUpdatedValue, setLastUpdatedValue] = useState("");
+  const lastUpdatedValue = "";
   const dispatch = useDispatch();
 
   const applicationId = props.application?.id;
@@ -371,9 +371,6 @@ export function ApplicationCard(props: ApplicationCardProps) {
                       name: value,
                     });
                 }}
-                onTextChanged={(value: string) => {
-                  setLastUpdatedValue(value);
-                }}
                 placeholder={"Edit text input"}
                 savingState={
                   isSavingName ? SavingState.STARTED : SavingState.NOT_STARTED