Merge pull request #17022 from sichapman/feature/bazaarHomepageCardStyleOptions

BazaarPage card style options

.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`.

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

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<boolean>;
 
 // @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)
 ```

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: <SortView />,
+      children: <SortView fullWidth={fullWidth} fullHeight={fullHeight} />,
     },
     {
       path: '/about',

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'}
       />
       <Content noPadding className={classes.container} />
     </Content>

plugins/bazaar/src/components/SortView/index.ts

@@ -15,3 +15,4 @@
  */
 
 export { SortView } from './SortView';
+export type { SortViewProps } from './SortView';

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';