Skip to content

fix(lightspeed): update missing permission illsutration #3261

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rohitratannagar wants to merge 3 commits into
base: main
Choose a base branch
from
+390 −81
Open

fix(lightspeed): update missing permission illsutration #3261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8ffd654
fix(lightspeed): update missing permission illsutration
rohitratannagar Jun 1, 2026
8c823bd
fix(lightspeed): upgrade Playwright to 1.60.0 for Node 24 CI install
Jun 2, 2026
b64239f
reuse EmptyState component in PermissionRequiredState
rohitratannagar Jun 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions workspaces/lightspeed/.changeset/fix-missing-permission-image.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@red-hat-developer-hub/backstage-plugin-lightspeed': patch
---

fix(lightspeed): Update missing permission view with responsive layout and new illustration
2 changes: 1 addition & 1 deletion workspaces/lightspeed/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"@changesets/cli": "^2.27.1",
"@ianvs/prettier-plugin-sort-imports": "^4.4.0",
"@jest/environment-jsdom-abstract": "^30.3.0",
"@playwright/test": "1.58.2",
"@playwright/test": "1.60.0",
"@spotify/prettier-config": "^12.0.0",
"@types/jest": "^30.0.0",
"@types/jsdom": "^27.0.0",
Expand Down
2 changes: 1 addition & 1 deletion workspaces/lightspeed/packages/app-legacy/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
"devDependencies": {
"@axe-core/playwright": "^4.10.0",
"@backstage/test-utils": "^1.7.16",
"@playwright/test": "1.58.2",
"@playwright/test": "1.60.0",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^15.0.0",
Expand Down
2 changes: 1 addition & 1 deletion workspaces/lightspeed/packages/app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
},
"devDependencies": {
"@backstage/frontend-test-utils": "^0.5.1",
"@playwright/test": "1.58.2",
"@playwright/test": "1.60.0",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^15.0.0",
Expand Down
1 change: 1 addition & 0 deletions workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export const PermissionRequiredIcon = () => {
<img
src={permissionRequired as any}
alt={t('icon.permissionRequired.alt')}
style={{ width: 'clamp(200px, 50cqi, 600px)' }}
/>
);
};
58 changes: 45 additions & 13 deletions workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import { Fragment } from 'react';

import { EmptyState } from '@backstage/core-components';

import { Typography } from '@material-ui/core';
import { createStyles, makeStyles } from '@material-ui/core/styles';

import { useTranslation } from '../hooks/useTranslation';
Expand All @@ -27,12 +26,47 @@ import { Trans } from './Trans';

const useStyles = makeStyles(theme =>
createStyles({
permissionError: {
root: {
display: 'flex',
flexDirection: 'column',
width: '100%',
height: '100%',
minHeight: '100%',
flex: 1,
alignItems: 'center',
padding: '100px',
justifyContent: 'center',
backgroundColor: theme.palette.background.default,
containerType: 'inline-size',
'& [class*="BackstageEmptyState-root"]': {
alignItems: 'center',
padding: theme.spacing(4),
},
'& [class*="MuiTypography-h5"]': {
fontSize: 'clamp(1.875rem, 3.75cqi, 3.125rem)',
fontWeight: 400,
},
'& [class*="MuiTypography-body1"]': {
fontSize: '1.25em',
color: theme.palette.text.secondary,
'& b': {
fontWeight: 500,
color: theme.palette.text.primary,
},
},
'@container (max-width: 899px)': {
'& [class*="BackstageEmptyState-root"]': {
textAlign: 'center',
},
'& [class*="MuiGrid-grid-md-6"]': {
maxWidth: '100%',
flexBasis: '100%',
},
'& [class*="BackstageEmptyState-imageContainer"]': {
order: -1,
display: 'flex',
justifyContent: 'center',
},
},
},
}),
);
Expand Down Expand Up @@ -63,19 +97,17 @@ const PermissionRequiredState = ({
);

return (
<div className={classes.permissionError}>
<div className={classes.root}>
Copy link
Copy Markdown
Member

@its-mitesh-kumar its-mitesh-kumar Jun 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rohitratannagar Could you please try to re-use , and if you are facing any issue related to image to fit in in overlay mode, take help of Shiran.

<EmptyState
title={t('permission.required.title')}
description={
<Typography variant="subtitle1">
<Trans
message="permission.required.description"
components={{
'<subject/>': <>{subject}</>,
'<permissions/>': permissionsList,
}}
/>
</Typography>
<Trans
message="permission.required.description"
components={{
'<subject/>': <>{subject}</>,
'<permissions/>': permissionsList,
}}
/>
}
missing={{ customImage: <PermissionRequiredIcon /> }}
action={action}
Expand Down
367 changes: 319 additions & 48 deletions workspaces/lightspeed/plugins/lightspeed/src/images/permission-required.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 17 additions & 17 deletions workspaces/lightspeed/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5974,7 +5974,7 @@ __metadata:
"@changesets/cli": "npm:^2.27.1"
"@ianvs/prettier-plugin-sort-imports": "npm:^4.4.0"
"@jest/environment-jsdom-abstract": "npm:^30.3.0"
"@playwright/test": "npm:1.58.2"
"@playwright/test": "npm:1.60.0"
"@spotify/prettier-config": "npm:^12.0.0"
"@types/jest": "npm:^30.0.0"
"@types/jsdom": "npm:^27.0.0"
Expand Down Expand Up @@ -8771,14 +8771,14 @@ __metadata:
languageName: node
linkType: hard

"@playwright/test@npm:1.58.2":
version: 1.58.2
resolution: "@playwright/test@npm:1.58.2"
"@playwright/test@npm:1.60.0":
version: 1.60.0
resolution: "@playwright/test@npm:1.60.0"
dependencies:
playwright: "npm:1.58.2"
playwright: "npm:1.60.0"
bin:
playwright: cli.js
checksum: 10c0/2164c03ad97c3653ff02e8818a71f3b2bbc344ac07924c9d8e31cd57505d6d37596015a41f51396b3ed8de6840f59143eaa9c21bf65515963da20740119811da
checksum: 10c0/86b06e6437933e741c7cd43f362024e857e7bc28a55fcbb0553ef55e01a2a403c64f4786868de8af86a6e303fe99e98a18a42ba19489f43ae122e457f9e2d189
languageName: node
linkType: hard

Expand Down Expand Up @@ -16230,7 +16230,7 @@ __metadata:
"@material-ui/core": "npm:^4.12.2"
"@material-ui/icons": "npm:^4.9.1"
"@mui/material": "npm:^5.12.2"
"@playwright/test": "npm:1.58.2"
"@playwright/test": "npm:1.60.0"
"@red-hat-developer-hub/backstage-plugin-lightspeed": "workspace:^"
"@red-hat-developer-hub/backstage-plugin-theme": "npm:^0.12.0"
"@testing-library/dom": "npm:^9.0.0"
Expand Down Expand Up @@ -16279,7 +16279,7 @@ __metadata:
"@backstage/ui": "npm:^0.13.1"
"@material-ui/core": "npm:^4.12.2"
"@material-ui/icons": "npm:^4.9.1"
"@playwright/test": "npm:1.58.2"
"@playwright/test": "npm:1.60.0"
"@red-hat-developer-hub/backstage-plugin-app-react": "npm:^0.0.5"
"@red-hat-developer-hub/backstage-plugin-lightspeed": "workspace:^"
"@testing-library/dom": "npm:^9.0.0"
Expand Down Expand Up @@ -30279,27 +30279,27 @@ __metadata:
languageName: node
linkType: hard

"playwright-core@npm:1.58.2":
version: 1.58.2
resolution: "playwright-core@npm:1.58.2"
"playwright-core@npm:1.60.0":
version: 1.60.0
resolution: "playwright-core@npm:1.60.0"
bin:
playwright-core: cli.js
checksum: 10c0/5aa15b2b764e6ffe738293a09081a6f7023847a0dbf4cd05fe10eed2e25450d321baf7482f938f2d2eb330291e197fa23e57b29a5b552b89927ceb791266225b
checksum: 10c0/99ccd43923b6e9355e0723b7fe221e6326efd4687f8dafff951313662aea11db51f542a9c2122c704c445fb9baae1c9ec9fa6f895126bbddd9fe92313f6942c9
languageName: node
linkType: hard

"playwright@npm:1.58.2":
version: 1.58.2
resolution: "playwright@npm:1.58.2"
"playwright@npm:1.60.0":
version: 1.60.0
resolution: "playwright@npm:1.60.0"
dependencies:
fsevents: "npm:2.3.2"
playwright-core: "npm:1.58.2"
playwright-core: "npm:1.60.0"
dependenciesMeta:
fsevents:
optional: true
bin:
playwright: cli.js
checksum: 10c0/d060d9b7cc124bd8b5dffebaab5e84f6b34654a553758fe7b19cc598dfbee93f6ecfbdc1832b40a6380ae04eade86ef3285ba03aa0b136799e83402246dc0727
checksum: 10c0/714ad76d85b4865d7e43c0012f9039800c1485373388973ed39d79339cee5ad467052d1e2f1eaeca107a1cb6e65342186a8578a4c3504853d84c3a691250d5db
languageName: node
linkType: hard

Expand Down
Loading