Feat: Add BuildKite CI/CD Plugin to sample app (#3248)

* Feat: Add BuildKite CI/CD Plugin to sample app

* Feat: Add EntityPage test, bump plugin version

* Feat: update package.json

* feat: run prettier

* Feat: update test code after CR

app-config.yaml

@@ -46,6 +46,12 @@ proxy:
       X-Api-Key:
         $env: NEW_RELIC_REST_API_KEY
 
+  '/buildkite/api':
+    target: https://api.buildkite.com/v2/
+    headers:
+      Authorization:
+        $env: BUILDKITE_TOKEN
+
 organization:
   name: My Company
 

packages/app/package.json

@@ -37,6 +37,7 @@
     "@roadiehq/backstage-plugin-github-insights": "^0.2.12",
     "@roadiehq/backstage-plugin-github-pull-requests": "^0.6.2",
     "@roadiehq/backstage-plugin-travis-ci": "^0.2.7",
+    "@roadiehq/backstage-plugin-buildkite": "^0.1.2",
     "history": "^5.0.0",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",

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

@@ -0,0 +1,62 @@
+/*
+ * Copyright 2020 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 { CICDSwitcher } from './EntityPage';
+import { UrlPatternDiscovery, ApiProvider, ApiRegistry } from '@backstage/core';
+import {
+  buildKiteApiRef,
+  BuildKiteApi,
+} from '@roadiehq/backstage-plugin-buildkite';
+import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
+
+describe('EntityPage Test', () => {
+  const entity = {
+    apiVersion: 'v1',
+    kind: 'Component',
+    metadata: {
+      name: 'ExampleComponent',
+      annotations: {
+        'buildkite.com/project-slug': 'exampleProject/examplePipeline',
+      },
+    },
+    spec: {
+      owner: 'guest',
+      type: 'service',
+      lifecycle: 'production',
+    },
+  };
+
+  const discoveryApi = UrlPatternDiscovery.compile('http://exampleapi.com');
+
+  const apis = ApiRegistry.from([
+    [buildKiteApiRef, new BuildKiteApi({ discoveryApi })],
+  ]);
+
+  describe('CICDSwitcher Test', () => {
+    it('Should render BuildKite View', async () => {
+      const renderedComponent = await renderWithEffects(
+        wrapInTestApp(
+          <ApiProvider apis={apis}>
+            <CICDSwitcher entity={entity} />
+          </ApiProvider>,
+        ),
+      );
+      expect(
+        renderedComponent.getByText(/exampleProject\/examplePipeline/),
+      ).toBeInTheDocument();
+    });
+  });
+});

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

@@ -66,13 +66,19 @@ import {
   isPluginApplicableToEntity as isPullRequestsAvailable,
   PullRequestsStatsCard,
 } from '@roadiehq/backstage-plugin-github-pull-requests';
+import {
+  Router as BuildKiteRouter,
+  isPluginApplicableToEntity as isBuildKiteAvailable,
+} from '@roadiehq/backstage-plugin-buildkite';
 
-const CICDSwitcher = ({ entity }: { entity: Entity }) => {
+export const CICDSwitcher = ({ entity }: { entity: Entity }) => {
   // This component is just an example of how you can implement your company's logic in entity page.
   // You can for example enforce that all components of type 'service' should use GitHubActions
   switch (true) {
     case isJenkinsAvailable(entity):
       return <JenkinsRouter entity={entity} />;
+    case isBuildKiteAvailable(entity):
+      return <BuildKiteRouter entity={entity} />;
     case isGitHubActionsAvailable(entity):
       return <GitHubActionsRouter entity={entity} />;
     case isCircleCIAvailable(entity):

packages/app/src/plugins.ts

@@ -38,3 +38,4 @@ export { plugin as Cloudbuild } from '@backstage/plugin-cloudbuild';
 export { plugin as CostInsights } from '@backstage/plugin-cost-insights';
 export { plugin as GitHubInsights } from '@roadiehq/backstage-plugin-github-insights';
 export { plugin as UserSettings } from '@backstage/plugin-user-settings';
+export { plugin as BuildKite } from '@roadiehq/backstage-plugin-buildkite';

yarn.lock

@@ -3651,6 +3651,25 @@
   resolved "https://registry.npmjs.org/@rjsf/material-ui/-/material-ui-2.4.0.tgz#1b5859298bf3f61137d7b05084f058a775d6fd73"
   integrity sha512-U8F/suzg4MuV+8mK1/ufs0Y6c3O8hc1wnuD2IKoOVJvegGfz5JCafyoyGAW6iyuT1DZBMPzVWEqfiuYPmoE7pw==
 
+"@roadiehq/backstage-plugin-buildkite@^0.1.2":
+  version "0.1.2"
+  resolved "https://registry.npmjs.org/@roadiehq/backstage-plugin-buildkite/-/backstage-plugin-buildkite-0.1.2.tgz#2f2b414acc18ed7820abc6fb0c042f00c31d7c9a"
+  integrity sha512-NO1ogAK6lfh/YUmftqbYn6pkUmMJXk9cfda0YDnG23XlcKIst1d3xO5FggozVtU5IZiJDxxwxOOo4ylhBWrGeQ==
+  dependencies:
+    "@backstage/catalog-model" "^0.2.0"
+    "@backstage/core" "^0.2.0"
+    "@backstage/plugin-catalog" "^0.2.0"
+    "@material-ui/core" "^4.11.0"
+    "@material-ui/icons" "^4.9.1"
+    "@material-ui/lab" "4.0.0-alpha.45"
+    moment "^2.27.0"
+    react "^16.13.1"
+    react-dom "^16.13.1"
+    react-lazylog "^4.5.2"
+    react-router "6.0.0-beta.0"
+    react-router-dom "6.0.0-beta.0"
+    react-use "^15.3.3"
+
 "@roadiehq/backstage-plugin-github-insights@^0.2.12":
   version "0.2.12"
   resolved "https://registry.npmjs.org/@roadiehq/backstage-plugin-github-insights/-/backstage-plugin-github-insights-0.2.12.tgz#aeda6306769f376cf6b5b9d74268b060a0f4e764"