Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: added header component for template and data flow for onboarding start experience (#28974)

Browse Source 
Co-authored-by: nilansh <nilansh@appsmith.com>
Co-authored-by: “sneha122” <“sneha@appsmith.com”>
This commit is contained in:
Aman Agarwal 2023-11-22 16:19:42 +05:30 committed by GitHub
parent 84314baaf3
commit 6cd2ce4f6e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 52 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/client/src/ce/constants/messages.ts
View File

@ -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: {

59
app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx
View File

@ -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 ? (