paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 34 Packages Projects Releases Wiki Activity

Merge pull request #7029 from awanlin/topic/add-homepagetimer-to-new-homepage

Browse Source 
Added the HomepageTimer to the new composable Home Page
This commit is contained in:
Ben Lambert
2021-09-13 17:08:57 +02:00
committed by GitHub
parent 3264abcd40 80de2b7965
commit 16b010ff4a
3 changed files with 90 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/late-mangos-allow.md
+28
View File
@@ -0,0 +1,28 @@
---
'@backstage/plugin-home': minor
---
The homepage `<Header />` is now part of the composable canvas (allowing you to add the <HomepageTimer />, for example).
You will need to wrap your existing composed `<HomePage />` component in `<Page />`, `<Header />`, and `<Content />` components, like this:
```diff
// app/src/components/home/HomePage.tsx
+ import { Content, Header, Page, HomePageTimer } from '@backstage/core-components';
export const HomePage = () => (
+ <Page themeId="home">
+ <Header title="Home">
+ <HomepageTimer />
+ </Header>
+ <Content>
<Grid container spacing={3}>
<Grid item xs={12}>
<HomePageSearchBar />
</Grid>
// ...
+ </Content>
+ </Page>
);
```
packages/app/src/components/home/HomePage.tsx
+61 -45
View File
@@ -22,52 +22,68 @@ import {
ComponentTabs,
ComponentTab,
} from '@backstage/plugin-home';
import {
Content,
Header,
Page,
HomepageTimer,
} from '@backstage/core-components';
import { HomePageSearchBar } from '@backstage/plugin-search';
export const HomePage = () => (
<Grid container spacing={3}>
<Grid item xs={12}>
<HomePageSearchBar />
</Grid>
<Grid item xs={12} md={4}>
<HomePageRandomJoke />
</Grid>
<Grid item xs={12} md={4}>
<HomePageRandomJoke defaultCategory="any" Renderer={ComponentAccordion} />
<HomePageRandomJoke
title="Another Random Joke"
Renderer={ComponentAccordion}
/>
<HomePageRandomJoke
title="One More Random Joke"
defaultCategory="programming"
Renderer={ComponentAccordion}
/>
</Grid>
<Grid item xs={12} md={4}>
<ComponentTabs
title="Random Jokes"
tabs={[
{
label: 'Programming',
Component: () => (
<HomePageRandomJoke
defaultCategory="programming"
Renderer={ComponentTab}
/>
),
},
{
label: 'Any',
Component: () => (
<HomePageRandomJoke
defaultCategory="any"
Renderer={ComponentTab}
/>
),
},
]}
/>
</Grid>
</Grid>
<Page themeId="home">
<Header title="Home">
<HomepageTimer />
</Header>
<Content>
<Grid container spacing={3}>
<Grid item xs={12}>
<HomePageSearchBar />
</Grid>
<Grid item xs={12} md={4}>
<HomePageRandomJoke />
</Grid>
<Grid item xs={12} md={4}>
<HomePageRandomJoke
defaultCategory="any"
Renderer={ComponentAccordion}
/>
<HomePageRandomJoke
title="Another Random Joke"
Renderer={ComponentAccordion}
/>
<HomePageRandomJoke
title="One More Random Joke"
defaultCategory="programming"
Renderer={ComponentAccordion}
/>
</Grid>
<Grid item xs={12} md={4}>
<ComponentTabs
title="Random Jokes"
tabs={[
{
label: 'Programming',
Component: () => (
<HomePageRandomJoke
defaultCategory="programming"
Renderer={ComponentTab}
/>
),
},
{
label: 'Any',
Component: () => (
<HomePageRandomJoke
defaultCategory="any"
Renderer={ComponentTab}
/>
),
},
]}
/>
</Grid>
</Grid>
</Content>
</Page>
);
plugins/home/src/components/HomepageCompositionRoot.tsx
+1 -7
View File
@@ -16,7 +16,6 @@
import React, { ReactNode } from 'react';
import { useOutlet } from 'react-router';
import { Content, Header, Page } from '@backstage/core-components';
export const HomepageCompositionRoot = (props: {
title?: string;
@@ -24,10 +23,5 @@ export const HomepageCompositionRoot = (props: {
}) => {
const outlet = useOutlet();
const children = props.children ?? outlet;
return (
<Page themeId="home">
<Header title={props.title ?? 'Home'} />
<Content>{children}</Content>
</Page>
);
return <>{children}</>;
};