From 5cf3f854d36b82fb4183025b3dfb9dad39af672e Mon Sep 17 00:00:00 2001 From: Marvin9 Date: Sun, 4 Oct 2020 17:55:43 +0530 Subject: [PATCH 01/21] feat: implement customPageTheme which includes core material-ui theming features & backstage pages theming features --- packages/theme/src/baseTheme.ts | 14 +++++++ packages/theme/src/pageTheme.ts | 66 +++++++++++++++++++++++++++++++++ packages/theme/src/themes.ts | 8 +++- packages/theme/src/types.ts | 21 +++++++++++ 4 files changed, 108 insertions(+), 1 deletion(-) create mode 100644 packages/theme/src/pageTheme.ts diff --git a/packages/theme/src/baseTheme.ts b/packages/theme/src/baseTheme.ts index 00a485bb41..a3fded7e04 100644 --- a/packages/theme/src/baseTheme.ts +++ b/packages/theme/src/baseTheme.ts @@ -19,6 +19,8 @@ import { darken, lighten } from '@material-ui/core/styles/colorManipulator'; import { Overrides } from '@material-ui/core/styles/overrides'; import { + BackstagePageTheme, + BackstagePageThemeOptions, BackstageTheme, BackstageThemeOptions, SimpleThemeOptions, @@ -242,3 +244,15 @@ export function createTheme(options: SimpleThemeOptions): BackstageTheme { const theme = { ...baseTheme, overrides }; return theme; } + +export function createPageTheme( + options: BackstagePageThemeOptions, +): BackstagePageTheme { + const baseTheme = createTheme(options); + const pageTheme = options.pageTheme; + + return { + pageTheme, + baseTheme, + }; +} diff --git a/packages/theme/src/pageTheme.ts b/packages/theme/src/pageTheme.ts new file mode 100644 index 0000000000..f86f3a6449 --- /dev/null +++ b/packages/theme/src/pageTheme.ts @@ -0,0 +1,66 @@ +/* + * 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 { PageTheme } from './types'; + +/* + # How to add a shape + 1. Get the svg shape from figma, should be ~1400 wide, ~400 high + and only the white->transparent mask, no colors. + 2. Run it through https://jakearchibald.github.io/svgomg/ + 3. Run that through https://github.com/tigt/mini-svg-data-uri + with something like https://npm.runkit.com/mini-svg-data-uri + 4. Wrap the output in `url("")` + 5. Give it a name and paste it into the `shapes` object below. +*/ +export const shapes: Record = { + wave: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='1368' height='401' x='0' y='0' maskUnits='userSpaceOnUse'%3e%3cpath fill='url(%23paint0_linear)' d='M437 116C223 116 112 0 112 0h1256v400c-82 0-225-21-282-109-112-175-436-175-649-175z'/%3e%3cpath fill='url(%23paint1_linear)' d='M1368 400V282C891-29 788 40 711 161 608 324 121 372 0 361v39h1368z'/%3e%3cpath fill='url(%23paint2_linear)' d='M1368 244v156H0V94c92-24 198-46 375 0l135 41c176 51 195 109 858 109z'/%3e%3cpath fill='url(%23paint3_linear)' d='M1252 400h116c-14-7-35-14-116-16-663-14-837-128-1013-258l-85-61C98 28 46 8 0 0v400h1252z'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M-172-98h1671v601H-172z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='602' x2='1093.5' y1='-960.5' y2='272' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='482' x2='480' y1='1058.5' y2='70.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='424' x2='446.1' y1='-587.5' y2='274.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint3_linear' x1='587' x2='349' y1='-1120.5' y2='341' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e")`, + wave2: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='1764' height='479' x='-229' y='-6' maskUnits='userSpaceOnUse'%3e%3cpath fill='url(%23paint0_linear)' d='M0 400h1350C1321 336 525 33 179-2c-345-34-395 236-408 402H0z'/%3e%3cpath fill='url(%23paint1_linear)' d='M1378 177v223H0V217s219 75 327 52C436 246 717-35 965 45s254 144 413 132z'/%3e%3cpath fill='url(%23paint2_linear)' d='M26 400l-78-16c-170 205-44-6-137-30l-4-1 4 1 137 30c37-45 89-110 159-201 399-514-45 238 1176-50 275-65 354-39 91 267H26z'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M0 0h1368v400H0z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='431' x2='397.3' y1='-599' y2='372.8' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='236.5' x2='446.6' y1='-586' y2='381.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='851.8' x2='640.4' y1='-867.2' y2='363.7' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e")`, + round: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='2269' height='1408' x='-610' y='-509' maskUnits='userSpaceOnUse'%3e%3ccircle cx='1212.8' cy='74.8' r='317.5' fill='url(%23paint0_linear)' transform='rotate(-52 1213 75)'/%3e%3ccircle cx='737.8' cy='445.8' r='317.5' fill='url(%23paint1_linear)' transform='rotate(-116 738 446)'/%3e%3ccircle cx='601.8' cy='52.8' r='418.6' fill='url(%23paint2_linear)' transform='rotate(-117 602 53)'/%3e%3ccircle cx='999.8' cy='364' r='389.1' fill='url(%23paint3_linear)' transform='rotate(31 1000 364)'/%3e%3cellipse cx='-109.2' cy='263.5' fill='url(%23paint4_linear)' rx='429.2' ry='465.8' transform='rotate(-85 -109 264)'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M0 0h1368v400H0z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='1301.2' x2='161.4' y1='-1879.7' y2='-969.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='826.2' x2='-313.6' y1='-1508.7' y2='-598.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='718.4' x2='-784.3' y1='-2524' y2='-1324.2' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint3_linear' x1='1108.2' x2='-288.6' y1='-2031.1' y2='-915.9' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint4_linear' x1='10.4' x2='-1626.5' y1='-2603.8' y2='-1399.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e")`, +}; + +export const colorVariants: Record = { + darkGrey: ['#171717', '#383838'], + marineBlue: ['#006D8F', '#0049A1'], + veryBlue: ['#0027AF', '#270094'], + rubyRed: ['#98002B', '#8D1134'], + toastyOrange: ['#BE2200', '#A41D00'], + purpleSky: ['#8912CA', '#3E00EA'], + eveningSea: ['#00FFF2', '#035355'], + teal: ['#005B4B'], + pinkSea: ['#C8077A', '#C2297D'], +}; + +// As the background shapes and colors are decorative, we place them onto +// the page as a css background-image instead of an html element of its own. +// Utility to not have to write colors and shapes twice. +export function genPageTheme(colors: string[], shape: string): PageTheme { + const gradientColors = colors.length === 1 ? [colors[0], colors[0]] : colors; + const gradient = `linear-gradient(90deg, ${gradientColors.join(', ')})`; + const backgroundImage = `${shape}, ${gradient}`; + + return { colors, shape, backgroundImage }; +} + +export const pageTheme: Record = { + home: genPageTheme(colorVariants.teal, shapes.wave), + documentation: genPageTheme(colorVariants.pinkSea, shapes.wave2), + tool: genPageTheme(colorVariants.purpleSky, shapes.round), + service: genPageTheme(colorVariants.marineBlue, shapes.wave), + website: genPageTheme(colorVariants.veryBlue, shapes.wave), + library: genPageTheme(colorVariants.rubyRed, shapes.wave), + other: genPageTheme(colorVariants.darkGrey, shapes.wave), + app: genPageTheme(colorVariants.toastyOrange, shapes.wave), +}; diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts index 0ec3304ac5..78a68c8f13 100644 --- a/packages/theme/src/themes.ts +++ b/packages/theme/src/themes.ts @@ -14,7 +14,8 @@ * limitations under the License. */ -import { createTheme } from './baseTheme'; +import { createTheme, createPageTheme } from './baseTheme'; +import { pageTheme } from './pageTheme'; import { yellow } from '@material-ui/core/colors'; export const lightTheme = createTheme({ @@ -132,3 +133,8 @@ export const darkTheme = createTheme({ }, }, }); + +export const customPageTheme = createPageTheme({ + pageTheme, + palette: lightTheme.palette, +}); diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index 1d244f8cd4..3d3943392a 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -87,3 +87,24 @@ export type SimpleThemeOptions = { palette: BackstagePaletteOptions; fontFamily?: string; }; + +export type PageTheme = { + colors: string[]; + shape: string; + backgroundImage: string; +}; + +export type BackstagePage = Record; + +export interface BackstagePageThemeOptions extends SimpleThemeOptions { + pageTheme: BackstagePage; +} + +export interface BackstagePageTheme { + pageTheme: BackstagePage; + baseTheme: BackstageTheme; +} + +export interface BackstagePageThemeConsumer extends BackstageTheme { + pageTheme: PageTheme; +} From 26cfd3e2ca28b200a6f0eddcb567db8a73e4d48a Mon Sep 17 00:00:00 2001 From: Marvin9 Date: Sun, 4 Oct 2020 17:58:09 +0530 Subject: [PATCH 02/21] feat: remove old PageTheme provider & add new implemented functionality to provide theme[using ThemeProvider] --- packages/core/src/layout/Page/Page.stories.tsx | 6 +++--- packages/core/src/layout/Page/Page.tsx | 17 +++++++++-------- packages/core/src/layout/Page/index.ts | 2 -- 3 files changed, 12 insertions(+), 13 deletions(-) diff --git a/packages/core/src/layout/Page/Page.stories.tsx b/packages/core/src/layout/Page/Page.stories.tsx index 8fd779196d..427dc644d9 100644 --- a/packages/core/src/layout/Page/Page.stories.tsx +++ b/packages/core/src/layout/Page/Page.stories.tsx @@ -15,13 +15,13 @@ */ import React, { useState } from 'react'; +import { customPageTheme } from '@backstage/theme'; import { Header, Page, HeaderLabel, ContentHeader, Content, - pageTheme, InfoCard, HeaderTabs, } from '../'; @@ -196,7 +196,7 @@ export const PluginWithData = () => { const [selectedTab, setSelectedTab] = useState(2); return (
- + { export const PluginWithTable = () => { return (
- + diff --git a/packages/core/src/layout/Page/Page.tsx b/packages/core/src/layout/Page/Page.tsx index a5f5e4fd2b..f4dc4888ed 100644 --- a/packages/core/src/layout/Page/Page.tsx +++ b/packages/core/src/layout/Page/Page.tsx @@ -15,10 +15,8 @@ */ import React, { FC } from 'react'; -import { PageTheme, pageTheme } from './PageThemeProvider'; -import { makeStyles } from '@material-ui/core'; - -export const PageThemeContext = React.createContext(pageTheme.home); +import { customPageTheme, PageTheme } from '@backstage/theme'; +import { makeStyles, ThemeProvider } from '@material-ui/core'; const useStyles = makeStyles(() => ({ root: { @@ -32,14 +30,17 @@ const useStyles = makeStyles(() => ({ })); type Props = { - theme?: PageTheme; + pageTheme?: PageTheme; }; -export const Page: FC = ({ theme = pageTheme.home, children }) => { +export const Page: FC = ({ + pageTheme = customPageTheme.pageTheme.home, + children, +}) => { const classes = useStyles(); return ( - +
{children}
- + ); }; diff --git a/packages/core/src/layout/Page/index.ts b/packages/core/src/layout/Page/index.ts index 000a565c83..987aee5cdb 100644 --- a/packages/core/src/layout/Page/index.ts +++ b/packages/core/src/layout/Page/index.ts @@ -15,5 +15,3 @@ */ export { Page } from './Page'; -export { pageTheme } from './PageThemeProvider'; -export type { PageTheme } from './PageThemeProvider'; From 317bb8b6543cbc3b66dc68587d3cb636647d2f88 Mon Sep 17 00:00:00 2001 From: Marvin9 Date: Sun, 4 Oct 2020 17:59:21 +0530 Subject: [PATCH 03/21] chore: remove old Page theme Provider file --- .../core/src/layout/Page/PageThemeProvider.ts | 72 ------------------- 1 file changed, 72 deletions(-) delete mode 100644 packages/core/src/layout/Page/PageThemeProvider.ts diff --git a/packages/core/src/layout/Page/PageThemeProvider.ts b/packages/core/src/layout/Page/PageThemeProvider.ts deleted file mode 100644 index 57411c8786..0000000000 --- a/packages/core/src/layout/Page/PageThemeProvider.ts +++ /dev/null @@ -1,72 +0,0 @@ -/* - * 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 type PageTheme = { - colors: string[]; - shape: string; - backgroundImage: string; -}; - -/* - # How to add a shape - 1. Get the svg shape from figma, should be ~1400 wide, ~400 high - and only the white->transparent mask, no colors. - 2. Run it through https://jakearchibald.github.io/svgomg/ - 3. Run that through https://github.com/tigt/mini-svg-data-uri - with something like https://npm.runkit.com/mini-svg-data-uri - 4. Wrap the output in `url("")` - 5. Give it a name and paste it into the `shapes` object below. - -*/ -export const shapes: Record = { - wave: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='1368' height='401' x='0' y='0' maskUnits='userSpaceOnUse'%3e%3cpath fill='url(%23paint0_linear)' d='M437 116C223 116 112 0 112 0h1256v400c-82 0-225-21-282-109-112-175-436-175-649-175z'/%3e%3cpath fill='url(%23paint1_linear)' d='M1368 400V282C891-29 788 40 711 161 608 324 121 372 0 361v39h1368z'/%3e%3cpath fill='url(%23paint2_linear)' d='M1368 244v156H0V94c92-24 198-46 375 0l135 41c176 51 195 109 858 109z'/%3e%3cpath fill='url(%23paint3_linear)' d='M1252 400h116c-14-7-35-14-116-16-663-14-837-128-1013-258l-85-61C98 28 46 8 0 0v400h1252z'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M-172-98h1671v601H-172z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='602' x2='1093.5' y1='-960.5' y2='272' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='482' x2='480' y1='1058.5' y2='70.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='424' x2='446.1' y1='-587.5' y2='274.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint3_linear' x1='587' x2='349' y1='-1120.5' y2='341' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e")`, - wave2: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='1764' height='479' x='-229' y='-6' maskUnits='userSpaceOnUse'%3e%3cpath fill='url(%23paint0_linear)' d='M0 400h1350C1321 336 525 33 179-2c-345-34-395 236-408 402H0z'/%3e%3cpath fill='url(%23paint1_linear)' d='M1378 177v223H0V217s219 75 327 52C436 246 717-35 965 45s254 144 413 132z'/%3e%3cpath fill='url(%23paint2_linear)' d='M26 400l-78-16c-170 205-44-6-137-30l-4-1 4 1 137 30c37-45 89-110 159-201 399-514-45 238 1176-50 275-65 354-39 91 267H26z'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M0 0h1368v400H0z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='431' x2='397.3' y1='-599' y2='372.8' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='236.5' x2='446.6' y1='-586' y2='381.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='851.8' x2='640.4' y1='-867.2' y2='363.7' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e")`, - round: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='2269' height='1408' x='-610' y='-509' maskUnits='userSpaceOnUse'%3e%3ccircle cx='1212.8' cy='74.8' r='317.5' fill='url(%23paint0_linear)' transform='rotate(-52 1213 75)'/%3e%3ccircle cx='737.8' cy='445.8' r='317.5' fill='url(%23paint1_linear)' transform='rotate(-116 738 446)'/%3e%3ccircle cx='601.8' cy='52.8' r='418.6' fill='url(%23paint2_linear)' transform='rotate(-117 602 53)'/%3e%3ccircle cx='999.8' cy='364' r='389.1' fill='url(%23paint3_linear)' transform='rotate(31 1000 364)'/%3e%3cellipse cx='-109.2' cy='263.5' fill='url(%23paint4_linear)' rx='429.2' ry='465.8' transform='rotate(-85 -109 264)'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M0 0h1368v400H0z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='1301.2' x2='161.4' y1='-1879.7' y2='-969.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='826.2' x2='-313.6' y1='-1508.7' y2='-598.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='718.4' x2='-784.3' y1='-2524' y2='-1324.2' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint3_linear' x1='1108.2' x2='-288.6' y1='-2031.1' y2='-915.9' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint4_linear' x1='10.4' x2='-1626.5' y1='-2603.8' y2='-1399.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e")`, -}; - -export const colorVariants: Record = { - darkGrey: ['#171717', '#383838'], - marineBlue: ['#006D8F', '#0049A1'], - veryBlue: ['#0027AF', '#270094'], - rubyRed: ['#98002B', '#8D1134'], - toastyOrange: ['#BE2200', '#A41D00'], - purpleSky: ['#8912CA', '#3E00EA'], - eveningSea: ['#00FFF2', '#035355'], - teal: ['#005B4B'], - pinkSea: ['#C8077A', '#C2297D'], -}; - -export const pageTheme: Record = { - home: genTheme(colorVariants.teal, shapes.wave), - documentation: genTheme(colorVariants.pinkSea, shapes.wave2), - tool: genTheme(colorVariants.purpleSky, shapes.round), - service: genTheme(colorVariants.marineBlue, shapes.wave), - website: genTheme(colorVariants.veryBlue, shapes.wave), - library: genTheme(colorVariants.rubyRed, shapes.wave), - other: genTheme(colorVariants.darkGrey, shapes.wave), - app: genTheme(colorVariants.toastyOrange, shapes.wave), -}; - -// As the background shapes and colors are decorative, we place them onto -// the page as a css background-image instead of an html element of its own. -// Utility to not have to write colors and shapes twice. -function genTheme(colors: string[], shape: string) { - const gradientColors = colors.length === 1 ? [colors[0], colors[0]] : colors; - const gradient = `linear-gradient(90deg, ${gradientColors.join(', ')})`; - const backgroundImage = `${shape}, ${gradient}`; - - return { colors, shape, backgroundImage }; -} From 3a82aaef7ab693bc02f1bc5911c4d955713f51f9 Mon Sep 17 00:00:00 2001 From: Marvin9 Date: Sun, 4 Oct 2020 18:02:00 +0530 Subject: [PATCH 04/21] feat: Add new theme consumer in Header [use useTheme consumer provided in material-ui] --- .../core/src/layout/Header/Header.stories.tsx | 19 ++++++++++--------- packages/core/src/layout/Header/Header.tsx | 14 +++++++------- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/packages/core/src/layout/Header/Header.stories.tsx b/packages/core/src/layout/Header/Header.stories.tsx index 39b9133c0a..cc0276224a 100644 --- a/packages/core/src/layout/Header/Header.stories.tsx +++ b/packages/core/src/layout/Header/Header.stories.tsx @@ -13,10 +13,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { customPageTheme } from '@backstage/theme'; import React from 'react'; import { Header } from '.'; import { HeaderLabel } from '../HeaderLabel'; -import { Page, pageTheme } from '../Page'; +import { Page } from '../Page'; export default { title: 'Header', @@ -32,7 +33,7 @@ const labels = ( ); export const Home = () => ( - +
{labels}
@@ -46,7 +47,7 @@ export const HomeWithSubtitle = () => ( ); export const Tool = () => ( - +
{labels}
@@ -54,7 +55,7 @@ export const Tool = () => ( ); export const Service = () => ( - +
{labels}
@@ -62,7 +63,7 @@ export const Service = () => ( ); export const Website = () => ( - +
{labels}
@@ -70,7 +71,7 @@ export const Website = () => ( ); export const Library = () => ( - +
{labels}
@@ -78,7 +79,7 @@ export const Library = () => ( ); export const App = () => ( - +
{labels}
@@ -86,7 +87,7 @@ export const App = () => ( ); export const Documentation = () => ( - +
{labels}
@@ -94,7 +95,7 @@ export const Documentation = () => ( ); export const Other = () => ( - +
{labels}
diff --git a/packages/core/src/layout/Header/Header.tsx b/packages/core/src/layout/Header/Header.tsx index 6b9ea05245..dc71fe333b 100644 --- a/packages/core/src/layout/Header/Header.tsx +++ b/packages/core/src/layout/Header/Header.tsx @@ -14,12 +14,10 @@ * limitations under the License. */ -import React, { ReactNode, CSSProperties, FC, useContext } from 'react'; +import React, { ReactNode, CSSProperties, FC } from 'react'; import { Helmet } from 'react-helmet'; -import { Typography, Tooltip, makeStyles } from '@material-ui/core'; -import { BackstageTheme } from '@backstage/theme'; - -import { PageThemeContext } from '../Page/Page'; +import { Typography, Tooltip, makeStyles, useTheme } from '@material-ui/core'; +import { BackstageTheme, BackstagePageThemeConsumer } from '@backstage/theme'; const useStyles = makeStyles( theme => ({ @@ -163,8 +161,10 @@ export const Header: FC = ({ type, typeLink, }) => { - const theme = useContext(PageThemeContext); - const classes = useStyles({ backgroundImage: theme.backgroundImage }); + const theme = useTheme(); + const classes = useStyles({ + backgroundImage: theme.pageTheme.backgroundImage, + }); const documentTitle = pageTitleOverride || title; const pageTitle = title || pageTitleOverride; const titleTemplate = `${documentTitle} | %s | Backstage`; From e2564645e5751d684b3b528e90011518eee6c376 Mon Sep 17 00:00:00 2001 From: Marvin9 Date: Sun, 4 Oct 2020 18:03:50 +0530 Subject: [PATCH 05/21] feat: Replace old page theme props with new ones --- .../components/ApiEntityPage/ApiEntityPage.tsx | 8 ++++---- .../ApiExplorerPage/ApiExplorerLayout.tsx | 5 +++-- .../src/components/CatalogPage/CatalogLayout.tsx | 4 ++-- .../EntityPageLayout/EntityPageLayout.tsx | 15 ++++----------- .../AlertInstructionsLayout.tsx | 5 +++-- .../CostInsightsLayout/CostInsightsLayout.tsx | 6 +++--- .../explore/src/components/ExplorePluginPage.tsx | 5 ++--- .../components/NewProjectPage/NewProjectPage.tsx | 4 ++-- .../ProjectDetailsPage/ProjectDetailsPage.tsx | 5 ++--- .../ProjectListPage/ProjectListPage.tsx | 5 ++--- .../src/components/ClusterList/ClusterList.tsx | 4 ++-- .../src/components/ClusterPage/ClusterPage.tsx | 5 ++--- .../components/ProfileCatalog/ProfileCatalog.tsx | 4 ++-- .../src/components/GraphiQLPage/GraphiQLPage.tsx | 5 ++--- .../KubernetesContent/KubernetesContent.tsx | 4 ++-- .../lighthouse/src/components/AuditList/index.tsx | 5 ++--- .../lighthouse/src/components/AuditView/index.tsx | 4 ++-- .../src/components/CreateAudit/index.tsx | 4 ++-- .../NewRelicComponent/NewRelicComponent.tsx | 4 ++-- .../RegisterComponentPage.tsx | 4 ++-- .../src/components/RollbarHome/RollbarHome.tsx | 5 +++-- .../RollbarProjectPage/RollbarProjectPage.tsx | 5 +++-- .../components/ScaffolderPage/ScaffolderPage.tsx | 4 ++-- .../src/components/TemplateCard/TemplateCard.tsx | 6 ++++-- .../src/components/TemplatePage/TemplatePage.tsx | 4 ++-- .../SentryPluginPage/SentryPluginPage.tsx | 4 ++-- plugins/tech-radar/src/components/RadarPage.tsx | 4 ++-- .../src/reader/components/TechDocsHome.tsx | 8 ++++---- .../src/reader/components/TechDocsPage.tsx | 5 +++-- .../src/components/WelcomePage/WelcomePage.tsx | 4 ++-- 30 files changed, 74 insertions(+), 80 deletions(-) diff --git a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx index b7e9996cc0..edfc3ab08b 100644 --- a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx +++ b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx @@ -20,11 +20,10 @@ import { errorApiRef, Header, Page, - pageTheme, - PageTheme, Progress, useApi, } from '@backstage/core'; +import { customPageTheme, PageTheme } from '@backstage/theme'; import { catalogApiRef } from '@backstage/plugin-catalog'; import { Box } from '@material-ui/core'; import { Alert } from '@material-ui/lab'; @@ -54,9 +53,10 @@ function headerProps( }; } +// REUSABLE IN plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx export const getPageTheme = (entity?: Entity): PageTheme => { const themeKey = entity?.spec?.type?.toString() ?? 'home'; - return pageTheme[themeKey] ?? pageTheme.home; + return customPageTheme.pageTheme[themeKey] ?? customPageTheme.pageTheme.home; }; type EntityPageTitleProps = { @@ -107,7 +107,7 @@ export const ApiEntityPage = () => { ); return ( - +
} pageTitleOverride={headerTitle} diff --git a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx index a111007278..53b50f1826 100644 --- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx @@ -14,7 +14,8 @@ * limitations under the License. */ -import { Header, Page, pageTheme } from '@backstage/core'; +import { Header, Page } from '@backstage/core'; +import { customPageTheme } from '@backstage/theme'; import React from 'react'; type Props = { @@ -23,7 +24,7 @@ type Props = { export const ApiExplorerLayout = ({ children }: Props) => { return ( - +
{ const userId = useApi(identityApiRef).getUserId(); return ( - +
{ const themeKey = entity?.spec?.type?.toString() ?? 'home'; - return pageTheme[themeKey] ?? pageTheme.home; + return customPageTheme.pageTheme[themeKey] ?? customPageTheme.pageTheme.home; }; const EntityPageTitle = ({ @@ -100,7 +93,7 @@ export const EntityPageLayout = ({ const showRemovalDialog = () => setConfirmationDialogOpen(true); return ( - +
} pageTitleOverride={headerTitle} diff --git a/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx b/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx index 0a422c335a..c0777fc844 100644 --- a/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx +++ b/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx @@ -14,10 +14,11 @@ * limitations under the License. */ +import { customPageTheme } from '@backstage/theme'; import React, { ReactNode } from 'react'; import { Box, Button, Container, makeStyles } from '@material-ui/core'; import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; -import { Header, Page, pageTheme } from '@backstage/core'; +import { Header, Page } from '@backstage/core'; import { CostInsightsThemeProvider } from '../CostInsightsPage/CostInsightsThemeProvider'; const useStyles = makeStyles(theme => ({ @@ -39,7 +40,7 @@ const AlertInstructionsLayout = ({ const classes = useStyles(); return ( - +
diff --git a/plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx b/plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx index 61bf7ac22f..c95f624bbe 100644 --- a/plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx +++ b/plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx @@ -13,10 +13,10 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - +import { customPageTheme } from '@backstage/theme'; import React from 'react'; import { makeStyles } from '@material-ui/core'; -import { Header, Page, pageTheme } from '@backstage/core'; +import { Header, Page } from '@backstage/core'; import { Group } from '../../types'; import CostInsightsTabs from '../CostInsightsTabs'; @@ -41,7 +41,7 @@ type CostInsightsLayoutProps = { const CostInsightsLayout = ({ groups, children }: CostInsightsLayoutProps) => { const classes = useStyles(); return ( - +
(theme => ({ container: { @@ -117,7 +116,7 @@ const toolsCards = [ export const ExplorePluginPage = () => { const classes = useStyles(); return ( - +
{ return ( - +
{labels}
diff --git a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx index 3dfb4e886b..e310c27c68 100644 --- a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx +++ b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx @@ -13,14 +13,13 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - +import { customPageTheme } from '@backstage/theme'; import { Content, ContentHeader, Header, HeaderLabel, Page, - pageTheme, SupportButton, useApi, WarningPanel, @@ -149,7 +148,7 @@ const labels = ( export const ProjectDetailsPage = () => { return ( - +
{labels}
diff --git a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx index 542d03d5fd..5a404dbb01 100644 --- a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx +++ b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx @@ -15,7 +15,7 @@ */ // NEEDS WORK - +import { customPageTheme } from '@backstage/theme'; import { Content, ContentHeader, @@ -23,7 +23,6 @@ import { HeaderLabel, Link, Page, - pageTheme, SupportButton, useApi, WarningPanel, @@ -136,7 +135,7 @@ const PageContents = () => { export const ProjectListPage = () => { return ( - +
{labels}
diff --git a/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx b/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx index baab018415..8926ed3260 100644 --- a/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx +++ b/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx @@ -14,6 +14,7 @@ * limitations under the License. */ +import { customPageTheme } from '@backstage/theme'; import React, { FC, useState } from 'react'; import { Content, @@ -21,7 +22,6 @@ import { Header, SupportButton, Page, - pageTheme, Progress, HeaderLabel, useApi, @@ -91,7 +91,7 @@ const ClusterList: FC<{}> = () => { } return ( - +
diff --git a/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx b/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx index b2d62e8650..d51fb7656e 100644 --- a/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx +++ b/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx @@ -13,13 +13,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - +import { customPageTheme } from '@backstage/theme'; import React, { FC, useEffect, useState } from 'react'; import { Content, Header, Page, - pageTheme, Table, Progress, HeaderLabel, @@ -85,7 +84,7 @@ const ClusterPage: FC<{}> = () => { }, [pollingLog, api, params, githubAuth, githubAccessToken, githubUsername]); return ( - +
diff --git a/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx b/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx index a5125fb006..078e1b7601 100644 --- a/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx +++ b/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx @@ -14,11 +14,11 @@ * limitations under the License. */ +import { customPageTheme } from '@backstage/theme'; import React, { FC, useEffect, useState } from 'react'; import { Header, Page, - pageTheme, Content, ContentHeader, HeaderLabel, @@ -259,7 +259,7 @@ const ProfileCatalog: FC<{}> = () => { ]; return ( - +
{ } return ( - +
diff --git a/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx b/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx index 6119884c43..381b942f3d 100644 --- a/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx +++ b/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx @@ -14,13 +14,13 @@ * limitations under the License. */ +import { customPageTheme } from '@backstage/theme'; import React, { ReactElement, useEffect, useState } from 'react'; import { Grid, TabProps } from '@material-ui/core'; import { CardTab, Content, Page, - pageTheme, Progress, TabbedCard, useApi, @@ -120,7 +120,7 @@ export const KubernetesContent = ({ entity }: KubernetesContentProps) => { kubernetesObjects?.items.filter(r => r.errors.length > 0) ?? []; return ( - + {kubernetesObjects === undefined && error === undefined && ( diff --git a/plugins/lighthouse/src/components/AuditList/index.tsx b/plugins/lighthouse/src/components/AuditList/index.tsx index a75bb25a0d..9c38e27fe3 100644 --- a/plugins/lighthouse/src/components/AuditList/index.tsx +++ b/plugins/lighthouse/src/components/AuditList/index.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - +import { customPageTheme } from '@backstage/theme'; import React, { useState, useMemo, FC, ReactNode } from 'react'; import { useLocalStorage, useAsync } from 'react-use'; import { useNavigate } from 'react-router-dom'; @@ -28,7 +28,6 @@ import { ContentHeader, HeaderLabel, Progress, - pageTheme, useApi, } from '@backstage/core'; @@ -95,7 +94,7 @@ const AuditList: FC<{}> = () => { } return ( - +
= () => { } return ( - +
= () => { ]); return ( - +
= () => ( - +
diff --git a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx index 933b67060a..5e4da3fc35 100644 --- a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx +++ b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx @@ -14,12 +14,12 @@ * limitations under the License. */ +import { customPageTheme } from '@backstage/theme'; import React, { useState } from 'react'; import { Grid, makeStyles } from '@material-ui/core'; import { InfoCard, Page, - pageTheme, Content, useApi, errorApiRef, @@ -113,7 +113,7 @@ export const RegisterComponentPage = ({ }; return ( - +
diff --git a/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx b/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx index d09c2054b1..9f0deca967 100644 --- a/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx +++ b/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx @@ -14,8 +14,9 @@ * limitations under the License. */ +import { customPageTheme } from '@backstage/theme'; import React from 'react'; -import { Content, Header, Page, pageTheme } from '@backstage/core'; +import { Content, Header, Page } from '@backstage/core'; import { RollbarProjectTable } from '../RollbarProjectTable/RollbarProjectTable'; import { useRollbarEntities } from '../../hooks/useRollbarEntities'; @@ -23,7 +24,7 @@ export const RollbarHome = () => { const { entities, loading, error } = useRollbarEntities(); return ( - +
{ const { entity } = useCatalogEntity(); return ( - +
diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx index b5bdaaef4a..1bd43ded44 100644 --- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx +++ b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx @@ -14,6 +14,7 @@ * limitations under the License. */ +import { customPageTheme } from '@backstage/theme'; import { TemplateEntityV1alpha1 } from '@backstage/catalog-model'; import { Content, @@ -22,7 +23,6 @@ import { Header, Lifecycle, Page, - pageTheme, Progress, SupportButton, useApi, @@ -66,7 +66,7 @@ export const ScaffolderPage = () => { }, [error, errorApi]); return ( - +
{ - const theme = pageTheme[type] ?? pageTheme.other; + const theme = + customPageTheme.pageTheme[type] ?? customPageTheme.pageTheme.other; const classes = useStyles({ backgroundImage: theme.backgroundImage }); const href = generatePath(templateRoute.path, { templateName: name }); diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx index e68c795bd6..5067f7963d 100644 --- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx +++ b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { customPageTheme } from '@backstage/theme'; import { TemplateEntityV1alpha1 } from '@backstage/catalog-model'; import { Content, @@ -22,7 +23,6 @@ import { Lifecycle, Page, useApi, - pageTheme, } from '@backstage/core'; import { catalogApiRef } from '@backstage/plugin-catalog'; import { LinearProgress } from '@material-ui/core'; @@ -145,7 +145,7 @@ export const TemplatePage = () => { } return ( - +
= () => { const sentryProjectId = 'sample-sentry-project-id'; return ( - +
diff --git a/plugins/tech-radar/src/components/RadarPage.tsx b/plugins/tech-radar/src/components/RadarPage.tsx index 519c9afeee..58dcaec9af 100644 --- a/plugins/tech-radar/src/components/RadarPage.tsx +++ b/plugins/tech-radar/src/components/RadarPage.tsx @@ -14,6 +14,7 @@ * limitations under the License. */ +import { customPageTheme } from '@backstage/theme'; import React from 'react'; import { Grid } from '@material-ui/core'; import { @@ -23,7 +24,6 @@ import { Header, HeaderLabel, SupportButton, - pageTheme, } from '@backstage/core'; import RadarComponent from '../components/RadarComponent'; import { TechRadarComponentProps } from '../api'; @@ -40,7 +40,7 @@ export const RadarPage = ({ pageTitle, ...props }: TechRadarPageProps): JSX.Element => ( - +
diff --git a/plugins/techdocs/src/reader/components/TechDocsHome.tsx b/plugins/techdocs/src/reader/components/TechDocsHome.tsx index c478a52127..11211e713c 100644 --- a/plugins/techdocs/src/reader/components/TechDocsHome.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsHome.tsx @@ -14,6 +14,7 @@ * limitations under the License. */ +import { customPageTheme } from '@backstage/theme'; import React from 'react'; import { useAsync } from 'react-use'; import { useNavigate, generatePath } from 'react-router-dom'; @@ -24,7 +25,6 @@ import { useApi, Content, Page, - pageTheme, Header, } from '@backstage/core'; import { catalogApiRef } from '@backstage/plugin-catalog'; @@ -43,7 +43,7 @@ export const TechDocsHome = () => { if (loading) { return ( - +
{ if (error) { return ( - +
{ } return ( - +
{ }; return ( - + { const profile = { givenName: '' }; return ( - +
Date: Sun, 4 Oct 2020 18:05:16 +0530 Subject: [PATCH 06/21] chore: update new consumer variables in example md file & update in handlebars template --- .../docs/tutorials/quickstart-app-plugin/ExampleComponent.md | 3 ++- .../src/components/ExampleComponent/ExampleComponent.tsx.hbs | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md b/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md index 855608c8b1..ed4bfc8012 100644 --- a/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md +++ b/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md @@ -3,6 +3,7 @@ ExampleComponent.tsx reference ```tsx +import { customPageTheme } from '@backstage/theme'; import React, { FC } from 'react'; import { Typography, Grid } from '@material-ui/core'; import { @@ -25,7 +26,7 @@ const ExampleComponent: FC<{}> = () => { const profile = identityApi.getProfile(); return ( - +
= () => ( - +
From 773e521301bcbeb1958a15ef9da2f226e461372f Mon Sep 17 00:00:00 2001 From: Marvin9 Date: Sun, 4 Oct 2020 20:53:18 +0530 Subject: [PATCH 07/21] fix: e2e, storybook & unit tests Header component required ThemeProvider as wrapper to work properly --- .../ExampleComponent/ExampleComponent.tsx.hbs | 1 - .../core/src/layout/Header/Header.stories.tsx | 8 +- .../core/src/layout/Header/Header.test.tsx | 86 +++++++++++++------ 3 files changed, 67 insertions(+), 28 deletions(-) diff --git a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs index 5b15ab0c70..a050ccd2ec 100644 --- a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs +++ b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs @@ -5,7 +5,6 @@ import { InfoCard, Header, Page, - pageTheme, Content, ContentHeader, HeaderLabel, diff --git a/packages/core/src/layout/Header/Header.stories.tsx b/packages/core/src/layout/Header/Header.stories.tsx index cc0276224a..b902a709cf 100644 --- a/packages/core/src/layout/Header/Header.stories.tsx +++ b/packages/core/src/layout/Header/Header.stories.tsx @@ -41,9 +41,11 @@ export const Home = () => ( ); export const HomeWithSubtitle = () => ( -
- {labels} -
+ +
+ {labels} +
+ ); export const Tool = () => ( diff --git a/packages/core/src/layout/Header/Header.test.tsx b/packages/core/src/layout/Header/Header.test.tsx index 5d28c6633f..00c5bfa2bd 100644 --- a/packages/core/src/layout/Header/Header.test.tsx +++ b/packages/core/src/layout/Header/Header.test.tsx @@ -15,8 +15,10 @@ */ import React from 'react'; -import { render } from '@testing-library/react'; +import { act, render, RenderResult } from '@testing-library/react'; import { wrapInTestApp } from '@backstage/test-utils'; +import { ThemeProvider } from '@material-ui/core'; +import { customPageTheme } from '@backstage/theme'; import { Header } from './Header'; jest.mock('react-helmet', () => { @@ -25,37 +27,73 @@ jest.mock('react-helmet', () => { }; }); +const ThemeProviderWrapper: React.FC = ({ children }) => ( + + {children} + +); + describe('
', () => { - it('should render with title', () => { - const rendered = render(wrapInTestApp(
)); - rendered.getByText('Title'); + it('should render with title', async () => { + let rendered: RenderResult | undefined; + await act(async () => { + rendered = render(wrapInTestApp(
), { + wrapper: ThemeProviderWrapper, + }); + }); + rendered?.getByText('Title'); }); - it('should set document title', () => { - const rendered = render(wrapInTestApp(
)); - rendered.getByText('Title1'); - rendered.getByText('defaultTitle: Title1 | Backstage'); + it('should set document title', async () => { + let rendered: RenderResult | undefined; + await act(async () => { + rendered = render(wrapInTestApp(
), { + wrapper: ThemeProviderWrapper, + }); + }); + rendered?.getByText('Title1'); + rendered?.getByText('defaultTitle: Title1 | Backstage'); }); - it('should override document title', () => { - const rendered = render( - wrapInTestApp(
), - ); - rendered.getByText('Title1'); - rendered.getByText('defaultTitle: Title2 | Backstage'); + it('should override document title', async () => { + let rendered: RenderResult | undefined; + await act(async () => { + rendered = render( + wrapInTestApp(
), + { + wrapper: ThemeProviderWrapper, + }, + ); + }); + rendered?.getByText('Title1'); + rendered?.getByText('defaultTitle: Title2 | Backstage'); }); - it('should have subtitle', () => { - const rendered = render( - wrapInTestApp(
), - ); - rendered.getByText('Subtitle'); + it('should have subtitle', async () => { + let rendered: RenderResult | undefined; + await act(async () => { + rendered = render( + wrapInTestApp(
), + { + wrapper: ThemeProviderWrapper, + }, + ); + }); + rendered?.getByText('Subtitle'); }); - it('should have type rendered', () => { - const rendered = render( - wrapInTestApp(
), - ); - rendered.getByText('tool'); + it('should have type rendered', async () => { + let rendered: RenderResult | undefined; + await act(async () => { + rendered = render(wrapInTestApp(
), { + wrapper: ThemeProviderWrapper, + }); + }); + rendered?.getByText('tool'); }); }); From fd842a09482439e3db3e33bc92fbecc73b77e8da Mon Sep 17 00:00:00 2001 From: Marvin9 Date: Sun, 4 Oct 2020 22:00:05 +0530 Subject: [PATCH 08/21] chore: use home as default pageTheme to reduce complexity --- .../core/src/layout/Header/Header.stories.tsx | 8 +- .../core/src/layout/Header/Header.test.tsx | 76 +++++-------------- packages/core/src/layout/Header/Header.tsx | 10 ++- 3 files changed, 30 insertions(+), 64 deletions(-) diff --git a/packages/core/src/layout/Header/Header.stories.tsx b/packages/core/src/layout/Header/Header.stories.tsx index b902a709cf..cc0276224a 100644 --- a/packages/core/src/layout/Header/Header.stories.tsx +++ b/packages/core/src/layout/Header/Header.stories.tsx @@ -41,11 +41,9 @@ export const Home = () => ( ); export const HomeWithSubtitle = () => ( - -
- {labels} -
- +
+ {labels} +
); export const Tool = () => ( diff --git a/packages/core/src/layout/Header/Header.test.tsx b/packages/core/src/layout/Header/Header.test.tsx index 00c5bfa2bd..e5dc7fec4d 100644 --- a/packages/core/src/layout/Header/Header.test.tsx +++ b/packages/core/src/layout/Header/Header.test.tsx @@ -15,10 +15,8 @@ */ import React from 'react'; -import { act, render, RenderResult } from '@testing-library/react'; +import { render } from '@testing-library/react'; import { wrapInTestApp } from '@backstage/test-utils'; -import { ThemeProvider } from '@material-ui/core'; -import { customPageTheme } from '@backstage/theme'; import { Header } from './Header'; jest.mock('react-helmet', () => { @@ -27,73 +25,37 @@ jest.mock('react-helmet', () => { }; }); -const ThemeProviderWrapper: React.FC = ({ children }) => ( - - {children} - -); - describe('
', () => { it('should render with title', async () => { - let rendered: RenderResult | undefined; - await act(async () => { - rendered = render(wrapInTestApp(
), { - wrapper: ThemeProviderWrapper, - }); - }); - rendered?.getByText('Title'); + const rendered = render(wrapInTestApp(
)); + rendered.getByText('Title'); }); it('should set document title', async () => { - let rendered: RenderResult | undefined; - await act(async () => { - rendered = render(wrapInTestApp(
), { - wrapper: ThemeProviderWrapper, - }); - }); - rendered?.getByText('Title1'); - rendered?.getByText('defaultTitle: Title1 | Backstage'); + const rendered = render(wrapInTestApp(
)); + rendered.getByText('Title1'); + rendered.getByText('defaultTitle: Title1 | Backstage'); }); it('should override document title', async () => { - let rendered: RenderResult | undefined; - await act(async () => { - rendered = render( - wrapInTestApp(
), - { - wrapper: ThemeProviderWrapper, - }, - ); - }); - rendered?.getByText('Title1'); - rendered?.getByText('defaultTitle: Title2 | Backstage'); + const rendered = render( + wrapInTestApp(
), + ); + rendered.getByText('Title1'); + rendered.getByText('defaultTitle: Title2 | Backstage'); }); it('should have subtitle', async () => { - let rendered: RenderResult | undefined; - await act(async () => { - rendered = render( - wrapInTestApp(
), - { - wrapper: ThemeProviderWrapper, - }, - ); - }); - rendered?.getByText('Subtitle'); + const rendered = render( + wrapInTestApp(
), + ); + rendered.getByText('Subtitle'); }); it('should have type rendered', async () => { - let rendered: RenderResult | undefined; - await act(async () => { - rendered = render(wrapInTestApp(
), { - wrapper: ThemeProviderWrapper, - }); - }); - rendered?.getByText('tool'); + const rendered = render( + wrapInTestApp(
), + ); + rendered.getByText('tool'); }); }); diff --git a/packages/core/src/layout/Header/Header.tsx b/packages/core/src/layout/Header/Header.tsx index dc71fe333b..41840b6ff0 100644 --- a/packages/core/src/layout/Header/Header.tsx +++ b/packages/core/src/layout/Header/Header.tsx @@ -17,7 +17,11 @@ import React, { ReactNode, CSSProperties, FC } from 'react'; import { Helmet } from 'react-helmet'; import { Typography, Tooltip, makeStyles, useTheme } from '@material-ui/core'; -import { BackstageTheme, BackstagePageThemeConsumer } from '@backstage/theme'; +import { + BackstageTheme, + BackstagePageThemeConsumer, + customPageTheme, +} from '@backstage/theme'; const useStyles = makeStyles( theme => ({ @@ -163,7 +167,9 @@ export const Header: FC = ({ }) => { const theme = useTheme(); const classes = useStyles({ - backgroundImage: theme.pageTheme.backgroundImage, + backgroundImage: + theme.pageTheme?.backgroundImage ?? + customPageTheme.pageTheme.home.backgroundImage, }); const documentTitle = pageTitleOverride || title; const pageTitle = title || pageTitleOverride; From 837ae7719729c2efe89ea9cc58a816054ba37d62 Mon Sep 17 00:00:00 2001 From: Marvin9 Date: Sun, 11 Oct 2020 19:10:41 +0530 Subject: [PATCH 09/21] feat: strategy to add page them in top level theme provider --- packages/theme/src/baseTheme.ts | 29 ++++++++++++++--------------- packages/theme/src/index.ts | 1 + packages/theme/src/themes.ts | 10 +++------- packages/theme/src/types.ts | 24 +++++++++--------------- 4 files changed, 27 insertions(+), 37 deletions(-) diff --git a/packages/theme/src/baseTheme.ts b/packages/theme/src/baseTheme.ts index a3fded7e04..1f0e01586e 100644 --- a/packages/theme/src/baseTheme.ts +++ b/packages/theme/src/baseTheme.ts @@ -19,20 +19,28 @@ import { darken, lighten } from '@material-ui/core/styles/colorManipulator'; import { Overrides } from '@material-ui/core/styles/overrides'; import { - BackstagePageTheme, - BackstagePageThemeOptions, BackstageTheme, BackstageThemeOptions, SimpleThemeOptions, } from './types'; +import { pageTheme } from './pageTheme'; + const DEFAULT_FONT_FAMILY = '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif'; export function createThemeOptions( options: SimpleThemeOptions, ): BackstageThemeOptions { - const { palette, fontFamily = DEFAULT_FONT_FAMILY } = options; + const { + palette, + fontFamily = DEFAULT_FONT_FAMILY, + defaultPageTheme, + } = options; + + if (!pageTheme[defaultPageTheme]) { + throw new Error(`${defaultPageTheme} is not defined in pageTheme.`); + } return { palette, @@ -70,6 +78,9 @@ export function createThemeOptions( marginBottom: 10, }, }, + page: pageTheme[defaultPageTheme], + getPageTheme: ({ themeId }) => + pageTheme[themeId] ?? pageTheme[defaultPageTheme], }; } @@ -244,15 +255,3 @@ export function createTheme(options: SimpleThemeOptions): BackstageTheme { const theme = { ...baseTheme, overrides }; return theme; } - -export function createPageTheme( - options: BackstagePageThemeOptions, -): BackstagePageTheme { - const baseTheme = createTheme(options); - const pageTheme = options.pageTheme; - - return { - pageTheme, - baseTheme, - }; -} diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index 862f9b7755..cafad3fc7c 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -17,3 +17,4 @@ export * from './themes'; export * from './baseTheme'; export * from './types'; +export * from './pageTheme'; diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts index 78a68c8f13..3838ed01cc 100644 --- a/packages/theme/src/themes.ts +++ b/packages/theme/src/themes.ts @@ -14,8 +14,7 @@ * limitations under the License. */ -import { createTheme, createPageTheme } from './baseTheme'; -import { pageTheme } from './pageTheme'; +import { createTheme } from './baseTheme'; import { yellow } from '@material-ui/core/colors'; export const lightTheme = createTheme({ @@ -74,6 +73,7 @@ export const lightTheme = createTheme({ indicator: '#9BF0E1', }, }, + defaultPageTheme: 'home', }); export const darkTheme = createTheme({ @@ -132,9 +132,5 @@ export const darkTheme = createTheme({ indicator: '#9BF0E1', }, }, -}); - -export const customPageTheme = createPageTheme({ - pageTheme, - palette: lightTheme.palette, + defaultPageTheme: 'home', }); diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index 3d3943392a..b5a07e78c5 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -72,12 +72,20 @@ type PaletteAdditions = { export type BackstagePalette = Palette & PaletteAdditions; export type BackstagePaletteOptions = PaletteOptions & PaletteAdditions; +export type pageThemeOptions = { + themeId: string; +}; + export interface BackstageTheme extends Theme { palette: BackstagePalette; + page: PageTheme; + getPageTheme: ({ themeId }: pageThemeOptions) => PageTheme; } export interface BackstageThemeOptions extends ThemeOptions { palette: BackstagePaletteOptions; + page: PageTheme; + getPageTheme: ({ themeId }: pageThemeOptions) => PageTheme; } /** @@ -85,6 +93,7 @@ export interface BackstageThemeOptions extends ThemeOptions { */ export type SimpleThemeOptions = { palette: BackstagePaletteOptions; + defaultPageTheme: string; fontFamily?: string; }; @@ -93,18 +102,3 @@ export type PageTheme = { shape: string; backgroundImage: string; }; - -export type BackstagePage = Record; - -export interface BackstagePageThemeOptions extends SimpleThemeOptions { - pageTheme: BackstagePage; -} - -export interface BackstagePageTheme { - pageTheme: BackstagePage; - baseTheme: BackstageTheme; -} - -export interface BackstagePageThemeConsumer extends BackstageTheme { - pageTheme: PageTheme; -} From 886bff9d44a373778ea4b92fd20887d211d63488 Mon Sep 17 00:00:00 2001 From: Marvin9 Date: Sun, 11 Oct 2020 19:12:48 +0530 Subject: [PATCH 10/21] feat: update theme provider in Page component, to override page theme in children --- packages/core/src/layout/Page/Page.stories.tsx | 6 +++--- packages/core/src/layout/Page/Page.tsx | 11 ++++------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/core/src/layout/Page/Page.stories.tsx b/packages/core/src/layout/Page/Page.stories.tsx index 427dc644d9..998f799b56 100644 --- a/packages/core/src/layout/Page/Page.stories.tsx +++ b/packages/core/src/layout/Page/Page.stories.tsx @@ -15,7 +15,7 @@ */ import React, { useState } from 'react'; -import { customPageTheme } from '@backstage/theme'; +import { pageTheme } from '@backstage/theme'; import { Header, Page, @@ -196,7 +196,7 @@ export const PluginWithData = () => { const [selectedTab, setSelectedTab] = useState(2); return (
- + { export const PluginWithTable = () => { return (
- + diff --git a/packages/core/src/layout/Page/Page.tsx b/packages/core/src/layout/Page/Page.tsx index f4dc4888ed..4bc1917659 100644 --- a/packages/core/src/layout/Page/Page.tsx +++ b/packages/core/src/layout/Page/Page.tsx @@ -15,7 +15,7 @@ */ import React, { FC } from 'react'; -import { customPageTheme, PageTheme } from '@backstage/theme'; +import { PageTheme } from '@backstage/theme'; import { makeStyles, ThemeProvider } from '@material-ui/core'; const useStyles = makeStyles(() => ({ @@ -30,16 +30,13 @@ const useStyles = makeStyles(() => ({ })); type Props = { - pageTheme?: PageTheme; + theme: PageTheme; }; -export const Page: FC = ({ - pageTheme = customPageTheme.pageTheme.home, - children, -}) => { +export const Page: FC = ({ theme, children }) => { const classes = useStyles(); return ( - + ({ ...baseTheme, page: theme })}>
{children}
 ); From 6d68f6fec17429764cd55d0b84fcd9f1bbde9140 Mon Sep 17 00:00:00 2001 From: Marvin9 Date: Sun, 11 Oct 2020 19:14:23 +0530 Subject: [PATCH 11/21] feat: consume theme provided by Page theme provider --- .../core/src/layout/Header/Header.stories.tsx | 18 +++---- .../core/src/layout/Header/Header.test.tsx | 10 ++-- packages/core/src/layout/Header/Header.tsx | 12 ++--- .../core/src/layout/SignInPage/SignInPage.tsx | 6 ++- .../ApiEntityPage/ApiEntityPage.test.tsx | 33 +----------- .../ApiEntityPage/ApiEntityPage.tsx | 17 +++--- .../ApiExplorerPage/ApiExplorerLayout.tsx | 11 +++- .../components/CatalogPage/CatalogLayout.tsx | 6 ++- .../EntityPageLayout/EntityPageLayout.tsx | 19 ++++--- .../AlertInstructionsLayout.tsx | 17 ++++-- .../CostInsightsLayout/CostInsightsLayout.tsx | 11 ++-- .../src/components/ExplorePluginPage.tsx | 12 +++-- .../NewProjectPage/NewProjectPage.tsx | 12 +++-- .../ProjectDetailsPage/ProjectDetailsPage.tsx | 10 +++- .../ProjectListPage/ProjectListPage.tsx | 11 +++- .../components/ClusterList/ClusterList.tsx | 11 ++-- .../components/ClusterPage/ClusterPage.tsx | 11 ++-- .../ProfileCatalog/ProfileCatalog.tsx | 12 +++-- .../components/GraphiQLPage/GraphiQLPage.tsx | 11 ++-- .../KubernetesContent/KubernetesContent.tsx | 11 ++-- .../src/components/AuditList/index.tsx | 11 ++-- .../src/components/AuditView/index.tsx | 10 +++- .../src/components/CreateAudit/index.tsx | 10 +++- .../NewRelicComponent/NewRelicComponent.tsx | 48 +++++++++-------- .../RegisterComponentPage.tsx | 11 ++-- .../components/RollbarHome/RollbarHome.tsx | 10 +++- .../RollbarProjectPage/RollbarProjectPage.tsx | 10 +++- .../ScaffolderPage/ScaffolderPage.tsx | 7 +-- .../components/TemplateCard/TemplateCard.tsx | 16 ++++-- .../components/TemplatePage/TemplatePage.tsx | 7 +-- .../SentryPluginPage/SentryPluginPage.tsx | 11 ++-- .../tech-radar/src/components/RadarPage.tsx | 54 ++++++++++--------- .../src/reader/components/TechDocsHome.tsx | 23 ++++++-- .../src/reader/components/TechDocsPage.tsx | 10 +++- .../components/WelcomePage/WelcomePage.tsx | 10 +++- 35 files changed, 320 insertions(+), 189 deletions(-) diff --git a/packages/core/src/layout/Header/Header.stories.tsx b/packages/core/src/layout/Header/Header.stories.tsx index cc0276224a..a99e9e235f 100644 --- a/packages/core/src/layout/Header/Header.stories.tsx +++ b/packages/core/src/layout/Header/Header.stories.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { customPageTheme } from '@backstage/theme'; +import { pageTheme } from '@backstage/theme'; import React from 'react'; import { Header } from '.'; import { HeaderLabel } from '../HeaderLabel'; @@ -33,7 +33,7 @@ const labels = ( ); export const Home = () => ( - +
{labels}
@@ -47,7 +47,7 @@ export const HomeWithSubtitle = () => ( ); export const Tool = () => ( - +
{labels}
@@ -55,7 +55,7 @@ export const Tool = () => ( ); export const Service = () => ( - +
{labels}
@@ -63,7 +63,7 @@ export const Service = () => ( ); export const Website = () => ( - +
{labels}
@@ -71,7 +71,7 @@ export const Website = () => ( ); export const Library = () => ( - +
{labels}
@@ -79,7 +79,7 @@ export const Library = () => ( ); export const App = () => ( - +
{labels}
@@ -87,7 +87,7 @@ export const App = () => ( ); export const Documentation = () => ( - +
{labels}
@@ -95,7 +95,7 @@ export const Documentation = () => ( ); export const Other = () => ( - +
{labels}
diff --git a/packages/core/src/layout/Header/Header.test.tsx b/packages/core/src/layout/Header/Header.test.tsx index e5dc7fec4d..5d28c6633f 100644 --- a/packages/core/src/layout/Header/Header.test.tsx +++ b/packages/core/src/layout/Header/Header.test.tsx @@ -26,18 +26,18 @@ jest.mock('react-helmet', () => { }); describe('
', () => { - it('should render with title', async () => { + it('should render with title', () => { const rendered = render(wrapInTestApp(
)); rendered.getByText('Title'); }); - it('should set document title', async () => { + it('should set document title', () => { const rendered = render(wrapInTestApp(
)); rendered.getByText('Title1'); rendered.getByText('defaultTitle: Title1 | Backstage'); }); - it('should override document title', async () => { + it('should override document title', () => { const rendered = render( wrapInTestApp(
), ); @@ -45,14 +45,14 @@ describe('
', () => { rendered.getByText('defaultTitle: Title2 | Backstage'); }); - it('should have subtitle', async () => { + it('should have subtitle', () => { const rendered = render( wrapInTestApp(
), ); rendered.getByText('Subtitle'); }); - it('should have type rendered', async () => { + it('should have type rendered', () => { const rendered = render( wrapInTestApp(
), ); diff --git a/packages/core/src/layout/Header/Header.tsx b/packages/core/src/layout/Header/Header.tsx index 41840b6ff0..6fadd0c834 100644 --- a/packages/core/src/layout/Header/Header.tsx +++ b/packages/core/src/layout/Header/Header.tsx @@ -17,11 +17,7 @@ import React, { ReactNode, CSSProperties, FC } from 'react'; import { Helmet } from 'react-helmet'; import { Typography, Tooltip, makeStyles, useTheme } from '@material-ui/core'; -import { - BackstageTheme, - BackstagePageThemeConsumer, - customPageTheme, -} from '@backstage/theme'; +import { BackstageTheme } from '@backstage/theme'; const useStyles = makeStyles( theme => ({ @@ -165,11 +161,9 @@ export const Header: FC = ({ type, typeLink, }) => { - const theme = useTheme(); + const backstageTheme = useTheme(); const classes = useStyles({ - backgroundImage: - theme.pageTheme?.backgroundImage ?? - customPageTheme.pageTheme.home.backgroundImage, + backgroundImage: backstageTheme.page.backgroundImage, }); const documentTitle = pageTitleOverride || title; const pageTitle = title || pageTitleOverride; diff --git a/packages/core/src/layout/SignInPage/SignInPage.tsx b/packages/core/src/layout/SignInPage/SignInPage.tsx index 8a1ff68250..b2b049d161 100644 --- a/packages/core/src/layout/SignInPage/SignInPage.tsx +++ b/packages/core/src/layout/SignInPage/SignInPage.tsx @@ -19,7 +19,8 @@ import { Page } from '../Page'; import { Header } from '../Header'; import { Content } from '../Content/Content'; import { ContentHeader } from '../ContentHeader/ContentHeader'; -import { Grid } from '@material-ui/core'; +import { BackstageTheme } from '@backstage/theme'; +import { Grid, useTheme } from '@material-ui/core'; import { SignInPageProps, useApi, configApiRef } from '@backstage/core-api'; import { useSignInProviders, getSignInProviders } from './providers'; import { IdentityProviders } from './types'; @@ -38,6 +39,7 @@ export const SignInPage: FC = ({ title, align = 'left', }) => { + const backstageTheme = useTheme(); const configApi = useApi(configApiRef); const classes = useStyles(); @@ -52,7 +54,7 @@ export const SignInPage: FC = ({ } return ( - +
{title && } diff --git a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.test.tsx b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.test.tsx index af5213e3f1..9a2bc0cfb1 100644 --- a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.test.tsx +++ b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.test.tsx @@ -13,14 +13,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -import { Entity } from '@backstage/catalog-model'; import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core'; import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog'; import { wrapInTestApp } from '@backstage/test-utils'; import { render, waitFor } from '@testing-library/react'; import * as React from 'react'; -import { ApiEntityPage, getPageTheme } from './ApiEntityPage'; +import { ApiEntityPage } from './ApiEntityPage'; jest.mock('react-router-dom', () => { const actual = jest.requireActual('react-router-dom'); @@ -71,32 +69,3 @@ describe('ApiEntityPage', () => { ); }); }); - -describe('getPageTheme', () => { - const defaultPageTheme = getPageTheme(); - it.each(['service', 'app', 'library', 'tool', 'documentation', 'website'])( - 'should select right theme for predefined type: %p ̰ ', - type => { - const theme = getPageTheme(({ - spec: { - type, - }, - } as any) as Entity); - expect(theme).toBeDefined(); - expect(theme).not.toBe(defaultPageTheme); - }, - ); - - it('should select default theme for unknown/unspecified types', () => { - const theme1 = getPageTheme(({ - spec: { - type: 'unknown-type', - }, - } as any) as Entity); - const theme2 = getPageTheme(({ - spec: {}, - } as any) as Entity); - expect(theme1).toBe(defaultPageTheme); - expect(theme2).toBe(defaultPageTheme); - }); -}); diff --git a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx index edfc3ab08b..85250a8569 100644 --- a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx +++ b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx @@ -23,9 +23,9 @@ import { Progress, useApi, } from '@backstage/core'; -import { customPageTheme, PageTheme } from '@backstage/theme'; +import { BackstageTheme } from '@backstage/theme'; import { catalogApiRef } from '@backstage/plugin-catalog'; -import { Box } from '@material-ui/core'; +import { Box, useTheme } from '@material-ui/core'; import { Alert } from '@material-ui/lab'; import React, { useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; @@ -53,12 +53,6 @@ function headerProps( }; } -// REUSABLE IN plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx -export const getPageTheme = (entity?: Entity): PageTheme => { - const themeKey = entity?.spec?.type?.toString() ?? 'home'; - return customPageTheme.pageTheme[themeKey] ?? customPageTheme.pageTheme.home; -}; - type EntityPageTitleProps = { title: string; entity: Entity | undefined; @@ -71,6 +65,7 @@ const EntityPageTitle = ({ title }: EntityPageTitleProps) => ( ); export const ApiEntityPage = () => { + const backstageTheme = useTheme(); const { optionalNamespaceAndName } = useParams() as { optionalNamespaceAndName: string; }; @@ -107,7 +102,11 @@ export const ApiEntityPage = () => { ); return ( - +
} pageTitleOverride={headerTitle} diff --git a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx index 53b50f1826..410432d715 100644 --- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx @@ -15,7 +15,8 @@ */ import { Header, Page } from '@backstage/core'; -import { customPageTheme } from '@backstage/theme'; +import { BackstageTheme } from '@backstage/theme'; +import { useTheme } from '@material-ui/core'; import React from 'react'; type Props = { @@ -23,8 +24,14 @@ type Props = { }; export const ApiExplorerLayout = ({ children }: Props) => { + const backstageTheme = useTheme(); + return ( - +
{ + const backstageTheme = useTheme(); const greeting = getTimeBasedGreeting(); const profile = useApi(identityApiRef).getProfile(); const userId = useApi(identityApiRef).getUserId(); return ( - +
{ - const themeKey = entity?.spec?.type?.toString() ?? 'home'; - return customPageTheme.pageTheme[themeKey] ?? customPageTheme.pageTheme.home; -}; +// const getPageTheme = (entity?: Entity): PageTheme => { +// const themeKey = entity?.spec?.type?.toString() ?? 'home'; +// return customPageTheme.pageTheme[themeKey] ?? customPageTheme.pageTheme.home; +// }; const EntityPageTitle = ({ entity, @@ -69,6 +69,7 @@ export const EntityPageLayout = ({ }: { children?: React.ReactNode; }) => { + const backstageTheme = useTheme(); const { optionalNamespaceAndName, kind } = useParams() as { optionalNamespaceAndName: string; kind: string; @@ -93,7 +94,11 @@ export const EntityPageLayout = ({ const showRemovalDialog = () => setConfirmationDialogOpen(true); return ( - +
} pageTitleOverride={headerTitle} diff --git a/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx b/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx index c0777fc844..d09b130b70 100644 --- a/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx +++ b/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx @@ -14,9 +14,15 @@ * limitations under the License. */ -import { customPageTheme } from '@backstage/theme'; +import { BackstageTheme } from '@backstage/theme'; import React, { ReactNode } from 'react'; -import { Box, Button, Container, makeStyles } from '@material-ui/core'; +import { + Box, + Button, + Container, + makeStyles, + useTheme, +} from '@material-ui/core'; import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; import { Header, Page } from '@backstage/core'; import { CostInsightsThemeProvider } from '../CostInsightsPage/CostInsightsThemeProvider'; @@ -37,10 +43,15 @@ const AlertInstructionsLayout = ({ title, children, }: AlertInstructionsLayoutProps) => { + const backstageTheme = useTheme(); const classes = useStyles(); return ( - +
diff --git a/plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx b/plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx index c95f624bbe..068174cd68 100644 --- a/plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx +++ b/plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx @@ -13,9 +13,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { customPageTheme } from '@backstage/theme'; +import { BackstageTheme } from '@backstage/theme'; import React from 'react'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles, useTheme } from '@material-ui/core'; import { Header, Page } from '@backstage/core'; import { Group } from '../../types'; import CostInsightsTabs from '../CostInsightsTabs'; @@ -39,9 +39,14 @@ type CostInsightsLayoutProps = { }; const CostInsightsLayout = ({ groups, children }: CostInsightsLayoutProps) => { + const backstageTheme = useTheme(); const classes = useStyles(); return ( - +
(theme => ({ container: { @@ -115,8 +115,14 @@ const toolsCards = [ export const ExplorePluginPage = () => { const classes = useStyles(); + const backstageTheme = useTheme(); + return ( - +
{ @@ -112,8 +112,14 @@ const labels = ( ); export const NewProjectPage = () => { + const backstageTheme = useTheme(); + return ( - +
{labels}
diff --git a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx index e310c27c68..eb86b6fd03 100644 --- a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx +++ b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { customPageTheme } from '@backstage/theme'; +import { BackstageTheme } from '@backstage/theme'; import { Content, ContentHeader, @@ -36,6 +36,7 @@ import { TableRow, Theme, Typography, + useTheme, } from '@material-ui/core'; import React from 'react'; import { useAsync } from 'react-use'; @@ -147,8 +148,13 @@ const labels = ( ); export const ProjectDetailsPage = () => { + const backstageTheme = useTheme(); return ( - +
{labels}
diff --git a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx index 5a404dbb01..33b3813c2a 100644 --- a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx +++ b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx @@ -15,7 +15,7 @@ */ // NEEDS WORK -import { customPageTheme } from '@backstage/theme'; +import { BackstageTheme } from '@backstage/theme'; import { Content, ContentHeader, @@ -38,6 +38,7 @@ import { TableRow, Tooltip, Typography, + useTheme, } from '@material-ui/core'; import React from 'react'; import { useAsync } from 'react-use'; @@ -134,8 +135,14 @@ const PageContents = () => { }; export const ProjectListPage = () => { + const backstageTheme = useTheme(); + return ( - +
{labels}
diff --git a/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx b/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx index 8926ed3260..3b33320abe 100644 --- a/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx +++ b/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { customPageTheme } from '@backstage/theme'; +import { BackstageTheme } from '@backstage/theme'; import React, { FC, useState } from 'react'; import { Content, @@ -29,12 +29,13 @@ import { } from '@backstage/core'; import ClusterTable from '../ClusterTable/ClusterTable'; -import { Button } from '@material-ui/core'; +import { Button, useTheme } from '@material-ui/core'; import { useAsync } from 'react-use'; import { gitOpsApiRef } from '../../api'; import { Alert } from '@material-ui/lab'; const ClusterList: FC<{}> = () => { + const backstageTheme = useTheme(); const api = useApi(gitOpsApiRef); const githubAuth = useApi(githubAuthApiRef); const [githubUsername, setGithubUsername] = useState(String); @@ -91,7 +92,11 @@ const ClusterList: FC<{}> = () => { } return ( - +
diff --git a/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx b/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx index d51fb7656e..f7205c3326 100644 --- a/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx +++ b/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { customPageTheme } from '@backstage/theme'; +import { BackstageTheme } from '@backstage/theme'; import React, { FC, useEffect, useState } from 'react'; import { Content, @@ -26,12 +26,13 @@ import { githubAuthApiRef, } from '@backstage/core'; -import { Link } from '@material-ui/core'; +import { Link, useTheme } from '@material-ui/core'; import { useParams } from 'react-router-dom'; import { gitOpsApiRef, Status } from '../../api'; import { transformRunStatus } from '../ProfileCatalog'; const ClusterPage: FC<{}> = () => { + const backstageTheme = useTheme(); const params = useParams() as { owner: string; repo: string }; const [pollingLog, setPollingLog] = useState(true); @@ -84,7 +85,11 @@ const ClusterPage: FC<{}> = () => { }, [pollingLog, api, params, githubAuth, githubAccessToken, githubUsername]); return ( - +
diff --git a/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx b/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx index 078e1b7601..fe1e97235a 100644 --- a/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx +++ b/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { customPageTheme } from '@backstage/theme'; +import { BackstageTheme } from '@backstage/theme'; import React, { FC, useEffect, useState } from 'react'; import { Header, @@ -37,7 +37,7 @@ import { useApi, githubAuthApiRef, } from '@backstage/core'; -import { TextField, List, ListItem, Link } from '@material-ui/core'; +import { TextField, List, ListItem, Link, useTheme } from '@material-ui/core'; import ClusterTemplateCardList from '../ClusterTemplateCardList'; import ProfileCardList from '../ProfileCardList'; @@ -81,6 +81,8 @@ export const transformRunStatus = (x: Status[]) => { }; const ProfileCatalog: FC<{}> = () => { + const backstageTheme = useTheme(); + // TODO: get data from REST API const [clusterTemplates] = React.useState([ { @@ -259,7 +261,11 @@ const ProfileCatalog: FC<{}> = () => { ]; return ( - +
{ + const backstageTheme = useTheme(); const graphQlBrowseApi = useApi(graphQlBrowseApiRef); const endpoints = useAsync(() => graphQlBrowseApi.getEndpoints()); @@ -59,7 +60,11 @@ export const GraphiQLPage = () => { } return ( - +
diff --git a/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx b/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx index 381b942f3d..70edc167f3 100644 --- a/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx +++ b/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx @@ -14,9 +14,9 @@ * limitations under the License. */ -import { customPageTheme } from '@backstage/theme'; +import { BackstageTheme } from '@backstage/theme'; import React, { ReactElement, useEffect, useState } from 'react'; -import { Grid, TabProps } from '@material-ui/core'; +import { Grid, TabProps, useTheme } from '@material-ui/core'; import { CardTab, Content, @@ -98,6 +98,7 @@ const groupResponses = (fetchResponse: FetchResponse[]) => { type KubernetesContentProps = { entity: Entity; children?: React.ReactNode }; export const KubernetesContent = ({ entity }: KubernetesContentProps) => { + const backstageTheme = useTheme(); const kubernetesApi = useApi(kubernetesApiRef); const [kubernetesObjects, setKubernetesObjects] = useState< @@ -120,7 +121,11 @@ export const KubernetesContent = ({ entity }: KubernetesContentProps) => { kubernetesObjects?.items.filter(r => r.errors.length > 0) ?? []; return ( - + {kubernetesObjects === undefined && error === undefined && ( diff --git a/plugins/lighthouse/src/components/AuditList/index.tsx b/plugins/lighthouse/src/components/AuditList/index.tsx index 9c38e27fe3..cae1761ecb 100644 --- a/plugins/lighthouse/src/components/AuditList/index.tsx +++ b/plugins/lighthouse/src/components/AuditList/index.tsx @@ -13,11 +13,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { customPageTheme } from '@backstage/theme'; +import { BackstageTheme } from '@backstage/theme'; import React, { useState, useMemo, FC, ReactNode } from 'react'; import { useLocalStorage, useAsync } from 'react-use'; import { useNavigate } from 'react-router-dom'; -import { Grid, Button } from '@material-ui/core'; +import { Grid, Button, useTheme } from '@material-ui/core'; import Alert from '@material-ui/lab/Alert'; import Pagination from '@material-ui/lab/Pagination'; import { @@ -41,6 +41,7 @@ import { createAuditRouteRef } from '../../plugin'; export const LIMIT = 10; const AuditList: FC<{}> = () => { + const backstageTheme = useTheme(); const [dismissedStored] = useLocalStorage(LIGHTHOUSE_INTRO_LOCAL_STORAGE); const [dismissed, setDismissed] = useState(dismissedStored); @@ -94,7 +95,11 @@ const AuditList: FC<{}> = () => { } return ( - +
= ({ audit }: { audit?: Audit }) => { }; const ConnectedAuditView: FC<{}> = () => { + const backstageTheme = useTheme(); const lighthouseApi = useApi(lighthouseApiRef); const params = useParams() as { id: string }; const classes = useStyles(); @@ -173,7 +175,11 @@ const ConnectedAuditView: FC<{}> = () => { } return ( - +
({ })); const CreateAudit: FC<{}> = () => { + const backstageTheme = useTheme(); const errorApi = useApi(errorApiRef); const lighthouseApi = useApi(lighthouseApiRef); const classes = useStyles(); @@ -94,7 +96,11 @@ const CreateAudit: FC<{}> = () => { ]); return ( - +
= () => ( - -
- -
- - - - New Relic Application Performance Monitoring - - - - - +const NewRelicComponent: FC<{}> = () => { + const backstageTheme = useTheme(); + return ( + +
+ +
+ + + + New Relic Application Performance Monitoring + + + + + + - - - -); - + + + ); +}; export default NewRelicComponent; diff --git a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx index 5e4da3fc35..722e2e1964 100644 --- a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx +++ b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx @@ -14,9 +14,9 @@ * limitations under the License. */ -import { customPageTheme } from '@backstage/theme'; +import { BackstageTheme } from '@backstage/theme'; import React, { useState } from 'react'; -import { Grid, makeStyles } from '@material-ui/core'; +import { Grid, makeStyles, useTheme } from '@material-ui/core'; import { InfoCard, Page, @@ -61,6 +61,7 @@ export const RegisterComponentPage = ({ }: { catalogRouteRef: RouteRef; }) => { + const backstageTheme = useTheme(); const classes = useStyles(); const catalogApi = useApi(catalogApiRef); const [formState, setFormState] = useState>( @@ -113,7 +114,11 @@ export const RegisterComponentPage = ({ }; return ( - +
diff --git a/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx b/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx index 9f0deca967..f219be9615 100644 --- a/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx +++ b/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx @@ -14,17 +14,23 @@ * limitations under the License. */ -import { customPageTheme } from '@backstage/theme'; +import { BackstageTheme } from '@backstage/theme'; +import { useTheme } from '@material-ui/core'; import React from 'react'; import { Content, Header, Page } from '@backstage/core'; import { RollbarProjectTable } from '../RollbarProjectTable/RollbarProjectTable'; import { useRollbarEntities } from '../../hooks/useRollbarEntities'; export const RollbarHome = () => { + const backstageTheme = useTheme(); const { entities, loading, error } = useRollbarEntities(); return ( - +
{ + const backstageTheme = useTheme(); const { entity } = useCatalogEntity(); return ( - +
diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx index 1bd43ded44..bd70fd9565 100644 --- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx +++ b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { customPageTheme } from '@backstage/theme'; +import { BackstageTheme } from '@backstage/theme'; import { TemplateEntityV1alpha1 } from '@backstage/catalog-model'; import { Content, @@ -29,7 +29,7 @@ import { WarningPanel, } from '@backstage/core'; import { catalogApiRef } from '@backstage/plugin-catalog'; -import { Button, Grid, Link, Typography } from '@material-ui/core'; +import { Button, Grid, Link, Typography, useTheme } from '@material-ui/core'; import React, { useEffect } from 'react'; import { Link as RouterLink } from 'react-router-dom'; import useStaleWhileRevalidate from 'swr'; @@ -49,6 +49,7 @@ const getTemplateCardProps = ( }; export const ScaffolderPage = () => { + const backstageTheme = useTheme(); const catalogApi = useApi(catalogApiRef); const errorApi = useApi(errorApiRef); @@ -66,7 +67,7 @@ export const ScaffolderPage = () => { }, [error, errorApi]); return ( - +
{ - const theme = - customPageTheme.pageTheme[type] ?? customPageTheme.pageTheme.other; + const backstageTheme = useTheme(); + + const themeId = pageTheme[type] ? type : 'other'; + const theme = backstageTheme.getPageTheme({ themeId }); const classes = useStyles({ backgroundImage: theme.backgroundImage }); const href = generatePath(templateRoute.path, { templateName: name }); diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx index 5067f7963d..7bfc1b78a2 100644 --- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx +++ b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { customPageTheme } from '@backstage/theme'; +import { BackstageTheme } from '@backstage/theme'; import { TemplateEntityV1alpha1 } from '@backstage/catalog-model'; import { Content, @@ -25,7 +25,7 @@ import { useApi, } from '@backstage/core'; import { catalogApiRef } from '@backstage/plugin-catalog'; -import { LinearProgress } from '@material-ui/core'; +import { LinearProgress, useTheme } from '@material-ui/core'; import { IChangeEvent } from '@rjsf/core'; import React, { useState } from 'react'; import { useParams } from 'react-router-dom'; @@ -80,6 +80,7 @@ const REPO_FORMAT = { }; export const TemplatePage = () => { + const backstageTheme = useTheme(); const errorApi = useApi(errorApiRef); const catalogApi = useApi(catalogApiRef); const scaffolderApi = useApi(scaffolderApiRef); @@ -145,7 +146,7 @@ export const TemplatePage = () => { } return ( - +
= () => { + const backstageTheme = useTheme(); const [statsFor, setStatsFor] = useState<'12h' | '24h'>('12h'); const toggleStatsFor = () => setStatsFor(statsFor === '12h' ? '12h' : '24h'); const sentryProjectId = 'sample-sentry-project-id'; return ( - +
diff --git a/plugins/tech-radar/src/components/RadarPage.tsx b/plugins/tech-radar/src/components/RadarPage.tsx index 58dcaec9af..d23061b094 100644 --- a/plugins/tech-radar/src/components/RadarPage.tsx +++ b/plugins/tech-radar/src/components/RadarPage.tsx @@ -14,9 +14,9 @@ * limitations under the License. */ -import { customPageTheme } from '@backstage/theme'; +import { BackstageTheme } from '@backstage/theme'; import React from 'react'; -import { Grid } from '@material-ui/core'; +import { Grid, useTheme } from '@material-ui/core'; import { Content, ContentHeader, @@ -39,29 +39,35 @@ export const RadarPage = ({ subtitle, pageTitle, ...props -}: TechRadarPageProps): JSX.Element => ( - -
- - -
- - - - This is used for visualizing the official guidelines of different - areas of software development such as languages, frameworks, - infrastructure and processes. - - - - - +}: TechRadarPageProps): JSX.Element => { + const backstageTheme = useTheme(); + return ( + +
+ + +
+ + + + This is used for visualizing the official guidelines of different + areas of software development such as languages, frameworks, + infrastructure and processes. + + + + + + - - - -); - + + + ); +}; RadarPage.defaultProps = { title: 'Tech Radar', subtitle: 'Pick the recommended technologies for your projects', diff --git a/plugins/techdocs/src/reader/components/TechDocsHome.tsx b/plugins/techdocs/src/reader/components/TechDocsHome.tsx index 11211e713c..149117ec00 100644 --- a/plugins/techdocs/src/reader/components/TechDocsHome.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsHome.tsx @@ -14,11 +14,11 @@ * limitations under the License. */ -import { customPageTheme } from '@backstage/theme'; +import { BackstageTheme } from '@backstage/theme'; import React from 'react'; import { useAsync } from 'react-use'; import { useNavigate, generatePath } from 'react-router-dom'; -import { Grid } from '@material-ui/core'; +import { Grid, useTheme } from '@material-ui/core'; import { ItemCard, Progress, @@ -31,6 +31,7 @@ import { catalogApiRef } from '@backstage/plugin-catalog'; import { rootDocsRouteRef } from '../../plugin'; export const TechDocsHome = () => { + const backstageTheme = useTheme(); const catalogApi = useApi(catalogApiRef); const navigate = useNavigate(); @@ -43,7 +44,11 @@ export const TechDocsHome = () => { if (loading) { return ( - +
{ if (error) { return ( - +
{ } return ( - +
{ + const backstageTheme = useTheme(); const [documentReady, setDocumentReady] = useState(false); const { entityId } = useParams(); const [kind, namespace, name] = entityId.split(':'); @@ -47,7 +49,11 @@ export const TechDocsPage = () => { }; return ( - + { + const backstageTheme = useTheme(); const appTitle = useApi(configApiRef).getOptionalString('app.title') ?? 'Backstage'; const profile = { givenName: '' }; return ( - +
Date: Sun, 11 Oct 2020 19:27:59 +0530 Subject: [PATCH 12/21] fix: Implement new strategy consumer --- plugins/user-settings/src/components/SettingsPage.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/plugins/user-settings/src/components/SettingsPage.tsx b/plugins/user-settings/src/components/SettingsPage.tsx index 86096e9a1f..e8e5cbdbfd 100644 --- a/plugins/user-settings/src/components/SettingsPage.tsx +++ b/plugins/user-settings/src/components/SettingsPage.tsx @@ -15,7 +15,9 @@ */ import React, { useState } from 'react'; -import { Content, Header, HeaderTabs, Page, pageTheme } from '@backstage/core'; +import { Content, Header, HeaderTabs, Page } from '@backstage/core'; +import { BackstageTheme } from '@backstage/theme'; +import { useTheme } from '@material-ui/core'; import { General } from './General'; import { AuthProviders } from './AuthProviders'; import { FeatureFlags } from './FeatureFlags'; @@ -25,6 +27,7 @@ type Props = { }; export const SettingsPage = ({ providerSettings }: Props) => { + const backstageTheme = useTheme(); const [activeTab, setActiveTab] = useState(0); const onTabChange = (index: number) => { setActiveTab(index); @@ -43,7 +46,11 @@ export const SettingsPage = ({ providerSettings }: Props) => { ]; return ( - +
{content[activeTab]} From cd66aed3d1b37c1a1cba2a56ed61cb3069f08c03 Mon Sep 17 00:00:00 2001 From: Marvin9 Date: Sun, 11 Oct 2020 19:34:16 +0530 Subject: [PATCH 13/21] chore: remove comments --- .../src/components/EntityPageLayout/EntityPageLayout.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx b/plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx index 68e871009a..4958a6f850 100644 --- a/plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx +++ b/plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx @@ -27,11 +27,6 @@ import { UnregisterEntityDialog } from '../UnregisterEntityDialog/UnregisterEnti import { Alert } from '@material-ui/lab'; import { Tabbed } from './Tabbed'; -// const getPageTheme = (entity?: Entity): PageTheme => { -// const themeKey = entity?.spec?.type?.toString() ?? 'home'; -// return customPageTheme.pageTheme[themeKey] ?? customPageTheme.pageTheme.home; -// }; - const EntityPageTitle = ({ entity, title, From a4aa277e9f4447e253bf9c58b0aabb0eeb73bea5 Mon Sep 17 00:00:00 2001 From: Marvin9 Date: Sun, 11 Oct 2020 19:35:01 +0530 Subject: [PATCH 14/21] fix: Replace new theme strategy consumer in handlebar template & Example md file --- .../tutorials/quickstart-app-plugin/ExampleComponent.md | 7 ++++--- .../components/ExampleComponent/ExampleComponent.tsx.hbs | 6 +++--- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md b/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md index ed4bfc8012..83b18bf4c2 100644 --- a/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md +++ b/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md @@ -3,9 +3,9 @@ ExampleComponent.tsx reference ```tsx -import { customPageTheme } from '@backstage/theme'; +import { BackstageTheme } from '@backstage/theme'; import React, { FC } from 'react'; -import { Typography, Grid } from '@material-ui/core'; +import { Typography, Grid, useTheme } from '@material-ui/core'; import { InfoCard, Header, @@ -21,12 +21,13 @@ import { useApi } from '@backstage/core-api'; import ExampleFetchComponent from '../ExampleFetchComponent'; const ExampleComponent: FC<{}> = () => { + const backstageTheme = useTheme(); const identityApi = useApi(identityApiRef); const userId = identityApi.getUserId(); const profile = identityApi.getProfile(); return ( - +
= () => ( - +
From fae67f2be1aa19f2caad112df92e5b93e68de009 Mon Sep 17 00:00:00 2001 From: Marvin9 Date: Sun, 11 Oct 2020 20:08:08 +0530 Subject: [PATCH 15/21] chore: update example component --- .../ExampleComponent/ExampleComponent.tsx.hbs | 55 ++++++++++--------- 1 file changed, 28 insertions(+), 27 deletions(-) diff --git a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs index 9cdd22c0ca..d4be6d87ac 100644 --- a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs +++ b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs @@ -1,6 +1,6 @@ -import { BackstageTheme } from '@backstage/theme'; +import { pageTheme } from '@backstage/theme'; import React, { FC } from 'react'; -import { Typography, Grid, useTheme } from '@material-ui/core'; +import { Typography, Grid } from '@material-ui/core'; import { InfoCard, Header, @@ -12,30 +12,31 @@ import { } from '@backstage/core'; import ExampleFetchComponent from '../ExampleFetchComponent'; -const ExampleComponent: FC<{}> = () => ( - -
- - -
- - - A description of your plugin goes here. - - - - - - All content should be wrapped in a card like this. - - +const ExampleComponent: FC<{}> = () => { + return ( + +
+ + +
+ + + A description of your plugin goes here. + + + + + + All content should be wrapped in a card like this. + + + + + + - - - - - - -); - + + + ); +} export default ExampleComponent; From ba056b1ba89f7a5a482f19282887b3e106ef5a73 Mon Sep 17 00:00:00 2001 From: Marvin9 Date: Thu, 15 Oct 2020 09:14:15 +0530 Subject: [PATCH 16/21] chore: update naming convention for page theme options --- packages/theme/src/types.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index b5a07e78c5..e551208f3f 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -72,20 +72,20 @@ type PaletteAdditions = { export type BackstagePalette = Palette & PaletteAdditions; export type BackstagePaletteOptions = PaletteOptions & PaletteAdditions; -export type pageThemeOptions = { +export type PageThemeSelector = { themeId: string; }; export interface BackstageTheme extends Theme { palette: BackstagePalette; page: PageTheme; - getPageTheme: ({ themeId }: pageThemeOptions) => PageTheme; + getPageTheme: ({ themeId }: PageThemeSelector) => PageTheme; } export interface BackstageThemeOptions extends ThemeOptions { palette: BackstagePaletteOptions; page: PageTheme; - getPageTheme: ({ themeId }: pageThemeOptions) => PageTheme; + getPageTheme: ({ themeId }: PageThemeSelector) => PageTheme; } /** From 8f0608a5ed24ffc1a27cfecc9bc0f370c98966d8 Mon Sep 17 00:00:00 2001 From: Marvin9 Date: Thu, 15 Oct 2020 09:16:39 +0530 Subject: [PATCH 17/21] chore: refactor --- .../core/src/layout/Header/Header.stories.tsx | 17 +++++++------- .../core/src/layout/Page/Page.stories.tsx | 5 ++--- packages/core/src/layout/Page/Page.tsx | 13 +++++++---- .../core/src/layout/SignInPage/SignInPage.tsx | 6 ++--- .../ApiEntityPage/ApiEntityPage.tsx | 10 ++------- .../ApiExplorerPage/ApiExplorerLayout.tsx | 10 +-------- .../components/CatalogPage/CatalogLayout.tsx | 5 +---- .../EntityPageLayout/EntityPageLayout.tsx | 10 ++------- .../AlertInstructionsLayout.tsx | 12 ++-------- .../CostInsightsLayout/CostInsightsLayout.tsx | 10 ++------- .../src/components/ExplorePluginPage.tsx | 9 ++------ .../NewProjectPage/NewProjectPage.tsx | 11 ++-------- .../ProjectDetailsPage/ProjectDetailsPage.tsx | 9 +------- .../ProjectListPage/ProjectListPage.tsx | 10 +-------- .../components/ClusterList/ClusterList.tsx | 10 ++------- .../components/ClusterPage/ClusterPage.tsx | 10 ++------- .../ProfileCatalog/ProfileCatalog.tsx | 11 ++-------- .../components/GraphiQLPage/GraphiQLPage.tsx | 10 ++------- .../KubernetesContent/KubernetesContent.tsx | 10 ++------- .../src/components/AuditList/index.tsx | 10 ++------- .../src/components/AuditView/index.tsx | 9 +------- .../src/components/CreateAudit/index.tsx | 9 +------- .../NewRelicComponent/NewRelicComponent.tsx | 10 ++------- .../RegisterComponentPage.tsx | 10 ++------- .../components/RollbarHome/RollbarHome.tsx | 9 +------- .../RollbarProjectPage/RollbarProjectPage.tsx | 9 +------- .../ScaffolderPage/ScaffolderPage.tsx | 6 ++--- .../components/TemplatePage/TemplatePage.tsx | 6 ++--- .../SentryPluginPage/SentryPluginPage.tsx | 10 ++------- .../tech-radar/src/components/RadarPage.tsx | 10 ++------- .../src/reader/components/TechDocsHome.tsx | 22 ++++--------------- .../src/reader/components/TechDocsPage.tsx | 9 +------- .../src/components/SettingsPage.tsx | 9 +------- .../components/WelcomePage/WelcomePage.tsx | 9 +------- 34 files changed, 72 insertions(+), 263 deletions(-) diff --git a/packages/core/src/layout/Header/Header.stories.tsx b/packages/core/src/layout/Header/Header.stories.tsx index f4ca74d3f8..62e6e3e52c 100644 --- a/packages/core/src/layout/Header/Header.stories.tsx +++ b/packages/core/src/layout/Header/Header.stories.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { pageTheme } from '@backstage/theme'; import React from 'react'; import { Header } from '.'; import { HeaderLabel } from '../HeaderLabel'; @@ -33,7 +32,7 @@ const labels = ( ); export const Home = () => ( - +
{labels}
@@ -47,7 +46,7 @@ export const HomeWithSubtitle = () => ( ); export const Tool = () => ( - +
{labels}
@@ -55,7 +54,7 @@ export const Tool = () => ( ); export const Service = () => ( - +
{labels}
@@ -63,7 +62,7 @@ export const Service = () => ( ); export const Website = () => ( - +
{labels}
@@ -71,7 +70,7 @@ export const Website = () => ( ); export const Library = () => ( - +
{labels}
@@ -79,7 +78,7 @@ export const Library = () => ( ); export const App = () => ( - +
{labels}
@@ -87,7 +86,7 @@ export const App = () => ( ); export const Documentation = () => ( - +
{labels}
@@ -95,7 +94,7 @@ export const Documentation = () => ( ); export const Other = () => ( - +
{labels}
diff --git a/packages/core/src/layout/Page/Page.stories.tsx b/packages/core/src/layout/Page/Page.stories.tsx index 882b989bae..b3a75c19e9 100644 --- a/packages/core/src/layout/Page/Page.stories.tsx +++ b/packages/core/src/layout/Page/Page.stories.tsx @@ -15,7 +15,6 @@ */ import React, { useState } from 'react'; -import { pageTheme } from '@backstage/theme'; import { Header, Page, @@ -196,7 +195,7 @@ export const PluginWithData = () => { const [selectedTab, setSelectedTab] = useState(2); return (
- + { export const PluginWithTable = () => { return (
- + diff --git a/packages/core/src/layout/Page/Page.tsx b/packages/core/src/layout/Page/Page.tsx index 4bc1917659..a14f772334 100644 --- a/packages/core/src/layout/Page/Page.tsx +++ b/packages/core/src/layout/Page/Page.tsx @@ -15,7 +15,7 @@ */ import React, { FC } from 'react'; -import { PageTheme } from '@backstage/theme'; +import { BackstageTheme } from '@backstage/theme'; import { makeStyles, ThemeProvider } from '@material-ui/core'; const useStyles = makeStyles(() => ({ @@ -30,13 +30,18 @@ const useStyles = makeStyles(() => ({ })); type Props = { - theme: PageTheme; + themeId: string; }; -export const Page: FC = ({ theme, children }) => { +export const Page: FC = ({ themeId, children }) => { const classes = useStyles(); return ( - ({ ...baseTheme, page: theme })}> + ({ + ...baseTheme, + page: baseTheme.getPageTheme({ themeId }), + })} + >
{children}
 ); diff --git a/packages/core/src/layout/SignInPage/SignInPage.tsx b/packages/core/src/layout/SignInPage/SignInPage.tsx index b2b049d161..ebc9bf278f 100644 --- a/packages/core/src/layout/SignInPage/SignInPage.tsx +++ b/packages/core/src/layout/SignInPage/SignInPage.tsx @@ -19,8 +19,7 @@ import { Page } from '../Page'; import { Header } from '../Header'; import { Content } from '../Content/Content'; import { ContentHeader } from '../ContentHeader/ContentHeader'; -import { BackstageTheme } from '@backstage/theme'; -import { Grid, useTheme } from '@material-ui/core'; +import { Grid } from '@material-ui/core'; import { SignInPageProps, useApi, configApiRef } from '@backstage/core-api'; import { useSignInProviders, getSignInProviders } from './providers'; import { IdentityProviders } from './types'; @@ -39,7 +38,6 @@ export const SignInPage: FC = ({ title, align = 'left', }) => { - const backstageTheme = useTheme(); const configApi = useApi(configApiRef); const classes = useStyles(); @@ -54,7 +52,7 @@ export const SignInPage: FC = ({ } return ( - +
{title && } diff --git a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx index 85250a8569..f755705ac7 100644 --- a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx +++ b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx @@ -23,9 +23,8 @@ import { Progress, useApi, } from '@backstage/core'; -import { BackstageTheme } from '@backstage/theme'; import { catalogApiRef } from '@backstage/plugin-catalog'; -import { Box, useTheme } from '@material-ui/core'; +import { Box } from '@material-ui/core'; import { Alert } from '@material-ui/lab'; import React, { useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; @@ -65,7 +64,6 @@ const EntityPageTitle = ({ title }: EntityPageTitleProps) => ( ); export const ApiEntityPage = () => { - const backstageTheme = useTheme(); const { optionalNamespaceAndName } = useParams() as { optionalNamespaceAndName: string; }; @@ -102,11 +100,7 @@ export const ApiEntityPage = () => { ); return ( - +
} pageTitleOverride={headerTitle} diff --git a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx index 410432d715..b534489487 100644 --- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx @@ -15,8 +15,6 @@ */ import { Header, Page } from '@backstage/core'; -import { BackstageTheme } from '@backstage/theme'; -import { useTheme } from '@material-ui/core'; import React from 'react'; type Props = { @@ -24,14 +22,8 @@ type Props = { }; export const ApiExplorerLayout = ({ children }: Props) => { - const backstageTheme = useTheme(); - return ( - +
{ - const backstageTheme = useTheme(); const greeting = getTimeBasedGreeting(); const profile = useApi(identityApiRef).getProfile(); const userId = useApi(identityApiRef).getUserId(); return ( - +
{ - const backstageTheme = useTheme(); const { optionalNamespaceAndName, kind } = useParams() as { optionalNamespaceAndName: string; kind: string; @@ -89,11 +87,7 @@ export const EntityPageLayout = ({ const showRemovalDialog = () => setConfirmationDialogOpen(true); return ( - +
} pageTitleOverride={headerTitle} diff --git a/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx b/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx index f4baf227db..82954baa86 100644 --- a/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx +++ b/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx @@ -14,15 +14,8 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import React, { ReactNode } from 'react'; -import { - Box, - Button, - Container, - makeStyles, - useTheme, -} from '@material-ui/core'; +import { Box, Button, Container, makeStyles } from '@material-ui/core'; import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; import { Header, Page } from '@backstage/core'; import { CostInsightsThemeProvider } from '../CostInsightsPage/CostInsightsThemeProvider'; @@ -44,13 +37,12 @@ const AlertInstructionsLayout = ({ title, children, }: AlertInstructionsLayoutProps) => { - const backstageTheme = useTheme(); const classes = useStyles(); return ( - +
{ - const backstageTheme = useTheme(); const classes = useStyles(); return ( - +
{ const classes = useStyles(); - const backstageTheme = useTheme(); return ( - +
{ @@ -112,14 +111,8 @@ const labels = ( ); export const NewProjectPage = () => { - const backstageTheme = useTheme(); - return ( - +
{labels}
diff --git a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx index eb86b6fd03..7e44618441 100644 --- a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx +++ b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import { Content, ContentHeader, @@ -36,7 +35,6 @@ import { TableRow, Theme, Typography, - useTheme, } from '@material-ui/core'; import React from 'react'; import { useAsync } from 'react-use'; @@ -148,13 +146,8 @@ const labels = ( ); export const ProjectDetailsPage = () => { - const backstageTheme = useTheme(); return ( - +
{labels}
diff --git a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx index 33b3813c2a..b2148bcfc8 100644 --- a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx +++ b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx @@ -15,7 +15,6 @@ */ // NEEDS WORK -import { BackstageTheme } from '@backstage/theme'; import { Content, ContentHeader, @@ -38,7 +37,6 @@ import { TableRow, Tooltip, Typography, - useTheme, } from '@material-ui/core'; import React from 'react'; import { useAsync } from 'react-use'; @@ -135,14 +133,8 @@ const PageContents = () => { }; export const ProjectListPage = () => { - const backstageTheme = useTheme(); - return ( - +
{labels}
diff --git a/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx b/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx index 3b33320abe..70bf4c8c3f 100644 --- a/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx +++ b/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import React, { FC, useState } from 'react'; import { Content, @@ -29,13 +28,12 @@ import { } from '@backstage/core'; import ClusterTable from '../ClusterTable/ClusterTable'; -import { Button, useTheme } from '@material-ui/core'; +import { Button } from '@material-ui/core'; import { useAsync } from 'react-use'; import { gitOpsApiRef } from '../../api'; import { Alert } from '@material-ui/lab'; const ClusterList: FC<{}> = () => { - const backstageTheme = useTheme(); const api = useApi(gitOpsApiRef); const githubAuth = useApi(githubAuthApiRef); const [githubUsername, setGithubUsername] = useState(String); @@ -92,11 +90,7 @@ const ClusterList: FC<{}> = () => { } return ( - +
diff --git a/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx b/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx index f7205c3326..9b6e5bdb08 100644 --- a/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx +++ b/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import React, { FC, useEffect, useState } from 'react'; import { Content, @@ -26,13 +25,12 @@ import { githubAuthApiRef, } from '@backstage/core'; -import { Link, useTheme } from '@material-ui/core'; +import { Link } from '@material-ui/core'; import { useParams } from 'react-router-dom'; import { gitOpsApiRef, Status } from '../../api'; import { transformRunStatus } from '../ProfileCatalog'; const ClusterPage: FC<{}> = () => { - const backstageTheme = useTheme(); const params = useParams() as { owner: string; repo: string }; const [pollingLog, setPollingLog] = useState(true); @@ -85,11 +83,7 @@ const ClusterPage: FC<{}> = () => { }, [pollingLog, api, params, githubAuth, githubAccessToken, githubUsername]); return ( - +
diff --git a/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx b/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx index fe1e97235a..a70cf97342 100644 --- a/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx +++ b/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import React, { FC, useEffect, useState } from 'react'; import { Header, @@ -37,7 +36,7 @@ import { useApi, githubAuthApiRef, } from '@backstage/core'; -import { TextField, List, ListItem, Link, useTheme } from '@material-ui/core'; +import { TextField, List, ListItem, Link } from '@material-ui/core'; import ClusterTemplateCardList from '../ClusterTemplateCardList'; import ProfileCardList from '../ProfileCardList'; @@ -81,8 +80,6 @@ export const transformRunStatus = (x: Status[]) => { }; const ProfileCatalog: FC<{}> = () => { - const backstageTheme = useTheme(); - // TODO: get data from REST API const [clusterTemplates] = React.useState([ { @@ -261,11 +258,7 @@ const ProfileCatalog: FC<{}> = () => { ]; return ( - +
{ - const backstageTheme = useTheme(); const graphQlBrowseApi = useApi(graphQlBrowseApiRef); const endpoints = useAsync(() => graphQlBrowseApi.getEndpoints()); @@ -60,11 +58,7 @@ export const GraphiQLPage = () => { } return ( - +
diff --git a/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx b/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx index 451383df58..a3e82e79a4 100644 --- a/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx +++ b/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx @@ -14,9 +14,8 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import React, { ReactElement, useEffect, useState } from 'react'; -import { Grid, TabProps, useTheme } from '@material-ui/core'; +import { Grid, TabProps } from '@material-ui/core'; import { Config } from '@backstage/config'; import { CardTab, @@ -102,7 +101,6 @@ const groupResponses = (fetchResponse: FetchResponse[]) => { type KubernetesContentProps = { entity: Entity; children?: React.ReactNode }; export const KubernetesContent = ({ entity }: KubernetesContentProps) => { - const backstageTheme = useTheme(); const kubernetesApi = useApi(kubernetesApiRef); const [kubernetesObjects, setKubernetesObjects] = useState< @@ -149,11 +147,7 @@ export const KubernetesContent = ({ entity }: KubernetesContentProps) => { kubernetesObjects?.items.filter(r => r.errors.length > 0) ?? []; return ( - + {kubernetesObjects === undefined && error === undefined && ( diff --git a/plugins/lighthouse/src/components/AuditList/index.tsx b/plugins/lighthouse/src/components/AuditList/index.tsx index cae1761ecb..117a40a901 100644 --- a/plugins/lighthouse/src/components/AuditList/index.tsx +++ b/plugins/lighthouse/src/components/AuditList/index.tsx @@ -13,11 +13,10 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import React, { useState, useMemo, FC, ReactNode } from 'react'; import { useLocalStorage, useAsync } from 'react-use'; import { useNavigate } from 'react-router-dom'; -import { Grid, Button, useTheme } from '@material-ui/core'; +import { Grid, Button } from '@material-ui/core'; import Alert from '@material-ui/lab/Alert'; import Pagination from '@material-ui/lab/Pagination'; import { @@ -41,7 +40,6 @@ import { createAuditRouteRef } from '../../plugin'; export const LIMIT = 10; const AuditList: FC<{}> = () => { - const backstageTheme = useTheme(); const [dismissedStored] = useLocalStorage(LIGHTHOUSE_INTRO_LOCAL_STORAGE); const [dismissed, setDismissed] = useState(dismissedStored); @@ -95,11 +93,7 @@ const AuditList: FC<{}> = () => { } return ( - +
= () => { }; const ConnectedAuditView = () => { - const backstageTheme = useTheme(); return ( - +
= () => { }; const CreateAudit = () => { - const backstageTheme = useTheme(); return ( - +
= () => { - const backstageTheme = useTheme(); return ( - +
diff --git a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx index 722e2e1964..cd3eb1adbb 100644 --- a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx +++ b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx @@ -14,9 +14,8 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import React, { useState } from 'react'; -import { Grid, makeStyles, useTheme } from '@material-ui/core'; +import { Grid, makeStyles } from '@material-ui/core'; import { InfoCard, Page, @@ -61,7 +60,6 @@ export const RegisterComponentPage = ({ }: { catalogRouteRef: RouteRef; }) => { - const backstageTheme = useTheme(); const classes = useStyles(); const catalogApi = useApi(catalogApiRef); const [formState, setFormState] = useState>( @@ -114,11 +112,7 @@ export const RegisterComponentPage = ({ }; return ( - +
diff --git a/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx b/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx index f219be9615..fe99e70575 100644 --- a/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx +++ b/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx @@ -14,23 +14,16 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; -import { useTheme } from '@material-ui/core'; import React from 'react'; import { Content, Header, Page } from '@backstage/core'; import { RollbarProjectTable } from '../RollbarProjectTable/RollbarProjectTable'; import { useRollbarEntities } from '../../hooks/useRollbarEntities'; export const RollbarHome = () => { - const backstageTheme = useTheme(); const { entities, loading, error } = useRollbarEntities(); return ( - +
{ - const backstageTheme = useTheme(); const { entity } = useCatalogEntity(); return ( - +
diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx index bd70fd9565..d0cb25f254 100644 --- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx +++ b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import { TemplateEntityV1alpha1 } from '@backstage/catalog-model'; import { Content, @@ -29,7 +28,7 @@ import { WarningPanel, } from '@backstage/core'; import { catalogApiRef } from '@backstage/plugin-catalog'; -import { Button, Grid, Link, Typography, useTheme } from '@material-ui/core'; +import { Button, Grid, Link, Typography } from '@material-ui/core'; import React, { useEffect } from 'react'; import { Link as RouterLink } from 'react-router-dom'; import useStaleWhileRevalidate from 'swr'; @@ -49,7 +48,6 @@ const getTemplateCardProps = ( }; export const ScaffolderPage = () => { - const backstageTheme = useTheme(); const catalogApi = useApi(catalogApiRef); const errorApi = useApi(errorApiRef); @@ -67,7 +65,7 @@ export const ScaffolderPage = () => { }, [error, errorApi]); return ( - +
{ - const backstageTheme = useTheme(); const errorApi = useApi(errorApiRef); const catalogApi = useApi(catalogApiRef); const scaffolderApi = useApi(scaffolderApiRef); @@ -146,7 +144,7 @@ export const TemplatePage = () => { } return ( - +
= () => { - const backstageTheme = useTheme(); const [statsFor, setStatsFor] = useState<'12h' | '24h'>('12h'); const toggleStatsFor = () => setStatsFor(statsFor === '12h' ? '12h' : '24h'); const sentryProjectId = 'sample-sentry-project-id'; return ( - +
diff --git a/plugins/tech-radar/src/components/RadarPage.tsx b/plugins/tech-radar/src/components/RadarPage.tsx index d23061b094..d5c4355b0e 100644 --- a/plugins/tech-radar/src/components/RadarPage.tsx +++ b/plugins/tech-radar/src/components/RadarPage.tsx @@ -14,9 +14,8 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import React from 'react'; -import { Grid, useTheme } from '@material-ui/core'; +import { Grid } from '@material-ui/core'; import { Content, ContentHeader, @@ -40,13 +39,8 @@ export const RadarPage = ({ pageTitle, ...props }: TechRadarPageProps): JSX.Element => { - const backstageTheme = useTheme(); return ( - +
diff --git a/plugins/techdocs/src/reader/components/TechDocsHome.tsx b/plugins/techdocs/src/reader/components/TechDocsHome.tsx index 016f6df4f0..0408a540ca 100644 --- a/plugins/techdocs/src/reader/components/TechDocsHome.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsHome.tsx @@ -14,11 +14,10 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import React from 'react'; import { useAsync } from 'react-use'; import { useNavigate, generatePath } from 'react-router-dom'; -import { Grid, useTheme } from '@material-ui/core'; +import { Grid } from '@material-ui/core'; import { ItemCard, Progress, @@ -31,7 +30,6 @@ import { catalogApiRef } from '@backstage/plugin-catalog'; import { rootDocsRouteRef } from '../../plugin'; export const TechDocsHome = () => { - const backstageTheme = useTheme(); const catalogApi = useApi(catalogApiRef); const navigate = useNavigate(); @@ -44,11 +42,7 @@ export const TechDocsHome = () => { if (loading) { return ( - +
{ if (error) { return ( - +
{ } return ( - +
{ - const backstageTheme = useTheme(); const [documentReady, setDocumentReady] = useState(false); const { namespace, kind, name } = useParams(); @@ -48,11 +45,7 @@ export const TechDocsPage = () => { }; return ( - + { - const backstageTheme = useTheme(); const [activeTab, setActiveTab] = useState(0); const onTabChange = (index: number) => { setActiveTab(index); @@ -46,11 +43,7 @@ export const SettingsPage = ({ providerSettings }: Props) => { ]; return ( - +
{content[activeTab]} diff --git a/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx b/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx index 7c68ab96bf..7b94024948 100644 --- a/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx +++ b/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import React from 'react'; import { Link as RouterLink } from 'react-router-dom'; import { @@ -24,7 +23,6 @@ import { ListItem, ListItemText, Link, - useTheme, } from '@material-ui/core'; import { Content, @@ -40,17 +38,12 @@ import { } from '@backstage/core'; const WelcomePage = () => { - const backstageTheme = useTheme(); const appTitle = useApi(configApiRef).getOptionalString('app.title') ?? 'Backstage'; const profile = { givenName: '' }; return ( - +
Date: Thu, 15 Oct 2020 09:37:13 +0530 Subject: [PATCH 18/21] chore: update example component --- .../tutorials/quickstart-app-plugin/ExampleComponent.md | 7 ++----- .../components/ExampleComponent/ExampleComponent.tsx.hbs | 3 +-- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md b/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md index 83b18bf4c2..5d633544e3 100644 --- a/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md +++ b/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md @@ -3,14 +3,12 @@ ExampleComponent.tsx reference ```tsx -import { BackstageTheme } from '@backstage/theme'; import React, { FC } from 'react'; -import { Typography, Grid, useTheme } from '@material-ui/core'; +import { Typography, Grid } from '@material-ui/core'; import { InfoCard, Header, Page, - pageTheme, Content, ContentHeader, HeaderLabel, @@ -21,13 +19,12 @@ import { useApi } from '@backstage/core-api'; import ExampleFetchComponent from '../ExampleFetchComponent'; const ExampleComponent: FC<{}> = () => { - const backstageTheme = useTheme(); const identityApi = useApi(identityApiRef); const userId = identityApi.getUserId(); const profile = identityApi.getProfile(); return ( - +
= () => { return ( - +
From fe4926cb7591ab26e0fe7e930b0d421a7138bab1 Mon Sep 17 00:00:00 2001 From: Marvin9 Date: Thu, 15 Oct 2020 13:52:18 +0530 Subject: [PATCH 19/21] chore: remove explicit return --- .../ExampleComponent/ExampleComponent.tsx.hbs | 51 ++++--- packages/core/src/layout/Header/Header.tsx | 134 +++++++++--------- .../ApiExplorerPage/ApiExplorerLayout.tsx | 22 ++- .../NewProjectPage/NewProjectPage.tsx | 32 ++--- .../ProjectDetailsPage/ProjectDetailsPage.tsx | 28 ++-- .../ProjectListPage/ProjectListPage.tsx | 34 +++-- .../src/components/AuditView/index.tsx | 28 ++-- .../src/components/CreateAudit/index.tsx | 27 ++-- .../NewRelicComponent/NewRelicComponent.tsx | 39 +++-- .../tech-radar/src/components/RadarPage.tsx | 45 +++--- 10 files changed, 207 insertions(+), 233 deletions(-) diff --git a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs index 616f2cd2fc..e08f1650d5 100644 --- a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs +++ b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs @@ -11,31 +11,30 @@ import { } from '@backstage/core'; import ExampleFetchComponent from '../ExampleFetchComponent'; -const ExampleComponent: FC<{}> = () => { - return ( - -
- - -
- - - A description of your plugin goes here. - - - - - - All content should be wrapped in a card like this. - - - - - - +const ExampleComponent: FC<{}> = () => ( + +
+ + +
+ + + A description of your plugin goes here. + + + + + + All content should be wrapped in a card like this. + + - - - ); -} + + + + + + +); + export default ExampleComponent; diff --git a/packages/core/src/layout/Header/Header.tsx b/packages/core/src/layout/Header/Header.tsx index 25afb5c9d1..ec4a3db6e2 100644 --- a/packages/core/src/layout/Header/Header.tsx +++ b/packages/core/src/layout/Header/Header.tsx @@ -22,76 +22,73 @@ import { Tooltip, makeStyles, Breadcrumbs, - useTheme, } from '@material-ui/core'; import ChevronRightIcon from '@material-ui/icons/ChevronRight'; import { BackstageTheme } from '@backstage/theme'; -const useStyles = makeStyles( - theme => ({ - header: { - gridArea: 'pageHeader', - padding: theme.spacing(3), - minHeight: 118, - width: '100%', - boxShadow: '0 0 8px 3px rgba(20, 20, 20, 0.3)', - position: 'relative', - zIndex: 100, - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - justifyContent: 'flex-end', - alignItems: 'center', - backgroundImage: props => props.backgroundImage, - backgroundPosition: 'center', - backgroundSize: 'cover', - }, - leftItemsBox: { - flex: '1 1 auto', - }, - rightItemsBox: { - flex: '0 1 auto', - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - alignItems: 'center', - marginRight: theme.spacing(1), - }, - title: { - color: theme.palette.bursts.fontColor, - lineHeight: '1.0em', - wordBreak: 'break-all', - fontSize: 'calc(24px + 6 * ((100vw - 320px) / 680))', - marginBottom: theme.spacing(1), - }, - subtitle: { - color: 'rgba(255, 255, 255, 0.8)', - lineHeight: '1.0em', - }, - type: { - textTransform: 'uppercase', - fontSize: 11, - opacity: 0.8, - marginBottom: theme.spacing(1), - color: theme.palette.bursts.fontColor, - }, - breadcrumb: { - fontSize: 'calc(15px + 1 * ((100vw - 320px) / 680))', - color: theme.palette.bursts.fontColor, - }, - breadcrumbType: { - fontSize: 'inherit', - opacity: 0.7, - marginRight: -theme.spacing(0.3), - marginBottom: theme.spacing(0.3), - }, - breadcrumbTitle: { - fontSize: 'inherit', - marginLeft: -theme.spacing(0.3), - marginBottom: theme.spacing(0.3), - }, - }), -); +const useStyles = makeStyles(theme => ({ + header: { + gridArea: 'pageHeader', + padding: theme.spacing(3), + minHeight: 118, + width: '100%', + boxShadow: '0 0 8px 3px rgba(20, 20, 20, 0.3)', + position: 'relative', + zIndex: 100, + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'flex-end', + alignItems: 'center', + backgroundImage: theme.page.backgroundImage, + backgroundPosition: 'center', + backgroundSize: 'cover', + }, + leftItemsBox: { + flex: '1 1 auto', + }, + rightItemsBox: { + flex: '0 1 auto', + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + alignItems: 'center', + marginRight: theme.spacing(1), + }, + title: { + color: theme.palette.bursts.fontColor, + lineHeight: '1.0em', + wordBreak: 'break-all', + fontSize: 'calc(24px + 6 * ((100vw - 320px) / 680))', + marginBottom: theme.spacing(1), + }, + subtitle: { + color: 'rgba(255, 255, 255, 0.8)', + lineHeight: '1.0em', + }, + type: { + textTransform: 'uppercase', + fontSize: 11, + opacity: 0.8, + marginBottom: theme.spacing(1), + color: theme.palette.bursts.fontColor, + }, + breadcrumb: { + fontSize: 'calc(15px + 1 * ((100vw - 320px) / 680))', + color: theme.palette.bursts.fontColor, + }, + breadcrumbType: { + fontSize: 'inherit', + opacity: 0.7, + marginRight: -theme.spacing(0.3), + marginBottom: theme.spacing(0.3), + }, + breadcrumbTitle: { + fontSize: 'inherit', + marginLeft: -theme.spacing(0.3), + marginBottom: theme.spacing(0.3), + }, +})); type HeaderStyles = ReturnType; @@ -200,10 +197,7 @@ export const Header: FC = ({ type, typeLink, }) => { - const backstageTheme = useTheme(); - const classes = useStyles({ - backgroundImage: backstageTheme.page.backgroundImage, - }); + const classes = useStyles(); const documentTitle = pageTitleOverride || title; const pageTitle = title || pageTitleOverride; const titleTemplate = `${documentTitle} | %s | Backstage`; diff --git a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx index b534489487..0720ecf45b 100644 --- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx @@ -21,15 +21,13 @@ type Props = { children?: React.ReactNode; }; -export const ApiExplorerLayout = ({ children }: Props) => { - return ( - -
- {children} - - ); -}; +export const ApiExplorerLayout = ({ children }: Props) => ( + +
+ {children} + +); diff --git a/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx b/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx index 94cf6ce920..462aa17099 100644 --- a/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx +++ b/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx @@ -110,20 +110,18 @@ const labels = ( ); -export const NewProjectPage = () => { - return ( - -
- {labels} -
- - - - This plugin allows you to view and interact with your gcp projects. - - - - - - ); -}; +export const NewProjectPage = () => ( + +
+ {labels} +
+ + + + This plugin allows you to view and interact with your gcp projects. + + + + + +); diff --git a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx index 7e44618441..0c6350b849 100644 --- a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx +++ b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx @@ -145,18 +145,16 @@ const labels = ( ); -export const ProjectDetailsPage = () => { - return ( - -
- {labels} -
- - - Support Button - - - - - ); -}; +export const ProjectDetailsPage = () => ( + +
+ {labels} +
+ + + Support Button + + + + +); diff --git a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx index b2148bcfc8..b911040535 100644 --- a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx +++ b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx @@ -132,21 +132,19 @@ const PageContents = () => { ); }; -export const ProjectListPage = () => { - return ( - -
- {labels} -
- - - - All your software catalog entities - - - - - ); -}; +export const ProjectListPage = () => ( + +
+ {labels} +
+ + + + All your software catalog entities + + + + +); diff --git a/plugins/lighthouse/src/components/AuditView/index.tsx b/plugins/lighthouse/src/components/AuditView/index.tsx index 4813be8bff..ac38a329f1 100644 --- a/plugins/lighthouse/src/components/AuditView/index.tsx +++ b/plugins/lighthouse/src/components/AuditView/index.tsx @@ -191,20 +191,16 @@ export const AuditViewContent: FC<{}> = () => { ); }; -const ConnectedAuditView = () => { - return ( - -
- - -
- - - - - ); -}; +const ConnectedAuditView = () => ( + +
+ + +
+ + + + +); + export default ConnectedAuditView; diff --git a/plugins/lighthouse/src/components/CreateAudit/index.tsx b/plugins/lighthouse/src/components/CreateAudit/index.tsx index ac4d2a2e3c..372992a718 100644 --- a/plugins/lighthouse/src/components/CreateAudit/index.tsx +++ b/plugins/lighthouse/src/components/CreateAudit/index.tsx @@ -168,21 +168,16 @@ export const CreateAuditContent: FC<{}> = () => { ); }; -const CreateAudit = () => { - return ( - -
- - -
- - - - - ); -}; +const CreateAudit = () => ( + +
+ + +
+ + + + +); export default CreateAudit; diff --git a/plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx b/plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx index 5dea8b7ee6..81e28a8c80 100644 --- a/plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx +++ b/plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx @@ -26,25 +26,24 @@ import { } from '@backstage/core'; import NewRelicFetchComponent from '../NewRelicFetchComponent'; -const NewRelicComponent: FC<{}> = () => { - return ( - -
- -
- - - - New Relic Application Performance Monitoring - - - - - - +const NewRelicComponent: FC<{}> = () => ( + +
+ +
+ + + + New Relic Application Performance Monitoring + + + + + - - - ); -}; + + + +); + export default NewRelicComponent; diff --git a/plugins/tech-radar/src/components/RadarPage.tsx b/plugins/tech-radar/src/components/RadarPage.tsx index d5c4355b0e..84cfef3213 100644 --- a/plugins/tech-radar/src/components/RadarPage.tsx +++ b/plugins/tech-radar/src/components/RadarPage.tsx @@ -38,30 +38,29 @@ export const RadarPage = ({ subtitle, pageTitle, ...props -}: TechRadarPageProps): JSX.Element => { - return ( - -
- - -
- - - - This is used for visualizing the official guidelines of different - areas of software development such as languages, frameworks, - infrastructure and processes. - - - - - - +}: TechRadarPageProps): JSX.Element => ( + +
+ + +
+ + + + This is used for visualizing the official guidelines of different + areas of software development such as languages, frameworks, + infrastructure and processes. + + + + + - - - ); -}; + + + +); + RadarPage.defaultProps = { title: 'Tech Radar', subtitle: 'Pick the recommended technologies for your projects', From 53104074ee594c02c083c10f3b17c38759157c35 Mon Sep 17 00:00:00 2001 From: Marvin9 Date: Thu, 15 Oct 2020 14:04:20 +0530 Subject: [PATCH 20/21] feat: allow passing pageTheme in createThemeOptions --- packages/theme/src/baseTheme.ts | 3 +-- packages/theme/src/themes.ts | 3 +++ packages/theme/src/types.ts | 1 + 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/theme/src/baseTheme.ts b/packages/theme/src/baseTheme.ts index 1f0e01586e..640476c487 100644 --- a/packages/theme/src/baseTheme.ts +++ b/packages/theme/src/baseTheme.ts @@ -24,8 +24,6 @@ import { SimpleThemeOptions, } from './types'; -import { pageTheme } from './pageTheme'; - const DEFAULT_FONT_FAMILY = '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif'; @@ -36,6 +34,7 @@ export function createThemeOptions( palette, fontFamily = DEFAULT_FONT_FAMILY, defaultPageTheme, + pageTheme, } = options; if (!pageTheme[defaultPageTheme]) { diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts index 3838ed01cc..2c06f387b8 100644 --- a/packages/theme/src/themes.ts +++ b/packages/theme/src/themes.ts @@ -15,6 +15,7 @@ */ import { createTheme } from './baseTheme'; +import { pageTheme } from './pageTheme'; import { yellow } from '@material-ui/core/colors'; export const lightTheme = createTheme({ @@ -74,6 +75,7 @@ export const lightTheme = createTheme({ }, }, defaultPageTheme: 'home', + pageTheme, }); export const darkTheme = createTheme({ @@ -133,4 +135,5 @@ export const darkTheme = createTheme({ }, }, defaultPageTheme: 'home', + pageTheme, }); diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index e551208f3f..696ccf586f 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -94,6 +94,7 @@ export interface BackstageThemeOptions extends ThemeOptions { export type SimpleThemeOptions = { palette: BackstagePaletteOptions; defaultPageTheme: string; + pageTheme: Record; fontFamily?: string; }; From 973500dd8ddfa2c3f638f9cfbf54ab87426138b6 Mon Sep 17 00:00:00 2001 From: Marvin9 Date: Thu, 15 Oct 2020 19:34:57 +0530 Subject: [PATCH 21/21] chore: make pageTheme optional & provide default value --- packages/theme/src/baseTheme.ts | 3 ++- packages/theme/src/types.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/theme/src/baseTheme.ts b/packages/theme/src/baseTheme.ts index 640476c487..b0797c6506 100644 --- a/packages/theme/src/baseTheme.ts +++ b/packages/theme/src/baseTheme.ts @@ -23,6 +23,7 @@ import { BackstageThemeOptions, SimpleThemeOptions, } from './types'; +import { pageTheme as defaultPageThemes } from './pageTheme'; const DEFAULT_FONT_FAMILY = '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif'; @@ -34,7 +35,7 @@ export function createThemeOptions( palette, fontFamily = DEFAULT_FONT_FAMILY, defaultPageTheme, - pageTheme, + pageTheme = defaultPageThemes, } = options; if (!pageTheme[defaultPageTheme]) { diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index 696ccf586f..1c6ccc0754 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -94,7 +94,7 @@ export interface BackstageThemeOptions extends ThemeOptions { export type SimpleThemeOptions = { palette: BackstagePaletteOptions; defaultPageTheme: string; - pageTheme: Record; + pageTheme?: Record; fontFamily?: string; };