Feature new query builder

[ddelpiano]

• Refactored the query.js component to export as single file and module each one of the components that were defined in it.
• Moved all the custom components used through Griddle inside query/customComponent (this might be placed somewhere else to be the more generic possible and not only related to the query builder component).
• The main component is now defined in queryBuilder.js.
• The columns now will be filled dynamically, this means that if a certain column that we included in the configuration is present in the header then it will be displayed, differently if not present in the header (even if configured) the column won't show up.
• Events to handle click outside the component migrated to react handles' style.
• Fixed and refactored keyboards events to handle opening/closing of the component itself.
• Fixed minor issues in other components (e.g. the canvas was detecting the click outside the query component and trying to interact with this action but the values where undefined due not clicking in its own area of responsibility).

Important notes:

• All the possible columns have now to be defined in queryResultsColMeta in the querybuilder configuration, as per the example below:

var queryResultsColMeta = [
  {
    "columnName": "id",
    "order": 1,
    "locked": false,
    "visible": true,
    "displayName": "ID",
  },
  {
    "columnName": "name",
    "order": 2,
    "locked": false,
    "visible": true,
    "customComponent": QueryLinkComponent,
    "actions": "window.addVfbId('$entity$');",
    "displayName": "Name",
    "cssClassName": "query-results-name-column",
  },
  {
    "columnName": "description",
    "order": 3,
    "locked": false,
    "visible": true,
    "displayName": "Definition",
    "cssClassName": "query-results-description-column"
  },
  {
    "columnName": "type",
    "order": 4,
    "locked": false,
    "visible": true,
    "displayName": "Type",
    "cssClassName": "query-results-type-column"
  },
  {
    "columnName": "controls",
    "order": 5,
    "locked": false,
    "visible": false,
    "customComponent": QueryResultsControlsComponent,
    "displayName": "Controls",
    "actions": "",
    "cssClassName": "query-results-controls-column"
  },
  {
    "columnName": "images",
    "order": 6,
    "locked": false,
    "visible": true,
    "customComponent": SlideshowImageComponent,
    "displayName": "Images",
    "actions": "window.addVfbId('$entity$');",
    "cssClassName": "query-results-images-column"
  },
  {
    "columnName": "score",
    "order": 7,
    "locked": false,
    "visible": true,
    "displayName": "Score",
    "cssClassName": "query-results-score-column"
  }
];

Note, the columns name have to respect the convention where the field columnName is the lowercase version of the headers that arrive from the query processor defined in the backend, if these names don't match the filter will not work so the developers need to know in advance the columns name that will arrive from the backend.

• All the columns that the developer wants to show have to be defined in the queryResultsColumn, as per example below:

var queryResultsColumns = ['name', 'description', 'type', 'images', 'score'];

Note, as discussed previously, even if a column is not defined in this array will be placed inside the csv that the use can download, but not displayed.

• Do not use anymore jquery to hide and display the component, this can be references through GEPPETTO.QueryBuilder and displayed through the method open(), viceversa closed through the method close().
  (e.g. GEPPETTO.QueryBuilder.close(); ).

[gidili]

@ddelpiano why is this file changed here in this branch? I see mostly formatting but also some actual changes and I thought this is stuff that was a untouched since we solved those other issues months ago

[ddelpiano]

there is a single line changed, the canvas was detecting the click when the querybuilder is open but the coordinates were undefined since the action was not performed on the canvas itself, I had to add that check to avoid this issue.

[gidili]

Ah ok got it, I forgot and I thought unrelated to query stuff. In particular if there is a singel change trying to not do a lot of formatting at the same time otherwise it's very hard to spot what actually changed 👍

[gidili]

@ddelpiano commandController is ok but would be good to remove the GEPPETTO.QueryBuilder reference as part of this refactoring

[ddelpiano]

This has been removed from almost everywhere, the only point where I have this at the moment it's the QueryBuilderConfiguration, in this point , this will be removed as part of this within INFRA if you agree.

[gidili]

@ddelpiano same, we should remove GEPPETTO.QueryBuilder referencing from within these components ideally

[ddelpiano]

as per my reply above.

[gidili]

@ddelpiano anybody catch this star trek reference yet? 😂

[gidili]

@ddelpiano something upsets me in this indentation 😬

[ddelpiano]

already discussed, blame the linter or @rodriguez-facundo in case 😂

[ddelpiano]

@gidili this is ready to be reviewed again, thx