Merge branch 'master' into mobile-sidebar

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

plugins/user-settings/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @backstage/plugin-user-settings
 
+## 0.3.12
+
+### Patch Changes
+
+- 9a1c8e92eb: The theme switcher now renders the title of themes instead of their variant
+- Updated dependencies
+  - @backstage/core-components@0.7.6
+  - @backstage/theme@0.2.14
+  - @backstage/core-plugin-api@0.2.2
+
+## 0.3.11
+
+### Patch Changes
+
+- a125278b81: Refactor out the deprecated path and icon from RouteRefs
+- 274a4fc633: Add Props Icon for Sidebar Item SidebarSearchField and Settings
+- Updated dependencies
+  - @backstage/core-components@0.7.4
+  - @backstage/core-plugin-api@0.2.0
+
 ## 0.3.10
 
 ### Patch Changes

plugins/user-settings/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@backstage/plugin-user-settings",
   "description": "A Backstage plugin that provides a settings page",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
@@ -31,9 +31,9 @@
     "clean": "backstage-cli clean"
   },
   "dependencies": {
-    "@backstage/core-components": "^0.7.3",
-    "@backstage/core-plugin-api": "^0.1.13",
-    "@backstage/theme": "^0.2.13",
+    "@backstage/core-components": "^0.7.6",
+    "@backstage/core-plugin-api": "^0.2.2",
+    "@backstage/theme": "^0.2.14",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.57",
@@ -43,10 +43,10 @@
     "react-use": "^17.2.4"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.8.2",
-    "@backstage/core-app-api": "^0.1.20",
-    "@backstage/dev-utils": "^0.2.12",
-    "@backstage/test-utils": "^0.1.21",
+    "@backstage/cli": "^0.10.0",
+    "@backstage/core-app-api": "^0.1.24",
+    "@backstage/dev-utils": "^0.2.13",
+    "@backstage/test-utils": "^0.1.23",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^13.1.8",

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

@@ -14,22 +14,24 @@
  * limitations under the License.
  */
 
-import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
+import {
+  renderWithEffects,
+  TestApiRegistry,
+  wrapInTestApp,
+} from '@backstage/test-utils';
 import { fireEvent } from '@testing-library/react';
 import React from 'react';
 import { UserSettingsAuthProviders } from './UserSettingsAuthProviders';
 
-import {
-  ApiProvider,
-  ApiRegistry,
-  ConfigReader,
-} from '@backstage/core-app-api';
+import { ApiProvider, ConfigReader } from '@backstage/core-app-api';
 import { configApiRef, googleAuthApiRef } from '@backstage/core-plugin-api';
 
 const mockSignInHandler = jest.fn().mockReturnValue('');
 const mockGoogleAuth = {
   sessionState$: () => ({
+    [Symbol.observable]: jest.fn(),
     subscribe: () => ({
+      closed: false,
       unsubscribe: () => null,
     }),
   }),
@@ -47,10 +49,10 @@ const createConfig = () =>
 
 const config = createConfig();
 
-const apiRegistry = ApiRegistry.from([
+const apiRegistry = TestApiRegistry.from(
   [configApiRef, config],
   [googleAuthApiRef, mockGoogleAuth],
-]);
+);
 
 describe('<UserSettingsAuthProviders />', () => {
   it('displays a provider and calls its sign-in handler on click', async () => {

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

@@ -15,16 +15,16 @@
  */
 
 import { AppTheme, appThemeApiRef } from '@backstage/core-plugin-api';
-import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
+import {
+  renderWithEffects,
+  TestApiRegistry,
+  wrapInTestApp,
+} from '@backstage/test-utils';
 import { lightTheme } from '@backstage/theme';
 import { fireEvent } from '@testing-library/react';
 import React from 'react';
 import { UserSettingsThemeToggle } from './UserSettingsThemeToggle';
-import {
-  ApiProvider,
-  ApiRegistry,
-  AppThemeSelector,
-} from '@backstage/core-app-api';
+import { ApiProvider, AppThemeSelector } from '@backstage/core-app-api';
 
 const mockTheme: AppTheme = {
   id: 'light-theme',
@@ -33,8 +33,9 @@ const mockTheme: AppTheme = {
   theme: lightTheme,
 };
 
-const apiRegistry = ApiRegistry.from([
-  [appThemeApiRef, AppThemeSelector.createWithStorage([mockTheme])],
+const apiRegistry = TestApiRegistry.from([
+  appThemeApiRef,
+  AppThemeSelector.createWithStorage([mockTheme]),
 ]);
 
 describe('<UserSettingsThemeToggle />', () => {

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

@@ -131,7 +131,7 @@ export const UserSettingsThemeToggle = () => {
                 value={theme.id}
               >
                 <>
-                  {theme.variant}&nbsp;
+                  {theme.title}&nbsp;
                   <ThemeIcon
                     id={theme.id}
                     icon={themeIcon}

plugins/user-settings/src/components/Settings.tsx

@@ -18,14 +18,14 @@ import React from 'react';
 import SettingsIcon from '@material-ui/icons/Settings';
 import { settingsRouteRef } from '../plugin';
 import { SidebarItem } from '@backstage/core-components';
-import { IconComponent } from '@backstage/core-plugin-api';
+import { useRouteRef, IconComponent } from '@backstage/core-plugin-api';
 
 type SettingsProps = {
   icon?: IconComponent;
 };
 
 export const Settings = (props: SettingsProps) => {
+  const routePath = useRouteRef(settingsRouteRef);
   const Icon = props.icon ? props.icon : SettingsIcon;
-
-  return <SidebarItem text="Settings" to={settingsRouteRef.path} icon={Icon} />;
+  return <SidebarItem text="Settings" to={routePath()} icon={Icon} />;
 };

plugins/user-settings/src/plugin.ts

@@ -21,8 +21,7 @@ import {
 } from '@backstage/core-plugin-api';
 
 export const settingsRouteRef = createRouteRef({
-  path: '/settings',
-  title: 'Settings',
+  id: 'user-settings',
 });
 
 export const userSettingsPlugin = createPlugin({