Build idp and settings frontends with pnpm

.drone.star

@@ -1089,7 +1089,8 @@ def settingsUITests(ctx, storage = "ocis", accounts_hash_difficulty = 4):
                              # TODO: settings/package.json has all the acceptance test dependencies
                              # they shouldn't be needed since we could also use them from web:/tests/acceptance/package.json
                              "cd %s/services/settings" % dirs["base"],
-                             "retry -t 3 'yarn install --immutable'",
+                             "pnpm config set store-dir ./.pnpm-store",
+                             "retry -t 3 'pnpm install'",
                              "make test-acceptance-webui",
                          ],
                          "volumes": [{

Dockerfile

@@ -1,6 +1,6 @@
 # Please use this Dockerfile only if
 # you want to build an image from source without
-# Yarn and Go installed on your dev machine.
+# pnpm and Go installed on your dev machine.
 
 # You can build oCIS using this Dockerfile
 # by running following command:
@@ -10,7 +10,7 @@
 # following command instead:
 # `make -C ocis dev-docker`
 # It will build a `owncloud/ocis:dev` image for you
-# and use your local Yarn and Go caches and therefore
+# and use your local pnpm and Go caches and therefore
 # is a lot faster than the build steps below.
 
 

changelog/unreleased/change-build-service-frontends-with-pnpm

@@ -0,0 +1,9 @@
+Change: Build service frontends with pnpm instead of yarn
+
+We changed the Node.js packager from Yarn to pnpm to make it more consistent with the main Web repo.
+pnpm offers better package isolation and prevents a whole class of errors.
+This is only relevant for developers.
+
+
+https://github.com/owncloud/ocis/pull/4878
+https://github.com/owncloud/web/pull/7835

docs/ocis/development/getting-started.md

@@ -17,7 +17,7 @@ So we are trying to reflect this in the tooling. It should be kept simple and qu
 Besides standard development tools like git and a text editor, you need the following software for development:
 
 - Go >= v1.18 ([install instructions](https://golang.org/doc/install))
-- Yarn ([install instructions](https://classic.yarnpkg.com/en/docs/install))
+- pnpm ([install instructions](https://pnpm.io/installation))
 - docker ([install instructions](https://docs.docker.com/get-docker/))
 - docker-compose ([install instructions](https://docs.docker.com/compose/install/))
 

docs/services/idp/theming.md

@@ -43,7 +43,7 @@ Every image placed in `idp/ui/src/images` can be directly import into components
 If you need to edit or add new locales, you can do so with json files in the `idp/ui/src/locales` folder. If adding new locale, make sure to add it also in the `index.js` file in the same folder.
 
 ## Building assets
-In order to build all assets, run `yarn build` in the `idp` folder. This script will compile all assets and output them into `idp/assets` folder.
+In order to build all assets, run `pnpm build` in the `idp` folder. This script will compile all assets and output them into `idp/assets` folder.
 
 At this point, you have two possible ways how to deploy your new theme:
 - run `make generate` in the root folder of your oCIS clone and generate the new assets

docs/services/settings/releasing.md

@@ -10,7 +10,7 @@ geekdocFilePath: releasing.md
 
 ## Requirements
 
-You need a working installation of [the Go programming language](https://golang.org/), [the Node runtime](https://nodejs.org/) and [the Yarn package manager](https://yarnpkg.com/) installed to build the assets for a working release.
+You need a working installation of [the Go programming language](https://golang.org/), [the Node runtime](https://nodejs.org/) and [the pnpm package manager](https://pnpm.io) installed to build the assets for a working release.
 
 ## Releasing
 

docs/services/settings/tests.md

@@ -10,7 +10,7 @@ geekdocFilePath: tests.md
 
 ## Requirements
 
-You need a working installation of [the Go programming language](https://golang.org/), [the Node runtime](https://nodejs.org/) and [the Yarn package manager](https://yarnpkg.com/) installed to run the acceptance tests. You may also want to use [Docker](https://www.docker.com/) to start the necessary services in their respective containers.
+You need a working installation of [the Go programming language](https://golang.org/), [the Node runtime](https://nodejs.org/) and [the pnpm package manager](https://pnpm.io/) installed to run the acceptance tests. You may also want to use [Docker](https://www.docker.com/) to start the necessary services in their respective containers.
 
 ## Acceptance Tests
 
@@ -23,7 +23,7 @@ Make sure you've cloned the [web frontend repo](https://github.com/owncloud/web/
 Install dependencies and bundle the frontend with a watcher by running
 
 ```bash
-yarn && yarn build:w
+pnpm install && pnpm build:w
 ```
 
 If you skip the step above, the currently bundled frontend from the oCIS binary will be used.
@@ -43,7 +43,7 @@ docker compose up selenium middleware-ocis vnc
 Navigate into the settings service via `cd ../settings/` and install dependencies and build the bundled settings UI with a watcher by running
 
 ```bash
-yarn && yarn watch
+pnpm install && pnpm watch
 ```
 
 #### Start oCIS from binary

services/idp/.gitignore

@@ -1,17 +1 @@
-# yarn2 with Zero-Installs: https://yarnpkg.com/features/zero-installs
-#.yarn/*
-#!.yarn/cache
-#!.yarn/patches
-#!.yarn/plugins
-#!.yarn/releases
-#!.yarn/sdks
-#!.yarn/versions
-
-# yarn2 not using Zero-Installs: https://yarnpkg.com/features/zero-installs
-.yarn/*
-!.yarn/patches
-!.yarn/releases
-!.yarn/plugins
-!.yarn/sdks
-!.yarn/versions
-.pnp.*
+.pnpm-store/

services/idp/.npmrc

@@ -0,0 +1,2 @@
+auto-install-peers=true
+public-hoist-pattern[]=*

services/idp/.yarnrc.yml

@@ -1,6 +0,0 @@
-nodeLinker: node-modules
-
-yarnPath: .yarn/releases/yarn-3.1.0.cjs
-
-enableScripts: false
-enableTelemetry: false

services/idp/Makefile

@@ -30,7 +30,7 @@ ci-go-generate: # CI runs ci-node-generate automatically before this target
 ci-node-generate: assets
 
 .PHONY: assets
-assets: yarn-build \
+assets: pnpm-build \
 		assets/identifier/static \
 		assets/identifier/static/logo.svg \
 		assets/identifier/static/favicon.ico
@@ -50,22 +50,23 @@ FAVICON_URL = https://raw.githubusercontent.com/owncloud/assets/main/favicon.ico
 assets/identifier/static/favicon.ico:
 	curl --fail -o assets/identifier/static/favicon.ico ${FAVICON_URL}
 
-.PHONY: yarn-build
-yarn-build: node_modules
-	#yarn lint #TODO: activate
-	#yarn test #TODO: activate
-	yarn build
+.PHONY: pnpm-build
+pnpm-build: node_modules
+	#pnpm lint #TODO: activate
+	#pnpm test #TODO: activate
+	pnpm build
 
 .PHONY: node_modules
 node_modules:
-	yarn install --immutable
+	pnpm config set store-dir ./.pnpm-store
+	pnpm install
 
 ############ licenses ############
 .PHONY: ci-node-check-licenses
 ci-node-check-licenses: node_modules
-	yarn licenses:check
+	pnpm licenses:check
 
 .PHONY: ci-node-save-licenses
 ci-node-save-licenses: node_modules
-	yarn licenses:csv
-	yarn licenses:save
+	pnpm licenses:csv
+	pnpm licenses:save

services/idp/i18n/Makefile

@@ -1,6 +1,6 @@
 # Tools
 
-YARN ?= yarn
+PNPM ?= pnpm
 MSGCAT ?= msgcat
 MSGMERGE ?= msgmerge
 MSGFMT ?= msgfmt
@@ -19,12 +19,12 @@ build: json
 json:
 	@for po in $(POS); do \
 		lang=$$(echo $$po | sed "s/\.po//"); \
-		$(YARN) i18next-conv -K --skipUntranslated -l $$lang -s ../i18n/$$po -t ../src/locales/$$lang/translation.json; \
+		$(PNPM) i18next-conv -K --skipUntranslated -l $$lang -s i18n/$$po -t ../src/locales/$$lang/translation.json; \
 	done
-	$(YARN) node ../i18n/build-json.js ../src/locales/locales.json $(POS)
+	$(PNPM) node i18n/build-json.js ../src/locales/locales.json $(POS)
 
 dev-translation.json: FORCE
-	$(YARN) i18next --fail-on-warnings
+	$(PNPM) i18next --fail-on-warnings
 
 .PHONY: extract
 extract: pot
@@ -34,8 +34,8 @@ pot: dev-translation.json
 	@tmpfile1=$(shell mktemp).po; \
 	tmpfile2=$(shell mktemp).po; \
 	trap 'rm -f "$$tmpfile1" "$$tmpfile2"' EXIT; \
-	$(YARN) i18next-conv --project "LibreGraph Connect Identifier" -K -l en -s i18n/dev-translation.json -t $$tmpfile1; \
-	$(YARN) node i18n/build-pot.js $$tmpfile1 $$tmpfile2; \
+	$(PNPM) i18next-conv --project "LibreGraph Connect Identifier" -K -l en -s i18n/dev-translation.json -t $$tmpfile1; \
+	$(PNPM) node i18n/build-pot.js $$tmpfile1 $$tmpfile2; \
 	$(MSGCAT) --no-wrap -o $(POT) $$tmpfile2
 
 .PHONY: merge

services/idp/scripts/build.js

@@ -30,7 +30,7 @@ const printBuildError = require('react-dev-utils/printBuildError');
 const measureFileSizesBeforeBuild =
   FileSizeReporter.measureFileSizesBeforeBuild;
 const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
-const useYarn = fs.existsSync(paths.yarnLockFile);
+const usePnpm = fs.existsSync(paths.pnpmLockFile);
 
 // These sizes are pretty large. We'll warn for bundles exceeding them.
 const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
@@ -102,7 +102,7 @@ checkBrowsers(paths.appPath, isInteractive)
         publicUrl,
         publicPath,
         buildFolder,
-        useYarn
+        usePnpm
       );
     },
     err => {

services/idp/scripts/start.js

@@ -32,7 +32,7 @@ const paths = require('../ui_config/paths');
 const configFactory = require('../ui_config/webpack.config');
 const createDevServerConfig = require('../ui_config/webpackDevServer.config');
 
-const useYarn = fs.existsSync(paths.yarnLockFile);
+const usePnpm = fs.existsSync(paths.pnpmLockFile);
 const isInteractive = process.stdout.isTTY;
 
 // Warn and crash if required files are missing
@@ -93,7 +93,7 @@ checkBrowsers(paths.appPath, isInteractive)
       config,
       devSocket,
       urls,
-      useYarn,
+      usePnpm,
       useTypeScript,
       tscCompileOnError,
       webpack,

services/idp/ui_config/paths.js

@@ -77,7 +77,7 @@ module.exports = {
   appSrc: resolveApp('src'),
   appTsConfig: resolveApp('tsconfig.json'),
   appJsConfig: resolveApp('jsconfig.json'),
-  yarnLockFile: resolveApp('yarn.lock'),
+  pnpmLockFile: resolveApp('pnpm-lock.yaml'),
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
   proxySetup: resolveApp('src/setupProxy.js'),
   appNodeModules: resolveApp('node_modules'),

services/settings/.npmrc

@@ -0,0 +1,3 @@
+auto-install-peers=true
+
+hoist-pattern[]=*babel*

services/settings/Makefile

@@ -37,17 +37,18 @@ include ../../.make/generate.mk
 ci-go-generate: protobuf # CI runs ci-node-generate automatically before this target
 
 .PHONY: ci-node-generate
-ci-node-generate: yarn-build
+ci-node-generate: pnpm-build
 
-.PHONY: yarn-build
-yarn-build: node_modules
-	yarn lint
-	yarn test
-	yarn build
+.PHONY: pnpm-build
+pnpm-build: node_modules
+	pnpm lint
+	pnpm test
+	pnpm build
 
 .PHONY: node_modules
 node_modules:
-	yarn install --immutable
+	pnpm config set store-dir ./.pnpm-store
+	pnpm install
 
 ############ protobuf ############
 include ../../.make/protobuf.mk
@@ -58,9 +59,9 @@ protobuf: buf-generate
 ############ licenses ############
 .PHONY: ci-node-check-licenses
 ci-node-check-licenses: node_modules
-	yarn licenses:check
+	pnpm licenses:check
 
 .PHONY: ci-node-save-licenses
 ci-node-save-licenses: node_modules
-	yarn licenses:csv
-	yarn licenses:save
+	pnpm licenses:csv
+	pnpm licenses:save

services/settings/package.json

@@ -15,7 +15,7 @@
     "acceptance-tests": "cucumber-js --retry 1 --require-module @babel/register --require-module @babel/polyfill --require ${TEST_INFRA_DIRECTORY}/setup.js --require ui/tests/acceptance/stepDefinitions --require ${TEST_INFRA_DIRECTORY}/stepDefinitions --format @cucumber/pretty-formatter -t \"${TEST_TAGS:-not @skip and not @skipOnOC10}\"",
     "build": "rollup -c",
     "generate-api": "node node_modules/swagger-vue-generator/bin/generate-api.js --package-version v0 --source pkg/proto/v0/settings.swagger.json --moduleName settings --destination ui/client/settings/index.js",
-    "licenses:check": "license-checker-rseidelsohn --summary --relativeLicensePath --onlyAllow 'Python-2.0;Apache*;Apache License, Version 2.0;Apache-2.0;Apache 2.0;Artistic-2.0;BSD;BSD-3-Clause;CC-BY-3.0;CC-BY-4.0;CC0-1.0;ISC;MIT;MPL-2.0;Public Domain;Unicode-TOU;Unlicense;WTFPL' --excludePackages 'ocis-settings@0.0.0'",
+    "licenses:check": "license-checker-rseidelsohn --summary --relativeLicensePath --onlyAllow 'Python-2.0;Apache*;Apache License, Version 2.0;Apache-2.0;Apache 2.0;Artistic-2.0;BSD;BSD-3-Clause;CC-BY-3.0;CC-BY-4.0;CC0-1.0;ISC;MIT;MPL-2.0;Public Domain;Unicode-TOU;Unlicense;WTFPL' --excludePackages 'ocis-settings@0.0.0;owncloud-design-system@13.1.0'",
     "licenses:csv": "license-checker-rseidelsohn --relativeLicensePath --csv --out ../third-party-licenses/node/settings/third-party-licenses.csv",
     "licenses:save": "license-checker-rseidelsohn --relativeLicensePath --out /dev/null --files ../third-party-licenses/node/settings/third-party-licenses",
     "lint": "eslint 'ui/**/*.{js,ts,vue}' --color",
@@ -47,10 +47,11 @@
     "@babel/plugin-proposal-export-default-from": "^7.16.7",
     "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
     "@babel/plugin-syntax-dynamic-import": "^7.7.4",
-    "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/polyfill": "^7.10.1",
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.18.6",
     "@babel/register": "^7.17.7",
+    "@babel/runtime": "^7.19.4",
     "@cucumber/cucumber": "^7.3.2",
     "@cucumber/pretty-formatter": "^1.0.0",
     "@erquhart/rollup-plugin-node-builtins": "^2.1.5",
@@ -73,6 +74,7 @@
     "join-path": "^1.1.1",
     "ldapjs": "^2.3.2",
     "license-checker-rseidelsohn": "^3.1.0",
+    "lodash": "^4.17.21",
     "nightwatch": "1.7.11",
     "nightwatch-api": "3.0.2",
     "node-fetch": "^2.6.7",

services/settings/reflex.conf

@@ -2,4 +2,4 @@
 -r '^(cmd|pkg)/.*\.go$' -R '^node_modules/' -s -- sh -c 'make bin/ocis-settings-debug && bin/ocis-settings-debug --log-level debug server --debug-pprof --debug-zpages --asset-path assets/'
 
 # frontend
--r '^ui/.*\.(vue|js)$' -R '^node_modules/' -- sh -c 'yarn build && make generate'
+-r '^ui/.*\.(vue|js)$' -R '^node_modules/' -- sh -c 'pnpm build && make generate'

services/settings/ui/app.js

@@ -1,4 +1,3 @@
-import 'regenerator-runtime/runtime'
 import SettingsApp from './components/SettingsApp.vue'
 import store from './store'
 import translations from './../l10n/translations.json'

services/settings/ui/tests/run-acceptance-test.sh

@@ -46,7 +46,7 @@ export SERVER_HOST=${SERVER_HOST:-https://localhost:9200}
 export BACKEND_HOST=${BACKEND_HOST:-https://localhost:9200}
 export TEST_TAGS=${TEST_TAGS:-"not @skip"}
 
-yarn run acceptance-tests "$1"
+pnpm run acceptance-tests "$1"
 
 status=$?
 exit $status