Merge pull request #21069 from PurseChicken/master

docs: Complete ReadMe \ Installation steps for Google Cloud Build Plugin
2023-11-13 12:57:41 +01:00
parent 721bdfdcde 5a20cf3bf8
commit 57bdd5e139
3 changed files with 80 additions and 7 deletions
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-cloudbuild': patch
+---
+
+Added Installation Steps so that it is clear what is needed to install and use the Google Cloud Plugin.
@@ -1,13 +1,81 @@
 # Google Cloud Build

-Welcome to the Google Cloud Build plugin!
+### Welcome to the Google Cloud Build plugin!

-_This plugin was created through the Backstage CLI_
+This plugin allows you to include Google Cloud Build history in your backstage CI/CD page.

-## Getting started
+<img src="../../docs/assets/plugins/cloudbuild/CloudBuildPlugin.png">

-Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/cloudbuild](http://localhost:3000/cloudbuild).
+## Installation Steps

-You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
-This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
-It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.
+### Install the plugin into backstage
+
+```bash
+cd packages/app
+yarn add @backstage/plugin-cloudbuild
+```
+
+### Modify EntityPage.tsx
+
+packages/app/src/components/catalog/EntityPage.tsx
+
+#### Add the Plugin import to the list of imports
+
+```diff
+// packages/app/src/components/catalog/EntityPage.tsx
+import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
+
+import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
+
+import { EntityCloudbuildContent, isCloudbuildAvailable } from '@backstage/plugin-cloudbuild';
+```
+
+#### In your `cicdContent` constant, add the following switch case
+
+```diff
+// packages/app/src/components/catalog/EntityPage.tsx
+const cicdContent = (
+  <EntitySwitch>
+    <EntitySwitch.Case if={isCloudbuildAvailable}>
+      <EntityCloudbuildContent />
+    </EntitySwitch.Case>
+
+    <EntitySwitch.Case if={isGithubActionsAvailable}>
+      <EntityGithubActionsContent />
+    </EntitySwitch.Case>
+```
+
+##### OPTIONAL
+
+If you don't use GitHub Actions, or don't want to show it on your CI/CD page, then you can remove the switch case for it
+
+```diff
+// packages/app/src/components/catalog/EntityPage.tsx
+const cicdContent = (
+  <EntitySwitch>
+    <EntitySwitch.Case if={isCloudbuildAvailable}>
+      <EntityCloudbuildContent />
+    </EntitySwitch.Case>
+
+-    <EntitySwitch.Case if={isGithubActionsAvailable}>
+-      <EntityGithubActionsContent />
+-    </EntitySwitch.Case>
+```
+
+### Add annotation to your component-info.yaml file.
+
+Any component, that you would like the Cloud Build Plugin to populate for, should include the following annotation:
+
+```diff
+// component-info.yaml
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: backstage
+  description: Backstage application.
+  annotations:
+    google.com/cloudbuild-project-slug: your-project-name
+spec:
+  type: website
+  lifecycle: development
+```