From f4e3ac5ce63b468845e98c4c4300bfc3e8ae2456 Mon Sep 17 00:00:00 2001 From: Oliver Sand Date: Tue, 8 Jun 2021 13:31:45 +0200 Subject: [PATCH] Move `ScmIntegrationIcon` Signed-off-by: Oliver Sand --- .changeset/long-socks-fold.md | 8 +++++ packages/integration-react/api-report.md | 5 +++ .../src/{ => api}/ScmIntegrationsApi.test.ts | 0 .../src/{ => api}/ScmIntegrationsApi.ts | 0 packages/integration-react/src/api/index.ts | 20 +++++++++++ .../ScmIntegrationIcon.test.tsx | 34 +++++++++++++++++++ .../ScmIntegrationIcon.tsx | 16 +++------ .../components/ScmIntegrationIcon/index.ts | 17 ++++++++++ .../integration-react/src/components/index.ts | 17 ++++++++++ packages/integration-react/src/index.ts | 6 ++-- .../src/components/AboutCard/AboutCard.tsx | 14 +++++--- .../catalog/src/components/AboutCard/index.ts | 1 - 12 files changed, 118 insertions(+), 20 deletions(-) create mode 100644 .changeset/long-socks-fold.md rename packages/integration-react/src/{ => api}/ScmIntegrationsApi.test.ts (100%) rename packages/integration-react/src/{ => api}/ScmIntegrationsApi.ts (100%) create mode 100644 packages/integration-react/src/api/index.ts create mode 100644 packages/integration-react/src/components/ScmIntegrationIcon/ScmIntegrationIcon.test.tsx rename {plugins/catalog/src/components/AboutCard => packages/integration-react/src/components/ScmIntegrationIcon}/ScmIntegrationIcon.tsx (64%) create mode 100644 packages/integration-react/src/components/ScmIntegrationIcon/index.ts create mode 100644 packages/integration-react/src/components/index.ts diff --git a/.changeset/long-socks-fold.md b/.changeset/long-socks-fold.md new file mode 100644 index 0000000000..23a7811685 --- /dev/null +++ b/.changeset/long-socks-fold.md @@ -0,0 +1,8 @@ +--- +'@backstage/integration-react': patch +'@backstage/plugin-catalog': patch +--- + +Move `ScmIntegrationIcon` from `@backstage/plugin-catalog` to +`@backstage/integration-react` and make it customizable using +`app.getSystemIcon()`. diff --git a/packages/integration-react/api-report.md b/packages/integration-react/api-report.md index 7c37ab0392..63a538213c 100644 --- a/packages/integration-react/api-report.md +++ b/packages/integration-react/api-report.md @@ -8,6 +8,11 @@ import { ApiRef } from '@backstage/core'; import { Config } from '@backstage/config'; import { ScmIntegrationRegistry } from '@backstage/integration'; +// @public (undocumented) +export const ScmIntegrationIcon: ({ type }: { + type?: string | undefined; +}) => JSX.Element; + // @public (undocumented) export class ScmIntegrationsApi { // (undocumented) diff --git a/packages/integration-react/src/ScmIntegrationsApi.test.ts b/packages/integration-react/src/api/ScmIntegrationsApi.test.ts similarity index 100% rename from packages/integration-react/src/ScmIntegrationsApi.test.ts rename to packages/integration-react/src/api/ScmIntegrationsApi.test.ts diff --git a/packages/integration-react/src/ScmIntegrationsApi.ts b/packages/integration-react/src/api/ScmIntegrationsApi.ts similarity index 100% rename from packages/integration-react/src/ScmIntegrationsApi.ts rename to packages/integration-react/src/api/ScmIntegrationsApi.ts diff --git a/packages/integration-react/src/api/index.ts b/packages/integration-react/src/api/index.ts new file mode 100644 index 0000000000..5483765b2e --- /dev/null +++ b/packages/integration-react/src/api/index.ts @@ -0,0 +1,20 @@ +/* + * Copyright 2021 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { + ScmIntegrationsApi, + scmIntegrationsApiRef, +} from './ScmIntegrationsApi'; diff --git a/packages/integration-react/src/components/ScmIntegrationIcon/ScmIntegrationIcon.test.tsx b/packages/integration-react/src/components/ScmIntegrationIcon/ScmIntegrationIcon.test.tsx new file mode 100644 index 0000000000..13ffd61264 --- /dev/null +++ b/packages/integration-react/src/components/ScmIntegrationIcon/ScmIntegrationIcon.test.tsx @@ -0,0 +1,34 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { renderInTestApp } from '@backstage/test-utils'; +import React from 'react'; +import { ScmIntegrationIcon } from './ScmIntegrationIcon'; + +describe('', () => { + it('renders without exploding (github)', async () => { + const { baseElement } = await renderInTestApp( + , + ); + expect(baseElement.querySelector('svg')).toBeInTheDocument(); + }); + + it('renders without exploding (unknown)', async () => { + const { baseElement } = await renderInTestApp( + , + ); + expect(baseElement.querySelector('svg')).toBeInTheDocument(); + }); +}); diff --git a/plugins/catalog/src/components/AboutCard/ScmIntegrationIcon.tsx b/packages/integration-react/src/components/ScmIntegrationIcon/ScmIntegrationIcon.tsx similarity index 64% rename from plugins/catalog/src/components/AboutCard/ScmIntegrationIcon.tsx rename to packages/integration-react/src/components/ScmIntegrationIcon/ScmIntegrationIcon.tsx index c96401135e..99745f977e 100644 --- a/plugins/catalog/src/components/AboutCard/ScmIntegrationIcon.tsx +++ b/packages/integration-react/src/components/ScmIntegrationIcon/ScmIntegrationIcon.tsx @@ -13,19 +13,13 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { useApp } from '@backstage/core'; import CodeIcon from '@material-ui/icons/Code'; -import GitHubIcon from '@material-ui/icons/GitHub'; import React from 'react'; export const ScmIntegrationIcon = ({ type }: { type?: string }) => { - // TODO: In the future we might want to support more types here as a GitLab or - // Bitbucket icons were requested here in the past, or even use the icon - // customization feature of the app. But material UI react doesn't provide more. - - switch (type) { - case 'github': - return ; - default: - return ; - } + const app = useApp(); + const DefaultIcon = CodeIcon; + const Icon = type ? app.getSystemIcon(type) ?? DefaultIcon : DefaultIcon; + return ; }; diff --git a/packages/integration-react/src/components/ScmIntegrationIcon/index.ts b/packages/integration-react/src/components/ScmIntegrationIcon/index.ts new file mode 100644 index 0000000000..1fd477c6d9 --- /dev/null +++ b/packages/integration-react/src/components/ScmIntegrationIcon/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { ScmIntegrationIcon } from './ScmIntegrationIcon'; diff --git a/packages/integration-react/src/components/index.ts b/packages/integration-react/src/components/index.ts new file mode 100644 index 0000000000..895df5c3b8 --- /dev/null +++ b/packages/integration-react/src/components/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export * from './ScmIntegrationIcon'; diff --git a/packages/integration-react/src/index.ts b/packages/integration-react/src/index.ts index 5483765b2e..bb1addc8b8 100644 --- a/packages/integration-react/src/index.ts +++ b/packages/integration-react/src/index.ts @@ -14,7 +14,5 @@ * limitations under the License. */ -export { - ScmIntegrationsApi, - scmIntegrationsApiRef, -} from './ScmIntegrationsApi'; +export * from './api'; +export * from './components'; diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.tsx index 2bcf2a5453..3e8aec3e73 100644 --- a/plugins/catalog/src/components/AboutCard/AboutCard.tsx +++ b/plugins/catalog/src/components/AboutCard/AboutCard.tsx @@ -26,8 +26,16 @@ import { InfoCardVariants, useApi, } from '@backstage/core'; -import { scmIntegrationsApiRef } from '@backstage/integration-react'; -import { getEntityRelations, useEntity } from '@backstage/plugin-catalog-react'; +import { + ScmIntegrationIcon, + scmIntegrationsApiRef, +} from '@backstage/integration-react'; +import { + getEntityMetadataEditUrl, + getEntityRelations, + getEntitySourceLocation, + useEntity, +} from '@backstage/plugin-catalog-react'; import { Card, CardContent, @@ -40,9 +48,7 @@ import DocsIcon from '@material-ui/icons/Description'; import EditIcon from '@material-ui/icons/Edit'; import ExtensionIcon from '@material-ui/icons/Extension'; import React from 'react'; -import { getEntityMetadataEditUrl, getEntitySourceLocation } from '../../utils'; import { AboutContent } from './AboutContent'; -import { ScmIntegrationIcon } from './ScmIntegrationIcon'; const useStyles = makeStyles({ gridItemCard: { diff --git a/plugins/catalog/src/components/AboutCard/index.ts b/plugins/catalog/src/components/AboutCard/index.ts index 262f0bedd3..8b7e5a1a81 100644 --- a/plugins/catalog/src/components/AboutCard/index.ts +++ b/plugins/catalog/src/components/AboutCard/index.ts @@ -17,4 +17,3 @@ export { AboutCard } from './AboutCard'; export { AboutContent } from './AboutContent'; export { AboutField } from './AboutField'; -export { ScmIntegrationIcon } from './ScmIntegrationIcon';