From 34227fb782efb1a2c568800002026f3708a2cf6a Mon Sep 17 00:00:00 2001 From: Nilansh Bansal Date: Thu, 9 Nov 2023 18:30:24 +0530 Subject: [PATCH] feat: added ui option for start with data (#28760) ## Description > This PR adds a new ui card element for start with data in the onboarding page. #### PR fixes following issue(s) Fixes #28551 #### Media > SCR-20231109-jq1 #### 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 - [ ] 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: Aman Agarwal --- .../src/assets/images/start-from-scratch.svg | 40 --- .../src/assets/images/start-from-template.svg | 305 ------------------ app/client/src/ce/constants/messages.ts | 3 + .../Applications/CreateNewAppsOption.tsx | 31 +- 4 files changed, 30 insertions(+), 349 deletions(-) delete mode 100644 app/client/src/assets/images/start-from-scratch.svg delete mode 100644 app/client/src/assets/images/start-from-template.svg diff --git a/app/client/src/assets/images/start-from-scratch.svg b/app/client/src/assets/images/start-from-scratch.svg deleted file mode 100644 index 5814d9d9ad..0000000000 --- a/app/client/src/assets/images/start-from-scratch.svg +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/app/client/src/assets/images/start-from-template.svg b/app/client/src/assets/images/start-from-template.svg deleted file mode 100644 index d5457ee089..0000000000 --- a/app/client/src/assets/images/start-from-template.svg +++ /dev/null @@ -1,305 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index e3ff4403b1..386dad2822 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/app/client/src/ce/constants/messages.ts @@ -2249,3 +2249,6 @@ export const START_FROM_TEMPLATE_SUBTITLE = () => export const START_FROM_SCRATCH_TITLE = () => "Start from scratch"; export const START_FROM_SCRATCH_SUBTITLE = () => "Create an app from the ground up. Design every detail of your app on a blank canvas."; +export const START_WITH_DATA_TITLE = () => "Start with data"; +export const START_WITH_DATA_SUBTITLE = () => + "Get started with connecting your data, and easily craft a functional application."; diff --git a/app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx b/app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx index 83536b96c4..36a2d43a67 100644 --- a/app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx +++ b/app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx @@ -24,12 +24,12 @@ import { START_FROM_SCRATCH_TITLE, START_FROM_TEMPLATE_SUBTITLE, START_FROM_TEMPLATE_TITLE, + START_WITH_DATA_TITLE, + START_WITH_DATA_SUBTITLE, createMessage, } from "@appsmith/constants/messages"; import Filters from "pages/Templates/Filters"; import { isEmpty } from "lodash"; -import StartScratch from "assets/images/start-from-scratch.svg"; -import StartTemplate from "assets/images/start-from-template.svg"; import AnalyticsUtil from "utils/AnalyticsUtil"; import { TemplateView } from "pages/Templates/TemplateView"; import { @@ -38,6 +38,10 @@ import { } from "actions/onboardingActions"; import { getApplicationByIdFromWorkspaces } from "@appsmith/selectors/applicationSelectors"; import urlBuilder from "@appsmith/entities/URLRedirect/URLAssembly"; +import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; +import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag"; +import { ASSETS_CDN_URL } from "constants/ThirdPartyConstants"; +import { getAssetUrl } from "@appsmith/utils/airgapHelpers"; const SectionWrapper = styled.div` display: flex; @@ -90,12 +94,15 @@ const OptionWrapper = styled.div` flex-direction: column; justify-content: center; flex-grow: 1; + padding: var(--ads-v2-spaces-7) 0; `; const CardsWrapper = styled.div` display: flex; gap: 16px; margin-top: 48px; + flex-wrap: wrap; + justify-content: center; `; const CardContainer = styled.div` @@ -155,6 +162,10 @@ const CreateNewAppsOption = ({ currentApplicationIdForCreateNewApp, ), ); + const isEnabledForStartWithData = useFeatureFlag( + FEATURE_FLAG.ab_onboarding_flow_start_with_data_dev_only_enabled, + ); + const dispatch = useDispatch(); const onClickStartFromTemplate = () => { AnalyticsUtil.logEvent("CREATE_APP_FROM_TEMPLATE"); @@ -181,6 +192,8 @@ const CreateNewAppsOption = ({ } }; + const onClickStartWithData = () => {}; + const goBackFromTemplate = () => { setUseTemplate(false); }; @@ -276,20 +289,30 @@ const CreateNewAppsOption = ({ const selectionOptions: CardProps[] = [ { onClick: onClickStartFromScratch, - src: StartScratch, + src: getAssetUrl(`${ASSETS_CDN_URL}/Start-from-scratch.png`), subTitle: createMessage(START_FROM_SCRATCH_SUBTITLE), testid: "t--start-from-scratch", title: createMessage(START_FROM_SCRATCH_TITLE), }, { onClick: onClickStartFromTemplate, - src: StartTemplate, + src: getAssetUrl(`${ASSETS_CDN_URL}/Start-from-usecase.png`), subTitle: createMessage(START_FROM_TEMPLATE_SUBTITLE), testid: "t--start-from-template", title: createMessage(START_FROM_TEMPLATE_TITLE), }, ]; + if (isEnabledForStartWithData) { + selectionOptions.unshift({ + onClick: onClickStartWithData, + src: getAssetUrl(`${ASSETS_CDN_URL}/Start-from-data.png`), + subTitle: createMessage(START_WITH_DATA_SUBTITLE), + testid: "t--start-from-data", + title: createMessage(START_WITH_DATA_TITLE), + }); + } + useEffect(() => { AnalyticsUtil.logEvent("ONBOARDING_CREATE_APP_FLOW", { totalOptions: selectionOptions.length,