WIP ui: migrate to react-formule

.github/workflows/harbour-build-ui.yml

@@ -2,14 +2,13 @@ name: Build and export CAP UI image
 
 on:
   push:
-    branches: ['master', 'dev', 'qa', 'test']
-    paths:
-      - "ui/**"
-      - ".github/workflows/ui-test.yml"
+    branches: ["master", "dev", "qa", "test", "with-formule"]
+    # paths:
+    #   - "ui/**"
+    #   - ".github/workflows/ui-test.yml"
 
 jobs:
   build-image:
-    needs: UITest
     name: Build and export ui image
     runs-on: ubuntu-20.04
     outputs:
@@ -23,6 +22,10 @@ jobs:
         run: echo "BRANCH_NAME=$(echo ${GITHUB_REF#refs/heads/})" >> $GITHUB_OUTPUT
         id: get_branch
 
+      - name: Extract short commit SHA
+        id: get_short_sha
+        run: echo "SENTRY_RELEASE=$(git rev-parse --short $GITHUB_SHA)" >> $GITHUB_OUTPUT
+
       - id: build-ui
         name: Build and export
         uses: cern-sis/gh-workflows/.github/actions/[email protected]
@@ -36,46 +39,8 @@ jobs:
           username: ${{ secrets.HARBOR_USERNAME }}
           password: ${{ secrets.HARBOR_PASSWORD }}
           build-args: |
-            BRANCH_NAME=${{ steps.get_branch.outputs.BRANCH_NAME }}
-            PIWIK_ENV=${{ steps.get_branch.outputs.BRANCH_NAME }}
-            CAP_PIWIK_URL=${{ secrets.CAP_PIWIK_URL }}
-            CAP_PIWIK_SITEID_DEV=${{ secrets.CAP_PIWIK_SITEID_DEV }}
-            CAP_PIWIK_SITEID_PROD=${{ secrets.CAP_PIWIK_SITEID_PROD }}
-            CAP_PIWIK_SITEID_QA=${{ secrets.CAP_PIWIK_SITEID_QA }}
-            CAP_PIWIK_SITEID_TEST=${{ secrets.CAP_PIWIK_SITEID_TEST }}
-
-      - id: build-ui-e2e
-        name: Build and export for end to end image
-        uses: cern-sis/gh-workflows/.github/actions/[email protected]
-        if: ${{ steps.get_branch.outputs.BRANCH_NAME }} == 'qa'
-        with:
-          dockerfile: ./docker/harbour/ui/Dockerfile
-          platforms: linux/amd64,linux/arm64
-          image: cern-sis/cap-ui
-          registry: registry.cern.ch
-          cache: false
-          tags: qa-e2e
-          username: ${{ secrets.HARBOR_USERNAME }}
-          password: ${{ secrets.HARBOR_PASSWORD }}
-          build-args: |
-            BRANCH_NAME=${{ steps.get_branch.outputs.BRANCH_NAME }}
-            ENABLE_E2E=True
-            PIWIK_ENV=${{ steps.get_branch.outputs.BRANCH_NAME }}
-            CAP_PIWIK_URL=${{ secrets.CAP_PIWIK_URL }}
-            CAP_PIWIK_SITEID_QA=${{ secrets.CAP_PIWIK_SITEID_QA }}
-
-  deploy:
-    needs: build-image
-    name: update-image
-    runs-on: ubuntu-20.04
-
-    steps:
-      - name: send event
-        uses: cern-sis/gh-workflows/.github/actions/[email protected]
-        with:
-          event-type: update
-          token: ${{ secrets.PAT_FIRE_EVENTS_ON_CERN_SIS_KUBERNETES_CAP }}
-          repo: cern-sis/kubernetes-cap
-          images: |
-            cern-sis/cap-ui@{{ needs.build-image.outputs.image-id }}
-
+            SENTRY_URL=${{ secrets.CAP_SENTRY_URL }}
+            SENTRY_ORG=${{ secrets.CAP_SENTRY_ORG }}
+            SENTRY_PROJECT=${{ secrets.CAP_SENTRY_PROJECT }}
+            SENTRY_AUTH_TOKEN=${{ secrets.CAP_SENTRY_AUTH_TOKEN }}
+            SENTRY_RELEASE=${{ steps.get_short_sha.outputs.SENTRY_RELEASE }}

.github/workflows/lint-push.yml

@@ -2,7 +2,7 @@ name: Lint Source
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   lint-shellcheck:
@@ -85,7 +85,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v2-beta
         with:
-          node-version: "10"
+          node-version: "20"
 
       - name: Run prettier
         run: |

.github/workflows/ui-test.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v2-beta
         with:
-          node-version: "14"
+          node-version: "20"
 
       - name: Build
         working-directory: ./ui

docker/harbour/ui/Dockerfile

@@ -1,134 +1,65 @@
-FROM nginx:1.24
-
-
-RUN apt-get update
-RUN apt-get install -y curl bash
-
-
-RUN curl -sL https://deb.nodesource.com/setup_14.x  | bash -
-RUN apt-get install -y nodejs
+FROM node:18-alpine AS build
 
-RUN apt-get update && apt-get -y install  git python g++ make
-RUN npm install --global yarn
+RUN apk add --no-cache git
 
 ENV WORKING_DIR=/tmp/cap
-ENV NGINX_HTML_DIR=/usr/share/nginx/html
-ENV NODE_OPTIONS="--max-old-space-size=8192"
-
-RUN mkdir -p $NGINX_HTML_DIR
-
-# We invalidate cache always because there is no easy way for now to detect
-# if something in the whole git repo changed. For docker git clone <url> <dir>
-# is always the same so it caches it.
-ARG CACHE_DATE=$(date)
-
-# get the code at a specific commit
-RUN git clone https://github.com/cernanalysispreservation/analysispreservation.cern.ch.git $WORKING_DIR/
-
-WORKDIR $WORKING_DIR/
 
-ARG BRANCH_NAME
+WORKDIR $WORKING_DIR
 
-RUN echo $BRANCH_NAME
+ARG SENTRY_URL
+ARG SENTRY_ORG
+ARG SENTRY_PROJECT
+ARG SENTRY_AUTH_TOKEN
+ARG SENTRY_RELEASE
 
-RUN git fetch --all
+ENV SENTRY_URL=$SENTRY_URL
+ENV SENTRY_ORG=$SENTRY_ORG
+ENV SENTRY_PROJECT=$SENTRY_PROJECT
+ENV SENTRY_AUTH_TOKEN=$SENTRY_AUTH_TOKEN
+ENV VITE_SENTRY_RELEASE=$SENTRY_RELEASE
 
-RUN if [ ! -z $BRANCH_NAME ]; then \
-      # run commands to checkout a branch
-      echo "Checkout branch $BRANCH_NAME" && \
-      git checkout $BRANCH_NAME && \
-      git pull origin $BRANCH_NAME; \
-    fi
-
-RUN git log -10 --pretty=oneline --decorate
-
-RUN cp -rfp $WORKING_DIR/docker/nginx/nginx.conf /etc/nginx/nginx.conf
+RUN mkdir -p ui/cap-react
 
 WORKDIR $WORKING_DIR/ui
 
-ARG PIWIK_ENV=dev
-ARG ENABLE_E2E
-
-ARG CAP_PIWIK_URL
-ARG CAP_PIWIK_SITEID_DEV
-ARG CAP_PIWIK_SITEID_PROD
-ARG CAP_PIWIK_SITEID_QA
-ARG CAP_PIWIK_SITEID_TEST
-
-ARG PIWIK_URL
-ARG PIWIK_SITEID_DEV
-ARG PIWIK_SITEID_PROD
-ARG PIWIK_SITEID_QA
-ARG PIWIK_SITEID_TEST
-
-RUN echo "" >> $WORKING_DIR/ui/cap-react/.env
-RUN echo "" >> $WORKING_DIR/ui/cap-react/.env
-RUN echo "PIWIK_URL=$CAP_PIWIK_URL" >> $WORKING_DIR/ui/cap-react/.env
-RUN echo "ENABLE_E2E=$ENABLE_E2E" >> $WORKING_DIR/ui/cap-react/.env
-
-RUN rm /bin/sh && ln -s /bin/bash /bin/sh
-
-RUN if [[ $PIWIK_ENV == "dev" ]]; then \
-        echo "PIWIK_SITEID=$CAP_PIWIK_SITEID_DEV" >> $WORKING_DIR/ui/cap-react/.env; \
-    fi
-
-RUN if [[ $PIWIK_ENV == "prod" ]]; then \
-        echo "PIWIK_SITEID=$CAP_PIWIK_SITEID_PROD" >> $WORKING_DIR/ui/cap-react/.env; \
-    fi
-
-RUN if [[ $PIWIK_ENV == "qa" ]]; then \
-        echo "PIWIK_SITEID=$CAP_PIWIK_SITEID_QA" >> $WORKING_DIR/ui/cap-react/.env; \
-    fi
-
-RUN if [[ $PIWIK_ENV == "test" ]]; then \
-        echo "PIWIK_SITEID=$CAP_PIWIK_SITEID_TEST" >> $WORKING_DIR/ui/cap-react/.env; \
-    fi
-
-RUN echo "=========================="
-RUN echo $CAP_PIWIK_SITEID_TEST 
-RUN echo $PIWIK_SITEID_TEST
-RUN echo "=========================="
-RUN less $WORKING_DIR/ui/cap-react/.env
-RUN echo "=========================="
-
-RUN yarn config set cache ~/.my-yarn-cache-dir
-
-RUN pwd
+# build CAP UI
+COPY ./ui ${WORKING_DIR}/ui
 RUN yarn install
-# RUN yarn upgrade
-
 RUN yarn workspace cap-react build
-RUN pwd
-RUN ls ./cap-react/dist/*
-RUN cp -rfp ./cap-react/dist/* $NGINX_HTML_DIR
+WORKDIR ${WORKING_DIR}/ui/cap-react
+RUN yarn sentry:create-release
+RUN yarn sentry:sourcemaps
+RUN yarn sentry:finalize-release
 
-# build docs general
+# build general docs
+COPY ./docs ${WORKING_DIR}/docs
 WORKDIR $WORKING_DIR/docs
-
-RUN yarn
+RUN yarn install
 RUN yarn build
 
-RUN mkdir -p $NGINX_HTML_DIR/docs/general
-RUN cp -rfp ./_book/* $NGINX_HTML_DIR/docs/general
-
-
-# build docs API
+# build API docs
 RUN git clone https://github.com/cernanalysispreservation/cap-api-docs.git $WORKING_DIR/cap-api-docs/
 WORKDIR $WORKING_DIR/cap-api-docs
-
-RUN npm install
+RUN npm install --maxsockets 1
 RUN npm run build
 
-RUN mkdir -p $NGINX_HTML_DIR/docs/api
-RUN cp -rfp ./web_deploy/* $NGINX_HTML_DIR/docs/api
-
-
-# build docs client
+# build client docs
 RUN git clone https://github.com/cernanalysispreservation/cap-client.git $WORKING_DIR/cap-client/
 WORKDIR $WORKING_DIR/cap-client/docs
-
-RUN yarn
+RUN yarn install
 RUN yarn build
 
-RUN mkdir -p $NGINX_HTML_DIR/docs/client
-RUN cp -rfp ./_book/* $NGINX_HTML_DIR/docs/client
+
+FROM nginx:1.24
+
+ENV WORKING_DIR=/tmp/cap
+ENV NGINX_HTML_DIR=/usr/share/nginx/html/
+RUN mkdir -p $NGINX_HTML_DIR
+
+# Exclude source maps from the final image
+RUN echo *.map >> .dockerignore
+COPY ./docker/nginx/nginx.conf /etc/nginx/nginx.conf
+COPY --from=build ${WORKING_DIR}/ui/cap-react/dist/ $NGINX_HTML_DIR
+COPY --from=build ${WORKING_DIR}/docs/_book/ $NGINX_HTML_DIR/docs/general
+COPY --from=build ${WORKING_DIR}/cap-api-docs/web_deploy/ $NGINX_HTML_DIR/docs/api
+COPY --from=build ${WORKING_DIR}/cap-client/docs/_book/ $NGINX_HTML_DIR/docs/client

docker/nginx/nginx.conf

@@ -60,7 +60,6 @@ http {
         image/x-icon
         text/cache-manifest
         text/css
-        text/html
         text/javascript
         text/plain
         text/vcard

scripts/cap.wordlist

@@ -60,3 +60,7 @@ repos
 isort
 validator
 utils
+codemirror
+formule
+react-formule
+npm

ui/cap-react/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="utf-8"/>
     <link rel="icon" type="image/png" href="./favicon.ico">
+    <script type="text/javascript" src="/config.js"></script>
     <title>CERN Analysis Preservation</title>
   </head>
   <body>

ui/cap-react/package.json

@@ -1,7 +1,8 @@
 {
   "name": "cap-react",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "CERN Analysis Preservation UI",
+  "type": "module",
   "engines": {
     "npm": ">=3"
   },
@@ -21,6 +22,9 @@
     "test:e2e:run": "cypress run --headless --browser chrome",
     "tests": "start-server-and-test start http://localhost:3000 test:e2e:run",
     "open:cover": "npm run test:cover && opn ./coverage/lcov-report/index.html",
+    "sentry:create-release": "sentry-cli releases new $VITE_SENTRY_RELEASE",
+    "sentry:sourcemaps": "sentry-cli releases files $VITE_SENTRY_RELEASE upload-sourcemaps dist",
+    "sentry:finalize-release": "sentry-cli releases finalize $VITE_SENTRY_RELEASE",
     "dev": "vite",
     "dev:docker": "DOCKER=true vite",
     "preview": "vite preview"
@@ -30,26 +34,13 @@
   "dependencies": {
     "@ant-design/icons": "4.7.0",
     "@ant-design/pro-layout": "7.10.3",
-    "@codemirror/commands": "6.1.2",
-    "@codemirror/lang-json": "6.0.1",
-    "@codemirror/language": "6.6.0",
-    "@codemirror/legacy-modes": "6.3.0",
-    "@codemirror/lint": "6.1.0",
-    "@codemirror/merge": "6.0.0",
-    "@codemirror/state": "6.1.3",
-    "@codemirror/view": "6.4.2",
     "@datapunt/matomo-tracker-react": "0.5.1",
-    "@rjsf/antd": "5.8.1",
-    "@rjsf/core": "5.8.1",
-    "@rjsf/utils": "5.8.1",
-    "@rjsf/validator-ajv8": "5.8.1",
     "@sentry/react": "^5.0.0",
-    "@vitejs/plugin-react": "3.1.0",
+    "@vitejs/plugin-react": "^4.2.0",
     "antd": "^5.4.2",
     "axios": "0.27.2",
     "classnames": "2.3.1",
     "clean-deep": "3.3.0",
-    "codemirror": "6.0.1",
     "connected-react-router": "6.5.2",
     "dayjs": "1.11.7",
     "deep-equal": "2.0.3",
@@ -65,9 +56,8 @@
     "pretty-bytes": "^4.0.2",
     "query-string": "^5.1.0",
     "react": "^18.2.0",
-    "react-dnd": "^9.3.4",
-    "react-dnd-html5-backend": "9.3.4",
     "react-dom": "^18.2.0",
+    "react-formule": "1.2.0",
     "react-infinite-scroll-component": "6.1.0",
     "react-input-mask": "3.0.0-alpha.2",
     "react-joyride": "^2.5.4",
@@ -83,11 +73,10 @@
     "redux-logger": "3.0.6",
     "redux-thunk": "2.3.0",
     "sanitize-html": "2.4.0",
-    "squirrelly": "8.0.8",
-    "vite": "4.2.1",
-    "vite-plugin-svgr": "2.4.0"
+    "vite": "^5.0.2"
   },
   "devDependencies": {
+    "@sentry/cli": "2.38.2",
     "autoprefixer": "7.1.4",
     "chalk": "2.0.1",
     "concurrently": "3.5.0",
@@ -110,6 +99,8 @@
     "replace": "0.3.0",
     "rimraf": "2.6.1",
     "rollup-plugin-visualizer": "5.9.0",
+    "vite-plugin-restart": "^0.4.0",
+    "vite-plugin-svgr": "^4.2.0",
     "vitest": "0.30.1"
   },
   "keywords": [],