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

feat: Added use case input box in welcome tour to input custom use caes (#11171)

Browse Source
This commit is contained in:
arunvjn 2022-02-19 11:56:10 +05:30 committed by GitHub
parent 9eeb120c77
commit d27dd30415
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 27 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/client/src/ce/constants/messages.ts
View File

@ -849,6 +849,7 @@ export const WELCOME_FORM_CREATE_PASSWORD = () => "Create Password";
export const WELCOME_FORM_VERIFY_PASSWORD = () => "Verify Password";
export const WELCOME_FORM_ROLE_DROPDOWN = () => "What Role Do You Play?";
export const WELCOME_FORM_ROLE = () => "Role";
export const WELCOME_FORM_CUSTOM_USE_CASE = () => "Use case";
export const WELCOME_FORM_USE_CASE = () => "Tell Us About Your Use Case";
export const WELCOME_FORM_DATA_COLLECTION_HEADER = () =>
"Usage data preference";

1
app/client/src/constants/forms.ts
View File

@ -31,6 +31,7 @@ export const WELCOME_FORM_VERIFY_PASSWORD_FIELD_NAME = "verify_password";
export const WELCOME_FORM_ROLE_FIELD_NAME = "role";
export const WELCOME_FORM_ROLE_NAME_FIELD_NAME = "role_name";
export const WELCOME_FORM_USECASE_FIELD_NAME = "useCase";
export const WELCOME_FORM_CUSTOM_USECASE_FIELD_NAME = "custom_useCase";
export const SETTINGS_FORM_NAME = "SettingsForm";
export const WELCOME_NON_SUPER_FORM_NAME = "WelcomeNonSuperSetupForm";

9
app/client/src/pages/setup/DetailsForm.tsx
View File

@ -19,6 +19,7 @@ import {
WELCOME_FORM_ROLE_DROPDOWN,
WELCOME_FORM_ROLE,
WELCOME_FORM_USE_CASE,
WELCOME_FORM_CUSTOM_USE_CASE,
WELCOME_FORM_HEADER,
} from "@appsmith/constants/messages";
import FormTextField from "components/ads/formFields/TextField";
@ -123,6 +124,14 @@ export default function DetailsForm(
type="text"
/>
</DropdownWrapper>
{props.useCase == "other" && (
<StyledFormGroup
className="t--welcome-form-use-case-input"
label={createMessage(WELCOME_FORM_CUSTOM_USE_CASE)}
>
<FormTextField name="custom_useCase" placeholder="" type="text" />
</StyledFormGroup>
)}
<ButtonWrapper>
<Button
category={Category.tertiary}

18
app/client/src/pages/setup/SetupForm.tsx
View File

@ -14,6 +14,7 @@ import {
WELCOME_FORM_ROLE_FIELD_NAME,
WELCOME_FORM_ROLE_NAME_FIELD_NAME,
WELCOME_FORM_VERIFY_PASSWORD_FIELD_NAME,
WELCOME_FORM_CUSTOM_USECASE_FIELD_NAME,
} from "constants/forms";
import { formValueSelector, InjectedFormProps, reduxForm } from "redux-form";
import { isEmail, isStrongPassword } from "utils/formhelpers";
@ -66,6 +67,7 @@ export type DetailsFormValues = {
verifyPassword?: string;
role?: string;
useCase?: string;
custom_useCase?: string;
role_name?: string;
};
@ -99,6 +101,9 @@ const validate = (values: DetailsFormValues) => {
errors.useCase = "Please select a use case";
}
if (values.useCase === "other" && !values.custom_useCase)
errors.custom_useCase = "Please enter a use case";
return errors;
};
@ -116,7 +121,7 @@ function SetupForm(props: InjectedFormProps & DetailsFormValues) {
roleInput.type = "text";
roleInput.name = "role";
roleInput.style.display = "none";
if (props.role != "other") {
if (props.role !== "other") {
roleInput.value = props.role as string;
} else {
roleInput.value = props.role_name as string;
@ -129,8 +134,16 @@ function SetupForm(props: InjectedFormProps & DetailsFormValues) {
const useCaseInput = document.createElement("input");
useCaseInput.type = "text";
useCaseInput.name = "useCase";
useCaseInput.value = props.useCase as string;
useCaseInput.style.display = "none";
if (props.useCase !== "other") {
useCaseInput.value = props.useCase as string;
} else {
useCaseInput.value = props.custom_useCase as string;
const customUseCaseInput: HTMLInputElement = document.querySelector(
`[name="custom_useCase"]`,
) as HTMLInputElement;
if (customUseCaseInput) customUseCaseInput.remove();
}
form.appendChild(useCaseInput);
return true;
};
@ -172,6 +185,7 @@ export default connect((state: AppState) => {
role: selector(state, WELCOME_FORM_ROLE_FIELD_NAME),
role_name: selector(state, WELCOME_FORM_ROLE_NAME_FIELD_NAME),
useCase: selector(state, WELCOME_FORM_USECASE_FIELD_NAME),
custom_useCase: selector(state, WELCOME_FORM_CUSTOM_USECASE_FIELD_NAME),
};
}, null)(
reduxForm<DetailsFormValues>({