From 37c8f8444c46b5ca442bd09f7f8685d4932244a3 Mon Sep 17 00:00:00 2001 From: Eric Peterson Date: Fri, 20 May 2022 17:51:11 +0200 Subject: [PATCH] Better naming of providers, hooks, and types. Signed-off-by: Eric Peterson --- .changeset/give-that-wolf-a-banana.md | 7 ++- .changeset/right-one-at-the-wrong-time.md | 2 +- .changeset/up-in-space-man.md | 2 +- packages/app/src/components/Root/Root.tsx | 4 +- packages/core-components/api-report.md | 53 ++++++++++++------- .../src/layout/Sidebar/Bar.test.tsx | 6 +-- .../src/layout/Sidebar/Bar.tsx | 6 +-- .../src/layout/Sidebar/Intro.tsx | 4 +- .../src/layout/Sidebar/Items.tsx | 6 +-- .../src/layout/Sidebar/MobileSidebar.tsx | 6 +-- .../src/layout/Sidebar/Page.tsx | 6 +-- ...t.tsx => SidebarOpenStateContext.test.tsx} | 30 ++++++----- ...ontext.tsx => SidebarOpenStateContext.tsx} | 27 +++++++--- .../Sidebar/SidebarPinStateContext.test.tsx | 16 +++--- .../layout/Sidebar/SidebarPinStateContext.tsx | 22 ++++++-- .../src/layout/Sidebar/SidebarSubmenu.tsx | 4 +- .../src/layout/Sidebar/index.ts | 18 ++++--- .../packages/app/src/components/Root/Root.tsx | 4 +- .../src/components/Root/Root.tsx | 4 +- plugins/shortcuts/src/ShortcutItem.test.tsx | 6 +-- plugins/shortcuts/src/Shortcuts.test.tsx | 6 +-- .../General/UserSettingsPinToggle.test.tsx | 6 +-- 22 files changed, 144 insertions(+), 101 deletions(-) rename packages/core-components/src/layout/Sidebar/{SidebarContext.test.tsx => SidebarOpenStateContext.test.tsx} (78%) rename packages/core-components/src/layout/Sidebar/{SidebarContext.tsx => SidebarOpenStateContext.tsx} (79%) diff --git a/.changeset/give-that-wolf-a-banana.md b/.changeset/give-that-wolf-a-banana.md index 685ef7400a..a9e99782ad 100644 --- a/.changeset/give-that-wolf-a-banana.md +++ b/.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 `` 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 `` 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(); // ... }; diff --git a/.changeset/right-one-at-the-wrong-time.md b/.changeset/right-one-at-the-wrong-time.md index c7fee94a91..5ef8e42555 100644 --- a/.changeset/right-one-at-the-wrong-time.md +++ b/.changeset/right-one-at-the-wrong-time.md @@ -4,4 +4,4 @@ '@techdocs/cli': patch --- -Updated sidebar-related logic to use `` + `useSidebarPinState()` and/or `` + `useSidebar()` from `@backstage/core-components`. +Updated sidebar-related logic to use `` + `useSidebarPinState()` and/or `` + `useSidebarOpenState()` from `@backstage/core-components`. diff --git a/.changeset/up-in-space-man.md b/.changeset/up-in-space-man.md index f3aadfece8..3a4dc6c5d3 100644 --- a/.changeset/up-in-space-man.md +++ b/.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 `` + `useSidebarPinState()` and/or `` + `useSidebar()`. +The `SidebarPinStateContext` and `SidebarContext` have been deprecated and will be removed in a future release. Instead, use `` + `useSidebarPinState()` and/or `` + `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. diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx index e90fe29b54..30da01841c 100644 --- a/packages/app/src/components/Root/Root.tsx +++ b/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 (
diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 33db173fcf..911ef36867 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -905,16 +905,7 @@ export const sidebarConfig: { // @public @deprecated export const SidebarContext: React_2.Context; -// @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; +// @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) // diff --git a/packages/core-components/src/layout/Sidebar/Bar.test.tsx b/packages/core-components/src/layout/Sidebar/Bar.test.tsx index ec9c08a1eb..87e62f15e0 100644 --- a/packages/core-components/src/layout/Sidebar/Bar.test.tsx +++ b/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( - - , + , ); } diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx index a315406b58..c86f60a0a2 100644 --- a/packages/core-components/src/layout/Sidebar/Bar.tsx +++ b/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 (
- + ); }; diff --git a/packages/core-components/src/layout/Sidebar/Intro.tsx b/packages/core-components/src/layout/Sidebar/Intro.tsx index 51d453b22d..05d580c960 100644 --- a/packages/core-components/src/layout/Sidebar/Intro.tsx +++ b/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, diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index 3d294a54a8..0413864084 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/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((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( theme => theme.breakpoints.down('md'), { noSsr: true }, diff --git a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx b/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx index 46f38d9a2c..b51e3cbc0d 100644 --- a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx +++ b/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 ( - {} }}> + {} }}> @@ -232,6 +232,6 @@ export const MobileSidebar = (props: MobileSidebarProps) => { {sidebarGroups} - + ); }; diff --git a/packages/core-components/src/layout/Sidebar/Page.tsx b/packages/core-components/src/layout/Sidebar/Page.tsx index 17cd5ddee1..bdf41b5dd7 100644 --- a/packages/core-components/src/layout/Sidebar/Page.tsx +++ b/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 ( -
{props.children}
- + ); } diff --git a/packages/core-components/src/layout/Sidebar/SidebarContext.test.tsx b/packages/core-components/src/layout/Sidebar/SidebarOpenStateContext.test.tsx similarity index 78% rename from packages/core-components/src/layout/Sidebar/SidebarContext.test.tsx rename to packages/core-components/src/layout/Sidebar/SidebarOpenStateContext.test.tsx index 43a18851d7..4953e1341b 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarContext.test.tsx +++ b/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( - {} }}> + {} }}> Child - , + , ); expect(await findByText('Child')).toBeInTheDocument(); }); @@ -41,23 +41,23 @@ describe('SidebarContext', () => { }; const { findByText } = await renderWithEffects( - {}, }} > - , + , ); 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 }) => ( - { @@ -74,9 +74,11 @@ describe('SidebarContext', () => { }} > {children} - + ); - const { result, rerender } = renderHook(() => useSidebar(), { wrapper }); + const { result, rerender } = renderHook(() => useSidebarOpenState(), { + wrapper, + }); expect(result.current.isOpen).toBe(true); diff --git a/packages/core-components/src/layout/Sidebar/SidebarContext.tsx b/packages/core-components/src/layout/Sidebar/SidebarOpenStateContext.tsx similarity index 79% rename from packages/core-components/src/layout/Sidebar/SidebarContext.tsx rename to packages/core-components/src/layout/Sidebar/SidebarOpenStateContext.tsx index 4e47b6040a..1ceb6d95cf 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarContext.tsx +++ b/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( ); 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; }) => ( { +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; } diff --git a/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.test.tsx b/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.test.tsx index d8bc054e4a..1a86ec612e 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.test.tsx +++ b/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( - { }} > Child - , + , ); expect(await findByText('Child')).toBeInTheDocument(); }); @@ -47,7 +47,7 @@ describe('SidebarPinStateContext', () => { }; const { findByText } = await renderWithEffects( - { }} > - , + , ); 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 }) => ( - { }} > {children} - + ); const { result, rerender } = renderHook(() => useSidebarPinState(), { wrapper, diff --git a/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.tsx b/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.tsx index ec38884890..0eb59dd119 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.tsx +++ b/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(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; } diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx index d8a87c98d9..438e580ef4 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx +++ b/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 diff --git a/packages/core-components/src/layout/Sidebar/index.ts b/packages/core-components/src/layout/Sidebar/index.ts index 06681ded52..4c91ea6a8f 100644 --- a/packages/core-components/src/layout/Sidebar/index.ts +++ b/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'; diff --git a/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx b/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx index 05e11458ce..b1164a32f0 100644 --- a/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx +++ b/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 (
diff --git a/packages/techdocs-cli-embedded-app/src/components/Root/Root.tsx b/packages/techdocs-cli-embedded-app/src/components/Root/Root.tsx index 6613e7c0ea..cd8b5d35ed 100644 --- a/packages/techdocs-cli-embedded-app/src/components/Root/Root.tsx +++ b/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 (
diff --git a/plugins/shortcuts/src/ShortcutItem.test.tsx b/plugins/shortcuts/src/ShortcutItem.test.tsx index d1a1018513..b98dd2dc0b 100644 --- a/plugins/shortcuts/src/ShortcutItem.test.tsx +++ b/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( - {} }}> + {} }}> - , + , ); expect(screen.getByText('ST')).toBeInTheDocument(); expect(screen.getByText('some title')).toBeInTheDocument(); diff --git a/plugins/shortcuts/src/Shortcuts.test.tsx b/plugins/shortcuts/src/Shortcuts.test.tsx index 813dbb8def..02b351d3a4 100644 --- a/plugins/shortcuts/src/Shortcuts.test.tsx +++ b/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( - {} }}> + {} }}> { > - , + , ); await waitFor(() => !screen.queryByTestId('progress')); expect(screen.getByText('Add Shortcuts')).toBeInTheDocument(); diff --git a/plugins/user-settings/src/components/General/UserSettingsPinToggle.test.tsx b/plugins/user-settings/src/components/General/UserSettingsPinToggle.test.tsx index a41792768a..ef8046a54e 100644 --- a/plugins/user-settings/src/components/General/UserSettingsPinToggle.test.tsx +++ b/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('', () => { it('toggles the pin sidebar button', async () => { const mockToggleFn = jest.fn(); const rendered = await renderWithEffects( wrapInTestApp( - ', () => { }} > - , + , ), ); expect(rendered.getByText('Pin Sidebar')).toBeInTheDocument();