From f1d233725f4b57551521baba9d3c7a6d6326e667 Mon Sep 17 00:00:00 2001 From: Rajat Agrawal Date: Mon, 8 May 2023 15:49:23 +0530 Subject: [PATCH] fix: Add message prompt on min field (#22977) Fixes #20235 This pull requests adds a prompt message to min/max/regex/errorMessage/required input validation fields. Also fixed css styling on the prompt message for these fields as well as additionally on Valid/ComputedValue fields. The design shared by @vasanthappsmith is attached below : ![image (1)](https://user-images.githubusercontent.com/1189106/236084717-fd899a32-1239-446c-9ee1-fd7f7c13e693.png) ## Checklist: ### Dev activity - [x ] My code follows the style guidelines of this project - [ x] I have performed a self-review of my own code - [ x] I have commented my code, particularly in hard-to-understand areas - [ x] I have made corresponding changes to the documentation - [ x] My changes generate no new warnings - [ x] 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: - [ ] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [ ] Cypress test cases have been added and approved by either SDET or manual QA - [ ] Organized project review call with relevant stakeholders after Round 1/2 of QA - [ ] Added Test Plan Approved label after reveiwing all Cypress test --- .../TableV2/TableV2_PropertyPane_spec.js | 15 ++++++++++++ app/client/src/ce/constants/messages.ts | 2 ++ .../TableInlineEditValidPropertyControl.tsx | 15 ++++++++---- .../TableInlineEditValidationControl.tsx | 23 ++++++++++++++++--- 4 files changed, 48 insertions(+), 7 deletions(-) diff --git a/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/TableV2/TableV2_PropertyPane_spec.js b/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/TableV2/TableV2_PropertyPane_spec.js index 6496e4ea21..1aff14d101 100644 --- a/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/TableV2/TableV2_PropertyPane_spec.js +++ b/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/TableV2/TableV2_PropertyPane_spec.js @@ -515,4 +515,19 @@ describe("Table Widget V2 property pane feature validation", function () { cy.backFromPropertyPanel(); cy.makeColumnEditable("orderAmount"); }); + + it("15. Verify default prompt message for min field", function () { + cy.openPropertyPane("tablewidgetv2"); + cy.makeColumnEditable("orderAmount"); + cy.editColumn("orderAmount"); + cy.changeColumnType("Number"); + propPane.UpdatePropertyFieldValue("Min", "test"); + cy.get(".t--property-control-min .t--no-binding-prompt > span").should( + "have.text", + "Access the current cell using {{currentRow.columnName}}", + ); + cy.changeColumnType("Plain Text"); + cy.backFromPropertyPanel(); + cy.makeColumnEditable("orderAmount"); + }); }); diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index d305b69ed3..afb16e97cd 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/app/client/src/ce/constants/messages.ts @@ -922,6 +922,8 @@ export const NAV_DESCRIPTION = () => `Navigate to any page, widget or file across this project.`; export const ACTION_OPERATION_DESCRIPTION = () => `Create a new Query, API or JS Object`; +export const TABLE_WIDGET_VALIDATION_ASSIST_PROMPT = () => + `Access the current cell using `; export const TRIGGER_ACTION_VALIDATION_ERROR = ( functionName: string, diff --git a/app/client/src/components/propertyControls/TableInlineEditValidPropertyControl.tsx b/app/client/src/components/propertyControls/TableInlineEditValidPropertyControl.tsx index d0740cd5dd..50ed2ddaa1 100644 --- a/app/client/src/components/propertyControls/TableInlineEditValidPropertyControl.tsx +++ b/app/client/src/components/propertyControls/TableInlineEditValidPropertyControl.tsx @@ -7,10 +7,16 @@ import { } from "widgets/TableWidgetV2/constants"; import TableInlineEditValidationControlProperty, { CurlyBraces, + StyledCode, InputText, + PromptMessage, } from "./TableInlineEditValidationControl"; import { isString } from "lodash"; import { JSToString, stringToJS } from "./utils"; +import { + createMessage, + TABLE_WIDGET_VALIDATION_ASSIST_PROMPT, +} from "@appsmith/constants/messages"; const bindingPrefix = `{{ ( @@ -78,11 +84,12 @@ class TableInlineEditValidPropertyControl extends TableInlineEditValidationContr label={label} onChange={this.onTextChange} promptMessage={ - <> - Access the current cell using {"{{"} - currentRow.columnName + + {createMessage(TABLE_WIDGET_VALIDATION_ASSIST_PROMPT)} + {"{{"} + currentRow.columnName {"}}"} - + } theme={theme} value={value} diff --git a/app/client/src/components/propertyControls/TableInlineEditValidationControl.tsx b/app/client/src/components/propertyControls/TableInlineEditValidationControl.tsx index 85aef8ac50..c7e13c6aaf 100644 --- a/app/client/src/components/propertyControls/TableInlineEditValidationControl.tsx +++ b/app/client/src/components/propertyControls/TableInlineEditValidationControl.tsx @@ -20,13 +20,22 @@ import { ORIGINAL_INDEX_KEY, PRIMARY_COLUMN_KEY_VALUE, } from "widgets/TableWidgetV2/constants"; +import { Colors } from "constants/Colors"; +import { + createMessage, + TABLE_WIDGET_VALIDATION_ASSIST_PROMPT, +} from "@appsmith/constants/messages"; -const PromptMessage = styled.span` +export const PromptMessage = styled.span` line-height: 17px; `; + +export const StyledCode = styled.span` + color: ${Colors.PRIMARY_ORANGE}; +`; + export const CurlyBraces = styled.span` - color: ${(props) => props.theme.colors.codeMirror.background.hoverState}; - background-color: #ffffff; + color: ${Colors.PRIMARY_ORANGE}; border-radius: 2px; padding: 2px; margin: 0px 2px; @@ -146,6 +155,14 @@ class TableInlineEditValidationControl extends BaseControl + {createMessage(TABLE_WIDGET_VALIDATION_ASSIST_PROMPT)} + {"{{"} + currentRow.columnName + {"}}"} + + } theme={theme} value={value} />