Better naming of providers, hooks, and types.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>

.changeset/give-that-wolf-a-banana.md

@@ -2,7 +2,7 @@
 '@backstage/create-app': patch
 ---
 
-Use of `SidebarContext` has been deprecated and will be removed in a future release. Instead, `useSidebar()` should be used to consume the context and `<SidebarContextProvider>` should be used to provide it.
+Use of `SidebarContext` has been deprecated and will be removed in a future release. Instead, `useSidebarOpenState()` should be used to consume the context and `<SidebarOpenStateProvider>` should be used to provide it.
 
 To prepare your app, update `packages/app/src/components/Root/Root.tsx` as follows:
 
@@ -14,16 +14,15 @@ import {
   SidebarDivider,
   // ...
   SidebarSpace,
-+ useSidebar,
++ useSidebarOpenState,
 } from '@backstage/core-components';
 
 // ...
 
-
 const SidebarLogo = () => {
   const classes = useSidebarLogoStyles();
 - const { isOpen } = useContext(SidebarContext);
-+ const { isOpen } = useSidebar();
++ const { isOpen } = useSidebarOpenState();
 
   // ...
 };

.changeset/right-one-at-the-wrong-time.md

@@ -4,4 +4,4 @@
 '@techdocs/cli': patch
 ---
 
-Updated sidebar-related logic to use `<SidebarPinStateContextProvider>` + `useSidebarPinState()` and/or `<SidebarContextProvider>` + `useSidebar()` from `@backstage/core-components`.
+Updated sidebar-related logic to use `<SidebarPinStateProvider>` + `useSidebarPinState()` and/or `<SidebarOpenStateProvider>` + `useSidebarOpenState()` from `@backstage/core-components`.

.changeset/up-in-space-man.md

@@ -2,6 +2,6 @@
 '@backstage/core-components': patch
 ---
 
-The `SidebarPinStateContext` and `SidebarContext` have been deprecated and will be removed in a future release. Instead, use `<SidebarPinStateContextProvider>` + `useSidebarPinState()` and/or `<SidebarContextProvider>` + `useSidebar()`.
+The `SidebarPinStateContext` and `SidebarContext` have been deprecated and will be removed in a future release. Instead, use `<SidebarPinStateProvider>` + `useSidebarPinState()` and/or `<SidebarOpenStateProvider>` + `useSidebarOpenState()`.
 
 This was done to ensure that sidebar state can be shared successfully across components exported by different packages, regardless of what version of this package is resolved and installed for each individual package.

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

@@ -45,7 +45,7 @@ import {
   SidebarPage,
   SidebarScrollWrapper,
   SidebarSpace,
-  useSidebar,
+  useSidebarOpenState,
 } from '@backstage/core-components';
 import { MyGroupsSidebarItem } from '@backstage/plugin-org';
 import GroupIcon from '@material-ui/icons/People';
@@ -68,7 +68,7 @@ const useSidebarLogoStyles = makeStyles({
 
 const SidebarLogo = () => {
   const classes = useSidebarLogoStyles();
-  const { isOpen } = useSidebar();
+  const { isOpen } = useSidebarOpenState();
 
   return (
     <div className={classes.root}>

packages/core-components/api-report.md

@@ -905,16 +905,7 @@ export const sidebarConfig: {
 // @public @deprecated
 export const SidebarContext: React_2.Context<SidebarContextType>;
 
-// @public
-export const SidebarContextProvider: ({
-  children,
-  value,
-}: {
-  children: ReactNode;
-  value: SidebarContextType;
-}) => JSX.Element;
-
-// @public
+// @public @deprecated
 export type SidebarContextType = {
   isOpen: boolean;
   setOpen: (open: boolean) => void;
@@ -987,6 +978,21 @@ export type SidebarItemClassKey =
   | 'arrows'
   | 'selected';
 
+// @public
+export type SidebarOpenState = {
+  isOpen: boolean;
+  setOpen: (open: boolean) => void;
+};
+
+// @public
+export const SidebarOpenStateProvider: ({
+  children,
+  value,
+}: {
+  children: ReactNode;
+  value: SidebarOpenState;
+}) => JSX.Element;
+
 // @public (undocumented)
 export type SidebarOptions = {
   drawerWidthClosed?: number;
@@ -1008,11 +1014,25 @@ export type SidebarPageProps = {
   children?: React_2.ReactNode;
 };
 
+// @public
+export type SidebarPinState = {
+  isPinned: boolean;
+  toggleSidebarPinState: () => any;
+  isMobile?: boolean;
+};
+
 // @public @deprecated
 export const SidebarPinStateContext: React_2.Context<SidebarPinStateContextType>;
 
+// @public @deprecated
+export type SidebarPinStateContextType = {
+  isPinned: boolean;
+  toggleSidebarPinState: () => any;
+  isMobile?: boolean;
+};
+
 // @public
-export const SidebarPinStateContextProvider: ({
+export const SidebarPinStateProvider: ({
   children,
   value,
 }: {
@@ -1020,13 +1040,6 @@ export const SidebarPinStateContextProvider: ({
   value: SidebarPinStateContextType;
 }) => JSX.Element;
 
-// @public
-export type SidebarPinStateContextType = {
-  isPinned: boolean;
-  toggleSidebarPinState: () => any;
-  isMobile?: boolean;
-};
-
 // @public (undocumented)
 export type SidebarProps = {
   openDelayMs?: number;
@@ -1461,10 +1474,10 @@ export class UserIdentity implements IdentityApi {
 }
 
 // @public
-export const useSidebar: () => SidebarContextType;
+export const useSidebarOpenState: () => SidebarOpenState;
 
 // @public
-export const useSidebarPinState: () => SidebarPinStateContextType;
+export const useSidebarPinState: () => SidebarPinState;
 
 // Warning: (ae-missing-release-tag) "useSupportConfig" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //

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

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

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

@@ -32,7 +32,7 @@ import {
 } from './config';
 import { BackstageTheme } from '@backstage/theme';
 import { useContent } from './Page';
-import { SidebarContextProvider } from './SidebarContext';
+import { SidebarOpenStateProvider } from './SidebarOpenStateContext';
 import { useSidebarPinState } from './SidebarPinStateContext';
 import { MobileSidebar } from './MobileSidebar';
 
@@ -190,7 +190,7 @@ const DesktopSidebar = (props: DesktopSidebarProps) => {
   return (
     <nav style={{}} aria-label="sidebar nav">
       <A11ySkipSidebar />
-      <SidebarContextProvider value={{ isOpen, setOpen }}>
+      <SidebarOpenStateProvider value={{ isOpen, setOpen }}>
         <div
           className={classes.root}
           data-testid="sidebar-root"
@@ -207,7 +207,7 @@ const DesktopSidebar = (props: DesktopSidebarProps) => {
             {children}
           </div>
         </div>
-      </SidebarContextProvider>
+      </SidebarOpenStateProvider>
     </nav>
   );
 };

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

@@ -28,7 +28,7 @@ import {
   SIDEBAR_INTRO_LOCAL_STORAGE,
 } from './config';
 import { SidebarDivider } from './Items';
-import { useSidebar } from './SidebarContext';
+import { useSidebarOpenState } from './SidebarOpenStateContext';
 
 /** @public */
 export type SidebarIntroClassKey =
@@ -151,7 +151,7 @@ const recentlyViewedIntroText =
   'And your recently viewed plugins will pop up here!';
 
 export function SidebarIntro(_props: {}) {
-  const { isOpen } = useSidebar();
+  const { isOpen } = useSidebarOpenState();
   const defaultValue = {
     starredItemsDismissed: false,
     recentlyViewedItemsDismissed: false,

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

@@ -61,7 +61,7 @@ import DoubleArrowLeft from './icons/DoubleArrowLeft';
 import DoubleArrowRight from './icons/DoubleArrowRight';
 import { isLocationMatch } from './utils';
 import { Location } from 'history';
-import { useSidebar } from './SidebarContext';
+import { useSidebarOpenState } from './SidebarOpenStateContext';
 
 /** @public */
 export type SidebarItemClassKey =
@@ -369,7 +369,7 @@ const SidebarItemBase = forwardRef<any, SidebarItemProps>((props, ref) => {
   // XXX (@koroeskohr): unsure this is optimal. But I just really didn't want to have the item component
   // depend on the current location, and at least have it being optionally forced to selected.
   // Still waiting on a Q answered to fine tune the implementation
-  const { isOpen } = useSidebar();
+  const { isOpen } = useSidebarOpenState();
 
   const divStyle =
     !isOpen && hasSubmenu ? { display: 'flex', marginLeft: '24px' } : {};
@@ -671,7 +671,7 @@ export const SidebarScrollWrapper = styled('div')(({ theme }) => {
 export const SidebarExpandButton = () => {
   const { sidebarConfig } = useContext(SidebarConfigContext);
   const classes = useMemoStyles(sidebarConfig);
-  const { isOpen, setOpen } = useSidebar();
+  const { isOpen, setOpen } = useSidebarOpenState();
   const isSmallScreen = useMediaQuery<BackstageTheme>(
     theme => theme.breakpoints.down('md'),
     { noSsr: true },

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

@@ -27,7 +27,7 @@ import MenuIcon from '@material-ui/icons/Menu';
 import { orderBy } from 'lodash';
 import React, { createContext, useEffect, useState, useContext } from 'react';
 import { useLocation } from 'react-router';
-import { SidebarContextProvider } from './SidebarContext';
+import { SidebarOpenStateProvider } from './SidebarOpenStateContext';
 import { SidebarGroup } from './SidebarGroup';
 import { SidebarConfigContext, SidebarConfig } from './config';
 
@@ -208,7 +208,7 @@ export const MobileSidebar = (props: MobileSidebarProps) => {
     !sidebarGroups[selectedMenuItemIndex].props.to;
 
   return (
-    <SidebarContextProvider value={{ isOpen: true, setOpen: () => {} }}>
+    <SidebarOpenStateProvider value={{ isOpen: true, setOpen: () => {} }}>
       <MobileSidebarContext.Provider
         value={{ selectedMenuItemIndex, setSelectedMenuItemIndex }}
       >
@@ -232,6 +232,6 @@ export const MobileSidebar = (props: MobileSidebarProps) => {
           {sidebarGroups}
         </BottomNavigation>
       </MobileSidebarContext.Provider>
-    </SidebarContextProvider>
+    </SidebarOpenStateProvider>
   );
 };

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

@@ -29,7 +29,7 @@ import { SidebarConfigContext, SidebarConfig } from './config';
 import { BackstageTheme } from '@backstage/theme';
 import { LocalStorage } from './localStorage';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
-import { SidebarPinStateContextProvider } from './SidebarPinStateContext';
+import { SidebarPinStateProvider } from './SidebarPinStateContext';
 
 export type SidebarPageClassKey = 'root';
 
@@ -114,7 +114,7 @@ export function SidebarPage(props: SidebarPageProps) {
   const classes = useStyles({ isPinned, sidebarConfig });
 
   return (
-    <SidebarPinStateContextProvider
+    <SidebarPinStateProvider
       value={{
         isPinned,
         toggleSidebarPinState,
@@ -124,7 +124,7 @@ export function SidebarPage(props: SidebarPageProps) {
       <PageContext.Provider value={pageContext}>
         <div className={classes.root}>{props.children}</div>
       </PageContext.Provider>
-    </SidebarPinStateContextProvider>
+    </SidebarPinStateProvider>
   );
 }
 

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

@@ -19,17 +19,17 @@ import { waitFor } from '@testing-library/react';
 import { renderHook, act } from '@testing-library/react-hooks';
 import {
   LegacySidebarContext,
-  SidebarContextProvider,
-  useSidebar,
-} from './SidebarContext';
+  SidebarOpenStateProvider,
+  useSidebarOpenState,
+} from './SidebarOpenStateContext';
 
-describe('SidebarContext', () => {
-  describe('SidebarContextProvider', () => {
+describe('SidebarOpenStateContext', () => {
+  describe('SidebarOpenStateProvider', () => {
     it('should render children', async () => {
       const { findByText } = await renderWithEffects(
-        <SidebarContextProvider value={{ isOpen: false, setOpen: () => {} }}>
+        <SidebarOpenStateProvider value={{ isOpen: false, setOpen: () => {} }}>
           Child
-        </SidebarContextProvider>,
+        </SidebarOpenStateProvider>,
       );
       expect(await findByText('Child')).toBeInTheDocument();
     });
@@ -41,23 +41,23 @@ describe('SidebarContext', () => {
       };
 
       const { findByText } = await renderWithEffects(
-        <SidebarContextProvider
+        <SidebarOpenStateProvider
           value={{
             isOpen: true,
             setOpen: () => {},
           }}
         >
           <LegacyContextSpy />
-        </SidebarContextProvider>,
+        </SidebarOpenStateProvider>,
       );
 
       expect(await findByText('true')).toBeInTheDocument();
     });
   });
 
-  describe('useSidebar', () => {
+  describe('useSidebarOpenState', () => {
     it('does not need to be invoked within provider', () => {
-      const { result } = renderHook(() => useSidebar());
+      const { result } = renderHook(() => useSidebarOpenState());
       expect(result.current.isOpen).toBe(false);
       expect(typeof result.current.setOpen).toBe('function');
     });
@@ -65,7 +65,7 @@ describe('SidebarContext', () => {
     it('should read and update state', async () => {
       let actualValue = true;
       const wrapper = ({ children }: { children: ReactNode }) => (
-        <SidebarContextProvider
+        <SidebarOpenStateProvider
           value={{
             isOpen: actualValue,
             setOpen: value => {
@@ -74,9 +74,11 @@ describe('SidebarContext', () => {
           }}
         >
           {children}
-        </SidebarContextProvider>
+        </SidebarOpenStateProvider>
       );
-      const { result, rerender } = renderHook(() => useSidebar(), { wrapper });
+      const { result, rerender } = renderHook(() => useSidebarOpenState(), {
+        wrapper,
+      });
 
       expect(result.current.isOpen).toBe(true);
 

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

@@ -23,13 +23,24 @@ import {
 /**
  * Types for the `SidebarContext`
  *
- * @public
+ * @public @deprecated
+ * Use `SidebarOpenState` instead.
  */
 export type SidebarContextType = {
   isOpen: boolean;
   setOpen: (open: boolean) => void;
 };
 
+/**
+ * The open state of the sidebar.
+ *
+ * @public
+ */
+export type SidebarOpenState = {
+  isOpen: boolean;
+  setOpen: (open: boolean) => void;
+};
+
 const defaultSidebarContext = {
   isOpen: false,
   setOpen: () => {},
@@ -46,20 +57,20 @@ export const LegacySidebarContext = createContext<SidebarContextType>(
 );
 
 const VersionedSidebarContext = createVersionedContext<{
-  1: SidebarContextType;
-}>('sidebar-context');
+  1: SidebarOpenState;
+}>('sidebar-open-state-context');
 
 /**
  * Provides context for reading and updating sidebar state.
  *
  * @public
  */
-export const SidebarContextProvider = ({
+export const SidebarOpenStateProvider = ({
   children,
   value,
 }: {
   children: ReactNode;
-  value: SidebarContextType;
+  value: SidebarOpenState;
 }) => (
   <LegacySidebarContext.Provider value={value}>
     <VersionedSidebarContext.Provider
@@ -71,14 +82,14 @@ export const SidebarContextProvider = ({
 );
 
 /**
- * Hook to read and update sidebar state.
+ * Hook to read and update the sidebar's open state.
  *
  * @public
  */
-export const useSidebar = (): SidebarContextType => {
+export const useSidebarOpenState = (): SidebarOpenState => {
   const versionedSidebarContext = useContext(VersionedSidebarContext);
 
-  // Invoked from outside a SidbarContextProvider, return a default value.
+  // Invoked from outside a SidebarOpenStateProvider, return a default value.
   if (versionedSidebarContext === undefined) {
     return defaultSidebarContext;
   }

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

@@ -19,15 +19,15 @@ import { waitFor } from '@testing-library/react';
 import { renderHook, act } from '@testing-library/react-hooks';
 import {
   LegacySidebarPinStateContext,
-  SidebarPinStateContextProvider,
+  SidebarPinStateProvider,
   useSidebarPinState,
 } from './SidebarPinStateContext';
 
 describe('SidebarPinStateContext', () => {
-  describe('SidebarPinStateContextProvider', () => {
+  describe('SidebarPinStateProvider', () => {
     it('should render children', async () => {
       const { findByText } = await renderWithEffects(
-        <SidebarPinStateContextProvider
+        <SidebarPinStateProvider
           value={{
             isPinned: true,
             isMobile: false,
@@ -35,7 +35,7 @@ describe('SidebarPinStateContext', () => {
           }}
         >
           Child
-        </SidebarPinStateContextProvider>,
+        </SidebarPinStateProvider>,
       );
       expect(await findByText('Child')).toBeInTheDocument();
     });
@@ -47,7 +47,7 @@ describe('SidebarPinStateContext', () => {
       };
 
       const { findByText } = await renderWithEffects(
-        <SidebarPinStateContextProvider
+        <SidebarPinStateProvider
           value={{
             isPinned: true,
             isMobile: true,
@@ -55,7 +55,7 @@ describe('SidebarPinStateContext', () => {
           }}
         >
           <LegacyContextSpy />
-        </SidebarPinStateContextProvider>,
+        </SidebarPinStateProvider>,
       );
 
       expect(await findByText('true')).toBeInTheDocument();
@@ -73,7 +73,7 @@ describe('SidebarPinStateContext', () => {
     it('should read and update state', async () => {
       let actualValue = true;
       const wrapper = ({ children }: { children: ReactNode }) => (
-        <SidebarPinStateContextProvider
+        <SidebarPinStateProvider
           value={{
             isPinned: actualValue,
             isMobile: false,
@@ -83,7 +83,7 @@ describe('SidebarPinStateContext', () => {
           }}
         >
           {children}
-        </SidebarPinStateContextProvider>
+        </SidebarPinStateProvider>
       );
       const { result, rerender } = renderHook(() => useSidebarPinState(), {
         wrapper,

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

@@ -22,7 +22,8 @@ import React, { createContext, ReactNode, useContext } from 'react';
 /**
  * Type of `SidebarPinStateContext`
  *
- * @public
+ * @public @deprecated
+ * Use `SidebarPinState` instead.
  */
 export type SidebarPinStateContextType = {
   isPinned: boolean;
@@ -30,6 +31,17 @@ export type SidebarPinStateContextType = {
   isMobile?: boolean;
 };
 
+/**
+ * The pin state of the sidebar.
+ *
+ * @public
+ */
+export type SidebarPinState = {
+  isPinned: boolean;
+  toggleSidebarPinState: () => any;
+  isMobile?: boolean;
+};
+
 const defaultSidebarPinStateContext = {
   isPinned: true,
   toggleSidebarPinState: () => {},
@@ -46,7 +58,7 @@ export const LegacySidebarPinStateContext =
   createContext<SidebarPinStateContextType>(defaultSidebarPinStateContext);
 
 const VersionedSidebarPinStateContext = createVersionedContext<{
-  1: SidebarPinStateContextType;
+  1: SidebarPinState;
 }>('sidebar-pin-state-context');
 
 /**
@@ -54,7 +66,7 @@ const VersionedSidebarPinStateContext = createVersionedContext<{
  *
  * @public
  */
-export const SidebarPinStateContextProvider = ({
+export const SidebarPinStateProvider = ({
   children,
   value,
 }: {
@@ -75,10 +87,10 @@ export const SidebarPinStateContextProvider = ({
  *
  * @public
  */
-export const useSidebarPinState = (): SidebarPinStateContextType => {
+export const useSidebarPinState = (): SidebarPinState => {
   const versionedSidebarContext = useContext(VersionedSidebarPinStateContext);
 
-  // Invoked from outside a SidebarPinStateContextProvider: default value.
+  // Invoked from outside a SidebarPinStateProvider: default value.
   if (versionedSidebarContext === undefined) {
     return defaultSidebarPinStateContext;
   }

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

@@ -22,7 +22,7 @@ import {
   SidebarConfigContext,
   SubmenuConfig,
 } from './config';
-import { useSidebar } from './SidebarContext';
+import { useSidebarOpenState } from './SidebarOpenStateContext';
 import { BackstageTheme } from '@backstage/theme';
 
 const useStyles = makeStyles<
@@ -105,7 +105,7 @@ export type SidebarSubmenuProps = {
  * @public
  */
 export const SidebarSubmenu = (props: SidebarSubmenuProps) => {
-  const { isOpen } = useSidebar();
+  const { isOpen } = useSidebarOpenState();
   const { sidebarConfig, submenuConfig } = useContext(SidebarConfigContext);
   const left = isOpen
     ? sidebarConfig.drawerWidthOpen

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

@@ -50,13 +50,19 @@ export { SIDEBAR_INTRO_LOCAL_STORAGE, sidebarConfig } from './config';
 export type { SidebarOptions, SubmenuOptions } from './config';
 export {
   LegacySidebarContext as SidebarContext,
-  SidebarContextProvider,
-  useSidebar,
-} from './SidebarContext';
-export type { SidebarContextType } from './SidebarContext';
+  SidebarOpenStateProvider,
+  useSidebarOpenState,
+} from './SidebarOpenStateContext';
+export type {
+  SidebarContextType,
+  SidebarOpenState,
+} from './SidebarOpenStateContext';
 export {
   LegacySidebarPinStateContext as SidebarPinStateContext,
-  SidebarPinStateContextProvider,
+  SidebarPinStateProvider,
   useSidebarPinState,
 } from './SidebarPinStateContext';
-export type { SidebarPinStateContextType } from './SidebarPinStateContext';
+export type {
+  SidebarPinStateContextType,
+  SidebarPinState,
+} from './SidebarPinStateContext';

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

@@ -38,7 +38,7 @@ import {
   SidebarPage,
   SidebarScrollWrapper,
   SidebarSpace,
-  useSidebar,
+  useSidebarOpenState,
 } from '@backstage/core-components';
 import MenuIcon from '@material-ui/icons/Menu';
 import SearchIcon from '@material-ui/icons/Search';
@@ -60,7 +60,7 @@ const useSidebarLogoStyles = makeStyles({
 
 const SidebarLogo = () => {
   const classes = useSidebarLogoStyles();
-  const { isOpen } = useSidebar();
+  const { isOpen } = useSidebarOpenState();
 
   return (
     <div className={classes.root}>

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

@@ -27,7 +27,7 @@ import {
   SidebarPage,
   sidebarConfig,
   SidebarDivider,
-  useSidebar,
+  useSidebarOpenState,
 } from '@backstage/core-components';
 import { NavLink } from 'react-router-dom';
 
@@ -48,7 +48,7 @@ const useSidebarLogoStyles = makeStyles({
 
 const SidebarLogo = () => {
   const classes = useSidebarLogoStyles();
-  const { isOpen } = useSidebar();
+  const { isOpen } = useSidebarOpenState();
 
   return (
     <div className={classes.root}>

plugins/shortcuts/src/ShortcutItem.test.tsx

@@ -20,7 +20,7 @@ import { ShortcutItem } from './ShortcutItem';
 import { Shortcut } from './types';
 import { LocalStoredShortcuts } from './api';
 import { MockStorageApi, renderInTestApp } from '@backstage/test-utils';
-import { SidebarContextProvider } from '@backstage/core-components';
+import { SidebarOpenStateProvider } from '@backstage/core-components';
 
 describe('ShortcutItem', () => {
   const shortcut: Shortcut = {
@@ -32,9 +32,9 @@ describe('ShortcutItem', () => {
 
   it('displays the shortcut', async () => {
     await renderInTestApp(
-      <SidebarContextProvider value={{ isOpen: true, setOpen: _open => {} }}>
+      <SidebarOpenStateProvider value={{ isOpen: true, setOpen: _open => {} }}>
         <ShortcutItem api={api} shortcut={shortcut} />
-      </SidebarContextProvider>,
+      </SidebarOpenStateProvider>,
     );
     expect(screen.getByText('ST')).toBeInTheDocument();
     expect(screen.getByText('some title')).toBeInTheDocument();

plugins/shortcuts/src/Shortcuts.test.tsx

@@ -24,12 +24,12 @@ import { screen, waitFor } from '@testing-library/react';
 import { Shortcuts } from './Shortcuts';
 import { LocalStoredShortcuts, shortcutsApiRef } from './api';
 
-import { SidebarContextProvider } from '@backstage/core-components';
+import { SidebarOpenStateProvider } from '@backstage/core-components';
 
 describe('Shortcuts', () => {
   it('displays an add button', async () => {
     await renderInTestApp(
-      <SidebarContextProvider value={{ isOpen: true, setOpen: _open => {} }}>
+      <SidebarOpenStateProvider value={{ isOpen: true, setOpen: _open => {} }}>
         <TestApiProvider
           apis={[
             [
@@ -40,7 +40,7 @@ describe('Shortcuts', () => {
         >
           <Shortcuts />
         </TestApiProvider>
-      </SidebarContextProvider>,
+      </SidebarOpenStateProvider>,
     );
     await waitFor(() => !screen.queryByTestId('progress'));
     expect(screen.getByText('Add Shortcuts')).toBeInTheDocument();

plugins/user-settings/src/components/General/UserSettingsPinToggle.test.tsx

@@ -18,14 +18,14 @@ import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
 import { fireEvent } from '@testing-library/react';
 import React from 'react';
 import { UserSettingsPinToggle } from './UserSettingsPinToggle';
-import { SidebarPinStateContextProvider } from '@backstage/core-components';
+import { SidebarPinStateProvider } from '@backstage/core-components';
 
 describe('<UserSettingsPinToggle />', () => {
   it('toggles the pin sidebar button', async () => {
     const mockToggleFn = jest.fn();
     const rendered = await renderWithEffects(
       wrapInTestApp(
-        <SidebarPinStateContextProvider
+        <SidebarPinStateProvider
           value={{
             isPinned: false,
             isMobile: false,
@@ -33,7 +33,7 @@ describe('<UserSettingsPinToggle />', () => {
           }}
         >
           <UserSettingsPinToggle />
-        </SidebarPinStateContextProvider>,
+        </SidebarPinStateProvider>,
       ),
     );
     expect(rendered.getByText('Pin Sidebar')).toBeInTheDocument();