Merge pull request #6201 from matteobarone/chore/user-settings-export-general-component

Rename Components and `export` them from `plugin-user-settings`

plugins/user-settings/api-report.md

@@ -7,12 +7,10 @@
 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';
 
-// @public (undocumented)
-export const AuthProviders: ({ providerSettings }: Props_2) => JSX.Element;
-
 // @public (undocumented)
 export const DefaultProviderSettings: ({ configuredProviders }: Props_3) => JSX.Element;
 
@@ -25,11 +23,29 @@ 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 UserSettingsAuthProviders: ({ providerSettings }: Props_2) => JSX.Element;
+
+// @public (undocumented)
+export const UserSettingsFeatureFlags: () => 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>;
@@ -39,6 +55,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/AuthProviders/UserSettingsAuthProviders.test.tsx

@@ -17,7 +17,7 @@
 import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
 import { fireEvent } from '@testing-library/react';
 import React from 'react';
-import { AuthProviders } from './AuthProviders';
+import { UserSettingsAuthProviders } from './UserSettingsAuthProviders';
 
 import {
   ApiProvider,
@@ -52,12 +52,12 @@ const apiRegistry = ApiRegistry.from([
   [googleAuthApiRef, mockGoogleAuth],
 ]);
 
-describe('<AuthProviders />', () => {
+describe('<UserSettingsAuthProviders />', () => {
   it('displays a provider and calls its sign-in handler on click', async () => {
     const rendered = await renderWithEffects(
       wrapInTestApp(
         <ApiProvider apis={apiRegistry}>
-          <AuthProviders />
+          <UserSettingsAuthProviders />
         </ApiProvider>,
       ),
     );

plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.tsx

@@ -26,7 +26,7 @@ type Props = {
   providerSettings?: JSX.Element;
 };
 
-export const AuthProviders = ({ providerSettings }: Props) => {
+export const UserSettingsAuthProviders = ({ providerSettings }: Props) => {
   const configApi = useApi(configApiRef);
   const providersConfig = configApi.getOptionalConfig('auth.providers');
   const configuredProviders = providersConfig?.keys() || [];

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

@@ -14,6 +14,6 @@
  * limitations under the License.
  */
 
-export { AuthProviders } from './AuthProviders';
+export { UserSettingsAuthProviders } from './UserSettingsAuthProviders';
 export { DefaultProviderSettings } from './DefaultProviderSettings';
 export { ProviderSettingsItem } from './ProviderSettingsItem';

plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx

@@ -26,7 +26,7 @@ import {
 } from '@backstage/core-plugin-api';
 import { InfoCard } from '@backstage/core-components';
 
-export const FeatureFlags = () => {
+export const UserSettingsFeatureFlags = () => {
   const featureFlagsApi = useApi(featureFlagsApiRef);
   const featureFlags = featureFlagsApi.getRegisteredFlags();
 

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

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { FeatureFlags } from './FeatureFlags';
+export { UserSettingsFeatureFlags } from './UserSettingsFeatureFlags';

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

@@ -15,9 +15,9 @@
  */
 
 import React from 'react';
-import { AuthProviders } from './AuthProviders';
-import { FeatureFlags } from './FeatureFlags';
-import { General } from './General';
+import { UserSettingsAuthProviders } from './AuthProviders';
+import { UserSettingsFeatureFlags } from './FeatureFlags';
+import { UserSettingsGeneral } from './General';
 import { Header, Page, TabbedLayout } from '@backstage/core-components';
 
 type Props = {
@@ -31,16 +31,16 @@ export const SettingsPage = ({ providerSettings }: Props) => {
 
       <TabbedLayout>
         <TabbedLayout.Route path="general" title="General">
-          <General />
+          <UserSettingsGeneral />
         </TabbedLayout.Route>
         <TabbedLayout.Route
           path="auth-providers"
           title="Authentication Providers"
         >
-          <AuthProviders providerSettings={providerSettings} />
+          <UserSettingsAuthProviders providerSettings={providerSettings} />
         </TabbedLayout.Route>
         <TabbedLayout.Route path="feature-flags" title="Feature Flags">
-          <FeatureFlags />
+          <UserSettingsFeatureFlags />
         </TabbedLayout.Route>
       </TabbedLayout>
     </Page>

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

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