Trigger load of images only on first navigation

- update router
- add feature test to ensure coverage of the functionality

app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue

@@ -24,10 +24,10 @@ export default {
     },
     lastCrumb() {
       const { children } = last(this.crumbs);
-      const { tagName, classList } = first(children);
+      const { tagName, className } = first(children);
       return {
         tagName,
-        classList: [...classList],
+        className,
         text: this.$route.meta.nameGenerator(this.$route),
         path: { to: this.$route.name },
       };
@@ -41,7 +41,7 @@ export default {
     <li
       v-for="(crumb, index) in rootCrumbs"
       :key="index"
-      :class="crumb.classList"
+      :class="crumb.className"
       v-html="crumb.innerHTML"
     ></li>
     <li v-if="!isRootRoute">
@@ -51,7 +51,7 @@ export default {
       <component :is="divider.tagName" :class="divider.classList" v-html="divider.innerHTML" />
     </li>
     <li>
-      <component :is="lastCrumb.tagName" ref="lastCrumb" :class="lastCrumb.classList">
+      <component :is="lastCrumb.tagName" ref="lastCrumb" :class="lastCrumb.className">
         <router-link ref="childRouteLink" :to="lastCrumb.path">{{ lastCrumb.text }}</router-link>
       </component>
     </li>

app/assets/javascripts/registry/explorer/router.js

@@ -21,7 +21,9 @@ export default function createRouter(base, store) {
           root: true,
         },
         beforeEnter: (to, from, next) => {
-          store.dispatch('requestImagesList');
+          if (!from.name || !store.state.images?.length) {
+            store.dispatch('requestImagesList');
+          }
           next();
         },
       },

spec/features/projects/container_registry_spec.rb

@@ -149,12 +149,36 @@ describe 'Container Registry', :js do
         end
 
         it('pagination navigate to the second page') do
-          pagination = find('.gl-pagination')
-          pagination.click_link('2')
+          visit_second_page
           expect(page).to have_content '20'
         end
       end
     end
+
+    context 'when there are more than 10 images' do
+      before do
+        create_list(:container_repository, 12, project: project)
+        project.container_repositories << container_repository
+        visit_container_registry
+      end
+
+      it 'shows pagination' do
+        expect(page).to have_css '.gl-pagination'
+      end
+
+      it 'pagination goes to second page' do
+        visit_second_page
+        expect(page).to have_content 'my/image'
+      end
+
+      it 'pagination is preserved after navigating back from details' do
+        visit_second_page
+        click_link 'my/image'
+        breadcrumb = find '.breadcrumbs'
+        breadcrumb.click_link 'Container Registry'
+        expect(page).to have_content 'my/image'
+      end
+    end
   end
 
   def visit_container_registry
@@ -163,6 +187,11 @@ describe 'Container Registry', :js do
 
   def visit_container_registry_details(name)
     visit_container_registry
-    click_link(name)
+    click_link name
+  end
+
+  def visit_second_page
+    pagination = find '.gl-pagination'
+    pagination.click_link '2'
   end
 end

spec/frontend/registry/explorer/components/registry_breadcrumb_spec.js

@@ -7,14 +7,14 @@ describe('Registry Breadcrumb', () => {
   const nameGenerator = jest.fn();
 
   const crumb = {
-    classList: ['foo', 'bar'],
+    className: 'foo bar',
     tagName: 'div',
     innerHTML: 'baz',
     querySelector: jest.fn(),
     children: [
       {
         tagName: 'a',
-        classList: ['foo'],
+        className: 'foo',
       },
     ],
   };
@@ -25,7 +25,7 @@ describe('Registry Breadcrumb', () => {
     innerHTML: 'foo',
   };
 
-  const crumbs = [crumb, { ...crumb, innerHTML: 'foo' }, { ...crumb, classList: ['baz'] }];
+  const crumbs = [crumb, { ...crumb, innerHTML: 'foo' }, { ...crumb, className: 'baz' }];
 
   const routes = [
     { name: 'foo', meta: { nameGenerator, root: true } },
@@ -121,7 +121,11 @@ describe('Registry Breadcrumb', () => {
     });
 
     it('has the same classes as the last children of the crumbs', () => {
-      expect(findLastCrumb().classes()).toEqual(lastChildren.classList);
+      expect(
+        findLastCrumb()
+          .classes()
+          .join(' '),
+      ).toEqual(lastChildren.className);
     });
 
     it('has a link to the current route', () => {