From 0e91c1196d1751540f65a0e744f5d3c8b86db235 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Thu, 8 Dec 2022 11:43:23 +0100
Subject: [PATCH] app,create-app: update to use app.createRoot()

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/shy-birds-hammer.md                | 35 +++++++++++++++++--
 packages/app/src/App.tsx                      | 10 ++----
 .../default-app/packages/app/src/App.tsx      | 10 ++----
 3 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/.changeset/shy-birds-hammer.md b/.changeset/shy-birds-hammer.md
index 132b137407..116652f740 100644
--- a/.changeset/shy-birds-hammer.md
+++ b/.changeset/shy-birds-hammer.md
@@ -2,7 +2,7 @@
 '@backstage/create-app': patch
 ---
 
-Updated the app template to use the new `AppRouter` component instead of `app.getRouter()`.
+Updated the app template to use the new `AppRouter` component instead of `app.getRouter()`, as well as `app.createRoot()` instead of `app.getProvider()`.
 
 To apply this change to an existing app, make the following change to `packages/app/src/App.tsx`:
 
@@ -12,6 +12,37 @@ To apply this change to an existing app, make the following change to `packages/
 
  ...
 
- const AppProvider = app.getProvider();
+-const AppProvider = app.getProvider();
 -const AppRouter = app.getRouter();
+
+ ...
+
+-const App = () => (
++export default app.createRoot(
+-  <AppProvider>
++  <>
+     <AlertDisplay />
+     <OAuthRequestDialog />
+     <AppRouter>
+       <Root>{routes}</Root>
+     </AppRouter>
+-  </AppProvider>
++  </>,
+ );
 ```
+
+The final export step should end up looking something like this:
+
+```tsx
+export default app.createRoot(
+  <>
+    <AlertDisplay />
+    <OAuthRequestDialog />
+    <AppRouter>
+      <Root>{routes}</Root>
+    </AppRouter>
+  </>,
+);
+```
+
+Note that `app.createRoot()` accepts a React element, rather than a component.
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index f21872a742..f4a50a0902 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -145,8 +145,6 @@ const app = createApp({
   },
 });
 
-const AppProvider = app.getProvider();
-
 const routes = (
   <FlatRoutes>
     <Route path="/" element={<Navigate to="catalog" />} />
@@ -277,14 +275,12 @@ const routes = (
   </FlatRoutes>
 );
 
-const App = () => (
-  <AppProvider>
+export default app.createRoot(
+  <>
     <AlertDisplay transientTimeoutMs={2500} />
     <OAuthRequestDialog />
     <AppRouter>
       <Root>{routes}</Root>
     </AppRouter>
-  </AppProvider>
+  </>,
 );
-
-export default App;
diff --git a/packages/create-app/templates/default-app/packages/app/src/App.tsx b/packages/create-app/templates/default-app/packages/app/src/App.tsx
index 368ed4d679..95fc94703e 100644
--- a/packages/create-app/templates/default-app/packages/app/src/App.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/App.tsx
@@ -53,8 +53,6 @@ const app = createApp({
   },
 });
 
-const AppProvider = app.getProvider();
-
 const routes = (
   <FlatRoutes>
     <Route path="/" element={<Navigate to="catalog" />} />
@@ -96,14 +94,12 @@ const routes = (
   </FlatRoutes>
 );
 
-const App = () => (
-  <AppProvider>
+export default app.createRoot(
+  <>
     <AlertDisplay />
     <OAuthRequestDialog />
     <AppRouter>
       <Root>{routes}</Root>
     </AppRouter>
-  </AppProvider>
+  </>,
 );
-
-export default App;