chore: Update imports, rename components

Signed-off-by: Gabriel Dugny <gabriel.dugny@believe.com>

packages/techdocs-cli-embedded-app/package.json

@@ -40,6 +40,7 @@
     "@backstage/frontend-defaults": "workspace:^",
     "@backstage/frontend-plugin-api": "workspace:^",
     "@backstage/integration-react": "workspace:^",
+    "@backstage/plugin-app-react": "workspace:^",
     "@backstage/plugin-catalog": "workspace:^",
     "@backstage/plugin-techdocs": "workspace:^",
     "@backstage/plugin-techdocs-react": "workspace:^",

packages/techdocs-cli-embedded-app/src/App.tsx

@@ -24,7 +24,7 @@ import { apis } from './apis';
 import { configLoader } from './config';
 
 import { createFrontendModule } from '@backstage/frontend-plugin-api';
-import { SidebarContent } from './components/Root/Root';
+import { SidebarContent } from './components/Sidebar';
 import {
   techDocsThemeToggleAddonModule,
   techdocsLiveReloadAddonModule,

packages/techdocs-cli-embedded-app/src/components/Sidebar/Sidebar.tsx

@@ -13,9 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import { PropsWithChildren } from 'react';
-
 import { makeStyles } from '@material-ui/core/styles';
 import LibraryBooks from '@material-ui/icons/LibraryBooks';
 import LogoFull from './LogoFull';
@@ -30,7 +27,7 @@ import {
   useSidebarOpenState,
   Link,
 } from '@backstage/core-components';
-import { NavContentBlueprint } from '@backstage/frontend-plugin-api';
+import { NavContentBlueprint } from '@backstage/plugin-app-react';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -64,7 +61,7 @@ const SidebarLogo = () => {
   );
 };
 
-export const Root = ({ children }: PropsWithChildren<{}>) => (
+export const SidebarNav = (): React.ReactElement => (
   <SidebarPage>
     <Sidebar>
       <SidebarLogo />
@@ -77,11 +74,11 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
       />
       {/* End global nav */}
     </Sidebar>
-    {children}
   </SidebarPage>
 );
+
 export const SidebarContent = NavContentBlueprint.make({
   params: {
-    component: () => <Root />,
+    component: () => <SidebarNav />,
   },
 });

packages/techdocs-cli-embedded-app/src/components/Sidebar/index.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { Root } from './Root';
+export { SidebarContent } from './Sidebar';

yarn.lock

@@ -47935,6 +47935,7 @@ __metadata:
     "@backstage/frontend-defaults": "workspace:^"
     "@backstage/frontend-plugin-api": "workspace:^"
     "@backstage/integration-react": "workspace:^"
+    "@backstage/plugin-app-react": "workspace:^"
     "@backstage/plugin-catalog": "workspace:^"
     "@backstage/plugin-techdocs": "workspace:^"
     "@backstage/plugin-techdocs-react": "workspace:^"