paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 50 Packages Projects Releases Wiki Activity

Avoid breaking changes

Browse Source 
Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
This commit is contained in:
Philipp Hugenroth
2022-01-13 10:35:33 +01:00
parent 4ae04a2c2f
commit 2989c82825
15 changed files with 53 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/search/SearchPage.tsx
+2 -2
View File
@@ -21,7 +21,7 @@ import {
Header,
Lifecycle,
Page,
SidebarStateContext,
SidebarPinStateContext,
} from '@backstage/core-components';
import { CatalogResultListItem } from '@backstage/plugin-catalog';
import {
@@ -53,7 +53,7 @@ const useStyles = makeStyles((theme: Theme) => ({
const SearchPage = () => {
const classes = useStyles();
const { isMobile } = useContext(SidebarStateContext);
const { isMobile } = useContext(SidebarPinStateContext);
return (
<Page themeId="home">
packages/core-components/api-report.md
+11 -11
View File
@@ -897,7 +897,7 @@ export const SidebarContext: Context<SidebarContextType>;
// @public
export type SidebarContextType = {
isOpen: boolean;
setOpen?: (open: boolean) => void;
setOpen: (open: boolean) => void;
};
// Warning: (ae-missing-release-tag) "SidebarDivider" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -1244,6 +1244,16 @@ export type SidebarPageProps = {
children?: React_2.ReactNode;
};
// @public
export const SidebarPinStateContext: React_2.Context<SidebarPinStateContextType>;
// @public
export type SidebarPinStateContextType = {
isPinned: boolean;
toggleSidebarPinState: () => any;
isMobile?: boolean;
};
// @public (undocumented)
export type SidebarProps = {
openDelayMs?: number;
@@ -2075,16 +2085,6 @@ export const SidebarSpacer: React_2.ComponentType<
// @public (undocumented)
export type SidebarSpacerClassKey = 'root';
// @public
export const SidebarStateContext: React_2.Context<SidebarStateContextType>;
// @public
export type SidebarStateContextType = {
isPinned: boolean;
toggleSidebarPinState: () => any;
isMobile?: boolean;
};
// @public
export const SidebarSubmenu: (props: SidebarSubmenuProps) => JSX.Element;
packages/core-components/src/layout/Sidebar/Bar.test.tsx
+3 -3
View File
@@ -27,14 +27,14 @@ import {
SidebarExpandButton,
SidebarItem,
SidebarSearchField,
SidebarStateContext,
SidebarPinStateContext,
SidebarSubmenu,
SidebarSubmenuItem,
} from '.';
async function renderScalableSidebar() {
await renderInTestApp(
<SidebarStateContext.Provider
<SidebarPinStateContext.Provider
value={{
isPinned: false,
isMobile: false,
@@ -66,7 +66,7 @@ async function renderScalableSidebar() {
<SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
<SidebarExpandButton />
</Sidebar>
</SidebarStateContext.Provider>,
</SidebarPinStateContext.Provider>,
);
}
packages/core-components/src/layout/Sidebar/Bar.tsx
+5 -3
View File
@@ -20,7 +20,7 @@ import classnames from 'classnames';
import React, { useState, useContext, useRef } from 'react';
import { sidebarConfig, SidebarContext } from './config';
import { BackstageTheme } from '@backstage/theme';
import { SidebarStateContext } from './Page';
import { SidebarPinStateContext } from './Page';
import { MobileSidebar } from './MobileSidebar';
/** @public */
@@ -102,7 +102,9 @@ const DesktopSidebar = (props: SidebarProps) => {
);
const [state, setState] = useState(State.Closed);
const hoverTimerRef = useRef<number>();
const { isPinned, toggleSidebarPinState } = useContext(SidebarStateContext);
const { isPinned, toggleSidebarPinState } = useContext(
SidebarPinStateContext,
);
const handleOpen = () => {
if (isPinned || disableExpandOnHover) {
@@ -185,7 +187,7 @@ const DesktopSidebar = (props: SidebarProps) => {
*/
export const Sidebar = (props: SidebarProps) => {
const { children, openDelayMs, closeDelayMs, disableExpandOnHover } = props;
const { isMobile } = useContext(SidebarStateContext);
const { isMobile } = useContext(SidebarPinStateContext);
return isMobile ? (
<MobileSidebar>{children}</MobileSidebar>
packages/core-components/src/layout/Sidebar/Items.tsx
+1 -1
View File
@@ -643,7 +643,7 @@ export const SidebarExpandButton = () => {
{ noSsr: true },
);
if (isSmallScreen || !setOpen) {
if (isSmallScreen) {
return null;
}
packages/core-components/src/layout/Sidebar/MobileSidebar.tsx
+1 -1
View File
@@ -187,7 +187,7 @@ export const MobileSidebar = (props: MobileSidebarProps) => {
!sidebarGroups[selectedMenuItemIndex].props.to;
return (
<SidebarContext.Provider value={{ isOpen: true }}>
<SidebarContext.Provider value={{ isOpen: true, setOpen: () => {} }}>
<MobileSidebarContext.Provider
value={{ selectedMenuItemIndex, setSelectedMenuItemIndex }}
>
packages/core-components/src/layout/Sidebar/Page.tsx
+11 -9
View File
@@ -43,11 +43,11 @@ const useStyles = makeStyles<BackstageTheme, { isPinned: boolean }>(
);
/**
* Type of `SidebarStateContext`
* Type of `SidebarPinStateContext`
*
* @public
*/
export type SidebarStateContextType = {
export type SidebarPinStateContextType = {
isPinned: boolean;
toggleSidebarPinState: () => any;
isMobile?: boolean;
@@ -67,11 +67,13 @@ export type SidebarPageProps = {
*
* @public
*/
export const SidebarStateContext = createContext<SidebarStateContextType>({
isPinned: true,
toggleSidebarPinState: () => {},
isMobile: false,
});
export const SidebarPinStateContext = createContext<SidebarPinStateContextType>(
{
isPinned: true,
toggleSidebarPinState: () => {},
isMobile: false,
},
);
export function SidebarPage(props: SidebarPageProps) {
const [isPinned, setIsPinned] = useState(() =>
@@ -91,7 +93,7 @@ export function SidebarPage(props: SidebarPageProps) {
const classes = useStyles({ isPinned });
return (
<SidebarStateContext.Provider
<SidebarPinStateContext.Provider
value={{
isPinned,
toggleSidebarPinState,
@@ -99,6 +101,6 @@ export function SidebarPage(props: SidebarPageProps) {
}}
>
<div className={classes.root}>{props.children}</div>
</SidebarStateContext.Provider>
</SidebarPinStateContext.Provider>
);
}
packages/core-components/src/layout/Sidebar/SidebarGroup.tsx
+2 -2
View File
@@ -22,7 +22,7 @@ import BottomNavigationAction, {
import { makeStyles } from '@material-ui/core/styles';
import React, { useContext } from 'react';
import { useLocation } from 'react-router-dom';
import { SidebarStateContext } from '.';
import { SidebarPinStateContext } from '.';
import { Link } from '../../components';
import { sidebarConfig } from './config';
import { MobileSidebarContext } from './MobileSidebar';
@@ -120,7 +120,7 @@ const MobileSidebarGroup = (props: SidebarGroupProps) => {
*/
export const SidebarGroup = (props: SidebarGroupProps) => {
const { children, to, label, icon, value } = props;
const { isMobile } = useContext(SidebarStateContext);
const { isMobile } = useContext(SidebarPinStateContext);
return isMobile ? (
<MobileSidebarGroup to={to} label={label} icon={icon} value={value} />
packages/core-components/src/layout/Sidebar/config.ts
+2 -1
View File
@@ -63,7 +63,7 @@ export const SIDEBAR_INTRO_LOCAL_STORAGE =
*/
export type SidebarContextType = {
isOpen: boolean;
setOpen?: (open: boolean) => void;
setOpen: (open: boolean) => void;
};
/**
@@ -71,6 +71,7 @@ export type SidebarContextType = {
*/
export const SidebarContext = createContext<SidebarContextType>({
isOpen: false,
setOpen: () => {},
});
export type SidebarItemWithSubmenuContextType = {
packages/core-components/src/layout/Sidebar/index.ts
+2 -2
View File
@@ -32,10 +32,10 @@ export type {
export type { SidebarClassKey, SidebarProps } from './Bar';
export {
SidebarPage,
SidebarStateContext as SidebarStateContext,
SidebarPinStateContext as SidebarPinStateContext,
} from './Page';
export type {
SidebarStateContextType as SidebarStateContextType,
SidebarPinStateContextType as SidebarPinStateContextType,
SidebarPageClassKey,
SidebarPageProps,
} from './Page';
plugins/techdocs/src/reader/components/Reader.tsx
+2 -2
View File
@@ -31,7 +31,7 @@ import { EntityName } from '@backstage/catalog-model';
import { useApi, configApiRef } from '@backstage/core-plugin-api';
import { scmIntegrationsApiRef } from '@backstage/integration-react';
import { BackstageTheme } from '@backstage/theme';
import { SidebarStateContext } from '@backstage/core-components';
import { SidebarPinStateContext } from '@backstage/core-components';
import { techdocsStorageApiRef } from '../../api';
@@ -146,7 +146,7 @@ export const useTechDocsReaderDom = (entityRef: EntityName): Element | null => {
const [dom, setDom] = useState<HTMLElement | null>(null);
// sidebar pinned status to be used in computing CSS style injections
const { isPinned } = useContext(SidebarStateContext);
const { isPinned } = useContext(SidebarPinStateContext);
const updateSidebarPosition = useCallback(() => {
if (!dom || !sidebars) return;
plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx
+2 -2
View File
@@ -13,14 +13,14 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { InfoCard, SidebarStateContext } from '@backstage/core-components';
import { InfoCard, SidebarPinStateContext } 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 { isMobile } = useContext(SidebarStateContext);
const { isMobile } = useContext(SidebarPinStateContext);
return (
<InfoCard title="Appearance" variant="gridItem">
plugins/user-settings/src/components/General/UserSettingsPinToggle.test.tsx
+3 -3
View File
@@ -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 { SidebarStateContext } from '@backstage/core-components';
import { SidebarPinStateContext } from '@backstage/core-components';
describe('<UserSettingsPinToggle />', () => {
it('toggles the pin sidebar button', async () => {
const mockToggleFn = jest.fn();
const rendered = await renderWithEffects(
wrapInTestApp(
<SidebarStateContext.Provider
<SidebarPinStateContext.Provider
value={{
isPinned: false,
isMobile: false,
@@ -33,7 +33,7 @@ describe('<UserSettingsPinToggle />', () => {
}}
>
<UserSettingsPinToggle />
</SidebarStateContext.Provider>,
</SidebarPinStateContext.Provider>,
),
);
expect(rendered.getByText('Pin Sidebar')).toBeInTheDocument();
plugins/user-settings/src/components/General/UserSettingsPinToggle.tsx
+4 -2
View File
@@ -22,10 +22,12 @@ import {
Switch,
Tooltip,
} from '@material-ui/core';
import { SidebarStateContext } from '@backstage/core-components';
import { SidebarPinStateContext } from '@backstage/core-components';
export const UserSettingsPinToggle = () => {
const { isPinned, toggleSidebarPinState } = useContext(SidebarStateContext);
const { isPinned, toggleSidebarPinState } = useContext(
SidebarPinStateContext,
);
return (
<ListItem>
plugins/user-settings/src/components/SettingsPage.tsx
+2 -2
View File
@@ -17,7 +17,7 @@
import {
Header,
Page,
SidebarStateContext,
SidebarPinStateContext,
TabbedLayout,
} from '@backstage/core-components';
import React, { useContext } from 'react';
@@ -30,7 +30,7 @@ type Props = {
};
export const SettingsPage = ({ providerSettings }: Props) => {
const { isMobile } = useContext(SidebarStateContext);
const { isMobile } = useContext(SidebarPinStateContext);
return (
<Page themeId="home">