From 326aa376ef3c4e0ea846b7981180e97ab541ef95 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Tue, 25 Apr 2023 22:47:00 +0200 Subject: [PATCH 01/83] catalog-react: humanizeEntity add defaultName Signed-off-by: Vincenzo Scamporlino --- .../components/EntityRefLink/humanize.test.ts | 18 ++++++++++------ .../src/components/EntityRefLink/humanize.ts | 21 +++++++------------ 2 files changed, 19 insertions(+), 20 deletions(-) diff --git a/plugins/catalog-react/src/components/EntityRefLink/humanize.test.ts b/plugins/catalog-react/src/components/EntityRefLink/humanize.test.ts index e7d1649a29..1182a7778d 100644 --- a/plugins/catalog-react/src/components/EntityRefLink/humanize.test.ts +++ b/plugins/catalog-react/src/components/EntityRefLink/humanize.test.ts @@ -215,9 +215,12 @@ describe('humanizeEntityRef', () => { describe('humanizeEntity', () => { it('gives a readable name when one is provided at metadata.title', () => { expect( - humanizeEntity({ - metadata: { name: 'my-entity', title: 'My Title' }, - } as Entity), + humanizeEntity( + { + metadata: { name: 'my-entity', title: 'My Title' }, + } as Entity, + 'default', + ), ).toBe('My Title'); }); @@ -257,13 +260,16 @@ describe('humanizeEntity', () => { ])( 'gives a readable name for kind %s when one is provided at spec.profile.displayName', (_, entity: Entity, expected) => { - expect(humanizeEntity(entity)).toBe(expected); + expect(humanizeEntity(entity, 'default')).toBe(expected); }, ); it('should pass through to humanizeEntityRef when nothing matches', () => { expect( - humanizeEntity({ kind: 'Group', metadata: { name: 'test' } } as Entity), - ).toBe('group:test'); + humanizeEntity( + { kind: 'Group', metadata: { name: 'test' } } as Entity, + 'default', + ), + ).toBe('default'); }); }); diff --git a/plugins/catalog-react/src/components/EntityRefLink/humanize.ts b/plugins/catalog-react/src/components/EntityRefLink/humanize.ts index 7f1501280a..478f0dce9d 100644 --- a/plugins/catalog-react/src/components/EntityRefLink/humanize.ts +++ b/plugins/catalog-react/src/components/EntityRefLink/humanize.ts @@ -25,7 +25,8 @@ import get from 'lodash/get'; * @param defaultNamespace - if set to false then namespace is never omitted, * if set to string which matches namespace of entity then omitted * - * @public */ + * @public + **/ export function humanizeEntityRef( entityRef: Entity | CompoundEntityRef, opts?: { @@ -73,27 +74,19 @@ export function humanizeEntityRef( * If an entity is either User or Group, this will be its `spec.profile.displayName`. * Otherwise, this is `metadata.title`. * - * If neither of those are found or populated, fallback to `humanizeEntityRef`. + * If neither of those are found or populated, fallback to `defaultName`. * * @param entity - Entity to convert. - * @param opts - If entity readable name is not available, opts will be used to specify humanizeEntityRef options. - * @returns Readable name, defaults to unique identifier. + * @param defaultName - If entity readable name is not available, `defaultName` will be returned. + * @returns Readable name, defaults to `defaultName`. * - * @public */ -export function humanizeEntity( - entity: Entity, - opts?: { - defaultKind?: string; - defaultNamespace?: string | false; - }, -) { +export function humanizeEntity(entity: Entity, defaultName: string) { for (const path of ['spec.profile.displayName', 'metadata.title']) { const value = get(entity, path); if (value && typeof value === 'string') { return value; } } - - return humanizeEntityRef(entity, opts); + return defaultName; } From 1271c0f71a31e784f48643e0b2b012e58451d522 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Tue, 25 Apr 2023 22:49:37 +0200 Subject: [PATCH 02/83] catalog-react: EntityOwnerPicker paginate entities Signed-off-by: Vincenzo Scamporlino --- plugins/catalog-react/package.json | 1 + .../EntityOwnerPicker.test.tsx | 169 ++++++------ .../EntityOwnerPicker/EntityOwnerPicker.tsx | 243 +++++++++--------- yarn.lock | 17 ++ 4 files changed, 217 insertions(+), 213 deletions(-) diff --git a/plugins/catalog-react/package.json b/plugins/catalog-react/package.json index d5808553cb..ce3e5db783 100644 --- a/plugins/catalog-react/package.json +++ b/plugins/catalog-react/package.json @@ -60,6 +60,7 @@ "@material-ui/core": "^4.12.2", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.61", + "@react-hookz/web": "^23.0.0", "@types/react": "^16.13.1 || ^17.0.0", "classnames": "^2.2.6", "jwt-decode": "^3.1.0", diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.test.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.test.tsx index e4dc322c7c..86101d3579 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.test.tsx @@ -14,8 +14,8 @@ * limitations under the License. */ -import { Entity, stringifyEntityRef } from '@backstage/catalog-model'; -import { fireEvent, screen } from '@testing-library/react'; +import { Entity } from '@backstage/catalog-model'; +import { fireEvent, screen, waitFor } from '@testing-library/react'; import React from 'react'; import { MockEntityListContextProvider } from '../../testUtils/providers'; import { EntityOwnerFilter } from '../../filters'; @@ -28,8 +28,9 @@ import { } from '@backstage/test-utils'; import { catalogApiRef, CatalogApi } from '../..'; import { errorApiRef } from '@backstage/core-plugin-api'; +import { QueryEntitiesCursorRequest } from '@backstage/catalog-client'; -const ownerEntities: Entity[] = [ +const ownerEntitiesBatch1: Entity[] = [ { apiVersion: '1', kind: 'Group', @@ -68,64 +69,52 @@ const ownerEntities: Entity[] = [ }, ]; -const sampleEntities: Entity[] = [ +const ownerEntitiesBatch2: Entity[] = [ { apiVersion: '1', - kind: 'Component', + kind: 'Group', metadata: { - name: 'component-1', + name: 'some-owner-batch-2', }, - relations: [ - { - type: 'ownedBy', - targetRef: 'group:default/some-owner', - }, - { - type: 'ownedBy', - targetRef: 'group:default/some-owner-2', - }, - ], }, { apiVersion: '1', - kind: 'Component', + kind: 'Group', metadata: { - name: 'component-2', + name: 'some-owner-2-batch-2', }, - relations: [ - { - type: 'ownedBy', - targetRef: 'group:default/another-owner', + spec: { + profile: { + displayName: 'Some Owner Batch 2', }, - { - type: 'ownedBy', - targetRef: 'group:test-namespace/another-owner-2', - }, - ], + }, }, { apiVersion: '1', - kind: 'Component', + kind: 'Group', metadata: { - name: 'component-3', + name: 'another-owner-batch-2', + title: 'Another Owner Batch 2', + }, + }, + { + apiVersion: '1', + kind: 'Group', + metadata: { + namespace: 'test-namespace', + name: 'another-owner-2-batch-2', + title: 'Another Owner in Another Namespace Batch 2', }, - relations: [ - { - type: 'ownedBy', - targetRef: 'group:default/some-owner', - }, - ], }, ]; -const getEntitiesByRefs = jest.fn(async ({ entityRefs }) => ({ - items: entityRefs.map((e: string) => - ownerEntities.find(f => stringifyEntityRef(f) === e), - ), -})); +const mockedQueryEntities: jest.MockedFn = + jest.fn(); + const mockCatalogApi: Partial = { - getEntitiesByRefs, + queryEntities: mockedQueryEntities, }; + const mockErrorApi = new MockErrorApi(); describe('', () => { @@ -134,12 +123,33 @@ describe('', () => { [errorApiRef, mockErrorApi], ); + beforeEach(() => { + jest.resetAllMocks(); + + mockedQueryEntities.mockImplementation(async request => { + const totalItems = + ownerEntitiesBatch1.length + ownerEntitiesBatch2.length; + if ((request as QueryEntitiesCursorRequest).cursor) { + return { + items: ownerEntitiesBatch2, + pageInfo: {}, + totalItems, + }; + } + return { + items: ownerEntitiesBatch1, + pageInfo: { + nextCursor: 'nextCursor', + }, + totalItems, + }; + }); + }); + it('renders all owners', async () => { await renderWithEffects( - + , @@ -147,36 +157,36 @@ describe('', () => { expect(screen.getByText('Owner')).toBeInTheDocument(); fireEvent.click(screen.getByTestId('owner-picker-expand')); + + await waitFor(() => + expect(screen.getByText('Another Owner')).toBeInTheDocument(), + ); + [ - 'Another Owner', 'some-owner', 'Some Owner 2', 'Another Owner in Another Namespace', ].forEach(owner => { expect(screen.getByText(owner)).toBeInTheDocument(); }); - }); - it('renders unique owners in alphabetical order', async () => { - await renderWithEffects( - - - - - , + expect(mockedQueryEntities).toHaveBeenCalledTimes(1); + + fireEvent.scroll(screen.getByTestId('owner-picker-listbox')); + + await waitFor(() => + expect(screen.getByText('some-owner-batch-2')).toBeInTheDocument(), ); - expect(screen.getByText('Owner')).toBeInTheDocument(); - fireEvent.click(screen.getByTestId('owner-picker-expand')); + [ + 'some-owner-batch-2', + 'Some Owner Batch 2', + 'Another Owner in Another Namespace Batch 2', + ].forEach(owner => { + expect(screen.getByText(owner)).toBeInTheDocument(); + }); - expect(screen.getAllByRole('option').map(o => o.textContent)).toEqual([ - 'Another Owner', - 'Another Owner in Another Namespace', - 'some-owner', - 'Some Owner 2', - ]); + expect(mockedQueryEntities).toHaveBeenCalledTimes(2); }); it('respects the query parameter filter value', async () => { @@ -186,8 +196,6 @@ describe('', () => { ', () => { @@ -222,6 +228,8 @@ describe('', () => { }); fireEvent.click(screen.getByTestId('owner-picker-expand')); + await waitFor(() => screen.getByText('some-owner')); + fireEvent.click(screen.getByText('some-owner')); expect(updateFilters).toHaveBeenLastCalledWith({ owners: new EntityOwnerFilter(['group:default/some-owner']), @@ -234,8 +242,6 @@ describe('', () => { ', () => { }); fireEvent.click(screen.getByTestId('owner-picker-expand')); - expect(screen.getByLabelText('some-owner')).toBeChecked(); + await waitFor(() => + expect(screen.getByLabelText('some-owner')).toBeChecked(), + ); fireEvent.click(screen.getByLabelText('some-owner')); expect(updateFilters).toHaveBeenLastCalledWith({ @@ -265,7 +273,6 @@ describe('', () => { value={{ updateFilters, queryParameters: { owners: ['team-a'] }, - backendEntities: sampleEntities, }} > @@ -281,7 +288,6 @@ describe('', () => { value={{ updateFilters, queryParameters: { owners: ['team-b'] }, - backendEntities: sampleEntities, }} > @@ -292,23 +298,4 @@ describe('', () => { owners: new EntityOwnerFilter(['group:default/team-b']), }); }); - it('removes owners from filters if there are none available', async () => { - const updateFilters = jest.fn(); - await renderWithEffects( - - - - - , - ); - expect(updateFilters).toHaveBeenLastCalledWith({ - owners: undefined, - }); - }); }); diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx index 8c4f2bfea0..e5ca1b86f4 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx @@ -14,17 +14,11 @@ * limitations under the License. */ -import { - Entity, - parseEntityRef, - RELATION_OWNED_BY, - stringifyEntityRef, -} from '@backstage/catalog-model'; +import { Entity, stringifyEntityRef } from '@backstage/catalog-model'; import { Box, Checkbox, FormControlLabel, - makeStyles, TextField, Typography, } from '@material-ui/core'; @@ -35,38 +29,69 @@ import { Autocomplete } from '@material-ui/lab'; import React, { useEffect, useMemo, useState } from 'react'; import { useEntityList } from '../../hooks/useEntityListProvider'; import { EntityOwnerFilter } from '../../filters'; -import { getEntityRelations } from '../../utils'; -import useAsync from 'react-use/lib/useAsync'; -import { errorApiRef, useApi } from '@backstage/core-plugin-api'; +import { useApi } from '@backstage/core-plugin-api'; import { catalogApiRef } from '../../api'; -import { humanizeEntity, humanizeEntityRef } from '../EntityRefLink/humanize'; +import useAsyncFn from 'react-use/lib/useAsyncFn'; +import { useDebouncedEffect } from '@react-hookz/web'; +import PersonIcon from '@material-ui/icons/Person'; +import GroupIcon from '@material-ui/icons/Group'; +import { humanizeEntity } from '../EntityRefLink/humanize'; /** @public */ export type CatalogReactEntityOwnerPickerClassKey = 'input'; -const useStyles = makeStyles( - { - input: {}, - }, - { - name: 'CatalogReactEntityOwnerPicker', - }, -); - const icon = ; const checkedIcon = ; /** @public */ export const EntityOwnerPicker = () => { - const classes = useStyles(); const { updateFilters, - backendEntities, filters, queryParameters: { owners: ownersParameter }, } = useEntityList(); + const catalogApi = useApi(catalogApiRef); - const errorApi = useApi(errorApiRef); + const [text, setText] = useState(''); + + const [{ value, loading }, handleFetch] = useAsyncFn( + async (request: { text: string } | { cursor: string; prev: Entity[] }) => { + const initialRequest = request as { text: string }; + const cursorRequest = request as { cursor: string; prev: Entity[] }; + const limit = 20; + + if (cursorRequest.cursor) { + const response = await catalogApi.queryEntities({ + cursor: cursorRequest.cursor, + limit, + }); + return { + ...response, + items: [...cursorRequest.prev, ...response.items], + }; + } + + return catalogApi.queryEntities({ + fullTextFilter: { + term: initialRequest.text || '', + fields: [ + 'metadata.name', + 'kind', + 'spec.profile.displayname', + 'metadata.title', + ], + }, + filter: { kind: ['User', 'Group'] }, + orderFields: [{ field: 'metadata.name', order: 'asc' }], + limit, + }); + }, + [text], + ); + + useDebouncedEffect(() => handleFetch({ text }), [text], 250); + + const availableOwners = value?.items || []; const queryParamOwners = useMemo( () => [ownersParameter].flat().filter(Boolean) as string[], @@ -74,72 +99,9 @@ export const EntityOwnerPicker = () => { ); const [selectedOwners, setSelectedOwners] = useState( - queryParamOwners.length - ? new EntityOwnerFilter(queryParamOwners).values - : filters.owners?.values ?? [], + queryParamOwners.length ? queryParamOwners : filters.owners?.values ?? [], ); - const { - loading, - error, - value: ownerEntities, - } = useAsync(async () => { - const ownerEntityRefs = [ - ...new Set( - backendEntities - .flatMap((e: Entity) => - getEntityRelations(e, RELATION_OWNED_BY).map(o => - stringifyEntityRef(o), - ), - ) - .filter(Boolean) as string[], - ), - ]; - const { items: ownerEntitiesOrNull } = await catalogApi.getEntitiesByRefs({ - entityRefs: ownerEntityRefs, - fields: [ - 'kind', - 'metadata.name', - 'metadata.title', - 'metadata.namespace', - 'spec.profile.displayName', - ], - }); - const owners = ownerEntitiesOrNull.map((entity, index) => { - if (entity) { - return { - label: humanizeEntity(entity, { defaultKind: 'Group' }), - entityRef: stringifyEntityRef(entity), - }; - } - return { - label: humanizeEntityRef(parseEntityRef(ownerEntityRefs[index]), { - defaultKind: 'group', - }), - entityRef: ownerEntityRefs[index], - }; - }); - - return owners.sort((a, b) => - a.label.localeCompare(b.label, 'en-US', { - ignorePunctuation: true, - caseFirst: 'upper', - }), - ); - }, [backendEntities]); - - useEffect(() => { - if (error) { - errorApi.post( - { - ...error, - message: `EntityOwnerPicker failed to initialize: ${error.message}`, - }, - {}, - ); - } - }, [error, errorApi]); - // Set selected owners on query parameter updates; this happens at initial page load and from // external updates to the page location. useEffect(() => { @@ -150,17 +112,12 @@ export const EntityOwnerPicker = () => { }, [queryParamOwners]); useEffect(() => { - if (!loading && ownerEntities) { - updateFilters({ - owners: - selectedOwners.length && ownerEntities.length - ? new EntityOwnerFilter(selectedOwners) - : undefined, - }); - } - }, [selectedOwners, updateFilters, ownerEntities, loading]); - - if (!loading && !ownerEntities?.length) return null; + updateFilters({ + owners: selectedOwners.length + ? new EntityOwnerFilter(selectedOwners) + : undefined, + }); + }, [selectedOwners, updateFilters]); return ( @@ -170,38 +127,80 @@ export const EntityOwnerPicker = () => { multiple disableCloseOnSelect loading={loading} - options={ownerEntities || []} - value={ - ownerEntities?.filter(e => - selectedOwners.some((f: string) => f === e.entityRef), - ) ?? [] - } - onChange={(_: object, value: { entityRef: string }[]) => - setSelectedOwners(value.map(e => e.entityRef)) - } - getOptionLabel={option => option.label} - renderOption={(option, { selected }) => ( - - } - onClick={event => event.preventDefault()} - label={option.label} - /> - )} + options={availableOwners} + value={selectedOwners as unknown as Entity[]} + getOptionSelected={(o, v) => { + if (typeof v === 'string') { + return stringifyEntityRef(o) === v; + } + return o === v; + }} + onChange={(_: object, owners) => { + setText(''); + setSelectedOwners( + owners.map(e => + typeof e === 'string' ? e : stringifyEntityRef(e), + ), + ); + }} + filterOptions={x => x} + renderOption={(entity, { selected }) => { + const isGroup = entity.kind === 'Group'; + + return ( + + } + onClick={event => event.preventDefault()} + label={ + + {isGroup ? ( + + ) : ( + + )} +   + {humanizeEntity(entity, entity.metadata.name)} + + } + /> + ); + }} size="small" popupIcon={} renderInput={params => ( { + setText(e.currentTarget.value); + }} variant="outlined" /> )} + ListboxProps={{ + onScroll: (e: React.MouseEvent) => { + const element = e.currentTarget; + const hasReachedEnd = + Math.abs( + element.scrollHeight - + element.clientHeight - + element.scrollTop, + ) < 1; + + if (hasReachedEnd && value?.pageInfo.nextCursor) { + handleFetch({ + cursor: value.pageInfo.nextCursor, + prev: value.items, + }); + } + }, + 'data-testid': 'owner-picker-listbox', + }} /> diff --git a/yarn.lock b/yarn.lock index f91790c2a5..beab34f402 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5823,6 +5823,7 @@ __metadata: "@material-ui/core": ^4.12.2 "@material-ui/icons": ^4.9.1 "@material-ui/lab": 4.0.0-alpha.61 + "@react-hookz/web": ^23.0.0 "@testing-library/dom": ^8.0.0 "@testing-library/jest-dom": ^5.10.1 "@testing-library/react": ^12.1.3 @@ -13863,6 +13864,22 @@ __metadata: languageName: node linkType: hard +"@react-hookz/web@npm:^23.0.0": + version: 23.0.0 + resolution: "@react-hookz/web@npm:23.0.0" + dependencies: + "@react-hookz/deep-equal": ^1.0.4 + peerDependencies: + js-cookie: ^3.0.1 + react: ^16.8 || ^17 || ^18 + react-dom: ^16.8 || ^17 || ^18 + peerDependenciesMeta: + js-cookie: + optional: true + checksum: 230bff62291bcafa65e0b9adcc3f0769fd63fabc226c77149e7797d1ea67362e9ad581ceff3cdfe2949698798d2deefb223c05bdfed1e465b5d92298d48cf3e5 + languageName: node + linkType: hard + "@remix-run/router@npm:1.3.2": version: 1.3.2 resolution: "@remix-run/router@npm:1.3.2" From cb4c15989b6bfee4903a1881df56bda4c2dcecdf Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Tue, 25 Apr 2023 23:03:31 +0200 Subject: [PATCH 03/83] catalog-react: add EntityOwnerPicker changeset Signed-off-by: Vincenzo Scamporlino --- .changeset/little-boats-think.md | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 .changeset/little-boats-think.md diff --git a/.changeset/little-boats-think.md b/.changeset/little-boats-think.md new file mode 100644 index 0000000000..96bf9685e5 --- /dev/null +++ b/.changeset/little-boats-think.md @@ -0,0 +1,9 @@ +--- +'@backstage/plugin-catalog-react': minor +--- + +`EntityOwnerPicker` now loads entities asynchronously + +**BREAKING**: In order to improve the performance of the component, the users and groups displayed by `EntityOwnerPicker` aren't inferred +anymore by the entities available in the `EntityListContext` and are not affected by the filters applied to the `EntityListContext`. +Instead, the entities are displayed in batches, loaded asynchronously on scroll and filtered server side. From a2f46987f7729cd1966eaa7a018d6d263941112f Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Tue, 25 Apr 2023 23:52:00 +0200 Subject: [PATCH 04/83] catalog-react: hide EntityOwnerPicker if user or group kind is selected Signed-off-by: Vincenzo Scamporlino --- .../components/EntityOwnerPicker/EntityOwnerPicker.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx index e5ca1b86f4..7eae97b73a 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx @@ -119,6 +119,14 @@ export const EntityOwnerPicker = () => { }); }, [selectedOwners, updateFilters]); + if ( + ['user', 'group'].includes( + filters.kind?.value.toLocaleLowerCase('en-US') || '', + ) + ) { + return null; + } + return ( From 85b6e588ebabd850ac8e149cf92305ca70f64479 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Thu, 27 Apr 2023 15:20:04 +0200 Subject: [PATCH 05/83] Update .changeset/little-boats-think.md Co-authored-by: Aramis <34432188+sennyeya@users.noreply.github.com> Signed-off-by: Vincenzo Scamporlino --- .changeset/little-boats-think.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/little-boats-think.md b/.changeset/little-boats-think.md index 96bf9685e5..a17cee4ec7 100644 --- a/.changeset/little-boats-think.md +++ b/.changeset/little-boats-think.md @@ -5,5 +5,5 @@ `EntityOwnerPicker` now loads entities asynchronously **BREAKING**: In order to improve the performance of the component, the users and groups displayed by `EntityOwnerPicker` aren't inferred -anymore by the entities available in the `EntityListContext` and are not affected by the filters applied to the `EntityListContext`. +anymore by the entities available in the `EntityListContext` and will no longer react to changes in the filters of `EntityListContext`. Instead, the entities are displayed in batches, loaded asynchronously on scroll and filtered server side. From 3648a4ebb86796f74bb319158ce6f160dcd6c819 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Mon, 15 May 2023 14:53:43 +0200 Subject: [PATCH 06/83] catalog-react: humanize display selected entities Signed-off-by: Vincenzo Scamporlino --- .../EntityOwnerPicker.test.tsx | 74 ++++++++++++++++++- .../EntityOwnerPicker/EntityOwnerPicker.tsx | 58 ++++++++++++++- 2 files changed, 127 insertions(+), 5 deletions(-) diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.test.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.test.tsx index 86101d3579..e5497d022a 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.test.tsx @@ -111,8 +111,12 @@ const ownerEntitiesBatch2: Entity[] = [ const mockedQueryEntities: jest.MockedFn = jest.fn(); +const mockedGetEntitiesByRef: jest.MockedFn = + jest.fn(); + const mockCatalogApi: Partial = { queryEntities: mockedQueryEntities, + getEntitiesByRefs: mockedGetEntitiesByRef, }; const mockErrorApi = new MockErrorApi(); @@ -146,7 +150,7 @@ describe('', () => { }); }); - it('renders all owners', async () => { + it('renders all users and groups', async () => { await renderWithEffects( @@ -171,6 +175,7 @@ describe('', () => { }); expect(mockedQueryEntities).toHaveBeenCalledTimes(1); + expect(mockedGetEntitiesByRef).not.toHaveBeenCalled(); fireEvent.scroll(screen.getByTestId('owner-picker-listbox')); @@ -205,11 +210,71 @@ describe('', () => { , ); + expect(mockedGetEntitiesByRef).toHaveBeenCalledWith({ + entityRefs: ['another-owner'], + }); expect(updateFilters).toHaveBeenLastCalledWith({ owners: new EntityOwnerFilter(['group:default/another-owner']), }); }); + it('should display the selected owners as humanized entities', async () => { + const updateFilters = jest.fn(); + const queryParameters = { owners: ['another-owner'] }; + + mockedGetEntitiesByRef.mockResolvedValue({ + items: [ + { + metadata: { + name: 'another-owner', + title: 'Beautiful display name', + namespace: 'default', + }, + apiVersion: '1', + kind: 'group', + }, + ], + }); + await renderWithEffects( + + + + + , + ); + + await waitFor(() => + expect( + screen.getByRole('button', { + name: 'Beautiful display name', + }), + ).toBeInTheDocument(), + ); + + expect(mockedGetEntitiesByRef).toHaveBeenCalledWith({ + entityRefs: ['another-owner'], + }); + + fireEvent.click(screen.getByTestId('owner-picker-expand')); + await waitFor(() => screen.getByText('Some Owner 2')); + fireEvent.click(screen.getByText('Some Owner 2')); + + expect(mockedGetEntitiesByRef).toHaveBeenCalledTimes(1); + + await waitFor(() => + expect( + screen.getByRole('button', { + name: 'Some Owner 2', + }), + ).toBeInTheDocument(), + ); + }); + it('adds owners to filters', async () => { const updateFilters = jest.fn(); await renderWithEffects( @@ -223,6 +288,7 @@ describe('', () => { , ); + expect(mockedGetEntitiesByRef).not.toHaveBeenCalled(); expect(updateFilters).toHaveBeenLastCalledWith({ owners: undefined, }); @@ -250,6 +316,9 @@ describe('', () => { , ); + expect(mockedGetEntitiesByRef).toHaveBeenCalledWith({ + entityRefs: ['group:default/some-owner'], + }); expect(updateFilters).toHaveBeenLastCalledWith({ owners: new EntityOwnerFilter(['group:default/some-owner']), }); @@ -279,6 +348,9 @@ describe('', () => { , ); + expect(mockedGetEntitiesByRef).toHaveBeenCalledWith({ + entityRefs: ['team-a'], + }); expect(updateFilters).toHaveBeenLastCalledWith({ owners: new EntityOwnerFilter(['group:default/team-a']), }); diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx index 7eae97b73a..2b85b49434 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx @@ -26,11 +26,12 @@ import CheckBoxIcon from '@material-ui/icons/CheckBox'; import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import { Autocomplete } from '@material-ui/lab'; -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; import { useEntityList } from '../../hooks/useEntityListProvider'; import { EntityOwnerFilter } from '../../filters'; import { useApi } from '@backstage/core-plugin-api'; import { catalogApiRef } from '../../api'; +import useAsync from 'react-use/lib/useAsync'; import useAsyncFn from 'react-use/lib/useAsyncFn'; import { useDebouncedEffect } from '@react-hookz/web'; import PersonIcon from '@material-ui/icons/Person'; @@ -102,6 +103,8 @@ export const EntityOwnerPicker = () => { queryParamOwners.length ? queryParamOwners : filters.owners?.values ?? [], ); + const { getEntity, setEntity } = useSelectedOwners(selectedOwners); + // Set selected owners on query parameter updates; this happens at initial page load and from // external updates to the page location. useEffect(() => { @@ -143,12 +146,26 @@ export const EntityOwnerPicker = () => { } return o === v; }} + getOptionLabel={o => { + const entity = typeof o === 'string' ? getEntity(o) || o : o; + + return typeof entity === 'string' + ? entity + : humanizeEntity(entity, entity.metadata.name); + }} onChange={(_: object, owners) => { setText(''); setSelectedOwners( - owners.map(e => - typeof e === 'string' ? e : stringifyEntityRef(e), - ), + owners.map(e => { + const entityRef = + typeof e === 'string' ? e : stringifyEntityRef(e); + + if (typeof e !== 'string') { + setEntity(e); + } + + return entityRef; + }), ); }} filterOptions={x => x} @@ -214,3 +231,36 @@ export const EntityOwnerPicker = () => { ); }; + +/** + * Hook used for storing the full entity of the specified owners + * in order to display users and group using the information contained on each entity. + * When a component is rendered for the first time, it loads the content of the entities + * specified by `initialSelectedOwnersRefs` and export the `getEntity` and `setEntity` + * utilities, used to retrieve and modify the owners. + */ +function useSelectedOwners(initialSelectedOwnersRefs: string[]) { + const allEntities = useRef>({}); + const catalogApi = useApi(catalogApiRef); + + useAsync(async () => { + if (initialSelectedOwnersRefs.length === 0) { + return; + } + const initialSelectedEntities = await catalogApi.getEntitiesByRefs({ + entityRefs: initialSelectedOwnersRefs, + }); + initialSelectedEntities.items.forEach(e => { + if (e) { + allEntities.current[stringifyEntityRef(e)] = e; + } + }); + }, []); + + return { + getEntity: (entityRef: string) => allEntities.current[entityRef], + setEntity: (entity: Entity) => { + allEntities.current[stringifyEntityRef(entity)] = entity; + }, + }; +} From 2da0dcea62aef213aa6830149e2c4b1c5ba09259 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Mon, 15 May 2023 21:11:12 +0200 Subject: [PATCH 07/83] catalog-react: rollback styles Signed-off-by: Vincenzo Scamporlino --- .../EntityOwnerPicker/EntityOwnerPicker.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx index 2b85b49434..8b223c50b1 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx @@ -21,6 +21,7 @@ import { FormControlLabel, TextField, Typography, + makeStyles, } from '@material-ui/core'; import CheckBoxIcon from '@material-ui/icons/CheckBox'; import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; @@ -41,11 +42,21 @@ import { humanizeEntity } from '../EntityRefLink/humanize'; /** @public */ export type CatalogReactEntityOwnerPickerClassKey = 'input'; +const useStyles = makeStyles( + { + input: {}, + }, + { + name: 'CatalogReactEntityOwnerPicker', + }, +); + const icon = ; const checkedIcon = ; /** @public */ export const EntityOwnerPicker = () => { + const classes = useStyles(); const { updateFilters, filters, @@ -201,6 +212,7 @@ export const EntityOwnerPicker = () => { renderInput={params => ( { setText(e.currentTarget.value); }} From 73f9b42c11d4bb83afcc0f5ef5a82d706190ef94 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Mon, 15 May 2023 21:16:34 +0200 Subject: [PATCH 08/83] catalog-react: patch changeset and rewording Signed-off-by: Vincenzo Scamporlino --- .changeset/little-boats-think.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/.changeset/little-boats-think.md b/.changeset/little-boats-think.md index a17cee4ec7..7c26c8d37c 100644 --- a/.changeset/little-boats-think.md +++ b/.changeset/little-boats-think.md @@ -1,9 +1,8 @@ --- -'@backstage/plugin-catalog-react': minor +'@backstage/plugin-catalog-react': patch --- -`EntityOwnerPicker` now loads entities asynchronously +The `EntityOwnerPicker` component has undergone improvements to enhance its performance. -**BREAKING**: In order to improve the performance of the component, the users and groups displayed by `EntityOwnerPicker` aren't inferred -anymore by the entities available in the `EntityListContext` and will no longer react to changes in the filters of `EntityListContext`. -Instead, the entities are displayed in batches, loaded asynchronously on scroll and filtered server side. +The component now loads entities asynchronously, resulting in improved performance and responsiveness. Instead of loading all entities upfront, they are now loaded in batches as the user scrolls. +The previous implementation inferred users and groups displayed by the `EntityOwnerPicker` component based on the entities available in the `EntityListContext`. The updated version no longer relies on the `EntityListContext` for inference, allowing for better decoupling and improved performance. From 2ef84c05aee73b0b677ba62f93075c40226ef53e Mon Sep 17 00:00:00 2001 From: Antonio Musolino Date: Thu, 6 Apr 2023 16:09:30 +0200 Subject: [PATCH 09/83] feat: added import entity analytics event Signed-off-by: Antonio Musolino --- .changeset/breezy-kids-obey.md | 5 +++++ .../components/StepReviewLocation/StepReviewLocation.tsx | 6 ++++-- 2 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 .changeset/breezy-kids-obey.md diff --git a/.changeset/breezy-kids-obey.md b/.changeset/breezy-kids-obey.md new file mode 100644 index 0000000000..db3fa796e9 --- /dev/null +++ b/.changeset/breezy-kids-obey.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-import': minor +--- + +Added analytics event for import entity button diff --git a/plugins/catalog-import/src/components/StepReviewLocation/StepReviewLocation.tsx b/plugins/catalog-import/src/components/StepReviewLocation/StepReviewLocation.tsx index 7943b6e3b8..74ebd973d0 100644 --- a/plugins/catalog-import/src/components/StepReviewLocation/StepReviewLocation.tsx +++ b/plugins/catalog-import/src/components/StepReviewLocation/StepReviewLocation.tsx @@ -22,7 +22,7 @@ import { BackButton, NextButton } from '../Buttons'; import { EntityListComponent } from '../EntityListComponent'; import { PrepareResult, ReviewResult } from '../useImportState'; -import { configApiRef, useApi } from '@backstage/core-plugin-api'; +import { configApiRef, useAnalytics, useApi } from '@backstage/core-plugin-api'; import { Link } from '@backstage/core-components'; import { stringifyEntityRef } from '@backstage/catalog-model'; import { assertError } from '@backstage/errors'; @@ -40,6 +40,7 @@ export const StepReviewLocation = ({ }: Props) => { const catalogApi = useApi(catalogApiRef); const configApi = useApi(configApiRef); + const analytics = useAnalytics(); const appTitle = configApi.getOptional('app.title') || 'Backstage'; @@ -52,6 +53,7 @@ export const StepReviewLocation = ({ : false; const handleClick = useCallback(async () => { setSubmitted(true); + analytics.captureEvent('click', 'import entity'); try { let refreshed = new Array<{ target: string }>(); if (prepareResult.type === 'locations') { @@ -108,7 +110,7 @@ export const StepReviewLocation = ({ setSubmitted(false); } } - }, [prepareResult, onReview, catalogApi]); + }, [prepareResult, onReview, catalogApi, analytics]); return ( <> From 5717a6ef39fd74bd845ddc3fe941432ef462225c Mon Sep 17 00:00:00 2001 From: Antonio Musolino Date: Thu, 11 May 2023 16:45:51 +0200 Subject: [PATCH 10/83] Update .changeset/breezy-kids-obey.md Co-authored-by: Patrik Oldsberg Signed-off-by: Antonio Musolino --- .changeset/breezy-kids-obey.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/breezy-kids-obey.md b/.changeset/breezy-kids-obey.md index db3fa796e9..131a1ec1f3 100644 --- a/.changeset/breezy-kids-obey.md +++ b/.changeset/breezy-kids-obey.md @@ -1,5 +1,5 @@ --- -'@backstage/plugin-catalog-import': minor +'@backstage/plugin-catalog-import': patch --- Added analytics event for import entity button From 03f618ebe0455db5be1d2cc52bf11f8bf695f3dc Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Mon, 22 May 2023 11:33:41 +0200 Subject: [PATCH 11/83] Update .changeset/little-boats-think.md Signed-off-by: Patrik Oldsberg --- .changeset/little-boats-think.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/little-boats-think.md b/.changeset/little-boats-think.md index 7c26c8d37c..d389bfbbb1 100644 --- a/.changeset/little-boats-think.md +++ b/.changeset/little-boats-think.md @@ -1,5 +1,5 @@ --- -'@backstage/plugin-catalog-react': patch +'@backstage/plugin-catalog-react': minor --- The `EntityOwnerPicker` component has undergone improvements to enhance its performance. From 43c75c4464f23f075d95005507acbfcff13e8400 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 22 May 2023 13:23:05 +0000 Subject: [PATCH 12/83] fix(deps): update swc monorepo Signed-off-by: Renovate Bot --- microsite/yarn.lock | 86 +++++++++++++++++++++--------------------- storybook/yarn.lock | 86 +++++++++++++++++++++--------------------- yarn.lock | 92 ++++++++++++++++++++++----------------------- 3 files changed, 132 insertions(+), 132 deletions(-) diff --git a/microsite/yarn.lock b/microsite/yarn.lock index fe1c123575..7097fb337e 100644 --- a/microsite/yarn.lock +++ b/microsite/yarn.lock @@ -2604,90 +2604,90 @@ __metadata: languageName: node linkType: hard -"@swc/core-darwin-arm64@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-darwin-arm64@npm:1.3.51" +"@swc/core-darwin-arm64@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-darwin-arm64@npm:1.3.59" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@swc/core-darwin-x64@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-darwin-x64@npm:1.3.51" +"@swc/core-darwin-x64@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-darwin-x64@npm:1.3.59" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@swc/core-linux-arm-gnueabihf@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-linux-arm-gnueabihf@npm:1.3.51" +"@swc/core-linux-arm-gnueabihf@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-linux-arm-gnueabihf@npm:1.3.59" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@swc/core-linux-arm64-gnu@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-linux-arm64-gnu@npm:1.3.51" +"@swc/core-linux-arm64-gnu@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-linux-arm64-gnu@npm:1.3.59" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-arm64-musl@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-linux-arm64-musl@npm:1.3.51" +"@swc/core-linux-arm64-musl@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-linux-arm64-musl@npm:1.3.59" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@swc/core-linux-x64-gnu@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-linux-x64-gnu@npm:1.3.51" +"@swc/core-linux-x64-gnu@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-linux-x64-gnu@npm:1.3.59" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-x64-musl@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-linux-x64-musl@npm:1.3.51" +"@swc/core-linux-x64-musl@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-linux-x64-musl@npm:1.3.59" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@swc/core-win32-arm64-msvc@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-win32-arm64-msvc@npm:1.3.51" +"@swc/core-win32-arm64-msvc@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-win32-arm64-msvc@npm:1.3.59" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@swc/core-win32-ia32-msvc@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-win32-ia32-msvc@npm:1.3.51" +"@swc/core-win32-ia32-msvc@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-win32-ia32-msvc@npm:1.3.59" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@swc/core-win32-x64-msvc@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-win32-x64-msvc@npm:1.3.51" +"@swc/core-win32-x64-msvc@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-win32-x64-msvc@npm:1.3.59" conditions: os=win32 & cpu=x64 languageName: node linkType: hard "@swc/core@npm:^1.3.46": - version: 1.3.51 - resolution: "@swc/core@npm:1.3.51" + version: 1.3.59 + resolution: "@swc/core@npm:1.3.59" dependencies: - "@swc/core-darwin-arm64": 1.3.51 - "@swc/core-darwin-x64": 1.3.51 - "@swc/core-linux-arm-gnueabihf": 1.3.51 - "@swc/core-linux-arm64-gnu": 1.3.51 - "@swc/core-linux-arm64-musl": 1.3.51 - "@swc/core-linux-x64-gnu": 1.3.51 - "@swc/core-linux-x64-musl": 1.3.51 - "@swc/core-win32-arm64-msvc": 1.3.51 - "@swc/core-win32-ia32-msvc": 1.3.51 - "@swc/core-win32-x64-msvc": 1.3.51 + "@swc/core-darwin-arm64": 1.3.59 + "@swc/core-darwin-x64": 1.3.59 + "@swc/core-linux-arm-gnueabihf": 1.3.59 + "@swc/core-linux-arm64-gnu": 1.3.59 + "@swc/core-linux-arm64-musl": 1.3.59 + "@swc/core-linux-x64-gnu": 1.3.59 + "@swc/core-linux-x64-musl": 1.3.59 + "@swc/core-win32-arm64-msvc": 1.3.59 + "@swc/core-win32-ia32-msvc": 1.3.59 + "@swc/core-win32-x64-msvc": 1.3.59 peerDependencies: "@swc/helpers": ^0.5.0 dependenciesMeta: @@ -2714,7 +2714,7 @@ __metadata: peerDependenciesMeta: "@swc/helpers": optional: true - checksum: f4e72d347b26353fbb48eae110a63c939922a38b20730ea010f5ae3dd15434f212dce582df05556ec35e677c089dfb6d00f5dd6fc655f8c9a7829458e4301469 + checksum: 0283f39cf49cd12a6dc7062ef9ea4fa93e1a4f622ce46903a09605219f4f47ed5ad03925c6146d09ffe6ee02a89bb14e3c82eb86b4c60ecce4985ea6e078ffcf languageName: node linkType: hard diff --git a/storybook/yarn.lock b/storybook/yarn.lock index a4d5837ba5..8be840ef57 100644 --- a/storybook/yarn.lock +++ b/storybook/yarn.lock @@ -2943,90 +2943,90 @@ __metadata: languageName: node linkType: hard -"@swc/core-darwin-arm64@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-darwin-arm64@npm:1.3.51" +"@swc/core-darwin-arm64@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-darwin-arm64@npm:1.3.59" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@swc/core-darwin-x64@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-darwin-x64@npm:1.3.51" +"@swc/core-darwin-x64@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-darwin-x64@npm:1.3.59" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@swc/core-linux-arm-gnueabihf@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-linux-arm-gnueabihf@npm:1.3.51" +"@swc/core-linux-arm-gnueabihf@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-linux-arm-gnueabihf@npm:1.3.59" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@swc/core-linux-arm64-gnu@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-linux-arm64-gnu@npm:1.3.51" +"@swc/core-linux-arm64-gnu@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-linux-arm64-gnu@npm:1.3.59" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-arm64-musl@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-linux-arm64-musl@npm:1.3.51" +"@swc/core-linux-arm64-musl@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-linux-arm64-musl@npm:1.3.59" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@swc/core-linux-x64-gnu@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-linux-x64-gnu@npm:1.3.51" +"@swc/core-linux-x64-gnu@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-linux-x64-gnu@npm:1.3.59" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-x64-musl@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-linux-x64-musl@npm:1.3.51" +"@swc/core-linux-x64-musl@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-linux-x64-musl@npm:1.3.59" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@swc/core-win32-arm64-msvc@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-win32-arm64-msvc@npm:1.3.51" +"@swc/core-win32-arm64-msvc@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-win32-arm64-msvc@npm:1.3.59" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@swc/core-win32-ia32-msvc@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-win32-ia32-msvc@npm:1.3.51" +"@swc/core-win32-ia32-msvc@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-win32-ia32-msvc@npm:1.3.59" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@swc/core-win32-x64-msvc@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-win32-x64-msvc@npm:1.3.51" +"@swc/core-win32-x64-msvc@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-win32-x64-msvc@npm:1.3.59" conditions: os=win32 & cpu=x64 languageName: node linkType: hard "@swc/core@npm:^1.3.46": - version: 1.3.51 - resolution: "@swc/core@npm:1.3.51" + version: 1.3.59 + resolution: "@swc/core@npm:1.3.59" dependencies: - "@swc/core-darwin-arm64": 1.3.51 - "@swc/core-darwin-x64": 1.3.51 - "@swc/core-linux-arm-gnueabihf": 1.3.51 - "@swc/core-linux-arm64-gnu": 1.3.51 - "@swc/core-linux-arm64-musl": 1.3.51 - "@swc/core-linux-x64-gnu": 1.3.51 - "@swc/core-linux-x64-musl": 1.3.51 - "@swc/core-win32-arm64-msvc": 1.3.51 - "@swc/core-win32-ia32-msvc": 1.3.51 - "@swc/core-win32-x64-msvc": 1.3.51 + "@swc/core-darwin-arm64": 1.3.59 + "@swc/core-darwin-x64": 1.3.59 + "@swc/core-linux-arm-gnueabihf": 1.3.59 + "@swc/core-linux-arm64-gnu": 1.3.59 + "@swc/core-linux-arm64-musl": 1.3.59 + "@swc/core-linux-x64-gnu": 1.3.59 + "@swc/core-linux-x64-musl": 1.3.59 + "@swc/core-win32-arm64-msvc": 1.3.59 + "@swc/core-win32-ia32-msvc": 1.3.59 + "@swc/core-win32-x64-msvc": 1.3.59 peerDependencies: "@swc/helpers": ^0.5.0 dependenciesMeta: @@ -3053,7 +3053,7 @@ __metadata: peerDependenciesMeta: "@swc/helpers": optional: true - checksum: f4e72d347b26353fbb48eae110a63c939922a38b20730ea010f5ae3dd15434f212dce582df05556ec35e677c089dfb6d00f5dd6fc655f8c9a7829458e4301469 + checksum: 0283f39cf49cd12a6dc7062ef9ea4fa93e1a4f622ce46903a09605219f4f47ed5ad03925c6146d09ffe6ee02a89bb14e3c82eb86b4c60ecce4985ea6e078ffcf languageName: node linkType: hard diff --git a/yarn.lock b/yarn.lock index 7fbe9f51ff..4c49b5582a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14832,90 +14832,90 @@ __metadata: languageName: node linkType: hard -"@swc/core-darwin-arm64@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-darwin-arm64@npm:1.3.51" +"@swc/core-darwin-arm64@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-darwin-arm64@npm:1.3.59" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@swc/core-darwin-x64@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-darwin-x64@npm:1.3.51" +"@swc/core-darwin-x64@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-darwin-x64@npm:1.3.59" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@swc/core-linux-arm-gnueabihf@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-linux-arm-gnueabihf@npm:1.3.51" +"@swc/core-linux-arm-gnueabihf@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-linux-arm-gnueabihf@npm:1.3.59" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@swc/core-linux-arm64-gnu@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-linux-arm64-gnu@npm:1.3.51" +"@swc/core-linux-arm64-gnu@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-linux-arm64-gnu@npm:1.3.59" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-arm64-musl@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-linux-arm64-musl@npm:1.3.51" +"@swc/core-linux-arm64-musl@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-linux-arm64-musl@npm:1.3.59" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@swc/core-linux-x64-gnu@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-linux-x64-gnu@npm:1.3.51" +"@swc/core-linux-x64-gnu@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-linux-x64-gnu@npm:1.3.59" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-x64-musl@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-linux-x64-musl@npm:1.3.51" +"@swc/core-linux-x64-musl@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-linux-x64-musl@npm:1.3.59" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@swc/core-win32-arm64-msvc@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-win32-arm64-msvc@npm:1.3.51" +"@swc/core-win32-arm64-msvc@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-win32-arm64-msvc@npm:1.3.59" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@swc/core-win32-ia32-msvc@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-win32-ia32-msvc@npm:1.3.51" +"@swc/core-win32-ia32-msvc@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-win32-ia32-msvc@npm:1.3.59" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@swc/core-win32-x64-msvc@npm:1.3.51": - version: 1.3.51 - resolution: "@swc/core-win32-x64-msvc@npm:1.3.51" +"@swc/core-win32-x64-msvc@npm:1.3.59": + version: 1.3.59 + resolution: "@swc/core-win32-x64-msvc@npm:1.3.59" conditions: os=win32 & cpu=x64 languageName: node linkType: hard "@swc/core@npm:^1.3.46": - version: 1.3.51 - resolution: "@swc/core@npm:1.3.51" + version: 1.3.59 + resolution: "@swc/core@npm:1.3.59" dependencies: - "@swc/core-darwin-arm64": 1.3.51 - "@swc/core-darwin-x64": 1.3.51 - "@swc/core-linux-arm-gnueabihf": 1.3.51 - "@swc/core-linux-arm64-gnu": 1.3.51 - "@swc/core-linux-arm64-musl": 1.3.51 - "@swc/core-linux-x64-gnu": 1.3.51 - "@swc/core-linux-x64-musl": 1.3.51 - "@swc/core-win32-arm64-msvc": 1.3.51 - "@swc/core-win32-ia32-msvc": 1.3.51 - "@swc/core-win32-x64-msvc": 1.3.51 + "@swc/core-darwin-arm64": 1.3.59 + "@swc/core-darwin-x64": 1.3.59 + "@swc/core-linux-arm-gnueabihf": 1.3.59 + "@swc/core-linux-arm64-gnu": 1.3.59 + "@swc/core-linux-arm64-musl": 1.3.59 + "@swc/core-linux-x64-gnu": 1.3.59 + "@swc/core-linux-x64-musl": 1.3.59 + "@swc/core-win32-arm64-msvc": 1.3.59 + "@swc/core-win32-ia32-msvc": 1.3.59 + "@swc/core-win32-x64-msvc": 1.3.59 peerDependencies: "@swc/helpers": ^0.5.0 dependenciesMeta: @@ -14942,16 +14942,16 @@ __metadata: peerDependenciesMeta: "@swc/helpers": optional: true - checksum: f4e72d347b26353fbb48eae110a63c939922a38b20730ea010f5ae3dd15434f212dce582df05556ec35e677c089dfb6d00f5dd6fc655f8c9a7829458e4301469 + checksum: 0283f39cf49cd12a6dc7062ef9ea4fa93e1a4f622ce46903a09605219f4f47ed5ad03925c6146d09ffe6ee02a89bb14e3c82eb86b4c60ecce4985ea6e078ffcf languageName: node linkType: hard "@swc/helpers@npm:^0.5.0": - version: 0.5.0 - resolution: "@swc/helpers@npm:0.5.0" + version: 0.5.1 + resolution: "@swc/helpers@npm:0.5.1" dependencies: tslib: ^2.4.0 - checksum: 61c9c7dddb707deb58b85328cfe9d211887145f1311ae6a6e6c0fa9f781fb29916a8669a7d479e46e26a32a89d6ef4f293a22dee4925e009c84051e9dd10e8b7 + checksum: 71e0e27234590435e4c62b97ef5e796f88e786841a38c7116a5e27a3eafa7b9ead7cdec5249b32165902076de78446945311c973e59bddf77c1e24f33a8f272a languageName: node linkType: hard From 2938ac6b0d59b33623bed57ab5872a64d2c5866f Mon Sep 17 00:00:00 2001 From: Brian Phillips <28457+brianphillips@users.noreply.github.com> Date: Wed, 17 May 2023 10:38:20 -0500 Subject: [PATCH 13/83] Use permission integration router in jenkins plugin to expose permissions Signed-off-by: Brian Phillips <28457+brianphillips@users.noreply.github.com> --- plugins/jenkins-backend/package.json | 1 + plugins/jenkins-backend/src/service/router.ts | 7 +++++++ yarn.lock | 1 + 3 files changed, 9 insertions(+) diff --git a/plugins/jenkins-backend/package.json b/plugins/jenkins-backend/package.json index f45908c04e..e9630bfb45 100644 --- a/plugins/jenkins-backend/package.json +++ b/plugins/jenkins-backend/package.json @@ -32,6 +32,7 @@ "@backstage/plugin-auth-node": "workspace:^", "@backstage/plugin-jenkins-common": "workspace:^", "@backstage/plugin-permission-common": "workspace:^", + "@backstage/plugin-permission-node": "workspace:^", "@types/express": "^4.17.6", "express": "^4.17.1", "express-promise-router": "^4.1.0", diff --git a/plugins/jenkins-backend/src/service/router.ts b/plugins/jenkins-backend/src/service/router.ts index 484bfa273f..17cd4097e2 100644 --- a/plugins/jenkins-backend/src/service/router.ts +++ b/plugins/jenkins-backend/src/service/router.ts @@ -28,6 +28,8 @@ import { import { getBearerTokenFromAuthorizationHeader } from '@backstage/plugin-auth-node'; import { stringifyEntityRef } from '@backstage/catalog-model'; import { stringifyError } from '@backstage/errors'; +import { createPermissionIntegrationRouter } from '@backstage/plugin-permission-node'; +import { jenkinsExecutePermission } from '@backstage/plugin-jenkins-common'; /** @public */ export interface RouterOptions { @@ -58,6 +60,11 @@ export async function createRouter( const router = Router(); router.use(express.json()); + router.use( + createPermissionIntegrationRouter({ + permissions: [jenkinsExecutePermission], + }), + ); router.get( '/v1/entity/:namespace/:kind/:name/projects', diff --git a/yarn.lock b/yarn.lock index 7fbe9f51ff..a5cef527ed 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7161,6 +7161,7 @@ __metadata: "@backstage/plugin-auth-node": "workspace:^" "@backstage/plugin-jenkins-common": "workspace:^" "@backstage/plugin-permission-common": "workspace:^" + "@backstage/plugin-permission-node": "workspace:^" "@types/express": ^4.17.6 "@types/jenkins": ^0.23.1 "@types/supertest": ^2.0.8 From 6c244b42cb065c35523554ab7e4a4bc82d59a402 Mon Sep 17 00:00:00 2001 From: Brian Phillips <28457+brianphillips@users.noreply.github.com> Date: Wed, 17 May 2023 13:38:07 -0500 Subject: [PATCH 14/83] Add array of permisssions from jenkins-common Signed-off-by: Brian Phillips <28457+brianphillips@users.noreply.github.com> --- .changeset/lucky-keys-behave.md | 6 ++++++ plugins/jenkins-backend/src/service/router.ts | 4 ++-- plugins/jenkins-common/src/permissions.ts | 7 +++++++ 3 files changed, 15 insertions(+), 2 deletions(-) create mode 100644 .changeset/lucky-keys-behave.md diff --git a/.changeset/lucky-keys-behave.md b/.changeset/lucky-keys-behave.md new file mode 100644 index 0000000000..7501c1d693 --- /dev/null +++ b/.changeset/lucky-keys-behave.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-jenkins-backend': patch +'@backstage/plugin-jenkins-common': patch +--- + +Expose permissions through the metadata endpoint. diff --git a/plugins/jenkins-backend/src/service/router.ts b/plugins/jenkins-backend/src/service/router.ts index 17cd4097e2..eea067fab6 100644 --- a/plugins/jenkins-backend/src/service/router.ts +++ b/plugins/jenkins-backend/src/service/router.ts @@ -29,7 +29,7 @@ import { getBearerTokenFromAuthorizationHeader } from '@backstage/plugin-auth-no import { stringifyEntityRef } from '@backstage/catalog-model'; import { stringifyError } from '@backstage/errors'; import { createPermissionIntegrationRouter } from '@backstage/plugin-permission-node'; -import { jenkinsExecutePermission } from '@backstage/plugin-jenkins-common'; +import { jenkinsPermissions } from '@backstage/plugin-jenkins-common'; /** @public */ export interface RouterOptions { @@ -62,7 +62,7 @@ export async function createRouter( router.use(express.json()); router.use( createPermissionIntegrationRouter({ - permissions: [jenkinsExecutePermission], + permissions: jenkinsPermissions, }), ); diff --git a/plugins/jenkins-common/src/permissions.ts b/plugins/jenkins-common/src/permissions.ts index 311bf993cc..aba79b8493 100644 --- a/plugins/jenkins-common/src/permissions.ts +++ b/plugins/jenkins-common/src/permissions.ts @@ -28,3 +28,10 @@ export const jenkinsExecutePermission = createPermission({ }, resourceType: RESOURCE_TYPE_CATALOG_ENTITY, }); + +/** + * List of all Jenkins permissions + * + * @public + */ +export const jenkinsPermissions = [jenkinsExecutePermission]; From 864a5cfb59c7f7f919a94de36d3b606498b3b627 Mon Sep 17 00:00:00 2001 From: Brian Phillips <28457+brianphillips@users.noreply.github.com> Date: Wed, 17 May 2023 14:03:23 -0500 Subject: [PATCH 15/83] add api report Signed-off-by: Brian Phillips <28457+brianphillips@users.noreply.github.com> --- plugins/jenkins-common/api-report.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/plugins/jenkins-common/api-report.md b/plugins/jenkins-common/api-report.md index 771161e1cb..4db5a6c938 100644 --- a/plugins/jenkins-common/api-report.md +++ b/plugins/jenkins-common/api-report.md @@ -8,5 +8,8 @@ import { ResourcePermission } from '@backstage/plugin-permission-common'; // @public export const jenkinsExecutePermission: ResourcePermission<'catalog-entity'>; +// @public +export const jenkinsPermissions: ResourcePermission<'catalog-entity'>[]; + // (No @packageDocumentation comment for this package) ``` From 35e11314d7e9ad6e9caf7e82981a9d83854df601 Mon Sep 17 00:00:00 2001 From: Brian Phillips <28457+brianphillips@users.noreply.github.com> Date: Wed, 17 May 2023 20:36:03 -0500 Subject: [PATCH 16/83] split changesets for each package Signed-off-by: Brian Phillips <28457+brianphillips@users.noreply.github.com> --- .changeset/long-lobsters-brake.md | 5 +++++ .changeset/lucky-keys-behave.md | 1 - 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 .changeset/long-lobsters-brake.md diff --git a/.changeset/long-lobsters-brake.md b/.changeset/long-lobsters-brake.md new file mode 100644 index 0000000000..01ae3f4e93 --- /dev/null +++ b/.changeset/long-lobsters-brake.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-jenkins-common': patch +--- + +Export list of permissions diff --git a/.changeset/lucky-keys-behave.md b/.changeset/lucky-keys-behave.md index 7501c1d693..a223f83fa6 100644 --- a/.changeset/lucky-keys-behave.md +++ b/.changeset/lucky-keys-behave.md @@ -1,6 +1,5 @@ --- '@backstage/plugin-jenkins-backend': patch -'@backstage/plugin-jenkins-common': patch --- Expose permissions through the metadata endpoint. From a170d7612ddb91fbe2e639395fba4e97f9fafc94 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 22 May 2023 17:46:24 +0000 Subject: [PATCH 17/83] chore(deps): update dependency @frsource/cypress-plugin-visual-regression-diff to v3.3.1 Signed-off-by: Renovate Bot --- yarn.lock | 37 ++++++++++++++++++++++--------------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/yarn.lock b/yarn.lock index 7fbe9f51ff..944eb8f435 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10634,27 +10634,27 @@ __metadata: languageName: node linkType: hard -"@frsource/base64@npm:1.0.5": - version: 1.0.5 - resolution: "@frsource/base64@npm:1.0.5" - checksum: ba526dd81df4e91b0abbcc34fc6818c8ff132e5230c23a4448a365ba934f782a86abb2a8566050f9450905851e467a7160f01f3d321fbb0fa3c8c516c5a82b9b +"@frsource/base64@npm:1.0.14": + version: 1.0.14 + resolution: "@frsource/base64@npm:1.0.14" + checksum: 9a5b718e4ac12fd1b5bfdefcdf669fb0a125599fb6cd55564da3beeccd7a5707f58bc41f572268a8120af15ccca32355e8384341561f738397521020e0c2564c languageName: node linkType: hard "@frsource/cypress-plugin-visual-regression-diff@npm:^3.2.8": - version: 3.2.14 - resolution: "@frsource/cypress-plugin-visual-regression-diff@npm:3.2.14" + version: 3.3.1 + resolution: "@frsource/cypress-plugin-visual-regression-diff@npm:3.3.1" dependencies: - "@frsource/base64": 1.0.5 + "@frsource/base64": 1.0.14 glob: 8.0.3 - meta-png: 1.0.5 + meta-png: 1.0.6 move-file: 2.1.0 pixelmatch: 5.3.0 - pngjs: 6.0.0 + pngjs: 7.0.0 sharp: 0.31.2 peerDependencies: cypress: ">=4.5.0" - checksum: 1650eded6db559ef13d0d8b3aba8b19e703dc103a9e806c87cb49ce495a37e296c041530f509f4c0372c15217c8b54a17f51b034261b5b109f4503ab24a8181f + checksum: fae1e9de89fcc0f75a71dd7cc78cb870fa4d0989a0dd2e1084eec2fdc95f9ff503a124f05ea88f87b52c3d03463a79e96439e5620a6c0f24ac39135c81af9edc languageName: node linkType: hard @@ -30450,10 +30450,10 @@ __metadata: languageName: node linkType: hard -"meta-png@npm:1.0.5": - version: 1.0.5 - resolution: "meta-png@npm:1.0.5" - checksum: b8c92a696d5e78ef7f0ab53eb9039f108ee0c55cdac9d70e92e5fe2187b090176c0489426d58e594c7d1096481dac37913dd1265f28dfa39926db4d702a5e21d +"meta-png@npm:1.0.6": + version: 1.0.6 + resolution: "meta-png@npm:1.0.6" + checksum: aed14b3b53189c9d32002d76c40926bd93dd9d439bae3ad23ffb2645c375c9772c160879aa8af59ac85a2f43ae8bbe06b9648a53fe27815f4aeab238f4e9b79d languageName: node linkType: hard @@ -33465,7 +33465,14 @@ __metadata: languageName: node linkType: hard -"pngjs@npm:6.0.0, pngjs@npm:^6.0.0": +"pngjs@npm:7.0.0": + version: 7.0.0 + resolution: "pngjs@npm:7.0.0" + checksum: b19a018930d27de26229c1b3ff250b3a25d09caa22cbb0b0459987d91eb0a560a18ab5d67da45a38ed7514140f26d1db58de83c31159ec101f2bb270a3c707f1 + languageName: node + linkType: hard + +"pngjs@npm:^6.0.0": version: 6.0.0 resolution: "pngjs@npm:6.0.0" checksum: ab6c285086060087097eab9fe6b5a528a24f9e79c03dea2b4fd6264ed4fdb5beff4a3257eeeaf2a9dc18249b539609c2a4e4013c567164a1f6b5ba2c974d5ecb From ccec612ad422a194a002be0e8a33cc8a5f785619 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 22 May 2023 17:47:08 +0000 Subject: [PATCH 18/83] chore(deps): update dependency @types/marked to v4.3.1 Signed-off-by: Renovate Bot --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 7fbe9f51ff..b206f9f4b2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16160,9 +16160,9 @@ __metadata: linkType: hard "@types/marked@npm:^4.0.0": - version: 4.0.8 - resolution: "@types/marked@npm:4.0.8" - checksum: 68278fa7acaa5d920cdc239d675b5daf842e0ad4779e4848cd617d9baf2ac1afccb5a264c331e37d80031d647e1640cb983cd31e73d45b28552670b4853fad8e + version: 4.3.1 + resolution: "@types/marked@npm:4.3.1" + checksum: eb6891b925d53ea53057f088b28f9232016499e62639cbb4a67f7d34f288ec6a8e40aae4836dbd06bd0fc3c541fca1175cd50d9e8d405547b6be7b7781e6a2a5 languageName: node linkType: hard From 1bf0d302a7e6037aff64c0af894e70582e4b896a Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 22 May 2023 18:35:05 +0000 Subject: [PATCH 19/83] chore(deps): update dependency better-sqlite3 to v8.4.0 Signed-off-by: Renovate Bot --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 71c5b8877f..d899940116 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18915,13 +18915,13 @@ __metadata: linkType: hard "better-sqlite3@npm:^8.0.0": - version: 8.3.0 - resolution: "better-sqlite3@npm:8.3.0" + version: 8.4.0 + resolution: "better-sqlite3@npm:8.4.0" dependencies: bindings: ^1.5.0 node-gyp: latest prebuild-install: ^7.1.0 - checksum: 00fc9f12058d2d157f56fe57b0f5c8ba705aee22a1dfe33ef8f60755531eda8f809cdb2377af314f6ed9396ad036094576e0596649bd6ca5bcaec172613e2dc9 + checksum: f8b180c26428a2d381482e83b4519d0d81a918e00f92cafd255f42eb9583f49b2fed1015121ad49ebe1f3f790cc8c6f4697d1e805193d65e70dacf2e8abbd6af languageName: node linkType: hard From 67a4e356bd83cf7d95211977fce13e6fe5af7cae Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 22 May 2023 18:35:56 +0000 Subject: [PATCH 20/83] chore(deps): update dependency eslint to v8.41.0 Signed-off-by: Renovate Bot --- yarn.lock | 77 +++++++++++++++++++++++++++---------------------------- 1 file changed, 38 insertions(+), 39 deletions(-) diff --git a/yarn.lock b/yarn.lock index 71c5b8877f..4bceb5c366 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10551,27 +10551,27 @@ __metadata: languageName: node linkType: hard -"@eslint/eslintrc@npm:^2.0.2": - version: 2.0.2 - resolution: "@eslint/eslintrc@npm:2.0.2" +"@eslint/eslintrc@npm:^2.0.3": + version: 2.0.3 + resolution: "@eslint/eslintrc@npm:2.0.3" dependencies: ajv: ^6.12.4 debug: ^4.3.2 - espree: ^9.5.1 + espree: ^9.5.2 globals: ^13.19.0 ignore: ^5.2.0 import-fresh: ^3.2.1 js-yaml: ^4.1.0 minimatch: ^3.1.2 strip-json-comments: ^3.1.1 - checksum: cfcf5e12c7b2c4476482e7f12434e76eae16fcd163ee627309adb10b761e5caa4a4e52ed7be464423320ff3d11eca5b50de5bf8be3e25834222470835dd5c801 + checksum: ddc51f25f8524d8231db9c9bf03177e503d941a332e8d5ce3b10b09241be4d5584a378a529a27a527586bfbccf3031ae539eb891352033c340b012b4d0c81d92 languageName: node linkType: hard -"@eslint/js@npm:8.38.0": - version: 8.38.0 - resolution: "@eslint/js@npm:8.38.0" - checksum: 1f28987aa8c9cd93e23384e16c7220863b39b5dc4b66e46d7cdbccce868040f455a98d24cd8b567a884f26545a0555b761f7328d4a00c051e7ef689cbea5fce1 +"@eslint/js@npm:8.41.0": + version: 8.41.0 + resolution: "@eslint/js@npm:8.41.0" + checksum: af013d70fe8d0429cdf5cd8b5dcc6fc384ed026c1eccb0cfe30f5849b968ab91645111373fd1b83282b38955b1bdfbe667c1a7dbda3b06cae753521223cad775 languageName: node linkType: hard @@ -23395,13 +23395,13 @@ __metadata: languageName: node linkType: hard -"eslint-scope@npm:^7.1.1": - version: 7.1.1 - resolution: "eslint-scope@npm:7.1.1" +"eslint-scope@npm:^7.2.0": + version: 7.2.0 + resolution: "eslint-scope@npm:7.2.0" dependencies: esrecurse: ^4.3.0 estraverse: ^5.2.0 - checksum: 9f6e974ab2db641ca8ab13508c405b7b859e72afe9f254e8131ff154d2f40c99ad4545ce326fd9fde3212ff29707102562a4834f1c48617b35d98c71a97fbf3e + checksum: 64591a2d8b244ade9c690b59ef238a11d5c721a98bcee9e9f445454f442d03d3e04eda88e95a4daec558220a99fa384309d9faae3d459bd40e7a81b4063980ae languageName: node linkType: hard @@ -23423,10 +23423,10 @@ __metadata: languageName: node linkType: hard -"eslint-visitor-keys@npm:^3.0.0, eslint-visitor-keys@npm:^3.3.0, eslint-visitor-keys@npm:^3.4.0": - version: 3.4.0 - resolution: "eslint-visitor-keys@npm:3.4.0" - checksum: 33159169462d3989321a1ec1e9aaaf6a24cc403d5d347e9886d1b5bfe18ffa1be73bdc6203143a28a606b142b1af49787f33cff0d6d0813eb5f2e8d2e1a6043c +"eslint-visitor-keys@npm:^3.0.0, eslint-visitor-keys@npm:^3.3.0, eslint-visitor-keys@npm:^3.4.1": + version: 3.4.1 + resolution: "eslint-visitor-keys@npm:3.4.1" + checksum: f05121d868202736b97de7d750847a328fcfa8593b031c95ea89425333db59676ac087fa905eba438d0a3c5769632f828187e0c1a0d271832a2153c1d3661c2c languageName: node linkType: hard @@ -23447,13 +23447,13 @@ __metadata: linkType: hard "eslint@npm:^8.33.0, eslint@npm:^8.6.0": - version: 8.38.0 - resolution: "eslint@npm:8.38.0" + version: 8.41.0 + resolution: "eslint@npm:8.41.0" dependencies: "@eslint-community/eslint-utils": ^4.2.0 "@eslint-community/regexpp": ^4.4.0 - "@eslint/eslintrc": ^2.0.2 - "@eslint/js": 8.38.0 + "@eslint/eslintrc": ^2.0.3 + "@eslint/js": 8.41.0 "@humanwhocodes/config-array": ^0.11.8 "@humanwhocodes/module-importer": ^1.0.1 "@nodelib/fs.walk": ^1.2.8 @@ -23463,9 +23463,9 @@ __metadata: debug: ^4.3.2 doctrine: ^3.0.0 escape-string-regexp: ^4.0.0 - eslint-scope: ^7.1.1 - eslint-visitor-keys: ^3.4.0 - espree: ^9.5.1 + eslint-scope: ^7.2.0 + eslint-visitor-keys: ^3.4.1 + espree: ^9.5.2 esquery: ^1.4.2 esutils: ^2.0.2 fast-deep-equal: ^3.1.3 @@ -23473,13 +23473,12 @@ __metadata: find-up: ^5.0.0 glob-parent: ^6.0.2 globals: ^13.19.0 - grapheme-splitter: ^1.0.4 + graphemer: ^1.4.0 ignore: ^5.2.0 import-fresh: ^3.0.0 imurmurhash: ^0.1.4 is-glob: ^4.0.0 is-path-inside: ^3.0.3 - js-sdsl: ^4.1.4 js-yaml: ^4.1.0 json-stable-stringify-without-jsonify: ^1.0.1 levn: ^0.4.1 @@ -23492,7 +23491,7 @@ __metadata: text-table: ^0.2.0 bin: eslint: bin/eslint.js - checksum: 73b6d9b650d0434aa7c07d0a1802f099b086ee70a8d8ba7be730439a26572a5eb71def12125c82942be2ec8ee5be38a6f1b42a13e40d4b67f11a148ec9e263eb + checksum: 09979a6f8451dcc508a7005b6670845c8a518376280b3fd96657a406b8b6ef29d0e480d1ba11b4eb48da93d607e0c55c9b877676fe089d09973ec152354e23b2 languageName: node linkType: hard @@ -23503,14 +23502,14 @@ __metadata: languageName: node linkType: hard -"espree@npm:^9.0.0, espree@npm:^9.5.1": - version: 9.5.1 - resolution: "espree@npm:9.5.1" +"espree@npm:^9.0.0, espree@npm:^9.5.2": + version: 9.5.2 + resolution: "espree@npm:9.5.2" dependencies: acorn: ^8.8.0 acorn-jsx: ^5.3.2 - eslint-visitor-keys: ^3.4.0 - checksum: cdf6e43540433d917c4f2ee087c6e987b2063baa85a1d9cdaf51533d78275ebd5910c42154e7baf8e3e89804b386da0a2f7fad2264d8f04420e7506bf87b3b88 + eslint-visitor-keys: ^3.4.1 + checksum: 6506289d6eb26471c0b383ee24fee5c8ae9d61ad540be956b3127be5ce3bf687d2ba6538ee5a86769812c7c552a9d8239e8c4d150f9ea056c6d5cbe8399c03c1 languageName: node linkType: hard @@ -25482,6 +25481,13 @@ __metadata: languageName: node linkType: hard +"graphemer@npm:^1.4.0": + version: 1.4.0 + resolution: "graphemer@npm:1.4.0" + checksum: bab8f0be9b568857c7bec9fda95a89f87b783546d02951c40c33f84d05bb7da3fd10f863a9beb901463669b6583173a8c8cc6d6b306ea2b9b9d5d3d943c3a673 + languageName: node + linkType: hard + "graphiql@npm:^1.5.12, graphiql@npm:^1.8.8": version: 1.11.5 resolution: "graphiql@npm:1.11.5" @@ -28237,13 +28243,6 @@ __metadata: languageName: node linkType: hard -"js-sdsl@npm:^4.1.4": - version: 4.1.4 - resolution: "js-sdsl@npm:4.1.4" - checksum: 1977cea4ab18e0e03e28bdf0371d8b443fad65ca0988e0faa216406faf6bb943714fe8f7cc7a5bfe5f35ba3d94ddae399f4d10200f547f2c3320688b0670d726 - languageName: node - linkType: hard - "js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0": version: 4.0.0 resolution: "js-tokens@npm:4.0.0" From 45b0a5b65a9f5c767b6ce3a612ee5ba8355ada3f Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 22 May 2023 19:33:40 +0000 Subject: [PATCH 21/83] chore(deps): update dependency eslint-plugin-testing-library to v5.11.0 Signed-off-by: Renovate Bot --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 4cb8d6fb35..fce0be422f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -23375,13 +23375,13 @@ __metadata: linkType: hard "eslint-plugin-testing-library@npm:^5.9.1": - version: 5.10.3 - resolution: "eslint-plugin-testing-library@npm:5.10.3" + version: 5.11.0 + resolution: "eslint-plugin-testing-library@npm:5.11.0" dependencies: "@typescript-eslint/utils": ^5.58.0 peerDependencies: eslint: ^7.5.0 || ^8.0.0 - checksum: 3033121a0040b98280cd41856273ad1b268f56083759401e7af72ac8a96dcb213892f1248983aa9a18988b44913263e93f0d182dbb0c5b27b00242bfffc9cdcc + checksum: 7f19d3dedd7788b411ca3d9045de682feb26025b9c26d97d4e2f0bf62f5eaa276147d946bd5d0cd967b822e546a954330fdb7ef80485301264f646143f011a02 languageName: node linkType: hard From 7322887559185cbe76cd5b9d873b54690972dc4d Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 22 May 2023 20:20:09 +0000 Subject: [PATCH 22/83] chore(deps): update helm/kind-action action to v1.7.0 Signed-off-by: Renovate Bot --- .github/workflows/verify_e2e-kubernetes.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/verify_e2e-kubernetes.yml b/.github/workflows/verify_e2e-kubernetes.yml index 6c01999506..87056957f5 100644 --- a/.github/workflows/verify_e2e-kubernetes.yml +++ b/.github/workflows/verify_e2e-kubernetes.yml @@ -35,7 +35,7 @@ jobs: cache-prefix: ${{ runner.os }}-v${{ matrix.node-version }} - name: bootstrap kind - uses: helm/kind-action@v1.5.0 + uses: helm/kind-action@v1.7.0 - name: kubernetes test working-directory: packages/backend-common From 5432a2fcac18e433661bae14094978b7984cb67b Mon Sep 17 00:00:00 2001 From: pheianox Date: Mon, 22 May 2023 18:53:50 -0400 Subject: [PATCH 23/83] Add new adopter Signed-off-by: pheianox --- ADOPTERS.md | 1 + 1 file changed, 1 insertion(+) diff --git a/ADOPTERS.md b/ADOPTERS.md index b0b7d06f07..98e156c9d4 100644 --- a/ADOPTERS.md +++ b/ADOPTERS.md @@ -248,3 +248,4 @@ _You can do this by using the [Adopter form](https://info.backstage.spotify.com/ | [Livelo](https://www.livelo.com.br) | [Felipe Nardon](https://www.linkedin.com/in/felipe-nardon-dos-santos/), [Yves Galvão](https://www.linkedin.com/in/yvesgalvao/), [Isaque Rocha](https://www.linkedin.com/in/isaque-rocha/) | Internal platform that aims to reduce the teams' cognitive load through self-service, abstracting processes that are now part of the teams' daily lives, enabling a centralized management of documentation, catalog, metrics and knowledge. | | [Worten](https://www.worten.pt) | [@elisiariocouto](https://github.com/elisiariocouto) | We are proud to be an adopter of Backstage. Our goal is to make our Backstage installation the go-to location for every developer. To achieve this, we developed a custom plugin to populate Backstage's catalog with information from our internal deployment tool. As a result, we now have full visibility of all Worten systems, components, APIs, messaging topics, and documentation. We also migrated the internal deployment tool's Web UI to Backstage. Currently, we are working on Backstage's Software Templates feature. | | [Inventa](https://www.inventa.shop) | [João Munhoz](https://github.com/joaovitormunhoz), [Lucca Fonte](https://github.com/luccafonte) | We use Backstage at Inventa to share knowledge between squads, in the form of technical documentation, API contracts, and service status/ownership info, fomenting a self-service and scalable engineering culture. We also developed a plugin that allows us to have a centralized view of all the engineering tools we have for each environment, making it easy to access each one of our tools and increasing productivity. | +| [PITS Global Data Recovery Services](https://www.pitsdatarecovery.net/) | [@pheianox](https://github.com/pheianox) | The internal developer portal seeks to combine infrastructure tooling, services, and developer documentation into a single, user-friendly interface. By streamlining these components, the portal enhances productivity and simplifies the development process for the internal team. | From 4b230b97660dc3a2963e946af61df91e195f4adc Mon Sep 17 00:00:00 2001 From: Matthew Clarke Date: Tue, 23 May 2023 01:58:04 -0400 Subject: [PATCH 24/83] feat: add errors to Pod Drawer (#17563) * feat: add errors to Pod Drawer Signed-off-by: Matthew Clarke * fix: lint fix Signed-off-by: Matthew Clarke --------- Signed-off-by: Matthew Clarke --- .changeset/selfish-mugs-study.md | 5 + plugins/kubernetes/api-report.md | 1 + plugins/kubernetes/package.json | 1 + .../src/components/KubernetesContent.tsx | 155 +++++++++--------- .../Pods/ErrorList/ErrorList.test.tsx | 66 ++++++++ .../components/Pods/ErrorList/ErrorList.tsx | 74 +++++++++ .../src/components/Pods/ErrorList/index.ts | 16 ++ .../Pods/PodDrawer/PodDrawer.test.tsx | 29 +++- .../components/Pods/PodDrawer/PodDrawer.tsx | 11 ++ .../src/components/Pods/PodsTable.tsx | 55 ++++--- .../kubernetes/src/components/Pods/types.ts | 3 +- .../src/hooks/useMatchingErrors.test.tsx | 85 ++++++++++ .../kubernetes/src/hooks/useMatchingErrors.ts | 46 ++++++ plugins/kubernetes/src/utils/pod.tsx | 7 +- yarn.lock | 1 + 15 files changed, 451 insertions(+), 104 deletions(-) create mode 100644 .changeset/selfish-mugs-study.md create mode 100644 plugins/kubernetes/src/components/Pods/ErrorList/ErrorList.test.tsx create mode 100644 plugins/kubernetes/src/components/Pods/ErrorList/ErrorList.tsx create mode 100644 plugins/kubernetes/src/components/Pods/ErrorList/index.ts create mode 100644 plugins/kubernetes/src/hooks/useMatchingErrors.test.tsx create mode 100644 plugins/kubernetes/src/hooks/useMatchingErrors.ts diff --git a/.changeset/selfish-mugs-study.md b/.changeset/selfish-mugs-study.md new file mode 100644 index 0000000000..0a2152aecc --- /dev/null +++ b/.changeset/selfish-mugs-study.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-kubernetes': patch +--- + +Add errors to PodDrawer diff --git a/plugins/kubernetes/api-report.md b/plugins/kubernetes/api-report.md index 5529b7910f..823b9c89a2 100644 --- a/plugins/kubernetes/api-report.md +++ b/plugins/kubernetes/api-report.md @@ -22,6 +22,7 @@ import { OAuthApi } from '@backstage/core-plugin-api'; import { ObjectsByEntityResponse } from '@backstage/plugin-kubernetes-common'; import { OpenIdConnectApi } from '@backstage/core-plugin-api'; import { Pod } from 'kubernetes-models/v1'; +import { Pod as Pod_2 } from 'kubernetes-models/v1/Pod'; import { default as React_2 } from 'react'; import { RouteRef } from '@backstage/core-plugin-api'; import { V1ConfigMap } from '@kubernetes/client-node'; diff --git a/plugins/kubernetes/package.json b/plugins/kubernetes/package.json index e6a0b518a1..d0d32814a1 100644 --- a/plugins/kubernetes/package.json +++ b/plugins/kubernetes/package.json @@ -42,6 +42,7 @@ "@backstage/plugin-kubernetes-common": "workspace:^", "@backstage/theme": "workspace:^", "@kubernetes-models/apimachinery": "^1.1.0", + "@kubernetes-models/base": "^4.0.1", "@kubernetes/client-node": "0.18.1", "@material-ui/core": "^4.12.2", "@material-ui/icons": "^4.9.1", diff --git a/plugins/kubernetes/src/components/KubernetesContent.tsx b/plugins/kubernetes/src/components/KubernetesContent.tsx index 63aa52f1ba..a465422095 100644 --- a/plugins/kubernetes/src/components/KubernetesContent.tsx +++ b/plugins/kubernetes/src/components/KubernetesContent.tsx @@ -24,6 +24,7 @@ import { Cluster } from './Cluster'; import EmptyStateImage from '../assets/emptystate.svg'; import { useKubernetesObjects } from '../hooks'; import { Content, Page, Progress } from '@backstage/core-components'; +import { DetectedErrorsContext } from '../hooks/useMatchingErrors'; type KubernetesContentProps = { entity: Entity; @@ -49,88 +50,92 @@ export const KubernetesContent = ({ : new Map(); return ( - - - {kubernetesObjects === undefined && error === undefined && } + + + + {kubernetesObjects === undefined && error === undefined && ( + + )} - {/* errors retrieved from the kubernetes clusters */} - {clustersWithErrors.length > 0 && ( - - - + {/* errors retrieved from the kubernetes clusters */} + {clustersWithErrors.length > 0 && ( + + + + - - )} + )} - {/* other errors */} - {error !== undefined && ( - - - + {/* other errors */} + {error !== undefined && ( + + + + - - )} + )} - {kubernetesObjects && ( - - - - - - Your Clusters - - - {kubernetesObjects?.items.length <= 0 && ( - - - - No resources on any known clusters for{' '} - {entity.metadata.name} - - - - EmptyState - - - )} - {kubernetesObjects?.items.length > 0 && - kubernetesObjects?.items.map((item, i) => { - const podsWithErrors = new Set( - detectedErrors - .get(item.cluster.name) - ?.filter(de => de.sourceRef.kind === 'Pod') - .map(de => de.sourceRef.name), - ); - - return ( - - + + + + + Your Clusters + + + {kubernetesObjects?.items.length <= 0 && ( + + + + No resources on any known clusters for{' '} + {entity.metadata.name} + + + + EmptyState - ); - })} + + )} + {kubernetesObjects?.items.length > 0 && + kubernetesObjects?.items.map((item, i) => { + const podsWithErrors = new Set( + detectedErrors + .get(item.cluster.name) + ?.filter(de => de.sourceRef.kind === 'Pod') + .map(de => de.sourceRef.name), + ); + + return ( + + + + ); + })} + - - )} - - + )} + + + ); }; diff --git a/plugins/kubernetes/src/components/Pods/ErrorList/ErrorList.test.tsx b/plugins/kubernetes/src/components/Pods/ErrorList/ErrorList.test.tsx new file mode 100644 index 0000000000..f28580b509 --- /dev/null +++ b/plugins/kubernetes/src/components/Pods/ErrorList/ErrorList.test.tsx @@ -0,0 +1,66 @@ +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; + +import { render } from '@testing-library/react'; + +import { ErrorList } from './ErrorList'; +import { Pod } from 'kubernetes-models/v1/Pod'; + +describe('ErrorList', () => { + it('error highlight should render', () => { + const { getByText } = render( + , + ); + expect(getByText('some-pod')).toBeInTheDocument(); + expect(getByText('some error message')).toBeInTheDocument(); + }); +}); diff --git a/plugins/kubernetes/src/components/Pods/ErrorList/ErrorList.tsx b/plugins/kubernetes/src/components/Pods/ErrorList/ErrorList.tsx new file mode 100644 index 0000000000..b7b3418889 --- /dev/null +++ b/plugins/kubernetes/src/components/Pods/ErrorList/ErrorList.tsx @@ -0,0 +1,74 @@ +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; + +import { + List, + ListItem, + ListItemText, + Divider, + createStyles, + makeStyles, + Theme, + Paper, +} from '@material-ui/core'; +import { PodAndErrors } from '../types'; + +const useStyles = makeStyles((_theme: Theme) => + createStyles({ + root: { + overflow: 'auto', + }, + list: { + width: '100%', + }, + }), +); + +interface ErrorListProps { + podAndErrors: PodAndErrors[]; +} + +export const ErrorList = ({ podAndErrors }: ErrorListProps) => { + const classes = useStyles(); + return ( + + + {podAndErrors + .filter(pae => pae.errors.length > 0) + .flatMap(onlyPodWithErrors => { + return onlyPodWithErrors.errors.map((error, i) => { + return ( + + {i > 0 && } + + + + + ); + }); + })} + + + ); +}; diff --git a/plugins/kubernetes/src/components/Pods/ErrorList/index.ts b/plugins/kubernetes/src/components/Pods/ErrorList/index.ts new file mode 100644 index 0000000000..f40c0583c9 --- /dev/null +++ b/plugins/kubernetes/src/components/Pods/ErrorList/index.ts @@ -0,0 +1,16 @@ +/* + * Copyright 2023 The Backstage Authors + * + * 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 * from './ErrorList'; diff --git a/plugins/kubernetes/src/components/Pods/PodDrawer/PodDrawer.test.tsx b/plugins/kubernetes/src/components/Pods/PodDrawer/PodDrawer.test.tsx index fa4f9f7168..64fd38c8d7 100644 --- a/plugins/kubernetes/src/components/Pods/PodDrawer/PodDrawer.test.tsx +++ b/plugins/kubernetes/src/components/Pods/PodDrawer/PodDrawer.test.tsx @@ -33,7 +33,7 @@ describe('PodDrawer', () => { clusterName: 'some-cluster-1', pod: { metadata: { - name: 'ok-pod', + name: 'some-pod', }, spec: { containers: [ @@ -51,17 +51,40 @@ describe('PodDrawer', () => { ], }, }, - errors: [], + errors: [ + { + type: 'some-error', + severity: 10, + message: 'some error message', + occuranceCount: 1, + sourceRef: { + name: 'some-pod', + namespace: 'some-namespace', + kind: 'Pod', + apiGroup: 'v1', + }, + proposedFix: [ + { + type: 'logs', + container: 'some-container', + errorType: 'some error type', + rootCauseExplanation: 'some root cause', + possibleFixes: ['fix1', 'fix2'], + }, + ], + }, + ], }, } as any)} />, ), ); - expect(getAllByText('ok-pod')).toHaveLength(2); + expect(getAllByText('some-pod')).toHaveLength(3); expect(getByText('Pod (127.0.0.1)')).toBeInTheDocument(); expect(getByText('YAML')).toBeInTheDocument(); expect(getByText('Containers')).toBeInTheDocument(); expect(getByText('some-container')).toBeInTheDocument(); + expect(getByText('some error message')).toBeInTheDocument(); }); }); diff --git a/plugins/kubernetes/src/components/Pods/PodDrawer/PodDrawer.tsx b/plugins/kubernetes/src/components/Pods/PodDrawer/PodDrawer.tsx index a78f08683c..5e49410dd4 100644 --- a/plugins/kubernetes/src/components/Pods/PodDrawer/PodDrawer.tsx +++ b/plugins/kubernetes/src/components/Pods/PodDrawer/PodDrawer.tsx @@ -32,6 +32,7 @@ import { ContainerCard } from './ContainerCard'; import { PodAndErrors } from '../types'; import { KubernetesDrawer } from '../../KubernetesDrawer'; import { PendingPodContent } from './PendingPodContent'; +import { ErrorList } from '../ErrorList'; const useDrawerContentStyles = makeStyles((_theme: Theme) => createStyles({ @@ -116,6 +117,16 @@ export const PodDrawer = ({ podAndErrors, open }: PodDrawerProps) => { )} + {podAndErrors.errors.length > 0 && ( + + Errors: + + )} + {podAndErrors.errors.length > 0 && ( + + + + )} )} diff --git a/plugins/kubernetes/src/components/Pods/PodsTable.tsx b/plugins/kubernetes/src/components/Pods/PodsTable.tsx index 4b7b4b93ed..620e91ce72 100644 --- a/plugins/kubernetes/src/components/Pods/PodsTable.tsx +++ b/plugins/kubernetes/src/components/Pods/PodsTable.tsx @@ -15,7 +15,6 @@ */ import React, { useContext } from 'react'; -import { V1Pod } from '@kubernetes/client-node'; import { PodDrawer } from './PodDrawer'; import { containersReady, @@ -27,18 +26,21 @@ import { import { Table, TableColumn } from '@backstage/core-components'; import { PodNamesWithMetricsContext } from '../../hooks/PodNamesWithMetrics'; import { ClusterContext } from '../../hooks/Cluster'; +import { useMatchingErrors } from '../../hooks/useMatchingErrors'; +import { Pod } from 'kubernetes-models/v1/Pod'; +import { V1Pod } from '@kubernetes/client-node'; export const READY_COLUMNS: PodColumns = 'READY'; export const RESOURCE_COLUMNS: PodColumns = 'RESOURCE'; export type PodColumns = 'READY' | 'RESOURCE'; type PodsTablesProps = { - pods: V1Pod[]; + pods: Pod | V1Pod[]; extraColumns?: PodColumns[]; children?: React.ReactNode; }; -const READY: TableColumn[] = [ +const READY: TableColumn[] = [ { title: 'containers ready', align: 'center', @@ -54,26 +56,37 @@ const READY: TableColumn[] = [ }, ]; +const PodDrawerTrigger = ({ pod }: { pod: Pod }) => { + const cluster = useContext(ClusterContext); + const errors = useMatchingErrors({ + kind: 'Pod', + apiVersion: 'v1', + metadata: pod.metadata, + }); + return ( + + ); +}; + export const PodsTable = ({ pods, extraColumns = [] }: PodsTablesProps) => { const podNamesWithMetrics = useContext(PodNamesWithMetricsContext); - const cluster = useContext(ClusterContext); - const defaultColumns: TableColumn[] = [ + const defaultColumns: TableColumn[] = [ { title: 'name', highlight: true, - render: (pod: V1Pod) => ( - - ), + render: (pod: Pod) => { + return ; + }, }, { title: 'phase', - render: (pod: V1Pod) => pod.status?.phase ?? 'unknown', + render: (pod: Pod) => pod.status?.phase ?? 'unknown', width: 'auto', }, { @@ -81,16 +94,16 @@ export const PodsTable = ({ pods, extraColumns = [] }: PodsTablesProps) => { render: containerStatuses, }, ]; - const columns: TableColumn[] = [...defaultColumns]; + const columns: TableColumn[] = [...defaultColumns]; if (extraColumns.includes(READY_COLUMNS)) { columns.push(...READY); } if (extraColumns.includes(RESOURCE_COLUMNS)) { - const resourceColumns: TableColumn[] = [ + const resourceColumns: TableColumn[] = [ { title: 'CPU usage %', - render: (pod: V1Pod) => { + render: (pod: Pod) => { const metrics = podNamesWithMetrics.get(pod.metadata?.name ?? ''); if (!metrics) { @@ -103,7 +116,7 @@ export const PodsTable = ({ pods, extraColumns = [] }: PodsTablesProps) => { }, { title: 'Memory usage %', - render: (pod: V1Pod) => { + render: (pod: Pod) => { const metrics = podNamesWithMetrics.get(pod.metadata?.name ?? ''); if (!metrics) { @@ -123,13 +136,11 @@ export const PodsTable = ({ pods, extraColumns = [] }: PodsTablesProps) => { width: '100%', }; - const usePods = pods.map(p => ({ ...p, id: p.metadata?.uid })); - return (
diff --git a/plugins/kubernetes/src/components/Pods/types.ts b/plugins/kubernetes/src/components/Pods/types.ts index 195f0b9135..ac707c2a57 100644 --- a/plugins/kubernetes/src/components/Pods/types.ts +++ b/plugins/kubernetes/src/components/Pods/types.ts @@ -14,9 +14,10 @@ * limitations under the License. */ import { Pod } from 'kubernetes-models/v1'; +import { DetectedError } from '../../error-detection'; export interface PodAndErrors { clusterName: string; pod: Pod; - errors: any[]; + errors: DetectedError[]; } diff --git a/plugins/kubernetes/src/hooks/useMatchingErrors.test.tsx b/plugins/kubernetes/src/hooks/useMatchingErrors.test.tsx new file mode 100644 index 0000000000..b5fe588e86 --- /dev/null +++ b/plugins/kubernetes/src/hooks/useMatchingErrors.test.tsx @@ -0,0 +1,85 @@ +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import { renderHook } from '@testing-library/react-hooks'; +import { DetectedErrorsContext, useMatchingErrors } from './useMatchingErrors'; +import { DetectedError } from '../error-detection'; +import { ResourceRef } from '../error-detection/types'; + +const genericErrorWithRef = (resourceRef: ResourceRef): DetectedError => { + return { + type: 'some-error', + severity: 10, + message: 'some error message', + occuranceCount: 1, + sourceRef: resourceRef, + proposedFix: [ + { + type: 'logs', + container: 'some-container', + errorType: 'some error type', + rootCauseExplanation: 'some root cause', + possibleFixes: ['fix1', 'fix2'], + }, + ], + }; +}; + +describe('useMatchingErrors', () => { + it('should filter non-matching resources', () => { + const wrapper = ({ children }: { children: React.ReactNode }) => ( + + {children} + + ); + + const { result } = renderHook( + () => + useMatchingErrors({ + metadata: { + name: 'some-name', + namespace: 'some-namespace', + }, + kind: 'some-kind', + apiVersion: 'some-apiGroup', + }), + { wrapper }, + ); + expect(result.current).toStrictEqual([ + genericErrorWithRef({ + name: 'some-name', + namespace: 'some-namespace', + kind: 'some-kind', + apiGroup: 'some-apiGroup', + }), + ]); + }); +}); diff --git a/plugins/kubernetes/src/hooks/useMatchingErrors.ts b/plugins/kubernetes/src/hooks/useMatchingErrors.ts new file mode 100644 index 0000000000..623a32bdf8 --- /dev/null +++ b/plugins/kubernetes/src/hooks/useMatchingErrors.ts @@ -0,0 +1,46 @@ +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React, { useContext } from 'react'; +import { DetectedError, ResourceRef } from '../error-detection/types'; +import { TypeMeta } from '@kubernetes-models/base'; +import { IIoK8sApimachineryPkgApisMetaV1ObjectMeta as V1ObjectMeta } from '@kubernetes-models/apimachinery/apis/meta/v1/ObjectMeta'; + +export const DetectedErrorsContext = React.createContext([]); + +type Matcher = { + metadata?: V1ObjectMeta; +} & TypeMeta; + +export const useMatchingErrors = (matcher: Matcher): DetectedError[] => { + const targetRef: ResourceRef = { + name: matcher.metadata?.name ?? '', + namespace: matcher.metadata?.namespace ?? '', + kind: matcher.kind, + apiGroup: matcher.apiVersion, + }; + + const errors = useContext(DetectedErrorsContext); + + return errors.filter(e => { + const r = e.sourceRef; + return ( + targetRef.apiGroup === r.apiGroup && + targetRef.kind === r.kind && + targetRef.name === r.name && + targetRef.namespace === r.namespace + ); + }); +}; diff --git a/plugins/kubernetes/src/utils/pod.tsx b/plugins/kubernetes/src/utils/pod.tsx index 2f657e7658..ce556fbc8d 100644 --- a/plugins/kubernetes/src/utils/pod.tsx +++ b/plugins/kubernetes/src/utils/pod.tsx @@ -28,6 +28,7 @@ import { SubvalueCell, } from '@backstage/core-components'; import { ClientPodStatus } from '@backstage/plugin-kubernetes-common'; +import { Pod } from 'kubernetes-models/v1/Pod'; export const imageChips = (pod: V1Pod): ReactNode => { const containerStatuses = pod.status?.containerStatuses ?? []; @@ -38,19 +39,19 @@ export const imageChips = (pod: V1Pod): ReactNode => { return
{images}
; }; -export const containersReady = (pod: V1Pod): string => { +export const containersReady = (pod: Pod): string => { const containerStatuses = pod.status?.containerStatuses ?? []; const containersReadyItem = containerStatuses.filter(cs => cs.ready).length; return `${containersReadyItem}/${containerStatuses.length}`; }; -export const totalRestarts = (pod: V1Pod): number => { +export const totalRestarts = (pod: Pod): number => { const containerStatuses = pod.status?.containerStatuses ?? []; return containerStatuses?.reduce((a, b) => a + b.restartCount, 0); }; -export const containerStatuses = (pod: V1Pod): ReactNode => { +export const containerStatuses = (pod: Pod): ReactNode => { const containerStatusesItem = pod.status?.containerStatuses ?? []; const errors = containerStatusesItem.reduce((accum, next) => { if (next.state === undefined) { diff --git a/yarn.lock b/yarn.lock index 632d538a16..66b27be455 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7357,6 +7357,7 @@ __metadata: "@backstage/test-utils": "workspace:^" "@backstage/theme": "workspace:^" "@kubernetes-models/apimachinery": ^1.1.0 + "@kubernetes-models/base": ^4.0.1 "@kubernetes/client-node": 0.18.1 "@material-ui/core": ^4.12.2 "@material-ui/icons": ^4.9.1 From 17d55744fe2467f2932b6037c9223605b45d37ab Mon Sep 17 00:00:00 2001 From: Johan Haals Date: Tue, 23 May 2023 10:34:17 +0200 Subject: [PATCH 25/83] chore: Align msw version Signed-off-by: Johan Haals --- .../package.json | 2 +- plugins/devtools-backend/package.json | 2 +- plugins/devtools/package.json | 2 +- yarn.lock | 79 ++----------------- 4 files changed, 8 insertions(+), 77 deletions(-) diff --git a/plugins/catalog-backend-module-puppetdb/package.json b/plugins/catalog-backend-module-puppetdb/package.json index 7286f66095..e703c81beb 100644 --- a/plugins/catalog-backend-module-puppetdb/package.json +++ b/plugins/catalog-backend-module-puppetdb/package.json @@ -65,7 +65,7 @@ "@backstage/backend-test-utils": "workspace:^", "@backstage/cli": "workspace:^", "@types/lodash": "^4.14.151", - "msw": "^0.49.0" + "msw": "^1.0.0" }, "files": [ "dist", diff --git a/plugins/devtools-backend/package.json b/plugins/devtools-backend/package.json index 77eaf43901..286e45d9ee 100644 --- a/plugins/devtools-backend/package.json +++ b/plugins/devtools-backend/package.json @@ -52,7 +52,7 @@ "@types/ping": "^0.4.1", "@types/supertest": "^2.0.8", "@types/yarnpkg__lockfile": "^1.1.4", - "msw": "^0.47.0", + "msw": "^1.0.0", "supertest": "^6.2.4" }, "files": [ diff --git a/plugins/devtools/package.json b/plugins/devtools/package.json index d5bd0c567a..a06bf780f9 100644 --- a/plugins/devtools/package.json +++ b/plugins/devtools/package.json @@ -56,7 +56,7 @@ "@testing-library/user-event": "^14.0.0", "@types/node": "*", "cross-fetch": "^3.1.5", - "msw": "^0.47.0" + "msw": "^1.0.0" }, "files": [ "dist" diff --git a/yarn.lock b/yarn.lock index 66b27be455..2b2ee1e9f4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5471,7 +5471,7 @@ __metadata: "@types/lodash": ^4.14.151 lodash: ^4.17.21 luxon: ^3.0.0 - msw: ^0.49.0 + msw: ^1.0.0 node-fetch: ^2.6.7 uuid: ^8.0.0 winston: ^3.2.1 @@ -6139,7 +6139,7 @@ __metadata: express-promise-router: ^4.1.0 fs-extra: ^10.0.0 lodash: ^4.17.21 - msw: ^0.47.0 + msw: ^1.0.0 node-fetch: ^2.6.7 ping: ^0.4.1 semver: ^7.3.2 @@ -6182,7 +6182,7 @@ __metadata: "@testing-library/user-event": ^14.0.0 "@types/node": "*" cross-fetch: ^3.1.5 - msw: ^0.47.0 + msw: ^1.0.0 react-json-view: ^1.21.3 react-use: ^17.2.4 peerDependencies: @@ -31245,75 +31245,6 @@ __metadata: languageName: node linkType: hard -"msw@npm:^0.47.0": - version: 0.47.4 - resolution: "msw@npm:0.47.4" - dependencies: - "@mswjs/cookies": ^0.2.2 - "@mswjs/interceptors": ^0.17.5 - "@open-draft/until": ^1.0.3 - "@types/cookie": ^0.4.1 - "@types/js-levenshtein": ^1.1.1 - chalk: 4.1.1 - chokidar: ^3.4.2 - cookie: ^0.4.2 - graphql: ^15.0.0 || ^16.0.0 - headers-polyfill: ^3.1.0 - inquirer: ^8.2.0 - is-node-process: ^1.0.1 - js-levenshtein: ^1.1.6 - node-fetch: ^2.6.7 - outvariant: ^1.3.0 - path-to-regexp: ^6.2.0 - statuses: ^2.0.0 - strict-event-emitter: ^0.2.6 - type-fest: ^2.19.0 - yargs: ^17.3.1 - peerDependencies: - typescript: ">= 4.2.x <= 4.8.x" - peerDependenciesMeta: - typescript: - optional: true - bin: - msw: cli/index.js - checksum: 10ff632641d40384d6622abf4df6399e4ae649db0f676b5d1ee2d0a515ec96f33abe9d4fecba08cdba4b2e43255af419da9eefc020d40a7e10669d0906457197 - languageName: node - linkType: hard - -"msw@npm:^0.49.0": - version: 0.49.3 - resolution: "msw@npm:0.49.3" - dependencies: - "@mswjs/cookies": ^0.2.2 - "@mswjs/interceptors": ^0.17.5 - "@open-draft/until": ^1.0.3 - "@types/cookie": ^0.4.1 - "@types/js-levenshtein": ^1.1.1 - chalk: 4.1.1 - chokidar: ^3.4.2 - cookie: ^0.4.2 - graphql: ^15.0.0 || ^16.0.0 - headers-polyfill: ^3.1.0 - inquirer: ^8.2.0 - is-node-process: ^1.0.1 - js-levenshtein: ^1.1.6 - node-fetch: ^2.6.7 - outvariant: ^1.3.0 - path-to-regexp: ^6.2.0 - strict-event-emitter: ^0.4.3 - type-fest: ^2.19.0 - yargs: ^17.3.1 - peerDependencies: - typescript: ">= 4.4.x <= 4.9.x" - peerDependenciesMeta: - typescript: - optional: true - bin: - msw: cli/index.js - checksum: 8322cd42cd69f289c05517d02bde22fc2f10e86fc2d0d209d9df54bd03d10b8123723c5587a2654dcd2cd0f314a016f9eccac88cffa30fafd1f9fead16db639e - languageName: node - linkType: hard - "msw@npm:^1.0.0, msw@npm:^1.0.1": version: 1.2.0 resolution: "msw@npm:1.2.0" @@ -37641,7 +37572,7 @@ __metadata: languageName: node linkType: hard -"statuses@npm:2.0.1, statuses@npm:^2.0.0": +"statuses@npm:2.0.1": version: 2.0.1 resolution: "statuses@npm:2.0.1" checksum: 18c7623fdb8f646fb213ca4051be4df7efb3484d4ab662937ca6fbef7ced9b9e12842709872eb3020cc3504b93bde88935c9f6417489627a7786f24f8031cbcb @@ -37743,7 +37674,7 @@ __metadata: languageName: node linkType: hard -"strict-event-emitter@npm:^0.2.4, strict-event-emitter@npm:^0.2.6": +"strict-event-emitter@npm:^0.2.4": version: 0.2.8 resolution: "strict-event-emitter@npm:0.2.8" dependencies: From 433f60a06013e66a3146160786814bfdc7198efe Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 23 May 2023 15:29:49 +0200 Subject: [PATCH 26/83] chore: enter pre Signed-off-by: blam --- .changeset/pre.json | 230 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 230 insertions(+) create mode 100644 .changeset/pre.json diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 0000000000..2856f9e0af --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,230 @@ +{ + "mode": "pre", + "tag": "next", + "initialVersions": { + "example-app": "0.2.83", + "@backstage/app-defaults": "1.3.1", + "example-backend": "0.2.83", + "@backstage/backend-app-api": "0.4.3", + "@backstage/backend-common": "0.18.5", + "@backstage/backend-defaults": "0.1.10", + "@backstage/backend-dev-utils": "0.1.1", + "example-backend-next": "0.0.11", + "@backstage/backend-openapi-utils": "0.0.2", + "@backstage/backend-plugin-api": "0.5.2", + "@backstage/backend-tasks": "0.5.2", + "@backstage/backend-test-utils": "0.1.37", + "@backstage/catalog-client": "1.4.1", + "@backstage/catalog-model": "1.3.0", + "@backstage/cli": "0.22.7", + "@backstage/cli-common": "0.1.12", + "@backstage/cli-node": "0.1.0", + "@backstage/codemods": "0.1.44", + "@backstage/config": "1.0.7", + "@backstage/config-loader": "1.3.0", + "@backstage/core-app-api": "1.8.0", + "@backstage/core-components": "0.13.1", + "@backstage/core-plugin-api": "1.5.1", + "@backstage/create-app": "0.5.1", + "@backstage/dev-utils": "1.0.15", + "e2e-test": "0.2.3", + "@backstage/errors": "1.1.5", + "@backstage/eslint-plugin": "0.1.3", + "@backstage/integration": "1.4.5", + "@backstage/integration-aws-node": "0.1.3", + "@backstage/integration-react": "1.1.13", + "@backstage/release-manifests": "0.0.9", + "@backstage/repo-tools": "0.3.0", + "@techdocs/cli": "1.4.2", + "techdocs-cli-embedded-app": "0.2.82", + "@backstage/test-utils": "1.3.1", + "@backstage/theme": "0.3.0", + "@backstage/types": "1.0.2", + "@backstage/version-bridge": "1.0.4", + "@backstage/plugin-adr": "0.6.0", + "@backstage/plugin-adr-backend": "0.3.3", + "@backstage/plugin-adr-common": "0.2.9", + "@backstage/plugin-airbrake": "0.3.18", + "@backstage/plugin-airbrake-backend": "0.2.18", + "@backstage/plugin-allure": "0.1.34", + "@backstage/plugin-analytics-module-ga": "0.1.29", + "@backstage/plugin-analytics-module-ga4": "0.1.0", + "@backstage/plugin-apache-airflow": "0.2.11", + "@backstage/plugin-api-docs": "0.9.3", + "@backstage/plugin-api-docs-module-protoc-gen-doc": "0.1.2", + "@backstage/plugin-apollo-explorer": "0.1.11", + "@backstage/plugin-app-backend": "0.3.45", + "@backstage/plugin-auth-backend": "0.18.3", + "@backstage/plugin-auth-node": "0.2.14", + "@backstage/plugin-azure-devops": "0.3.0", + "@backstage/plugin-azure-devops-backend": "0.3.24", + "@backstage/plugin-azure-devops-common": "0.3.0", + "@backstage/plugin-azure-sites": "0.1.7", + "@backstage/plugin-azure-sites-backend": "0.1.7", + "@backstage/plugin-azure-sites-common": "0.1.0", + "@backstage/plugin-badges": "0.2.42", + "@backstage/plugin-badges-backend": "0.2.0", + "@backstage/plugin-bazaar": "0.2.8", + "@backstage/plugin-bazaar-backend": "0.2.8", + "@backstage/plugin-bitbucket-cloud-common": "0.2.6", + "@backstage/plugin-bitrise": "0.1.45", + "@backstage/plugin-catalog": "1.11.0", + "@backstage/plugin-catalog-backend": "1.9.1", + "@backstage/plugin-catalog-backend-module-aws": "0.2.0", + "@backstage/plugin-catalog-backend-module-azure": "0.1.16", + "@backstage/plugin-catalog-backend-module-bitbucket": "0.2.12", + "@backstage/plugin-catalog-backend-module-bitbucket-cloud": "0.1.12", + "@backstage/plugin-catalog-backend-module-bitbucket-server": "0.1.10", + "@backstage/plugin-catalog-backend-module-gerrit": "0.1.13", + "@backstage/plugin-catalog-backend-module-github": "0.3.0", + "@backstage/plugin-catalog-backend-module-gitlab": "0.2.1", + "@backstage/plugin-catalog-backend-module-incremental-ingestion": "0.3.2", + "@backstage/plugin-catalog-backend-module-ldap": "0.5.12", + "@backstage/plugin-catalog-backend-module-msgraph": "0.5.4", + "@backstage/plugin-catalog-backend-module-openapi": "0.1.11", + "@backstage/plugin-catalog-backend-module-puppetdb": "0.1.2", + "@backstage/plugin-catalog-common": "1.0.13", + "@internal/plugin-catalog-customized": "0.0.10", + "@backstage/plugin-catalog-graph": "0.2.30", + "@backstage/plugin-catalog-graphql": "0.3.20", + "@backstage/plugin-catalog-import": "0.9.8", + "@backstage/plugin-catalog-node": "1.3.6", + "@backstage/plugin-catalog-react": "1.6.0", + "@backstage/plugin-cicd-statistics": "0.1.20", + "@backstage/plugin-cicd-statistics-module-gitlab": "0.1.14", + "@backstage/plugin-circleci": "0.3.18", + "@backstage/plugin-cloudbuild": "0.3.18", + "@backstage/plugin-code-climate": "0.1.18", + "@backstage/plugin-code-coverage": "0.2.11", + "@backstage/plugin-code-coverage-backend": "0.2.11", + "@backstage/plugin-codescene": "0.1.13", + "@backstage/plugin-config-schema": "0.1.41", + "@backstage/plugin-cost-insights": "0.12.7", + "@backstage/plugin-cost-insights-common": "0.1.1", + "@backstage/plugin-devtools": "0.1.0", + "@backstage/plugin-devtools-backend": "0.1.0", + "@backstage/plugin-devtools-common": "0.1.0", + "@backstage/plugin-dynatrace": "5.0.0", + "@backstage/plugin-entity-feedback": "0.2.1", + "@backstage/plugin-entity-feedback-backend": "0.1.3", + "@backstage/plugin-entity-feedback-common": "0.1.1", + "@backstage/plugin-entity-validation": "0.1.3", + "@backstage/plugin-events-backend": "0.2.6", + "@backstage/plugin-events-backend-module-aws-sqs": "0.2.0", + "@backstage/plugin-events-backend-module-azure": "0.1.7", + "@backstage/plugin-events-backend-module-bitbucket-cloud": "0.1.7", + "@backstage/plugin-events-backend-module-gerrit": "0.1.7", + "@backstage/plugin-events-backend-module-github": "0.1.7", + "@backstage/plugin-events-backend-module-gitlab": "0.1.7", + "@backstage/plugin-events-backend-test-utils": "0.1.7", + "@backstage/plugin-events-node": "0.2.6", + "@internal/plugin-todo-list": "1.0.13", + "@internal/plugin-todo-list-backend": "1.0.13", + "@internal/plugin-todo-list-common": "1.0.10", + "@backstage/plugin-explore": "0.4.3", + "@backstage/plugin-explore-backend": "0.0.7", + "@backstage/plugin-explore-common": "0.0.1", + "@backstage/plugin-explore-react": "0.0.28", + "@backstage/plugin-firehydrant": "0.2.2", + "@backstage/plugin-fossa": "0.2.50", + "@backstage/plugin-gcalendar": "0.3.14", + "@backstage/plugin-gcp-projects": "0.3.37", + "@backstage/plugin-git-release-manager": "0.3.31", + "@backstage/plugin-github-actions": "0.5.18", + "@backstage/plugin-github-deployments": "0.1.49", + "@backstage/plugin-github-issues": "0.2.7", + "@backstage/plugin-github-pull-requests-board": "0.1.12", + "@backstage/plugin-gitops-profiles": "0.3.36", + "@backstage/plugin-gocd": "0.1.24", + "@backstage/plugin-graphiql": "0.2.50", + "@backstage/plugin-graphql-backend": "0.1.35", + "@backstage/plugin-graphql-voyager": "0.1.3", + "@backstage/plugin-home": "0.5.2", + "@backstage/plugin-home-react": "0.0.0", + "@backstage/plugin-ilert": "0.2.7", + "@backstage/plugin-jenkins": "0.8.0", + "@backstage/plugin-jenkins-backend": "0.2.0", + "@backstage/plugin-jenkins-common": "0.1.15", + "@backstage/plugin-kafka": "0.3.18", + "@backstage/plugin-kafka-backend": "0.2.38", + "@backstage/plugin-kubernetes": "0.9.0", + "@backstage/plugin-kubernetes-backend": "0.11.0", + "@backstage/plugin-kubernetes-common": "0.6.3", + "@backstage/plugin-lighthouse": "0.4.3", + "@backstage/plugin-lighthouse-backend": "0.2.1", + "@backstage/plugin-lighthouse-common": "0.1.1", + "@backstage/plugin-linguist": "0.1.3", + "@backstage/plugin-linguist-backend": "0.2.2", + "@backstage/plugin-linguist-common": "0.1.0", + "@backstage/plugin-microsoft-calendar": "0.1.3", + "@backstage/plugin-newrelic": "0.3.36", + "@backstage/plugin-newrelic-dashboard": "0.2.11", + "@backstage/plugin-octopus-deploy": "0.2.0", + "@backstage/plugin-org": "0.6.8", + "@backstage/plugin-org-react": "0.1.7", + "@backstage/plugin-pagerduty": "0.5.11", + "@backstage/plugin-periskop": "0.1.16", + "@backstage/plugin-periskop-backend": "0.1.16", + "@backstage/plugin-permission-backend": "0.5.20", + "@backstage/plugin-permission-common": "0.7.5", + "@backstage/plugin-permission-node": "0.7.8", + "@backstage/plugin-permission-react": "0.4.12", + "@backstage/plugin-playlist": "0.1.9", + "@backstage/plugin-playlist-backend": "0.3.1", + "@backstage/plugin-playlist-common": "0.1.6", + "@backstage/plugin-proxy-backend": "0.2.39", + "@backstage/plugin-puppetdb": "0.1.1", + "@backstage/plugin-rollbar": "0.4.18", + "@backstage/plugin-rollbar-backend": "0.1.42", + "@backstage/plugin-scaffolder": "1.13.1", + "@backstage/plugin-scaffolder-backend": "1.14.0", + "@backstage/plugin-scaffolder-backend-module-confluence-to-markdown": "0.1.2", + "@backstage/plugin-scaffolder-backend-module-cookiecutter": "0.2.21", + "@backstage/plugin-scaffolder-backend-module-gitlab": "0.2.0", + "@backstage/plugin-scaffolder-backend-module-rails": "0.4.14", + "@backstage/plugin-scaffolder-backend-module-sentry": "0.1.5", + "@backstage/plugin-scaffolder-backend-module-yeoman": "0.2.18", + "@backstage/plugin-scaffolder-common": "1.3.0", + "@backstage/plugin-scaffolder-node": "0.1.3", + "@backstage/plugin-scaffolder-react": "1.4.0", + "@backstage/plugin-search": "1.3.0", + "@backstage/plugin-search-backend": "1.3.1", + "@backstage/plugin-search-backend-module-catalog": "0.1.1", + "@backstage/plugin-search-backend-module-elasticsearch": "1.3.0", + "@backstage/plugin-search-backend-module-explore": "0.1.1", + "@backstage/plugin-search-backend-module-pg": "0.5.6", + "@backstage/plugin-search-backend-module-techdocs": "0.1.1", + "@backstage/plugin-search-backend-node": "1.2.1", + "@backstage/plugin-search-common": "1.2.3", + "@backstage/plugin-search-react": "1.6.0", + "@backstage/plugin-sentry": "0.5.3", + "@backstage/plugin-shortcuts": "0.3.10", + "@backstage/plugin-sonarqube": "0.6.7", + "@backstage/plugin-sonarqube-backend": "0.1.10", + "@backstage/plugin-sonarqube-react": "0.1.5", + "@backstage/plugin-splunk-on-call": "0.4.7", + "@backstage/plugin-stack-overflow": "0.1.15", + "@backstage/plugin-stack-overflow-backend": "0.2.1", + "@backstage/plugin-stackstorm": "0.1.2", + "@backstage/plugin-tech-insights": "0.3.10", + "@backstage/plugin-tech-insights-backend": "0.5.11", + "@backstage/plugin-tech-insights-backend-module-jsonfc": "0.1.29", + "@backstage/plugin-tech-insights-common": "0.2.10", + "@backstage/plugin-tech-insights-node": "0.4.3", + "@backstage/plugin-tech-radar": "0.6.4", + "@backstage/plugin-techdocs": "1.6.2", + "@backstage/plugin-techdocs-addons-test-utils": "1.0.13", + "@backstage/plugin-techdocs-backend": "1.6.2", + "@backstage/plugin-techdocs-module-addons-contrib": "1.0.13", + "@backstage/plugin-techdocs-node": "1.7.1", + "@backstage/plugin-techdocs-react": "1.1.6", + "@backstage/plugin-todo": "0.2.20", + "@backstage/plugin-todo-backend": "0.1.42", + "@backstage/plugin-user-settings": "0.7.3", + "@backstage/plugin-user-settings-backend": "0.1.9", + "@backstage/plugin-vault": "0.1.12", + "@backstage/plugin-vault-backend": "0.3.1", + "@backstage/plugin-xcmetrics": "0.2.38" + }, + "changesets": [] +} From b1e4a70b32e8ca1aa66c1720b2ee8bf7c6d8ae19 Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 23 May 2023 16:00:37 +0200 Subject: [PATCH 27/83] fix: bug with cyclical dependencies in the built output Signed-off-by: blam --- plugins/kubernetes/src/components/Pods/PodLogs/usePodLogs.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/kubernetes/src/components/Pods/PodLogs/usePodLogs.ts b/plugins/kubernetes/src/components/Pods/PodLogs/usePodLogs.ts index 9f3af5cb3b..446969f509 100644 --- a/plugins/kubernetes/src/components/Pods/PodLogs/usePodLogs.ts +++ b/plugins/kubernetes/src/components/Pods/PodLogs/usePodLogs.ts @@ -13,11 +13,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { kubernetesProxyApiRef } from '@backstage/plugin-kubernetes'; import useAsync from 'react-use/lib/useAsync'; import { ContainerScope } from './types'; import { useApi } from '@backstage/core-plugin-api'; +import { kubernetesProxyApiRef } from '../../../api'; interface PodLogsOptions { podScope: ContainerScope; From dc3cddf51ab58840938916ec4d6756d7fc623936 Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 23 May 2023 16:01:28 +0200 Subject: [PATCH 28/83] chore: changeset Signed-off-by: blam --- .changeset/beige-kangaroos-suffer.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/beige-kangaroos-suffer.md diff --git a/.changeset/beige-kangaroos-suffer.md b/.changeset/beige-kangaroos-suffer.md new file mode 100644 index 0000000000..249fb5a4b6 --- /dev/null +++ b/.changeset/beige-kangaroos-suffer.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-kubernetes': patch +--- + +Fix cyclical dependency in built output From c48ff747950e650aec9bfdfe78ff9ee21c38fdaf Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 30 Dec 2022 14:47:36 +0100 Subject: [PATCH 29/83] theme: namespace MUI v4 methods and types Signed-off-by: Patrik Oldsberg --- packages/theme/api-report.md | 40 ++++++--- packages/theme/src/index.ts | 40 +++++++-- packages/theme/src/types.ts | 65 +------------- packages/theme/src/{ => v4}/baseTheme.ts | 23 +++-- packages/theme/src/v4/index.ts | 30 +++++++ packages/theme/src/{ => v4}/pageTheme.ts | 3 +- packages/theme/src/{ => v4}/themes.ts | 6 +- packages/theme/src/v4/types.ts | 105 +++++++++++++++++++++++ 8 files changed, 212 insertions(+), 100 deletions(-) rename packages/theme/src/{ => v4}/baseTheme.ts (93%) create mode 100644 packages/theme/src/v4/index.ts rename packages/theme/src/{ => v4}/pageTheme.ts (99%) rename packages/theme/src/{ => v4}/themes.ts (96%) create mode 100644 packages/theme/src/v4/types.ts diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 863ab81b68..c61245e0e2 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -9,7 +9,7 @@ import { PaletteOptions } from '@material-ui/core/styles/createPalette'; import { Theme } from '@material-ui/core'; import { ThemeOptions } from '@material-ui/core'; -// @public +// @public @deprecated export type BackstagePalette = Palette & BackstagePaletteAdditions; // @public @@ -75,11 +75,11 @@ export type BackstagePaletteAdditions = { }; }; -// @public +// @public @deprecated export type BackstagePaletteOptions = PaletteOptions & BackstagePaletteAdditions; -// @public +// @public @deprecated export interface BackstageTheme extends Theme { // (undocumented) getPageTheme: (selector: PageThemeSelector) => PageTheme; @@ -89,7 +89,7 @@ export interface BackstageTheme extends Theme { palette: BackstagePalette; } -// @public +// @public @deprecated export interface BackstageThemeOptions extends ThemeOptions { // (undocumented) getPageTheme: (selector: PageThemeSelector) => PageTheme; @@ -102,19 +102,28 @@ export interface BackstageThemeOptions extends ThemeOptions { // @public export const colorVariants: Record; -// @public -export function createTheme(options: SimpleThemeOptions): BackstageTheme; +// @public @deprecated (undocumented) +export const createTheme: typeof createV4Theme; + +// @public @deprecated (undocumented) +export const createThemeOptions: typeof createV4ThemeOptions; + +// @public @deprecated (undocumented) +export const createThemeOverrides: typeof createV4ThemeOverrides; // @public -export function createThemeOptions( - options: SimpleThemeOptions, -): BackstageThemeOptions; +export function createV4Theme(options: SimpleV4ThemeOptions): Theme; // @public -export function createThemeOverrides(theme: BackstageTheme): Overrides; +export function createV4ThemeOptions( + options: SimpleV4ThemeOptions, +): ThemeOptions; // @public -export const darkTheme: BackstageTheme; +export function createV4ThemeOverrides(theme: Theme): Overrides; + +// @public +export const darkTheme: Theme; // @public export function genPageTheme(props: { @@ -126,7 +135,7 @@ export function genPageTheme(props: { }): PageTheme; // @public -export const lightTheme: BackstageTheme; +export const lightTheme: Theme; // @public export type PageTheme = { @@ -147,9 +156,12 @@ export type PageThemeSelector = { // @public export const shapes: Record; +// @public @deprecated (undocumented) +export type SimpleThemeOptions = SimpleV4ThemeOptions; + // @public -export type SimpleThemeOptions = { - palette: BackstagePaletteOptions; +export type SimpleV4ThemeOptions = { + palette: PaletteOptions; defaultPageTheme: string; pageTheme?: Record; fontFamily?: string; diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index 41f827bf43..33b5c9a697 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -1,5 +1,5 @@ /* - * Copyright 2020 The Backstage Authors + * Copyright 2022 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -20,7 +20,37 @@ * @packageDocumentation */ -export * from './themes'; -export * from './baseTheme'; -export * from './types'; -export * from './pageTheme'; +export * from './v4'; +export type { + BackstagePaletteAdditions, + PageTheme, + PageThemeSelector, +} from './types'; + +import { + createV4Theme, + createV4ThemeOptions, + createV4ThemeOverrides, +} from './v4'; +import type { SimpleV4ThemeOptions } from './v4'; + +/** + * @public + * @deprecated Use {@link createV4Theme} instead. + */ +export const createTheme = createV4Theme; +/** + * @public + * @deprecated Use {@link createV4ThemeOptions} instead. + */ +export const createThemeOptions = createV4ThemeOptions; +/** + * @public + * @deprecated Use {@link createV4ThemeOverrides} instead. + */ +export const createThemeOverrides = createV4ThemeOverrides; +/** + * @public + * @deprecated Use {@link SimpleV4ThemeOptions} instead. + */ +export type SimpleThemeOptions = SimpleV4ThemeOptions; diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index 0295e491f1..143ccbabaa 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -1,5 +1,5 @@ /* - * Copyright 2020 The Backstage Authors + * Copyright 2022 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -14,12 +14,6 @@ * limitations under the License. */ -import { Theme, ThemeOptions } from '@material-ui/core'; -import { - PaletteOptions, - Palette, -} from '@material-ui/core/styles/createPalette'; - /** * Backstage specific additions to the material-ui palette. * @@ -90,21 +84,6 @@ export type BackstagePaletteAdditions = { }; }; -/** - * The full Backstage palette. - * - * @public - */ -export type BackstagePalette = Palette & BackstagePaletteAdditions; - -/** - * The full Backstage palette options. - * - * @public - */ -export type BackstagePaletteOptions = PaletteOptions & - BackstagePaletteAdditions; - /** * Selector for what page theme to use. * @@ -114,48 +93,6 @@ export type PageThemeSelector = { themeId: string; }; -/** - * A Backstage theme. - * - * @public - */ -export interface BackstageTheme extends Theme { - palette: BackstagePalette; - page: PageTheme; - getPageTheme: (selector: PageThemeSelector) => PageTheme; -} - -/** - * Backstage theme options. - * - * @public - * @remarks - * - * This is essentially a partial theme definition made by the user, that then - * gets merged together with defaults and other values to form the final - * {@link BackstageTheme}. - * - */ -export interface BackstageThemeOptions extends ThemeOptions { - palette: BackstagePaletteOptions; - page: PageTheme; - getPageTheme: (selector: PageThemeSelector) => PageTheme; -} - -/** - * A simpler configuration for creating a new theme that just tweaks some parts - * of the backstage one. - * - * @public - */ -export type SimpleThemeOptions = { - palette: BackstagePaletteOptions; - defaultPageTheme: string; - pageTheme?: Record; - fontFamily?: string; - htmlFontSize?: number; -}; - /** * The theme definitions for a given layout page. * diff --git a/packages/theme/src/baseTheme.ts b/packages/theme/src/v4/baseTheme.ts similarity index 93% rename from packages/theme/src/baseTheme.ts rename to packages/theme/src/v4/baseTheme.ts index c0a9022bd0..b326018e87 100644 --- a/packages/theme/src/baseTheme.ts +++ b/packages/theme/src/v4/baseTheme.ts @@ -15,14 +15,11 @@ */ import { createTheme as createMuiTheme } from '@material-ui/core/styles'; +import { Theme, ThemeOptions } from '@material-ui/core'; import { darken, lighten } from '@material-ui/core/styles/colorManipulator'; import { Overrides } from '@material-ui/core/styles/overrides'; -import { - BackstageTheme, - BackstageThemeOptions, - SimpleThemeOptions, -} from './types'; import { pageTheme as defaultPageThemes } from './pageTheme'; +import { SimpleV4ThemeOptions } from './types'; const DEFAULT_HTML_FONT_SIZE = 16; const DEFAULT_FONT_FAMILY = @@ -33,9 +30,9 @@ const DEFAULT_FONT_FAMILY = * * @public */ -export function createThemeOptions( - options: SimpleThemeOptions, -): BackstageThemeOptions { +export function createV4ThemeOptions( + options: SimpleV4ThemeOptions, +): ThemeOptions { const { palette, htmlFontSize = DEFAULT_HTML_FONT_SIZE, @@ -103,7 +100,7 @@ export function createThemeOptions( * * @public */ -export function createThemeOverrides(theme: BackstageTheme): Overrides { +export function createV4ThemeOverrides(theme: Theme): Overrides { return { MuiCssBaseline: { '@global': { @@ -291,10 +288,10 @@ export function createThemeOverrides(theme: BackstageTheme): Overrides { * * @public */ -export function createTheme(options: SimpleThemeOptions): BackstageTheme { - const themeOptions = createThemeOptions(options); - const baseTheme = createMuiTheme(themeOptions) as BackstageTheme; - const overrides = createThemeOverrides(baseTheme); +export function createV4Theme(options: SimpleV4ThemeOptions): Theme { + const themeOptions = createV4ThemeOptions(options); + const baseTheme = createMuiTheme(themeOptions); + const overrides = createV4ThemeOverrides(baseTheme); const theme = { ...baseTheme, overrides }; return theme; } diff --git a/packages/theme/src/v4/index.ts b/packages/theme/src/v4/index.ts new file mode 100644 index 0000000000..f897070f0e --- /dev/null +++ b/packages/theme/src/v4/index.ts @@ -0,0 +1,30 @@ +/* + * Copyright 2020 The Backstage Authors + * + * 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 { darkTheme, lightTheme } from './themes'; +export { + createV4Theme, + createV4ThemeOptions, + createV4ThemeOverrides, +} from './baseTheme'; +export type { + BackstagePalette, + BackstagePaletteOptions, + BackstageTheme, + BackstageThemeOptions, + SimpleV4ThemeOptions, +} from './types'; +export { colorVariants, genPageTheme, pageTheme, shapes } from './pageTheme'; diff --git a/packages/theme/src/pageTheme.ts b/packages/theme/src/v4/pageTheme.ts similarity index 99% rename from packages/theme/src/pageTheme.ts rename to packages/theme/src/v4/pageTheme.ts index dd36d7641b..93eb2be0e3 100644 --- a/packages/theme/src/pageTheme.ts +++ b/packages/theme/src/v4/pageTheme.ts @@ -13,7 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { PageTheme } from './types'; + +import { PageTheme } from '../types'; /** * The default predefined burst shapes. diff --git a/packages/theme/src/themes.ts b/packages/theme/src/v4/themes.ts similarity index 96% rename from packages/theme/src/themes.ts rename to packages/theme/src/v4/themes.ts index 23438a1c14..9432aa2b57 100644 --- a/packages/theme/src/themes.ts +++ b/packages/theme/src/v4/themes.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { createTheme } from './baseTheme'; +import { createV4Theme } from './baseTheme'; import { pageTheme } from './pageTheme'; import { yellow } from '@material-ui/core/colors'; @@ -23,7 +23,7 @@ import { yellow } from '@material-ui/core/colors'; * * @public */ -export const lightTheme = createTheme({ +export const lightTheme = createV4Theme({ palette: { type: 'light', background: { @@ -101,7 +101,7 @@ export const lightTheme = createTheme({ * * @public */ -export const darkTheme = createTheme({ +export const darkTheme = createV4Theme({ palette: { type: 'dark', background: { diff --git a/packages/theme/src/v4/types.ts b/packages/theme/src/v4/types.ts new file mode 100644 index 0000000000..7a292fe0a1 --- /dev/null +++ b/packages/theme/src/v4/types.ts @@ -0,0 +1,105 @@ +/* + * Copyright 2020 The Backstage Authors + * + * 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 { Theme, ThemeOptions } from '@material-ui/core'; +import { + PaletteOptions, + Palette, +} from '@material-ui/core/styles/createPalette'; +import { + BackstagePaletteAdditions, + PageTheme, + PageThemeSelector, +} from '../types'; + +/** + * The full Backstage palette. + * + * @public + * @deprecated This type is deprecated, the MUI Palette type is now always extended instead. + */ +export type BackstagePalette = Palette & BackstagePaletteAdditions; + +/** + * The full Backstage palette options. + * + * @public + * @deprecated This type is deprecated, the MUI PaletteOptions type is now always extended instead. + */ +export type BackstagePaletteOptions = PaletteOptions & + BackstagePaletteAdditions; + +/** + * Backstage theme options. + * + * @public + * @deprecated This type is deprecated, the MUI ThemeOptions type is now always extended instead. + * @remarks + * + * This is essentially a partial theme definition made by the user, that then + * gets merged together with defaults and other values to form the final + * {@link BackstageTheme}. + * + */ +export interface BackstageThemeOptions extends ThemeOptions { + palette: BackstagePaletteOptions; + page: PageTheme; + getPageTheme: (selector: PageThemeSelector) => PageTheme; +} + +/** + * A Backstage theme. + * + * @public + * @deprecated This type is deprecated, the MUI Theme type is now always extended instead. + */ +export interface BackstageTheme extends Theme { + palette: BackstagePalette; + page: PageTheme; + getPageTheme: (selector: PageThemeSelector) => PageTheme; +} + +/** + * A simpler configuration for creating a new theme that just tweaks some parts + * of the backstage one. + * + * @public + */ +export type SimpleV4ThemeOptions = { + palette: PaletteOptions; + defaultPageTheme: string; + pageTheme?: Record; + fontFamily?: string; + htmlFontSize?: number; +}; + +declare module '@material-ui/core/styles/createPalette' { + interface Palette extends BackstagePaletteAdditions {} + + interface PaletteOptions extends BackstagePaletteAdditions {} +} + +declare module '@material-ui/core/styles/createTheme' { + interface Theme { + page: PageTheme; + getPageTheme: (selector: PageThemeSelector) => PageTheme; + } + + interface ThemeOptions { + page: PageTheme; + getPageTheme: (selector: PageThemeSelector) => PageTheme; + } +} From 91ea8e83433aa79c9f7df2eb69e3e4f8cfafcc1a Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 30 Dec 2022 15:00:40 +0100 Subject: [PATCH 30/83] theme: initial mui v5 types + workaround Signed-off-by: Patrik Oldsberg --- packages/theme/package.json | 7 ++++- packages/theme/src/index.ts | 1 + packages/theme/src/v5/index.ts | 17 +++++++++++ packages/theme/src/v5/types.ts | 53 ++++++++++++++++++++++++++++++++++ 4 files changed, 77 insertions(+), 1 deletion(-) create mode 100644 packages/theme/src/v5/index.ts create mode 100644 packages/theme/src/v5/types.ts diff --git a/packages/theme/package.json b/packages/theme/package.json index fbc767fb2f..99d9929525 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -32,7 +32,12 @@ "test": "backstage-cli package test" }, "dependencies": { - "@material-ui/core": "^4.12.2" + "@material-ui/core": "^4.12.2", + "@mui/material": "^5.11.2" + }, + "peerDependencies": { + "@types/react": "^16.13.1 || ^17.0.0", + "react": "^16.13.1 || ^17.0.0" }, "peerDependencies": { "react": "^16.13.1 || ^17.0.0", diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index 33b5c9a697..5a07f66536 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -21,6 +21,7 @@ */ export * from './v4'; +export * from './v5'; export type { BackstagePaletteAdditions, PageTheme, diff --git a/packages/theme/src/v5/index.ts b/packages/theme/src/v5/index.ts new file mode 100644 index 0000000000..db229eae34 --- /dev/null +++ b/packages/theme/src/v5/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2022 The Backstage Authors + * + * 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 * from './types'; diff --git a/packages/theme/src/v5/types.ts b/packages/theme/src/v5/types.ts new file mode 100644 index 0000000000..d1ffdf2e80 --- /dev/null +++ b/packages/theme/src/v5/types.ts @@ -0,0 +1,53 @@ +/* + * Copyright 2022 The Backstage Authors + * + * 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 { + BackstagePaletteAdditions, + PageTheme, + PageThemeSelector, +} from '../types'; + +declare module '@mui/material/styles/createPalette' { + interface Palette extends BackstagePaletteAdditions {} + + interface PaletteOptions extends BackstagePaletteAdditions {} +} + +declare module '@mui/material/styles/createTheme' { + interface Theme { + pageTheme: PageTheme; + getPageTheme: (selector: PageThemeSelector) => PageTheme; + } + + interface ThemeOptions { + pageTheme: PageTheme; + getPageTheme: (selector: PageThemeSelector) => PageTheme; + } +} + +// This is a workaround for missing methods in React 17 that MUI v5 depends on +// See https://github.com/mui/material-ui/issues/35287 +declare global { + namespace React { + type React = typeof import('react'); + + interface DOMAttributes { + onResize?: React.EventHandler | undefined; + onResizeCapture?: React.EventHandler | undefined; + nonce?: string | undefined; + } + } +} From f728b0f62e8d013f0a24bd0d00fa6a117a6fe4d4 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 30 Dec 2022 15:02:27 +0100 Subject: [PATCH 31/83] theme: unify theme additions type Signed-off-by: Patrik Oldsberg --- packages/theme/src/types.ts | 10 ++++++++++ packages/theme/src/v4/types.ts | 11 +++-------- packages/theme/src/v5/types.ts | 16 +++------------- 3 files changed, 16 insertions(+), 21 deletions(-) diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index 143ccbabaa..8f71ce4292 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -104,3 +104,13 @@ export type PageTheme = { backgroundImage: string; fontColor: string; }; + +/** + * Backstage specific additions to the material-ui theme. + * + * @public + */ +export type BackstageThemeAdditions = { + page: PageTheme; + getPageTheme: (selector: PageThemeSelector) => PageTheme; +}; diff --git a/packages/theme/src/v4/types.ts b/packages/theme/src/v4/types.ts index 7a292fe0a1..e21ced6e94 100644 --- a/packages/theme/src/v4/types.ts +++ b/packages/theme/src/v4/types.ts @@ -21,6 +21,7 @@ import { } from '@material-ui/core/styles/createPalette'; import { BackstagePaletteAdditions, + BackstageThemeAdditions, PageTheme, PageThemeSelector, } from '../types'; @@ -93,13 +94,7 @@ declare module '@material-ui/core/styles/createPalette' { } declare module '@material-ui/core/styles/createTheme' { - interface Theme { - page: PageTheme; - getPageTheme: (selector: PageThemeSelector) => PageTheme; - } + interface Theme extends BackstageThemeAdditions {} - interface ThemeOptions { - page: PageTheme; - getPageTheme: (selector: PageThemeSelector) => PageTheme; - } + interface ThemeOptions extends BackstageThemeAdditions {} } diff --git a/packages/theme/src/v5/types.ts b/packages/theme/src/v5/types.ts index d1ffdf2e80..d3cf97411d 100644 --- a/packages/theme/src/v5/types.ts +++ b/packages/theme/src/v5/types.ts @@ -14,11 +14,7 @@ * limitations under the License. */ -import { - BackstagePaletteAdditions, - PageTheme, - PageThemeSelector, -} from '../types'; +import { BackstagePaletteAdditions, BackstageThemeAdditions } from '../types'; declare module '@mui/material/styles/createPalette' { interface Palette extends BackstagePaletteAdditions {} @@ -27,15 +23,9 @@ declare module '@mui/material/styles/createPalette' { } declare module '@mui/material/styles/createTheme' { - interface Theme { - pageTheme: PageTheme; - getPageTheme: (selector: PageThemeSelector) => PageTheme; - } + interface Theme extends BackstageThemeAdditions {} - interface ThemeOptions { - pageTheme: PageTheme; - getPageTheme: (selector: PageThemeSelector) => PageTheme; - } + interface ThemeOptions extends BackstageThemeAdditions {} } // This is a workaround for missing methods in React 17 that MUI v5 depends on From be7c4cdab9044da044ac785533588601141db2b0 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 30 Dec 2022 15:05:27 +0100 Subject: [PATCH 32/83] theme: move pageTheme to root Signed-off-by: Patrik Oldsberg --- packages/theme/src/index.ts | 1 + packages/theme/src/{v4 => }/pageTheme.ts | 2 +- packages/theme/src/v4/baseTheme.ts | 2 +- packages/theme/src/v4/index.ts | 1 - packages/theme/src/v4/themes.ts | 2 +- 5 files changed, 4 insertions(+), 4 deletions(-) rename packages/theme/src/{v4 => }/pageTheme.ts (99%) diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index 5a07f66536..c9f0ebd289 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -22,6 +22,7 @@ export * from './v4'; export * from './v5'; +export { colorVariants, genPageTheme, pageTheme, shapes } from './pageTheme'; export type { BackstagePaletteAdditions, PageTheme, diff --git a/packages/theme/src/v4/pageTheme.ts b/packages/theme/src/pageTheme.ts similarity index 99% rename from packages/theme/src/v4/pageTheme.ts rename to packages/theme/src/pageTheme.ts index 93eb2be0e3..12a73b6089 100644 --- a/packages/theme/src/v4/pageTheme.ts +++ b/packages/theme/src/pageTheme.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { PageTheme } from '../types'; +import { PageTheme } from './types'; /** * The default predefined burst shapes. diff --git a/packages/theme/src/v4/baseTheme.ts b/packages/theme/src/v4/baseTheme.ts index b326018e87..1dcd2cf7d7 100644 --- a/packages/theme/src/v4/baseTheme.ts +++ b/packages/theme/src/v4/baseTheme.ts @@ -18,7 +18,7 @@ import { createTheme as createMuiTheme } from '@material-ui/core/styles'; import { Theme, ThemeOptions } from '@material-ui/core'; import { darken, lighten } from '@material-ui/core/styles/colorManipulator'; import { Overrides } from '@material-ui/core/styles/overrides'; -import { pageTheme as defaultPageThemes } from './pageTheme'; +import { pageTheme as defaultPageThemes } from '../pageTheme'; import { SimpleV4ThemeOptions } from './types'; const DEFAULT_HTML_FONT_SIZE = 16; diff --git a/packages/theme/src/v4/index.ts b/packages/theme/src/v4/index.ts index f897070f0e..331e0e4c1e 100644 --- a/packages/theme/src/v4/index.ts +++ b/packages/theme/src/v4/index.ts @@ -27,4 +27,3 @@ export type { BackstageThemeOptions, SimpleV4ThemeOptions, } from './types'; -export { colorVariants, genPageTheme, pageTheme, shapes } from './pageTheme'; diff --git a/packages/theme/src/v4/themes.ts b/packages/theme/src/v4/themes.ts index 9432aa2b57..4aa1902f4a 100644 --- a/packages/theme/src/v4/themes.ts +++ b/packages/theme/src/v4/themes.ts @@ -15,7 +15,7 @@ */ import { createV4Theme } from './baseTheme'; -import { pageTheme } from './pageTheme'; +import { pageTheme } from '../pageTheme'; import { yellow } from '@material-ui/core/colors'; /** From 231b39bae838454001a3285d1dc33f48e6e0c0af Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 12:32:17 +0100 Subject: [PATCH 33/83] theme: add v5->v4 component theme adapter Signed-off-by: Patrik Oldsberg --- packages/theme/src/compat/overrides.test.ts | 138 ++++++++++++++++++++ packages/theme/src/compat/overrides.ts | 71 ++++++++++ 2 files changed, 209 insertions(+) create mode 100644 packages/theme/src/compat/overrides.test.ts create mode 100644 packages/theme/src/compat/overrides.ts diff --git a/packages/theme/src/compat/overrides.test.ts b/packages/theme/src/compat/overrides.test.ts new file mode 100644 index 0000000000..68fd883168 --- /dev/null +++ b/packages/theme/src/compat/overrides.test.ts @@ -0,0 +1,138 @@ +/* + * Copyright 2022 The Backstage Authors + * + * 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 { Theme } from '@mui/material'; +import { transformV5ComponentThemesToV4 } from './overrides'; + +describe('transformV5ComponentThemesToV4', () => { + const mockTheme = { + palette: { + primary: { + main: 'red', + }, + }, + } as unknown as Theme; + it('transforms empty component themes', () => { + expect(transformV5ComponentThemesToV4(mockTheme)).toEqual({ + overrides: {}, + props: {}, + }); + expect(transformV5ComponentThemesToV4(mockTheme, {})).toEqual({ + overrides: {}, + props: {}, + }); + expect( + transformV5ComponentThemesToV4(mockTheme, { + MuiButton: { + styleOverrides: undefined, + defaultProps: undefined, + }, + }), + ).toEqual({ overrides: {}, props: {} }); + expect( + transformV5ComponentThemesToV4(mockTheme, { + MuiButton: { + styleOverrides: {}, + defaultProps: {}, + }, + }), + ).toEqual({ overrides: { MuiButton: {} }, props: { MuiButton: {} } }); + }); + + it('transforms component themes', () => { + expect( + transformV5ComponentThemesToV4(mockTheme, { + MuiButton: { + styleOverrides: { + root: { + color: 'green', + }, + }, + defaultProps: { + disableRipple: true, + }, + }, + }), + ).toEqual({ + overrides: { + MuiButton: { + root: { + color: 'green', + }, + }, + }, + props: { + MuiButton: { + disableRipple: true, + }, + }, + }); + expect( + transformV5ComponentThemesToV4(mockTheme, { + MuiButton: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.primary.main, + }), + }, + }, + }), + ).toEqual({ + overrides: { + MuiButton: { + root: { + color: 'red', + }, + }, + }, + props: {}, + }); + }); + + it('transforms CSSBaseline theme', () => { + expect( + transformV5ComponentThemesToV4(mockTheme, { + MuiCssBaseline: { + styleOverrides: theme => ({ + '@global': { + html: { + color: theme.palette.primary.main, + }, + }, + }), + defaultProps: { + enableColorScheme: true, + }, + }, + }), + ).toEqual({ + overrides: { + MuiCssBaseline: { + '@global': { + html: { + color: 'red', + }, + }, + }, + }, + props: { + MuiCssBaseline: { + enableColorScheme: true, + }, + }, + }); + }); +}); diff --git a/packages/theme/src/compat/overrides.ts b/packages/theme/src/compat/overrides.ts new file mode 100644 index 0000000000..0ada593740 --- /dev/null +++ b/packages/theme/src/compat/overrides.ts @@ -0,0 +1,71 @@ +/* + * Copyright 2022 The Backstage Authors + * + * 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 { Overrides } from '@material-ui/core/styles/overrides'; +import { ComponentsProps } from '@material-ui/core/styles/props'; +import { ComponentsOverrides, Theme } from '@mui/material/styles'; + +type V5Override = ComponentsOverrides[keyof ComponentsOverrides]; +type V4Override = Overrides[keyof Overrides]; + +// Converts callback-based overrides to static styles, e.g. +// { root: theme => ({ color: theme.color }) } -> { root: { color: 'red' } } +function adaptV5Override(theme: Theme, overrides: V5Override): V4Override { + if (!overrides) { + return overrides as V4Override; + } + if (typeof overrides === 'function') { + return overrides(theme) as V4Override; + } + if (typeof overrides === 'object') { + return Object.fromEntries( + Object.entries(overrides).map(([className, style]) => { + if (typeof style === 'function') { + return [className, style({ theme })]; + } + return [className, style]; + }), + ); + } + return overrides as V4Override; +} + +// Transform v5 theme overrides into a v4 theme, by converting the callback-based overrides +export function transformV5ComponentThemesToV4( + theme: Theme, + components: Theme['components'] = {}, +): { overrides: Overrides; props: ComponentsProps } { + const overrides: Record = {}; + const props: Record = {}; + + for (const name of Object.keys(components)) { + const component = components[name as keyof typeof components]; + if (!component) { + continue; + } + if ('styleOverrides' in component) { + overrides[name] = adaptV5Override( + theme, + component.styleOverrides as V5Override, + ); + } + if ('defaultProps' in component) { + props[name] = component.defaultProps; + } + } + + return { overrides, props }; +} From b678641ab16a6648c5a6ac23f06fc08ac3453675 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 14:16:31 +0100 Subject: [PATCH 34/83] theme: add multi theme provider and holder Signed-off-by: Patrik Oldsberg --- .../theme/src/compat/MultiThemeProvider.tsx | 58 +++++++++++++++++++ packages/theme/src/compat/types.ts | 19 ++++++ 2 files changed, 77 insertions(+) create mode 100644 packages/theme/src/compat/MultiThemeProvider.tsx create mode 100644 packages/theme/src/compat/types.ts diff --git a/packages/theme/src/compat/MultiThemeProvider.tsx b/packages/theme/src/compat/MultiThemeProvider.tsx new file mode 100644 index 0000000000..e707010dc9 --- /dev/null +++ b/packages/theme/src/compat/MultiThemeProvider.tsx @@ -0,0 +1,58 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { ReactNode } from 'react'; +import { + Theme as Mui4Theme, + ThemeProvider as Mui4Provider, +} from '@material-ui/core/styles'; +import { + Theme as Mui5Theme, + ThemeProvider as Mui5Provider, +} from '@mui/material/styles'; +import CssBaseline from '@mui/material/CssBaseline'; +import { MultiThemeHolder } from './types'; + +interface ThemeProviderProps { + children: ReactNode; + theme: MultiThemeHolder; + noCssBaseline?: boolean; +} + +export function MultiThemeProvider(props: ThemeProviderProps) { + const { children, theme, noCssBaseline } = props; + + let result = noCssBaseline ? ( + children + ) : ( + <> + + {children} + + ); + + const v4Theme = theme.getThemeForVersion('v4'); + if (v4Theme) { + result = {result}; + } + + const v5Theme = theme.getThemeForVersion('v5'); + if (v5Theme) { + result = {result}; + } + + return result; +} diff --git a/packages/theme/src/compat/types.ts b/packages/theme/src/compat/types.ts new file mode 100644 index 0000000000..dac6ef9492 --- /dev/null +++ b/packages/theme/src/compat/types.ts @@ -0,0 +1,19 @@ +/* + * Copyright 2022 The Backstage Authors + * + * 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 interface MultiThemeHolder { + getThemeForVersion(version: string): unknown | undefined; +} From 9457dc832c5dabf74d52742c13c3fca183a35f7c Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 14:17:57 +0100 Subject: [PATCH 35/83] theme: exports for compat Signed-off-by: Patrik Oldsberg --- packages/theme/src/compat/index.ts | 18 ++++++++++++++++++ packages/theme/src/index.ts | 1 + 2 files changed, 19 insertions(+) create mode 100644 packages/theme/src/compat/index.ts diff --git a/packages/theme/src/compat/index.ts b/packages/theme/src/compat/index.ts new file mode 100644 index 0000000000..fe6863b8bc --- /dev/null +++ b/packages/theme/src/compat/index.ts @@ -0,0 +1,18 @@ +/* + * Copyright 2022 The Backstage Authors + * + * 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 { MultiThemeProvider } from './MultiThemeProvider'; +export type { MultiThemeHolder } from './types'; diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index c9f0ebd289..a6c9632983 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -20,6 +20,7 @@ * @packageDocumentation */ +export * from './compat'; export * from './v4'; export * from './v5'; export { colorVariants, genPageTheme, pageTheme, shapes } from './pageTheme'; From 744b36547627634442b950c3b270993f5291571a Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 14:36:52 +0100 Subject: [PATCH 36/83] theme: make home the default page theme Signed-off-by: Patrik Oldsberg --- packages/theme/src/v4/baseTheme.ts | 3 ++- packages/theme/src/v4/types.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/theme/src/v4/baseTheme.ts b/packages/theme/src/v4/baseTheme.ts index 1dcd2cf7d7..5bd7981377 100644 --- a/packages/theme/src/v4/baseTheme.ts +++ b/packages/theme/src/v4/baseTheme.ts @@ -24,6 +24,7 @@ import { SimpleV4ThemeOptions } from './types'; const DEFAULT_HTML_FONT_SIZE = 16; const DEFAULT_FONT_FAMILY = '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif'; +const DEFAULT_PAGE_THEME = 'home'; /** * A helper for creating theme options. @@ -37,7 +38,7 @@ export function createV4ThemeOptions( palette, htmlFontSize = DEFAULT_HTML_FONT_SIZE, fontFamily = DEFAULT_FONT_FAMILY, - defaultPageTheme, + defaultPageTheme = DEFAULT_PAGE_THEME, pageTheme = defaultPageThemes, } = options; diff --git a/packages/theme/src/v4/types.ts b/packages/theme/src/v4/types.ts index e21ced6e94..9da80e73a3 100644 --- a/packages/theme/src/v4/types.ts +++ b/packages/theme/src/v4/types.ts @@ -81,7 +81,7 @@ export interface BackstageTheme extends Theme { */ export type SimpleV4ThemeOptions = { palette: PaletteOptions; - defaultPageTheme: string; + defaultPageTheme?: string; pageTheme?: Record; fontFamily?: string; htmlFontSize?: number; From f25222d7c1275f0abd8fca9c6a1255536e565e34 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 15:06:51 +0100 Subject: [PATCH 37/83] theme: add unified theme abstraction + creators and base theme options Signed-off-by: Patrik Oldsberg --- packages/theme/src/compat/UnifiedTheme.tsx | 96 +++++++ ...eProvider.tsx => UnifiedThemeProvider.tsx} | 10 +- .../src/compat/createBaseThemeOptions.ts | 93 +++++++ packages/theme/src/compat/index.ts | 4 +- packages/theme/src/compat/overrides.ts | 4 +- packages/theme/src/compat/types.ts | 11 +- .../theme/src/v5/defaultComponentThemes.ts | 243 ++++++++++++++++++ packages/theme/src/v5/index.ts | 1 + packages/theme/src/v5/types.ts | 21 +- 9 files changed, 471 insertions(+), 12 deletions(-) create mode 100644 packages/theme/src/compat/UnifiedTheme.tsx rename packages/theme/src/compat/{MultiThemeProvider.tsx => UnifiedThemeProvider.tsx} (85%) create mode 100644 packages/theme/src/compat/createBaseThemeOptions.ts create mode 100644 packages/theme/src/v5/defaultComponentThemes.ts diff --git a/packages/theme/src/compat/UnifiedTheme.tsx b/packages/theme/src/compat/UnifiedTheme.tsx new file mode 100644 index 0000000000..7bd907bc84 --- /dev/null +++ b/packages/theme/src/compat/UnifiedTheme.tsx @@ -0,0 +1,96 @@ +/* + * Copyright 2022 The Backstage Authors + * + * 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 { + Theme as Mui4Theme, + createTheme as createV4Theme, + ThemeOptions as ThemeOptionsV4, +} from '@material-ui/core/styles'; +import { PaletteOptions as PaletteOptionsV4 } from '@material-ui/core/styles/createPalette'; +import { PaletteOptions as PaletteOptionsV5 } from '@mui/material/styles/createPalette'; +import { + adaptV4Theme, + Theme as Mui5Theme, + createTheme as createV5Theme, + ThemeOptions as ThemeOptionsV5, +} from '@mui/material/styles'; +import { transformV5ComponentThemesToV4 } from './overrides'; +import { PageTheme } from '../types'; +import { defaultComponentThemes } from '../v5'; +import { createBaseThemeOptions } from './createBaseThemeOptions'; +import { UnifiedTheme } from './types'; + +export class UnifiedThemeHolder implements UnifiedTheme { + #themes = new Map(); + + constructor(v4?: Mui4Theme, v5?: Mui5Theme) { + this.#themes = new Map(); + if (v4) { + this.#themes.set('v4', v4); + } + if (v5) { + this.#themes.set('v5', v5); + } + } + + getTheme(version: string): unknown | undefined { + return this.#themes.get(version); + } +} + +/** + * Options for creating a new {@link UnifiedTheme}. + * + * @public + */ +export interface UnifiedThemeOptions { + palette: PaletteOptionsV4 & PaletteOptionsV5; + defaultPageTheme?: string; + pageTheme?: Record; + fontFamily?: string; + htmlFontSize?: number; + components?: ThemeOptionsV5['components']; +} + +/** + * Creates a new {@link UnifiedTheme} using the provided options. + * + * @public + */ +export function createUnifiedTheme( + options: UnifiedThemeOptions, +): UnifiedThemeHolder { + const themeOptions = createBaseThemeOptions(options); + const components = { ...defaultComponentThemes, ...options.components }; + const v5Theme = createV5Theme({ ...themeOptions, components }); + const v4Overrides = transformV5ComponentThemesToV4(v5Theme, components); + const v4Theme = { ...createV4Theme(themeOptions), ...v4Overrides }; + + return new UnifiedThemeHolder(v4Theme, v5Theme); +} + +/** + * Creates a new {@link UnifiedTheme} using MUI v4 theme options. + * Note that this uses `adaptV4Theme` from MUI v5, which is deprecated. + * + * @public + */ +export function createUnifiedThemeFromV4(options: ThemeOptionsV4) { + const v4Theme = createV4Theme(options); + const v5Theme = adaptV4Theme(options as any); + + return new UnifiedThemeHolder(v4Theme, v5Theme); +} diff --git a/packages/theme/src/compat/MultiThemeProvider.tsx b/packages/theme/src/compat/UnifiedThemeProvider.tsx similarity index 85% rename from packages/theme/src/compat/MultiThemeProvider.tsx rename to packages/theme/src/compat/UnifiedThemeProvider.tsx index e707010dc9..19fd13eb08 100644 --- a/packages/theme/src/compat/MultiThemeProvider.tsx +++ b/packages/theme/src/compat/UnifiedThemeProvider.tsx @@ -24,15 +24,15 @@ import { ThemeProvider as Mui5Provider, } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; -import { MultiThemeHolder } from './types'; +import { UnifiedTheme } from './types'; interface ThemeProviderProps { children: ReactNode; - theme: MultiThemeHolder; + theme: UnifiedTheme; noCssBaseline?: boolean; } -export function MultiThemeProvider(props: ThemeProviderProps) { +export function UnifiedThemeProvider(props: ThemeProviderProps) { const { children, theme, noCssBaseline } = props; let result = noCssBaseline ? ( @@ -44,12 +44,12 @@ export function MultiThemeProvider(props: ThemeProviderProps) { ); - const v4Theme = theme.getThemeForVersion('v4'); + const v4Theme = theme.getTheme('v4'); if (v4Theme) { result = {result}; } - const v5Theme = theme.getThemeForVersion('v5'); + const v5Theme = theme.getTheme('v5'); if (v5Theme) { result = {result}; } diff --git a/packages/theme/src/compat/createBaseThemeOptions.ts b/packages/theme/src/compat/createBaseThemeOptions.ts new file mode 100644 index 0000000000..ab8a80fb94 --- /dev/null +++ b/packages/theme/src/compat/createBaseThemeOptions.ts @@ -0,0 +1,93 @@ +/* + * Copyright 2022 The Backstage Authors + * + * 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, PageThemeSelector } from '../types'; +import { pageTheme as defaultPageThemes } from '../pageTheme'; + +const DEFAULT_HTML_FONT_SIZE = 16; +const DEFAULT_FONT_FAMILY = + '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif'; +const DEFAULT_PAGE_THEME = 'home'; + +export interface BaseThemeOptionsInput { + palette: PaletteOptions; + defaultPageTheme?: string; + pageTheme?: Record; + fontFamily?: string; + htmlFontSize?: number; +} + +/** + * A helper for creating theme options. + * + * @public + */ +export function createBaseThemeOptions( + options: BaseThemeOptionsInput, +) { + const { + palette, + htmlFontSize = DEFAULT_HTML_FONT_SIZE, + fontFamily = DEFAULT_FONT_FAMILY, + defaultPageTheme = DEFAULT_PAGE_THEME, + pageTheme = defaultPageThemes, + } = options; + + if (!pageTheme[defaultPageTheme]) { + throw new Error(`${defaultPageTheme} is not defined in pageTheme.`); + } + + return { + palette, + typography: { + htmlFontSize, + fontFamily, + h6: { + fontWeight: 700, + fontSize: 20, + marginBottom: 2, + }, + h5: { + fontWeight: 700, + fontSize: 24, + marginBottom: 4, + }, + h4: { + fontWeight: 700, + fontSize: 28, + marginBottom: 6, + }, + h3: { + fontSize: 32, + fontWeight: 700, + marginBottom: 6, + }, + h2: { + fontSize: 40, + fontWeight: 700, + marginBottom: 8, + }, + h1: { + fontSize: 54, + fontWeight: 700, + marginBottom: 10, + }, + }, + page: pageTheme[defaultPageTheme], + getPageTheme: ({ themeId }: PageThemeSelector) => + pageTheme[themeId] ?? pageTheme[defaultPageTheme], + }; +} diff --git a/packages/theme/src/compat/index.ts b/packages/theme/src/compat/index.ts index fe6863b8bc..836c8e6563 100644 --- a/packages/theme/src/compat/index.ts +++ b/packages/theme/src/compat/index.ts @@ -14,5 +14,5 @@ * limitations under the License. */ -export { MultiThemeProvider } from './MultiThemeProvider'; -export type { MultiThemeHolder } from './types'; +export { UnifiedThemeProvider } from './UnifiedThemeProvider'; +export type { UnifiedTheme } from './types'; diff --git a/packages/theme/src/compat/overrides.ts b/packages/theme/src/compat/overrides.ts index 0ada593740..8b6c3f94bc 100644 --- a/packages/theme/src/compat/overrides.ts +++ b/packages/theme/src/compat/overrides.ts @@ -16,7 +16,7 @@ import { Overrides } from '@material-ui/core/styles/overrides'; import { ComponentsProps } from '@material-ui/core/styles/props'; -import { ComponentsOverrides, Theme } from '@mui/material/styles'; +import { ComponentsOverrides, Theme, ThemeOptions } from '@mui/material/styles'; type V5Override = ComponentsOverrides[keyof ComponentsOverrides]; type V4Override = Overrides[keyof Overrides]; @@ -46,7 +46,7 @@ function adaptV5Override(theme: Theme, overrides: V5Override): V4Override { // Transform v5 theme overrides into a v4 theme, by converting the callback-based overrides export function transformV5ComponentThemesToV4( theme: Theme, - components: Theme['components'] = {}, + components: ThemeOptions['components'] = {}, ): { overrides: Overrides; props: ComponentsProps } { const overrides: Record = {}; const props: Record = {}; diff --git a/packages/theme/src/compat/types.ts b/packages/theme/src/compat/types.ts index dac6ef9492..f090a99b83 100644 --- a/packages/theme/src/compat/types.ts +++ b/packages/theme/src/compat/types.ts @@ -14,6 +14,13 @@ * limitations under the License. */ -export interface MultiThemeHolder { - getThemeForVersion(version: string): unknown | undefined; +/** + * A container of one theme for multiple different MUI versions. + * + * Currently known keys are 'v4' and 'v5'. + * + * @public + */ +export interface UnifiedTheme { + getTheme(version: string): unknown | undefined; } diff --git a/packages/theme/src/v5/defaultComponentThemes.ts b/packages/theme/src/v5/defaultComponentThemes.ts new file mode 100644 index 0000000000..3389018f18 --- /dev/null +++ b/packages/theme/src/v5/defaultComponentThemes.ts @@ -0,0 +1,243 @@ +/* + * Copyright 2022 The Backstage Authors + * + * 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 { darken, lighten, ThemeOptions } from '@mui/material/styles'; + +/** + * A helper for creating theme overrides. + * + * @public + */ +export const defaultComponentThemes: ThemeOptions['components'] = { + MuiCssBaseline: { + styleOverrides: theme => ({ + '@global': { + html: { + height: '100%', + fontFamily: theme.typography.fontFamily, + }, + body: { + height: '100%', + fontFamily: theme.typography.fontFamily, + 'overscroll-behavior-y': 'none', + }, + a: { + color: 'inherit', + textDecoration: 'none', + }, + }, + }), + }, + MuiGrid: { + defaultProps: { + spacing: 2, + }, + }, + MuiSwitch: { + defaultProps: { + color: 'primary', + }, + }, + MuiTableRow: { + styleOverrides: { + // Alternating row backgrounds + root: ({ theme }) => ({ + '&:nth-of-type(odd)': { + backgroundColor: theme.palette.background.default, + }, + }), + // Use pointer for hoverable rows + hover: { + '&:hover': { + cursor: 'pointer', + }, + }, + // Alternating head backgrounds + head: ({ theme }) => ({ + '&:nth-of-type(odd)': { + backgroundColor: theme.palette.background.paper, + }, + }), + }, + }, + // Tables are more dense than default mui tables + MuiTableCell: { + styleOverrides: { + root: ({ theme }) => ({ + wordBreak: 'break-word', + overflow: 'hidden', + verticalAlign: 'middle', + lineHeight: '1', + margin: 0, + padding: theme.spacing(3, 2, 3, 2.5), + borderBottom: 0, + }), + sizeSmall: ({ theme }) => ({ + padding: theme.spacing(1.5, 2, 1.5, 2.5), + }), + head: { + wordBreak: 'break-word', + overflow: 'hidden', + color: 'rgb(179, 179, 179)', + fontWeight: 'normal', + lineHeight: '1', + }, + }, + }, + MuiTabs: { + styleOverrides: { + // Tabs are smaller than default mui tab rows + root: { + minHeight: 24, + }, + }, + }, + MuiTab: { + styleOverrides: { + // Tabs are smaller and have a hover background + root: ({ theme }) => ({ + color: theme.palette.link, + minHeight: 24, + textTransform: 'initial', + letterSpacing: '0.07em', + '&:hover': { + color: darken(theme.palette.link, 0.3), + background: lighten(theme.palette.link, 0.95), + }, + [theme.breakpoints.up('md')]: { + minWidth: 120, + fontSize: theme.typography.pxToRem(14), + fontWeight: 500, + }, + }), + textColorPrimary: ({ theme }) => ({ + color: theme.palette.link, + }), + }, + }, + MuiTableSortLabel: { + styleOverrides: { + // No color change on hover, just rely on the arrow showing up instead. + root: { + color: 'inherit', + '&:hover': { + color: 'inherit', + }, + '&:focus': { + color: 'inherit', + }, + }, + // Bold font for highlighting selected column + active: { + fontWeight: 'bold', + color: 'inherit', + }, + }, + }, + MuiListItemText: { + styleOverrides: { + dense: { + // Default dense list items to adding ellipsis for really long str... + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + }, + }, + }, + MuiButton: { + styleOverrides: { + text: { + // Text buttons have less padding by default, but we want to keep the original padding + padding: undefined, + }, + }, + }, + MuiChip: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: '#D9D9D9', + // By default there's no margin, but it's usually wanted, so we add some trailing margin + marginRight: theme.spacing(1), + marginBottom: theme.spacing(1), + color: theme.palette.grey[900], + }), + outlined: ({ theme }) => ({ + color: theme.palette.text.primary, + }), + label: ({ theme }) => ({ + lineHeight: `${theme.spacing(2.5)}px`, + fontWeight: theme.typography.fontWeightMedium, + fontSize: `${theme.spacing(1.75)}px`, + }), + labelSmall: ({ theme }) => ({ + fontSize: `${theme.spacing(1.5)}px`, + }), + deleteIcon: ({ theme }) => ({ + color: theme.palette.grey[500], + width: `${theme.spacing(3)}px`, + height: `${theme.spacing(3)}px`, + margin: `0 ${theme.spacing(0.75)}px 0 -${theme.spacing(0.75)}px`, + }), + deleteIconSmall: ({ theme }) => ({ + width: `${theme.spacing(2)}px`, + height: `${theme.spacing(2)}px`, + margin: `0 ${theme.spacing(0.5)}px 0 -${theme.spacing(0.5)}px`, + }), + }, + }, + MuiCard: { + styleOverrides: { + root: { + // When cards have a forced size, such as when they are arranged in a + // CSS grid, the content needs to flex such that the actions (buttons + // etc) end up at the bottom of the card instead of just below the body + // contents. + display: 'flex', + flexDirection: 'column', + }, + }, + }, + MuiCardHeader: { + styleOverrides: { + root: { + // Reduce padding between header and content + paddingBottom: 0, + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + // When cards have a forced size, such as when they are arranged in a + // CSS grid, the content needs to flex such that the actions (buttons + // etc) end up at the bottom of the card instead of just below the body + // contents. + flexGrow: 1, + '&:last-child': { + paddingBottom: undefined, + }, + }, + }, + }, + MuiCardActions: { + styleOverrides: { + root: { + // We default to putting the card actions at the end + justifyContent: 'flex-end', + }, + }, + }, +}; diff --git a/packages/theme/src/v5/index.ts b/packages/theme/src/v5/index.ts index db229eae34..eee5d852b1 100644 --- a/packages/theme/src/v5/index.ts +++ b/packages/theme/src/v5/index.ts @@ -15,3 +15,4 @@ */ export * from './types'; +export { defaultComponentThemes } from './defaultComponentThemes'; diff --git a/packages/theme/src/v5/types.ts b/packages/theme/src/v5/types.ts index d3cf97411d..c6788bdc06 100644 --- a/packages/theme/src/v5/types.ts +++ b/packages/theme/src/v5/types.ts @@ -14,7 +14,26 @@ * limitations under the License. */ -import { BackstagePaletteAdditions, BackstageThemeAdditions } from '../types'; +import { PaletteOptions } from '@mui/material/styles'; +import { + BackstagePaletteAdditions, + BackstageThemeAdditions, + PageTheme, +} from '../types'; + +/** + * A simpler configuration for creating a new theme that just tweaks some parts + * of the backstage one. + * + * @public + */ +export type SimpleV5ThemeOptions = { + palette: PaletteOptions; + defaultPageTheme?: string; + pageTheme?: Record; + fontFamily?: string; + htmlFontSize?: number; +}; declare module '@mui/material/styles/createPalette' { interface Palette extends BackstagePaletteAdditions {} From 6882ca559837745c53fbbe9e191322146e6d484b Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 15:10:52 +0100 Subject: [PATCH 38/83] theme: separate out base theme constructs Signed-off-by: Patrik Oldsberg --- .../createBaseThemeOptions.ts | 46 +++++++++---------- packages/theme/src/base/index.ts | 23 ++++++++++ packages/theme/src/{ => base}/pageTheme.ts | 0 packages/theme/src/{ => base}/types.ts | 0 packages/theme/src/compat/UnifiedTheme.tsx | 4 +- packages/theme/src/index.ts | 7 +-- packages/theme/src/v4/baseTheme.ts | 2 +- packages/theme/src/v4/themes.ts | 2 +- packages/theme/src/v4/types.ts | 2 +- packages/theme/src/v5/types.ts | 2 +- 10 files changed, 53 insertions(+), 35 deletions(-) rename packages/theme/src/{compat => base}/createBaseThemeOptions.ts (94%) create mode 100644 packages/theme/src/base/index.ts rename packages/theme/src/{ => base}/pageTheme.ts (100%) rename packages/theme/src/{ => base}/types.ts (100%) diff --git a/packages/theme/src/compat/createBaseThemeOptions.ts b/packages/theme/src/base/createBaseThemeOptions.ts similarity index 94% rename from packages/theme/src/compat/createBaseThemeOptions.ts rename to packages/theme/src/base/createBaseThemeOptions.ts index ab8a80fb94..15903462e7 100644 --- a/packages/theme/src/compat/createBaseThemeOptions.ts +++ b/packages/theme/src/base/createBaseThemeOptions.ts @@ -14,8 +14,8 @@ * limitations under the License. */ -import { PageTheme, PageThemeSelector } from '../types'; -import { pageTheme as defaultPageThemes } from '../pageTheme'; +import { PageTheme, PageThemeSelector } from './types'; +import { pageTheme as defaultPageThemes } from './pageTheme'; const DEFAULT_HTML_FONT_SIZE = 16; const DEFAULT_FONT_FAMILY = @@ -55,35 +55,35 @@ export function createBaseThemeOptions( typography: { htmlFontSize, fontFamily, - h6: { + h1: { + fontSize: 54, fontWeight: 700, - fontSize: 20, - marginBottom: 2, - }, - h5: { - fontWeight: 700, - fontSize: 24, - marginBottom: 4, - }, - h4: { - fontWeight: 700, - fontSize: 28, - marginBottom: 6, - }, - h3: { - fontSize: 32, - fontWeight: 700, - marginBottom: 6, + marginBottom: 10, }, h2: { fontSize: 40, fontWeight: 700, marginBottom: 8, }, - h1: { - fontSize: 54, + h3: { + fontSize: 32, fontWeight: 700, - marginBottom: 10, + marginBottom: 6, + }, + h4: { + fontWeight: 700, + fontSize: 28, + marginBottom: 6, + }, + h5: { + fontWeight: 700, + fontSize: 24, + marginBottom: 4, + }, + h6: { + fontWeight: 700, + fontSize: 20, + marginBottom: 2, }, }, page: pageTheme[defaultPageTheme], diff --git a/packages/theme/src/base/index.ts b/packages/theme/src/base/index.ts new file mode 100644 index 0000000000..9440bcfd59 --- /dev/null +++ b/packages/theme/src/base/index.ts @@ -0,0 +1,23 @@ +/* + * Copyright 2022 The Backstage Authors + * + * 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 { createBaseThemeOptions } from './createBaseThemeOptions'; +export { colorVariants, genPageTheme, pageTheme, shapes } from './pageTheme'; +export type { + BackstagePaletteAdditions, + PageTheme, + PageThemeSelector, +} from './types'; diff --git a/packages/theme/src/pageTheme.ts b/packages/theme/src/base/pageTheme.ts similarity index 100% rename from packages/theme/src/pageTheme.ts rename to packages/theme/src/base/pageTheme.ts diff --git a/packages/theme/src/types.ts b/packages/theme/src/base/types.ts similarity index 100% rename from packages/theme/src/types.ts rename to packages/theme/src/base/types.ts diff --git a/packages/theme/src/compat/UnifiedTheme.tsx b/packages/theme/src/compat/UnifiedTheme.tsx index 7bd907bc84..d00999a8b1 100644 --- a/packages/theme/src/compat/UnifiedTheme.tsx +++ b/packages/theme/src/compat/UnifiedTheme.tsx @@ -28,9 +28,9 @@ import { ThemeOptions as ThemeOptionsV5, } from '@mui/material/styles'; import { transformV5ComponentThemesToV4 } from './overrides'; -import { PageTheme } from '../types'; +import { PageTheme } from '../base/types'; import { defaultComponentThemes } from '../v5'; -import { createBaseThemeOptions } from './createBaseThemeOptions'; +import { createBaseThemeOptions } from '../base/createBaseThemeOptions'; import { UnifiedTheme } from './types'; export class UnifiedThemeHolder implements UnifiedTheme { diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index a6c9632983..8fdb961705 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -21,14 +21,9 @@ */ export * from './compat'; +export * from './base'; export * from './v4'; export * from './v5'; -export { colorVariants, genPageTheme, pageTheme, shapes } from './pageTheme'; -export type { - BackstagePaletteAdditions, - PageTheme, - PageThemeSelector, -} from './types'; import { createV4Theme, diff --git a/packages/theme/src/v4/baseTheme.ts b/packages/theme/src/v4/baseTheme.ts index 5bd7981377..cc15630f9e 100644 --- a/packages/theme/src/v4/baseTheme.ts +++ b/packages/theme/src/v4/baseTheme.ts @@ -18,7 +18,7 @@ import { createTheme as createMuiTheme } from '@material-ui/core/styles'; import { Theme, ThemeOptions } from '@material-ui/core'; import { darken, lighten } from '@material-ui/core/styles/colorManipulator'; import { Overrides } from '@material-ui/core/styles/overrides'; -import { pageTheme as defaultPageThemes } from '../pageTheme'; +import { pageTheme as defaultPageThemes } from '../base/pageTheme'; import { SimpleV4ThemeOptions } from './types'; const DEFAULT_HTML_FONT_SIZE = 16; diff --git a/packages/theme/src/v4/themes.ts b/packages/theme/src/v4/themes.ts index 4aa1902f4a..c63dcb591e 100644 --- a/packages/theme/src/v4/themes.ts +++ b/packages/theme/src/v4/themes.ts @@ -15,7 +15,7 @@ */ import { createV4Theme } from './baseTheme'; -import { pageTheme } from '../pageTheme'; +import { pageTheme } from '../base/pageTheme'; import { yellow } from '@material-ui/core/colors'; /** diff --git a/packages/theme/src/v4/types.ts b/packages/theme/src/v4/types.ts index 9da80e73a3..ded91bec3f 100644 --- a/packages/theme/src/v4/types.ts +++ b/packages/theme/src/v4/types.ts @@ -24,7 +24,7 @@ import { BackstageThemeAdditions, PageTheme, PageThemeSelector, -} from '../types'; +} from '../base/types'; /** * The full Backstage palette. diff --git a/packages/theme/src/v5/types.ts b/packages/theme/src/v5/types.ts index c6788bdc06..8fce16be05 100644 --- a/packages/theme/src/v5/types.ts +++ b/packages/theme/src/v5/types.ts @@ -19,7 +19,7 @@ import { BackstagePaletteAdditions, BackstageThemeAdditions, PageTheme, -} from '../types'; +} from '../base/types'; /** * A simpler configuration for creating a new theme that just tweaks some parts From eef94b1f7420a23cf48bc2b4f50f011d37f78e51 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 15:14:43 +0100 Subject: [PATCH 39/83] theme: use base theme to create v4 options Signed-off-by: Patrik Oldsberg --- packages/theme/src/v4/baseTheme.ts | 71 ++++-------------------------- 1 file changed, 8 insertions(+), 63 deletions(-) diff --git a/packages/theme/src/v4/baseTheme.ts b/packages/theme/src/v4/baseTheme.ts index cc15630f9e..54a67d7d20 100644 --- a/packages/theme/src/v4/baseTheme.ts +++ b/packages/theme/src/v4/baseTheme.ts @@ -15,16 +15,12 @@ */ import { createTheme as createMuiTheme } from '@material-ui/core/styles'; -import { Theme, ThemeOptions } from '@material-ui/core'; +import { GridProps, SwitchProps, Theme, ThemeOptions } from '@material-ui/core'; import { darken, lighten } from '@material-ui/core/styles/colorManipulator'; import { Overrides } from '@material-ui/core/styles/overrides'; -import { pageTheme as defaultPageThemes } from '../base/pageTheme'; import { SimpleV4ThemeOptions } from './types'; - -const DEFAULT_HTML_FONT_SIZE = 16; -const DEFAULT_FONT_FAMILY = - '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif'; -const DEFAULT_PAGE_THEME = 'home'; +import { createBaseThemeOptions } from '../base'; +import { defaultComponentThemes } from '../v5'; /** * A helper for creating theme options. @@ -34,65 +30,14 @@ const DEFAULT_PAGE_THEME = 'home'; export function createV4ThemeOptions( options: SimpleV4ThemeOptions, ): ThemeOptions { - const { - palette, - htmlFontSize = DEFAULT_HTML_FONT_SIZE, - fontFamily = DEFAULT_FONT_FAMILY, - defaultPageTheme = DEFAULT_PAGE_THEME, - pageTheme = defaultPageThemes, - } = options; - - if (!pageTheme[defaultPageTheme]) { - throw new Error(`${defaultPageTheme} is not defined in pageTheme.`); - } - return { - palette, props: { - MuiGrid: { - spacing: 2, - }, - MuiSwitch: { - color: 'primary', - }, + MuiGrid: defaultComponentThemes?.MuiGrid + ?.defaultProps as Partial, + MuiSwitch: defaultComponentThemes?.MuiSwitch + ?.defaultProps as Partial, }, - typography: { - htmlFontSize, - fontFamily, - h6: { - fontWeight: 700, - fontSize: 20, - marginBottom: 2, - }, - h5: { - fontWeight: 700, - fontSize: 24, - marginBottom: 4, - }, - h4: { - fontWeight: 700, - fontSize: 28, - marginBottom: 6, - }, - h3: { - fontSize: 32, - fontWeight: 700, - marginBottom: 6, - }, - h2: { - fontSize: 40, - fontWeight: 700, - marginBottom: 8, - }, - h1: { - fontSize: 54, - fontWeight: 700, - marginBottom: 10, - }, - }, - page: pageTheme[defaultPageTheme], - getPageTheme: ({ themeId }) => - pageTheme[themeId] ?? pageTheme[defaultPageTheme], + ...createBaseThemeOptions(options), }; } From 5b30bdbb737375b4ac97ce44b935e5deebf57d82 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 15:25:58 +0100 Subject: [PATCH 40/83] theme: use v5 component themes to create v4 overrides Signed-off-by: Patrik Oldsberg --- packages/theme/src/v4/baseTheme.ts | 187 +----------------- .../theme/src/v5/defaultComponentThemes.ts | 6 +- 2 files changed, 10 insertions(+), 183 deletions(-) diff --git a/packages/theme/src/v4/baseTheme.ts b/packages/theme/src/v4/baseTheme.ts index 54a67d7d20..9ae8507e9c 100644 --- a/packages/theme/src/v4/baseTheme.ts +++ b/packages/theme/src/v4/baseTheme.ts @@ -14,13 +14,14 @@ * limitations under the License. */ +import { Theme as Mui5Theme } from '@mui/material/styles'; import { createTheme as createMuiTheme } from '@material-ui/core/styles'; import { GridProps, SwitchProps, Theme, ThemeOptions } from '@material-ui/core'; -import { darken, lighten } from '@material-ui/core/styles/colorManipulator'; import { Overrides } from '@material-ui/core/styles/overrides'; import { SimpleV4ThemeOptions } from './types'; import { createBaseThemeOptions } from '../base'; import { defaultComponentThemes } from '../v5'; +import { transformV5ComponentThemesToV4 } from '../compat/overrides'; /** * A helper for creating theme options. @@ -47,185 +48,11 @@ export function createV4ThemeOptions( * @public */ export function createV4ThemeOverrides(theme: Theme): Overrides { - return { - MuiCssBaseline: { - '@global': { - html: { - height: '100%', - fontFamily: theme.typography.fontFamily, - }, - body: { - height: '100%', - fontFamily: theme.typography.fontFamily, - 'overscroll-behavior-y': 'none', - }, - a: { - color: 'inherit', - textDecoration: 'none', - }, - }, - }, - MuiTableRow: { - // Alternating row backgrounds - root: { - '&:nth-of-type(odd)': { - backgroundColor: theme.palette.background.default, - }, - }, - // Use pointer for hoverable rows - hover: { - '&:hover': { - cursor: 'pointer', - }, - }, - // Alternating head backgrounds - head: { - '&:nth-of-type(odd)': { - backgroundColor: theme.palette.background.paper, - }, - }, - }, - // Tables are more dense than default mui tables - MuiTableCell: { - root: { - wordBreak: 'break-word', - overflow: 'hidden', - verticalAlign: 'middle', - lineHeight: '1', - margin: 0, - padding: theme.spacing(3, 2, 3, 2.5), - borderBottom: 0, - }, - sizeSmall: { - padding: theme.spacing(1.5, 2, 1.5, 2.5), - }, - head: { - wordBreak: 'break-word', - overflow: 'hidden', - fontWeight: 'normal', - lineHeight: '1', - }, - }, - MuiTabs: { - // Tabs are smaller than default mui tab rows - root: { - minHeight: 24, - }, - }, - MuiTab: { - // Tabs are smaller and have a hover background - root: { - color: theme.palette.link, - minHeight: 24, - textTransform: 'initial', - letterSpacing: '0.07em', - '&:hover': { - color: darken(theme.palette.link, 0.3), - background: lighten(theme.palette.link, 0.95), - }, - [theme.breakpoints.up('md')]: { - minWidth: 120, - fontSize: theme.typography.pxToRem(14), - fontWeight: 500, - }, - }, - textColorPrimary: { - color: theme.palette.link, - }, - }, - MuiTableSortLabel: { - // No color change on hover, just rely on the arrow showing up instead. - root: { - color: 'inherit', - '&:hover': { - color: 'inherit', - }, - }, - // Bold font for highlighting selected column - active: { - fontWeight: 'bold', - }, - }, - MuiListItemText: { - dense: { - // Default dense list items to adding ellipsis for really long str... - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', - }, - }, - MuiButton: { - text: { - // Text buttons have less padding by default, but we want to keep the original padding - padding: undefined, - }, - }, - MuiChip: { - root: { - backgroundColor: '#D9D9D9', - // By default there's no margin, but it's usually wanted, so we add some trailing margin - marginRight: theme.spacing(1), - marginBottom: theme.spacing(1), - color: theme.palette.grey[900], - }, - outlined: { - color: theme.palette.text.primary, - }, - label: { - lineHeight: `${theme.spacing(2.5)}px`, - fontWeight: theme.typography.fontWeightMedium, - fontSize: `${theme.spacing(1.75)}px`, - }, - labelSmall: { - fontSize: `${theme.spacing(1.5)}px`, - }, - deleteIcon: { - color: theme.palette.grey[500], - width: `${theme.spacing(3)}px`, - height: `${theme.spacing(3)}px`, - margin: `0 ${theme.spacing(0.75)}px 0 -${theme.spacing(0.75)}px`, - }, - deleteIconSmall: { - width: `${theme.spacing(2)}px`, - height: `${theme.spacing(2)}px`, - margin: `0 ${theme.spacing(0.5)}px 0 -${theme.spacing(0.5)}px`, - }, - }, - MuiCard: { - root: { - // When cards have a forced size, such as when they are arranged in a - // CSS grid, the content needs to flex such that the actions (buttons - // etc) end up at the bottom of the card instead of just below the body - // contents. - display: 'flex', - flexDirection: 'column', - }, - }, - MuiCardHeader: { - root: { - // Reduce padding between header and content - paddingBottom: 0, - }, - }, - MuiCardContent: { - root: { - // When cards have a forced size, such as when they are arranged in a - // CSS grid, the content needs to flex such that the actions (buttons - // etc) end up at the bottom of the card instead of just below the body - // contents. - flexGrow: 1, - '&:last-child': { - paddingBottom: undefined, - }, - }, - }, - MuiCardActions: { - root: { - // We default to putting the card actions at the end - justifyContent: 'flex-end', - }, - }, - }; + return transformV5ComponentThemesToV4( + // Safe but we have to make sure we don't use mui5 specific stuff in the default component themes + theme as unknown as Mui5Theme, + defaultComponentThemes, + ).overrides; } /** diff --git a/packages/theme/src/v5/defaultComponentThemes.ts b/packages/theme/src/v5/defaultComponentThemes.ts index 3389018f18..288ba819bf 100644 --- a/packages/theme/src/v5/defaultComponentThemes.ts +++ b/packages/theme/src/v5/defaultComponentThemes.ts @@ -88,13 +88,13 @@ export const defaultComponentThemes: ThemeOptions['components'] = { sizeSmall: ({ theme }) => ({ padding: theme.spacing(1.5, 2, 1.5, 2.5), }), - head: { + head: ({ theme }) => ({ wordBreak: 'break-word', overflow: 'hidden', - color: 'rgb(179, 179, 179)', + color: theme.palette.textSubtle, fontWeight: 'normal', lineHeight: '1', - }, + }), }, }, MuiTabs: { From 689a2f6099c4f1d108b1d768483506f997c801f1 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 15:27:29 +0100 Subject: [PATCH 41/83] theme: bring in mui 5 style deps Signed-off-by: Patrik Oldsberg --- packages/theme/package.json | 5 +- yarn.lock | 564 +++++++++++++++++++++++++++++++++++- 2 files changed, 560 insertions(+), 9 deletions(-) diff --git a/packages/theme/package.json b/packages/theme/package.json index 99d9929525..dd741581a4 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -32,8 +32,11 @@ "test": "backstage-cli package test" }, "dependencies": { + "@emotion/react": "^11.10.5", + "@emotion/styled": "^11.10.5", "@material-ui/core": "^4.12.2", - "@mui/material": "^5.11.2" + "@mui/material": "^5.11.2", + "@mui/styles": "^5.11.2" }, "peerDependencies": { "@types/react": "^16.13.1 || ^17.0.0", diff --git a/yarn.lock b/yarn.lock index 52a508235d..784c38bb73 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1,6 +1,3 @@ -# This file is generated by running "yarn install" inside your project. -# Manual changes might be lost - proceed with caution! - __metadata: version: 6 cacheKey: 8 @@ -2248,7 +2245,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.12.13, @babel/helper-module-imports@npm:^7.16.0, @babel/helper-module-imports@npm:^7.18.6": +"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.12.13, @babel/helper-module-imports@npm:^7.16.0, @babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.18.6": version: 7.18.6 resolution: "@babel/helper-module-imports@npm:7.18.6" dependencies: @@ -2730,7 +2727,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-jsx@npm:^7.0.0, @babel/plugin-syntax-jsx@npm:^7.18.6, @babel/plugin-syntax-jsx@npm:^7.7.2": +"@babel/plugin-syntax-jsx@npm:^7.0.0, @babel/plugin-syntax-jsx@npm:^7.17.12, @babel/plugin-syntax-jsx@npm:^7.18.6, @babel/plugin-syntax-jsx@npm:^7.7.2": version: 7.18.6 resolution: "@babel/plugin-syntax-jsx@npm:7.18.6" dependencies: @@ -3472,6 +3469,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": + version: 7.20.7 + resolution: "@babel/runtime@npm:7.20.7" + dependencies: + regenerator-runtime: ^0.13.11 + checksum: 4629ce5c46f06cca9cfb9b7fc00d48003335a809888e2b91ec2069a2dcfbfef738480cff32ba81e0b7c290f8918e5c22ddcf2b710001464ee84ba62c7e32a3a3 + languageName: node + linkType: hard + "@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": version: 7.21.0 resolution: "@babel/runtime@npm:7.21.0" @@ -3481,6 +3487,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": + version: 7.21.0 + resolution: "@babel/runtime@npm:7.21.0" + dependencies: + regenerator-runtime: ^0.13.11 + checksum: 7b33e25bfa9e0e1b9e8828bb61b2d32bdd46b41b07ba7cb43319ad08efc6fda8eb89445193e67d6541814627df0ca59122c0ea795e412b99c5183a0540d338ab + languageName: node + linkType: hard + "@babel/template@npm:^7.18.10, @babel/template@npm:^7.18.6, @babel/template@npm:^7.3.3": version: 7.18.10 resolution: "@babel/template@npm:7.18.10" @@ -9627,11 +9642,14 @@ __metadata: resolution: "@backstage/theme@workspace:packages/theme" dependencies: "@backstage/cli": "workspace:^" + "@emotion/react": ^11.10.5 + "@emotion/styled": ^11.10.5 "@material-ui/core": ^4.12.2 - "@types/react": ^16.13.1 || ^17.0.0 + "@mui/material": ^5.11.2 + "@mui/styles": ^5.11.2 peerDependencies: + "@types/react": ^16.13.1 || ^17.0.0 react: ^16.13.1 || ^17.0.0 - react-dom: ^16.13.1 || ^17.0.0 languageName: unknown linkType: soft @@ -10157,6 +10175,41 @@ __metadata: languageName: node linkType: hard +"@emotion/babel-plugin@npm:^11.10.5": + version: 11.10.5 + resolution: "@emotion/babel-plugin@npm:11.10.5" + dependencies: + "@babel/helper-module-imports": ^7.16.7 + "@babel/plugin-syntax-jsx": ^7.17.12 + "@babel/runtime": ^7.18.3 + "@emotion/hash": ^0.9.0 + "@emotion/memoize": ^0.8.0 + "@emotion/serialize": ^1.1.1 + babel-plugin-macros: ^3.1.0 + convert-source-map: ^1.5.0 + escape-string-regexp: ^4.0.0 + find-root: ^1.1.0 + source-map: ^0.5.7 + stylis: 4.1.3 + peerDependencies: + "@babel/core": ^7.0.0 + checksum: e3353499c76c4422d6e900c0dfab73607056d9da86161a3f27c3459c193c4908050c5d252c68fcde231e13f02a9d8e0dc07d260317ae0e5206841e331cc4caae + languageName: node + linkType: hard + +"@emotion/cache@npm:^11.10.5": + version: 11.10.5 + resolution: "@emotion/cache@npm:11.10.5" + dependencies: + "@emotion/memoize": ^0.8.0 + "@emotion/sheet": ^1.2.1 + "@emotion/utils": ^1.2.0 + "@emotion/weak-memoize": ^0.3.0 + stylis: 4.1.3 + checksum: 1dd2d9af2d3ecbd3d4469ecdf91a335eef6034c851b57a474471b2d2280613eb35bbed98c0368cc4625f188619fbdaf04cf07e8107aaffce94b2178444c0fe7b + languageName: node + linkType: hard + "@emotion/hash@npm:^0.8.0": version: 0.8.0 resolution: "@emotion/hash@npm:0.8.0" @@ -10164,6 +10217,13 @@ __metadata: languageName: node linkType: hard +"@emotion/hash@npm:^0.9.0": + version: 0.9.0 + resolution: "@emotion/hash@npm:0.9.0" + checksum: b63428f7c8186607acdca5d003700cecf0ded519d0b5c5cc3b3154eafcad6ff433f8361bd2bac8882715b557e6f06945694aeb6ba8b25c6095d7a88570e2e0bb + languageName: node + linkType: hard + "@emotion/is-prop-valid@npm:^1.1.0": version: 1.1.2 resolution: "@emotion/is-prop-valid@npm:1.1.2" @@ -10173,6 +10233,15 @@ __metadata: languageName: node linkType: hard +"@emotion/is-prop-valid@npm:^1.2.0": + version: 1.2.0 + resolution: "@emotion/is-prop-valid@npm:1.2.0" + dependencies: + "@emotion/memoize": ^0.8.0 + checksum: cc7a19850a4c5b24f1514665289442c8c641709e6f7711067ad550e05df331da0692a16148e85eda6f47e31b3261b64d74c5e25194d053223be16231f969d633 + languageName: node + linkType: hard + "@emotion/memoize@npm:^0.7.4": version: 0.7.5 resolution: "@emotion/memoize@npm:0.7.5" @@ -10180,6 +10249,80 @@ __metadata: languageName: node linkType: hard +"@emotion/memoize@npm:^0.8.0": + version: 0.8.0 + resolution: "@emotion/memoize@npm:0.8.0" + checksum: c87bb110b829edd8e1c13b90a6bc37cebc39af29c7599a1e66a48e06f9bec43e8e53495ba86278cc52e7589549492c8dfdc81d19f4fdec0cee6ba13d2ad2c928 + languageName: node + linkType: hard + +"@emotion/react@npm:^11.10.5": + version: 11.10.5 + resolution: "@emotion/react@npm:11.10.5" + dependencies: + "@babel/runtime": ^7.18.3 + "@emotion/babel-plugin": ^11.10.5 + "@emotion/cache": ^11.10.5 + "@emotion/serialize": ^1.1.1 + "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0 + "@emotion/utils": ^1.2.0 + "@emotion/weak-memoize": ^0.3.0 + hoist-non-react-statics: ^3.3.1 + peerDependencies: + "@babel/core": ^7.0.0 + react: ">=16.8.0" + peerDependenciesMeta: + "@babel/core": + optional: true + "@types/react": + optional: true + checksum: 32b67b28e9b6d6c53b970072680697f04c2521441050bdeb19a1a7f0164af549b4dad39ff375eda1b6a3cf1cc86ba2c6fa55460ec040e6ebbca3e9ec58353cf7 + languageName: node + linkType: hard + +"@emotion/serialize@npm:^1.1.1": + version: 1.1.1 + resolution: "@emotion/serialize@npm:1.1.1" + dependencies: + "@emotion/hash": ^0.9.0 + "@emotion/memoize": ^0.8.0 + "@emotion/unitless": ^0.8.0 + "@emotion/utils": ^1.2.0 + csstype: ^3.0.2 + checksum: 24cfd5b16e6f2335c032ca33804a876e0442aaf8f9c94d269d23735ebd194fb1ed142542dd92191a3e6ef8bad5bd560dfc5aaf363a1b70954726dbd4dd93085c + languageName: node + linkType: hard + +"@emotion/sheet@npm:^1.2.1": + version: 1.2.1 + resolution: "@emotion/sheet@npm:1.2.1" + checksum: ce78763588ea522438156344d9f592203e2da582d8d67b32e1b0b98eaba26994c6c270f8c7ad46442fc9c0a9f048685d819cd73ca87e544520fd06f0e24a1562 + languageName: node + linkType: hard + +"@emotion/styled@npm:^11.10.5": + version: 11.10.5 + resolution: "@emotion/styled@npm:11.10.5" + dependencies: + "@babel/runtime": ^7.18.3 + "@emotion/babel-plugin": ^11.10.5 + "@emotion/is-prop-valid": ^1.2.0 + "@emotion/serialize": ^1.1.1 + "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0 + "@emotion/utils": ^1.2.0 + peerDependencies: + "@babel/core": ^7.0.0 + "@emotion/react": ^11.0.0-rc.0 + react: ">=16.8.0" + peerDependenciesMeta: + "@babel/core": + optional: true + "@types/react": + optional: true + checksum: 1cec5f6aeb227a7255141031e8594f38ad83902413472aae0a46c27e5f9769c01e23c1ad39adee408d8a2168a697464314d1a0c4f50b31a5d25ea506b2d7bbc8 + languageName: node + linkType: hard + "@emotion/stylis@npm:^0.8.4": version: 0.8.5 resolution: "@emotion/stylis@npm:0.8.5" @@ -10194,6 +10337,36 @@ __metadata: languageName: node linkType: hard +"@emotion/unitless@npm:^0.8.0": + version: 0.8.0 + resolution: "@emotion/unitless@npm:0.8.0" + checksum: 176141117ed23c0eb6e53a054a69c63e17ae532ec4210907a20b2208f91771821835f1c63dd2ec63e30e22fcc984026d7f933773ee6526dd038e0850919fae7a + languageName: node + linkType: hard + +"@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.0": + version: 1.0.0 + resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.0" + peerDependencies: + react: ">=16.8.0" + checksum: 4f06a3b48258c832aa8022a262572061a31ff078d377e9164cccc99951309d70f4466e774fe704461b2f8715007a82ed625a54a5c7a127c89017d3ce3187d4f1 + languageName: node + linkType: hard + +"@emotion/utils@npm:^1.2.0": + version: 1.2.0 + resolution: "@emotion/utils@npm:1.2.0" + checksum: 55457a49ddd4db6a014ea0454dc09eaa23eedfb837095c8ff90470cb26a303f7ceb5fcc1e2190ef64683e64cfd33d3ba3ca3109cd87d12bc9e379e4195c9a4dd + languageName: node + linkType: hard + +"@emotion/weak-memoize@npm:^0.3.0": + version: 0.3.0 + resolution: "@emotion/weak-memoize@npm:0.3.0" + checksum: f43ef4c8b7de70d9fa5eb3105921724651e4188e895beb71f0c5919dc899a7b8743e1fdd99d38b9092dd5722c7be2312ebb47fbdad0c4e38bea58f6df5885cc0 + languageName: node + linkType: hard + "@esbuild-kit/cjs-loader@npm:^2.4.1": version: 2.4.2 resolution: "@esbuild-kit/cjs-loader@npm:2.4.2" @@ -10214,6 +10387,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/android-arm64@npm:0.16.14": + version: 0.16.14 + resolution: "@esbuild/android-arm64@npm:0.16.14" + conditions: os=android & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/android-arm64@npm:0.16.17": version: 0.16.17 resolution: "@esbuild/android-arm64@npm:0.16.17" @@ -12734,6 +12914,193 @@ __metadata: languageName: node linkType: hard +"@mui/base@npm:5.0.0-alpha.112": + version: 5.0.0-alpha.112 + resolution: "@mui/base@npm:5.0.0-alpha.112" + dependencies: + "@babel/runtime": ^7.20.7 + "@emotion/is-prop-valid": ^1.2.0 + "@mui/types": ^7.2.3 + "@mui/utils": ^5.11.2 + "@popperjs/core": ^2.11.6 + clsx: ^1.2.1 + prop-types: ^15.8.1 + react-is: ^18.2.0 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: fd19240ac16859d62f057fd80261fc4e0dbc960a648b601bd7beaeb44b88c059f654b0989f33cea655ad61106832bffa0cd8446730c1be7671b6cde383dbce80 + languageName: node + linkType: hard + +"@mui/core-downloads-tracker@npm:^5.11.2": + version: 5.11.2 + resolution: "@mui/core-downloads-tracker@npm:5.11.2" + checksum: 1f2c45ef37b13829fa2331811548cdd3f3cb94e384513db8820533570c8ef4569e5f835f8757a48d783553f44af3f4ed2f93d402891e27718fcc58e16129a874 + languageName: node + linkType: hard + +"@mui/material@npm:^5.11.2": + version: 5.11.2 + resolution: "@mui/material@npm:5.11.2" + dependencies: + "@babel/runtime": ^7.20.7 + "@mui/base": 5.0.0-alpha.112 + "@mui/core-downloads-tracker": ^5.11.2 + "@mui/system": ^5.11.2 + "@mui/types": ^7.2.3 + "@mui/utils": ^5.11.2 + "@types/react-transition-group": ^4.4.5 + clsx: ^1.2.1 + csstype: ^3.1.1 + prop-types: ^15.8.1 + react-is: ^18.2.0 + react-transition-group: ^4.4.5 + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: 4f2baa4b4d8f7842b081e9e919172020f7055e33c24af36c5a458eac1a76ff3e896651fdf21daa523a68ac0bfb3670864c1b4dec9fae6d8fadf2b602f14f95ea + languageName: node + linkType: hard + +"@mui/private-theming@npm:^5.11.2": + version: 5.11.2 + resolution: "@mui/private-theming@npm:5.11.2" + dependencies: + "@babel/runtime": ^7.20.7 + "@mui/utils": ^5.11.2 + prop-types: ^15.8.1 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 4a36ca48a7a8187d46c3e0d21ec08f7cb732bd4a5bac91c959337c8b0af031beb3a6c5ceac979b685c2e0e66321273d55dd54648f925bfdb946d6513fc6150e6 + languageName: node + linkType: hard + +"@mui/styled-engine@npm:^5.11.0": + version: 5.11.0 + resolution: "@mui/styled-engine@npm:5.11.0" + dependencies: + "@babel/runtime": ^7.20.6 + "@emotion/cache": ^11.10.5 + csstype: ^3.1.1 + prop-types: ^15.8.1 + peerDependencies: + "@emotion/react": ^11.4.1 + "@emotion/styled": ^11.3.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + checksum: ddc486bc5e0e8e7b683e4c3bffecd11c2ce1e6c67a485354c5fc5a6fe04ed5ce76db737609a2ae04779e9d5f57c7936174d458a3795eab62291c2d7681184062 + languageName: node + linkType: hard + +"@mui/styles@npm:^5.11.2": + version: 5.11.2 + resolution: "@mui/styles@npm:5.11.2" + dependencies: + "@babel/runtime": ^7.20.7 + "@emotion/hash": ^0.9.0 + "@mui/private-theming": ^5.11.2 + "@mui/types": ^7.2.3 + "@mui/utils": ^5.11.2 + clsx: ^1.2.1 + csstype: ^3.1.1 + hoist-non-react-statics: ^3.3.2 + jss: ^10.9.2 + jss-plugin-camel-case: ^10.9.2 + jss-plugin-default-unit: ^10.9.2 + jss-plugin-global: ^10.9.2 + jss-plugin-nested: ^10.9.2 + jss-plugin-props-sort: ^10.9.2 + jss-plugin-rule-value-function: ^10.9.2 + jss-plugin-vendor-prefixer: ^10.9.2 + prop-types: ^15.8.1 + peerDependencies: + "@types/react": ^17.0.0 + react: ^17.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: d565e53acd6f49679446dbb9d85ab055d6c16225afd429ac9a738fba3cddfc394f88530cebfe1b3640ca89f58e7db73bb47d09e9bb05c80e47a5018418802378 + languageName: node + linkType: hard + +"@mui/system@npm:^5.11.2": + version: 5.11.2 + resolution: "@mui/system@npm:5.11.2" + dependencies: + "@babel/runtime": ^7.20.7 + "@mui/private-theming": ^5.11.2 + "@mui/styled-engine": ^5.11.0 + "@mui/types": ^7.2.3 + "@mui/utils": ^5.11.2 + clsx: ^1.2.1 + csstype: ^3.1.1 + prop-types: ^15.8.1 + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: d6b136464ec48cbc270f0cb91eb83f10f6b6801c143cc320ef5c6ec71655f9b3ceda98ab38fde537d1c0a7669defcb9af6f4940c78101603f8b6800854d0133d + languageName: node + linkType: hard + +"@mui/types@npm:^7.2.3": + version: 7.2.3 + resolution: "@mui/types@npm:7.2.3" + peerDependencies: + "@types/react": "*" + peerDependenciesMeta: + "@types/react": + optional: true + checksum: b8511cb78f8df25c8978317ad3fd585c782116b657f2d32233352c09d415c77040e532f41bbe96de6ad46be87138767d3129a9f0de3561900a9a64db7693bce4 + languageName: node + linkType: hard + +"@mui/utils@npm:^5.11.2": + version: 5.11.2 + resolution: "@mui/utils@npm:5.11.2" + dependencies: + "@babel/runtime": ^7.20.7 + "@types/prop-types": ^15.7.5 + "@types/react-is": ^16.7.1 || ^17.0.0 + prop-types: ^15.8.1 + react-is: ^18.2.0 + peerDependencies: + react: ^17.0.0 || ^18.0.0 + checksum: 69091d9120681dee29fc20220b7db5dd61334194c139df735d932f072dab00eeae6e440058ffbccebbe93d4a3a998c23b6f4df570cb66cdacd023fce9f0f5912 + languageName: node + linkType: hard + "@n1ru4l/push-pull-async-iterable-iterator@npm:^3.1.0": version: 3.1.0 resolution: "@n1ru4l/push-pull-async-iterable-iterator@npm:3.1.0" @@ -13645,6 +14012,13 @@ __metadata: languageName: node linkType: hard +"@popperjs/core@npm:^2.11.6": + version: 2.11.6 + resolution: "@popperjs/core@npm:2.11.6" + checksum: 47fb328cec1924559d759b48235c78574f2d71a8a6c4c03edb6de5d7074078371633b91e39bbf3f901b32aa8af9b9d8f82834856d2f5737a23475036b16817f0 + languageName: node + linkType: hard + "@protobufjs/aspromise@npm:^1.1.1, @protobufjs/aspromise@npm:^1.1.2": version: 1.1.2 resolution: "@protobufjs/aspromise@npm:1.1.2" @@ -16489,7 +16863,7 @@ __metadata: languageName: node linkType: hard -"@types/prop-types@npm:*, @types/prop-types@npm:^15.0.0, @types/prop-types@npm:^15.7.3": +"@types/prop-types@npm:*, @types/prop-types@npm:^15.0.0, @types/prop-types@npm:^15.7.3, @types/prop-types@npm:^15.7.5": version: 15.7.5 resolution: "@types/prop-types@npm:15.7.5" checksum: 5b43b8b15415e1f298243165f1d44390403bb2bd42e662bca3b5b5633fdd39c938e91b7fce3a9483699db0f7a715d08cef220c121f723a634972fdf596aec980 @@ -16555,6 +16929,15 @@ __metadata: languageName: node linkType: hard +"@types/react-is@npm:^16.7.1 || ^17.0.0": + version: 17.0.3 + resolution: "@types/react-is@npm:17.0.3" + dependencies: + "@types/react": "*" + checksum: 6abb7c47d54f012272650df8a962a28bd82f219291e5ef8b4dfa7fe0bb98ae243b060bf9fbe8ceff6213141794855a006db194b490b00ffd15842ae19d0ce1f0 + languageName: node + linkType: hard + "@types/react-redux@npm:^7.1.16": version: 7.1.19 resolution: "@types/react-redux@npm:7.1.19" @@ -16612,6 +16995,15 @@ __metadata: languageName: node linkType: hard +"@types/react-transition-group@npm:^4.4.5": + version: 4.4.5 + resolution: "@types/react-transition-group@npm:4.4.5" + dependencies: + "@types/react": "*" + checksum: 265f1c74061556708ffe8d15559e35c60d6c11478c9950d3735575d2c116ca69f461d85effa06d73a613eb8b73c84fd32682feb57cf7c5f9e4284021dbca25b0 + languageName: node + linkType: hard + "@types/react-virtualized-auto-sizer@npm:^1.0.1": version: 1.0.1 resolution: "@types/react-virtualized-auto-sizer@npm:1.0.1" @@ -18665,6 +19057,17 @@ __metadata: languageName: node linkType: hard +"babel-plugin-macros@npm:^3.1.0": + version: 3.1.0 + resolution: "babel-plugin-macros@npm:3.1.0" + dependencies: + "@babel/runtime": ^7.12.5 + cosmiconfig: ^7.0.0 + resolve: ^1.19.0 + checksum: 765de4abebd3e4688ebdfbff8571ddc8cd8061f839bb6c3e550b0344a4027b04c60491f843296ce3f3379fb356cc873d57a9ee6694262547eb822c14a25be9a6 + languageName: node + linkType: hard + "babel-plugin-polyfill-corejs2@npm:^0.3.1": version: 0.3.1 resolution: "babel-plugin-polyfill-corejs2@npm:0.3.1" @@ -20127,6 +20530,13 @@ __metadata: languageName: node linkType: hard +"clsx@npm:^1.2.1": + version: 1.2.1 + resolution: "clsx@npm:1.2.1" + checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12 + languageName: node + linkType: hard + "cluster-key-slot@npm:^1.1.0": version: 1.1.0 resolution: "cluster-key-slot@npm:1.1.0" @@ -20703,6 +21113,13 @@ __metadata: languageName: node linkType: hard +"convert-source-map@npm:^1.5.0": + version: 1.9.0 + resolution: "convert-source-map@npm:1.9.0" + checksum: dc55a1f28ddd0e9485ef13565f8f756b342f9a46c4ae18b843fe3c30c675d058d6a4823eff86d472f187b176f0adf51ea7b69ea38be34be4a63cbbf91b0593c8 + languageName: node + linkType: hard + "convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0": version: 1.7.0 resolution: "convert-source-map@npm:1.7.0" @@ -21335,6 +21752,13 @@ __metadata: languageName: node linkType: hard +"csstype@npm:^3.1.1": + version: 3.1.1 + resolution: "csstype@npm:3.1.1" + checksum: 1f7b4f5fdd955b7444b18ebdddf3f5c699159f13e9cf8ac9027ae4a60ae226aef9bbb14a6e12ca7dba3358b007cee6354b116e720262867c398de6c955ea451d + languageName: node + linkType: hard + "csv-generate@npm:^3.4.3": version: 3.4.3 resolution: "csv-generate@npm:3.4.3" @@ -25972,6 +26396,15 @@ __metadata: languageName: node linkType: hard +"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2": + version: 3.3.2 + resolution: "hoist-non-react-statics@npm:3.3.2" + dependencies: + react-is: ^16.7.0 + checksum: b1538270429b13901ee586aa44f4cc3ecd8831c061d06cb8322e50ea17b3f5ce4d0e2e66394761e6c8e152cd8c34fb3b4b690116c6ce2bd45b18c746516cb9e8 + languageName: node + linkType: hard + "hoopy@npm:^0.1.4": version: 0.1.4 resolution: "hoopy@npm:0.1.4" @@ -28854,6 +29287,17 @@ __metadata: languageName: node linkType: hard +"jss-plugin-camel-case@npm:^10.9.2": + version: 10.9.2 + resolution: "jss-plugin-camel-case@npm:10.9.2" + dependencies: + "@babel/runtime": ^7.3.1 + hyphenate-style-name: ^1.0.3 + jss: 10.9.2 + checksum: 5fa617b23ce9718244691c59ace6a0d1271dbcb4430ce3e13b851ee1879c1db8ecab7e941c33802bea763a0f0e2b609d004b8a975b2063f213cdd639cdd384d2 + languageName: node + linkType: hard + "jss-plugin-default-unit@npm:^10.5.1": version: 10.6.0 resolution: "jss-plugin-default-unit@npm:10.6.0" @@ -28864,6 +29308,16 @@ __metadata: languageName: node linkType: hard +"jss-plugin-default-unit@npm:^10.9.2": + version: 10.9.2 + resolution: "jss-plugin-default-unit@npm:10.9.2" + dependencies: + "@babel/runtime": ^7.3.1 + jss: 10.9.2 + checksum: 48d8d836d36dd15513d98de11fba6be373ac29e6fd5702eb2edd143c815fb9e2f9969b2af6b1b964e9b8a052828690887042f6bcb34836836d5c359e52702d0f + languageName: node + linkType: hard + "jss-plugin-global@npm:^10.5.1": version: 10.6.0 resolution: "jss-plugin-global@npm:10.6.0" @@ -28874,6 +29328,16 @@ __metadata: languageName: node linkType: hard +"jss-plugin-global@npm:^10.9.2": + version: 10.9.2 + resolution: "jss-plugin-global@npm:10.9.2" + dependencies: + "@babel/runtime": ^7.3.1 + jss: 10.9.2 + checksum: 9b29b0c1f169d5a1033890875df072d76364a902d0f6470f448544669a388612a9a4d51844fb2bcb6d25a1c43d67c1637f11a162c2cdd9f4b6b0a8f9c94f6090 + languageName: node + linkType: hard + "jss-plugin-nested@npm:^10.5.1": version: 10.6.0 resolution: "jss-plugin-nested@npm:10.6.0" @@ -28885,6 +29349,17 @@ __metadata: languageName: node linkType: hard +"jss-plugin-nested@npm:^10.9.2": + version: 10.9.2 + resolution: "jss-plugin-nested@npm:10.9.2" + dependencies: + "@babel/runtime": ^7.3.1 + jss: 10.9.2 + tiny-warning: ^1.0.2 + checksum: ee08df07f3d553931b48037674842a8314bbc7857cc954a52f962a516bfc4b2d4e9871578b06b8fa3981edf5a927cea00021fd368d4ce315870065b7647f7b57 + languageName: node + linkType: hard + "jss-plugin-props-sort@npm:^10.5.1": version: 10.6.0 resolution: "jss-plugin-props-sort@npm:10.6.0" @@ -28895,6 +29370,16 @@ __metadata: languageName: node linkType: hard +"jss-plugin-props-sort@npm:^10.9.2": + version: 10.9.2 + resolution: "jss-plugin-props-sort@npm:10.9.2" + dependencies: + "@babel/runtime": ^7.3.1 + jss: 10.9.2 + checksum: 70bd181a458a6078f19ad4d7350570c78d26b9aabc25a1fbde673839edcc19825af7b636861b208a38aa17e551e68d0ea38599480716b4aec08e353bbe737222 + languageName: node + linkType: hard + "jss-plugin-rule-value-function@npm:^10.5.1": version: 10.6.0 resolution: "jss-plugin-rule-value-function@npm:10.6.0" @@ -28906,6 +29391,17 @@ __metadata: languageName: node linkType: hard +"jss-plugin-rule-value-function@npm:^10.9.2": + version: 10.9.2 + resolution: "jss-plugin-rule-value-function@npm:10.9.2" + dependencies: + "@babel/runtime": ^7.3.1 + jss: 10.9.2 + tiny-warning: ^1.0.2 + checksum: b1a03209d0249f13ea6de766d3ee14c1769cd1f67d8c543c7d1ce6178c32cf15507c021ecb3e3b7585a8a7a2425dddbe0bdae02f4135c4598725a4152bebfc99 + languageName: node + linkType: hard + "jss-plugin-vendor-prefixer@npm:^10.5.1": version: 10.6.0 resolution: "jss-plugin-vendor-prefixer@npm:10.6.0" @@ -28917,6 +29413,17 @@ __metadata: languageName: node linkType: hard +"jss-plugin-vendor-prefixer@npm:^10.9.2": + version: 10.9.2 + resolution: "jss-plugin-vendor-prefixer@npm:10.9.2" + dependencies: + "@babel/runtime": ^7.3.1 + css-vendor: ^2.0.8 + jss: 10.9.2 + checksum: a5c352a500fea82e8a782a090cc9815f6331259f1a331158ed74ed77c750fb45750f5ae95f07d27922742830b45d4c3592cfaab194b3ba4a50591acbdeab04d8 + languageName: node + linkType: hard + "jss-props-sort@npm:^6.0.0": version: 6.0.0 resolution: "jss-props-sort@npm:6.0.0" @@ -28950,6 +29457,18 @@ __metadata: languageName: node linkType: hard +"jss@npm:10.9.2, jss@npm:^10.5.1, jss@npm:^10.9.2, jss@npm:~10.9.0": + version: 10.9.2 + resolution: "jss@npm:10.9.2" + dependencies: + "@babel/runtime": ^7.3.1 + csstype: ^3.0.2 + is-in-browser: ^1.1.3 + tiny-warning: ^1.0.2 + checksum: ecf71971df42729668c283e432e841349b7fdbe52e520f7704991cf4a738fd2451ec0feeb25c12cdc5addf7facecf838e74e62936fd461fb4c99f23d54a4792d + languageName: node + linkType: hard + "jss@npm:^10.5.1, jss@npm:~10.10.0": version: 10.10.0 resolution: "jss@npm:10.10.0" @@ -35239,6 +35758,21 @@ __metadata: languageName: node linkType: hard +"react-transition-group@npm:^4.4.5": + version: 4.4.5 + resolution: "react-transition-group@npm:4.4.5" + dependencies: + "@babel/runtime": ^7.5.5 + dom-helpers: ^5.0.1 + loose-envify: ^1.4.0 + prop-types: ^15.6.2 + peerDependencies: + react: ">=16.6.0" + react-dom: ">=16.6.0" + checksum: 75602840106aa9c6545149d6d7ae1502fb7b7abadcce70a6954c4b64a438ff1cd16fc77a0a1e5197cdd72da398f39eb929ea06f9005c45b132ed34e056ebdeb1 + languageName: node + linkType: hard + "react-universal-interface@npm:^0.6.2": version: 0.6.2 resolution: "react-universal-interface@npm:0.6.2" @@ -37229,6 +37763,13 @@ __metadata: languageName: node linkType: hard +"source-map@npm:^0.5.7": + version: 0.5.7 + resolution: "source-map@npm:0.5.7" + checksum: 5dc2043b93d2f194142c7f38f74a24670cd7a0063acdaf4bf01d2964b402257ae843c2a8fa822ad5b71013b5fcafa55af7421383da919752f22ff488bc553f4d + languageName: node + linkType: hard + "source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.0, source-map@npm:~0.6.1": version: 0.6.1 resolution: "source-map@npm:0.6.1" @@ -38030,6 +38571,13 @@ __metadata: languageName: node linkType: hard +"stylis@npm:4.1.3": + version: 4.1.3 + resolution: "stylis@npm:4.1.3" + checksum: d04dbffcb9bf2c5ca8d8dc09534203c75df3bf711d33973ea22038a99cc475412a350b661ebd99cbc01daa50d7eedcf0d130d121800eb7318759a197023442a6 + languageName: node + linkType: hard + "stylis@npm:^4.0.6": version: 4.0.7 resolution: "stylis@npm:4.0.7" From 7044183030ca8b630b837ecdad3bdc35b0ff2487 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 16:13:39 +0100 Subject: [PATCH 42/83] theme: update API report + fixes Signed-off-by: Patrik Oldsberg --- packages/theme/api-report.md | 96 ++++++++++++++++++- .../theme/src/base/createBaseThemeOptions.ts | 5 + packages/theme/src/base/index.ts | 1 + .../theme/src/compat/UnifiedThemeProvider.tsx | 14 ++- packages/theme/src/compat/index.ts | 1 + packages/theme/src/v5/types.ts | 20 +++- 6 files changed, 130 insertions(+), 7 deletions(-) diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index c61245e0e2..131fa185ed 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -6,8 +6,12 @@ import { Overrides } from '@material-ui/core/styles/overrides'; import { Palette } from '@material-ui/core/styles/createPalette'; import { PaletteOptions } from '@material-ui/core/styles/createPalette'; +import { PaletteOptions as PaletteOptions_2 } from '@mui/material/styles'; +import { default as React_2 } from 'react'; +import { ReactNode } from 'react'; import { Theme } from '@material-ui/core'; import { ThemeOptions } from '@material-ui/core'; +import { ThemeOptions as ThemeOptions_2 } from '@mui/material/styles'; // @public @deprecated export type BackstagePalette = Palette & BackstagePaletteAdditions; @@ -99,9 +103,66 @@ export interface BackstageThemeOptions extends ThemeOptions { palette: BackstagePaletteOptions; } +// @public +export interface BaseThemeOptionsInput { + // (undocumented) + defaultPageTheme?: string; + // (undocumented) + fontFamily?: string; + // (undocumented) + htmlFontSize?: number; + // (undocumented) + pageTheme?: Record; + // (undocumented) + palette: PaletteOptions; +} + // @public export const colorVariants: Record; +// @public +export function createBaseThemeOptions( + options: BaseThemeOptionsInput, +): { + palette: PaletteOptions; + typography: { + htmlFontSize: number; + fontFamily: string; + h1: { + fontSize: number; + fontWeight: number; + marginBottom: number; + }; + h2: { + fontSize: number; + fontWeight: number; + marginBottom: number; + }; + h3: { + fontSize: number; + fontWeight: number; + marginBottom: number; + }; + h4: { + fontWeight: number; + fontSize: number; + marginBottom: number; + }; + h5: { + fontWeight: number; + fontSize: number; + marginBottom: number; + }; + h6: { + fontWeight: number; + fontSize: number; + marginBottom: number; + }; + }; + page: PageTheme; + getPageTheme: ({ themeId }: PageThemeSelector) => PageTheme; +}; + // @public @deprecated (undocumented) export const createTheme: typeof createV4Theme; @@ -125,6 +186,9 @@ export function createV4ThemeOverrides(theme: Theme): Overrides; // @public export const darkTheme: Theme; +// @public +export const defaultComponentThemes: ThemeOptions_2['components']; + // @public export function genPageTheme(props: { colors: string[]; @@ -162,9 +226,39 @@ export type SimpleThemeOptions = SimpleV4ThemeOptions; // @public export type SimpleV4ThemeOptions = { palette: PaletteOptions; - defaultPageTheme: string; + defaultPageTheme?: string; pageTheme?: Record; fontFamily?: string; htmlFontSize?: number; }; + +// @public +export type SimpleV5ThemeOptions = { + palette: PaletteOptions_2; + defaultPageTheme?: string; + pageTheme?: Record; + fontFamily?: string; + htmlFontSize?: number; +}; + +// @public +export interface UnifiedTheme { + // (undocumented) + getTheme(version: string): unknown | undefined; +} + +// @public +export function UnifiedThemeProvider( + props: UnifiedThemeProviderProps, +): React_2.ReactNode; + +// @public +export interface UnifiedThemeProviderProps { + // (undocumented) + children: ReactNode; + // (undocumented) + noCssBaseline?: boolean; + // (undocumented) + theme: UnifiedTheme; +} ``` diff --git a/packages/theme/src/base/createBaseThemeOptions.ts b/packages/theme/src/base/createBaseThemeOptions.ts index 15903462e7..e54e920deb 100644 --- a/packages/theme/src/base/createBaseThemeOptions.ts +++ b/packages/theme/src/base/createBaseThemeOptions.ts @@ -22,6 +22,11 @@ const DEFAULT_FONT_FAMILY = '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif'; const DEFAULT_PAGE_THEME = 'home'; +/** + * Options for {@link createBaseThemeOptions}. + * + * @public + */ export interface BaseThemeOptionsInput { palette: PaletteOptions; defaultPageTheme?: string; diff --git a/packages/theme/src/base/index.ts b/packages/theme/src/base/index.ts index 9440bcfd59..891d0bd275 100644 --- a/packages/theme/src/base/index.ts +++ b/packages/theme/src/base/index.ts @@ -15,6 +15,7 @@ */ export { createBaseThemeOptions } from './createBaseThemeOptions'; +export type { BaseThemeOptionsInput } from './createBaseThemeOptions'; export { colorVariants, genPageTheme, pageTheme, shapes } from './pageTheme'; export type { BackstagePaletteAdditions, diff --git a/packages/theme/src/compat/UnifiedThemeProvider.tsx b/packages/theme/src/compat/UnifiedThemeProvider.tsx index 19fd13eb08..72fb708c23 100644 --- a/packages/theme/src/compat/UnifiedThemeProvider.tsx +++ b/packages/theme/src/compat/UnifiedThemeProvider.tsx @@ -26,13 +26,23 @@ import { import CssBaseline from '@mui/material/CssBaseline'; import { UnifiedTheme } from './types'; -interface ThemeProviderProps { +/** + * Props for {@link UnifiedThemeProvider}. + * + * @public + */ +export interface UnifiedThemeProviderProps { children: ReactNode; theme: UnifiedTheme; noCssBaseline?: boolean; } -export function UnifiedThemeProvider(props: ThemeProviderProps) { +/** + * Provides themes for all MUI versions supported by the provided unified theme. + * + * @public + */ +export function UnifiedThemeProvider(props: UnifiedThemeProviderProps) { const { children, theme, noCssBaseline } = props; let result = noCssBaseline ? ( diff --git a/packages/theme/src/compat/index.ts b/packages/theme/src/compat/index.ts index 836c8e6563..5dc9e1e3ea 100644 --- a/packages/theme/src/compat/index.ts +++ b/packages/theme/src/compat/index.ts @@ -15,4 +15,5 @@ */ export { UnifiedThemeProvider } from './UnifiedThemeProvider'; +export type { UnifiedThemeProviderProps } from './UnifiedThemeProvider'; export type { UnifiedTheme } from './types'; diff --git a/packages/theme/src/v5/types.ts b/packages/theme/src/v5/types.ts index 8fce16be05..4f8bfe6634 100644 --- a/packages/theme/src/v5/types.ts +++ b/packages/theme/src/v5/types.ts @@ -51,12 +51,24 @@ declare module '@mui/material/styles/createTheme' { // See https://github.com/mui/material-ui/issues/35287 declare global { namespace React { - type React = typeof import('react'); + interface DOMAttributes { + // onResize?: ReactEventHandler | undefined; + // onResizeCapture?: ReactEventHandler | undefined; - interface DOMAttributes { - onResize?: React.EventHandler | undefined; - onResizeCapture?: React.EventHandler | undefined; + onResize?: (event: Event) => void; + onResizeCapture?: (event: Event) => void; nonce?: string | undefined; } } } +// declare global { +// namespace React { +// type React = typeof import('react'); + +// interface DOMAttributes { +// onResize?: React.EventHandler | undefined; +// onResizeCapture?: React.EventHandler | undefined; +// nonce?: string | undefined; +// } +// } +// } From 563b9ef5cb6b85786eefc9c1df99507f3c93cb91 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 16:24:31 +0100 Subject: [PATCH 43/83] theme: extract out base palettes Signed-off-by: Patrik Oldsberg --- packages/theme/src/base/index.ts | 1 + packages/theme/src/base/palettes.ts | 165 ++++++++++++++++++++++++++++ packages/theme/src/v4/themes.ts | 149 +------------------------ 3 files changed, 169 insertions(+), 146 deletions(-) create mode 100644 packages/theme/src/base/palettes.ts diff --git a/packages/theme/src/base/index.ts b/packages/theme/src/base/index.ts index 891d0bd275..45b8326f2e 100644 --- a/packages/theme/src/base/index.ts +++ b/packages/theme/src/base/index.ts @@ -17,6 +17,7 @@ export { createBaseThemeOptions } from './createBaseThemeOptions'; export type { BaseThemeOptionsInput } from './createBaseThemeOptions'; export { colorVariants, genPageTheme, pageTheme, shapes } from './pageTheme'; +export { palettes } from './palettes'; export type { BackstagePaletteAdditions, PageTheme, diff --git a/packages/theme/src/base/palettes.ts b/packages/theme/src/base/palettes.ts new file mode 100644 index 0000000000..f049237f60 --- /dev/null +++ b/packages/theme/src/base/palettes.ts @@ -0,0 +1,165 @@ +/* + * Copyright 2020 The Backstage Authors + * + * 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. + */ + +/** + * Built-in Backstage color palettes. + * + * @public + */ +export const palettes = { + light: { + type: 'light' as const, + mode: 'light' as const, + background: { + default: '#F8F8F8', + }, + status: { + ok: '#1DB954', + warning: '#FF9800', + error: '#E22134', + running: '#1F5493', + pending: '#FFED51', + aborted: '#757575', + }, + bursts: { + fontColor: '#FEFEFE', + slackChannelText: '#ddd', + backgroundColor: { + default: '#7C3699', + }, + gradient: { + linear: 'linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)', + }, + }, + primary: { + main: '#1F5493', + }, + banner: { + info: '#2E77D0', + error: '#E22134', + text: '#FFFFFF', + link: '#000000', + closeButtonColor: '#FFFFFF', + warning: '#FF9800', + }, + border: '#E6E6E6', + textContrast: '#000000', + textVerySubtle: '#DDD', + textSubtle: '#6E6E6E', + highlight: '#FFFBCC', + errorBackground: '#FFEBEE', + warningBackground: '#F59B23', + infoBackground: '#ebf5ff', + errorText: '#CA001B', + infoText: '#004e8a', + warningText: '#000000', + linkHover: '#2196F3', + link: '#0A6EBE', + gold: '#FFD600', + navigation: { + background: '#171717', + indicator: '#9BF0E1', + color: '#b5b5b5', + selectedColor: '#FFF', + navItem: { + hoverBackground: '#404040', + }, + submenu: { + background: '#404040', + }, + }, + pinSidebarButton: { + icon: '#181818', + background: '#BDBDBD', + }, + tabbar: { + indicator: '#9BF0E1', + }, + }, + dark: { + type: 'dark' as const, + mode: 'dark' as const, + background: { + default: '#333333', + }, + status: { + ok: '#71CF88', + warning: '#FFB84D', + error: '#F84C55', + running: '#3488E3', + pending: '#FEF071', + aborted: '#9E9E9E', + }, + bursts: { + fontColor: '#FEFEFE', + slackChannelText: '#ddd', + backgroundColor: { + default: '#7C3699', + }, + gradient: { + linear: 'linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)', + }, + }, + primary: { + main: '#9CC9FF', + dark: '#82BAFD', + }, + secondary: { + main: '#FF88B2', + }, + banner: { + info: '#2E77D0', + error: '#E22134', + text: '#FFFFFF', + link: '#000000', + closeButtonColor: '#FFFFFF', + warning: '#FF9800', + }, + border: '#E6E6E6', + textContrast: '#FFFFFF', + textVerySubtle: '#727272', + textSubtle: '#CCCCCC', + highlight: '#FFFBCC', + errorBackground: '#FFEBEE', + warningBackground: '#F59B23', + infoBackground: '#ebf5ff', + errorText: '#CA001B', + infoText: '#004e8a', + warningText: '#000000', + linkHover: '#82BAFD', + link: '#9CC9FF', + gold: '#FFD600', + navigation: { + background: '#424242', + indicator: '#9BF0E1', + color: '#b5b5b5', + selectedColor: '#FFF', + navItem: { + hoverBackground: '#404040', + }, + submenu: { + background: '#404040', + }, + }, + pinSidebarButton: { + icon: '#404040', + background: '#BDBDBD', + }, + tabbar: { + indicator: '#9BF0E1', + }, + }, +}; diff --git a/packages/theme/src/v4/themes.ts b/packages/theme/src/v4/themes.ts index c63dcb591e..ad4faeeac6 100644 --- a/packages/theme/src/v4/themes.ts +++ b/packages/theme/src/v4/themes.ts @@ -15,8 +15,7 @@ */ import { createV4Theme } from './baseTheme'; -import { pageTheme } from '../base/pageTheme'; -import { yellow } from '@material-ui/core/colors'; +import { palettes } from '../base'; /** * The default Backstage light theme. @@ -24,76 +23,7 @@ import { yellow } from '@material-ui/core/colors'; * @public */ export const lightTheme = createV4Theme({ - palette: { - type: 'light', - background: { - default: '#F8F8F8', - }, - status: { - ok: '#1DB954', - warning: '#FF9800', - error: '#E22134', - running: '#1F5493', - pending: '#FFED51', - aborted: '#757575', - }, - bursts: { - fontColor: '#FEFEFE', - slackChannelText: '#ddd', - backgroundColor: { - default: '#7C3699', - }, - gradient: { - linear: 'linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)', - }, - }, - primary: { - main: '#1F5493', - }, - banner: { - info: '#2E77D0', - error: '#E22134', - text: '#FFFFFF', - link: '#000000', - closeButtonColor: '#FFFFFF', - warning: '#FF9800', - }, - border: '#E6E6E6', - textContrast: '#000000', - textVerySubtle: '#DDD', - textSubtle: '#6E6E6E', - highlight: '#FFFBCC', - errorBackground: '#FFEBEE', - warningBackground: '#F59B23', - infoBackground: '#ebf5ff', - errorText: '#CA001B', - infoText: '#004e8a', - warningText: '#000000', - linkHover: '#2196F3', - link: '#0A6EBE', - gold: yellow.A700, - navigation: { - background: '#171717', - indicator: '#9BF0E1', - color: '#b5b5b5', - selectedColor: '#FFF', - navItem: { - hoverBackground: '#404040', - }, - submenu: { - background: '#404040', - }, - }, - pinSidebarButton: { - icon: '#181818', - background: '#BDBDBD', - }, - tabbar: { - indicator: '#9BF0E1', - }, - }, - defaultPageTheme: 'home', - pageTheme, + palette: palettes.light, }); /** @@ -102,78 +32,5 @@ export const lightTheme = createV4Theme({ * @public */ export const darkTheme = createV4Theme({ - palette: { - type: 'dark', - background: { - default: '#333333', - }, - status: { - ok: '#71CF88', - warning: '#FFB84D', - error: '#F84C55', - running: '#3488E3', - pending: '#FEF071', - aborted: '#9E9E9E', - }, - bursts: { - fontColor: '#FEFEFE', - slackChannelText: '#ddd', - backgroundColor: { - default: '#7C3699', - }, - gradient: { - linear: 'linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)', - }, - }, - primary: { - main: '#9CC9FF', - dark: '#82BAFD', - }, - secondary: { - main: '#FF88B2', - }, - banner: { - info: '#2E77D0', - error: '#E22134', - text: '#FFFFFF', - link: '#000000', - closeButtonColor: '#FFFFFF', - warning: '#FF9800', - }, - border: '#E6E6E6', - textContrast: '#FFFFFF', - textVerySubtle: '#727272', - textSubtle: '#CCCCCC', - highlight: '#FFFBCC', - errorBackground: '#FFEBEE', - warningBackground: '#F59B23', - infoBackground: '#ebf5ff', - errorText: '#CA001B', - infoText: '#004e8a', - warningText: '#000000', - linkHover: '#82BAFD', - link: '#9CC9FF', - gold: yellow.A700, - navigation: { - background: '#424242', - indicator: '#9BF0E1', - color: '#b5b5b5', - selectedColor: '#FFF', - navItem: { - hoverBackground: '#404040', - }, - submenu: { - background: '#404040', - }, - }, - pinSidebarButton: { - icon: '#404040', - background: '#BDBDBD', - }, - tabbar: { - indicator: '#9BF0E1', - }, - }, - defaultPageTheme: 'home', - pageTheme, + palette: palettes.dark, }); From d1505050ab7ae1ae76643d5aa7d9a14e3e88bbea Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 16:25:48 +0100 Subject: [PATCH 44/83] theme: new unified themes export Signed-off-by: Patrik Oldsberg --- packages/theme/src/compat/index.ts | 1 + packages/theme/src/compat/themes.ts | 23 +++++++++++++++++++++++ 2 files changed, 24 insertions(+) create mode 100644 packages/theme/src/compat/themes.ts diff --git a/packages/theme/src/compat/index.ts b/packages/theme/src/compat/index.ts index 5dc9e1e3ea..8b5e01e231 100644 --- a/packages/theme/src/compat/index.ts +++ b/packages/theme/src/compat/index.ts @@ -15,5 +15,6 @@ */ export { UnifiedThemeProvider } from './UnifiedThemeProvider'; +export { themes } from './themes'; export type { UnifiedThemeProviderProps } from './UnifiedThemeProvider'; export type { UnifiedTheme } from './types'; diff --git a/packages/theme/src/compat/themes.ts b/packages/theme/src/compat/themes.ts new file mode 100644 index 0000000000..7b5bae8029 --- /dev/null +++ b/packages/theme/src/compat/themes.ts @@ -0,0 +1,23 @@ +/* + * Copyright 2022 The Backstage Authors + * + * 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 { palettes } from '../base'; +import { createUnifiedTheme } from './UnifiedTheme'; + +export const themes = { + light: createUnifiedTheme({ palette: palettes.light }), + dark: createUnifiedTheme({ palette: palettes.dark }), +}; From 130f4343ed91da1f0e6b684db27ad4e56f92ef5f Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 16:27:01 +0100 Subject: [PATCH 45/83] theme: deprecate v4 themes Signed-off-by: Patrik Oldsberg --- packages/theme/src/v4/themes.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/theme/src/v4/themes.ts b/packages/theme/src/v4/themes.ts index ad4faeeac6..e5ce783e0f 100644 --- a/packages/theme/src/v4/themes.ts +++ b/packages/theme/src/v4/themes.ts @@ -18,18 +18,20 @@ import { createV4Theme } from './baseTheme'; import { palettes } from '../base'; /** - * The default Backstage light theme. + * The old MUI v4 Backstage light theme. * * @public + * @deprecated Use {@link themes.light} instead. */ export const lightTheme = createV4Theme({ palette: palettes.light, }); /** - * The default Backstage dark theme. + * The old MUI v4 Backstage dark theme. * * @public + * @deprecated Use {@link themes.dark} instead. */ export const darkTheme = createV4Theme({ palette: palettes.dark, From 1b7f1124524622933ed7307cf024bc4c0a5c823b Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 16:29:42 +0100 Subject: [PATCH 46/83] theme: remove unused SimpleV5ThemeOptions + cleanup Signed-off-by: Patrik Oldsberg --- packages/theme/src/v5/types.ts | 30 ------------------------------ 1 file changed, 30 deletions(-) diff --git a/packages/theme/src/v5/types.ts b/packages/theme/src/v5/types.ts index 4f8bfe6634..f679d9e53b 100644 --- a/packages/theme/src/v5/types.ts +++ b/packages/theme/src/v5/types.ts @@ -14,27 +14,11 @@ * limitations under the License. */ -import { PaletteOptions } from '@mui/material/styles'; import { BackstagePaletteAdditions, BackstageThemeAdditions, - PageTheme, } from '../base/types'; -/** - * A simpler configuration for creating a new theme that just tweaks some parts - * of the backstage one. - * - * @public - */ -export type SimpleV5ThemeOptions = { - palette: PaletteOptions; - defaultPageTheme?: string; - pageTheme?: Record; - fontFamily?: string; - htmlFontSize?: number; -}; - declare module '@mui/material/styles/createPalette' { interface Palette extends BackstagePaletteAdditions {} @@ -52,23 +36,9 @@ declare module '@mui/material/styles/createTheme' { declare global { namespace React { interface DOMAttributes { - // onResize?: ReactEventHandler | undefined; - // onResizeCapture?: ReactEventHandler | undefined; - onResize?: (event: Event) => void; onResizeCapture?: (event: Event) => void; nonce?: string | undefined; } } } -// declare global { -// namespace React { -// type React = typeof import('react'); - -// interface DOMAttributes { -// onResize?: React.EventHandler | undefined; -// onResizeCapture?: React.EventHandler | undefined; -// nonce?: string | undefined; -// } -// } -// } From daa9125e4d44f233faea84114b8e977a6eeae74d Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 16:37:01 +0100 Subject: [PATCH 47/83] theme: remove new V4 methods, deprecate all existing methods Signed-off-by: Patrik Oldsberg --- packages/theme/src/index.ts | 28 ---------------------------- packages/theme/src/v4/baseTheme.ts | 25 +++++++++++++------------ packages/theme/src/v4/index.ts | 8 ++++---- packages/theme/src/v4/themes.ts | 6 +++--- packages/theme/src/v4/types.ts | 3 ++- 5 files changed, 22 insertions(+), 48 deletions(-) diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index 8fdb961705..55bcf3beaa 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -24,31 +24,3 @@ export * from './compat'; export * from './base'; export * from './v4'; export * from './v5'; - -import { - createV4Theme, - createV4ThemeOptions, - createV4ThemeOverrides, -} from './v4'; -import type { SimpleV4ThemeOptions } from './v4'; - -/** - * @public - * @deprecated Use {@link createV4Theme} instead. - */ -export const createTheme = createV4Theme; -/** - * @public - * @deprecated Use {@link createV4ThemeOptions} instead. - */ -export const createThemeOptions = createV4ThemeOptions; -/** - * @public - * @deprecated Use {@link createV4ThemeOverrides} instead. - */ -export const createThemeOverrides = createV4ThemeOverrides; -/** - * @public - * @deprecated Use {@link SimpleV4ThemeOptions} instead. - */ -export type SimpleThemeOptions = SimpleV4ThemeOptions; diff --git a/packages/theme/src/v4/baseTheme.ts b/packages/theme/src/v4/baseTheme.ts index 9ae8507e9c..2349cfb13b 100644 --- a/packages/theme/src/v4/baseTheme.ts +++ b/packages/theme/src/v4/baseTheme.ts @@ -18,19 +18,18 @@ import { Theme as Mui5Theme } from '@mui/material/styles'; import { createTheme as createMuiTheme } from '@material-ui/core/styles'; import { GridProps, SwitchProps, Theme, ThemeOptions } from '@material-ui/core'; import { Overrides } from '@material-ui/core/styles/overrides'; -import { SimpleV4ThemeOptions } from './types'; +import { SimpleThemeOptions } from './types'; import { createBaseThemeOptions } from '../base'; import { defaultComponentThemes } from '../v5'; import { transformV5ComponentThemesToV4 } from '../compat/overrides'; /** - * A helper for creating theme options. + * An old helper for creating MUI v4 theme options. * * @public + * @deprecated Use {@link createBaseThemeOptions} instead. */ -export function createV4ThemeOptions( - options: SimpleV4ThemeOptions, -): ThemeOptions { +export function createThemeOptions(options: SimpleThemeOptions): ThemeOptions { return { props: { MuiGrid: defaultComponentThemes?.MuiGrid @@ -43,11 +42,12 @@ export function createV4ThemeOptions( } /** - * A helper for creating theme overrides. + * * An old helper for creating MUI v4 theme overrides. * * @public + * @deprecated Use {@link defaultComponentThemes} with {@link transformV5ComponentThemesToV4} instead. */ -export function createV4ThemeOverrides(theme: Theme): Overrides { +export function createThemeOverrides(theme: Theme): Overrides { return transformV5ComponentThemesToV4( // Safe but we have to make sure we don't use mui5 specific stuff in the default component themes theme as unknown as Mui5Theme, @@ -56,15 +56,16 @@ export function createV4ThemeOverrides(theme: Theme): Overrides { } /** - * Creates a Backstage MUI theme using a palette. The theme is created with the - * common Backstage options and component styles. + * The old method to create a Backstage MUI v4 theme using a palette. + * The theme is created with the common Backstage options and component styles. * * @public + * @deprecated Use {@link createUnifiedTheme} instead. */ -export function createV4Theme(options: SimpleV4ThemeOptions): Theme { - const themeOptions = createV4ThemeOptions(options); +export function createTheme(options: SimpleThemeOptions): Theme { + const themeOptions = createThemeOptions(options); const baseTheme = createMuiTheme(themeOptions); - const overrides = createV4ThemeOverrides(baseTheme); + const overrides = createThemeOverrides(baseTheme); const theme = { ...baseTheme, overrides }; return theme; } diff --git a/packages/theme/src/v4/index.ts b/packages/theme/src/v4/index.ts index 331e0e4c1e..fad349b849 100644 --- a/packages/theme/src/v4/index.ts +++ b/packages/theme/src/v4/index.ts @@ -16,14 +16,14 @@ export { darkTheme, lightTheme } from './themes'; export { - createV4Theme, - createV4ThemeOptions, - createV4ThemeOverrides, + createTheme, + createThemeOptions, + createThemeOverrides, } from './baseTheme'; export type { BackstagePalette, BackstagePaletteOptions, BackstageTheme, BackstageThemeOptions, - SimpleV4ThemeOptions, + SimpleThemeOptions, } from './types'; diff --git a/packages/theme/src/v4/themes.ts b/packages/theme/src/v4/themes.ts index e5ce783e0f..488ee58831 100644 --- a/packages/theme/src/v4/themes.ts +++ b/packages/theme/src/v4/themes.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { createV4Theme } from './baseTheme'; +import { createTheme } from './baseTheme'; import { palettes } from '../base'; /** @@ -23,7 +23,7 @@ import { palettes } from '../base'; * @public * @deprecated Use {@link themes.light} instead. */ -export const lightTheme = createV4Theme({ +export const lightTheme = createTheme({ palette: palettes.light, }); @@ -33,6 +33,6 @@ export const lightTheme = createV4Theme({ * @public * @deprecated Use {@link themes.dark} instead. */ -export const darkTheme = createV4Theme({ +export const darkTheme = createTheme({ palette: palettes.dark, }); diff --git a/packages/theme/src/v4/types.ts b/packages/theme/src/v4/types.ts index ded91bec3f..24736e5d88 100644 --- a/packages/theme/src/v4/types.ts +++ b/packages/theme/src/v4/types.ts @@ -78,8 +78,9 @@ export interface BackstageTheme extends Theme { * of the backstage one. * * @public + * @deprecated Use {@link BaseThemeOptionsInput} instead. */ -export type SimpleV4ThemeOptions = { +export type SimpleThemeOptions = { palette: PaletteOptions; defaultPageTheme?: string; pageTheme?: Record; From 2c2e98562c4829b7a2a648cc06ff6fdd7e9c5afa Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 16:42:08 +0100 Subject: [PATCH 48/83] theme: update API report + fixes Signed-off-by: Patrik Oldsberg --- packages/theme/api-report.md | 233 +++++++++++++++++---- packages/theme/src/compat/UnifiedTheme.tsx | 8 +- packages/theme/src/compat/index.ts | 5 +- packages/theme/src/compat/overrides.ts | 6 +- packages/theme/src/compat/themes.ts | 5 + 5 files changed, 215 insertions(+), 42 deletions(-) diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 131fa185ed..59c894ba19 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -3,15 +3,18 @@ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts +import { ComponentsProps } from '@material-ui/core/styles/props'; import { Overrides } from '@material-ui/core/styles/overrides'; import { Palette } from '@material-ui/core/styles/createPalette'; import { PaletteOptions } from '@material-ui/core/styles/createPalette'; -import { PaletteOptions as PaletteOptions_2 } from '@mui/material/styles'; +import { PaletteOptions as PaletteOptions_2 } from '@mui/material/styles/createPalette'; import { default as React_2 } from 'react'; import { ReactNode } from 'react'; -import { Theme } from '@material-ui/core'; -import { ThemeOptions } from '@material-ui/core'; -import { ThemeOptions as ThemeOptions_2 } from '@mui/material/styles'; +import { Theme } from '@mui/material/styles'; +import { Theme as Theme_2 } from '@material-ui/core'; +import { ThemeOptions } from '@mui/material/styles'; +import { ThemeOptions as ThemeOptions_2 } from '@material-ui/core/styles'; +import { ThemeOptions as ThemeOptions_3 } from '@material-ui/core'; // @public @deprecated export type BackstagePalette = Palette & BackstagePaletteAdditions; @@ -84,7 +87,7 @@ export type BackstagePaletteOptions = PaletteOptions & BackstagePaletteAdditions; // @public @deprecated -export interface BackstageTheme extends Theme { +export interface BackstageTheme extends Theme_2 { // (undocumented) getPageTheme: (selector: PageThemeSelector) => PageTheme; // (undocumented) @@ -94,7 +97,7 @@ export interface BackstageTheme extends Theme { } // @public @deprecated -export interface BackstageThemeOptions extends ThemeOptions { +export interface BackstageThemeOptions extends ThemeOptions_3 { // (undocumented) getPageTheme: (selector: PageThemeSelector) => PageTheme; // (undocumented) @@ -163,31 +166,26 @@ export function createBaseThemeOptions( getPageTheme: ({ themeId }: PageThemeSelector) => PageTheme; }; -// @public @deprecated (undocumented) -export const createTheme: typeof createV4Theme; +// @public @deprecated +export function createTheme(options: SimpleThemeOptions): Theme_2; -// @public @deprecated (undocumented) -export const createThemeOptions: typeof createV4ThemeOptions; +// @public @deprecated +export function createThemeOptions(options: SimpleThemeOptions): ThemeOptions_3; -// @public @deprecated (undocumented) -export const createThemeOverrides: typeof createV4ThemeOverrides; +// @public @deprecated +export function createThemeOverrides(theme: Theme_2): Overrides; // @public -export function createV4Theme(options: SimpleV4ThemeOptions): Theme; +export function createUnifiedTheme(options: UnifiedThemeOptions): UnifiedTheme; // @public -export function createV4ThemeOptions( - options: SimpleV4ThemeOptions, -): ThemeOptions; +export function createUnifiedThemeFromV4(options: ThemeOptions_2): UnifiedTheme; + +// @public @deprecated +export const darkTheme: Theme_2; // @public -export function createV4ThemeOverrides(theme: Theme): Overrides; - -// @public -export const darkTheme: Theme; - -// @public -export const defaultComponentThemes: ThemeOptions_2['components']; +export const defaultComponentThemes: ThemeOptions['components']; // @public export function genPageTheme(props: { @@ -198,8 +196,8 @@ export function genPageTheme(props: { }; }): PageTheme; -// @public -export const lightTheme: Theme; +// @public @deprecated +export const lightTheme: Theme_2; // @public export type PageTheme = { @@ -218,13 +216,154 @@ export type PageThemeSelector = { }; // @public -export const shapes: Record; - -// @public @deprecated (undocumented) -export type SimpleThemeOptions = SimpleV4ThemeOptions; +export const palettes: { + light: { + type: 'light'; + mode: 'light'; + background: { + default: string; + }; + status: { + ok: string; + warning: string; + error: string; + running: string; + pending: string; + aborted: string; + }; + bursts: { + fontColor: string; + slackChannelText: string; + backgroundColor: { + default: string; + }; + gradient: { + linear: string; + }; + }; + primary: { + main: string; + }; + banner: { + info: string; + error: string; + text: string; + link: string; + warning: string; + }; + border: string; + textContrast: string; + textVerySubtle: string; + textSubtle: string; + highlight: string; + errorBackground: string; + warningBackground: string; + infoBackground: string; + errorText: string; + infoText: string; + warningText: string; + linkHover: string; + link: string; + gold: string; + navigation: { + background: string; + indicator: string; + color: string; + selectedColor: string; + navItem: { + hoverBackground: string; + }; + submenu: { + background: string; + }; + }; + pinSidebarButton: { + icon: string; + background: string; + }; + tabbar: { + indicator: string; + }; + }; + dark: { + type: 'dark'; + mode: 'dark'; + background: { + default: string; + }; + status: { + ok: string; + warning: string; + error: string; + running: string; + pending: string; + aborted: string; + }; + bursts: { + fontColor: string; + slackChannelText: string; + backgroundColor: { + default: string; + }; + gradient: { + linear: string; + }; + }; + primary: { + main: string; + dark: string; + }; + secondary: { + main: string; + }; + banner: { + info: string; + error: string; + text: string; + link: string; + warning: string; + }; + border: string; + textContrast: string; + textVerySubtle: string; + textSubtle: string; + highlight: string; + errorBackground: string; + warningBackground: string; + infoBackground: string; + errorText: string; + infoText: string; + warningText: string; + linkHover: string; + link: string; + gold: string; + navigation: { + background: string; + indicator: string; + color: string; + selectedColor: string; + navItem: { + hoverBackground: string; + }; + submenu: { + background: string; + }; + }; + pinSidebarButton: { + icon: string; + background: string; + }; + tabbar: { + indicator: string; + }; + }; +}; // @public -export type SimpleV4ThemeOptions = { +export const shapes: Record; + +// @public @deprecated +export type SimpleThemeOptions = { palette: PaletteOptions; defaultPageTheme?: string; pageTheme?: Record; @@ -233,12 +372,18 @@ export type SimpleV4ThemeOptions = { }; // @public -export type SimpleV5ThemeOptions = { - palette: PaletteOptions_2; - defaultPageTheme?: string; - pageTheme?: Record; - fontFamily?: string; - htmlFontSize?: number; +export const themes: { + light: UnifiedTheme; + dark: UnifiedTheme; +}; + +// @public +export function transformV5ComponentThemesToV4( + theme: Theme, + components?: ThemeOptions['components'], +): { + overrides: Overrides; + props: ComponentsProps; }; // @public @@ -247,6 +392,22 @@ export interface UnifiedTheme { getTheme(version: string): unknown | undefined; } +// @public +export interface UnifiedThemeOptions { + // (undocumented) + components?: ThemeOptions['components']; + // (undocumented) + defaultPageTheme?: string; + // (undocumented) + fontFamily?: string; + // (undocumented) + htmlFontSize?: number; + // (undocumented) + pageTheme?: Record; + // (undocumented) + palette: PaletteOptions & PaletteOptions_2; +} + // @public export function UnifiedThemeProvider( props: UnifiedThemeProviderProps, diff --git a/packages/theme/src/compat/UnifiedTheme.tsx b/packages/theme/src/compat/UnifiedTheme.tsx index d00999a8b1..dbb50c979e 100644 --- a/packages/theme/src/compat/UnifiedTheme.tsx +++ b/packages/theme/src/compat/UnifiedTheme.tsx @@ -70,9 +70,7 @@ export interface UnifiedThemeOptions { * * @public */ -export function createUnifiedTheme( - options: UnifiedThemeOptions, -): UnifiedThemeHolder { +export function createUnifiedTheme(options: UnifiedThemeOptions): UnifiedTheme { const themeOptions = createBaseThemeOptions(options); const components = { ...defaultComponentThemes, ...options.components }; const v5Theme = createV5Theme({ ...themeOptions, components }); @@ -88,7 +86,9 @@ export function createUnifiedTheme( * * @public */ -export function createUnifiedThemeFromV4(options: ThemeOptionsV4) { +export function createUnifiedThemeFromV4( + options: ThemeOptionsV4, +): UnifiedTheme { const v4Theme = createV4Theme(options); const v5Theme = adaptV4Theme(options as any); diff --git a/packages/theme/src/compat/index.ts b/packages/theme/src/compat/index.ts index 8b5e01e231..f5c805d3ed 100644 --- a/packages/theme/src/compat/index.ts +++ b/packages/theme/src/compat/index.ts @@ -14,7 +14,10 @@ * limitations under the License. */ -export { UnifiedThemeProvider } from './UnifiedThemeProvider'; +export { transformV5ComponentThemesToV4 } from './overrides'; +export { createUnifiedTheme, createUnifiedThemeFromV4 } from './UnifiedTheme'; +export type { UnifiedThemeOptions } from './UnifiedTheme'; export { themes } from './themes'; +export { UnifiedThemeProvider } from './UnifiedThemeProvider'; export type { UnifiedThemeProviderProps } from './UnifiedThemeProvider'; export type { UnifiedTheme } from './types'; diff --git a/packages/theme/src/compat/overrides.ts b/packages/theme/src/compat/overrides.ts index 8b6c3f94bc..a9e080af36 100644 --- a/packages/theme/src/compat/overrides.ts +++ b/packages/theme/src/compat/overrides.ts @@ -43,7 +43,11 @@ function adaptV5Override(theme: Theme, overrides: V5Override): V4Override { return overrides as V4Override; } -// Transform v5 theme overrides into a v4 theme, by converting the callback-based overrides +/** + * Transform MUI v5 component themes into a v4 theme props and overrides. + * + * @public + */ export function transformV5ComponentThemesToV4( theme: Theme, components: ThemeOptions['components'] = {}, diff --git a/packages/theme/src/compat/themes.ts b/packages/theme/src/compat/themes.ts index 7b5bae8029..24e1b1026b 100644 --- a/packages/theme/src/compat/themes.ts +++ b/packages/theme/src/compat/themes.ts @@ -17,6 +17,11 @@ import { palettes } from '../base'; import { createUnifiedTheme } from './UnifiedTheme'; +/** + * Built-in Backstage MUI themes. + * + * @public + */ export const themes = { light: createUnifiedTheme({ palette: palettes.light }), dark: createUnifiedTheme({ palette: palettes.dark }), From ac45497e1eba614e337e8be47970e06f6ceb27bb Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 16:47:46 +0100 Subject: [PATCH 49/83] theme: rename compat -> unified Signed-off-by: Patrik Oldsberg --- packages/theme/src/index.ts | 2 +- packages/theme/src/{compat => unified}/UnifiedTheme.tsx | 0 packages/theme/src/{compat => unified}/UnifiedThemeProvider.tsx | 0 packages/theme/src/{compat => unified}/index.ts | 0 packages/theme/src/{compat => unified}/overrides.test.ts | 0 packages/theme/src/{compat => unified}/overrides.ts | 0 packages/theme/src/{compat => unified}/themes.ts | 0 packages/theme/src/{compat => unified}/types.ts | 0 packages/theme/src/v4/baseTheme.ts | 2 +- 9 files changed, 2 insertions(+), 2 deletions(-) rename packages/theme/src/{compat => unified}/UnifiedTheme.tsx (100%) rename packages/theme/src/{compat => unified}/UnifiedThemeProvider.tsx (100%) rename packages/theme/src/{compat => unified}/index.ts (100%) rename packages/theme/src/{compat => unified}/overrides.test.ts (100%) rename packages/theme/src/{compat => unified}/overrides.ts (100%) rename packages/theme/src/{compat => unified}/themes.ts (100%) rename packages/theme/src/{compat => unified}/types.ts (100%) diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index 55bcf3beaa..b0e3590273 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -20,7 +20,7 @@ * @packageDocumentation */ -export * from './compat'; +export * from './unified'; export * from './base'; export * from './v4'; export * from './v5'; diff --git a/packages/theme/src/compat/UnifiedTheme.tsx b/packages/theme/src/unified/UnifiedTheme.tsx similarity index 100% rename from packages/theme/src/compat/UnifiedTheme.tsx rename to packages/theme/src/unified/UnifiedTheme.tsx diff --git a/packages/theme/src/compat/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx similarity index 100% rename from packages/theme/src/compat/UnifiedThemeProvider.tsx rename to packages/theme/src/unified/UnifiedThemeProvider.tsx diff --git a/packages/theme/src/compat/index.ts b/packages/theme/src/unified/index.ts similarity index 100% rename from packages/theme/src/compat/index.ts rename to packages/theme/src/unified/index.ts diff --git a/packages/theme/src/compat/overrides.test.ts b/packages/theme/src/unified/overrides.test.ts similarity index 100% rename from packages/theme/src/compat/overrides.test.ts rename to packages/theme/src/unified/overrides.test.ts diff --git a/packages/theme/src/compat/overrides.ts b/packages/theme/src/unified/overrides.ts similarity index 100% rename from packages/theme/src/compat/overrides.ts rename to packages/theme/src/unified/overrides.ts diff --git a/packages/theme/src/compat/themes.ts b/packages/theme/src/unified/themes.ts similarity index 100% rename from packages/theme/src/compat/themes.ts rename to packages/theme/src/unified/themes.ts diff --git a/packages/theme/src/compat/types.ts b/packages/theme/src/unified/types.ts similarity index 100% rename from packages/theme/src/compat/types.ts rename to packages/theme/src/unified/types.ts diff --git a/packages/theme/src/v4/baseTheme.ts b/packages/theme/src/v4/baseTheme.ts index 2349cfb13b..411bcdf9a8 100644 --- a/packages/theme/src/v4/baseTheme.ts +++ b/packages/theme/src/v4/baseTheme.ts @@ -21,7 +21,7 @@ import { Overrides } from '@material-ui/core/styles/overrides'; import { SimpleThemeOptions } from './types'; import { createBaseThemeOptions } from '../base'; import { defaultComponentThemes } from '../v5'; -import { transformV5ComponentThemesToV4 } from '../compat/overrides'; +import { transformV5ComponentThemesToV4 } from '../unified/overrides'; /** * An old helper for creating MUI v4 theme options. From 879153617741ac081f3ff79cf71d444429cbdb15 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 16:50:03 +0100 Subject: [PATCH 50/83] theme: fix UnifiedThemeProvider type Signed-off-by: Patrik Oldsberg --- packages/theme/api-report.md | 3 +-- packages/theme/src/unified/UnifiedThemeProvider.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 59c894ba19..e8f7ef30f8 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -8,7 +8,6 @@ import { Overrides } from '@material-ui/core/styles/overrides'; import { Palette } from '@material-ui/core/styles/createPalette'; import { PaletteOptions } from '@material-ui/core/styles/createPalette'; import { PaletteOptions as PaletteOptions_2 } from '@mui/material/styles/createPalette'; -import { default as React_2 } from 'react'; import { ReactNode } from 'react'; import { Theme } from '@mui/material/styles'; import { Theme as Theme_2 } from '@material-ui/core'; @@ -411,7 +410,7 @@ export interface UnifiedThemeOptions { // @public export function UnifiedThemeProvider( props: UnifiedThemeProviderProps, -): React_2.ReactNode; +): JSX.Element; // @public export interface UnifiedThemeProviderProps { diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 72fb708c23..93bceac022 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -42,11 +42,13 @@ export interface UnifiedThemeProviderProps { * * @public */ -export function UnifiedThemeProvider(props: UnifiedThemeProviderProps) { +export function UnifiedThemeProvider( + props: UnifiedThemeProviderProps, +): JSX.Element { const { children, theme, noCssBaseline } = props; let result = noCssBaseline ? ( - children + <>{children} ) : ( <> From 8bca331617f998d1c85ebf10a715e90116d7e6e5 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 17:57:15 +0100 Subject: [PATCH 51/83] app-defaults: switch to use new unified themes Signed-off-by: Patrik Oldsberg --- packages/app-defaults/src/defaults/themes.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/app-defaults/src/defaults/themes.tsx b/packages/app-defaults/src/defaults/themes.tsx index 397c160168..10368bd3bc 100644 --- a/packages/app-defaults/src/defaults/themes.tsx +++ b/packages/app-defaults/src/defaults/themes.tsx @@ -15,11 +15,12 @@ */ import React from 'react'; -import { darkTheme, lightTheme } from '@backstage/theme'; +import { + UnifiedThemeProvider, + themes as builtinThemes, +} from '@backstage/theme'; import DarkIcon from '@material-ui/icons/Brightness2'; import LightIcon from '@material-ui/icons/WbSunny'; -import { ThemeProvider } from '@material-ui/core/styles'; -import CssBaseline from '@material-ui/core/CssBaseline'; import { AppTheme } from '@backstage/core-plugin-api'; export const themes: AppTheme[] = [ @@ -29,9 +30,7 @@ export const themes: AppTheme[] = [ variant: 'light', icon: , Provider: ({ children }) => ( - - {children} - + ), }, { @@ -40,9 +39,7 @@ export const themes: AppTheme[] = [ variant: 'dark', icon: , Provider: ({ children }) => ( - - {children} - + ), }, ]; From 3eca9ee94c0a5b8c1be28ccec041a6b70c8fcb1b Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 18:03:17 +0100 Subject: [PATCH 52/83] theme: add StyledEngineProvider for v5 theme Signed-off-by: Patrik Oldsberg --- packages/theme/src/unified/UnifiedThemeProvider.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 93bceac022..f2cc2d573f 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -20,6 +20,7 @@ import { ThemeProvider as Mui4Provider, } from '@material-ui/core/styles'; import { + StyledEngineProvider, Theme as Mui5Theme, ThemeProvider as Mui5Provider, } from '@mui/material/styles'; @@ -63,7 +64,11 @@ export function UnifiedThemeProvider( const v5Theme = theme.getTheme('v5'); if (v5Theme) { - result = {result}; + result = ( + + {result} + + ); } return result; From 6bdc603a5255ad85e753c20aaae1fa32ae232f2e Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 18:41:13 +0100 Subject: [PATCH 53/83] core-app-api: update app docs to reflect new theme API Signed-off-by: Patrik Oldsberg --- packages/core-app-api/src/app/types.ts | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/packages/core-app-api/src/app/types.ts b/packages/core-app-api/src/app/types.ts index 3d9005b0c0..c34407ca3a 100644 --- a/packages/core-app-api/src/app/types.ts +++ b/packages/core-app-api/src/app/types.ts @@ -236,21 +236,13 @@ export type AppOptions = { * title: 'Light Theme', * variant: 'light', * icon: , - * Provider: ({ children }) => ( - * - * {children} - * - * ), + * Provider: ({ children }) => , * }, { * id: 'dark', * title: 'Dark Theme', * variant: 'dark', * icon: , - * Provider: ({ children }) => ( - * - * {children} - * - * ), + * Provider: ({ children }) => , * }] * ``` */ From 2a4cf543fb91b3ecf185f2be9f3348f0d1717ad3 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 31 Dec 2022 18:41:30 +0100 Subject: [PATCH 54/83] test-utils: use new theme API Signed-off-by: Patrik Oldsberg --- packages/test-utils/src/testUtils/appWrappers.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/test-utils/src/testUtils/appWrappers.tsx b/packages/test-utils/src/testUtils/appWrappers.tsx index 8b644ad2d1..012cbe0b98 100644 --- a/packages/test-utils/src/testUtils/appWrappers.tsx +++ b/packages/test-utils/src/testUtils/appWrappers.tsx @@ -17,8 +17,7 @@ import React, { ComponentType, ReactNode, ReactElement } from 'react'; import { MemoryRouter } from 'react-router-dom'; import { Route } from 'react-router-dom'; -import { lightTheme } from '@backstage/theme'; -import { ThemeProvider } from '@material-ui/core/styles'; +import { UnifiedThemeProvider, themes } from '@backstage/theme'; import { CssBaseline } from '@material-ui/core'; import MockIcon from '@material-ui/icons/AcUnit'; import { createSpecializedApp } from '@backstage/core-app-api'; @@ -142,9 +141,9 @@ export function createTestAppWrapper( title: 'Test App Theme', variant: 'light', Provider: ({ children }) => ( - + {children} - + ), }, ], From bbc5f6cd6bd0150610d12b25a4d54edbed8558be Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sun, 1 Jan 2023 17:52:24 +0100 Subject: [PATCH 55/83] theme: add component style transform for v5 state to v4 Signed-off-by: Patrik Oldsberg --- packages/theme/src/unified/overrides.test.ts | 29 ++++++++++ packages/theme/src/unified/overrides.ts | 58 ++++++++++++++++--- .../theme/src/v5/defaultComponentThemes.ts | 10 ++-- 3 files changed, 84 insertions(+), 13 deletions(-) diff --git a/packages/theme/src/unified/overrides.test.ts b/packages/theme/src/unified/overrides.test.ts index 68fd883168..4cf2fdedf5 100644 --- a/packages/theme/src/unified/overrides.test.ts +++ b/packages/theme/src/unified/overrides.test.ts @@ -135,4 +135,33 @@ describe('transformV5ComponentThemesToV4', () => { }, }); }); + + it('transform state styles', () => { + expect( + transformV5ComponentThemesToV4(mockTheme, { + MuiButton: { + styleOverrides: { + root: { + color: 'green', + '&.Mui-disabled': { + color: 'red', + }, + }, + }, + }, + }), + ).toEqual({ + overrides: { + MuiButton: { + root: { + color: 'green', + }, + disabled: { + color: 'red', + }, + }, + }, + props: {}, + }); + }); }); diff --git a/packages/theme/src/unified/overrides.ts b/packages/theme/src/unified/overrides.ts index a9e080af36..5c5990c65d 100644 --- a/packages/theme/src/unified/overrides.ts +++ b/packages/theme/src/unified/overrides.ts @@ -17,18 +17,26 @@ import { Overrides } from '@material-ui/core/styles/overrides'; import { ComponentsProps } from '@material-ui/core/styles/props'; import { ComponentsOverrides, Theme, ThemeOptions } from '@mui/material/styles'; +import { CSSProperties } from 'react'; type V5Override = ComponentsOverrides[keyof ComponentsOverrides]; type V4Override = Overrides[keyof Overrides]; +type StaticStyleRules = Record< + string, + CSSProperties | Record +>; // Converts callback-based overrides to static styles, e.g. // { root: theme => ({ color: theme.color }) } -> { root: { color: 'red' } } -function adaptV5Override(theme: Theme, overrides: V5Override): V4Override { - if (!overrides) { - return overrides as V4Override; +function adaptV5Override( + theme: Theme, + overrides: V5Override, +): StaticStyleRules | undefined { + if (!overrides || typeof overrides === 'string') { + return undefined; } if (typeof overrides === 'function') { - return overrides(theme) as V4Override; + return overrides(theme) as StaticStyleRules; } if (typeof overrides === 'object') { return Object.fromEntries( @@ -40,7 +48,42 @@ function adaptV5Override(theme: Theme, overrides: V5Override): V4Override { }), ); } - return overrides as V4Override; + return overrides as StaticStyleRules; +} + +const stateStyleKeyPattern = /^&.Mui-([\w-]+)$/; + +// Move state style overrides to the top level, e.g. +// { root: { '&.Mui-active': { color: 'red' } } } -> { active: { color: 'red' } } +function extractV5StateOverrides( + overrides: StaticStyleRules | undefined, +): StaticStyleRules | undefined { + let output = overrides; + if (!overrides || typeof overrides !== 'object') { + return output; + } + for (const className of Object.keys(overrides)) { + const styles = overrides[className]; + if (!styles || typeof styles !== 'object') { + continue; + } + for (const _styleKey of Object.keys(styles)) { + const styleKey = _styleKey as keyof typeof styles; + const match = styleKey.match(stateStyleKeyPattern); + if (match) { + const [, state] = match; + const { [styleKey]: stateStyles, ...restStyles } = styles; + if (stateStyles) { + output = { + ...output, + [className]: restStyles, + [state]: stateStyles, + }; + } + } + } + } + return output; } /** @@ -61,9 +104,8 @@ export function transformV5ComponentThemesToV4( continue; } if ('styleOverrides' in component) { - overrides[name] = adaptV5Override( - theme, - component.styleOverrides as V5Override, + overrides[name] = extractV5StateOverrides( + adaptV5Override(theme, component.styleOverrides as V5Override), ); } if ('defaultProps' in component) { diff --git a/packages/theme/src/v5/defaultComponentThemes.ts b/packages/theme/src/v5/defaultComponentThemes.ts index 288ba819bf..15cba7f6b6 100644 --- a/packages/theme/src/v5/defaultComponentThemes.ts +++ b/packages/theme/src/v5/defaultComponentThemes.ts @@ -139,11 +139,11 @@ export const defaultComponentThemes: ThemeOptions['components'] = { '&:focus': { color: 'inherit', }, - }, - // Bold font for highlighting selected column - active: { - fontWeight: 'bold', - color: 'inherit', + // Bold font for highlighting selected column + '&.Mui-active': { + fontWeight: 'bold', + color: 'inherit', + }, }, }, }, From d2a81a24b415bffe10cffdf2159a3a7598ed9778 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sun, 1 Jan 2023 17:52:55 +0100 Subject: [PATCH 56/83] theme: fix pxpx Signed-off-by: Patrik Oldsberg --- .../theme/src/v5/defaultComponentThemes.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/theme/src/v5/defaultComponentThemes.ts b/packages/theme/src/v5/defaultComponentThemes.ts index 15cba7f6b6..9b4a7fde6b 100644 --- a/packages/theme/src/v5/defaultComponentThemes.ts +++ b/packages/theme/src/v5/defaultComponentThemes.ts @@ -178,23 +178,23 @@ export const defaultComponentThemes: ThemeOptions['components'] = { color: theme.palette.text.primary, }), label: ({ theme }) => ({ - lineHeight: `${theme.spacing(2.5)}px`, + lineHeight: theme.spacing(2.5), fontWeight: theme.typography.fontWeightMedium, - fontSize: `${theme.spacing(1.75)}px`, + fontSize: theme.spacing(1.75), }), labelSmall: ({ theme }) => ({ - fontSize: `${theme.spacing(1.5)}px`, + fontSize: theme.spacing(1.5), }), deleteIcon: ({ theme }) => ({ color: theme.palette.grey[500], - width: `${theme.spacing(3)}px`, - height: `${theme.spacing(3)}px`, - margin: `0 ${theme.spacing(0.75)}px 0 -${theme.spacing(0.75)}px`, + width: theme.spacing(3), + height: theme.spacing(3), + margin: `0 ${theme.spacing(0.75)}px 0 -${theme.spacing(0.75)}`, }), deleteIconSmall: ({ theme }) => ({ - width: `${theme.spacing(2)}px`, - height: `${theme.spacing(2)}px`, - margin: `0 ${theme.spacing(0.5)}px 0 -${theme.spacing(0.5)}px`, + width: theme.spacing(2), + height: theme.spacing(2), + margin: `0 ${theme.spacing(0.5)}px 0 -${theme.spacing(0.5)}`, }), }, }, From ff91bfa9936fc19cccb8cd30246f254eac8575ff Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sun, 1 Jan 2023 17:54:14 +0100 Subject: [PATCH 57/83] theme: declare default v5 theme Signed-off-by: Patrik Oldsberg --- packages/theme/src/v5/types.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/theme/src/v5/types.ts b/packages/theme/src/v5/types.ts index f679d9e53b..5369cda37b 100644 --- a/packages/theme/src/v5/types.ts +++ b/packages/theme/src/v5/types.ts @@ -14,6 +14,7 @@ * limitations under the License. */ +import { Theme } from '@mui/material/styles'; import { BackstagePaletteAdditions, BackstageThemeAdditions, @@ -31,6 +32,10 @@ declare module '@mui/material/styles/createTheme' { interface ThemeOptions extends BackstageThemeAdditions {} } +declare module '@mui/private-theming/defaultTheme' { + interface DefaultTheme extends Theme {} +} + // This is a workaround for missing methods in React 17 that MUI v5 depends on // See https://github.com/mui/material-ui/issues/35287 declare global { From 7fa73df55e3e9f3108f4ce8808abc426375471e5 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sun, 1 Jan 2023 18:12:16 +0100 Subject: [PATCH 58/83] theme: add transform for CssBaseline to fix v5 style Signed-off-by: Patrik Oldsberg --- packages/theme/src/unified/overrides.test.ts | 6 +-- packages/theme/src/unified/overrides.ts | 39 +++++++++++++++---- .../theme/src/v5/defaultComponentThemes.ts | 26 ++++++------- 3 files changed, 46 insertions(+), 25 deletions(-) diff --git a/packages/theme/src/unified/overrides.test.ts b/packages/theme/src/unified/overrides.test.ts index 4cf2fdedf5..38b4738444 100644 --- a/packages/theme/src/unified/overrides.test.ts +++ b/packages/theme/src/unified/overrides.test.ts @@ -107,10 +107,8 @@ describe('transformV5ComponentThemesToV4', () => { transformV5ComponentThemesToV4(mockTheme, { MuiCssBaseline: { styleOverrides: theme => ({ - '@global': { - html: { - color: theme.palette.primary.main, - }, + html: { + color: theme.palette.primary.main, }, }), defaultProps: { diff --git a/packages/theme/src/unified/overrides.ts b/packages/theme/src/unified/overrides.ts index 5c5990c65d..db1fb54c87 100644 --- a/packages/theme/src/unified/overrides.ts +++ b/packages/theme/src/unified/overrides.ts @@ -19,13 +19,34 @@ import { ComponentsProps } from '@material-ui/core/styles/props'; import { ComponentsOverrides, Theme, ThemeOptions } from '@mui/material/styles'; import { CSSProperties } from 'react'; -type V5Override = ComponentsOverrides[keyof ComponentsOverrides]; +type V5Override = ComponentsOverrides[Exclude< + keyof ComponentsOverrides, + 'MuiCssBaseline' +>]; type V4Override = Overrides[keyof Overrides]; type StaticStyleRules = Record< string, CSSProperties | Record >; +// Converts callback-based overrides to static styles, e.g. +// { root: theme => ({ color: theme.color }) } -> { root: { color: 'red' } } +function adaptV5CssBaselineOverride( + theme: Theme, + overrides: ComponentsOverrides['MuiCssBaseline'], +): StaticStyleRules | undefined { + if (!overrides || typeof overrides === 'string') { + return undefined; + } + + const styles = typeof overrides === 'function' ? overrides(theme) : overrides; + if (styles) { + return { '@global': styles } as StaticStyleRules; + } + + return undefined; +} + // Converts callback-based overrides to static styles, e.g. // { root: theme => ({ color: theme.color }) } -> { root: { color: 'red' } } function adaptV5Override( @@ -35,9 +56,6 @@ function adaptV5Override( if (!overrides || typeof overrides === 'string') { return undefined; } - if (typeof overrides === 'function') { - return overrides(theme) as StaticStyleRules; - } if (typeof overrides === 'object') { return Object.fromEntries( Object.entries(overrides).map(([className, style]) => { @@ -104,9 +122,16 @@ export function transformV5ComponentThemesToV4( continue; } if ('styleOverrides' in component) { - overrides[name] = extractV5StateOverrides( - adaptV5Override(theme, component.styleOverrides as V5Override), - ); + if (name === 'MuiCssBaseline') { + overrides[name] = adaptV5CssBaselineOverride( + theme, + component.styleOverrides as ComponentsOverrides['MuiCssBaseline'], + ); + } else { + overrides[name] = extractV5StateOverrides( + adaptV5Override(theme, component.styleOverrides as V5Override), + ); + } } if ('defaultProps' in component) { props[name] = component.defaultProps; diff --git a/packages/theme/src/v5/defaultComponentThemes.ts b/packages/theme/src/v5/defaultComponentThemes.ts index 9b4a7fde6b..eec52e1c8b 100644 --- a/packages/theme/src/v5/defaultComponentThemes.ts +++ b/packages/theme/src/v5/defaultComponentThemes.ts @@ -24,20 +24,18 @@ import { darken, lighten, ThemeOptions } from '@mui/material/styles'; export const defaultComponentThemes: ThemeOptions['components'] = { MuiCssBaseline: { styleOverrides: theme => ({ - '@global': { - html: { - height: '100%', - fontFamily: theme.typography.fontFamily, - }, - body: { - height: '100%', - fontFamily: theme.typography.fontFamily, - 'overscroll-behavior-y': 'none', - }, - a: { - color: 'inherit', - textDecoration: 'none', - }, + html: { + height: '100%', + fontFamily: theme.typography.fontFamily, + }, + body: { + height: '100%', + fontFamily: theme.typography.fontFamily, + overscrollBehaviorY: 'none', + }, + a: { + color: 'inherit', + textDecoration: 'none', }, }), }, From 43c55754919407a6d700a9133ff6eb8db50858c2 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sun, 1 Jan 2023 18:13:16 +0100 Subject: [PATCH 59/83] theme: separated css classes and detect css baseline in unified theme provider Signed-off-by: Patrik Oldsberg --- .../src/unified/UnifiedThemeProvider.tsx | 51 ++++++++++++++----- 1 file changed, 39 insertions(+), 12 deletions(-) diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index f2cc2d573f..75fcc3c6ae 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -16,6 +16,7 @@ import React, { ReactNode } from 'react'; import { + StylesProvider as Mui4StylesProvider, Theme as Mui4Theme, ThemeProvider as Mui4Provider, } from '@material-ui/core/styles'; @@ -24,9 +25,21 @@ import { Theme as Mui5Theme, ThemeProvider as Mui5Provider, } from '@mui/material/styles'; -import CssBaseline from '@mui/material/CssBaseline'; +import { + StylesProvider as Mui5StylesProvider, + createGenerateClassName, +} from '@mui/styles'; +import Mui4CssBaseline from '@material-ui/core/CssBaseline'; +import Mui5CssBaseline from '@mui/material/CssBaseline'; import { UnifiedTheme } from './types'; +const generateV4ClassName = createGenerateClassName({ + seed: 'm4', +}); +const generateV5ClassName = createGenerateClassName({ + seed: 'm5', +}); + /** * Props for {@link UnifiedThemeProvider}. * @@ -46,28 +59,42 @@ export interface UnifiedThemeProviderProps { export function UnifiedThemeProvider( props: UnifiedThemeProviderProps, ): JSX.Element { - const { children, theme, noCssBaseline } = props; + const { children, theme, noCssBaseline = false } = props; - let result = noCssBaseline ? ( - <>{children} - ) : ( + const v4Theme = theme.getTheme('v4'); + const v5Theme = theme.getTheme('v5'); + + let cssBaseline: JSX.Element | undefined = undefined; + if (!noCssBaseline) { + if (v5Theme) { + cssBaseline = ; + } else if (v4Theme) { + cssBaseline = ; + } + } + + let result = ( <> - + {cssBaseline} {children} ); - const v4Theme = theme.getTheme('v4'); if (v4Theme) { - result = {result}; + result = ( + + {result} + + ); } - const v5Theme = theme.getTheme('v5'); if (v5Theme) { result = ( - - {result} - + + + {result} + + ); } From 033754c242cd634ec52760e491b05c3f6981b06b Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sun, 1 Jan 2023 18:31:02 +0100 Subject: [PATCH 60/83] theme: explicit background paper color Signed-off-by: Patrik Oldsberg --- packages/theme/src/base/palettes.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/theme/src/base/palettes.ts b/packages/theme/src/base/palettes.ts index f049237f60..c230ce94c0 100644 --- a/packages/theme/src/base/palettes.ts +++ b/packages/theme/src/base/palettes.ts @@ -25,6 +25,7 @@ export const palettes = { mode: 'light' as const, background: { default: '#F8F8F8', + paper: '#FAFAFA', }, status: { ok: '#1DB954', @@ -94,6 +95,7 @@ export const palettes = { mode: 'dark' as const, background: { default: '#333333', + paper: '#424242', }, status: { ok: '#71CF88', From 3780167d8e81d37a42b624ba331f060d100dc62f Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sun, 1 Jan 2023 19:16:50 +0100 Subject: [PATCH 61/83] graphiql: migrate to mui 5 Signed-off-by: Patrik Oldsberg --- plugins/graphiql/package.json | 7 ++++--- .../GraphiQLBrowser/GraphiQLBrowser.tsx | 15 ++++++++++----- .../src/components/GraphiQLPage/GraphiQLPage.tsx | 2 +- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/plugins/graphiql/package.json b/plugins/graphiql/package.json index d5dae8c2ec..6cc65e8e80 100644 --- a/plugins/graphiql/package.json +++ b/plugins/graphiql/package.json @@ -35,9 +35,10 @@ "@backstage/core-components": "workspace:^", "@backstage/core-plugin-api": "workspace:^", "@backstage/theme": "workspace:^", - "@material-ui/core": "^4.12.2", - "@material-ui/icons": "^4.9.1", - "@material-ui/lab": "4.0.0-alpha.61", + "@mui/icons-material": "^5.11.0", + "@mui/lab": "5.0.0-alpha.114", + "@mui/material": "^5.11.2", + "@mui/styles": "^5.11.2", "graphiql": "^1.5.12", "graphql": "^16.0.0", "graphql-ws": "^5.4.1", diff --git a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx index dd38f513be..058801dabf 100644 --- a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx +++ b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx @@ -15,18 +15,18 @@ */ import React, { useState, Suspense } from 'react'; -import { Tabs, Tab, makeStyles, Typography, Divider } from '@material-ui/core'; +import { Tabs, Tab, Typography, Divider } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import 'graphiql/graphiql.css'; import { StorageBucket } from '../../lib/storage'; import { GraphQLEndpoint } from '../../lib/api'; -import { BackstageTheme } from '@backstage/theme'; import { Progress } from '@backstage/core-components'; const GraphiQL = React.lazy(() => import('graphiql').then(m => ({ default: m.GraphiQL })), ); -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ root: { height: '100%', display: 'flex', @@ -69,10 +69,15 @@ export const GraphiQLBrowser = (props: GraphiQLBrowserProps) => { classes={{ root: classes.tabs }} value={tabIndex} onChange={(_, value) => setTabIndex(value)} - indicatorColor="primary" + textColor="inherit" > {endpoints.map(({ title }, index) => ( - + ))} diff --git a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx index 0b4399948a..b075e0d478 100644 --- a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx +++ b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx @@ -19,7 +19,7 @@ import useAsync from 'react-use/lib/useAsync'; import 'graphiql/graphiql.css'; import { graphQlBrowseApiRef } from '../../lib/api'; import { GraphiQLBrowser } from '../GraphiQLBrowser'; -import { Typography } from '@material-ui/core'; +import { Typography } from '@mui/material'; import { Content, Header, From 623ed7527b9b503ddcdd3ecd0f792da6c019e057 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sun, 1 Jan 2023 19:29:43 +0100 Subject: [PATCH 62/83] theme: update API report Signed-off-by: Patrik Oldsberg --- packages/theme/api-report.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index e8f7ef30f8..763cc48e41 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -221,6 +221,7 @@ export const palettes: { mode: 'light'; background: { default: string; + paper: string; }; status: { ok: string; @@ -289,6 +290,7 @@ export const palettes: { mode: 'dark'; background: { default: string; + paper: string; }; status: { ok: string; From 1268ec01d9bcd32b14d19d4d1a8d59a16ae3ff6b Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sun, 1 Jan 2023 22:00:13 +0100 Subject: [PATCH 63/83] theme: remove nonce field from react type workaround to unbreak material-table Signed-off-by: Patrik Oldsberg --- packages/theme/src/v5/types.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/theme/src/v5/types.ts b/packages/theme/src/v5/types.ts index 5369cda37b..293383180a 100644 --- a/packages/theme/src/v5/types.ts +++ b/packages/theme/src/v5/types.ts @@ -43,7 +43,6 @@ declare global { interface DOMAttributes { onResize?: (event: Event) => void; onResizeCapture?: (event: Event) => void; - nonce?: string | undefined; } } } From c545211e917aba1a1cfafaaa1fcac7762dd997eb Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sun, 1 Jan 2023 22:01:11 +0100 Subject: [PATCH 64/83] yarn.lock: dedup jss Signed-off-by: Patrik Oldsberg --- packages/theme/package.json | 4 - yarn.lock | 294 ++++++++++-------------------------- 2 files changed, 77 insertions(+), 221 deletions(-) diff --git a/packages/theme/package.json b/packages/theme/package.json index dd741581a4..b47c5e256d 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -38,10 +38,6 @@ "@mui/material": "^5.11.2", "@mui/styles": "^5.11.2" }, - "peerDependencies": { - "@types/react": "^16.13.1 || ^17.0.0", - "react": "^16.13.1 || ^17.0.0" - }, "peerDependencies": { "react": "^16.13.1 || ^17.0.0", "react-dom": "^16.13.1 || ^17.0.0" diff --git a/yarn.lock b/yarn.lock index 784c38bb73..9e1a19ab4f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1,3 +1,6 @@ +# This file is generated by running "yarn install" inside your project. +# Manual changes might be lost - proceed with caution! + __metadata: version: 6 cacheKey: 8 @@ -3469,15 +3472,6 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": - version: 7.20.7 - resolution: "@babel/runtime@npm:7.20.7" - dependencies: - regenerator-runtime: ^0.13.11 - checksum: 4629ce5c46f06cca9cfb9b7fc00d48003335a809888e2b91ec2069a2dcfbfef738480cff32ba81e0b7c290f8918e5c22ddcf2b710001464ee84ba62c7e32a3a3 - languageName: node - linkType: hard - "@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": version: 7.21.0 resolution: "@babel/runtime@npm:7.21.0" @@ -3487,12 +3481,12 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": - version: 7.21.0 - resolution: "@babel/runtime@npm:7.21.0" +"@babel/runtime@npm:^7.20.6": + version: 7.20.7 + resolution: "@babel/runtime@npm:7.20.7" dependencies: regenerator-runtime: ^0.13.11 - checksum: 7b33e25bfa9e0e1b9e8828bb61b2d32bdd46b41b07ba7cb43319ad08efc6fda8eb89445193e67d6541814627df0ca59122c0ea795e412b99c5183a0540d338ab + checksum: 4629ce5c46f06cca9cfb9b7fc00d48003335a809888e2b91ec2069a2dcfbfef738480cff32ba81e0b7c290f8918e5c22ddcf2b710001464ee84ba62c7e32a3a3 languageName: node linkType: hard @@ -6975,9 +6969,10 @@ __metadata: "@backstage/dev-utils": "workspace:^" "@backstage/test-utils": "workspace:^" "@backstage/theme": "workspace:^" - "@material-ui/core": ^4.12.2 - "@material-ui/icons": ^4.9.1 - "@material-ui/lab": 4.0.0-alpha.61 + "@mui/icons-material": ^5.11.0 + "@mui/lab": 5.0.0-alpha.114 + "@mui/material": ^5.11.2 + "@mui/styles": ^5.11.2 "@testing-library/dom": ^8.0.0 "@testing-library/jest-dom": ^5.10.1 "@testing-library/react": ^12.1.3 @@ -9647,9 +9642,10 @@ __metadata: "@material-ui/core": ^4.12.2 "@mui/material": ^5.11.2 "@mui/styles": ^5.11.2 - peerDependencies: "@types/react": ^16.13.1 || ^17.0.0 + peerDependencies: react: ^16.13.1 || ^17.0.0 + react-dom: ^16.13.1 || ^17.0.0 languageName: unknown linkType: soft @@ -10224,16 +10220,7 @@ __metadata: languageName: node linkType: hard -"@emotion/is-prop-valid@npm:^1.1.0": - version: 1.1.2 - resolution: "@emotion/is-prop-valid@npm:1.1.2" - dependencies: - "@emotion/memoize": ^0.7.4 - checksum: 58b1f2d429a589f8f5bc2c33a8732cbb7bbcb17131a103511ef9a94ac754d7eeb53d627f947da480cd977f9d419fd92e244991680292f3287204159652745707 - languageName: node - linkType: hard - -"@emotion/is-prop-valid@npm:^1.2.0": +"@emotion/is-prop-valid@npm:^1.1.0, @emotion/is-prop-valid@npm:^1.2.0": version: 1.2.0 resolution: "@emotion/is-prop-valid@npm:1.2.0" dependencies: @@ -10242,13 +10229,6 @@ __metadata: languageName: node linkType: hard -"@emotion/memoize@npm:^0.7.4": - version: 0.7.5 - resolution: "@emotion/memoize@npm:0.7.5" - checksum: 83da8d4a7649a92c72f960817692bc6be13cc13e107b9f7e878d63766525ed4402881bfeb3cda61145c050281e7e260f114a0a2870515527346f2ef896b915b3 - languageName: node - linkType: hard - "@emotion/memoize@npm:^0.8.0": version: 0.8.0 resolution: "@emotion/memoize@npm:0.8.0" @@ -10387,13 +10367,6 @@ __metadata: languageName: node linkType: hard -"@esbuild/android-arm64@npm:0.16.14": - version: 0.16.14 - resolution: "@esbuild/android-arm64@npm:0.16.14" - conditions: os=android & cpu=arm64 - languageName: node - linkType: hard - "@esbuild/android-arm64@npm:0.16.17": version: 0.16.17 resolution: "@esbuild/android-arm64@npm:0.16.17" @@ -12944,6 +12917,52 @@ __metadata: languageName: node linkType: hard +"@mui/icons-material@npm:^5.11.0": + version: 5.11.0 + resolution: "@mui/icons-material@npm:5.11.0" + dependencies: + "@babel/runtime": ^7.20.6 + peerDependencies: + "@mui/material": ^5.0.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 764c1185b3432f0228f3c5217b0e218b10f106fa96d305dfc62c0ef5afd2a7a087b0d664fd0a8171282e195c18d3ee073d5f037901a2bed1a1519a70fbb0501c + languageName: node + linkType: hard + +"@mui/lab@npm:5.0.0-alpha.114": + version: 5.0.0-alpha.114 + resolution: "@mui/lab@npm:5.0.0-alpha.114" + dependencies: + "@babel/runtime": ^7.20.7 + "@mui/base": 5.0.0-alpha.112 + "@mui/system": ^5.11.2 + "@mui/types": ^7.2.3 + "@mui/utils": ^5.11.2 + clsx: ^1.2.1 + prop-types: ^15.8.1 + react-is: ^18.2.0 + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@mui/material": ^5.0.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: 0b6441e7f7a69e2a6910f044ef2a222462a219f61e3a05c023484508e7f14a5fe6baeddf08b37bceab357c7cb0eed90324ac42ecd8e59a6eb6e1c801ea01504a + languageName: node + linkType: hard + "@mui/material@npm:^5.11.2": version: 5.11.2 resolution: "@mui/material@npm:5.11.2" @@ -16986,16 +17005,7 @@ __metadata: languageName: node linkType: hard -"@types/react-transition-group@npm:^4.2.0": - version: 4.2.4 - resolution: "@types/react-transition-group@npm:4.2.4" - dependencies: - "@types/react": "*" - checksum: a8abb3ad3c6e0575c630b591503a78ae3a94e21d1285905a49c36168e5d3de68b0886e2c6d75b751e30f2dc6e4245351cde30e4b3ff2649aec345f2088961e2c - languageName: node - linkType: hard - -"@types/react-transition-group@npm:^4.4.5": +"@types/react-transition-group@npm:^4.2.0, @types/react-transition-group@npm:^4.4.5": version: 4.4.5 resolution: "@types/react-transition-group@npm:4.4.5" dependencies: @@ -20523,14 +20533,7 @@ __metadata: languageName: node linkType: hard -"clsx@npm:^1.0.2, clsx@npm:^1.0.4, clsx@npm:^1.1.1": - version: 1.2.1 - resolution: "clsx@npm:1.2.1" - checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12 - languageName: node - linkType: hard - -"clsx@npm:^1.2.1": +"clsx@npm:^1.0.2, clsx@npm:^1.0.4, clsx@npm:^1.1.1, clsx@npm:^1.2.1": version: 1.2.1 resolution: "clsx@npm:1.2.1" checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12 @@ -21113,22 +21116,13 @@ __metadata: languageName: node linkType: hard -"convert-source-map@npm:^1.5.0": +"convert-source-map@npm:^1.5.0, convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0": version: 1.9.0 resolution: "convert-source-map@npm:1.9.0" checksum: dc55a1f28ddd0e9485ef13565f8f756b342f9a46c4ae18b843fe3c30c675d058d6a4823eff86d472f187b176f0adf51ea7b69ea38be34be4a63cbbf91b0593c8 languageName: node linkType: hard -"convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0": - version: 1.7.0 - resolution: "convert-source-map@npm:1.7.0" - dependencies: - safe-buffer: ~5.1.1 - checksum: bcd2e3ea7d37f96b85a6e362c8a89402ccc73757256e3ee53aa2c22fe915adb854c66b1f81111be815a3a6a6ce3c58e8001858e883c9d5b4fe08a853fa865967 - languageName: node - linkType: hard - "convert-source-map@npm:^2.0.0": version: 2.0.0 resolution: "convert-source-map@npm:2.0.0" @@ -21745,14 +21739,7 @@ __metadata: languageName: node linkType: hard -"csstype@npm:^3.0.2, csstype@npm:^3.0.6": - version: 3.0.7 - resolution: "csstype@npm:3.0.7" - checksum: 2f30c993be570c6d0de334b979a718370ee9bca9569c90340f13e05e542146c55b22e87372b858c061f9f8ded494da7a4715957882f9356cf9993ba11ab6f09c - languageName: node - linkType: hard - -"csstype@npm:^3.1.1": +"csstype@npm:^3.0.2, csstype@npm:^3.0.6, csstype@npm:^3.1.1": version: 3.1.1 resolution: "csstype@npm:3.1.1" checksum: 1f7b4f5fdd955b7444b18ebdddf3f5c699159f13e9cf8ac9027ae4a60ae226aef9bbb14a6e12ca7dba3358b007cee6354b116e720262867c398de6c955ea451d @@ -26387,16 +26374,7 @@ __metadata: languageName: node linkType: hard -"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.2.1, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2": - version: 3.3.2 - resolution: "hoist-non-react-statics@npm:3.3.2" - dependencies: - react-is: ^16.7.0 - checksum: b1538270429b13901ee586aa44f4cc3ecd8831c061d06cb8322e50ea17b3f5ce4d0e2e66394761e6c8e152cd8c34fb3b4b690116c6ce2bd45b18c746516cb9e8 - languageName: node - linkType: hard - -"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2": +"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.2.1, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2": version: 3.3.2 resolution: "hoist-non-react-statics@npm:3.3.2" dependencies: @@ -26935,15 +26913,6 @@ __metadata: languageName: node linkType: hard -"indefinite-observable@npm:^2.0.1": - version: 2.0.1 - resolution: "indefinite-observable@npm:2.0.1" - dependencies: - symbol-observable: 1.2.0 - checksum: b4305c999b7596901f8798e569b8faa030361dfb77f8b720e229558a29f544826f7e8987c55cc2a84c37ff2723594a965b96a40a6c71daae92b918f3eb393077 - languageName: node - linkType: hard - "indent-string@npm:^4.0.0": version: 4.0.0 resolution: "indent-string@npm:4.0.0" @@ -29276,18 +29245,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-camel-case@npm:^10.5.1": - version: 10.6.0 - resolution: "jss-plugin-camel-case@npm:10.6.0" - dependencies: - "@babel/runtime": ^7.3.1 - hyphenate-style-name: ^1.0.3 - jss: 10.6.0 - checksum: 75c23826deef63c3603cfb47331d1eaf9feeafd097bd115a076f2ee9fb696855d3f18b3f41455a046120fddf0ea11985259c1b8b8a37b3556f4de1a1c83affd5 - languageName: node - linkType: hard - -"jss-plugin-camel-case@npm:^10.9.2": +"jss-plugin-camel-case@npm:^10.5.1, jss-plugin-camel-case@npm:^10.9.2": version: 10.9.2 resolution: "jss-plugin-camel-case@npm:10.9.2" dependencies: @@ -29298,17 +29256,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-default-unit@npm:^10.5.1": - version: 10.6.0 - resolution: "jss-plugin-default-unit@npm:10.6.0" - dependencies: - "@babel/runtime": ^7.3.1 - jss: 10.6.0 - checksum: 7ae36fadf4f206a16e49c40806ef92ba1f0e60395488ab8ad4df96796b408013b38ea5ed975155ecd7833a42a96c8d5cb1e90aef011279816633e60f807ec330 - languageName: node - linkType: hard - -"jss-plugin-default-unit@npm:^10.9.2": +"jss-plugin-default-unit@npm:^10.5.1, jss-plugin-default-unit@npm:^10.9.2": version: 10.9.2 resolution: "jss-plugin-default-unit@npm:10.9.2" dependencies: @@ -29318,17 +29266,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-global@npm:^10.5.1": - version: 10.6.0 - resolution: "jss-plugin-global@npm:10.6.0" - dependencies: - "@babel/runtime": ^7.3.1 - jss: 10.6.0 - checksum: 7aab58408c77071c571dd2c2132edad8d40b683513a8de534f0ec7f63926fd9d9fcf6bdda82103eb541452a723b992f061720f8e5cf2014acb7f6bbbde111f56 - languageName: node - linkType: hard - -"jss-plugin-global@npm:^10.9.2": +"jss-plugin-global@npm:^10.5.1, jss-plugin-global@npm:^10.9.2": version: 10.9.2 resolution: "jss-plugin-global@npm:10.9.2" dependencies: @@ -29338,18 +29276,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-nested@npm:^10.5.1": - version: 10.6.0 - resolution: "jss-plugin-nested@npm:10.6.0" - dependencies: - "@babel/runtime": ^7.3.1 - jss: 10.6.0 - tiny-warning: ^1.0.2 - checksum: 38095127e8b5ddb0a33ccaf61a4d89dc1b0f78e6d06d079a47a14bca4aed4e885f1957d83f11c5da08b4249b2c629e8bc62b2996f1674ca1302575a7b2b11171 - languageName: node - linkType: hard - -"jss-plugin-nested@npm:^10.9.2": +"jss-plugin-nested@npm:^10.5.1, jss-plugin-nested@npm:^10.9.2": version: 10.9.2 resolution: "jss-plugin-nested@npm:10.9.2" dependencies: @@ -29360,17 +29287,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-props-sort@npm:^10.5.1": - version: 10.6.0 - resolution: "jss-plugin-props-sort@npm:10.6.0" - dependencies: - "@babel/runtime": ^7.3.1 - jss: 10.6.0 - checksum: 2917ff301e667f75efa15df865a860a50d4319d415d1169c213e66b464edc2b37b6f428be2d974ccdde7c8d61c50123f18e788143a96eacc2a1c42ad250ae375 - languageName: node - linkType: hard - -"jss-plugin-props-sort@npm:^10.9.2": +"jss-plugin-props-sort@npm:^10.5.1, jss-plugin-props-sort@npm:^10.9.2": version: 10.9.2 resolution: "jss-plugin-props-sort@npm:10.9.2" dependencies: @@ -29380,18 +29297,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-rule-value-function@npm:^10.5.1": - version: 10.6.0 - resolution: "jss-plugin-rule-value-function@npm:10.6.0" - dependencies: - "@babel/runtime": ^7.3.1 - jss: 10.6.0 - tiny-warning: ^1.0.2 - checksum: 709e1ce0afdc39a52cb78e371fef626f933e99992790b15771d85056176bdf69365d62cfed6ce95434752cc1a1e7e05a6f2548e4cd5999808d50a28174315be3 - languageName: node - linkType: hard - -"jss-plugin-rule-value-function@npm:^10.9.2": +"jss-plugin-rule-value-function@npm:^10.5.1, jss-plugin-rule-value-function@npm:^10.9.2": version: 10.9.2 resolution: "jss-plugin-rule-value-function@npm:10.9.2" dependencies: @@ -29402,18 +29308,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-vendor-prefixer@npm:^10.5.1": - version: 10.6.0 - resolution: "jss-plugin-vendor-prefixer@npm:10.6.0" - dependencies: - "@babel/runtime": ^7.3.1 - css-vendor: ^2.0.8 - jss: 10.6.0 - checksum: 9db048022ee2fb79a223a9f1be5976e131715057e3c0200cfcead9b9f8625023942534afa261e3c967cee6ad716bfd7d4a2f356556178f60f4eddcf83bcd8856 - languageName: node - linkType: hard - -"jss-plugin-vendor-prefixer@npm:^10.9.2": +"jss-plugin-vendor-prefixer@npm:^10.5.1, jss-plugin-vendor-prefixer@npm:^10.9.2": version: 10.9.2 resolution: "jss-plugin-vendor-prefixer@npm:10.9.2" dependencies: @@ -29444,20 +29339,7 @@ __metadata: languageName: node linkType: hard -"jss@npm:10.6.0": - version: 10.6.0 - resolution: "jss@npm:10.6.0" - dependencies: - "@babel/runtime": ^7.3.1 - csstype: ^3.0.2 - indefinite-observable: ^2.0.1 - is-in-browser: ^1.1.3 - tiny-warning: ^1.0.2 - checksum: 529edd871ddf059beef55ee0f974ad8436fbcf050d6538e6d2d7edab53ce2c09983d2f863e42a1473dd0e42a0447e9912bce6706bb0e539226d92cdaad128d46 - languageName: node - linkType: hard - -"jss@npm:10.9.2, jss@npm:^10.5.1, jss@npm:^10.9.2, jss@npm:~10.9.0": +"jss@npm:10.9.2": version: 10.9.2 resolution: "jss@npm:10.9.2" dependencies: @@ -29465,11 +29347,11 @@ __metadata: csstype: ^3.0.2 is-in-browser: ^1.1.3 tiny-warning: ^1.0.2 - checksum: ecf71971df42729668c283e432e841349b7fdbe52e520f7704991cf4a738fd2451ec0feeb25c12cdc5addf7facecf838e74e62936fd461fb4c99f23d54a4792d + checksum: 7ae5cd2f8602bf197ec90251d774b9f10d55eb2db0854ac78dc7fb6983828c202e8eb0d5c8c59c73b2f64718ebd33d6063afa799d625a995986a22dc1cc27230 languageName: node linkType: hard -"jss@npm:^10.5.1, jss@npm:~10.10.0": +"jss@npm:^10.5.1, jss@npm:^10.9.2, jss@npm:~10.10.0": version: 10.10.0 resolution: "jss@npm:10.10.0" dependencies: @@ -35743,22 +35625,7 @@ __metadata: languageName: node linkType: hard -"react-transition-group@npm:^4.0.0, react-transition-group@npm:^4.4.0": - version: 4.4.1 - resolution: "react-transition-group@npm:4.4.1" - dependencies: - "@babel/runtime": ^7.5.5 - dom-helpers: ^5.0.1 - loose-envify: ^1.4.0 - prop-types: ^15.6.2 - peerDependencies: - react: ">=16.6.0" - react-dom: ">=16.6.0" - checksum: 0bcd8af483709832e318dcef84c26ebddeb866bf4f58010286367ef0c1e7c5106e00cfc65688b9102414cb3d572c63909c2eb7ea972b4420fc70a78c10b6e8ad - languageName: node - linkType: hard - -"react-transition-group@npm:^4.4.5": +"react-transition-group@npm:^4.0.0, react-transition-group@npm:^4.4.0, react-transition-group@npm:^4.4.5": version: 4.4.5 resolution: "react-transition-group@npm:4.4.5" dependencies: @@ -38571,20 +38438,13 @@ __metadata: languageName: node linkType: hard -"stylis@npm:4.1.3": +"stylis@npm:4.1.3, stylis@npm:^4.0.6": version: 4.1.3 resolution: "stylis@npm:4.1.3" checksum: d04dbffcb9bf2c5ca8d8dc09534203c75df3bf711d33973ea22038a99cc475412a350b661ebd99cbc01daa50d7eedcf0d130d121800eb7318759a197023442a6 languageName: node linkType: hard -"stylis@npm:^4.0.6": - version: 4.0.7 - resolution: "stylis@npm:4.0.7" - checksum: 4f9fdc4b131b54cdc5988aaf23e796fcf77927c9d2f3147f6b23b8f3a9568eb38ce91b338b9d1b50a50391da32969c34ff68ff971c453fc3a5af89941c60ab06 - languageName: node - linkType: hard - "subscriptions-transport-ws@npm:^0.11.0": version: 0.11.0 resolution: "subscriptions-transport-ws@npm:0.11.0" From d2d90b1d30c1227a8f8cbfd97fe281e60ef30cfc Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 7 Jan 2023 15:56:01 +0100 Subject: [PATCH 65/83] theme: make MUI v4 an optional peer dep Signed-off-by: Patrik Oldsberg --- packages/theme/package.json | 8 +++++++- yarn.lock | 12 +++++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/theme/package.json b/packages/theme/package.json index b47c5e256d..3d9e6fa132 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -34,14 +34,20 @@ "dependencies": { "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", - "@material-ui/core": "^4.12.2", "@mui/material": "^5.11.2", "@mui/styles": "^5.11.2" }, "peerDependencies": { + "@material-ui/core": "^4.12.2", + "@types/react": "^16.13.1 || ^17.0.0", "react": "^16.13.1 || ^17.0.0", "react-dom": "^16.13.1 || ^17.0.0" }, + "peerDependenciesMeta": { + "@material-ui/core": { + "optional": true + } + }, "devDependencies": { "@backstage/cli": "workspace:^", "@types/react": "^16.13.1 || ^17.0.0" diff --git a/yarn.lock b/yarn.lock index 9e1a19ab4f..2c0ecbd030 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9639,13 +9639,23 @@ __metadata: "@backstage/cli": "workspace:^" "@emotion/react": ^11.10.5 "@emotion/styled": ^11.10.5 - "@material-ui/core": ^4.12.2 "@mui/material": ^5.11.2 "@mui/styles": ^5.11.2 +<<<<<<< HEAD +======= + peerDependencies: + "@material-ui/core": ^4.12.2 +>>>>>>> f1f6a256b36 (theme: make MUI v4 an optional peer dep) "@types/react": ^16.13.1 || ^17.0.0 peerDependencies: react: ^16.13.1 || ^17.0.0 +<<<<<<< HEAD react-dom: ^16.13.1 || ^17.0.0 +======= + peerDependenciesMeta: + "@material-ui/core": + optional: true +>>>>>>> f1f6a256b36 (theme: make MUI v4 an optional peer dep) languageName: unknown linkType: soft From 139207fe213645c329d2b8a6294f542fcb638bd7 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 7 Jan 2023 15:57:55 +0100 Subject: [PATCH 66/83] theme: explicit type imports from MUI v4 Signed-off-by: Patrik Oldsberg --- packages/theme/src/unified/UnifiedTheme.tsx | 6 +++--- .../src/unified/UnifiedThemeProvider.tsx | 2 +- packages/theme/src/unified/overrides.ts | 4 ++-- packages/theme/src/v4/baseTheme.ts | 7 ++++++- packages/theme/src/v4/types.ts | 21 +++++++++++-------- 5 files changed, 24 insertions(+), 16 deletions(-) diff --git a/packages/theme/src/unified/UnifiedTheme.tsx b/packages/theme/src/unified/UnifiedTheme.tsx index dbb50c979e..bb31d88016 100644 --- a/packages/theme/src/unified/UnifiedTheme.tsx +++ b/packages/theme/src/unified/UnifiedTheme.tsx @@ -14,12 +14,12 @@ * limitations under the License. */ -import { +import { createTheme as createV4Theme } from '@material-ui/core/styles'; +import type { Theme as Mui4Theme, - createTheme as createV4Theme, ThemeOptions as ThemeOptionsV4, } from '@material-ui/core/styles'; -import { PaletteOptions as PaletteOptionsV4 } from '@material-ui/core/styles/createPalette'; +import type { PaletteOptions as PaletteOptionsV4 } from '@material-ui/core/styles/createPalette'; import { PaletteOptions as PaletteOptionsV5 } from '@mui/material/styles/createPalette'; import { adaptV4Theme, diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 75fcc3c6ae..60f28bc353 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -17,9 +17,9 @@ import React, { ReactNode } from 'react'; import { StylesProvider as Mui4StylesProvider, - Theme as Mui4Theme, ThemeProvider as Mui4Provider, } from '@material-ui/core/styles'; +import type { Theme as Mui4Theme } from '@material-ui/core/styles'; import { StyledEngineProvider, Theme as Mui5Theme, diff --git a/packages/theme/src/unified/overrides.ts b/packages/theme/src/unified/overrides.ts index db1fb54c87..7417fccedc 100644 --- a/packages/theme/src/unified/overrides.ts +++ b/packages/theme/src/unified/overrides.ts @@ -14,8 +14,8 @@ * limitations under the License. */ -import { Overrides } from '@material-ui/core/styles/overrides'; -import { ComponentsProps } from '@material-ui/core/styles/props'; +import type { Overrides } from '@material-ui/core/styles/overrides'; +import type { ComponentsProps } from '@material-ui/core/styles/props'; import { ComponentsOverrides, Theme, ThemeOptions } from '@mui/material/styles'; import { CSSProperties } from 'react'; diff --git a/packages/theme/src/v4/baseTheme.ts b/packages/theme/src/v4/baseTheme.ts index 411bcdf9a8..8143183ec0 100644 --- a/packages/theme/src/v4/baseTheme.ts +++ b/packages/theme/src/v4/baseTheme.ts @@ -16,7 +16,12 @@ import { Theme as Mui5Theme } from '@mui/material/styles'; import { createTheme as createMuiTheme } from '@material-ui/core/styles'; -import { GridProps, SwitchProps, Theme, ThemeOptions } from '@material-ui/core'; +import type { + GridProps, + SwitchProps, + Theme, + ThemeOptions, +} from '@material-ui/core'; import { Overrides } from '@material-ui/core/styles/overrides'; import { SimpleThemeOptions } from './types'; import { createBaseThemeOptions } from '../base'; diff --git a/packages/theme/src/v4/types.ts b/packages/theme/src/v4/types.ts index 24736e5d88..8bca5b8c3b 100644 --- a/packages/theme/src/v4/types.ts +++ b/packages/theme/src/v4/types.ts @@ -14,10 +14,13 @@ * limitations under the License. */ -import { Theme, ThemeOptions } from '@material-ui/core'; -import { - PaletteOptions, - Palette, +import type { + Theme as MuiTheme, + ThemeOptions as MuiThemeOptions, +} from '@material-ui/core'; +import type { + PaletteOptions as MuiPaletteOptions, + Palette as MuiPalette, } from '@material-ui/core/styles/createPalette'; import { BackstagePaletteAdditions, @@ -32,7 +35,7 @@ import { * @public * @deprecated This type is deprecated, the MUI Palette type is now always extended instead. */ -export type BackstagePalette = Palette & BackstagePaletteAdditions; +export type BackstagePalette = MuiPalette & BackstagePaletteAdditions; /** * The full Backstage palette options. @@ -40,7 +43,7 @@ export type BackstagePalette = Palette & BackstagePaletteAdditions; * @public * @deprecated This type is deprecated, the MUI PaletteOptions type is now always extended instead. */ -export type BackstagePaletteOptions = PaletteOptions & +export type BackstagePaletteOptions = MuiPaletteOptions & BackstagePaletteAdditions; /** @@ -55,7 +58,7 @@ export type BackstagePaletteOptions = PaletteOptions & * {@link BackstageTheme}. * */ -export interface BackstageThemeOptions extends ThemeOptions { +export interface BackstageThemeOptions extends MuiThemeOptions { palette: BackstagePaletteOptions; page: PageTheme; getPageTheme: (selector: PageThemeSelector) => PageTheme; @@ -67,7 +70,7 @@ export interface BackstageThemeOptions extends ThemeOptions { * @public * @deprecated This type is deprecated, the MUI Theme type is now always extended instead. */ -export interface BackstageTheme extends Theme { +export interface BackstageTheme extends MuiTheme { palette: BackstagePalette; page: PageTheme; getPageTheme: (selector: PageThemeSelector) => PageTheme; @@ -81,7 +84,7 @@ export interface BackstageTheme extends Theme { * @deprecated Use {@link BaseThemeOptionsInput} instead. */ export type SimpleThemeOptions = { - palette: PaletteOptions; + palette: MuiPaletteOptions; defaultPageTheme?: string; pageTheme?: Record; fontFamily?: string; From 4ef505886fdeba87e16269a4c6cfa6f0510d0716 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sat, 7 Jan 2023 18:42:24 +0100 Subject: [PATCH 67/83] theme: optional loading of mui 4 runtime Signed-off-by: Patrik Oldsberg --- packages/theme/src/unified/UnifiedTheme.tsx | 18 ++++- .../src/unified/UnifiedThemeProvider.tsx | 23 +++--- packages/theme/src/v4/load.ts | 74 +++++++++++++++++++ 3 files changed, 102 insertions(+), 13 deletions(-) create mode 100644 packages/theme/src/v4/load.ts diff --git a/packages/theme/src/unified/UnifiedTheme.tsx b/packages/theme/src/unified/UnifiedTheme.tsx index bb31d88016..28da80424b 100644 --- a/packages/theme/src/unified/UnifiedTheme.tsx +++ b/packages/theme/src/unified/UnifiedTheme.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { createTheme as createV4Theme } from '@material-ui/core/styles'; import type { Theme as Mui4Theme, ThemeOptions as ThemeOptionsV4, @@ -32,6 +31,7 @@ import { PageTheme } from '../base/types'; import { defaultComponentThemes } from '../v5'; import { createBaseThemeOptions } from '../base/createBaseThemeOptions'; import { UnifiedTheme } from './types'; +import { maybeLoadMui4Styles } from '../v4/load'; export class UnifiedThemeHolder implements UnifiedTheme { #themes = new Map(); @@ -74,9 +74,14 @@ export function createUnifiedTheme(options: UnifiedThemeOptions): UnifiedTheme { const themeOptions = createBaseThemeOptions(options); const components = { ...defaultComponentThemes, ...options.components }; const v5Theme = createV5Theme({ ...themeOptions, components }); - const v4Overrides = transformV5ComponentThemesToV4(v5Theme, components); - const v4Theme = { ...createV4Theme(themeOptions), ...v4Overrides }; + const mui4Styles = maybeLoadMui4Styles(); + if (!mui4Styles) { + return new UnifiedThemeHolder(undefined, v5Theme); + } + + const v4Overrides = transformV5ComponentThemesToV4(v5Theme, components); + const v4Theme = { ...mui4Styles.createTheme(themeOptions), ...v4Overrides }; return new UnifiedThemeHolder(v4Theme, v5Theme); } @@ -89,8 +94,13 @@ export function createUnifiedTheme(options: UnifiedThemeOptions): UnifiedTheme { export function createUnifiedThemeFromV4( options: ThemeOptionsV4, ): UnifiedTheme { - const v4Theme = createV4Theme(options); const v5Theme = adaptV4Theme(options as any); + const mui4Styles = maybeLoadMui4Styles(); + if (!mui4Styles) { + return new UnifiedThemeHolder(undefined, v5Theme); + } + + const v4Theme = mui4Styles.createTheme(options); return new UnifiedThemeHolder(v4Theme, v5Theme); } diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 60f28bc353..d28dfab292 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -15,10 +15,6 @@ */ import React, { ReactNode } from 'react'; -import { - StylesProvider as Mui4StylesProvider, - ThemeProvider as Mui4Provider, -} from '@material-ui/core/styles'; import type { Theme as Mui4Theme } from '@material-ui/core/styles'; import { StyledEngineProvider, @@ -29,9 +25,9 @@ import { StylesProvider as Mui5StylesProvider, createGenerateClassName, } from '@mui/styles'; -import Mui4CssBaseline from '@material-ui/core/CssBaseline'; import Mui5CssBaseline from '@mui/material/CssBaseline'; import { UnifiedTheme } from './types'; +import { maybeLoadMui4CssBaseline, maybeLoadMui4Styles } from '../v4/load'; const generateV4ClassName = createGenerateClassName({ seed: 'm4', @@ -69,7 +65,11 @@ export function UnifiedThemeProvider( if (v5Theme) { cssBaseline = ; } else if (v4Theme) { - cssBaseline = ; + const CssBaseline = maybeLoadMui4CssBaseline(); + if (!CssBaseline) { + throw new Error('Failed to load MUI 4 CssBaseline component'); + } + cssBaseline = ; } } @@ -81,10 +81,15 @@ export function UnifiedThemeProvider( ); if (v4Theme) { + const styles = maybeLoadMui4Styles(); + if (!styles) { + throw new Error('Failed to load MUI 4 styles package'); + } + const { StylesProvider, ThemeProvider } = styles; result = ( - - {result} - + + {result} + ); } diff --git a/packages/theme/src/v4/load.ts b/packages/theme/src/v4/load.ts new file mode 100644 index 0000000000..899aa8af93 --- /dev/null +++ b/packages/theme/src/v4/load.ts @@ -0,0 +1,74 @@ +/* + * Copyright 2023 The Backstage Authors + * + * 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. + */ + +/** + * Loads MUI v4 styles if it is available. + * + * This should always be used to access MUI v4 at runtime in this + * package, to ensure that it's not brought into the bundle unnecessarily. + * + * @internal + */ +export function maybeLoadMui4Styles(): + | typeof import('@material-ui/core/styles') + | undefined { + if ( + __webpack_modules__[ + require.resolveWeak('@material-ui/core/styles') as number + ] + ) { + return __webpack_modules__[ + require.resolveWeak('@material-ui/core/styles') as number + ] as typeof import('@material-ui/core/styles'); + } + if (__webpack_modules__[require.resolveWeak('@material-ui/core') as number]) { + return __webpack_modules__[ + require.resolveWeak('@material-ui/core') as number + ] as typeof import('@material-ui/core'); + } + + return undefined; +} + +/** + * Loads the MUI v4 CssBaseline component if it is available. + * + * This should always be used to access MUI v4 at runtime in this + * package, to ensure that it's not brought into the bundle unnecessarily. + * + * @internal + */ +export function maybeLoadMui4CssBaseline(): + | typeof import('@material-ui/core/CssBaseline')['default'] + | undefined { + if ( + __webpack_modules__[ + require.resolveWeak('@material-ui/core/CssBaseline') as number + ] + ) { + const m = __webpack_modules__[ + require.resolveWeak('@material-ui/core/CssBaseline') as number + ] as typeof import('@material-ui/core/CssBaseline'); + return m.default; + } + if (__webpack_modules__[require.resolveWeak('@material-ui/core') as number]) { + const m = __webpack_modules__[ + require.resolveWeak('@material-ui/core') as number + ] as typeof import('@material-ui/core'); + return m.CssBaseline; + } + return undefined; +} From 1d75719a99d0eae4af05ad42d2efa822eaf12d41 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Mon, 9 Jan 2023 10:51:41 +0100 Subject: [PATCH 68/83] theme: fix two lingering pxpx Signed-off-by: Patrik Oldsberg --- packages/theme/src/v5/defaultComponentThemes.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/theme/src/v5/defaultComponentThemes.ts b/packages/theme/src/v5/defaultComponentThemes.ts index eec52e1c8b..bd29ad38c5 100644 --- a/packages/theme/src/v5/defaultComponentThemes.ts +++ b/packages/theme/src/v5/defaultComponentThemes.ts @@ -187,12 +187,12 @@ export const defaultComponentThemes: ThemeOptions['components'] = { color: theme.palette.grey[500], width: theme.spacing(3), height: theme.spacing(3), - margin: `0 ${theme.spacing(0.75)}px 0 -${theme.spacing(0.75)}`, + margin: `0 ${theme.spacing(0.75)} 0 -${theme.spacing(0.75)}`, }), deleteIconSmall: ({ theme }) => ({ width: theme.spacing(2), height: theme.spacing(2), - margin: `0 ${theme.spacing(0.5)}px 0 -${theme.spacing(0.5)}`, + margin: `0 ${theme.spacing(0.5)} 0 -${theme.spacing(0.5)}`, }), }, }, From d65e6a542316819ed99d733fed253c4438792533 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Wed, 26 Apr 2023 17:41:55 +0200 Subject: [PATCH 69/83] yarn lock fixes Signed-off-by: Patrik Oldsberg --- yarn.lock | 21 +++------------------ 1 file changed, 3 insertions(+), 18 deletions(-) diff --git a/yarn.lock b/yarn.lock index 2c0ecbd030..fd6d623b4f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3472,7 +3472,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": version: 7.21.0 resolution: "@babel/runtime@npm:7.21.0" dependencies: @@ -3481,15 +3481,6 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.20.6": - version: 7.20.7 - resolution: "@babel/runtime@npm:7.20.7" - dependencies: - regenerator-runtime: ^0.13.11 - checksum: 4629ce5c46f06cca9cfb9b7fc00d48003335a809888e2b91ec2069a2dcfbfef738480cff32ba81e0b7c290f8918e5c22ddcf2b710001464ee84ba62c7e32a3a3 - languageName: node - linkType: hard - "@babel/template@npm:^7.18.10, @babel/template@npm:^7.18.6, @babel/template@npm:^7.3.3": version: 7.18.10 resolution: "@babel/template@npm:7.18.10" @@ -9641,21 +9632,15 @@ __metadata: "@emotion/styled": ^11.10.5 "@mui/material": ^5.11.2 "@mui/styles": ^5.11.2 -<<<<<<< HEAD -======= - peerDependencies: - "@material-ui/core": ^4.12.2 ->>>>>>> f1f6a256b36 (theme: make MUI v4 an optional peer dep) "@types/react": ^16.13.1 || ^17.0.0 peerDependencies: + "@material-ui/core": ^4.12.2 + "@types/react": ^16.13.1 || ^17.0.0 react: ^16.13.1 || ^17.0.0 -<<<<<<< HEAD react-dom: ^16.13.1 || ^17.0.0 -======= peerDependenciesMeta: "@material-ui/core": optional: true ->>>>>>> f1f6a256b36 (theme: make MUI v4 an optional peer dep) languageName: unknown linkType: soft From c36f7b944946ded4b81a4fe0a1bc7c214b2e3faf Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Wed, 26 Apr 2023 19:39:00 +0200 Subject: [PATCH 70/83] Make MUIv4 not optional - Fix smaller v5 errors in GraphQL Plugin Signed-off-by: Philipp Hugenroth --- .../OAuthRequestDialog/OAuthRequestDialog.tsx | 6 +- packages/theme/src/unified/UnifiedTheme.tsx | 10 +- .../src/unified/UnifiedThemeProvider.tsx | 16 +- plugins/graphiql/package.json | 2 +- .../GraphiQLBrowser/GraphiQLBrowser.tsx | 8 +- yarn.lock | 145 ++++++++++-------- 6 files changed, 108 insertions(+), 79 deletions(-) diff --git a/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx b/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx index 0159d8f503..8fdace3766 100644 --- a/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx +++ b/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx @@ -89,7 +89,11 @@ export function OAuthRequestDialog(_props: {}) { classes={{ root: classes.title }} id="oauth-req-dialog-title" > - + Login Required {authRedirect ? ( diff --git a/packages/theme/src/unified/UnifiedTheme.tsx b/packages/theme/src/unified/UnifiedTheme.tsx index 28da80424b..341b9e0a1f 100644 --- a/packages/theme/src/unified/UnifiedTheme.tsx +++ b/packages/theme/src/unified/UnifiedTheme.tsx @@ -14,9 +14,10 @@ * limitations under the License. */ -import type { +import { Theme as Mui4Theme, ThemeOptions as ThemeOptionsV4, + createTheme, } from '@material-ui/core/styles'; import type { PaletteOptions as PaletteOptionsV4 } from '@material-ui/core/styles/createPalette'; import { PaletteOptions as PaletteOptionsV5 } from '@mui/material/styles/createPalette'; @@ -75,13 +76,14 @@ export function createUnifiedTheme(options: UnifiedThemeOptions): UnifiedTheme { const components = { ...defaultComponentThemes, ...options.components }; const v5Theme = createV5Theme({ ...themeOptions, components }); - const mui4Styles = maybeLoadMui4Styles(); + // TODO: Not super relevant in the beginning + /* const mui4Styles = maybeLoadMui4Styles(); if (!mui4Styles) { return new UnifiedThemeHolder(undefined, v5Theme); - } + } */ const v4Overrides = transformV5ComponentThemesToV4(v5Theme, components); - const v4Theme = { ...mui4Styles.createTheme(themeOptions), ...v4Overrides }; + const v4Theme = { ...createTheme(themeOptions), ...v4Overrides }; return new UnifiedThemeHolder(v4Theme, v5Theme); } diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index d28dfab292..10277136e5 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -15,7 +15,11 @@ */ import React, { ReactNode } from 'react'; -import type { Theme as Mui4Theme } from '@material-ui/core/styles'; +import { + Theme as Mui4Theme, + StylesProvider, + ThemeProvider, +} from '@material-ui/core/styles'; import { StyledEngineProvider, Theme as Mui5Theme, @@ -27,7 +31,7 @@ import { } from '@mui/styles'; import Mui5CssBaseline from '@mui/material/CssBaseline'; import { UnifiedTheme } from './types'; -import { maybeLoadMui4CssBaseline, maybeLoadMui4Styles } from '../v4/load'; +import { CssBaseline } from '@material-ui/core'; const generateV4ClassName = createGenerateClassName({ seed: 'm4', @@ -65,10 +69,10 @@ export function UnifiedThemeProvider( if (v5Theme) { cssBaseline = ; } else if (v4Theme) { - const CssBaseline = maybeLoadMui4CssBaseline(); + /* const CssBaseline = maybeLoadMui4CssBaseline(); if (!CssBaseline) { throw new Error('Failed to load MUI 4 CssBaseline component'); - } + } */ cssBaseline = ; } } @@ -81,11 +85,11 @@ export function UnifiedThemeProvider( ); if (v4Theme) { - const styles = maybeLoadMui4Styles(); + /* const styles = maybeLoadMui4Styles(); if (!styles) { throw new Error('Failed to load MUI 4 styles package'); } - const { StylesProvider, ThemeProvider } = styles; + const { StylesProvider, ThemeProvider } = styles; */ result = ( {result} diff --git a/plugins/graphiql/package.json b/plugins/graphiql/package.json index 6cc65e8e80..3afd582bb5 100644 --- a/plugins/graphiql/package.json +++ b/plugins/graphiql/package.json @@ -37,7 +37,7 @@ "@backstage/theme": "workspace:^", "@mui/icons-material": "^5.11.0", "@mui/lab": "5.0.0-alpha.114", - "@mui/material": "^5.11.2", + "@mui/material": "^5.12.2", "@mui/styles": "^5.11.2", "graphiql": "^1.5.12", "graphql": "^16.0.0", diff --git a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx index 058801dabf..fd084f1be8 100644 --- a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx +++ b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx @@ -69,15 +69,11 @@ export const GraphiQLBrowser = (props: GraphiQLBrowserProps) => { classes={{ root: classes.tabs }} value={tabIndex} onChange={(_, value) => setTabIndex(value)} + indicatorColor="secondary" textColor="inherit" > {endpoints.map(({ title }, index) => ( - + ))} diff --git a/yarn.lock b/yarn.lock index fd6d623b4f..38d9819ae7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3472,7 +3472,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": version: 7.21.0 resolution: "@babel/runtime@npm:7.21.0" dependencies: @@ -6962,7 +6962,7 @@ __metadata: "@backstage/theme": "workspace:^" "@mui/icons-material": ^5.11.0 "@mui/lab": 5.0.0-alpha.114 - "@mui/material": ^5.11.2 + "@mui/material": ^5.12.2 "@mui/styles": ^5.11.2 "@testing-library/dom": ^8.0.0 "@testing-library/jest-dom": ^5.10.1 @@ -10188,16 +10188,16 @@ __metadata: languageName: node linkType: hard -"@emotion/cache@npm:^11.10.5": - version: 11.10.5 - resolution: "@emotion/cache@npm:11.10.5" +"@emotion/cache@npm:^11.10.5, @emotion/cache@npm:^11.10.7": + version: 11.10.7 + resolution: "@emotion/cache@npm:11.10.7" dependencies: "@emotion/memoize": ^0.8.0 "@emotion/sheet": ^1.2.1 "@emotion/utils": ^1.2.0 "@emotion/weak-memoize": ^0.3.0 stylis: 4.1.3 - checksum: 1dd2d9af2d3ecbd3d4469ecdf91a335eef6034c851b57a474471b2d2280613eb35bbed98c0368cc4625f188619fbdaf04cf07e8107aaffce94b2178444c0fe7b + checksum: 6b1efed2dffc93dac419409d91f6d57a200d858ec5ffa4b7c30080fdbd93db431ff86bb779c5b8830b8373f3c5dd754d9beb386604ed2667c7d55608ff653dfc languageName: node linkType: hard @@ -12905,10 +12905,33 @@ __metadata: languageName: node linkType: hard -"@mui/core-downloads-tracker@npm:^5.11.2": - version: 5.11.2 - resolution: "@mui/core-downloads-tracker@npm:5.11.2" - checksum: 1f2c45ef37b13829fa2331811548cdd3f3cb94e384513db8820533570c8ef4569e5f835f8757a48d783553f44af3f4ed2f93d402891e27718fcc58e16129a874 +"@mui/base@npm:5.0.0-alpha.127": + version: 5.0.0-alpha.127 + resolution: "@mui/base@npm:5.0.0-alpha.127" + dependencies: + "@babel/runtime": ^7.21.0 + "@emotion/is-prop-valid": ^1.2.0 + "@mui/types": ^7.2.4 + "@mui/utils": ^5.12.0 + "@popperjs/core": ^2.11.7 + clsx: ^1.2.1 + prop-types: ^15.8.1 + react-is: ^18.2.0 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 330baeef1fdaa513707f295e07a3436af24d0831a18109ed877f76b86cf1f392309833d33a2c7ca250db79fdf53f5e88c2618f876f50dbbbf9323bbf08e367e7 + languageName: node + linkType: hard + +"@mui/core-downloads-tracker@npm:^5.12.2": + version: 5.12.2 + resolution: "@mui/core-downloads-tracker@npm:5.12.2" + checksum: d748bdc56df6fdfe6712550a94263cf094c53ddcb70f6a8f633caf23927edf5ac88b1f888429d895fe2a5045b27eb7aa9826ccee5b917e31973667d604ed87fe languageName: node linkType: hard @@ -12958,19 +12981,19 @@ __metadata: languageName: node linkType: hard -"@mui/material@npm:^5.11.2": - version: 5.11.2 - resolution: "@mui/material@npm:5.11.2" +"@mui/material@npm:^5.11.2, @mui/material@npm:^5.12.2": + version: 5.12.2 + resolution: "@mui/material@npm:5.12.2" dependencies: - "@babel/runtime": ^7.20.7 - "@mui/base": 5.0.0-alpha.112 - "@mui/core-downloads-tracker": ^5.11.2 - "@mui/system": ^5.11.2 - "@mui/types": ^7.2.3 - "@mui/utils": ^5.11.2 + "@babel/runtime": ^7.21.0 + "@mui/base": 5.0.0-alpha.127 + "@mui/core-downloads-tracker": ^5.12.2 + "@mui/system": ^5.12.1 + "@mui/types": ^7.2.4 + "@mui/utils": ^5.12.0 "@types/react-transition-group": ^4.4.5 clsx: ^1.2.1 - csstype: ^3.1.1 + csstype: ^3.1.2 prop-types: ^15.8.1 react-is: ^18.2.0 react-transition-group: ^4.4.5 @@ -12987,16 +13010,16 @@ __metadata: optional: true "@types/react": optional: true - checksum: 4f2baa4b4d8f7842b081e9e919172020f7055e33c24af36c5a458eac1a76ff3e896651fdf21daa523a68ac0bfb3670864c1b4dec9fae6d8fadf2b602f14f95ea + checksum: a3464dfbcc496164967e134d6f1d40e060ee02fc2ddb5fcf648ca85580efdbd5eff5aab6a73486d0a7f329f7299127b52501a13993bb131cbd4e310c7f2e633f languageName: node linkType: hard -"@mui/private-theming@npm:^5.11.2": - version: 5.11.2 - resolution: "@mui/private-theming@npm:5.11.2" +"@mui/private-theming@npm:^5.11.2, @mui/private-theming@npm:^5.12.0": + version: 5.12.0 + resolution: "@mui/private-theming@npm:5.12.0" dependencies: - "@babel/runtime": ^7.20.7 - "@mui/utils": ^5.11.2 + "@babel/runtime": ^7.21.0 + "@mui/utils": ^5.12.0 prop-types: ^15.8.1 peerDependencies: "@types/react": ^17.0.0 || ^18.0.0 @@ -13004,17 +13027,17 @@ __metadata: peerDependenciesMeta: "@types/react": optional: true - checksum: 4a36ca48a7a8187d46c3e0d21ec08f7cb732bd4a5bac91c959337c8b0af031beb3a6c5ceac979b685c2e0e66321273d55dd54648f925bfdb946d6513fc6150e6 + checksum: 761bc7a57e1643c2c4c327886882fa5efc7bacae1c6fffe6be4197f49d337261c916a883d96996445efcdedc0672251725c1e5b264b6250d6c9527fd0cafcc62 languageName: node linkType: hard -"@mui/styled-engine@npm:^5.11.0": - version: 5.11.0 - resolution: "@mui/styled-engine@npm:5.11.0" +"@mui/styled-engine@npm:^5.12.0": + version: 5.12.0 + resolution: "@mui/styled-engine@npm:5.12.0" dependencies: - "@babel/runtime": ^7.20.6 - "@emotion/cache": ^11.10.5 - csstype: ^3.1.1 + "@babel/runtime": ^7.21.0 + "@emotion/cache": ^11.10.7 + csstype: ^3.1.2 prop-types: ^15.8.1 peerDependencies: "@emotion/react": ^11.4.1 @@ -13025,7 +13048,7 @@ __metadata: optional: true "@emotion/styled": optional: true - checksum: ddc486bc5e0e8e7b683e4c3bffecd11c2ce1e6c67a485354c5fc5a6fe04ed5ce76db737609a2ae04779e9d5f57c7936174d458a3795eab62291c2d7681184062 + checksum: 4a415473cf62aa05012f667dd2e9b1dc2fb175be5b0c4d0b8df541e2dac3d7db410e920e0d5910c8e2b8996a4fb51f74d79483e2878a9b5c0d334498f5537d74 languageName: node linkType: hard @@ -13060,17 +13083,17 @@ __metadata: languageName: node linkType: hard -"@mui/system@npm:^5.11.2": - version: 5.11.2 - resolution: "@mui/system@npm:5.11.2" +"@mui/system@npm:^5.11.2, @mui/system@npm:^5.12.1": + version: 5.12.1 + resolution: "@mui/system@npm:5.12.1" dependencies: - "@babel/runtime": ^7.20.7 - "@mui/private-theming": ^5.11.2 - "@mui/styled-engine": ^5.11.0 - "@mui/types": ^7.2.3 - "@mui/utils": ^5.11.2 + "@babel/runtime": ^7.21.0 + "@mui/private-theming": ^5.12.0 + "@mui/styled-engine": ^5.12.0 + "@mui/types": ^7.2.4 + "@mui/utils": ^5.12.0 clsx: ^1.2.1 - csstype: ^3.1.1 + csstype: ^3.1.2 prop-types: ^15.8.1 peerDependencies: "@emotion/react": ^11.5.0 @@ -13084,34 +13107,34 @@ __metadata: optional: true "@types/react": optional: true - checksum: d6b136464ec48cbc270f0cb91eb83f10f6b6801c143cc320ef5c6ec71655f9b3ceda98ab38fde537d1c0a7669defcb9af6f4940c78101603f8b6800854d0133d + checksum: b951959bf5e5af581319354c044f441d97849ff120cfec111d2ed5e7fa05efd63721acff96f48093b8e2bdeb5ccbe35c48613fb925be2b58c596447d10dbed3e languageName: node linkType: hard -"@mui/types@npm:^7.2.3": - version: 7.2.3 - resolution: "@mui/types@npm:7.2.3" +"@mui/types@npm:^7.2.3, @mui/types@npm:^7.2.4": + version: 7.2.4 + resolution: "@mui/types@npm:7.2.4" peerDependencies: "@types/react": "*" peerDependenciesMeta: "@types/react": optional: true - checksum: b8511cb78f8df25c8978317ad3fd585c782116b657f2d32233352c09d415c77040e532f41bbe96de6ad46be87138767d3129a9f0de3561900a9a64db7693bce4 + checksum: 16bea0547492193a22fd1794382f314698a114f6c673825314c66b56766c3a9d305992cc495684722b7be16a1ecf7e6e48a79caa64f90c439b530e8c02611a61 languageName: node linkType: hard -"@mui/utils@npm:^5.11.2": - version: 5.11.2 - resolution: "@mui/utils@npm:5.11.2" +"@mui/utils@npm:^5.11.2, @mui/utils@npm:^5.12.0": + version: 5.12.0 + resolution: "@mui/utils@npm:5.12.0" dependencies: - "@babel/runtime": ^7.20.7 + "@babel/runtime": ^7.21.0 "@types/prop-types": ^15.7.5 "@types/react-is": ^16.7.1 || ^17.0.0 prop-types: ^15.8.1 react-is: ^18.2.0 peerDependencies: react: ^17.0.0 || ^18.0.0 - checksum: 69091d9120681dee29fc20220b7db5dd61334194c139df735d932f072dab00eeae6e440058ffbccebbe93d4a3a998c23b6f4df570cb66cdacd023fce9f0f5912 + checksum: 87b2c7468803b083f50af28d7c215c45291e73fef16570848b596d0f1cde1fc613c20e8951f431217b31451de254744abd50eda5013dedec4982420b5bf1c6b6 languageName: node linkType: hard @@ -14026,10 +14049,10 @@ __metadata: languageName: node linkType: hard -"@popperjs/core@npm:^2.11.6": - version: 2.11.6 - resolution: "@popperjs/core@npm:2.11.6" - checksum: 47fb328cec1924559d759b48235c78574f2d71a8a6c4c03edb6de5d7074078371633b91e39bbf3f901b32aa8af9b9d8f82834856d2f5737a23475036b16817f0 +"@popperjs/core@npm:^2.11.6, @popperjs/core@npm:^2.11.7": + version: 2.11.7 + resolution: "@popperjs/core@npm:2.11.7" + checksum: 5b6553747899683452a1d28898c1b39173a4efd780e74360bfcda8eb42f1c5e819602769c81a10920fc68c881d07fb40429604517d499567eac079cfa6470f19 languageName: node linkType: hard @@ -21734,10 +21757,10 @@ __metadata: languageName: node linkType: hard -"csstype@npm:^3.0.2, csstype@npm:^3.0.6, csstype@npm:^3.1.1": - version: 3.1.1 - resolution: "csstype@npm:3.1.1" - checksum: 1f7b4f5fdd955b7444b18ebdddf3f5c699159f13e9cf8ac9027ae4a60ae226aef9bbb14a6e12ca7dba3358b007cee6354b116e720262867c398de6c955ea451d +"csstype@npm:^3.0.2, csstype@npm:^3.0.6, csstype@npm:^3.1.1, csstype@npm:^3.1.2": + version: 3.1.2 + resolution: "csstype@npm:3.1.2" + checksum: e1a52e6c25c1314d6beef5168da704ab29c5186b877c07d822bd0806717d9a265e8493a2e35ca7e68d0f5d472d43fac1cdce70fd79fd0853dff81f3028d857b5 languageName: node linkType: hard From 39f4c10c61aea42050e929c1bd921de025655f3e Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Thu, 27 Apr 2023 11:15:29 +0200 Subject: [PATCH 71/83] Fix tsc types by csstype dependency resolution - Fix Paper background color to be consistent - Fix line-height & font-size on body to be consitent Signed-off-by: Philipp Hugenroth --- package.json | 3 ++- .../core-components/src/layout/Sidebar/Page.tsx | 12 ++++++------ packages/theme/src/base/palettes.ts | 2 +- packages/theme/src/v5/defaultComponentThemes.ts | 2 ++ yarn.lock | 15 ++++----------- 5 files changed, 15 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 3a7e05d65a..9d688b0cc6 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,8 @@ }, "resolutions": { "@types/react": "^17", - "@types/react-dom": "^17" + "@types/react-dom": "^17", + "csstype": "3.0.9" }, "version": "1.14.0", "dependencies": { diff --git a/packages/core-components/src/layout/Sidebar/Page.tsx b/packages/core-components/src/layout/Sidebar/Page.tsx index 5f660547d1..a1564c0409 100644 --- a/packages/core-components/src/layout/Sidebar/Page.tsx +++ b/packages/core-components/src/layout/Sidebar/Page.tsx @@ -33,23 +33,23 @@ import { SidebarPinStateProvider } from './SidebarPinStateContext'; export type SidebarPageClassKey = 'root'; -const useStyles = makeStyles< - BackstageTheme, - { sidebarConfig: SidebarConfig; isPinned: boolean } ->( +type PageStyleProps = { sidebarConfig: SidebarConfig; isPinned: boolean }; + +const useStyles = makeStyles( theme => ({ root: { width: '100%', transition: 'padding-left 0.1s ease-out', isolation: 'isolate', [theme.breakpoints.up('sm')]: { - paddingLeft: props => + paddingLeft: (props: PageStyleProps) => props.isPinned ? props.sidebarConfig.drawerWidthOpen : props.sidebarConfig.drawerWidthClosed, }, [theme.breakpoints.down('xs')]: { - paddingBottom: props => props.sidebarConfig.mobileSidebarHeight, + paddingBottom: (props: PageStyleProps) => + props.sidebarConfig.mobileSidebarHeight, }, }, content: { diff --git a/packages/theme/src/base/palettes.ts b/packages/theme/src/base/palettes.ts index c230ce94c0..5e70afd7b8 100644 --- a/packages/theme/src/base/palettes.ts +++ b/packages/theme/src/base/palettes.ts @@ -25,7 +25,7 @@ export const palettes = { mode: 'light' as const, background: { default: '#F8F8F8', - paper: '#FAFAFA', + paper: '#FFFFFF', }, status: { ok: '#1DB954', diff --git a/packages/theme/src/v5/defaultComponentThemes.ts b/packages/theme/src/v5/defaultComponentThemes.ts index bd29ad38c5..14656b007d 100644 --- a/packages/theme/src/v5/defaultComponentThemes.ts +++ b/packages/theme/src/v5/defaultComponentThemes.ts @@ -32,6 +32,8 @@ export const defaultComponentThemes: ThemeOptions['components'] = { height: '100%', fontFamily: theme.typography.fontFamily, overscrollBehaviorY: 'none', + fontSize: '0.875rem', + lineHeight: 1.43, }, a: { color: 'inherit', diff --git a/yarn.lock b/yarn.lock index 38d9819ae7..b884ebd728 100644 --- a/yarn.lock +++ b/yarn.lock @@ -21750,17 +21750,10 @@ __metadata: languageName: node linkType: hard -"csstype@npm:^2.0.0, csstype@npm:^2.5.2, csstype@npm:^2.6.7": - version: 2.6.21 - resolution: "csstype@npm:2.6.21" - checksum: 2ce8bc832375146eccdf6115a1f8565a27015b74cce197c35103b4494955e9516b246140425ad24103864076aa3e1257ac9bab25a06c8d931dd87a6428c9dccf - languageName: node - linkType: hard - -"csstype@npm:^3.0.2, csstype@npm:^3.0.6, csstype@npm:^3.1.1, csstype@npm:^3.1.2": - version: 3.1.2 - resolution: "csstype@npm:3.1.2" - checksum: e1a52e6c25c1314d6beef5168da704ab29c5186b877c07d822bd0806717d9a265e8493a2e35ca7e68d0f5d472d43fac1cdce70fd79fd0853dff81f3028d857b5 +"csstype@npm:3.0.9": + version: 3.0.9 + resolution: "csstype@npm:3.0.9" + checksum: 199f9af7e673f9f188525c3102a329d637ff46c52f6385a4427ff5cb17adcb736189150170a7af7c5701d18d7704bdad130273f4aa7e44c6c4f9967e6115dc93 languageName: node linkType: hard From 0eea40f03db09cbb1ede060a72099f901be4acd1 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Thu, 27 Apr 2023 11:58:31 +0200 Subject: [PATCH 72/83] Change resolution to directly enforce version in yarn.lock Signed-off-by: Philipp Hugenroth --- package.json | 3 +-- yarn.lock | 9 ++++++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 9d688b0cc6..3a7e05d65a 100644 --- a/package.json +++ b/package.json @@ -45,8 +45,7 @@ }, "resolutions": { "@types/react": "^17", - "@types/react-dom": "^17", - "csstype": "3.0.9" + "@types/react-dom": "^17" }, "version": "1.14.0", "dependencies": { diff --git a/yarn.lock b/yarn.lock index b884ebd728..cf277ac9fa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -21750,7 +21750,14 @@ __metadata: languageName: node linkType: hard -"csstype@npm:3.0.9": +"csstype@npm:^2.0.0, csstype@npm:^2.5.2, csstype@npm:^2.6.7": + version: 2.6.21 + resolution: "csstype@npm:2.6.21" + checksum: 2ce8bc832375146eccdf6115a1f8565a27015b74cce197c35103b4494955e9516b246140425ad24103864076aa3e1257ac9bab25a06c8d931dd87a6428c9dccf + languageName: node + linkType: hard + +"csstype@npm:^3.0.2, csstype@npm:^3.0.6, csstype@npm:^3.1.1, csstype@npm:^3.1.2": version: 3.0.9 resolution: "csstype@npm:3.0.9" checksum: 199f9af7e673f9f188525c3102a329d637ff46c52f6385a4427ff5cb17adcb736189150170a7af7c5701d18d7704bdad130273f4aa7e44c6c4f9967e6115dc93 From d53afd8a8071a46a44718d5f107fbff9908bc905 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Thu, 27 Apr 2023 13:28:12 +0200 Subject: [PATCH 73/83] Adjust typing to review - Build api-report Signed-off-by: Philipp Hugenroth --- packages/theme/api-report.md | 12 +++++++----- packages/theme/package.json | 2 +- packages/theme/src/unified/UnifiedTheme.tsx | 2 +- packages/theme/src/v5/types.ts | 15 ++------------- yarn.lock | 4 ++-- 5 files changed, 13 insertions(+), 22 deletions(-) diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 763cc48e41..9fd00ff877 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -3,17 +3,17 @@ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts -import { ComponentsProps } from '@material-ui/core/styles/props'; +import type { ComponentsProps } from '@material-ui/core/styles/props'; import { Overrides } from '@material-ui/core/styles/overrides'; -import { Palette } from '@material-ui/core/styles/createPalette'; -import { PaletteOptions } from '@material-ui/core/styles/createPalette'; -import { PaletteOptions as PaletteOptions_2 } from '@mui/material/styles/createPalette'; +import type { Palette } from '@material-ui/core/styles/createPalette'; +import type { PaletteOptions } from '@material-ui/core/styles/createPalette'; +import { PaletteOptions as PaletteOptions_2 } from '@mui/material/styles'; import { ReactNode } from 'react'; import { Theme } from '@mui/material/styles'; import { Theme as Theme_2 } from '@material-ui/core'; import { ThemeOptions } from '@mui/material/styles'; import { ThemeOptions as ThemeOptions_2 } from '@material-ui/core/styles'; -import { ThemeOptions as ThemeOptions_3 } from '@material-ui/core'; +import type { ThemeOptions as ThemeOptions_3 } from '@material-ui/core'; // @public @deprecated export type BackstagePalette = Palette & BackstagePaletteAdditions; @@ -249,6 +249,7 @@ export const palettes: { error: string; text: string; link: string; + closeButtonColor: string; warning: string; }; border: string; @@ -322,6 +323,7 @@ export const palettes: { error: string; text: string; link: string; + closeButtonColor: string; warning: string; }; border: string; diff --git a/packages/theme/package.json b/packages/theme/package.json index 3d9e6fa132..fba9072aa0 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -34,7 +34,7 @@ "dependencies": { "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", - "@mui/material": "^5.11.2", + "@mui/material": "^5.12.2", "@mui/styles": "^5.11.2" }, "peerDependencies": { diff --git a/packages/theme/src/unified/UnifiedTheme.tsx b/packages/theme/src/unified/UnifiedTheme.tsx index 341b9e0a1f..c878cfd5e1 100644 --- a/packages/theme/src/unified/UnifiedTheme.tsx +++ b/packages/theme/src/unified/UnifiedTheme.tsx @@ -20,7 +20,7 @@ import { createTheme, } from '@material-ui/core/styles'; import type { PaletteOptions as PaletteOptionsV4 } from '@material-ui/core/styles/createPalette'; -import { PaletteOptions as PaletteOptionsV5 } from '@mui/material/styles/createPalette'; +import { PaletteOptions as PaletteOptionsV5 } from '@mui/material/styles'; import { adaptV4Theme, Theme as Mui5Theme, diff --git a/packages/theme/src/v5/types.ts b/packages/theme/src/v5/types.ts index 293383180a..31fe72b5b9 100644 --- a/packages/theme/src/v5/types.ts +++ b/packages/theme/src/v5/types.ts @@ -20,13 +20,13 @@ import { BackstageThemeAdditions, } from '../base/types'; -declare module '@mui/material/styles/createPalette' { +declare module '@mui/material/styles' { interface Palette extends BackstagePaletteAdditions {} interface PaletteOptions extends BackstagePaletteAdditions {} } -declare module '@mui/material/styles/createTheme' { +declare module '@mui/material/styles' { interface Theme extends BackstageThemeAdditions {} interface ThemeOptions extends BackstageThemeAdditions {} @@ -35,14 +35,3 @@ declare module '@mui/material/styles/createTheme' { declare module '@mui/private-theming/defaultTheme' { interface DefaultTheme extends Theme {} } - -// This is a workaround for missing methods in React 17 that MUI v5 depends on -// See https://github.com/mui/material-ui/issues/35287 -declare global { - namespace React { - interface DOMAttributes { - onResize?: (event: Event) => void; - onResizeCapture?: (event: Event) => void; - } - } -} diff --git a/yarn.lock b/yarn.lock index cf277ac9fa..1983495c23 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9630,7 +9630,7 @@ __metadata: "@backstage/cli": "workspace:^" "@emotion/react": ^11.10.5 "@emotion/styled": ^11.10.5 - "@mui/material": ^5.11.2 + "@mui/material": ^5.12.2 "@mui/styles": ^5.11.2 "@types/react": ^16.13.1 || ^17.0.0 peerDependencies: @@ -12981,7 +12981,7 @@ __metadata: languageName: node linkType: hard -"@mui/material@npm:^5.11.2, @mui/material@npm:^5.12.2": +"@mui/material@npm:^5.12.2": version: 5.12.2 resolution: "@mui/material@npm:5.12.2" dependencies: From 7cfe41766f0cde50c80bf66216f3cc024b75d72b Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Thu, 27 Apr 2023 14:50:43 +0200 Subject: [PATCH 74/83] Fix EntityKindIcon test regarding prefixed MUI classes - Simple fix not changing what is tested, but adjusting the way the element is queried Signed-off-by: Philipp Hugenroth --- .../components/EntityRelationsGraph/EntityKindIcon.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityKindIcon.test.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityKindIcon.test.tsx index 6592c6195e..cc47c8850b 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityKindIcon.test.tsx +++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityKindIcon.test.tsx @@ -24,7 +24,7 @@ describe('', () => { , ); - expect(baseElement.querySelector('.MuiSvgIcon-root')).toBeInTheDocument(); + expect(baseElement.querySelector('svg')).toBeInTheDocument(); }); it('renders without exploding for unknown kind', async () => { @@ -32,6 +32,6 @@ describe('', () => { , ); - expect(baseElement.querySelector('.MuiSvgIcon-root')).toBeInTheDocument(); + expect(baseElement.querySelector('svg')).toBeInTheDocument(); }); }); From 9b714a9bfd02f6934656fa2577f95011859e891e Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Fri, 28 Apr 2023 16:05:36 +0200 Subject: [PATCH 75/83] Only use one class name generator to avoid side effects - Remove duplicate CSSBaseline from test app wrapper Signed-off-by: Philipp Hugenroth --- .eslintrc.js | 6 +++ .../test-utils/src/testUtils/appWrappers.tsx | 3 +- .../theme/src/unified/MuiClassNameSetup.ts | 24 ++++++++++++ .../src/unified/UnifiedThemeProvider.tsx | 38 +++---------------- 4 files changed, 37 insertions(+), 34 deletions(-) create mode 100644 packages/theme/src/unified/MuiClassNameSetup.ts diff --git a/.eslintrc.js b/.eslintrc.js index 1616404a6f..5c1012e501 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -28,6 +28,12 @@ module.exports = { onNonMatchingHeader: 'replace', }, ], + 'no-restricted-imports': [ + 'error', + { + patterns: ['@mui/*/*/*'], + }, + ], 'no-restricted-syntax': [ 'error', { diff --git a/packages/test-utils/src/testUtils/appWrappers.tsx b/packages/test-utils/src/testUtils/appWrappers.tsx index 012cbe0b98..6545cc312a 100644 --- a/packages/test-utils/src/testUtils/appWrappers.tsx +++ b/packages/test-utils/src/testUtils/appWrappers.tsx @@ -18,7 +18,6 @@ import React, { ComponentType, ReactNode, ReactElement } from 'react'; import { MemoryRouter } from 'react-router-dom'; import { Route } from 'react-router-dom'; import { UnifiedThemeProvider, themes } from '@backstage/theme'; -import { CssBaseline } from '@material-ui/core'; import MockIcon from '@material-ui/icons/AcUnit'; import { createSpecializedApp } from '@backstage/core-app-api'; import { @@ -142,7 +141,7 @@ export function createTestAppWrapper( variant: 'light', Provider: ({ children }) => ( - {children} + {children} ), }, diff --git a/packages/theme/src/unified/MuiClassNameSetup.ts b/packages/theme/src/unified/MuiClassNameSetup.ts new file mode 100644 index 0000000000..42b948af32 --- /dev/null +++ b/packages/theme/src/unified/MuiClassNameSetup.ts @@ -0,0 +1,24 @@ +/* + * Copyright 2022 The Backstage Authors + * + * 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 { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className'; + +/** + * This API is introduced in @mui/material (v5.0.5) as a replacement of deprecated createGenerateClassName & only affects v5 MUI components from `@mui/*` + */ +ClassNameGenerator.configure(componentName => { + return `v5-${componentName}`; +}); diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 10277136e5..88cc1d9457 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -15,31 +15,16 @@ */ import React, { ReactNode } from 'react'; -import { - Theme as Mui4Theme, - StylesProvider, - ThemeProvider, -} from '@material-ui/core/styles'; +import './MuiClassNameSetup'; +import { ThemeProvider } from '@material-ui/core/styles'; import { StyledEngineProvider, - Theme as Mui5Theme, ThemeProvider as Mui5Provider, } from '@mui/material/styles'; -import { - StylesProvider as Mui5StylesProvider, - createGenerateClassName, -} from '@mui/styles'; import Mui5CssBaseline from '@mui/material/CssBaseline'; import { UnifiedTheme } from './types'; import { CssBaseline } from '@material-ui/core'; -const generateV4ClassName = createGenerateClassName({ - seed: 'm4', -}); -const generateV5ClassName = createGenerateClassName({ - seed: 'm5', -}); - /** * Props for {@link UnifiedThemeProvider}. * @@ -85,25 +70,14 @@ export function UnifiedThemeProvider( ); if (v4Theme) { - /* const styles = maybeLoadMui4Styles(); - if (!styles) { - throw new Error('Failed to load MUI 4 styles package'); - } - const { StylesProvider, ThemeProvider } = styles; */ - result = ( - - {result} - - ); + result = {result}; } if (v5Theme) { result = ( - - - {result} - - + + {result} + ); } From 103cd94ef1266bcda9da1f0f90fbbb4cd87417e2 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Wed, 3 May 2023 14:49:48 +0200 Subject: [PATCH 76/83] Fix TechDocs test Signed-off-by: Philipp Hugenroth --- packages/theme/package.json | 3 +-- plugins/techdocs-addons-test-utils/src/test-utils.tsx | 6 ++++-- yarn.lock | 1 - 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/theme/package.json b/packages/theme/package.json index fba9072aa0..0e73918072 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -34,8 +34,7 @@ "dependencies": { "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", - "@mui/material": "^5.12.2", - "@mui/styles": "^5.11.2" + "@mui/material": "^5.12.2" }, "peerDependencies": { "@material-ui/core": "^4.12.2", diff --git a/plugins/techdocs-addons-test-utils/src/test-utils.tsx b/plugins/techdocs-addons-test-utils/src/test-utils.tsx index e60a96402c..c7a3992281 100644 --- a/plugins/techdocs-addons-test-utils/src/test-utils.tsx +++ b/plugins/techdocs-addons-test-utils/src/test-utils.tsx @@ -21,7 +21,7 @@ import React, { ReactElement } from 'react'; import { screen } from 'testing-library__dom'; import { renderToStaticMarkup } from 'react-dom/server'; import { Route } from 'react-router-dom'; -import { act, render } from '@testing-library/react'; +import { act, render, waitFor } from '@testing-library/react'; import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils'; import { FlatRoutes } from '@backstage/core-app-api'; @@ -278,7 +278,9 @@ export class TechDocsAddonTester { render(this.build()); }); - const shadowHost = screen.getByTestId('techdocs-native-shadowroot'); + await waitFor(() => screen.getByText('Documentation')); + + const shadowHost = await screen.findByTestId('techdocs-native-shadowroot'); return { ...screen, diff --git a/yarn.lock b/yarn.lock index 1983495c23..bdc04393da 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9631,7 +9631,6 @@ __metadata: "@emotion/react": ^11.10.5 "@emotion/styled": ^11.10.5 "@mui/material": ^5.12.2 - "@mui/styles": ^5.11.2 "@types/react": ^16.13.1 || ^17.0.0 peerDependencies: "@material-ui/core": ^4.12.2 From 8e88caa0299a1502326ac7c9c2e5e7cac18f5bcb Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Fri, 5 May 2023 15:37:47 +0200 Subject: [PATCH 77/83] Simplify PR after review Co-authored-by: Patrik Oldsberg Signed-off-by: Philipp Hugenroth --- .eslintrc.js | 6 -- packages/cli/config/eslint-factory.js | 10 +++ packages/theme/src/base/index.ts | 1 + packages/theme/src/unified/UnifiedTheme.tsx | 9 +-- .../src/unified/UnifiedThemeProvider.tsx | 13 +--- packages/theme/src/v4/load.ts | 74 ------------------- .../src/test-utils.tsx | 2 - 7 files changed, 14 insertions(+), 101 deletions(-) delete mode 100644 packages/theme/src/v4/load.ts diff --git a/.eslintrc.js b/.eslintrc.js index 5c1012e501..1616404a6f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -28,12 +28,6 @@ module.exports = { onNonMatchingHeader: 'replace', }, ], - 'no-restricted-imports': [ - 'error', - { - patterns: ['@mui/*/*/*'], - }, - ], 'no-restricted-syntax': [ 'error', { diff --git a/packages/cli/config/eslint-factory.js b/packages/cli/config/eslint-factory.js index dde853fdff..6888e0ff67 100644 --- a/packages/cli/config/eslint-factory.js +++ b/packages/cli/config/eslint-factory.js @@ -24,6 +24,7 @@ const { join: joinPath } = require('path'); * - `tsRules`: Additional ESLint rules to apply to TypeScript * - `testRules`: Additional ESLint rules to apply to tests * - `restrictedImports`: Additional paths to add to no-restricted-imports + * - `restrictedImportsPattern`: Additional patterns to add to no-restricted-imports * - `restrictedSrcImports`: Additional paths to add to no-restricted-imports in src files * - `restrictedTestImports`: Additional paths to add to no-restricted-imports in test files * - `restrictedSyntax`: Additional patterns to add to no-restricted-syntax @@ -44,6 +45,7 @@ function createConfig(dir, extraConfig = {}) { testRules, restrictedImports, + restrictedImportsPatterns, restrictedSrcImports, restrictedTestImports, restrictedSyntax, @@ -114,6 +116,7 @@ function createConfig(dir, extraConfig = {}) { '*.test*', '**/__testUtils__/**', '**/__mocks__/**', + ...(restrictedImportsPatterns ?? []), ], }, ], @@ -208,9 +211,16 @@ function createConfigForRole(dir, role, extraConfig = {}) { name: '@material-ui/icons/', // because this is possible too ._. message: "Please import '@material-ui/icons/' instead.", }, + { + // https://mui.com/material-ui/guides/minimizing-bundle-size/ + name: '@mui/material', + message: "Please import '@mui/material/...' instead.", + }, ...require('module').builtinModules, ...(extraConfig.restrictedImports ?? []), ], + // https://mui.com/material-ui/guides/minimizing-bundle-size/ + restrictedImportsPatterns: ['@mui/*/*/*'], tsRules: { 'react/prop-types': 0, ...extraConfig.tsRules, diff --git a/packages/theme/src/base/index.ts b/packages/theme/src/base/index.ts index 45b8326f2e..4bb80aa42b 100644 --- a/packages/theme/src/base/index.ts +++ b/packages/theme/src/base/index.ts @@ -19,6 +19,7 @@ export type { BaseThemeOptionsInput } from './createBaseThemeOptions'; export { colorVariants, genPageTheme, pageTheme, shapes } from './pageTheme'; export { palettes } from './palettes'; export type { + BackstageThemeAdditions, BackstagePaletteAdditions, PageTheme, PageThemeSelector, diff --git a/packages/theme/src/unified/UnifiedTheme.tsx b/packages/theme/src/unified/UnifiedTheme.tsx index c878cfd5e1..0c5f80357a 100644 --- a/packages/theme/src/unified/UnifiedTheme.tsx +++ b/packages/theme/src/unified/UnifiedTheme.tsx @@ -32,7 +32,6 @@ import { PageTheme } from '../base/types'; import { defaultComponentThemes } from '../v5'; import { createBaseThemeOptions } from '../base/createBaseThemeOptions'; import { UnifiedTheme } from './types'; -import { maybeLoadMui4Styles } from '../v4/load'; export class UnifiedThemeHolder implements UnifiedTheme { #themes = new Map(); @@ -97,12 +96,6 @@ export function createUnifiedThemeFromV4( options: ThemeOptionsV4, ): UnifiedTheme { const v5Theme = adaptV4Theme(options as any); - - const mui4Styles = maybeLoadMui4Styles(); - if (!mui4Styles) { - return new UnifiedThemeHolder(undefined, v5Theme); - } - - const v4Theme = mui4Styles.createTheme(options); + const v4Theme = createTheme(options); return new UnifiedThemeHolder(v4Theme, v5Theme); } diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 88cc1d9457..c7054e0e55 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -21,9 +21,8 @@ import { StyledEngineProvider, ThemeProvider as Mui5Provider, } from '@mui/material/styles'; -import Mui5CssBaseline from '@mui/material/CssBaseline'; +import CSSBaseline from '@mui/material/CssBaseline'; import { UnifiedTheme } from './types'; -import { CssBaseline } from '@material-ui/core'; /** * Props for {@link UnifiedThemeProvider}. @@ -51,15 +50,7 @@ export function UnifiedThemeProvider( let cssBaseline: JSX.Element | undefined = undefined; if (!noCssBaseline) { - if (v5Theme) { - cssBaseline = ; - } else if (v4Theme) { - /* const CssBaseline = maybeLoadMui4CssBaseline(); - if (!CssBaseline) { - throw new Error('Failed to load MUI 4 CssBaseline component'); - } */ - cssBaseline = ; - } + cssBaseline = ; } let result = ( diff --git a/packages/theme/src/v4/load.ts b/packages/theme/src/v4/load.ts deleted file mode 100644 index 899aa8af93..0000000000 --- a/packages/theme/src/v4/load.ts +++ /dev/null @@ -1,74 +0,0 @@ -/* - * Copyright 2023 The Backstage Authors - * - * 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. - */ - -/** - * Loads MUI v4 styles if it is available. - * - * This should always be used to access MUI v4 at runtime in this - * package, to ensure that it's not brought into the bundle unnecessarily. - * - * @internal - */ -export function maybeLoadMui4Styles(): - | typeof import('@material-ui/core/styles') - | undefined { - if ( - __webpack_modules__[ - require.resolveWeak('@material-ui/core/styles') as number - ] - ) { - return __webpack_modules__[ - require.resolveWeak('@material-ui/core/styles') as number - ] as typeof import('@material-ui/core/styles'); - } - if (__webpack_modules__[require.resolveWeak('@material-ui/core') as number]) { - return __webpack_modules__[ - require.resolveWeak('@material-ui/core') as number - ] as typeof import('@material-ui/core'); - } - - return undefined; -} - -/** - * Loads the MUI v4 CssBaseline component if it is available. - * - * This should always be used to access MUI v4 at runtime in this - * package, to ensure that it's not brought into the bundle unnecessarily. - * - * @internal - */ -export function maybeLoadMui4CssBaseline(): - | typeof import('@material-ui/core/CssBaseline')['default'] - | undefined { - if ( - __webpack_modules__[ - require.resolveWeak('@material-ui/core/CssBaseline') as number - ] - ) { - const m = __webpack_modules__[ - require.resolveWeak('@material-ui/core/CssBaseline') as number - ] as typeof import('@material-ui/core/CssBaseline'); - return m.default; - } - if (__webpack_modules__[require.resolveWeak('@material-ui/core') as number]) { - const m = __webpack_modules__[ - require.resolveWeak('@material-ui/core') as number - ] as typeof import('@material-ui/core'); - return m.CssBaseline; - } - return undefined; -} diff --git a/plugins/techdocs-addons-test-utils/src/test-utils.tsx b/plugins/techdocs-addons-test-utils/src/test-utils.tsx index c7a3992281..a6e83262fb 100644 --- a/plugins/techdocs-addons-test-utils/src/test-utils.tsx +++ b/plugins/techdocs-addons-test-utils/src/test-utils.tsx @@ -278,8 +278,6 @@ export class TechDocsAddonTester { render(this.build()); }); - await waitFor(() => screen.getByText('Documentation')); - const shadowHost = await screen.findByTestId('techdocs-native-shadowroot'); return { From df1edd9cbc54a8a16eab1e6b70ca8d2d48581654 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Fri, 5 May 2023 15:40:39 +0200 Subject: [PATCH 78/83] Restore GraphiQL to seperate concerns in PRs Signed-off-by: Philipp Hugenroth --- plugins/graphiql/package.json | 7 +++---- .../components/GraphiQLBrowser/GraphiQLBrowser.tsx | 11 +++++------ .../src/components/GraphiQLPage/GraphiQLPage.tsx | 2 +- 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/plugins/graphiql/package.json b/plugins/graphiql/package.json index 3afd582bb5..d5dae8c2ec 100644 --- a/plugins/graphiql/package.json +++ b/plugins/graphiql/package.json @@ -35,10 +35,9 @@ "@backstage/core-components": "workspace:^", "@backstage/core-plugin-api": "workspace:^", "@backstage/theme": "workspace:^", - "@mui/icons-material": "^5.11.0", - "@mui/lab": "5.0.0-alpha.114", - "@mui/material": "^5.12.2", - "@mui/styles": "^5.11.2", + "@material-ui/core": "^4.12.2", + "@material-ui/icons": "^4.9.1", + "@material-ui/lab": "4.0.0-alpha.61", "graphiql": "^1.5.12", "graphql": "^16.0.0", "graphql-ws": "^5.4.1", diff --git a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx index fd084f1be8..dd38f513be 100644 --- a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx +++ b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx @@ -15,18 +15,18 @@ */ import React, { useState, Suspense } from 'react'; -import { Tabs, Tab, Typography, Divider } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; +import { Tabs, Tab, makeStyles, Typography, Divider } from '@material-ui/core'; import 'graphiql/graphiql.css'; import { StorageBucket } from '../../lib/storage'; import { GraphQLEndpoint } from '../../lib/api'; +import { BackstageTheme } from '@backstage/theme'; import { Progress } from '@backstage/core-components'; const GraphiQL = React.lazy(() => import('graphiql').then(m => ({ default: m.GraphiQL })), ); -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ root: { height: '100%', display: 'flex', @@ -69,11 +69,10 @@ export const GraphiQLBrowser = (props: GraphiQLBrowserProps) => { classes={{ root: classes.tabs }} value={tabIndex} onChange={(_, value) => setTabIndex(value)} - indicatorColor="secondary" - textColor="inherit" + indicatorColor="primary" > {endpoints.map(({ title }, index) => ( - + ))} diff --git a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx index b075e0d478..0b4399948a 100644 --- a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx +++ b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx @@ -19,7 +19,7 @@ import useAsync from 'react-use/lib/useAsync'; import 'graphiql/graphiql.css'; import { graphQlBrowseApiRef } from '../../lib/api'; import { GraphiQLBrowser } from '../GraphiQLBrowser'; -import { Typography } from '@mui/material'; +import { Typography } from '@material-ui/core'; import { Content, Header, From 2a34253e2a6c9c5017d3965ab48e0eb171a4c7d5 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Fri, 5 May 2023 15:49:54 +0200 Subject: [PATCH 79/83] Fix tsc & build api-reports Signed-off-by: Philipp Hugenroth --- packages/theme/api-report.md | 6 ++++++ plugins/techdocs-addons-test-utils/src/test-utils.tsx | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 9fd00ff877..fe05ca6b4e 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -95,6 +95,12 @@ export interface BackstageTheme extends Theme_2 { palette: BackstagePalette; } +// @public +export type BackstageThemeAdditions = { + page: PageTheme; + getPageTheme: (selector: PageThemeSelector) => PageTheme; +}; + // @public @deprecated export interface BackstageThemeOptions extends ThemeOptions_3 { // (undocumented) diff --git a/plugins/techdocs-addons-test-utils/src/test-utils.tsx b/plugins/techdocs-addons-test-utils/src/test-utils.tsx index a6e83262fb..1a921437b1 100644 --- a/plugins/techdocs-addons-test-utils/src/test-utils.tsx +++ b/plugins/techdocs-addons-test-utils/src/test-utils.tsx @@ -21,7 +21,7 @@ import React, { ReactElement } from 'react'; import { screen } from 'testing-library__dom'; import { renderToStaticMarkup } from 'react-dom/server'; import { Route } from 'react-router-dom'; -import { act, render, waitFor } from '@testing-library/react'; +import { act, render } from '@testing-library/react'; import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils'; import { FlatRoutes } from '@backstage/core-app-api'; From 0b03f317350e3ff1db50af05dde16307d05e0c36 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Fri, 5 May 2023 16:03:09 +0200 Subject: [PATCH 80/83] Remove non-intended changes Signed-off-by: Philipp Hugenroth --- .../src/layout/Sidebar/Page.tsx | 12 +- yarn.lock | 137 +++--------------- 2 files changed, 24 insertions(+), 125 deletions(-) diff --git a/packages/core-components/src/layout/Sidebar/Page.tsx b/packages/core-components/src/layout/Sidebar/Page.tsx index a1564c0409..5f660547d1 100644 --- a/packages/core-components/src/layout/Sidebar/Page.tsx +++ b/packages/core-components/src/layout/Sidebar/Page.tsx @@ -33,23 +33,23 @@ import { SidebarPinStateProvider } from './SidebarPinStateContext'; export type SidebarPageClassKey = 'root'; -type PageStyleProps = { sidebarConfig: SidebarConfig; isPinned: boolean }; - -const useStyles = makeStyles( +const useStyles = makeStyles< + BackstageTheme, + { sidebarConfig: SidebarConfig; isPinned: boolean } +>( theme => ({ root: { width: '100%', transition: 'padding-left 0.1s ease-out', isolation: 'isolate', [theme.breakpoints.up('sm')]: { - paddingLeft: (props: PageStyleProps) => + paddingLeft: props => props.isPinned ? props.sidebarConfig.drawerWidthOpen : props.sidebarConfig.drawerWidthClosed, }, [theme.breakpoints.down('xs')]: { - paddingBottom: (props: PageStyleProps) => - props.sidebarConfig.mobileSidebarHeight, + paddingBottom: props => props.sidebarConfig.mobileSidebarHeight, }, }, content: { diff --git a/yarn.lock b/yarn.lock index bdc04393da..cc32ce9a0e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3472,7 +3472,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": version: 7.21.0 resolution: "@babel/runtime@npm:7.21.0" dependencies: @@ -6960,10 +6960,9 @@ __metadata: "@backstage/dev-utils": "workspace:^" "@backstage/test-utils": "workspace:^" "@backstage/theme": "workspace:^" - "@mui/icons-material": ^5.11.0 - "@mui/lab": 5.0.0-alpha.114 - "@mui/material": ^5.12.2 - "@mui/styles": ^5.11.2 + "@material-ui/core": ^4.12.2 + "@material-ui/icons": ^4.9.1 + "@material-ui/lab": 4.0.0-alpha.61 "@testing-library/dom": ^8.0.0 "@testing-library/jest-dom": ^5.10.1 "@testing-library/react": ^12.1.3 @@ -12881,29 +12880,6 @@ __metadata: languageName: node linkType: hard -"@mui/base@npm:5.0.0-alpha.112": - version: 5.0.0-alpha.112 - resolution: "@mui/base@npm:5.0.0-alpha.112" - dependencies: - "@babel/runtime": ^7.20.7 - "@emotion/is-prop-valid": ^1.2.0 - "@mui/types": ^7.2.3 - "@mui/utils": ^5.11.2 - "@popperjs/core": ^2.11.6 - clsx: ^1.2.1 - prop-types: ^15.8.1 - react-is: ^18.2.0 - peerDependencies: - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - react-dom: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - checksum: fd19240ac16859d62f057fd80261fc4e0dbc960a648b601bd7beaeb44b88c059f654b0989f33cea655ad61106832bffa0cd8446730c1be7671b6cde383dbce80 - languageName: node - linkType: hard - "@mui/base@npm:5.0.0-alpha.127": version: 5.0.0-alpha.127 resolution: "@mui/base@npm:5.0.0-alpha.127" @@ -12934,52 +12910,6 @@ __metadata: languageName: node linkType: hard -"@mui/icons-material@npm:^5.11.0": - version: 5.11.0 - resolution: "@mui/icons-material@npm:5.11.0" - dependencies: - "@babel/runtime": ^7.20.6 - peerDependencies: - "@mui/material": ^5.0.0 - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - checksum: 764c1185b3432f0228f3c5217b0e218b10f106fa96d305dfc62c0ef5afd2a7a087b0d664fd0a8171282e195c18d3ee073d5f037901a2bed1a1519a70fbb0501c - languageName: node - linkType: hard - -"@mui/lab@npm:5.0.0-alpha.114": - version: 5.0.0-alpha.114 - resolution: "@mui/lab@npm:5.0.0-alpha.114" - dependencies: - "@babel/runtime": ^7.20.7 - "@mui/base": 5.0.0-alpha.112 - "@mui/system": ^5.11.2 - "@mui/types": ^7.2.3 - "@mui/utils": ^5.11.2 - clsx: ^1.2.1 - prop-types: ^15.8.1 - react-is: ^18.2.0 - peerDependencies: - "@emotion/react": ^11.5.0 - "@emotion/styled": ^11.3.0 - "@mui/material": ^5.0.0 - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - react-dom: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@emotion/react": - optional: true - "@emotion/styled": - optional: true - "@types/react": - optional: true - checksum: 0b6441e7f7a69e2a6910f044ef2a222462a219f61e3a05c023484508e7f14a5fe6baeddf08b37bceab357c7cb0eed90324ac42ecd8e59a6eb6e1c801ea01504a - languageName: node - linkType: hard - "@mui/material@npm:^5.12.2": version: 5.12.2 resolution: "@mui/material@npm:5.12.2" @@ -13013,7 +12943,7 @@ __metadata: languageName: node linkType: hard -"@mui/private-theming@npm:^5.11.2, @mui/private-theming@npm:^5.12.0": +"@mui/private-theming@npm:^5.12.0": version: 5.12.0 resolution: "@mui/private-theming@npm:5.12.0" dependencies: @@ -13051,38 +12981,7 @@ __metadata: languageName: node linkType: hard -"@mui/styles@npm:^5.11.2": - version: 5.11.2 - resolution: "@mui/styles@npm:5.11.2" - dependencies: - "@babel/runtime": ^7.20.7 - "@emotion/hash": ^0.9.0 - "@mui/private-theming": ^5.11.2 - "@mui/types": ^7.2.3 - "@mui/utils": ^5.11.2 - clsx: ^1.2.1 - csstype: ^3.1.1 - hoist-non-react-statics: ^3.3.2 - jss: ^10.9.2 - jss-plugin-camel-case: ^10.9.2 - jss-plugin-default-unit: ^10.9.2 - jss-plugin-global: ^10.9.2 - jss-plugin-nested: ^10.9.2 - jss-plugin-props-sort: ^10.9.2 - jss-plugin-rule-value-function: ^10.9.2 - jss-plugin-vendor-prefixer: ^10.9.2 - prop-types: ^15.8.1 - peerDependencies: - "@types/react": ^17.0.0 - react: ^17.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - checksum: d565e53acd6f49679446dbb9d85ab055d6c16225afd429ac9a738fba3cddfc394f88530cebfe1b3640ca89f58e7db73bb47d09e9bb05c80e47a5018418802378 - languageName: node - linkType: hard - -"@mui/system@npm:^5.11.2, @mui/system@npm:^5.12.1": +"@mui/system@npm:^5.12.1": version: 5.12.1 resolution: "@mui/system@npm:5.12.1" dependencies: @@ -13110,7 +13009,7 @@ __metadata: languageName: node linkType: hard -"@mui/types@npm:^7.2.3, @mui/types@npm:^7.2.4": +"@mui/types@npm:^7.2.4": version: 7.2.4 resolution: "@mui/types@npm:7.2.4" peerDependencies: @@ -13122,7 +13021,7 @@ __metadata: languageName: node linkType: hard -"@mui/utils@npm:^5.11.2, @mui/utils@npm:^5.12.0": +"@mui/utils@npm:^5.12.0": version: 5.12.0 resolution: "@mui/utils@npm:5.12.0" dependencies: @@ -14048,7 +13947,7 @@ __metadata: languageName: node linkType: hard -"@popperjs/core@npm:^2.11.6, @popperjs/core@npm:^2.11.7": +"@popperjs/core@npm:^2.11.7": version: 2.11.7 resolution: "@popperjs/core@npm:2.11.7" checksum: 5b6553747899683452a1d28898c1b39173a4efd780e74360bfcda8eb42f1c5e819602769c81a10920fc68c881d07fb40429604517d499567eac079cfa6470f19 @@ -21756,7 +21655,7 @@ __metadata: languageName: node linkType: hard -"csstype@npm:^3.0.2, csstype@npm:^3.0.6, csstype@npm:^3.1.1, csstype@npm:^3.1.2": +"csstype@npm:^3.0.2, csstype@npm:^3.0.6, csstype@npm:^3.1.2": version: 3.0.9 resolution: "csstype@npm:3.0.9" checksum: 199f9af7e673f9f188525c3102a329d637ff46c52f6385a4427ff5cb17adcb736189150170a7af7c5701d18d7704bdad130273f4aa7e44c6c4f9967e6115dc93 @@ -29262,7 +29161,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-camel-case@npm:^10.5.1, jss-plugin-camel-case@npm:^10.9.2": +"jss-plugin-camel-case@npm:^10.5.1": version: 10.9.2 resolution: "jss-plugin-camel-case@npm:10.9.2" dependencies: @@ -29273,7 +29172,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-default-unit@npm:^10.5.1, jss-plugin-default-unit@npm:^10.9.2": +"jss-plugin-default-unit@npm:^10.5.1": version: 10.9.2 resolution: "jss-plugin-default-unit@npm:10.9.2" dependencies: @@ -29283,7 +29182,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-global@npm:^10.5.1, jss-plugin-global@npm:^10.9.2": +"jss-plugin-global@npm:^10.5.1": version: 10.9.2 resolution: "jss-plugin-global@npm:10.9.2" dependencies: @@ -29293,7 +29192,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-nested@npm:^10.5.1, jss-plugin-nested@npm:^10.9.2": +"jss-plugin-nested@npm:^10.5.1": version: 10.9.2 resolution: "jss-plugin-nested@npm:10.9.2" dependencies: @@ -29304,7 +29203,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-props-sort@npm:^10.5.1, jss-plugin-props-sort@npm:^10.9.2": +"jss-plugin-props-sort@npm:^10.5.1": version: 10.9.2 resolution: "jss-plugin-props-sort@npm:10.9.2" dependencies: @@ -29314,7 +29213,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-rule-value-function@npm:^10.5.1, jss-plugin-rule-value-function@npm:^10.9.2": +"jss-plugin-rule-value-function@npm:^10.5.1": version: 10.9.2 resolution: "jss-plugin-rule-value-function@npm:10.9.2" dependencies: @@ -29325,7 +29224,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-vendor-prefixer@npm:^10.5.1, jss-plugin-vendor-prefixer@npm:^10.9.2": +"jss-plugin-vendor-prefixer@npm:^10.5.1": version: 10.9.2 resolution: "jss-plugin-vendor-prefixer@npm:10.9.2" dependencies: @@ -29368,7 +29267,7 @@ __metadata: languageName: node linkType: hard -"jss@npm:^10.5.1, jss@npm:^10.9.2, jss@npm:~10.10.0": +"jss@npm:^10.5.1, jss@npm:~10.10.0": version: 10.10.0 resolution: "jss@npm:10.10.0" dependencies: From 20b7da6f1311c36a5bacdb523f2a6a235737a57b Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Fri, 5 May 2023 16:40:57 +0200 Subject: [PATCH 81/83] Add changeset Signed-off-by: Philipp Hugenroth --- .changeset/weak-snails-sparkle.md | 24 ++++++++++++++++++++ packages/theme/src/unified/overrides.test.ts | 2 +- 2 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 .changeset/weak-snails-sparkle.md diff --git a/.changeset/weak-snails-sparkle.md b/.changeset/weak-snails-sparkle.md new file mode 100644 index 0000000000..55450e0869 --- /dev/null +++ b/.changeset/weak-snails-sparkle.md @@ -0,0 +1,24 @@ +--- +'@backstage/app-defaults': minor +'@backstage/test-utils': minor +'@backstage/theme': minor +'@backstage/plugin-techdocs-addons-test-utils': patch +'@backstage/cli': patch +--- + +**MUI v5 Support:** Adding platform-wide support for MUI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a + +To allow the future support of plugins & components using MUI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` + +```diff + Provider: ({ children }) => ( +- +- {children} +- ++ + ), +``` + +**'@backstage/test-utils':** Test App Wrapper is using `UnifiedThemeProvider` for tests now. +**'@backstage/plugin-techdocs-addons-test-utils':** Fix avoiding test to run on unmount. +**'@backstage/cli':** Enforcing MUI v5 specific linting to minimize bundle size. diff --git a/packages/theme/src/unified/overrides.test.ts b/packages/theme/src/unified/overrides.test.ts index 38b4738444..e84cedade6 100644 --- a/packages/theme/src/unified/overrides.test.ts +++ b/packages/theme/src/unified/overrides.test.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { Theme } from '@mui/material'; +import { Theme } from '@mui/material/styles'; import { transformV5ComponentThemesToV4 } from './overrides'; describe('transformV5ComponentThemesToV4', () => { From 05169a796dfd8cea5bc59485bbf5edc3f127f723 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Mon, 8 May 2023 11:29:37 +0200 Subject: [PATCH 82/83] Fix lint factory & changeset Signed-off-by: Philipp Hugenroth --- .changeset/weak-snails-sparkle.md | 2 +- docs/local-dev/cli-build-system.md | 21 +++++++++++---------- packages/cli/config/eslint-factory.js | 9 ++++++--- 3 files changed, 18 insertions(+), 14 deletions(-) diff --git a/.changeset/weak-snails-sparkle.md b/.changeset/weak-snails-sparkle.md index 55450e0869..947c20117b 100644 --- a/.changeset/weak-snails-sparkle.md +++ b/.changeset/weak-snails-sparkle.md @@ -20,5 +20,5 @@ To allow the future support of plugins & components using MUI v5 you want to upg ``` **'@backstage/test-utils':** Test App Wrapper is using `UnifiedThemeProvider` for tests now. -**'@backstage/plugin-techdocs-addons-test-utils':** Fix avoiding test to run on unmount. +**'@backstage/plugin-techdocs-addons-test-utils':** Fix tests by avoiding re-running theme on cleanup. **'@backstage/cli':** Enforcing MUI v5 specific linting to minimize bundle size. diff --git a/docs/local-dev/cli-build-system.md b/docs/local-dev/cli-build-system.md index a5df84f8dc..61e94e9ef4 100644 --- a/docs/local-dev/cli-build-system.md +++ b/docs/local-dev/cli-build-system.md @@ -165,16 +165,17 @@ module.exports = require('@backstage/cli/config/eslint-factory')(__dirname, { The configuration factory also provides utilities for extending the configuration in ways that are otherwise very cumbersome to do with plain ESLint, particularly for rules like `no-restricted-syntax`. These are the extra keys that are available: -| Key | Description | -| ----------------------- | ------------------------------------------------------------------ | -| `tsRules` | Additional rules to apply to TypeScript files | -| `testRules` | Additional rules to apply to tests files | -| `restrictedImports` | Additional paths to add to `no-restricted-imports` | -| `restrictedSrcImports` | Additional paths to add to `no-restricted-imports` in src files | -| `restrictedTestImports` | Additional paths to add to `no-restricted-imports` in test files | -| `restrictedSyntax` | Additional patterns to add to `no-restricted-syntax` | -| `restrictedSrcSyntax` | Additional patterns to add to `no-restricted-syntax` in src files | -| `restrictedTestSyntax` | Additional patterns to add to `no-restricted-syntax` in test files | +| Key | Description | +| -------------------------- | ------------------------------------------------------------------ | +| `tsRules` | Additional rules to apply to TypeScript files | +| `testRules` | Additional rules to apply to tests files | +| `restrictedImports` | Additional paths to add to `no-restricted-imports` | +| `restrictedImportPatterns` | Additional patterns to add to `no-restricted-imports` | +| `restrictedSrcImports` | Additional paths to add to `no-restricted-imports` in src files | +| `restrictedTestImports` | Additional paths to add to `no-restricted-imports` in test files | +| `restrictedSyntax` | Additional patterns to add to `no-restricted-syntax` | +| `restrictedSrcSyntax` | Additional patterns to add to `no-restricted-syntax` in src files | +| `restrictedTestSyntax` | Additional patterns to add to `no-restricted-syntax` in test files | ## Type Checking diff --git a/packages/cli/config/eslint-factory.js b/packages/cli/config/eslint-factory.js index 6888e0ff67..36b51324fc 100644 --- a/packages/cli/config/eslint-factory.js +++ b/packages/cli/config/eslint-factory.js @@ -45,7 +45,7 @@ function createConfig(dir, extraConfig = {}) { testRules, restrictedImports, - restrictedImportsPatterns, + restrictedImportPatterns, restrictedSrcImports, restrictedTestImports, restrictedSyntax, @@ -116,7 +116,7 @@ function createConfig(dir, extraConfig = {}) { '*.test*', '**/__testUtils__/**', '**/__mocks__/**', - ...(restrictedImportsPatterns ?? []), + ...(restrictedImportPatterns ?? []), ], }, ], @@ -220,7 +220,10 @@ function createConfigForRole(dir, role, extraConfig = {}) { ...(extraConfig.restrictedImports ?? []), ], // https://mui.com/material-ui/guides/minimizing-bundle-size/ - restrictedImportsPatterns: ['@mui/*/*/*'], + restrictedImportPatterns: [ + '@mui/*/*/*', + ...(extraConfig.restrictedImportPatterns ?? []), + ], tsRules: { 'react/prop-types': 0, ...extraConfig.tsRules, From 1fd38bc4141a1ba472053b05264b86fcb86b249b Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Tue, 23 May 2023 16:21:22 +0200 Subject: [PATCH 83/83] Update changesets Signed-off-by: Philipp Hugenroth --- .changeset/weak-snails-spar.md | 5 +++++ .changeset/weak-snails-spark.md | 5 +++++ .changeset/weak-snails-sparkl.md | 17 +++++++++++++++++ .changeset/weak-snails-sparkle.md | 21 +-------------------- packages/theme/package.json | 5 ----- yarn.lock | 3 --- 6 files changed, 28 insertions(+), 28 deletions(-) create mode 100644 .changeset/weak-snails-spar.md create mode 100644 .changeset/weak-snails-spark.md create mode 100644 .changeset/weak-snails-sparkl.md diff --git a/.changeset/weak-snails-spar.md b/.changeset/weak-snails-spar.md new file mode 100644 index 0000000000..3cd930d5b0 --- /dev/null +++ b/.changeset/weak-snails-spar.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs-addons-test-utils': patch +--- + +Avoiding re-running tests on cleanup. diff --git a/.changeset/weak-snails-spark.md b/.changeset/weak-snails-spark.md new file mode 100644 index 0000000000..c82626ea39 --- /dev/null +++ b/.changeset/weak-snails-spark.md @@ -0,0 +1,5 @@ +--- +'@backstage/test-utils': minor +--- + +Test App Wrapper is now using `UnifiedThemeProvider` for supporting MUI v5 next to MUI v4 in tests. diff --git a/.changeset/weak-snails-sparkl.md b/.changeset/weak-snails-sparkl.md new file mode 100644 index 0000000000..9bbc7d843b --- /dev/null +++ b/.changeset/weak-snails-sparkl.md @@ -0,0 +1,17 @@ +--- +'@backstage/app-defaults': minor +'@backstage/theme': minor +--- + +**MUI v5 Support:** Adding platform-wide support for MUI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a + +To allow the future support of plugins & components using MUI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` + +```diff + Provider: ({ children }) => ( +- +- {children} +- ++ + ), +``` diff --git a/.changeset/weak-snails-sparkle.md b/.changeset/weak-snails-sparkle.md index 947c20117b..95a2255e56 100644 --- a/.changeset/weak-snails-sparkle.md +++ b/.changeset/weak-snails-sparkle.md @@ -1,24 +1,5 @@ --- -'@backstage/app-defaults': minor -'@backstage/test-utils': minor -'@backstage/theme': minor -'@backstage/plugin-techdocs-addons-test-utils': patch '@backstage/cli': patch --- -**MUI v5 Support:** Adding platform-wide support for MUI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a - -To allow the future support of plugins & components using MUI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` - -```diff - Provider: ({ children }) => ( -- -- {children} -- -+ - ), -``` - -**'@backstage/test-utils':** Test App Wrapper is using `UnifiedThemeProvider` for tests now. -**'@backstage/plugin-techdocs-addons-test-utils':** Fix tests by avoiding re-running theme on cleanup. -**'@backstage/cli':** Enforcing MUI v5 specific linting to minimize bundle size. +Enforcing MUI v5 specific linting to minimize bundle size. diff --git a/packages/theme/package.json b/packages/theme/package.json index 0e73918072..52def665d6 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -42,11 +42,6 @@ "react": "^16.13.1 || ^17.0.0", "react-dom": "^16.13.1 || ^17.0.0" }, - "peerDependenciesMeta": { - "@material-ui/core": { - "optional": true - } - }, "devDependencies": { "@backstage/cli": "workspace:^", "@types/react": "^16.13.1 || ^17.0.0" diff --git a/yarn.lock b/yarn.lock index cc32ce9a0e..2e6f814cf5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9636,9 +9636,6 @@ __metadata: "@types/react": ^16.13.1 || ^17.0.0 react: ^16.13.1 || ^17.0.0 react-dom: ^16.13.1 || ^17.0.0 - peerDependenciesMeta: - "@material-ui/core": - optional: true languageName: unknown linkType: soft