[UI] Upgrade packages and engines

.github/workflows/integration-test.yml

@@ -23,7 +23,7 @@ jobs:
 
       - uses: actions/setup-node@v2.5.0
         with:
-          node-version: "14"
+          node-version: "16"
 
       - id: go-cache-paths
         run: |

ui/.nvmrc

@@ -1 +1 @@
-v14.17.0
+v16

ui/README.md

@@ -6,5 +6,5 @@ The ui directory contains these `.vue` files, along with others used in the web
 
 ## Build Requirements
 
-- [NodeJS](https://nodejs.org/en/)
+- [NodeJS >= 16](https://nodejs.org/en/)
 - [Yarn](https://yarnpkg.com/en/)

ui/build/webpack.dev.conf.js

@@ -23,31 +23,21 @@ const devWebpackConfig = merge(baseWebpackConfig, {
 
   // these devServer options should be customized in /config/index.js
   devServer: {
-    clientLogLevel: 'warning',
     historyApiFallback: {
       rewrites: [
         { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
       ],
     },
     hot: true,
-    contentBase: false, // since we use CopyWebpackPlugin.
     compress: true,
     host: HOST || config.dev.host,
     port: PORT || config.dev.port,
     open: config.dev.autoOpenBrowser,
-    overlay: config.dev.errorOverlay
-      ? { warnings: false, errors: true }
-      : false,
-    publicPath: config.dev.assetsPublicPath,
     proxy: {
       '/api': {
         target: 'http://localhost:8080',
       },
     },
-    quiet: true, // necessary for FriendlyErrorsPlugin
-    watchOptions: {
-      poll: config.dev.poll,
-    }
   },
   plugins: [
     new webpack.DefinePlugin({

ui/build/webpack.prod.conf.js

@@ -100,8 +100,6 @@ const webpackConfig = merge(baseWebpackConfig, {
         // more options:
         // https://github.com/kangax/html-minifier#options-quick-reference
       },
-      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-      chunksSortMode: 'dependency'
     }),
     // keep module.id stable when vendor modules does not change
     new webpack.HashedModuleIdsPlugin(),

ui/package.json

@@ -5,21 +5,21 @@
   "author": "Mark Phelps <mark.aaron.phelps@gmail.com>",
   "private": true,
   "scripts": {
-    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "dev": "webpack-dev-server --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
     "lint": "eslint --ext .js,.vue src __tests__",
     "build": "node build/build.js",
     "test": "jest"
   },
   "dependencies": {
     "axios": "^0.21.2",
-    "buefy": "^0.8.6",
+    "buefy": "^0.9.13",
     "bulma": "^0.8.0",
     "jpeg-js": "0.4.3",
     "lodash": "^4.17.21",
-    "node-sass": "^4.14.1",
+    "node-sass": "^6.0.0",
     "playwright": "^1.12.1",
-    "sass-loader": "^8.0.0",
+    "sass-loader": "^10.1.1",
     "uuid": "^3.3.2",
     "vue": "^2.6.14",
     "vue-moment": "^4.1.0",
@@ -29,25 +29,26 @@
   },
   "devDependencies": {
     "@babel/core": "^7.7.2",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-decorators": "^7.14.5",
+    "@babel/plugin-proposal-class-properties": "^7.16.5",
+    "@babel/plugin-proposal-decorators": "^7.16.4",
     "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
-    "@babel/plugin-proposal-function-sent": "^7.14.5",
+    "@babel/plugin-proposal-function-sent": "^7.16.5",
     "@babel/plugin-proposal-json-strings": "^7.13.8",
-    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
-    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
+    "@babel/plugin-proposal-numeric-separator": "^7.16.5",
+    "@babel/plugin-proposal-throw-expressions": "^7.16.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-syntax-import-meta": "^7.0.0",
     "@babel/plugin-syntax-jsx": "^7.14.5",
     "@babel/plugin-transform-modules-commonjs": "^7.15.4",
     "@babel/plugin-transform-runtime": "^7.15.0",
     "@babel/preset-env": "^7.14.7",
     "@babel/runtime-corejs2": "^7.15.3",
+    "@webpack-cli/serve": "^1.6.0",
     "autoprefixer": "^9.6.1",
     "babel-eslint": "^10.0.1",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-jest": "^27.2.4",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.2.3",
     "babel-plugin-transform-vue-jsx": "^4.0.1",
     "chalk": "^4.1.2",
     "copy-webpack-plugin": "^5.0.5",
@@ -59,20 +60,20 @@
     "eslint-loader": "^4.0.2",
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-promise": "^4.3.1",
     "eslint-plugin-standard": "^5.0.0",
     "eslint-plugin-vue": "^7.16.0",
-    "expect-playwright": "^0.2.6",
+    "expect-playwright": "^0.8.0",
     "file-loader": "^6.2.0",
     "friendly-errors-webpack-plugin": "^1.6.1",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^4.5.2",
     "jest": "~27.0.6",
     "mini-css-extract-plugin": "^0.8.0",
-    "node-notifier": "^10.0.0",
+    "node-notifier": "^8.0.1",
     "optimize-css-assets-webpack-plugin": "^6.0.1",
     "ora": "^4.0.3",
-    "playwright-core": "^1.17.1",
+    "playwright-core": "^1.5.2",
     "portfinder": "^1.0.13",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
@@ -87,13 +88,13 @@
     "vue-template-compiler": "^2.6.14",
     "webpack": "^4.46.0",
     "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "^3.3.6",
+    "webpack-cli": "^4.3.0",
     "webpack-dev-server": "^4.6.0",
     "webpack-merge": "^4.2.1"
   },
   "engines": {
-    "node": ">= 6.0.0",
-    "npm": ">= 3.0.0"
+    "node": ">= 16.0.0",
+    "npm": ">= 8.0.0"
   },
   "browserslist": [
     "> 1%",

ui/src/components/Flags.vue

@@ -29,44 +29,51 @@
         </div>
       </div>
       <b-table
-        :data="filteredFlags"
+        :data="isEmpty ? [] : filteredFlags"
         :paginated="flags.length > 20"
         per-page="20"
         icon-pack="fas"
-        hoverable="true"
+        :hoverable="true"
       >
-        <template slot-scope="props">
-          <b-table-column field="enabled" label="Enabled">
-            <span v-if="props.row.enabled" class="tag is-primary is-rounded"
-              >On</span
-            >
-            <span v-else class="tag is-light is-rounded">Off</span>
-          </b-table-column>
-          <b-table-column field="key" label="Key" sortable>
-            <RouterLink :to="{ name: 'flag', params: { key: props.row.key } }">
-              {{ props.row.key }}
-            </RouterLink>
-          </b-table-column>
-          <b-table-column field="name" label="Name" sortable>
-            <RouterLink :to="{ name: 'flag', params: { key: props.row.key } }">
-              {{ props.row.name }}
-            </RouterLink>
-          </b-table-column>
-          <b-table-column field="hasVariants" label="Variants">
-            {{ props.row.variants.length > 0 ? "yes" : "no" }}
-          </b-table-column>
-          <b-table-column field="description" label="Description">
-            <small>{{ props.row.description | limit }}</small>
-          </b-table-column>
-          <b-table-column field="createdAt" label="Created" sortable>
-            <small>{{ props.row.createdAt | moment("from", "now") }}</small>
-          </b-table-column>
-          <b-table-column field="updatedAt" label="Updated" sortable>
-            <small>{{ props.row.updatedAt | moment("from", "now") }}</small>
-          </b-table-column>
-        </template>
-
-        <template slot="empty">
+        <b-table-column v-slot="props" field="enabled" label="Enabled">
+          <span v-if="props.row.enabled" class="tag is-primary is-rounded"
+            >On</span
+          >
+          <span v-else class="tag is-light is-rounded">Off</span>
+        </b-table-column>
+        <b-table-column v-slot="props" field="key" label="Key" sortable>
+          <RouterLink :to="{ name: 'flag', params: { key: props.row.key } }">
+            {{ props.row.key }}
+          </RouterLink>
+        </b-table-column>
+        <b-table-column v-slot="props" field="name" label="Name" sortable>
+          <RouterLink :to="{ name: 'flag', params: { key: props.row.key } }">
+            {{ props.row.name }}
+          </RouterLink>
+        </b-table-column>
+        <b-table-column v-slot="props" field="hasVariants" label="Variants">
+          {{ props.row.variants.length > 0 ? "yes" : "no" }}
+        </b-table-column>
+        <b-table-column v-slot="props" field="description" label="Description">
+          <small>{{ props.row.description | limit }}</small>
+        </b-table-column>
+        <b-table-column
+          v-slot="props"
+          field="createdAt"
+          label="Created"
+          sortable
+        >
+          <small>{{ props.row.createdAt | moment("from", "now") }}</small>
+        </b-table-column>
+        <b-table-column
+          v-slot="props"
+          field="updatedAt"
+          label="Updated"
+          sortable
+        >
+          <small>{{ props.row.updatedAt | moment("from", "now") }}</small>
+        </b-table-column>
+        <template #empty>
           <section class="section">
             <div class="content has-text-grey has-text-centered">
               <p>
@@ -90,6 +97,7 @@ export default {
   mixins: [notify],
   data() {
     return {
+      isEmpty: true,
       search: "",
       flags: [],
     };
@@ -110,6 +118,7 @@ export default {
     getFlags() {
       Api.get("/flags")
         .then((response) => {
+          this.isEmpty = false;
           this.flags = response.data.flags ? response.data.flags : [];
         })
         .catch((error) => {

ui/src/components/Flags/Flag.vue

@@ -53,9 +53,9 @@
                     </button>
                   </div>
                   <div class="control">
-                    <RouterLink class="button is-text" :to="{ name: 'flags' }"
-                      >Cancel</RouterLink
-                    >
+                    <RouterLink class="button is-text" :to="{ name: 'flags' }">
+                      Cancel
+                    </RouterLink>
                   </div>
                 </div>
               </div>
@@ -85,33 +85,36 @@
           Return different values based on rules you define
         </p>
         <b-table :data="flag.variants">
-          <template slot-scope="props">
-            <b-table-column field="key" label="Key" sortable>
-              {{ props.row.key }}
-            </b-table-column>
-            <b-table-column field="name" label="Name" sortable>
-              {{ props.row.name }}
-            </b-table-column>
-            <b-table-column field="description" label="Description" sortable>
-              {{ props.row.description }}
-            </b-table-column>
-            <b-table-column field="" label="" width="110" centered>
-              <a
-                class="button is-white"
-                @click.prevent="editVariant(props.index)"
-              >
-                <span class="icon is-small">
-                  <i class="fas fa-pencil-alt" />
-                </span>
-              </a>
-              <a
-                class="button is-white"
-                @click.prevent="deleteVariant(props.index)"
-              >
-                <span class="icon is-small"> <i class="fas fa-times" /> </span>
-              </a>
-            </b-table-column>
-          </template>
+          <b-table-column v-slot="props" field="key" label="Key" sortable>
+            {{ props.row.key }}
+          </b-table-column>
+          <b-table-column v-slot="props" field="name" label="Name" sortable>
+            {{ props.row.name }}
+          </b-table-column>
+          <b-table-column
+            v-slot="props"
+            field="description"
+            label="Description"
+            sortable
+          >
+            {{ props.row.description }}
+          </b-table-column>
+          <b-table-column v-slot="props" field="" label="" width="110" centered>
+            <a
+              class="button is-white"
+              @click.prevent="editVariant(props.index)"
+            >
+              <span class="icon is-small">
+                <i class="fas fa-pencil-alt" />
+              </span>
+            </a>
+            <a
+              class="button is-white"
+              @click.prevent="deleteVariant(props.index)"
+            >
+              <span class="icon is-small"> <i class="fas fa-times" /> </span>
+            </a>
+          </b-table-column>
         </b-table>
         <br />
         <div class="field">

ui/src/components/Flags/Rule.vue

@@ -54,7 +54,7 @@
               <div class="field-body">
                 <div class="field">
                   <b-input
-                    v-model="distributions[i].rollout"
+                    v-model="distribution.rollout"
                     placeholder="Percentage"
                     disabled
                     type="number"