Merge remote-tracking branch 'origin/master' into update-project-select

# Conflicts:
#	packages/app/src/plugins/cost-insights/ExampleCostInsightsClient.ts

packages/app/package.json

@@ -28,6 +28,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/App.tsx

@@ -33,6 +33,7 @@ import { Router as GraphiQLRouter } from '@backstage/plugin-graphiql';
 import { Router as TechRadarRouter } from '@backstage/plugin-tech-radar';
 import { Router as LighthouseRouter } from '@backstage/plugin-lighthouse';
 import { Router as RegisterComponentRouter } from '@backstage/plugin-register-component';
+import { Router as SettingsRouter } from '@backstage/plugin-user-settings';
 import { Route, Routes, Navigate } from 'react-router';
 
 import { EntityPage } from './components/catalog/EntityPage';
@@ -81,6 +82,7 @@ const AppRoutes = () => (
       path="/register-component"
       element={<RegisterComponentRouter catalogRouteRef={catalogRouteRef} />}
     />
+    <Route path="/settings" element={<SettingsRouter />} />
     {...deprecatedAppRoutes}
   </Routes>
 );

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 { Settings as SidebarSettings } from '@backstage/plugin-user-settings';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -103,7 +102,7 @@ const Root: FC<{}> = ({ children }) => (
       />
       <SidebarSpace />
       <SidebarDivider />
-      <SidebarUserSettings providerSettings={<DefaultProviderSettings />} />
+      <SidebarSettings />
     </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';

packages/app/src/plugins/cost-insights/ExampleCostInsightsClient.ts

@@ -16,13 +16,17 @@
 /* eslint-disable no-restricted-imports */
 
 import {
-  CostInsightsApi,
   Alert,
   Cost,
+  CostInsightsApi,
   Duration,
-  Project,
-  ProductCost,
   Group,
+  ProductCost,
+  Project,
+  ProjectGrowthAlert,
+  ProjectGrowthData,
+  UnlabeledDataflowAlert,
+  UnlabeledDataflowData,
   Maybe,
 } from '@backstage/plugin-cost-insights';
 
@@ -206,32 +210,44 @@ export class ExampleCostInsightsClient implements CostInsightsApi {
   }
 
   async getAlerts(group: string): Promise<Alert[]> {
-    const alerts: Alert[] = await this.request({ group }, [
-      {
-        id: 'projectGrowth',
-        project: 'example-project',
-        periodStart: 'Q1 2020',
-        periodEnd: 'Q2 2020',
-        aggregation: [60_000, 120_000],
-        change: {
-          ratio: 1,
-          amount: 60000,
-        },
-        products: [
-          {
-            id: 'Compute Engine',
-            aggregation: [58_000, 118_000],
-          },
-          {
-            id: 'Cloud Dataflow',
-            aggregation: [1200, 1500],
-          },
-          {
-            id: 'Cloud Storage',
-            aggregation: [800, 500],
-          },
-        ],
+    const projectGrowthData: ProjectGrowthData = {
+      project: 'example-project',
+      periodStart: 'Q2 2020',
+      periodEnd: 'Q3 2020',
+      aggregation: [60_000, 120_000],
+      change: {
+        ratio: 1,
+        amount: 60000,
       },
+      products: [
+        { id: 'Compute Engine', aggregation: [58_000, 118_000] },
+        { id: 'Cloud Dataflow', aggregation: [1200, 1500] },
+        { id: 'Cloud Storage', aggregation: [800, 500] },
+      ],
+    };
+
+    const unlabeledDataflowData: UnlabeledDataflowData = {
+      periodStart: '2020-09-01',
+      periodEnd: '2020-09-30',
+      labeledCost: 6_200,
+      unlabeledCost: 7_000,
+      projects: [
+        {
+          id: 'example-project-1',
+          unlabeledCost: 5_000,
+          labeledCost: 3_000,
+        },
+        {
+          id: 'example-project-2',
+          unlabeledCost: 2_000,
+          labeledCost: 3_200,
+        },
+      ],
+    };
+
+    const alerts: Alert[] = await this.request({ group }, [
+      new ProjectGrowthAlert(projectGrowthData),
+      new UnlabeledDataflowAlert(unlabeledDataflowData),
     ]);
 
     return alerts;