Fixed review comments

Signed-off-by: Deepak Bhardwaj <deepak.bhardwaj@outlook.com>

plugins/allure/README.md

@@ -1,4 +1,4 @@
-# Allure
+# [Allure](https://docs.qameta.io/allure/)
 
 Welcome to the Backstage Allure plugin. This plugin add an entity service page to display Allure test reports related to the service.
 
@@ -24,7 +24,7 @@ Add below configuration in the `app-config.yaml`.
 
 ```yaml
 allure:
-  baseUrl: <ALLURE_SERVICE_BASE_URL> # Example: http://localhost:5050/allure-docker-service
+  baseUrl: <ALLURE_SERVICE_BASE_URL> # Example: https://allure.my-company.net or when running allure locally, http://localhost:5050/allure-docker-service
 ```
 
 ### Setup entity service page

plugins/allure/dev/example-entity.yaml

@@ -0,0 +1,11 @@
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: allure-example-service
+  description: Allure Example Service
+  annotations:
+    qameta.io/allure-project: sample
+spec:
+  type: service
+  lifecycle: experimental
+  owner: team-a

plugins/allure/dev/index.tsx

@@ -16,11 +16,39 @@
 import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
 import { EntityAllureReportContent } from '../src/plugin';
+import { Content, Header, Page } from '@backstage/core-components';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
+import { Entity } from '@backstage/catalog-model';
+
+import exampleEntity from './example-entity.yaml';
+import { allureApiRef } from '../src/api';
 
 createDevApp()
-  .registerPlugin()
+  .registerApi({
+    api: allureApiRef,
+    deps: {},
+    factory: () =>
+      ({
+        async getReportUrl(projectId: string) {
+          return Promise.resolve(
+            // Follow the instructions from https://github.com/fescobar/allure-docker-service-ui
+            // to setup Allure service locally
+            `http://localhost:5050/allure-docker-service/projects/${projectId}/reports/latest/index.html`,
+          );
+        },
+      } as unknown as typeof allureApiRef.T),
+  })
   .addPage({
-    element: <EntityAllureReportContent />,
+    element: (
+      <Page themeId="home">
+        <Header title="Allure Report" />
+        <Content>
+          <EntityProvider entity={exampleEntity as any as Entity}>
+            <EntityAllureReportContent />
+          </EntityProvider>
+        </Content>
+      </Page>
+    ),
     title: 'Allure Report',
     path: '/allure',
   })

plugins/allure/package.json

@@ -4,6 +4,7 @@
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
+  "private": false,
   "publishConfig": {
     "access": "public",
     "main": "dist/index.esm.js",

plugins/allure/src/components/AllureReportComponent/AllureReportComponent.tsx

@@ -21,8 +21,8 @@ import { useEntity } from '@backstage/plugin-catalog-react';
 import {
   ALLURE_PROJECT_ID_ANNOTATION,
   isAllureReportAvailable,
-  useAllureProjectId,
-} from '../useAllureProjectId';
+  getAllureProjectId,
+} from '../annotationHelpers';
 import {
   MissingAnnotationEmptyState,
   Progress,
@@ -31,9 +31,9 @@ import { useAsync } from 'react-use';
 import { Entity } from '@backstage/catalog-model';
 
 const AllureReport = (props: { entity: Entity }) => {
-  const allureApi = useApi<AllureApi>(allureApiRef);
+  const allureApi = useApi(allureApiRef);
 
-  const allureProjectId = useAllureProjectId(props.entity);
+  const allureProjectId = getAllureProjectId(props.entity);
   const { value, loading } = useAsync(async () => {
     const url = await allureApi.getReportUrl(allureProjectId);
     return url;
@@ -43,19 +43,15 @@ const AllureReport = (props: { entity: Entity }) => {
     return <Progress />;
   }
   return (
-    <>
-      {!loading && (
-        <iframe
-          style={{
-            display: 'table',
-            width: '100%',
-            height: '100%',
-          }}
-          title="Allure Report"
-          src={value}
-        />
-      )}
-    </>
+    <iframe
+      style={{
+        display: 'table',
+        width: '100%',
+        height: '100%',
+      }}
+      title="Allure Report"
+      src={value}
+    />
   );
 };
 

plugins/allure/src/components/annotationHelpers.ts

@@ -15,11 +15,11 @@
  */
 import { Entity } from '@backstage/catalog-model';
 
-export const ALLURE_PROJECT_ID_ANNOTATION = 'allure/project-id';
+export const ALLURE_PROJECT_ID_ANNOTATION = 'qameta.io/allure-project';
 
 export const isAllureReportAvailable = (entity: Entity) =>
   Boolean(entity.metadata.annotations?.[ALLURE_PROJECT_ID_ANNOTATION]);
 
-export const useAllureProjectId = (entity: Entity) => {
+export const getAllureProjectId = (entity: Entity) => {
   return entity?.metadata.annotations?.[ALLURE_PROJECT_ID_ANNOTATION] ?? '';
 };