From 96b868cd1c6ca313ac18316d1496448d9d36ca66 Mon Sep 17 00:00:00 2001 From: Simon Chapman Date: Wed, 22 Mar 2023 16:43:10 +0000 Subject: [PATCH 1/4] Bazaar ProjectPreview style override via HomePage Signed-off-by: Simon Chapman --- plugins/bazaar/README.md | 2 ++ plugins/bazaar/src/components/HomePage/HomePage.tsx | 6 ++++-- plugins/bazaar/src/components/SortView/SortView.tsx | 12 ++++++++++-- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/plugins/bazaar/README.md b/plugins/bazaar/README.md index dbaed74b3b..bd4589f2d3 100644 --- a/plugins/bazaar/README.md +++ b/plugins/bazaar/README.md @@ -39,6 +39,8 @@ const routes = ( ``` +`BazaarPage` can be given the optional properties `fullHeight` and `fullWidth` which are used to adjust the cards styling to fit more or less on the page as required (both default to `true`). + Add a **Bazaar icon** to the Sidebar to easily access the Bazaar. In `packages/app/src/components/Root.tsx` add: ```diff diff --git a/plugins/bazaar/src/components/HomePage/HomePage.tsx b/plugins/bazaar/src/components/HomePage/HomePage.tsx index 73a8cd7922..98ee6a5196 100644 --- a/plugins/bazaar/src/components/HomePage/HomePage.tsx +++ b/plugins/bazaar/src/components/HomePage/HomePage.tsx @@ -23,16 +23,18 @@ import { About } from '../About'; export type HomePageProps = { title?: string; subtitle?: string; + fullWidth?: boolean; + fullHeight?: boolean; }; export const HomePage = (props: HomePageProps) => { - const { title, subtitle } = props; + const { title, subtitle, fullWidth, fullHeight } = props; const tabContent = [ { path: '/', title: 'Home', - children: , + children: , }, { path: '/about', diff --git a/plugins/bazaar/src/components/SortView/SortView.tsx b/plugins/bazaar/src/components/SortView/SortView.tsx index b3e592fc6f..46f4c64c42 100644 --- a/plugins/bazaar/src/components/SortView/SortView.tsx +++ b/plugins/bazaar/src/components/SortView/SortView.tsx @@ -67,7 +67,14 @@ const getUnlinkedCatalogEntities = ( }; /** @public */ -export const SortView = () => { +export type SortViewProps = { + fullWidth?: boolean; + fullHeight?: boolean; +}; + +/** @public */ +export const SortView = (props: SortViewProps) => { + const { fullWidth = true, fullHeight = true } = props; const bazaarApi = useApi(bazaarApiRef); const catalogApi = useApi(catalogApiRef); const classes = useStyles(); @@ -199,7 +206,8 @@ export const SortView = () => { bazaarProjects={getSearchResults() || []} fetchBazaarProjects={fetchBazaarProjects} catalogEntities={unlinkedCatalogEntities || []} - height="large" + gridSize={fullWidth ? 2 : 4} + height={fullHeight ? 'large' : 'small'} /> From 656914bb0adb1be96f8c9809563306967a6e23e2 Mon Sep 17 00:00:00 2001 From: Simon Chapman Date: Wed, 22 Mar 2023 16:43:15 +0000 Subject: [PATCH 2/4] Add changeset Signed-off-by: Simon Chapman --- .changeset/tall-oranges-own.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/tall-oranges-own.md diff --git a/.changeset/tall-oranges-own.md b/.changeset/tall-oranges-own.md new file mode 100644 index 0000000000..61aa442c7f --- /dev/null +++ b/.changeset/tall-oranges-own.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-bazaar': patch +--- + +Added the `fullWidth` and `fullHeight` optional properties to the `BazaarPage`, +to replicate the styling options available on the `BazaarOverviewCard`. From b8330e8b0221d1a04bd71b19924538294ffab5c8 Mon Sep 17 00:00:00 2001 From: Simon Chapman Date: Wed, 22 Mar 2023 16:43:19 +0000 Subject: [PATCH 3/4] Add missing exports Signed-off-by: Simon Chapman --- plugins/bazaar/src/components/SortView/index.ts | 1 + plugins/bazaar/src/index.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/plugins/bazaar/src/components/SortView/index.ts b/plugins/bazaar/src/components/SortView/index.ts index 086c7c29d1..b40b2955b5 100644 --- a/plugins/bazaar/src/components/SortView/index.ts +++ b/plugins/bazaar/src/components/SortView/index.ts @@ -15,3 +15,4 @@ */ export { SortView } from './SortView'; +export type { SortViewProps } from './SortView'; diff --git a/plugins/bazaar/src/index.ts b/plugins/bazaar/src/index.ts index 585bab1789..8473cc548c 100644 --- a/plugins/bazaar/src/index.ts +++ b/plugins/bazaar/src/index.ts @@ -20,4 +20,5 @@ export { BazaarOverviewCard } from './components/BazaarOverviewCard'; export type { BazaarOverviewCardProps } from './components/BazaarOverviewCard'; export { EntityBazaarInfoCard } from './components/EntityBazaarInfoCard'; export { SortView } from './components/SortView'; +export type { SortViewProps } from './components/SortView'; export type { HomePageProps as BazaarPageProps } from './components/HomePage'; From 500b5d56129609e37174cfb5ba84bf38aca93002 Mon Sep 17 00:00:00 2001 From: Simon Chapman Date: Wed, 22 Mar 2023 16:43:24 +0000 Subject: [PATCH 4/4] Update API report Signed-off-by: Simon Chapman --- plugins/bazaar/api-report.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/plugins/bazaar/api-report.md b/plugins/bazaar/api-report.md index f4104258e7..11ce735bf5 100644 --- a/plugins/bazaar/api-report.md +++ b/plugins/bazaar/api-report.md @@ -30,6 +30,8 @@ export const BazaarPage: (props: BazaarPageProps) => JSX.Element; export type BazaarPageProps = { title?: string; subtitle?: string; + fullWidth?: boolean; + fullHeight?: boolean; }; // @public (undocumented) @@ -53,7 +55,13 @@ export const isBazaarAvailable: ( ) => Promise; // @public (undocumented) -export const SortView: () => JSX.Element; +export const SortView: (props: SortViewProps) => JSX.Element; + +// @public (undocumented) +export type SortViewProps = { + fullWidth?: boolean; + fullHeight?: boolean; +}; // (No @packageDocumentation comment for this package) ```