Skip to content

Commit

Permalink
chore: Split out the common component between SuperUser and NonSuperU…
Browse files Browse the repository at this point in the history
…ser form (appsmithorg#25061)

Split out the common component between SuperUser and NonSuperUser form

>
>
#### PR fixes following issue(s)
Fixes # appsmithorg#24120
>
>
#### Media
> A video or a GIF is preferred. when using Loom, don’t embed because it
looks like it’s a GIF. instead, just link to the video
>
>
#### Type of change
- Chore (housekeeping or task changes that don't impact user perception)
>
>
>
## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [x] Manual
- [ ] Jest
- [ ] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
  • Loading branch information
ankitsrivas14 authored Jul 5, 2023
1 parent 84eea29 commit bc92b3d
Show file tree
Hide file tree
Showing 3 changed files with 236 additions and 113 deletions.
116 changes: 116 additions & 0 deletions app/client/src/pages/setup/NonSuperUserWelcome.tsx
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
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
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>
);
});

0 comments on commit bc92b3d

Please sign in to comment.