Refactor isDesktop to isMobile for more control

- tag list
- tag list row
- tests

app/assets/javascripts/registry/explorer/components/details_page/tags_list.vue

@@ -14,9 +14,9 @@ export default {
       required: false,
       default: () => [],
     },
-    isDesktop: {
+    isMobile: {
       type: Boolean,
-      default: false,
+      default: true,
       required: false,
     },
   },
@@ -34,7 +34,7 @@ export default {
       return this.tags.some(tag => this.selectedItems[tag.name]);
     },
     showMultiDeleteButton() {
-      return this.tags.some(tag => tag.destroy_path) && this.isDesktop;
+      return this.tags.some(tag => tag.destroy_path) && !this.isMobile;
     },
   },
   methods: {
@@ -68,7 +68,7 @@ export default {
       :tag="tag"
       :first="index === 0"
       :selected="selectedItems[tag.name]"
-      :is-desktop="isDesktop"
+      :is-mobile="isMobile"
       @select="updateSelectedItems(tag.name)"
       @delete="$emit('delete', { [tag.name]: true })"
     />

app/assets/javascripts/registry/explorer/components/details_page/tags_list_row.vue

@@ -40,9 +40,9 @@ export default {
       type: Object,
       required: true,
     },
-    isDesktop: {
+    isMobile: {
       type: Boolean,
-      default: false,
+      default: true,
       required: false,
     },
     selected: {
@@ -69,7 +69,7 @@ export default {
       return this.tag.layers ? n__('%d layer', '%d layers', this.tag.layers) : '';
     },
     mobileClasses() {
-      return this.isDesktop ? '' : 'mw-s';
+      return this.isMobile ? 'mw-s' : '';
     },
     shortDigest() {
       // remove sha256: from the string, and show only the first 7 char

app/assets/javascripts/registry/explorer/pages/details.vue

@@ -37,7 +37,7 @@ export default {
   data() {
     return {
       itemsToBeDeleted: [],
-      isDesktop: true,
+      isMobile: false,
       deleteAlertType: null,
       dismissPartialCleanupWarning: false,
     };
@@ -110,7 +110,7 @@ export default {
       }
     },
     handleResize() {
-      this.isDesktop = GlBreakpointInstance.isDesktop();
+      this.isMobile = GlBreakpointInstance.getBreakpointSize() === 'xs';
     },
   },
 };
@@ -137,7 +137,7 @@ export default {
     <tags-loader v-if="isLoading" />
     <template v-else>
       <empty-tags-state v-if="tags.length === 0" :no-containers-image="config.noContainersImage" />
-      <tags-list v-else :tags="tags" :is-desktop="isDesktop" @delete="deleteTags" />
+      <tags-list v-else :tags="tags" :is-mobile="isMobile" @delete="deleteTags" />
     </template>
 
     <gl-pagination

changelogs/unreleased/251136-delete-selected-button-in-container-registry-is-not-visible-on-nar.yml

+---
+title: 'container registry: show delete selected button on medium viewports'
+merge_request: 46699
+author:
+type: fixed

spec/frontend/registry/explorer/components/details_page/tags_list_row_spec.js

@@ -22,7 +22,7 @@ describe('tags list row', () => {
   let wrapper;
   const [tag] = [...tagsListResponse.data];
 
-  const defaultProps = { tag, isDesktop: true, index: 0 };
+  const defaultProps = { tag, isMobile: false, index: 0 };
 
   const findCheckbox = () => wrapper.find(GlFormCheckbox);
   const findName = () => wrapper.find('[data-testid="name"]');
@@ -114,7 +114,7 @@ describe('tags list row', () => {
     });
 
     it('on mobile has mw-s class', () => {
-      mountComponent({ ...defaultProps, isDesktop: false });
+      mountComponent({ ...defaultProps, isMobile: true });
 
       expect(findName().classes('mw-s')).toBe(true);
     });

spec/frontend/registry/explorer/components/details_page/tags_list_spec.js

@@ -14,7 +14,7 @@ describe('Tags List', () => {
   const findDeleteButton = () => wrapper.find(GlButton);
   const findListTitle = () => wrapper.find('[data-testid="list-title"]');
 
-  const mountComponent = (propsData = { tags, isDesktop: true }) => {
+  const mountComponent = (propsData = { tags, isMobile: false }) => {
     wrapper = shallowMount(component, {
       propsData,
     });
@@ -41,15 +41,15 @@ describe('Tags List', () => {
 
   describe('delete button', () => {
     it.each`
-      inputTags       | isDesktop | isVisible
-      ${tags}         | ${true}   | ${true}
-      ${tags}         | ${false}  | ${false}
-      ${readOnlyTags} | ${true}   | ${false}
+      inputTags       | isMobile | isVisible
+      ${tags}         | ${false} | ${true}
+      ${tags}         | ${true}  | ${false}
       ${readOnlyTags} | ${false} | ${false}
+      ${readOnlyTags} | ${true}  | ${false}
     `(
-      'is $isVisible that delete button exists when tags is $inputTags and isDesktop is $isDesktop',
-      ({ inputTags, isDesktop, isVisible }) => {
-        mountComponent({ tags: inputTags, isDesktop });
+      'is $isVisible that delete button exists when tags is $inputTags and isMobile is $isMobile',
+      ({ inputTags, isMobile, isVisible }) => {
+        mountComponent({ tags: inputTags, isMobile });
 
         expect(findDeleteButton().exists()).toBe(isVisible);
       },
@@ -110,12 +110,6 @@ describe('Tags List', () => {
 
       expect(rows.at(0).attributes()).toMatchObject({
         first: 'true',
-        isdesktop: 'true',
-      });
-
-      // The list has only two tags and for some reasons .at(-1) does not work
-      expect(rows.at(1).attributes()).toMatchObject({
-        isdesktop: 'true',
       });
     });
 

spec/frontend/registry/explorer/pages/details_spec.js

@@ -124,7 +124,7 @@ describe('Details Page', () => {
 
     it('has the correct props bound', () => {
       expect(findTagsList().props()).toMatchObject({
-        isDesktop: true,
+        isMobile: false,
         tags: store.state.tags,
       });
     });