Merge branch 'gitlab-ui-integration-1226-make-popover-focus-by-default' into 'master'

Upgrade @gitlab/ui to v28.15.0 See merge request gitlab-org/gitlab!56778

Merge branch 'gitlab-ui-integration-1226-make-popover-focus-by-default' into 'master'
Upgrade @gitlab/ui to v28.15.0 See merge request gitlab-org/gitlab!56778
edb919c5 · Kushal Pandya · 479e3a9f · 423fc4bf · edb919c5 · edb919c5
Commit edb919c5 authored Mar 25, 2021 by Kushal Pandya
41 changed files
--- a/app/assets/javascripts/boards/components/board_blocked_icon.vue
+++ b/app/assets/javascripts/boards/components/board_blocked_icon.vue
@@ -158,7 +158,7 @@ export default {
      data-testid="issue-blocked-icon"
      @mouseenter="handleMouseEnter"
    />
-    <gl-popover :target="glIconId" placement="top" triggers="hover">
+    <gl-popover :target="glIconId" placement="top">
      <template #title
        ><span data-testid="popover-title">{{ blockedLabel }}</span></template
      >

--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue
@@ -37,7 +37,7 @@ export default {
 <template>
  <div id="popover-container">
-    <gl-popover :target="target" triggers="hover" placement="top" container="popover-container">
+    <gl-popover :target="target" placement="top" container="popover-container">
      <div
        class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-word-break-all"
      >

--- a/app/assets/javascripts/clusters_list/components/node_error_help_text.vue
+++ b/app/assets/javascripts/clusters_list/components/node_error_help_text.vue
@@ -34,7 +34,7 @@ export default {
    <gl-icon name="status_warning" :size="24" class="gl-p-2" />
-    <gl-popover :container="popoverId" :target="popoverId" placement="top" triggers="hover focus">
+    <gl-popover :container="popoverId" :target="popoverId" placement="top">
      <template #title>
        <span class="gl-display-block gl-text-left">{{ errorContent.title }}</span>
      </template>

--- a/app/assets/javascripts/feature_highlight/feature_highlight_popover.vue
+++ b/app/assets/javascripts/feature_highlight/feature_highlight_popover.vue
@@ -71,7 +71,6 @@ export default {
      ref="popover"
      :target="$options.targetId"
      :css-classes="['feature-highlight-popover']"
-      triggers="hover"
      container="body"
      placement="right"
      boundary="viewport"

--- a/app/assets/javascripts/performance_bar/components/request_selector.vue
+++ b/app/assets/javascripts/performance_bar/components/request_selector.vue
@@ -60,11 +60,7 @@ export default {
    </select>
    <span v-if="requestsWithWarnings.length">
      <span id="performance-bar-request-selector-warning" v-html="glEmojiTag('warning')"></span>
-      <gl-popover
+      <gl-popover target="performance-bar-request-selector-warning" :content="warningMessage" />
-        target="performance-bar-request-selector-warning"
-        :content="warningMessage"
-        triggers="hover focus"
-      />
    </span>
  </div>
 </template>
--- a/app/assets/javascripts/performance_bar/components/request_warning.vue
+++ b/app/assets/javascripts/performance_bar/components/request_warning.vue
@@ -37,6 +37,6 @@ export default {
 <template>
  <span v-if="hasWarnings">
    <span :id="htmlId" v-html="glEmojiTag('warning')"></span>
-    <gl-popover :target="htmlId" :content="warningMessage" triggers="hover focus" />
+    <gl-popover :target="htmlId" :content="warningMessage" />
  </span>
 </template>
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
@@ -149,12 +149,7 @@ export default {
          >
            {{ s__('mrWidget|Resolve conflicts') }}
          </gl-button>
-          <gl-popover
+          <gl-popover v-if="showPopover" :target="() => $refs.popover" placement="top">
-            v-if="showPopover"
-            :target="() => $refs.popover"
-            placement="top"
-            triggers="hover focus"
-          >
            <template #title>
              <div class="gl-font-weight-normal gl-font-base">
                {{ $options.i18n.title }}

--- a/app/assets/javascripts/vue_shared/components/help_popover.vue
+++ b/app/assets/javascripts/vue_shared/components/help_popover.vue
@@ -26,7 +26,7 @@ export default {
 <template>
  <span>
    <gl-button ref="popoverTrigger" variant="link" icon="question" tabindex="0" />
-    <gl-popover triggers="hover focus" :target="() => $refs.popoverTrigger.$el" v-bind="options">
+    <gl-popover :target="() => $refs.popoverTrigger.$el" v-bind="options">
      <template v-if="options.title" #title>
        <span v-safe-html="options.title"></span>
      </template>

--- a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
+++ b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
@@ -60,7 +60,7 @@ export default {
 <template>
  <!-- 200ms delay so not every mouseover triggers Popover -->
-  <gl-popover :target="target" :delay="200" boundary="viewport" triggers="hover" placement="top">
+  <gl-popover :target="target" :delay="200" boundary="viewport" placement="top">
    <div class="gl-p-3 gl-line-height-normal gl-display-flex" data-testid="user-popover">
      <div class="gl-p-2 flex-shrink-1">
        <user-avatar-image :img-src="user.avatarUrl" :size="60" css-classes="gl-mr-3!" />

--- a/changelogs/unreleased/gitlab-ui-integration-1226-make-popover-focus-by-default.yml
+++ b/changelogs/unreleased/gitlab-ui-integration-1226-make-popover-focus-by-default.yml
+---
+title: Show popovers on hover and focus by default
+merge_request: 56778
+author:
+type: changed
--- a/ee/app/assets/javascripts/approvals/components/empty_rule_name.vue
+++ b/ee/app/assets/javascripts/approvals/components/empty_rule_name.vue
@@ -29,12 +29,7 @@ export default {
        :size="14"
        class="author-link suggestion-help-hover"
      />
-      <gl-popover
+      <gl-popover target="pop-approver" container="popovercontainer" placement="top">
-        target="pop-approver"
-        container="popovercontainer"
-        placement="top"
-        triggers="hover focus"
-      >
        <template #title>{{ __('Who can approve?') }}</template>
        <ul class="pl-3">
          <li>

--- a/ee/app/assets/javascripts/approvals/components/rule_name.vue
+++ b/ee/app/assets/javascripts/approvals/components/rule_name.vue
@@ -67,7 +67,7 @@ export default {
        :size="14"
        class="author-link suggestion-help-hover"
      />
-      <gl-popover :target="popoverTarget" placement="top" triggers="hover focus">
+      <gl-popover :target="popoverTarget" placement="top">
        <template #title>{{ __('Who can approve?') }}</template>
        <p>{{ description }}</p>
        <gl-link v-if="linkPath" :href="linkPath" class="gl-font-sm" target="_blank">{{

--- a/ee/app/assets/javascripts/boards/components/epic_lane.vue
+++ b/ee/app/assets/javascripts/boards/components/epic_lane.vue
@@ -142,7 +142,7 @@ export default {
        >
          {{ epic.title }}
        </h4>
-        <gl-popover :target="() => $refs.epicTitle" triggers="hover" placement="top">
+        <gl-popover :target="() => $refs.epicTitle" placement="top">
          <template #title>{{ epic.title }} &middot; {{ epic.reference }}</template>
          <div>{{ epicTimeAgoString }}</div>
          <div class="gl-mb-2">{{ epicDateString }}</div>

--- a/ee/app/assets/javascripts/contextual_sidebar/components/trial_status_popover.vue
+++ b/ee/app/assets/javascripts/contextual_sidebar/components/trial_status_popover.vue
@@ -103,7 +103,6 @@ export default {
    :container="containerId"
    :target="targetId"
    :disabled="disabled"
-    triggers="hover focus"
    placement="rightbottom"
    boundary="viewport"
    :delay="{ hide: 400 }"

--- a/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
+++ b/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
@@ -116,7 +116,6 @@ export default {
      <gl-icon id="location-info" name="information" class="gl-text-blue-600" />
      <gl-popover
        target="location-info"
-        triggers="hover focus"
        placement="top"
        :title="s__('Dependencies|Location and dependency path')"
      >

--- a/ee/app/assets/javascripts/dependencies/components/dependency_location.vue
+++ b/ee/app/assets/javascripts/dependencies/components/dependency_location.vue
@@ -66,7 +66,6 @@ export default {
      <gl-popover
        :target="() => $refs.moreLink.$el"
        placement="top"
-        triggers="hover focus"
        :title="s__('Dependencies|Dependency path')"
      >
        <dependency-path-viewer :dependencies="ancestors" />

--- a/ee/app/assets/javascripts/geo_nodes/components/geo_node_detail_item.vue
+++ b/ee/app/assets/javascripts/geo_nodes/components/geo_node_detail_item.vue
@@ -117,12 +117,7 @@ export default {
          __('Synchronization disabled')
        }}</span>
      </div>
-      <gl-popover
+      <gl-popover :target="`syncDisabled-${itemTitle}`" placement="right" :css-classes="['w-100']">
-        :target="`syncDisabled-${itemTitle}`"
-        placement="right"
-        triggers="hover focus"
-        :css-classes="['w-100']"
-      >
        <section>
          <gl-sprintf :message="$options.disabledText">
            <template #itemTitle>{{ itemTitle.toLowerCase() }}</template>

--- a/ee/app/assets/javascripts/geo_nodes/components/geo_node_last_updated.vue
+++ b/ee/app/assets/javascripts/geo_nodes/components/geo_node_last_updated.vue
@@ -65,7 +65,7 @@ export default {
      name="question"
      class="text-primary-600 ml-1 cursor-pointer"
    />
-    <gl-popover :target="() => $refs.lastUpdated.$el" placement="top" triggers="hover focus">
+    <gl-popover :target="() => $refs.lastUpdated.$el" placement="top">
      <p>{{ syncTimeAgo.popoverText }}</p>
      <gl-link class="mt-3 gl-font-sm" :href="syncHelp.link" target="_blank">{{
        syncHelp.text

--- a/ee/app/assets/javascripts/geo_nodes/components/geo_node_replication_status.vue
+++ b/ee/app/assets/javascripts/geo_nodes/components/geo_node_replication_status.vue
@@ -53,11 +53,7 @@ export default {
        name="question"
        class="gl-text-blue-600 gl-ml-2 gl-cursor-pointer"
      />
-      <gl-popover
+      <gl-popover :target="() => $refs.replicationStatusHelp.$el" placement="top">
-        :target="() => $refs.replicationStatusHelp.$el"
-        placement="top"
-        triggers="hover focus"
-      >
        <p>{{ __('Geo nodes are paused using a command run on the node') }}</p>
        <gl-link
          class="gl-mt-5 gl-font-sm"

--- a/ee/app/assets/javascripts/geo_nodes/components/geo_node_sync_progress.vue
+++ b/ee/app/assets/javascripts/geo_nodes/components/geo_node_sync_progress.vue
@@ -54,12 +54,7 @@ export default {
      :failure-count="failureCount"
      :total-count="totalCount"
    />
-    <gl-popover
+    <gl-popover :target="`syncProgress-${itemTitle}`" placement="right" :css-classes="['w-100']">
-      :target="`syncProgress-${itemTitle}`"
-      placement="right"
-      triggers="hover focus"
-      :css-classes="['w-100']"
-    >
      <template #title>
        <gl-sprintf :message="__('Number of %{itemTitle}')">
          <template #itemTitle>

--- a/ee/app/assets/javascripts/geo_nodes/components/node_detail_sections/node_details_section_verification.vue
+++ b/ee/app/assets/javascripts/geo_nodes/components/node_detail_sections/node_details_section_verification.vue
@@ -86,7 +86,7 @@ export default {
        name="question"
        class="text-primary-600 ml-1 cursor-pointer"
      />
-      <gl-popover :target="() => $refs.verificationInfo.$el" placement="top" triggers="hover focus">
+      <gl-popover :target="() => $refs.verificationInfo.$el" placement="top">
        <p>
          <gl-sprintf
            :message="

--- a/ee/app/assets/javascripts/geo_nodes_beta/components/header/geo_node_last_updated.vue
+++ b/ee/app/assets/javascripts/geo_nodes_beta/components/header/geo_node_last_updated.vue
@@ -63,7 +63,7 @@ export default {
      name="question"
      class="gl-text-blue-500 gl-cursor-pointer gl-ml-2"
    />
-    <gl-popover :target="() => $refs.lastUpdated.$el" placement="top" triggers="hover focus">
+    <gl-popover :target="() => $refs.lastUpdated.$el" placement="top">
      <p>{{ syncTimeAgo.popoverText }}</p>
      <gl-link :href="syncHelp.link" target="_blank">{{ syncHelp.text }}</gl-link>
    </gl-popover>

--- a/ee/app/assets/javascripts/issues_analytics/components/issues_analytics_table.vue
+++ b/ee/app/assets/javascripts/issues_analytics/components/issues_analytics_table.vue
@@ -171,7 +171,6 @@ export default {
            <gl-popover
              :target="`${item.id}-labels`"
              placement="top"
-              triggers="hover"
              :css-classes="['issue-labels-popover']"
            >
              <div class="gl-display-flex gl-justify-content-start gl-flex-wrap gl-mr-1">

--- a/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue
@@ -94,12 +94,7 @@ export default {
        >
      </div>
    </div>
-    <gl-popover
+    <gl-popover :target="rotationAssigneeUniqueID" :title="assignee.user.username" placement="top">
-      :target="rotationAssigneeUniqueID"
-      :title="assignee.user.username"
-      triggers="hover"
-      placement="top"
-    >
      <p class="gl-m-0" data-testid="rotation-assignee-starts-at">
        {{ startsAt }}
      </p>

--- a/ee/app/assets/javascripts/requirements/components/requirement_item.vue
+++ b/ee/app/assets/javascripts/requirements/components/requirement_item.vue
@@ -152,7 +152,7 @@ export default {
        </ul>
      </div>
    </div>
-    <gl-popover :target="getAuthorPopoverTarget()" triggers="hover focus" placement="top">
+    <gl-popover :target="getAuthorPopoverTarget()" placement="top">
      <div class="gl-line-height-normal gl-display-flex">
        <div class="gl-p-2 gl-flex-shrink-1">
          <gl-avatar :entity-name="author.name" :alt="author.name" :src="author.avatarUrl" />

--- a/ee/app/assets/javascripts/roadmap/components/epic_item_timeline.vue
+++ b/ee/app/assets/javascripts/roadmap/components/epic_item_timeline.vue
@@ -135,7 +135,7 @@ export default {
        </div>
      </div>
    </a>
-    <gl-popover :target="generateKey(epic)" :title="epic.title" triggers="hover" placement="left">
+    <gl-popover :target="generateKey(epic)" :title="epic.title" placement="left">
      <p class="gl-text-gray-500 gl-m-0">{{ timeframeString(epic) }}</p>
      <p class="gl-m-0">{{ popoverWeightText }}</p>
    </gl-popover>

--- a/ee/app/assets/javascripts/roadmap/components/milestone_item.vue
+++ b/ee/app/assets/javascripts/roadmap/components/milestone_item.vue
@@ -131,7 +131,6 @@ export default {
        :target="`milestone-item-${milestone.id}`"
        boundary="viewport"
        placement="left"
-        triggers="hover"
        :title="milestone.title"
      >
        <div class="milestone-item-type gl-line-height-normal">

--- a/ee/app/assets/javascripts/security_dashboard/components/auto_fix_help_text.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/auto_fix_help_text.vue
@@ -48,7 +48,6 @@ export default {
      data-testid="vulnerability-solutions-popover"
      :target="() => $refs.popover"
      placement="top"
-      triggers="hover focus"
    >
      <template #title>
        <span>{{ s__('AutoRemediation| 1 Merge Request') }}</span>

--- a/ee/app/assets/javascripts/security_dashboard/components/issues_badge.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/issues_badge.vue
@@ -41,7 +41,7 @@ export default {
      <gl-icon name="issues" class="gl-mr-2" />
      {{ numberOfIssues }}
    </gl-badge>
-    <gl-popover ref="popover" :target="issueBadgeEl" triggers="hover" placement="top">
+    <gl-popover ref="popover" :target="issueBadgeEl" placement="top">
      <template #title>
        {{ popoverTitle }}
      </template>

--- a/ee/app/assets/javascripts/threat_monitoring/components/app.vue
+++ b/ee/app/assets/javascripts/threat_monitoring/components/app.vue
@@ -99,7 +99,7 @@ export default {
        >
          <gl-icon name="question" />
        </gl-link>
-        <gl-popover :target="() => $refs.helpLink" triggers="hover focus">
+        <gl-popover :target="() => $refs.helpLink">
          {{ $options.helpPopoverText }}
        </gl-popover>
      </h2>

--- a/ee/app/assets/javascripts/vulnerabilities/components/remediated_badge.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/remediated_badge.vue
@@ -38,7 +38,6 @@ export default {
      :target="target"
      :title="__('Vulnerability remediated. Review before resolving.')"
      placement="top"
-      triggers="hover focus"
    />
  </div>
 </template>
--- a/ee/spec/frontend/contextual_sidebar/__snapshots__/group_trial_status_popover_spec.js.snap
+++ b/ee/spec/frontend/contextual_sidebar/__snapshots__/group_trial_status_popover_spec.js.snap
@@ -7,7 +7,6 @@ exports[`TrialStatusPopover component matches the snapshot 1`] = `
  delay="[object Object]"
  placement="rightbottom"
  target="target-element-identifier"
-  triggers="hover focus"
 >
  <gl-sprintf-stub

--- a/ee/spec/frontend/security_dashboard/components/empty_states/__snapshots__/dashboard_has_no_vulnerabilities_spec.js.snap
+++ b/ee/spec/frontend/security_dashboard/components/empty_states/__snapshots__/dashboard_has_no_vulnerabilities_spec.js.snap
@@ -11,7 +11,7 @@ exports[`dashboard has no vulnerabilities empty state matches snapshot 1`] = `
      <p>
        Although it's rare to have no vulnerabilities, it can happen. Check your settings to make sure you've set up your dashboard correctly.
      </p>
-      <div><a href=\\"/path/to/dashboard/documentation\\" class=\\"btn btn-success btn-md gl-button\\">
+      <div class=\\"gl-display-flex gl-flex-wrap gl-justify-content-center\\"><a href=\\"/path/to/dashboard/documentation\\" class=\\"btn gl-mb-3 btn-confirm btn-md gl-button gl-mx-2\\">
          <!---->
          <!----> <span class=\\"gl-button-text\\">Learn more about setting up your dashboard</span></a>
        <!---->

--- a/ee/spec/frontend_integration/security_dashboard/__snapshots__/first_class_init_integration_spec.js.snap
+++ b/ee/spec/frontend_integration/security_dashboard/__snapshots__/first_class_init_integration_spec.js.snap
@@ -32,9 +32,11 @@ exports[`Vulnerability Report error states has unavailable pages 1`] = `
        <p>
          Either you don't have permission to view this dashboard or the dashboard has not been setup. Please check your permission settings with your administrator or check your dashboard configurations to proceed.
        </p>
-        <div>
+        <div
+          class="gl-display-flex gl-flex-wrap gl-justify-content-center"
+        >
          <a
-            class="btn btn-success btn-md gl-button"
+            class="btn gl-mb-3 btn-confirm btn-md gl-button gl-mx-2"
            href="/test/dashboard_page"
          >
            <span

--- a/ee/spec/frontend_integration/security_dashboard/__snapshots__/security_charts_init_integration_spec.js.snap
+++ b/ee/spec/frontend_integration/security_dashboard/__snapshots__/security_charts_init_integration_spec.js.snap
@@ -62,9 +62,11 @@ exports[`Security Charts error states has unavailable pages 1`] = `
        <p>
          Either you don't have permission to view this dashboard or the dashboard has not been setup. Please check your permission settings with your administrator or check your dashboard configurations to proceed.
        </p>
-        <div>
+        <div
+          class="gl-display-flex gl-flex-wrap gl-justify-content-center"
+        >
          <a
-            class="btn btn-success btn-md gl-button"
+            class="btn gl-mb-3 btn-confirm btn-md gl-button gl-mx-2"
            href="/test/dashboard_page"
          >
            <span

--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
    "@gitlab/favicon-overlay": "2.0.0",
    "@gitlab/svgs": "1.185.0",
    "@gitlab/tributejs": "1.0.0",
-    "@gitlab/ui": "28.9.1",
+    "@gitlab/ui": "28.15.0",
    "@gitlab/visual-review-tools": "1.6.1",
    "@rails/actioncable": "^6.0.3-4",
    "@rails/ujs": "^6.0.3-4",

--- a/spec/frontend/feature_highlight/feature_highlight_popover_spec.js
+++ b/spec/frontend/feature_highlight/feature_highlight_popover_spec.js
@@ -41,7 +41,6 @@ describe('feature_highlight/feature_highlight_popover', () => {
    expect(findPopover().props()).toMatchObject({
      target: POPOVER_TARGET_ID,
      cssClasses: ['feature-highlight-popover'],
-      triggers: 'hover',
      container: 'body',
      placement: 'right',
      boundary: 'viewport',

--- a/spec/frontend/packages/list/components/__snapshots__/packages_list_app_spec.js.snap
+++ b/spec/frontend/packages/list/components/__snapshots__/packages_list_app_spec.js.snap
@@ -52,7 +52,9 @@ exports[`packages_list_app renders 1`] = `
             with GitLab.
          </p>
-          <div>
+          <div
+            class="gl-display-flex gl-flex-wrap gl-justify-content-center"
+          >
            <!---->
            <!---->

--- a/spec/frontend/serverless/components/__snapshots__/empty_state_spec.js.snap
+++ b/spec/frontend/serverless/components/__snapshots__/empty_state_spec.js.snap
@@ -10,8 +10,8 @@ exports[`EmptyStateComponent should render content 1`] = `
      <h1 class=\\"h4\\">Getting started with serverless</h1>
      <p>In order to start using functions as a service, you must first install Knative on your Kubernetes cluster. <gl-link-stub href=\\"/help\\">More information</gl-link-stub>
      </p>
-      <div>
+      <div class=\\"gl-display-flex gl-flex-wrap gl-justify-content-center\\">
-        <gl-button-stub category=\\"primary\\" variant=\\"success\\" size=\\"medium\\" icon=\\"\\" buttontextclasses=\\"\\" href=\\"/clusters\\">Install Knative</gl-button-stub>
+        <gl-button-stub category=\\"primary\\" variant=\\"confirm\\" size=\\"medium\\" icon=\\"\\" buttontextclasses=\\"\\" href=\\"/clusters\\" class=\\"gl-mb-3 gl-mx-2\\">Install Knative</gl-button-stub>
        <!---->
      </div>
    </div>

--- a/spec/frontend/vue_shared/components/help_popover_spec.js
+++ b/spec/frontend/vue_shared/components/help_popover_spec.js
@@ -41,10 +41,6 @@ describe('HelpPopover', () => {
    expect(findPopover().props().target()).toBe(findQuestionButton().vm.$el);
  });
-  it('triggers popover on hover and focus', () => {
-    expect(findPopover().props().triggers).toBe('hover focus');
-  });
  it('allows rendering title with HTML tags', () => {
    expect(findPopover().find('strong').exists()).toBe(true);
  });

--- a/yarn.lock
+++ b/yarn.lock
@@ -907,16 +907,16 @@
  resolved "https://registry.yarnpkg.com/@gitlab/tributejs/-/tributejs-1.0.0.tgz#672befa222aeffc83e7d799b0500a7a4418e59b8"
  integrity sha512-nmKw1+hB6MHvlmPz63yPwVs1qQkycHwsKgxpEbzmky16Y6mL4EJMk3w1b8QlOAF/AIAzjCERPhe/R4MJiohbZw==
-"@gitlab/ui@28.9.1":
+"@gitlab/ui@28.15.0":
-  version "28.9.1"
+  version "28.15.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-28.9.1.tgz#7d4d4502ff09fca19ab815504f80afbf03dd2fc1"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-28.15.0.tgz#e78a1c0724c7cc8880fcff8161e529ca7bcaf6e8"
-  integrity sha512-+JqkpwzkKBnxo4KkC8XSPEJ5Au9y+TIOE7w9I5o+04krgWCbZKNqaiKZkg2IqSlo/sZSfvihXZMhEVc/JXf7HQ==
+  integrity sha512-muz1tX3nQmu9dMv7GbTNIkWkEwYhvnLPhtwtnrt8eyRGQ0zIUWLEzdoSiwvMNLAqT2JB8kxahoavR5iSFAYtXA==
  dependencies:
    "@babel/standalone" "^7.0.0"
    "@gitlab/vue-toasted" "^1.3.0"
    bootstrap-vue "2.13.1"
    copy-to-clipboard "^3.0.8"
-    dompurify "^2.2.6"
+    dompurify "^2.2.7"
    echarts "^4.9.0"
    highlight.js "^10.6.0"
    js-beautify "^1.8.8"
@@ -4270,7 +4270,7 @@ domhandler@^2.3.0:
  dependencies:
    domelementtype "1"
-dompurify@^2.2.6, dompurify@^2.2.7:
+dompurify@^2.2.7:
  version "2.2.7"
  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.2.7.tgz#a5f055a2a471638680e779bd08fc334962d11fd8"
  integrity sha512-jdtDffdGNY+C76jvodNTu9jt5yYj59vuTUyx+wXdzcSwAGTYZDAQkQ7Iwx9zcGrA4ixC1syU4H3RZROqRxokxg==