[30751] Add group by and sort by items

Also clarifies the sharing modal with some text

https://community.openproject.com/wp/30751

config/locales/js-en.yml

@@ -766,6 +766,10 @@ en:
         confirm_edit_cancel: "Are you sure you want to cancel editing the name of this view? Title will be set back to previous value."
         click_to_edit_query_name: "Click to edit title of this view."
         rename_query_placeholder: "Name of this view"
+        star_text: "Mark this view as favorite and add to the saved views sidebar on the left."
+        public_text: >
+          Publish this view, allowing other users to access your view. Users with the 'Manage public views' permission can modify or remove public query.
+          This does not affect the visibility of work package results in that view and depending on their permissions, users may see different results.
         errors:
           unretrievable_query: "Unable to retrieve view from URL"
           not_found: "There is no such view"

frontend/src/app/components/modals/share-modal/query-sharing-form.component.ts

@@ -21,7 +21,10 @@ export class QuerySharingForm {
 
   public text = {
     showInMenu: this.I18n.t('js.label_star_query'),
-    visibleForOthers: this.I18n.t('js.label_public_query')
+    visibleForOthers: this.I18n.t('js.label_public_query'),
+
+    showInMenuText: this.I18n.t('js.work_packages.query.star_text'),
+    visibleForOthersText: this.I18n.t('js.work_packages.query.public_text')
   };
 
   constructor(readonly states:States,

frontend/src/app/components/modals/share-modal/query-sharing-form.html

@@ -1,4 +1,4 @@
-<div class="form--field -wide-label">
+<div class="form--field">
   <div class="form--field-container -vertical">
     <label class="form--label-with-check-box">
       <div class="form--check-box-container">
@@ -12,6 +12,8 @@
       </div>
       {{ text.visibleForOthers }}
     </label>
+    <div class="form--field-instructions" [textContent]="text.visibleForOthersText"></div>
+
     <label class="form--label-with-check-box">
       <div class="form--check-box-container">
         <input type="checkbox"
@@ -24,5 +26,6 @@
       </div>
       {{ text.showInMenu }}
     </label>
+    <div class="form--field-instructions" [textContent]="text.showInMenuText"></div>
   </div>
 </div>

frontend/src/app/components/op-context-menu/handlers/op-settings-dropdown-menu.directive.ts

@@ -173,6 +173,45 @@ export class OpSettingsMenuDirective extends OpContextMenuTrigger implements OnD
           return true;
         }
       },
+      {
+        // Insert columns
+        linkText: this.I18n.t('js.work_packages.query.insert_columns'),
+        icon: 'icon-columns',
+        onClick: () => {
+          this.opModalService.show<WpTableConfigurationModalComponent>(
+            WpTableConfigurationModalComponent,
+            this.injector,
+            { initialTab: 'columns' }
+          );
+          return true;
+        }
+      },
+      {
+        // Sort by
+        linkText: this.I18n.t('js.toolbar.settings.sort_by'),
+        icon: 'icon-sort-by',
+        onClick: () => {
+          this.opModalService.show<WpTableConfigurationModalComponent>(
+            WpTableConfigurationModalComponent,
+            this.injector,
+            { initialTab: 'sort-by' }
+          );
+          return true;
+        }
+      },
+      {
+        // Group by
+        linkText: this.I18n.t('js.toolbar.settings.group_by'),
+        icon: 'icon-group-by',
+        onClick: () => {
+          this.opModalService.show<WpTableConfigurationModalComponent>(
+            WpTableConfigurationModalComponent,
+            this.injector,
+            { initialTab: 'display-settings' }
+          );
+          return true;
+        }
+      },
       {
         // Rename query shortcut
         disabled: !this.query.id || this.authorisationService.cannot('query', 'updateImmediately'),