Skip to content

Commit 89f3c71

Browse files
rohitkrai03rohitkrai03
committed
feat(argocd): create a new plugin for argocd
1 parent 144d678 commit 89f3c71

20 files changed

+628
-0
lines changed

‎plugins/argocd/.eslintrc.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);

‎plugins/argocd/OWNERS

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
approvers:
2+
- karthikjeeyar
3+
- rohitkrai03
4+
reviewers:
5+
- karthikjeeyar
6+
- rohitkrai03

‎plugins/argocd/README.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# argocd
2+
3+
Welcome to the argocd plugin!
4+
5+
_This plugin was created through the Backstage CLI_
6+
7+
## Getting started
8+
9+
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).
10+
11+
You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
12+
This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
13+
It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.
14+
15+
## Loading as Dynamic Plugin
16+
17+
This plugin can be loaded in backstage showcase application as a dynamic plugin.
18+
19+
Follow the below steps -
20+
21+
- Export dynamic plugin assets. This will build and create the static assets for the plugin and put it inside dist-scalprum folder.
22+
23+
```sh
24+
yarn export-dynamic
25+
```
26+
27+
- Package and copy dist-scalprum folder assets to dynamic-plugins-root folder in showcase application.
28+
29+
```sh
30+
pkg=../plugins/argocd
31+
archive=$(npm pack $pkg)
32+
tar -xzf "$archive" && rm "$archive"
33+
mv package $(echo $archive | sed -e 's:\.tgz$::')
34+
```
35+
36+
- Add the extension point inside the app-config.yaml or app-config.local.yaml file.
37+
38+
```yaml
39+
dynamicPlugins:
40+
frontend:
41+
janus-idp.backstage-plugin-argocd:
42+
mountPoints:
43+
- mountPoint: entity.page.cd/cards
44+
importName: ArgocdPage
45+
config:
46+
layout:
47+
gridColumn: '1 / -1'
48+
if:
49+
anyOf:
50+
- hasAnnotation: backstage.io/kubernetes-id
51+
- hasAnnotation: backstage.io/kubernetes-namespace
52+
```
53+
54+
For more detailed explanation on dynamic plugins follow this [doc](https://github.com/janus-idp/backstage-showcase/blob/main/showcase-docs/dynamic-plugins.md).

‎plugins/argocd/app-config.janus-idp.yaml

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
dynamicPlugins:
2+
frontend:
3+
janus-idp.backstage-plugin-argocd:
4+
mountPoints:
5+
- mountPoint: entity.page.cd/cards
6+
importName: ArgocdPage
7+
config:
8+
layout:
9+
gridColumn: '1 / -1'
10+
if:
11+
anyOf:
12+
- hasAnnotation: backstage.io/kubernetes-id
13+
- hasAnnotation: backstage.io/kubernetes-namespace

‎plugins/argocd/config.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export interface Config {}

‎plugins/argocd/dev/index.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
3+
import { createDevApp } from '@backstage/dev-utils';
4+
5+
import { ArgocdPage, argocdPlugin } from '../src/plugin';
6+
7+
createDevApp()
8+
.registerPlugin(argocdPlugin)
9+
.addPage({
10+
element: <ArgocdPage />,
11+
title: 'Root Page',
12+
path: '/argocd',
13+
})
14+
.render();

‎plugins/argocd/package.json

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
{
2+
"name": "@janus-idp/backstage-plugin-argocd",
3+
"version": "0.1.0",
4+
"main": "src/index.ts",
5+
"types": "src/index.ts",
6+
"license": "Apache-2.0",
7+
"private": true,
8+
"publishConfig": {
9+
"access": "public",
10+
"main": "dist/index.esm.js",
11+
"types": "dist/index.d.ts"
12+
},
13+
"backstage": {
14+
"role": "frontend-plugin"
15+
},
16+
"sideEffects": false,
17+
"scripts": {
18+
"build": "backstage-cli package build",
19+
"clean": "backstage-cli package clean",
20+
"export-dynamic": "janus-cli package export-dynamic-plugin",
21+
"lint": "backstage-cli package lint",
22+
"postpack": "backstage-cli package postpack",
23+
"postversion": "yarn run export-dynamic",
24+
"prepack": "backstage-cli package prepack",
25+
"start": "backstage-cli package start",
26+
"test": "backstage-cli package test --passWithNoTests --coverage",
27+
"tsc": "tsc"
28+
},
29+
"dependencies": {
30+
"@backstage/core-components": "^0.14.0",
31+
"@backstage/core-plugin-api": "^1.9.0",
32+
"@backstage/theme": "^0.5.1",
33+
"@material-ui/core": "^4.9.13",
34+
"@material-ui/icons": "^4.9.1",
35+
"@material-ui/lab": "^4.0.0-alpha.61",
36+
"react-use": "^17.2.4"
37+
},
38+
"peerDependencies": {
39+
"react": "16.13.1 || ^17.0.0 || ^18.0.0"
40+
},
41+
"devDependencies": {
42+
"@backstage/cli": "0.25.2",
43+
"@backstage/core-app-api": "1.12.0",
44+
"@backstage/dev-utils": "1.0.27",
45+
"@backstage/test-utils": "1.5.0",
46+
"@janus-idp/cli": "1.7.5",
47+
"@testing-library/jest-dom": "6.0.0",
48+
"@testing-library/react": "14.0.0",
49+
"@testing-library/user-event": "14.0.0",
50+
"msw": "1.0.0"
51+
},
52+
"files": [
53+
"dist",
54+
"config.d.ts",
55+
"dist-scalprum",
56+
"app-config.janus-idp.yaml"
57+
],
58+
"scalprum": {
59+
"name": "janus-idp.backstage-plugin-argocd",
60+
"exposedModules": {
61+
"PluginRoot": "./src/index.ts"
62+
}
63+
},
64+
"configSchema": "config.d.ts",
65+
"repository": {
66+
"type": "git",
67+
"url": "https://github.com/janus-idp/backstage-plugins",
68+
"directory": "plugins/argocd"
69+
},
70+
"keywords": [
71+
"backstage",
72+
"plugin"
73+
],
74+
"homepage": "https://janus-idp.io/",
75+
"bugs": "https://github.com/janus-idp/backstage-plugins/issues"
76+
}

‎plugins/argocd/src/components/ExampleComponent/ExampleComponent.test.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
3+
import {
4+
renderInTestApp,
5+
setupRequestMockHandlers,
6+
} from '@backstage/test-utils';
7+
8+
import { screen } from '@testing-library/react';
9+
import { rest } from 'msw';
10+
import { setupServer } from 'msw/node';
11+
12+
import { ExampleComponent } from './ExampleComponent';
13+
14+
describe('ExampleComponent', () => {
15+
const server = setupServer();
16+
// Enable sane handlers for network requests
17+
setupRequestMockHandlers(server);
18+
19+
// setup mock response
20+
beforeEach(() => {
21+
server.use(
22+
rest.get('/*', (_, res, ctx) => res(ctx.status(200), ctx.json({}))),
23+
);
24+
});
25+
26+
it('should render', async () => {
27+
await renderInTestApp(<ExampleComponent />);
28+
expect(screen.getByText('Welcome to ArgoCD!')).toBeInTheDocument();
29+
});
30+
});

‎plugins/argocd/src/components/ExampleComponent/ExampleComponent.tsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react';
2+
3+
import {
4+
Content,
5+
ContentHeader,
6+
Header,
7+
HeaderLabel,
8+
InfoCard,
9+
Page,
10+
SupportButton,
11+
} from '@backstage/core-components';
12+
13+
import { Grid, Typography } from '@material-ui/core';
14+
15+
import { ExampleFetchComponent } from '../ExampleFetchComponent';
16+
17+
export const ExampleComponent = () => (
18+
<Page themeId="tool">
19+
<Header
20+
title="Welcome to ArgoCD!"
21+
subtitle="Official ArgoCD plugin from Red Hat"
22+
>
23+
<HeaderLabel label="Owner" value="RHTAP" />
24+
<HeaderLabel label="Lifecycle" value="Alpha" />
25+
</Header>
26+
<Content>
27+
<ContentHeader title="ArgoCD Plugin">
28+
<SupportButton>
29+
This is the official ArgoCD plugin from Red Hat.
30+
</SupportButton>
31+
</ContentHeader>
32+
<Grid container spacing={3} direction="column">
33+
<Grid item>
34+
<InfoCard title="Information card">
35+
<Typography variant="body1">
36+
All content should be wrapped in a card like this.
37+
</Typography>
38+
</InfoCard>
39+
</Grid>
40+
<Grid item>
41+
<ExampleFetchComponent />
42+
</Grid>
43+
</Grid>
44+
</Content>
45+
</Page>
46+
);

‎plugins/argocd/src/components/ExampleComponent/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { ExampleComponent } from './ExampleComponent';

‎plugins/argocd/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
3+
import { render, screen } from '@testing-library/react';
4+
5+
import { ExampleFetchComponent } from './ExampleFetchComponent';
6+
7+
describe('ExampleFetchComponent', () => {
8+
it('renders the user table', async () => {
9+
render(<ExampleFetchComponent />);
10+
11+
// Wait for the table to render
12+
const table = await screen.findByRole('table');
13+
const nationality = screen.getAllByText('GB');
14+
// Assert that the table contains the expected user data
15+
expect(table).toBeInTheDocument();
16+
expect(screen.getByAltText('Carolyn')).toBeInTheDocument();
17+
expect(screen.getByText('Carolyn Moore')).toBeInTheDocument();
18+
expect(screen.getByText('[email protected]')).toBeInTheDocument();
19+
expect(nationality[0]).toBeInTheDocument();
20+
});
21+
});

0 commit comments

Comments
 (0)