From 6cd2ce4f6eb2cb89443795e21a73a4bceebd70b9 Mon Sep 17 00:00:00 2001
From: Aman Agarwal <aman@appsmith.com>
Date: Wed, 22 Nov 2023 16:19:42 +0530
Subject: [PATCH] feat: added header component for template and data flow for
 onboarding start experience (#28974)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: nilansh <nilansh@appsmith.com>
Co-authored-by: “sneha122” <“sneha@appsmith.com”>
---
 app/client/src/ce/constants/messages.ts       |  6 ++
 .../Applications/CreateNewAppsOption.tsx      | 59 +++++++++++++++----
 2 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts
index dfa6ca9a62..66c79e73fb 100644
--- a/app/client/src/ce/constants/messages.ts
+++ b/app/client/src/ce/constants/messages.ts
@@ -2258,6 +2258,12 @@ export const START_FROM_SCRATCH_SUBTITLE = () =>
 export const START_WITH_DATA_TITLE = () => "Start with data";
 export const START_WITH_DATA_SUBTITLE = () =>
   "Get started with connecting your data, and easily craft a functional application.";
+export const START_WITH_DATA_CONNECT_HEADING = () => "Connect your datasource";
+export const START_WITH_DATA_CONNECT_SUBHEADING = () =>
+  "Select an option to establish a connection. Your data's security is our priority.";
+export const START_WITH_TEMPLATE_CONNECT_HEADING = () => "Select a template";
+export const START_WITH_TEMPLATE_CONNECT_SUBHEADING = () =>
+  "Choose an option below to embark on your app-building adventure!";
 
 export const PARTIAL_IMPORT_EXPORT = {
   export: {
diff --git a/app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx b/app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx
index 5f9df1930d..922ca54c12 100644
--- a/app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx
+++ b/app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx
@@ -15,7 +15,7 @@ import {
 } from "selectors/templatesSelectors";
 import styled from "styled-components";
 import { getAllTemplates } from "actions/templateActions";
-import { Link, Text } from "design-system";
+import { Flex, Link, Text } from "design-system";
 import {
   CREATE_NEW_APPS_STEP_SUBTITLE,
   CREATE_NEW_APPS_STEP_TITLE,
@@ -27,6 +27,10 @@ import {
   START_WITH_DATA_TITLE,
   START_WITH_DATA_SUBTITLE,
   createMessage,
+  START_WITH_DATA_CONNECT_HEADING,
+  START_WITH_DATA_CONNECT_SUBHEADING,
+  START_WITH_TEMPLATE_CONNECT_SUBHEADING,
+  START_WITH_TEMPLATE_CONNECT_HEADING,
 } from "@appsmith/constants/messages";
 import Filters from "pages/Templates/Filters";
 import { isEmpty } from "lodash";
@@ -137,6 +141,15 @@ const WithDataWrapper = styled.div`
   padding: var(--ads-v2-spaces-13);
 `;
 
+const Header = ({ subtitle, title }: { subtitle: string; title: string }) => {
+  return (
+    <Flex flexDirection="column" mb="spaces-14" mt="spaces-7">
+      <Text kind="heading-xl">{title}</Text>
+      <Text>{subtitle}</Text>
+    </Flex>
+  );
+};
+
 interface CardProps {
   onClick?: () => void;
   src: string;
@@ -403,18 +416,38 @@ const CreateNewAppsOption = ({
             templateId={selectedTemplate}
           />
         ) : (
-          <TemplateWrapper>
-            <FiltersWrapper>
-              <Filters />
-            </FiltersWrapper>
-            <TemplateContentWrapper>
-              <TemplatesContent
-                isForkingEnabled={!!workspaceList.length}
-                onForkTemplateClick={onForkTemplateClick}
-                onTemplateClick={onTemplateClick}
-              />
-            </TemplateContentWrapper>
-          </TemplateWrapper>
+          <Flex flexDirection="column" pl="spaces-3" pr="spaces-3">
+            <Header
+              subtitle={createMessage(START_WITH_TEMPLATE_CONNECT_SUBHEADING)}
+              title={createMessage(START_WITH_TEMPLATE_CONNECT_HEADING)}
+            />
+            <TemplateWrapper>
+              <FiltersWrapper>
+                <Filters />
+              </FiltersWrapper>
+              <TemplateContentWrapper>
+                <TemplatesContent
+                  isForkingEnabled={!!workspaceList.length}
+                  onForkTemplateClick={onForkTemplateClick}
+                  onTemplateClick={onTemplateClick}
+                />
+              </TemplateContentWrapper>
+            </TemplateWrapper>
+          </Flex>
+        )
+      ) : useType === START_WITH_TYPE.DATA ? (
+        createNewAppPluginId ? (
+          <div>{createNewAppPluginId}</div>
+        ) : (
+          <Flex flexDirection="column" pl="spaces-3" pr="spaces-3">
+            <Header
+              subtitle={createMessage(START_WITH_DATA_CONNECT_SUBHEADING)}
+              title={createMessage(START_WITH_DATA_CONNECT_HEADING)}
+            />
+            <WithDataWrapper>
+              <CreateNewDatasourceTab />
+            </WithDataWrapper>
+          </Flex>
         )
       ) : useType === START_WITH_TYPE.DATA ? (
         createNewAppPluginId ? (