Bundle Vue apps with Vite instead of Webpack

.github/workflows/test.yaml

@@ -57,24 +57,26 @@ jobs:
     - name: Run phpunit tests
       run: UPAL_ROOT=$ROOT UPAL_WEB_URL=http://127.0.0.1 XDEBUG_MODE=coverage phpunit --bootstrap=$COMPOSER_HOME/vendor/torotil/upal/bootstrap.php --coverage-clover=coverage.xml .
     - uses: codecov/codecov-action@v1
-  
+
   yarn:
     env:
       APP_DIRS: campaignion_email_to_target/datasets_app campaignion_email_to_target/messages_app campaignion_wizard/redirects_app
     runs-on: ubuntu-20.04
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - name: "Setup node"
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
       with:
-        node-version: 10
+        node-version: '18.12.1'
+        cache: 'yarn'
+        cache-dependency-path: '**/yarn.lock'
     - name: Set env
       run: |
         echo "REPO=`pwd`" >> $GITHUB_ENV
     - name: Get yarn cache directory path
       id: yarn-cache-dir-path
       run: echo "::set-output name=dir::$(yarn cache dir)"
-    - uses: actions/cache@v2
+    - uses: actions/cache@v3
       id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
       with:
         path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -86,7 +88,7 @@ jobs:
         for d in ${{ env.APP_DIRS }}
         do
           cd $REPO/$d
-          yarn install
+          yarn install --frozen-lockfile
         done
     - name: yarn unit
       run: |

campaignion_email_to_target/datasets_app/.eslintignore

@@ -1,2 +1,5 @@
-build/*.js
-config/*.js
+node_modules/
+dist/
+api-server.js
+drupal-fixture.js
+vite.config.js

campaignion_email_to_target/datasets_app/.gitignore

@@ -1,10 +1,12 @@
 .DS_Store
 node_modules/
 dist/
+test/e2e/screenshots
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 test/unit/coverage
 test/e2e/reports
 selenium-debug.log
-build/api-db.json
+selenium-server.log
+api-db.json

campaignion_email_to_target/datasets_app/README.md

@@ -1,7 +1,6 @@
 # dataset_app
 
 Select and edit datasets via the e2t_api.
-The app can be loaded in two environments: The wizard’s target step and as a standalone dataset manager (the latter is yet to be implemented).
 
 ## Dev mode
 
@@ -13,22 +12,24 @@ E2T_API_TOKEN="<here goes the token>" yarn dev
 
 ## Production mode
 
-In production mode, Webpack is configured to leave certain vendor libraries out of the bundle and take them from the `campaignion_vue` global provided by the `campaignion_vue` module.
 The app uses the API url and token passed via `Drupal.settings.campaignion_email_to_target.endpoints['e2t-api']`.
 
 ## Usage
 
 ``` bash
 # install dependencies
-yarn install
+yarn
 
 # serve with hot reload at localhost:8080
 yarn dev
 
 # build for production with minification
 yarn build
 
-# run e2e tests in Chrome
+# run unit tests
+yarn unit
+
+# run e2e tests in Chrome (after running yarn build)
 yarn e2e
 ```
 
@@ -41,4 +42,7 @@ The app needs the following settings in the `Drupal.settings.campaignion_email_t
 | `contactPrefix`   | string   | A prefix used to identify a contact attribute in a dataset’s attributes list.                                   | `'contact.'`                                                     | `''`    |
 | `standardColumns` | Object[] | Array of objects describing the columns that have to be present in every dataset.                               | `[{key: 'email', description: '', title: 'Email address'}, ...]` | `[]`    |
 | `validations`     | Object   | Validations for each column. Dictionary of regex strings, keyed by column name. Backslashes have to be escaped! | `{'first_name': '\\S+'}`                                         | `{}`    |
-| `endpoints`       | Object   | For now, this is only the `e2t-api` endpoint.                                                                   | `{'e2t-api': {url: 'http://example.com', token: 'Bearer token'}}`   |         |
+| `maxFieldLengths` | Object   | Maximum characters for each column. Dictionary of integers, keyed by column name.                               | see `drupal-fixture.js`                                          |         |
+| `endpoints`       | Object   | For now, this is only the `e2t-api` endpoint.                                                                   | `{'e2t-api': {url: 'http://example.com', token: 'Bearer token'}}`|         |
+| `datasetQuery`    | string   | query string for filtering when GETting datasets from the API                                                   |                                                                  | `''`    |
+| `organization`    | string   | `campaignion_organization`, will be saved with the dataset as `dataset.organization`                            |                                                                  | `''`    |

campaignion_email_to_target/datasets_app/build/api-server.js → campaignion_email_to_target/datasets_app/api-server.js

@@ -15,7 +15,6 @@ const _ = require('lodash')
 const server = jsonServer.create()
 const router = jsonServer.router(path.join(__dirname, '/api-db.json'))
 router.db._.id = 'key'
-// router.db._.foreignKeySuffix = 'Key'
 const middlewares = jsonServer.defaults()
 
 // Set default middlewares (logger, static, cors and no-cache)
@@ -90,7 +89,7 @@ server.use((req, res, next) => {
 
 // Finetune output
 router.render = (req, res) => {
-  if (req.method === 'GET' && req.url.match("/contacts")) {
+  if (req.method === 'GET' && req.url.match('/contacts')) {
     // Only return the actual contacts
     res.jsonp(res.locals.data[0].contacts)
   } else {