EHN: Adapter for query form

.babelrc

+{
+    "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react"
+    ]
+}

.gitignore

+build
+node_modules
+package-lock.json

package.json

+{
+  "dependencies": {
+    "@indiscale/caosdb-webui-core-components": "file:../caosdb-webui-core-components/indiscale-caosdb-webui-core-components-0.0.6.tgz",
+    "bootstrap": "^5.2.3",
+    "bootstrap-icons": "^1.10.3",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.7.2",
+    "react-dom": "^18.2.0"
+  },
+  "name": "caosdb-webui-legacy-adapter",
+  "version": "0.0.1",
+  "description": "CaosDB Web Interface",
+  "main": "src/index.js",
+  "devDependencies": {
+    "@babel/core": "^7.21.3",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "babel-loader": "^9.1.2",
+    "css-loader": "^6.7.3",
+    "html-webpack-plugin": "^5.5.0",
+    "source-map-loader": "^4.0.1",
+    "style-loader": "^3.3.2",
+    "webpack": "^5.76.3",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.1"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --mode=development --open --hot",
+    "build": "webpack --mode=production",
+    "build:dev": "webpack --mode=development"
+  },
+  "author": "",
+  "license": "AGPL-3.0-or-later"
+}

src/query-form.js

+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { QueryForm, makeQueryTemplate, createTab } from '@indiscale/caosdb-webui-core-components';
+
+function queryForm(element, submitCallback, tabs, getSuggestionsCallback, restore) {
+	const root = ReactDOM.createRoot(element)
+	root.render(<QueryForm submitCallback={submitCallback} tabs={tabs} getSuggestionsCallback={getSuggestionsCallback} restore={restore}/>);	
+}
+
+
+async function initQueryForm() {
+	// for auto completion
+	const retrieveNames = async () => {
+		var response = $(await connection.get(transaction.generateEntitiesUri(["names"]))).find("Property[name],RecordType[name],Record[name]");
+
+		response = response.toArray().map(x => $(x).attr("name"));
+
+		return response;
+	}
+
+	// give function -> lazy, give results -> eager initialization
+	const autoCompletion = new QueryForm.AutoCompletion(retrieveNames)
+	const getSuggestionsCallback = (isCql, value, word) => autoCompletion.getSuggestions(isCql, value, word);
+
+	
+	// configure tabs
+	var tabs_config = await load_config("json/query-form-tabs.json");
+	
+	tabs_config = [
+		createTab("all", "All", "Show all matching results", makeQueryTemplate()),		
+	].concat(tabs_config.map(conf => createTab(conf.id, conf.label, conf.description, undefined, conf.filterDefinitions)));
+
+	// the submit callback is responsible for actually executing the query
+	const submitCallback = (queryString, pageSize) => {
+		const paging = pageSize < 1 ? "" : `&P=0L${pageSize || 10}`;
+		window.location.href = connection.getEntityUri([]) + `?query=${queryString}${paging}`};
+	const restore=true;
+
+	queryForm(
+		document.getElementById("caosdb-query-panel"),
+		submitCallback,
+		tabs_config,
+		getSuggestionsCallback,
+		restore
+	);
+}
+
+initQueryForm();

webpack.config.js

+const path = require('path');
+
+module.exports = {
+	devtool: "eval-source-map",
+	entry: {
+		'query-form' : './src/query-form.js',
+	},
+  output: {
+    path: path.resolve(__dirname, 'build'),
+    filename: '[name].bundle.js',
+		library: {
+			name: "CaosDBWebui2",
+			type: "window",
+		},
+		clean: true,
+  },
+  resolve: {
+    modules: [path.join(__dirname, 'src'), 'node_modules'],
+    alias: {
+      react: path.join(__dirname, 'node_modules', 'react'),
+    },
+  },
+  module: {
+    rules: [
+			{
+				test: /\.(js|jsx)$/,
+				enforce: "pre",
+				use: ["source-map-loader"],
+			},
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+          },
+        ],
+      },
+    ],
+  },
+};
+