Commit a37d672f authored by Nick Kipling's avatar Nick Kipling Committed by Nathan Friend

Applying feedback changes

Updated table registry to remove singleItemToBeDeleted
Renamed usages of idx to index
Tidied and simplified css styling
Added clarification comment to test regex
Updated pot file
parent c2d1fbe5
...@@ -38,7 +38,6 @@ export default { ...@@ -38,7 +38,6 @@ export default {
}, },
data() { data() {
return { return {
singleItemToBeDeleted: null,
itemsToBeDeleted: [], itemsToBeDeleted: [],
modalId: `confirm-image-deletion-modal-${this.repo.id}`, modalId: `confirm-image-deletion-modal-${this.repo.id}`,
selectAllChecked: false, selectAllChecked: false,
...@@ -52,19 +51,20 @@ export default { ...@@ -52,19 +51,20 @@ export default {
return this.repo.pagination.total > this.repo.pagination.perPage; return this.repo.pagination.total > this.repo.pagination.perPage;
}, },
modalTitle() { modalTitle() {
if (this.singleItemSelected) { return n__(
return s__('ContainerRegistry|Remove image'); 'ContainerRegistry|Remove image',
} 'ContainerRegistry|Remove images',
return s__('ContainerRegistry|Remove images'); this.singleItemSelected ? 1 : this.itemsToBeDeleted.length,
);
}, },
modalDescription() { modalDescription() {
const selectedCount = this.itemsToBeDeleted.length; const selectedCount = this.itemsToBeDeleted.length;
if (this.singleItemSelected) { if (this.singleItemSelected) {
const { tag } = // Attempt to pull 'single' property if it's an object in this.itemsToBeDeleted
this.singleItemToBeDeleted !== null // Otherwise, simply use the int value of the selected row
? this.repo.list[this.singleItemToBeDeleted] const { single: itemIndex = this.itemsToBeDeleted[0] } = this.itemsToBeDeleted[0];
: this.repo.list[this.itemsToBeDeleted[0]]; const { tag } = this.repo.list[itemIndex];
return sprintf( return sprintf(
s__(`ContainerRegistry|You are about to delete the image <b>%{title}</b>. This will s__(`ContainerRegistry|You are about to delete the image <b>%{title}</b>. This will
...@@ -80,7 +80,10 @@ export default { ...@@ -80,7 +80,10 @@ export default {
); );
}, },
singleItemSelected() { singleItemSelected() {
return this.singleItemToBeDeleted !== null || this.itemsToBeDeleted.length === 1; return this.findSingleRowToDelete || this.itemsToBeDeleted.length === 1;
},
findSingleRowToDelete() {
return this.itemsToBeDeleted.find(x => x.single !== undefined);
}, },
}, },
methods: { methods: {
...@@ -91,22 +94,25 @@ export default { ...@@ -91,22 +94,25 @@ export default {
formatSize(size) { formatSize(size) {
return numberToHumanSize(size); return numberToHumanSize(size);
}, },
setSingleItemToBeDeleted(idx) { addSingleItemToBeDeleted(index) {
this.singleItemToBeDeleted = idx; this.itemsToBeDeleted.push({ single: index });
}, },
resetSingleItemToBeDeleted() { removeSingleItemToBeDeleted() {
this.singleItemToBeDeleted = null; const singleIndex = this.itemsToBeDeleted.findIndex(x => x.single !== undefined);
if (singleIndex > -1) {
this.itemsToBeDeleted.splice(singleIndex, 1);
}
}, },
handleDeleteRegistry() { handleDeleteRegistry() {
let { itemsToBeDeleted } = this; let { itemsToBeDeleted } = this;
this.itemsToBeDeleted = [];
if (this.singleItemToBeDeleted !== null) { if (this.findSingleRowToDelete) {
const { singleItemToBeDeleted } = this; itemsToBeDeleted = [this.findSingleRowToDelete.single];
this.singleItemToBeDeleted = null;
itemsToBeDeleted = [singleItemToBeDeleted];
} }
this.itemsToBeDeleted = [];
if (this.bulkDeletePath) { if (this.bulkDeletePath) {
this.deleteItems({ this.deleteItems({
path: this.bulkDeletePath, path: this.bulkDeletePath,
...@@ -134,21 +140,21 @@ export default { ...@@ -134,21 +140,21 @@ export default {
} }
}, },
selectAll() { selectAll() {
this.itemsToBeDeleted = this.repo.list.map((x, idx) => idx); this.itemsToBeDeleted = this.repo.list.map((x, index) => index);
this.selectAllChecked = true; this.selectAllChecked = true;
}, },
deselectAll() { deselectAll() {
this.itemsToBeDeleted = []; this.itemsToBeDeleted = [];
this.selectAllChecked = false; this.selectAllChecked = false;
}, },
updateItemsToBeDeleted(idx) { updateItemsToBeDeleted(index) {
const delIdx = this.itemsToBeDeleted.findIndex(x => x === idx); const delIndex = this.itemsToBeDeleted.findIndex(x => x === index);
if (delIdx > -1) { if (delIndex > -1) {
this.itemsToBeDeleted.splice(delIdx, 1); this.itemsToBeDeleted.splice(delIndex, 1);
this.selectAllChecked = false; this.selectAllChecked = false;
} else { } else {
this.itemsToBeDeleted.push(idx); this.itemsToBeDeleted.push(index);
if (this.itemsToBeDeleted.length === this.repo.list.length) { if (this.itemsToBeDeleted.length === this.repo.list.length) {
this.selectAllChecked = true; this.selectAllChecked = true;
...@@ -191,13 +197,13 @@ export default { ...@@ -191,13 +197,13 @@ export default {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="(item, idx) in repo.list" :key="item.tag"> <tr v-for="(item, index) in repo.list" :key="item.tag" class="image-row">
<td class="check"> <td class="check">
<gl-form-checkbox <gl-form-checkbox
v-if="item.canDelete" v-if="item.canDelete"
class="js-select-checkbox" class="js-select-checkbox"
:checked="itemsToBeDeleted && itemsToBeDeleted.includes(idx)" :checked="itemsToBeDeleted && itemsToBeDeleted.includes(index)"
@change="updateItemsToBeDeleted(idx)" @change="updateItemsToBeDeleted(index)"
/> />
</td> </td>
<td class="monospace"> <td class="monospace">
...@@ -236,7 +242,7 @@ export default { ...@@ -236,7 +242,7 @@ export default {
:aria-label="s__('ContainerRegistry|Remove image')" :aria-label="s__('ContainerRegistry|Remove image')"
variant="danger" variant="danger"
class="js-delete-registry-row float-right btn-inverted btn-border-color btn-icon" class="js-delete-registry-row float-right btn-inverted btn-border-color btn-icon"
@click="setSingleItemToBeDeleted(idx)" @click="addSingleItemToBeDeleted(index)"
> >
<icon name="remove" /> <icon name="remove" />
</gl-button> </gl-button>
...@@ -255,7 +261,7 @@ export default { ...@@ -255,7 +261,7 @@ export default {
:modal-id="modalId" :modal-id="modalId"
ok-variant="danger" ok-variant="danger"
@ok="handleDeleteRegistry" @ok="handleDeleteRegistry"
@cancel="resetSingleItemToBeDeleted" @cancel="removeSingleItemToBeDeleted"
> >
<template v-slot:modal-title>{{ modalTitle }}</template> <template v-slot:modal-title>{{ modalTitle }}</template>
<template v-slot:modal-ok>{{ s__('ContainerRegistry|Remove image(s) and tags') }}</template> <template v-slot:modal-ok>{{ s__('ContainerRegistry|Remove image(s) and tags') }}</template>
......
...@@ -32,26 +32,20 @@ ...@@ -32,26 +32,20 @@
.table.tags { .table.tags {
margin-bottom: 0; margin-bottom: 0;
th { .image-row {
height: 55px; .check {
}
tr {
&:hover {
td {
&.action-buttons {
opacity: 1;
}
}
}
td.check {
padding-right: $gl-padding; padding-right: $gl-padding;
width: 5%; width: 5%;
} }
td.action-buttons { .action-buttons {
opacity: 0; opacity: 0;
} }
&:hover {
.action-buttons {
opacity: 1;
}
}
} }
} }
...@@ -3130,14 +3130,13 @@ msgid "ContainerRegistry|Quick Start" ...@@ -3130,14 +3130,13 @@ msgid "ContainerRegistry|Quick Start"
msgstr "" msgstr ""
msgid "ContainerRegistry|Remove image" msgid "ContainerRegistry|Remove image"
msgstr "" msgid_plural "ContainerRegistry|Remove images"
msgstr[0] ""
msgstr[1] ""
msgid "ContainerRegistry|Remove image(s) and tags" msgid "ContainerRegistry|Remove image(s) and tags"
msgstr "" msgstr ""
msgid "ContainerRegistry|Remove images"
msgstr ""
msgid "ContainerRegistry|Remove repository" msgid "ContainerRegistry|Remove repository"
msgstr "" msgstr ""
......
...@@ -47,6 +47,7 @@ describe('table registry', () => { ...@@ -47,6 +47,7 @@ describe('table registry', () => {
const textRendered = vm.$el const textRendered = vm.$el
.querySelector('.table tbody tr') .querySelector('.table tbody tr')
.textContent.trim() .textContent.trim()
// replace additional whitespace characters (e.g. new lines) with a single empty space
.replace(/\s\s+/g, ' '); .replace(/\s\s+/g, ' ');
expect(textRendered).toContain(repoPropsData.list[0].tag); expect(textRendered).toContain(repoPropsData.list[0].tag);
......
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