fix: Showing mock datasource on onboarding start with data screen (#29146)

app/client/src/ce/constants/messages.ts

@@ -375,6 +375,7 @@ export const CREATE_NEW_DATASOURCE = () => "Create new datasource";
 export const CREATE_NEW_DATASOURCE_DATABASE_HEADER = () => "Databases";
 export const CREATE_NEW_DATASOURCE_MOST_POPULAR_HEADER = () => "Most popular";
 export const CREATE_NEW_DATASOURCE_REST_API = () => "REST API";
+export const SAMPLE_DATASOURCES = () => "Sample datasources";
 
 export const ERROR_EVAL_ERROR_GENERIC = () =>
   `Unexpected error occurred while evaluating the application`;

app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx

@@ -58,6 +58,7 @@ import type { Plugin } from "api/PluginApi";
 import { PluginType } from "entities/Action";
 import DataSourceEditor from "pages/Editor/DataSourceEditor";
 import { TEMP_DATASOURCE_ID } from "constants/Datasource";
+import { fetchMockDatasources } from "actions/datasourceActions";
 
 const SectionWrapper = styled.div`
   display: flex;
@@ -235,6 +236,7 @@ const CreateNewAppsOption = ({
       // fetch plugins information to show list of all plugins
       if (isEnabledForStartWithData) {
         dispatch(fetchPlugins());
+        dispatch(fetchMockDatasources());
         setUseType(START_WITH_TYPE.DATA);
       }
     } else {

app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx

@@ -32,6 +32,7 @@ import {
   createMessage,
   CREATE_NEW_DATASOURCE_DATABASE_HEADER,
   CREATE_NEW_DATASOURCE_MOST_POPULAR_HEADER,
+  SAMPLE_DATASOURCES,
 } from "@appsmith/constants/messages";
 import { Divider } from "design-system";
 
@@ -71,7 +72,7 @@ function UseMockDatasources({ active, mockDatasources }: MockDataSourcesProps) {
   }, [active]);
   return (
     <div id="mock-database" ref={useMockRef}>
-      <Text type={TextType.H2}>Get started with our sample datasources</Text>
+      <Text type={TextType.H2}>{createMessage(SAMPLE_DATASOURCES)}</Text>
       <MockDataSources mockDatasources={mockDatasources} />
     </div>
   );
@@ -300,11 +301,11 @@ class CreateNewDatasourceTab extends React.Component<
           showUnsupportedPluginDialog={this.showUnsupportedPluginDialog}
         />
         {dataSources.length > 0 && this.props.mockDatasources.length > 0 && (
-          <StyledDivider />
+          <>
+            <StyledDivider />
+            {mockDataSection}
+          </>
         )}
-        {dataSources.length > 0 &&
-          this.props.mockDatasources.length > 0 &&
-          mockDataSection}
       </NewIntegrationsContainer>
     );
   }

app/client/src/sagas/DatasourcesSagas.ts

@@ -19,6 +19,7 @@ import {
 import { get, isEmpty, merge, omit, partition, set } from "lodash";
 import equal from "fast-deep-equal/es6";
 import type {
+  ApplicationPayload,
   ReduxAction,
   ReduxActionWithCallbacks,
   ReduxActionWithMeta,
@@ -130,6 +131,7 @@ import { updateReplayEntity } from "actions/pageActions";
 import OAuthApi from "api/OAuthApi";
 import type { AppState } from "@appsmith/reducers";
 import {
+  getApplicationByIdFromWorkspaces,
   getCurrentApplicationIdForCreateNewApp,
   getWorkspaceIdForImport,
 } from "@appsmith/selectors/applicationSelectors";
@@ -258,7 +260,15 @@ export function* addMockDbToDatasources(actionPayload: addMockDb) {
     const { name, packageName, pluginId, skipRedirection, workspaceId } =
       actionPayload.payload;
     const { isGeneratePageMode } = actionPayload.extraParams;
-    const pageId: string = yield select(getCurrentPageId);
+    const currentApplicationIdForCreateNewApp: string | undefined =
+      yield select(getCurrentApplicationIdForCreateNewApp);
+    const application: ApplicationPayload | undefined = yield select(
+      getApplicationByIdFromWorkspaces,
+      currentApplicationIdForCreateNewApp || "",
+    );
+    const pageId: string = !!currentApplicationIdForCreateNewApp
+      ? application?.defaultPageId
+      : yield select(getCurrentPageId);
     const response: ApiResponse<Datasource> =
       yield DatasourcesApi.addMockDbToDatasources(
         name,