fixed ReadmeCard & documentation updated

Signed-off-by: Deepankumar Loganathan <deepan0433@gmail.com>

plugins/azure-devops/README.md

@@ -324,6 +324,11 @@ To get the README component working you'll need to do the following two steps:
 
 Azure DevOps plugin supports the permission framework for PRs, GitTags, Pipelines and Readme features.
 
+```bash
+# From your Backstage root directory
+yarn add --cwd packages/backend @backstage/plugin-azure-devops-common
+```
+
 New Backend you can skip the below and proceed with [permission configuration](#configure-permission)
 
 To enable permissions for the legacy backend system in `packages/backend/src/plugins/azure-devops.ts` add the following.
@@ -355,6 +360,15 @@ To apply the permission rules add the following in `packages/backend/src/plugins
 +  azureDevOpsGitTagReadPermission,
 +  azureDevOpsReadmeReadPermission,
 +  azureDevOpsPullRequestDashboardReadPermission } from '@backstage/plugin-azure-devops-common';
++ import {
++  AuthorizeResult,
++  PolicyDecision,
++  isPermission,
++ } from '@backstage/plugin-permission-common';
++ import {
++   catalogConditions,
++   createCatalogConditionalDecision,
++ } from '@backstage/plugin-catalog-backend/alpha';
 ...
 async handle(
   request: PolicyQuery,

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

@@ -28,9 +28,6 @@ import { useEntity } from '@backstage/plugin-catalog-react';
 import React from 'react';
 
 import { useReadme } from '../../hooks';
-import { RequirePermission } from '@backstage/plugin-permission-react';
-import { azureDevOpsReadmeReadPermission } from '@backstage/plugin-azure-devops-common';
-import { stringifyEntityRef } from '@backstage/catalog-model';
 
 const useStyles = makeStyles(theme => ({
   readMe: {
@@ -90,7 +87,6 @@ const ReadmeCardError = ({ error }: ErrorProps) => {
 export const ReadmeCard = (props: Props) => {
   const classes = useStyles();
   const { entity } = useEntity();
-
   const { loading, error, item: value } = useReadme(entity);
 
   if (loading) {
@@ -100,22 +96,16 @@ export const ReadmeCard = (props: Props) => {
   }
 
   return (
-    <RequirePermission
-      permission={azureDevOpsReadmeReadPermission}
-      resourceRef={stringifyEntityRef(entity)}
-      errorPage={null}
+    <InfoCard
+      title="Readme"
+      deepLink={{
+        link: value!.url,
+        title: 'Readme',
+      }}
     >
-      <InfoCard
-        title="Readme"
-        deepLink={{
-          link: value!.url,
-          title: 'Readme',
-        }}
-      >
-        <Box className={classes.readMe} sx={{ maxHeight: props.maxHeight }}>
-          <MarkdownContent content={value?.content ?? ''} />
-        </Box>
-      </InfoCard>
-    </RequirePermission>
+      <Box className={classes.readMe} sx={{ maxHeight: props.maxHeight }}>
+        <MarkdownContent content={value?.content ?? ''} />
+      </Box>
+    </InfoCard>
   );
 };