Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: Leaving editable tab in error state (#37981)

Browse Source
This commit is contained in:
Hetu Nandu 2024-12-06 13:23:06 +05:30 committed by GitHub
parent ba7c1588ae
commit a4502261c7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/client/src/IDE/Components/EditableName/EditableName.test.tsx
View File

@ -151,7 +151,7 @@ describe("EditableName", () => {
await userEvent.click(document.body);
expect(getByRole("tooltip").textContent).toEqual(validationError);
expect(getByRole("tooltip").textContent).toEqual("");
expect(exitEditing).toHaveBeenCalled();
expect(onNameSave).not.toHaveBeenCalledWith(invalidTitle);
@ -187,7 +187,7 @@ describe("EditableName", () => {
});
fireEvent.focusOut(inputElement);
expect(getByRole("tooltip").textContent).toEqual(validationError);
expect(getByRole("tooltip").textContent).toEqual("");
expect(exitEditing).toHaveBeenCalled();
expect(onNameSave).not.toHaveBeenCalledWith(invalidTitle);
});

16
app/client/src/IDE/Components/EditableName/EditableName.tsx
View File

@ -5,10 +5,11 @@ import React, {
useRef,
useState,
} from "react";
import { Spinner, Text, Tooltip } from "@appsmith/ads";
import { Spinner, Text as ADSText, Tooltip } from "@appsmith/ads";
import { useEventCallback, useEventListener } from "usehooks-ts";
import { usePrevious } from "@mantine/hooks";
import { useNameEditor } from "./useNameEditor";
import styled from "styled-components";
interface EditableTextProps {
name: string;
@ -29,6 +30,10 @@ interface EditableTextProps {
inputTestId?: string;
}
export const Text = styled(ADSText)`
min-width: 3ch;
`;
export const EditableName = ({
exitEditing,
icon,
@ -72,10 +77,15 @@ export const EditableName = ({
const nameError = validate(editableName);
if (editableName === name) {
// No change detected
exitWithoutSaving();
} else if (nameError === null) {
// Save the new name
exitEditing();
onNameSave(editableName);
} else {
// Exit edit mode and revert name
exitWithoutSaving();
}
}, [
editableName,
@ -119,7 +129,9 @@ export const EditableName = ({
useEventListener(
"focusout",
function handleFocusOut() {
if (isEditing) {
const input = inputRef.current;
if (input) {
attemptSave();
}
},