From f774c115dc02e9739f1f3e5d9330eb80c072fb07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stefan=20=C3=85lund?= Date: Fri, 17 Apr 2020 08:25:20 +0200 Subject: [PATCH] Extract TrendLine from Lighthouse plugin (#532) * Extract TrendLine from Lighthouse plugin * Create TrendLine.stories.tsx * Change lifecycle names * Made story example smaller * Review comment * Update TrendLine.tsx --- packages/core/package.json | 2 + .../Lifecycle/LifecycleAlpha.stories.tsx | 2 +- .../Lifecycle/LifecycleBeta.stories.tsx | 2 +- .../TrendLine/TrendLine.stories.tsx | 43 +++++++++++++++++++ .../components/TrendLine/TrendLine.test.tsx | 23 +++------- .../src/components/TrendLine/TrendLine.tsx | 5 ++- .../core/src/components/TrendLine/index.ts | 17 ++++++++ packages/core/src/index.ts | 1 + plugins/lighthouse/package.json | 4 +- .../components/AuditList/AuditListTable.tsx | 4 +- 10 files changed, 78 insertions(+), 25 deletions(-) create mode 100644 packages/core/src/components/TrendLine/TrendLine.stories.tsx rename plugins/lighthouse/src/components/CategoryTrendline/index.test.tsx => packages/core/src/components/TrendLine/TrendLine.test.tsx (77%) rename plugins/lighthouse/src/components/CategoryTrendline/index.tsx => packages/core/src/components/TrendLine/TrendLine.tsx (92%) create mode 100644 packages/core/src/components/TrendLine/index.ts diff --git a/packages/core/package.json b/packages/core/package.json index 609f00e2d0..651ac1006c 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -39,6 +39,7 @@ "react-dom": "^16.12.0", "react-helmet": "5.2.1", "react-router-dom": "^5.1.2", + "react-sparklines": "^1.7.0", "recompose": "0.30.0" }, "devDependencies": { @@ -49,6 +50,7 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", + "@types/react-sparklines": "^1.7.0", "react-router": "^5.1.2" }, "peerDependencies": { diff --git a/packages/core/src/components/Lifecycle/LifecycleAlpha.stories.tsx b/packages/core/src/components/Lifecycle/LifecycleAlpha.stories.tsx index 1b044fcd5f..072fb90a55 100644 --- a/packages/core/src/components/Lifecycle/LifecycleAlpha.stories.tsx +++ b/packages/core/src/components/Lifecycle/LifecycleAlpha.stories.tsx @@ -17,7 +17,7 @@ import React from 'react'; import { AlphaLabel } from './Lifecycle'; export default { - title: 'Alpha Lifecycle', + title: 'Lifecycle - Alpha', component: AlphaLabel, }; diff --git a/packages/core/src/components/Lifecycle/LifecycleBeta.stories.tsx b/packages/core/src/components/Lifecycle/LifecycleBeta.stories.tsx index b74171b5ea..f8cce2a562 100644 --- a/packages/core/src/components/Lifecycle/LifecycleBeta.stories.tsx +++ b/packages/core/src/components/Lifecycle/LifecycleBeta.stories.tsx @@ -17,7 +17,7 @@ import React from 'react'; import { BetaLabel } from './Lifecycle'; export default { - title: 'Beta Lifecycle', + title: 'Lifecycle - Beta', component: BetaLabel, }; diff --git a/packages/core/src/components/TrendLine/TrendLine.stories.tsx b/packages/core/src/components/TrendLine/TrendLine.stories.tsx new file mode 100644 index 0000000000..855b14207c --- /dev/null +++ b/packages/core/src/components/TrendLine/TrendLine.stories.tsx @@ -0,0 +1,43 @@ +/* + * Copyright 2020 Spotify AB + * + * 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 TrendLine from '.'; + +export default { + title: 'TrendLine', + component: TrendLine, +}; + +const width = 140; + +export const Default = () => ( +
+ +
+); + +export const TrendingUp = () => ( +
+ +
+); + +export const TrendingDown = () => ( +
+ +
+); diff --git a/plugins/lighthouse/src/components/CategoryTrendline/index.test.tsx b/packages/core/src/components/TrendLine/TrendLine.test.tsx similarity index 77% rename from plugins/lighthouse/src/components/CategoryTrendline/index.test.tsx rename to packages/core/src/components/TrendLine/TrendLine.test.tsx index c45db58b9e..985e5d2b31 100644 --- a/plugins/lighthouse/src/components/CategoryTrendline/index.test.tsx +++ b/packages/core/src/components/TrendLine/TrendLine.test.tsx @@ -15,18 +15,17 @@ */ /* eslint-disable jest/no-disabled-tests */ - import React from 'react'; import { render } from '@testing-library/react'; import { wrapInThemedTestApp } from '@backstage/test-utils'; -import CategoryTrendline from '.'; +import TrendLine from '.'; -describe('CategoryTrendline', () => { +describe('TrendLine', () => { describe('when no data is present', () => { it('renders null without throwing', () => { const rendered = render( - wrapInThemedTestApp(), + wrapInThemedTestApp(), ); expect(rendered.queryByTitle('sparkline')).not.toBeInTheDocument(); }); @@ -35,9 +34,7 @@ describe('CategoryTrendline', () => { describe('when one datapoint is present', () => { it('renders as a straight line', () => { const rendered = render( - wrapInThemedTestApp( - , - ), + wrapInThemedTestApp(), ); expect(rendered.getByTitle('sparkline')).toBeInTheDocument(); }); @@ -46,9 +43,7 @@ describe('CategoryTrendline', () => { describe.skip('when the data finishes above the success threshold', () => { it('renders with the correct color', () => { const rendered = render( - wrapInThemedTestApp( - , - ), + wrapInThemedTestApp(), ); expect(rendered.getByTitle('sparkline')).toBeInTheDocument(); }); @@ -57,9 +52,7 @@ describe('CategoryTrendline', () => { describe.skip('when the data finishes within the the warning threshold', () => { it('renders with the correct color', () => { const rendered = render( - wrapInThemedTestApp( - , - ), + wrapInThemedTestApp(), ); expect(rendered.getByTitle('sparkline')).toBeInTheDocument(); }); @@ -68,9 +61,7 @@ describe('CategoryTrendline', () => { describe.skip('when the data finishes within the the error threshold', () => { it('renders with the correct color', () => { const rendered = render( - wrapInThemedTestApp( - , - ), + wrapInThemedTestApp(), ); expect(rendered.getByTitle('sparkline')).toBeInTheDocument(); }); diff --git a/plugins/lighthouse/src/components/CategoryTrendline/index.tsx b/packages/core/src/components/TrendLine/TrendLine.tsx similarity index 92% rename from plugins/lighthouse/src/components/CategoryTrendline/index.tsx rename to packages/core/src/components/TrendLine/TrendLine.tsx index e3dbd186e0..3ab9b67e53 100644 --- a/plugins/lighthouse/src/components/CategoryTrendline/index.tsx +++ b/packages/core/src/components/TrendLine/TrendLine.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React, { FC } from 'react'; import { Sparklines, SparklinesLine, SparklinesProps } from 'react-sparklines'; import { useTheme } from '@material-ui/core'; @@ -26,7 +27,7 @@ function color(data: number[], theme: BackstageTheme): string | undefined { return theme.palette.status.error; } -const CategoryTrendline: FC = props => { +const Trendline: FC = props => { const theme = useTheme(); if (!props.data) return null; @@ -38,4 +39,4 @@ const CategoryTrendline: FC = props => { ); }; -export default CategoryTrendline; +export default Trendline; diff --git a/packages/core/src/components/TrendLine/index.ts b/packages/core/src/components/TrendLine/index.ts new file mode 100644 index 0000000000..168c6e6d3f --- /dev/null +++ b/packages/core/src/components/TrendLine/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2020 Spotify AB + * + * 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. + */ + +export { default } from './TrendLine'; diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 9153b9fa3b..a13146991c 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -31,6 +31,7 @@ export { default as Progress } from './components/Progress'; export { AlphaLabel, BetaLabel } from './components/Lifecycle'; export { default as SupportButton } from './components/SupportButton'; export { default as SortableTable } from './components/SortableTable'; +export { default as TrendLine } from './components/TrendLine'; export { FeatureCalloutCircular } from './components/FeatureDiscovery/FeatureCalloutCircular'; export * from './components/Status'; export { default as WarningPanel } from './components/WarningPanel'; diff --git a/plugins/lighthouse/package.json b/plugins/lighthouse/package.json index 442211a38c..d082b0be0f 100644 --- a/plugins/lighthouse/package.json +++ b/plugins/lighthouse/package.json @@ -13,8 +13,7 @@ "clean": "backstage-cli clean" }, "dependencies": { - "react-markdown": "^4.3.1", - "react-sparklines": "^1.7.0" + "react-markdown": "^4.3.1" }, "devDependencies": { "@backstage/cli": "^0.1.1-alpha.4", @@ -29,7 +28,6 @@ "@testing-library/user-event": "^7.1.2", "@types/jest": "^24.0.0", "@types/node": "^12.0.0", - "@types/react-sparklines": "^1.7.0", "@types/testing-library__jest-dom": "5.0.2", "jest-fetch-mock": "^3.0.3", "react": "^16.13.1", diff --git a/plugins/lighthouse/src/components/AuditList/AuditListTable.tsx b/plugins/lighthouse/src/components/AuditList/AuditListTable.tsx index 52f3eeb5e2..ba0e79f066 100644 --- a/plugins/lighthouse/src/components/AuditList/AuditListTable.tsx +++ b/plugins/lighthouse/src/components/AuditList/AuditListTable.tsx @@ -24,6 +24,7 @@ import { TableRow, } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; +import { TrendLine } from '@backstage/core'; import { Audit, @@ -32,7 +33,6 @@ import { Website, } from '../../api'; import { formatTime } from '../../utils'; -import CategoryTrendline from '../CategoryTrendline'; import AuditStatusIcon from '../AuditStatusIcon'; export const CATEGORIES: LighthouseCategoryId[] = [ @@ -132,7 +132,7 @@ export const AuditListTable: FC<{ items: Website[] }> = ({ items }) => { key={`${website.url}|${category}`} className={classes.sparklinesCell} > -