diff --git a/app/client/src/actions/onboardingActions.ts b/app/client/src/actions/onboardingActions.ts index 90eee790af..35c64f20f8 100644 --- a/app/client/src/actions/onboardingActions.ts +++ b/app/client/src/actions/onboardingActions.ts @@ -1,15 +1,5 @@ import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants"; import type { SIGNPOSTING_STEP } from "pages/Editor/FirstTimeUserOnboarding/Utils"; -import type { GUIDED_TOUR_STEPS } from "pages/Editor/GuidedTour/constants"; -import type { GuidedTourState } from "reducers/uiReducers/guidedTourReducer"; -import type { WidgetProps } from "widgets/BaseWidget"; - -export const enableGuidedTour = (payload: boolean) => { - return { - type: ReduxActionTypes.ENABLE_GUIDED_TOUR, - payload, - }; -}; export const toggleInOnboardingWidgetSelection = (payload: boolean) => { return { @@ -103,129 +93,12 @@ export const showAnonymousDataPopup = (payload: boolean) => { }; }; -export const markStepComplete = () => { - return { - type: ReduxActionTypes.GUIDED_TOUR_MARK_STEP_COMPLETED, - }; -}; - -export const tableWidgetWasSelected = (payload: boolean) => { - return { - type: ReduxActionTypes.TABLE_WIDGET_WAS_SELECTED, - payload, - }; -}; - -export const setCurrentStepInit = (payload: GUIDED_TOUR_STEPS) => { - return { - type: ReduxActionTypes.SET_CURRENT_STEP_INIT, - payload, - }; -}; - -export const setCurrentStep = (payload: GUIDED_TOUR_STEPS) => { - return { - type: ReduxActionTypes.SET_CURRENT_STEP, - payload, - }; -}; - -export const addOnboardingWidget = (payload: Partial) => { - return { - type: ReduxActionTypes.GUIDED_TOUR_ADD_WIDGET, - payload, - }; -}; - -export const setUpTourApp = () => { - return { - type: ReduxActionTypes.SET_UP_TOUR_APP, - }; -}; - -export const toggleLoader = (payload: boolean) => { - return { - type: ReduxActionTypes.GUIDED_TOUR_TOGGLE_LOADER, - payload, - }; -}; - -export const toggleShowDeviationDialog = (payload: boolean) => { - return { - type: ReduxActionTypes.TOGGLE_DEVIATION_DIALOG, - payload, - }; -}; - -export const toggleShowEndTourDialog = (payload: boolean) => { - return { - type: ReduxActionTypes.TOGGLE_END_GUIDED_TOUR_DIALOG, - payload, - }; -}; - -export const showPostCompletionMessage = (payload: boolean) => { - return { - type: ReduxActionTypes.TOGGLE_END_GUIDED_TOUR_DIALOG, - payload, - }; -}; - -export const forceShowContent = (payload: GUIDED_TOUR_STEPS) => { - return { - type: ReduxActionTypes.FORCE_SHOW_CONTENT, - payload, - }; -}; - -export const updateButtonWidgetText = () => { - return { - type: ReduxActionTypes.UPDATE_BUTTON_WIDGET_TEXT, - }; -}; - export const showInfoMessage = () => { return { type: ReduxActionTypes.SHOW_INFO_MESSAGE, }; }; -export const focusWidget = (widgetName: string, propertyName?: string) => { - return { - type: ReduxActionTypes.GUIDED_TOUR_FOCUS_WIDGET, - payload: { - widgetName, - propertyName, - }, - }; -}; - -export const focusWidgetProperty = (widgetName: string) => { - return { - type: ReduxActionTypes.FOCUS_WIDGET_PROPERTY, - payload: widgetName, - }; -}; - -export const onboardingCreateApplication = () => { - return { - type: ReduxActionTypes.ONBOARDING_CREATE_APPLICATION, - }; -}; - -export const loadGuidedTourInit = () => { - return { - type: ReduxActionTypes.LOAD_GUIDED_TOUR_INIT, - }; -}; - -export const loadGuidedTour = (guidedTourState: GuidedTourState) => { - return { - type: ReduxActionTypes.LOAD_GUIDED_TOUR, - payload: guidedTourState, - }; -}; - export const setCurrentApplicationIdForCreateNewApp = ( applicationId: string, ) => { @@ -241,13 +114,6 @@ export const resetCurrentApplicationIdForCreateNewApp = () => { }; }; -export const setCurrentPluginIdForCreateNewApp = (pluginId: string) => { - return { - type: ReduxActionTypes.SET_CURRENT_PLUGIN_ID_FOR_CREATE_NEW_APP, - payload: pluginId, - }; -}; - export const resetCurrentPluginIdForCreateNewApp = () => { return { type: ReduxActionTypes.RESET_CURRENT_PLUGIN_ID_FOR_CREATE_NEW_APP, diff --git a/app/client/src/ce/constants/ReduxActionConstants.tsx b/app/client/src/ce/constants/ReduxActionConstants.tsx index cdb5fac367..1362e11b97 100644 --- a/app/client/src/ce/constants/ReduxActionConstants.tsx +++ b/app/client/src/ce/constants/ReduxActionConstants.tsx @@ -275,9 +275,6 @@ const ActionTypes = { CANCEL_ACTION_MODAL: "CANCEL_ACTION_MODAL", CONFIRM_ACTION_MODAL: "CONFIRM_ACTION_MODAL", CREATE_QUERY_INIT: "CREATE_QUERY_INIT", - ONBOARDING_CREATE_APPLICATION: "ONBOARDING_CREATE_APPLICATION", - LOAD_GUIDED_TOUR: "LOAD_GUIDED_TOUR", - LOAD_GUIDED_TOUR_INIT: "LOAD_GUIDED_TOUR_INIT", SET_IS_RECONNECTING_DATASOURCES_MODAL_OPEN: "SET_IS_RECONNECTING_DATASOURCES_MODAL_OPEN", FETCH_DATASOURCES_INIT: "FETCH_DATASOURCES_INIT", @@ -662,23 +659,9 @@ const ActionTypes = { TOGGLE_FUNCTION_EXECUTE_ON_LOAD_SUCCESS: "TOGGLE_FUNCTION_EXECUTE_ON_LOAD_SUCCESS", SET_JS_ACTION_TO_EXECUTE_ON_PAGELOAD: "SET_JS_ACTION_TO_EXECUTE_ON_PAGELOAD", - ENABLE_GUIDED_TOUR: "ENABLE_GUIDED_TOUR", - GUIDED_TOUR_MARK_STEP_COMPLETED: "GUIDED_TOUR_MARK_STEP_COMPLETED", - SET_CURRENT_STEP: "SET_CURRENT_STEP", - SET_CURRENT_STEP_INIT: "SET_CURRENT_STEP_INIT", - GUIDED_TOUR_ADD_WIDGET: "GUIDED_TOUR_ADD_WIDGET", - TABLE_WIDGET_WAS_SELECTED: "TABLE_WIDGET_WAS_SELECTED", - SET_UP_TOUR_APP: "SET_UP_TOUR_APP", - GUIDED_TOUR_TOGGLE_LOADER: "GUIDED_TOUR_TOGGLE_LOADER", - TOGGLE_DEVIATION_DIALOG: "TOGGLE_DEVIATION_DIALOG", - TOGGLE_END_GUIDED_TOUR_DIALOG: "TOGGLE_END_GUIDED_TOUR_DIALOG", SHOW_POST_COMPLETION_MESSAGE: "SHOW_POST_COMPLETION_MESSAGE", - GUIDED_TOUR_FOCUS_WIDGET: "GUIDED_TOUR_FOCUS_WIDGET", - GUIDED_TOUR_SET_DATASOURCE_ID: "GUIDED_TOUR_SET_DATASOURCE_ID", - FOCUS_WIDGET_PROPERTY: "FOCUS_WIDGET_PROPERTY", SHOW_INFO_MESSAGE: "SHOW_INFO_MESSAGE", FORCE_SHOW_CONTENT: "FORCE_SHOW_CONTENT", - UPDATE_BUTTON_WIDGET_TEXT: "UPDATE_BUTTON_WIDGET_TEXT", UPDATE_REPLAY_ENTITY: "UPDATE_REPLAY_ENTITY", DELETE_WORKSPACE_INIT: "DELETE_WORKSPACE_INIT", DELETE_WORKSPACE_SUCCESS: "DELETE_WORKSPACE_SUCCESS", diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index e873556491..a291c04d6d 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/app/client/src/ce/constants/messages.ts @@ -1656,12 +1656,9 @@ export const CONTINUE = () => "Continue"; export const PROCEED_TO_NEXT_STEP = () => "Proceed to next step"; export const PROCEED = () => "Proceed"; export const COMPLETE = () => "Complete"; -// -- Modal -- -export const DEVIATION = () => "You are deviating from the tutorial"; -export const END_CONFIRMATION = () => "Are you sure you want to end?"; -export const CANCEL_DIALOG = () => "Cancel"; // -- End Tutorial -- export const END_TUTORIAL = () => "End tutorial"; +export const CANCEL_DIALOG = () => "Cancel"; // -- Intro content -- export const TITLE = () => "In this tutorial we’ll build a tool to display customer information"; diff --git a/app/client/src/ce/reducers/index.tsx b/app/client/src/ce/reducers/index.tsx index 791e0924b7..2822334804 100644 --- a/app/client/src/ce/reducers/index.tsx +++ b/app/client/src/ce/reducers/index.tsx @@ -55,7 +55,6 @@ import type { AppThemingState } from "reducers/uiReducers/appThemingReducer"; import type { MainCanvasReduxState } from "reducers/uiReducers/mainCanvasReducer"; import type { SettingsReduxState } from "@appsmith/reducers/settingsReducer"; import SettingsReducer from "@appsmith/reducers/settingsReducer"; -import type { GuidedTourState } from "reducers/uiReducers/guidedTourReducer"; import type { TriggerValuesEvaluationState } from "reducers/evaluationReducers/triggerReducer"; import type { CanvasWidgetStructure } from "WidgetProvider/constants"; import type { AppSettingsPaneReduxState } from "reducers/uiReducers/appSettingsPaneReducer"; @@ -119,7 +118,6 @@ export interface AppState { datasourceName: DatasourceNameReduxState; theme: ThemeState; onBoarding: OnboardingState; - guidedTour: GuidedTourState; globalSearch: GlobalSearchReduxState; releases: ReleasesState; websocket: WebsocketReducerState; diff --git a/app/client/src/ce/reducers/uiReducers/index.tsx b/app/client/src/ce/reducers/uiReducers/index.tsx index f9e39432e8..dd50f7c2c7 100644 --- a/app/client/src/ce/reducers/uiReducers/index.tsx +++ b/app/client/src/ce/reducers/uiReducers/index.tsx @@ -39,7 +39,6 @@ import appThemingReducer from "reducers/uiReducers/appThemingReducer"; import mainCanvasReducer from "reducers/uiReducers/mainCanvasReducer"; import focusHistoryReducer from "reducers/uiReducers/focusHistoryReducer"; import { editorContextReducer } from "@appsmith/reducers/uiReducers/editorContextReducer"; -import guidedTourReducer from "reducers/uiReducers/guidedTourReducer"; import libraryReducer from "reducers/uiReducers/libraryReducer"; import appSettingsPaneReducer from "reducers/uiReducers/appSettingsPaneReducer"; import autoHeightUIReducer from "reducers/uiReducers/autoHeightReducer"; @@ -76,7 +75,6 @@ export const uiReducerObject = { theme: themeReducer, modalAction: modalActionReducer, onBoarding: onBoardingReducer, - guidedTour: guidedTourReducer, globalSearch: globalSearchReducer, releases: releasesReducer, websocket: websocketReducer, diff --git a/app/client/src/ce/sagas/ApplicationSagas.tsx b/app/client/src/ce/sagas/ApplicationSagas.tsx index 3b23baea02..03081c8a60 100644 --- a/app/client/src/ce/sagas/ApplicationSagas.tsx +++ b/app/client/src/ce/sagas/ApplicationSagas.tsx @@ -83,7 +83,6 @@ import { import { deleteRecentAppEntities, getEnableStartSignposting, - setPostWelcomeTourState, } from "utils/storage"; import { reconnectAppLevelWebsocket, @@ -94,7 +93,6 @@ import { getCurrentWorkspaceId, } from "@appsmith/selectors/workspaceSelectors"; -import { getCurrentStep, inGuidedTour } from "selectors/onboardingSelectors"; import { fetchPluginFormConfigs, fetchPlugins } from "actions/pluginActions"; import { fetchDatasources, @@ -102,7 +100,6 @@ import { } from "actions/datasourceActions"; import { failFastApiCalls } from "sagas/InitSagas"; import type { Datasource } from "entities/Datasource"; -import { GUIDED_TOUR_STEPS } from "pages/Editor/GuidedTour/constants"; import { builderURL, viewerURL } from "@appsmith/RouteBuilder"; import { getDefaultPageId as selectDefaultPageId } from "sagas/selectors"; import PageApi from "api/PageApi"; @@ -169,16 +166,10 @@ export function* publishApplicationSaga( const applicationId: string = yield select(getCurrentApplicationId); const currentPageId: string = yield select(getCurrentPageId); - const guidedTour: boolean = yield select(inGuidedTour); - const currentStep: number = yield select(getCurrentStep); - let appicationViewPageUrl = viewerURL({ + const appicationViewPageUrl = viewerURL({ pageId: currentPageId, }); - if (guidedTour && currentStep === GUIDED_TOUR_STEPS.DEPLOY) { - appicationViewPageUrl += "?&guidedTourComplete=true"; - yield call(setPostWelcomeTourState, true); - } yield put( fetchApplication({ @@ -868,9 +859,6 @@ export function* importApplicationSaga( }); } history.push(pageURL); - const guidedTour: boolean = yield select(inGuidedTour); - - if (guidedTour) return; toast.show("Application imported successfully", { kind: "success", diff --git a/app/client/src/ce/sagas/PageSagas.tsx b/app/client/src/ce/sagas/PageSagas.tsx index 10d8ef5504..70320d356c 100644 --- a/app/client/src/ce/sagas/PageSagas.tsx +++ b/app/client/src/ce/sagas/PageSagas.tsx @@ -106,7 +106,6 @@ import DEFAULT_TEMPLATE from "templates/default"; import { getAppMode } from "@appsmith/selectors/applicationSelectors"; import { setCrudInfoModalData } from "actions/crudInfoModalActions"; import { selectWidgetInitAction } from "actions/widgetSelectionActions"; -import { inGuidedTour } from "selectors/onboardingSelectors"; import { fetchJSCollectionsForPage, fetchJSCollectionsForPageError, @@ -114,7 +113,6 @@ import { } from "actions/jsActionActions"; import WidgetFactory from "WidgetProvider/factory"; -import { toggleShowDeviationDialog } from "actions/onboardingActions"; import { builderURL } from "@appsmith/RouteBuilder"; import { failFastApiCalls, waitForWidgetConfigBuild } from "sagas/InitSagas"; import { resizePublishedMainCanvasToLowestWidget } from "sagas/WidgetOperationUtils"; @@ -529,7 +527,6 @@ export function* savePageSaga(action: ReduxAction<{ isRetry?: boolean }>) { if (!editorConfigs) return; - const guidedTourEnabled: boolean = yield select(inGuidedTour); const savePageRequest: SavePageRequest = getLayoutSavePayload( widgets, editorConfigs, @@ -575,7 +572,7 @@ export function* savePageSaga(action: ReduxAction<{ isRetry?: boolean }>) { const { actionUpdates, messages } = savePageResponse.data; // We do not want to show these toasts in guided tour // Show toast messages from the server - if (messages && messages.length && !guidedTourEnabled) { + if (messages && messages.length) { savePageResponse.data.messages.forEach((message) => { toast.show(message, { kind: "info", @@ -791,7 +788,6 @@ export function* createPageSaga( createPageAction: ReduxAction, ) { try { - const guidedTourEnabled: boolean = yield select(inGuidedTour); const layoutSystemType: LayoutSystemTypes = yield select(getLayoutSystemType); const mainCanvasProps: MainCanvasReduxState = @@ -801,11 +797,6 @@ export function* createPageSaga( mainCanvasProps.width, ); - // Prevent user from creating a new page during the guided tour - if (guidedTourEnabled) { - yield put(toggleShowDeviationDialog(true)); - return; - } const request: CreatePageRequest = createPageAction.payload; const response: FetchPageResponse = yield call(PageApi.createPage, request); const isValidResponse: boolean = yield validateResponse(response); diff --git a/app/client/src/components/editorComponents/ActionNameEditor.tsx b/app/client/src/components/editorComponents/ActionNameEditor.tsx index ad2a38a548..b2106b4966 100644 --- a/app/client/src/components/editorComponents/ActionNameEditor.tsx +++ b/app/client/src/components/editorComponents/ActionNameEditor.tsx @@ -60,7 +60,6 @@ function ActionNameEditor(props: ActionNameEditorProps) { return ( { return retryPromise( diff --git a/app/client/src/components/featureWalkthrough/walkthroughRenderer.tsx b/app/client/src/components/featureWalkthrough/walkthroughRenderer.tsx index 31c7a907f9..7d73a39513 100644 --- a/app/client/src/components/featureWalkthrough/walkthroughRenderer.tsx +++ b/app/client/src/components/featureWalkthrough/walkthroughRenderer.tsx @@ -1,5 +1,4 @@ import { Icon, Text, Button, Divider } from "design-system"; -import { showIndicator } from "pages/Editor/GuidedTour/utils"; import React, { useContext, useEffect, useState } from "react"; import styled from "styled-components"; import { PADDING_HIGHLIGHT, getPosition } from "./utils"; @@ -12,6 +11,7 @@ import WalkthroughContext, { isFeatureFooterDetails, } from "./walkthroughContext"; import AnalyticsUtil from "utils/AnalyticsUtil"; +import { showIndicator } from "components/utils/Indicator"; const CLIPID = "clip__feature"; const Z_INDEX = 1000; diff --git a/app/client/src/pages/Editor/GuidedTour/utils.ts b/app/client/src/components/utils/Indicator.tsx similarity index 96% rename from app/client/src/pages/Editor/GuidedTour/utils.ts rename to app/client/src/components/utils/Indicator.tsx index 90f98a39a1..6aa946466d 100644 --- a/app/client/src/pages/Editor/GuidedTour/utils.ts +++ b/app/client/src/components/utils/Indicator.tsx @@ -1,16 +1,17 @@ import type { LazyAnimationItem } from "utils/lazyLottie"; import lazyLottie from "utils/lazyLottie"; import indicatorAnimationURL from "assets/lottie/guided-tour-indicator.json.txt"; -import { Classes as GuidedTourClasses } from "pages/Editor/GuidedTour/constants"; -import { - setExplorerActiveAction, - setExplorerPinnedAction, -} from "actions/explorerActions"; import log from "loglevel"; // data-guided-tour-id - used for the rectangular highlight // data-guided-tour-iid - iid(indicator id) used for the lottie animation show near an element +export const GuidedTourClasses = { + GUIDED_TOUR_BORDER: "guided-tour-border", + GUIDED_TOUR_SHOW_BORDER: "guided-tour-show-border", + GUIDED_TOUR_INDICATOR: "guided-tour-indicator", +}; + class IndicatorHelper { timerId!: ReturnType; indicatorWrapper!: HTMLDivElement; @@ -262,7 +263,3 @@ export function showIndicator( export function hideIndicator() { indicatorHelperInstance.destroy(); } - -export function closeSidebar() { - return [setExplorerPinnedAction(false), setExplorerActiveAction(false)]; -} diff --git a/app/client/src/components/utils/NameEditorComponent.tsx b/app/client/src/components/utils/NameEditorComponent.tsx index bc90eec988..763bfc927c 100644 --- a/app/client/src/components/utils/NameEditorComponent.tsx +++ b/app/client/src/components/utils/NameEditorComponent.tsx @@ -3,8 +3,6 @@ import { useSelector, useDispatch, shallowEqual } from "react-redux"; import { isNameValid } from "utils/helpers"; import type { AppState } from "@appsmith/reducers"; import log from "loglevel"; -import { inGuidedTour } from "selectors/onboardingSelectors"; -import { toggleShowDeviationDialog } from "actions/onboardingActions"; import { getUsedActionNames } from "selectors/actionSelectors"; import { ACTION_INVALID_NAME_ERROR, @@ -53,7 +51,6 @@ export const IconBox = styled.div` `; interface NameEditorProps { - checkForGuidedTour?: boolean; children: (params: any) => JSX.Element; id?: string; name?: string; @@ -72,7 +69,6 @@ interface NameEditorProps { function NameEditor(props: NameEditorProps) { const { - checkForGuidedTour, dispatchAction, id: entityId, idUndefinedErrorMessage, @@ -87,7 +83,6 @@ function NameEditor(props: NameEditorProps) { if (!entityId) { log.error(idUndefinedErrorMessage); } - const guidedTourEnabled = useSelector(inGuidedTour); const conflictingNames = useSelector( (state: AppState) => getUsedActionNames(state, entityId || ""), @@ -114,15 +109,10 @@ function NameEditor(props: NameEditorProps) { const handleNameChange = useCallback( (name: string) => { if (name !== entityName && !isInvalidNameForEntity(name)) { - if (checkForGuidedTour && guidedTourEnabled) { - dispatch(toggleShowDeviationDialog(true)); - return; - } - dispatch(dispatchAction({ id: entityId, name })); } }, - [dispatch, isInvalidNameForEntity, guidedTourEnabled, entityId, entityName], + [dispatch, isInvalidNameForEntity, entityId, entityName], ); useEffect(() => { diff --git a/app/client/src/entities/Engine/AppEditorEngine.ts b/app/client/src/entities/Engine/AppEditorEngine.ts index cce1050ca8..e79c8f136d 100644 --- a/app/client/src/entities/Engine/AppEditorEngine.ts +++ b/app/client/src/entities/Engine/AppEditorEngine.ts @@ -11,7 +11,6 @@ import { } from "actions/gitSyncActions"; import { restoreRecentEntitiesRequest } from "actions/globalSearchActions"; import { resetEditorSuccess } from "actions/initActions"; -import { loadGuidedTourInit } from "actions/onboardingActions"; import { fetchAllPageEntityCompletion, setupPage } from "actions/pageActions"; import { executePageLoadActions, @@ -241,7 +240,6 @@ export default class AppEditorEngine extends AppEngine { currentTabs, }); } - yield put(loadGuidedTourInit()); if (isFirstTimeUserOnboardingComplete) { yield put({ type: ReduxActionTypes.SET_FIRST_TIME_USER_ONBOARDING_APPLICATION_IDS, diff --git a/app/client/src/globalStyles/portals.ts b/app/client/src/globalStyles/portals.ts index f2d9e13367..bd4491d601 100644 --- a/app/client/src/globalStyles/portals.ts +++ b/app/client/src/globalStyles/portals.ts @@ -2,8 +2,8 @@ import { createGlobalStyle } from "styled-components"; import { Layers } from "constants/Layers"; import { Classes } from "@blueprintjs/core"; import { Classes as GitSyncClasses } from "pages/Editor/gitSync/constants"; -import { Classes as GuidedTourClasses } from "pages/Editor/GuidedTour/constants"; import { Colors } from "constants/Colors"; +import { GuidedTourClasses } from "components/utils/Indicator"; export const replayHighlightClass = "ur--has-border"; diff --git a/app/client/src/pages/AppViewer/Navigation/index.tsx b/app/client/src/pages/AppViewer/Navigation/index.tsx index 9e0b444654..994229740b 100644 --- a/app/client/src/pages/AppViewer/Navigation/index.tsx +++ b/app/client/src/pages/AppViewer/Navigation/index.tsx @@ -16,7 +16,6 @@ import { getThemeDetails, ThemeMode } from "selectors/themeSelectors"; import HtmlTitle from "../AppViewerHtmlTitle"; import { NAVIGATION_SETTINGS } from "constants/AppConstants"; import PageMenu from "pages/AppViewer/PageMenu"; -import TourCompletionMessage from "pages/Editor/GuidedTour/TourCompletionMessage"; import { useHref } from "pages/Editor/utils"; import { builderURL } from "@appsmith/RouteBuilder"; import TopHeader from "./components/TopHeader"; @@ -137,8 +136,6 @@ export function Navigation() { setMenuOpen={setMenuOpen} url={editorURL} /> - - ); diff --git a/app/client/src/pages/AppViewer/index.tsx b/app/client/src/pages/AppViewer/index.tsx index 2b51a82ce6..9bd5aea8e3 100644 --- a/app/client/src/pages/AppViewer/index.tsx +++ b/app/client/src/pages/AppViewer/index.tsx @@ -26,7 +26,6 @@ import { getSelectedAppTheme } from "selectors/appThemingSelectors"; import { useSelector } from "react-redux"; import BrandingBadge from "./BrandingBadge"; import { setAppViewHeaderHeight } from "actions/appViewActions"; -import { showPostCompletionMessage } from "selectors/onboardingSelectors"; import { CANVAS_SELECTOR } from "constants/WidgetConstants"; import { setupPublishedPage } from "actions/pageActions"; import usePrevious from "utils/hooks/usePrevious"; @@ -56,7 +55,6 @@ import { getHideWatermark } from "@appsmith/selectors/tenantSelectors"; const AppViewerBody = styled.section<{ hasPages: boolean; headerHeight: number; - showGuidedTourMessage: boolean; }>` display: flex; flex-direction: row; @@ -92,7 +90,6 @@ function AppViewer(props: Props) { const lightTheme = useSelector((state: AppState) => getThemeDetails(state, ThemeMode.LIGHT), ); - const showGuidedTourMessage = useSelector(showPostCompletionMessage); const headerHeight = useSelector(getAppViewHeaderHeight); const branch = getSearchQuery(search, GIT_BRANCH_QUERY_KEY); const prevValues = usePrevious({ branch, location: props.location, pageId }); @@ -219,7 +216,6 @@ function AppViewer(props: Props) { hasPages={pages.length > 1} headerHeight={headerHeight} ref={focusRef} - showGuidedTourMessage={showGuidedTourMessage} > {isInitialized && } diff --git a/app/client/src/pages/Editor/DatasourceInfo/DatasourceEntity.tsx b/app/client/src/pages/Editor/DatasourceInfo/DatasourceEntity.tsx index e6fd0101d6..8604edb454 100644 --- a/app/client/src/pages/Editor/DatasourceInfo/DatasourceEntity.tsx +++ b/app/client/src/pages/Editor/DatasourceInfo/DatasourceEntity.tsx @@ -25,7 +25,6 @@ import { datasourcesEditorIdURL, saasEditorDatasourceIdURL, } from "@appsmith/RouteBuilder"; -import { inGuidedTour } from "selectors/onboardingSelectors"; import AnalyticsUtil from "utils/AnalyticsUtil"; import { useLocation } from "react-router"; import omit from "lodash/omit"; @@ -57,7 +56,6 @@ const DataStructureListWrapper = styled.div<{ height: number }>` const ExplorerDatasourceEntity = React.memo( (props: ExplorerDatasourceEntityProps) => { const { entityId } = props; - const guidedTourEnabled = useSelector(inGuidedTour); const dispatch = useDispatch(); const icon = getPluginIcon(props.plugin); const location = useLocation(); @@ -152,10 +150,6 @@ const ExplorerDatasourceEntity = React.memo( } else if (queryAction && isStoredDatasource(queryAction.datasource)) { isDefaultExpanded = queryAction.datasource.id === props.datasource.id; } - // In guided tour we want the datasource structure to be shown only when expanded - if (guidedTourEnabled) { - isDefaultExpanded = false; - } return ( - } - step={GUIDED_TOUR_STEPS.BUTTON_ONSUCCESS_BINDING} + + + {applicationId && } + setShowModal(isOpen)} + open={showModal} > - - - {applicationId && } - setShowModal(isOpen)} - open={showModal} - > - - - {createMessage( - APPLICATION_INVITE, - currentWorkspace.name, - !isGACEnabled, - )} - - - setActiveTab(value)} - value={activeTab} - > - - - {createMessage(INVITE_TAB)} - - - {createMessage(IN_APP_EMBED_SETTING.embed)} - - {featureFlags.release_show_publish_app_to_community_enabled && - cloudHosting && ( - - {createMessage(COMMUNITY_TEMPLATES.tabTitle)} - - )} - - - + + {createMessage( + APPLICATION_INVITE, + currentWorkspace.name, + !isGACEnabled, + )} + + + setActiveTab(value)} + value={activeTab} + > + + + {createMessage(INVITE_TAB)} + + + {createMessage(IN_APP_EMBED_SETTING.embed)} + + {featureFlags.release_show_publish_app_to_community_enabled && + cloudHosting && ( + + {createMessage(COMMUNITY_TEMPLATES.tabTitle)} + + )} + + + + + + {getEmbedSnippetForm(isPrivateEmbedEnabled, setActiveTab)} + + {cloudHosting && ( + + + setShowPublishCommunityTemplateModal(true) + } + setShowHostModal={setShowModal} /> - - {getEmbedSnippetForm(isPrivateEmbedEnabled, setActiveTab)} - - {cloudHosting && ( - - - setShowPublishCommunityTemplateModal(true) - } - setShowHostModal={setShowModal} - /> - - )} - - - - - { - setShowPublishCommunityTemplateModal(false); - setShowModal(true); - }} - setShowModal={setShowPublishCommunityTemplateModal} - showModal={showPublishCommunityTemplateModal} - /> -
- + + + + { + setShowPublishCommunityTemplateModal(false); + setShowModal(true); + }} + setShowModal={setShowPublishCommunityTemplateModal} + showModal={showPublishCommunityTemplateModal} + /> +
+ + - + {DEPLOY_MENU_OPTION()} + + - -
- + +
diff --git a/app/client/src/pages/Editor/Explorer/Actions/ActionEntityContextMenu.tsx b/app/client/src/pages/Editor/Explorer/Actions/ActionEntityContextMenu.tsx index 05a80d5dd3..3272b8c867 100644 --- a/app/client/src/pages/Editor/Explorer/Actions/ActionEntityContextMenu.tsx +++ b/app/client/src/pages/Editor/Explorer/Actions/ActionEntityContextMenu.tsx @@ -12,8 +12,6 @@ import history from "utils/history"; import { useNewActionName } from "./helpers"; import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants"; import { ENTITY_TYPE } from "entities/DataTree/dataTreeFactory"; -import { inGuidedTour } from "selectors/onboardingSelectors"; -import { toggleShowDeviationDialog } from "actions/onboardingActions"; import { CONTEXT_COPY, CONTEXT_DELETE, @@ -49,7 +47,6 @@ export function ActionEntityContextMenu(props: EntityContextMenuProps) { const { canDeleteAction, canManageAction } = props; const nextEntityName = useNewActionName(); - const guidedTourEnabled = useSelector(inGuidedTour); const dispatch = useDispatch(); const [confirmDelete, setConfirmDelete] = useState(false); const copyActionToPage = useCallback( @@ -77,14 +74,9 @@ export function ActionEntityContextMenu(props: EntityContextMenuProps) { ); const deleteActionFromPage = useCallback( (actionId: string, actionName: string, onSuccess?: () => void) => { - if (guidedTourEnabled) { - dispatch(toggleShowDeviationDialog(true)); - return; - } - dispatch(deleteAction({ id: actionId, name: actionName, onSuccess })); }, - [dispatch, guidedTourEnabled], + [dispatch], ); const convertQueryToModuleOption = useConvertToModuleOptions({ @@ -96,12 +88,8 @@ export function ActionEntityContextMenu(props: EntityContextMenuProps) { const menuPages = useSelector(getPageListAsOptions); const editActionName = useCallback(() => { - if (guidedTourEnabled) { - dispatch(toggleShowDeviationDialog(true)); - return; - } dispatch(initExplorerEntityNameEdit(props.id)); - }, [dispatch, props.id, guidedTourEnabled]); + }, [dispatch, props.id]); const showBinding = useCallback( (actionId, actionName) => diff --git a/app/client/src/pages/Editor/Explorer/Actions/MoreActionsMenu.tsx b/app/client/src/pages/Editor/Explorer/Actions/MoreActionsMenu.tsx index 836446f2d4..602a6a6d6e 100644 --- a/app/client/src/pages/Editor/Explorer/Actions/MoreActionsMenu.tsx +++ b/app/client/src/pages/Editor/Explorer/Actions/MoreActionsMenu.tsx @@ -10,8 +10,6 @@ import { } from "actions/pluginActionActions"; import { useNewActionName } from "./helpers"; -import { inGuidedTour } from "selectors/onboardingSelectors"; -import { toggleShowDeviationDialog } from "actions/onboardingActions"; import { CONTEXT_COPY, CONTEXT_DELETE, @@ -43,7 +41,6 @@ interface EntityContextMenuProps { export function MoreActionsMenu(props: EntityContextMenuProps) { const [isMenuOpen, toggleMenuOpen] = useToggle([false, true]); const nextEntityName = useNewActionName(); - const guidedTourEnabled = useSelector(inGuidedTour); const [confirmDelete, setConfirmDelete] = useState(false); const { isChangePermitted = false, isDeletePermitted = false } = props; @@ -73,14 +70,9 @@ export function MoreActionsMenu(props: EntityContextMenuProps) { ); const deleteActionFromPage = useCallback( (actionId: string, actionName: string) => { - if (guidedTourEnabled) { - dispatch(toggleShowDeviationDialog(true)); - return; - } - dispatch(deleteAction({ id: actionId, name: actionName })); }, - [dispatch, guidedTourEnabled], + [dispatch], ); const menuPages = useSelector((state: AppState) => { diff --git a/app/client/src/pages/Editor/Explorer/Entity/index.tsx b/app/client/src/pages/Editor/Explorer/Entity/index.tsx index f28ce342dd..d79a276fd6 100644 --- a/app/client/src/pages/Editor/Explorer/Entity/index.tsx +++ b/app/client/src/pages/Editor/Explorer/Entity/index.tsx @@ -21,10 +21,6 @@ import { noop } from "lodash"; import { useDispatch, useSelector } from "react-redux"; import useClick from "utils/hooks/useClick"; import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants"; -import { inGuidedTour } from "selectors/onboardingSelectors"; -import { toggleShowDeviationDialog } from "actions/onboardingActions"; -import Boxed from "pages/Editor/GuidedTour/Boxed"; -import { GUIDED_TOUR_STEPS } from "pages/Editor/GuidedTour/constants"; import { getEntityCollapsibleState } from "selectors/editorContextSelectors"; import type { AppState } from "@appsmith/reducers"; import { setEntityCollapsibleState } from "actions/editorContextActions"; @@ -265,7 +261,6 @@ export const Entity = forwardRef( const isUpdating = useEntityUpdateState(props.entityId); const isEditing = useEntityEditState(props.entityId); const dispatch = useDispatch(); - const guidedTourEnabled = useSelector(inGuidedTour); const isOpen = (isEntityOpen === undefined ? isDefaultExpanded : isEntityOpen) || @@ -317,10 +312,6 @@ export const Entity = forwardRef( const enterEditMode = useCallback(() => { if (!canEditEntityName) return; - if (guidedTourEnabled) { - dispatch(toggleShowDeviationDialog(true)); - return; - } props.updateEntityName && dispatch({ type: ReduxActionTypes.INIT_EXPLORER_ENTITY_NAME_EDIT, @@ -328,7 +319,7 @@ export const Entity = forwardRef( id: props.entityId, }, }); - }, [dispatch, props.entityId, props.updateEntityName, guidedTourEnabled]); + }, [dispatch, props.entityId, props.updateEntityName]); const itemRef = useRef(null); useClick(itemRef, handleClick, noop); @@ -349,101 +340,96 @@ export const Entity = forwardRef( ); return ( - - - - - - {props.icon} - - - {isUpdating && ( - - - - )} - {props.isBeta && ( - - - {createMessage(EXPLORER_BETA_ENTITY)} - - - )} - {props.preRightIcon && ( - - {props.preRightIcon} - - )} - {props.rightIcon && ( - - {props.rightIcon} - - )} - {showAddButton && addButton} - {props.contextMenu && ( - {props.contextMenu} - )} - - + - {props.children} - - - + {props.icon} + + + {isUpdating && ( + + + + )} + {props.isBeta && ( + + + {createMessage(EXPLORER_BETA_ENTITY)} + + + )} + {props.preRightIcon && ( + + {props.preRightIcon} + + )} + {props.rightIcon && ( + + {props.rightIcon} + + )} + {showAddButton && addButton} + {props.contextMenu && ( + {props.contextMenu} + )} + + + {props.children} + + ); }, ); diff --git a/app/client/src/pages/Editor/Explorer/Widgets/WidgetContextMenu.tsx b/app/client/src/pages/Editor/Explorer/Widgets/WidgetContextMenu.tsx index c24ffc0165..88d1ecf942 100644 --- a/app/client/src/pages/Editor/Explorer/Widgets/WidgetContextMenu.tsx +++ b/app/client/src/pages/Editor/Explorer/Widgets/WidgetContextMenu.tsx @@ -8,8 +8,6 @@ import { } from "@appsmith/constants/ReduxActionConstants"; import WidgetFactory from "WidgetProvider/factory"; import { ENTITY_TYPE } from "entities/DataTree/dataTreeFactory"; -import { toggleShowDeviationDialog } from "actions/onboardingActions"; -import { inGuidedTour } from "selectors/onboardingSelectors"; import type { TreeDropdownOption } from "pages/Editor/Explorer/ContextMenu"; import ContextMenu from "pages/Editor/Explorer/ContextMenu"; const WidgetTypes = WidgetFactory.widgetTypes; @@ -32,7 +30,6 @@ export function WidgetContextMenu(props: { if (parentId) return state.ui.pageWidgets[props.pageId].dsl[parentId]; return {}; }); - const guidedTourEnabled = useSelector(inGuidedTour); const dispatch = useDispatch(); const dispatchDelete = useCallback(() => { // If the widget is a tab we are updating the `tabs` of the property of the widget @@ -71,12 +68,8 @@ export function WidgetContextMenu(props: { }, []); const editWidgetName = useCallback(() => { - if (guidedTourEnabled) { - dispatch(toggleShowDeviationDialog(true)); - return; - } dispatch(initExplorerEntityNameEdit(widgetId)); - }, [dispatch, widgetId, guidedTourEnabled]); + }, [dispatch, widgetId]); const optionTree: TreeDropdownOption[] = [ { diff --git a/app/client/src/pages/Editor/Explorer/Widgets/WidgetGroup.tsx b/app/client/src/pages/Editor/Explorer/Widgets/WidgetGroup.tsx index 87599b5c41..cb7329caa4 100644 --- a/app/client/src/pages/Editor/Explorer/Widgets/WidgetGroup.tsx +++ b/app/client/src/pages/Editor/Explorer/Widgets/WidgetGroup.tsx @@ -15,7 +15,6 @@ import { EMPTY_WIDGET_MAIN_TEXT, } from "@appsmith/constants/messages"; import { selectWidgetsForCurrentPage } from "@appsmith/selectors/entitiesSelector"; -import { inGuidedTour } from "selectors/onboardingSelectors"; import { getExplorerStatus, saveExplorerStatus, @@ -37,13 +36,9 @@ export const ExplorerWidgetGroup = memo((props: ExplorerWidgetGroupProps) => { const applicationId = useSelector(getCurrentApplicationId); const pageId = useSelector(getCurrentPageId) || ""; const widgets = useSelector(selectWidgetsForCurrentPage); - const guidedTour = useSelector(inGuidedTour); let isWidgetsOpen = getExplorerStatus(applicationId, "widgets"); if (isWidgetsOpen === null || isWidgetsOpen === undefined) { - isWidgetsOpen = widgets?.children?.length === 0 || guidedTour; - saveExplorerStatus(applicationId, "widgets", isWidgetsOpen); - } else if (guidedTour) { - isWidgetsOpen = guidedTour; + isWidgetsOpen = widgets?.children?.length === 0; saveExplorerStatus(applicationId, "widgets", isWidgetsOpen); } diff --git a/app/client/src/pages/Editor/FirstTimeUserOnboarding/Utils.ts b/app/client/src/pages/Editor/FirstTimeUserOnboarding/Utils.ts index b6cfa5ee42..ac80fab7b1 100644 --- a/app/client/src/pages/Editor/FirstTimeUserOnboarding/Utils.ts +++ b/app/client/src/pages/Editor/FirstTimeUserOnboarding/Utils.ts @@ -1,15 +1,3 @@ -import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants"; -import { APPLICATIONS_URL } from "constants/routes"; -import type { Dispatch } from "react"; -import history from "utils/history"; - -export const triggerWelcomeTour = (dispatch: Dispatch) => { - history.push(APPLICATIONS_URL); - dispatch({ - type: ReduxActionTypes.ONBOARDING_CREATE_APPLICATION, - }); -}; - export enum SIGNPOSTING_STEP { CONNECT_A_DATASOURCE = "CONNECT_A_DATASOURCE", CREATE_A_QUERY = "CREATE_A_QUERY", diff --git a/app/client/src/pages/Editor/GuidedTour/Boxed.tsx b/app/client/src/pages/Editor/GuidedTour/Boxed.tsx deleted file mode 100644 index ef25ea334e..0000000000 --- a/app/client/src/pages/Editor/GuidedTour/Boxed.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from "react"; -import type { ReactNode } from "react"; -import { useSelector } from "react-redux"; -import { - forceShowContentSelector, - getCurrentStep, - inGuidedTour, -} from "selectors/onboardingSelectors"; - -interface BoxedProps { - alternative?: JSX.Element; - children: ReactNode; - step: number; - // under which condition do you want to show an alternative or nothing(meaning hide) - show: boolean; -} - -// Boxed(or hidden). -function Boxed(props: BoxedProps): JSX.Element | null { - const guidedTour = useSelector(inGuidedTour); - const currentStep = useSelector(getCurrentStep); - const forceShowContent = useSelector(forceShowContentSelector); - - const hide = - guidedTour && - props.show && - forceShowContent < props.step && - currentStep <= props.step; - if (hide) { - if (props.alternative) { - return props.alternative; - } - - return null; - } - - // eslint-disable-next-line react/jsx-no-useless-fragment - return <>{props.children}; -} - -Boxed.defaultProps = { - show: true, - // Some out of bound value as by default the children - // of this component is to be hidden - step: 99, -}; - -export default Boxed; diff --git a/app/client/src/pages/Editor/GuidedTour/DeviationModal.tsx b/app/client/src/pages/Editor/GuidedTour/DeviationModal.tsx deleted file mode 100644 index 912cfbbbaa..0000000000 --- a/app/client/src/pages/Editor/GuidedTour/DeviationModal.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { useSelector } from "react-redux"; -import { - enableGuidedTour, - toggleShowDeviationDialog, - toggleShowEndTourDialog, -} from "actions/onboardingActions"; -import { - Button, - Modal, - ModalBody, - ModalContent, - ModalHeader, - ModalFooter, -} from "design-system"; -import { - CANCEL_DIALOG, - createMessage, - DEVIATION, - END_CONFIRMATION, -} from "@appsmith/constants/messages"; -import React from "react"; -import { useDispatch } from "react-redux"; -import { - showDeviatingDialogSelector, - showEndTourDialogSelector, -} from "selectors/onboardingSelectors"; -import AnalyticsUtil from "utils/AnalyticsUtil"; - -function GuidedTourDialog() { - const showDeviatingDialog = useSelector(showDeviatingDialogSelector); - const showEndTourDialog = useSelector(showEndTourDialogSelector); - const dispatch = useDispatch(); - const title = showDeviatingDialog - ? createMessage(DEVIATION) - : createMessage(END_CONFIRMATION); - - const onClose = () => { - if (showDeviatingDialog) { - dispatch(toggleShowDeviationDialog(false)); - } - if (showEndTourDialog) { - dispatch(toggleShowEndTourDialog(false)); - } - }; - - const endTour = () => { - onClose(); - dispatch(enableGuidedTour(false)); - AnalyticsUtil.logEvent("END_GUIDED_TOUR_CLICK"); - }; - - return ( - - e.preventDefault()} - // Don't close Modal when pressed outside - onInteractOutside={(e) => e.preventDefault()} - style={{ width: "640px" }} - > - {title} - - You will be able to restart this tutorial at any time by clicking on{" "} - Welcome tour at the bottom left of the home page - - - - - - - - ); -} - -export default GuidedTourDialog; diff --git a/app/client/src/pages/Editor/GuidedTour/EndTour.tsx b/app/client/src/pages/Editor/GuidedTour/EndTour.tsx deleted file mode 100644 index 657854bfdc..0000000000 --- a/app/client/src/pages/Editor/GuidedTour/EndTour.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { enableGuidedTour } from "actions/onboardingActions"; -import { createMessage, END_TUTORIAL } from "@appsmith/constants/messages"; -import React from "react"; -import { useDispatch } from "react-redux"; -import AnalyticsUtil from "utils/AnalyticsUtil"; -import { Button } from "design-system"; - -function EndTour() { - const dispatch = useDispatch(); - const endTour = () => { - dispatch(enableGuidedTour(false)); - AnalyticsUtil.logEvent("END_GUIDED_TOUR_CLICK"); - }; - - return ( - - ); -} - -export default EndTour; diff --git a/app/client/src/pages/Editor/GuidedTour/Guide.tsx b/app/client/src/pages/Editor/GuidedTour/Guide.tsx deleted file mode 100644 index db3e44dd12..0000000000 --- a/app/client/src/pages/Editor/GuidedTour/Guide.tsx +++ /dev/null @@ -1,476 +0,0 @@ -import { - setUpTourApp, - showInfoMessage, - toggleLoader, -} from "actions/onboardingActions"; -import { Button, Icon, Text } from "design-system"; -import { isArray } from "lodash"; -import React, { useEffect, useRef, useState } from "react"; -import { useDispatch } from "react-redux"; -import lazyLottie from "utils/lazyLottie"; -import tickMarkAnimationURL from "assets/lottie/guided-tour-tick-mark.json.txt"; -import { - getCurrentStep, - getQueryAction, - isExploringSelector, - loading, - showInfoMessageSelector, - showSuccessMessage, -} from "selectors/onboardingSelectors"; -import { useSelector } from "react-redux"; -import styled from "styled-components"; -import { GUIDED_TOUR_STEPS, Steps } from "./constants"; -import useComputeCurrentStep from "./useComputeCurrentStep"; -import { - BUTTON_TEXT, - COMPLETE, - CONTINUE, - createMessage, - DESCRIPTION, - PROCEED, - PROCEED_TO_NEXT_STEP, - TITLE, -} from "@appsmith/constants/messages"; - -const GuideWrapper = styled.div` - user-select: text; -`; - -const CardWrapper = styled.div` - width: 100%; - display: flex; - border-bottom: 1px solid var(--ads-v2-color-border); - flex-direction: column; - background: var(--ads-v2-color-bg-information); -`; - -const TitleWrapper = styled.div` - align-items: center; - display: flex; -`; - -const StepCount = styled.div` - background: var(--ads-v2-color-bg-emphasis-max); - color: var(--ads-v2-color-fg-on-emphasis-plus); - height: 24px; - width: 24px; - border-radius: var(--ads-v2-border-radius-circle); - display: inline-flex; - align-items: center; - justify-content: center; - margin-right: var(--ads-v2-spaces-3); -`; - -const Description = styled.span<{ addLeftSpacing?: boolean }>` - font-size: 14px; - line-height: 16px; - - padding-left: ${(props) => (props.addLeftSpacing ? `20px` : "0")}; - margin-top: var(--ads-v2-spaces-2); -`; - -const UpperContent = styled.div` - padding: var(--ads-v2-spaces-5); - flex-direction: column; - display: flex; -`; - -const ContentWrapper = styled.div` - display: flex; - gap: 50px; - align-items: center; - .guided-title { - color: var(--ads-v2-color-fg-emphasis); - } -`; - -const GuideButton = styled(Button)<{ isVisible?: boolean }>` - visibility: ${({ isVisible = true }) => (isVisible ? "visible" : "hidden")}; -`; - -const SubContentWrapper = styled.div` - display: flex; - flex: 1; - flex-direction: column; - - .header { - display: flex; - justify-content: space-between; - align-items: center; - flex-direction: row; - } - .count { - font-size: 12px; - font-weight: 600; - text-align: center; - - .complete { - font-weight: 400; - } - } -`; - -const Hint = styled.div` - background: var(--ads-v2-color-bg); - padding: var(--ads-v2-spaces-4); - margin-top: var(--ads-v2-spaces-5); - display: flex; - align-items: center; - border: 1px solid var(--ads-v2-color-border); - border-radius: var(--ads-v2-border-radius); - - .align-vertical { - flex-direction: column; - } - - .inner-wrapper { - flex: 1; - } - - .hint-text { - font-size: 14px; - } - - .hint-button { - margin-top: ${(props) => props.theme.spaces[6]}px; - } - - .hint-steps { - display: flex; - margin-top: ${(props) => props.theme.spaces[5]}px; - } - - .strike { - text-decoration: line-through; - opacity: 0.5; - } - - .hint-steps-text { - margin-left: ${(props) => props.theme.spaces[4]}px; - } -`; - -const HintTextWrapper = styled.div` - flex-direction: row; - display: flex; - justify-content: space-between; - align-items: center; - - img { - height: 70px; - width: 152px; - } -`; - -const SuccessMessageWrapper = styled.div` - display: flex; - background: var(--ads-v2-color-bg); - flex-direction: column; - border: 1px solid var(--ads-v2-color-border); - border-radius: var(--ads-v2-border-radius); - - .wrapper { - padding: var(--ads-v2-spaces-4); - display: flex; - } - .info-wrapper { - padding: var(--ads-v2-spaces-4); - align-items: center; - } - - .lottie-wrapper { - height: 40px; - width: 40px; - } - .title-wrapper { - display: flex; - flex: 1; - align-items: center; - justify-content: space-between; - } - .success-message { - color: var(--ads-v2-color-fg-emphasis); - } -`; - -function InitialContent() { - const dispatch = useDispatch(); - const isLoading = useSelector(loading); - const queryAction = useSelector(getQueryAction); - - const setupFirstStep = () => { - dispatch(toggleLoader(true)); - dispatch(setUpTourApp()); - }; - - return ( -
- - - - {createMessage(TITLE)} - - {createMessage(DESCRIPTION)} - - - {createMessage(BUTTON_TEXT)} - - - - - The app is connected to a Postgres database with customers data called{" "} - Customers DB. - - -
- ); -} - -function GuideStepsContent(props: { - currentStep: number; - showInfoMessage: boolean; -}) { - const meta = useComputeCurrentStep(props.showInfoMessage); - const content = Steps[props.currentStep]; - const [hintCount, setHintCount] = useState(0); - const currentHint = content.hints[hintCount] - ? content.hints[hintCount] - : content.hints[0]; - const dispatch = useDispatch(); - - useEffect(() => { - setHintCount(0); - }, [props.currentStep]); - - useEffect(() => { - setHintCount(meta.hintCount); - }, [meta.hintCount]); - - const hintSteps = currentHint.steps; - - const hintButtonOnClick = () => { - if (currentHint.button && currentHint.button.onClick) { - currentHint.button.onClick(dispatch); - } - setHintCount((count) => count + 1); - }; - - return ( -
- - -
- - {props.currentStep} - - {content.title} - - -
- {props.currentStep - 1}/{GUIDED_TOUR_STEPS.DEPLOY} - {" "} - {createMessage(COMPLETE)} -
-
- {content.description && ( - {content.description} - )} -
-
- -
- -
{currentHint.text}
- {currentHint.image && } - {currentHint.button && ( - - {createMessage(PROCEED)} - - )} -
- {isArray(hintSteps) && - hintSteps.length && - hintSteps.map((step, index) => { - const completed = meta.completedSubSteps.includes(index); - const className = "hint-steps" + (completed ? " strike" : ""); - - return ( -
- - {hintSteps[index]} -
- ); - })} -
-
-
- ); -} - -interface CompletionContentProps { - step: number; - showInfoMessage: boolean; -} - -function CompletionContent(props: CompletionContentProps) { - const [showSuccess, setShowSuccess] = useState(!props.showInfoMessage); - const [showSuccessButton, setShowSuccessButton] = useState(false); - const info = Steps[props.step].info; - const success = Steps[props.step].success; - const dispatch = useDispatch(); - - const tickMarkRef = useRef(null); - useEffect(() => { - if (showSuccess) { - const anim = lazyLottie.loadAnimation({ - path: tickMarkAnimationURL, - autoplay: true, - container: tickMarkRef?.current as HTMLDivElement, - renderer: "svg", - loop: false, - }); - - return () => { - anim.destroy(); - }; - } - }, [tickMarkRef?.current, showSuccess]); - - const onSuccessButtonClick = () => { - setShowSuccess(false); - success?.onClick && success?.onClick(dispatch); - - if (info) { - // We skip showing success message again - dispatch(showInfoMessage()); - } - }; - - useEffect(() => { - if (success?.timed && showSuccess) { - setTimeout(() => { - setShowSuccessButton(true); - }, 2000); - } - }, [success?.timed, showSuccess]); - - const onInfoButtonClick = () => { - info?.onClick(dispatch); - }; - - if (showSuccess) { - return ( - -
-
-
- - {Steps[props.step].success?.text} - - {/* Show the button after a delay */} - - {success?.buttonText ?? createMessage(CONTINUE)} - -
-
- - ); - } else { - return ( - -
- {info?.icon && ( - - )} - {info?.text} - - {info?.buttonText ?? createMessage(PROCEED_TO_NEXT_STEP)} - -
-
- ); - } -} - -export interface GuideBody { - exploring: boolean; - step: number; - showInfoMessage: boolean; -} - -function GuideBody(props: GuideBody) { - const successMessage = useSelector(showSuccessMessage); - - if (props.exploring) { - return ; - } else if (successMessage || props.showInfoMessage) { - return ( - - ); - } else { - return ( - - ); - } -} - -interface GuideProps { - className?: string; -} -// Guided tour steps -function Guide(props: GuideProps) { - const exploring = useSelector(isExploringSelector); - const step = useSelector(getCurrentStep); - const showInfoMessage = useSelector(showInfoMessageSelector); - - return ( - - - - - - - - ); -} - -export default Guide; diff --git a/app/client/src/pages/Editor/GuidedTour/TourCompletionMessage.tsx b/app/client/src/pages/Editor/GuidedTour/TourCompletionMessage.tsx deleted file mode 100644 index 75bac32424..0000000000 --- a/app/client/src/pages/Editor/GuidedTour/TourCompletionMessage.tsx +++ /dev/null @@ -1,160 +0,0 @@ -import React, { useEffect, useState } from "react"; -import styled from "styled-components"; -import Rating from "react-rating"; -import { Button, Icon, Text } from "design-system"; -import { - getPostWelcomeTourState, - setPostWelcomeTourState, -} from "utils/storage"; -import { getQueryParams } from "utils/URLUtils"; -import { useDispatch } from "react-redux"; -import { showPostCompletionMessage } from "actions/onboardingActions"; -import AnalyticsUtil from "utils/AnalyticsUtil"; -import { - createMessage, - END_BUTTON_TEXT, - END_DESCRIPTION, - END_TITLE, - RATING_DESCRIPTION, - RATING_TEXT, - RATING_TITLE, -} from "@appsmith/constants/messages"; -import history from "utils/history"; -import { APPLICATIONS_URL } from "constants/routes"; - -const Container = styled.div` - background-color: var(--ads-v2-color-bg-success); - padding: var(--ads-v2-spaces-5); - width: 100%; -`; - -const Wrapper = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - .title { - color: var(--ads-v2-color-fg-emphasis); - } -`; - -const Confetti = styled.span` - font-size: 30px; - margin-right: var(--ads-v2-spaces-5); -`; - -const Description = styled.div` - font-size: 14px; - line-height: 16px; - margin-top: var(--ads-v2-spaces-2); -`; - -const RatingText = styled.span` - /* color: #000000; */ -`; - -const RatingWrapper = styled.div` - display: flex; - align-items: center; - - .star { - padding: 0 5px; - } -`; - -const Left = styled.div` - display: flex; -`; - -function CongratulationsView() { - const [ratingComplete, setRatingComplete] = useState(false); - const [show, setShow] = useState(false); - const dispatch = useDispatch(); - - const onValueChanged = (value: number) => { - AnalyticsUtil.logEvent("GUIDED_TOUR_RATING", { - rating: value, - }); - setRatingComplete(true); - }; - - useEffect(() => { - const inPostCompletionState = async () => { - const postCompletionMessage = await getPostWelcomeTourState(); - const queryParams = getQueryParams(); - - if (queryParams.guidedTourComplete === "true" && postCompletionMessage) { - setShow(true); - dispatch(showPostCompletionMessage(true)); - } - }; - - inPostCompletionState(); - }, [dispatch]); - - const hideMessage = () => { - setShow(false); - dispatch(showPostCompletionMessage(false)); - setPostWelcomeTourState(false); - history.push(APPLICATIONS_URL); - }; - - if (!show) return null; - - if (!ratingComplete) { - return ( - - - - 🎉 -
- - {createMessage(RATING_TITLE)} - - {createMessage(RATING_DESCRIPTION)} -
-
- - {createMessage(RATING_TEXT)} - - } - fullSymbol={ - - } - onChange={onValueChanged} - /> - -
-
- ); - } else { - return ( - - -
- - {createMessage(END_TITLE)} - - {createMessage(END_DESCRIPTION)} -
- -
-
- ); - } -} - -export default CongratulationsView; diff --git a/app/client/src/pages/Editor/GuidedTour/app.json b/app/client/src/pages/Editor/GuidedTour/app.json deleted file mode 100644 index a0fa7d39ac..0000000000 --- a/app/client/src/pages/Editor/GuidedTour/app.json +++ /dev/null @@ -1,1894 +0,0 @@ -{ - "clientSchemaVersion": 1.0, - "serverSchemaVersion": 6.0, - "exportedApplication": { - "name": "Customer Support Dashboard", - "isPublic": false, - "pages": [{ "id": "Page1", "isDefault": true }], - "publishedPages": [{ "id": "Page1", "isDefault": true }], - "viewMode": false, - "appIsExample": false, - "unreadCommentThreads": 0.0, - "clonedFromApplicationId": "62b334e22ff7e42f71a2a124", - "color": "#F5D1D1", - "icon": "line-chart", - "slug": "customer-support-dashboard", - "unpublishedAppLayout": { "type": "DESKTOP" }, - "publishedAppLayout": { "type": "DESKTOP" }, - "applicationVersion": 2.0, - "isManualUpdate": false, - "deleted": false - }, - "datasourceList": [ - { - "name": "Users", - "pluginId": "postgres-plugin", - "datasourceConfiguration": { - "connection": { - "mode": "READ_WRITE", - "ssl": { "authType": "DEFAULT" } - }, - "endpoints": [{ "host": "mockdb.internal.appsmith.com" }], - "authentication": { - "username": "users", - "password": "new-users-db-pass", - "databaseName": "users" - } - }, - "messages": [], - "isAutoGenerated": false, - "deleted": false, - "gitSyncId": "62b3019260456831ead4d041_62b32d47c074aa6fdd7edb56" - } - ], - "pageList": [ - { - "unpublishedPage": { - "name": "Page1", - "slug": "page1", - "layouts": [ - { - "viewMode": false, - "dsl": { - "widgetName": "MainContainer", - "backgroundColor": "none", - "rightColumn": 1160.0, - "snapColumns": 64.0, - "detachFromLayout": true, - "widgetId": "0", - "topRow": 0.0, - "bottomRow": 760.0, - "containerStyle": "none", - "snapRows": 125.0, - "parentRowSpace": 1.0, - "type": "CANVAS_WIDGET", - "canExtend": true, - "version": 67.0, - "minHeight": 740.0, - "parentColumnSpace": 1.0, - "dynamicBindingPathList": [], - "leftColumn": 0.0, - "children": [ - { - "boxShadow": "none", - "widgetName": "Text1", - "dynamicPropertyPathList": [{ "key": "fontSize" }], - "topRow": 3.0, - "bottomRow": 7.0, - "parentRowSpace": 40.0, - "type": "TEXT_WIDGET", - "parentColumnSpace": 74.0, - "dynamicTriggerPathList": [], - "overflow": "NONE", - "fontFamily": "System Default", - "leftColumn": 0.0, - "dynamicBindingPathList": [], - "text": "\uD83D\uDC6B Customers", - "labelTextSize": "0.875rem", - "rightColumn": 12.0, - "textAlign": "LEFT", - "widgetId": "uhe8hpkvld", - "isVisible": true, - "fontStyle": "BOLD", - "version": 1.0, - "textColor": "#231F20", - "parentId": "0", - "isLoading": false, - "borderRadius": "0px", - "fontSize": "1.5rem" - }, - { - "boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}", - "widgetName": "CustomersInfo", - "borderColor": "transparent", - "isCanvas": true, - "displayName": "Container", - "iconSVG": "/static/media/icon.1977dca3370505e2db3a8e44cfd54907.svg", - "searchTags": ["div", "parent", "group"], - "topRow": 7.0, - "bottomRow": 37.0, - "type": "CONTAINER_WIDGET", - "hideCard": false, - "animateLoading": true, - "leftColumn": 35.0, - "dynamicBindingPathList": [ - { "key": "borderRadius" }, - { "key": "boxShadow" } - ], - "children": [ - { - "boxShadow": "none", - "widgetName": "Canvas1", - "displayName": "Canvas", - "topRow": 0.0, - "bottomRow": 290.0, - "parentRowSpace": 1.0, - "type": "CANVAS_WIDGET", - "canExtend": false, - "hideCard": true, - "parentColumnSpace": 1.0, - "leftColumn": 0.0, - "dynamicBindingPathList": [ - { "key": "borderRadius" }, - { "key": "accentColor" } - ], - "children": [ - { - "widgetName": "Text2", - "displayName": "Text", - "iconSVG": "/static/media/icon.97c59b523e6f70ba6f40a10fc2c7c5b5.svg", - "searchTags": ["typography", "paragraph"], - "topRow": 1.0, - "bottomRow": 5.0, - "type": "TEXT_WIDGET", - "hideCard": false, - "animateLoading": true, - "overflow": "NONE", - "fontFamily": "{{appsmith.theme.fontFamily.appFont}}", - "leftColumn": 1.0, - "dynamicBindingPathList": [ - { "key": "fontFamily" }, - { "key": "borderRadius" } - ], - "shouldTruncate": false, - "truncateButtonColor": "#FFC13D", - "text": "\uD83D\uDC68‍\uD83D\uDCBC Customer Update Form", - "key": "x7doiqjz3h", - "isDeprecated": false, - "rightColumn": 49.0, - "textAlign": "LEFT", - "widgetId": "4tb7ep0t5t", - "isVisible": true, - "fontStyle": "BOLD", - "textColor": "#231F20", - "version": 1.0, - "parentId": "78koet28ym", - "renderMode": "CANVAS", - "isLoading": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "fontSize": "HEADING2" - }, - { - "boxShadow": "none", - "widgetName": "DisplayImage", - "displayName": "Image", - "iconSVG": "/static/media/icon.52d8fb963abcb95c79b10f1553389f22.svg", - "topRow": 6.0, - "bottomRow": 18.0, - "type": "IMAGE_WIDGET", - "hideCard": false, - "animateLoading": true, - "dynamicTriggerPathList": [], - "imageShape": "RECTANGLE", - "leftColumn": 1.0, - "dynamicBindingPathList": [ - { "key": "borderRadius" }, - { "key": "image" } - ], - "defaultImage": "https://assets.appsmith.com/widgets/default.png", - "key": "bovvaz5au0", - "image": "{{CustomersTable.selectedRow.image}}", - "isDeprecated": false, - "rightColumn": 17.0, - "objectFit": "contain", - "widgetId": "wshrhb5wyi", - "isVisible": true, - "version": 1.0, - "parentId": "78koet28ym", - "renderMode": "CANVAS", - "isLoading": false, - "maxZoomLevel": 1.0, - "enableDownload": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "enableRotation": false - }, - { - "widgetName": "Text3", - "displayName": "Text", - "iconSVG": "/static/media/icon.97c59b523e6f70ba6f40a10fc2c7c5b5.svg", - "searchTags": ["typography", "paragraph"], - "topRow": 6.0, - "bottomRow": 10.0, - "type": "TEXT_WIDGET", - "hideCard": false, - "animateLoading": true, - "overflow": "NONE", - "fontFamily": "{{appsmith.theme.fontFamily.appFont}}", - "leftColumn": 19.0, - "dynamicBindingPathList": [ - { "key": "fontFamily" }, - { "key": "borderRadius" } - ], - "shouldTruncate": false, - "truncateButtonColor": "#FFC13D", - "text": "Name", - "key": "x7doiqjz3h", - "isDeprecated": false, - "rightColumn": 27.0, - "textAlign": "LEFT", - "widgetId": "ou8abxo13d", - "isVisible": true, - "fontStyle": "BOLD", - "textColor": "#231F20", - "version": 1.0, - "parentId": "78koet28ym", - "renderMode": "CANVAS", - "isLoading": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "fontSize": "PARAGRAPH" - }, - { - "boxShadow": "none", - "widgetName": "NameInput", - "displayName": "Input", - "iconSVG": "/static/media/icon.9f505595da61a34f563dba82adeb06ec.svg", - "searchTags": [ - "form", - "text input", - "number", - "textarea" - ], - "topRow": 6.0, - "bottomRow": 10.0, - "labelWidth": 5.0, - "autoFocus": false, - "type": "INPUT_WIDGET_V2", - "hideCard": false, - "animateLoading": true, - "dynamicTriggerPathList": [], - "resetOnSubmit": true, - "leftColumn": 30.0, - "dynamicBindingPathList": [ - { "key": "accentColor" }, - { "key": "borderRadius" }, - { "key": "defaultText" } - ], - "labelPosition": "Left", - "labelStyle": "", - "inputType": "TEXT", - "isDisabled": false, - "key": "3u8om3xz0h", - "labelTextSize": "0.875rem", - "isRequired": false, - "isDeprecated": false, - "rightColumn": 62.0, - "widgetId": "rc40v2t8np", - "accentColor": "{{appsmith.theme.colors.primaryColor}}", - "isVisible": true, - "label": "", - "version": 2.0, - "parentId": "78koet28ym", - "labelAlignment": "left", - "renderMode": "CANVAS", - "isLoading": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "iconAlign": "left", - "defaultText": "{{CustomersTable.selectedRow.name}}" - }, - { - "widgetName": "Text4", - "displayName": "Text", - "iconSVG": "/static/media/icon.97c59b523e6f70ba6f40a10fc2c7c5b5.svg", - "searchTags": ["typography", "paragraph"], - "topRow": 10.0, - "bottomRow": 14.0, - "type": "TEXT_WIDGET", - "hideCard": false, - "animateLoading": true, - "overflow": "NONE", - "fontFamily": "{{appsmith.theme.fontFamily.appFont}}", - "leftColumn": 19.0, - "dynamicBindingPathList": [ - { "key": "fontFamily" }, - { "key": "borderRadius" } - ], - "shouldTruncate": false, - "truncateButtonColor": "#FFC13D", - "text": "Email", - "key": "x7doiqjz3h", - "isDeprecated": false, - "rightColumn": 27.0, - "textAlign": "LEFT", - "widgetId": "25017hjp96", - "isVisible": true, - "fontStyle": "BOLD", - "textColor": "#231F20", - "version": 1.0, - "parentId": "78koet28ym", - "renderMode": "CANVAS", - "isLoading": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "fontSize": "PARAGRAPH" - }, - { - "boxShadow": "none", - "widgetName": "EmailInput", - "displayName": "Input", - "iconSVG": "/static/media/icon.9f505595da61a34f563dba82adeb06ec.svg", - "searchTags": [ - "form", - "text input", - "number", - "textarea" - ], - "topRow": 10.0, - "bottomRow": 14.0, - "labelWidth": 5.0, - "autoFocus": false, - "type": "INPUT_WIDGET_V2", - "hideCard": false, - "animateLoading": true, - "dynamicTriggerPathList": [], - "resetOnSubmit": true, - "leftColumn": 30.0, - "dynamicBindingPathList": [ - { "key": "accentColor" }, - { "key": "borderRadius" }, - { "key": "defaultText" } - ], - "labelPosition": "Left", - "labelStyle": "", - "inputType": "TEXT", - "isDisabled": false, - "key": "3u8om3xz0h", - "labelTextSize": "0.875rem", - "isRequired": false, - "isDeprecated": false, - "rightColumn": 62.0, - "widgetId": "v1hjfgrj07", - "accentColor": "{{appsmith.theme.colors.primaryColor}}", - "isVisible": true, - "label": "", - "version": 2.0, - "parentId": "78koet28ym", - "labelAlignment": "left", - "renderMode": "CANVAS", - "isLoading": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "iconAlign": "left", - "defaultText": "{{CustomersTable.selectedRow.email}}" - }, - { - "widgetName": "Text5", - "displayName": "Text", - "iconSVG": "/static/media/icon.97c59b523e6f70ba6f40a10fc2c7c5b5.svg", - "searchTags": ["typography", "paragraph"], - "topRow": 14.0, - "bottomRow": 18.0, - "type": "TEXT_WIDGET", - "hideCard": false, - "animateLoading": true, - "overflow": "NONE", - "fontFamily": "{{appsmith.theme.fontFamily.appFont}}", - "leftColumn": 19.0, - "dynamicBindingPathList": [ - { "key": "fontFamily" }, - { "key": "borderRadius" } - ], - "shouldTruncate": false, - "truncateButtonColor": "#FFC13D", - "text": "Country", - "key": "x7doiqjz3h", - "isDeprecated": false, - "rightColumn": 29.0, - "textAlign": "LEFT", - "widgetId": "hqatwp9gvw", - "isVisible": true, - "fontStyle": "BOLD", - "textColor": "#231F20", - "version": 1.0, - "parentId": "78koet28ym", - "renderMode": "CANVAS", - "isLoading": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "fontSize": "PARAGRAPH" - }, - { - "boxShadow": "none", - "widgetName": "CountryInput", - "displayName": "Input", - "iconSVG": "/static/media/icon.9f505595da61a34f563dba82adeb06ec.svg", - "searchTags": [ - "form", - "text input", - "number", - "textarea" - ], - "topRow": 14.0, - "bottomRow": 18.0, - "labelWidth": 5.0, - "autoFocus": false, - "type": "INPUT_WIDGET_V2", - "hideCard": false, - "animateLoading": true, - "dynamicTriggerPathList": [], - "resetOnSubmit": true, - "leftColumn": 30.0, - "dynamicBindingPathList": [ - { "key": "accentColor" }, - { "key": "borderRadius" }, - { "key": "defaultText" } - ], - "labelPosition": "Left", - "labelStyle": "", - "inputType": "TEXT", - "isDisabled": false, - "key": "3u8om3xz0h", - "labelTextSize": "0.875rem", - "isRequired": false, - "isDeprecated": false, - "rightColumn": 62.0, - "widgetId": "moka7z9ch7", - "accentColor": "{{appsmith.theme.colors.primaryColor}}", - "isVisible": true, - "label": "", - "version": 2.0, - "parentId": "78koet28ym", - "labelAlignment": "left", - "renderMode": "CANVAS", - "isLoading": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "iconAlign": "left", - "defaultText": "{{CustomersTable.selectedRow.country}}" - }, - { - "boxShadow": "none", - "widgetName": "UpdateButton", - "onClick": "{{updateCustomerInfo.run(() => getCustomers.run(), () => {})}}", - "buttonColor": "{{appsmith.theme.colors.primaryColor}}", - "displayName": "Button", - "iconSVG": "/static/media/icon.cca026338f1c8eb6df8ba03d084c2fca.svg", - "searchTags": ["click", "submit"], - "topRow": 22.0, - "bottomRow": 27.0, - "parentRowSpace": 10.0, - "type": "BUTTON_WIDGET", - "hideCard": false, - "animateLoading": true, - "parentColumnSpace": 17.9375, - "dynamicTriggerPathList": [{ "key": "onClick" }], - "leftColumn": 1.0, - "dynamicBindingPathList": [ - { "key": "buttonColor" }, - { "key": "borderRadius" } - ], - "text": "Click to Update", - "isDisabled": false, - "key": "9l48tn25u6", - "isDeprecated": false, - "rightColumn": 25.0, - "isDefaultClickDisabled": true, - "widgetId": "aa8y9tf0yu", - "isVisible": true, - "recaptchaType": "V3", - "version": 1.0, - "parentId": "78koet28ym", - "renderMode": "CANVAS", - "isLoading": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "buttonVariant": "PRIMARY", - "placement": "CENTER" - } - ], - "key": "2htqwre5lx", - "isDeprecated": false, - "detachFromLayout": true, - "widgetId": "78koet28ym", - "accentColor": "{{appsmith.theme.colors.primaryColor}}", - "containerStyle": "none", - "isVisible": true, - "version": 1.0, - "parentId": "ikwrazl0u8", - "renderMode": "CANVAS", - "isLoading": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}" - } - ], - "borderWidth": "0", - "key": "bm3ntdcmxe", - "backgroundColor": "#FFFFFF", - "isDeprecated": false, - "rightColumn": 64.0, - "widgetId": "ikwrazl0u8", - "containerStyle": "card", - "isVisible": true, - "version": 1.0, - "parentId": "0", - "renderMode": "CANVAS", - "isLoading": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}" - }, - { - "boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}", - "borderColor": "#E0DEDE", - "isVisibleDownload": true, - "iconSVG": "/static/media/icon.db8a9cbd2acd22a31ea91cc37ea2a46c.svg", - "topRow": 7.0, - "isSortable": true, - "type": "TABLE_WIDGET_V2", - "inlineEditingSaveOption": "ROW_LEVEL", - "animateLoading": true, - "dynamicBindingPathList": [ - { "key": "accentColor" }, - { "key": "borderRadius" }, - { "key": "boxShadow" }, - { "key": "childStylesheet.button.buttonColor" }, - { "key": "childStylesheet.button.borderRadius" }, - { "key": "childStylesheet.menuButton.menuColor" }, - { "key": "childStylesheet.menuButton.borderRadius" }, - { "key": "childStylesheet.iconButton.buttonColor" }, - { "key": "childStylesheet.iconButton.borderRadius" }, - { "key": "childStylesheet.editActions.saveButtonColor" }, - { "key": "childStylesheet.editActions.saveBorderRadius" }, - { "key": "childStylesheet.editActions.discardButtonColor" }, - { - "key": "childStylesheet.editActions.discardBorderRadius" - }, - { "key": "tableData" }, - { "key": "primaryColumns.id.computedValue" }, - { "key": "primaryColumns.gender.computedValue" }, - { "key": "primaryColumns.latitude.computedValue" }, - { "key": "primaryColumns.longitude.computedValue" }, - { "key": "primaryColumns.dob.computedValue" }, - { "key": "primaryColumns.phone.computedValue" }, - { "key": "primaryColumns.email.computedValue" }, - { "key": "primaryColumns.image.computedValue" }, - { "key": "primaryColumns.country.computedValue" }, - { "key": "primaryColumns.name.computedValue" } - ], - "leftColumn": 0.0, - "delimiter": ",", - "defaultSelectedRowIndex": 0.0, - "accentColor": "{{appsmith.theme.colors.primaryColor}}", - "isVisibleFilters": true, - "isVisible": true, - "enableClientSideSearch": true, - "version": 1.0, - "totalRecordsCount": 0.0, - "isLoading": false, - "childStylesheet": { - "button": { - "buttonColor": "{{appsmith.theme.colors.primaryColor}}", - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "boxShadow": "none" - }, - "menuButton": { - "menuColor": "{{appsmith.theme.colors.primaryColor}}", - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "boxShadow": "none" - }, - "iconButton": { - "buttonColor": "{{appsmith.theme.colors.primaryColor}}", - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "boxShadow": "none" - }, - "editActions": { - "saveButtonColor": "{{appsmith.theme.colors.primaryColor}}", - "saveBorderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "discardButtonColor": "{{appsmith.theme.colors.primaryColor}}", - "discardBorderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}" - } - }, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "defaultSelectedRowIndices": [0.0], - "widgetName": "CustomersTable", - "defaultPageSize": 0.0, - "columnOrder": [ - "id", - "name", - "email", - "country", - "gender", - "latitude", - "longitude", - "dob", - "phone", - "image" - ], - "displayName": "Table", - "bottomRow": 68.0, - "columnWidthMap": { - "task": 245.0, - "step": 62.0, - "status": 75.0, - "id": 60.0, - "email": 248.0 - }, - "parentRowSpace": 10.0, - "hideCard": false, - "parentColumnSpace": 17.9375, - "dynamicTriggerPathList": [], - "borderWidth": "1", - "primaryColumns": { - "id": { - "allowCellWrapping": false, - "index": 0.0, - "width": 150.0, - "originalId": "id", - "id": "id", - "alias": "id", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "number", - "textSize": "0.875rem", - "enableFilter": true, - "enableSort": true, - "isVisible": true, - "isDisabled": false, - "isCellEditable": false, - "isEditable": false, - "isCellVisible": true, - "isDerived": false, - "label": "id", - "isSaveVisible": true, - "isDiscardVisible": true, - "computedValue": "{{CustomersTable.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"id\"]))}}", - "validation": {} - }, - "gender": { - "allowCellWrapping": false, - "index": 1.0, - "width": 150.0, - "originalId": "gender", - "id": "gender", - "alias": "gender", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "0.875rem", - "enableFilter": true, - "enableSort": true, - "isVisible": false, - "isDisabled": false, - "isCellEditable": false, - "isEditable": false, - "isCellVisible": true, - "isDerived": false, - "label": "gender", - "isSaveVisible": true, - "isDiscardVisible": true, - "computedValue": "{{CustomersTable.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"gender\"]))}}", - "validation": {} - }, - "latitude": { - "allowCellWrapping": false, - "index": 2.0, - "width": 150.0, - "originalId": "latitude", - "id": "latitude", - "alias": "latitude", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "0.875rem", - "enableFilter": true, - "enableSort": true, - "isVisible": false, - "isDisabled": false, - "isCellEditable": false, - "isEditable": false, - "isCellVisible": true, - "isDerived": false, - "label": "latitude", - "isSaveVisible": true, - "isDiscardVisible": true, - "computedValue": "{{CustomersTable.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"latitude\"]))}}", - "validation": {} - }, - "longitude": { - "allowCellWrapping": false, - "index": 3.0, - "width": 150.0, - "originalId": "longitude", - "id": "longitude", - "alias": "longitude", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "0.875rem", - "enableFilter": true, - "enableSort": true, - "isVisible": false, - "isDisabled": false, - "isCellEditable": false, - "isEditable": false, - "isCellVisible": true, - "isDerived": false, - "label": "longitude", - "isSaveVisible": true, - "isDiscardVisible": true, - "computedValue": "{{CustomersTable.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"longitude\"]))}}", - "validation": {} - }, - "dob": { - "allowCellWrapping": false, - "index": 4.0, - "width": 150.0, - "originalId": "dob", - "id": "dob", - "alias": "dob", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "date", - "textSize": "0.875rem", - "enableFilter": true, - "enableSort": true, - "isVisible": false, - "isDisabled": false, - "isCellEditable": false, - "isEditable": false, - "isCellVisible": true, - "isDerived": false, - "label": "dob", - "isSaveVisible": true, - "isDiscardVisible": true, - "computedValue": "{{CustomersTable.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"dob\"]))}}", - "validation": {} - }, - "phone": { - "allowCellWrapping": false, - "index": 5.0, - "width": 150.0, - "originalId": "phone", - "id": "phone", - "alias": "phone", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "0.875rem", - "enableFilter": true, - "enableSort": true, - "isVisible": false, - "isDisabled": false, - "isCellEditable": false, - "isEditable": false, - "isCellVisible": true, - "isDerived": false, - "label": "phone", - "isSaveVisible": true, - "isDiscardVisible": true, - "computedValue": "{{CustomersTable.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"phone\"]))}}", - "validation": {} - }, - "email": { - "allowCellWrapping": false, - "index": 6.0, - "width": 150.0, - "originalId": "email", - "id": "email", - "alias": "email", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "0.875rem", - "enableFilter": true, - "enableSort": true, - "isVisible": true, - "isDisabled": false, - "isCellEditable": false, - "isEditable": false, - "isCellVisible": true, - "isDerived": false, - "label": "email", - "isSaveVisible": true, - "isDiscardVisible": true, - "computedValue": "{{CustomersTable.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"email\"]))}}", - "validation": {} - }, - "image": { - "allowCellWrapping": false, - "index": 7.0, - "width": 150.0, - "originalId": "image", - "id": "image", - "alias": "image", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "0.875rem", - "enableFilter": true, - "enableSort": true, - "isVisible": false, - "isDisabled": false, - "isCellEditable": false, - "isEditable": false, - "isCellVisible": true, - "isDerived": false, - "label": "image", - "isSaveVisible": true, - "isDiscardVisible": true, - "computedValue": "{{CustomersTable.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"image\"]))}}", - "validation": {} - }, - "country": { - "allowCellWrapping": false, - "index": 8.0, - "width": 150.0, - "originalId": "country", - "id": "country", - "alias": "country", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "0.875rem", - "enableFilter": true, - "enableSort": true, - "isVisible": true, - "isDisabled": false, - "isCellEditable": false, - "isEditable": false, - "isCellVisible": true, - "isDerived": false, - "label": "country", - "isSaveVisible": true, - "isDiscardVisible": true, - "computedValue": "{{CustomersTable.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"country\"]))}}", - "validation": {} - }, - "name": { - "allowCellWrapping": false, - "index": 9.0, - "width": 150.0, - "originalId": "name", - "id": "name", - "alias": "name", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "0.875rem", - "enableFilter": true, - "enableSort": true, - "isVisible": true, - "isDisabled": false, - "isCellEditable": false, - "isEditable": false, - "isCellVisible": true, - "isDerived": false, - "label": "name", - "isSaveVisible": true, - "isDiscardVisible": true, - "computedValue": "{{CustomersTable.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"name\"]))}}", - "validation": {} - } - }, - "key": "hlupn299rl", - "isDeprecated": false, - "rightColumn": 34.0, - "textSize": "0.875rem", - "widgetId": "aqpqbznlzl", - "tableData": "{{getCustomers.data}}", - "dynamicPropertyPathList": [{ "key": "tableData" }], - "label": "Data", - "searchKey": "", - "parentId": "0", - "renderMode": "CANVAS", - "horizontalAlignment": "LEFT", - "isVisibleSearch": true, - "isVisiblePagination": true, - "verticalAlignment": "CENTER" - } - ] - }, - "layoutOnLoadActions": [ - [ - { - "id": "Page1_getCustomers", - "name": "getCustomers", - "confirmBeforeExecute": false, - "pluginType": "DB", - "jsonPathKeys": [], - "timeoutInMillisecond": 10000.0 - } - ] - ], - "layoutOnLoadActionErrors": [], - "validOnPageLoadActions": true, - "id": "Page1", - "deleted": false, - "policies": [], - "userPermissions": [] - } - ], - "userPermissions": [], - "policies": [] - }, - "publishedPage": { - "name": "Page1", - "slug": "page1", - "layouts": [ - { - "viewMode": false, - "dsl": { - "widgetName": "MainContainer", - "backgroundColor": "none", - "rightColumn": 1160.0, - "snapColumns": 64.0, - "detachFromLayout": true, - "widgetId": "0", - "topRow": 0.0, - "bottomRow": 760.0, - "containerStyle": "none", - "snapRows": 125.0, - "parentRowSpace": 1.0, - "type": "CANVAS_WIDGET", - "canExtend": true, - "version": 59.0, - "minHeight": 740.0, - "parentColumnSpace": 1.0, - "dynamicBindingPathList": [], - "leftColumn": 0.0, - "children": [ - { - "boxShadow": "none", - "widgetName": "Text1", - "dynamicPropertyPathList": [{ "key": "fontSize" }], - "topRow": 3.0, - "bottomRow": 7.0, - "parentRowSpace": 40.0, - "type": "TEXT_WIDGET", - "parentColumnSpace": 74.0, - "dynamicTriggerPathList": [], - "overflow": "NONE", - "fontFamily": "System Default", - "leftColumn": 0.0, - "dynamicBindingPathList": [], - "text": "\uD83D\uDC6B Customers", - "labelTextSize": "0.875rem", - "rightColumn": 12.0, - "textAlign": "LEFT", - "widgetId": "uhe8hpkvld", - "isVisible": true, - "fontStyle": "BOLD", - "version": 1.0, - "textColor": "#231F20", - "parentId": "0", - "isLoading": false, - "borderRadius": "0px", - "fontSize": "1.5rem" - }, - { - "boxShadow": "none", - "widgetName": "CustomersTable", - "defaultPageSize": 0.0, - "columnOrder": [ - "id", - "name", - "email", - "country", - "gender", - "latitude", - "longitude", - "dob", - "phone", - "image" - ], - "isVisibleDownload": true, - "dynamicPropertyPathList": [], - "displayName": "Table", - "iconSVG": "/static/media/icon.db8a9cbd.svg", - "topRow": 7.0, - "bottomRow": 67.0, - "parentRowSpace": 10.0, - "isSortable": true, - "type": "TABLE_WIDGET", - "animateLoading": true, - "defaultSelectedRow": "0", - "hideCard": false, - "parentColumnSpace": 17.28125, - "dynamicTriggerPathList": [ - { "key": "onRowSelected" }, - { "key": "onSearchTextChanged" } - ], - "dynamicBindingPathList": [ - { "key": "primaryColumns.id.computedValue" }, - { "key": "primaryColumns.name.computedValue" }, - { "key": "primaryColumns.gender.computedValue" }, - { "key": "primaryColumns.latitude.computedValue" }, - { "key": "primaryColumns.longitude.computedValue" }, - { "key": "primaryColumns.dob.computedValue" }, - { "key": "primaryColumns.phone.computedValue" }, - { "key": "primaryColumns.email.computedValue" }, - { "key": "primaryColumns.image.computedValue" }, - { "key": "primaryColumns.country.computedValue" }, - { "key": "accentColor" }, - { "key": "tableData" } - ], - "leftColumn": 0.0, - "primaryColumns": { - "id": { - "index": 0.0, - "width": 150.0, - "id": "id", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "0.875rem", - "enableFilter": true, - "enableSort": true, - "isVisible": true, - "isDisabled": false, - "isCellVisible": true, - "isDerived": false, - "label": "id", - "computedValue": "{{CustomersTable.sanitizedTableData.map((currentRow) => ( currentRow.id))}}", - "borderRadius": "0px", - "boxShadow": "none" - }, - "name": { - "index": 1.0, - "width": 150.0, - "id": "name", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "0.875rem", - "enableFilter": true, - "enableSort": true, - "isVisible": true, - "isDisabled": false, - "isCellVisible": true, - "isDerived": false, - "label": "name", - "computedValue": "{{CustomersTable.sanitizedTableData.map((currentRow) => ( currentRow.name))}}", - "borderRadius": "0px", - "boxShadow": "none" - }, - "gender": { - "index": 1.0, - "width": 150.0, - "id": "gender", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "0.875rem", - "enableFilter": true, - "enableSort": true, - "isVisible": false, - "isDisabled": false, - "isCellVisible": true, - "isDerived": false, - "label": "gender", - "computedValue": "{{CustomersTable.sanitizedTableData.map((currentRow) => ( currentRow.gender))}}", - "borderRadius": "0px", - "boxShadow": "none" - }, - "latitude": { - "index": 2.0, - "width": 150.0, - "id": "latitude", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "0.875rem", - "enableFilter": true, - "enableSort": true, - "isVisible": false, - "isDisabled": false, - "isCellVisible": true, - "isDerived": false, - "label": "latitude", - "computedValue": "{{CustomersTable.sanitizedTableData.map((currentRow) => ( currentRow.latitude))}}", - "borderRadius": "0px", - "boxShadow": "none" - }, - "longitude": { - "index": 3.0, - "width": 150.0, - "id": "longitude", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "0.875rem", - "enableFilter": true, - "enableSort": true, - "isVisible": false, - "isDisabled": false, - "isCellVisible": true, - "isDerived": false, - "label": "longitude", - "computedValue": "{{CustomersTable.sanitizedTableData.map((currentRow) => ( currentRow.longitude))}}", - "borderRadius": "0px", - "boxShadow": "none" - }, - "dob": { - "index": 4.0, - "width": 150.0, - "id": "dob", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "0.875rem", - "enableFilter": true, - "enableSort": true, - "isVisible": false, - "isDisabled": false, - "isCellVisible": true, - "isDerived": false, - "label": "dob", - "computedValue": "{{CustomersTable.sanitizedTableData.map((currentRow) => ( currentRow.dob))}}", - "borderRadius": "0px", - "boxShadow": "none" - }, - "phone": { - "index": 5.0, - "width": 150.0, - "id": "phone", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "0.875rem", - "enableFilter": true, - "enableSort": true, - "isVisible": false, - "isDisabled": false, - "isCellVisible": true, - "isDerived": false, - "label": "phone", - "computedValue": "{{CustomersTable.sanitizedTableData.map((currentRow) => ( currentRow.phone))}}", - "borderRadius": "0px", - "boxShadow": "none" - }, - "email": { - "index": 6.0, - "width": 150.0, - "id": "email", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "0.875rem", - "enableFilter": true, - "enableSort": true, - "isVisible": true, - "isDisabled": false, - "isCellVisible": true, - "isDerived": false, - "label": "email", - "computedValue": "{{CustomersTable.sanitizedTableData.map((currentRow) => ( currentRow.email))}}", - "borderRadius": "0px", - "boxShadow": "none" - }, - "image": { - "index": 7.0, - "width": 150.0, - "id": "image", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "0.875rem", - "enableFilter": true, - "enableSort": true, - "isVisible": false, - "isDisabled": false, - "isCellVisible": true, - "isDerived": false, - "label": "image", - "computedValue": "{{CustomersTable.sanitizedTableData.map((currentRow) => ( currentRow.image))}}", - "borderRadius": "0px", - "boxShadow": "none" - }, - "country": { - "index": 8.0, - "width": 150.0, - "id": "country", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "0.875rem", - "enableFilter": true, - "enableSort": true, - "isVisible": true, - "isDisabled": false, - "isCellVisible": true, - "isDerived": false, - "label": "country", - "computedValue": "{{CustomersTable.sanitizedTableData.map((currentRow) => ( currentRow.country))}}", - "borderRadius": "0px", - "boxShadow": "none" - } - }, - "delimiter": ",", - "onRowSelected": "", - "key": "gsiv88orej", - "derivedColumns": {}, - "labelTextSize": "0.875rem", - "rightColumn": 34.0, - "textSize": "0.875rem", - "widgetId": "rsrxzwk730", - "accentColor": "{{appsmith.theme.colors.primaryColor}}", - "isVisibleFilters": true, - "tableData": "{{getCustomers.data}}", - "isVisible": true, - "label": "Data", - "searchKey": "", - "version": 3.0, - "totalRecordsCount": 0.0, - "parentId": "0", - "renderMode": "CANVAS", - "isLoading": false, - "onSearchTextChanged": "", - "horizontalAlignment": "LEFT", - "isVisibleSearch": true, - "childStylesheet": { - "button": { - "buttonColor": "{{appsmith.theme.colors.primaryColor}}", - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "boxShadow": "none" - }, - "menuButton": { - "menuColor": "{{appsmith.theme.colors.primaryColor}}", - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "boxShadow": "none" - }, - "iconButton": { - "menuColor": "{{appsmith.theme.colors.primaryColor}}", - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "boxShadow": "none" - } - }, - "borderRadius": "0px", - "isVisiblePagination": true, - "verticalAlignment": "CENTER", - "columnSizeMap": { - "task": 245.0, - "step": 62.0, - "status": 75.0, - "id": 60.0, - "email": 247.0 - } - }, - { - "boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}", - "widgetName": "CustomersInfo", - "borderColor": "transparent", - "isCanvas": true, - "displayName": "Container", - "iconSVG": "/static/media/icon.1977dca3370505e2db3a8e44cfd54907.svg", - "searchTags": ["div", "parent", "group"], - "topRow": 7.0, - "bottomRow": 37.0, - "type": "CONTAINER_WIDGET", - "hideCard": false, - "animateLoading": true, - "leftColumn": 35.0, - "dynamicBindingPathList": [ - { "key": "borderRadius" }, - { "key": "boxShadow" } - ], - "children": [ - { - "boxShadow": "none", - "widgetName": "Canvas1", - "displayName": "Canvas", - "topRow": 0.0, - "bottomRow": 290.0, - "parentRowSpace": 1.0, - "type": "CANVAS_WIDGET", - "canExtend": false, - "hideCard": true, - "parentColumnSpace": 1.0, - "leftColumn": 0.0, - "dynamicBindingPathList": [ - { "key": "borderRadius" }, - { "key": "accentColor" } - ], - "children": [ - { - "widgetName": "Text2", - "displayName": "Text", - "iconSVG": "/static/media/icon.97c59b523e6f70ba6f40a10fc2c7c5b5.svg", - "searchTags": ["typography", "paragraph"], - "topRow": 1.0, - "bottomRow": 5.0, - "type": "TEXT_WIDGET", - "hideCard": false, - "animateLoading": true, - "overflow": "NONE", - "fontFamily": "{{appsmith.theme.fontFamily.appFont}}", - "leftColumn": 1.0, - "dynamicBindingPathList": [ - { "key": "fontFamily" }, - { "key": "borderRadius" } - ], - "shouldTruncate": false, - "truncateButtonColor": "#FFC13D", - "text": "\uD83D\uDC68‍\uD83D\uDCBC Customer Update Form", - "key": "x7doiqjz3h", - "isDeprecated": false, - "rightColumn": 49.0, - "textAlign": "LEFT", - "widgetId": "4tb7ep0t5t", - "isVisible": true, - "fontStyle": "BOLD", - "textColor": "#231F20", - "version": 1.0, - "parentId": "78koet28ym", - "renderMode": "CANVAS", - "isLoading": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "fontSize": "HEADING2" - }, - { - "boxShadow": "none", - "widgetName": "DisplayImage", - "displayName": "Image", - "iconSVG": "/static/media/icon.52d8fb963abcb95c79b10f1553389f22.svg", - "topRow": 6.0, - "bottomRow": 18.0, - "type": "IMAGE_WIDGET", - "hideCard": false, - "animateLoading": true, - "dynamicTriggerPathList": [], - "imageShape": "RECTANGLE", - "leftColumn": 1.0, - "dynamicBindingPathList": [ - { "key": "borderRadius" }, - { "key": "image" } - ], - "defaultImage": "https://assets.appsmith.com/widgets/default.png", - "key": "bovvaz5au0", - "image": "{{CustomersTable.selectedRow.image}}", - "isDeprecated": false, - "rightColumn": 17.0, - "objectFit": "contain", - "widgetId": "wshrhb5wyi", - "isVisible": true, - "version": 1.0, - "parentId": "78koet28ym", - "renderMode": "CANVAS", - "isLoading": false, - "maxZoomLevel": 1.0, - "enableDownload": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "enableRotation": false - }, - { - "widgetName": "Text3", - "displayName": "Text", - "iconSVG": "/static/media/icon.97c59b523e6f70ba6f40a10fc2c7c5b5.svg", - "searchTags": ["typography", "paragraph"], - "topRow": 6.0, - "bottomRow": 10.0, - "type": "TEXT_WIDGET", - "hideCard": false, - "animateLoading": true, - "overflow": "NONE", - "fontFamily": "{{appsmith.theme.fontFamily.appFont}}", - "leftColumn": 19.0, - "dynamicBindingPathList": [ - { "key": "fontFamily" }, - { "key": "borderRadius" } - ], - "shouldTruncate": false, - "truncateButtonColor": "#FFC13D", - "text": "Name", - "key": "x7doiqjz3h", - "isDeprecated": false, - "rightColumn": 27.0, - "textAlign": "LEFT", - "widgetId": "ou8abxo13d", - "isVisible": true, - "fontStyle": "BOLD", - "textColor": "#231F20", - "version": 1.0, - "parentId": "78koet28ym", - "renderMode": "CANVAS", - "isLoading": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "fontSize": "PARAGRAPH" - }, - { - "boxShadow": "none", - "widgetName": "NameInput", - "displayName": "Input", - "iconSVG": "/static/media/icon.9f505595da61a34f563dba82adeb06ec.svg", - "searchTags": [ - "form", - "text input", - "number", - "textarea" - ], - "topRow": 6.0, - "bottomRow": 10.0, - "labelWidth": 5.0, - "autoFocus": false, - "type": "INPUT_WIDGET_V2", - "hideCard": false, - "animateLoading": true, - "dynamicTriggerPathList": [], - "resetOnSubmit": true, - "leftColumn": 30.0, - "dynamicBindingPathList": [ - { "key": "accentColor" }, - { "key": "borderRadius" }, - { "key": "defaultText" } - ], - "labelPosition": "Left", - "labelStyle": "", - "inputType": "TEXT", - "isDisabled": false, - "key": "3u8om3xz0h", - "labelTextSize": "0.875rem", - "isRequired": false, - "isDeprecated": false, - "rightColumn": 62.0, - "widgetId": "rc40v2t8np", - "accentColor": "{{appsmith.theme.colors.primaryColor}}", - "isVisible": true, - "label": "", - "version": 2.0, - "parentId": "78koet28ym", - "labelAlignment": "left", - "renderMode": "CANVAS", - "isLoading": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "iconAlign": "left", - "defaultText": "{{CustomersTable.selectedRow.name}}" - }, - { - "widgetName": "Text4", - "displayName": "Text", - "iconSVG": "/static/media/icon.97c59b523e6f70ba6f40a10fc2c7c5b5.svg", - "searchTags": ["typography", "paragraph"], - "topRow": 10.0, - "bottomRow": 14.0, - "type": "TEXT_WIDGET", - "hideCard": false, - "animateLoading": true, - "overflow": "NONE", - "fontFamily": "{{appsmith.theme.fontFamily.appFont}}", - "leftColumn": 19.0, - "dynamicBindingPathList": [ - { "key": "fontFamily" }, - { "key": "borderRadius" } - ], - "shouldTruncate": false, - "truncateButtonColor": "#FFC13D", - "text": "Email", - "key": "x7doiqjz3h", - "isDeprecated": false, - "rightColumn": 27.0, - "textAlign": "LEFT", - "widgetId": "25017hjp96", - "isVisible": true, - "fontStyle": "BOLD", - "textColor": "#231F20", - "version": 1.0, - "parentId": "78koet28ym", - "renderMode": "CANVAS", - "isLoading": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "fontSize": "PARAGRAPH" - }, - { - "boxShadow": "none", - "widgetName": "EmailInput", - "displayName": "Input", - "iconSVG": "/static/media/icon.9f505595da61a34f563dba82adeb06ec.svg", - "searchTags": [ - "form", - "text input", - "number", - "textarea" - ], - "topRow": 10.0, - "bottomRow": 14.0, - "labelWidth": 5.0, - "autoFocus": false, - "type": "INPUT_WIDGET_V2", - "hideCard": false, - "animateLoading": true, - "dynamicTriggerPathList": [], - "resetOnSubmit": true, - "leftColumn": 30.0, - "dynamicBindingPathList": [ - { "key": "accentColor" }, - { "key": "borderRadius" }, - { "key": "defaultText" } - ], - "labelPosition": "Left", - "labelStyle": "", - "inputType": "TEXT", - "isDisabled": false, - "key": "3u8om3xz0h", - "labelTextSize": "0.875rem", - "isRequired": false, - "isDeprecated": false, - "rightColumn": 62.0, - "widgetId": "v1hjfgrj07", - "accentColor": "{{appsmith.theme.colors.primaryColor}}", - "isVisible": true, - "label": "", - "version": 2.0, - "parentId": "78koet28ym", - "labelAlignment": "left", - "renderMode": "CANVAS", - "isLoading": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "iconAlign": "left", - "defaultText": "{{CustomersTable.selectedRow.email}}" - }, - { - "widgetName": "Text5", - "displayName": "Text", - "iconSVG": "/static/media/icon.97c59b523e6f70ba6f40a10fc2c7c5b5.svg", - "searchTags": ["typography", "paragraph"], - "topRow": 14.0, - "bottomRow": 18.0, - "type": "TEXT_WIDGET", - "hideCard": false, - "animateLoading": true, - "overflow": "NONE", - "fontFamily": "{{appsmith.theme.fontFamily.appFont}}", - "leftColumn": 19.0, - "dynamicBindingPathList": [ - { "key": "fontFamily" }, - { "key": "borderRadius" } - ], - "shouldTruncate": false, - "truncateButtonColor": "#FFC13D", - "text": "Country", - "key": "x7doiqjz3h", - "isDeprecated": false, - "rightColumn": 29.0, - "textAlign": "LEFT", - "widgetId": "hqatwp9gvw", - "isVisible": true, - "fontStyle": "BOLD", - "textColor": "#231F20", - "version": 1.0, - "parentId": "78koet28ym", - "renderMode": "CANVAS", - "isLoading": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "fontSize": "PARAGRAPH" - }, - { - "boxShadow": "none", - "widgetName": "CountryInput", - "displayName": "Input", - "iconSVG": "/static/media/icon.9f505595da61a34f563dba82adeb06ec.svg", - "searchTags": [ - "form", - "text input", - "number", - "textarea" - ], - "topRow": 14.0, - "bottomRow": 18.0, - "labelWidth": 5.0, - "autoFocus": false, - "type": "INPUT_WIDGET_V2", - "hideCard": false, - "animateLoading": true, - "dynamicTriggerPathList": [], - "resetOnSubmit": true, - "leftColumn": 30.0, - "dynamicBindingPathList": [ - { "key": "accentColor" }, - { "key": "borderRadius" }, - { "key": "defaultText" } - ], - "labelPosition": "Left", - "labelStyle": "", - "inputType": "TEXT", - "isDisabled": false, - "key": "3u8om3xz0h", - "labelTextSize": "0.875rem", - "isRequired": false, - "isDeprecated": false, - "rightColumn": 62.0, - "widgetId": "moka7z9ch7", - "accentColor": "{{appsmith.theme.colors.primaryColor}}", - "isVisible": true, - "label": "", - "version": 2.0, - "parentId": "78koet28ym", - "labelAlignment": "left", - "renderMode": "CANVAS", - "isLoading": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "iconAlign": "left", - "defaultText": "{{CustomersTable.selectedRow.country}}" - }, - { - "boxShadow": "none", - "widgetName": "UpdateButton", - "onClick": "{{updateCustomerInfo.run(() => getCustomers.run(), () => {})}}", - "buttonColor": "{{appsmith.theme.colors.primaryColor}}", - "displayName": "Button", - "iconSVG": "/static/media/icon.cca026338f1c8eb6df8ba03d084c2fca.svg", - "searchTags": ["click", "submit"], - "topRow": 22.0, - "bottomRow": 27.0, - "parentRowSpace": 10.0, - "type": "BUTTON_WIDGET", - "hideCard": false, - "animateLoading": true, - "parentColumnSpace": 17.9375, - "dynamicTriggerPathList": [{ "key": "onClick" }], - "leftColumn": 1.0, - "dynamicBindingPathList": [ - { "key": "buttonColor" }, - { "key": "borderRadius" } - ], - "text": "Click to Update", - "isDisabled": false, - "key": "9l48tn25u6", - "isDeprecated": false, - "rightColumn": 25.0, - "isDefaultClickDisabled": true, - "widgetId": "aa8y9tf0yu", - "isVisible": true, - "recaptchaType": "V3", - "version": 1.0, - "parentId": "78koet28ym", - "renderMode": "CANVAS", - "isLoading": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "buttonVariant": "PRIMARY", - "placement": "CENTER" - } - ], - "key": "2htqwre5lx", - "isDeprecated": false, - "detachFromLayout": true, - "widgetId": "78koet28ym", - "accentColor": "{{appsmith.theme.colors.primaryColor}}", - "containerStyle": "none", - "isVisible": true, - "version": 1.0, - "parentId": "ikwrazl0u8", - "renderMode": "CANVAS", - "isLoading": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}" - } - ], - "borderWidth": "0", - "key": "bm3ntdcmxe", - "backgroundColor": "#FFFFFF", - "isDeprecated": false, - "rightColumn": 64.0, - "widgetId": "ikwrazl0u8", - "containerStyle": "card", - "isVisible": true, - "version": 1.0, - "parentId": "0", - "renderMode": "CANVAS", - "isLoading": false, - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}" - } - ] - }, - "layoutOnLoadActions": [ - [ - { - "id": "Page1_getCustomers", - "name": "getCustomers", - "confirmBeforeExecute": false, - "pluginType": "DB", - "jsonPathKeys": [], - "timeoutInMillisecond": 10000.0 - } - ] - ], - "validOnPageLoadActions": true, - "id": "Page1", - "deleted": false, - "policies": [], - "userPermissions": [] - } - ], - "userPermissions": [], - "policies": [] - }, - "deleted": false, - "gitSyncId": "62b41f08b72ed502c3e66727_62b41f08b72ed502c3e66729" - } - ], - "actionList": [ - { - "pluginType": "DB", - "pluginId": "postgres-plugin", - "unpublishedAction": { - "name": "getCustomers", - "datasource": { - "name": "Users", - "pluginId": "postgres-plugin", - "messages": [], - "isAutoGenerated": false, - "id": "Users", - "deleted": false, - "policies": [], - "userPermissions": [] - }, - "pageId": "Page1", - "actionConfiguration": { - "timeoutInMillisecond": 10000.0, - "paginationType": "NONE", - "encodeParamsToggle": true, - "body": "SELECT * FROM users ORDER BY id LIMIT 20;", - "selfReferencingDataPaths": [], - "pluginSpecifiedTemplates": [{ "value": false }] - }, - "executeOnLoad": true, - "dynamicBindingPathList": [], - "isValid": true, - "invalids": [], - "messages": [], - "jsonPathKeys": [], - "userSetOnLoad": false, - "confirmBeforeExecute": false, - "policies": [], - "userPermissions": [] - }, - "publishedAction": { - "name": "getCustomers", - "datasource": { - "name": "Users", - "pluginId": "postgres-plugin", - "messages": [], - "isAutoGenerated": false, - "id": "Users", - "deleted": false, - "policies": [], - "userPermissions": [] - }, - "pageId": "Page1", - "actionConfiguration": { - "timeoutInMillisecond": 10000.0, - "paginationType": "NONE", - "encodeParamsToggle": true, - "body": "SELECT * FROM users ORDER BY id LIMIT 20;", - "selfReferencingDataPaths": [], - "pluginSpecifiedTemplates": [{ "value": false }] - }, - "executeOnLoad": true, - "dynamicBindingPathList": [], - "isValid": true, - "invalids": [], - "messages": [], - "jsonPathKeys": [], - "userSetOnLoad": false, - "confirmBeforeExecute": false, - "policies": [], - "userPermissions": [] - }, - "id": "Page1_getCustomers", - "deleted": false, - "gitSyncId": "62b41f08b72ed502c3e66727_62b41f08b72ed502c3e6672b" - }, - { - "pluginType": "DB", - "pluginId": "postgres-plugin", - "unpublishedAction": { - "name": "updateCustomerInfo", - "datasource": { - "name": "Users", - "pluginId": "postgres-plugin", - "messages": [], - "isAutoGenerated": false, - "id": "Users", - "deleted": false, - "policies": [], - "userPermissions": [] - }, - "pageId": "Page1", - "actionConfiguration": { - "timeoutInMillisecond": 10000.0, - "paginationType": "NONE", - "encodeParamsToggle": true, - "body": "UPDATE users SET name = '{{NameInput.text}}', email = '{{EmailInput.text}}', country = '{{CountryInput.text}}' WHERE id = {{CustomersTable.selectedRow.id}}", - "selfReferencingDataPaths": [], - "pluginSpecifiedTemplates": [{ "value": false }] - }, - "executeOnLoad": false, - "dynamicBindingPathList": [], - "isValid": true, - "invalids": [], - "messages": [], - "jsonPathKeys": [ - "NameInput.text", - "CountryInput.text", - "CustomersTable.selectedRow.id", - "EmailInput.text" - ], - "userSetOnLoad": false, - "confirmBeforeExecute": false, - "policies": [], - "userPermissions": [] - }, - "publishedAction": { - "name": "updateCustomerInfo", - "datasource": { - "name": "Users", - "pluginId": "postgres-plugin", - "messages": [], - "isAutoGenerated": false, - "id": "Users", - "deleted": false, - "policies": [], - "userPermissions": [] - }, - "pageId": "Page1", - "actionConfiguration": { - "timeoutInMillisecond": 10000.0, - "paginationType": "NONE", - "encodeParamsToggle": true, - "body": "UPDATE users SET name = '{{NameInput.text}}', email = '{{EmailInput.text}}', country = '{{CountryInput.text}}' WHERE id = {{CustomersTable.selectedRow.id}}", - "selfReferencingDataPaths": [], - "pluginSpecifiedTemplates": [{ "value": false }] - }, - "executeOnLoad": false, - "dynamicBindingPathList": [], - "isValid": true, - "invalids": [], - "messages": [], - "jsonPathKeys": [ - "NameInput.text", - "CountryInput.text", - "CustomersTable.selectedRow.id", - "EmailInput.text" - ], - "userSetOnLoad": false, - "confirmBeforeExecute": false, - "policies": [], - "userPermissions": [] - }, - "id": "Page1_updateCustomerInfo", - "deleted": false, - "gitSyncId": "62b41f08b72ed502c3e66727_62b41f08b72ed502c3e6672c" - } - ], - "actionCollectionList": [], - "updatedResources": { - "actionList": [ - "getCustomers##ENTITY_SEPARATOR##Page1", - "updateCustomerInfo##ENTITY_SEPARATOR##Page1" - ], - "pageList": ["Page1"], - "actionCollectionList": [] - }, - "decryptedFields": { - "Users": { - "password": "new-users-db-pass", - "authType": "com.appsmith.external.models.DBAuth", - "dbAuth": { - "username": "users", - "password": "new-users-db-pass", - "databaseName": "users" - } - } - }, - "editModeTheme": { - "name": "Classic", - "displayName": "Classic", - "isSystemTheme": true, - "deleted": false - }, - "publishedTheme": { - "name": "Classic", - "displayName": "Classic", - "isSystemTheme": true, - "deleted": false - } -} diff --git a/app/client/src/pages/Editor/GuidedTour/constants.tsx b/app/client/src/pages/Editor/GuidedTour/constants.tsx deleted file mode 100644 index c3a75de3ee..0000000000 --- a/app/client/src/pages/Editor/GuidedTour/constants.tsx +++ /dev/null @@ -1,558 +0,0 @@ -import React from "react"; -import type { ReactNode } from "react"; -import type { Dispatch } from "redux"; -import TableData from "assets/gifs/table_data.gif"; -import DefaultText from "assets/gifs/default_text.gif"; -import { - setCurrentStepInit, - addOnboardingWidget, - forceShowContent, - focusWidget, -} from "actions/onboardingActions"; -import { highlightSection, showIndicator } from "./utils"; -import { setExplorerPinnedAction } from "actions/explorerActions"; -import { forceOpenWidgetPanel } from "actions/widgetSidebarActions"; -import { - createMessage, - STEP_EIGHT_SUCCESS_TEXT, - STEP_EIGHT_TITLE, - STEP_FIVE_HINT_TEXT, - STEP_FIVE_SUCCESS_BUTTON_TEXT, - STEP_FIVE_SUCCESS_TEXT, - STEP_FIVE_TITLE, - STEP_FOUR_HINT_BUTTON_TEXT, - STEP_FOUR_SUCCESS_BUTTON_TEXT, - STEP_FOUR_SUCCESS_TEXT, - STEP_FOUR_TITLE, - STEP_NINE_TITLE, - STEP_ONE_BUTTON_TEXT, - STEP_ONE_SUCCESS_TEXT, - STEP_ONE_TITLE, - STEP_SEVEN_TITLE, - STEP_SIX_SUCCESS_BUTTON_TEXT, - STEP_SIX_SUCCESS_TEXT, - STEP_SIX_TITLE, - STEP_THREE_SUCCESS_BUTTON_TEXT, - STEP_THREE_SUCCESS_TEXT, - STEP_THREE_TITLE, - STEP_TWO_TITLE, -} from "@appsmith/constants/messages"; -import { ASSETS_CDN_URL } from "constants/ThirdPartyConstants"; -import { getAssetUrl } from "@appsmith/utils/airgapHelpers"; - -export const Classes = { - GUIDED_TOUR_BORDER: "guided-tour-border", - GUIDED_TOUR_SHOW_BORDER: "guided-tour-show-border", - GUIDED_TOUR_INDICATOR: "guided-tour-indicator", -}; - -export const GuidedTourEntityNames = { - BUTTON_WIDGET: "UpdateButton", - NAME_INPUT: "NameInput", - EMAIL_INPUT: "EmailInput", - COUNTRY_INPUT: "CountryInput", - DISPLAY_IMAGE: "DisplayImage", -}; - -export enum GUIDED_TOUR_STEPS { - DEFAULT = 0, - RUN_QUERY = 1, - SELECT_TABLE_WIDGET = 2, - TABLE_WIDGET_BINDING = 3, - NAME_INPUT_BINDING = 4, - BIND_OTHER_FORM_WIDGETS = 5, - ADD_BUTTON_WIDGET = 6, - BUTTON_ONCLICK_BINDING = 7, - BUTTON_ONSUCCESS_BINDING = 8, - DEPLOY = 9, -} - -// We are using widget blueprints to create the form like container widget -export const onboardingContainerBlueprint = { - view: [ - { - type: "CANVAS_WIDGET", - position: { top: 0, left: 0 }, - props: { - containerStyle: "none", - canExtend: false, - detachFromLayout: true, - children: [], - version: 1, - blueprint: { - view: [ - { - type: "TEXT_WIDGET", - position: { - left: 1, - top: 1, - }, - size: { - rows: 4, - cols: 48, - }, - props: { - textAlign: "LEFT", - fontStyle: "BOLD", - version: 1, - textColor: "#231F20", - fontSize: "HEADING2", - text: "\uD83D\uDC68‍\uD83D\uDCBC Customer Update Form", - }, - }, - { - type: "IMAGE_WIDGET", - position: { - left: 1, - top: 6, - }, - size: { - rows: 12, - cols: 16, - }, - props: { - imageShape: "RECTANGLE", - defaultImage: getAssetUrl( - `${ASSETS_CDN_URL}/widgets/default.png`, - ), - objectFit: "contain", - image: "{{CustomersTable.selectedRow.image}}", - dynamicBindingPathList: [{ key: "image" }], - }, - }, - { - type: "TEXT_WIDGET", - position: { - top: 6, - left: 19, - }, - size: { - rows: 4, - cols: 8, - }, - props: { - text: "Name", - textAlign: "LEFT", - fontStyle: "BOLD", - textColor: "#231F20", - version: 1, - fontSize: "PARAGRAPH", - }, - }, - { - type: "INPUT_WIDGET_V2", - position: { - top: 6, - left: 30, - }, - size: { - rows: 4, - cols: 32, - }, - props: { - inputType: "TEXT", - label: "", - }, - }, - { - type: "TEXT_WIDGET", - position: { - top: 10, - left: 19, - }, - size: { - rows: 4, - cols: 8, - }, - props: { - text: "Email", - textAlign: "LEFT", - fontStyle: "BOLD", - textColor: "#231F20", - version: 1, - fontSize: "PARAGRAPH", - }, - }, - { - type: "INPUT_WIDGET_V2", - position: { - top: 10, - left: 30, - }, - size: { - rows: 4, - cols: 32, - }, - props: { - inputType: "TEXT", - label: "", - }, - }, - { - type: "TEXT_WIDGET", - position: { - top: 14, - left: 19, - }, - size: { - rows: 4, - cols: 10, - }, - props: { - text: "Country", - textAlign: "LEFT", - fontStyle: "BOLD", - textColor: "#231F20", - version: 1, - fontSize: "PARAGRAPH", - }, - }, - { - type: "INPUT_WIDGET_V2", - position: { - top: 14, - left: 30, - }, - size: { - rows: 4, - cols: 32, - }, - props: { - inputType: "TEXT", - label: "", - }, - }, - ], - }, - }, - }, - ], -}; - -interface Step { - title: string; - description?: string; - elementSelector?: string; - hints: { - text: ReactNode; - image?: string; - button?: { - text: string; - onClick?: (dispatch: Dispatch) => void; - }; - steps?: ReactNode[]; - }[]; - success?: { - text: string; - onClick?: (dispatch: Dispatch) => void; - timed?: boolean; - buttonText?: string; - }; - info?: { - icon: string; - text: ReactNode; - onClick: (dispatch: Dispatch) => void; - buttonText?: string; - }; -} -type StepsType = Record; - -export const Steps: StepsType = { - [GUIDED_TOUR_STEPS.RUN_QUERY]: { - title: createMessage(STEP_ONE_TITLE), - elementSelector: "query-table-response", - hints: [ - { - text: ( - <> - This command will fetch the first 20 items in the user_data - database. Hit Run to see the response. - - ), - }, - ], - success: { - text: createMessage(STEP_ONE_SUCCESS_TEXT), - onClick: (dispatch) => { - dispatch(setExplorerPinnedAction(true)); - dispatch(setCurrentStepInit(GUIDED_TOUR_STEPS.SELECT_TABLE_WIDGET)); - setTimeout(() => { - showIndicator(`[data-guided-tour-iid='CustomersTable']`, "right", { - top: 5, - left: -15, - }); - }, 1000); - }, - buttonText: createMessage(STEP_ONE_BUTTON_TEXT), - timed: true, - }, - }, - [GUIDED_TOUR_STEPS.SELECT_TABLE_WIDGET]: { - title: createMessage(STEP_TWO_TITLE), - hints: [ - { - text: ( - <> - Click on the CustomersTable widget in the explorer on the - left. - - ), - }, - ], - }, - [GUIDED_TOUR_STEPS.TABLE_WIDGET_BINDING]: { - title: createMessage(STEP_THREE_TITLE), - hints: [ - { - text: ( - <> - Bind the response by typing{" "} - - - {{ - {"getCustomers.data"}}} - - {" "} - in the Table data input field on the right pane. - - ), - image: TableData, - }, - ], - success: { - text: createMessage(STEP_THREE_SUCCESS_TEXT), - onClick: (dispatch) => { - // Stop hiding rest of the properties in the propery pane - dispatch(forceShowContent(GUIDED_TOUR_STEPS.TABLE_WIDGET_BINDING)); - setTimeout(() => { - highlightSection("property-pane"); - }, 1000); - }, - timed: true, - buttonText: createMessage(STEP_THREE_SUCCESS_BUTTON_TEXT), - }, - info: { - icon: "lightbulb-flash-line", - text: ( - <> - The pane on the right is called the Property Pane. Here - you can modify properties, data, or styling for every widget. - - ), - onClick: (dispatch) => { - dispatch(setCurrentStepInit(GUIDED_TOUR_STEPS.NAME_INPUT_BINDING)); - dispatch( - addOnboardingWidget({ - type: "CONTAINER_WIDGET", - widgetName: "CustomersInfo", - topRow: 7, - rows: 30, - columns: 29, - leftColumn: 35, - props: { - blueprint: onboardingContainerBlueprint, - }, - }), - ); - }, - buttonText: "Got it", - }, - }, - [GUIDED_TOUR_STEPS.NAME_INPUT_BINDING]: { - title: createMessage(STEP_FOUR_TITLE), - hints: [ - { - text: ( - <> - We{"'"}ll{" "} - - display the data from a table{"'"}s selected row inside an input - field. - -
This will let us see the data before we update it. - - ), - button: { - text: createMessage(STEP_FOUR_HINT_BUTTON_TEXT), - onClick: (dispatch) => { - // Select the NameInput widget and focus the defaultText input field - dispatch(focusWidget("NameInput", "defaultText")); - setTimeout(() => { - showIndicator(`[data-guided-tour-iid='defaultText']`, "top", { - top: 20, - left: 0, - }); - }, 1000); - }, - }, - }, - { - text: ( - <> - In the property pane of {GuidedTourEntityNames.NAME_INPUT}, add the{" "} - - - {{CustomersTable.selectedRow.name}} - - {" "} - binding to the Default Text property - - ), - // Get gif from url - image: DefaultText, - }, - ], - success: { - text: createMessage(STEP_FOUR_SUCCESS_TEXT), - timed: true, - onClick: (dispatch) => { - dispatch(setCurrentStepInit(GUIDED_TOUR_STEPS.BIND_OTHER_FORM_WIDGETS)); - dispatch(focusWidget("EmailInput", "defaultText")); - setTimeout(() => { - showIndicator(`[data-guided-tour-iid='defaultText']`, "top", { - top: 20, - left: 0, - }); - }, 1000); - }, - buttonText: createMessage(STEP_FOUR_SUCCESS_BUTTON_TEXT), - }, - }, - [GUIDED_TOUR_STEPS.BIND_OTHER_FORM_WIDGETS]: { - title: createMessage(STEP_FIVE_TITLE), - hints: [ - { - text: <>{createMessage(STEP_FIVE_HINT_TEXT)}, - steps: [ - <> - Connect {GuidedTourEntityNames.EMAIL_INPUT} - {"'"}s Default Text Property to{" "} - - {{CustomersTable.selectedRow.email}} - - , - <> - Connect {GuidedTourEntityNames.COUNTRY_INPUT} - {"'"}s Default Text Property to{" "} - - {{CustomersTable.selectedRow.country}} - - , - ], - }, - ], - success: { - text: createMessage(STEP_FIVE_SUCCESS_TEXT), - onClick: (dispatch) => { - dispatch(setCurrentStepInit(GUIDED_TOUR_STEPS.ADD_BUTTON_WIDGET)); - dispatch(setExplorerPinnedAction(true)); - dispatch(forceOpenWidgetPanel(true)); - setTimeout(() => { - highlightSection("widget-card-buttonwidget"); - }, 2000); - }, - timed: true, - buttonText: createMessage(STEP_FIVE_SUCCESS_BUTTON_TEXT), - }, - }, - [GUIDED_TOUR_STEPS.ADD_BUTTON_WIDGET]: { - title: createMessage(STEP_SIX_TITLE), - hints: [ - { - text: ( - <> - Switch to the widget pane and then Drag {"&"} Drop a{" "} - Button widget into the left bottom of container, below the - image. - - ), - }, - ], - success: { - text: createMessage(STEP_SIX_SUCCESS_TEXT), - timed: true, - onClick: (dispatch) => { - dispatch(forceOpenWidgetPanel(false)); - setTimeout(() => { - highlightSection("explorer-entity-updateCustomerInfo"); - }, 1000); - }, - buttonText: createMessage(STEP_SIX_SUCCESS_BUTTON_TEXT), - }, - info: { - icon: "lightbulb-flash-line", - text: ( - <> - To update the customers through the button, we - created an updateCustomerInfo query for you which is - ready to use - - ), - onClick: (dispatch) => { - dispatch(focusWidget(GuidedTourEntityNames.BUTTON_WIDGET)); - dispatch(setCurrentStepInit(GUIDED_TOUR_STEPS.BUTTON_ONCLICK_BINDING)); - requestAnimationFrame(() => { - showIndicator(`[data-guided-tour-iid='onClick']`, "top", { - top: 25, - left: 0, - }); - }); - }, - }, - }, - [GUIDED_TOUR_STEPS.BUTTON_ONCLICK_BINDING]: { - title: createMessage(STEP_SEVEN_TITLE), - hints: [ - { - text: ( - <> - Select the button widget to see the properties in the property pane. - Click the + button beside the onClick property to add an - action, select Execute a query {"&"} then select{" "} - updateCustomerInfo query - - ), - }, - ], - }, - [GUIDED_TOUR_STEPS.BUTTON_ONSUCCESS_BINDING]: { - title: createMessage(STEP_EIGHT_TITLE), - hints: [ - { - text: ( - <> - Expand Callbacks section, click the + button beside{" "} - On success, select Execute a query {"&"} then choose{" "} - getCustomers Query - - ), - }, - ], - success: { - text: createMessage(STEP_EIGHT_SUCCESS_TEXT), - onClick: (dispatch) => { - dispatch(setCurrentStepInit(GUIDED_TOUR_STEPS.DEPLOY)); - setTimeout(() => { - showIndicator(`[data-guided-tour-iid='deploy']`, "bottom", { - top: -6, - left: 0, - }); - }, 1000); - }, - timed: true, - }, - }, - [GUIDED_TOUR_STEPS.DEPLOY]: { - title: createMessage(STEP_NINE_TITLE), - hints: [ - { - text: ( - <> - Test your app and ensure there are no errors. When you are ready, - click Deploy to deploy this app to a URL. - - ), - }, - ], - }, -}; diff --git a/app/client/src/pages/Editor/GuidedTour/useComputeCurrentStep.ts b/app/client/src/pages/Editor/GuidedTour/useComputeCurrentStep.ts deleted file mode 100644 index e87b764274..0000000000 --- a/app/client/src/pages/Editor/GuidedTour/useComputeCurrentStep.ts +++ /dev/null @@ -1,338 +0,0 @@ -import { - markStepComplete, - tableWidgetWasSelected, - enableGuidedTour, - updateButtonWidgetText, - forceShowContent, - focusWidgetProperty, - setCurrentStepInit, - disableStartSignpostingAction, -} from "actions/onboardingActions"; -import { useEffect } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import { getApplicationLastDeployedAt } from "selectors/editorSelectors"; -import { - getHadReachedStep, - isQueryExecutionSuccessful, - isTableWidgetSelected, - tableWidgetHasBinding, - containerWidgetAdded, - nameInputSelector, - isNameInputBoundSelector, - isCountryInputBound, - isEmailInputBound, - isButtonWidgetPresent, - buttonWidgetHasOnClickBinding, - buttonWidgetHasOnSuccessBinding, - countryInputSelector, -} from "selectors/onboardingSelectors"; -import { getBaseWidgetClassName } from "constants/componentClassNameConstants"; -import { GUIDED_TOUR_STEPS, Steps } from "./constants"; -import { - closeSidebar, - hideIndicator, - highlightSection, - showIndicator, -} from "./utils"; - -function useComputeCurrentStep(showInfoMessage: boolean) { - let step = 1; - const meta: { - completedSubSteps: number[]; - hintCount: number; - } = { - completedSubSteps: [], - hintCount: 0, - }; - const dispatch = useDispatch(); - const hadReachedStep = useSelector(getHadReachedStep); - // Step 1(Run the query) selectors - const queryExecutedSuccessfully = useSelector(isQueryExecutionSuccessful); - // 2 selectors - const tableWidgetSelected = useSelector(isTableWidgetSelected); - // 3 - const isTableWidgetBound = useSelector(tableWidgetHasBinding); - // 4 - const isContainerWidgetPreset = useSelector(containerWidgetAdded); - const nameInputWidgetId = useSelector(nameInputSelector); - const isNameInputBound = useSelector(isNameInputBoundSelector); - // 5 - const countryInputBound = useSelector(isCountryInputBound); - const isCountryInputSelected = useSelector(countryInputSelector); - const emailInputBound = useSelector(isEmailInputBound); - // 6 - const buttonWidgetPresent = useSelector(isButtonWidgetPresent); - // 7 - const buttonWidgetonClickBinding = useSelector(buttonWidgetHasOnClickBinding); - // 8 - const buttonWidgetSuccessBinding = useSelector( - buttonWidgetHasOnSuccessBinding, - ); - // 9 - const isDeployed = useSelector(getApplicationLastDeployedAt); - - // If we are on the first step - if (step === GUIDED_TOUR_STEPS.RUN_QUERY) { - // If the query is executed successfully and if the user had gone to further steps before - // i.e probably the user is here after finishing step 5. This can happen if the query is updated - // to something unexpected. - // So we have `hadReachedStep` to keep track of the furthest the user had reached. - // Initially we don't automatically go to the next step, instead the user clicks on a button in the guide - // shown on top of the screen for the user clicking on which we update the current step - if (queryExecutedSuccessfully && hadReachedStep > 1) { - step = GUIDED_TOUR_STEPS.SELECT_TABLE_WIDGET; - } - } - - // On the second step - if (step === GUIDED_TOUR_STEPS.SELECT_TABLE_WIDGET) { - if (tableWidgetSelected) { - step = GUIDED_TOUR_STEPS.TABLE_WIDGET_BINDING; - // Reset back the hintcount set in previous step - meta.hintCount = 0; - } - } - - if (step === GUIDED_TOUR_STEPS.TABLE_WIDGET_BINDING) { - if ( - !!isTableWidgetBound && - isContainerWidgetPreset && - hadReachedStep > GUIDED_TOUR_STEPS.TABLE_WIDGET_BINDING - ) { - step = GUIDED_TOUR_STEPS.NAME_INPUT_BINDING; - } - } - - if (step === GUIDED_TOUR_STEPS.NAME_INPUT_BINDING) { - if (!!isNameInputBound && hadReachedStep > 4) { - step = GUIDED_TOUR_STEPS.BIND_OTHER_FORM_WIDGETS; - } - } - - if (step === GUIDED_TOUR_STEPS.BIND_OTHER_FORM_WIDGETS) { - if (emailInputBound) { - // We tick off widgets in the UI which are bound to the selected row. - // This is to keep track of which ones are bound - meta.completedSubSteps.push(0); - } - if (countryInputBound) { - meta.completedSubSteps.push(1); - } - // Once all three widgets are bound this step is complete - if ( - meta.completedSubSteps.length === 2 && - hadReachedStep > GUIDED_TOUR_STEPS.BIND_OTHER_FORM_WIDGETS - ) { - step = GUIDED_TOUR_STEPS.ADD_BUTTON_WIDGET; - } - } - - if (step === GUIDED_TOUR_STEPS.ADD_BUTTON_WIDGET) { - if (buttonWidgetPresent && hadReachedStep > 6) { - step = GUIDED_TOUR_STEPS.BUTTON_ONCLICK_BINDING; - } - } - - if (step === GUIDED_TOUR_STEPS.BUTTON_ONCLICK_BINDING) { - if (buttonWidgetonClickBinding) { - step = GUIDED_TOUR_STEPS.BUTTON_ONSUCCESS_BINDING; - } - } - - if (step === GUIDED_TOUR_STEPS.BUTTON_ONSUCCESS_BINDING) { - if ( - buttonWidgetSuccessBinding && - hadReachedStep > GUIDED_TOUR_STEPS.BUTTON_ONSUCCESS_BINDING - ) { - step = GUIDED_TOUR_STEPS.DEPLOY; - } - } - - // Update the step in the store - useEffect(() => { - dispatch(setCurrentStepInit(step)); - }, [step]); - - // Step 1 side effects - useEffect(() => { - // Success messages, indicators and highlighted sections are shown initially - // These are not shown again i.e if the user finishes step 5 and does some changes - // which bring the step back to 1, we don't do the following changes after completing step 1 - // again. - if ( - step === GUIDED_TOUR_STEPS.RUN_QUERY && - hadReachedStep <= GUIDED_TOUR_STEPS.RUN_QUERY - ) { - if (queryExecutedSuccessfully) { - dispatch(forceShowContent(GUIDED_TOUR_STEPS.RUN_QUERY)); - // Hide the indicator after the user has successfully run the query - hideIndicator(); - // This show the success message - dispatch(markStepComplete()); - - setTimeout(() => { - if (Steps[GUIDED_TOUR_STEPS.RUN_QUERY].elementSelector) { - // Highlight section which shows a temporary border around the target - highlightSection( - Steps[GUIDED_TOUR_STEPS.RUN_QUERY].elementSelector, - ); - } - // Adding a slight delay to wait for the table to be visible - }, 1000); - } else { - dispatch(closeSidebar()); - showIndicator(`[data-guided-tour-iid='run-query']`, "top"); - } - } - }, [queryExecutedSuccessfully, step, hadReachedStep]); - - // Step 3(table widget binding) side effects - // Focus the tableData input in the property pane - useEffect(() => { - if ( - tableWidgetSelected && - step === GUIDED_TOUR_STEPS.TABLE_WIDGET_BINDING && - hadReachedStep <= GUIDED_TOUR_STEPS.TABLE_WIDGET_BINDING - ) { - dispatch(tableWidgetWasSelected(true)); - showIndicator(`[data-guided-tour-iid='tableData']`, "top", { - top: 20, - left: 0, - }); - // Focus the tableData input field - dispatch(focusWidgetProperty("tableData")); - } - }, [step, tableWidgetSelected]); - // Show success message - useEffect(() => { - if ( - !!isTableWidgetBound && - step === GUIDED_TOUR_STEPS.TABLE_WIDGET_BINDING && - hadReachedStep <= GUIDED_TOUR_STEPS.TABLE_WIDGET_BINDING - ) { - dispatch(closeSidebar()); - hideIndicator(); - dispatch(markStepComplete()); - } - }, [isTableWidgetBound, step, hadReachedStep]); - - // Step 4(Add binding to the NameInput widget) side effects - // Highlight table widget's selected row - useEffect(() => { - if ( - !!isTableWidgetBound && - step === GUIDED_TOUR_STEPS.NAME_INPUT_BINDING && - hadReachedStep <= GUIDED_TOUR_STEPS.NAME_INPUT_BINDING - ) { - if (!!nameInputWidgetId) { - // Minor timeout to wait for the elements to exist - dispatch(closeSidebar()); - setTimeout(() => { - // Highlight the selected row and the NameInput widget - highlightSection( - "selected-row", - getBaseWidgetClassName(isTableWidgetBound), - "class", - ); - highlightSection( - getBaseWidgetClassName(nameInputWidgetId), - undefined, - "class", - ); - }, 500); - } - } - }, [isTableWidgetBound, step, hadReachedStep, nameInputWidgetId]); - // Show success message - useEffect(() => { - if ( - step === GUIDED_TOUR_STEPS.NAME_INPUT_BINDING && - hadReachedStep <= GUIDED_TOUR_STEPS.NAME_INPUT_BINDING - ) { - if (!!isNameInputBound) { - hideIndicator(); - dispatch(markStepComplete()); - } - } - }, [isNameInputBound, step, hadReachedStep]); - - // Step 5 - useEffect(() => { - if ( - step === GUIDED_TOUR_STEPS.BIND_OTHER_FORM_WIDGETS && - hadReachedStep <= GUIDED_TOUR_STEPS.BIND_OTHER_FORM_WIDGETS - ) { - if (isCountryInputSelected) { - if (!countryInputBound) { - showIndicator(`[data-guided-tour-iid='defaultText']`, "top", { - top: 20, - left: 0, - }); - } else { - hideIndicator(); - } - } - } - }, [step, hadReachedStep, countryInputBound, isCountryInputSelected]); - - // Show success message - useEffect(() => { - if ( - step === GUIDED_TOUR_STEPS.BIND_OTHER_FORM_WIDGETS && - hadReachedStep <= GUIDED_TOUR_STEPS.BIND_OTHER_FORM_WIDGETS - ) { - if (meta.completedSubSteps.length === 1) { - hideIndicator(); - } - if (meta.completedSubSteps.length === 2) { - dispatch(markStepComplete()); - } - } - }, [step, meta.completedSubSteps.length, hadReachedStep]); - - // 6 - useEffect(() => { - if ( - step === GUIDED_TOUR_STEPS.ADD_BUTTON_WIDGET && - hadReachedStep <= GUIDED_TOUR_STEPS.ADD_BUTTON_WIDGET && - !showInfoMessage - ) { - if (buttonWidgetPresent) { - dispatch(updateButtonWidgetText()); - dispatch(markStepComplete()); - } - } - }, [step, buttonWidgetPresent, showInfoMessage]); - - // 8 - useEffect(() => { - if ( - step === GUIDED_TOUR_STEPS.BUTTON_ONSUCCESS_BINDING && - hadReachedStep <= GUIDED_TOUR_STEPS.BUTTON_ONSUCCESS_BINDING - ) { - if (buttonWidgetSuccessBinding) { - dispatch(markStepComplete()); - hideIndicator(); - } else { - showIndicator(`[data-guided-tour-iid='onSuccess']`, "top", { - top: 20, - left: 0, - }); - } - } - }, [step, hadReachedStep, buttonWidgetSuccessBinding]); - - useEffect(() => { - if (step === GUIDED_TOUR_STEPS.DEPLOY) { - if (isDeployed) { - hideIndicator(); - dispatch(enableGuidedTour(false)); - dispatch(disableStartSignpostingAction()); - } - } - }, [step, isDeployed]); - - return meta; -} - -export default useComputeCurrentStep; diff --git a/app/client/src/pages/Editor/IDE/LeftPane/index.tsx b/app/client/src/pages/Editor/IDE/LeftPane/index.tsx index db716cde52..1da4851bb4 100644 --- a/app/client/src/pages/Editor/IDE/LeftPane/index.tsx +++ b/app/client/src/pages/Editor/IDE/LeftPane/index.tsx @@ -1,6 +1,5 @@ import React from "react"; import WidgetsEditorEntityExplorer from "../../WidgetsEditorEntityExplorer"; -import { useSelector } from "react-redux"; import styled from "styled-components"; import { Switch, useRouteMatch } from "react-router"; import { SentryRoute } from "@appsmith/AppRouter"; @@ -15,7 +14,6 @@ import { import AppSettingsPane from "./AppSettings"; import DataSidePane from "./DataSidePane"; import LibrarySidePane from "./LibrarySidePane"; -import { inGuidedTour } from "selectors/onboardingSelectors"; import { useIsAppSidebarEnabled } from "../../../../navigation/featureFlagHooks"; import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag"; @@ -33,8 +31,7 @@ const LeftPane = () => { FEATURE_FLAG.release_show_new_sidebar_pages_pane_enabled, ); const { path } = useRouteMatch(); - const guidedTourEnabled = useSelector(inGuidedTour); - if (!isAppSidebarEnabled || guidedTourEnabled) { + if (!isAppSidebarEnabled) { return ; } return ( diff --git a/app/client/src/pages/Editor/IDE/Sidebar/index.tsx b/app/client/src/pages/Editor/IDE/Sidebar/index.tsx index c09fcdf8c6..999691104e 100644 --- a/app/client/src/pages/Editor/IDE/Sidebar/index.tsx +++ b/app/client/src/pages/Editor/IDE/Sidebar/index.tsx @@ -7,7 +7,6 @@ import history, { NavigationMethod } from "utils/history"; import { useCurrentAppState } from "../hooks"; import { getCurrentWorkspaceId } from "@appsmith/selectors/workspaceSelectors"; import { fetchWorkspace } from "@appsmith/actions/workspaceActions"; -import { inGuidedTour } from "selectors/onboardingSelectors"; import SidebarComponent from "./SidebarComponent"; import { BottomButtons, TopButtons } from "@appsmith/entities/IDE/constants"; @@ -20,7 +19,6 @@ function Sidebar() { const pageId = useSelector(getCurrentPageId); const currentWorkspaceId = useSelector(getCurrentWorkspaceId); - const guidedTourEnabled = useSelector(inGuidedTour); useEffect(() => { dispatch(fetchWorkspace(currentWorkspaceId)); @@ -41,10 +39,6 @@ function Sidebar() { [pageId], ); - if (guidedTourEnabled) { - return null; - } - return (