From 2a64b137434ef3f9b685e16eb10b7a579f80cd3d Mon Sep 17 00:00:00 2001 From: Divyanshi Gupta Date: Mon, 23 Oct 2023 16:59:27 +0530 Subject: [PATCH] feat(rbac): add rbac frontend plugin (#859) --- plugins/rbac/.eslintrc.js | 1 + plugins/rbac/README.md | 13 +++++ plugins/rbac/dev/index.tsx | 14 +++++ plugins/rbac/package.json | 58 +++++++++++++++++++ .../src/components/RbacPage/RbacPage.test.tsx | 30 ++++++++++ .../rbac/src/components/RbacPage/RbacPage.tsx | 22 +++++++ plugins/rbac/src/components/RbacPage/index.ts | 1 + plugins/rbac/src/index.ts | 1 + plugins/rbac/src/plugin.test.ts | 7 +++ plugins/rbac/src/plugin.ts | 21 +++++++ plugins/rbac/src/routes.ts | 5 ++ plugins/rbac/src/setupTests.ts | 1 + plugins/rbac/tsconfig.json | 9 +++ plugins/rbac/turbo.json | 9 +++ 14 files changed, 192 insertions(+) create mode 100644 plugins/rbac/.eslintrc.js create mode 100644 plugins/rbac/README.md create mode 100644 plugins/rbac/dev/index.tsx create mode 100644 plugins/rbac/package.json create mode 100644 plugins/rbac/src/components/RbacPage/RbacPage.test.tsx create mode 100644 plugins/rbac/src/components/RbacPage/RbacPage.tsx create mode 100644 plugins/rbac/src/components/RbacPage/index.ts create mode 100644 plugins/rbac/src/index.ts create mode 100644 plugins/rbac/src/plugin.test.ts create mode 100644 plugins/rbac/src/plugin.ts create mode 100644 plugins/rbac/src/routes.ts create mode 100644 plugins/rbac/src/setupTests.ts create mode 100644 plugins/rbac/tsconfig.json create mode 100644 plugins/rbac/turbo.json diff --git a/plugins/rbac/.eslintrc.js b/plugins/rbac/.eslintrc.js new file mode 100644 index 0000000000..e2a53a6ad2 --- /dev/null +++ b/plugins/rbac/.eslintrc.js @@ -0,0 +1 @@ +module.exports = require('@backstage/cli/config/eslint-factory')(__dirname); diff --git a/plugins/rbac/README.md b/plugins/rbac/README.md new file mode 100644 index 0000000000..1c324533da --- /dev/null +++ b/plugins/rbac/README.md @@ -0,0 +1,13 @@ +# rbac + +Welcome to the rbac 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 [/rbac](http://localhost:3000/rbac). + +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. diff --git a/plugins/rbac/dev/index.tsx b/plugins/rbac/dev/index.tsx new file mode 100644 index 0000000000..b9056a1230 --- /dev/null +++ b/plugins/rbac/dev/index.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +import { createDevApp } from '@backstage/dev-utils'; + +import { RbacPage, rbacPlugin } from '../src/plugin'; + +createDevApp() + .registerPlugin(rbacPlugin) + .addPage({ + element: , + title: 'Administration', + path: '/rbac', + }) + .render(); diff --git a/plugins/rbac/package.json b/plugins/rbac/package.json new file mode 100644 index 0000000000..893dc0aa5b --- /dev/null +++ b/plugins/rbac/package.json @@ -0,0 +1,58 @@ +{ + "name": "@janus-idp/backstage-plugin-rbac", + "version": "0.1.0", + "main": "src/index.ts", + "types": "src/index.ts", + "license": "Apache-2.0", + "publishConfig": { + "access": "public", + "main": "dist/index.esm.js", + "types": "dist/index.d.ts" + }, + "backstage": { + "role": "frontend-plugin" + }, + "scripts": { + "start": "backstage-cli package start", + "build": "backstage-cli package build", + "tsc": "tsc", + "lint": "backstage-cli package lint", + "test": "backstage-cli package test --passWithNoTests --coverage", + "clean": "backstage-cli package clean", + "prepack": "backstage-cli package prepack", + "postpack": "backstage-cli package postpack" + }, + "dependencies": { + "@backstage/core-components": "^0.13.6", + "@backstage/core-plugin-api": "^1.7.0", + "@backstage/theme": "^0.4.3", + "@material-ui/core": "^4.9.13", + "@material-ui/icons": "^4.11.3", + "@material-ui/lab": "^4.0.0-alpha.45", + "react-use": "^17.4.0" + }, + "peerDependencies": { + "react": "^16.13.1 || ^17.0.0" + }, + "devDependencies": { + "@backstage/cli": "0.23.0", + "@backstage/core-app-api": "1.11.0", + "@backstage/dev-utils": "1.0.22", + "@backstage/test-utils": "1.4.4", + "@testing-library/jest-dom": "5.17.0", + "@testing-library/react": "12.1.5", + "@testing-library/user-event": "14.5.1", + "@types/node": "18.18.5", + "msw": "1.3.2" + }, + "files": [ + "dist" + ], + "repository": "github:janus-idp/backstage-plugins", + "keywords": [ + "backstage", + "plugin" + ], + "homepage": "https://janus-idp.io/", + "bugs": "https://github.com/janus-idp/backstage-plugins/issues" +} diff --git a/plugins/rbac/src/components/RbacPage/RbacPage.test.tsx b/plugins/rbac/src/components/RbacPage/RbacPage.test.tsx new file mode 100644 index 0000000000..70ba5ecbae --- /dev/null +++ b/plugins/rbac/src/components/RbacPage/RbacPage.test.tsx @@ -0,0 +1,30 @@ +import React from 'react'; + +import { + renderInTestApp, + setupRequestMockHandlers, +} from '@backstage/test-utils'; + +import { screen } from '@testing-library/react'; +import { rest } from 'msw'; +import { setupServer } from 'msw/node'; + +import { RbacPage } from './RbacPage'; + +describe('RbacPage', () => { + const server = setupServer(); + // Enable sane handlers for network requests + setupRequestMockHandlers(server); + + // setup mock response + beforeEach(() => { + server.use( + rest.get('/*', (_, res, ctx) => res(ctx.status(200), ctx.json({}))), + ); + }); + + it('should render', async () => { + await renderInTestApp(); + expect(screen.getByText('Administration')).toBeInTheDocument(); + }); +}); diff --git a/plugins/rbac/src/components/RbacPage/RbacPage.tsx b/plugins/rbac/src/components/RbacPage/RbacPage.tsx new file mode 100644 index 0000000000..5612ddc108 --- /dev/null +++ b/plugins/rbac/src/components/RbacPage/RbacPage.tsx @@ -0,0 +1,22 @@ +import React from 'react'; + +import { Content, Header, InfoCard, Page } from '@backstage/core-components'; + +import { Grid, Typography } from '@material-ui/core'; + +export const RbacPage = () => ( + +
+ + + + + + All content should be wrapped in a card like this. + + + + + + +); diff --git a/plugins/rbac/src/components/RbacPage/index.ts b/plugins/rbac/src/components/RbacPage/index.ts new file mode 100644 index 0000000000..fb86ff2047 --- /dev/null +++ b/plugins/rbac/src/components/RbacPage/index.ts @@ -0,0 +1 @@ +export { RbacPage } from './RbacPage'; diff --git a/plugins/rbac/src/index.ts b/plugins/rbac/src/index.ts new file mode 100644 index 0000000000..660cdd939d --- /dev/null +++ b/plugins/rbac/src/index.ts @@ -0,0 +1 @@ +export { rbacPlugin, RbacPage } from './plugin'; diff --git a/plugins/rbac/src/plugin.test.ts b/plugins/rbac/src/plugin.test.ts new file mode 100644 index 0000000000..1df48920a4 --- /dev/null +++ b/plugins/rbac/src/plugin.test.ts @@ -0,0 +1,7 @@ +import { rbacPlugin } from './plugin'; + +describe('rbac', () => { + it('should export plugin', () => { + expect(rbacPlugin).toBeDefined(); + }); +}); diff --git a/plugins/rbac/src/plugin.ts b/plugins/rbac/src/plugin.ts new file mode 100644 index 0000000000..9453c42c51 --- /dev/null +++ b/plugins/rbac/src/plugin.ts @@ -0,0 +1,21 @@ +import { + createPlugin, + createRoutableExtension, +} from '@backstage/core-plugin-api'; + +import { rootRouteRef } from './routes'; + +export const rbacPlugin = createPlugin({ + id: 'rbac', + routes: { + root: rootRouteRef, + }, +}); + +export const RbacPage = rbacPlugin.provide( + createRoutableExtension({ + name: 'RbacPage', + component: () => import('./components/RbacPage').then(m => m.RbacPage), + mountPoint: rootRouteRef, + }), +); diff --git a/plugins/rbac/src/routes.ts b/plugins/rbac/src/routes.ts new file mode 100644 index 0000000000..723cae6f9d --- /dev/null +++ b/plugins/rbac/src/routes.ts @@ -0,0 +1,5 @@ +import { createRouteRef } from '@backstage/core-plugin-api'; + +export const rootRouteRef = createRouteRef({ + id: 'rbac', +}); diff --git a/plugins/rbac/src/setupTests.ts b/plugins/rbac/src/setupTests.ts new file mode 100644 index 0000000000..7b0828bfa8 --- /dev/null +++ b/plugins/rbac/src/setupTests.ts @@ -0,0 +1 @@ +import '@testing-library/jest-dom'; diff --git a/plugins/rbac/tsconfig.json b/plugins/rbac/tsconfig.json new file mode 100644 index 0000000000..ae77164361 --- /dev/null +++ b/plugins/rbac/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "@backstage/cli/config/tsconfig.json", + "include": ["src", "dev", "migrations"], + "exclude": ["node_modules"], + "compilerOptions": { + "outDir": "../../dist-types/plugins/rbac", + "rootDir": "." + } +} diff --git a/plugins/rbac/turbo.json b/plugins/rbac/turbo.json new file mode 100644 index 0000000000..35110fb923 --- /dev/null +++ b/plugins/rbac/turbo.json @@ -0,0 +1,9 @@ +{ + "extends": ["//"], + "pipeline": { + "tsc": { + "outputs": ["../../dist-types/plugins/rbac/**"], + "dependsOn": ["^tsc"] + } + } +}