forked from appsmithorg/appsmith
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: Split out the common component between SuperUser and NonSuperU…
…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
1 parent
84eea29
commit bc92b3d
Showing
3 changed files
with
236 additions
and
113 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
}); |