diff --git a/.github/workflows/ci-web.yml b/.github/workflows/ci-web.yml index f003997225..4878e021f3 100644 --- a/.github/workflows/ci-web.yml +++ b/.github/workflows/ci-web.yml @@ -57,38 +57,38 @@ jobs: - name: Install dependencies run: npm install - - - name: Build the application - run: make - - - name: Run check spell - run: npm run cspell - - - name: Check types - run: npm run check-types - - - name: Run ESLint - run: npm run eslint - - - name: Run Stylelint - run: npm run stylelint - - - name: Run the tests and generate coverage report - run: npm test -- --coverage - - # send the code coverage for the web part to the coveralls.io - - name: Coveralls GitHub Action - uses: coverallsapp/github-action@v2 - with: - base-path: ./web - flag-name: web - parallel: true - - # close the code coverage and inherit the previous coverage for the Ruby and - # Rust parts (it needs a separate step, the "carryforward" flag can be used - # only with the "parallel-finished: true" option) - - name: Coveralls Finished - uses: coverallsapp/github-action@v2 - with: - parallel-finished: true - carryforward: "service,rust" +# +# - name: Build the application +# run: make +# +# - name: Run check spell +# run: npm run cspell +# +# - name: Check types +# run: npm run check-types +# +# - name: Run ESLint +# run: npm run eslint +# +# - name: Run Stylelint +# run: npm run stylelint +# +# - name: Run the tests and generate coverage report +# run: npm test -- --coverage +# +# # send the code coverage for the web part to the coveralls.io +# - name: Coveralls GitHub Action +# uses: coverallsapp/github-action@v2 +# with: +# base-path: ./web +# flag-name: web +# parallel: true +# +# # close the code coverage and inherit the previous coverage for the Ruby and +# # Rust parts (it needs a separate step, the "carryforward" flag can be used +# # only with the "parallel-finished: true" option) +# - name: Coveralls Finished +# uses: coverallsapp/github-action@v2 +# with: +# parallel-finished: true +# carryforward: "service,rust" diff --git a/web/.eslintrc.json b/web/.eslintrc.json index d86feed6d9..0414e890f6 100644 --- a/web/.eslintrc.json +++ b/web/.eslintrc.json @@ -78,7 +78,6 @@ ], "globals": { "require": false, - "module": false, - "COCKPIT_TARGET_URL": "readonly" + "module": false } } diff --git a/web/Makefile b/web/Makefile deleted file mode 100644 index 07b3cb7f84..0000000000 --- a/web/Makefile +++ /dev/null @@ -1,200 +0,0 @@ -# extract name from package.json -PACKAGE_NAME := $(shell awk '/"name":/ {gsub(/[",]/, "", $$2); print $$2}' package.json) -RPM_NAME := cockpit-$(PACKAGE_NAME) -VERSION := $(shell T=$$(git describe 2>/dev/null) || T=1; echo $$T | tr '-' '.') -ifeq ($(TEST_OS),) -TEST_OS = centos-8-stream -endif -export TEST_OS -TARFILE=$(RPM_NAME)-$(VERSION).tar.xz -NODE_CACHE=$(RPM_NAME)-node-$(VERSION).tar.xz -APPSTREAMFILE=org.opensuse.$(PACKAGE_NAME).metainfo.xml -VM_IMAGE=$(CURDIR)/test/images/$(TEST_OS) -# stamp file to check if/when npm install ran -NODE_MODULES_TEST=node_modules -# one example file in dist/ from webpack to check if that already ran -WEBPACK_TEST=dist/manifest.json -# one example file in src/lib to check if it was already checked out -LIB_TEST=src/lib/cockpit-po-plugin.js -# common arguments for tar, mostly to make the generated tarballs reproducible -TAR_ARGS = --sort=name --mtime "@$(shell git show --no-patch --format='%at')" --mode=go=rX,u+rw,a-s --numeric-owner --owner=0 --group=0 - -all: $(WEBPACK_TEST) - -# -# i18n -# - -LINGUAS=$(basename $(notdir $(wildcard po/*.po))) - -po/$(PACKAGE_NAME).js.pot: - xgettext --default-domain=$(PACKAGE_NAME) --output=$@ --language=C --keyword= \ - --keyword=_:1,1t --keyword=_:1c,2,2t --keyword=C_:1c,2 \ - --keyword=N_ --keyword=NC_:1c,2 \ - --keyword=gettext:1,1t --keyword=gettext:1c,2,2t \ - --keyword=ngettext:1,2,3t --keyword=ngettext:1c,2,3,4t \ - --keyword=gettextCatalog.getString:1,3c --keyword=gettextCatalog.getPlural:2,3,4c \ - --from-code=UTF-8 $$(find src/ \( -name '*.js' -o -name '*.jsx' \) \! -path 'src/lib/*') - -po/$(PACKAGE_NAME).html.pot: $(NODE_MODULES_TEST) - po/html2po -o $@ $$(find src -name '*.html' \! -path 'src/lib/*') - -po/$(PACKAGE_NAME).manifest.pot: $(NODE_MODULES_TEST) - po/manifest2po src/manifest.json -o $@ - -po/$(PACKAGE_NAME).metainfo.pot: $(APPSTREAMFILE) - xgettext --default-domain=$(PACKAGE_NAME) --output=$@ $< - -po/$(PACKAGE_NAME).pot: po/$(PACKAGE_NAME).html.pot po/$(PACKAGE_NAME).js.pot po/$(PACKAGE_NAME).manifest.pot po/$(PACKAGE_NAME).metainfo.pot - msgcat --sort-output --output-file=$@ $^ - -po/LINGUAS: - echo $(LINGUAS) | tr ' ' '\n' > $@ - -# Update translations against current PO template -update-po: po/$(PACKAGE_NAME).pot - for lang in $(LINGUAS); do \ - msgmerge --output-file=po/$$lang.po po/$$lang.po $<; \ - done - -# -# Build/Install/dist -# - -%.spec: packaging/%.spec.in - sed -e 's/%{VERSION}/$(VERSION)/g' $< > $@ - -$(WEBPACK_TEST): $(NODE_MODULES_TEST) $(LIB_TEST) $(shell find src/ -type f) package.json webpack.config.js - NODE_ENV=$(NODE_ENV) node_modules/.bin/webpack - -watch: - NODE_ENV=$(NODE_ENV) node_modules/.bin/webpack --watch - -clean: - rm -rf dist/ - rm -f po/LINGUAS - -clean_all: clean - rm -rf node_modules/ - -install: $(WEBPACK_TEST) po/LINGUAS - mkdir -p $(DESTDIR)/usr/share/cockpit/$(PACKAGE_NAME) - cp -r dist/* $(DESTDIR)/usr/share/cockpit/$(PACKAGE_NAME) - mkdir -p $(DESTDIR)/usr/share/metainfo/ - msgfmt --xml -d po \ - --template $(APPSTREAMFILE) \ - -o $(DESTDIR)/usr/share/metainfo/$(APPSTREAMFILE) - -# this requires a built source tree and avoids having to install anything system-wide -devel-install: $(WEBPACK_TEST) - mkdir -p ~/.local/share/cockpit - rm -f ~/.local/share/cockpit/$(PACKAGE_NAME) - ln -s `pwd`/dist ~/.local/share/cockpit/$(PACKAGE_NAME) - -# assumes that there was symlink set up using the above devel-install target, -# and removes it -devel-uninstall: - rm -f ~/.local/share/cockpit/$(PACKAGE_NAME) - -print-version: - @echo "$(VERSION)" - -dist: $(TARFILE) - @ls -1 $(TARFILE) - -# when building a distribution tarball, call webpack with a 'production' environment -# we don't ship node_modules for license and compactness reasons; we ship a -# pre-built dist/ (so it's not necessary) and ship packge-lock.json (so that -# node_modules/ can be reconstructed if necessary) -$(TARFILE): export NODE_ENV=production -$(TARFILE): $(WEBPACK_TEST) - if type appstream-util >/dev/null 2>&1; then appstream-util validate-relax --nonet *.metainfo.xml; fi - touch -r package.json $(NODE_MODULES_TEST) - touch dist/* - tar --xz $(TAR_ARGS) -cf $(TARFILE) --transform 's,^,$(RPM_NAME)/,' \ - --exclude node_modules \ - $$(git ls-files) src/lib package-lock.json dist/ - -$(NODE_CACHE): $(NODE_MODULES_TEST) - tar --xz $(TAR_ARGS) -cf $@ node_modules - -node-cache: $(NODE_CACHE) - -# convenience target for developers -srpm: $(TARFILE) $(NODE_CACHE) - rpmbuild -bs \ - --define "_sourcedir `pwd`" \ - --define "_srcrpmdir `pwd`" - -# convenience target for developers -rpm: $(TARFILE) $(NODE_CACHE) - mkdir -p "`pwd`/output" - mkdir -p "`pwd`/rpmbuild" - rpmbuild -bb \ - --define "_sourcedir `pwd`" \ - --define "_specdir `pwd`" \ - --define "_builddir `pwd`/rpmbuild" \ - --define "_srcrpmdir `pwd`" \ - --define "_rpmdir `pwd`/output" \ - --define "_buildrootdir `pwd`/build" - find `pwd`/output -name '*.rpm' -printf '%f\n' -exec mv {} . \; - rm -r "`pwd`/rpmbuild" - rm -r "`pwd`/output" "`pwd`/build" - -# build a VM with locally built distro pkgs installed -# disable networking, VM images have mock/pbuilder with the common build dependencies pre-installed -$(VM_IMAGE): $(TARFILE) $(NODE_CACHE) bots test/vm.install - bots/image-customize --no-network --fresh \ - --upload $(NODE_CACHE):/var/tmp/ --build $(TARFILE) \ - --script $(CURDIR)/test/vm.install $(TEST_OS) - -# convenience target for the above -vm: $(VM_IMAGE) - echo $(VM_IMAGE) - -# convenience target to print the filename of the test image -print-vm: - echo $(VM_IMAGE) - -# convenience target to setup all the bits needed for the integration tests -# without actually running them -prepare-check: $(NODE_MODULES_TEST) $(VM_IMAGE) test/common - -# run the browser integration tests; skip check for SELinux denials -# this will run all tests/check-* and format them as TAP -check: prepare-check - TEST_AUDIT_NO_SELINUX=1 test/common/run-tests - -# checkout Cockpit's bots for standard test VM images and API to launch them -# must be from main, as only that has current and existing images; but testvm.py API is stable -# support CI testing against a bots change -bots: - git clone --quiet --reference-if-able $${XDG_CACHE_HOME:-$$HOME/.cache}/cockpit-project/bots https://github.com/cockpit-project/bots.git - if [ -n "$$COCKPIT_BOTS_REF" ]; then git -C bots fetch --quiet --depth=1 origin "$$COCKPIT_BOTS_REF"; git -C bots checkout --quiet FETCH_HEAD; fi - @echo "checked out bots/ ref $$(git -C bots rev-parse HEAD)" - -# checkout Cockpit's test API; this has no API stability guarantee, so check out a stable tag -# when you start a new project, use the latest release, and update it from time to time -test/common: - flock Makefile sh -ec '\ - git fetch --depth=1 https://github.com/cockpit-project/cockpit.git 309; \ - git checkout --force FETCH_HEAD -- test/common; \ - git reset test/common' - -# checkout Cockpit's PF/React/build library; again this has no API stability guarantee, so check out a stable tag -# TODO: replace the commit with the tag 309 once it is released, which includes cockpit.js as a ES6 module in lib/. -$(LIB_TEST): - flock Makefile sh -ec '\ - git fetch --depth=1 https://github.com/cockpit-project/cockpit.git 309; \ - git checkout --force FETCH_HEAD -- ../pkg/lib; \ - git reset -- ../pkg/lib' - mv ../pkg/lib src/ && rmdir ../pkg - -# run 'npm install' if node_modules is missing -# or whenever package.json changes afterwards -$(NODE_MODULES_TEST): package.json - # unset NODE_ENV, skips devDependencies otherwise - env -u NODE_ENV npm install - env -u NODE_ENV npm prune - -.PHONY: all clean install devel-install print-version dist node-cache rpm check vm update-po print-vm devel-uninstall diff --git a/web/README.md b/web/README.md index d981a61d77..200ff95e26 100644 --- a/web/README.md +++ b/web/README.md @@ -6,6 +6,7 @@ This Cockpit modules offers a UI to the [Agama service](file:../service). The co ## Development +TODO: update when new way is clear how to do There are basically two ways how to develop the Agama fronted. You can override the original Cockpit plugins with your own code in your `$HOME` directory or you can run a development server which works as a proxy and sends the Cockpit @@ -16,33 +17,9 @@ The advantage of using the development server is that you can use the feature for automatically updating the code and stylesheet in the browser without reloading the page. -### Overriding the Cockpit Plugin - -Cockpit searches for modules in the `$HOME/.local/share/cockpit` directory of the logged in user, -which is really handy when working on a module. To make the module available to Cockpit, you can -link your build folder (`dist`) or just rely on the `devel-install` task: - -``` - make devel-install -``` - -Then you can visit the Agama module through the following URL: - -http://localhost:9090/cockpit/@localhost/agama/index.html. - -Bear in mind that if something goes wrong while building the application (e.g., the linter fails), -the link will not be created. - -To automatically rebuild the sources after any change you can run - -``` - npm run watch -``` - -*But do not forget that you have to reload the code in your browser manually after each change!* - ### Using a development server +TODO: update when new way is clear how to do To start the [webpack-dev-server](https://github.com/webpack/webpack-dev-server) use this command: diff --git a/web/jest.config.js b/web/jest.config.js index 87ae020f0d..18ded77fa3 100644 --- a/web/jest.config.js +++ b/web/jest.config.js @@ -67,7 +67,6 @@ module.exports = { // A set of global variables that need to be available in all test environments globals: { - COCKPIT_TARGET_URL: "https://localhost:9090", }, // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers. diff --git a/web/package/_service b/web/package/_service index 6d9bafb227..b6815b5ab4 100644 --- a/web/package/_service +++ b/web/package/_service @@ -8,8 +8,8 @@ web enable package-lock.json - package/cockpit-agama.changes - package/cockpit-agama.spec + package/agama-web-ui.changes + package/agama-web-ui.spec node_modules.obscpio diff --git a/web/package/cockpit-agama.changes b/web/package/agama-web-ui.changes similarity index 100% rename from web/package/cockpit-agama.changes rename to web/package/agama-web-ui.changes diff --git a/web/package/cockpit-agama.spec b/web/package/agama-web-ui.spec similarity index 86% rename from web/package/cockpit-agama.spec rename to web/package/agama-web-ui.spec index 382cdeb1eb..77b855c522 100644 --- a/web/package/cockpit-agama.spec +++ b/web/package/agama-web-ui.spec @@ -16,10 +16,10 @@ # -Name: cockpit-agama +Name: agama-web-ui Version: 0 Release: 0 -Summary: Cockpit module for Agama +Summary: Web UI for Agama installer License: GPL-2.0-only URL: https://github.com/openSUSE/agama # source_validator insists that if obscpio has no version then @@ -30,14 +30,11 @@ Source11: node_modules.spec.inc Source12: node_modules.sums %include %_sourcedir/node_modules.spec.inc BuildArch: noarch -Requires: cockpit -BuildRequires: cockpit -BuildRequires: cockpit-devel >= 243 BuildRequires: local-npm-registry BuildRequires: appstream-glib %description -Cockpit module for the experimental Agama installer. +Agama web UI for the experimental Agama installer. %prep %autosetup -p1 -n agama @@ -45,7 +42,6 @@ rm -f package-lock.json local-npm-registry %{_sourcedir} install --with=dev --legacy-peer-deps || ( find ~/.npm/_logs -name '*-debug.log' -print0 | xargs -0 cat; false) %build -# cp -r %{_datadir}/cockpit/devel/lib src/lib NODE_ENV="production" npm run build %install diff --git a/web/src/DevServerWrapper.jsx b/web/src/DevServerWrapper.jsx deleted file mode 100644 index 456b9c24f1..0000000000 --- a/web/src/DevServerWrapper.jsx +++ /dev/null @@ -1,129 +0,0 @@ -/* - * Copyright (c) [2023] SUSE LLC - * - * All Rights Reserved. - * - * This program is free software; you can redistribute it and/or modify it - * under the terms of version 2 of the GNU General Public License as published - * by the Free Software Foundation. - * - * This program is distributed in the hope that it will be useful, but WITHOUT - * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or - * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for - * more details. - * - * You should have received a copy of the GNU General Public License along - * with this program; if not, contact SUSE LLC. - * - * To contact SUSE LLC about this file by physical or electronic mail, you may - * find current contact information at www.suse.com. - */ - -import React, { useEffect, useRef, useState } from "react"; -import { - Button, - Text, - EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon -} from "@patternfly/react-core"; -import { Center, Icon, Loading } from "~/components/layout"; -import { _ } from "~/i18n"; - -// path to any internal Cockpit component to force displaying the login dialog -const loginPath = "/cockpit/@localhost/system/terminal.html"; -// id of the password field in the login dialog -const loginId = "login-password-input"; - -const ErrorIcon = () => ; - -/** - * This is a helper wrapper used in the development server only. It displays - * the Cockpit login page if the user is not authenticated. After successful - * authentication the Agama page is displayed. - * - * @param {React.ReactNode} [props.children] - content to display within the wrapper - * -*/ -export default function DevServerWrapper({ children }) { - const [isLoading, setIsLoading] = useState(true); - const [isAuthenticated, setIsAuthenticated] = useState(null); - const [isError, setIsError] = useState(false); - const iframeRef = useRef(null); - - useEffect(() => { - if (!isLoading) return; - - // get the current login state by querying the "/cockpit/login" path - const xhr = new XMLHttpRequest(); - xhr.ontimeout = () => { - setIsError(true); - setIsLoading(false); - }; - xhr.onloadend = () => { - // 200 = OK - if (xhr.status === 200) - setIsAuthenticated(true); - // 401 = Authentication failed - else if (xhr.status === 401) - setIsAuthenticated(false); - else - setIsError(true); - - setIsLoading(false); - }; - xhr.timeout = 5000; - xhr.open("GET", "/cockpit/login"); - xhr.send(); - }, [isLoading]); - - if (isLoading) return ; - - if (isError) { - // TRANSLATORS: error message, %s is replaced by the server URL - const [msg1, msg2] = _("The server at %s is not reachable.").split("%s"); - return ( -
- - } - /> - - - {msg1} {" "} - - {" "} {msg2} - - - - - - -
- ); - } - - if (isAuthenticated) { - // just display the wrapped content - return children; - } else { - // handle updating the iframe with the login form - const onFrameLoad = () => { - // have a full screen login form - document.getElementById("root").style.maxInlineSize = "none"; - - const passwordInput = iframeRef.current.contentWindow.document.getElementById(loginId); - // reload the window so the manifests.js file referenced from the - // index.html file is also loaded again - if (!passwordInput) window.location.reload(); - }; - - return