From 0a152c9377918a9324622c44b76881b923225c61 Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Wed, 1 Sep 2021 07:54:10 -0500 Subject: [PATCH 1/8] Added the HomepageTimer to the new composable Home Page Signed-off-by: Andre Wanlin --- .changeset/late-mangos-allow.md | 5 +++++ .../home/src/components/HomepageCompositionRoot.tsx | 11 +++++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 .changeset/late-mangos-allow.md diff --git a/.changeset/late-mangos-allow.md b/.changeset/late-mangos-allow.md new file mode 100644 index 0000000000..82a180c836 --- /dev/null +++ b/.changeset/late-mangos-allow.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-home': patch +--- + +Added the HomepageTimer to the new composable Home Page diff --git a/plugins/home/src/components/HomepageCompositionRoot.tsx b/plugins/home/src/components/HomepageCompositionRoot.tsx index 92232fb387..a6e4f482f8 100644 --- a/plugins/home/src/components/HomepageCompositionRoot.tsx +++ b/plugins/home/src/components/HomepageCompositionRoot.tsx @@ -16,7 +16,12 @@ import React, { ReactNode } from 'react'; import { useOutlet } from 'react-router'; -import { Content, Header, Page } from '@backstage/core-components'; +import { + Content, + Header, + Page, + HomepageTimer, +} from '@backstage/core-components'; export const HomepageCompositionRoot = (props: { title?: string; @@ -26,7 +31,9 @@ export const HomepageCompositionRoot = (props: { const children = props.children ?? outlet; return ( -
+
+ +
{children} ); From 1c3dce1db800fc837fc78f36c02c71071a6aa54d Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Sat, 4 Sep 2021 14:16:17 -0500 Subject: [PATCH 2/8] Moved Header and Content to HomePage Signed-off-by: Andre Wanlin --- packages/app/src/App.tsx | 4 +- packages/app/src/components/home/HomePage.tsx | 103 ++++++++++-------- 2 files changed, 59 insertions(+), 48 deletions(-) diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 81dbdf4cac..244bc7aa2a 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -114,9 +114,7 @@ const routes = ( {/* TODO(rubenl): Move this to / once its more mature and components exist */} - }> - - + } /> } /> ( - - - - - - - - - - - ( - - ), - }, - { - label: 'Any', - Component: () => ( - - ), - }, - ]} - /> - - + +
+ +
+ + + + + + + + + + + + ( + + ), + }, + { + label: 'Any', + Component: () => ( + + ), + }, + ]} + /> + + + + ); From 3c1dd8e441059fbaccddc6be8dfb1ebc6f1e9883 Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Mon, 6 Sep 2021 09:08:16 -0500 Subject: [PATCH 3/8] Keep using HomepageCompositionRoot Signed-off-by: Andre Wanlin --- packages/app/src/App.tsx | 4 +++- .../src/components/HomepageCompositionRoot.tsx | 15 +-------------- 2 files changed, 4 insertions(+), 15 deletions(-) diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 244bc7aa2a..81dbdf4cac 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -114,7 +114,9 @@ const routes = ( {/* TODO(rubenl): Move this to / once its more mature and components exist */} - } /> + }> + + } /> { const outlet = useOutlet(); const children = props.children ?? outlet; - return ( - -
- -
- {children} - - ); + return
{children}
; }; From bcf312fa52834d122aaca94d1e6f33a8d1a0c8e2 Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Wed, 1 Sep 2021 07:54:10 -0500 Subject: [PATCH 4/8] Added the HomepageTimer to the new composable Home Page Signed-off-by: Andre Wanlin --- .changeset/late-mangos-allow.md | 5 +++++ .../home/src/components/HomepageCompositionRoot.tsx | 11 +++++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 .changeset/late-mangos-allow.md diff --git a/.changeset/late-mangos-allow.md b/.changeset/late-mangos-allow.md new file mode 100644 index 0000000000..82a180c836 --- /dev/null +++ b/.changeset/late-mangos-allow.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-home': patch +--- + +Added the HomepageTimer to the new composable Home Page diff --git a/plugins/home/src/components/HomepageCompositionRoot.tsx b/plugins/home/src/components/HomepageCompositionRoot.tsx index 92232fb387..a6e4f482f8 100644 --- a/plugins/home/src/components/HomepageCompositionRoot.tsx +++ b/plugins/home/src/components/HomepageCompositionRoot.tsx @@ -16,7 +16,12 @@ import React, { ReactNode } from 'react'; import { useOutlet } from 'react-router'; -import { Content, Header, Page } from '@backstage/core-components'; +import { + Content, + Header, + Page, + HomepageTimer, +} from '@backstage/core-components'; export const HomepageCompositionRoot = (props: { title?: string; @@ -26,7 +31,9 @@ export const HomepageCompositionRoot = (props: { const children = props.children ?? outlet; return ( -
+
+ +
{children} ); From f648f9c0b9a59bf82bf7c5edb54d16507873ebc8 Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Sat, 4 Sep 2021 14:16:17 -0500 Subject: [PATCH 5/8] Moved Header and Content to HomePage Signed-off-by: Andre Wanlin --- packages/app/src/App.tsx | 4 +- packages/app/src/components/home/HomePage.tsx | 104 ++++++++++-------- 2 files changed, 59 insertions(+), 49 deletions(-) diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 81dbdf4cac..244bc7aa2a 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -114,9 +114,7 @@ const routes = ( {/* TODO(rubenl): Move this to / once its more mature and components exist */} - }> - - + } /> } /> ( - - - - - - - - - - - - - - ( - - ), - }, - { - label: 'Any', - Component: () => ( - - ), - }, - ]} - /> - - + +
+ +
+ + + + + + + + + + + + ( + + ), + }, + { + label: 'Any', + Component: () => ( + + ), + }, + ]} + /> + + + + ); From 643bc5df772b9438a971f0aecdd9d9886d01dfa7 Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Mon, 6 Sep 2021 09:08:16 -0500 Subject: [PATCH 6/8] Keep using HomepageCompositionRoot Signed-off-by: Andre Wanlin --- packages/app/src/App.tsx | 4 +++- .../src/components/HomepageCompositionRoot.tsx | 15 +-------------- 2 files changed, 4 insertions(+), 15 deletions(-) diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 244bc7aa2a..81dbdf4cac 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -114,7 +114,9 @@ const routes = ( {/* TODO(rubenl): Move this to / once its more mature and components exist */} - } /> + }> + + } /> { const outlet = useOutlet(); const children = props.children ?? outlet; - return ( - -
- -
- {children} - - ); + return
{children}
; }; From ef09feb9844c2b5fc93c093361d41214bda2b012 Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Thu, 9 Sep 2021 08:17:41 -0500 Subject: [PATCH 7/8] Updated to use empty fragments for clarity Signed-off-by: Andre Wanlin --- plugins/home/src/components/HomepageCompositionRoot.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/home/src/components/HomepageCompositionRoot.tsx b/plugins/home/src/components/HomepageCompositionRoot.tsx index 563af75d64..f2c5ad0e8b 100644 --- a/plugins/home/src/components/HomepageCompositionRoot.tsx +++ b/plugins/home/src/components/HomepageCompositionRoot.tsx @@ -23,5 +23,5 @@ export const HomepageCompositionRoot = (props: { }) => { const outlet = useOutlet(); const children = props.children ?? outlet; - return
{children}
; + return <>{children}; }; From 80de2b7965b4ba0431f1d173baeb591ab0d535fb Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Thu, 9 Sep 2021 08:25:17 -0500 Subject: [PATCH 8/8] Updated changeset to minor and added migration instructions Signed-off-by: Andre Wanlin --- .changeset/late-mangos-allow.md | 27 +++++++++++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/.changeset/late-mangos-allow.md b/.changeset/late-mangos-allow.md index 82a180c836..e1e4fe1d56 100644 --- a/.changeset/late-mangos-allow.md +++ b/.changeset/late-mangos-allow.md @@ -1,5 +1,28 @@ --- -'@backstage/plugin-home': patch +'@backstage/plugin-home': minor --- -Added the HomepageTimer to the new composable Home Page +The homepage `
` is now part of the composable canvas (allowing you to add the , for example). + +You will need to wrap your existing composed `` component in ``, `
`, and `` components, like this: + +```diff +// app/src/components/home/HomePage.tsx + ++ import { Content, Header, Page, HomePageTimer } from '@backstage/core-components'; + +export const HomePage = () => ( ++ ++
++ ++
++ + + + + + // ... ++ ++ +); +```