Node bump & resource list refresh (#6014)

* Increase watchers system limit

* Update workloads resource lists

* Fix cypress configuration

* Avoid importing JSON directly

* run fix and update configuration

* Add browserslist config

* Bump package.json deps

* Update angular and use ngx-pipes

* Migrate i18n file ids to new format

* run ng-extract

* Update i18n scripts

* Update scss import keyword to use

* Regenerate lockfile

* Update angular.json config and login view

* Fix prod build

* Bump angular to v12.0.1

.github/workflows/ci-workflow.yml

@@ -156,6 +156,9 @@ jobs:
         with:
           fetch-depth: 0
 
+      # Increase watchers system limit
+      - run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
+
       - name: Setup Go
         uses: actions/setup-go@v2
         with:

.prettierrc.cjs

@@ -0,0 +1,9 @@
+module.exports = {
+  ...require('gts/.prettierrc.json'),
+  // Print semicolons at the ends of statements.
+  semi: true,
+  // Include parentheses around a sole arrow function parameter (x => x).
+  arrowParens: 'avoid',
+  // Specify the line length that the printer will wrap on.
+  printWidth: 120,
+}

aio/gulp/backend.js

@@ -19,8 +19,8 @@ import gulp from 'gulp';
 import lodash from 'lodash';
 import path from 'path';
 
-import conf from './conf';
-import goCommand from './gocommand';
+import conf from './conf.js';
+import goCommand from './gocommand.js';
 
 /**
  * Compiles backend application in development mode and places the binary in the serve

aio/gulp/conf.js

@@ -17,11 +17,15 @@
  */
 import minimist from 'minimist';
 import path from 'path';
+import {fileURLToPath} from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 /**
  * Base path for all other paths.
  */
-const basePath = path.join(__dirname, '../../');
+const basePath = path.resolve(__dirname + '/../../');
 
 /**
  * Compilation architecture configuration.

aio/gulp/deploy.js

@@ -21,8 +21,8 @@ import gulp from 'gulp';
 import lodash from 'lodash';
 import path from 'path';
 
-import {multiDest} from './common';
-import conf from './conf';
+import {multiDest} from './common.js';
+import conf from './conf.js';
 
 /**
  * Processes the Docker file and places it in the dist folder for all architectures.

aio/gulp/gocommand.js

@@ -20,7 +20,7 @@ import lodash from 'lodash';
 import q from 'q';
 import semver from 'semver';
 
-import conf from './conf';
+import conf from './conf.js';
 
 // Add the project's required go tools to the PATH.
 const devPath = `${process.env.PATH}:${conf.paths.goTools}/bin`;

aio/gulp/serve.js

@@ -18,7 +18,7 @@
 import child from 'child_process';
 import gulp from 'gulp';
 import path from 'path';
-import conf from './conf';
+import conf from './conf.js';
 
 /**
  * Currently running backend process object. Null if the backend is not running.

aio/jest.config.ts

@@ -0,0 +1,38 @@
+// Copyright 2017 The Kubernetes Authors.
+//
+// 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.
+
+import type {Config} from '@jest/types';
+
+export default async (): Promise<Config.InitialOptions> => {
+  return {
+    rootDir: '../src/app/frontend',
+    testEnvironment: 'jsdom',
+    setupFilesAfterEnv: ["<rootDir>/test.base.ts"],
+    globals: {
+      "ts-jest": {
+        tsconfig: "aio/tsconfig.spec.json",
+        stringifyContentPathRegex: '\\.(html|scss|css)$',
+      }
+    },
+    moduleNameMapper: {
+      "^@api/(.*)$": "<rootDir>/api/$1",
+      "^@common/(.*)$": "<rootDir>/common/$1",
+      "^@environments/(.*)$": "<rootDir>/environments/$1",
+      "^@root/(.*)$": "<rootDir>/$1"
+    },
+    transform: {
+      '^.+\\.(ts|js|html|scss|css)$': 'jest-preset-angular',
+    },
+  };
+};

aio/scripts/build.sh

@@ -32,8 +32,7 @@ function build::frontend {
   say "\nBuilding localized frontend"
   mkdir -p ${FRONTEND_DIR}
   ${NG_BIN} build \
-            --aot \
-            --prod \
+            --configuration production \
             --localize \
             --outputPath=${FRONTEND_DIR}
 

aio/scripts/pre-commit-i18n.sh

@@ -13,21 +13,23 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
+# Import config.
+ROOT_DIR="$(cd $(dirname "${BASH_SOURCE}")/../.. && pwd -P)"
+. "${ROOT_DIR}/aio/scripts/conf.sh"
+
 # Extract i18n messages for update check.
-# TODO(shu-mutou): outFile path should be fixed.
-#                  `ng xi18n` seems ./aio directory as project root.
-ng xi18n --outFile ../i18n/messages.new.xlf
+ng extract-i18n --output-path "${I18N_DIR}" --out-file "messages.new.xlf"
 
 # Generate MD5 existing and new messages file
-MD5_OLD=$(md5sum i18n/messages.xlf | cut -c -32)
-MD5_NEW=$(md5sum i18n/messages.new.xlf | cut -c -32)
+MD5_OLD=$(md5sum "${I18N_DIR}/messages.xlf" | cut -c -32)
+MD5_NEW=$(md5sum "${I18N_DIR}/messages.new.xlf" | cut -c -32)
 
 if [ $MD5_OLD != $MD5_NEW ] ; then
-  mv i18n/messages.new.xlf i18n/messages.xlf
-  aio/scripts/xliffmerge.sh
-  echo "i18n/messages.* files are updated. Commit them too."
+  mv "${I18N_DIR}/messages.new.xlf" "${I18N_DIR}/messages.xlf"
+  "${AIO_DIR}/scripts/xliffmerge.sh"
+  say "Translation files were updated. Commit them too."
   git add i18n
 fi
 
 # Remove extracted file for check
-rm -fr i18n/messages.new.xlf
+rm -rf "${I18N_DIR}/messages.new.xlf"

aio/scripts/version.js

@@ -1,15 +1,16 @@
-const {gitDescribeSync} = require('git-describe');
-const {version} = require('../../package.json');
-const {resolve, relative} = require('path');
-const {writeFileSync} = require('fs-extra');
+import gitDescribe from 'git-describe';
+import {resolve, relative} from 'path';
+import {writeFileSync, readFileSync} from 'node:fs';
 
-const gitInfo = gitDescribeSync({
+const config = JSON.parse(readFileSync('package.json', 'utf8'));
+
+const gitInfo = gitDescribe.gitDescribeSync({
   dirtyMark: false,
   dirtySemver: false,
   longSemver: true,
 });
 
-gitInfo.packageVersion = version;
+gitInfo.packageVersion = config.version;
 Object.assign(gitInfo.semver, {
   loose: false,
   options: {
@@ -19,7 +20,7 @@ Object.assign(gitInfo.semver, {
 });
 
 const file =
-    resolve(__dirname, '..', '..', 'src/', 'app', 'frontend', 'environments', 'version.ts');
+    resolve('src/', 'app', 'frontend', 'environments', 'version.ts');
 writeFileSync(
     file, `// Copyright 2017 The Kubernetes Authors.
 //
@@ -44,4 +45,4 @@ export const version: VersionInfo = ${JSON.stringify(gitInfo, null, 2).replace(/
 `,
     {encoding: 'utf-8'});
 
-console.log(`Version ${gitInfo.raw} saved to ${relative(resolve(__dirname, '..'), file)}`);
+console.log(`Version ${gitInfo.raw} saved to ${relative(resolve( '..'), file)}`);

aio/scripts/xliffmerge.sh

@@ -13,12 +13,16 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
+# Import config.
+ROOT_DIR="$(cd $(dirname "${BASH_SOURCE}")/../.. && pwd -P)"
+. "${ROOT_DIR}/aio/scripts/conf.sh"
+
 # Collect current localized files
-languages=($(find i18n/* -type d|cut -d"/" -f2))
+languages=($(find "${I18N_DIR}"/* -type d -exec basename {} \;))
 for language in "${languages[@]}"; do
-  if [ ! -L i18n/${language}/messages.${language}.xlf ]; then
-    echo "Move translation file messages.${language}.xlf to be merged by xliffmerge."
-    mv i18n/${language}/messages.${language}.xlf i18n
+  if [ ! -L "${I18N_DIR}/${language}/messages.${language}.xlf" ]; then
+    say "Move translation file messages.${language}.xlf to be merged by xliffmerge."
+    mv "${I18N_DIR}/${language}/messages.${language}.xlf" "${I18N_DIR}"
   fi
 done
 
@@ -27,8 +31,8 @@ xliffmerge
 
 # Deliver merged localized files into each locale directories.
 for language in "${languages[@]}"; do
-  if [ -e i18n/messages.${language}.xlf ]; then
-    echo "Move merged file i18n/messages.${language}.xlf to i18n/${language}"
-    mv i18n/messages.${language}.xlf i18n/${language}
+  if [ -e "${I18N_DIR}/messages.${language}.xlf" ]; then
+    say "Move merged file i18n/messages.${language}.xlf to i18n/${language}"
+    mv "${I18N_DIR}/messages.${language}.xlf" "${I18N_DIR}/${language}"
   fi
 done

aio/tsconfig.app.json

@@ -3,7 +3,6 @@
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "baseUrl": "../src/app/frontend",
-    "target": "es5",
     "types": ["node"]
   },
   "include": [

aio/tsconfig.e2e.json

@@ -2,6 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "strict": true,
+    "outDir": "../out-tsc/e2e",
     "baseUrl": "../node_modules",
     "types": ["cypress"]
   },

aio/tsconfig.spec.json

@@ -3,10 +3,9 @@
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
     "baseUrl": "../src/app/frontend",
-    "types": ["jest", "node"]
+    "types": ["jest", "node"],
   },
   "include": [
     "src/app/frontend/**/*.spec.ts",
-    "src/app/frontend/**/*.d.ts"
   ]
 }

angular.json

@@ -47,14 +47,19 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "aot": true,
-            "progress": false,
+            "optimization": false,
+            "progress": true,
             "outputPath": ".tmp/frontend",
             "index": "src/app/frontend/index.html",
             "main": "src/app/frontend/index.ts",
-            "tsConfig": "src/app/frontend/../../../aio/tsconfig.app.json",
+            "tsConfig": "aio/tsconfig.app.json",
             "polyfills": "src/app/frontend/polyfills.ts",
             "i18nMissingTranslation": "error",
+            "allowedCommonJsDependencies": [
+              "lodash",
+              "file-saver",
+              "truncate-url"
+            ],
             "assets": [
               {
                 "glob": "**/*",
@@ -100,6 +105,7 @@
                   "maximumWarning": "6kb"
                 }
               ],
+              "aot": true,
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -120,7 +126,6 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "aot": true,
             "browserTarget": "kubernetes-dashboard:build",
             "port": 8080
           },

cypress/integration/specs/userpanel.spec.ts

@@ -6,7 +6,7 @@ describe('Userpanel', () => {
   });
 
   it('check default namespace', () => {
-    UserpanelPage.assertUrlContains('overview?namespace=default');
+    UserpanelPage.assertUrlContains('overview');
   });
 
   it('collapses sidebar', () => {

cypress/plugins/cy-ts-preprocessor.js → cypress/plugins/index.cjs

@@ -1,4 +1,4 @@
-const wp = require('@cypress/webpack-preprocessor');
+import webpack from '@cypress/webpack-preprocessor';
 
 const webpackOptions = {
   resolve: {extensions: ['.ts', '.js']},
@@ -18,5 +18,6 @@ const webpackOptions = {
   },
 };
 
-const options = {webpackOptions};
-module.exports = wp(options);
+export default async (on) => {
+  on('file:preprocessor', webpack({webpackOptions}));
+}

gulpfile.babel.js

@@ -1,6 +1,6 @@
 // Root configuration of the gulp.js build system, loads child modules which define specific tasks.
 // Read more at: https://gulpjs.com/
 
-import './aio/gulp/backend';
-import './aio/gulp/serve';
-import './aio/gulp/deploy';
+import './aio/gulp/backend.js';
+import './aio/gulp/serve.js';
+import './aio/gulp/deploy.js';