From 8ffd6549abfdad7a76e2b5112fa83ec4bca6f64a Mon Sep 17 00:00:00 2001 From: rohitratannagar Date: Tue, 2 Jun 2026 00:56:45 +0530 Subject: [PATCH 1/3] fix(lightspeed): update missing permission illsutration Signed-off-by: rohitratannagar --- .../fix-missing-permission-image.md | 5 + .../src/components/PermissionRequiredIcon.tsx | 1 + .../components/PermissionRequiredState.tsx | 80 +++- .../src/images/permission-required.svg | 367 +++++++++++++++--- 4 files changed, 392 insertions(+), 61 deletions(-) create mode 100644 workspaces/lightspeed/.changeset/fix-missing-permission-image.md diff --git a/workspaces/lightspeed/.changeset/fix-missing-permission-image.md b/workspaces/lightspeed/.changeset/fix-missing-permission-image.md new file mode 100644 index 0000000000..b257a6a0f2 --- /dev/null +++ b/workspaces/lightspeed/.changeset/fix-missing-permission-image.md @@ -0,0 +1,5 @@ +--- +'@red-hat-developer-hub/backstage-plugin-lightspeed': patch +--- + +fix(lightspeed): Update missing permission view with responsive layout and new illustration diff --git a/workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredIcon.tsx b/workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredIcon.tsx index 2c18231c69..d0771f887d 100644 --- a/workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredIcon.tsx +++ b/workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredIcon.tsx @@ -24,6 +24,7 @@ export const PermissionRequiredIcon = () => { {t('icon.permissionRequired.alt')} ); }; diff --git a/workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredState.tsx b/workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredState.tsx index 479858a585..3e9f3ad49d 100644 --- a/workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredState.tsx +++ b/workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredState.tsx @@ -16,8 +16,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'; @@ -27,12 +25,64 @@ import { Trans } from './Trans'; const useStyles = makeStyles(theme => createStyles({ - permissionError: { + root: { display: 'flex', + width: '100%', height: '100%', alignItems: 'center', - padding: '100px', + justifyContent: 'center', backgroundColor: theme.palette.background.default, + containerType: 'inline-size', + }, + layout: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + textAlign: 'center', + gap: theme.spacing(2), + padding: theme.spacing(4), + width: '100%', + '@container (min-width: 600px)': { + flexDirection: 'row', + textAlign: 'left', + alignItems: 'center', + justifyContent: 'space-around', + padding: theme.spacing(4, 8), + }, + }, + textColumn: { + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(2), + order: 2, + '@container (min-width: 600px)': { + order: 1, + flex: 1, + }, + }, + imageColumn: { + order: 1, + '@container (min-width: 600px)': { + order: 2, + flex: 1, + display: 'flex', + justifyContent: 'center', + }, + }, + title: { + fontSize: 'clamp(1.5rem, 3cqi, 2.5rem)', + fontWeight: 300, + }, + description: { + fontSize: 'clamp(0.875rem, 1.5cqi, 1.125rem)', + color: theme.palette.text.secondary, + '& b': { + fontWeight: 500, + color: theme.palette.text.primary, + }, + }, + action: { + marginTop: theme.spacing(1), }, }), ); @@ -63,11 +113,13 @@ const PermissionRequiredState = ({ ); return ( -
- +
+
+
+ + {t('permission.required.title')} + + - } - missing={{ customImage: }} - action={action} - /> +
{action}
+
+
+ +
+
); }; diff --git a/workspaces/lightspeed/plugins/lightspeed/src/images/permission-required.svg b/workspaces/lightspeed/plugins/lightspeed/src/images/permission-required.svg index 0c7667bede..162999d709 100644 --- a/workspaces/lightspeed/plugins/lightspeed/src/images/permission-required.svg +++ b/workspaces/lightspeed/plugins/lightspeed/src/images/permission-required.svg @@ -1,48 +1,319 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + Manage cloud services illustration - Gray +cloud, public, private, data, applications, managed platform, hybrid cloud, connections + + + + + Illustration + Full + Illustration + alwilker@redhat.com + 2024-11-25T16:17:18.697Z + 2024-11-25T16:17:18.697Z + pending + TRA267cb102-85d8-4bd4-8e0b-63d792ebcda0 + yes + true + pending + 2024-11-25T16:17:34.114Z + rhcc-audience:internal + no + square + yes + DER267cb102-85d8-4bd4-8e0b-63d792ebcda0 + no + + + colorway:gray + colorway:red + + + 2024-11-25T16:20:30.487Z + image/svg+xml + + + Manage cloud services illustration - Gray + + + + + cloud, public, private, data, applications, managed platform, hybrid cloud, connections + + + 108 + 108 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From 8c823bdbfa7e271419b1ab68328c8e6464b37fce Mon Sep 17 00:00:00 2001 From: HusneShabbir Date: Tue, 2 Jun 2026 13:42:04 +0530 Subject: [PATCH 2/3] fix(lightspeed): upgrade Playwright to 1.60.0 for Node 24 CI install Playwright < 1.60.0 hangs after browser download on Node 24.16+ during playwright install in GitHub Actions. Co-authored-by: Cursor --- workspaces/lightspeed/package.json | 2 +- .../packages/app-legacy/package.json | 2 +- .../lightspeed/packages/app/package.json | 2 +- workspaces/lightspeed/yarn.lock | 34 +++++++++---------- 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/workspaces/lightspeed/package.json b/workspaces/lightspeed/package.json index 11f04e0a57..e05b698cd0 100644 --- a/workspaces/lightspeed/package.json +++ b/workspaces/lightspeed/package.json @@ -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", diff --git a/workspaces/lightspeed/packages/app-legacy/package.json b/workspaces/lightspeed/packages/app-legacy/package.json index 1455fb1f4b..68dd800068 100644 --- a/workspaces/lightspeed/packages/app-legacy/package.json +++ b/workspaces/lightspeed/packages/app-legacy/package.json @@ -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", diff --git a/workspaces/lightspeed/packages/app/package.json b/workspaces/lightspeed/packages/app/package.json index d5d9af45ef..9599f7c802 100644 --- a/workspaces/lightspeed/packages/app/package.json +++ b/workspaces/lightspeed/packages/app/package.json @@ -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", diff --git a/workspaces/lightspeed/yarn.lock b/workspaces/lightspeed/yarn.lock index 54f0635413..99aba1bfb9 100644 --- a/workspaces/lightspeed/yarn.lock +++ b/workspaces/lightspeed/yarn.lock @@ -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" @@ -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 @@ -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" @@ -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" @@ -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 From b64239f0848c5bbc6ba7236f1fd571875fa38d5e Mon Sep 17 00:00:00 2001 From: rohitratannagar Date: Wed, 3 Jun 2026 12:46:11 +0530 Subject: [PATCH 3/3] reuse EmptyState component in PermissionRequiredState Signed-off-by: rohitratannagar --- .../components/PermissionRequiredState.tsx | 110 +++++++----------- 1 file changed, 44 insertions(+), 66 deletions(-) diff --git a/workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredState.tsx b/workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredState.tsx index 3e9f3ad49d..4c93544f33 100644 --- a/workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredState.tsx +++ b/workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredState.tsx @@ -16,7 +16,8 @@ import { Fragment } from 'react'; -import { Typography } from '@material-ui/core'; +import { EmptyState } from '@backstage/core-components'; + import { createStyles, makeStyles } from '@material-ui/core/styles'; import { useTranslation } from '../hooks/useTranslation'; @@ -27,63 +28,46 @@ const useStyles = makeStyles(theme => createStyles({ root: { display: 'flex', + flexDirection: 'column', width: '100%', height: '100%', + minHeight: '100%', + flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: theme.palette.background.default, containerType: 'inline-size', - }, - layout: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - textAlign: 'center', - gap: theme.spacing(2), - padding: theme.spacing(4), - width: '100%', - '@container (min-width: 600px)': { - flexDirection: 'row', - textAlign: 'left', + '& [class*="BackstageEmptyState-root"]': { alignItems: 'center', - justifyContent: 'space-around', - padding: theme.spacing(4, 8), + padding: theme.spacing(4), }, - }, - textColumn: { - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(2), - order: 2, - '@container (min-width: 600px)': { - order: 1, - flex: 1, + '& [class*="MuiTypography-h5"]': { + fontSize: 'clamp(1.875rem, 3.75cqi, 3.125rem)', + fontWeight: 400, }, - }, - imageColumn: { - order: 1, - '@container (min-width: 600px)': { - order: 2, - flex: 1, - display: 'flex', - justifyContent: 'center', + '& [class*="MuiTypography-body1"]': { + fontSize: '1.25em', + color: theme.palette.text.secondary, + '& b': { + fontWeight: 500, + color: theme.palette.text.primary, + }, }, - }, - title: { - fontSize: 'clamp(1.5rem, 3cqi, 2.5rem)', - fontWeight: 300, - }, - description: { - fontSize: 'clamp(0.875rem, 1.5cqi, 1.125rem)', - 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', + }, }, }, - action: { - marginTop: theme.spacing(1), - }, }), ); @@ -114,26 +98,20 @@ const PermissionRequiredState = ({ return (
-
-
- - {t('permission.required.title')} - - - ': <>{subject}, - '': permissionsList, - }} - /> - -
{action}
-
-
- -
-
+ ': <>{subject}, + '': permissionsList, + }} + /> + } + missing={{ customImage: }} + action={action} + />
); };