Merge branch '56587-update-frequent-items-styling-for-responsive-top-nav' into 'master'

Update frequent_items to upcoming resp styling

See merge request gitlab-org/gitlab!63108

app/assets/javascripts/frequent_items/components/app.vue

@@ -30,6 +30,11 @@ export default {
       type: Object,
       required: true,
     },
+    searchClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     ...mapVuexModuleState((vm) => vm.vuexModule, [
@@ -115,7 +120,11 @@ export default {
 
 <template>
   <div class="gl-display-flex gl-flex-direction-column gl-flex-align-items-stretch gl-h-full">
-    <frequent-items-search-input :namespace="namespace" data-testid="frequent-items-search-input" />
+    <frequent-items-search-input
+      :namespace="namespace"
+      :class="searchClass"
+      data-testid="frequent-items-search-input"
+    />
     <gl-loading-icon
       v-if="isLoadingItems"
       :label="translations.loadingMessage"

app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue

@@ -58,7 +58,7 @@ export default {
   <li class="frequent-items-list-item-container">
     <a
       :href="webUrl"
-      class="clearfix"
+      class="clearfix dropdown-item"
       @click="track('click_link', { label: `${dropdownType}_dropdown_frequent_items_list_item` })"
     >
       <div

app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue

@@ -39,7 +39,7 @@ export default {
 </script>
 
 <template>
-  <div class="search-input-container d-none d-sm-block">
+  <div class="search-input-container">
     <gl-search-box-by-type
       v-model="searchQuery"
       :placeholder="translations.searchInputPlaceholder"

app/assets/javascripts/frequent_items/index.js

@@ -60,6 +60,7 @@ export default function initFrequentItemDropdowns() {
                     namespace,
                     currentUserName: this.currentUserName,
                     currentItem: this.currentItem,
+                    searchClass: 'gl-display-none gl-sm-display-block',
                   },
                 }),
               ],

spec/frontend/frequent_items/components/app_spec.js

@@ -21,13 +21,14 @@ const TEST_NAMESPACE = 'projects';
 const TEST_VUEX_MODULE = 'frequentProjects';
 const TEST_PROJECT = currentSession[TEST_NAMESPACE].project;
 const TEST_STORAGE_KEY = currentSession[TEST_NAMESPACE].storageKey;
+const TEST_SEARCH_CLASS = 'test-search-class';
 
 describe('Frequent Items App Component', () => {
   let wrapper;
   let mock;
   let store;
 
-  const createComponent = ({ currentItem = null } = {}) => {
+  const createComponent = (props = {}) => {
     const session = currentSession[TEST_NAMESPACE];
     gon.api_version = session.apiVersion;
 
@@ -36,7 +37,8 @@ describe('Frequent Items App Component', () => {
       propsData: {
         namespace: TEST_NAMESPACE,
         currentUserName: session.username,
-        currentItem: currentItem || session.project,
+        currentItem: session.project,
+        ...props,
       },
       provide: {
         vuexModule: TEST_VUEX_MODULE,
@@ -88,7 +90,7 @@ describe('Frequent Items App Component', () => {
     });
 
     it('should render search input', () => {
-      expect(findSearchInput().exists()).toBe(true);
+      expect(findSearchInput().classes()).toEqual(['search-input-container']);
     });
 
     it('should render loading animation', async () => {
@@ -159,6 +161,16 @@ describe('Frequent Items App Component', () => {
     });
   });
 
+  describe('with searchClass', () => {
+    beforeEach(() => {
+      createComponent({ searchClass: TEST_SEARCH_CLASS });
+    });
+
+    it('should render search input with searchClass', () => {
+      expect(findSearchInput().classes()).toEqual(['search-input-container', TEST_SEARCH_CLASS]);
+    });
+  });
+
   describe('logging', () => {
     it('when created, it should create a project storage entry and adds a project', () => {
       createComponent();

spec/frontend/nav/components/top_nav_container_view_spec.js

@@ -16,8 +16,8 @@ const DEFAULT_PROPS = {
 };
 const TEST_OTHER_PROPS = {
   namespace: 'projects',
-  currentUserName: '',
-  currentItem: {},
+  currentUserName: 'test-user',
+  currentItem: { id: 'test' },
 };
 
 describe('~/nav/components/top_nav_container_view.vue', () => {
@@ -84,7 +84,7 @@ describe('~/nav/components/top_nav_container_view.vue', () => {
     it('renders frequent items app', () => {
       expect(findFrequentItemsApp()).toEqual({
         vuexModule: DEFAULT_PROPS.frequentItemsVuexModule,
-        props: TEST_OTHER_PROPS,
+        props: expect.objectContaining(TEST_OTHER_PROPS),
         attributes: expect.objectContaining(EXTRA_ATTRS),
       });
     });