update permission required error state

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,65 @@
+/*
+ * 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 } from '@material-ui/core';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
+
+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={
+          <>
+            To view lightspeed plugin, contact your administrator to give the{' '}
+            <b>lightspeed.conversations.read</b> and{' '}
+            <b>lightspeed.conversations.create</b> permissions.
+          </>
+        }
+        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
+          </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();
     });
   });