diff --git a/.changeset/odd-pants-sleep.md b/.changeset/odd-pants-sleep.md new file mode 100644 index 0000000000..ad0b95d973 --- /dev/null +++ b/.changeset/odd-pants-sleep.md @@ -0,0 +1,7 @@ +--- +'@backstage/plugin-codescene': patch +'@backstage/plugin-graphiql': patch +'@backstage/plugin-ilert': patch +--- + +Internal refactor to avoid using the deprecated `.icon.svg` extension. diff --git a/.changeset/serious-pants-lie.md b/.changeset/serious-pants-lie.md new file mode 100644 index 0000000000..e67f01dd53 --- /dev/null +++ b/.changeset/serious-pants-lie.md @@ -0,0 +1,21 @@ +--- +'@backstage/cli': patch +--- + +Support for the `.icon.svg` extension has been deprecated and will be removed in the future. The implementation of this extension is too tied to a particular version of MUI and the SVGO, and it makes it harder to evolve the build system. We may introduce the ability to reintroduce this kind of functionality in the future through configuration for use in internal plugins, but for now we're forced to remove it. + +To migrate existing code, rename the `.icon.svg` file to `.tsx` and replace the `` element with `` from MUI and add necessary imports. For example: + +```tsx +import React from 'react'; +import SvgIcon from '@material-ui/core/SvgIcon'; +import { IconComponent } from '@backstage/core-plugin-api'; + +export const CodeSceneIcon = (props: SvgIconProps) => ( + + + + + +); +``` diff --git a/docs/local-dev/cli-build-system.md b/docs/local-dev/cli-build-system.md index 06aec945b9..61e24863fe 100644 --- a/docs/local-dev/cli-build-system.md +++ b/docs/local-dev/cli-build-system.md @@ -484,30 +484,29 @@ of the build system, including the bundling, tests, builds, and type checking. Loaders are always selected based on the file extension. The following is a list of all supported file extensions: -| Extension | Exports | Purpose | -| ----------- | --------------- | -------------------------------------------------------------------------------------- | -| `.ts` | Script Module | TypeScript | -| `.tsx` | Script Module | TypeScript and XML | -| `.js` | Script Module | JavaScript | -| `.jsx` | Script Module | JavaScript and XML | -| `.mjs` | Script Module | ECMAScript Module | -| `.cjs` | Script Module | CommonJS Module | -| `.json` | JSON Data | JSON Data | -| `.yml` | JSON Data | YAML Data | -| `.yaml` | JSON Data | YAML Data | -| `.css` | classes | Style sheet | -| `.eot` | URL Path | Font | -| `.ttf` | URL Path | Font | -| `.woff2` | URL Path | Font | -| `.woff` | URL Path | Font | -| `.bmp` | URL Path | Image | -| `.gif` | URL Path | Image | -| `.jpeg` | URL Path | Image | -| `.jpg` | URL Path | Image | -| `.png` | URL Path | Image | -| `.svg` | URL Path | Image | -| `.md` | URL Path | Markdown File | -| `.icon.svg` | React Component | SVG converted into a [Material UI SvgIcon](https://mui.com/material-ui/icons/#svgicon) | +| Extension | Exports | Purpose | +| --------- | ------------- | ------------------ | +| `.ts` | Script Module | TypeScript | +| `.tsx` | Script Module | TypeScript and XML | +| `.js` | Script Module | JavaScript | +| `.jsx` | Script Module | JavaScript and XML | +| `.mjs` | Script Module | ECMAScript Module | +| `.cjs` | Script Module | CommonJS Module | +| `.json` | JSON Data | JSON Data | +| `.yml` | JSON Data | YAML Data | +| `.yaml` | JSON Data | YAML Data | +| `.css` | classes | Style sheet | +| `.eot` | URL Path | Font | +| `.ttf` | URL Path | Font | +| `.woff2` | URL Path | Font | +| `.woff` | URL Path | Font | +| `.bmp` | URL Path | Image | +| `.gif` | URL Path | Image | +| `.jpeg` | URL Path | Image | +| `.jpg` | URL Path | Image | +| `.png` | URL Path | Image | +| `.svg` | URL Path | Image | +| `.md` | URL Path | Markdown File | ## Jest Configuration diff --git a/packages/cli/asset-types/asset-types.d.ts b/packages/cli/asset-types/asset-types.d.ts index a1c053dc54..2d288fd0e3 100644 --- a/packages/cli/asset-types/asset-types.d.ts +++ b/packages/cli/asset-types/asset-types.d.ts @@ -60,10 +60,40 @@ declare module '*.yaml' { export default src; } +/** + * @deprecated support for .icon.svg extensions are being removed, inline the SVG elements in a MUI SvgIcon instead. + * @example + * ```tsx + * import SvgIcon from '@material-ui/core/SvgIcon'; + * + * const MyIcon = () => ( + * + * + * + * + * + * ) + * ``` + */ declare module '*.icon.svg' { import { ComponentType } from 'react'; import { SvgIconProps } from '@material-ui/core'; + /** + * @deprecated support for .icon.svg extensions are being removed, inline the SVG elements in a MUI SvgIcon instead. + * @example + * ```tsx + * import SvgIcon from '@material-ui/core/SvgIcon'; + * + * const MyIcon = () => ( + * + * + * + * + * + * ) + * ``` + */ const Icon: ComponentType; export default Icon; } diff --git a/packages/cli/src/lib/svgrTemplate.ts b/packages/cli/src/lib/svgrTemplate.ts index b583004f81..5407dc4c62 100644 --- a/packages/cli/src/lib/svgrTemplate.ts +++ b/packages/cli/src/lib/svgrTemplate.ts @@ -34,6 +34,8 @@ export function svgrTemplate( ${imports} import SvgIcon from '@material-ui/core/SvgIcon'; +console.log('DEPRECATION WARNING: The .icon.svg extension is deprecated, inline the SVG elements in a MUI SvgIcon instead.', Object.assign(new Error(), {name: 'Warning'}).stack); + ${interfaces} const ${name} = (${props}) => React.createElement(SvgIcon, ${props}, ${jsx.children}); diff --git a/plugins/codescene/README.md b/plugins/codescene/README.md index fa44506964..bbfb58e68f 100644 --- a/plugins/codescene/README.md +++ b/plugins/codescene/README.md @@ -2,8 +2,6 @@ [CodeScene](https://codescene.com/) is a multi-purpose tool bridging code, business and people. See hidden risks and social patterns in your code. Prioritize and reduce technical debt. -![codescene-logo](./src/assets/codescene.icon.svg) - The CodeScene Backstage Plugin exposes a page component that will list the existing projects and their analysis data on your CodeScene instance. ![screenshot](./docs/codescene-plugin-screenshot.png) diff --git a/plugins/codescene/dev/index.tsx b/plugins/codescene/dev/index.tsx index 28ef638131..e6074f74fc 100644 --- a/plugins/codescene/dev/index.tsx +++ b/plugins/codescene/dev/index.tsx @@ -20,11 +20,13 @@ import { CodeScenePage, CodeSceneProjectDetailsPage, } from '../src/plugin'; +import { CodeSceneIcon } from '../src'; createDevApp() .registerPlugin(codescenePlugin) .addPage({ element: , + icon: CodeSceneIcon, title: 'Root Page', path: '/codescene', }) diff --git a/plugins/codescene/src/CodeSceneIcon.tsx b/plugins/codescene/src/CodeSceneIcon.tsx new file mode 100644 index 0000000000..ac694126da --- /dev/null +++ b/plugins/codescene/src/CodeSceneIcon.tsx @@ -0,0 +1,31 @@ +/* + * 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 from 'react'; +import SvgIcon from '@material-ui/core/SvgIcon'; +import { IconComponent } from '@backstage/core-plugin-api'; + +/** + * @public + */ +export const CodeSceneIcon: IconComponent = () => ( + + + + + + +); diff --git a/plugins/codescene/src/assets/codescene.icon.svg b/plugins/codescene/src/assets/codescene.icon.svg deleted file mode 100644 index e8102a4116..0000000000 --- a/plugins/codescene/src/assets/codescene.icon.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/plugins/codescene/src/index.ts b/plugins/codescene/src/index.ts index 355ff4eb31..301b4377a7 100644 --- a/plugins/codescene/src/index.ts +++ b/plugins/codescene/src/index.ts @@ -18,11 +18,4 @@ export { CodeScenePage, CodeSceneProjectDetailsPage, } from './plugin'; -import CodeSceneIconComponent from './assets/codescene.icon.svg'; -import { IconComponent } from '@backstage/core-plugin-api'; - -/** - * @public - */ -export const CodeSceneIcon: IconComponent = - CodeSceneIconComponent as IconComponent; +export { CodeSceneIcon } from './CodeSceneIcon'; diff --git a/plugins/graphiql/api-report.md b/plugins/graphiql/api-report.md index 984b90ae88..4c760c33b7 100644 --- a/plugins/graphiql/api-report.md +++ b/plugins/graphiql/api-report.md @@ -79,6 +79,4 @@ export class GraphQLEndpoints implements GraphQLBrowseApi { // @public (undocumented) export const Router: () => React_2.JSX.Element; - -// (No @packageDocumentation comment for this package) ``` diff --git a/plugins/graphiql/dev/index.tsx b/plugins/graphiql/dev/index.tsx index 163b4d0512..5d7bff5f32 100644 --- a/plugins/graphiql/dev/index.tsx +++ b/plugins/graphiql/dev/index.tsx @@ -21,9 +21,9 @@ import { errorApiRef, IconComponent, } from '@backstage/core-plugin-api'; -import GraphiQLIcon from '../src/assets/graphiql.icon.svg'; import { graphiqlPlugin, + GraphiQLIcon, GraphQLEndpoints, graphQlBrowseApiRef, GraphiQLPage, diff --git a/plugins/graphiql/src/GraphiQLIcon.tsx b/plugins/graphiql/src/GraphiQLIcon.tsx new file mode 100644 index 0000000000..c48c47bc09 --- /dev/null +++ b/plugins/graphiql/src/GraphiQLIcon.tsx @@ -0,0 +1,44 @@ +/* + * 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 from 'react'; +import SvgIcon from '@material-ui/core/SvgIcon'; +import { IconComponent } from '@backstage/core-plugin-api'; + +/** + * @public + */ +export const GraphiQLIcon: IconComponent = () => ( + + + + + + + + + + + + + + + + + + + +); diff --git a/plugins/graphiql/src/alpha.tsx b/plugins/graphiql/src/alpha.tsx index 08950b9072..0a27f6151b 100644 --- a/plugins/graphiql/src/alpha.tsx +++ b/plugins/graphiql/src/alpha.tsx @@ -30,8 +30,8 @@ import { graphQlBrowseApiRef, GraphQLEndpoints, GraphQLEndpoint, + GraphiQLIcon, } from '@backstage/plugin-graphiql'; -import GraphiQLIcon from './assets/graphiql.icon.svg'; import { createApiFactory, createRouteRef, diff --git a/plugins/graphiql/src/assets/graphiql.icon.svg b/plugins/graphiql/src/assets/graphiql.icon.svg deleted file mode 100644 index e16f0e307c..0000000000 --- a/plugins/graphiql/src/assets/graphiql.icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/plugins/graphiql/src/index.ts b/plugins/graphiql/src/index.ts index 284b78fa35..d7326134ff 100644 --- a/plugins/graphiql/src/index.ts +++ b/plugins/graphiql/src/index.ts @@ -20,18 +20,12 @@ * @packageDocumentation */ -import GraphiQLIconComponent from './assets/graphiql.icon.svg'; -import { IconComponent } from '@backstage/core-plugin-api'; - export { graphiqlPlugin, graphiqlPlugin as plugin, GraphiQLPage, } from './plugin'; +export { GraphiQLIcon } from './GraphiQLIcon'; export { GraphiQLPage as Router } from './components'; export * from './lib/api'; export * from './route-refs'; - -/** @public */ -export const GraphiQLIcon: IconComponent = - GraphiQLIconComponent as IconComponent; diff --git a/plugins/ilert/api-report.md b/plugins/ilert/api-report.md index 821a3a6bd0..da752d4c16 100644 --- a/plugins/ilert/api-report.md +++ b/plugins/ilert/api-report.md @@ -810,6 +810,4 @@ export type UserRole = | 'STAKEHOLDER' | 'ACCOUNT_OWNER' | 'RESPONDER'; - -// (No @packageDocumentation comment for this package) ``` diff --git a/plugins/ilert/src/ILertIcon.tsx b/plugins/ilert/src/ILertIcon.tsx new file mode 100644 index 0000000000..ffe1ae0877 --- /dev/null +++ b/plugins/ilert/src/ILertIcon.tsx @@ -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 React from 'react'; +import SvgIcon from '@material-ui/core/SvgIcon'; +import { IconComponent } from '@backstage/core-plugin-api'; + +/** + * @public + */ +export const ILertIcon: IconComponent = () => ( + + + + + + + + + + +); diff --git a/plugins/ilert/src/assets/ilert.icon.svg b/plugins/ilert/src/assets/ilert.icon.svg deleted file mode 100644 index 5109286355..0000000000 --- a/plugins/ilert/src/assets/ilert.icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/plugins/ilert/src/index.ts b/plugins/ilert/src/index.ts index 5fcf42011b..39e3dac9ec 100644 --- a/plugins/ilert/src/index.ts +++ b/plugins/ilert/src/index.ts @@ -20,9 +20,6 @@ * @packageDocumentation */ -import ILertIconComponent from './assets/ilert.icon.svg'; -import { IconComponent } from '@backstage/core-plugin-api'; - export { ilertPlugin, ilertPlugin as plugin, @@ -35,9 +32,7 @@ export { isPluginApplicableToEntity as isILertAvailable, ILertCard, } from './components'; +export { ILertIcon } from './ILertIcon'; export * from './api'; export * from './route-refs'; export * from './types'; - -/** @public */ -export const ILertIcon: IconComponent = ILertIconComponent as IconComponent;