Merge branch 'main' into mocha

Bumps [semver](https://github.com/npm/node-semver) from 7.3.7 to 7.3.8.
- [Release notes](https://github.com/npm/node-semver/releases)
- [Changelog](https://github.com/npm/node-semver/blob/main/CHANGELOG.md)
- [Commits](https://github.com/npm/node-semver/compare/v7.3.7...v7.3.8)

---
updated-dependencies:
- dependency-name: semver
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.eslintrc

@@ -1,15 +1,15 @@
 {
-    "extends": "eslint:recommended",
+    "extends": [
+        "eslint:recommended",
+        "plugin:@sap/cds/recommended"
+    ],
     "env": {
         "browser": true,
+        "es2022": true,
         "node": true,
-        "es6": true,
         "jest": true,
         "mocha": true
     },
-    "parserOptions": {
-        "ecmaVersion": 2018
-    },
     "globals": {
         "SELECT": true,
         "INSERT": true,
@@ -22,6 +22,7 @@
     "rules": {
         "no-console": "off",
         "require-atomic-updates": "off",
-        "require-await":"warn"
+        "require-await":"warn",
+        "no-unused-vars": ["warn", { "argsIgnorePattern": "_" }]
     }
 }

.github/dependabot.yml

@@ -0,0 +1,8 @@
+version: 2
+
+updates:
+- package-ecosystem: npm
+  directory: /
+  versioning-strategy: increase-if-necessary
+  schedule:
+    interval: daily

.github/workflows/node.js.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [16.x, 14.x]
 
     steps:
     - uses: actions/checkout@v2
@@ -24,5 +24,7 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
+    - run: npm i -g npm@8
     - run: npm ci
-    - run: npm test
+    - run: npm run test
+    - run: npm run test:mocha

.gitignore

@@ -12,8 +12,11 @@ target/
 *.mtar
 connection.properties
 default-env.json
+.cdsrc-private.json
 packages/messageBox
 reviews/msg-box
 reviews/db/test.db
 
 *.openapi3.json
+*.sqlite
+*.db

.registry/server.js

@@ -16,7 +16,8 @@ app.use('/-/:tarball', (req,res,next) => {
   console.debug ('GET', req.params)
   try {
     const { tarball } = req.params
-    const [, pkg ] = /^\w+-(\w+)/.exec(tarball)
+    const pkgFull = tarball.substring(0, tarball.lastIndexOf('-'))
+    const [, pkg ] = /^\w+-(.+)/.exec(pkgFull)
     fs.lstat(tarball,(err => {
       if (err) console.debug (`npm pack ../${pkg}`)
       if (err) exec(`npm pack ../${pkg}`,{cwd},next)
@@ -31,7 +32,7 @@ app.use('/-/:tarball', (req,res,next) => {
 app.use('/-', express.static(__dirname))
 
 app.get('/*', (req,res)=>{
-  const urlRegex = /^\/(@\w+)\/(\w+)/
+  const urlRegex = /^\/(@[\w-]+)\/(.+)/
   const url = decodeURIComponent(req.url)
   console.debug ('GET',url)
   try {

.tours/samples.tour

@@ -104,7 +104,7 @@
     },
     {
       "file": "fiori/app/services.cds",
-      "description": "### Annotations for SAP Fiori Elements\n\n- [Adds an SAP Fiori elements application](https://cap.cloud.sap/docs/guides/fiori/) to bookstore, thereby introducing to:\n- [OData Annotations](https://cap.cloud.sap/docs/guides/fiori#adding-odata-annotations) in `.cds` files\n- Support for [Fiori Draft](https://cap.cloud.sap/docs/guides/fiori#draft)\n- Support for [Value Helps](https://cap.cloud.sap/docs/guides/fiori#value-help)\n- Serving SAP Fiori apps locally\n",
+      "description": "### Annotations for SAP Fiori Elements\n\nAdds an SAP Fiori elements application to bookstore, thereby introducing:\n- OData Annotations in `.cds` files\n- Support for Fiori Draft\n- Support for Value Helps\n- Serving SAP Fiori apps locally\n\nSee the [Serving Fiori UIs](https://cap.cloud.sap/docs/advanced/fiori) documentation for more information.",
       "line": 1,
       "selection": {
         "start": {
@@ -136,4 +136,4 @@
   ],
   "isPrimary": true,
   "description": "Overview of CAP Samples for Node.js"
-}
+}

.vscode/settings.json

@@ -13,5 +13,14 @@
       "**/cds/lib/req/cls.js",
       "**/odata-v4/okra/**"
     ]
-  }
-}
+  },
+  "mochaExplorer.parallel": true,
+  "eslint.validate": [
+    "cds",
+    "csn",
+    "csv",
+    "csv (semicolon)",
+    "tsv",
+    "tab"
+  ]
+}

LICENSES/Apache-2.0.txt

@@ -0,0 +1,73 @@
+Apache License
+Version 2.0, January 2004
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
+
+"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
+
+"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
+
+"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
+
+"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
+
+"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
+
+"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
+
+"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
+
+"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."
+
+"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
+
+     (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and
+
+     (b) You must cause any modified files to carry prominent notices stating that You changed the files; and
+
+     (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and
+
+     (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License.
+
+     You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
+
+To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!)  The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives.
+
+Copyright [yyyy] [name of copyright owner]
+
+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.

README.md

@@ -7,13 +7,14 @@ Find here a collection of samples for the [SAP Cloud Application Programming Mod
 
 ### Preliminaries
 
-1. Install [**@sap/cds-dk**](https://cap.cloud.sap/docs/get-started/) globally:
+1. Ensure you have the latest LTS version of Node.js installed (see [Getting Started](https://cap.cloud.sap/docs/get-started/))
+2. Install [**@sap/cds-dk**](https://cap.cloud.sap/docs/get-started/) globally:
 
    ```sh
    npm i -g @sap/cds-dk
    ```
 
-2. _Optional:_ [Use Visual Studio Code](https://cap.cloud.sap/docs/get-started/tools#vscode)
+3. _Optional:_ [Use Visual Studio Code](https://cap.cloud.sap/docs/get-started/tools#vscode)
 
 ### Download
 
@@ -83,4 +84,4 @@ In case you've a question, find a bug, or otherwise need support, use our [commu
 
 ## License
 
-Copyright (c) 2021 SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, version 2.0 except as noted otherwise in the [LICENSE](LICENSE.txt) file.
+Copyright (c) 2022 SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, version 2.0 except as noted otherwise in the [LICENSE](LICENSE) file.

bookshop/app/services.cds

@@ -1,2 +0,0 @@
-// Incorporate pre-build extensions from...
-using from '@capire/common';

bookshop/app/vue/app.js

@@ -3,14 +3,15 @@ const $ = sel => document.querySelector(sel)
 const GET = (url) => axios.get('/browse'+url)
 const POST = (cmd,data) => axios.post('/browse'+cmd,data)
 
-const books = new Vue ({
+const books = Vue.createApp ({
 
-    el:'#app',
-
-    data: {
+    data() {
+      return {
         list: [],
         book: undefined,
-        order: { quantity:1, succeeded:'', failed:'' }
+        order: { quantity:1, succeeded:'', failed:'' },
+        user: undefined
+      }
     },
 
     methods: {
@@ -37,12 +38,52 @@ const books = new Vue ({
                 book.stock = res.data.stock
                 books.order = { quantity, succeeded: `Successfully ordered ${quantity} item(s).` }
             } catch (e) {
-                books.order = { quantity, failed: e.response.data.error.message }
+                books.order = { quantity, failed: e.response.data.error ? e.response.data.error.message : e.response.data }
             }
-        }
+        },
 
+        async login() {
+            try {
+                const { data:user } = await axios.post('/user/login',{})
+                if (user.id !== 'anonymous') books.user = user
+            } catch (err) { books.user = { id: err.message } }
+        },
+
+        async getUserInfo() {
+            try {
+                const { data:user } = await axios.get('/user/me')
+                if (user.id !== 'anonymous') books.user = user
+            } catch (err) { books.user = { id: err.message } }
+        },
     }
+}).mount('#app')
+
+books.getUserInfo()
+books.fetch() // initially fill list of books
+
+document.addEventListener('keydown', (event) => {
+    // hide user info on request
+    if (event.key === 'u')  books.user = undefined
 })
 
-// initially fill list of books
-books.fetch()
+axios.interceptors.request.use(csrfToken)
+function csrfToken (request) {
+    if (request.method === 'head' || request.method === 'get') return request
+    if ('csrfToken' in document) {
+        request.headers['x-csrf-token'] = document.csrfToken
+        return request
+    }
+    return fetchToken().then(token => {
+        document.csrfToken = token
+        request.headers['x-csrf-token'] = document.csrfToken
+        return request
+    }).catch(_ => {
+        document.csrfToken = null // set mark to not try again
+        return request
+    })
+
+    function fetchToken() {
+        return axios.get('/', { headers: { 'x-csrf-token': 'fetch' } })
+        .then(res => res.headers['x-csrf-token'])
+    }
+}

bookshop/app/vue/index.html

@@ -5,19 +5,32 @@
     <title> Capire Books </title>
     <link rel="stylesheet" href="https://unpkg.com/primitive-ui/dist/css/main.css">
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
     <style>
         .hovering tr:hover td { color:cyan; background: #123; cursor: pointer; }
         .rating-stars { color:teal }
         .succeeded { color:teal }
         .failed { color:red }
+        .user {text-align: end; color: grey;}
     </style>
 </head>
 
 <body class="small-container", style="margin-top: 70px;">
 <div id='app'>
 
-    <h1> {{ document.title }} </h1>
+    <form class="user" @submit.prevent="login">
+        <div v-if="user">
+            <div v-if="user.tenant">Tenant: {{ user.tenant }}</div>
+            <div> User: {{ user.id }}</div>
+            <div>Locale: {{ user.locale }}</div>
+        </div>
+        <div v-else>
+            <input type="submit" value="Login" class="muted-button">
+            <!-- <a href="/user/login()">Login</a> -->
+        </div>
+    </form>
+
+    <h1> Capire Books </h1>
 
     <input type="text" placeholder="Search..." @input="search">
 

bookshop/db/init.js

@@ -0,0 +1,24 @@
+/**
+ * In order to keep basic bookshop sample as simple as possible, we don't add
+ * reuse dependencies. This db/init.js ensures we still have a minimum set of
+ * currencies, if not obtained through @capire/common.
+ */
+
+module.exports = async (db)=>{
+
+  const has_common = db.model.definitions['sap.common.Currencies'].elements.numcode
+  if (has_common) return
+
+  const already_filled = await db.exists('sap.common.Currencies',{code:'EUR'})
+  if (already_filled) return
+
+  await INSERT.into ('sap.common.Currencies') .columns (
+    'code','symbol','name'
+  ) .rows (
+    [ 'EUR','€','Euro' ],
+    [ 'USD','$','US Dollar' ],
+    [ 'GBP','£','British Pound' ],
+    [ 'ILS','₪','Shekel' ],
+    [ 'JPY','¥','Yen' ],
+  )
+}

bookshop/index.cds

@@ -2,3 +2,4 @@ namespace sap.capire.bookshop; //> important for reflection
 using from './db/schema';
 using from './srv/cat-service';
 using from './srv/admin-service';
+using from './srv/user-service';

bookshop/package.json

@@ -2,11 +2,17 @@
   "name": "@capire/bookshop",
   "version": "1.0.0",
   "description": "A simple self-contained bookshop service.",
+  "files": [
+    "app",
+    "srv",
+    "db",
+    "index.cds",
+    "index.js"
+  ],
   "dependencies": {
-    "@capire/common": "*",
-    "@sap/cds": "^5.0.4",
+    "@sap/cds": ">=5.9",
     "express": "^4.17.1",
-    "passport": "0.4.1"
+    "passport": ">=0.4.1"
   },
   "scripts": {
     "genres": "cds serve test/genres.cds",
@@ -15,9 +21,7 @@
   },
   "cds": {
     "requires": {
-      "db": {
-        "kind": "sql"
-      }
+      "db": "sql"
     }
   }
 }

bookshop/srv/admin-service.js

@@ -1,9 +1,10 @@
-const cds = require('@sap/cds')
+const cds = require('@sap/cds/lib')
 
-module.exports = cds.service.impl (function(){
+module.exports = class AdminService extends cds.ApplicationService { init(){
   this.before ('NEW','Authors', genid)
   this.before ('NEW','Books', genid)
-})
+  return super.init()
+}}
 
 /** Generate primary keys for target entity in request */
 async function genid (req) {

bookshop/srv/cat-service.js

@@ -3,12 +3,15 @@ const cds = require('@sap/cds')
 class CatalogService extends cds.ApplicationService { init(){
 
   const { Books } = cds.entities ('sap.capire.bookshop')
+  const { ListOfBooks } = this.entities
 
   // Reduce stock of ordered books if available stock suffices
   this.on ('submitOrder', async req => {
     const {book,quantity} = req.data
     if (quantity < 1) return req.reject (400,`quantity has to be 1 or more`)
-    let {stock} = await SELECT `stock` .from (Books,book)
+    let b = await SELECT `stock` .from (Books,book)
+    if (!b) return req.error (404,`Book #${book} doesn't exist`)
+    let {stock} = b
     if (quantity > stock) return req.reject (409,`${quantity} exceeds stock for book #${book}`)
     await UPDATE (Books,book) .with ({ stock: stock -= quantity })
     await this.emit ('OrderedBook', { book, quantity, buyer:req.user.id })
@@ -16,7 +19,7 @@ class CatalogService extends cds.ApplicationService { init(){
   })
 
   // Add some discount for overstocked books
-  this.after ('READ','ListOfBooks', each => {
+  this.after ('READ', ListOfBooks, each => {
     if (each.stock > 111) each.title += ` -- 11% discount!`
   })
 

bookshop/srv/user-service.cds

@@ -0,0 +1,15 @@
+/**
+ * Exposes user information
+ */
+service UserService {
+  /**
+   * The current user
+   */
+  @odata.singleton entity me @cds.persistence.skip {
+    id     : String; // user id
+    locale : String;
+    tenant : String;
+  }
+
+  action login() returns me;
+}

bookshop/srv/user-service.js

@@ -0,0 +1,9 @@
+const cds = require('@sap/cds')
+module.exports = class UserService extends cds.Service { init(){
+  this.on('READ', 'me', ({ tenant, user, locale }) => ({ id: user.id, locale, tenant }))
+  this.on('login', (req) => {
+    if (req.user._is_anonymous)
+      req._.res.set('WWW-Authenticate','Basic realm="Users"').sendStatus(401)
+    else return this.read('me')
+  })
+}}

bookshop/test/requests.http

@@ -16,9 +16,9 @@ GET {{server}}/browse/$metadata
 
 ### ------------------------------------------------------------------------
 # Browse Books as any user
-GET {{server}}/browse/Books?
+GET {{server}}/browse/ListOfBooks?
   # &$select=title,stock
-  # &$expand=currency
+  &$expand=genre
   # &sap-language=de
 {{me}}
 

bookstore/package.json

@@ -6,7 +6,8 @@
     "@capire/reviews": "*",
     "@capire/orders": "*",
     "@capire/common": "*",
-    "@sap/cds": "^5",
+    "@capire/data-viewer": "*",
+    "@sap/cds": ">=5",
     "express": "^4.17.1"
   },
   "cds": {

bookstore/server.js

@@ -8,6 +8,7 @@ cds.once('bootstrap',(app)=>{
   app.serve ('/bookshop') .from ('@capire/bookshop','app/vue')
   app.serve ('/reviews') .from ('@capire/reviews','app/vue')
   app.serve ('/orders') .from('@capire/orders','app/orders')
+  app.serve ('/data') .from('@capire/data-viewer','app/viewer')
 })
 
 // Add Swagger UI
@@ -18,4 +19,4 @@ module.exports = cds.server
 
 // For didactic reasons in capire
 const { ReviewsService, OrdersService } = cds.requires
-if (!ReviewsService.credentials && !OrdersService.credentials) cds.requires.messaging = false
+if (!ReviewsService?.credentials && !OrdersService?.credentials) cds.requires.messaging = false

bookstore/srv/mashup.cds

@@ -30,3 +30,9 @@ extend Orders with {
 
 // Add orders fiori app (in case of embedded orders service)
 using from '@capire/orders/app/fiori';
+
+// Add data browser
+using from '@capire/data-viewer';
+
+// Incorporate pre-build extensions from...
+using from '@capire/common';

common/index.cds

@@ -20,7 +20,7 @@ extend sap.common.Currencies with {
  * annotate sap.common.Countries with @cds.persistence.skip:false;
  */
 
-context sap.common_countries {
+context sap.common.countries {
 
   extend sap.common.Countries {
     regions   : Composition of many Regions on regions._parent = $self.code;

data-viewer/app/viewer/app.js

@@ -0,0 +1,119 @@
+/* global Vue axios */ //> from vue.html
+const GET = (url) => axios.get('/-data'+url)
+const storageGet = (key, def) => localStorage.getItem('data-viewer:'+key) || def
+const storageSet = (key, val) => localStorage.setItem('data-viewer:'+key, val)
+const columnKeysFirst = (c1, c2) => {
+  if (c1.isKey  && !c2.isKey) return -1
+  if (!c1.isKey && c2.isKey) return 1
+  if (c1.isKey && c2.isKey) return c1.name.localeCompare(c2.name)
+  return 0 // retain natural order of normal columns
+}
+
+const vue = Vue.createApp ({
+
+  data() { return {
+    error: undefined,
+    dataSource: storageGet('data-source', 'db'),
+    skip: storageGet('skip', 0),
+    top: storageGet('top', 20),
+    entity: storageGet('entity') ? JSON.parse(storageGet('entity')) : undefined,
+    entities: [],
+    columns: [],
+    data: [],
+    rowDetails: {},
+    rowKey: storageGet('rowKey')
+  }},
+
+  watch: {
+    dataSource: (v) => { storageSet('data-source', v);  vue.fetchEntities() },
+    skip: (v) => { storageSet('skip', v); if (vue.entity)  vue.fetchData() },
+    top:  (v) => { storageSet('top',  v); if (vue.entity)  vue.fetchData() },
+  },
+
+  methods: {
+
+    async fetchEntities () {
+      let url = `/Entities`
+      if (vue.dataSource === 'db')  url += `?dataSource=db`
+      const {data} = await GET(url)
+      vue.entities = data.value
+      vue.entities.forEach(entity => entity.columns.sort(columnKeysFirst))
+      const entity = vue.entity && vue.entities.find(e => e.name === vue.entity.name)
+      if (entity) { // restore selection from previous fetch
+        vue.columns = entity.columns
+        await vue.fetchData(entity)
+      } else {
+        vue.entity = undefined
+        vue.columns = []
+        vue.data = []
+        vue.rowDetails = {}
+      }
+    },
+
+    async inspectEntity (eve) {
+      const entity = vue.entity = vue.entities [eve.currentTarget.rowIndex-1]
+      storageSet('entity', JSON.stringify(entity))
+      vue.columns = vue.entities.find(e => e.name === entity.name).columns
+      return await this.fetchData()
+    },
+
+    async fetchData () {
+      let url = `/Data?entity=${vue.entity.name}&$skip=${vue.skip}&$top=${vue.top}`
+      if (vue.dataSource === 'db')  url += `&dataSource=db`
+
+      try {
+        const {data} = await GET(url)
+        // sort data along column order
+        const columnIndexes = {}
+        vue.columns.forEach((col, i) => columnIndexes[col.name] = i)
+        vue.data = data.value.map(d => d.record
+          .sort((r1, r2) => columnIndexes[r1.column] - columnIndexes[r2.column])
+          .map(r => r.data)
+        )
+        const row = vue.data.find(data => vue._makeRowKey(data) === vue.rowKey)
+        if (row)  vue._setRowDetails(row)
+        else vue.rowDetails = {}
+        vue.error = undefined
+      } catch (err) {
+        vue.data = []
+        vue.rowDetails = {}
+        if (err.response?.data?.error) {
+          vue.error = err.response.data.error
+        } else {
+          vue.error = { code:err.code, message:err.message }
+        }
+      }
+
+    },
+
+    inspectRow (eve) {
+      vue.rowDetails = {}
+      const selectedRow = eve.currentTarget.rowIndex-1
+      vue.rowKey = vue._makeRowKey(vue.data[selectedRow])
+      storageSet('rowKey', vue.rowKey)
+      vue._setRowDetails(vue.data[selectedRow])
+    },
+
+    _setRowDetails(row) {
+      vue.rowDetails = {}
+      row.forEach((line, colIndex) => {
+        vue.rowDetails[vue.columns[colIndex].name] = line
+      })
+    },
+
+    _makeRowKey(row) {
+      // to identify a row, build a key string out of all key columns' values
+      return row
+        .filter((_, colIndex) => vue.columns[colIndex] && vue.columns[colIndex].isKey)
+        .reduce(((prev, next) => prev += next), '')
+    },
+
+    isActiveRow(row) {
+      return vue._makeRowKey(row) === vue.rowKey
+    }
+
+  }
+})
+.mount('#app')
+
+vue.fetchEntities()

data-viewer/app/viewer/index.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Data Browser</title>
+  <link rel="stylesheet" href="https://unpkg.com/primitive-ui/dist/css/main.css">
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+  <script src="app.js" defer></script>
+
+  <style>
+    th { position: sticky; top:0; z-index: 2; background-color: white; }
+    .noscroll { overflow: hidden; }
+    .hovering tr:hover td { background: #ebeefc; cursor: pointer; }
+    .highlight { background: #ebeefc !important; }
+    .rating-stars { color:teal }
+    .succeeded { color:teal }
+    .failed { color:red }
+    .condensed { max-width: 100px; text-overflow: ellipsis; white-space: nowrap; }
+    .key { font-weight: bold }
+    .not-key { font-weight: lighter;}
+    .with-sidebar { display: flex; flex-wrap: wrap; gap: 1rem; }
+    .sidebar    { flex-basis: 20rem; flex-grow: 1; }
+    .sidebar-main { height: 100vh; overflow-y: scroll; }
+    .not-sidebar  { flex-basis: 0; flex-grow: 999; min-inline-size: 50%; align-items: stretch;}
+    .not-sidebar-main { max-height: 40vh; overflow-y: scroll; }
+    .not-sidebar-sub {  max-height: 40vh; overflow-y: scroll; }
+    .horizontal label { display: inline; }
+    .horizontal input { width: initial; display: inline; }
+    .error { color: red; }
+  </style>
+</head>
+
+<body class="noscroll">
+<div id='app' class="full-container">
+
+  <h1>Data Browser &ndash; {{ entity ? entity.name : '' }}</h1>
+
+  <div class="with-sidebar">
+    <div class="sidebar">
+      <div class="horizontal" style="padding: 0.75rem 0;">
+        <label>Datasource:</label>
+        <input type="radio" id="dataSource-db" value="db" v-model="dataSource">
+        <label for="dataSource-db">Database</label>
+        <input type="radio" id="dataSource-srv" value="service" v-model="dataSource">
+        <label for="dataSource-srv">Service</label>
+      </div>
+      <div class="sidebar-main">
+        <table id='entities' class="hovering">
+          <thead>
+            <th>Entity Name</th>
+          </thead>
+          <tr v-for="e in entities" :key="e.name" @click="inspectEntity" :class="{'highlight': (entity && e.name === entity.name)}">
+            <td>{{ e.name }}</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+
+    <div class="not-sidebar">
+      <div class="horizontal">
+        <label for="skip">Skip:</label>
+        <input id="skip" v-model.lazy="skip" title="No. of entries to skip" type="number" min="0">
+        <label for="top">Top:</label>
+        <input id="top" v-model.lazy="top" title="No. of entries to read" type="number" min="0">
+      </div>
+      <div v-if="data" class="not-sidebar-main">
+        <table id='data' class="hovering striped-table condensed">
+          <thead>
+            <th v-for="col in columns" :title="col.type" :class="[col.isKey ? 'key' : 'not-key']">{{ col.name }} </th>
+          </thead>
+          <tr v-for="row in data" @click="inspectRow" :class="{'highlight': isActiveRow(row)}">
+            <td v-for="d in row" :title="d">{{ d }}</td>
+          </tr>
+        </table>
+      </div>
+      <div v-if="error" class="not-sidebar-main error">
+        Error: {{ error.code ? error.code + ' &ndash; ' + error.message : error.message }}
+      </div>
+      <p></p>
+      <div v-if="rowDetails"  class="not-sidebar-sub">
+        <table id='rowDetails'>
+          <tr v-for="(key, value) in rowDetails" >
+            <td class="key">{{ value }}</td>
+            <td>{{ key }}</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </div>
+
+</div>
+</body>
+
+</html>

data-viewer/index.cds

@@ -0,0 +1 @@
+using from './srv/data-service';

data-viewer/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@capire/data-viewer",
+  "version": "0.1.0",
+  "description": "A generic browser for data",
+  "dependencies": {
+    "@sap/cds": ">=5.0.4"
+  },
+  "files": [
+    "app",
+    "srv",
+    "index.cds"
+  ]
+}

data-viewer/srv/data-service.cds

@@ -0,0 +1,29 @@
+/**
+ * Exposes data + entity metadata
+ */
+@requires:'authenticated-user'
+@odata service DataService @( path:'-data' ) {
+
+  /**
+   * Metadata like name and columns/elements
+   */
+  entity Entities @cds.persistence.skip {
+    key name : String;
+    columns: Composition of many {
+      name :  String;
+      type :  String;
+      isKey:  Boolean;
+    }
+  }
+
+  /**
+   * The actual data, organized by column name
+   */
+  entity Data @cds.persistence.skip {
+    record   : array of {
+      column : String;
+      data   : String;
+    }
+  }
+
+}

data-viewer/srv/data-service.js

@@ -0,0 +1,58 @@
+const cds = require('@sap/cds')
+const log = cds.log('data')
+
+class DataService extends cds.ApplicationService { init(){
+
+  this.on ('READ', 'Entities', req => {
+    const { dataSource } = req.req.query
+    const srvPrefixes = cds.db.model.all('service').map(srv => srv.name+'.')
+    const dataSourceFilter = dataSource === 'db'
+      ? e => e['@cds.persistence.skip'] !== true // for DB, excl. entities w/o persistence
+      : e => !!srvPrefixes.find(srvName => e.name.startsWith(srvName)) // only entities reachable from a service
+
+    return cds.db.model.all('entity')
+      .filter (e => req.data && req.data.name ? e.name === req.data.name : true)  // honor name filter from request, if any
+      .filter (e => !e.name.startsWith('DRAFT.'))  // exclude synthetic stuff
+      .filter (e => !e.name.startsWith('DataService.'))  // exclude this service
+      .filter (dataSourceFilter)
+      .sort((e1, e2) => e1.name.localeCompare(e2.name))
+      .map(e => {
+        const columns = Object.entries(e.elements)
+          .filter(([_, el]) => !(el instanceof cds.Association)) // exclude assocs+compositions
+          .map(([name, el]) => { return { name, type: el.type, isKey:!!el.key }})
+        return { name: e.name, columns }
+      })
+    })
+
+  this.on ('READ', 'Data', async req => {
+    const { entity: entityName, dataSource: dataSourceName } = req.req.query
+    if (!entityName)  return req.reject(400, `Must provide 'entity' query`)
+    const entity = cds.db.model.definitions[entityName]
+    if (!entity)  return req.reject(404, 'No such entity: ' + entityName)
+
+    const query = SELECT.from(entity)
+    query.SELECT.limit = req.query.SELECT.limit  // forward $skip / $top
+
+    const dataSource = findDataSource(dataSourceName, entityName)
+    const res = await dataSource.run(query)
+    return res.map((line) => {
+      const record = Object.entries(line).map(([column, data]) => {return {column, data}})
+      return { record }
+    })
+  })
+
+  return super.init()
+}}
+
+module.exports = { DataService }
+
+function findDataSource(dataSourceName, entityName) {
+  for (let srv of Object.values(cds.services)) { // all connected services
+    if (!srv.name)  continue // FIXME intermediate/pending in cds.services ?
+    if (dataSourceName === srv.name || entityName.startsWith(srv.name+'.')) {
+      log._debug && log.debug(`using ${srv.name} as data source`)
+      return srv
+    }
+  }
+  return cds.services.db // fallback
+}

etc/dark.drawio.svg

@@ -0,0 +1,172 @@
+<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="347px" height="279px" viewBox="-0.5 -0.5 347 279" content="&lt;mxfile&gt;&lt;diagram id=&quot;QQJxv4aCTC7ZgE7HHOvM&quot; name=&quot;Page-1&quot;&gt;7Vlbb+I4FP41vCLfL4/T7szuy0oj9WGfczEkasCRMYXur98TEufeqpoBCtUGCezv+Hq+z/bBWdDHzfFPF5XZ3zY1xYKg9LigfywI0QLBdwW81oDUrAbWLk9rCHXAU/6vqUEc0H2eml2D1ZC3tvB5OQQTu92axA+wyDl7GBZb2SIdAGW0NoNhVMBTEhVmUuyfPPVZjSoiO/wvk6+z0DMWurbEUfK8dna/bfpbEIq/VZ/avIlCW02/uyxK7aEH0e8L+uis9XVqc3w0ReXaodt+vGFtx+3M1n+kAqkrvETFvpn6gqEkKnNnqkpERJtyQR+28a76gXwBzT7EDlJr30cCEFv7vMtsGQzQStwVPk3ZvwY3w+zLKpmZY7S2WyhSGpdvjDeuQ38GCJzzcMhyb57KKKmqHUB7gGV+U0AOQ3KVH02QU5XfPRufVB5HJ2NRPNrCulPndLUyIkmqQt7ZZ9OzpFLHCLWWoADSTuHFOG+Ob7oct0TC+jAWBu9eoUhTgcimSrM2KG9UdeiUpht5ZD2RqQaLGm2v25Y7fiHRUDxPNz033avcuvwOuFaJmec6Vpzxq3FNrsg1OzfXzrzkBnbWm2c75UalbI5tRWIqxKXYppwPVza6Htv83GwndrMB4m6e7BWvPhVut76H18+cCMTpuZQIsFIDEbArikCcWwTWpcbdw4qPjFrN7u8iUSZeXY5s+WkrXk7JHnNitum3KhqGXFJEu12eDF08cOnUQVC98b882SPnB/mRq3+cntaxJg0x9ltuhbHavUvMYAeDXtbG96LTqfN7zuUzzg2YM0Xk85fhIOY83vTw0+YwvI5bCOuH5AayQxv16Jtq/SB70pIYtURHLdWTnrR0kkA78Q+pQn0xVYipKuhnqoJIueSKtk8Y4Gtn7lknRH9UMkTjJcOifSQbdqPEsmcVgl5KT/qL6Yncl54ofZ/oM+mJkvdlez49hRueLyModl+CYtcRFLueoPBUUL8X9O72ZVnk/8e978a9o2MvLOsrxL145s5yTOETNAKCRLfPoMEpN7P7khaSRpf7m4rQkEFBrsfgzDXkXZ8BQZL9QwC/4f+bOAXGYUXYvS8cVoRRXOAUmLnt/HKSEp+pKAxUS6Q4QVhqKtv7h7B/aAZKkIghypVk7FfDCqSWIComtSJIgIrpsBfFQNZEcy0YJpxfLqqYuU+9bz2F16i3EqdiTWELUlWoqDUS46tzSpYQm3KOGYJgQ5NflZOADQhLySVCmrJxJ3oJOyFjimuFKVJnUhNkuze4dfHuLTn9/h8=&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(26, 26, 26);">
+    <defs/>
+    <g>
+        <path d="M 192 148 L 242 148 L 262 188 L 242 228 L 192 228 L 172 188 Z" fill="#ffe6cc" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 188px; margin-left: 173px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                @capire/
+                                <br/>
+                                <b>
+                                    bookshop
+                                </b>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="217" y="192" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    @capire/...
+                </text>
+            </switch>
+        </g>
+        <path d="M 192 48 L 242 48 L 262 88 L 242 128 L 192 128 L 172 88 Z" fill="#f8cecc" stroke="#b85450" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 88px; margin-left: 173px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                @capire/
+                                <br/>
+                                <b>
+                                    fiori
+                                </b>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="217" y="92" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    @capire/...
+                </text>
+            </switch>
+        </g>
+        <path d="M 276 98 L 326 98 L 346 138 L 326 178 L 276 178 L 256 138 Z" fill="#d5e8d4" stroke="#82b366" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 138px; margin-left: 257px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                @capire/
+                                <br/>
+                                <b>
+                                    reviews
+                                </b>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="301" y="142" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    @capire/...
+                </text>
+            </switch>
+        </g>
+        <path d="M 109 198 L 159 198 L 179 238 L 159 278 L 109 278 L 89 238 Z" fill="#f5f5f5" stroke="#666666" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 238px; margin-left: 90px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                @capire/
+                                <br/>
+                                <b>
+                                    common
+                                </b>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="134" y="242" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    @capire/...
+                </text>
+            </switch>
+        </g>
+        <path d="M 108 98 L 158 98 L 178 138 L 158 178 L 108 178 L 88 138 Z" fill="#dae8fc" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 138px; margin-left: 89px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                @capire/
+                                <br/>
+                                <b>
+                                    orders
+                                </b>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="133" y="142" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    @capire/...
+                </text>
+            </switch>
+        </g>
+        <path d="M 168.58 217.17 L 174.72 213.47" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 180.5 209.99 L 175.11 218.49 L 174.72 213.47 L 170.47 210.78 Z" fill="#ffffff" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 167.68 117.36 L 174.6 113.24" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 180.4 109.79 L 174.97 118.26 L 174.6 113.24 L 170.36 110.52 Z" fill="#ffffff" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 217 148 L 217 136.99" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 217 130.24 L 221.5 139.24 L 217 136.99 L 212.5 139.24 Z" fill="#ffffff" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 266.32 117.36 L 259.4 113.24" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 253.6 109.79 L 263.64 110.52 L 259.4 113.24 L 259.03 118.26 Z" fill="#ffffff" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 107 1 L 157 1 L 177 41 L 157 81 L 107 81 L 87 41 Z" fill="#dae8fc" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 41px; margin-left: 88px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                @capire/
+                                <br/>
+                                <b>
+                                    suppliers
+                                </b>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="132" y="45" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    @capire/...
+                </text>
+            </switch>
+        </g>
+        <path d="M 21 53 L 71 53 L 91 93 L 71 133 L 21 133 L 1 93 Z" fill="#e1d5e7" stroke="#9673a6" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 93px; margin-left: 2px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                <b>
+                                    S/4
+                                </b>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="46" y="97" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    S/4
+                </text>
+            </switch>
+        </g>
+        <path d="M 80.55 72.11 L 89.76 66.54" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 95.53 63.05 L 90.16 71.56 L 89.76 66.54 L 85.5 63.86 Z" fill="#ffffff" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 81.75 111.49 L 89.27 115.38" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 95.26 118.48 L 85.2 118.34 L 89.27 115.38 L 89.33 110.35 Z" fill="#ffffff" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 167.25 60.49 L 173.88 64.16" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 179.79 67.42 L 169.74 67.01 L 173.88 64.16 L 174.09 59.13 Z" fill="#ffffff" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+    </g>
+    <switch>
+        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
+        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
+            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
+                Viewer does not support full SVG 1.1
+            </text>
+        </a>
+    </switch>
+</svg>

etc/incidents.drawio.svg

@@ -0,0 +1,281 @@
+<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="569px" height="428px" viewBox="-0.5 -0.5 569 428" content="&lt;mxfile&gt;&lt;diagram id=&quot;QQJxv4aCTC7ZgE7HHOvM&quot; name=&quot;Page-1&quot;&gt;7Vpdd9o4EP01PJZjWf7SY8jHds9pd3tKt30WtjDayBZHFknor18ployNDCXEELbtyUPsQRpLvndmrgZG8Lp4+kPg5eIjzwgb+V72NII3I98HMPLUP21Z15YYBbUhFzQzgzaGKf1OjNHMy1c0I1VnoOScSbrsGlNeliSVHRsWgj92h8056z51iXPzRG9jmKaYEWfYN5rJRW1N/Hhjf09ovrBPBhGqPymwHWwcVwuc8ceWCd6O4LXgXNZXxdM1Yfrl2fdSz7vb8WmzMEFKecgEv57wgNnK7G2qBis0vPdXf12ZNcq13bjgqzIjeq43gpPHBZVkusSp/vRRQa1sC1kwdQfUZcoLmpqh1T2R6cLc/Evz/NljoG7mvJR3uKBMc+E9YQ9E0hTrKVLw++b9qjczwYzmpboW9audPBChx7IrY5dcr6BSC6Jlru7Dxss1Z1w8bwEmvv7TK+WCflcPx8yusZ742QAXm8VNzfaBuW/5Cm70n7Kbt6jWQ552IgEafFVgEF4QKdZqiJnwDtioMEEBLEceNxQDKKxtiza9LIrY0DpvnG+QVxcG/H4iQIcIk1VFS1JVI72OiOkXPhPqKtdXn7CQJRF7CALORJAWHLMkDEKvlzpzylhr5DxJSZoOBRxIxmEXuhC50Fk429CF3uuRCxzkGrgsWn+WqUqYaju+9zEvZAtR5bwZ5aJ8+yRJWVFeqhlXy+WFpgNG5odkA7Q3G5wwsg+IaxjELjlggF7PjtBhhyVDdVnBG6UJmc0PCd4Mk2Q+UPD6YdwFB/lu5IKepDtE5EY9kbsFCSmzKy1Y1F1GccHL7MuCKnZP1Ad3lFkw1J1RSSDqwnRSACqpyoBd3+3nApdrazWL8+y9WR5qYCOZ1Vi7QFMvgq9EakeZl6Oc5cSC0I9tGzsbfIIwLOlD95F94Bl3nzh9zpc2hoMOTQIQ2pRvfdRrNdPaimvLU5Owd7uqt+i4eqZTs82DGBY7DLteVVJ5EBcW/VmMZt5hpXtOoqFKN+pC0Rv8pyrbiQPNdJWmSm/d4VTyvfj8/7V3j9R25Phbam8/ilwmoGjcUwh8bwD1jRwyfOPifs519uuV3yqAtSq7pBC+GPUNPXi+MLYtiRZ0t8WS8TXpR+4LLUi1IET+Bq8fvKQn8k4GHniRApsxnt6rnWdYIWiB2ggxryvE/GOF2NG18KWSCrqKKj6fouoK7xDEx+qpHzgaTk1ZCdqiy0dVsHFOLkxNXcZZCnrADeVTnaWA28DaF8qXephqHZMOO1wdF/nhW0a+H8MuTyA8MvQB2u9owNB3u2xTIh7oDn2m1duldUcv4oh1Xm3mNr9+pfKO3CCvaXyWKAfbwg5GxxZ4tOUqCrdWM2Ccv6wnV/KS7CPJxdQPviTlYNXDJsO3acWByB97CYp0Uw6EHoJ+hxx+hI7jGYjgOAAejGMYJgHyoqTrF5yuuLhtOltAemrL1QOmDM8oo3L9u8K4FeasB0i3i/crVRjb/OiUmPMJSeDUmODIGgO8YL+jAYPd7fVNcHqvcFdGoynd46Rtt37AM8I+8YpK/a2sYhSXkhcaavtDEq/NL6/VuU0VkiqldDi1o4vr0EZ5X+qVFE+5/kXPuFA8Xi3HBRb6X7oSbD0Rz2lmT2vplelGcInNrr09bak5o8uvZnsDZJd3YOv7mtDryS8QuPnFHyC/+G538R/db1Cmr5Q8/lQ8abLWaXliM97APEm2G5nn5YnbyGz/duMGS/wzUaVRxyelSqOsB6aKH6A3ZIrbw3SYYaFJ14wqNSngj6XkrNadH2aNQdW0/FmN/r2Syg0x9qoWN/4YQRSiGIIwgJEPwTaAu085h5+UBsAKJF2sAIpdrJALFQhfDJW63fzusxYWm1/Pwtv/AA==&lt;/diagram&gt;&lt;/mxfile&gt;">
+    <defs/>
+    <g>
+        <rect x="1" y="1" width="195" height="122" fill="#ffffff" stroke="#828282" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)rotate(-90 11 13)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-end; width: 107px; height: 1px; padding-top: 13px; margin-left: -96px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: right; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #4D4D4D; line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">
+                                S/4 HANA
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="11" y="25" fill="#4D4D4D" font-family="Helvetica" font-size="12px" text-anchor="end" font-weight="bold">
+                    S/4 HANA
+                </text>
+            </switch>
+        </g>
+        <rect x="42.5" y="40" width="120" height="50" rx="7.5" ry="7.5" fill="#f8cecc" stroke="#b85450" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 65px; margin-left: 44px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                Business
+                                <br/>
+                                Partner
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="103" y="69" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Business...
+                </text>
+            </switch>
+        </g>
+        <rect x="221" y="1" width="347" height="349" fill="#ffffff" stroke="#828282" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 331px; height: 1px; padding-top: 15px; margin-left: 230px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: left; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #4D4D4D; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                <b>
+                                    Incident Mgmt
+                                </b>
+                                <br/>
+                                Extension App
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="230" y="27" fill="#4D4D4D" font-family="Helvetica" font-size="12px">
+                    Incident Mgmt...
+                </text>
+            </switch>
+        </g>
+        <rect x="418" y="73" width="115" height="50" rx="7.5" ry="7.5" fill="#dae8fc" stroke="#6c8ebf" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 113px; height: 1px; padding-top: 98px; margin-left: 419px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                Incidents
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="476" y="102" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Incidents
+                </text>
+            </switch>
+        </g>
+        <path d="M 475.5 182 L 475.5 142.97" fill="none" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 481.5 182 L 475.5 170 L 469.5 182" fill="none" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 475.5 124.97 L 480.79 133.97 L 475.5 142.97 L 470.21 133.97 Z" fill="#6c8ebf" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <rect x="255" y="73" width="120" height="50" rx="7.5" ry="7.5" fill="#ffe6cc" stroke="#d79b00" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 98px; margin-left: 256px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                Customers
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="315" y="102" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Customers
+                </text>
+            </switch>
+        </g>
+        <rect x="1" y="147" width="196.5" height="202" fill="#ffffff" stroke="#828282" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)rotate(-90 11 159)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-end; width: 187px; height: 1px; padding-top: 159px; margin-left: -176px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: right; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #4D4D4D; line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">
+                                SuccessFactors
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="11" y="171" fill="#4D4D4D" font-family="Helvetica" font-size="12px" text-anchor="end" font-weight="bold">
+                    SuccessFactors
+                </text>
+            </switch>
+        </g>
+        <rect x="42.5" y="184" width="120" height="50" rx="7.5" ry="7.5" fill="#f8cecc" stroke="#b85450" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 209px; margin-left: 44px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                Workforce
+                                <br/>
+                                Person
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="103" y="213" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Workforce...
+                </text>
+            </switch>
+        </g>
+        <rect x="42.5" y="267" width="120" height="50" rx="7.5" ry="7.5" fill="#f8cecc" stroke="#b85450" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 292px; margin-left: 44px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                Employee
+                                <br/>
+                                Timesheet
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="103" y="296" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Employee...
+                </text>
+            </switch>
+        </g>
+        <path d="M 162.5 74.32 L 238.96 86.19" fill="none" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="6 6" pointer-events="stroke"/>
+        <path d="M 252.79 88.34 L 237.88 93.11 L 240.03 79.27 Z" fill="none" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <rect x="418" y="182" width="115" height="50" rx="7.5" ry="7.5" fill="#dae8fc" stroke="#6c8ebf" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 113px; height: 1px; padding-top: 207px; margin-left: 419px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                Messages
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="476" y="211" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Messages
+                </text>
+            </switch>
+        </g>
+        <path d="M 418 98 L 394.97 98" fill="none" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 418 92 L 406 98 L 418 104" fill="none" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 376.97 98 L 385.97 92.71 L 394.97 98 L 385.97 103.29 Z" fill="#6c8ebf" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <rect x="255" y="184" width="120" height="50" rx="7.5" ry="7.5" fill="#ffe6cc" stroke="#d79b00" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 209px; margin-left: 256px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                Service
+                                <br/>
+                                Worker
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="315" y="213" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Service...
+                </text>
+            </switch>
+        </g>
+        <path d="M 162.5 209 L 238.76 209" fill="none" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="6 6" pointer-events="stroke"/>
+        <path d="M 252.76 209 L 238.76 216 L 238.76 202 Z" fill="none" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 354.83 181.46 L 439.35 123" fill="none" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 358.91 171.95 L 352.99 182.73 L 365.16 180.99" fill="none" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <rect x="255" y="267" width="120" height="50" rx="7.5" ry="7.5" fill="#ffe6cc" stroke="#d79b00" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 292px; margin-left: 256px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                Worker
+                                <br/>
+                                Availability
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="315" y="296" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Worker...
+                </text>
+            </switch>
+        </g>
+        <path d="M 162.5 292 L 238.76 292" fill="none" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="6 6" pointer-events="stroke"/>
+        <path d="M 252.76 292 L 238.76 299 L 238.76 285 Z" fill="none" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 37 407 C 37 401.48 41.48 397 47 397 L 92.5 397 C 98.02 397 102.5 392.52 102.5 387 C 102.5 392.52 106.98 397 112.5 397 L 158 397 C 163.52 397 168 401.48 168 407" fill="none" stroke="#b85450" stroke-width="2" stroke-miterlimit="10" transform="translate(0,397)scale(1,-1)translate(0,-397)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 414px; margin-left: 103px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: nowrap; ">
+                                Backend Services
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="103" y="426" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Backend Services
+                </text>
+            </switch>
+        </g>
+        <path d="M 249.5 407 C 249.5 401.48 253.98 397 259.5 397 L 305 397 C 310.52 397 315 392.52 315 387 C 315 392.52 319.48 397 325 397 L 370.5 397 C 376.02 397 380.5 401.48 380.5 407" fill="none" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" transform="translate(0,397)scale(1,-1)translate(0,-397)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 414px; margin-left: 315px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: nowrap; ">
+                                Usage Views
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="315" y="426" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Usage Views
+                </text>
+            </switch>
+        </g>
+        <path d="M 410 407 C 410 401.48 414.48 397 420 397 L 465.5 397 C 471.02 397 475.5 392.52 475.5 387 C 475.5 392.52 479.98 397 485.5 397 L 531 397 C 536.52 397 541 401.48 541 407" fill="none" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" transform="translate(0,397)scale(1,-1)translate(0,-397)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 414px; margin-left: 476px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: nowrap; ">
+                                Extension Data
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="476" y="426" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Extension Data
+                </text>
+            </switch>
+        </g>
+        <path d="M 350 80.94 C 350 79.32 354.25 78 359.5 78 C 362.02 78 364.44 78.31 366.22 78.86 C 368 79.41 369 80.16 369 80.94 L 369 90.06 C 369 91.68 364.75 93 359.5 93 C 354.25 93 350 91.68 350 90.06 Z" fill="#dae8fc" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 369 80.94 C 369 82.56 364.75 83.88 359.5 83.88 C 354.25 83.88 350 82.56 350 80.94" fill="none" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+    </g>
+    <switch>
+        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
+        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
+            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
+                Viewer does not support full SVG 1.1
+            </text>
+        </a>
+    </switch>
+</svg>

fiori/app/admin-authors/webapp/manifest.json

@@ -11,7 +11,7 @@
     },
     "dataSources": {
       "AdminService": {
-        "uri": "/admin/",
+        "uri": "admin/",
         "type": "OData",
         "settings": {
           "odataVersion": "4.0"

fiori/app/admin-books/fiori-service.cds

@@ -64,8 +64,9 @@ annotate AdminService.Books.texts with @(
 
 // Add Value Help for Locales
 annotate AdminService.Books.texts {
-	locale @ValueList:{entity:'Languages'};
-	locale @Common.ValueListWithFixedValues:true; //show as drop down, not a dialog
+	locale @(
+		ValueList.entity:'Languages', Common.ValueListWithFixedValues, //show as drop down, not a dialog
+	)
 }
 // In addition we need to expose Languages through AdminService as a target for ValueList
 using { sap } from '@sap/cds/common';

fiori/app/admin-books/webapp/manifest.json

@@ -8,7 +8,7 @@
         "i18n": "i18n/i18n.properties",
         "dataSources": {
             "AdminService": {
-                "uri": "/admin/",
+                "uri": "admin/",
                 "type": "OData",
                 "settings": {
                     "odataVersion": "4.0"

fiori/app/appconfig/fioriSandboxConfig.json

@@ -19,6 +19,14 @@
                     "title": "Browse Books",
                     "targetURL": "#Books-display"
                   }
+                },
+                {
+                  "id": "BrowseGenres",
+                  "tileType": "sap.ushell.ui.tile.StaticTile",
+                  "properties": {
+                    "title": "Browse Genres (OData v2)",
+                    "targetURL": "#Genres-display"
+                  }
                 }
               ]
             },
@@ -107,6 +115,24 @@
                 "url": "/admin-authors/webapp"
               }
             },
+            "BrowseGenres": {
+              "semanticObject": "Genres",
+              "action": "display",
+              "title": "Browse Genres",
+              "signature": {
+                "parameters": {
+                  "Genre.ID": {
+                    "renameTo": "ID"
+                  }
+                },
+                "additionalParameters": "ignored"
+              },
+              "resolutionResult": {
+                "applicationType": "SAPUI5",
+                "additionalInformation": "SAPUI5.Component=genres",
+                "url": "/genres/webapp"
+              }
+            },
             "ManageBooks": {
               "semanticObject": "Books",
               "action": "manage",

fiori/app/browse/fiori-service.cds

@@ -33,7 +33,7 @@ annotate CatalogService.Books with @(UI : {
 
 ////////////////////////////////////////////////////////////////////////////
 //
-//	Books Object Page
+//	Books List Page
 //
 annotate CatalogService.Books with @(UI : {
     SelectionFields : [

fiori/app/browse/webapp/manifest.json

@@ -11,7 +11,7 @@
     },
     "dataSources": {
       "CatalogService": {
-        "uri": "/browse/",
+        "uri": "browse/",
         "type": "OData",
         "settings": {
           "odataVersion": "4.0"
@@ -32,7 +32,7 @@
                 "renameTo": "ID"
               },
               "Authors.books.ID": {
-                "renameTo": "ID"                    
+                "renameTo": "ID"
               }
             },
             "additionalParameters": "ignored"

fiori/app/common.cds

@@ -10,40 +10,31 @@ using { sap.common } from '@capire/common';
 //	Books Lists
 //
 annotate my.Books with @(
-    Common.SemanticKey : [ID],
-    UI                 : {
-        Identification  : [{Value : title}],
-        SelectionFields : [
-            ID,
-            author_ID,
-            price,
-            currency_code
-        ],
-        LineItem        : [
-            {
-                Value : ID,
-                Label : '{i18n>Title}'
-            },
-            {
-                Value : author.ID,
-                Label : '{i18n>Author}'
-            },
-            {Value : genre.name},
-            {Value : stock},
-            {Value : price},
-            {
-                Value : currency.symbol,
-                Label : ' '
-            },
-        ]
-    }
+  Common.SemanticKey : [ID],
+  UI                 : {
+    Identification  : [{ Value: title }],
+    SelectionFields : [
+      ID,
+      author_ID,
+      price,
+      currency_code
+    ],
+    LineItem        : [
+      { Value: ID, Label: '{i18n>Title}' },
+      { Value: author.ID, Label: '{i18n>Author}' },
+      { Value: genre.name },
+      { Value: stock },
+      { Value: price },
+      { Value: currency.symbol, Label: ' ' },
+    ]
+  }
 ) {
-    ID  @Common: {
-        SemanticObject : 'Books',
-        Text: title,
-        TextArrangement : #TextOnly
-    };
-    author @ValueList.entity      : 'Authors';
+  ID  @Common: {
+    SemanticObject : 'Books',
+    Text: title,
+    TextArrangement : #TextOnly
+  };
+  author @ValueList.entity      : 'Authors';
 };
 
 ////////////////////////////////////////////////////////////////////////////
@@ -51,10 +42,10 @@ annotate my.Books with @(
 //	Books Details
 //
 annotate my.Books with @(UI : {HeaderInfo : {
-    TypeName       : '{i18n>Book}',
-    TypeNamePlural : '{i18n>Books}',
-    Title          : {Value : title},
-    Description    : {Value : author.name}
+  TypeName       : '{i18n>Book}',
+  TypeNamePlural : '{i18n>Books}',
+  Title          : { Value: title },
+  Description    : { Value: author.name }
 }, });
 
 
@@ -63,19 +54,13 @@ annotate my.Books with @(UI : {HeaderInfo : {
 //	Books Elements
 //
 annotate my.Books with {
-    ID     @title : '{i18n>ID}';
-    title  @title : '{i18n>Title}';
-    genre  @title : '{i18n>Genre}'  @Common               : {
-        Text            : genre.name,
-        TextArrangement : #TextOnly
-    };
-    author @title : '{i18n>Author}'  @Common              : {
-        Text            : author.name,
-        TextArrangement : #TextOnly
-    };
-    price  @title : '{i18n>Price}'  @Measures.ISOCurrency : currency_code;
-    stock  @title : '{i18n>Stock}';
-    descr  @UI.MultiLineText;
+  ID     @title: '{i18n>ID}';
+  title  @title: '{i18n>Title}';
+  genre  @title: '{i18n>Genre}'   @Common: { Text: genre.name, TextArrangement: #TextOnly };
+  author @title: '{i18n>Author}'  @Common: { Text: author.name, TextArrangement: #TextOnly };
+  price  @title: '{i18n>Price}'   @Measures.ISOCurrency : currency_code;
+  stock  @title: '{i18n>Stock}';
+  descr  @UI.MultiLineText;
 }
 
 ////////////////////////////////////////////////////////////////////////////
@@ -83,17 +68,17 @@ annotate my.Books with {
 //	Genres List
 //
 annotate my.Genres with @(
-    Common.SemanticKey : [name],
-    UI                 : {
-        SelectionFields : [name],
-        LineItem        : [
-            {Value : name},
-            {
-                Value : parent.name,
-                Label : 'Main Genre'
-            },
-        ],
-    }
+  Common.SemanticKey : [name],
+  UI                 : {
+    SelectionFields : [name],
+    LineItem        : [
+      { Value: name },
+      {
+        Value : parent.name,
+        Label: 'Main Genre'
+      },
+    ],
+  }
 );
 
 ////////////////////////////////////////////////////////////////////////////
@@ -101,18 +86,18 @@ annotate my.Genres with @(
 //	Genre Details
 //
 annotate my.Genres with @(UI : {
-    Identification : [{Value : name}],
-    HeaderInfo     : {
-        TypeName       : '{i18n>Genre}',
-        TypeNamePlural : '{i18n>Genres}',
-        Title          : {Value : name},
-        Description    : {Value : ID}
-    },
-    Facets         : [{
-        $Type  : 'UI.ReferenceFacet',
-        Label  : '{i18n>SubGenres}',
-        Target : 'children/@UI.LineItem'
-    }, ],
+  Identification : [{ Value: name}],
+  HeaderInfo     : {
+    TypeName       : '{i18n>Genre}',
+    TypeNamePlural : '{i18n>Genres}',
+    Title          : { Value: name },
+    Description    : { Value: ID }
+  },
+  Facets         : [{
+    $Type  : 'UI.ReferenceFacet',
+    Label  : '{i18n>SubGenres}',
+    Target : 'children/@UI.LineItem'
+  }, ],
 });
 
 ////////////////////////////////////////////////////////////////////////////
@@ -120,8 +105,8 @@ annotate my.Genres with @(UI : {
 //	Genres Elements
 //
 annotate my.Genres with {
-    ID   @title : '{i18n>ID}';
-    name @title : '{i18n>Genre}';
+  ID   @title: '{i18n>ID}';
+  name @title: '{i18n>Genre}';
 }
 
 ////////////////////////////////////////////////////////////////////////////
@@ -129,24 +114,24 @@ annotate my.Genres with {
 //	Authors List
 //
 annotate my.Authors with @(
-    Common.SemanticKey : [ID],
-    UI                 : {
-        Identification  : [{Value : name}],
-        SelectionFields : [name],
-        LineItem        : [
-            {Value : ID},
-            {Value : dateOfBirth},
-            {Value : dateOfDeath},
-            {Value : placeOfBirth},
-            {Value : placeOfDeath},
-        ],
-    }
+  Common.SemanticKey : [ID],
+  UI                 : {
+    Identification  : [{ Value: name}],
+    SelectionFields : [name],
+    LineItem        : [
+      { Value: ID },
+      { Value: dateOfBirth },
+      { Value: dateOfDeath },
+      { Value: placeOfBirth },
+      { Value: placeOfDeath },
+    ],
+  }
 ) {
-    ID  @Common: {
-        SemanticObject : 'Authors',
-        Text: name,
-        TextArrangement : #TextOnly,
-    };
+  ID  @Common: {
+    SemanticObject : 'Authors',
+    Text: name,
+    TextArrangement : #TextOnly,
+  };
 };
 
 ////////////////////////////////////////////////////////////////////////////
@@ -154,16 +139,16 @@ annotate my.Authors with @(
 //	Author Details
 //
 annotate my.Authors with @(UI : {
-    HeaderInfo : {
-        TypeName       : '{i18n>Author}',
-        TypeNamePlural : '{i18n>Authors}',
-        Title          : {Value : name},
-        Description    : {Value : dateOfBirth}
-    },
-    Facets     : [{
-        $Type  : 'UI.ReferenceFacet',
-        Target : 'books/@UI.LineItem'
-    }, ],
+  HeaderInfo : {
+    TypeName       : '{i18n>Author}',
+    TypeNamePlural : '{i18n>Authors}',
+    Title          : { Value: name },
+    Description    : { Value: dateOfBirth }
+  },
+  Facets     : [{
+    $Type  : 'UI.ReferenceFacet',
+    Target : 'books/@UI.LineItem'
+  }, ],
 });
 
 
@@ -172,12 +157,12 @@ annotate my.Authors with @(UI : {
 //	Authors Elements
 //
 annotate my.Authors with {
-    ID           @title : '{i18n>ID}';
-    name         @title : '{i18n>Name}';
-    dateOfBirth  @title : '{i18n>DateOfBirth}';
-    dateOfDeath  @title : '{i18n>DateOfDeath}';
-    placeOfBirth @title : '{i18n>PlaceOfBirth}';
-    placeOfDeath @title : '{i18n>PlaceOfDeath}';
+  ID           @title: '{i18n>ID}';
+  name         @title: '{i18n>Name}';
+  dateOfBirth  @title: '{i18n>DateOfBirth}';
+  dateOfDeath  @title: '{i18n>DateOfDeath}';
+  placeOfBirth @title: '{i18n>PlaceOfBirth}';
+  placeOfDeath @title: '{i18n>PlaceOfDeath}';
 }
 
 ////////////////////////////////////////////////////////////////////////////
@@ -185,18 +170,18 @@ annotate my.Authors with {
 //	Languages List
 //
 annotate common.Languages with @(
-    Common.SemanticKey : [code],
-    Identification     : [{Value : code}],
-    UI                 : {
-        SelectionFields : [
-            name,
-            descr
-        ],
-        LineItem        : [
-            {Value : code},
-            {Value : name},
-        ],
-    }
+  Common.SemanticKey : [code],
+  Identification     : [{ Value: code}],
+  UI                 : {
+    SelectionFields : [
+      name,
+      descr
+    ],
+    LineItem        : [
+      { Value: code },
+      { Value: name },
+    ],
+  }
 );
 
 ////////////////////////////////////////////////////////////////////////////
@@ -204,22 +189,22 @@ annotate common.Languages with @(
 //	Language Details
 //
 annotate common.Languages with @(UI : {
-    HeaderInfo          : {
-        TypeName       : '{i18n>Language}',
-        TypeNamePlural : '{i18n>Languages}',
-        Title          : {Value : name},
-        Description    : {Value : descr}
-    },
-    Facets              : [{
-        $Type  : 'UI.ReferenceFacet',
-        Label  : '{i18n>Details}',
-        Target : '@UI.FieldGroup#Details'
-    }, ],
-    FieldGroup #Details : {Data : [
-        {Value : code},
-        {Value : name},
-        {Value : descr}
-    ]},
+  HeaderInfo          : {
+    TypeName       : '{i18n>Language}',
+    TypeNamePlural : '{i18n>Languages}',
+    Title          : { Value: name },
+    Description    : { Value: descr }
+  },
+  Facets              : [{
+    $Type  : 'UI.ReferenceFacet',
+    Label  : '{i18n>Details}',
+    Target : '@UI.FieldGroup#Details'
+  }, ],
+  FieldGroup #Details : {Data : [
+    { Value: code },
+    { Value: name },
+    { Value: descr }
+  ]},
 });
 
 ////////////////////////////////////////////////////////////////////////////
@@ -227,19 +212,19 @@ annotate common.Languages with @(UI : {
 //	Currencies List
 //
 annotate common.Currencies with @(
-    Common.SemanticKey : [code],
-    Identification     : [{Value : code}],
-    UI                 : {
-        SelectionFields : [
-            name,
-            descr
-        ],
-        LineItem        : [
-            {Value : descr},
-            {Value : symbol},
-            {Value : code},
-        ],
-    }
+  Common.SemanticKey : [code],
+  Identification     : [{ Value: code}],
+  UI                 : {
+    SelectionFields : [
+      name,
+      descr
+    ],
+    LineItem        : [
+      { Value: descr },
+      { Value: symbol },
+      { Value: code },
+    ],
+  }
 );
 
 ////////////////////////////////////////////////////////////////////////////
@@ -247,35 +232,35 @@ annotate common.Currencies with @(
 //	Currency Details
 //
 annotate common.Currencies with @(UI : {
-    HeaderInfo           : {
-        TypeName       : '{i18n>Currency}',
-        TypeNamePlural : '{i18n>Currencies}',
-        Title          : {Value : descr},
-        Description    : {Value : code}
+  HeaderInfo           : {
+    TypeName       : '{i18n>Currency}',
+    TypeNamePlural : '{i18n>Currencies}',
+    Title          : { Value: descr },
+    Description    : { Value: code }
+  },
+  Facets               : [
+    {
+      $Type  : 'UI.ReferenceFacet',
+      Label  : '{i18n>Details}',
+      Target : '@UI.FieldGroup#Details'
     },
-    Facets               : [
-        {
-            $Type  : 'UI.ReferenceFacet',
-            Label  : '{i18n>Details}',
-            Target : '@UI.FieldGroup#Details'
-        },
-        {
-            $Type  : 'UI.ReferenceFacet',
-            Label  : '{i18n>Extended}',
-            Target : '@UI.FieldGroup#Extended'
-        },
-    ],
-    FieldGroup #Details  : {Data : [
-        {Value : name},
-        {Value : symbol},
-        {Value : code},
-        {Value : descr}
-    ]},
-    FieldGroup #Extended : {Data : [
-        {Value : numcode},
-        {Value : minor},
-        {Value : exponent}
-    ]},
+    {
+      $Type  : 'UI.ReferenceFacet',
+      Label  : '{i18n>Extended}',
+      Target : '@UI.FieldGroup#Extended'
+    },
+  ],
+  FieldGroup #Details  : {Data : [
+    { Value: name },
+    { Value: symbol },
+    { Value: code },
+    { Value: descr }
+  ]},
+  FieldGroup #Extended : {Data : [
+    { Value: numcode },
+    { Value: minor },
+    { Value: exponent }
+  ]},
 });
 
 ////////////////////////////////////////////////////////////////////////////
@@ -283,7 +268,7 @@ annotate common.Currencies with @(UI : {
 //	Currencies Elements
 //
 annotate common.Currencies with {
-    numcode  @title : '{i18n>NumCode}';
-    minor    @title : '{i18n>MinorUnit}';
-    exponent @title : '{i18n>Exponent}';
+  numcode  @title: '{i18n>NumCode}';
+  minor    @title: '{i18n>MinorUnit}';
+  exponent @title: '{i18n>Exponent}';
 }

fiori/app/fiori-apps.html

@@ -16,10 +16,10 @@
 
 	<script id="sap-ushell-bootstrap" src="https://sapui5.hana.ondemand.com/test-resources/sap/ushell/bootstrap/sandbox.js"></script>
 	<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
-    	data-sap-ui-libs="sap.m, sap.ushell, sap.collaboration, sap.ui.layout"
-    	data-sap-ui-compatVersion="edge"
-    	data-sap-ui-theme="sap_fiori_3"
-    	data-sap-ui-frameOptions="allow"
+			data-sap-ui-libs="sap.m, sap.ushell, sap.collaboration, sap.ui.layout"
+			data-sap-ui-compatVersion="edge"
+			data-sap-ui-theme="sap_horizon"
+			data-sap-ui-frameOptions="allow"
 	></script>
 	<script>
 		sap.ui.getCore().attachInit(()=> sap.ushell.Container.createRenderer().placeAt("content"))

fiori/app/genres/fiori-service.cds

@@ -0,0 +1,8 @@
+using { sap.capire.bookshop } from '../../db/common';
+
+annotate bookshop.GenreHierarchy {
+  ID             @sap.hierarchy.node.for;
+  parent         @sap.hierarchy.parent.node.for;
+  hierarchyLevel @sap.hierarchy.level.for;
+  drillState     @sap.hierarchy.drill.state.for;
+}

fiori/app/genres/webapp/Component.js

@@ -0,0 +1,7 @@
+sap.ui.define(["sap/suite/ui/generic/template/lib/AppComponent"], (AppComponent) =>
+  AppComponent.extend("genres.Component", {
+    metadata: {
+      manifest: "json",
+    },
+  })
+);

fiori/app/genres/webapp/i18n/i18n.properties

@@ -0,0 +1,4 @@
+#XTIT
+appTitle=Genres
+#XTXT
+appDescription=Browse Genres

fiori/app/genres/webapp/manifest.json

@@ -0,0 +1,155 @@
+{
+  "_version": "1.8.0",
+  "sap.app": {
+    "id": "genres",
+    "type": "application",
+    "i18n": "i18n/i18n.properties",
+    "applicationVersion": {
+      "version": "1.0.0"
+    },
+    "title": "Browse Genres Hierarchy (OData v2)",
+    "description": "{{appDescription}}",
+    "tags": {
+      "keywords": []
+    },
+    "crossNavigation": {
+      "inbounds": {
+        "appShow": {
+          "title": "{{appTitle}}",
+          "semanticObject": "GenreHierarchy",
+          "action": "display",
+          "deviceTypes": {
+            "desktop": true,
+            "tablet": true,
+            "phone": true
+          },
+          "icon": "sap-icon://settings",
+          "size": "1x1"
+        }
+      },
+      "outbounds": {}
+    },
+    "ach": "",
+    "resources": "resources.json",
+    "dataSources": {
+      "main": {
+        "uri": "/v2/browse",
+        "type": "OData",
+        "settings": {
+          "annotations": ["localAnnotations"],
+          "localUri": "localService/metadata.xml"
+        }
+      },
+      "localAnnotations": {
+        "type": "ODataAnnotation",
+        "uri": "annotations/localAnnotations.xml",
+        "settings": {
+          "localUri": "annotations/localAnnotations.xml"
+        }
+      }
+    },
+    "offline": false,
+    "sourceTemplate": {
+      "id": "ui5template.smartTemplate",
+      "version": "1.40.12"
+    }
+  },
+  "sap.ui": {
+    "technology": "UI5",
+    "icons": {
+      "icon": "",
+      "favIcon": "",
+      "phone": "",
+      "phone@2": "",
+      "tablet": "",
+      "tablet@2": ""
+    },
+    "deviceTypes": {
+      "desktop": true,
+      "tablet": true,
+      "phone": true
+    },
+    "supportedThemes": ["sap_hcb", "sap_belize", "sap_belize_deep", "sap_fiori_3"]
+  },
+  "sap.ui5": {
+    "resources": {
+      "js": [],
+      "css": []
+    },
+    "dependencies": {
+      "minUI5Version": "1.65.6",
+      "libs": {},
+      "components": {}
+    },
+    "models": {
+      "i18n": {
+        "type": "sap.ui.model.resource.ResourceModel",
+        "uri": "i18n/i18n.properties"
+      },
+      "@i18n": {
+        "type": "sap.ui.model.resource.ResourceModel",
+        "uri": "i18n/i18n.properties"
+      },
+      "json": {
+        "type": "sap.ui.model.json.JSONModel"
+      },
+      "i18n|sap.suite.ui.generic.template.ListReport|Genres": {
+        "type": "sap.ui.model.resource.ResourceModel",
+        "uri": "i18n/ListReport/Genres/i18n.properties"
+      },
+      "": {
+        "dataSource": "main",
+        "preload": true,
+        "settings": {
+          "useBatch": true,
+          "defaultBindingMode": "TwoWay",
+          "defaultCountMode": "Inline",
+          "refreshAfterChange": true,
+          "metadataUrlParams": {
+            "sap-value-list": "none"
+          }
+        }
+      }
+    },
+    "contentDensities": {
+      "compact": true,
+      "cozy": true
+    }
+  },
+  "sap.ui.generic.app": {
+    "_version": "1.3.0",
+    "settings": {
+      "forceGlobalRefresh": false,
+      "useColumnLayoutForSmartForm": false,
+      "showBasicSearch": false
+    },
+    "pages": {
+      "ListReport|Genres": {
+        "entitySet": "GenreHierarchy",
+        "component": {
+          "name": "sap.suite.ui.generic.template.ListReport",
+          "list": true,
+          "settings": {
+            "condensedTableLayout": true,
+            "smartVariantManagement": true,
+            "tableType": "TreeTable",
+            "enableTableFilterInPageVariant": true,
+            "dataLoadSettings": {
+              "loadDataOnAppLaunch": "always"
+            }
+          }
+        }
+      }
+    }
+  },
+  "sap.fiori": {
+    "registrationIds": [],
+    "archeType": "transactional"
+  },
+  "sap.platform.hcp": {
+    "uri": ""
+  },
+  "sap.platform.cf": {
+    "oAuthScopes": []
+  }
+}

fiori/app/services.cds

@@ -5,5 +5,6 @@
 using from './admin-authors/fiori-service';
 using from './admin-books/fiori-service';
 using from './browse/fiori-service';
+using from './genres/fiori-service';
 using from './common';
 using from '@capire/bookstore/srv/mashup';

fiori/db/common.cds

@@ -0,0 +1,14 @@
+namespace sap.capire.bookshop;
+
+using { sap.capire.bookshop } from '@capire/bookstore/srv/mashup';
+
+entity GenreHierarchy : bookshop.Genres {
+  hierarchyLevel : Integer default 0;
+  drillState     : String default 'leaf';
+  parent         : Association to GenreHierarchy;
+  children       : Composition of many GenreHierarchy on children.parent = $self;
+}
+
+extend service CatalogService with {
+  @readonly entity GenreHierarchy as projection on bookshop.GenreHierarchy;
+}

fiori/db/data/sap.capire.bookshop-GenreHierarchy.csv

@@ -0,0 +1,16 @@
+ID;parent_ID;name;hierarchyLevel;drillState
+10;;Fiction;0;expanded
+11;10;Drama;1;leaf
+12;10;Poetry;1;leaf
+13;10;Fantasy;1;leaf
+14;10;Science Fiction;1;leaf
+15;10;Romance;1;leaf
+16;10;Mystery;1;leaf
+17;10;Thriller;1;leaf
+18;10;Dystopia;1;leaf
+20;;Non-Fiction;0;expanded
+19;10;Fairy Tale;1;leaf
+21;20;Biography;1;expanded
+22;21;Autobiography;2;leaf
+23;20;Essay;1;leaf
+24;20;Speech;1;leaf

fiori/index.cds

@@ -0,0 +1 @@
+using from './db/common';

fiori/package.json

@@ -3,9 +3,10 @@
   "version": "1.0.0",
   "dependencies": {
     "@capire/bookstore": "*",
-    "@sap/cds": "^5",
+    "@sap/cds": ">=5",
+    "@sap/cds-odata-v2-adapter-proxy": "^1.9.0",
     "express": "^4.17.1",
-    "passport": "^0.4.1"
+    "passport": ">=0.4.1"
   },
   "scripts": {
     "start": "cds run --in-memory?",
@@ -13,9 +14,6 @@
   },
   "cds": {
     "requires": {
-      "auth": {
-        "strategy": "dummy"
-      },
       "ReviewsService": {
         "kind": "odata",
         "model": "@capire/reviews"
@@ -45,10 +43,10 @@
         "[production]": {
           "model": "db/hana"
         }
-      },
-      "hana": {
-        "deploy-format": "hdbtable"
       }
+    },
+    "hana": {
+      "deploy-format": "hdbtable"
     }
   }
-}
+}

fiori/server.js

@@ -1 +1,8 @@
-module.exports = require('@capire/bookstore/server.js')
+const cds = require("@sap/cds")
+
+// install OData v2 adapter
+const proxy = require('@sap/cds-odata-v2-adapter-proxy')
+const proxyOpts = global.it ? { target:'auto' } : {} // for tests, set 'auto' to detect port dynamically
+cds.on('bootstrap', app => app.use(proxy(proxyOpts)))
+
+module.exports = require('@capire/bookstore/server.js')

hello/package.json

@@ -6,25 +6,13 @@
     "start": "cds serve srv/world.cds",
     "start:ts": "cds-ts serve srv/world.cds"
   },
-  "devDependencies": {
-    "@types/jest": "^27.0.2",
-    "@types/node": "^16.11.6",
-    "ts-jest": "^27.0.2",
-    "typescript": "^4.3.5"
+  "dependencies": {
+    "@sap/cds": ">=5.0.4"
   },
-  "jest": {
-    "testEnvironment": "node",
-    "preset": "ts-jest",
-    "globals": {
-      "ts-jest": {
-        "diagnostics": {
-          "_comment": "see https://githubmemory.com/repo/kulshekhar/ts-jest/issues/2722",
-          "ignoreCodes": [
-            151001
-          ]
-        }
-      }
-    }
+  "devDependencies": {
+    "@types/jest": "*",
+    "@types/node": "*",
+    "typescript": "^4.3.5"
   },
   "eslintConfig": {
     "extends": "eslint:recommended",

hello/test/hello-world-test.js

@@ -0,0 +1,13 @@
+const cds = require ('@sap/cds')
+describe('Hello world!', () => {
+
+    beforeAll (()=> process.env.CDS_TYPESCRIPT = true)
+    afterAll (()=> delete process.env.CDS_TYPESCRIPT)
+    const {GET} = cds.test.in(__dirname,'../srv').run('serve', 'world.cds')
+
+    it('should say hello with class impl', async () => {
+        const {data} = await GET`/say/hello(to='world')`
+        expect(data.value).toMatch(/Hello world.*typescript.*/i)
+    })
+
+})

hello/test/hello-world-ts.test.ts

@@ -1,15 +0,0 @@
-process.env.CDS_TYPESCRIPT = 'true';
-import * as cds from '@sap/cds';
-
-//@ts-ignore
-const {GET} = cds.test.in(__dirname,'../srv').run('serve', 'world.cds');
-
-describe('Hello world!', () => {
-    afterAll(() => { delete process.env.CDS_TYPESCRIPT; });
-
-    it('should say hello with class impl from a typescript file', async () => {
-        const {data} = await GET`/say/hello(to='world')`
-        expect(data.value).toMatch(/Hello world.*typescript.*/i)
-    })
-
-})

orders/app/fiori.cds

@@ -16,11 +16,12 @@ using { OrdersService } from '../srv/orders-service';
 @odata.draft.enabled
 annotate OrdersService.Orders with @(
 	UI: {
-		SelectionFields: [ createdAt, createdBy ],
+		SelectionFields: [ createdBy ],
 		LineItem: [
 			{Value: OrderNo, Label:'OrderNo'},
 			{Value: buyer, Label:'Customer'},
-			{Value: createdAt, Label:'Date'}
+			{Value: currency.symbol, Label:'Currency'},
+			{Value: createdAt, Label:'Date'},
 		],
 		HeaderInfo: {
 			TypeName: 'Order', TypeNamePlural: 'Orders',

orders/app/orders/index.html

@@ -13,7 +13,7 @@
 			applications: {
 				"manage-orders": {
 					title: "Manage Orders",
-					description: "... testing FE v42",
+					description: "CAP Sample App",
 					additionalInformation: "SAPUI5.Component=orders",
 					applicationType : "URL",
 					url: "/orders/webapp",
@@ -25,10 +25,10 @@
 
 	<script id="sap-ushell-bootstrap" src="https://sapui5.hana.ondemand.com/test-resources/sap/ushell/bootstrap/sandbox.js"></script>
 	<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
-    	data-sap-ui-libs="sap.m, sap.ushell, sap.collaboration, sap.ui.layout"
-    	data-sap-ui-compatVersion="edge"
-    	data-sap-ui-theme="sap_fiori_3"
-    	data-sap-ui-frameOptions="allow"
+			data-sap-ui-libs="sap.m, sap.ushell, sap.collaboration, sap.ui.layout"
+			data-sap-ui-compatVersion="edge"
+			data-sap-ui-theme="sap_horizon"
+			data-sap-ui-frameOptions="allow"
 	></script>
 	<script>
 		sap.ui.getCore().attachInit(()=> sap.ushell.Container.createRenderer().placeAt("content"))

orders/app/orders/webapp/manifest.json

@@ -3,8 +3,8 @@
 	"sap.app": {
 		"id": "orders",
 		"type": "application",
-		"title": "Order Books",
-		"description": "Sample Application",
+		"title": "Order Management",
+		"description": "CAP Sample Application",
 		"i18n": "i18n/i18n.properties",
 		"dataSources": {
 			"OrdersService": {

orders/db/schema.cds

@@ -2,7 +2,7 @@ using { Currency, User, managed, cuid } from '@sap/cds/common';
 namespace sap.capire.orders;
 
 entity Orders : cuid, managed {
-  OrderNo  : String @title:'Order Number'; //> readable key
+  OrderNo  : String(22) @title:'Order Number'; //> readable key
   Items    : Composition of many {
     key ID    : UUID;
     product   : Association to Products;

orders/package.json

@@ -3,6 +3,6 @@
   "version": "1.0.0",
   "dependencies": {
     "@capire/common": "*",
-    "@sap/cds": "^5"
+    "@sap/cds": ">=5"
   }
 }

package.json

@@ -5,20 +5,25 @@
   "repository": "https://github.com/sap-samples/cloud-cap-samples.git",
   "author": "daniel.hutzel@sap.com",
   "dependencies": {
-    "@capire/bookstore": "./bookstore",
-    "@capire/bookshop": "./bookshop",
-    "@capire/common": "./common",
-    "@capire/fiori": "./fiori",
-    "@capire/hello": "./hello",
-    "@capire/media": "./media",
-    "@capire/orders": "./orders",
-    "@capire/reviews": "./reviews",
-    "@sap/cds": "^5.5.3"
+    "@sap/cds": ">=5.5.3"
   },
+  "workspaces": [
+    "./bookshop",
+    "./bookstore",
+    "./common",
+    "./data-viewer",
+    "./fiori",
+    "./hello",
+    "./media",
+    "./orders",
+    "./reviews"
+  ],
   "devDependencies": {
+    "axios": "^0",
     "chai": "^4.3.4",
     "chai-as-promised": "^7.1.1",
     "chai-subset": "^1.6.0",
+    "semver": "^7",
     "sqlite3": "^5"
   },
   "scripts": {
@@ -32,16 +37,17 @@
     "jest": "npx jest",
     "start": "cds watch fiori",
     "test": "npm run jest -- --silent",
+    "test:mocha": "npx mocha --parallel --recursive --timeout 20000",
     "test:hello": "cd hello && npm test"
   },
   "jest": {
-    "testEnvironment": "node",
     "testTimeout": 20000,
     "testMatch": [
       "**/*.test.js"
     ]
   },
   "mocha": {
+    "recursive": true,
     "parallel": true
   },
   "license": "SAP SAMPLE CODE LICENSE",

reviews/app/vue/app.js

@@ -4,21 +4,21 @@ const GET = (url) => axios.get('/reviews'+url)
 const PUT = (cmd,data) => axios.patch('/reviews'+cmd,data)
 const POST = (cmd,data) => axios.post('/reviews'+cmd,data)
 
-const reviews = new Vue ({
+const reviews = Vue.createApp ({
 
-    el:'#app',
-
-    data: {
-        list: [],
-        review: undefined,
-        message: {},
-        Ratings: Object.entries({
+    data() {
+        return {
+          list: [],
+          review: undefined,
+          message: {},
+          Ratings: Object.entries({
             5 : '★★★★★',
             4 : '★★★★',
             3 : '★★★',
             2 : '★★',
             1 : '★',
-        }).reverse()
+          }).reverse()
+        }
     },
 
     methods: {
@@ -66,7 +66,7 @@ const reviews = new Vue ({
         datetime: (d) => d && new Date(d).toLocaleString(),
     },
 
-})
+}).mount("#app")
 
 // initially fill list of my reviews
 reviews.fetch()

reviews/app/vue/index.html

@@ -5,7 +5,7 @@
     <title> Capire Reviews </title>
     <link rel="stylesheet" href="https://unpkg.com/primitive-ui/dist/css/main.css">
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
     <style>
         .hovering tr:hover td { color:cyan; background: #123; cursor: pointer; }
         .rating-stars { color:teal }
@@ -18,7 +18,7 @@
 <body class="small-container", style="margin-top: 70px;">
 <div id='app'>
 
-    <h1> {{ document.title }} </h1>
+    <h1> Capire Reviews </h1>
 
     <input type="text" placeholder="Search..." @input="search">
 

reviews/db/data/sap.capire.reviews-Reviews.csv

@@ -1,5 +1,5 @@
 subject;rating;reviewer;title;text
-201;5;adam;Intriguing;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+201;5;bob;Intriguing;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 201;4;bob;Fascinating;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id diam maecenas ultricies mi eget mauris pharetra et. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. Pulvinar mattis nunc sed blandit libero. Facilisis magna etiam tempor orci eu. Nec sagittis aliquam malesuada bibendum arcu. Eu consequat ac felis donec. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Tortor posuere ac ut consequat semper viverra nam libero. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Scelerisque purus semper eget duis at tellus. Elementum tempus egestas sed sed risus pretium. Arcu dictum varius duis at. Amet luctus venenatis lectus magna fringilla urna. Eget velit aliquet sagittis id consectetur purus ut faucibus. Vitae auctor eu augue ut lectus. Fermentum iaculis eu non diam phasellus vestibulum.
 207;2;bob;What is this?;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Libero justo laoreet sit amet cursus sit amet dictum. Nunc faucibus a pellentesque sit. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Enim nunc faucibus a pellentesque. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Cras ornare arcu dui vivamus. Facilisi etiam dignissim diam quis enim lobortis. Et molestie ac feugiat sed. Urna neque viverra justo nec ultrices dui. Ullamcorper a lacus vestibulum sed arcu non. Volutpat ac tincidunt vitae semper quis. Dignissim sodales ut eu sem. Feugiat in fermentum posuere urna nec. At augue eget arcu dictum varius.
 251;3;bob;It's dark...;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suscipit tellus mauris a diam. Velit aliquet sagittis id consectetur purus ut. Viverra adipiscing at in tellus integer. Vitae elementum curabitur vitae nunc. Mattis ullamcorper velit sed ullamcorper morbi. Diam quis enim lobortis scelerisque. Auctor neque vitae tempus quam pellentesque nec nam aliquam. Semper auctor neque vitae tempus. Quis eleifend quam adipiscing vitae proin. Neque convallis a cras semper auctor neque vitae. Imperdiet massa tincidunt nunc pulvinar sapien et ligula. Sit amet consectetur adipiscing elit ut aliquam purus. Pretium quam vulputate dignissim suspendisse.

reviews/db/schema.cds

@@ -32,7 +32,6 @@ entity Likes {
 
 // Auto-fill reviewers and review dates
 annotate Reviews with {
-  reviewer @cds.on.insert:$user;
-  date     @cds.on.insert:$now;
-  date     @cds.on.update:$now;
+  reviewer @cds.on:{insert:$user};
+  date     @cds.on:{insert:$now,update:$now};
 }

reviews/package.json

@@ -7,7 +7,7 @@
     "index.cds"
   ],
   "dependencies": {
-    "@sap/cds": "^5",
+    "@sap/cds": ">=5",
     "express": "^4.17.1"
   },
   "cds": {

samples.md

@@ -58,23 +58,31 @@ Each sub directory essentially is an individual npm package arranged in an [all-
   - [@capire/reviews](reviews)
   - [@capire/orders](orders)
   - [@capire/common](common)
-- [The Vue.js app](bookshop/app/vue) imported from bookshop is served as well
-- [The Vue.js app](reviews/app/vue) imported from reviews is served as well
-- [The Fiori app](orders/app) imported from orders is served as well
+  - [@capire/data-viewer](data-viewer)
+- [The Vue.js app](bookshop/app/vue) imported from `bookshop` is served as well
+- [The Vue.js app](reviews/app/vue) imported from `reviews` is served as well
+- [The Vue.js app](data-viewer/app/data) imported from `data-viewer` is served as well
+- [The Fiori app](orders/app) imported from `orders` is served as well
 - [OpenAPI export + Swagger UI](https://cap.cloud.sap/docs/advanced/openapi)
 
 
 
 ## [@capire/fiori](fiori)
 
-- [Adds an SAP Fiori elements application](https://cap.cloud.sap/docs/guides/fiori/) to bookstore, thereby introducing to:
-- [OData Annotations](https://cap.cloud.sap/docs/guides/fiori#adding-odata-annotations) in `.cds` files
-- Support for [Fiori Draft](https://cap.cloud.sap/docs/guides/fiori#draft)
-- Support for [Value Helps](https://cap.cloud.sap/docs/guides/fiori#value-help)
+- Adds an SAP Fiori elements application to bookstore, thereby introducing:
+- OData Annotations in `.cds` files
+- Support for Fiori Draft
+- Support for Value Helps
 - Serving SAP Fiori apps locally
+- Fiori Elements V2
+  - OData V2 using CDS OData V2 Adapter Proxy
+  - List Report (type `TreeTable`)
+  - `@sap.hierarchy` annotations
+
+See the [Serving Fiori UIs](https://cap.cloud.sap/docs/advanced/fiori) documentation for more information.
 
 <br>
 
 # All-in-one Monorepo
 
-Each sample sub directory essentially is a standard npm package, some with standard npm dependencies to other samples. The root folder's [package.json](package.json) has local links to the sub folders, such that an `npm install` populates a local `node_modules` folder acts like a local npm registry to the individual sample packages.
+Each sample sub directory essentially is a standard npm package, some with standard npm dependencies to other samples. The root folder's [package.json](package.json) has local links to the sub folders, such that an `npm install` populates a local `node_modules` folder and acts like a local npm registry to the individual sample packages.

test/cds.ql.test.js

@@ -1,28 +1,26 @@
-const cds = require('@sap/cds/lib')
-const { expect } = cds.test
-const { cdr } = cds.ql
-const Foo = { name: 'Foo' }
-const Books = { name: 'capire.bookshop.Books' }
-
-
-const STAR = cdr ? '*' : { ref: ['*'] }
-const skip = {to:{eql:()=>skip}}
-const srv = new cds.Service
-let cqn
-
-expect.plain = (cqn) => !cqn.SELECT.one && !cqn.SELECT.distinct ? expect(cqn) : skip
-expect.one = (cqn) => !cqn.SELECT.distinct ? expect(cqn) : skip
-
 describe('cds.ql → cqn', () => {
-  //
 
-  for (let each of ['SELECT', 'SELECT one', 'SELECT distinct']) {
+  const cds = require('@sap/cds/lib')
+  const { expect } = cds.test
+  const { cdr } = cds.ql
+  const Foo = { name: 'Foo' }
+  const Books = { name: 'capire.bookshop.Books' }
+
+  const STAR = cdr ? '*' : { ref: ['*'] }
+  const skip = {to:{eql:()=>skip}}
+  const srv = new cds.Service
+  let cqn
+
+  expect.plain = (cqn) => !cqn.SELECT.one && !cqn.SELECT.distinct ? expect(cqn) : skip
+  expect.one = (cqn) => !cqn.SELECT.distinct ? expect(cqn) : skip
+
+  describe.each(['SELECT', 'SELECT one', 'SELECT distinct'])(`%s...`, (each) => {
+
     let SELECT; beforeEach(()=> SELECT = (
       each === 'SELECT distinct' ? cds.ql.SELECT.distinct :
       each === 'SELECT one' ? cds.ql.SELECT.one :
       cds.ql.SELECT
     ))
-  describe(`${each}...`, () => {
 
     test(`from Foo`, () => {
       expect(cqn = SELECT `from Foo`)
@@ -81,6 +79,8 @@ describe('cds.ql → cqn', () => {
       .to.eql(SELECT('Foo','Boo').from('Bar'))
       .to.eql(SELECT(['Foo','Boo']).from('Bar'))
       .to.eql(SELECT `Bar` .columns `Foo, Boo`)
+      .to.eql(SELECT `Bar` .columns `{ Foo, Boo }`)
+      .to.eql(SELECT `Bar` .columns ('{ Foo, Boo }'))
       .to.eql(SELECT `Bar` .columns ('Foo','Boo'))
       .to.eql(SELECT `Bar` .columns (['Foo','Boo']))
       .to.eql(SELECT.from `Bar` .columns ('Foo','Boo'))
@@ -333,7 +333,7 @@ describe('cds.ql → cqn', () => {
       })
     })
 
-  })}
+  })
 
   describe ('SELECT where...', ()=>{
 
@@ -411,18 +411,67 @@ describe('cds.ql → cqn', () => {
         ]
       }})
 
-      expect (
-        SELECT.from(Foo).where({x:1,or:{y:2}})
-      ).to.eql (
-        CQL`SELECT from Foo where x=1 or y=2`
-      ).to.eql ({ SELECT: {
-        from: {ref:['Foo']},
-        where: [
-          {ref:['x']}, '=', {val:1},
-          'or',
-          {ref:['y']}, '=', {val:2}
-        ]
-      }})
+      const ql_with_groups_fix = !!cds.ql.Query.prototype.flat
+      if (ql_with_groups_fix) {
+
+        expect (
+          SELECT.from(Foo).where({x:1}).or({y:2}).and({z:3})
+        ).to.eql ({ SELECT: {
+          from: {ref:['Foo']},
+          where: [
+            {ref:['x']}, '=', {val:1},
+            'or',
+            {ref:['y']}, '=', {val:2},
+            'and',
+            {ref:['z']}, '=', {val:3},
+          ]
+        }})
+
+        expect (
+          SELECT.from(Foo).where({x:1,or:{y:2}}).and({z:3})
+        ).to.eql ({ SELECT: {
+          from: {ref:['Foo']},
+          where: [
+            {xpr:[
+              {ref:['x']}, '=', {val:1},
+              'or',
+              {ref:['y']}, '=', {val:2},
+            ]},
+            'and',
+            {ref:['z']}, '=', {val:3},
+          ]
+        }})
+
+        expect (
+          SELECT.from(Foo).where({a:1}).or({x:1,or:{y:2}}).and({z:3})
+        ).to.eql ({ SELECT: {
+          from: {ref:['Foo']},
+          where: [
+            {ref:['a']}, '=', {val:1},
+            'or',
+            {xpr:[
+              {ref:['x']}, '=', {val:1},
+              'or',
+              {ref:['y']}, '=', {val:2},
+            ]},
+            'and',
+            {ref:['z']}, '=', {val:3},
+          ]
+        }})
+
+        expect (
+          { SELECT: SELECT.from(Foo).where({x:1,or:{y:2}}).SELECT }
+        ).to.eql ({ SELECT: {
+          from: {ref:['Foo']},
+          where: [
+            {ref:['x']}, '=', {val:1},
+            'or',
+            {ref:['y']}, '=', {val:2},
+          ]
+        }})
+
+      }
+
 
       expect (
         SELECT.from(Foo).where({x:1,and:{y:2}}).or({z:3})
@@ -630,6 +679,34 @@ describe('cds.ql → cqn', () => {
     //
   })
 
+  describe(`SELECT for update`, () => {
+    beforeAll(() => {
+      delete cds.env.sql.lock_acquire_timeout
+    })
+
+    it('no wait', () => {
+      const q = SELECT.from('Foo').forUpdate()
+      expect(q.SELECT.forUpdate).eqls({})
+    })
+
+    it('specific wait', () => {
+      const q = SELECT.from('Foo').forUpdate({ wait: 1 })
+      expect(q.SELECT.forUpdate).eqls({ wait: 1 })
+    })
+
+    it('default wait', () => {
+      cds.env.sql.lock_acquire_timeout = 2
+      const q = SELECT.from('Foo').forUpdate()
+      expect(q.SELECT.forUpdate).eqls({ wait: 2 })
+    })
+
+    it('override default', () => {
+      cds.env.sql.lock_acquire_timeout = 1
+      const q = SELECT.from('Foo').forUpdate({ wait:-1 })
+      expect(q.SELECT.forUpdate).eqls({})
+    })
+  })
+
   describe(`INSERT...`, () => {
     test('entries ({a,b}, ...)', () => {
       const entries = [{ foo: 1 }, { boo: 2 }]

test/consuming-services.test.js

@@ -1,22 +1,21 @@
 const cds = require('@sap/cds/lib')
-const { expect } = cds.test (
-  'serve', 'AdminService', '--from', '@capire/bookshop,@capire/common', '--in-memory'
-)
 
-describe('Consuming Services locally', () => {
-  //
+describe('cap/samples - Consuming Services locally', () => {
+
+  const { expect } = cds.test ('@capire/bookshop')
+
   it('bootstrapped the database successfully', ()=>{
     const { AdminService } = cds.services
     const { Authors } = AdminService.entities
-    expect(AdminService).not.to.be.undefined
-    expect(Authors).not.to.be.undefined
+    expect(AdminService).to.exist
+    expect(Authors).to.exist
   })
 
   it('supports targets as strings or reflected defs', async () => {
     const AdminService = await cds.connect.to('AdminService')
     const { Authors } = AdminService.entities
     expect (await SELECT.from(Authors))
-    .to.eql(await SELECT.from('Authors'))
+    // .to.eql(await SELECT.from('Authors'))
     .to.eql(await AdminService.read(Authors))
     .to.eql(await AdminService.read('Authors'))
     .to.eql(await AdminService.run(SELECT.from(Authors)))
@@ -34,11 +33,33 @@ describe('Consuming Services locally', () => {
             })
         })
     }).where(`name like`, 'E%')
+    if (require('semver').gte(cds.version, '5.9.0')) {
+      expect(authors).to.containSubset([
+        {
+          name: 'Emily Brontë',
+          books: [
+            {
+              title: 'Wuthering Heights',
+              currency: { name: 'British Pound', symbol: '£' },
+            },
+          ],
+        },
+        {
+          name: 'Edgar Allen Poe',
+          books: [
+            { title: 'The Raven', currency: { name: 'US Dollar', symbol: '$' } },
+            { title: 'Eleonora', currency: { name: 'US Dollar', symbol: '$' } },
+          ],
+        },
+      ])
+      return
+    }
     expect(authors).to.containSubset([
       {
         name: 'Emily Brontë',
         books: [
           {
+            ID: 201,
             title: 'Wuthering Heights',
             currency: { name: 'British Pound', symbol: '£' },
           },
@@ -47,8 +68,8 @@ describe('Consuming Services locally', () => {
       {
         name: 'Edgar Allen Poe',
         books: [
-          { title: 'The Raven', currency: { name: 'US Dollar', symbol: '$' } },
-          { title: 'Eleonora', currency: { name: 'US Dollar', symbol: '$' } },
+          { ID: 251, title: 'The Raven', currency: { name: 'US Dollar', symbol: '$' } },
+          { ID: 252, title: 'Eleonora', currency: { name: 'US Dollar', symbol: '$' } },
         ],
       },
     ])

test/custom-handlers.test.js

@@ -1,9 +1,10 @@
 const cds = require('@sap/cds/lib')
-const { GET, POST, expect } = cds.test(__dirname+'/../bookshop')
-if (cds.User.default) cds.User.default = cds.User.Privileged // hard core monkey patch
-else cds.User = cds.User.Privileged // hard core monkey patch for older cds releases
 
-describe('Custom Handlers', () => {
+describe('cap/samples - Custom Handlers', () => {
+
+  const { GET, POST, expect } = cds.test(__dirname+'/../bookshop')
+  if (cds.User.default) cds.User.default = cds.User.Privileged // hard core monkey patch
+  else cds.User = cds.User.Privileged // hard core monkey patch for older cds releases
 
   it('should reject out-of-stock orders', async () => {
     await POST `/browse/submitOrder ${{ book: 201, quantity: 5 }}`

test/fiori.test.js

@@ -0,0 +1,23 @@
+const cds = require('@sap/cds/lib')
+
+describe('cap/samples - Fiori APIs - v2', () => {
+
+  const { GET, expect, axios } = cds.test ('@capire/fiori', '--with-mocks')
+  axios.defaults.auth = { username: 'alice', password: 'admin' }
+
+  it('serves $metadata documents in v2', async () => {
+    const { headers, data } = await GET `/v2/browse/$metadata`
+    expect(headers).to.contain({
+      'content-type': 'application/xml',
+      'dataserviceversion': '2.0',
+    })
+    expect(data).to.contain('<EntitySet Name="GenreHierarchy" EntityType="CatalogService.GenreHierarchy"/>')
+  })
+
+  it('serves Books in v2', async () => {
+    const { data } = await GET `/v2/browse/Books`
+    expect(data).to.containSubset({d:{results:[]}})
+    expect(data.d.results.length).to.be.greaterThanOrEqual(5)
+  })
+
+})

test/hello-world.test.js

@@ -1,7 +1,8 @@
 const cds = require('@sap/cds/lib')
-const { GET, expect } = cds.test (__dirname+'/../hello')
 
-describe('Hello world!', () => {
+describe('cap/samples - Hello world!', () => {
+
+  const { GET, expect } = cds.test (__dirname+'/../hello')
 
   it('should say hello with class impl', async () => {
     const {data} = await GET `/say/hello(to='world')`
@@ -9,8 +10,7 @@ describe('Hello world!', () => {
   })
 
   it('should say hello with another impl', async () => {
-    const cds = require ('@sap/cds')
-    cds.serve('say').from(cds.model)
+    await cds.serve('say').from(cds.model)
     .at('/say-again').in(cds.app)
     .with(srv => {
       srv.on('hello', (req) => `Hello again ${req.data.to}!`)

test/hierarchical-data.test.js

@@ -1,19 +1,17 @@
 const cds = require('@sap/cds/lib')
-const {expect} = cds.test
 
-// should become cds.compile(...) when cds5 is released
-const model = cds.compile.to.csn (`
-  entity Categories {
-    key ID   : Integer;
-    name     : String;
-    children : Composition of many Categories on children.parent = $self;
-    parent   : Association to Categories;
-  }
-`)
-const {Categories:Cats} = model.definitions
+describe('cap/samples - Hierarchical Data', ()=>{
 
-
-describe('Hierarchical Data', ()=>{
+	const model = CDL`
+		entity Categories {
+			key ID   : Integer;
+			name     : String;
+			children : Composition of many Categories on children.parent = $self;
+			parent   : Association to Categories;
+		}
+	`
+	const {Categories:Cats} = model.definitions
+	const {expect} = cds.test
 
 	before ('bootstrap sqlite in-memory db...', async()=>{
 		await cds.deploy (model) .to ('sqlite::memory:')
@@ -35,6 +33,21 @@ describe('Hierarchical Data', ()=>{
   ))
 
 	it ('supports nested reads', async()=>{
+		if (require('semver').gte(cds.version, '5.9.0')) {
+			expect (await
+				SELECT.one.from (Cats, c=>{
+					c.ID, c.name.as('parent'), c.children (c=>{
+						c.name.as('child')
+					})
+				}) .where ({name:'Cat'})
+			) .to.eql (
+				{ ID:101, parent:'Cat', children:[
+					{ child:'Kitty' },
+					{ child:'Catwoman' },
+				]}
+			)
+			return
+		}
 		expect (await
 			SELECT.one.from (Cats, c=>{
 				c.ID, c.name.as('parent'), c.children (c=>{
@@ -50,6 +63,25 @@ describe('Hierarchical Data', ()=>{
 	})
 
 	it ('supports deeply nested reads', async()=>{
+		if (require('semver').gte(cds.version, '5.9.0')) {
+			expect (await SELECT.one.from (Cats, c=>{
+				c.ID, c.name, c.children (
+					c => { c.name },
+					{levels:3}
+				)
+			}) .where ({name:'Cat'})
+			) .to.eql (
+				{ ID:101, name:'Cat', children:[
+					{ name:'Kitty', children:[
+						{ name:'Kitty Cat', children:[
+							{ name:'Aristocat' }, ]},  // level 3
+						{ name:'Kitty Bat', children:[] }, ]},
+					{ name:'Catwoman', children:[
+						{ name:'Catalina', children:[] } ]},
+				]}
+			)
+			return
+		}
 		expect (await SELECT.one.from (Cats, c=>{
 			c.ID, c.name, c.children (
 				c => { c.name },

test/localized-data/services.test.js

@@ -1,26 +1,14 @@
-const cds = require('@sap/cds/lib')
-const { GET, expect } = cds.test.run ('serve', __dirname+'/localized-data.cds', '--in-memory')
-if (cds.User.default) cds.User.default = cds.User.Privileged // hard core monkey patch
-else cds.User = cds.User.Privileged // hard core monkey patch for older cds releases
+describe('cap/samples - Localized Data', () => {
 
-describe('Localized Data', () => {
+  const { GET, expect, cds } = require('@sap/cds/lib').test (__dirname)
+  if (cds.User.default) cds.User.default = cds.User.Privileged // hard core monkey patch
+  else cds.User = cds.User.Privileged // hard core monkey patch for older cds releases
 
   it('serves localized $metadata documents', async () => {
-    const { data } = await GET`/browse/$metadata?sap-language=de`
+    const { data } = await GET(`/browse/$metadata?sap-language=de`, { headers: { 'accept-language': 'de' }})
     expect(data).to.contain('<Annotation Term="Common.Label" String="Währung"/>')
   })
 
-  it('supports sap-language param', async () => {
-    const { data } = await GET(`/browse/Books?$select=title,author` + '&sap-language=de')
-    expect(data.value).to.containSubset([
-      { title: 'Sturmhöhe', author: 'Emily Brontë' },
-      { title: 'Jane Eyre', author: 'Charlotte Brontë' },
-      { title: 'The Raven', author: 'Edgar Allen Poe' },
-      { title: 'Eleonora', author: 'Edgar Allen Poe' },
-      { title: 'Catweazle', author: 'Richard Carpenter' },
-    ])
-  })
-
   it('supports accept-language header', async () => {
     const { data } = await GET(`/browse/Books?$select=title,author`, {
       headers: { 'Accept-Language': 'de' },

test/messaging.test.js

@@ -1,14 +1,20 @@
 const cds = require('@sap/cds/lib')
-const { expect } = cds.test
-const _model = '@capire/reviews'
-if (cds.User.default) cds.User.default = cds.User.Privileged // hard core monkey patch
-else cds.User = cds.User.Privileged // hard core monkey patch for older cds releases
+const {resolve} = require('path')
 
-describe('Messaging', ()=>{
+describe('cap/samples - Messaging', ()=>{
+
+    const { expect } = cds.test
+    const _model = '@capire/reviews'
+    const Reviews = 'sap.capire.reviews.Reviews'
+    if (cds.User.default) cds.User.default = cds.User.Privileged // hard core monkey patch
+    else cds.User = cds.User.Privileged // hard core monkey patch for older cds releases
+
+    beforeAll(() => { cds.root = resolve(__dirname, '..') })
+    afterAll(() => { cds.root = process.cwd() })
 
     it ('should bootstrap sqlite in-memory db', async()=>{
         const db = await cds.deploy (_model) .to ('sqlite::memory:')
-        await db.delete('Reviews')
+        await db.delete(Reviews)
         expect (db.model) .not.undefined
     })
 

test/odata.test.js

@@ -1,9 +1,48 @@
 const cds = require('@sap/cds/lib')
-const { GET, expect } = cds.test ('@capire/bookshop')
-if (cds.User.default) cds.User.default = cds.User.Privileged // hard core monkey patch
-else cds.User = cds.User.Privileged // hard core monkey patch for older cds releases
 
-describe('OData Protocol', () => {
+describe('cap/samples - Bookshop APIs', () => {
+  const { GET, expect, axios } = cds.test ('@capire/bookshop')
+  axios.defaults.auth = { username: 'alice', password: 'admin' }
+
+  // Genres
+  const Drama = {
+    "name": "Drama",
+    "descr": null,
+    "ID": 11,
+    "parent_ID": 10
+  }
+  const Mystery = {
+    "name": "Mystery",
+    "descr": null,
+    "ID": 16,
+    "parent_ID": 10
+  }
+  const Fantasy = {
+    "name": "Fantasy",
+    "descr": null,
+    "ID": 13,
+    "parent_ID": 10
+  }
+
+  // Currencies
+  const GBP = {
+    "name": "British Pound",
+    "descr": null,
+    "code": "GBP",
+    "symbol": "£"
+  }
+  const USD = {
+    "name": "US Dollar",
+    "descr": null,
+    "code": "USD",
+    "symbol": "$"
+  }
+  const JPY = {
+    "name": "Yen",
+    "descr": null,
+    "code": "JPY",
+    "symbol": "¥"
+  }
 
 
   it('serves $metadata documents in v4', async () => {
@@ -17,6 +56,16 @@ describe('OData Protocol', () => {
     expect(data).to.contain('<Annotation Term="Common.Label" String="Currency"/>')
   })
 
+  it('serves ListOfBooks?$expand=genre,currency', async () => {
+    const { data } = await GET `/browse/ListOfBooks ${{
+      params: { $search: 'Po', $select: `title,author`, $expand:`genre,currency` },
+    }}`
+    expect(data.value).to.eql([
+      { ID: 251, title: 'The Raven', author: 'Edgar Allen Poe', genre:Mystery, currency:USD  },
+      { ID: 252, title: 'Eleonora', author: 'Edgar Allen Poe', genre:Mystery, currency:USD  },
+    ])
+  })
+
   it('supports $search in multiple fields', async () => {
     const { data } = await GET `/browse/Books ${{
       params: { $search: 'Po', $select: `title,author` },
@@ -75,4 +124,16 @@ describe('OData Protocol', () => {
       { ID: 271, title: 'Catweazle' },
     ])
   })
+
+  it('serves user info', async () => {
+    {
+      const { data } = await GET (`/user/me`)
+      expect(data).to.containSubset({ id: 'alice', locale:'en', tenant: null })
+    }
+    {
+      const { data } = await GET (`/user/me`, {auth: { username: 'joe' }})
+      expect(data).to.containSubset({ id: 'joe', locale:'en', tenant: null })
+    }
+  })
+
 })

test/registry.test.js

@@ -1,37 +1,40 @@
 
+const cds = require('@sap/cds/lib')
 const { fork } = require('child_process')
 const { resolve } = require('path')
-const Axios = require('axios')
 const verbose = process.env.CDS_TEST_VERBOSE
-// ||true
 
-describe('Local NPM registry', () => {
+describe('cap/samples - Local NPM registry', () => {
+
+  const { expect } = cds.test
+  // ||true
+
   let registry
   let axios
   const cwd = resolve(__dirname, '..')
 
-  beforeAll(async ()=> {
+  before(async ()=> {
     const env = Object.assign(process.env, {PORT:'0'})
     const res = await exec (resolve(cwd, '.registry/server.js'), {cwd, stdio: 'pipe', env})
     registry = res.cp
-    axios = Axios.default.create ({ baseURL: res.url, validateStatus: (status)=>status<500 })
+    axios = require('axios').default.create ({ baseURL: res.url, validateStatus: (status)=>status<500 })
   })
 
-  afterAll(() => { registry.kill() })
+  after(() => { registry.kill() })
 
-  for (const mod of ['bookshop','fiori','orders','reviews']) {
+  for (const mod of ['bookshop', 'data-viewer', 'fiori','orders','reviews']) {
     it(`should serve ${mod}`, async () => {
       const resp = await axios.get(`/@capire/${mod}`)
-      expect(resp.data).toMatchObject({name: `@capire/${mod}`, versions:{}})
+      expect(resp.data).to.containSubset({name: `@capire/${mod}`, versions:{}})
       const versions = Object.values(resp.data.versions)
       await axios.get(versions[0].dist.tarball)
     })
   }
   it(`should return 404 for unknown packages`, async () => {
     let resp = await axios.get(`/@capire/foo`)
-    expect(resp.status).toEqual(404)
+    expect(resp.status).to.equal(404)
     resp = await axios.get(`/foo`)
-    expect(resp.status).toEqual(404)
+    expect(resp.status).to.equal(404)
   })
 
 })