paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 19 Packages Projects Releases Wiki Activity

refactor: move to core components and rename it

Browse Source 
Signed-off-by: Camila Belo <camilaibs@gmail.com>
This commit is contained in:
Camila Belo
2024-02-26 18:48:05 +01:00
parent e4a8455a18
commit f8b8e2fe6f
12 changed files with 66 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/friendly-news-sin.md
+2 -2
View File
@@ -1,5 +1,5 @@
---
'@backstage/core-compat-api': patch
'@backstage/core-components': minor
---
Create an abstraction to consume legacy system icons in new system extensions.
Create a component abstraction to consume system icons.
.changeset/red-taxis-swim.md
+1 -1
View File
@@ -2,4 +2,4 @@
'@backstage/plugin-api-docs': patch
---
Use the system icon compatibility component in the navigation item extension.
Use the `AppIcon` component in the navigation item extension.
packages/core-compat-api/api-report.md
-11
View File
@@ -8,11 +8,9 @@ import { AnalyticsApi as AnalyticsApi_2 } from '@backstage/frontend-plugin-api';
import { AnalyticsEvent } from '@backstage/core-plugin-api';
import { AnalyticsEvent as AnalyticsEvent_2 } from '@backstage/frontend-plugin-api';
import { AnyRouteRefParams } from '@backstage/core-plugin-api';
import { ComponentProps } from 'react';
import { ExternalRouteRef } from '@backstage/core-plugin-api';
import { ExternalRouteRef as ExternalRouteRef_2 } from '@backstage/frontend-plugin-api';
import { FrontendFeature } from '@backstage/frontend-plugin-api';
import { IconComponent } from '@backstage/core-plugin-api';
import { default as React_2 } from 'react';
import { ReactNode } from 'react';
import { RouteRef } from '@backstage/core-plugin-api';
@@ -71,15 +69,6 @@ export class NoOpAnalyticsApi implements AnalyticsApi, AnalyticsApi_2 {
captureEvent(_event: AnalyticsEvent | AnalyticsEvent_2): void;
}
// @public
export function SystemIcon(props: SystemIconProps): React_2.JSX.Element;
// @public
export type SystemIconProps = ComponentProps<IconComponent> & {
keys: string | string[];
Fallback?: IconComponent;
};
// @public
export type ToNewRouteRef<T extends RouteRef | SubRouteRef | ExternalRouteRef> =
T extends RouteRef<infer IParams>
packages/core-compat-api/package.json
-1
View File
@@ -45,7 +45,6 @@
"@backstage/plugin-catalog": "workspace:^",
"@backstage/plugin-puppetdb": "workspace:^",
"@backstage/plugin-stackstorm": "workspace:^",
"@backstage/test-utils": "workspace:^",
"@oriflame/backstage-plugin-score-card": "^0.8.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^14.0.0"
packages/core-compat-api/src/components/SystemIcon.tsx
-78
View File
@@ -1,78 +0,0 @@
/*
* Copyright 2024 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, { ComponentProps } from 'react';
import { useApp, IconComponent } from '@backstage/core-plugin-api';
import { compatWrapper } from '../compatWrapper';
/**
* @public
* Props for the SystemIcon component.
*/
export type SystemIconProps = ComponentProps<IconComponent> & {
// The id of the system icon to render, if provided as an array, the first icon found will be rendered.
keys: string | string[];
// An optional fallback icon component to render when the system icon is not found.
// Default to () => null.
Fallback?: IconComponent;
};
function SystemIcon(props: SystemIconProps) {
const { keys, Fallback = () => null, ...rest } = props;
const app = useApp();
for (const key of Array.isArray(keys) ? keys : [keys]) {
const Icon = app.getSystemIcon(key);
if (Icon) return <Icon {...rest} />;
}
return <Fallback {...rest} />;
}
/**
* @public
* SystemIcon is a component that renders a system icon by its id.
* @example
* Rendering the "kind:api" icon:
* ```tsx
* <SystemIcon keys="kind:api" />
* ```
* @example
* Providing multiple icon ids:
* ```tsx
* <SystemIcon keys={['kind:user', 'user']} />
* ```
* @example
* Customizing the fallback icon:
* ```tsx
* <SystemIcon keys="kind:api" Fallback={ApiFallbackIcon} />
* ```
* @example
* Customizing the icon font size:
* ```tsx
* <SystemIcon keys="kind:api" fontSize="medium" />
* ```
*/
function CompatSystemIcon(props: SystemIconProps) {
try {
// Check if the app context is available
useApp();
return <SystemIcon {...props} />;
} catch {
// Fallback to the compat wrapper if the app context is not available
return compatWrapper(<SystemIcon {...props} />);
}
}
export { CompatSystemIcon as SystemIcon };
packages/core-compat-api/src/components/index.ts
-17
View File
@@ -1,17 +0,0 @@
/*
* Copyright 2024 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 { SystemIcon, type SystemIconProps } from './SystemIcon';
packages/core-compat-api/src/index.ts
-2
View File
@@ -17,8 +17,6 @@ export * from './compatWrapper';
export * from './apis';
export * from './components';
export { convertLegacyApp } from './convertLegacyApp';
export {
convertLegacyRouteRef,
packages/core-components/api-report.md
+12 -2
View File
@@ -66,6 +66,15 @@ export type AlertDisplayProps = {
transientTimeoutMs?: number;
};
// @public
export function AppIcon(props: AppIconProps): React_2.JSX.Element;
// @public
export type AppIconProps = IconComponentProps & {
id: string;
Fallback?: IconComponent;
};
// @public
export const AutoLogout: (props: AutoLogoutProps) => JSX.Element | null;
@@ -130,8 +139,6 @@ export type BreadcrumbsClickableTextClassKey = 'root';
// @public (undocumented)
export type BreadcrumbsStyledBoxClassKey = 'root';
// Warning: (ae-forgotten-export) The symbol "IconComponentProps" needs to be exported by the entry point index.d.ts
//
// @public
export function BrokenImageIcon(props: IconComponentProps): React_2.JSX.Element;
@@ -541,6 +548,9 @@ export type HorizontalScrollGridClassKey =
| 'buttonLeft'
| 'buttonRight';
// @public
export type IconComponentProps = ComponentProps<IconComponent>;
// @public (undocumented)
export function IconLinkVertical({
color,
packages/core-compat-api/src/components/SystemIcon.test.tsx → packages/core-components/src/icons/icons.test.tsx
+13 -13
View File
@@ -17,24 +17,24 @@
import React from 'react';
import { screen } from '@testing-library/react';
import { renderInTestApp } from '@backstage/test-utils';
import { SystemIcon } from './SystemIcon';
import { AppIcon } from './icons';
describe('SystemIcon', () => {
describe('AppIcon', () => {
it('should render the correct system icon', async () => {
const { container } = await renderInTestApp(<SystemIcon keys="kind:api" />);
expect(container.querySelector('svg')).toBeDefined();
await renderInTestApp(<AppIcon data-testid="Api Icon" id="kind:api" />);
expect(screen.getByTestId('Api Icon')).toBeDefined();
});
it('should render the first found icon when multiple keys are provided', async () => {
const { container } = await renderInTestApp(
<SystemIcon keys={['unknown', 'kind:api']} />,
);
expect(container.querySelector('svg')).toBeDefined();
});
it('should render the fallback component when no system icon is found', async () => {
it('should render the default fallback component', async () => {
await renderInTestApp(
<SystemIcon keys="unknown" Fallback={() => <div>Fallback Icon</div>} />,
<AppIcon data-testid="Fallback Icon" id="kind:api" />,
);
expect(screen.getByTestId('Fallback Icon')).toBeDefined();
});
it('should render the custom fallback component', async () => {
await renderInTestApp(
<AppIcon id="unknown" Fallback={() => <div>Fallback Icon</div>} />,
);
expect(screen.getByText('Fallback Icon')).toBeInTheDocument();
});
packages/core-components/src/icons/icons.tsx
+36 -17
View File
@@ -18,61 +18,80 @@ import { IconComponent, useApp } from '@backstage/core-plugin-api';
import MuiBrokenImageIcon from '@material-ui/icons/BrokenImage';
import React, { ComponentProps } from 'react';
type IconComponentProps = ComponentProps<IconComponent>;
/**
* @public
* Props for the {@link @backstage/core-plugin-api#IconComponent} component.
*/
export type IconComponentProps = ComponentProps<IconComponent>;
function useSystemIcon(key: string, props: IconComponentProps) {
/**
* @public
* Props for the {@link AppIcon} component.
*/
export type AppIconProps = IconComponentProps & {
// The key of the system icon to render.
id: string;
// An optional fallback icon component to render when the system icon is not found.
// Default to () => null.
Fallback?: IconComponent;
};
/**
* @public
* A component that renders a system icon by its id.
*/
export function AppIcon(props: AppIconProps) {
const { id: key, Fallback = MuiBrokenImageIcon, ...rest } = props;
const app = useApp();
const Icon = app.getSystemIcon(key);
return Icon ? <Icon {...props} /> : <MuiBrokenImageIcon {...props} />;
const Icon = app.getSystemIcon(key) ?? Fallback;
return <Icon {...rest} />;
}
// Should match the list of overridable system icon keys in @backstage/core-app-api
/**
* Broken Image Icon
*
* @public
*
*/
export function BrokenImageIcon(props: IconComponentProps) {
return useSystemIcon('brokenImage', props);
return <AppIcon id="brokenImage" {...props} />;
}
/** @public */
export function CatalogIcon(props: IconComponentProps) {
return useSystemIcon('catalog', props);
return <AppIcon id="catalog" {...props} />;
}
/** @public */
export function ChatIcon(props: IconComponentProps) {
return useSystemIcon('chat', props);
return <AppIcon id="chat" {...props} />;
}
/** @public */
export function DashboardIcon(props: IconComponentProps) {
return useSystemIcon('dashboard', props);
return <AppIcon id="dashboard" {...props} />;
}
/** @public */
export function DocsIcon(props: IconComponentProps) {
return useSystemIcon('docs', props);
return <AppIcon id="docs" {...props} />;
}
/** @public */
export function EmailIcon(props: IconComponentProps) {
return useSystemIcon('email', props);
return <AppIcon id="email" {...props} />;
}
/** @public */
export function GitHubIcon(props: IconComponentProps) {
return useSystemIcon('github', props);
return <AppIcon id="github" {...props} />;
}
/** @public */
export function GroupIcon(props: IconComponentProps) {
return useSystemIcon('group', props);
return <AppIcon id="group" {...props} />;
}
/** @public */
export function HelpIcon(props: IconComponentProps) {
return useSystemIcon('help', props);
return <AppIcon id="help" {...props} />;
}
/** @public */
export function UserIcon(props: IconComponentProps) {
return useSystemIcon('user', props);
return <AppIcon id="user" {...props} />;
}
/** @public */
export function WarningIcon(props: IconComponentProps) {
return useSystemIcon('warning', props);
return <AppIcon id="warning" {...props} />;
}
plugins/api-docs/src/alpha.tsx
+2 -2
View File
@@ -27,7 +27,6 @@ import {
} from '@backstage/frontend-plugin-api';
import {
SystemIcon,
compatWrapper,
convertLegacyRouteRef,
} from '@backstage/core-compat-api';
@@ -45,11 +44,12 @@ import {
import { defaultDefinitionWidgets } from './components/ApiDefinitionCard';
import { rootRoute, registerComponentRouteRef } from './routes';
import { apiDocsConfigRef } from './config';
import { AppIcon } from '@backstage/core-components';
const apiDocsNavItem = createNavItemExtension({
title: 'APIs',
routeRef: convertLegacyRouteRef(rootRoute),
icon: () => <SystemIcon keys="kind:api" />,
icon: () => <AppIcon id="kind:api" />,
});
const apiDocsConfigApi = createApiExtension({
yarn.lock
-1
View File
@@ -3818,7 +3818,6 @@ __metadata:
"@backstage/plugin-catalog": "workspace:^"
"@backstage/plugin-puppetdb": "workspace:^"
"@backstage/plugin-stackstorm": "workspace:^"
"@backstage/test-utils": "workspace:^"
"@backstage/version-bridge": "workspace:^"
"@oriflame/backstage-plugin-score-card": ^0.8.0
"@testing-library/jest-dom": ^6.0.0