Move 'isMobile' in Context

Optimize generated docs by labeling components with scope

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

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

@@ -13,23 +13,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { InfoCard } from '@backstage/core-components';
-import { BackstageTheme } from '@backstage/theme';
-import { List, useMediaQuery } from '@material-ui/core';
-import React from 'react';
+import { InfoCard, SidebarStateContext } from '@backstage/core-components';
+import { List } from '@material-ui/core';
+import React, { useContext } from 'react';
 import { UserSettingsPinToggle } from './UserSettingsPinToggle';
 import { UserSettingsThemeToggle } from './UserSettingsThemeToggle';
 
 export const UserSettingsAppearanceCard = () => {
-  const isMobileScreen = useMediaQuery<BackstageTheme>(theme =>
-    theme.breakpoints.down('xs'),
-  );
+  const isMobile = useContext(SidebarStateContext);
 
   return (
     <InfoCard title="Appearance" variant="gridItem">
       <List dense>
         <UserSettingsThemeToggle />
-        {!isMobileScreen && <UserSettingsPinToggle />}
+        {!isMobile && <UserSettingsPinToggle />}
       </List>
     </InfoCard>
   );

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

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

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

@@ -22,12 +22,10 @@ import {
   Switch,
   Tooltip,
 } from '@material-ui/core';
-import { SidebarPinStateContext } from '@backstage/core-components';
+import { SidebarStateContext } from '@backstage/core-components';
 
 export const UserSettingsPinToggle = () => {
-  const { isPinned, toggleSidebarPinState } = useContext(
-    SidebarPinStateContext,
-  );
+  const { isPinned, toggleSidebarPinState } = useContext(SidebarStateContext);
 
   return (
     <ListItem>

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

@@ -14,10 +14,13 @@
  * limitations under the License.
  */
 
-import { Header, Page, TabbedLayout } from '@backstage/core-components';
-import { BackstageTheme } from '@backstage/theme';
-import { useMediaQuery } from '@material-ui/core';
-import React from 'react';
+import {
+  Header,
+  Page,
+  SidebarStateContext,
+  TabbedLayout,
+} from '@backstage/core-components';
+import React, { useContext } from 'react';
 import { UserSettingsAuthProviders } from './AuthProviders';
 import { UserSettingsFeatureFlags } from './FeatureFlags';
 import { UserSettingsGeneral } from './General';
@@ -27,13 +30,11 @@ type Props = {
 };
 
 export const SettingsPage = ({ providerSettings }: Props) => {
-  const isMobileScreen = useMediaQuery<BackstageTheme>(theme =>
-    theme.breakpoints.down('xs'),
-  );
+  const { isMobile } = useContext(SidebarStateContext);
 
   return (
     <Page themeId="home">
-      {!isMobileScreen && <Header title="Settings" />}
+      {!isMobile && <Header title="Settings" />}
       <TabbedLayout>
         <TabbedLayout.Route path="general" title="General">
           <UserSettingsGeneral />