Move <UserSettings/> to a user-settings plugin

packages/app/package.json

@@ -10,7 +10,6 @@
     "@backstage/plugin-api-docs": "^0.1.1-alpha.24",
     "@backstage/plugin-catalog": "^0.1.1-alpha.24",
     "@backstage/plugin-circleci": "^0.1.1-alpha.24",
-    "@backstage/plugin-cloudbuild": "^0.1.1-alpha.24",
     "@backstage/plugin-cost-insights": "^0.1.1-alpha.24",
     "@backstage/plugin-explore": "^0.1.1-alpha.24",
     "@backstage/plugin-gcp-projects": "^0.1.1-alpha.24",
@@ -28,6 +27,7 @@
     "@backstage/plugin-tech-radar": "^0.1.1-alpha.24",
     "@backstage/plugin-techdocs": "^0.1.1-alpha.24",
     "@backstage/plugin-welcome": "^0.1.1-alpha.24",
+    "@backstage/plugin-user-settings": "^0.1.1-alpha.24",
     "@backstage/test-utils": "^0.1.1-alpha.24",
     "@backstage/theme": "^0.1.1-alpha.24",
     "@material-ui/core": "^4.11.0",

packages/app/src/components/Root/Root.tsx

@@ -35,11 +35,10 @@ import {
   SidebarDivider,
   SidebarSearchField,
   SidebarSpace,
-  SidebarUserSettings,
-  DefaultProviderSettings,
 } from '@backstage/core';
 import { NavLink } from 'react-router-dom';
 import { graphiQLRouteRef } from '@backstage/plugin-graphiql';
+import { UserSettings } from '@backstage/plugin-user-settings';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -103,7 +102,7 @@ const Root: FC<{}> = ({ children }) => (
       />
       <SidebarSpace />
       <SidebarDivider />
-      <SidebarUserSettings providerSettings={<DefaultProviderSettings />} />
+      <UserSettings />
     </Sidebar>
     {children}
   </SidebarPage>

packages/app/src/plugins.ts

@@ -36,3 +36,4 @@ export { plugin as GcpProjects } from '@backstage/plugin-gcp-projects';
 export { plugin as Kubernetes } from '@backstage/plugin-kubernetes';
 export { plugin as Cloudbuild } from '@backstage/plugin-cloudbuild';
 export { plugin as CostInsights } from '@backstage/plugin-cost-insights';
+export { plugin as UserSettings } from '@backstage/plugin-user-settings';