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

fix: change recaptcha key and type and add suggestion for recaptchaToken (#9464)

Browse Source 
* Change recaptcha key and type and add suggestion for recaptchatoken

* Add recaptchaToken property as target for auto completion cypress tests

* Added cypress test to validate recaptcha v2 can be selected in button widget property pane

Co-authored-by: Arpit Mohan <arpit@appsmith.com>
This commit is contained in:
Vicky Bansal 2022-01-02 21:57:39 +05:30 committed by GitHub
parent 023949626d
commit c9ec218b79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 103 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Autocomplete_spec.js
View File

@ -110,6 +110,9 @@ describe("Autocomplete using slash command and mustache tests", function() {
// validates autocomplete binding on entering {{}} in text field
cy.get(`${dynamicInputLocators.hints} li`)
.eq(1)
.should("have.text", "Button1.recaptchaToken");
cy.get(`${dynamicInputLocators.hints} li`)
.eq(2)
.should("have.text", "Button1.text");
});
});

7
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Button_spec.js
View File

@ -149,6 +149,13 @@ describe("Button Widget Functionality", function() {
cy.get(publishPage.buttonWidget).should("be.visible");
});
it("Button-Check recaptcha type can be selected", function() {
cy.selectDropdownValue(commonlocators.recaptchaVersion, "reCAPTCHA v2");
cy.get(commonlocators.recaptchaVersion)
.last()
.should("have.text", "reCAPTCHA v2");
});
it("Button-Copy Verification", function() {
//Copy button and verify all properties
cy.copyWidget("buttonwidget", widgetsPage.buttonWidget);

1
app/client/cypress/locators/commonlocators.json
View File

@ -110,6 +110,7 @@
"filePickerUploadButton": ".uppy-StatusBar-actionBtn--upload",
"filePickerOnFilesSelected": ".t--property-control-onfilesselected",
"dataType": ".t--property-control-datatype .bp3-popover-target",
"recaptchaVersion": ".t--property-control-googlerecaptchaversion .bp3-popover-target",
"evaluateMsg": ".t--evaluatedPopup-error",
"globalSearchModal": ".t--global-search-modal",
"globalSearchInput": ".t--global-search-input",

6
app/client/src/components/constants.ts
View File

@ -66,6 +66,12 @@ export enum ButtonVariantTypes {
}
export type ButtonVariant = keyof typeof ButtonVariantTypes;
export enum RecaptchaTypes {
V3 = "V3",
V2 = "V2",
}
export type RecaptchaType = keyof typeof RecaptchaTypes;
export enum CheckboxGroupAlignmentTypes {
START = "flex-start",
END = "flex-end",

2
app/client/src/constants/WidgetConstants.tsx
View File

@ -69,7 +69,7 @@ export const layoutConfigurations: LayoutConfigurations = {
FLUID: { minWidth: -1, maxWidth: -1 },
};
export const LATEST_PAGE_VERSION = 48;
export const LATEST_PAGE_VERSION = 49;
export const GridDefaults = {
DEFAULT_CELL_SIZE: 1,

6
app/client/src/utils/DSLMigrations.ts
View File

@ -44,6 +44,7 @@ import { migrateResizableModalWidgetProperties } from "./migrations/ModalWidget"
import { migrateCheckboxGroupWidgetInlineProperty } from "./migrations/CheckboxGroupWidget";
import { migrateMapWidgetIsClickedMarkerCentered } from "./migrations/MapWidget";
import { DSLWidget } from "widgets/constants";
import { migrateRecaptchaType } from "./migrations/ButtonWidgetMigrations";
/**
* adds logBlackList key for all list widget children
@ -996,6 +997,11 @@ export const transformDSL = (
if (currentDSL.version === 47) {
currentDSL = migrateTableWidgetNumericColumnName(currentDSL);
currentDSL.version = 48;
}
if (currentDSL.version === 48) {
currentDSL = migrateRecaptchaType(currentDSL);
currentDSL.version = LATEST_PAGE_VERSION;
}

2
app/client/src/utils/autocomplete/EntityDefinitions.ts
View File

@ -203,6 +203,7 @@ export const entityDefinitions: Record<string, unknown> = {
isVisible: isVisible,
text: "string",
isDisabled: "bool",
recaptchaToken: "string",
},
DATE_PICKER_WIDGET: {
"!doc":
@ -283,6 +284,7 @@ export const entityDefinitions: Record<string, unknown> = {
isVisible: isVisible,
text: "string",
isDisabled: "bool",
recaptchaToken: "string",
},
MAP_WIDGET: {
isVisible: isVisible,

21
app/client/src/utils/migrations/ButtonWidgetMigrations.ts Normal file
View File

@ -0,0 +1,21 @@
import { WidgetProps } from "widgets/BaseWidget";
import { DSLWidget } from "widgets/constants";
import { RecaptchaTypes } from "components/constants";
export const migrateRecaptchaType = (currentDSL: DSLWidget): DSLWidget => {
currentDSL.children = currentDSL.children?.map((child: WidgetProps) => {
if (child.type === "BUTTON_WIDGET" || child.type === "FORM_BUTTON_WIDGET") {
const recaptchaV2 = child.recaptchaV2;
if (recaptchaV2) {
child.recaptchaType = RecaptchaTypes.V2;
} else {
child.recaptchaType = RecaptchaTypes.V3;
}
delete child.recaptchaV2;
} else if (child.children && child.children.length > 0) {
child = migrateRecaptchaType(child);
}
return child;
});
return currentDSL;
};

12
app/client/src/widgets/ButtonWidget/component/index.tsx
View File

@ -32,6 +32,8 @@ import {
ButtonBorderRadiusTypes,
ButtonVariant,
ButtonVariantTypes,
RecaptchaType,
RecaptchaTypes,
ButtonPlacement,
} from "components/constants";
import {
@ -268,7 +270,7 @@ interface RecaptchaProps {
googleRecaptchaKey?: string;
clickWithRecaptcha: (token: string) => void;
handleRecaptchaV2Loading?: (isLoading: boolean) => void;
recaptchaV2?: boolean;
recaptchaType?: RecaptchaType;
}
interface ButtonComponentProps extends ComponentProps {
@ -294,7 +296,7 @@ function RecaptchaV2Component(
props: {
children: any;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
recaptchaV2?: boolean;
recaptchaType?: RecaptchaType;
handleError: (event: React.MouseEvent<HTMLElement>, error: string) => void;
} & RecaptchaProps,
) {
@ -343,7 +345,7 @@ function RecaptchaV3Component(
props: {
children: any;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
recaptchaV2?: boolean;
recaptchaType?: RecaptchaType;
handleError: (event: React.MouseEvent<HTMLElement>, error: string) => void;
} & RecaptchaProps,
) {
@ -410,7 +412,7 @@ function BtnWrapper(
});
props.onClick && props.onClick(event);
};
if (props.recaptchaV2) {
if (props.recaptchaType === RecaptchaTypes.V2) {
return <RecaptchaV2Component {...props} handleError={handleError} />;
} else {
return <RecaptchaV3Component {...props} handleError={handleError} />;
@ -426,7 +428,7 @@ function ButtonComponent(props: ButtonComponentProps & RecaptchaProps) {
googleRecaptchaKey={props.googleRecaptchaKey}
handleRecaptchaV2Loading={props.handleRecaptchaV2Loading}
onClick={props.onClick}
recaptchaV2={props.recaptchaV2}
recaptchaType={props.recaptchaType}
>
<ButtonContainer disabled={props.isDisabled}>
<BaseButton

8
app/client/src/widgets/ButtonWidget/index.ts
View File

@ -2,7 +2,11 @@ import Widget from "./widget";
import IconSVG from "./icon.svg";
import { GRID_DENSITY_MIGRATION_V1 } from "widgets/constants";
import { Colors } from "constants/Colors";
import { ButtonPlacementTypes, ButtonVariantTypes } from "components/constants";
import {
ButtonPlacementTypes,
ButtonVariantTypes,
RecaptchaTypes,
} from "components/constants";
export const CONFIG = {
type: Widget.getWidgetType(),
@ -21,7 +25,7 @@ export const CONFIG = {
isDisabled: false,
isVisible: true,
isDefaultClickDisabled: true,
recaptchaV2: false,
recaptchaType: RecaptchaTypes.V3,
version: 1,
},
properties: {

20
app/client/src/widgets/ButtonWidget/widget/index.tsx
View File

@ -13,6 +13,8 @@ import {
ButtonBorderRadiusTypes,
ButtonVariant,
ButtonVariantTypes,
RecaptchaTypes,
RecaptchaType,
ButtonPlacement,
ButtonPlacementTypes,
} from "components/constants";
@ -65,23 +67,29 @@ class ButtonWidget extends BaseWidget<ButtonWidgetProps, ButtonWidgetState> {
validation: { type: ValidationTypes.TEXT },
},
{
propertyName: "recaptchaV2",
propertyName: "recaptchaType",
label: "Google reCAPTCHA Version",
controlType: "DROP_DOWN",
helpText: "Select reCAPTCHA version",
options: [
{
label: "reCAPTCHA v3",
value: false,
value: RecaptchaTypes.V3,
},
{
label: "reCAPTCHA v2",
value: true,
value: RecaptchaTypes.V2,
},
],
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.BOOLEAN },
validation: {
type: ValidationTypes.TEXT,
params: {
allowedValues: [RecaptchaTypes.V3, RecaptchaTypes.V2],
default: RecaptchaTypes.V3,
},
},
},
{
propertyName: "isVisible",
@ -378,7 +386,7 @@ class ButtonWidget extends BaseWidget<ButtonWidgetProps, ButtonWidgetState> {
key={this.props.widgetId}
onClick={!this.props.isDisabled ? this.onButtonClickBound : undefined}
placement={this.props.placement}
recaptchaV2={this.props.recaptchaV2}
recaptchaType={this.props.recaptchaType}
text={this.props.text}
tooltip={this.props.tooltip}
type={this.props.buttonType || ButtonType.BUTTON}
@ -398,7 +406,7 @@ export interface ButtonWidgetProps extends WidgetProps {
onClick?: string;
isDisabled?: boolean;
isVisible?: boolean;
recaptchaV2?: boolean;
recaptchaType?: RecaptchaType;
buttonType?: ButtonType;
googleRecaptchaKey?: string;
buttonVariant?: ButtonVariant;

3
app/client/src/widgets/FormButtonWidget/index.ts
View File

@ -1,6 +1,7 @@
import Widget from "./widget";
import IconSVG from "./icon.svg";
import { GRID_DENSITY_MIGRATION_V1 } from "widgets/constants";
import { RecaptchaTypes } from "components/constants";
export const CONFIG = {
type: Widget.getWidgetType(),
@ -14,7 +15,7 @@ export const CONFIG = {
widgetName: "FormButton",
text: "Submit",
isDefaultClickDisabled: true,
recaptchaV2: false,
recaptchaType: RecaptchaTypes.V3,
version: 1,
animateLoading: true,
},

31
app/client/src/widgets/FormButtonWidget/widget/index.tsx
View File

@ -12,6 +12,8 @@ import {
ButtonBorderRadius,
ButtonBoxShadow,
ButtonVariant,
RecaptchaType,
RecaptchaTypes,
} from "components/constants";
import { IconName } from "@blueprintjs/icons";
import { Alignment } from "@blueprintjs/core";
@ -100,14 +102,29 @@ class FormButtonWidget extends ButtonWidget {
validation: { type: ValidationTypes.TEXT },
},
{
propertyName: "recaptchaV2",
label: "Google reCAPTCHA v2",
controlType: "SWITCH",
helpText: "Use reCAPTCHA v2",
isJSConvertible: true,
propertyName: "recaptchaType",
label: "Google reCAPTCHA Version",
controlType: "DROP_DOWN",
helpText: "Select reCAPTCHA version",
options: [
{
label: "reCAPTCHA v3",
value: RecaptchaTypes.V3,
},
{
label: "reCAPTCHA v2",
value: RecaptchaTypes.V2,
},
],
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.BOOLEAN },
validation: {
type: ValidationTypes.TEXT,
params: {
allowedValues: [RecaptchaTypes.V3, RecaptchaTypes.V2],
default: RecaptchaTypes.V3,
},
},
},
],
});
@ -188,7 +205,7 @@ export interface FormButtonWidgetProps extends WidgetProps {
onReset?: () => void;
disabledWhenInvalid?: boolean;
googleRecaptchaKey?: string;
recaptchaV2?: boolean;
recaptchaType: RecaptchaType;
buttonVariant?: ButtonVariant;
buttonColor?: string;
borderRadius?: ButtonBorderRadius;

6
app/client/src/widgets/FormWidget/index.ts
View File

@ -1,7 +1,7 @@
import Widget from "./widget";
import IconSVG from "./icon.svg";
import { GRID_DENSITY_MIGRATION_V1 } from "widgets/constants";
import { ButtonVariantTypes } from "components/constants";
import { ButtonVariantTypes, RecaptchaTypes } from "components/constants";
import { Colors } from "constants/Colors";
export const CONFIG = {
@ -59,7 +59,7 @@ export const CONFIG = {
buttonColor: Colors.GREEN,
disabledWhenInvalid: true,
resetFormOnClick: true,
recaptchaV2: false,
recaptchaType: RecaptchaTypes.V3,
version: 1,
},
},
@ -79,7 +79,7 @@ export const CONFIG = {
buttonColor: Colors.GREEN,
disabledWhenInvalid: false,
resetFormOnClick: true,
recaptchaV2: false,
recaptchaType: RecaptchaTypes.V3,
version: 1,
},
},