-
Notifications
You must be signed in to change notification settings - Fork 201
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(compass-web): add welcome page COMPASS-8657 (#6593)
* welcome page for web * remove single connection when form is not active * tests * connections clean up for single connection * remove more code to fix tests * cluster url
- Loading branch information
Showing
12 changed files
with
468 additions
and
331 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
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
53 changes: 53 additions & 0 deletions
53
packages/compass-welcome/src/components/desktop-welcome-tab.spec.tsx
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,53 @@ | ||
| import React from 'react'; | ||
| import { | ||
| screen, | ||
| renderWithConnections, | ||
| } from '@mongodb-js/testing-library-compass'; | ||
| import { expect } from 'chai'; | ||
| import DesktopWelcomeTab from './desktop-welcome-tab'; | ||
|
|
||
| const renderDesktopWelcomeTab = ( | ||
| preferences: { | ||
| enableCreatingNewConnections?: boolean; | ||
| } = {} | ||
| ) => { | ||
| renderWithConnections(<DesktopWelcomeTab />, { | ||
| preferences, | ||
| }); | ||
| }; | ||
|
|
||
| describe('DesktopWelcomeTab', function () { | ||
| it('renders with title', function () { | ||
| renderDesktopWelcomeTab(); | ||
| expect(screen.getByText('Welcome to MongoDB Compass')).to.exist; | ||
| }); | ||
|
|
||
| it('does not render create cluster button when enableCreatingNewConnections is false', function () { | ||
| renderDesktopWelcomeTab({ enableCreatingNewConnections: false }); | ||
| try { | ||
| screen.getByTestId('add-new-connection-button'); | ||
| expect.fail('add-new-connection-button should not be rendered'); | ||
| } catch (e) { | ||
| // noop | ||
| } | ||
| }); | ||
|
|
||
| context('when enableCreatingNewConnections is true', function () { | ||
| it('renders info text', function () { | ||
| renderDesktopWelcomeTab({ enableCreatingNewConnections: true }); | ||
| expect( | ||
| screen.getByText('To get started, connect to an existing server or') | ||
| ).to.exist; | ||
| }); | ||
|
|
||
| it('renders create cluster button', function () { | ||
| renderDesktopWelcomeTab({ enableCreatingNewConnections: true }); | ||
| expect(screen.getByTestId('add-new-connection-button')).to.exist; | ||
| }); | ||
|
|
||
| it('renders atlas help section', function () { | ||
| renderDesktopWelcomeTab({ enableCreatingNewConnections: true }); | ||
| expect(screen.getByTestId('welcome-tab-atlas-help-section')).to.exist; | ||
| }); | ||
| }); | ||
| }); |
152 changes: 152 additions & 0 deletions
152
packages/compass-welcome/src/components/desktop-welcome-tab.tsx
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,152 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { | ||
| Button, | ||
| ButtonSize, | ||
| ButtonVariant, | ||
| Subtitle, | ||
| H3, | ||
| Body, | ||
| Link, | ||
| spacing, | ||
| palette, | ||
| css, | ||
| cx, | ||
| useDarkMode, | ||
| Icon, | ||
| } from '@mongodb-js/compass-components'; | ||
| import { useTelemetry } from '@mongodb-js/compass-telemetry/provider'; | ||
| import { useConnectionActions } from '@mongodb-js/compass-connections/provider'; | ||
| import { usePreference } from 'compass-preferences-model/provider'; | ||
| import { WelcomeTabImage } from './welcome-image'; | ||
|
|
||
| const sectionContainerStyles = css({ | ||
| margin: 0, | ||
| padding: spacing[4], | ||
| paddingBottom: 0, | ||
| maxWidth: '450px', | ||
| borderRadius: spacing[200], | ||
| }); | ||
|
|
||
| const atlasContainerStyles = css({ | ||
| backgroundColor: palette.green.light3, | ||
| border: `1px solid ${palette.green.light2}`, | ||
| paddingBottom: spacing[600], | ||
| }); | ||
|
|
||
| const atlasContainerDarkModeStyles = css({ | ||
| backgroundColor: palette.green.dark3, | ||
| borderColor: palette.green.dark2, | ||
| }); | ||
|
|
||
| const titleStyles = css({ | ||
| fontSize: '14px', | ||
| }); | ||
|
|
||
| const descriptionStyles = css({ | ||
| marginTop: spacing[2], | ||
| }); | ||
|
|
||
| const createClusterContainerStyles = css({ | ||
| marginTop: spacing[2], | ||
| }); | ||
|
|
||
| const createClusterButtonStyles = css({ | ||
| fontWeight: 'bold', | ||
| }); | ||
|
|
||
| const createClusterButtonLightModeStyles = css({ | ||
| background: palette.white, | ||
| '&:hover': { | ||
| background: palette.white, | ||
| }, | ||
| '&:focus': { | ||
| background: palette.white, | ||
| }, | ||
| }); | ||
|
|
||
| function AtlasHelpSection(): React.ReactElement { | ||
| const track = useTelemetry(); | ||
| const darkMode = useDarkMode(); | ||
|
|
||
| return ( | ||
| <div | ||
| className={cx( | ||
| sectionContainerStyles, | ||
| atlasContainerStyles, | ||
| darkMode && atlasContainerDarkModeStyles | ||
| )} | ||
| data-testid="welcome-tab-atlas-help-section" | ||
| > | ||
| <Subtitle className={titleStyles}> | ||
| New to Compass and don't have a cluster? | ||
| </Subtitle> | ||
| <Body className={descriptionStyles}> | ||
| If you don't already have a cluster, you can create one for free | ||
| using{' '} | ||
| <Link href="https://www.mongodb.com/atlas/database" target="_blank"> | ||
| MongoDB Atlas | ||
| </Link> | ||
| </Body> | ||
| <div className={createClusterContainerStyles}> | ||
| <Button | ||
| data-testid="atlas-cta-link" | ||
| className={cx( | ||
| createClusterButtonStyles, | ||
| !darkMode && createClusterButtonLightModeStyles | ||
| )} | ||
| onClick={() => track('Atlas Link Clicked', { screen: 'connect' })} | ||
| variant={ButtonVariant.PrimaryOutline} | ||
| href="https://www.mongodb.com/cloud/atlas/lp/try4?utm_source=compass&utm_medium=product&utm_content=v1" | ||
| target="_blank" | ||
| size={ButtonSize.Small} | ||
| > | ||
| CREATE FREE CLUSTER | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const welcomeTabStyles = css({ | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| margin: '0 auto', | ||
| gap: spacing[200], | ||
| }); | ||
|
|
||
| const firstConnectionBtnStyles = css({ | ||
| margin: `${spacing[400]}px 0`, | ||
| }); | ||
|
|
||
| export default function DesktopWelcomeTab() { | ||
| const { createNewConnection } = useConnectionActions(); | ||
| const enableCreatingNewConnections = usePreference( | ||
| 'enableCreatingNewConnections' | ||
| ); | ||
|
|
||
| return ( | ||
| <div className={welcomeTabStyles}> | ||
| <WelcomeTabImage /> | ||
| <div> | ||
| <H3>Welcome to MongoDB Compass</H3> | ||
| {enableCreatingNewConnections && ( | ||
| <> | ||
| <Body>To get started, connect to an existing server or</Body> | ||
| <Button | ||
| className={firstConnectionBtnStyles} | ||
| data-testid="add-new-connection-button" | ||
| variant={ButtonVariant.Primary} | ||
| leftGlyph={<Icon glyph="Plus" />} | ||
| onClick={createNewConnection} | ||
| > | ||
| Add new connection | ||
| </Button> | ||
| <AtlasHelpSection /> | ||
| </> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
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,4 +1,5 @@ | ||
| import WelcomeModal from './modal'; | ||
| import WelcomeTab from './welcome-tab'; | ||
| import DesktopWelcomeTab from './desktop-welcome-tab'; | ||
| import WebWelcomeTab from './web-welcome-tab'; | ||
|
|
||
| export { WelcomeModal, WelcomeTab }; | ||
| export { WelcomeModal, DesktopWelcomeTab, WebWelcomeTab }; |
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
Oops, something went wrong.