Avoid breaking changes

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

packages/app/src/components/search/SearchPage.tsx

@@ -21,7 +21,7 @@ import {
   Header,
   Lifecycle,
   Page,
-  SidebarStateContext,
+  SidebarPinStateContext,
 } from '@backstage/core-components';
 import { CatalogResultListItem } from '@backstage/plugin-catalog';
 import {
@@ -53,7 +53,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const SearchPage = () => {
   const classes = useStyles();
-  const { isMobile } = useContext(SidebarStateContext);
+  const { isMobile } = useContext(SidebarPinStateContext);
 
   return (
     <Page themeId="home">

packages/core-components/api-report.md

@@ -897,7 +897,7 @@ export const SidebarContext: Context<SidebarContextType>;
 // @public
 export type SidebarContextType = {
   isOpen: boolean;
-  setOpen?: (open: boolean) => void;
+  setOpen: (open: boolean) => void;
 };
 
 // Warning: (ae-missing-release-tag) "SidebarDivider" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -1244,6 +1244,16 @@ export type SidebarPageProps = {
   children?: React_2.ReactNode;
 };
 
+// @public
+export const SidebarPinStateContext: React_2.Context<SidebarPinStateContextType>;
+
+// @public
+export type SidebarPinStateContextType = {
+  isPinned: boolean;
+  toggleSidebarPinState: () => any;
+  isMobile?: boolean;
+};
+
 // @public (undocumented)
 export type SidebarProps = {
   openDelayMs?: number;
@@ -2075,16 +2085,6 @@ export const SidebarSpacer: React_2.ComponentType<
 // @public (undocumented)
 export type SidebarSpacerClassKey = 'root';
 
-// @public
-export const SidebarStateContext: React_2.Context<SidebarStateContextType>;
-
-// @public
-export type SidebarStateContextType = {
-  isPinned: boolean;
-  toggleSidebarPinState: () => any;
-  isMobile?: boolean;
-};
-
 // @public
 export const SidebarSubmenu: (props: SidebarSubmenuProps) => JSX.Element;
 

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

@@ -27,14 +27,14 @@ import {
   SidebarExpandButton,
   SidebarItem,
   SidebarSearchField,
-  SidebarStateContext,
+  SidebarPinStateContext,
   SidebarSubmenu,
   SidebarSubmenuItem,
 } from '.';
 
 async function renderScalableSidebar() {
   await renderInTestApp(
-    <SidebarStateContext.Provider
+    <SidebarPinStateContext.Provider
       value={{
         isPinned: false,
         isMobile: false,
@@ -66,7 +66,7 @@ async function renderScalableSidebar() {
         <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
         <SidebarExpandButton />
       </Sidebar>
-    </SidebarStateContext.Provider>,
+    </SidebarPinStateContext.Provider>,
   );
 }
 

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

@@ -20,7 +20,7 @@ import classnames from 'classnames';
 import React, { useState, useContext, useRef } from 'react';
 import { sidebarConfig, SidebarContext } from './config';
 import { BackstageTheme } from '@backstage/theme';
-import { SidebarStateContext } from './Page';
+import { SidebarPinStateContext } from './Page';
 import { MobileSidebar } from './MobileSidebar';
 
 /** @public */
@@ -102,7 +102,9 @@ const DesktopSidebar = (props: SidebarProps) => {
   );
   const [state, setState] = useState(State.Closed);
   const hoverTimerRef = useRef<number>();
-  const { isPinned, toggleSidebarPinState } = useContext(SidebarStateContext);
+  const { isPinned, toggleSidebarPinState } = useContext(
+    SidebarPinStateContext,
+  );
 
   const handleOpen = () => {
     if (isPinned || disableExpandOnHover) {
@@ -185,7 +187,7 @@ const DesktopSidebar = (props: SidebarProps) => {
  */
 export const Sidebar = (props: SidebarProps) => {
   const { children, openDelayMs, closeDelayMs, disableExpandOnHover } = props;
-  const { isMobile } = useContext(SidebarStateContext);
+  const { isMobile } = useContext(SidebarPinStateContext);
 
   return isMobile ? (
     <MobileSidebar>{children}</MobileSidebar>

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

@@ -643,7 +643,7 @@ export const SidebarExpandButton = () => {
     { noSsr: true },
   );
 
-  if (isSmallScreen || !setOpen) {
+  if (isSmallScreen) {
     return null;
   }
 

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

@@ -187,7 +187,7 @@ export const MobileSidebar = (props: MobileSidebarProps) => {
     !sidebarGroups[selectedMenuItemIndex].props.to;
 
   return (
-    <SidebarContext.Provider value={{ isOpen: true }}>
+    <SidebarContext.Provider value={{ isOpen: true, setOpen: () => {} }}>
       <MobileSidebarContext.Provider
         value={{ selectedMenuItemIndex, setSelectedMenuItemIndex }}
       >

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

@@ -43,11 +43,11 @@ const useStyles = makeStyles<BackstageTheme, { isPinned: boolean }>(
 );
 
 /**
- * Type of `SidebarStateContext`
+ * Type of `SidebarPinStateContext`
  *
  * @public
  */
-export type SidebarStateContextType = {
+export type SidebarPinStateContextType = {
   isPinned: boolean;
   toggleSidebarPinState: () => any;
   isMobile?: boolean;
@@ -67,11 +67,13 @@ export type SidebarPageProps = {
  *
  * @public
  */
-export const SidebarStateContext = createContext<SidebarStateContextType>({
-  isPinned: true,
-  toggleSidebarPinState: () => {},
-  isMobile: false,
-});
+export const SidebarPinStateContext = createContext<SidebarPinStateContextType>(
+  {
+    isPinned: true,
+    toggleSidebarPinState: () => {},
+    isMobile: false,
+  },
+);
 
 export function SidebarPage(props: SidebarPageProps) {
   const [isPinned, setIsPinned] = useState(() =>
@@ -91,7 +93,7 @@ export function SidebarPage(props: SidebarPageProps) {
 
   const classes = useStyles({ isPinned });
   return (
-    <SidebarStateContext.Provider
+    <SidebarPinStateContext.Provider
       value={{
         isPinned,
         toggleSidebarPinState,
@@ -99,6 +101,6 @@ export function SidebarPage(props: SidebarPageProps) {
       }}
     >
       <div className={classes.root}>{props.children}</div>
-    </SidebarStateContext.Provider>
+    </SidebarPinStateContext.Provider>
   );
 }

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

@@ -22,7 +22,7 @@ import BottomNavigationAction, {
 import { makeStyles } from '@material-ui/core/styles';
 import React, { useContext } from 'react';
 import { useLocation } from 'react-router-dom';
-import { SidebarStateContext } from '.';
+import { SidebarPinStateContext } from '.';
 import { Link } from '../../components';
 import { sidebarConfig } from './config';
 import { MobileSidebarContext } from './MobileSidebar';
@@ -120,7 +120,7 @@ const MobileSidebarGroup = (props: SidebarGroupProps) => {
  */
 export const SidebarGroup = (props: SidebarGroupProps) => {
   const { children, to, label, icon, value } = props;
-  const { isMobile } = useContext(SidebarStateContext);
+  const { isMobile } = useContext(SidebarPinStateContext);
 
   return isMobile ? (
     <MobileSidebarGroup to={to} label={label} icon={icon} value={value} />

packages/core-components/src/layout/Sidebar/config.ts

@@ -63,7 +63,7 @@ export const SIDEBAR_INTRO_LOCAL_STORAGE =
  */
 export type SidebarContextType = {
   isOpen: boolean;
-  setOpen?: (open: boolean) => void;
+  setOpen: (open: boolean) => void;
 };
 
 /**
@@ -71,6 +71,7 @@ export type SidebarContextType = {
  */
 export const SidebarContext = createContext<SidebarContextType>({
   isOpen: false,
+  setOpen: () => {},
 });
 
 export type SidebarItemWithSubmenuContextType = {

packages/core-components/src/layout/Sidebar/index.ts

@@ -32,10 +32,10 @@ export type {
 export type { SidebarClassKey, SidebarProps } from './Bar';
 export {
   SidebarPage,
-  SidebarStateContext as SidebarStateContext,
+  SidebarPinStateContext as SidebarPinStateContext,
 } from './Page';
 export type {
-  SidebarStateContextType as SidebarStateContextType,
+  SidebarPinStateContextType as SidebarPinStateContextType,
   SidebarPageClassKey,
   SidebarPageProps,
 } from './Page';