Made changes requested in the pull request

Signed-off-by: Alisson Fabiano <afabiano@eshopworld.com>

plugins/azure-devops/src/api/AzureDevOpsApi.ts

@@ -67,5 +67,5 @@ export interface AzureDevOpsApi {
     options?: BuildRunOptions,
   ): Promise<{ items: BuildRun[] }>;
 
-  getReadme(opts: ReadmeConfig): Promise<Readme | undefined>;
+  getReadme(opts: ReadmeConfig): Promise<Readme>;
 }

plugins/azure-devops/src/api/AzureDevOpsClient.ts

@@ -32,10 +32,6 @@ import { DiscoveryApi, IdentityApi } from '@backstage/core-plugin-api';
 import { AzureDevOpsApi } from './AzureDevOpsApi';
 import { ResponseError } from '@backstage/errors';
 
-function isNotFoundError(error: any): error is ResponseError {
-  return error.response.status === 404;
-}
-
 export class AzureDevOpsClient implements AzureDevOpsApi {
   private readonly discoveryApi: DiscoveryApi;
   private readonly identityApi: IdentityApi;
@@ -136,22 +132,13 @@ export class AzureDevOpsClient implements AzureDevOpsApi {
     return { items };
   }
 
-  public getReadme = async (
-    opts: ReadmeConfig,
-  ): Promise<Readme | undefined> => {
-    try {
-      return await this.get(
-        `readme/${encodeURIComponent(opts.project)}/${encodeURIComponent(
-          opts.repo,
-        )}`,
-      );
-    } catch (e) {
-      if (isNotFoundError(e)) {
-        return undefined;
-      }
-      return e;
-    }
-  };
+  public async getReadme(opts: ReadmeConfig): Promise<Readme> {
+    return await this.get(
+      `readme/${encodeURIComponent(opts.project)}/${encodeURIComponent(
+        opts.repo,
+      )}`,
+    );
+  }
 
   private async get<T>(path: string): Promise<T> {
     const baseUrl = `${await this.discoveryApi.getBaseUrl('azure-devops')}/`;

plugins/azure-devops/src/components/ReadmeCard/ReadmeCard.tsx

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { Button, makeStyles } from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
+import { Box, Button, makeStyles } from '@material-ui/core';
 import {
   InfoCard,
   Progress,
   MarkdownContent,
   EmptyState,
+  ErrorPanel,
 } from '@backstage/core-components';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { useProjectRepoFromEntity } from '../../hooks';
@@ -30,15 +30,6 @@ import { azureDevOpsApiRef } from '../../api';
 import useAsync from 'react-use/lib/useAsync';
 
 const useStyles = makeStyles(theme => ({
-  infoCard: {
-    marginBottom: theme.spacing(3),
-    '& + .MuiAlert-root': {
-      marginTop: theme.spacing(3),
-    },
-    '& .MuiCardContent-root': {
-      padding: theme.spacing(2, 1, 2, 2),
-    },
-  },
   readMe: {
     overflowY: 'auto',
     paddingRight: theme.spacing(1),
@@ -63,6 +54,35 @@ type Props = {
   maxHeight?: number;
 };
 
+type ErrorProps = {
+  error: Error;
+};
+
+function isNotFoundError(error: any): boolean {
+  return error?.response?.status === 404;
+}
+
+const ReadmeCardError = ({ error }: ErrorProps) => {
+  if (isNotFoundError(error))
+    return (
+      <EmptyState
+        title="No README available for this entity"
+        missing="field"
+        description="You can add a README to your entity by following the Azure DevOps documentation."
+        action={
+          <Button
+            variant="contained"
+            color="primary"
+            href="https://docs.microsoft.com/en-us/azure/devops/repos/git/create-a-readme?view=azure-devops"
+          >
+            Read more
+          </Button>
+        }
+      />
+    );
+  return <ErrorPanel title={error.message} error={error} />;
+};
+
 export const ReadmeCard = (props: Props) => {
   const classes = useStyles();
   const api = useApi(azureDevOpsApiRef);
@@ -81,52 +101,20 @@ export const ReadmeCard = (props: Props) => {
   if (loading) {
     return <Progress />;
   } else if (error) {
-    return (
-      <Alert severity="error" className={classes.infoCard}>
-        {error.message}
-      </Alert>
-    );
+    return <ReadmeCardError error={error} />;
   }
 
-  if (!value)
-    return (
-      <EmptyState
-        title="No README available for this entity"
-        missing="field"
-        description="You can add a README to your entity by following the Azure DevOps documentation."
-        action={
-          <Button
-            variant="contained"
-            color="primary"
-            href="https://docs.microsoft.com/en-us/azure/devops/repos/git/create-a-readme?view=azure-devops"
-          >
-            Read more
-          </Button>
-        }
-      />
-    );
-
   return (
     <InfoCard
       title="Readme"
-      className={classes.infoCard}
       deepLink={{
         link: value!.url,
         title: 'Readme',
-        onClick: e => {
-          e.preventDefault();
-          window.open(value?.url);
-        },
       }}
     >
-      <div
-        className={classes.readMe}
-        style={{
-          maxHeight: `${props.maxHeight}px`,
-        }}
-      >
+      <Box className={classes.readMe} sx={{ maxHeight: props.maxHeight }}>
         <MarkdownContent content={value?.content ?? ''} />
-      </div>
+      </Box>
     </InfoCard>
   );
 };

plugins/azure-devops/src/plugin.ts

@@ -24,12 +24,12 @@ import {
   azurePullRequestDashboardRouteRef,
   azureGitTagsEntityContentRouteRef,
   azurePullRequestsEntityContentRouteRef,
-  azureReadmeEntityCardRouteRef,
 } from './routes';
 import {
   createApiFactory,
   createPlugin,
   createRoutableExtension,
+  createComponentExtension,
   discoveryApiRef,
   identityApiRef,
 } from '@backstage/core-plugin-api';
@@ -103,9 +103,10 @@ export const EntityAzurePullRequestsContent = azureDevOpsPlugin.provide(
 );
 
 export const EntityAzureReadmeCard = azureDevOpsPlugin.provide(
-  createRoutableExtension({
+  createComponentExtension({
     name: 'EntityAzureReadmeCard',
-    component: () => import('./components/ReadmeCard').then(m => m.ReadmeCard),
-    mountPoint: azureReadmeEntityCardRouteRef,
+    component: {
+      lazy: () => import('./components/ReadmeCard').then(m => m.ReadmeCard),
+    },
   }),
 );

plugins/azure-devops/src/routes.ts

@@ -31,7 +31,3 @@ export const azureGitTagsEntityContentRouteRef = createRouteRef({
 export const azurePullRequestsEntityContentRouteRef = createRouteRef({
   id: 'azure-pull-requests-entity-content',
 });
-
-export const azureReadmeEntityCardRouteRef = createRouteRef({
-  id: 'azure-readme-entity-card',
-});