Feature Request: Tabs for multiple queries in AQL editor

[konsultaner]

I'm using the latest ArangoDB of the respective release series: 3.2 Mode: Single-Server Storage-Engine: mmfiles On this operating system: own infrastructure ,Windows 10

I use the query editor quite a lot. It happens quite often that I need to extract subqueries to fix then. It would be awesome if I could just open a couple of tabs to easily switch between the queries.

[dothebart]

@konsultaner did you have a look at this alternative UI by a community member? https://github.com/aguskov1987/arango-graphit?utm_content=bufferc6ced&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer from the screenshots I think he provides this ;-)

[konsultaner]

related to #17657

[konsultaner]

@dothebart I would love to support arango and fix some issues with the web ui. Can you tell me where to start.

Can you tell me where the code for the web ui is hidden? Do I need to build the whole arangoDB project to acutally work with a dev version of the web ui? Is there description on how the arango code is organized? Something close to a tutorial on how to contribute?

[konsultaner]

For development purposes, go to js/apps/system/_admin/aardvark/APP/react and run:

yarn start

This will deploy a development server (Port: 3000) and automatically start your favorite browser and open the web interface.

All changes to any source will automatically re-build and reload your browser. Enjoy :)

@dothebart This doesn't work under windows. Do you mind if I change how the .env if parsed to make it possible to run in windows?

[Simran-B]

You mean like this?

diff --git a/js/apps/system/_admin/aardvark/APP/react/package.json b/js/apps/system/_admin/aardvark/APP/react/package.json
index c26406972a9..5a750179d4c 100644
--- a/js/apps/system/_admin/aardvark/APP/react/package.json
+++ b/js/apps/system/_admin/aardvark/APP/react/package.json
@@ -67,8 +67,8 @@
     "url-loader": "1.1.1"
   },
   "scripts": {
-    "start": "sh -ac '. ./.env.devel; node scripts/start.js'",
-    "build": "sh -ac '. ./.env.build; node scripts/build.js'",
+    "start": "env-cmd -f ./.env.devel node scripts/start.js",
+    "build": "env-cmd -f ./.env.build node scripts/build.js",
     "test": "node scripts/test.js"
   },
   "eslintConfig": {
@@ -105,6 +105,7 @@
     "babel-preset-react-app": "^6.1.0",
     "case-sensitive-paths-webpack-plugin": "2.1.2",
     "compression-webpack-plugin": "^4.0.0",
+    "env-cmd": "^10.1.0",
     "eslint": "^7.31.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-loader": "^4.0.2",

I think this would be a useful change for cross-platform compatibility.

[konsultaner]

😄 No actually like this:

// package.json
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  }

and this:

// start.js

// Use dotenv to load the environment
const path = require('path')
require('dotenv').config({ path: path.resolve('./.env.devel') });
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';

// ...

because dotenv is a dependency already

[konsultaner]

@Simran-B

by the way I got an error in the arangodb.tsx when I checkout devil, npm i and ran the start.js

Type error: 'Provider' cannot be used as a JSX component.
  Its instance type 'Provider<AnyAction>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("C:/Users/burkh/RiderProjects/arangodb/js/apps/system/_admin/aardvark/APP/react/node_modules/@types/hoist-non-react-statics/node_modules/@types/react/index").ReactNode'.  TS2786

     8 | import { Task, taskRepeater } from "./actions/taskRepeater";
     9 | 
  > 10 | ReactDOM.render(<Provider store={store}>
       |                  ^
    11 |   <App />
    12 | </Provider>, document.getElementById("root"));
    13 | 

I usually work with angular so I need start learning react for this. do you directly see the issue? otherwize I will have to digg by mayself ;)

[UPDATE]

seems like npm i installs multiple versions of @types/react. yarn install seems to do a better job. I switched to yarn and it seems to work.

[konsultaner]

@Simran-B I was able to run the dev server.

I have it running under windows 11 with node 14 and WSL2 Ubuntu with node 16.

For some reason it is not possible to change databases. It keeps jumping back to the default _system when selecting another database. It also not serving the title image.

it is in the folder but the dev server reacts with a 404 and there for serves the index.html. Where should I start to debug. Both the same result.

I also keep getting this:

webpackHotDevClient.js:120 ../frontend/js/lib/moment.min.js
Module not found: Can't resolve './locale' in '/mnt/c/Users/burkh/RiderProjects/arangodb/js/apps/system/_admin/aardvark/APP/frontend/js/lib'

this is actually a bug in 2.19.x of moment but arango is running the 2.18.1 where it shouldn't appear.