From ab8e4ba146e7d45e4840cc409164e771a952059e Mon Sep 17 00:00:00 2001 From: sneha122 Date: Fri, 1 Dec 2023 17:16:30 +0530 Subject: [PATCH] feat: onboarding start with data cancel cta (#29228) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description This PR adds datasource cancel functionality during onboarding. When a user selects start with data flow, and select a plugin, on datasource form we can see cancel CTA beside save. On cancel user will be taken back to plugins page. #### PR fixes following issue(s) Fixes #29198 #### 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 - New feature (non-breaking change which adds functionality) > > > ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [x] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress > > #### 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 - [x] 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 - [ ] New and existing unit tests pass locally with my changes - [x] 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 --------- Co-authored-by: “sneha122” <“sneha@appsmith.com”> --- app/client/src/ce/utils/analyticsUtilTypes.ts | 3 ++- .../pages/Editor/DataSourceEditor/index.tsx | 1 + .../Editor/SaaSEditor/DatasourceForm.tsx | 2 ++ .../src/pages/common/datasourceAuth/index.tsx | 23 ++++++++++++++----- 4 files changed, 22 insertions(+), 7 deletions(-) diff --git a/app/client/src/ce/utils/analyticsUtilTypes.ts b/app/client/src/ce/utils/analyticsUtilTypes.ts index f4f32cc9f3..de18603225 100644 --- a/app/client/src/ce/utils/analyticsUtilTypes.ts +++ b/app/client/src/ce/utils/analyticsUtilTypes.ts @@ -360,7 +360,8 @@ export type ONBOARDING_FLOW_EVENTS = | "ONBOARDING_FLOW_CLICK_BACK_BUTTON_CREATE_NEW_APP_PAGE" | "ONBOARDING_CREATE_APP_FLOW" | "ONBOARDING_FLOW_CLICK_BACK_BUTTON_START_FROM_DATA_PAGE" - | "ONBOARDING_FLOW_CLICK_BACK_BUTTON_DATASOURCE_FORM_PAGE"; + | "ONBOARDING_FLOW_CLICK_BACK_BUTTON_DATASOURCE_FORM_PAGE" + | "ONBOARDING_FLOW_DATASOURCE_FORM_CANCEL_CLICK"; export type DATASOURCE_SCHEMA_EVENTS = | "DATASOURCE_SCHEMA_SEARCH" diff --git a/app/client/src/pages/Editor/DataSourceEditor/index.tsx b/app/client/src/pages/Editor/DataSourceEditor/index.tsx index 3f91173721..a1575817a2 100644 --- a/app/client/src/pages/Editor/DataSourceEditor/index.tsx +++ b/app/client/src/pages/Editor/DataSourceEditor/index.tsx @@ -1016,6 +1016,7 @@ class DatasourceEditorRouter extends React.Component { isFormDirty={this.props.isFormDirty} isInsideReconnectModal={isInsideReconnectModal} isInvalid={this.validateForm()} + isOnboardingFlow={isOnboardingFlow} isSaving={isSaving} isTesting={isTesting} onCancel={() => this.onCancel()} diff --git a/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx b/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx index 6d0990d96e..35ee300b3a 100644 --- a/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx +++ b/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx @@ -560,6 +560,7 @@ class DatasourceSaaSEditor extends JSONtoForm { hiddenHeader, isDeleting, isInsideReconnectModal, + isOnboardingFlow, isPluginAuthFailed, isPluginAuthorized, isSaving, @@ -685,6 +686,7 @@ class DatasourceSaaSEditor extends JSONtoForm { getSanitizedFormData={memoize(this.getSanitizedData)} isInsideReconnectModal={isInsideReconnectModal} isInvalid={validate(this.props.requiredFields, formData)} + isOnboardingFlow={isOnboardingFlow} isSaving={isSaving} isTesting={isTesting} onCancel={() => this.onCancel()} diff --git a/app/client/src/pages/common/datasourceAuth/index.tsx b/app/client/src/pages/common/datasourceAuth/index.tsx index 8e806a6e76..b4758d4a75 100644 --- a/app/client/src/pages/common/datasourceAuth/index.tsx +++ b/app/client/src/pages/common/datasourceAuth/index.tsx @@ -38,6 +38,7 @@ import { getCurrentEnvironmentDetails } from "@appsmith/selectors/environmentSel import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag"; import { getHasManageDatasourcePermission } from "@appsmith/utils/BusinessFeatures/permissionPageHelpers"; +import { resetCurrentPluginIdForCreateNewApp } from "actions/onboardingActions"; interface Props { datasource: Datasource; @@ -65,6 +66,7 @@ interface Props { isFormDirty?: boolean; scopeValue?: string; onCancel: () => void; + isOnboardingFlow?: boolean; } export type DatasourceFormButtonTypes = Record; @@ -137,6 +139,7 @@ function DatasourceAuth({ isFormDirty, isInsideReconnectModal, isInvalid, + isOnboardingFlow, isSaving, isTesting, onCancel, @@ -343,12 +346,20 @@ function DatasourceAuth({ kind="tertiary" onClick={() => { if (createMode) { - const URL = integrationEditorURL({ - pageId, - selectedTab: INTEGRATION_TABS.NEW, - params: getQueryParams(), - }); - history.push(URL); + if (!!isOnboardingFlow) { + // Going back from start from data screen + AnalyticsUtil.logEvent( + "ONBOARDING_FLOW_DATASOURCE_FORM_CANCEL_CLICK", + ); + dispatch(resetCurrentPluginIdForCreateNewApp()); + } else { + const URL = integrationEditorURL({ + pageId, + selectedTab: INTEGRATION_TABS.NEW, + params: getQueryParams(), + }); + history.push(URL); + } } else { !!onCancel && onCancel(); }