-
Notifications
You must be signed in to change notification settings - Fork 358
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
upcoming: [M3-7874] - Linode Create Refactor - Marketplace App Sectio…
…ns (#10520) * add app sections * clean up and use `stort` insted of `toStorted` * clean up and unit test * break up things into more components * Added changeset: Linode Create Refactor - Marketplace App Sections * feedback @hana-linode * make `oneClickAppsv2` the source of truth * use client side icon url * fix scrolling errors into view * update which apps are new --------- Co-authored-by: Banks Nussman <banks@nussman.us>
- Loading branch information
1 parent
8545f68
commit 894afd5
Showing
21 changed files
with
428 additions
and
2,722 deletions.
There are no files selected for viewing
5 changes: 5 additions & 0 deletions
5
packages/manager/.changeset/pr-10520-upcoming-features-1717077696131.md
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,5 @@ | ||
| --- | ||
| "@linode/manager": Upcoming Features | ||
| --- | ||
|
|
||
| Linode Create Refactor - Marketplace App Sections ([#10520](https://github.com/linode/manager/pull/10520)) |
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
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
80 changes: 80 additions & 0 deletions
80
packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/AppSection.test.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,80 @@ | ||
| import userEvent from '@testing-library/user-event'; | ||
| import React from 'react'; | ||
|
|
||
| import { stackScriptFactory } from 'src/factories'; | ||
| import { renderWithTheme } from 'src/utilities/testHelpers'; | ||
|
|
||
| import { AppSection } from './AppSection'; | ||
|
|
||
| describe('AppSection', () => { | ||
| it('should render a title', () => { | ||
| const { getByText } = renderWithTheme( | ||
| <AppSection | ||
| onOpenDetailsDrawer={vi.fn()} | ||
| onSelect={vi.fn()} | ||
| selectedStackscriptId={undefined} | ||
| stackscripts={[]} | ||
| title="Test title" | ||
| /> | ||
| ); | ||
|
|
||
| expect(getByText('Test title')).toBeVisible(); | ||
| }); | ||
|
|
||
| it('should render apps', () => { | ||
| const app = stackScriptFactory.build({ | ||
| id: 0, | ||
| label: 'Linode Marketplace App', | ||
| }); | ||
|
|
||
| const { getByText } = renderWithTheme( | ||
| <AppSection | ||
| onOpenDetailsDrawer={vi.fn()} | ||
| onSelect={vi.fn()} | ||
| selectedStackscriptId={undefined} | ||
| stackscripts={[app]} | ||
| title="Test title" | ||
| /> | ||
| ); | ||
|
|
||
| expect(getByText('Linode Marketplace App')).toBeVisible(); | ||
| }); | ||
|
|
||
| it('should call `onOpenDetailsDrawer` when the details button is clicked for an app', async () => { | ||
| const app = stackScriptFactory.build({ id: 0 }); | ||
| const onOpenDetailsDrawer = vi.fn(); | ||
|
|
||
| const { getByLabelText } = renderWithTheme( | ||
| <AppSection | ||
| onOpenDetailsDrawer={onOpenDetailsDrawer} | ||
| onSelect={vi.fn()} | ||
| selectedStackscriptId={undefined} | ||
| stackscripts={[app]} | ||
| title="Test title" | ||
| /> | ||
| ); | ||
|
|
||
| await userEvent.click(getByLabelText(`Info for "${app.label}"`)); | ||
|
|
||
| expect(onOpenDetailsDrawer).toHaveBeenCalledWith(app.id); | ||
| }); | ||
|
|
||
| it('should call `onSelect` when an app is clicked', async () => { | ||
| const app = stackScriptFactory.build({ id: 0 }); | ||
| const onSelect = vi.fn(); | ||
|
|
||
| const { getByText } = renderWithTheme( | ||
| <AppSection | ||
| onOpenDetailsDrawer={vi.fn()} | ||
| onSelect={onSelect} | ||
| selectedStackscriptId={undefined} | ||
| stackscripts={[app]} | ||
| title="Test title" | ||
| /> | ||
| ); | ||
|
|
||
| await userEvent.click(getByText(app.label)); | ||
|
|
||
| expect(onSelect).toHaveBeenCalledWith(app); | ||
| }); | ||
| }); |
48 changes: 48 additions & 0 deletions
48
packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/AppSection.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,48 @@ | ||
| import Grid from '@mui/material/Unstable_Grid2'; | ||
| import React from 'react'; | ||
|
|
||
| import { Divider } from 'src/components/Divider'; | ||
| import { Stack } from 'src/components/Stack'; | ||
| import { Typography } from 'src/components/Typography'; | ||
| import { oneClickApps } from 'src/features/OneClickApps/oneClickAppsv2'; | ||
|
|
||
| import { AppSelectionCard } from './AppSelectionCard'; | ||
|
|
||
| import type { StackScript } from '@linode/api-v4'; | ||
|
|
||
| interface Props { | ||
| onOpenDetailsDrawer: (stackscriptId: number) => void; | ||
| onSelect: (stackscript: StackScript) => void; | ||
| selectedStackscriptId: null | number | undefined; | ||
| stackscripts: StackScript[]; | ||
| title: string; | ||
| } | ||
|
|
||
| export const AppSection = (props: Props) => { | ||
| const { | ||
| onOpenDetailsDrawer, | ||
| onSelect, | ||
| selectedStackscriptId, | ||
| stackscripts, | ||
| title, | ||
| } = props; | ||
|
|
||
| return ( | ||
| <Stack> | ||
| <Typography variant="h2">{title}</Typography> | ||
| <Divider spacingBottom={16} spacingTop={16} /> | ||
| <Grid container spacing={2}> | ||
| {stackscripts?.map((stackscript) => ( | ||
| <AppSelectionCard | ||
| checked={stackscript.id === selectedStackscriptId} | ||
| iconUrl={`/assets/${oneClickApps[stackscript.id].logo_url}`} | ||
| key={stackscript.id} | ||
| label={stackscript.label} | ||
| onOpenDetailsDrawer={() => onOpenDetailsDrawer(stackscript.id)} | ||
| onSelect={() => onSelect(stackscript)} | ||
| /> | ||
| ))} | ||
| </Grid> | ||
| </Stack> | ||
| ); | ||
| }; |
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.