exported and renamed all useful component for the consumer

Signed-off-by: Matteo Barone <matteo.barone@klarna.com>

.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`

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<undefined>;
@@ -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)
 

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 = () => (
+  <InfoCard title="Appearance">
+    <List dense>
+      <UserSettingsThemeToggle />
+      <UserSettingsPinToggle />
+    </List>
+  </InfoCard>
+);

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 (
     <Grid container direction="row" spacing={3}>
       <Grid item sm={12} md={6}>
-        <Profile />
+        <UserSettingsProfileCard />
       </Grid>
       <Grid item sm={12} md={6}>
-        <InfoCard title="Appearance">
-          <List dense>
-            <ThemeToggle />
-            <PinButton />
-          </List>
-        </InfoCard>
+        <UserSettingsAppearanceCard />
       </Grid>
     </Grid>
   );

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('<PinButton />', () => {
+describe('<UserSettingsPinToggle />', () => {
   it('toggles the pin sidebar button', async () => {
     const mockToggleFn = jest.fn();
     const rendered = await renderWithEffects(
@@ -28,7 +28,7 @@ describe('<PinButton />', () => {
         <SidebarPinStateContext.Provider
           value={{ isPinned: false, toggleSidebarPinState: mockToggleFn }}
         >
-          <PinButton />
+          <UserSettingsPinToggle />
         </SidebarPinStateContext.Provider>,
       ),
     );

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,
   );

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 (
     <InfoCard title="Profile">
       <Grid container spacing={6}>
         <Grid item>
-          <SignInAvatar size={96} />
+          <UserSettingsSignInAvatar size={96} />
         </Grid>
         <Grid item xs={12} sm container>
           <Grid item xs container direction="column" spacing={2}>

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

@@ -31,7 +31,7 @@ const useStyles = makeStyles<BackstageTheme, { size: number }>(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();

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('<ThemeToggle />', () => {
+describe('<UserSettingsThemeToggle />', () => {
   it('toggles the theme select button', async () => {
     const themeApi = apiRegistry.get(appThemeApiRef);
     const rendered = await renderWithEffects(
       wrapInTestApp(
         <ApiProvider apis={apiRegistry}>
-          <ThemeToggle />
+          <UserSettingsThemeToggle />
         </ApiProvider>,
       ),
     );

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

@@ -87,7 +87,7 @@ const TooltipToggleButton = ({
   </Tooltip>
 );
 
-export const ThemeToggle = () => {
+export const UserSettingsThemeToggle = () => {
   const classes = useStyles();
   const appThemeApi = useApi(appThemeApiRef);
   const themeId = useObservable(

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';

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) => {
 
       <TabbedLayout>
         <TabbedLayout.Route path="general" title="General">
-          <General />
+          <UserSettingsGeneral />
         </TabbedLayout.Route>
         <TabbedLayout.Route
           path="auth-providers"

plugins/user-settings/src/components/index.ts

@@ -16,4 +16,5 @@
 export { Settings } from './Settings';
 export { SettingsPage as Router } from './SettingsPage';
 export * from './AuthProviders';
-export { General } from './General';
+export * from './General';
+export { useUserProfile } from './useUserProfileInfo';