Merge pull request #6905 from tudi2d/mobile-sidebar

Mobile sidebar

plugins/catalog/src/components/CatalogResultListItem/CatalogResultListItem.tsx

@@ -31,6 +31,7 @@ const useStyles = makeStyles({
   },
   itemText: {
     width: '100%',
+    wordBreak: 'break-all',
     marginBottom: '1rem',
   },
 });

plugins/cost-insights/README.md

@@ -79,21 +79,27 @@ To expose the plugin to your users, you can integrate the `cost-insights` route
  export const AppSidebar = () => (
    <Sidebar>
      <SidebarLogo />
-     <SidebarSearch />
+     <SidebarGroup icon={<SearchIcon />} to="/search">
+       <SidebarSearch />
+     </SidebarGroup>
      <SidebarDivider />
      {/* Global nav, not org-specific */}
-     <SidebarItem icon={HomeIcon} to="./" text="Home" />
-     <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
-     <SidebarItem icon={LibraryBooks} to="/docs" text="Docs" />
-     <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
-     <SidebarDivider />
-     <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
-+    <SidebarItem icon={MoneyIcon} to="cost-insights" text="Cost Insights" />
+     <SidebarGroup label="Menu" icon={<MenuIcon />}>
+       <SidebarItem icon={HomeIcon} to="./" text="Home" />
+       <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
+       <SidebarItem icon={LibraryBooks} to="/docs" text="Docs" />
+       <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
+       <SidebarDivider />
+       <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
+  +    <SidebarItem icon={MoneyIcon} to="cost-insights" text="Cost Insights" />
+     </SidebarGroup>
      {/* End global nav */}
      <SidebarDivider />
      <SidebarSpace />
      <SidebarDivider />
-     <SidebarSettings />
+     <SidebarGroup icon={<UserSettingsSignInAvatar />} to="/settings">
+       <SidebarSettings />
+     </SidebarGroup>
    </Sidebar>
  );
 ```

plugins/shortcuts/src/AddShortcut.tsx

@@ -31,7 +31,7 @@ import { alertApiRef, useApi } from '@backstage/core-plugin-api';
 
 const useStyles = makeStyles(theme => ({
   card: {
-    width: 400,
+    maxWidth: 400,
   },
   header: {
     marginBottom: theme.spacing(1),

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

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

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

@@ -21,10 +21,10 @@ import { UserSettingsAppearanceCard } from './UserSettingsAppearanceCard';
 export const UserSettingsGeneral = () => {
   return (
     <Grid container direction="row" spacing={3}>
-      <Grid item sm={12} md={6}>
+      <Grid item xs={12} md={6}>
         <UserSettingsProfileCard />
       </Grid>
-      <Grid item sm={12} md={6}>
+      <Grid item xs={12} md={6}>
         <UserSettingsAppearanceCard />
       </Grid>
     </Grid>

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

@@ -26,7 +26,11 @@ describe('<UserSettingsPinToggle />', () => {
     const rendered = await renderWithEffects(
       wrapInTestApp(
         <SidebarPinStateContext.Provider
-          value={{ isPinned: false, toggleSidebarPinState: mockToggleFn }}
+          value={{
+            isPinned: false,
+            isMobile: false,
+            toggleSidebarPinState: mockToggleFn,
+          }}
         >
           <UserSettingsPinToggle />
         </SidebarPinStateContext.Provider>,

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

@@ -14,21 +14,27 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import {
+  Header,
+  Page,
+  SidebarPinStateContext,
+  TabbedLayout,
+} from '@backstage/core-components';
+import React, { useContext } from 'react';
 import { UserSettingsAuthProviders } from './AuthProviders';
 import { UserSettingsFeatureFlags } from './FeatureFlags';
 import { UserSettingsGeneral } from './General';
-import { Header, Page, TabbedLayout } from '@backstage/core-components';
 
 type Props = {
   providerSettings?: JSX.Element;
 };
 
 export const SettingsPage = ({ providerSettings }: Props) => {
+  const { isMobile } = useContext(SidebarPinStateContext);
+
   return (
     <Page themeId="home">
-      <Header title="Settings" />
-
+      {!isMobile && <Header title="Settings" />}
       <TabbedLayout>
         <TabbedLayout.Route path="general" title="General">
           <UserSettingsGeneral />