Release 1.0.1

.github/workflows/build.yml

@@ -47,7 +47,7 @@ jobs:
         path: |
           build/assets/*
           build/index.html
-          serve.js
+          serve.cjs
           
     - name: 'If build on master branch, bump version on develop'
       if: ${{ github.ref_name == 'master' }}

.gitignore

@@ -45,9 +45,6 @@ typings/
 # Optional REPL history
 .node_repl_history
 
-# Output of 'npm pack'
-*.tgz
-
 # Yarn Integrity file
 .yarn-integrity
 
@@ -56,4 +53,8 @@ typings/
 
 dist
 
-build
+build
+
+config.json
+
+server.*

README.md

@@ -20,31 +20,34 @@ The backend provider can be selected on startup. Supported backend providers are
 ## 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
+* open `build/index.html` in browser
 * 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)
+### without cross-site scripting (Bitbucket Server)
 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:
+* `npm install express http-proxy-middleware`
+* 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
+    - 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.cjs`
+* open "https://localhost:<port>" in browser, choose Provider BitbucketServer
+
+Side note: with Azure Function App its possible to easily deploy managed Azure Functions, which could be used as backend api for forwarding requests. An example is included in Azurefunc.tgz.
 
 ## 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
+* check `build` folder for artifacts
 
 ## Built With
 * react

package.json

@@ -1,6 +1,6 @@
 {
   "name": "generic-referencedata-editor",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "repository": {
     "type": "git",
@@ -10,34 +10,36 @@
   "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",
+    "@mui/icons-material": "5",
+    "@mui/material": "5",
+    "@rjsf/core": "5",
+    "@rjsf/mui": "5",
+    "@rjsf/utils": "5",
+    "@rjsf/validator-ajv8": "5",
     "@types/jest": "^27.5.2",
-    "@types/node": "^16.11.43",
-    "@types/react": "^18.0.2",
-    "@types/react-dom": "^18.0.6",
+    "@types/node": "20",
+    "@types/react": "18",
+    "@types/react-dom": "18",
     "@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": "18",
     "react-custom-scrollbars-2": "^4.4.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "18",
     "react-hook-form": "^7.51.4",
     "react-resizable": "^3.0.5",
     "react-tooltip": "^4.2.17",
     "typescript": "^4.7.4",
-    "vite": "^5.0.0"
+    "vite": "5"
+  },
+  "devDependencies": {
+    "express": "^4.19.2",
+    "http-proxy-middleware": "^3.0.0"
   },
-  "devDependencies": {},
   "scripts": {
     "start": "vite --force",
     "build": "vite build",
@@ -64,8 +66,8 @@
     ]
   },
   "peerDependencies": {
-    "react": "18.0.2",
-    "react-dom": "18.0.2"
+    "react": "18",
+    "react-dom": "18"
   },
   "homepage": "./"
 }

serve.cjs

@@ -0,0 +1,34 @@
+
+var express = require('express');
+var https = require('https');
+var fs = require('fs');
+var { createProxyMiddleware } = require('http-proxy-middleware');
+var config = require('./config.json');
+if (!config.bitbucketServerUrl) throw new Error("bitbucketServerUrl missing in config.json");
+if (!config.port) throw new Error("port missing in config.json");
+if (!config.sslKeyFile) throw new Error("sslKeyFile missing in config.json");
+if (!config.sslCertFile) throw new Error("sslCertFile missing in config.json");
+
+/**
+ * Configure proxy middleware
+ */
+var bitbucketServerProxy = createProxyMiddleware({
+  target: config.bitbucketServerUrl,
+  pathRewrite: {'^/api/server' : ''},
+  changeOrigin: true	
+});
+var devProxy = createProxyMiddleware({
+  target: 'http://localhost:5173/',
+});
+
+var app = express();
+app.use('/api/server', bitbucketServerProxy);
+app.use('/', express.static('build'));
+//app.use('/', devProxy); // use to forward to dev server started with `yarn start
+
+var privateKey  = fs.readFileSync(config.sslKeyFile, 'utf8');
+var certificate = fs.readFileSync(config.sslCertFile, 'utf8');
+var options = {key: privateKey, cert: certificate};
+https.createServer(options, app).listen(config.port);
+
+console.log('Server and Proxy started, open https://localhost:'+config.port);

src/BitbucketCloudProvider.tsx

@@ -12,7 +12,7 @@ interface LoginInput {
   password: string;
 }
 
-function LoginForm(props: {provider: BitbucketCloudProvider, defaults: LoginInput, login: (LoginInput) => void, setProvider: (DataProvider) => void}) {
+function LoginForm(props: {provider: BitbucketCloudProvider, defaults: LoginInput, login: (LoginInput) => void, setProvider: (DataProvider) => void, showError: (string) => void}) {
   const { handleSubmit, register, formState } = useForm<LoginInput>({      
     defaultValues: props.defaults,
   });
@@ -53,7 +53,7 @@ export class BitbucketCloudProvider extends DataProvider {
     return 'BitbucketCloud'
   };
 
-  private getConfigPath(): string {
+  private getSchemaPath(): string {
     if (this.loginInput!.path?.match(/\.json+$/)) {
       return this.loginInput!.path.replace(/\.json+$/, ".config.json"); // replace extension .json -> .config.json  
     } else {
@@ -77,8 +77,8 @@ export class BitbucketCloudProvider extends DataProvider {
     })
 	};
 
-  getLoginForm(params: any, setProvider: (DataProvider) => void) {
-    return <LoginForm provider={this} defaults={params as LoginInput} login={x => this.login(this,x)} setProvider={setProvider}/>
+  getLoginForm(params: any, setProvider: (DataProvider) => void, showError: (string) => void) {
+    return <LoginForm provider={this} defaults={params as LoginInput} login={x => this.login(this,x)} setProvider={setProvider} showError={showError}/>
   };
 
   login(that: BitbucketCloudProvider, input: LoginInput) {
@@ -101,9 +101,9 @@ export class BitbucketCloudProvider extends DataProvider {
   getSchema() {
     if(!this.loginInput) throw Error( "Connection parameters not set.");
     if(!this.config) {
-      this.config = this.makeRequest("/"+this.loginInput!.branch+"/"+this.getConfigPath())
+      this.config = this.makeRequest("/"+this.loginInput!.branch+"/"+this.getSchemaPath())
       .then( response => response.json())
-      .then( data => (isObject(data) ? data as {}: Promise.reject("getConfig: response is not a JSon Object")));
+      .then( data => (isObject(data) ? data as {}: Promise.reject("getSchema: response is not a JSon Object")));
     }
     return this.config;
   };
@@ -119,13 +119,13 @@ export class BitbucketCloudProvider extends DataProvider {
 
   saveData(msg: string) {
     if(!this.loginInput) throw Error( "Connection parameters not set.");
-    this.data?.then(d => {
+    return this.data!.then(d => {
       var postData = new FormData();
       postData.append(this.loginInput!.path!, JSON.stringify(d,undefined,2));
       postData.append("message", msg);
       postData.append("branch", this.loginInput!.branch!);        
-      this.makeRequest("", "POST", postData);
-      this.changedRecords = []; // reset changed records
+      return this.makeRequest("", "POST", postData)
+      .then(() => {this.changedRecords = []}) // reset changed records
     });
   };
 }