F shortcuts with new panel

Summary

For https://gitlab.indiscale.com/caosdb/customers/glaz_awi/management/-/issues/269. Adds query shortcut functionality when the new query panel is enabled (i.e., BUILD_MODULE_LEGACY_QUERY_FORM=DISABLED).

Focus

No changes in the react code necessary, the shortcut container is simply squeezed between query form and tabs (I liked it better here than below the tabs).

• Is the placement ok?
• Is the styling ok enough for now?
• Is the behavior when scrolling ok? I.e., vanishing shortcuts when query panel minimizes.

Test Environment

Use a profile that has query shortcuts (e.g., the demo profile). Start with BUILD_MODULE_LEGACY_QUERY_FORM=DISABLED and WebUI in this branch. Test the new query panel together with shortcuts. Then, disable new query panel (i.e., BUILD_MODULE_LEGACY_QUERY_FORM=DISABLED) and verify that everything works as before.

Check List for the Author

Please, prepare your MR for a review. Be sure to write a summary and a focus and create gitlab comments for the reviewer. They should guide the reviewer through the changes, explain your changes and also point out open questions. For further good practices have a look at our review guidelines

• All automated tests pass
• Reference related issues
• Up-to-date CHANGELOG.md (or not necessary)
• Up-to-date JSON schema (or not necessary)
• Appropriate user and developer documentation (or not necessary)
  • How do I use the software? Assume "stupid" users.
  • How do I develop or debug the software? Assume novice developers.
• Annotations in code (Gitlab comments)
  • Intent of new code
  • Problems with old code
  • Why this implementation?

Check List for the Reviewer

• I understand the intent of this MR
• All automated tests pass
• Up-to-date CHANGELOG.md (or not necessary)
• Appropriate user and developer documentation (or not necessary)
• The test environment setup works and the intended behavior is reproducible in the test environment
• In-code documentation and comments are up-to-date.
• Check: Are there specifications? Are they satisfied?

For further good practices have a look at our review guidelines.

src/core/js/query_shortcuts.js

@@ -291,18 +291,28 @@ var query_shortcuts = new function () {
         );
 
         // function for inserting the generated query string into the query panel
-        var insert_to_query_panel = (_) => {
+        var insert_to_query_panel = (inputSelectorName) => {
             var values = query_shortcuts.extract_placeholder_values(shortcut_form[0]);
             var replaced_query_string = query_shortcuts.replace_placeholders_with_values(query_string, values);
-            $("#caosdb-query-textarea")
+
+            $(inputSelectorName)
                 .focus()
                 .val(replaced_query_string);
+
+            return replaced_query_string;
         };
 
         // callback for the submission
         var execute = (_) => {
-            insert_to_query_panel();
-            $("#caosdb-query-form").submit();
+
+            if ("${BUILD_MODULE_LEGACY_QUERY_FORM}" != "ENABLED") {
+                const queryString = insert_to_query_panel(".caosdb-f-query-form input");
+                window.localStorage.setItem("query.queryString", queryString);
+                $(".caosdb-f-query-panel form").submit()
+            } else {
+                insert_to_query_panel("#caosdb-query-textarea");
+                $("#caosdb-query-form").submit();
+            }
         };
 
         shortcut_form.find(".caosdb-f-query-shortcut-right-col")