add documentation and make the plugin public

Author: karthikjeeyar

plugins/argocd/README.md

@@ -1,17 +1,145 @@
-# argocd
+# Argocd plugin for Backstage
 
 Welcome to the argocd plugin!
 
 _This plugin was created through the Backstage CLI_
 
 ## Getting started
 
-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 [/argocd](http://localhost:3000/argocd).
+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 [/argocd/deployment-lifecycle](http://localhost:3000/argocd/deployment-lifecycle).
 
 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.
 
+## For Administrators
+
+### Installation and configuration
+
+#### Prerequisites
+
+- Install `@roadiehq/backstage-plugin-argo-cd-backend` plugin using the following command from the root directory
+<!-- configure it by following [Argo CD Backend Plugin docs](https://www.npmjs.com/package/@roadiehq/backstage-plugin-argo-cd-backend) -->
+
+```bash
+yarn workspace app add @roadiehq/backstage-plugin-argo-cd-backend
+```
+
+- Create plugin file for ArgoCD backend in your `packages/backend/src/plugins/` directory.
+
+```ts
+// packages/backend/src/plugins/argocd.ts
+
+import { createRouter } from '@roadiehq/backstage-plugin-argo-cd-backend';
+
+import { PluginEnvironment } from '../types';
+
+export default async function createPlugin({
+  logger,
+  config,
+}: PluginEnvironment) {
+  return await createRouter({ logger, config });
+}
+```
+
+- Modify your backend router to expose the APIs for ArgoCD backend
+
+```ts
+// packages/backend/src/index.ts
+
+import argocd from './plugins/argocd';
+...
+
+const argocdEnv = useHotMemoize(module, () => createEnv('argocd'));
+...
+apiRouter.use('/argocd', await argocd(argocdEnv));
+```
+
+- add argocd instance information in app.config.yaml
+
+```ts
+argocd:
+  appLocatorMethods:
+    - type: 'config'
+      instances:
+        - name: argoInstance1
+          url: https://argoInstance1.com
+          username: ${ARGOCD_USERNAME}
+          password: ${ARGOCD_PASSWORD}
+        - name: argoInstance2
+          url: https://argoInstance2.com
+          username: ${ARGOCD_USERNAME}
+          password: ${ARGOCD_PASSWORD}
+```
+
+#### How to add argocd frontend plugin to Backstage app
+
+1. Install the Argocd plugin using the following command:
+
+```bash
+yarn workspace app add @janus-idp/backstage-plugin-argocd
+```
+
+2. Add deployment summary and deployment lifecycle compoennt to the `entityPage.tsx` source file:
+
+```ts
+// packages/app/src/components/catalog/EntityPage.tsx
+import {
+  ArgocdDeploymentSummary,
+  ArgocdDeploymentLifecycle
+  isArgocdConfigured,
+} from '@janus-idp/backstage-plugin-argocd';
+
+const overviewContent = (
+  <Grid container spacing={3} alignItems="stretch">
+    ...
+    <EntitySwitch>
+      <EntitySwitch.Case if={e => Boolean(isArgocdConfigured(e))}>
+        <Grid item sm={12}>
+          <ArgocdDeploymentSummary />
+        </Grid>
+      </EntitySwitch.Case>
+    </EntitySwitch>
+    ...
+  </Grid>
+);
+
+
+const cicdcontent = (
+    <EntitySwitch>
+        {/* ... */}
+        {/* highlight-add-start */}
+        ...
+          <EntitySwitch.Case if={e => Boolean(isArgocdConfigured(e))}>
+            <Grid item sm={12}>
+              <ArgocdDeploymentLifecycle />
+            </Grid>
+          </EntitySwitch.Case>
+        {/* highlight-add-end */}
+    </EntitySwitch>
+);
+```
+
+- The following annotation is added to the entity's `catalog-info.yaml` file to enable argocd features in the backstage instance:
+
+  ```yaml
+  annotations:
+    ...
+
+    argocd/app-selector: 'rht-gitops.com/janus-argocd=quarkus-app'
+
+  ```
+
+- To switch between argocd instances, you can use the following annotation
+
+```yaml
+ annotations:
+   ...
+    argocd/instance-name: 'argoInstance2'
+```
+
+**_Note: If this annotation is not set, the plugin will defaultto the first argocd instance configured in the `app.config.yaml`_**
+
 ## Loading as Dynamic Plugin
 
 This plugin can be loaded in backstage showcase application as a dynamic plugin.

plugins/argocd/dev/__data__/config.ts

@@ -3,8 +3,6 @@ import { Config } from '@kubernetes/client-node';
 export const mockArgocdConfig: Config = {
   argocd: {
     baseUrl: 'https://localhost:8080',
-    username: 'argocd-test-account',
-    password: 'argocd-test-pass',
     appLocatorMethods: [
       {
         type: 'config',

plugins/argocd/package.json

@@ -4,7 +4,6 @@
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
-  "private": true,
   "publishConfig": {
     "access": "public",
     "main": "dist/index.esm.js",
@@ -50,6 +49,7 @@
   },
   "devDependencies": {
     "@backstage/cli": "0.26.2",
+    "@backstage/config": "1.2.0",
     "@backstage/core-app-api": "1.12.3",
     "@backstage/dev-utils": "1.0.30",
     "@backstage/test-utils": "1.5.3",

plugins/argocd/src/api/__tests__/index.test.ts

@@ -3,7 +3,7 @@ import { IdentityApi } from '@backstage/core-plugin-api';
 import { ArgoCDApiClient } from '..';
 import { mockApplication } from '../../../dev/__data__';
 
-export const getIdentityApiStub: IdentityApi = {
+const getIdentityApiStub: IdentityApi = {
   getProfileInfo: jest.fn(),
   getBackstageIdentity: jest.fn(),
   async getCredentials() {
@@ -35,7 +35,7 @@ describe('API calls', () => {
 
     test('fetches app based on provided projectName', async () => {
       const client = new ArgoCDApiClient({
-        backendBaseUrl: 'http://test.com',
+        backendBaseUrl: 'https://test.com',
         useNamespacedApps: false,
         identityApi: getIdentityApiStub,
       });
@@ -47,7 +47,7 @@ describe('API calls', () => {
       });
 
       expect(global.fetch).toHaveBeenCalledWith(
-        'http://test.com/api/argocd/applications?project=test',
+        'https://test.com/api/argocd/applications?project=test',
         expect.objectContaining({
           headers: {
             'Content-Type': 'application/json',
@@ -58,7 +58,7 @@ describe('API calls', () => {
     });
     test('fetches app based on provided appSelector', async () => {
       const client = new ArgoCDApiClient({
-        backendBaseUrl: 'http://test.com',
+        backendBaseUrl: 'https://test.com',
         useNamespacedApps: false,
         identityApi: getIdentityApiStub,
       });
@@ -69,7 +69,7 @@ describe('API calls', () => {
       });
 
       expect(global.fetch).toHaveBeenCalledWith(
-        'http://test.com/api/argocd/applications/selector/my-test-app-selector?selector=my-test-app-selector',
+        'https://test.com/api/argocd/applications/selector/my-test-app-selector?selector=my-test-app-selector',
         expect.objectContaining({
           headers: {
             'Content-Type': 'application/json',
@@ -90,17 +90,19 @@ describe('API calls', () => {
       );
 
       const client = new ArgoCDApiClient({
-        backendBaseUrl: 'http://test.com',
+        backendBaseUrl: 'https://test.com',
         useNamespacedApps: false,
         identityApi: getIdentityApiStub,
       });
-
+      let error;
       try {
         await client.listApps({
           url: '',
           appSelector: 'my-test-app-selector',
         });
-      } catch (error: any) {
+      } catch (e: any) {
+        error = e;
+      } finally {
         expect(error.message).toBe(
           'failed to fetch data, status Internal server error: Something went wrong',
         );
@@ -109,7 +111,7 @@ describe('API calls', () => {
 
     test('should not pass the token for the guest user', async () => {
       const client = new ArgoCDApiClient({
-        backendBaseUrl: 'http://test.com',
+        backendBaseUrl: 'https://test.com',
         useNamespacedApps: false,
         identityApi: {
           ...getIdentityApiStub,
@@ -126,7 +128,7 @@ describe('API calls', () => {
       });
 
       expect(global.fetch).toHaveBeenCalledWith(
-        'http://test.com/api/argocd/applications?project=test',
+        'https://test.com/api/argocd/applications?project=test',
         expect.objectContaining({
           headers: undefined,
         }),
@@ -146,7 +148,7 @@ describe('API calls', () => {
 
     test('should return the revision details', async () => {
       const client = new ArgoCDApiClient({
-        backendBaseUrl: 'http://test.com',
+        backendBaseUrl: 'https://test.com',
         useNamespacedApps: false,
         identityApi: getIdentityApiStub,
       });
@@ -158,7 +160,7 @@ describe('API calls', () => {
       });
 
       expect(global.fetch).toHaveBeenCalledWith(
-        'http://test.com/api/argocd/argoInstance/main/applications/name/my-test-app/revisions/12345/metadata',
+        'https://test.com/api/argocd/argoInstance/main/applications/name/my-test-app/revisions/12345/metadata',
         expect.objectContaining({
           headers: {
             'Content-Type': 'application/json',
@@ -181,7 +183,7 @@ describe('API calls', () => {
 
     test('should return empty list if the revisionIds are not passed', async () => {
       const client = new ArgoCDApiClient({
-        backendBaseUrl: 'http://test.com',
+        backendBaseUrl: 'https://test.com',
         useNamespacedApps: false,
         identityApi: getIdentityApiStub,
       });
@@ -197,7 +199,7 @@ describe('API calls', () => {
 
     test('should return the list of revision details', async () => {
       const client = new ArgoCDApiClient({
-        backendBaseUrl: 'http://test.com',
+        backendBaseUrl: 'https://test.com',
         useNamespacedApps: false,
         identityApi: getIdentityApiStub,
       });
@@ -210,7 +212,7 @@ describe('API calls', () => {
       });
 
       expect(global.fetch).toHaveBeenCalledWith(
-        'http://test.com/api/argocd/argoInstance/main/applications/name/quarkus-app-dev/revisions/90f9758b7033a4bbb7c33a35ee474d61091644bc/metadata',
+        'https://test.com/api/argocd/argoInstance/main/applications/name/quarkus-app-dev/revisions/90f9758b7033a4bbb7c33a35ee474d61091644bc/metadata',
         expect.objectContaining({
           headers: {
             'Content-Type': 'application/json',

plugins/argocd/src/components/AppStatus/__tests__/AppHealthStatus.test.tsx

@@ -9,13 +9,13 @@ describe('AppHealthStatus', () => {
   test('should return default component', () => {
     render(<AppHealthStatus app={mockApplication} />);
 
-    screen.getByTestId('healthy-icon');
-    screen.getByText('Healthy');
+    expect(screen.queryByTestId('healthy-icon')).toBeInTheDocument();
+    expect(screen.queryByText('Healthy')).toBeInTheDocument();
   });
 
   test('should return application health chip component', () => {
     render(<AppHealthStatus app={mockApplication} isChip />);
 
-    screen.getByTestId('app-health-status-chip');
+    expect(screen.getByTestId('app-health-status-chip')).toBeInTheDocument();
   });
 });

plugins/argocd/src/components/AppStatus/__tests__/AppSyncStatus.test.tsx

@@ -9,13 +9,13 @@ describe('AppSyncStatus', () => {
   test('should return default component', () => {
     render(<AppSyncStatus app={mockApplication} />);
 
-    screen.getByTestId('synced-icon');
-    screen.getByText('Synced');
+    expect(screen.getByTestId('synced-icon')).toBeInTheDocument();
+    expect(screen.getByText('Synced')).toBeInTheDocument();
   });
 
   test('should return application health chip component', () => {
     render(<AppSyncStatus app={mockApplication} isChip />);
 
-    screen.getByTestId('app-sync-status-chip');
+    expect(screen.getByTestId('app-sync-status-chip')).toBeInTheDocument();
   });
 });

plugins/argocd/src/components/AppStatus/__tests__/StatusHeading.test.tsx

@@ -7,12 +7,12 @@ import { Application } from '../../../types';
 import StatusHeading from '../StatusHeading';
 
 describe('StatusHeading', () => {
-  test('should not render if the application is not available ', () => {
+  test('should not render if the application is not available', () => {
     render(<StatusHeading app={null as unknown as Application} />);
     expect(screen.queryByText('app-sync-status-chip')).not.toBeInTheDocument();
   });
 
-  test('should render if the application is available ', () => {
+  test('should render if the application is available', () => {
     render(<StatusHeading app={mockApplication} />);
 
     expect(screen.queryByTestId('app-health-status-chip')).toBeInTheDocument();