Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Split out the common component between SuperUser and NonSuperUser form #25061

Merged
merged 5 commits into from
Jul 5, 2023
Merged

chore: Split out the common component between SuperUser and NonSuperUser form #25061

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0d21d9a
moved instanceId outside to add this data in all events
ankitsrivas14 Jun 16, 2023
39c31dd
Merge branch 'release' of github.com:appsmithorg/appsmith into release
ankitsrivas14 Jun 16, 2023
cdf624a
Merge branch 'release' of github.com:appsmithorg/appsmith into release
ankitsrivas14 Jun 17, 2023
23d1877
Merge branch 'release' of github.com:appsmithorg/appsmith into release
ankitsrivas14 Jul 4, 2023
03a9d82
separated out parent components for onboarding welcome of super user …
ankitsrivas14 Jul 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
separated out parent components for onboarding welcome of super user … 
…and non super user
  • Loading branch information
@ankitsrivas14
ankitsrivas14 committed Jul 4, 2023
commit 03a9d82f9ff116fff83c8fc381a2b81907aae3c2
116 changes: 116 additions & 0 deletions app/client/src/pages/setup/NonSuperUserWelcome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
import React, { memo } from "react";
import styled from "styled-components";
import { ASSETS_CDN_URL } from "constants/ThirdPartyConstants";
import { useEffect } from "react";
import { playWelcomeAnimation } from "utils/helpers";
import {
createMessage,
WELCOME_BODY,
WELCOME_HEADER,
} from "@appsmith/constants/messages";
import NonSuperUserForm from "./GetStarted";
import { getAssetUrl } from "@appsmith/utils/airgapHelpers";

const LandingPageWrapper = styled.div`
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
margin: 0 auto;
overflow: auto;
min-width: 800px;
`;

const LandingPageContent = styled.div`
width: 100%;
height: 100%;
display: flex;
align-items: start;
justify-content: center;
position: relative;
z-index: 100;
`;

const StyledTextBanner = styled.div`
width: 60%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 6%;
`;

const StyledBannerHeader = styled.div`
font-size: 72px;
margin: 0px 0px;
font-weight: 600;
margin-right: 3rem;
width: 100%;
text-align: center;
color: var(--ads-v2-color-fg-emphasis-plus);
`;

const StyledBannerBody = styled.div`
font-size: 24px;
margin: ${(props) => props.theme.spaces[7]}px 0px;
font-weight: 500;
margin-right: 9rem;
width: 100%;
text-align: center;
color: var(--ads-v2-color-fg);
`;

const StyledImageBanner = styled.div`
width: 40%;
display: flex;
justify-content: center;
height: 100%;
flex-direction: column;
align-items: end;
`;

const getWelcomeImage = () => `${ASSETS_CDN_URL}/welcome-banner-v2.svg`;
const getAppsmithLogo = () => `${ASSETS_CDN_URL}/appsmith-logo.svg`;

type LandingPageProps = {
onGetStarted?: (role?: string, useCase?: string) => void;
};

const WELCOME_PAGE_ANIMATION_CONTAINER = "welcome-page-animation-container";

function Banner() {
return (
<>
<StyledBannerHeader>{createMessage(WELCOME_HEADER)}</StyledBannerHeader>
<StyledBannerBody>{createMessage(WELCOME_BODY)}</StyledBannerBody>
</>
);
}

export default memo(function NonSuperUserWelcome(props: LandingPageProps) {
useEffect(() => {
playWelcomeAnimation(`#${WELCOME_PAGE_ANIMATION_CONTAINER}`);
}, []);
return (
<LandingPageWrapper
data-testid={"welcome-page"}
id={WELCOME_PAGE_ANIMATION_CONTAINER}
>
<LandingPageContent>
<StyledTextBanner>
<Banner />
<NonSuperUserForm onGetStarted={props.onGetStarted} />
</StyledTextBanner>
<StyledImageBanner>
<div className="flex self-start w-2/6 h-16 ml-56">
<img src={getAssetUrl(getAppsmithLogo())} />
</div>
<div className="flex w-5/6 my-1 h-4/6">
<img className="w-full" src={getAssetUrl(getWelcomeImage())} />
</div>
</StyledImageBanner>
</LandingPageContent>
</LandingPageWrapper>
);
});
112 changes: 112 additions & 0 deletions app/client/src/pages/setup/SuperUserWelcome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import React, { memo } from "react";
import styled from "styled-components";
import { ASSETS_CDN_URL } from "constants/ThirdPartyConstants";
import { useEffect } from "react";
import { playWelcomeAnimation } from "utils/helpers";
import {
createMessage,
WELCOME_BODY,
WELCOME_HEADER,
} from "@appsmith/constants/messages";
import { SuperUserForm } from "./GetStarted";
import { getAssetUrl } from "@appsmith/utils/airgapHelpers";

const LandingPageWrapper = styled.div`
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
margin: 0 auto;
overflow: auto;
min-width: 800px;
`;

const LandingPageContent = styled.div`
width: 100%;
height: 100%;
display: flex;
align-items: start;
justify-content: center;
position: relative;
z-index: 100;
`;

const StyledTextBanner = styled.div`
width: 60%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 6%;
`;

const StyledBannerHeader = styled.div`
font-size: 72px;
margin: 0px 0px;
font-weight: 600;
margin-right: 3rem;
width: 100%;
text-align: center;
color: var(--ads-v2-color-fg-emphasis-plus);
`;

const StyledBannerBody = styled.div`
font-size: 24px;
margin: ${(props) => props.theme.spaces[7]}px 0px;
font-weight: 500;
margin-right: 9rem;
width: 100%;
text-align: center;
color: var(--ads-v2-color-fg);
`;

const StyledImageBanner = styled.div`
width: 40%;
display: flex;
justify-content: center;
height: 100%;
flex-direction: column;
align-items: end;
`;

const getWelcomeImage = () => `${ASSETS_CDN_URL}/welcome-banner-v2.svg`;
const getAppsmithLogo = () => `${ASSETS_CDN_URL}/appsmith-logo.svg`;

const WELCOME_PAGE_ANIMATION_CONTAINER = "welcome-page-animation-container";

function Banner() {
return (
<>
<StyledBannerHeader>{createMessage(WELCOME_HEADER)}</StyledBannerHeader>
<StyledBannerBody>{createMessage(WELCOME_BODY)}</StyledBannerBody>
</>
);
}

export default memo(function SuperUserWelcome() {
useEffect(() => {
playWelcomeAnimation(`#${WELCOME_PAGE_ANIMATION_CONTAINER}`);
}, []);
return (
<LandingPageWrapper
data-testid={"welcome-page"}
id={WELCOME_PAGE_ANIMATION_CONTAINER}
>
<LandingPageContent>
<StyledTextBanner>
<Banner />
<SuperUserForm />
</StyledTextBanner>
<StyledImageBanner>
<div className="flex self-start w-2/6 h-16 ml-56">
<img src={getAssetUrl(getAppsmithLogo())} />
</div>
<div className="flex w-5/6 my-1 h-4/6">
<img className="w-full" src={getAssetUrl(getWelcomeImage())} />
</div>
</StyledImageBanner>
</LandingPageContent>
</LandingPageWrapper>
);
});
121 changes: 8 additions & 113 deletions app/client/src/pages/setup/Welcome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,121 +1,16 @@
import React, { memo } from "react";
import styled from "styled-components";
import { ASSETS_CDN_URL } from "constants/ThirdPartyConstants";
import { useEffect } from "react";
import { playWelcomeAnimation } from "utils/helpers";
import {
createMessage,
WELCOME_BODY,
WELCOME_HEADER,
} from "@appsmith/constants/messages";
import NonSuperUserForm, { SuperUserForm } from "./GetStarted";
import { getAssetUrl } from "@appsmith/utils/airgapHelpers";

const LandingPageWrapper = styled.div`
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
margin: 0 auto;
overflow: auto;
min-width: 800px;
`;

const LandingPageContent = styled.div`
width: 100%;
height: 100%;
display: flex;
align-items: start;
justify-content: center;
position: relative;
z-index: 100;
`;

const StyledTextBanner = styled.div`
width: 60%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 6%;
`;

const StyledBannerHeader = styled.div`
font-size: 72px;
margin: 0px 0px;
font-weight: 600;
margin-right: 3rem;
width: 100%;
text-align: center;
color: var(--ads-v2-color-fg-emphasis-plus);
`;

const StyledBannerBody = styled.div`
font-size: 24px;
margin: ${(props) => props.theme.spaces[7]}px 0px;
font-weight: 500;
margin-right: 9rem;
width: 100%;
text-align: center;
color: var(--ads-v2-color-fg);
`;

const StyledImageBanner = styled.div`
width: 40%;
display: flex;
justify-content: center;
height: 100%;
flex-direction: column;
align-items: end;
`;

const getWelcomeImage = () => `${ASSETS_CDN_URL}/welcome-banner-v2.svg`;
const getAppsmithLogo = () => `${ASSETS_CDN_URL}/appsmith-logo.svg`;
import React from "react";
import SuperUserWelcome from "./SuperUserWelcome";
import NonSuperUserWelcome from "./NonSuperUserWelcome";

type LandingPageProps = {
onGetStarted?: (role?: string, useCase?: string) => void;
forSuperUser: boolean;
};

const WELCOME_PAGE_ANIMATION_CONTAINER = "welcome-page-animation-container";

function Banner() {
return (
<>
<StyledBannerHeader>{createMessage(WELCOME_HEADER)}</StyledBannerHeader>
<StyledBannerBody>{createMessage(WELCOME_BODY)}</StyledBannerBody>
</>
export default function LandingPage(props: LandingPageProps) {
return props.forSuperUser ? (
<SuperUserWelcome />
) : (
<NonSuperUserWelcome onGetStarted={props.onGetStarted} />
);
}

export default memo(function LandingPage(props: LandingPageProps) {
useEffect(() => {
playWelcomeAnimation(`#${WELCOME_PAGE_ANIMATION_CONTAINER}`);
}, []);
return (
<LandingPageWrapper
data-testid={"welcome-page"}
id={WELCOME_PAGE_ANIMATION_CONTAINER}
>
<LandingPageContent>
<StyledTextBanner>
<Banner />
{props.forSuperUser ? (
<SuperUserForm />
) : (
<NonSuperUserForm onGetStarted={props.onGetStarted} />
)}
</StyledTextBanner>
<StyledImageBanner>
<div className="flex self-start w-2/6 h-16 ml-56">
<img src={getAssetUrl(getAppsmithLogo())} />
</div>
<div className="flex w-5/6 my-1 h-4/6">
<img className="w-full" src={getAssetUrl(getWelcomeImage())} />
</div>
</StyledImageBanner>
</LandingPageContent>
</LandingPageWrapper>
);
});