diff --git a/workspaces/lightspeed/plugins/lightspeed/package.json b/workspaces/lightspeed/plugins/lightspeed/package.json index 0dd51892..1b6a6576 100644 --- a/workspaces/lightspeed/plugins/lightspeed/package.json +++ b/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:^", diff --git a/workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedPage.tsx b/workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedPage.tsx index 45e625fe..dd70e2da 100644 --- a/workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedPage.tsx +++ b/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 ( {!hasViewAccess ? ( - - Permission required - To view lightspeed plugin, contact your administrator to give you - the `lightspeed.conversations.read` and - `lightspeed.conversations.create` permission. - + ) : ( { + return permission required icon; +}; diff --git a/workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredState.tsx b/workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredState.tsx new file mode 100644 index 00000000..f1e66b85 --- /dev/null +++ b/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 ( +
+ + To view lightspeed plugin, contact your administrator to give the{' '} + lightspeed.conversations.read and{' '} + lightspeed.conversations.create permissions. + + } + missing={{ customImage: }} + action={ + + } + /> +
+ ); +}; +export default PermissionRequiredState; diff --git a/workspaces/lightspeed/plugins/lightspeed/src/components/__tests__/LightspeedPage.test.tsx b/workspaces/lightspeed/plugins/lightspeed/src/components/__tests__/LightspeedPage.test.tsx index 4a3330f5..1b8886db 100644 --- a/workspaces/lightspeed/plugins/lightspeed/src/components/__tests__/LightspeedPage.test.tsx +++ b/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(); }); }); diff --git a/workspaces/lightspeed/plugins/lightspeed/src/images/permission-required.svg b/workspaces/lightspeed/plugins/lightspeed/src/images/permission-required.svg new file mode 100644 index 00000000..0c7667be --- /dev/null +++ b/workspaces/lightspeed/plugins/lightspeed/src/images/permission-required.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/workspaces/lightspeed/yarn.lock b/workspaces/lightspeed/yarn.lock index 2e665b1f..8eb9999d 100644 --- a/workspaces/lightspeed/yarn.lock +++ b/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:^"