update permission required error state

workspaces/lightspeed/plugins/lightspeed/package.json

@@ -44,6 +44,7 @@
     "@backstage/theme": "^0.6.0",
     "@material-ui/core": "^4.9.13",
     "@material-ui/lab": "^4.0.0-alpha.61",
+    "@mui/icons-material": "^6.1.8",
     "@patternfly/react-core": "6.0.0-prerelease.21",
     "@patternfly/virtual-assistant": "2.0.0-alpha.61",
     "@red-hat-developer-hub/backstage-plugin-lightspeed-common": "workspace:^",

workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedPage.tsx

@@ -20,13 +20,13 @@ import { Content, Page } from '@backstage/core-components';
 import { identityApiRef, useApi } from '@backstage/core-plugin-api';
 
 import { createStyles, makeStyles, useTheme } from '@material-ui/core/styles';
-import { Alert, AlertTitle } from '@material-ui/lab';
 import { QueryClientProvider } from '@tanstack/react-query';
 
 import { useAllModels } from '../hooks/useAllModels';
 import { useLightspeedViewPermission } from '../hooks/useLightspeedViewPermission';
 import queryClient from '../utils/queryClient';
 import { LightspeedChat } from './LightSpeedChat';
+import PermissionRequiredState from './PermissionRequiredState';
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -78,16 +78,12 @@ const LightspeedPageInner = () => {
   if (loading) {
     return null;
   }
+
   return (
     <Page themeId="tool">
       <Content className={classes.container}>
         {!hasViewAccess ? (
-          <Alert severity="warning" data-testid="no-permission-alert">
-            <AlertTitle>Permission required</AlertTitle>
-            To view lightspeed plugin, contact your administrator to give you
-            the `lightspeed.conversations.read` and
-            `lightspeed.conversations.create` permission.
-          </Alert>
+          <PermissionRequiredState />
         ) : (
           <LightspeedChat
             selectedModel={selectedModel}

workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredIcon.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as React from 'react';
+
+import permissionRequired from '../images/permission-required.svg';
+
+export const PermissionRequiredIcon = () => {
+  return <img src={permissionRequired as any} alt="permission required icon" />;
+};

workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredState.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+
+import { EmptyState } from '@backstage/core-components';
+
+import { Button, Typography } from '@material-ui/core';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+
+import { PermissionRequiredIcon } from './PermissionRequiredIcon';
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    permissionError: {
+      display: 'flex',
+      height: '100%',
+      alignItems: 'center',
+      padding: '100px',
+    },
+  }),
+);
+
+const PermissionRequiredState = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.permissionError}>
+      <EmptyState
+        title="Missing permissions"
+        description={
+          <Typography variant="subtitle1">
+            To view lightspeed plugin, contact your administrator to give the{' '}
+            <b>lightspeed.conversations.read</b> and{' '}
+            <b>lightspeed.conversations.create</b> permissions.
+          </Typography>
+        }
+        missing={{ customImage: <PermissionRequiredIcon /> }}
+        action={
+          <Button
+            variant="outlined"
+            color="primary"
+            target="_blank"
+            href="https://github.com/redhat-developer/rhdh-plugins/blob/main/workspaces/lightspeed/plugins/lightspeed/README.md#permission-framework-support"
+          >
+            Read more &nbsp; <OpenInNewIcon />
+          </Button>
+        }
+      />
+    </div>
+  );
+};
+export default PermissionRequiredState;

workspaces/lightspeed/plugins/lightspeed/src/components/__tests__/LightspeedPage.test.tsx

@@ -72,7 +72,7 @@ describe('LightspeedPage', () => {
     });
   });
 
-  it('should display permission required alert', async () => {
+  it('should display missing permissions alert', async () => {
     mockUsePermission.mockReturnValue({ loading: false, allowed: false });
 
     await renderInTestApp(
@@ -82,7 +82,7 @@ describe('LightspeedPage', () => {
     );
 
     await waitFor(() => {
-      expect(screen.getByText('Permission required')).toBeInTheDocument();
+      expect(screen.getByText('Missing permissions')).toBeInTheDocument();
     });
   });
 

workspaces/lightspeed/yarn.lock

@@ -2734,7 +2734,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.26.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
   version: 7.26.0
   resolution: "@babel/runtime@npm:7.26.0"
   dependencies:
@@ -9010,6 +9010,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/icons-material@npm:^6.1.8":
+  version: 6.1.8
+  resolution: "@mui/icons-material@npm:6.1.8"
+  dependencies:
+    "@babel/runtime": ^7.26.0
+  peerDependencies:
+    "@mui/material": ^6.1.8
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 065c254f9b5d9ad9161115a49698e4a03ca3ef31c0de6491cc205f66f74f5c16f273ff505e730140ba0b67dcd85be99ead16217c7ff3b8d48f36d81b323fe19c
+  languageName: node
+  linkType: hard
+
 "@mui/material@npm:^5.12.2":
   version: 5.16.7
   resolution: "@mui/material@npm:5.16.7"
@@ -10867,6 +10883,7 @@ __metadata:
     "@ianvs/prettier-plugin-sort-imports": ^4.4.0
     "@material-ui/core": ^4.9.13
     "@material-ui/lab": ^4.0.0-alpha.61
+    "@mui/icons-material": ^6.1.8
     "@patternfly/react-core": 6.0.0-prerelease.21
     "@patternfly/virtual-assistant": 2.0.0-alpha.61
     "@red-hat-developer-hub/backstage-plugin-lightspeed-common": "workspace:^"