5 files changed, 55 insertions, 21 deletions
diff --git a/app/assets/javascripts/clusters/agents/index.js b/app/assets/javascripts/clusters/agents/index.js
index 6c7fae274f8..10055092c29 100644
--- a/app/assets/javascripts/clusters/agents/index.js
+++ b/app/assets/javascripts/clusters/agents/index.js
@@ -9,7 +9,13 @@ export default () => {
     return null;
   }
 
-  const { activityEmptyStateImage, agentName, emptyStateSvgPath, projectPath } = el.dataset;
+  const {
+    activityEmptyStateImage,
+    agentName,
+    canAdminVulnerability,
+    emptyStateSvgPath,
+    projectPath,
+  } = el.dataset;
 
   return new Vue({
     el,
@@ -17,6 +23,7 @@ export default () => {
     provide: {
       activityEmptyStateImage,
       agentName,
+      canAdminVulnerability,
       emptyStateSvgPath,
       projectPath,
     },
diff --git a/app/assets/javascripts/lib/utils/table_utility.js b/app/assets/javascripts/lib/utils/table_utility.js
index 33db7686e0f..6d66335b832 100644
--- a/app/assets/javascripts/lib/utils/table_utility.js
+++ b/app/assets/javascripts/lib/utils/table_utility.js
@@ -1,3 +1,4 @@
+import { convertToSnakeCase, convertToCamelCase } from '~/lib/utils/text_utility';
 import { DEFAULT_TH_CLASSES } from './constants';
 
 /**
@@ -7,3 +8,37 @@ import { DEFAULT_TH_CLASSES } from './constants';
  * @returns {String} The classes to be used in GlTable fields object.
  */
 export const thWidthClass = (width) => `gl-w-${width}p ${DEFAULT_TH_CLASSES}`;
+
+/**
+ * Converts a GlTable sort-changed event object into string format.
+ * This string can be used as a sort argument on GraphQL queries.
+ *
+ * @param {Object} - The table state context object.
+ * @returns {String} A string with the sort key and direction, for example 'NAME_DESC'.
+ */
+export const sortObjectToString = ({ sortBy, sortDesc }) => {
+  const sortingDirection = sortDesc ? 'DESC' : 'ASC';
+  const sortingColumn = convertToSnakeCase(sortBy).toUpperCase();
+
+  return `${sortingColumn}_${sortingDirection}`;
+};
+
+/**
+ * Converts a sort string into a sort state object that can be used to
+ * set the sort order on GlTable.
+ *
+ * @param {String} - The string with the sort key and direction, for example 'NAME_DESC'.
+ * @returns {Object} An object with the sortBy and sortDesc properties.
+ */
+export const sortStringToObject = (sortString) => {
+  let sortBy = null;
+  let sortDesc = null;
+
+  if (sortString && sortString.includes('_')) {
+    const [key, direction] = sortString.split(/_(ASC|DESC)$/);
+    sortBy = convertToCamelCase(key.toLowerCase());
+    sortDesc = direction === 'DESC';
+  }
+
+  return { sortBy, sortDesc };
+};
diff --git a/app/assets/javascripts/settings_panels.js b/app/assets/javascripts/settings_panels.js
index 2c6da5669ef..fe5b21713a2 100644
--- a/app/assets/javascripts/settings_panels.js
+++ b/app/assets/javascripts/settings_panels.js
@@ -18,8 +18,6 @@ export function expandSection(sectionArg) {
   const $section = $(sectionArg);
 
   $section.find('.js-settings-toggle:not(.js-settings-toggle-trigger-only)').text(__('Collapse'));
-  // eslint-disable-next-line @gitlab/no-global-event-off
-  $section.find('.settings-content').off('scroll.expandSection').scrollTop(0);
   $section.addClass('expanded');
   if (!$section.hasClass('no-animate')) {
     $section
@@ -32,7 +30,6 @@ export function closeSection(sectionArg) {
   const $section = $(sectionArg);
 
   $section.find('.js-settings-toggle:not(.js-settings-toggle-trigger-only)').text(__('Expand'));
-  $section.find('.settings-content').on('scroll.expandSection', () => expandSection($section));
   $section.removeClass('expanded');
   if (!$section.hasClass('no-animate')) {
     $section
@@ -55,18 +52,16 @@ export default function initSettingsPanels() {
     const $section = $(elm);
     $section.on('click.toggleSection', '.js-settings-toggle', () => toggleSection($section));
 
-    if (!isExpanded($section)) {
-      $section.find('.settings-content').on('scroll.expandSection', () => {
-        $section.removeClass('no-animate');
+    if (window.location.hash) {
+      const $target = $(window.location.hash);
+      if (
+        $target.length &&
+        !isExpanded($section) &&
+        ($section.is($target) || $section.find($target).length)
+      ) {
+        $section.addClass('no-animate');
         expandSection($section);
-      });
+      }
     }
   });
-
-  if (window.location.hash) {
-    const $target = $(window.location.hash);
-    if ($target.length && $target.hasClass('settings')) {
-      expandSection($target);
-    }
-  }
 }
diff --git a/app/experiments/application_experiment.rb b/app/experiments/application_experiment.rb
index 859716b4739..2dabf33405d 100644
--- a/app/experiments/application_experiment.rb
+++ b/app/experiments/application_experiment.rb
@@ -41,10 +41,6 @@ class ApplicationExperiment < Gitlab::Experiment # rubocop:disable Gitlab/Namesp
     # define a default nil control behavior so we can omit it when not needed
   end
 
-  def track(action, **event_args)
-    super(action, **tracking_context.merge(event_args))
-  end
-
   # TODO: remove
   # This is deprecated logic as of v0.6.0 and should eventually be removed, but
   # needs to stay intact for actively running experiments. The new strategy
@@ -64,12 +60,12 @@ class ApplicationExperiment < Gitlab::Experiment # rubocop:disable Gitlab/Namesp
 
   private
 
-  def tracking_context
+  def tracking_context(event_args)
     {
       namespace: context.try(:namespace) || context.try(:group),
       project: context.try(:project),
       user: user_or_actor
-    }.compact || {}
+    }.merge(event_args)
   end
 
   def user_or_actor
diff --git a/app/helpers/projects/cluster_agents_helper.rb b/app/helpers/projects/cluster_agents_helper.rb
index e3027759d65..43d520d0eab 100644
--- a/app/helpers/projects/cluster_agents_helper.rb
+++ b/app/helpers/projects/cluster_agents_helper.rb
@@ -5,6 +5,7 @@ module Projects::ClusterAgentsHelper
     {
       activity_empty_state_image: image_path('illustrations/empty-state/empty-state-agents.svg'),
       agent_name: agent_name,
+      can_admin_vulnerability: can?(current_user, :admin_vulnerability, project).to_s,
       empty_state_svg_path: image_path('illustrations/operations-dashboard_empty.svg'),
       project_path: project.full_path
     }