fix: Edit icon in API editor and toggle transition issue (#9013)

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Entity_Naming_conflict_spec.js

@@ -4,6 +4,7 @@ const widgetsPage = require("../../../../locators/Widgets.json");
 const publish = require("../../../../locators/publishWidgetspage.json");
 const dsl = require("../../../../fixtures/basicTabledsl.json");
 const pages = require("../../../../locators/Pages.json");
+const apiwidget = require("../../../../locators/apiWidgetslocator.json");
 const tabname = "UpdatedTab";
 
 describe("Tab widget test", function() {
@@ -18,6 +19,10 @@ describe("Tab widget test", function() {
     cy.NavigateToAPI_Panel();
     cy.log("Navigation to API Panel screen successful");
     cy.CreateApiAndValidateUniqueEntityName(apiName);
+    cy.get(apiwidget.apiTxt)
+      .clear()
+      .type(tableName, { force: true })
+      .should("have.value", tableName);
   });
 
   it("Rename Table widget with api name validation test", function() {

app/client/cypress/support/commands.js

@@ -995,7 +995,7 @@ Cypress.Commands.add("CreationOfUniqueAPIcheck", (apiname) => {
     .focus()
     .type(apiname, { force: true, delay: 500 })
     .should("have.value", apiname);
-  cy.get(".error-message").should(($x) => {
+  cy.get(".t--action-name-edit-error").should(($x) => {
     expect($x).contain(
       apiname.concat(" is already being used or is a restricted keyword."),
     );
@@ -1082,7 +1082,7 @@ Cypress.Commands.add("CreateApiAndValidateUniqueEntityName", (apiname) => {
     .clear()
     .type(apiname, { force: true })
     .should("have.value", apiname);
-  cy.get(".t--nameOfApi .error-message").should(($x) => {
+  cy.get(".t--action-name-edit-error").should(($x) => {
     expect($x).contain(
       apiname.concat(" is already being used or is a restricted keyword."),
     );

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

@@ -145,8 +145,8 @@ const TextContainer = styled.div<{
     height: ${(props) => props.theme.spaces[14] + 1}px;
     padding: ${(props) => props.theme.spaces[4]}px
       ${(props) => props.theme.spaces[5]}px;
-    width: calc(100% - 40px);
     background-color: ${(props) => props.bgColor};
+    width: calc(100% - 40px);
   }
 
   .icon-wrapper {

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

@@ -28,13 +28,30 @@ export type TextInputProps = CommonComponentProps & {
 const SearchInputWrapper = styled.div`
   & > div {
     border: none;
+
+    & > .left-icon {
+      margin-left: 8px;
+
+      & span {
+        margin-right: 0;
+      }
+    }
+
+    & > .right-icon {
+      position: relative;
+      right: 0;
+    }
+
+    & input {
+      padding: 0 8px;
+    }
   }
 `;
 
 const CloseIcon = styled.div`
   .${Classes.ICON} {
     margin-right: ${(props) => props.theme.spaces[4]}px;
-    margin-left: ${(props) => props.theme.spaces[4]}px;
+    margin-left: 0;
   }
 `;
 

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

@@ -419,7 +419,7 @@ const TextInput = forwardRef(
           props.helperText.length > 0 &&
           HelperMessage}
         {ErrorMessage}
-        <RightSideContainer ref={setRightSideRef}>
+        <RightSideContainer className="right-icon" ref={setRightSideRef}>
           {props.rightSideComponent}
         </RightSideContainer>
       </InputWrapper>

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

@@ -116,7 +116,7 @@ const StyledToggle = styled.label<{
 `;
 
 export default function Toggle(props: ToggleProps) {
-  const [value, setValue] = useState(false);
+  const [value, setValue] = useState(props.value);
 
   useEffect(() => {
     setValue(props.value);

app/client/src/components/editorComponents/ActionNameEditor.tsx

@@ -16,11 +16,6 @@ import { getExistingPageNames } from "sagas/selectors";
 import { saveActionName } from "actions/pluginActionActions";
 import { Spinner } from "@blueprintjs/core";
 import { checkCurrentStep } from "sagas/OnboardingSagas";
-import {
-  EditableText as NewEditableText,
-  EditInteractionKind as NewEditInteractionKind,
-  SavingState,
-} from "components/ads/EditableText";
 import { Classes } from "@blueprintjs/core";
 import { OnboardingStep } from "constants/OnboardingConstants";
 import log from "loglevel";
@@ -163,45 +158,29 @@ export function ActionNameEditor(props: ActionNameEditorProps) {
 
   return (
     <ApiNameWrapper page={props.page}>
-      {props.page === "API_PANE" ? (
-        <NewEditableText
+      <div
+        style={{
+          display: "flex",
+        }}
+      >
+        <EditableText
           className="t--action-name-edit-field"
           defaultValue={currentActionConfig ? currentActionConfig.name : ""}
-          editInteractionKind={NewEditInteractionKind.SINGLE}
-          fill
+          editInteractionKind={EditInteractionKind.SINGLE}
+          errorTooltipClass="t--action-name-edit-error"
           forceDefault={forceUpdate}
-          isEditingDefault={isNew && !hideEditIcon}
-          isInvalid={isInvalidActionName}
-          onBlur={handleAPINameChange}
-          placeholder="Name of the API in camelCase"
-          savingState={
-            saveStatus.isSaving ? SavingState.STARTED : SavingState.NOT_STARTED
+          isEditingDefault={
+            props.page === "API_PANE" ? isNew && !hideEditIcon : isNew
           }
-          underline
+          isInvalid={isInvalidActionName}
+          onTextChanged={handleAPINameChange}
+          placeholder="Name of the API in camelCase"
+          type="text"
+          updating={saveStatus.isSaving}
           valueTransform={removeSpecialChars}
         />
-      ) : (
-        <div
-          style={{
-            display: "flex",
-          }}
-        >
-          <EditableText
-            className="t--action-name-edit-field"
-            defaultValue={currentActionConfig ? currentActionConfig.name : ""}
-            editInteractionKind={EditInteractionKind.SINGLE}
-            forceDefault={forceUpdate}
-            isEditingDefault={isNew}
-            isInvalid={isInvalidActionName}
-            onTextChanged={handleAPINameChange}
-            placeholder="Name of the API in camelCase"
-            type="text"
-            updating={saveStatus.isSaving}
-            valueTransform={removeSpecialChars}
-          />
-          {saveStatus.isSaving && <Spinner size={16} />}
-        </div>
-      )}
+        {saveStatus.isSaving && <Spinner size={16} />}
+      </div>
     </ApiNameWrapper>
   );
 }

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

@@ -31,6 +31,7 @@ type EditableTextProps = {
   minimal?: boolean;
   onBlur?: (value?: string) => void;
   beforeUnmount?: (value?: string) => void;
+  errorTooltipClass?: string;
 };
 
 const EditableTextWrapper = styled.div<{
@@ -84,6 +85,7 @@ export function EditableText(props: EditableTextProps) {
     className,
     defaultValue,
     editInteractionKind,
+    errorTooltipClass,
     forceDefault,
     hideEditIcon,
     isEditingDefault,
@@ -171,7 +173,11 @@ export function EditableText(props: EditableTextProps) {
         editInteractionKind === EditInteractionKind.DOUBLE ? edit : _.noop
       }
     >
-      <ErrorTooltip isOpen={!!error} message={errorMessage as string}>
+      <ErrorTooltip
+        customClass={errorTooltipClass}
+        isOpen={!!error}
+        message={errorMessage as string}
+      >
         <TextContainer isValid={!error} minimal={!!minimal}>
           <BlueprintEditableText
             className={className}

app/client/src/components/editorComponents/ErrorTooltip.tsx

@@ -11,9 +11,9 @@ const TooltipStyles = createGlobalStyle`
     }
     .bp3-popover-content {
       padding: 8px;
-      color: ${Colors.RED};
+      color: ${Colors.ERROR_RED};
       text-align: center;
-      border-radius: 4px;
+      border-radius: 0;
       text-transform: initial;
       font-weight: 500;
       font-size: 12px;
@@ -37,6 +37,7 @@ interface Props {
   isOpen: boolean;
   message: string;
   children: JSX.Element;
+  customClass?: string;
 }
 
 function ErrorTooltip(props: Props) {
@@ -48,7 +49,7 @@ function ErrorTooltip(props: Props) {
         canEscapeKeyClose
         content={props.message}
         isOpen={props.isOpen && !!props.message}
-        portalClassName="error-tooltip"
+        portalClassName={`error-tooltip ${props.customClass || ""}`}
         position="bottom"
         usePortal
       >

app/client/src/pages/Editor/APIEditor/Form.tsx

@@ -255,7 +255,6 @@ interface APIFormProps {
 type Props = APIFormProps & InjectedFormProps<Action, APIFormProps>;
 
 export const NameWrapper = styled.div`
-  width: 49%;
   display: flex;
   align-items: center;
   input {