Fix: Organization rename and toast issues (#1954)

* Toast message removed when renaming an organization

app/client/cypress/integration/Smoke_TestSuite/Applications/UpdateApplication_spec.js

@@ -22,7 +22,7 @@ describe("Update Application", function() {
     cy.get(homePage.appMoreIcon)
       .first()
       .click({ force: true });
-    cy.get(homePage.applicationName).type(appname + "{enter}");
+    cy.get(homePage.applicationName).type(`${appname} updated` + "{enter}");
     cy.wait("@updateApplication").should(
       "have.nested.property",
       "response.body.responseMeta.status",

app/client/src/components/ads/EditableText.tsx

@@ -185,7 +185,9 @@ export const EditableText = (props: EditableTextProps) => {
       } else if (changeStarted) {
         onTextChanged && onTextChanged(_value);
       }
-      onBlur(_value);
+      if (_value !== defaultValue) {
+        onBlur(_value);
+      }
       setIsEditing(false);
       setChangeStarted(false);
     },

app/client/src/components/ads/Toast.tsx

@@ -47,7 +47,7 @@ export const StyledToastContainer = (props: ToastOptions) => {
 
 const ToastBody = styled.div<{
   variant?: Variant;
-  onUndo?: () => void;
+  isUndo?: boolean;
   dispatchableAction?: { type: ReduxActionType; payload: any };
 }>`
   width: 264px;
@@ -56,6 +56,7 @@ const ToastBody = styled.div<{
     ${props => props.theme.spaces[5]}px;
   display: flex;
   align-items: center;
+  justify-content: space-between;
 
   .${Classes.ICON} {
     cursor: auto;
@@ -83,9 +84,9 @@ const ToastBody = styled.div<{
   }
 
   ${props =>
-    props.onUndo || props.dispatchableAction
+    props.isUndo || props.dispatchableAction
       ? `
-    .${Classes.TEXT}:last-child {
+    .undo-section .${Classes.TEXT} {
       cursor: pointer;
       margin-left: ${props.theme.spaces[3]}px;
       color: ${props.theme.colors.toast.undo};
@@ -96,40 +97,49 @@ const ToastBody = styled.div<{
       : null}
 `;
 
+const FlexContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
 const ToastComponent = (props: ToastProps & { undoAction?: () => void }) => {
   const dispatch = useDispatch();
 
   return (
     <ToastBody
       variant={props.variant || Variant.info}
-      onUndo={props.onUndo}
+      isUndo={props.onUndo ? true : false}
       dispatchableAction={props.dispatchableAction}
       className="t--toast-action"
     >
-      {props.variant === Variant.success ? (
-        <Icon name="success" size={IconSize.XXL} />
-      ) : props.variant === Variant.warning ? (
-        <Icon name="warning" size={IconSize.XXL} />
-      ) : null}
-      {props.variant === Variant.danger ? (
-        <Icon name="error" size={IconSize.XXL} />
-      ) : null}
-      <Text type={TextType.P1}>{props.text}</Text>
-      {props.onUndo || props.dispatchableAction ? (
-        <Text
-          type={TextType.H6}
-          onClick={() => {
-            if (props.dispatchableAction) {
-              dispatch(props.dispatchableAction);
-              props.undoAction && props.undoAction();
-            } else {
-              props.undoAction && props.undoAction();
-            }
-          }}
-        >
-          UNDO
-        </Text>
-      ) : null}
+      <FlexContainer>
+        {props.variant === Variant.success ? (
+          <Icon name="success" size={IconSize.XXL} />
+        ) : props.variant === Variant.warning ? (
+          <Icon name="warning" size={IconSize.XXL} />
+        ) : null}
+        {props.variant === Variant.danger ? (
+          <Icon name="error" size={IconSize.XXL} />
+        ) : null}
+        <Text type={TextType.P1}>{props.text}</Text>
+      </FlexContainer>
+      <div className="undo-section">
+        {props.onUndo || props.dispatchableAction ? (
+          <Text
+            type={TextType.H6}
+            onClick={() => {
+              if (props.dispatchableAction) {
+                dispatch(props.dispatchableAction);
+                props.undoAction && props.undoAction();
+              } else {
+                props.undoAction && props.undoAction();
+              }
+            }}
+          >
+            UNDO
+          </Text>
+        ) : null}
+      </div>
     </ToastBody>
   );
 };

app/client/src/pages/Applications/index.tsx

@@ -63,7 +63,6 @@ import NoSearchImage from "../../assets/images/NoSearchResult.svg";
 import { getNextEntityName } from "utils/AppsmithUtils";
 import Spinner from "components/ads/Spinner";
 import ProfileImage from "pages/common/ProfileImage";
-import { Toaster } from "components/ads/Toast";
 
 const OrgDropDown = styled.div`
   display: flex;
@@ -465,9 +464,6 @@ const ApplicationsSection = (props: any) => {
   const Form: any = OrgInviteUsersForm;
 
   const OrgNameChange = (newName: string, orgId: string) => {
-    Toaster.show({
-      text: "Updating organization name...",
-    });
     dispatch(
       saveOrg({
         id: orgId as string,