react refactoring

.github/workflows/build.yml

@@ -0,0 +1,85 @@
+name: Build
+
+on: 
+  push:
+    branches:
+      - 'master'
+      - 'develop'
+  pull_request:
+    branches:
+      - 'develop'
+    types: [opened, synchronize]      
+
+  # allow for manual builds from feature branches
+  workflow_dispatch:
+
+jobs:
+  build-and-create-release:
+
+    runs-on: ubuntu-latest
+
+    steps:
+
+    - name: Git Checkout
+      uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
+        token: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Setup node
+      uses: actions/setup-node@v4
+      with:
+        node-version: 20
+
+    - name: get-npm-version
+      id: package-version
+      uses: martinbeentjes/npm-get-version-action@main
+
+    - run: yarn install
+    - run: yarn build
+      env:
+        CI: '' # disable CI mode as it makes build fail on warnings
+
+    - name: Upload build to artifact
+      uses: actions/upload-artifact@v3
+      with:
+        name: editor
+        path: |
+          build/assets/*
+          build/index.html
+          serve.js
+          
+    - name: 'If build on master branch, bump version on develop'
+      if: ${{ github.ref_name == 'master' }}
+      uses:  phips28/[email protected]
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      with:
+        target-branch: develop
+        skip-tag: true    
+
+    - name: 'If build on master branch, download artifact'
+      if: ${{ github.ref_name == 'master' }}
+      uses: actions/download-artifact@v3
+      with:
+        path: artifact
+        name: editor
+
+    - name: 'If build on master branch, zip release asset'
+      if: ${{ github.ref_name == 'master' }}
+      uses: thedoctor0/zip-release@main
+      with:
+        type: zip
+        directory: artifact
+        filename: editor.zip
+
+    - name: 'If build on master branch, create release'
+      if: ${{ github.ref_name == 'master' }}
+      uses: marvinpinto/action-automatic-releases@latest
+      with:
+        repo_token: ${{ secrets.GITHUB_TOKEN }}
+        title: Release-${{ steps.package-version.outputs.current-version}}
+        automatic_release_tag: ${{ steps.package-version.outputs.current-version}}
+        draft: true
+        prerelease: false
+        files: artifact/editor.zip

.gitignore

@@ -29,9 +29,6 @@ bower_components
 # node-waf configuration
 .lock-wscript
 
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
 # Dependency directories
 node_modules/
 jspm_packages/
@@ -57,3 +54,6 @@ typings/
 # dotenv environment variables file
 .env
 
+dist
+
+build

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Zacharias Kull
+Copyright (c) 2024 Zacharias Kull
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,42 +1,56 @@
 # Generic reference data editor
 
-Webapplication using a generic form definition to edit a list of complex elements in json format on git provider.
+This is web application using a Json Schema definition to edit a list of records in Json format.
+The schema and data can be loaded using different backend providers.
 The GUI shows a list of the elements as table, and an edit form if an element is selected.
 
-The configuration to edit a specified sample.json file is named sample.config.json. It sets the titles, columns to display in the table and the json schema for the elements to be edited. The json schema is used to create a generic form for editing the elements. https://jsonschema.net/ can create json schema's by example (disable all assertions and annotations).
+The Json Schema to edit a specified <dataset-name>.json file is named <dataset-name>.schema.json by convention.
+The Json Schema is used to create a generic form for editing a record. The form supports arrays and nested objects.
+https://jsonschema.net/ can create json schema's by example (disable all assertions and annotations).
 
-The API of the git provider is used as backend service. Supported git providers are currently:
-* Bitbucket Cloud
-* Bitbucket Server: as internal servers normally dont allow cross-site scripting, a https server must started which is configured to forward the api request. See below for configuration.
+The schma file needs an additional "$metadata" attribute which can take the following properties:
+* `idCols` (required): list of primary key column(s) to uniquely identify records of the dataset
+* `tableCols` (required): list of columns to display in the table
 
-## Getting Started
+The backend provider can be selected on startup. Supported backend providers are currently:
+* BitbucketCloud: connect to a Bitbucket Cloud git repository.
+* BitbucketServer: connect to a Bitbucket on-prem git repository. As internal servers normally dont allow cross-site scripting, a https server be must started which is configured to forward the api request. See below for configuration.
+* Upload: upload a local Json Schema and Json file, and download the edited Json file again.
 
-### Prerequisites
-Nodejs is installed and available on the command line.
-
-### Installing
-* clone git repository
-
-#### With cross-site scripting (Bitbucket Cloud)
+## Usage
+* download latest release zip file: `wget https://github.com/zzeekk/generic-referencedata-editor/releases/latest/download/editor.zip`
+* unzip
 * open "dist/index.html" in browser
-
-#### Without cross-site scripting (Bitbucket Server & Cloud)
-* Install node dependencies: npm install
-* adapt config.json if needed  
-  port to use  
-  Bitbucket server Url  
-  ssl certificate:  
-  if you have no certificate for the server, you can create self-signed certificate for testing with the following steps  
-    openssl genrsa -out server.key 2048  
-    openssl req -new -key server.key -out server.crt.req  
-    openssl x509 -req -in server.crt.req -signkey server.key -out server.crt  
-* Run Server: npm start
+* choose provider and enter informations to access data file in repository, or upload schema and data
+* edit data records
+* commit data to repository or download data using buttons in the upper right of the table view
+
+### without cross-site scripting (Bitbucket Server & Cloud)
+Start a local https server to forward api request to repository server:
+* complete basic stpeps above
+* make sure nodejs is installed
+* create config.json with following properties:  
+  - "port": port to use
+  - "bitbucketServerUrl" Bitbucket server Url  
+  - "sslKeyFile" + "sslCertFile": if you have no certificate for the server, you can create self-signed certificate for testing with the following steps:
+    - openssl genrsa -out server.key 2048  
+    - openssl req -new -key server.key -out server.crt.-req  
+    - openssl x509 -req -in server.crt.req -signkey server.key -out server.crt  
+* run server: `node serve.js`
+* open "dist/index.html" in browser, choose provider and use localhost as hostname
+
+## Build
+* make sure nodejs & npm are installed
+* clone git repository
+* install yarn package manager: `npm install --global yarn`
+* `yarn build`
+* check build folder for artifacts
 
 ## Built With
-* [angularjs](https://angularjs.org/) - web framework
-* [angular-schema-form](https://github.com/json-schema-form/angular-schema-form) - angularjs component to create forms from json schema definition
-* [angular-datatables](http://l-lin.github.io/angular-datatables/archives/#!/welcome) - angularjs component to create tables
-* [webpack](https://webpack.js.org) - bundle scripts
+* react
+* react-schema-form
+* ka-table
+* vite
 
 ## Open Points
 * Add new / clone / delete records

index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/sdl_logo192.png"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="apple-touch-icon" href="/sdl_logo192.png" />
+    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials"/>
+    <title>Parameter Editor</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

manifest.json

@@ -0,0 +1,7 @@
+{
+    "name": "Parameter Editor",
+    "start_url": ".",
+    "display": "standalone",
+    "theme_color": "#000000",
+    "background_color": "#ffffff"
+}

package.json

@@ -1,47 +1,71 @@
 {
   "name": "generic-referencedata-editor",
-  "version": "0.0.1",
-  "description": "",
+  "version": "1.0.0",
   "private": true,
-  "keywords": [],
   "repository": {
     "type": "git",
     "url": "https://github.com/zzeekk/generic-referencedata-editor.git"
   },
-  "author": "",
-  "license": "",
+  "type": "module",
+  "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.15.16",
+    "@rjsf/core": "^5.18.3",
+    "@rjsf/mui": "^5.18.3",
+    "@rjsf/utils": "^5.18.3",
+    "@rjsf/validator-ajv8": "^5.18.3",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.11.43",
+    "@types/react": "^18.0.2",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-resizable": "^3.0.4",
+    "@types/react-router-dom": "^5.1.5",
+    "@types/styled-components": "^5.1.9",
+    "@vitejs/plugin-react": "^4.2.0",
+    "antd": "^5.4.7",
+    "assert": "^2.1.0",
+    "ka-table": "^8.2.0",
+    "polished": "^4.3.1",
+    "react": "^18.3.1",
+    "react-custom-scrollbars-2": "^4.4.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.4",
+    "react-resizable": "^3.0.5",
+    "react-tooltip": "^4.2.17",
+    "typescript": "^4.7.4",
+    "vite": "^5.0.0"
+  },
+  "devDependencies": {},
   "scripts": {
-    "build": "webpack",
-    "dev": "webpack-dev-server --inline --progress",
-    "start": "node serve.js"
+    "start": "vite --force",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "npx eslint src --ext .js,.jsx,.ts,.tsx --max-warnings=0",
+    "run": "node serve.js"
   },
-  "dependencies": {
-    "@babel/core": "^7.20.12",
-    "angular": "^1.6.10",
-    "angular-base64": "^2.0.5",
-    "angular-datatables": "^0.6.2",
-    "angular-route": "^1.6.9",
-    "angular-schema-form-bootstrap": "git+https://github.com/zzeekk/angular-schema-form-bootstrap.git#develop",
-    "angular-ui-bootstrap": "^2.5.6",
-    "babel-polyfill": "^6.26.0",
-    "bootstrap-vertical-tabs": "^1.2.2",
-    "bootstrap3": "^3.3.5",
-    "browserslist": "^4.21.4",
-    "express": "^4.16.3",
-    "html-webpack-plugin": "^5.5.0",
-    "jquery": "^3.3.1"
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "peerDependencies": {
+    "react": "18.0.2",
+    "react-dom": "18.0.2"
   },
-  "devDependencies": {
-    "babel-core": "^6.26.3",
-    "babel-loader": "^9.1.2",
-    "babel-preset-env": "^1.7.0",
-    "css-loader": "^6.7.1",
-    "file-loader": "^6.2.0",
-    "html-loader": "^0.5.5",
-    "imports-loader": "^0.8.0",
-    "style-loader": "^0.21.0",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.9.0"
-  }
+  "homepage": "./"
 }

serve.js

@@ -24,7 +24,3 @@ var options = {key: privateKey, cert: certificate};
 https.createServer(options, app).listen(config.port);
 
 console.log('listening for https on port '+config.port);
-
-//openssl genrsa -out server.key 2048
-//openssl req -new -key server.key -out server.crt.req
-//openssl x509 -req -in server.crt.req -signkey server.key -out server.crt