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

[Fix] Fix mouse click for the autocomplete at the api pane (#5929)

Browse Source 
* Set editor height in compact mode when not in focus
This commit is contained in:
Rishabh Saxena 2021-07-19 17:36:04 +05:30 committed by GitHub
parent dc012be1de
commit 6947f4b7a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 13 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/cypress/locators/apiWidgetslocator.json
View File

@ -25,7 +25,7 @@
"marketPlaceapi": ".t--eachProviderCard p",
"addPageButton": ".t--addToPageBtn",
"apidocumentaionLink": ".t--apiDocumentationLink",
"postbody": "(//div[contains(@class,'CodeMirror-wrap')]//textarea)[1]",
"postbody": "(//div[contains(@class,'CodeMirror-wrap')]//textarea)[2]",
"paginationTab": "li:contains('Pagination')",
"apiInputTab": "li:contains('API Input')",
"paginationOption": ".t--apiFormPaginationType div>input",

17
app/client/src/components/editorComponents/CodeEditor/index.tsx
View File

@ -168,7 +168,7 @@ class CodeEditor extends Component<Props, State> {
tabSize: 2,
autoCloseBrackets: true,
indentWithTabs: this.props.tabBehaviour === TabBehaviour.INDENT,
lineWrapping: this.props.size !== EditorSize.COMPACT,
lineWrapping: true,
lineNumbers: this.props.showLineNumbers,
addModeClass: true,
matchBrackets: false,
@ -261,9 +261,7 @@ class CodeEditor extends Component<Props, State> {
// Safe update of value of the editor when value updated outside the editor
const inputValue = getInputValue(this.props.input.value);
if (!!inputValue || inputValue === "") {
if (this.props.size === EditorSize.COMPACT) {
this.editor.setValue(removeNewLineChars(inputValue));
} else if (inputValue !== editorValue) {
if (inputValue !== editorValue) {
this.editor.setValue(inputValue);
}
}
@ -327,14 +325,6 @@ class CodeEditor extends Component<Props, State> {
handleEditorFocus = () => {
this.setState({ isFocused: true });
if (this.props.size === EditorSize.COMPACT) {
this.editor.operation(() => {
const inputValue = this.props.input.value;
this.editor.setOption("lineWrapping", true);
this.editor.setValue(inputValue);
this.editor.setCursor(inputValue.length);
});
}
if (this.editor.getValue().length === 0)
this.handleAutocompleteVisibility(this.editor);
};
@ -342,9 +332,6 @@ class CodeEditor extends Component<Props, State> {
handleEditorBlur = () => {
this.handleChange();
this.setState({ isFocused: false });
if (this.props.size === EditorSize.COMPACT) {
this.editor.setOption("lineWrapping", false);
}
this.editor.setOption("matchBrackets", false);
};

8
app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
View File

@ -243,6 +243,14 @@ export const EditorWrapper = styled.div<{
position: relative;
`}
${(props) => (props.isFocused ? `z-index: 3;` : `z-index: 0;`)}
${(props) => {
let height = props.height || "auto";
if (props.size === EditorSize.COMPACT && !props.isFocused) {
height = props.height || "32px";
}
return `height: ${height}`;
}}
}
`;

4
app/client/src/components/formControls/DynamicInputTextControl.test.tsx
View File

@ -38,9 +38,9 @@ describe("DynamicInputTextControl", () => {
{},
);
const input = screen.getAllByText("My test value")[0];
userEvent.type(input, "New text");
waitFor(async () => {
const input = screen.getAllByText("My test value")[0];
userEvent.type(input, "New text");
await expect(screen.getAllByText("New text")).toHaveLength(2);
await expect(screen.findByText("My test value")).toBeNull();
});