From 0a152c9377918a9324622c44b76881b923225c61 Mon Sep 17 00:00:00 2001
From: Andre Wanlin <awanlin@rapidrtc.com>
Date: Wed, 1 Sep 2021 07:54:10 -0500
Subject: [PATCH 1/3] Added the HomepageTimer to the new composable Home Page

Signed-off-by: Andre Wanlin <awanlin@rapidrtc.com>
---
 .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 (
     <Page themeId="home">
-      <Header title={props.title ?? 'Home'} />
+      <Header title={props.title ?? 'Home'}>
+        <HomepageTimer />
+      </Header>
       <Content>{children}</Content>
     </Page>
   );

From 1c3dce1db800fc837fc78f36c02c71071a6aa54d Mon Sep 17 00:00:00 2001
From: Andre Wanlin <awanlin@rapidrtc.com>
Date: Sat, 4 Sep 2021 14:16:17 -0500
Subject: [PATCH 2/3] Moved Header and Content to HomePage

Signed-off-by: Andre Wanlin <awanlin@rapidrtc.com>
---
 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 = (
   <FlatRoutes>
     <Navigate key="/" to="catalog" />
     {/* TODO(rubenl): Move this to / once its more mature and components exist */}
-    <Route path="/home" element={<HomepageCompositionRoot />}>
-      <HomePage />
-    </Route>
+    <Route path="/home" element={<HomePage />} />
     <Route path="/catalog" element={<CatalogIndexPage />} />
     <Route
       path="/catalog/:namespace/:kind/:name"
diff --git a/packages/app/src/components/home/HomePage.tsx b/packages/app/src/components/home/HomePage.tsx
index e171e22ae9..505d59889e 100644
--- a/packages/app/src/components/home/HomePage.tsx
+++ b/packages/app/src/components/home/HomePage.tsx
@@ -22,51 +22,64 @@ import {
   ComponentTabs,
   ComponentTab,
 } from '@backstage/plugin-home';
+import {
+  Content,
+  Header,
+  Page,
+  HomepageTimer,
+} from '@backstage/core-components';
 
 export const HomePage = () => (
-  <Grid container spacing={3}>
-    <Grid item xs={12} md={4}>
-      <RandomJokeHomePageComponent />
-    </Grid>
-    <Grid item xs={12} md={4}>
-      <RandomJokeHomePageComponent
-        defaultCategory="any"
-        Renderer={ComponentAccordion}
-      />
-      <RandomJokeHomePageComponent
-        title="Another Random Joke"
-        Renderer={ComponentAccordion}
-      />
-      <RandomJokeHomePageComponent
-        title="One More Random Joke"
-        defaultCategory="programming"
-        Renderer={ComponentAccordion}
-      />
-    </Grid>
-    <Grid item xs={12} md={4}>
-      <ComponentTabs
-        title="Random Jokes"
-        tabs={[
-          {
-            label: 'Programming',
-            Component: () => (
-              <RandomJokeHomePageComponent
-                defaultCategory="programming"
-                Renderer={ComponentTab}
-              />
-            ),
-          },
-          {
-            label: 'Any',
-            Component: () => (
-              <RandomJokeHomePageComponent
-                defaultCategory="any"
-                Renderer={ComponentTab}
-              />
-            ),
-          },
-        ]}
-      />
-    </Grid>
-  </Grid>
+  <Page themeId="home">
+    <Header title="Home">
+      <HomepageTimer />
+    </Header>
+    <Content>
+      <Grid container spacing={3}>
+        <Grid item xs={12} md={4}>
+          <RandomJokeHomePageComponent />
+        </Grid>
+        <Grid item xs={12} md={4}>
+          <RandomJokeHomePageComponent
+            defaultCategory="any"
+            Renderer={ComponentAccordion}
+          />
+          <RandomJokeHomePageComponent
+            title="Another Random Joke"
+            Renderer={ComponentAccordion}
+          />
+          <RandomJokeHomePageComponent
+            title="One More Random Joke"
+            defaultCategory="programming"
+            Renderer={ComponentAccordion}
+          />
+        </Grid>
+        <Grid item xs={12} md={4}>
+          <ComponentTabs
+            title="Random Jokes"
+            tabs={[
+              {
+                label: 'Programming',
+                Component: () => (
+                  <RandomJokeHomePageComponent
+                    defaultCategory="programming"
+                    Renderer={ComponentTab}
+                  />
+                ),
+              },
+              {
+                label: 'Any',
+                Component: () => (
+                  <RandomJokeHomePageComponent
+                    defaultCategory="any"
+                    Renderer={ComponentTab}
+                  />
+                ),
+              },
+            ]}
+          />
+        </Grid>
+      </Grid>
+    </Content>
+  </Page>
 );

From 3c1dd8e441059fbaccddc6be8dfb1ebc6f1e9883 Mon Sep 17 00:00:00 2001
From: Andre Wanlin <awanlin@rapidrtc.com>
Date: Mon, 6 Sep 2021 09:08:16 -0500
Subject: [PATCH 3/3] Keep using HomepageCompositionRoot

Signed-off-by: Andre Wanlin <awanlin@rapidrtc.com>
---
 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 = (
   <FlatRoutes>
     <Navigate key="/" to="catalog" />
     {/* TODO(rubenl): Move this to / once its more mature and components exist */}
-    <Route path="/home" element={<HomePage />} />
+    <Route path="/home" element={<HomepageCompositionRoot />}>
+      <HomePage />
+    </Route>
     <Route path="/catalog" element={<CatalogIndexPage />} />
     <Route
       path="/catalog/:namespace/:kind/:name"
diff --git a/plugins/home/src/components/HomepageCompositionRoot.tsx b/plugins/home/src/components/HomepageCompositionRoot.tsx
index a6e4f482f8..563af75d64 100644
--- a/plugins/home/src/components/HomepageCompositionRoot.tsx
+++ b/plugins/home/src/components/HomepageCompositionRoot.tsx
@@ -16,12 +16,6 @@
 
 import React, { ReactNode } from 'react';
 import { useOutlet } from 'react-router';
-import {
-  Content,
-  Header,
-  Page,
-  HomepageTimer,
-} from '@backstage/core-components';
 
 export const HomepageCompositionRoot = (props: {
   title?: string;
@@ -29,12 +23,5 @@ export const HomepageCompositionRoot = (props: {
 }) => {
   const outlet = useOutlet();
   const children = props.children ?? outlet;
-  return (
-    <Page themeId="home">
-      <Header title={props.title ?? 'Home'}>
-        <HomepageTimer />
-      </Header>
-      <Content>{children}</Content>
-    </Page>
-  );
+  return <div>{children}</div>;
 };