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

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

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