badges: use new error api. revert css layout tweak for CodeSnippet. add basic frontend test. improve doc.

Signed-off-by: Andreas Stenius <andreas.stenius@svenskaspel.se>

plugins/badges/src/components/EntityBadgesDialog.test.tsx

@@ -0,0 +1,61 @@
+/*
+ * 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.
+ */
+
+import React from 'react';
+import { Entity } from '@backstage/catalog-model';
+import {
+  ApiProvider,
+  ApiRegistry,
+  ErrorApi,
+  errorApiRef,
+} from '@backstage/core';
+import { renderWithEffects } from '@backstage/test-utils';
+import { BadgesApi, badgesApiRef } from '../api';
+import { EntityBadgesDialog } from './EntityBadgesDialog';
+
+describe('EntityBadgesDialog', () => {
+  it('should render', async () => {
+    const mockApi: jest.Mocked<BadgesApi> = {
+      getEntityBadgeSpecs: jest.fn().mockResolvedValue([
+        {
+          id: 'testbadge',
+          badge: {
+            label: 'test',
+            message: 'badge',
+          },
+          url: 'http://127.0.0.1/badges/entity/.../testbadge',
+          markdown: '![test: badge](http://127.0.0.1/catalog/...)',
+        },
+      ]),
+    };
+    const mockEntity = { metadata: { name: 'mock' } } as Entity;
+
+    const rendered = await renderWithEffects(
+      <ApiProvider
+        apis={ApiRegistry.with(badgesApiRef, mockApi).with(
+          errorApiRef,
+          {} as ErrorApi,
+        )}
+      >
+        <EntityBadgesDialog open entity={mockEntity} />
+      </ApiProvider>,
+    );
+
+    await expect(
+      rendered.findByText('testbadge badge'),
+    ).resolves.toBeInTheDocument();
+  });
+});

plugins/badges/src/components/EntityBadgesDialog.tsx

@@ -35,14 +35,11 @@ import { badgesApiRef } from '../api';
 
 type Props = {
   open: boolean;
-  onClose: () => any;
+  onClose?: () => any;
   entity: Entity;
 };
 
 const useStyles = makeStyles({
-  content: {
-    overflowX: 'hidden',
-  },
   codeBlock: {
     '& code': {
       whiteSpace: 'pre-wrap',
@@ -85,7 +82,7 @@ export const EntityBadgesDialog = ({ open, onClose, entity }: Props) => {
     <Dialog fullScreen={fullScreen} open={open} onClose={onClose}>
       <DialogTitle id="badges-dialog-title">Entity Badges</DialogTitle>
 
-      <DialogContent className={classes.content}>
+      <DialogContent>
         {loading ? <Progress /> : null}
 
         {error ? (