Commit fd948a1d authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera Committed by Nathan Friend

Refactor isDesktop to isMobile for more control

- tag list
- tag list row
- tests
parent 6c28d848
......@@ -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 })"
/>
......
......@@ -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
......
......@@ -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
......
---
title: 'container registry: show delete selected button on medium viewports'
merge_request: 46699
author:
type: fixed
......@@ -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);
});
......
......@@ -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',
});
});
......
......@@ -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,
});
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment