Move layout context to SidabarPage

Signed-off-by: Juan Pablo Garcia Ripa <sarabadu@gmail.com>

packages/core-components/src/layout/Content/Content.tsx

@@ -17,7 +17,7 @@
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import classNames from 'classnames';
 import React, { PropsWithChildren } from 'react';
-import { useLayoutContent } from '../LayoutProvider/LayoutProvider';
+import { useContent } from '../Sidebar';
 
 /** @public */
 export type BackstageContentClassKey = 'root' | 'stretch' | 'noPadding';
@@ -64,7 +64,7 @@ type Props = {
 export function Content(props: PropsWithChildren<Props>) {
   const { className, stretch, noPadding, children, ...restProps } = props;
 
-  const { contentRef } = useLayoutContent();
+  const { contentRef } = useContent();
 
   const classes = useStyles();
   return (

packages/core-components/src/layout/LayoutProvider/LayoutProvider.tsx

@@ -1,59 +0,0 @@
-/*
- * Copyright 2020 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React, {
-  createContext,
-  PropsWithChildren,
-  useCallback,
-  useContext,
-  useRef,
-} from 'react';
-
-export type LayoutContextType = {
-  content: {
-    contentRef?: React.MutableRefObject<HTMLDivElement | null>;
-  };
-};
-
-const LayoutContext = createContext<LayoutContextType>({
-  content: {
-    contentRef: undefined,
-  },
-});
-
-export function LayoutProvider(props: PropsWithChildren<{}>) {
-  const contentRef = useRef(null);
-
-  const content = {
-    contentRef,
-  };
-
-  return (
-    <LayoutContext.Provider value={{ content }}>
-      {props.children}
-    </LayoutContext.Provider>
-  );
-}
-
-export function useLayoutContent() {
-  const { content } = useContext(LayoutContext);
-
-  const focusContent = useCallback(() => {
-    content.contentRef?.current?.focus();
-  }, [content]);
-
-  return { focusContent, contentRef: content.contentRef };
-}

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

@@ -1,16 +0,0 @@
-/*
- * Copyright 2021 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export { LayoutProvider, useLayoutContent } from './LayoutProvider';

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

@@ -19,7 +19,10 @@ import { makeStyles } from '@material-ui/core/styles';
 import React, {
   createContext,
   PropsWithChildren,
+  useCallback,
+  useContext,
   useEffect,
+  useRef,
   useState,
 } from 'react';
 import { sidebarConfig } from './config';
@@ -89,11 +92,28 @@ export const SidebarPinStateContext = createContext<SidebarPinStateContextType>(
   },
 );
 
+type PageContextType = {
+  content: {
+    contentRef?: React.MutableRefObject<HTMLDivElement | null>;
+  };
+};
+
+const PageContext = createContext<PageContextType>({
+  content: {
+    contentRef: undefined,
+  },
+});
 export function SidebarPage(props: SidebarPageProps) {
   const [isPinned, setIsPinned] = useState(() =>
     LocalStorage.getSidebarPinState(),
   );
 
+  const contentRef = useRef(null);
+
+  const content = {
+    contentRef,
+  };
+
   useEffect(() => {
     LocalStorage.setSidebarPinState(isPinned);
   }, [isPinned]);
@@ -114,7 +134,19 @@ export function SidebarPage(props: SidebarPageProps) {
         isMobile,
       }}
     >
-      <div className={classes.root}>{props.children}</div>
+      <PageContext.Provider value={{ content }}>
+        <div className={classes.root}>{props.children}</div>
+      </PageContext.Provider>
     </SidebarPinStateContext.Provider>
   );
 }
+
+export function useContent() {
+  const { content } = useContext(PageContext);
+
+  const focusContent = useCallback(() => {
+    content?.contentRef?.current?.focus();
+  }, [content]);
+
+  return { focusContent, contentRef: content?.contentRef };
+}

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

@@ -30,13 +30,13 @@ export type { SidebarClassKey, SidebarProps } from './Bar';
 export {
   SidebarPage,
   SidebarPinStateContext as SidebarPinStateContext,
+  useContent,
 } from './Page';
 export type {
   SidebarPinStateContextType as SidebarPinStateContextType,
   SidebarPageClassKey,
   SidebarPageProps,
 } from './Page';
-
 export {
   SidebarDivider,
   SidebarItem,

plugins/search/src/components/SearchModal/SearchModal.tsx

@@ -34,7 +34,7 @@ import { SearchResult } from '../SearchResult';
 import { SearchContextProvider, useSearch } from '../SearchContext';
 import { SearchResultPager } from '../SearchResultPager';
 import { useRouteRef } from '@backstage/core-plugin-api';
-import { Link, useLayoutContent } from '@backstage/core-components';
+import { Link, useContent } from '@backstage/core-components';
 import { rootRouteRef } from '../../plugin';
 
 export interface SearchModalProps {
@@ -62,7 +62,7 @@ export const Modal = ({ open = true, toggleModal }: SearchModalProps) => {
   const classes = useStyles();
 
   const { term } = useSearch();
-  const { focusContent } = useLayoutContent();
+  const { focusContent } = useContent();
   const { transitions } = useTheme();
 
   const handleResultClick = () => {

plugins/search/src/components/SidebarSearch/SidebarSearch.tsx

@@ -19,10 +19,7 @@ import { useNavigate } from 'react-router-dom';
 import { rootRouteRef } from '../../plugin';
 
 import { useRouteRef, IconComponent } from '@backstage/core-plugin-api';
-import {
-  SidebarSearchField,
-  useLayoutContent,
-} from '@backstage/core-components';
+import { SidebarSearchField, useContent } from '@backstage/core-components';
 
 export type SidebarSearchProps = {
   icon?: IconComponent;
@@ -30,7 +27,7 @@ export type SidebarSearchProps = {
 
 export const SidebarSearch = (props: SidebarSearchProps) => {
   const searchRoute = useRouteRef(rootRouteRef);
-  const { focusContent } = useLayoutContent();
+  const { focusContent } = useContent();
   const navigate = useNavigate();
   const handleSearch = useCallback(
     (query: string): void => {