diff --git a/.changeset/nice-bugs-beg.md b/.changeset/nice-bugs-beg.md index 3676f83538..e026ddd250 100644 --- a/.changeset/nice-bugs-beg.md +++ b/.changeset/nice-bugs-beg.md @@ -2,4 +2,4 @@ '@backstage/plugin-user-settings': patch --- -Exported `General` component from the plugin, to be able to use it in the consumer side and customize the `SettingPage` +Exported and renamed components from the `@backstage/plugin-user-settings` plugin , to be able to use it in the consumer side and customize the `SettingPage` diff --git a/plugins/user-settings/api-report.md b/plugins/user-settings/api-report.md index 0c76f30dbb..9eec78b6a3 100644 --- a/plugins/user-settings/api-report.md +++ b/plugins/user-settings/api-report.md @@ -7,6 +7,7 @@ import { ApiRef } from '@backstage/core-plugin-api'; import { BackstagePlugin } from '@backstage/core-plugin-api'; import { IconComponent } from '@backstage/core-plugin-api'; +import { ProfileInfo } from '@backstage/core-plugin-api'; import { RouteRef } from '@backstage/core-plugin-api'; import { SessionApi } from '@backstage/core-plugin-api'; @@ -16,9 +17,6 @@ export const AuthProviders: ({ providerSettings }: Props_2) => JSX.Element; // @public (undocumented) export const DefaultProviderSettings: ({ configuredProviders }: Props_3) => JSX.Element; -// @public (undocumented) -export const General: () => JSX.Element; - // @public (undocumented) export const ProviderSettingsItem: ({ title, description, icon: Icon, apiRef, }: Props_4) => JSX.Element; @@ -28,11 +26,23 @@ export const Router: ({ providerSettings }: Props) => JSX.Element; // @public (undocumented) export const Settings: () => JSX.Element; +// @public (undocumented) +export const UserSettingsAppearanceCard: () => JSX.Element; + +// @public (undocumented) +export const UserSettingsGeneral: () => JSX.Element; + +// @public (undocumented) +export const UserSettingsMenu: () => JSX.Element; + // @public (undocumented) export const UserSettingsPage: ({ providerSettings }: { providerSettings?: JSX.Element | undefined; }) => JSX.Element; +// @public (undocumented) +export const UserSettingsPinToggle: () => JSX.Element; + // @public (undocumented) const userSettingsPlugin: BackstagePlugin<{ settingsPage: RouteRef; @@ -42,6 +52,21 @@ export { userSettingsPlugin as plugin } export { userSettingsPlugin } +// @public (undocumented) +export const UserSettingsProfileCard: () => JSX.Element; + +// @public (undocumented) +export const UserSettingsSignInAvatar: ({ size }: Props_5) => JSX.Element; + +// @public (undocumented) +export const UserSettingsThemeToggle: () => JSX.Element; + +// @public (undocumented) +export const useUserProfile: () => { + profile: ProfileInfo; + displayName: string; +}; + // (No @packageDocumentation comment for this package) diff --git a/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx b/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx new file mode 100644 index 0000000000..982911821b --- /dev/null +++ b/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx @@ -0,0 +1,29 @@ +/* + * 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. + */ +import React from 'react'; +import { List } from '@material-ui/core'; +import { InfoCard } from '@backstage/core-components'; +import { UserSettingsPinToggle } from './UserSettingsPinToggle'; +import { UserSettingsThemeToggle } from './UserSettingsThemeToggle'; + +export const UserSettingsAppearanceCard = () => ( + + + + + + +); diff --git a/plugins/user-settings/src/components/General/General.tsx b/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx similarity index 65% rename from plugins/user-settings/src/components/General/General.tsx rename to plugins/user-settings/src/components/General/UserSettingsGeneral.tsx index a9a09a98f5..bd08fef565 100644 --- a/plugins/user-settings/src/components/General/General.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx @@ -13,26 +13,19 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { Grid, List } from '@material-ui/core'; +import { Grid } from '@material-ui/core'; import React from 'react'; -import { PinButton } from './PinButton'; -import { Profile } from './Profile'; -import { ThemeToggle } from './ThemeToggle'; -import { InfoCard } from '@backstage/core-components'; +import { UserSettingsProfileCard } from './UserSettingsProfileCard'; +import { UserSettingsAppearanceCard } from './UserSettingsAppearanceCard'; -export const General = () => { +export const UserSettingsGeneral = () => { return ( - + - - - - - - + ); diff --git a/plugins/user-settings/src/components/General/PinButton.test.tsx b/plugins/user-settings/src/components/General/UserSettingsPinToggle.test.tsx similarity index 90% rename from plugins/user-settings/src/components/General/PinButton.test.tsx rename to plugins/user-settings/src/components/General/UserSettingsPinToggle.test.tsx index 67f2326c14..39387df907 100644 --- a/plugins/user-settings/src/components/General/PinButton.test.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsPinToggle.test.tsx @@ -17,10 +17,10 @@ import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils'; import { fireEvent } from '@testing-library/react'; import React from 'react'; -import { PinButton } from './PinButton'; +import { UserSettingsPinToggle } from './UserSettingsPinToggle'; import { SidebarPinStateContext } from '@backstage/core-components'; -describe('', () => { +describe('', () => { it('toggles the pin sidebar button', async () => { const mockToggleFn = jest.fn(); const rendered = await renderWithEffects( @@ -28,7 +28,7 @@ describe('', () => { - + , ), ); diff --git a/plugins/user-settings/src/components/General/PinButton.tsx b/plugins/user-settings/src/components/General/UserSettingsPinToggle.tsx similarity index 97% rename from plugins/user-settings/src/components/General/PinButton.tsx rename to plugins/user-settings/src/components/General/UserSettingsPinToggle.tsx index acf9891dec..4d71df8113 100644 --- a/plugins/user-settings/src/components/General/PinButton.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsPinToggle.tsx @@ -24,7 +24,7 @@ import { } from '@material-ui/core'; import { SidebarPinStateContext } from '@backstage/core-components'; -export const PinButton = () => { +export const UserSettingsPinToggle = () => { const { isPinned, toggleSidebarPinState } = useContext( SidebarPinStateContext, ); diff --git a/plugins/user-settings/src/components/General/Profile.tsx b/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx similarity index 90% rename from plugins/user-settings/src/components/General/Profile.tsx rename to plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx index 97391e8372..f79b1084c5 100644 --- a/plugins/user-settings/src/components/General/Profile.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx @@ -15,19 +15,19 @@ */ import { Grid, Typography } from '@material-ui/core'; import React from 'react'; -import { SignInAvatar } from './SignInAvatar'; +import { UserSettingsSignInAvatar } from './UserSettingsSignInAvatar'; import { UserSettingsMenu } from './UserSettingsMenu'; import { useUserProfile } from '../useUserProfileInfo'; import { InfoCard } from '@backstage/core-components'; -export const Profile = () => { +export const UserSettingsProfileCard = () => { const { profile, displayName } = useUserProfile(); return ( - + diff --git a/plugins/user-settings/src/components/General/SignInAvatar.tsx b/plugins/user-settings/src/components/General/UserSettingsSignInAvatar.tsx similarity index 95% rename from plugins/user-settings/src/components/General/SignInAvatar.tsx rename to plugins/user-settings/src/components/General/UserSettingsSignInAvatar.tsx index 68e65fdffe..d36655a75f 100644 --- a/plugins/user-settings/src/components/General/SignInAvatar.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsSignInAvatar.tsx @@ -31,7 +31,7 @@ const useStyles = makeStyles(theme => ({ type Props = { size?: number }; -export const SignInAvatar = ({ size }: Props) => { +export const UserSettingsSignInAvatar = ({ size }: Props) => { const { iconSize } = sidebarConfig; const classes = useStyles(size ? { size } : { size: iconSize }); const { profile } = useUserProfile(); diff --git a/plugins/user-settings/src/components/General/ThemeToggle.test.tsx b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx similarity index 91% rename from plugins/user-settings/src/components/General/ThemeToggle.test.tsx rename to plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx index b69cd8d53e..caae4d69bc 100644 --- a/plugins/user-settings/src/components/General/ThemeToggle.test.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx @@ -19,7 +19,7 @@ import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils'; import { lightTheme } from '@backstage/theme'; import { fireEvent } from '@testing-library/react'; import React from 'react'; -import { ThemeToggle } from './ThemeToggle'; +import { UserSettingsThemeToggle } from './UserSettingsThemeToggle'; import { ApiProvider, ApiRegistry, @@ -37,13 +37,13 @@ const apiRegistry = ApiRegistry.from([ [appThemeApiRef, AppThemeSelector.createWithStorage([mockTheme])], ]); -describe('', () => { +describe('', () => { it('toggles the theme select button', async () => { const themeApi = apiRegistry.get(appThemeApiRef); const rendered = await renderWithEffects( wrapInTestApp( - + , ), ); diff --git a/plugins/user-settings/src/components/General/ThemeToggle.tsx b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx similarity index 98% rename from plugins/user-settings/src/components/General/ThemeToggle.tsx rename to plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx index fd255969a5..4261218c44 100644 --- a/plugins/user-settings/src/components/General/ThemeToggle.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx @@ -87,7 +87,7 @@ const TooltipToggleButton = ({ ); -export const ThemeToggle = () => { +export const UserSettingsThemeToggle = () => { const classes = useStyles(); const appThemeApi = useApi(appThemeApiRef); const themeId = useObservable( diff --git a/plugins/user-settings/src/components/General/index.ts b/plugins/user-settings/src/components/General/index.ts index 89afe9d540..80a9c75d89 100644 --- a/plugins/user-settings/src/components/General/index.ts +++ b/plugins/user-settings/src/components/General/index.ts @@ -14,5 +14,10 @@ * limitations under the License. */ -export { General } from './General'; -export { SignInAvatar } from './SignInAvatar'; +export { UserSettingsGeneral } from './UserSettingsGeneral'; +export { UserSettingsProfileCard } from './UserSettingsProfileCard'; +export { UserSettingsMenu } from './UserSettingsMenu'; +export { UserSettingsSignInAvatar } from './UserSettingsSignInAvatar'; +export { UserSettingsAppearanceCard } from './UserSettingsAppearanceCard'; +export { UserSettingsThemeToggle } from './UserSettingsThemeToggle'; +export { UserSettingsPinToggle } from './UserSettingsPinToggle'; diff --git a/plugins/user-settings/src/components/SettingsPage.tsx b/plugins/user-settings/src/components/SettingsPage.tsx index 433f24c2c8..eb74a380f8 100644 --- a/plugins/user-settings/src/components/SettingsPage.tsx +++ b/plugins/user-settings/src/components/SettingsPage.tsx @@ -17,7 +17,7 @@ import React from 'react'; import { AuthProviders } from './AuthProviders'; import { FeatureFlags } from './FeatureFlags'; -import { General } from './General'; +import { UserSettingsGeneral } from './General'; import { Header, Page, TabbedLayout } from '@backstage/core-components'; type Props = { @@ -31,7 +31,7 @@ export const SettingsPage = ({ providerSettings }: Props) => { - +