Move ScmIntegrationIcon

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>

.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()`.

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)

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';

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('<ScmIntegrationIcon />', () => {
+  it('renders without exploding (github)', async () => {
+    const { baseElement } = await renderInTestApp(
+      <ScmIntegrationIcon type="github" />,
+    );
+    expect(baseElement.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('renders without exploding (unknown)', async () => {
+    const { baseElement } = await renderInTestApp(
+      <ScmIntegrationIcon type="unknown" />,
+    );
+    expect(baseElement.querySelector('svg')).toBeInTheDocument();
+  });
+});

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 <GitHubIcon />;
-    default:
-      return <CodeIcon />;
-  }
+  const app = useApp();
+  const DefaultIcon = CodeIcon;
+  const Icon = type ? app.getSystemIcon(type) ?? DefaultIcon : DefaultIcon;
+  return <Icon />;
 };

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';

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';

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';

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: {

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';