Skip to content
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

Jump to bottom

Feat/make rta url params optional #2431

Open
wants to merge 16 commits into
base: main
Choose a base branch
from
Open

Feat/make rta url params optional #2431

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
dda22ec
make rta editor url params optional
heimwege Oct 1, 2024
a61d7a1
adjust test snap
heimwege Oct 1, 2024
0c55cd8
add and adjust tests
heimwege Oct 1, 2024
b04a81a
refactoring
heimwege Oct 1, 2024
01cd1a6
Merge branch 'main' into feat/make-rta-url-params-optional
heimwege Oct 2, 2024
8ba59fe
fix unit test
heimwege Oct 2, 2024
8a2da22
Merge branch 'main' into feat/make-rta-url-params-optional
heimwege Oct 3, 2024
d03798f
Merge branch 'main' into feat/make-rta-url-params-optional
heimwege Oct 7, 2024
ee324d3
adjust unit test
heimwege Oct 7, 2024
d737322
Merge branch 'main' into feat/make-rta-url-params-optional
heimwege Oct 7, 2024
6e10406
Merge branch 'main' into feat/make-rta-url-params-optional
heimwege Oct 7, 2024
9ba320c
Merge branch 'main' into feat/make-rta-url-params-optional
heimwege Oct 8, 2024
85df4c1
Merge branch 'main' into feat/make-rta-url-params-optional
heimwege Oct 8, 2024
1c3d79f
Merge branch 'main' into feat/make-rta-url-params-optional
heimwege Oct 8, 2024
fc75845
Merge branch 'main' into feat/make-rta-url-params-optional
heimwege Oct 13, 2024
ab3e7c0
also add url param sap-ui-xx-viewCache
heimwege Oct 17, 2024
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 .changeset/metal-worms-drive.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sap-ux/preview-middleware': patch
---

make rta editor url params optional
2 changes: 1 addition & 1 deletion packages/preview-middleware/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ server:
```
This mount path can be used with a run script that looks as follows.
```Json
"start-variants-management": "ui5 serve --open \"test/variant-editor.html.html?fiori-tools-rta-mode=true&sap-ui-rta-skip-flex-validation=true#app-preview\""
"start-variants-management": "ui5 serve --open \"test/variant-editor.html.html#app-preview\""
```

### Test Suites
Expand Down
10 changes: 9 additions & 1 deletion packages/preview-middleware/src/base/flp.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,15 @@ export class FlpSandbox {
this.router.use(`${path}editor`, serveStatic(cpe));
}

this.router.get(previewUrl, (_req: Request, res: Response) => {
this.router.get(previewUrl, (req: Request, res: Response) => {
if (!req.query['fiori-tools-rta-mode']) {
// Redirect to the same URL but add the necessary parameter
const params = JSON.parse(JSON.stringify(req.query));
params['fiori-tools-rta-mode'] = 'true';
params['sap-ui-rta-skip-flex-validation'] = 'true';
res.redirect(302, `${previewUrl}?${new URLSearchParams(params)}`);
return;
}
const html = this.generateSandboxForEditor(rta, editor).replace(
'</body>',
`</body>\n<!-- livereload disabled for editor </body>-->`
Expand Down
271 changes: 5 additions & 266 deletions packages/preview-middleware/test/unit/base/__snapshots__/flp.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -528,9 +528,6 @@ exports[`FlpSandbox router editor with config 1`] = `
data-sap-ui-resourceroots='{\\"open.ux.preview.client\\":\\"../preview/client\\",\\"test.fe.v2.app\\":\\"..\\",\\"test.fe.v2.other\\":\\"/yet/another/app\\"}'
data-sap-ui-frameOptions=\\"allow\\"
data-sap-ui-xx-componentPreload=\\"off\\"
data-sap-ui-xx-designMode=\\"true\\"
data-sap-ui-xx-suppressDeactivationOfControllerCode=\\"true\\"
data-sap-ui-xx-viewCache=\\"false\\"
data-sap-ui-oninit=\\"module:open/ux/preview/client/flp/init\\">
</script>

Expand All @@ -544,83 +541,7 @@ exports[`FlpSandbox router editor with config 1`] = `
</html>"
`;

exports[`FlpSandbox router rta 1`] = `
"<!DOCTYPE HTML>
<html lang=\\"en\\">
<!-- Copyright (c) 2015 SAP AG, All Rights Reserved -->

<head>
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\">
<meta charset=\\"UTF-8\\">
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\">
<title>Local FLP Sandbox</title>

<!-- Bootstrap the unified shell in sandbox mode for standalone usage.

The renderer is specified in the global Unified Shell configuration object \\"sap-ushell-config\\".

The fiori2 renderer will render the shell header allowing, for instance,
testing of additional application setting buttons.

The navigation target resolution service is configured in a way that the empty URL hash is
resolved to our own application.

This example uses relative path references for the SAPUI5 resources and test-resources;
it might be necessary to adapt them depending on the target runtime platform.
The sandbox platform is restricted to development or demo use cases and must NOT be used
for productive scenarios.
-->
<script type=\\"text/javascript\\">
window[\\"sap-ushell-config\\"] = {
defaultRenderer: \\"fiori2\\",
renderers: {
fiori2: {
componentData: {
config: {
search: \\"hidden\\",
enableSearch: false
}
}
}
},
applications: {\\"app-preview\\":{\\"title\\":\\"My Simple App\\",\\"description\\":\\"This is a very simple application.\\",\\"additionalInformation\\":\\"SAPUI5.Component=test.fe.v2.app\\",\\"applicationType\\":\\"URL\\",\\"url\\":\\"..\\",\\"applicationDependencies\\":{\\"manifest\\":true}},\\"testfev2other-preview\\":{\\"title\\":\\"My Other App\\",\\"description\\":\\"This is a very simple application.\\",\\"additionalInformation\\":\\"SAPUI5.Component=test.fe.v2.other\\",\\"applicationType\\":\\"URL\\",\\"url\\":\\"/yet/another/app\\",\\"applicationDependencies\\":{\\"manifest\\":true}}}
};
</script>

<script type=\\"text/javascript\\">
window[\\"data-open-ux-preview-basePath\\"] = \\"..\\";
</script>

<script src=\\"../preview/client/flp/bootstrap.js\\" id=\\"preview-bootstrap\\"></script>
<script id=\\"sap-ushell-bootstrap\\"></script>
<!-- Bootstrap the UI5 core library. 'data-sap-ui-frameOptions=\\"allow\\"'' is a NON-SECURE setting for test environments -->
<script id=\\"sap-ui-bootstrap\\"
src=\\"../resources/sap-ui-core.js\\"
data-sap-ui-libs=\\"sap.m,sap.ui.core,sap.ushell,sap.f,sap.ui.comp,sap.ui.generic.app,sap.suite.ui.generic.template,sap.ui.rta\\"
data-sap-ui-async=\\"true\\"
data-sap-ui-preload=\\"async\\"
data-sap-ui-theme=\\"sap_horizon_dark\\"
data-sap-ui-compatVersion=\\"edge\\"
data-sap-ui-language=\\"en\\"
data-sap-ui-bindingSyntax=\\"complex\\"
data-sap-ui-flexibilityServices='[{\\"connector\\":\\"LrepConnector\\",\\"layers\\":[],\\"url\\":\\"/sap/bc/lrep\\"},{\\"applyConnector\\":\\"custom.connectors.WorkspaceConnector\\",\\"writeConnector\\":\\"custom.connectors.WorkspaceConnector\\",\\"custom\\":true},{\\"connector\\":\\"LocalStorageConnector\\",\\"layers\\":[\\"CUSTOMER\\",\\"USER\\"]}]'
data-sap-ui-resourceroots='{\\"open.ux.preview.client\\":\\"../preview/client\\",\\"test.fe.v2.app\\":\\"..\\",\\"test.fe.v2.other\\":\\"/yet/another/app\\"}'
data-sap-ui-frameOptions=\\"allow\\"
data-sap-ui-xx-componentPreload=\\"off\\"
data-sap-ui-oninit=\\"module:open/ux/preview/client/flp/init\\"
data-open-ux-preview-flex-settings='{\\"layer\\":\\"CUSTOMER_BASE\\",\\"baseId\\":\\"test.fe.v2.app\\",\\"appName\\":\\"test.fe.v2.app\\",\\"generator\\":\\"@sap-ux/preview-middleware\\",\\"developerMode\\":false}'>
</script>


</head>

<!-- UI Content -->
<body class=\\"sapUiBody\\" id=\\"content\\">
</body>
<!-- livereload disabled for editor </body>-->

</html>"
`;
exports[`FlpSandbox router rta 1`] = `"Found. Redirecting to /my/rta.html?fiori-tools-rta-mode=true&sap-ui-rta-skip-flex-validation=true"`;

exports[`FlpSandbox router rta with developerMode=true 1`] = `
"<!DOCTYPE html>
Expand Down Expand Up @@ -653,195 +574,13 @@ exports[`FlpSandbox router rta with developerMode=true 1`] = `
"
`;

exports[`FlpSandbox router rta with developerMode=true 2`] = `
"<!DOCTYPE HTML>
<html lang=\\"en\\">
<!-- Copyright (c) 2015 SAP AG, All Rights Reserved -->

<head>
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\">
<meta charset=\\"UTF-8\\">
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\">
<title>Local FLP Sandbox</title>

<!-- Bootstrap the unified shell in sandbox mode for standalone usage.

The renderer is specified in the global Unified Shell configuration object \\"sap-ushell-config\\".

The fiori2 renderer will render the shell header allowing, for instance,
testing of additional application setting buttons.

The navigation target resolution service is configured in a way that the empty URL hash is
resolved to our own application.
exports[`FlpSandbox router rta with developerMode=true 2`] = `"Found. Redirecting to /my/editor.html.inner.html?fiori-tools-rta-mode=true&sap-ui-rta-skip-flex-validation=true"`;

This example uses relative path references for the SAPUI5 resources and test-resources;
it might be necessary to adapt them depending on the target runtime platform.
The sandbox platform is restricted to development or demo use cases and must NOT be used
for productive scenarios.
-->
<script type=\\"text/javascript\\">
window[\\"sap-ushell-config\\"] = {
defaultRenderer: \\"fiori2\\",
renderers: {
fiori2: {
componentData: {
config: {
search: \\"hidden\\",
enableSearch: false
}
}
}
},
applications: {\\"app-preview\\":{\\"title\\":\\"My Simple App\\",\\"description\\":\\"This is a very simple application.\\",\\"additionalInformation\\":\\"SAPUI5.Component=test.fe.v2.app\\",\\"applicationType\\":\\"URL\\",\\"url\\":\\"..\\",\\"applicationDependencies\\":{\\"manifest\\":true}},\\"testfev2other-preview\\":{\\"title\\":\\"My Other App\\",\\"description\\":\\"This is a very simple application.\\",\\"additionalInformation\\":\\"SAPUI5.Component=test.fe.v2.other\\",\\"applicationType\\":\\"URL\\",\\"url\\":\\"/yet/another/app\\",\\"applicationDependencies\\":{\\"manifest\\":true}}}
};
</script>
exports[`FlpSandbox router rta with developerMode=true and plugin 1`] = `"Found. Redirecting to /with/plugin.html.inner.html?fiori-tools-rta-mode=true&sap-ui-rta-skip-flex-validation=true"`;

<script type=\\"text/javascript\\">
window[\\"data-open-ux-preview-basePath\\"] = \\"..\\";
</script>

<script src=\\"../preview/client/flp/bootstrap.js\\" id=\\"preview-bootstrap\\"></script>
<script id=\\"sap-ushell-bootstrap\\"></script>
<!-- Bootstrap the UI5 core library. 'data-sap-ui-frameOptions=\\"allow\\"'' is a NON-SECURE setting for test environments -->
<script id=\\"sap-ui-bootstrap\\"
src=\\"../resources/sap-ui-core.js\\"
data-sap-ui-libs=\\"sap.m,sap.ui.core,sap.ushell,sap.f,sap.ui.comp,sap.ui.generic.app,sap.suite.ui.generic.template,sap.ui.rta\\"
data-sap-ui-async=\\"true\\"
data-sap-ui-preload=\\"async\\"
data-sap-ui-theme=\\"sap_horizon_dark\\"
data-sap-ui-compatVersion=\\"edge\\"
data-sap-ui-language=\\"en\\"
data-sap-ui-bindingSyntax=\\"complex\\"
data-sap-ui-flexibilityServices='[{\\"connector\\":\\"LrepConnector\\",\\"layers\\":[],\\"url\\":\\"/sap/bc/lrep\\"},{\\"applyConnector\\":\\"custom.connectors.WorkspaceConnector\\",\\"writeConnector\\":\\"custom.connectors.WorkspaceConnector\\",\\"custom\\":true},{\\"connector\\":\\"LocalStorageConnector\\",\\"layers\\":[\\"CUSTOMER\\",\\"USER\\"]}]'
data-sap-ui-resourceroots='{\\"open.ux.preview.client\\":\\"../preview/client\\",\\"test.fe.v2.app\\":\\"..\\",\\"test.fe.v2.other\\":\\"/yet/another/app\\"}'
data-sap-ui-frameOptions=\\"allow\\"
data-sap-ui-xx-componentPreload=\\"off\\"
data-sap-ui-xx-designMode=\\"true\\"
data-sap-ui-xx-suppressDeactivationOfControllerCode=\\"true\\"
data-sap-ui-xx-viewCache=\\"false\\"
data-sap-ui-oninit=\\"module:open/ux/preview/client/flp/init\\"
data-open-ux-preview-flex-settings='{\\"layer\\":\\"CUSTOMER_BASE\\",\\"baseId\\":\\"test.fe.v2.app\\",\\"appName\\":\\"test.fe.v2.app\\",\\"generator\\":\\"@sap-ux/control-property-editor\\",\\"developerMode\\":true,\\"pluginScript\\":\\"open/ux/preview/client/cpe/init\\"}'>
</script>


<!-- Hides Rta native toolbar -->
<style>
#shell-header, .sapUiRtaToolbar {
visibility: hidden;
height: 1px;
}
.sapUshellShellCanvas {
top: 0 !important;
}
.sapUiRtaMode .sapUiShellBackgroundImage.sapUiGlobalBackgroundImageForce.sapUshellShellBG {
background-color: transparent !important;
}
</style>
</head>

<!-- UI Content -->
<body class=\\"sapUiBody\\" id=\\"content\\">
</body>
<!-- livereload disabled for editor </body>-->

</html>"
`;

exports[`FlpSandbox router rta with developerMode=true and plugin 1`] = `
"<!DOCTYPE HTML>
<html lang=\\"en\\">
<!-- Copyright (c) 2015 SAP AG, All Rights Reserved -->

<head>
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\">
<meta charset=\\"UTF-8\\">
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\">
<title>Local FLP Sandbox</title>

<!-- Bootstrap the unified shell in sandbox mode for standalone usage.

The renderer is specified in the global Unified Shell configuration object \\"sap-ushell-config\\".

The fiori2 renderer will render the shell header allowing, for instance,
testing of additional application setting buttons.

The navigation target resolution service is configured in a way that the empty URL hash is
resolved to our own application.

This example uses relative path references for the SAPUI5 resources and test-resources;
it might be necessary to adapt them depending on the target runtime platform.
The sandbox platform is restricted to development or demo use cases and must NOT be used
for productive scenarios.
-->
<script type=\\"text/javascript\\">
window[\\"sap-ushell-config\\"] = {
defaultRenderer: \\"fiori2\\",
renderers: {
fiori2: {
componentData: {
config: {
search: \\"hidden\\",
enableSearch: false
}
}
}
},
applications: {\\"app-preview\\":{\\"title\\":\\"My Simple App\\",\\"description\\":\\"This is a very simple application.\\",\\"additionalInformation\\":\\"SAPUI5.Component=test.fe.v2.app\\",\\"applicationType\\":\\"URL\\",\\"url\\":\\"..\\",\\"applicationDependencies\\":{\\"manifest\\":true}},\\"testfev2other-preview\\":{\\"title\\":\\"My Other App\\",\\"description\\":\\"This is a very simple application.\\",\\"additionalInformation\\":\\"SAPUI5.Component=test.fe.v2.other\\",\\"applicationType\\":\\"URL\\",\\"url\\":\\"/yet/another/app\\",\\"applicationDependencies\\":{\\"manifest\\":true}}}
};
</script>

<script type=\\"text/javascript\\">
window[\\"data-open-ux-preview-basePath\\"] = \\"..\\";
</script>

<script src=\\"../preview/client/flp/bootstrap.js\\" id=\\"preview-bootstrap\\"></script>
<script id=\\"sap-ushell-bootstrap\\"></script>
<!-- Bootstrap the UI5 core library. 'data-sap-ui-frameOptions=\\"allow\\"'' is a NON-SECURE setting for test environments -->
<script id=\\"sap-ui-bootstrap\\"
src=\\"../resources/sap-ui-core.js\\"
data-sap-ui-libs=\\"sap.m,sap.ui.core,sap.ushell,sap.f,sap.ui.comp,sap.ui.generic.app,sap.suite.ui.generic.template,sap.ui.rta\\"
data-sap-ui-async=\\"true\\"
data-sap-ui-preload=\\"async\\"
data-sap-ui-theme=\\"sap_horizon_dark\\"
data-sap-ui-compatVersion=\\"edge\\"
data-sap-ui-language=\\"en\\"
data-sap-ui-bindingSyntax=\\"complex\\"
data-sap-ui-flexibilityServices='[{\\"connector\\":\\"LrepConnector\\",\\"layers\\":[],\\"url\\":\\"/sap/bc/lrep\\"},{\\"applyConnector\\":\\"custom.connectors.WorkspaceConnector\\",\\"writeConnector\\":\\"custom.connectors.WorkspaceConnector\\",\\"custom\\":true},{\\"connector\\":\\"LocalStorageConnector\\",\\"layers\\":[\\"CUSTOMER\\",\\"USER\\"]}]'
data-sap-ui-resourceroots='{\\"open.ux.preview.client\\":\\"../preview/client\\",\\"test.fe.v2.app\\":\\"..\\",\\"test.fe.v2.other\\":\\"/yet/another/app\\"}'
data-sap-ui-frameOptions=\\"allow\\"
data-sap-ui-xx-componentPreload=\\"off\\"
data-sap-ui-xx-designMode=\\"true\\"
data-sap-ui-xx-suppressDeactivationOfControllerCode=\\"true\\"
data-sap-ui-xx-viewCache=\\"false\\"
data-sap-ui-oninit=\\"module:open/ux/preview/client/flp/init\\"
data-open-ux-preview-flex-settings='{\\"layer\\":\\"CUSTOMER_BASE\\",\\"baseId\\":\\"test.fe.v2.app\\",\\"appName\\":\\"test.fe.v2.app\\",\\"generator\\":\\"@sap-ux/control-property-editor\\",\\"developerMode\\":true,\\"pluginScript\\":\\"open/ux/tools/plugin\\"}'>
</script>


<!-- Hides Rta native toolbar -->
<style>
#shell-header, .sapUiRtaToolbar {
visibility: hidden;
height: 1px;
}
.sapUshellShellCanvas {
top: 0 !important;
}
.sapUiRtaMode .sapUiShellBackgroundImage.sapUiGlobalBackgroundImageForce.sapUshellShellBG {
background-color: transparent !important;
}
</style>
</head>

<!-- UI Content -->
<body class=\\"sapUiBody\\" id=\\"content\\">
</body>
<!-- livereload disabled for editor </body>-->

</html>"
`;
exports[`FlpSandbox router rta with editors path without leading "/" 1`] = `"Found. Redirecting to /without/slash/rta.html?fiori-tools-rta-mode=true&sap-ui-rta-skip-flex-validation=true"`;

exports[`FlpSandbox router rta with editors path without leading "/" 1`] = `
exports[`FlpSandbox router rta with url parameters 1`] = `
"<!DOCTYPE HTML>
<html lang=\\"en\\">
<!-- Copyright (c) 2015 SAP AG, All Rights Reserved -->
Expand Down
13 changes: 9 additions & 4 deletions packages/preview-middleware/test/unit/base/flp.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -308,20 +308,25 @@ describe('FlpSandbox', () => {
});

test('rta', async () => {
const response = await server.get('/my/rta.html').expect(200);
const response = await server.get('/my/rta.html').expect(302);
expect(response.text).toMatchSnapshot();
});

test('rta with url parameters', async () => {
const response = await server.get('/my/rta.html?fiori-tools-rta-mode=true').expect(200);
expect(response.text).toMatchSnapshot();
});

test('rta with editors path without leading "/"', async () => {
const response = await server.get('/without/slash/rta.html').expect(200);
const response = await server.get('/without/slash/rta.html').expect(302);
expect(response.text).toMatchSnapshot();
});

test('rta with developerMode=true', async () => {
let response = await server.get('/my/editor.html').expect(200);
expect(response.text).toMatchSnapshot();
expect(response.text.includes('livereloadPort: 35729')).toBe(true);
response = await server.get('/my/editor.html.inner.html').expect(200);
response = await server.get('/my/editor.html.inner.html').expect(302);
expect(response.text).toMatchSnapshot();
});

Expand All @@ -336,7 +341,7 @@ describe('FlpSandbox', () => {

test('rta with developerMode=true and plugin', async () => {
await server.get('/with/plugin.html').expect(200);
const response = await server.get('/with/plugin.html.inner.html').expect(200);
const response = await server.get('/with/plugin.html.inner.html').expect(302);
Copy link
Contributor

Choose a reason for hiding this comment

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

We control exactly what is called as inner.html therefore, we should be able to also add the url parameters if required, thus, I would not expect that there is a redirect necessary for the inner html.
Is the test case just wrong i.e. should we test here with parameters or is there an unnecessary redirect now?

Copy link
Contributor Author

@heimwege heimwege Oct 7, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

I think the issue is a test issue because the URL added to the html template contains the parameters. See here

expect(response.text).toMatchSnapshot();
});

Expand Down
2 changes: 1 addition & 1 deletion packages/preview-middleware/test/unit/ui5/middleware.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ describe('ui5/middleware', () => {
]
}
});
await server.get(path).expect(200);
await server.get(path).expect(302);
expect(consoleSpyError).toHaveBeenCalledWith(
'developerMode is ONLY supported for SAP UI5 adaptation projects.'
);
Expand Down
Loading