Render attribute and query groups in backend

app/helpers/types_helper.rb

@@ -69,6 +69,21 @@ module ::TypesHelper
     }
   end
 
+  def attribute_groups_as_json(type)
+    type
+      .attribute_groups
+      .map { |group|
+
+      attributes = group.attributes
+
+      if group.is_a? ::Type::QueryGroup
+        attributes = query_to_query_props(group.attributes)
+      end
+
+      [group.key, attributes, (group.key.is_a? Symbol)]
+    }.to_json
+  end
+
   private
 
   ##
@@ -76,16 +91,24 @@ module ::TypesHelper
   # Using the available attributes from +work_package_attributes+,
   # determines which attributes are not used
   def get_active_groups(type, available, inactive)
-    type.non_query_attribute_groups.map do |group|
-      extended_attributes =
-        group.attributes
-             .select { |key| inactive.delete(key) }
-             .map! { |key| attr_form_map(key, available[key]) }
+    type.attribute_groups.map do |group|
+      if group.is_a? ::Type::QueryGroup
+        [group, query_to_query_props(group.attributes)]
+      else
+        extended_attributes =
+          group.attributes
+            .select { |key| inactive.delete(key) }
+            .map! { |key| attr_form_map(key, available[key]) }
 
-      [group, extended_attributes]
+        [group, extended_attributes]
+      end
     end
   end
 
+  def query_to_query_props(query)
+    ::API::V3::Queries::QueryParamsRepresenter.new(query).to_h
+  end
+
   def attr_form_map(key, represented)
     {
       key: key,

app/models/type/attribute_groups.rb

@@ -114,11 +114,6 @@ module Type::AttributeGroups
     end
   end
 
-  # TODO: remove once queries can be configured as well
-  def non_query_attribute_groups
-    attribute_groups.select { |g| g.is_a?(Type::AttributeGroup) }
-  end
-
   def reload(*args)
     self.attribute_groups_objects = nil
     super

app/views/types/form/_attribute_group.html.erb

@@ -0,0 +1,28 @@
+<div class="type-form-conf-group" data-original-key="<%= group.key.to_s %>" data-key="<%= group.key %>" data-key-is-symbol="<%= group.key.is_a? Symbol %>">
+  <div class="group-head">
+    <span class="group-handle icon-toggle"></span>
+    <group-edit-in-place
+      name="<%= group.translated_key %>"
+      key="<%= group.key %>"
+      onvaluechange="groupNameChange"
+      onupsale="<%= EnterpriseToken.allows_to?(:edit_attribute_groups) ? '' : 'showEEOnlyHint' %>"
+      class="group-name">
+      <%= group.translated_key %>
+    </group-edit-in-place>
+    <span class="delete-group icon-small icon-close" ng-click="deleteGroup($event)"></span>
+  </div>
+  <div class="attributes" dragula='"attributes"'>
+    <% attributes.each do |attribute| %>
+      <div class="type-form-conf-attribute" data-key="<%= attribute[:key] %>">
+        <span class="attribute-handle icon-toggle"></span>
+        <span class="attribute-name">
+                      <%= attribute[:translation] %>
+          <% if attribute[:is_cf] %>
+                        <span class="attribute-cf-label"><%= CustomField.model_name.human %></span>
+                      <% end %>
+                    </span>
+        <span class="delete-attribute icon-small icon-close" ng-click="deactivateAttribute($event)"></span>
+      </div>
+    <% end %>
+  </div>
+</div> <!-- END attribute group -->

app/views/types/form/_form_configuration.html.erb

@@ -30,7 +30,7 @@ See docs/COPYRIGHT.rdoc for more details.
 <% form_attributes = form_configuration_groups(@type) %>
 
 <section class="form--section">
-  <%= f.hidden_field :attribute_groups, value: @type.non_query_attribute_groups.map { |group| [group.key, group.attributes, (group.key.is_a? Symbol)] }.to_json %>
+  <%= f.hidden_field :attribute_groups, value: attribute_groups_as_json(@type) %>
   <div id="types-form-configuration" op-drag-scroll ng-controller="TypesFormConfigurationCtrl" ng-init="upsaleLink = <%= '"' + OpenProject::Static::Links.links[:upsale][:href] +  "/?utm_source=unknown&utm_medium=community-edition&utm_campaign=form-configuration" + '"' %>">
     <div class="grid-block -visible-overflow wrap">
       <div class="grid-content -visible-overflow small-12 large-10">
@@ -137,41 +137,18 @@ See docs/COPYRIGHT.rdoc for more details.
           </div>
           <div class="type-form-query" data-query="">
             <span ng-click="editQuery($event)">
-              <%= op_icon('button--icon icon-add') %>
+              <%= op_icon('button--icon icon-edit') %>
               <%= t('types.edit.edit_query') %>
             </span>
           </div>
         </div>
         <div id="draggable-groups" dragula='"groups"'>
           <% form_attributes[:actives].each do |group, attributes| %>
-            <div class="type-form-conf-group" data-original-key="<%= group.key.to_s %>" data-key="<%= group.key %>" data-key-is-symbol="<%= group.key.is_a? Symbol %>">
-              <div class="group-head">
-                <span class="group-handle icon-toggle"></span>
-                <group-edit-in-place
-                  name="<%= group.translated_key %>"
-                  key="<%= group.key %>"
-                  onvaluechange="groupNameChange"
-                  onupsale="<%= EnterpriseToken.allows_to?(:edit_attribute_groups) ? '' : 'showEEOnlyHint' %>"
-                  class="group-name">
-                  <%= group.translated_key %>
-                </group-edit-in-place>
-                <span class="delete-group icon-small icon-close" ng-click="deleteGroup($event)"></span>
-              </div>
-              <div class="attributes" dragula='"attributes"'>
-                <% attributes.each do |attribute| %>
-                  <div class="type-form-conf-attribute" data-key="<%= attribute[:key] %>">
-                    <span class="attribute-handle icon-toggle"></span>
-                    <span class="attribute-name">
-                      <%= attribute[:translation] %>
-                      <% if attribute[:is_cf] %>
-                        <span class="attribute-cf-label"><%= CustomField.model_name.human %></span>
-                      <% end %>
-                    </span>
-                    <span class="delete-attribute icon-small icon-close" ng-click="deactivateAttribute($event)"></span>
-                  </div>
-                <% end %>
-              </div>
-            </div> <!-- END attribute group -->
+            <% if group.is_a? ::Type::QueryGroup %>
+              <%= render partial: 'types/form/query_group', locals: { group: group, query: attributes } %>
+            <% else %>
+              <%= render partial: 'types/form/attribute_group', locals: { group: group, attributes: attributes } %>
+            <% end %>
           <% end %>
         </div>
       </div>

app/views/types/form/_query_group.html.erb

@@ -0,0 +1,24 @@
+<div class="type-form-conf-group type-form-query-group"
+     data-original-key="<%= group.key.to_s %>"
+     data-key="<%= group.key %>">
+  <div class="group-head">
+    <span class="group-handle icon-toggle"></span>
+    <group-edit-in-place
+      name="<%= group.translated_key %>"
+      key="<%= group.key %>"
+      onvaluechange="groupNameChange"
+      onupsale="<%= EnterpriseToken.allows_to?(:edit_attribute_groups) ? '' : 'showEEOnlyHint' %>"
+      class="group-name">
+      <%= group.translated_key %>
+    </group-edit-in-place>
+    <span class="delete-group icon-small icon-close" ng-click="deleteGroup($event)"></span>
+  </div>
+  <%= content_tag :div,
+                  class: 'type-form-query',
+                  data: { query: JSON.dump(query) } do %>
+    <span ng-click="editQuery($event)">
+      <%= op_icon('button--icon icon-edit') %>
+      <%= t('types.edit.edit_query') %>
+    </span>
+  <% end %>
+</div> <!-- END query group -->

frontend/app/components/types/form-configuration/types-form-configuration.controller.ts

@@ -153,16 +153,7 @@ function typesFormConfigurationCtrl(
     // When the user edited the query at least once, the up-to-date query is persisted in queryProps dataset
     let currentQuery = originator.data('queryProps');
 
-    if (!currentQuery) {
-      try {
-        currentQuery = JSON.parse(persistentQuery);
-      } catch(e) {
-        console.log("Failed to parse existing query params: " + e);
-        currentQuery = {};
-      }
-    }
-
-    return currentQuery;
+    return currentQuery || persistentQuery || {};
   }
 
   $scope.updateHiddenFields = ():boolean => {

frontend/app/components/wp-table/embedded/wp-embedded-table.component.ts

@@ -144,7 +144,7 @@ export class WorkPackageEmbeddedTableComponent implements OnInit, OnDestroy {
       return this.tableState.tableRendering.onQueryUpdated.valuesPromise()
         .then(() => {
           this.showTablePagination = results.total > results.count;
-          this.tableInformationLoaded = this.configuration.tableVisible === true;
+          this.tableInformationLoaded = this.configuration.tableVisible;
         });
     });
   }
@@ -170,7 +170,7 @@ export class WorkPackageEmbeddedTableComponent implements OnInit, OnDestroy {
     return this.QueryDm
       .find(
         this.queryProps,
-        this.queryId,
+        this.queryId || '',
         this.projectIdentifier
       )
       .then((query:QueryResource) => this.initializeStates(query, query.results));