feat(rbac): add rbac frontend plugin (#859)

Author: divyanshiGupta

plugins/rbac/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);

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.

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: <RbacPage />,
+    title: 'Administration',
+    path: '/rbac',
+  })
+  .render();

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"
+}

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(<RbacPage />);
+    expect(screen.getByText('Administration')).toBeInTheDocument();
+  });
+});

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 = () => (
+  <Page themeId="tool">
+    <Header title="Administration" />
+    <Content>
+      <Grid container spacing={3} direction="column">
+        <Grid item>
+          <InfoCard title="Information card">
+            <Typography variant="body1">
+              All content should be wrapped in a card like this.
+            </Typography>
+          </InfoCard>
+        </Grid>
+      </Grid>
+    </Content>
+  </Page>
+);

plugins/rbac/src/components/RbacPage/index.ts

@@ -0,0 +1 @@
+export { RbacPage } from './RbacPage';

plugins/rbac/src/index.ts

@@ -0,0 +1 @@
+export { rbacPlugin, RbacPage } from './plugin';

plugins/rbac/src/plugin.test.ts

@@ -0,0 +1,7 @@
+import { rbacPlugin } from './plugin';
+
+describe('rbac', () => {
+  it('should export plugin', () => {
+    expect(rbacPlugin).toBeDefined();
+  });
+});

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,
+  }),
+);

plugins/rbac/src/routes.ts

@@ -0,0 +1,5 @@
+import { createRouteRef } from '@backstage/core-plugin-api';
+
+export const rootRouteRef = createRouteRef({
+  id: 'rbac',
+});

plugins/rbac/src/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

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": "."
+  }
+}

plugins/rbac/turbo.json

@@ -0,0 +1,9 @@
+{
+  "extends": ["//"],
+  "pipeline": {
+    "tsc": {
+      "outputs": ["../../dist-types/plugins/rbac/**"],
+      "dependsOn": ["^tsc"]
+    }
+  }
+}