chore(deps): Keycloakify refactor, upgrades (#1866)

---------

Co-authored-by: Theo Sanderson <theo@sndrsn.co.uk>

.github/workflows/keycloakify-build.yml

@@ -57,6 +57,11 @@ jobs:
           echo "CACHE_HIT=$EXISTS" >> $GITHUB_ENV
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
+      - name: Get node version build arg
+        if: env.CACHE_HIT == 'false'
+        run: |
+          NODE_VERSION=$(cat website/.nvmrc | tr -cd [:digit:].)
+          echo "NODE_VERSION=$NODE_VERSION" >> $GITHUB_ENV
       - name: Build and push image
         if: env.CACHE_HIT == 'false'
         uses: docker/build-push-action@v5
@@ -67,6 +72,7 @@ jobs:
           cache-from: type=gha,scope=keycloakify-${{ github.ref }}
           cache-to: type=gha,mode=max,scope=keycloakify-${{ github.ref }}
           platforms: ${{ env.BUILD_ARM && 'linux/amd64,linux/arm64' || 'linux/amd64' }}
+          build-args: NODE_VERSION=${{ env.NODE_VERSION }}
       - name: Tag and push image if cache hit
         if: env.CACHE_HIT == 'true'
         run: |

.github/workflows/website.yml

@@ -64,6 +64,7 @@ jobs:
         uses: docker/setup-buildx-action@v3
 
       - name: Get node version build arg
+        if: env.CACHE_HIT == 'false'
         run: |
           NODE_VERSION=$(cat website/.nvmrc | tr -cd [:digit:].)
           echo "NODE_VERSION=$NODE_VERSION" >> $GITHUB_ENV

keycloak/keycloakify/.devcontainer/.devcontainer.json

@@ -0,0 +1,26 @@
+{
+    "name": "Keycloakify Starter Devcontainer",
+    "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bookworm",
+    "features": {
+        "ghcr.io/devcontainers/features/docker-in-docker:2": {
+            "moby": true,
+            "installDockerBuildx": true,
+            "version": "latest",
+            "dockerDashComposeVersion": "none"
+        },
+        "ghcr.io/devcontainers-contrib/features/maven-sdkman:2": {
+            "version": "latest",
+            "jdkVersion": "latest",
+            "jdkDistro": "ms"
+        }
+    },
+    "postCreateCommand": "yarn install",
+    "customizations": {
+        "vscode": {
+            "extensions": [
+                "dbaeumer.vscode-eslint",
+                "esbenp.prettier-vscode"
+            ]
+        }
+    }
+}

keycloak/keycloakify/.dockerignore

@@ -0,0 +1,67 @@
+.storybook
+node_modules
+README.md
+dist
+dist_keycloak
+.devcontainer
+.gitignore
+Dockerfile
+.dockerignore
+
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# yarn cache directory
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+
+# Optional REPL history
+.node_repl_history
+
+.vscode
+
+.DS_Store
+
+/dist
+
+/dist_keycloak
+/build
+/storybook-static

keycloak/keycloakify/.eslintrc.cjs

@@ -0,0 +1,25 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    'react-hooks/exhaustive-deps': 'off',
+    '@typescript-eslint/no-redeclare': 'off',
+    'no-labels': 'off',
+  },
+  overrides: [
+    {
+      files: ['**/*.stories.*'],
+      rules: {
+        'import/no-anonymous-default-export': 'off',
+      },
+    },
+  ],
+}

keycloak/keycloakify/.gitignore

@@ -52,6 +52,6 @@ jspm_packages
 
 /dist
 
-/build_keycloak
+/dist_keycloak
 /build
-/storybook-static
+/storybook-static

keycloak/keycloakify/.nvmrc

@@ -0,0 +1 @@
+v22

keycloak/keycloakify/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+    "@chromatic-com/storybook"
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  staticDirs: ["../public"],
+};
+export default config;

keycloak/keycloakify/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

keycloak/keycloakify/.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.2.2.cjs

keycloak/keycloakify/Dockerfile

@@ -1,22 +1,29 @@
-FROM node:21-bookworm as builder
+ARG NODE_VERSION=22
+FROM node:${NODE_VERSION}-bookworm as builder
+
+ARG KEYCLOAK_ORCID_VERSION=1.3.0
 
 USER root
+
 RUN apt-get update && apt-get install -y maven
 
 RUN mvn --version
 
-RUN yarn versions
-
 WORKDIR /app
-COPY package.json yarn.lock ./
-RUN yarn install --frozen-lockfile
+RUN wget  https://github.com/eosc-kc/keycloak-orcid/releases/download/${KEYCLOAK_ORCID_VERSION}/keycloak-orcid-${KEYCLOAK_ORCID_VERSION}.jar
+COPY package.json yarn.lock .yarnrc.yml ./
+COPY .yarn/releases .yarn/releases
+RUN corepack enable
+RUN corepack install
+RUN yarn install --immutable && \
+    yarn cache clean
 COPY . .
 RUN yarn build-keycloak-theme
 
 FROM alpine:3.19
 RUN mkdir /output
-COPY --from=builder /app/build_keycloak/target/*.jar /output/
-RUN apk add --no-cache wget curl
-RUN wget -P /output https://github.com/eosc-kc/keycloak-orcid/releases/download/1.2.0/keycloak-orcid-1.2.0.jar
-RUN ls -l /output
+COPY --from=builder /app/keycloak-orcid*.jar /output/
+# /loculus.jar is the theme name set in vite.config.ts
+COPY --from=builder /app/dist_keycloak/target/loculus*.jar /output/
+RUN ls -alht /output
 CMD sh -c 'cp /output/*.jar /destination/'

keycloak/keycloakify/README.md

@@ -1,13 +1,36 @@
 # Keycloakify theme
 
-This is a keycloak theme, built with keycloakify, and branched from https://github.com/keycloakify/keycloakify-starter
+This is a keycloak theme, built with keycloakify, and branched from <https://github.com/keycloakify/keycloakify-starter>.
+
+We last synced with upstream on 2024-05-11.
 
 To preview in the storybook:
-```
-yarn # install dependencies (it's like npm install)
-yarn storybook 
+
+```bash
+nvm use # use the correct node version
+yarn install --immutable # install dependencies (it's like npm install)
+yarn storybook
 ```
 
 To build a JAR and package it into an image that copies it to an output directory, build the Dockerfile. (This is done by CI).
 
+Currently, only the login theme is implemented.
+
+## Dependency documentation
+
+### Keycloakify
+
+https://docs.keycloakify.dev/
 
+### Keycloak ORCID
+
+https://github.com/eosc-kc/keycloak-orcid
+
+## Installing yarn 4
+
+Prerequisite: node
+
+```bash
+corepack enable
+corepack install yarn
+```

keycloak/keycloakify/index.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <!--
+        Notice the use of %BASE_URL% in the tags above.
+        It will be replaced with the URL of the `public` folder during the build.
+        Only files inside the `public` folder can be referenced from the HTML.
+
+        Unlike "/favicon.ico" or "favicon.ico", "%BASE_URL%favicon.ico" will
+        work correctly both with client-side routing and a non-root public URL.
+    -->
+  <link rel="icon" type="image/svg+xml" sizes="32x32" href="%BASE_URL%favicon.svg">
+
+  <title>Loculus Authentication</title>
+
+  <meta name="keycloakify-ignore-start">
+  <script>console.log("This is logged Only in the main app, stripped out in the theme")</script>
+  <meta name="keycloakify-ignore-end">
+
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>