From bb26d025a44bc7cb2f10eca048722d2809e3d05d Mon Sep 17 00:00:00 2001 From: arunvjn <32433245+arunvjn@users.noreply.github.com> Date: Tue, 19 Sep 2023 17:17:49 +0530 Subject: [PATCH] fix: remove slash commands from API url field (#27432) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description #27070 accidentally introduced slash commands in API URL field. This could lead to a bad UX since `/` is predominant in URLs. This PR removes slash commands from the URL field. #### PR fixes following issue(s) Fixes #27425 > #### Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video > > #### Type of change - Bug fix (non-breaking change which fixes an issue) > > ## Testing > #### How Has This Been Tested? - [x] Manual > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed --- .../editorComponents/CodeEditor/index.tsx | 9 ++------- .../propertyControls/ChartDataControl.tsx | 14 ++++++++++++-- .../propertyControls/CodeEditorControl.tsx | 8 +++++++- .../ComputeTablePropertyControl.tsx | 8 +++++++- .../propertyControls/InputTextControl.tsx | 8 +++++++- .../propertyControls/JSONFormComputeControl.tsx | 8 +++++++- .../MenuButtonDynamicItemsControl.tsx | 8 +++++++- .../propertyControls/SelectDefaultValueControl.tsx | 8 +++++++- .../propertyControls/TableComputeValue.tsx | 8 +++++++- .../TableInlineEditValidationControl.tsx | 8 +++++++- .../propertyControls/WrappedCodeEditorControl.tsx | 8 +++++++- 11 files changed, 77 insertions(+), 18 deletions(-) diff --git a/app/client/src/components/editorComponents/CodeEditor/index.tsx b/app/client/src/components/editorComponents/CodeEditor/index.tsx index 93c6053b3a..09291f81cf 100644 --- a/app/client/src/components/editorComponents/CodeEditor/index.tsx +++ b/app/client/src/components/editorComponents/CodeEditor/index.tsx @@ -274,15 +274,10 @@ const getEditorIdentifier = (props: EditorProps): string => { }; class CodeEditor extends Component { - hintHelper: HintHelper[] = [ - bindingHintHelper, - slashCommandHintHelper, - sqlHint.hinter, - ]; static defaultProps = { marking: [entityMarker], lineCommentString: "//", - hinting: [], + hinting: [bindingHintHelper, slashCommandHintHelper, sqlHint.hinter], }; // this is the higlighted element for any highlighted text in the codemirror highlightedUrlElement: HTMLElement | undefined; @@ -471,7 +466,7 @@ class CodeEditor extends Component { this.hinters = CodeEditor.startAutocomplete( editor, // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - [...this.hintHelper, ...this.props.hinting!], // ! since defaultProps are set + this.props.hinting!, // ! since defaultProps are set this.props.dynamicData, this.props.entitiesForNavigation, // send navigation here ); diff --git a/app/client/src/components/propertyControls/ChartDataControl.tsx b/app/client/src/components/propertyControls/ChartDataControl.tsx index 771a4a211c..d189b92f40 100644 --- a/app/client/src/components/propertyControls/ChartDataControl.tsx +++ b/app/client/src/components/propertyControls/ChartDataControl.tsx @@ -18,6 +18,8 @@ import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType"; import LazyCodeEditor from "components/editorComponents/LazyCodeEditor"; import ColorPickerComponent from "./ColorPickerComponentV2"; import { assistiveBindingHinter } from "components/editorComponents/CodeEditor/assistiveBindingHinter"; +import { bindingHintHelper } from "components/editorComponents/CodeEditor/hintHelpers"; +import { slashCommandHintHelper } from "components/editorComponents/CodeEditor/commandsHelper"; const Wrapper = styled.div` background-color: var(--ads-v2-color-bg-subtle); @@ -145,7 +147,11 @@ function DataControlComponent(props: RenderComponentProps) { dataTreePath={`${dataTreePath}.seriesName`} evaluatedValue={evaluated?.seriesName} expected={expectedSeriesName} - hinting={[assistiveBindingHinter]} + hinting={[ + bindingHintHelper, + assistiveBindingHinter, + slashCommandHintHelper, + ]} input={{ value: item.seriesName, onChange: ( @@ -196,7 +202,11 @@ function DataControlComponent(props: RenderComponentProps) { dataTreePath={`${dataTreePath}.data`} evaluatedValue={evaluated?.data} expected={expectedSeriesData} - hinting={[assistiveBindingHinter]} + hinting={[ + bindingHintHelper, + assistiveBindingHinter, + slashCommandHintHelper, + ]} input={{ value: item.data, onChange: ( diff --git a/app/client/src/components/propertyControls/CodeEditorControl.tsx b/app/client/src/components/propertyControls/CodeEditorControl.tsx index 9d57db24ba..23c805039f 100644 --- a/app/client/src/components/propertyControls/CodeEditorControl.tsx +++ b/app/client/src/components/propertyControls/CodeEditorControl.tsx @@ -10,6 +10,8 @@ import { } from "components/editorComponents/CodeEditor/EditorConfig"; import LazyCodeEditor from "components/editorComponents/LazyCodeEditor"; import { assistiveBindingHinter } from "components/editorComponents/CodeEditor/assistiveBindingHinter"; +import { bindingHintHelper } from "components/editorComponents/CodeEditor/hintHelpers"; +import { slashCommandHintHelper } from "components/editorComponents/CodeEditor/commandsHelper"; class CodeEditorControl extends BaseControl { render() { @@ -30,7 +32,11 @@ class CodeEditorControl extends BaseControl { return ( { const prefixTemplate = `{{ ((options, serverSideFiltering) => ( `; @@ -74,7 +76,11 @@ function InputText(props: InputTextProp) { dataTreePath={dataTreePath} evaluatedValue={evaluatedValue} expected={expected} - hinting={[assistiveBindingHinter]} + hinting={[ + bindingHintHelper, + assistiveBindingHinter, + slashCommandHintHelper, + ]} input={{ value: value, onChange: onChange, diff --git a/app/client/src/components/propertyControls/TableComputeValue.tsx b/app/client/src/components/propertyControls/TableComputeValue.tsx index 21494007f4..620f6658e5 100644 --- a/app/client/src/components/propertyControls/TableComputeValue.tsx +++ b/app/client/src/components/propertyControls/TableComputeValue.tsx @@ -17,6 +17,8 @@ import { JSToString, stringToJS } from "./utils"; import type { AdditionalDynamicDataTree } from "utils/autocomplete/customTreeTypeDefCreator"; import LazyCodeEditor from "components/editorComponents/LazyCodeEditor"; import { assistiveBindingHinter } from "components/editorComponents/CodeEditor/assistiveBindingHinter"; +import { bindingHintHelper } from "components/editorComponents/CodeEditor/hintHelpers"; +import { slashCommandHintHelper } from "components/editorComponents/CodeEditor/commandsHelper"; const PromptMessage = styled.span` line-height: 17px; @@ -68,7 +70,11 @@ function InputText(props: InputTextProp) { dataTreePath={dataTreePath} evaluatedValue={evaluatedValue} expected={expected} - hinting={[assistiveBindingHinter]} + hinting={[ + bindingHintHelper, + assistiveBindingHinter, + slashCommandHintHelper, + ]} input={{ value: value, onChange: onChange, diff --git a/app/client/src/components/propertyControls/TableInlineEditValidationControl.tsx b/app/client/src/components/propertyControls/TableInlineEditValidationControl.tsx index 5fc7d12ce3..4cae9ff9ca 100644 --- a/app/client/src/components/propertyControls/TableInlineEditValidationControl.tsx +++ b/app/client/src/components/propertyControls/TableInlineEditValidationControl.tsx @@ -25,6 +25,8 @@ import { TABLE_WIDGET_VALIDATION_ASSIST_PROMPT, } from "@appsmith/constants/messages"; import { assistiveBindingHinter } from "components/editorComponents/CodeEditor/assistiveBindingHinter"; +import { bindingHintHelper } from "components/editorComponents/CodeEditor/hintHelpers"; +import { slashCommandHintHelper } from "components/editorComponents/CodeEditor/commandsHelper"; export const PromptMessage = styled.span` line-height: 17px; @@ -82,7 +84,11 @@ export function InputText(props: InputTextProp) { dataTreePath={dataTreePath} evaluatedValue={evaluatedValue} expected={expected} - hinting={[assistiveBindingHinter]} + hinting={[ + bindingHintHelper, + assistiveBindingHinter, + slashCommandHintHelper, + ]} input={{ value: value, onChange: onChange, diff --git a/app/client/src/components/propertyControls/WrappedCodeEditorControl.tsx b/app/client/src/components/propertyControls/WrappedCodeEditorControl.tsx index da2733df07..7969a8d742 100644 --- a/app/client/src/components/propertyControls/WrappedCodeEditorControl.tsx +++ b/app/client/src/components/propertyControls/WrappedCodeEditorControl.tsx @@ -16,6 +16,8 @@ import type { AdditionalDynamicDataTree } from "utils/autocomplete/customTreeTyp import LazyCodeEditor from "components/editorComponents/LazyCodeEditor"; import type { WidgetProps } from "widgets/BaseWidget"; import { assistiveBindingHinter } from "components/editorComponents/CodeEditor/assistiveBindingHinter"; +import { bindingHintHelper } from "components/editorComponents/CodeEditor/hintHelpers"; +import { slashCommandHintHelper } from "components/editorComponents/CodeEditor/commandsHelper"; type InputTextProp = { label: string; @@ -48,7 +50,11 @@ function InputText(props: InputTextProp) { dataTreePath={dataTreePath} evaluatedValue={evaluatedValue} expected={expected} - hinting={[assistiveBindingHinter]} + hinting={[ + bindingHintHelper, + assistiveBindingHinter, + slashCommandHintHelper, + ]} input={{ value: value, onChange: onChange,