diff --git a/app/client/src/ce/RouteParamsMiddleware.ts b/app/client/src/ce/RouteParamsMiddleware.ts index 91ac86e834..ce30cb9e20 100644 --- a/app/client/src/ce/RouteParamsMiddleware.ts +++ b/app/client/src/ce/RouteParamsMiddleware.ts @@ -15,7 +15,7 @@ import type { Middleware } from "redux"; export const handler = (action: ReduxAction) => { let appParams: ApplicationURLParams = {}; let pageParams: PageURLParams[] = []; - switch (action.type) { + switch (action?.type) { case ReduxActionTypes.IMPORT_APPLICATION_SUCCESS: case ReduxActionTypes.IMPORT_TEMPLATE_TO_WORKSPACE_SUCCESS: case ReduxActionTypes.FETCH_APPLICATION_SUCCESS: { diff --git a/app/client/src/ce/entities/FeatureFlag.ts b/app/client/src/ce/entities/FeatureFlag.ts index d5438b873d..118c63b0c0 100644 --- a/app/client/src/ce/entities/FeatureFlag.ts +++ b/app/client/src/ce/entities/FeatureFlag.ts @@ -52,6 +52,7 @@ export const FEATURE_FLAG = { "ab_flip_primary_secondary_ctas_dsform_enabled", rollout_consolidated_page_load_fetch_enabled: "rollout_consolidated_page_load_fetch_enabled", + ab_start_with_data_default_enabled: "ab_start_with_data_default_enabled", } as const; export type FeatureFlag = keyof typeof FEATURE_FLAG; @@ -94,6 +95,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = { ab_appsmith_ai_query: false, ab_flip_primary_secondary_ctas_dsform_enabled: false, rollout_consolidated_page_load_fetch_enabled: false, + ab_start_with_data_default_enabled: false, }; export const AB_TESTING_EVENT_KEYS = { diff --git a/app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx b/app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx index 7ed07b6f5b..155728f186 100644 --- a/app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx +++ b/app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx @@ -34,7 +34,7 @@ import { isEmpty } from "lodash"; import CreateNewDatasourceTab from "pages/Editor/IntegrationEditor/CreateNewDatasourceTab"; import { getApplicationsOfWorkspace } from "@appsmith/selectors/selectedWorkspaceSelectors"; import { TemplateView } from "pages/Templates/TemplateView"; -import { default as React, useEffect, useState } from "react"; +import { default as React, useCallback, useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { allTemplatesFiltersSelector, @@ -55,6 +55,8 @@ import DatasourceForm from "pages/Editor/SaaSEditor/DatasourceForm"; import type { Datasource } from "entities/Datasource"; import { fetchingEnvironmentConfigs } from "@appsmith/actions/environmentAction"; import StartWithTemplatesWrapper from "./StartWithTemplatesWrapper"; +import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; +import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag"; const SectionWrapper = styled.div` display: flex; @@ -83,6 +85,10 @@ const BackWrapper = styled.div<{ hidden?: boolean }>` ${(props) => `${props.hidden && "visibility: hidden; opacity: 0;"}`} `; +const LinkWrapper = styled(Link)<{ hidden?: boolean }>` + ${(props) => `${props.hidden && "visibility: hidden; opacity: 0;"}`} +`; + const OptionWrapper = styled.div` display: flex; align-items: center; @@ -190,6 +196,10 @@ const CreateNewAppsOption = ({ getDatasource(state, TEMP_DATASOURCE_ID || ""), ); + const isEnabledForStartWithDataDefault = useFeatureFlag( + FEATURE_FLAG.ab_start_with_data_default_enabled, + ); + const dispatch = useDispatch(); const onClickStartFromTemplate = () => { AnalyticsUtil.logEvent("CREATE_APP_FROM_TEMPLATE"); @@ -217,9 +227,12 @@ const CreateNewAppsOption = ({ }; const onClickStartWithData = () => { - AnalyticsUtil.logEvent("CREATE_APP_FROM_DATA"); + AnalyticsUtil.logEvent("CREATE_APP_FROM_DATA", { + [FEATURE_FLAG.ab_start_with_data_default_enabled]: + isEnabledForStartWithDataDefault, + }); // fetch plugins information to show list of all plugins - dispatch(fetchPlugins()); + dispatch(fetchPlugins({ workspaceId: application?.workspaceId })); dispatch(fetchMockDatasources()); if (application?.workspaceId) { dispatch( @@ -286,11 +299,19 @@ const CreateNewAppsOption = ({ if (createNewAppPluginId) { AnalyticsUtil.logEvent( "ONBOARDING_FLOW_CLICK_SKIP_BUTTON_DATASOURCE_FORM_PAGE", - { pluginId: createNewAppPluginId }, + { + pluginId: createNewAppPluginId, + [FEATURE_FLAG.ab_start_with_data_default_enabled]: + isEnabledForStartWithDataDefault, + }, ); } else { AnalyticsUtil.logEvent( "ONBOARDING_FLOW_CLICK_SKIP_BUTTON_START_FROM_DATA_PAGE", + { + [FEATURE_FLAG.ab_start_with_data_default_enabled]: + isEnabledForStartWithDataDefault, + }, ); } } @@ -363,6 +384,38 @@ const CreateNewAppsOption = ({ } }; + const renderStartWithData = useCallback(() => { + return ( + +
+ + {createNewAppPluginId && !!selectedDatasource ? ( + selectedPlugin?.type === PluginType.SAAS ? ( + + ) : ( + + ) + ) : ( + + )} + + + ); + }, [createNewAppPluginId, selectedDatasource, selectedPlugin]); + const selectionOptions: CardProps[] = [ { onClick: onClickStartWithData, @@ -388,10 +441,7 @@ const CreateNewAppsOption = ({ ]; useEffect(() => { - AnalyticsUtil.logEvent("ONBOARDING_CREATE_APP_FLOW", { - totalOptions: selectionOptions.length, - }); - if (application) + if (application) { urlBuilder.updateURLParams( { applicationSlug: application.slug, @@ -405,33 +455,51 @@ const CreateNewAppsOption = ({ })), ); + if (isEnabledForStartWithDataDefault) { + onClickStartWithData(); + } + } + }, [application]); + + useEffect(() => { + AnalyticsUtil.logEvent("ONBOARDING_CREATE_APP_FLOW", { + totalOptions: selectionOptions.length, + }); + return () => { resetCreateNewAppFlow(); }; }, []); + const isBackButtonHidden = + isEnabledForStartWithDataDefault && + (!createNewAppPluginId || !selectedDatasource); + return ( - {useType === START_WITH_TYPE.TEMPLATE ? ( + {isEnabledForStartWithDataDefault ? ( + renderStartWithData() + ) : useType === START_WITH_TYPE.TEMPLATE ? ( selectedTemplate ? ( ) ) : useType === START_WITH_TYPE.DATA ? ( - -
- - {createNewAppPluginId && !!selectedDatasource ? ( - selectedPlugin?.type === PluginType.SAAS ? ( - - ) : ( - - ) - ) : ( - - )} - - + renderStartWithData() ) : ( diff --git a/app/client/src/pages/Editor/DatasourceInfo/SchemaViewModeCSS.tsx b/app/client/src/pages/Editor/DatasourceInfo/SchemaViewModeCSS.tsx index 44535da78e..cf26c97572 100644 --- a/app/client/src/pages/Editor/DatasourceInfo/SchemaViewModeCSS.tsx +++ b/app/client/src/pages/Editor/DatasourceInfo/SchemaViewModeCSS.tsx @@ -138,6 +138,8 @@ export const SchemaStateMessageWrapper = styled.div` flex-direction: column; align-items: center; position: relative; + text-align: center; + padding: 0 var(--ads-spaces-3); img { padding-bottom: var(--ads-v2-spaces-7); } diff --git a/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx b/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx index 2e38c7eded..2f4b55a42a 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx @@ -127,6 +127,8 @@ function CreateNewDatasource({ active, history, isCreating, + isOnboardingScreen, + pageId, showMostPopularPlugins, showUnsupportedPluginDialog, }: any) { @@ -158,7 +160,7 @@ function CreateNewDatasource({ history={history} isCreating={isCreating} location={location} - parentEntityId={parentEntityId} + parentEntityId={parentEntityId || (isOnboardingScreen && pageId) || ""} parentEntityType={parentEntityType} showMostPopularPlugins={showMostPopularPlugins} showUnsupportedPluginDialog={showUnsupportedPluginDialog} @@ -239,6 +241,7 @@ interface CreateNewDatasourceScreenProps { pageId: string; isAppSidebarEnabled: boolean; isEnabledForCreateNew: boolean; + isOnboardingScreen?: boolean; } interface CreateNewDatasourceScreenState { @@ -271,6 +274,7 @@ class CreateNewDatasourceTab extends React.Component< isAppSidebarEnabled, isCreating, isEnabledForCreateNew, + isOnboardingScreen, pageId, } = this.props; if (!canCreateDatasource) return null; @@ -301,6 +305,7 @@ class CreateNewDatasourceTab extends React.Component< active={false} history={history} isCreating={isCreating} + isOnboardingScreen={!!isOnboardingScreen} location={location} pageId={pageId} showMostPopularPlugins