Context switcher search improvements

What does this MR do and why?

This improves the context switcher's search feature by...

• ...showing a loading spinner while search results are being fetched.
• ...showing an alert when a search query fails.
• ...automatically focusing the search input when opening the context switcher.
• ...adjusting the toggle's colors and focus ring.

Screenshots or screen recordings

Loading spinner	Error alert

How to set up and validate locally

1. Enable the new nav:

   1. Enable the feature flag:

      echo "Feature.enable(:super_sidebar_nav)" | rails c

   2. Enable the user setting from the user dropdown:

      

2. In the super sidebar, click on the context title to expand the context switcher.

3. To get the error alert to show up, disable the internet connection before searching for items

   

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #378541 (closed)

app/assets/javascripts/super_sidebar/components/context_switcher.vue

 <script>
 import * as Sentry from '@sentry/browser';
-import { GlSearchBoxByType, GlLoadingIcon } from '@gitlab/ui';
+import { GlSearchBoxByType, GlLoadingIcon, GlAlert } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import searchUserProjectsAndGroups from '../graphql/queries/search_user_groups_and_projects.query.graphql';
@@ -16,6 +16,7 @@ export default {
     switchTo: s__('Navigation|Switch to...'),
     searchPlaceholder: s__('Navigation|Search for projects or groups'),
     searchingLabel: s__('Navigation|Retrieving search results'),
+    searchError: s__('Navigation|There was an error fetching search results.'),
   },
   apollo: {
     groupsAndProjects: {
@@ -28,6 +29,7 @@ export default {
         };
       },
       result(response) {
+        this.hasError = false;
         try {
           const {
             data: {
@@ -41,11 +43,11 @@ export default {
           this.projects = formatContextSwitcherItems(projects);
           this.groups = formatContextSwitcherItems(groups);
         } catch (e) {
-          Sentry.captureException(e);
+          this.handleError(e);
         }
       },
       error(e) {
-        Sentry.captureException(e);
+        this.handleError(e);
       },
       skip() {
         return !this.searchString;
@@ -55,6 +57,7 @@ export default {
   components: {
     GlSearchBoxByType,
     GlLoadingIcon,
+    GlAlert,
     NavItem,
     ProjectsList,
     GroupsList,
@@ -83,6 +86,7 @@ export default {
       searchString: '',
       projects: [],
       groups: [],
+      hasError: false,
     };
   },
   computed: {
@@ -90,12 +94,18 @@ export default {
       return Boolean(this.searchString);
     },
   },
-  contextSwitcherItems,
   created() {
     if (this.currentContext.namespace) {
       trackContextAccess(this.username, this.currentContext);
     }
   },
+  methods: {
+    handleError(e) {
+      Sentry.captureException(e);
+      this.hasError = true;
+    },
+  },
+  contextSwitcherItems,
   DEFAULT_DEBOUNCE_AND_THROTTLE_MS,
 };
 </script>
@@ -118,6 +128,9 @@ export default {
       size="md"
       :label="$options.i18n.searchingLabel"
     />
+    <gl-alert v-else-if="hasError" variant="danger" :dismissible="false" class="gl-m-2">
+      {{ $options.i18n.searchError }}
+    </gl-alert>
     <nav v-else :aria-label="$options.i18n.contextNavigation">
       <ul class="gl-p-0 gl-list-style-none">
         <li v-if="!isSearch">