Node.js 18, pnpm 8, jest 29, linting/formatting updates, and webpack fixes

.docker/README.md

@@ -4,7 +4,7 @@ This directory is a space for mounting directories to docker containers, allowin
 ### postgres
 The `postgres` directory is mounted to `/docker-entrypoint-initdb.d`. Any `.sh` or `.sql` files will be executed when the container is first started with a new data volume. You may read more regarding this functionality on the [Docker Hub page](https://hub.docker.com/_/postgres), under _Initialization scripts_.
 
-When running docker services through the Makefile commands, it specifies a docker-compose project name that depends on the name of the current git branch. This causes the volumes to change when the branch changes, which is helpful when switching between many branches that might have incompatible database schema changes. The downside is that whenever you start a new branch, you'll have to re-initialize the database again, like with `yarn run devsetup`. Creating a SQL dump from an existing, initialized database and placing it in this directory will allow you to skip this step.
+When running docker services through the Makefile commands, it specifies a docker-compose project name that depends on the name of the current git branch. This causes the volumes to change when the branch changes, which is helpful when switching between many branches that might have incompatible database schema changes. The downside is that whenever you start a new branch, you'll have to re-initialize the database again, like with `pnpm run devsetup`. Creating a SQL dump from an existing, initialized database and placing it in this directory will allow you to skip this step.
 
 To create a SQL dump of your preferred database data useful for local testing, run `make .docker/postgres/init.sql` while the docker postgres container is running.
 

.github/dependabot.yml

@@ -12,7 +12,7 @@ updates:
       time: "00:00"
 
   # Maintain dependencies for Javascript
-  - package-ecosystem: "npm"
+  - package-ecosystem: "pnpm"
     directory: "/"
     schedule:
       interval: "weekly"

.github/workflows/deploytest.yml

@@ -20,38 +20,36 @@ jobs:
         uses: fkirc/skip-duplicate-actions@master
         with:
           github_token: ${{ github.token }}
-          paths: '["**.py", "requirements.txt", ".github/workflows/deploytest.yml", "**.vue", "**.js", "yarn.lock", "package.json"]'
+          paths: '["**.py", "requirements.txt", ".github/workflows/deploytest.yml", "**.vue", "**.js", "pnpm-lock.yaml", "package.json"]'
   build_assets:
     name: Build frontend assets
     needs: pre_job
     if: ${{ needs.pre_job.outputs.should_skip != 'true' }}
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v4
+    - name: Use pnpm
+      uses: pnpm/action-setup@v2
     - name: Use Node.js
       uses: actions/setup-node@v4
       with:
-        node-version: '16.x'
-    - name: Cache Node.js modules
-      uses: actions/cache@v4
-      with:
-        path: '**/node_modules'
-        key: ${{ runner.OS }}-node-${{ hashFiles('**/yarn.lock') }}
-        restore-keys: |
-          ${{ runner.OS }}-node-
+        node-version: '18.x'
+        cache: 'pnpm'
     - name: Install dependencies
       run: |
-        yarn --frozen-lockfile
+        pnpm install --frozen-lockfile
         npm rebuild node-sass
     - name: Build frontend
-      run: yarn run build
+      run: pnpm run build
   make_messages:
     name: Build all message files
     needs: pre_job
     if: ${{ needs.pre_job.outputs.should_skip != 'true' }}
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v4
+    - name: Use pnpm
+      uses: pnpm/action-setup@v2
     - name: Set up Python 3.10
       uses: actions/setup-python@v5
       with:
@@ -71,17 +69,11 @@ jobs:
     - name: Use Node.js
       uses: actions/setup-node@v4
       with:
-        node-version: '16.x'
-    - name: Cache Node.js modules
-      uses: actions/cache@v4
-      with:
-        path: '**/node_modules'
-        key: ${{ runner.OS }}-node-${{ hashFiles('**/yarn.lock') }}
-        restore-keys: |
-          ${{ runner.OS }}-node-
+        node-version: '18.x'
+        cache: 'pnpm'
     - name: Install node dependencies
       run: |
-        yarn --frozen-lockfile
+        pnpm install --frozen-lockfile
         npm rebuild node-sass
     - name: Install gettext
       run: |

.github/workflows/frontendlint.yml

@@ -20,31 +20,27 @@ jobs:
         uses: fkirc/skip-duplicate-actions@master
         with:
           github_token: ${{ github.token }}
-          paths: '["**.vue", "**.js", "yarn.lock", ".github/workflows/frontendlint.yml"]'
+          paths: '["**.vue", "**.js", "pnpm-lock.yaml", ".github/workflows/frontendlint.yml"]'
   test:
     name: Frontend linting
     needs: pre_job
     if: ${{ needs.pre_job.outputs.should_skip != 'true' }}
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v4
+    - name: Use pnpm
+      uses: pnpm/action-setup@v2
     - name: Use Node.js
       uses: actions/setup-node@v4
       with:
-        node-version: '16.x'
-    - name: Cache Node.js modules
-      uses: actions/cache@v4
-      with:
-        path: '**/node_modules'
-        key: ${{ runner.OS }}-node-${{ hashFiles('**/yarn.lock') }}
-        restore-keys: |
-          ${{ runner.OS }}-node-
+        node-version: '18.x'
+        cache: 'pnpm'
     - name: Install dependencies
       run: |
-        yarn --frozen-lockfile
+        pnpm install --frozen-lockfile
         npm rebuild node-sass
     - name: Run tests
-      run: yarn run lint-frontend:format
+      run: pnpm run lint-frontend:format
     - name: Run pre-commit-ci-lite
       uses: pre-commit-ci/[email protected]
       if: always()

.github/workflows/frontendtest.yml

@@ -20,28 +20,24 @@ jobs:
         uses: fkirc/skip-duplicate-actions@master
         with:
           github_token: ${{ github.token }}
-          paths: '["**.vue", "**.js", "yarn.lock"]'
+          paths: '["**.vue", "**.js", "pnpm-lock.yaml"]'
   test:
     name: Frontend tests
     needs: pre_job
     if: ${{ needs.pre_job.outputs.should_skip != 'true' }}
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v4
+    - name: Use pnpm
+      uses: pnpm/action-setup@v2
     - name: Use Node.js
       uses: actions/setup-node@v4
       with:
-        node-version: '16.x'
-    - name: Cache Node.js modules
-      uses: actions/cache@v4
-      with:
-        path: '**/node_modules'
-        key: ${{ runner.OS }}-node-${{ hashFiles('**/yarn.lock') }}
-        restore-keys: |
-          ${{ runner.OS }}-node-
+        node-version: '18.x'
+        cache: 'pnpm'
     - name: Install dependencies
       run: |
-        yarn --frozen-lockfile
+        pnpm install --frozen-lockfile
         npm rebuild node-sass
     - name: Run tests
-      run: yarn run test
+      run: pnpm run test

.pre-commit-config.yaml

@@ -20,6 +20,6 @@ repos:
       -   id: frontend-lint
           name: Linting of JS, Vue, SCSS and CSS files
           description: This hook handles all frontend linting for Kolibri Studio
-          entry: yarn run lint-frontend:format
+          entry: pnpm run lint-frontend:format
           language: system
           files: \.(js|vue|scss|less|css)$

.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('kolibri-tools/.prettierrc');

Makefile

@@ -66,7 +66,7 @@ reconcile:
 ###############################################################
 i18n-extract-frontend:
 	# generate frontend messages
-	yarn makemessages
+	pnpm makemessages
 
 i18n-extract-backend:
 	# generate backend messages
@@ -75,7 +75,7 @@ i18n-extract-backend:
 i18n-extract: i18n-extract-frontend i18n-extract-backend
 
 i18n-transfer-context:
-	yarn transfercontext
+	pnpm transfercontext
 
 i18n-django-compilemessages:
 	# Change working directory to contentcuration/ such that compilemessages
@@ -94,9 +94,9 @@ i18n-pretranslate-approve-all:
 i18n-download-translations:
 	python node_modules/kolibri-tools/lib/i18n/crowdin.py rebuild-translations ${branch}
 	python node_modules/kolibri-tools/lib/i18n/crowdin.py download-translations ${branch}
-	yarn exec kolibri-tools i18n-code-gen -- --output-dir ./contentcuration/contentcuration/frontend/shared/i18n
+	pnpm exec kolibri-tools i18n-code-gen -- --output-dir ./contentcuration/contentcuration/frontend/shared/i18n
 	$(MAKE) i18n-django-compilemessages
-	yarn exec kolibri-tools i18n-create-message-files -- --namespace contentcuration --searchPath ./contentcuration/contentcuration/frontend
+	pnpm exec kolibri-tools i18n-create-message-files -- --namespace contentcuration --searchPath ./contentcuration/contentcuration/frontend
 
 i18n-download: i18n-download-translations
 

contentcuration/contentcuration/frontend/accounts/index.js

@@ -1,5 +1,5 @@
+import startApp from 'shared/app';
 import store from './store';
 import router from './router';
-import startApp from 'shared/app';
 
 startApp({ store, router });

contentcuration/contentcuration/frontend/accounts/pages/Create.vue

@@ -197,7 +197,6 @@
 <script>
 
   import { mapActions, mapGetters, mapState } from 'vuex';
-  import { uses, sources } from '../constants';
   import TextField from 'shared/views/form/TextField';
   import EmailField from 'shared/views/form/EmailField';
   import PasswordField from 'shared/views/form/PasswordField';
@@ -210,6 +209,7 @@
   import { policies } from 'shared/constants';
   import DropdownWrapper from 'shared/views/form/DropdownWrapper';
   import commonStrings from 'shared/translator';
+  import { uses, sources } from '../constants';
 
   export default {
     name: 'Create',

contentcuration/contentcuration/frontend/accounts/pages/__tests__/create.spec.js

@@ -53,8 +53,8 @@ function makeWrapper(formData) {
     },
   });
   wrapper.setMethods({
-    register: data => {
-      return new Promise(resolve => {
+    register: (data) => {
+      return new Promise((resolve) => {
         register(data);
         resolve();
       });
@@ -97,7 +97,11 @@ describe('create', () => {
   });
   it('should automatically fill the email if provided in the query param', () => {
     router.push({ name: 'Create', query: { email: '[email protected]' } });
-    const wrapper = mount(Create, { router, stubs: ['PolicyModals'], mocks: connectionStateMocks });
+    const wrapper = mount(Create, {
+      router,
+      stubs: ['PolicyModals'],
+      mocks: connectionStateMocks,
+    });
     expect(wrapper.vm.form.email).toBe('[email protected]');
   });
   describe('validation', () => {
@@ -120,7 +124,7 @@ describe('create', () => {
         accepted_tos: false,
       };
 
-      Object.keys(form).forEach(field => {
+      Object.keys(form).forEach((field) => {
         const wrapper = makeWrapper({ [field]: form[field] });
         wrapper.vm.submit();
         expect(register).not.toHaveBeenCalled();
@@ -137,14 +141,14 @@ describe('create', () => {
       expect(register).not.toHaveBeenCalled();
     });
     it('should fail if uses field is set to fields that require more input that is not provided', () => {
-      [uses.STORING, uses.OTHER].forEach(use => {
+      [uses.STORING, uses.OTHER].forEach((use) => {
         const wrapper = makeWrapper({ uses: [use] });
         wrapper.vm.submit();
         expect(register).not.toHaveBeenCalled();
       });
     });
     it('should fail if source field is set to an option that requires more input that is not provided', () => {
-      [sources.ORGANIZATION, sources.CONFERENCE, sources.OTHER].forEach(source => {
+      [sources.ORGANIZATION, sources.CONFERENCE, sources.OTHER].forEach((source) => {
         const wrapper = makeWrapper({ source });
         wrapper.vm.submit();
         expect(register).not.toHaveBeenCalled();

contentcuration/contentcuration/frontend/accounts/pages/__tests__/forgotPassword.spec.js

@@ -18,7 +18,7 @@ describe('forgotPassword', () => {
     wrapper = makeWrapper();
     wrapper.setMethods({
       sendPasswordResetLink: () => {
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
           sendPasswordResetLink();
           resolve();
         });

contentcuration/contentcuration/frontend/accounts/pages/__tests__/main.spec.js

@@ -19,8 +19,8 @@ function makeWrapper() {
     },
   });
   wrapper.setMethods({
-    login: data => {
-      return new Promise(resolve => {
+    login: (data) => {
+      return new Promise((resolve) => {
         login(data);
         resolve();
       });

contentcuration/contentcuration/frontend/accounts/pages/__tests__/requestNewActivationLink.spec.js

@@ -18,7 +18,7 @@ describe('requestNewActivationLink', () => {
     wrapper = makeWrapper();
     wrapper.setMethods({
       sendActivationLink: () => {
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
           sendActivationLink();
           resolve();
         });

contentcuration/contentcuration/frontend/accounts/pages/__tests__/resetPassword.spec.js

@@ -13,8 +13,8 @@ describe('resetPassword', () => {
   beforeEach(() => {
     wrapper = makeWrapper();
     wrapper.setMethods({
-      setPassword: data => {
-        return new Promise(resolve => {
+      setPassword: (data) => {
+        return new Promise((resolve) => {
           setPassword(data);
           resolve();
         });

contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue

@@ -26,9 +26,9 @@
 <script>
 
   import { mapActions } from 'vuex';
-  import MessageLayout from '../../components/MessageLayout';
   import EmailField from 'shared/views/form/EmailField';
   import Banner from 'shared/views/Banner';
+  import MessageLayout from '../../components/MessageLayout';
 
   export default {
     name: 'RequestNewActivationLink',

contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue

@@ -22,9 +22,9 @@
 <script>
 
   import { mapActions } from 'vuex';
-  import MessageLayout from '../../components/MessageLayout';
   import EmailField from 'shared/views/form/EmailField';
   import Banner from 'shared/views/Banner';
+  import MessageLayout from '../../components/MessageLayout';
 
   export default {
     name: 'ForgotPassword',

contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue

@@ -31,9 +31,9 @@
 <script>
 
   import { mapActions } from 'vuex';
-  import MessageLayout from '../../components/MessageLayout';
   import PasswordField from 'shared/views/form/PasswordField';
   import Banner from 'shared/views/Banner';
+  import MessageLayout from '../../components/MessageLayout';
 
   export default {
     name: 'ResetPassword',

contentcuration/contentcuration/frontend/accounts/store.js

@@ -1,5 +1,5 @@
-import account from './vuex';
 import storeFactory from 'shared/vuex/baseStore';
+import account from './vuex';
 
 export function factory() {
   return storeFactory({

contentcuration/contentcuration/frontend/accounts/vuex/__tests__/module.spec.js

@@ -1,6 +1,6 @@
-import account from '../index';
 import storeFactory from 'shared/vuex/baseStore';
 import client from 'shared/client';
+import account from '../index';
 
 jest.mock('shared/client');
 jest.mock('shared/vuex/connectionPlugin');

contentcuration/contentcuration/frontend/administration/index.js

@@ -1,7 +1,7 @@
+import startApp from 'shared/app';
 import AdministrationIndex from './pages/AdministrationIndex.vue';
 import store from './store';
 import router from './router';
-import startApp from 'shared/app';
 
 startApp({
   store,