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:
@@ -43,39 +42,3 @@ jobs:
             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 }}
-

.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,50 +1,10 @@
-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
-
-RUN echo $BRANCH_NAME
-
-RUN git fetch --all
-
-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
-
-WORKDIR $WORKING_DIR/ui
+WORKDIR $WORKING_DIR
 
 ARG PIWIK_ENV=dev
 ARG ENABLE_E2E
@@ -61,74 +21,68 @@ 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 mkdir -p ui/cap-react
+RUN echo "PIWIK_URL=$CAP_PIWIK_URL" >> ui/cap-react/.env
+RUN echo "ENABLE_E2E=$ENABLE_E2E" >> ui/cap-react/.env
 
 RUN if [[ $PIWIK_ENV == "dev" ]]; then \
-        echo "PIWIK_SITEID=$CAP_PIWIK_SITEID_DEV" >> $WORKING_DIR/ui/cap-react/.env; \
+        echo "PIWIK_SITEID=$CAP_PIWIK_SITEID_DEV" >> ui/cap-react/.env; \
     fi
 
 RUN if [[ $PIWIK_ENV == "prod" ]]; then \
-        echo "PIWIK_SITEID=$CAP_PIWIK_SITEID_PROD" >> $WORKING_DIR/ui/cap-react/.env; \
+        echo "PIWIK_SITEID=$CAP_PIWIK_SITEID_PROD" >> ui/cap-react/.env; \
     fi
 
 RUN if [[ $PIWIK_ENV == "qa" ]]; then \
-        echo "PIWIK_SITEID=$CAP_PIWIK_SITEID_QA" >> $WORKING_DIR/ui/cap-react/.env; \
+        echo "PIWIK_SITEID=$CAP_PIWIK_SITEID_QA" >> ui/cap-react/.env; \
     fi
 
 RUN if [[ $PIWIK_ENV == "test" ]]; then \
-        echo "PIWIK_SITEID=$CAP_PIWIK_SITEID_TEST" >> $WORKING_DIR/ui/cap-react/.env; \
+        echo "PIWIK_SITEID=$CAP_PIWIK_SITEID_TEST" >> 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 cat ui/cap-react/.env
 RUN echo "=========================="
 
-RUN yarn config set cache ~/.my-yarn-cache-dir
+WORKDIR $WORKING_DIR/ui
 
-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
 
-# 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
+
+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/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"
   },
@@ -30,26 +31,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 +53,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.1.1",
     "react-infinite-scroll-component": "6.1.0",
     "react-input-mask": "3.0.0-alpha.2",
     "react-joyride": "^2.5.4",
@@ -83,9 +70,7 @@
     "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": {
     "autoprefixer": "7.1.4",
@@ -110,6 +95,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": [],