feat(lightspeed): add missing permission screen for Notebooks tab (#2633)

* feat(lightspeed): add missing permission screen for Notebooks tab

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* fixing tests

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* yarn dedupe

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* moving notebook specific files to notebooks folder

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* using same permission error component for chat and notebook

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* updating the test

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* doing yarn dedupe

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* fixing prettier

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

---------

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

Author: its-mitesh-kumar

workspaces/lightspeed/.changeset/strange-peaches-confess.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-lightspeed': patch
+---
+
+Added a missing permission screen for the Notebooks tab. When a user lacks the `lightspeed.notebooks.use` permission, the Notebooks tab now displays a "Missing permission" message with a "Go back" button instead of the notebook list.

workspaces/lightspeed/package.json

@@ -66,7 +66,8 @@
   "resolutions": {
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "refractor@npm:3.6.0/prismjs": "^1.30.0"
+    "refractor@npm:3.6.0/prismjs": "^1.30.0",
+    "@backstage/frontend-plugin-api": "0.15.1"
   },
   "prettier": "@spotify/prettier-config",
   "lint-staged": {

workspaces/lightspeed/packages/app-legacy/package.json

@@ -19,6 +19,7 @@
     "lint": "backstage-cli package lint"
   },
   "dependencies": {
+    "@backstage-community/plugin-rbac": "^1.51.0",
     "@backstage/app-defaults": "^1.7.6",
     "@backstage/catalog-model": "^1.7.7",
     "@backstage/cli": "^0.36.0",

workspaces/lightspeed/packages/app-legacy/src/App.tsx

@@ -57,6 +57,7 @@ import {
   LightspeedPage,
   LightspeedDrawerProvider,
 } from '@red-hat-developer-hub/backstage-plugin-lightspeed';
+import { RbacPage } from '@backstage-community/plugin-rbac';
 
 const githubProvider = {
   id: 'github-auth-provider',
@@ -129,6 +130,7 @@ const routes = (
     <Route path="/settings" element={<UserSettingsPage />} />
     <Route path="/catalog-graph" element={<CatalogGraphPage />} />
     <Route path="/lightspeed" element={<LightspeedPage />} />
+    <Route path="/rbac" element={<RbacPage />} />
   </FlatRoutes>
 );
 

workspaces/lightspeed/packages/app-legacy/src/components/Root/Root.tsx

@@ -47,6 +47,7 @@ import {
   LightspeedDrawerStateExposer,
   LightspeedFAB,
 } from '@red-hat-developer-hub/backstage-plugin-lightspeed';
+import { Administration } from '@backstage-community/plugin-rbac';
 import { ApplicationDrawer } from './ApplicationDrawer';
 import LogoFull from './LogoFull';
 import LogoIcon from './LogoIcon';
@@ -127,6 +128,7 @@ export const Root = ({ children }: PropsWithChildren<{}>) => {
           </SidebarGroup>
           <SidebarSpace />
           <SidebarDivider />
+          <Administration />
           <SidebarGroup
             label="Settings"
             icon={<UserSettingsSignInAvatar />}

workspaces/lightspeed/packages/backend/package.json

@@ -21,6 +21,7 @@
     "build-image": "docker build ../.. -f Dockerfile --tag backstage"
   },
   "dependencies": {
+    "@backstage-community/plugin-rbac-backend": "5.2.6",
     "@backstage/backend-defaults": "^0.16.0",
     "@backstage/config": "^1.3.6",
     "@backstage/plugin-app-backend": "^0.5.12",

workspaces/lightspeed/packages/backend/src/index.ts

@@ -38,12 +38,8 @@ backend.add(
 // See https://backstage.io/docs/features/software-catalog/configuration#subscribing-to-catalog-errors
 backend.add(import('@backstage/plugin-catalog-backend-module-logs'));
 
-// permission plugin
-backend.add(import('@backstage/plugin-permission-backend'));
-// See https://backstage.io/docs/permissions/getting-started for how to create your own permission policy
-backend.add(
-  import('@backstage/plugin-permission-backend-module-allow-all-policy'),
-);
+// RBAC backend (registers as "permission" and provides /rbac; do not add plugin-permission-backend separately)
+backend.add(import('@backstage-community/plugin-rbac-backend'));
 
 // search plugin
 backend.add(import('@backstage/plugin-search-backend/alpha'));

workspaces/lightspeed/plugins/lightspeed/report-alpha.api.md

@@ -70,6 +70,9 @@ export const lightspeedTranslationRef: TranslationRef<
     readonly 'conversation.rename.placeholder': string;
     readonly 'permission.required.title': string;
     readonly 'permission.required.description': string;
+    readonly 'permission.subject.plugin': string;
+    readonly 'permission.subject.notebooks': string;
+    readonly 'permission.notebooks.goBack': string;
     readonly 'footer.accuracy.label': string;
     readonly 'common.cancel': string;
     readonly 'common.close': string;

workspaces/lightspeed/plugins/lightspeed/src/api/api.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { createApiRef } from '@backstage/core-plugin-api';
+import { createApiRef, type ApiRef } from '@backstage/core-plugin-api';
 
 import {
   Attachment,
@@ -57,6 +57,7 @@ export type LightspeedAPI = {
  * Lightspeed API interface
  */
 
-export const lightspeedApiRef = createApiRef<LightspeedAPI>({
-  id: 'plugin.lightspeed.service',
-});
+export const lightspeedApiRef: ApiRef<LightspeedAPI> =
+  createApiRef<LightspeedAPI>({
+    id: 'plugin.lightspeed.service',
+  });

workspaces/lightspeed/plugins/lightspeed/src/api/notebooksApi.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { createApiRef } from '@backstage/core-plugin-api';
+import { createApiRef, type ApiRef } from '@backstage/core-plugin-api';
 
 import { NotebookSession } from '../types';
 
@@ -32,6 +32,8 @@ export type NotebooksAPI = {
  * @public
  * AI Notebooks API interface
  */
-export const notebooksApiRef = createApiRef<NotebooksAPI>({
-  id: 'plugin.lightspeed.notebooks.service',
-});
+export const notebooksApiRef: ApiRef<NotebooksAPI> = createApiRef<NotebooksAPI>(
+  {
+    id: 'plugin.lightspeed.notebooks.service',
+  },
+);