Replace SidebarPinStateContext with versioned provider and hook.

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

plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx

@@ -13,14 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { InfoCard, SidebarPinStateContext } from '@backstage/core-components';
+import { InfoCard, useSidebarPinState } from '@backstage/core-components';
 import { List } from '@material-ui/core';
-import React, { useContext } from 'react';
+import React from 'react';
 import { UserSettingsPinToggle } from './UserSettingsPinToggle';
 import { UserSettingsThemeToggle } from './UserSettingsThemeToggle';
 
 export const UserSettingsAppearanceCard = () => {
-  const { isMobile } = useContext(SidebarPinStateContext);
+  const { isMobile } = useSidebarPinState();
 
   return (
     <InfoCard title="Appearance" variant="gridItem">

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 { SidebarPinStateContext } from '@backstage/core-components';
+import { SidebarPinStateContextProvider } from '@backstage/core-components';
 
 describe('<UserSettingsPinToggle />', () => {
   it('toggles the pin sidebar button', async () => {
     const mockToggleFn = jest.fn();
     const rendered = await renderWithEffects(
       wrapInTestApp(
-        <SidebarPinStateContext.Provider
+        <SidebarPinStateContextProvider
           value={{
             isPinned: false,
             isMobile: false,
@@ -33,7 +33,7 @@ describe('<UserSettingsPinToggle />', () => {
           }}
         >
           <UserSettingsPinToggle />
-        </SidebarPinStateContext.Provider>,
+        </SidebarPinStateContextProvider>,
       ),
     );
     expect(rendered.getByText('Pin Sidebar')).toBeInTheDocument();

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useContext } from 'react';
+import React from 'react';
 import {
   ListItem,
   ListItemSecondaryAction,
@@ -22,12 +22,10 @@ import {
   Switch,
   Tooltip,
 } from '@material-ui/core';
-import { SidebarPinStateContext } from '@backstage/core-components';
+import { useSidebarPinState } from '@backstage/core-components';
 
 export const UserSettingsPinToggle = () => {
-  const { isPinned, toggleSidebarPinState } = useContext(
-    SidebarPinStateContext,
-  );
+  const { isPinned, toggleSidebarPinState } = useSidebarPinState();
 
   return (
     <ListItem>

plugins/user-settings/src/components/SettingsPage.tsx

@@ -17,10 +17,10 @@
 import {
   Header,
   Page,
-  SidebarPinStateContext,
   TabbedLayout,
+  useSidebarPinState,
 } from '@backstage/core-components';
-import React, { useContext } from 'react';
+import React from 'react';
 import { useOutlet } from 'react-router';
 import { useElementFilter } from '@backstage/core-plugin-api';
 import { UserSettingsAuthProviders } from './AuthProviders';
@@ -33,7 +33,7 @@ type Props = {
 };
 
 export const SettingsPage = ({ providerSettings }: Props) => {
-  const { isMobile } = useContext(SidebarPinStateContext);
+  const { isMobile } = useSidebarPinState();
   const outlet = useOutlet();
 
   const tabs = useElementFilter(outlet, elements =>