chore: upgrade ui dependencies (#1470)

.github/workflows/ui-lint.yml

@@ -26,7 +26,7 @@ jobs:
       - name: Use Node
         uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version: 18.x
 
       - name: Install dependencies
         run: make ui-dependencies

.github/workflows/ui-tests.yml

@@ -26,7 +26,7 @@ jobs:
       - name: Use Node
         uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version: 18.x
 
       - name: Install dependencies
         run: make ui-dependencies

Dockerfile

@@ -7,11 +7,11 @@ RUN apt-get update &&\
     apt-get install -y build-essential &&\
     apt-get install -y git
 
-# Install Node@v16
-RUN curl -sL https://deb.nodesource.com/setup_16.x | bash - &&\
+# Install Node@v18
+RUN curl -sL https://deb.nodesource.com/setup_18.x | bash - &&\
     apt-get install -y nodejs &&\
     npm update &&\
-    npm i -g [email protected].17
+    npm i -g [email protected].22
 
 # Build the full app binary
 WORKDIR /app

README.md

@@ -130,7 +130,7 @@ rpm -i conduit_0.8.0_Linux_x86_64.rpm
 Requirements:
 
 - [Go](https://golang.org/) (1.21 or later)
-- [Node.js](https://nodejs.org/) (16.x)
+- [Node.js](https://nodejs.org/) (18.x)
 - [Yarn](https://yarnpkg.com/) (latest 1.x)
 - [Ember CLI](https://ember-cli.com/)
 - [Make](https://www.gnu.org/software/make/)

ui/mirage/config.js

@@ -4,88 +4,91 @@ import { createServer } from 'miragejs';
 import { discoverEmberDataModels } from 'ember-cli-mirage';
 
 export default function (cfg) {
-  return createServer({
+  let finalConfig = {
     ...cfg,
-    models: { ...discoverEmberDataModels(), ...cfg.models },
-    routes() {
-      // v1 Conduit REST API
-      this.urlPrefix = config.conduitAPIURL;
-      this.namespace = 'v1';
-
-      if (config.isDevMirageEnabled || config.environment === 'test') {
-        this.get('/pipelines');
-        this.get('/pipelines/:id');
-        this.post('/pipelines', function ({ pipelines }, request) {
-          let attrs = JSON.parse(request.requestBody);
-          attrs.state = {
-            status: 'STATUS_STOPPED',
-            error: '',
-          };
-
-          return pipelines.create(attrs);
-        });
-        this.put('/pipelines/:id');
-        this.delete('/pipelines/:id');
+    models: { ...discoverEmberDataModels(cfg.store), ...cfg.models },
+    routes,
+  };
+  return createServer(finalConfig);
+}
 
-        this.post('/pipelines/:id/start', function ({ pipelines }, request) {
-          const pipeline = pipelines.find(request.params.id);
-          pipeline.update('state', { status: 'STATUS_RUNNING', error: '' });
+function routes() {
+  // v1 Conduit REST API
+  this.urlPrefix = config.conduitAPIURL;
+  this.namespace = 'v1';
 
-          return {};
-        });
+  if (config.isDevMirageEnabled || config.environment === 'test') {
+    this.get('/pipelines');
+    this.get('/pipelines/:id');
+    this.post('/pipelines', function ({ pipelines }, request) {
+      let attrs = JSON.parse(request.requestBody);
+      attrs.state = {
+        status: 'STATUS_STOPPED',
+        error: '',
+      };
 
-        this.post('/pipelines/:id/stop', function ({ pipelines }, request) {
-          const pipeline = pipelines.find(request.params.id);
-          pipeline.update('state', { status: 'STATUS_STOPPED', error: '' });
+      return pipelines.create(attrs);
+    });
+    this.put('/pipelines/:id');
+    this.delete('/pipelines/:id');
 
-          return {};
-        });
+    this.post('/pipelines/:id/start', function ({ pipelines }, request) {
+      const pipeline = pipelines.find(request.params.id);
+      pipeline.update('state', { status: 'STATUS_RUNNING', error: '' });
 
-        this.get('/connectors', function ({ connectors }, request) {
-          const conns = connectors.all();
-          const pipelineConns = conns.models.filter((connector) => {
-            return connector.pipelineId === request.queryParams.pipeline_id;
-          });
+      return {};
+    });
 
-          return pipelineConns;
-        });
+    this.post('/pipelines/:id/stop', function ({ pipelines }, request) {
+      const pipeline = pipelines.find(request.params.id);
+      pipeline.update('state', { status: 'STATUS_STOPPED', error: '' });
+
+      return {};
+    });
+
+    this.get('/connectors', function ({ connectors }, request) {
+      const conns = connectors.all();
+      const pipelineConns = conns.models.filter((connector) => {
+        return connector.pipelineId === request.queryParams.pipeline_id;
+      });
 
-        this.post(
-          '/connectors',
-          function ({ connectors, plugins, pipelines }, request) {
-            const attrs = JSON.parse(request.requestBody);
-            const plugin = plugins.find(attrs.plugin);
-            const pipeline = pipelines.find(attrs.pipeline_id);
-
-            return connectors.create({
-              type: attrs.type,
-              config: attrs.config,
-              pipeline,
-              plugin,
-            });
-          }
-        );
-
-        this.put('/connectors/:id');
-        this.delete('/connectors/:id');
-
-        this.get('/processors');
-        this.post('/processors');
-        this.put('/processors/:id');
-        this.delete('/processors/:id');
-
-        this.get('/plugins');
-      } else {
-        this.passthrough('/pipelines');
-        this.passthrough('/pipelines/:id');
-        this.passthrough('/pipelines/:id/start');
-        this.passthrough('/pipelines/:id/stop');
-        this.passthrough('/connectors');
-        this.passthrough('/connectors/:id');
-        this.passthrough('/processors');
-        this.passthrough('/processors/:id');
-        this.passthrough('/plugins');
+      return pipelineConns;
+    });
+
+    this.post(
+      '/connectors',
+      function ({ connectors, plugins, pipelines }, request) {
+        const attrs = JSON.parse(request.requestBody);
+        const plugin = plugins.find(attrs.plugin);
+        const pipeline = pipelines.find(attrs.pipeline_id);
+
+        return connectors.create({
+          type: attrs.type,
+          config: attrs.config,
+          pipeline,
+          plugin,
+        });
       }
-    },
-  });
+    );
+
+    this.put('/connectors/:id');
+    this.delete('/connectors/:id');
+
+    this.get('/processors');
+    this.post('/processors');
+    this.put('/processors/:id');
+    this.delete('/processors/:id');
+
+    this.get('/plugins');
+  } else {
+    this.passthrough('/pipelines');
+    this.passthrough('/pipelines/:id');
+    this.passthrough('/pipelines/:id/start');
+    this.passthrough('/pipelines/:id/stop');
+    this.passthrough('/connectors');
+    this.passthrough('/connectors/:id');
+    this.passthrough('/processors');
+    this.passthrough('/processors/:id');
+    this.passthrough('/plugins');
+  }
 }

ui/mirage/factories/connector.js

@@ -1,4 +1,4 @@
-import { Factory, trait } from 'ember-cli-mirage';
+import { Factory, trait } from 'miragejs';
 
 export default Factory.extend({
   config() {

ui/mirage/factories/pipeline.js

@@ -1,4 +1,4 @@
-import { Factory, trait } from 'ember-cli-mirage';
+import { Factory, trait } from 'miragejs';
 
 export default Factory.extend({
   config(i) {

ui/mirage/factories/plugin.js

@@ -1,4 +1,4 @@
-import { Factory, trait } from 'ember-cli-mirage';
+import { Factory, trait } from 'miragejs';
 import { generateBlueprint } from 'conduit-ui/utils/blueprints/generate-blueprint-data';
 
 export default Factory.extend({

ui/mirage/factories/processor.js

@@ -1,4 +1,4 @@
-import { Factory } from 'ember-cli-mirage';
+import { Factory } from 'miragejs';
 
 export default Factory.extend({
   type: 'maskfieldkey',

ui/mirage/serializers/application.js

@@ -1,4 +1,4 @@
-import { RestSerializer } from 'ember-cli-mirage';
+import { RestSerializer } from 'miragejs';
 
 export default RestSerializer.extend({
   root: false,

ui/package.json

@@ -44,18 +44,18 @@
     "ember-cli": "~4.8.0",
     "ember-cli-app-version": "^6.0.1",
     "ember-cli-babel": "^7.26.11",
-    "ember-cli-code-coverage": "^1.0.3",
+    "ember-cli-code-coverage": "^3.0.0",
     "ember-cli-dependency-checker": "^3.3.2",
     "ember-cli-deprecation-workflow": "^2.2.0",
     "ember-cli-flash": "^4.0.0",
     "ember-cli-htmlbars": "^6.2.0",
     "ember-cli-inject-live-reload": "^2.1.0",
-    "ember-cli-mirage": "^2.4.0",
+    "ember-cli-mirage": "^3.0.3",
     "ember-cli-netlify": "^0.4.1",
     "ember-cli-postcss": "^8.2.0",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
-    "ember-concurrency": "^2.3.7",
+    "ember-concurrency": "^4.0.2",
     "ember-css-transitions": "^4.4.0",
     "ember-data": "~4.9.1",
     "ember-fetch": "^8.1.2",
@@ -78,7 +78,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-qunit": "^7.3.4",
     "loader.js": "^4.7.0",
-    "mx-ui-components": "https://github.com/ConduitIO/mx-ui-components.git#v2.10.0",
+    "mx-ui-components": "https://github.com/ConduitIO/mx-ui-components.git#v3.0.0",
     "npm-run-all": "^4.1.5",
     "postcss-import": "^15.1.0",
     "prettier": "^2.7.1",
@@ -88,7 +88,7 @@
     "webpack": "^5.89.0"
   },
   "engines": {
-    "node": "14.* || 16.* || >= 18"
+    "node": ">= 18"
   },
   "ember": {
     "edition": "octane"

ui/tests/acceptance/pipeline/index-test.js

@@ -2,7 +2,7 @@ import { assert, module, test } from 'qunit';
 import { find, visit, click, waitUntil, fillIn } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
-import { Response } from 'ember-cli-mirage';
+import { Response } from 'miragejs';
 
 const page = {
   pipelineSubheaderName: '[data-test-pipeline-subheader-name]',

ui/tests/acceptance/pipelines/index-test.js

@@ -2,7 +2,7 @@ import { assert, module, test } from 'qunit';
 import { visit, click, fillIn, currentURL } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
-import { Response } from 'ember-cli-mirage';
+import { Response } from 'miragejs';
 
 const page = {
   pipelineDropdownTrigger: '[data-test-dropdown-trigger="pipeline-list-item"]',