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

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");
+  });
 });

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,

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 <CurlyBraces>{"{{"}</CurlyBraces>
-            currentRow.columnName
+          <PromptMessage>
+            {createMessage(TABLE_WIDGET_VALIDATION_ASSIST_PROMPT)}
+            <CurlyBraces>{"{{"}</CurlyBraces>
+            <StyledCode>currentRow.columnName</StyledCode>
             <CurlyBraces>{"}}"}</CurlyBraces>
-          </>
+          </PromptMessage>
         }
         theme={theme}
         value={value}

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<TableInlineEditValida
         expected={expected}
         label={label}
         onChange={this.onTextChange}
+        promptMessage={
+          <PromptMessage>
+            {createMessage(TABLE_WIDGET_VALIDATION_ASSIST_PROMPT)}
+            <CurlyBraces>{"{{"}</CurlyBraces>
+            <StyledCode>currentRow.columnName</StyledCode>
+            <CurlyBraces>{"}}"}</CurlyBraces>
+          </PromptMessage>
+        }
         theme={theme}
         value={value}
       />