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/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/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 = () => {
);
};
diff --git a/workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredState.tsx b/workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredState.tsx
index 479858a585..4c93544f33 100644
--- a/workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredState.tsx
+++ b/workspaces/lightspeed/plugins/lightspeed/src/components/PermissionRequiredState.tsx
@@ -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';
@@ -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',
+ },
+ },
},
}),
);
@@ -63,19 +97,17 @@ const PermissionRequiredState = ({
);
return (
-
+
- ': <>{subject},
- '': permissionsList,
- }}
- />
-
+ ': <>{subject},
+ '': permissionsList,
+ }}
+ />
}
missing={{ customImage: }}
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 @@
-
+
+
\ No newline at end of file
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