Remove warning icon in request selector

This indicator can be misleading when the results for AJAX requests are
lazy-loaded.

app/assets/javascripts/performance_bar/components/request_selector.vue

 <script>
-import { GlPopover, GlSafeHtmlDirective } from '@gitlab/ui';
-import { glEmojiTag } from '~/emoji';
-import { n__ } from '~/locale';
-
 export default {
-  components: {
-    GlPopover,
-  },
-  directives: {
-    SafeHtml: GlSafeHtmlDirective,
-  },
   props: {
     currentRequest: {
       type: Object,
@@ -25,27 +15,11 @@ export default {
       currentRequestId: this.currentRequest.id,
     };
   },
-  computed: {
-    requestsWithWarnings() {
-      return this.requests.filter((request) => request.hasWarnings);
-    },
-    warningMessage() {
-      return n__(
-        '%d request with warnings',
-        '%d requests with warnings',
-        this.requestsWithWarnings.length,
-      );
-    },
-  },
   watch: {
     currentRequestId(newRequestId) {
       this.$emit('change-current-request', newRequestId);
     },
   },
-  methods: {
-    glEmojiTag,
-  },
-  safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
 };
 </script>
 <template>
@@ -58,19 +32,7 @@ export default {
         data-qa-selector="request_dropdown_option"
       >
         {{ request.truncatedUrl }}
-        <span v-if="request.hasWarnings">(!)</span>
       </option>
     </select>
-    <span v-if="requestsWithWarnings.length" class="gl-cursor-default">
-      <span
-        id="performance-bar-request-selector-warning"
-        v-safe-html:[$options.safeHtmlConfig]="glEmojiTag('warning')"
-      ></span>
-      <gl-popover
-        placement="bottom"
-        target="performance-bar-request-selector-warning"
-        :content="warningMessage"
-      />
-    </span>
   </div>
 </template>

app/assets/javascripts/performance_bar/stores/performance_bar_store.js

@@ -12,7 +12,6 @@ export default class PerformanceBarStore {
         url: requestUrl,
         truncatedUrl: shortUrl,
         details: {},
-        hasWarnings: false,
       });
     }
 
@@ -27,7 +26,6 @@ export default class PerformanceBarStore {
     const request = this.findRequest(requestId);
 
     request.details = requestDetails.data;
-    request.hasWarnings = requestDetails.has_warnings;
 
     return request;
   }

doc/administration/monitoring/performance/performance_bar.md

@@ -95,18 +95,14 @@ For non-administrators to display the performance bar, it must be
 
 ## Request warnings
 
+> [Warning icon in the request selector removed](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/82187) in GitLab 14.9.
+
 Requests that exceed predefined limits display a warning **{warning}** icon and
 explanation next to the metric. In this example, the Gitaly call duration
 exceeded the threshold.
 
 ![Gitaly call duration exceeded threshold](img/performance_bar_gitaly_threshold.png)
 
-If any requests on the current page generated warnings, the warning icon displays
-next to the **Requests** selector menu. In this selector menu, an exclamation `(!)`
-appears next to requests with warnings.
-
-![Request selector showing two requests with warnings](img/performance_bar_request_selector_warning.png)
-
 ## Enable the performance bar for non-administrators
 
 The performance bar is disabled by default for non-administrators. To enable it

locale/gitlab.pot

@@ -371,11 +371,6 @@ msgid_plural "%d projects selected"
 msgstr[0] ""
 msgstr[1] ""
-msgid "%d request with warnings"
-msgid_plural "%d requests with warnings"
-msgstr[0] ""
-msgstr[1] ""
-
 msgid "%d second"
 msgid_plural "%d seconds"
 msgstr[0] ""

spec/frontend/performance_bar/components/request_selector_spec.js

-import { shallowMount } from '@vue/test-utils';
-import RequestSelector from '~/performance_bar/components/request_selector.vue';
-
-describe('request selector', () => {
-  const requests = [
-    {
-      id: 'warningReq',
-      url: 'https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/1/discussions.json',
-      truncatedUrl: 'discussions.json',
-      hasWarnings: true,
-    },
-  ];
-
-  const wrapper = shallowMount(RequestSelector, {
-    propsData: {
-      requests,
-      currentRequest: requests[0],
-    },
-  });
-
-  it('has a warning icon if any requests have warnings', () => {
-    expect(wrapper.find('span > gl-emoji').element.dataset.name).toEqual('warning');
-  });
-
-  it('adds a warning glyph to requests with warnings', () => {
-    const requestValue = wrapper.find('[value="warningReq"]').text();
-
-    expect(requestValue).toContain('discussions.json');
-    expect(requestValue).toContain('(!)');
-  });
-});