Backstage Azure DevOps Plugin

yarn --cwd packages/app add @backstage-community/plugin-azure-devops

// In packages/app/src/components/catalog/EntityPage.tsx

// If you're using `dev.azure.com/project-repo annotation` use this:

import {
  EntityAzurePipelinesContent,
  isAzureDevOpsAvailable,
} from '@backstage-community/plugin-azure-devops';

// For example in the CI/CD section
const cicdContent = (
  <EntitySwitch>
    // ...
    <EntitySwitch.Case if={isAzureDevOpsAvailable}>
        <EntityAzurePipelinesContent defaultLimit={25} />
    </EntitySwitch.Case>
    // ...
  </EntitySwitch>

// If you're using `dev.azure.com/project annotation` use this:

import {
  EntityAzurePipelinesContent,
  isAzurePipelinesAvailable,
} from '@backstage-community/plugin-azure-devops';

// For example in the CI/CD section
const cicdContent = (
  <EntitySwitch>
    // ...
    <EntitySwitch.Case if={isAzurePipelinesAvailable}>
      <EntityAzurePipelinesContent defaultLimit={25} />
    </EntitySwitch.Case>
    // ...
  </EntitySwitch>

// In packages/app/src/components/catalog/EntityPage.tsx
import {
  EntityAzurePullRequestsContent,
  isAzureDevOpsAvailable,
} from '@backstage-community/plugin-azure-devops';

// For example in the Service section
const serviceEntityPage = (
  <EntityLayout>
    // ...
    <EntityLayout.Route if={isAzureDevOpsAvailable} path="/pull-requests" title="Pull Requests">
      <EntityAzurePullRequestsContent defaultLimit={25} />
    </EntityLayout.Route>
    // ...
  </EntityLayout>

// In packages/app/src/components/catalog/EntityPage.tsx
import {
  EntityAzureGitTagsContent,
  isAzureDevOpsAvailable,
} from '@backstage-community/plugin-azure-devops';

// For example in the Service section
const serviceEntityPage = (
  <EntityLayout>
    // ...
    <EntityLayout.Route if={isAzureDevOpsAvailable} path="/git-tags" title="Git Tags">
      <EntityAzureGitTagsContent />
    </EntityLayout.Route>
    // ...
  </EntityLayout>

// In packages/app/src/components/catalog/EntityPage.tsx
import {
  EntityAzureReadmeCard,
  isAzureDevOpsAvailable,
} from '@backstage-community/plugin-azure-devops';

// As it is a card, you can customize it the way you prefer
// For example in the Service section

const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    <EntitySwitch>
      <EntitySwitch.Case if={isAzureDevOpsAvailable}>
        <Grid item md={6}>
          ...
        </Grid>
        <Grid item md={6}>
          <EntityAzureReadmeCard maxHeight={350} />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>
  </Grid>
);

# Example catalog-info.yaml entity definition file
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  # ...
  annotations:
    dev.azure.com/project-repo: my-project/my-repo
    dev.azure.com/build-definition: <build-definition-name> // if you have multiple entities in a single monorepo you'll need to specify the builds
    dev.azure.com/readme-path: /<path-to>/<my-readme-file>.md
    dev.azure.com/project: <project-with-build-code> // if your code is in a diferent repo
    dev.azure.com/host-org: <host>/<organization> // if you have multiple organisations
spec:
  type: service
  # ...