Merge branch 'master' into feature/yarn-clean

plugins/lighthouse/README.md

@@ -7,7 +7,7 @@ A frontend for [lighthouse-audit-service](https://github.com/spotify/lighthouse-
 ### Use cases
 
 Google's [Lighthouse](https://developers.google.com/web/tools/lighthouse) auditing tool for websites
-is a great open-source resource forbenchmarking and improving the accessibility, performance, SEO, and best practices of your site.
+is a great open-source resource for benchmarking and improving the accessibility, performance, SEO, and best practices of your site.
 At Spotify, we keep track of Lighthouse audit scores over time to look at trends and overall areas for investment.
 
 This plugin allows you to generate on-demand Lighthouse audits for websites, and to track the trends for the

plugins/lighthouse/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-lighthouse",
-  "version": "0.1.1-alpha.3",
+  "version": "0.1.1-alpha.4",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
@@ -17,10 +17,10 @@
     "react-sparklines": "^1.7.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.1.1-alpha.3",
-    "@backstage/core": "^0.1.1-alpha.3",
-    "@backstage/test-utils": "^0.1.1-alpha.3",
-    "@backstage/theme": "^0.1.1-alpha.3",
+    "@backstage/cli": "^0.1.1-alpha.4",
+    "@backstage/core": "^0.1.1-alpha.4",
+    "@backstage/test-utils": "^0.1.1-alpha.4",
+    "@backstage/theme": "^0.1.1-alpha.4",
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",

plugins/lighthouse/src/components/CategoryTrendline/index.tsx

@@ -15,22 +15,28 @@
  */
 import React, { FC } from 'react';
 import { Sparklines, SparklinesLine, SparklinesProps } from 'react-sparklines';
-import { COLORS } from '@backstage/theme';
+import { useTheme } from '@material-ui/core';
+import { BackstageTheme } from '@backstage/theme';
 
-function color(data: number[]): string | undefined {
+function color(
+  data: number[],
+  theme: typeof BackstageTheme,
+): string | undefined {
   const lastNum = data[data.length - 1];
   if (!lastNum) return undefined;
-  if (lastNum >= 0.9) return COLORS.STATUS.OK;
-  if (lastNum >= 0.5) return COLORS.STATUS.WARNING;
-  return COLORS.STATUS.ERROR;
+  if (lastNum >= 0.9) return theme.palette.status.ok;
+  if (lastNum >= 0.5) return theme.palette.status.warning;
+  return theme.palette.status.error;
 }
 
 const CategoryTrendline: FC<SparklinesProps & { title?: string }> = props => {
+  const theme = useTheme<typeof BackstageTheme>();
+
   if (!props.data) return null;
   return (
     <Sparklines width={120} height={30} min={0} max={1} {...props}>
       {props.title && <title>{props.title}</title>}
-      <SparklinesLine color={color(props.data)} />
+      <SparklinesLine color={color(props.data, theme)} />
     </Sparklines>
   );
 };

plugins/lighthouse/src/index.ts

@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 
-export { default } from './plugin';
+export { plugin } from './plugin';
 export * from './api';

plugins/lighthouse/src/plugin.test.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import plugin from './plugin';
+import { plugin } from './plugin';
 
 describe('lighthouse', () => {
   it('should export plugin', () => {

plugins/lighthouse/src/plugin.ts

@@ -19,7 +19,7 @@ import AuditList from './components/AuditList';
 import AuditView from './components/AuditView';
 import CreateAudit from './components/CreateAudit';
 
-export default createPlugin({
+export const plugin = createPlugin({
   id: 'lighthouse',
   register({ router }) {
     router.registerRoute('/lighthouse', AuditList);