Adjust create-app & api-report

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

packages/app/src/components/Root/Root.tsx

@@ -85,37 +85,41 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
   <SidebarPage>
     <Sidebar>
       <SidebarLogo />
-      {/* <SidebarGroup label="Search" icon={<SearchIcon />} to="/search"> */}
-      <SidebarSearch />
-      {/* </SidebarGroup> */}
+      <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
+        <SidebarSearch />
+      </SidebarGroup>
       <SidebarDivider />
-      {/* Global nav, not org-specific */}
-      {/* <SidebarGroup label="Menu" icon={<MenuIcon />}> */}
-      <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
-      <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
-      <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
-      <SidebarItem icon={LayersIcon} to="explore" text="Explore" />
-      <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
-      {/* End global nav */}
-      <SidebarDivider />
-      <SidebarScrollWrapper>
-        <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
-        <SidebarItem icon={RuleIcon} to="lighthouse" text="Lighthouse" />
-        <SidebarItem icon={MoneyIcon} to="cost-insights" text="Cost Insights" />
-        <SidebarItem icon={GraphiQLIcon} to="graphiql" text="GraphiQL" />
-      </SidebarScrollWrapper>
-      <SidebarDivider />
-      <Shortcuts />
-      {/* </SidebarGroup> */}
+      <SidebarGroup label="Menu" icon={<MenuIcon />}>
+        {/* Global nav, not org-specific */}
+        <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
+        <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
+        <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
+        <SidebarItem icon={LayersIcon} to="explore" text="Explore" />
+        <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
+        {/* End global nav */}
+        <SidebarDivider />
+        <SidebarScrollWrapper>
+          <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
+          <SidebarItem icon={RuleIcon} to="lighthouse" text="Lighthouse" />
+          <SidebarItem
+            icon={MoneyIcon}
+            to="cost-insights"
+            text="Cost Insights"
+          />
+          <SidebarItem icon={GraphiQLIcon} to="graphiql" text="GraphiQL" />
+        </SidebarScrollWrapper>
+        <SidebarDivider />
+        <Shortcuts />
+      </SidebarGroup>
       <SidebarSpace />
       <SidebarDivider />
-      {/* <SidebarGroup
+      <SidebarGroup
         label="Settings"
         icon={<UserSettingsSignInAvatar />}
         to="/settings"
-      > */}
-      <SidebarSettings />
-      {/* </SidebarGroup> */}
+      >
+        <SidebarSettings />
+      </SidebarGroup>
     </Sidebar>
     {children}
   </SidebarPage>

packages/core-components/api-report.md

@@ -7,9 +7,11 @@
 
 import { ApiRef } from '@backstage/core-plugin-api';
 import { BackstageIdentityApi } from '@backstage/core-plugin-api';
-import { BackstageTheme } from '@backstage/theme';
-import { ButtonProps as ButtonProps_2 } from '@material-ui/core/Button';
-import { CardHeaderProps } from '@material-ui/core/CardHeader';
+import { BottomNavigationActionProps } from '@material-ui/core';
+import { Breadcrumbs as Breadcrumbs_2 } from '@material-ui/core';
+import { ButtonProps } from '@material-ui/core';
+import { ButtonTypeMap } from '@material-ui/core';
+import { CardHeaderProps } from '@material-ui/core';
 import { Column } from '@material-table/core';
 import { ComponentClass } from 'react';
 import { ComponentProps } from 'react';
@@ -632,6 +634,13 @@ export function MissingAnnotationEmptyState(props: Props_3): JSX.Element;
 // @public (undocumented)
 export type MissingAnnotationEmptyStateClassKey = 'code';
 
+// Warning: (ae-missing-release-tag) "MobileSidebar" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public
+export const MobileSidebar: ({
+  children,
+}: React_2.PropsWithChildren<{}>) => JSX.Element | null;
+
 // Warning: (ae-missing-release-tag) "OAuthRequestDialog" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -771,7 +780,10 @@ export type SelectInputBaseClassKey = 'root' | 'input';
 // Warning: (ae-missing-release-tag) "Sidebar" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function Sidebar(props: PropsWithChildren<Props_18>): JSX.Element;
+export const Sidebar: ({
+  children,
+  ...props
+}: React_2.PropsWithChildren<Props_21>) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "SIDEBAR_INTRO_LOCAL_STORAGE" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -800,6 +812,7 @@ export const sidebarConfig: {
   selectedIndicatorWidth: number;
   userBadgePadding: number;
   userBadgeDiameter: number;
+  mobileSidebarHeight: number;
 };
 
 // Warning: (ae-missing-release-tag) "SidebarContext" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -1083,6 +1096,18 @@ export const SidebarDivider: React_2.ComponentType<
     }
 >;
 
+// Warning: (ae-forgotten-export) The symbol "SidebarGroupProps" needs to be exported by the entry point index.d.ts
+// Warning: (ae-missing-release-tag) "SidebarGroup" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public
+export const SidebarGroup: ({
+  to,
+  label,
+  icon,
+  value,
+  children,
+}: React_2.PropsWithChildren<SidebarGroupProps>) => JSX.Element;
+
 // Warning: (ae-missing-release-tag) "SidebarIntro" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)

packages/core-components/src/layout/Sidebar/Bar.tsx

@@ -154,13 +154,16 @@ const DesktopSidebar = ({
   );
 };
 
-export const Sidebar = ({ children }: React.PropsWithChildren<{}>) => {
+export const Sidebar = ({
+  children,
+  ...props
+}: React.PropsWithChildren<Props>) => {
   const isMobileScreen = useMediaQuery<BackstageTheme>(theme =>
     theme.breakpoints.down('xs'),
   );
 
   return isMobileScreen ? (
-    <MobileSidebar>{children}</MobileSidebar>
+    <MobileSidebar {...props}>{children}</MobileSidebar>
   ) : (
     <DesktopSidebar>{children}</DesktopSidebar>
   );

packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx

@@ -14,28 +14,27 @@
  * limitations under the License.
  */
 
-import React, { useContext, PropsWithChildren } from 'react';
-import { Link, makeStyles } from '@material-ui/core';
-import HomeIcon from '@material-ui/icons/Home';
-import ExtensionIcon from '@material-ui/icons/Extension';
-import MapIcon from '@material-ui/icons/MyLocation';
-import LibraryBooks from '@material-ui/icons/LibraryBooks';
-import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
-import LogoFull from './LogoFull';
-import LogoIcon from './LogoIcon';
-import { NavLink } from 'react-router-dom';
-import { Settings as SidebarSettings } from '@backstage/plugin-user-settings';
+import {
+  Sidebar, sidebarConfig,
+  SidebarContext, SidebarDivider, SidebarGroup, SidebarItem, SidebarPage, SidebarScrollWrapper, SidebarSpace
+} from '@backstage/core-components';
 import { SidebarSearch } from '@backstage/plugin-search';
 import {
-  Sidebar,
-  SidebarPage,
-  sidebarConfig,
-  SidebarContext,
-  SidebarItem,
-  SidebarDivider,
-  SidebarSpace,
-  SidebarScrollWrapper,
-} from '@backstage/core-components';
+  Settings as SidebarSettings,
+  UserSettingsSignInAvatar
+} from '@backstage/plugin-user-settings';
+import { Link, makeStyles } from '@material-ui/core';
+import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
+import ExtensionIcon from '@material-ui/icons/Extension';
+import HomeIcon from '@material-ui/icons/Home';
+import LibraryBooks from '@material-ui/icons/LibraryBooks';
+import MenuIcon from '@material-ui/icons/Menu';
+import MapIcon from '@material-ui/icons/MyLocation';
+import SearchIcon from '@material-ui/icons/Search';
+import React, { PropsWithChildren, useContext } from 'react';
+import { NavLink } from 'react-router-dom';
+import LogoFull from './LogoFull';
+import LogoIcon from './LogoIcon';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -74,8 +73,11 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
   <SidebarPage>
     <Sidebar>
       <SidebarLogo />
-      <SidebarSearch />
+      <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
+        <SidebarSearch />
+      </SidebarGroup>
       <SidebarDivider />
+      <SidebarGroup label="Menu" icon={<MenuIcon />}>
       {/* Global nav, not org-specific */}
       <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
       <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
@@ -86,9 +88,16 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
       <SidebarScrollWrapper>
         <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
       </SidebarScrollWrapper>
+      </SidebarGroup>
       <SidebarSpace />
       <SidebarDivider />
-      <SidebarSettings />
+      <SidebarGroup
+        label="Settings"
+        icon={<UserSettingsSignInAvatar />}
+        to="/settings"
+      >
+        <SidebarSettings />
+      </SidebarGroup>
     </Sidebar>
     {children}
   </SidebarPage>