Commit 9b863049 authored by Paul Slaughter's avatar Paul Slaughter

Merge branch '23315-remove-feature-flag' into 'master'

Group Registry Browser: remove feature flag

See merge request gitlab-org/gitlab!27814
parents 27d240d8 74fa5b8d
import initRegistryImages from '~/registry/list/index';
import registryExplorer from '~/registry/explorer/index'; import registryExplorer from '~/registry/explorer/index';
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
initRegistryImages(); const explorer = registryExplorer();
const { attachMainComponent, attachBreadcrumb } = registryExplorer();
attachBreadcrumb(); if (explorer) {
attachMainComponent(); explorer.attachBreadcrumb();
explorer.attachMainComponent();
}
}); });
import initRegistryImages from '~/registry/list/index';
import registryExplorer from '~/registry/explorer/index'; import registryExplorer from '~/registry/explorer/index';
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
initRegistryImages();
const explorer = registryExplorer(); const explorer = registryExplorer();
if (explorer) { if (explorer) {
......
<script>
import { mapGetters, mapActions } from 'vuex';
import { GlLoadingIcon, GlEmptyState } from '@gitlab/ui';
import store from '../stores';
import CollapsibleContainer from './collapsible_container.vue';
import ProjectEmptyState from './project_empty_state.vue';
import GroupEmptyState from './group_empty_state.vue';
import { s__, sprintf } from '~/locale';
export default {
name: 'RegistryListApp',
components: {
CollapsibleContainer,
GlEmptyState,
GlLoadingIcon,
ProjectEmptyState,
GroupEmptyState,
},
props: {
characterError: {
type: Boolean,
required: false,
default: false,
},
containersErrorImage: {
type: String,
required: true,
},
endpoint: {
type: String,
required: true,
},
helpPagePath: {
type: String,
required: true,
},
noContainersImage: {
type: String,
required: true,
},
personalAccessTokensHelpLink: {
type: String,
required: false,
default: null,
},
registryHostUrlWithPort: {
type: String,
required: false,
default: null,
},
repositoryUrl: {
type: String,
required: true,
},
isGroupPage: {
type: Boolean,
default: false,
required: false,
},
twoFactorAuthHelpLink: {
type: String,
required: false,
default: null,
},
},
store,
computed: {
...mapGetters(['isLoading', 'repos']),
dockerConnectionErrorText() {
return sprintf(
s__(`ContainerRegistry|We are having trouble connecting to Docker, which could be due to an
issue with your project name or path.
%{docLinkStart}More Information%{docLinkEnd}`),
{
docLinkStart: `<a href="${this.helpPagePath}#docker-connection-error" target="_blank">`,
docLinkEnd: '</a>',
},
false,
);
},
introText() {
return sprintf(
s__(`ContainerRegistry|With the Docker Container Registry integrated into GitLab, every
project can have its own space to store its Docker images.
%{docLinkStart}More Information%{docLinkEnd}`),
{
docLinkStart: `<a href="${this.helpPagePath}" target="_blank">`,
docLinkEnd: '</a>',
},
false,
);
},
noContainerImagesText() {
return sprintf(
s__(`ContainerRegistry|With the Container Registry, every project can have its own space to
store its Docker images. %{docLinkStart}More Information%{docLinkEnd}`),
{
docLinkStart: `<a href="${this.helpPagePath}" target="_blank">`,
docLinkEnd: '</a>',
},
false,
);
},
},
created() {
this.setMainEndpoint(this.endpoint);
this.setIsDeleteDisabled(this.isGroupPage);
},
mounted() {
if (!this.characterError) {
this.fetchRepos();
}
},
methods: {
...mapActions(['setMainEndpoint', 'fetchRepos', 'setIsDeleteDisabled']),
},
};
</script>
<template>
<div>
<gl-empty-state
v-if="characterError"
:title="s__('ContainerRegistry|Docker connection error')"
:svg-path="containersErrorImage"
>
<template #description>
<p class="js-character-error-text" v-html="dockerConnectionErrorText"></p>
</template>
</gl-empty-state>
<gl-loading-icon v-else-if="isLoading" size="md" class="prepend-top-16" />
<div v-else-if="!isLoading && repos.length">
<h4>{{ s__('ContainerRegistry|Container Registry') }}</h4>
<p v-html="introText"></p>
<collapsible-container v-for="item in repos" :key="item.id" :repo="item" />
</div>
<project-empty-state
v-else-if="!isGroupPage"
:no-containers-image="noContainersImage"
:help-page-path="helpPagePath"
:repository-url="repositoryUrl"
:two-factor-auth-help-link="twoFactorAuthHelpLink"
:personal-access-tokens-help-link="personalAccessTokensHelpLink"
:registry-host-url-with-port="registryHostUrlWithPort"
/>
<group-empty-state
v-else-if="isGroupPage"
:no-containers-image="noContainersImage"
:help-page-path="helpPagePath"
/>
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import {
GlLoadingIcon,
GlButton,
GlTooltipDirective,
GlModal,
GlModalDirective,
GlEmptyState,
} from '@gitlab/ui';
import createFlash from '~/flash';
import Tracking from '~/tracking';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import Icon from '~/vue_shared/components/icon.vue';
import TableRegistry from './table_registry.vue';
import { DELETE_REPO_ERROR_MESSAGE } from '../constants';
import { __, sprintf } from '~/locale';
export default {
name: 'CollapsibeContainerRegisty',
components: {
ClipboardButton,
TableRegistry,
GlLoadingIcon,
GlButton,
Icon,
GlModal,
GlEmptyState,
},
directives: {
GlTooltip: GlTooltipDirective,
GlModal: GlModalDirective,
},
mixins: [Tracking.mixin()],
props: {
repo: {
type: Object,
required: true,
},
},
data() {
return {
isOpen: false,
modalId: `confirm-repo-deletion-modal-${this.repo.id}`,
tracking: {
label: 'registry_repository_delete',
},
};
},
computed: {
...mapGetters(['isDeleteDisabled']),
iconName() {
return this.isOpen ? 'angle-up' : 'angle-right';
},
canDeleteRepo() {
return this.repo.canDelete && !this.isDeleteDisabled;
},
deleteImageConfirmationMessage() {
return sprintf(__('Image %{imageName} was scheduled for deletion from the registry.'), {
imageName: this.repo.name,
});
},
},
methods: {
...mapActions(['fetchRepos', 'fetchList', 'deleteItem']),
toggleRepo() {
this.isOpen = !this.isOpen;
if (this.isOpen) {
this.fetchList({ repo: this.repo });
}
},
handleDeleteRepository() {
this.track('confirm_delete');
return this.deleteItem(this.repo)
.then(() => {
createFlash(this.deleteImageConfirmationMessage, 'notice');
this.fetchRepos();
})
.catch(() => createFlash(DELETE_REPO_ERROR_MESSAGE));
},
},
};
</script>
<template>
<div class="container-image">
<div class="container-image-head">
<gl-button class="js-toggle-repo btn-link align-baseline" @click="toggleRepo">
<icon :name="iconName" />
{{ repo.name }}
</gl-button>
<clipboard-button
v-if="repo.location"
:text="repo.location"
:title="repo.location"
css-class="btn-default btn-transparent btn-clipboard"
/>
<div class="controls d-none d-sm-block float-right">
<gl-button
v-if="canDeleteRepo"
v-gl-tooltip
v-gl-modal="modalId"
:title="s__('ContainerRegistry|Remove repository')"
:aria-label="s__('ContainerRegistry|Remove repository')"
class="js-remove-repo btn-inverted"
variant="danger"
@click="track('click_button')"
>
<icon name="remove" />
</gl-button>
</div>
</div>
<gl-loading-icon v-if="repo.isLoading" size="md" class="append-bottom-20" />
<div v-else-if="!repo.isLoading && isOpen" class="container-image-tags">
<table-registry v-if="repo.list.length" :repo="repo" :can-delete-repo="canDeleteRepo" />
<gl-empty-state
v-else
:title="s__('ContainerRegistry|This image has no active tags')"
:description="
s__(
`ContainerRegistry|The last tag related to this image was recently removed.
This empty image and any associated data will be automatically removed as part of the regular Garbage Collection process.
If you have any questions, contact your administrator.`,
)
"
class="mx-auto my-0"
/>
</div>
<gl-modal
ref="deleteModal"
:modal-id="modalId"
ok-variant="danger"
@ok="handleDeleteRepository"
@cancel="track('cancel_delete')"
>
<template v-slot:modal-title>{{ s__('ContainerRegistry|Remove repository') }}</template>
<p
v-html="
sprintf(
s__(
'ContainerRegistry|You are about to remove repository <b>%{title}</b>. Once you confirm, this repository will be permanently deleted.',
),
{ title: repo.name },
)
"
></p>
<template v-slot:modal-ok>{{ __('Remove') }}</template>
</gl-modal>
</div>
</template>
<script>
import { GlEmptyState } from '@gitlab/ui';
import { s__, sprintf } from '~/locale';
export default {
name: 'GroupEmptyState',
components: {
GlEmptyState,
},
props: {
noContainersImage: {
type: String,
required: true,
},
helpPagePath: {
type: String,
required: true,
},
},
computed: {
noContainerImagesText() {
return sprintf(
s__(
`ContainerRegistry|With the Container Registry, every project can have its own space to store its Docker images. Push at least one Docker image in one of this group's projects in order to show up here. %{docLinkStart}More Information%{docLinkEnd}`,
),
{
docLinkStart: `<a href="${this.helpPagePath}" target="_blank">`,
docLinkEnd: '</a>',
},
false,
);
},
},
};
</script>
<template>
<gl-empty-state
:title="s__('ContainerRegistry|There are no container images available in this group')"
:svg-path="noContainersImage"
class="container-message"
>
<template #description>
<p class="js-no-container-images-text" v-html="noContainerImagesText"></p>
</template>
</gl-empty-state>
</template>
<script>
import { GlEmptyState } from '@gitlab/ui';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import { s__, sprintf } from '~/locale';
export default {
name: 'ProjectEmptyState',
components: {
ClipboardButton,
GlEmptyState,
},
props: {
noContainersImage: {
type: String,
required: true,
},
repositoryUrl: {
type: String,
required: true,
},
helpPagePath: {
type: String,
required: true,
},
twoFactorAuthHelpLink: {
type: String,
required: true,
},
personalAccessTokensHelpLink: {
type: String,
required: true,
},
registryHostUrlWithPort: {
type: String,
required: true,
},
},
computed: {
dockerBuildCommand() {
// eslint-disable-next-line @gitlab/require-i18n-strings
return `docker build -t ${this.repositoryUrl} .`;
},
dockerPushCommand() {
// eslint-disable-next-line @gitlab/require-i18n-strings
return `docker push ${this.repositoryUrl}`;
},
dockerLoginCommand() {
// eslint-disable-next-line @gitlab/require-i18n-strings
return `docker login ${this.registryHostUrlWithPort}`;
},
noContainerImagesText() {
return sprintf(
s__(`ContainerRegistry|With the Container Registry, every project can have its own space to
store its Docker images. %{docLinkStart}More Information%{docLinkEnd}`),
{
docLinkStart: `<a href="${this.helpPagePath}" target="_blank">`,
docLinkEnd: '</a>',
},
false,
);
},
notLoggedInToRegistryText() {
return sprintf(
s__(`ContainerRegistry|If you are not already logged in, you need to authenticate to
the Container Registry by using your GitLab username and password. If you have
%{twofaDocLinkStart}Two-Factor Authentication%{twofaDocLinkEnd} enabled, use a
%{personalAccessTokensDocLinkStart}Personal Access Token%{personalAccessTokensDocLinkEnd}
instead of a password.`),
{
twofaDocLinkStart: `<a href="${this.twoFactorAuthHelpLink}" target="_blank">`,
twofaDocLinkEnd: '</a>',
personalAccessTokensDocLinkStart: `<a href="${this.personalAccessTokensHelpLink}" target="_blank">`,
personalAccessTokensDocLinkEnd: '</a>',
},
false,
);
},
},
};
</script>
<template>
<gl-empty-state
:title="s__('ContainerRegistry|There are no container images stored for this project')"
:svg-path="noContainersImage"
class="container-message"
>
<template #description>
<p class="js-no-container-images-text" v-html="noContainerImagesText"></p>
<h5>{{ s__('ContainerRegistry|Quick Start') }}</h5>
<p class="js-not-logged-in-to-registry-text" v-html="notLoggedInToRegistryText"></p>
<div class="input-group append-bottom-10">
<input :value="dockerLoginCommand" type="text" class="form-control monospace" readonly />
<span class="input-group-append">
<clipboard-button
:text="dockerLoginCommand"
:title="s__('ContainerRegistry|Copy login command')"
class="input-group-text"
/>
</span>
</div>
<p></p>
<p>
{{
s__(
'ContainerRegistry|You can add an image to this registry with the following commands:',
)
}}
</p>
<div class="input-group append-bottom-10">
<input :value="dockerBuildCommand" type="text" class="form-control monospace" readonly />
<span class="input-group-append">
<clipboard-button
:text="dockerBuildCommand"
:title="s__('ContainerRegistry|Copy build command')"
class="input-group-text"
/>
</span>
</div>
<div class="input-group">
<input :value="dockerPushCommand" type="text" class="form-control monospace" readonly />
<span class="input-group-append">
<clipboard-button
:text="dockerPushCommand"
:title="s__('ContainerRegistry|Copy push command')"
class="input-group-text"
/>
</span>
</div>
</template>
</gl-empty-state>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import { GlButton, GlFormCheckbox, GlTooltipDirective, GlModal } from '@gitlab/ui';
import Tracking from '~/tracking';
import { n__, s__, sprintf } from '~/locale';
import createFlash from '~/flash';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
import Icon from '~/vue_shared/components/icon.vue';
import timeagoMixin from '~/vue_shared/mixins/timeago';
import { numberToHumanSize } from '~/lib/utils/number_utils';
import { FETCH_REGISTRY_ERROR_MESSAGE, DELETE_REGISTRY_ERROR_MESSAGE } from '../constants';
export default {
components: {
ClipboardButton,
TablePagination,
GlFormCheckbox,
GlButton,
Icon,
GlModal,
},
directives: {
GlTooltip: GlTooltipDirective,
},
mixins: [timeagoMixin, Tracking.mixin()],
props: {
repo: {
type: Object,
required: true,
},
canDeleteRepo: {
type: Boolean,
default: false,
required: false,
},
},
data() {
return {
selectedItems: [],
itemsToBeDeleted: [],
modalId: `confirm-image-deletion-modal-${this.repo.id}`,
selectAllChecked: false,
modalDescription: '',
};
},
computed: {
...mapGetters(['isDeleteDisabled']),
bulkDeletePath() {
return this.repo.tagsPath ? this.repo.tagsPath.replace('?format=json', '/bulk_destroy') : '';
},
shouldRenderPagination() {
return this.repo.pagination.total > this.repo.pagination.perPage;
},
modalAction() {
return n__(
'ContainerRegistry|Remove tag',
'ContainerRegistry|Remove tags',
this.itemsToBeDeleted.length === 0 ? 1 : this.itemsToBeDeleted.length,
);
},
isMultiDelete() {
return this.itemsToBeDeleted.length > 1;
},
tracking() {
return {
property: this.repo.name,
label: this.isMultiDelete ? 'bulk_registry_tag_delete' : 'registry_tag_delete',
};
},
},
methods: {
...mapActions(['fetchList', 'deleteItem', 'multiDeleteItems']),
setModalDescription(itemIndex = -1) {
if (itemIndex === -1) {
this.modalDescription = sprintf(
s__(`ContainerRegistry|You are about to remove <b>%{count}</b> tags. Are you sure?`),
{ count: this.itemsToBeDeleted.length },
);
} else {
const { tag } = this.repo.list[itemIndex];
this.modalDescription = sprintf(
s__(`ContainerRegistry|You are about to remove <b>%{title}</b>. Are you sure?`),
{ title: `${this.repo.name}:${tag}` },
);
}
},
layers(item) {
return item.layers ? n__('%d layer', '%d layers', item.layers) : '';
},
formatSize(size) {
return numberToHumanSize(size);
},
deleteSingleItem(index) {
this.setModalDescription(index);
this.itemsToBeDeleted = [index];
this.track('click_button');
this.$refs.deleteModal.show();
},
deleteMultipleItems() {
this.itemsToBeDeleted = [...this.selectedItems];
if (this.selectedItems.length === 1) {
this.setModalDescription(this.itemsToBeDeleted[0]);
} else if (this.selectedItems.length > 1) {
this.setModalDescription();
}
this.track('click_button');
this.$refs.deleteModal.show();
},
handleSingleDelete(itemToDelete) {
this.itemsToBeDeleted = [];
this.deleteItem(itemToDelete)
.then(() => this.fetchList({ repo: this.repo }))
.catch(() => createFlash(DELETE_REGISTRY_ERROR_MESSAGE));
},
handleMultipleDelete() {
const { itemsToBeDeleted } = this;
this.itemsToBeDeleted = [];
this.selectedItems = [];
if (this.bulkDeletePath) {
this.multiDeleteItems({
path: this.bulkDeletePath,
items: itemsToBeDeleted.map(x => this.repo.list[x].tag),
})
.then(() => this.fetchList({ repo: this.repo }))
.catch(() => createFlash(DELETE_REGISTRY_ERROR_MESSAGE));
} else {
createFlash(DELETE_REGISTRY_ERROR_MESSAGE);
}
},
onPageChange(pageNumber) {
this.fetchList({ repo: this.repo, page: pageNumber }).catch(() =>
createFlash(FETCH_REGISTRY_ERROR_MESSAGE),
);
},
onSelectAllChange() {
if (this.selectAllChecked) {
this.deselectAll();
} else {
this.selectAll();
}
},
selectAll() {
this.selectedItems = this.repo.list.map((x, index) => index);
this.selectAllChecked = true;
},
deselectAll() {
this.selectedItems = [];
this.selectAllChecked = false;
},
updateselectedItems(index) {
const delIndex = this.selectedItems.findIndex(x => x === index);
if (delIndex > -1) {
this.selectedItems.splice(delIndex, 1);
this.selectAllChecked = false;
} else {
this.selectedItems.push(index);
if (this.selectedItems.length === this.repo.list.length) {
this.selectAllChecked = true;
}
}
},
canDeleteRow(item) {
return item && item.canDelete && !this.isDeleteDisabled;
},
onDeletionConfirmed() {
this.track('confirm_delete');
if (this.isMultiDelete) {
this.handleMultipleDelete();
} else {
const index = this.itemsToBeDeleted[0];
this.handleSingleDelete(this.repo.list[index]);
}
},
},
};
</script>
<template>
<div>
<table class="table tags">
<thead>
<tr>
<th>
<gl-form-checkbox
v-if="canDeleteRepo"
class="js-select-all-checkbox"
:checked="selectAllChecked"
@change="onSelectAllChange"
/>
</th>
<th>{{ s__('ContainerRegistry|Tag') }}</th>
<th ref="imageId">{{ s__('ContainerRegistry|Image ID') }}</th>
<th>{{ s__('ContainerRegistry|Size') }}</th>
<th>{{ s__('ContainerRegistry|Last Updated') }}</th>
<th>
<gl-button
v-if="canDeleteRepo"
ref="bulkDeleteButton"
v-gl-tooltip
:disabled="!selectedItems || selectedItems.length === 0"
class="float-right"
variant="danger"
:title="s__('ContainerRegistry|Remove selected tags')"
:aria-label="s__('ContainerRegistry|Remove selected tags')"
@click="deleteMultipleItems()"
>
<icon name="remove" />
</gl-button>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in repo.list" :key="item.tag" class="registry-image-row">
<td class="check">
<gl-form-checkbox
v-if="canDeleteRow(item)"
class="js-select-checkbox"
:checked="selectedItems && selectedItems.includes(index)"
@change="updateselectedItems(index)"
/>
</td>
<td class="monospace">
{{ item.tag }}
<clipboard-button
v-if="item.location"
:title="item.location"
:text="item.location"
css-class="btn-default btn-transparent btn-clipboard"
/>
</td>
<td>
<span v-gl-tooltip.bottom class="monospace" :title="item.revision">{{
item.shortRevision
}}</span>
</td>
<td>
{{ formatSize(item.size) }}
<template v-if="item.size && item.layers"
>&middot;</template
>
{{ layers(item) }}
</td>
<td>
<span v-gl-tooltip.bottom :title="tooltipTitle(item.createdAt)">{{
timeFormatted(item.createdAt)
}}</span>
</td>
<td class="content action-buttons">
<gl-button
v-if="canDeleteRow(item)"
:title="s__('ContainerRegistry|Remove tag')"
:aria-label="s__('ContainerRegistry|Remove tag')"
variant="danger"
class="js-delete-registry-row float-right btn-inverted btn-border-color btn-icon"
@click="deleteSingleItem(index)"
>
<icon name="remove" />
</gl-button>
</td>
</tr>
</tbody>
</table>
<table-pagination
v-if="shouldRenderPagination"
:change="onPageChange"
:page-info="repo.pagination"
class="js-registry-pagination"
/>
<gl-modal
ref="deleteModal"
:modal-id="modalId"
ok-variant="danger"
@ok="onDeletionConfirmed"
@cancel="track('cancel_delete')"
>
<template v-slot:modal-title>{{ modalAction }}</template>
<template v-slot:modal-ok>{{ modalAction }}</template>
<p v-html="modalDescription"></p>
</gl-modal>
</div>
</template>
import { __ } from '~/locale';
export const FETCH_REGISTRY_ERROR_MESSAGE = __(
'Something went wrong while fetching the registry list.',
);
export const FETCH_REPOS_ERROR_MESSAGE = __('Something went wrong while fetching the projects.');
export const DELETE_REPO_ERROR_MESSAGE = __('Something went wrong on our end.');
export const DELETE_REGISTRY_ERROR_MESSAGE = __('Something went wrong on our end.');
import Vue from 'vue';
import registryApp from './components/app.vue';
import Translate from '~/vue_shared/translate';
Vue.use(Translate);
export default () => {
const el = document.getElementById('js-vue-registry-images');
if (!el) {
return null;
}
return new Vue({
el,
components: {
registryApp,
},
data() {
const { dataset } = el;
return {
registryData: {
endpoint: dataset.endpoint,
characterError: Boolean(dataset.characterError),
helpPagePath: dataset.helpPagePath,
noContainersImage: dataset.noContainersImage,
containersErrorImage: dataset.containersErrorImage,
repositoryUrl: dataset.repositoryUrl,
isGroupPage: dataset.isGroupPage,
personalAccessTokensHelpLink: dataset.personalAccessTokensHelpLink,
registryHostUrlWithPort: dataset.registryHostUrlWithPort,
twoFactorAuthHelpLink: dataset.twoFactorAuthHelpLink,
},
};
},
render(createElement) {
return createElement('registry-app', {
props: {
...this.registryData,
},
});
},
});
};
import axios from '~/lib/utils/axios_utils';
import createFlash from '~/flash';
import * as types from './mutation_types';
import { FETCH_REPOS_ERROR_MESSAGE, FETCH_REGISTRY_ERROR_MESSAGE } from '../constants';
export const fetchRepos = ({ commit, state }) => {
commit(types.TOGGLE_MAIN_LOADING);
return axios
.get(state.endpoint)
.then(({ data }) => {
commit(types.TOGGLE_MAIN_LOADING);
commit(types.SET_REPOS_LIST, data);
})
.catch(() => {
commit(types.TOGGLE_MAIN_LOADING);
createFlash(FETCH_REPOS_ERROR_MESSAGE);
});
};
export const fetchList = ({ commit }, { repo, page }) => {
commit(types.TOGGLE_REGISTRY_LIST_LOADING, repo);
return axios
.get(repo.tagsPath, { params: { page } })
.then(response => {
const { headers, data } = response;
commit(types.TOGGLE_REGISTRY_LIST_LOADING, repo);
commit(types.SET_REGISTRY_LIST, { repo, resp: data, headers });
})
.catch(() => {
commit(types.TOGGLE_REGISTRY_LIST_LOADING, repo);
createFlash(FETCH_REGISTRY_ERROR_MESSAGE);
});
};
export const deleteItem = (_, item) => axios.delete(item.destroyPath);
export const multiDeleteItems = (_, { path, items }) =>
axios.delete(path, { params: { ids: items } });
export const setMainEndpoint = ({ commit }, data) => commit(types.SET_MAIN_ENDPOINT, data);
export const setIsDeleteDisabled = ({ commit }, data) => commit(types.SET_IS_DELETE_DISABLED, data);
export const toggleLoading = ({ commit }) => commit(types.TOGGLE_MAIN_LOADING);
// prevent babel-plugin-rewire from generating an invalid default during karma tests
export default () => {};
export const isLoading = state => state.isLoading;
export const repos = state => state.repos;
export const isDeleteDisabled = state => state.isDeleteDisabled;
// prevent babel-plugin-rewire from generating an invalid default during karma tests
export default () => {};
import Vue from 'vue';
import Vuex from 'vuex';
import * as actions from './actions';
import * as getters from './getters';
import mutations from './mutations';
import createState from './state';
Vue.use(Vuex);
export default new Vuex.Store({
state: createState(),
actions,
getters,
mutations,
});
export const SET_MAIN_ENDPOINT = 'SET_MAIN_ENDPOINT';
export const SET_IS_DELETE_DISABLED = 'SET_IS_DELETE_DISABLED';
export const SET_REPOS_LIST = 'SET_REPOS_LIST';
export const TOGGLE_MAIN_LOADING = 'TOGGLE_MAIN_LOADING';
export const SET_REGISTRY_LIST = 'SET_REGISTRY_LIST';
export const TOGGLE_REGISTRY_LIST_LOADING = 'TOGGLE_REGISTRY_LIST_LOADING';
import * as types from './mutation_types';
import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
export default {
[types.SET_MAIN_ENDPOINT](state, endpoint) {
state.endpoint = endpoint;
},
[types.SET_IS_DELETE_DISABLED](state, isDeleteDisabled) {
state.isDeleteDisabled = isDeleteDisabled;
},
[types.SET_REPOS_LIST](state, list) {
state.repos = list.map(el => ({
canDelete: Boolean(el.destroy_path),
destroyPath: el.destroy_path,
id: el.id,
isLoading: false,
list: [],
location: el.location,
name: el.path,
tagsPath: el.tags_path,
projectId: el.project_id,
}));
},
[types.TOGGLE_MAIN_LOADING](state) {
state.isLoading = !state.isLoading;
},
[types.SET_REGISTRY_LIST](state, { repo, resp, headers }) {
const listToUpdate = state.repos.find(el => el.id === repo.id);
const normalizedHeaders = normalizeHeaders(headers);
const pagination = parseIntPagination(normalizedHeaders);
listToUpdate.pagination = pagination;
listToUpdate.list = resp.map(element => ({
tag: element.name,
revision: element.revision,
shortRevision: element.short_revision,
size: element.total_size,
layers: element.layers,
location: element.location,
createdAt: element.created_at,
destroyPath: element.destroy_path,
canDelete: Boolean(element.destroy_path),
}));
},
[types.TOGGLE_REGISTRY_LIST_LOADING](state, list) {
const listToUpdate = state.repos.find(el => el.id === list.id);
listToUpdate.isLoading = !listToUpdate.isLoading;
},
};
export default () => ({
isLoading: false,
endpoint: '', // initial endpoint to fetch the repos list
isDeleteDisabled: false, // controls the delete buttons in the registry
/**
* Each object in `repos` has the following strucure:
* {
* name: String,
* isLoading: Boolean,
* tagsPath: String // endpoint to request the list
* destroyPath: String // endpoit to delete the repo
* list: Array // List of the registry images
* }
*
* Each registry image inside `list` has the following structure:
* {
* tag: String,
* revision: String
* shortRevision: String
* size: Number
* layers: Number
* createdAt: String
* destroyPath: String // endpoit to delete each image
* }
*/
repos: [],
});
...@@ -4,7 +4,6 @@ module Groups ...@@ -4,7 +4,6 @@ module Groups
class RepositoriesController < Groups::ApplicationController class RepositoriesController < Groups::ApplicationController
before_action :verify_container_registry_enabled! before_action :verify_container_registry_enabled!
before_action :authorize_read_container_image! before_action :authorize_read_container_image!
before_action :feature_flag_group_container_registry_browser!
def index def index
respond_to do |format| respond_to do |format|
...@@ -17,12 +16,8 @@ module Groups ...@@ -17,12 +16,8 @@ module Groups
serializer = ContainerRepositoriesSerializer serializer = ContainerRepositoriesSerializer
.new(current_user: current_user) .new(current_user: current_user)
if Feature.enabled?(:vue_container_registry_explorer, group) render json: serializer.with_pagination(request, response)
render json: serializer.with_pagination(request, response) .represent_read_only(@images)
.represent_read_only(@images)
else
render json: serializer.represent_read_only(@images)
end
end end
end end
end end
...@@ -34,10 +29,6 @@ module Groups ...@@ -34,10 +29,6 @@ module Groups
private private
def feature_flag_group_container_registry_browser!
render_404 unless Feature.enabled?(:group_container_registry_browser, group)
end
def verify_container_registry_enabled! def verify_container_registry_enabled!
render_404 unless Gitlab.config.registry.enabled render_404 unless Gitlab.config.registry.enabled
end end
......
...@@ -17,11 +17,7 @@ module Projects ...@@ -17,11 +17,7 @@ module Projects
serializer = ContainerRepositoriesSerializer serializer = ContainerRepositoriesSerializer
.new(project: project, current_user: current_user) .new(project: project, current_user: current_user)
if Feature.enabled?(:vue_container_registry_explorer, project.group) render json: serializer.with_pagination(request, response).represent(@images)
render json: serializer.with_pagination(request, response).represent(@images)
else
render json: serializer.represent(@images)
end
end end
end end
end end
......
...@@ -22,8 +22,7 @@ module GroupsHelper ...@@ -22,8 +22,7 @@ module GroupsHelper
def group_container_registry_nav? def group_container_registry_nav?
Gitlab.config.registry.enabled && Gitlab.config.registry.enabled &&
can?(current_user, :read_container_image, @group) && can?(current_user, :read_container_image, @group)
Feature.enabled?(:group_container_registry_browser, @group)
end end
def group_sidebar_links def group_sidebar_links
......
...@@ -4,23 +4,14 @@ ...@@ -4,23 +4,14 @@
%section %section
.row.registry-placeholder.prepend-bottom-10 .row.registry-placeholder.prepend-bottom-10
.col-12 .col-12
- if Feature.enabled?(:vue_container_registry_explorer, @group) #js-container-registry{ data: { endpoint: group_container_registries_path(@group),
#js-container-registry{ data: { endpoint: group_container_registries_path(@group), "help_page_path" => help_page_path('user/packages/container_registry/index'),
"help_page_path" => help_page_path('user/packages/container_registry/index'), "two_factor_auth_help_link" => help_page_path('user/profile/account/two_factor_authentication'),
"two_factor_auth_help_link" => help_page_path('user/profile/account/two_factor_authentication'), "personal_access_tokens_help_link" => help_page_path('user/profile/personal_access_tokens'),
"personal_access_tokens_help_link" => help_page_path('user/profile/personal_access_tokens'), "no_containers_image" => image_path('illustrations/docker-empty-state.svg'),
"no_containers_image" => image_path('illustrations/docker-empty-state.svg'), "containers_error_image" => image_path('illustrations/docker-error-state.svg'),
"containers_error_image" => image_path('illustrations/docker-error-state.svg'), "registry_host_url_with_port" => escape_once(registry_config.host_port),
"registry_host_url_with_port" => escape_once(registry_config.host_port), "garbage_collection_help_page_path" => help_page_path('administration/packages/container_registry', anchor: 'container-registry-garbage-collection'),
"garbage_collection_help_page_path" => help_page_path('administration/packages/container_registry', anchor: 'container-registry-garbage-collection'), "is_admin": current_user&.admin,
"is_admin": current_user&.admin, is_group_page: true,
is_group_page: true, character_error: @character_error.to_s } }
character_error: @character_error.to_s } }
- else
#js-vue-registry-images{ data: { endpoint: group_container_registries_path(@group, format: :json),
"help_page_path" => help_page_path('user/packages/container_registry/index'),
"no_containers_image" => image_path('illustrations/docker-empty-state.svg'),
"containers_error_image" => image_path('illustrations/docker-error-state.svg'),
"repository_url" => "",
is_group_page: true,
character_error: @character_error.to_s } }
...@@ -4,28 +4,17 @@ ...@@ -4,28 +4,17 @@
%section %section
.row.registry-placeholder.prepend-bottom-10 .row.registry-placeholder.prepend-bottom-10
.col-12 .col-12
- if Feature.enabled?(:vue_container_registry_explorer, @project.group) #js-container-registry{ data: { endpoint: project_container_registry_index_path(@project),
#js-container-registry{ data: { endpoint: project_container_registry_index_path(@project), settings_path: project_settings_ci_cd_path(@project),
settings_path: project_settings_ci_cd_path(@project), expiration_policy: @project.container_expiration_policy.to_json,
expiration_policy: @project.container_expiration_policy.to_json, "help_page_path" => help_page_path('user/packages/container_registry/index'),
"help_page_path" => help_page_path('user/packages/container_registry/index'), "two_factor_auth_help_link" => help_page_path('user/profile/account/two_factor_authentication'),
"two_factor_auth_help_link" => help_page_path('user/profile/account/two_factor_authentication'), "personal_access_tokens_help_link" => help_page_path('user/profile/personal_access_tokens'),
"personal_access_tokens_help_link" => help_page_path('user/profile/personal_access_tokens'), "no_containers_image" => image_path('illustrations/docker-empty-state.svg'),
"no_containers_image" => image_path('illustrations/docker-empty-state.svg'), "containers_error_image" => image_path('illustrations/docker-error-state.svg'),
"containers_error_image" => image_path('illustrations/docker-error-state.svg'), "repository_url" => escape_once(@project.container_registry_url),
"repository_url" => escape_once(@project.container_registry_url), "registry_host_url_with_port" => escape_once(registry_config.host_port),
"registry_host_url_with_port" => escape_once(registry_config.host_port), "expiration_policy_help_page_path" => help_page_path('user/packages/container_registry/index', anchor: 'expiration-policy'),
"expiration_policy_help_page_path" => help_page_path('user/packages/container_registry/index', anchor: 'expiration-policy'), "garbage_collection_help_page_path" => help_page_path('administration/packages/container_registry', anchor: 'container-registry-garbage-collection'),
"garbage_collection_help_page_path" => help_page_path('administration/packages/container_registry', anchor: 'container-registry-garbage-collection'), "is_admin": current_user&.admin,
"is_admin": current_user&.admin, character_error: @character_error.to_s } }
character_error: @character_error.to_s } }
- else
#js-vue-registry-images{ data: { endpoint: project_container_registry_index_path(@project, format: :json),
"help_page_path" => help_page_path('user/packages/container_registry/index'),
"two_factor_auth_help_link" => help_page_path('user/profile/account/two_factor_authentication'),
"personal_access_tokens_help_link" => help_page_path('user/profile/personal_access_tokens'),
"no_containers_image" => image_path('illustrations/docker-empty-state.svg'),
"containers_error_image" => image_path('illustrations/docker-error-state.svg'),
"repository_url" => escape_once(@project.container_registry_url),
"registry_host_url_with_port" => escape_once(registry_config.host_port),
character_error: @character_error.to_s } }
---
title: Enable container registry at the group level
merge_request: 27814
author:
type: added
...@@ -5395,9 +5395,6 @@ msgstr[1] "" ...@@ -5395,9 +5395,6 @@ msgstr[1] ""
msgid "ContainerRegistry|Retention policy has been Enabled" msgid "ContainerRegistry|Retention policy has been Enabled"
msgstr "" msgstr ""
msgid "ContainerRegistry|Size"
msgstr ""
msgid "ContainerRegistry|Something went wrong while deleting the image." msgid "ContainerRegistry|Something went wrong while deleting the image."
msgstr "" msgstr ""
...@@ -5479,18 +5476,9 @@ msgstr "" ...@@ -5479,18 +5476,9 @@ msgstr ""
msgid "ContainerRegistry|You are about to remove %{item}. Are you sure?" msgid "ContainerRegistry|You are about to remove %{item}. Are you sure?"
msgstr "" msgstr ""
msgid "ContainerRegistry|You are about to remove <b>%{count}</b> tags. Are you sure?"
msgstr ""
msgid "ContainerRegistry|You are about to remove <b>%{title}</b>. Are you sure?"
msgstr ""
msgid "ContainerRegistry|You are about to remove repository %{title}. Once you confirm, this repository will be permanently deleted." msgid "ContainerRegistry|You are about to remove repository %{title}. Once you confirm, this repository will be permanently deleted."
msgstr "" msgstr ""
msgid "ContainerRegistry|You are about to remove repository <b>%{title}</b>. Once you confirm, this repository will be permanently deleted."
msgstr ""
msgid "ContainerRegistry|You can add an image to this registry with the following commands:" msgid "ContainerRegistry|You can add an image to this registry with the following commands:"
msgstr "" msgstr ""
...@@ -10747,9 +10735,6 @@ msgstr "" ...@@ -10747,9 +10735,6 @@ msgstr ""
msgid "Ignored" msgid "Ignored"
msgstr "" msgstr ""
msgid "Image %{imageName} was scheduled for deletion from the registry."
msgstr ""
msgid "Image: %{image}" msgid "Image: %{image}"
msgstr "" msgstr ""
...@@ -18678,12 +18663,6 @@ msgstr "" ...@@ -18678,12 +18663,6 @@ msgstr ""
msgid "Something went wrong while fetching the packages list." msgid "Something went wrong while fetching the packages list."
msgstr "" msgstr ""
msgid "Something went wrong while fetching the projects."
msgstr ""
msgid "Something went wrong while fetching the registry list."
msgstr ""
msgid "Something went wrong while initializing the OpenAPI viewer" msgid "Something went wrong while initializing the OpenAPI viewer"
msgstr "" msgstr ""
......
...@@ -15,7 +15,7 @@ describe Groups::Registry::RepositoriesController do ...@@ -15,7 +15,7 @@ describe Groups::Registry::RepositoriesController do
end end
shared_examples 'renders a list of repositories' do shared_examples 'renders a list of repositories' do
context 'when container registry is enabled' do context 'when user has access to registry' do
it 'show index page' do it 'show index page' do
expect(Gitlab::Tracking).not_to receive(:event) expect(Gitlab::Tracking).not_to receive(:event)
...@@ -63,21 +63,7 @@ describe Groups::Registry::RepositoriesController do ...@@ -63,21 +63,7 @@ describe Groups::Registry::RepositoriesController do
end end
end end
context 'container registry is disabled' do context 'user does not have access to container registry' do
before do
stub_container_registry_config(enabled: false)
end
it 'renders not found' do
get :index, params: {
group_id: group
}
expect(response).to have_gitlab_http_status(:not_found)
end
end
context 'user do not have acces to container registry' do
before do before do
sign_out(user) sign_out(user)
sign_in(guest) sign_in(guest)
...@@ -90,22 +76,6 @@ describe Groups::Registry::RepositoriesController do ...@@ -90,22 +76,6 @@ describe Groups::Registry::RepositoriesController do
expect(response).to have_gitlab_http_status(:not_found) expect(response).to have_gitlab_http_status(:not_found)
end end
end end
context 'with :vue_container_registry_explorer feature flag disabled' do
before do
stub_feature_flags(vue_container_registry_explorer: { enabled: false, thing: group })
end
it 'has the correct response schema' do
get :index, params: {
group_id: group,
format: :json
}
expect(response).to match_response_schema('registry/repositories')
expect(response).not_to include_pagination_headers
end
end
end end
context 'GET #index' do context 'GET #index' do
......
...@@ -85,22 +85,6 @@ describe Projects::Registry::RepositoriesController do ...@@ -85,22 +85,6 @@ describe Projects::Registry::RepositoriesController do
end end
end end
end end
context 'with :vue_container_registry_explorer feature flag disabled' do
before do
stub_feature_flags(vue_container_registry_explorer: { enabled: false, thing: project.group })
stub_container_registry_tags(repository: project.full_path,
tags: %w[rc1 latest])
end
it 'json has a list of projects' do
go_to_index(format: :json)
expect(response).to have_gitlab_http_status(:ok)
expect(response).to match_response_schema('registry/repositories')
expect(response).not_to include_pagination_headers
end
end
end end
describe 'GET #index' do describe 'GET #index' do
......
...@@ -17,167 +17,107 @@ describe 'Container Registry', :js do ...@@ -17,167 +17,107 @@ describe 'Container Registry', :js do
stub_container_registry_tags(repository: :any, tags: []) stub_container_registry_tags(repository: :any, tags: [])
end end
describe 'Registry explorer is off' do it 'has a page title set' do
before do visit_container_registry
stub_feature_flags(vue_container_registry_explorer: { enabled: false, thing: project.group })
end expect(page).to have_title _('Container Registry')
end
it 'has a page title set' do context 'when there are no image repositories' do
it 'list page has no container title' do
visit_container_registry visit_container_registry
expect(page).to have_title _('Container Registry') expect(page).to have_content _('There are no container images stored for this project')
end end
context 'when there are no image repositories' do it 'list page has quickstart' do
it 'user visits container registry main page' do visit_container_registry
visit_container_registry
expect(page).to have_content _('no container images') expect(page).to have_content _('Quick Start')
end
end end
end
context 'when there are image repositories' do context 'when there are image repositories' do
before do before do
stub_container_registry_tags(repository: %r{my/image}, tags: %w[latest], with_manifest: true) stub_container_registry_tags(repository: %r{my/image}, tags: %w[latest], with_manifest: true)
project.container_repositories << container_repository project.container_repositories << container_repository
end
it 'user wants to see multi-level container repository' do
visit_container_registry
expect(page).to have_content 'my/image'
end
it 'user removes entire container repository', :sidekiq_might_not_need_inline do
visit_container_registry
expect_any_instance_of(ContainerRepository).to receive(:delete_tags!).and_return(true)
click_on(class: 'js-remove-repo')
expect(find('.modal .modal-title')).to have_content _('Remove repository')
find('.modal .modal-footer .btn-danger').click
end
it 'user removes a specific tag from container repository' do
visit_container_registry
find('.js-toggle-repo').click
wait_for_requests
service = double('service')
expect(service).to receive(:execute).with(container_repository) { { status: :success } }
expect(Projects::ContainerRepository::DeleteTagsService).to receive(:new).with(container_repository.project, user, tags: ['latest']) { service }
click_on(class: 'js-delete-registry-row', visible: false)
expect(find('.modal .modal-title')).to have_content _('Remove tag')
find('.modal .modal-footer .btn-danger').click
end
end end
end
describe 'Registry explorer is on' do it 'list page has a list of images' do
it 'has a page title set' do
visit_container_registry visit_container_registry
expect(page).to have_title _('Container Registry') expect(page).to have_content 'my/image'
end end
context 'when there are no image repositories' do it 'user removes entire container repository', :sidekiq_might_not_need_inline do
it 'list page has no container title' do visit_container_registry
visit_container_registry
expect_any_instance_of(ContainerRepository).to receive(:delete_tags!).and_return(true)
expect(page).to have_content _('There are no container images stored for this project') find('[title="Remove repository"]').click
end expect(find('.modal .modal-title')).to have_content _('Remove repository')
find('.modal .modal-footer .btn-danger').click
end
it 'list page has quickstart' do it 'navigates to repo details' do
visit_container_registry visit_container_registry_details('my/image')
expect(page).to have_content _('Quick Start') expect(page).to have_content 'latest'
end
end end
context 'when there are image repositories' do describe 'image repo details' do
before do before do
stub_container_registry_tags(repository: %r{my/image}, tags: %w[latest], with_manifest: true) stub_container_registry_tags(repository: %r{my/image}, tags: ('1'..'20').to_a, with_manifest: true)
project.container_repositories << container_repository visit_container_registry_details 'my/image'
end end
it 'list page has a list of images' do it 'shows the details breadcrumb' do
visit_container_registry expect(find('.breadcrumbs')).to have_link 'my/image'
expect(page).to have_content 'my/image'
end end
it 'user removes entire container repository', :sidekiq_might_not_need_inline do it 'shows the image title' do
visit_container_registry expect(page).to have_content 'my/image tags'
expect_any_instance_of(ContainerRepository).to receive(:delete_tags!).and_return(true)
find('[title="Remove repository"]').click
expect(find('.modal .modal-title')).to have_content _('Remove repository')
find('.modal .modal-footer .btn-danger').click
end end
it 'navigates to repo details' do it 'user removes a specific tag from container repository' do
visit_container_registry_details('my/image') service = double('service')
expect(service).to receive(:execute).with(container_repository) { { status: :success } }
expect(Projects::ContainerRepository::DeleteTagsService).to receive(:new).with(container_repository.project, user, tags: ['1']) { service }
expect(page).to have_content 'latest' first('.js-delete-registry').click
expect(find('.modal .modal-title')).to have_content _('Remove tag')
find('.modal .modal-footer .btn-danger').click
end end
describe 'image repo details' do it('pagination navigate to the second page') do
before do visit_second_page
stub_container_registry_tags(repository: %r{my/image}, tags: ('1'..'20').to_a, with_manifest: true) expect(page).to have_content '20'
visit_container_registry_details 'my/image'
end
it 'shows the details breadcrumb' do
expect(find('.breadcrumbs')).to have_link 'my/image'
end
it 'shows the image title' do
expect(page).to have_content 'my/image tags'
end
it 'user removes a specific tag from container repository' do
service = double('service')
expect(service).to receive(:execute).with(container_repository) { { status: :success } }
expect(Projects::ContainerRepository::DeleteTagsService).to receive(:new).with(container_repository.project, user, tags: ['1']) { service }
first('.js-delete-registry').click
expect(find('.modal .modal-title')).to have_content _('Remove tag')
find('.modal .modal-footer .btn-danger').click
end
it('pagination navigate to the second page') do
visit_second_page
expect(page).to have_content '20'
end
end end
end end
end
context 'when there are more than 10 images' do context 'when there are more than 10 images' do
before do before do
create_list(:container_repository, 12, project: project) create_list(:container_repository, 12, project: project)
project.container_repositories << container_repository project.container_repositories << container_repository
visit_container_registry visit_container_registry
end end
it 'shows pagination' do it 'shows pagination' do
expect(page).to have_css '.gl-pagination' expect(page).to have_css '.gl-pagination'
end end
it 'pagination goes to second page' do it 'pagination goes to second page' do
visit_second_page visit_second_page
expect(page).to have_content 'my/image' expect(page).to have_content 'my/image'
end end
it 'pagination is preserved after navigating back from details' do it 'pagination is preserved after navigating back from details' do
visit_second_page visit_second_page
click_link 'my/image' click_link 'my/image'
breadcrumb = find '.breadcrumbs' breadcrumb = find '.breadcrumbs'
breadcrumb.click_link 'Container Registry' breadcrumb.click_link 'Container Registry'
expect(page).to have_content 'my/image' expect(page).to have_content 'my/image'
end
end end
end end
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Registry Group Empty state to match the default snapshot 1`] = `
<div
class="row container-message empty-state"
>
<div
class="col-12"
>
<div
class="svg-250 svg-content"
>
<img
alt="There are no container images available in this group"
class=""
src="imageUrl"
/>
</div>
</div>
<div
class="col-12"
>
<div
class="text-content"
>
<h4
class="center"
style=""
>
There are no container images available in this group
</h4>
<p
class="center"
style=""
>
<p
class="js-no-container-images-text"
>
With the Container Registry, every project can have its own space to store its Docker images. Push at least one Docker image in one of this group's projects in order to show up here.
<a
href="help"
target="_blank"
>
More Information
</a>
</p>
</p>
<div
class="text-center"
>
<!---->
<!---->
</div>
</div>
</div>
</div>
`;
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Registry Project Empty state to match the default snapshot 1`] = `
<div
class="row container-message empty-state"
>
<div
class="col-12"
>
<div
class="svg-250 svg-content"
>
<img
alt="There are no container images stored for this project"
class=""
src="imageUrl"
/>
</div>
</div>
<div
class="col-12"
>
<div
class="text-content"
>
<h4
class="center"
style=""
>
There are no container images stored for this project
</h4>
<p
class="center"
style=""
>
<p
class="js-no-container-images-text"
>
With the Container Registry, every project can have its own space to store its Docker images.
<a
href="help"
target="_blank"
>
More Information
</a>
</p>
<h5>
Quick Start
</h5>
<p
class="js-not-logged-in-to-registry-text"
>
If you are not already logged in, you need to authenticate to the Container Registry by using your GitLab username and password. If you have
<a
href="help_link"
target="_blank"
>
Two-Factor Authentication
</a>
enabled, use a
<a
href="personal_token"
target="_blank"
>
Personal Access Token
</a>
instead of a password.
</p>
<div
class="input-group append-bottom-10"
>
<input
class="form-control monospace"
readonly="readonly"
type="text"
/>
<span
class="input-group-append"
>
<button
class="btn input-group-text btn-secondary btn-md btn-default"
data-clipboard-text="docker login host"
title="Copy login command"
type="button"
>
<!---->
<svg
class="gl-icon s16"
>
<use
href="#copy-to-clipboard"
/>
</svg>
</button>
</span>
</div>
<p />
<p>
You can add an image to this registry with the following commands:
</p>
<div
class="input-group append-bottom-10"
>
<input
class="form-control monospace"
readonly="readonly"
type="text"
/>
<span
class="input-group-append"
>
<button
class="btn input-group-text btn-secondary btn-md btn-default"
data-clipboard-text="docker build -t url ."
title="Copy build command"
type="button"
>
<!---->
<svg
class="gl-icon s16"
>
<use
href="#copy-to-clipboard"
/>
</svg>
</button>
</span>
</div>
<div
class="input-group"
>
<input
class="form-control monospace"
readonly="readonly"
type="text"
/>
<span
class="input-group-append"
>
<button
class="btn input-group-text btn-secondary btn-md btn-default"
data-clipboard-text="docker push url"
title="Copy push command"
type="button"
>
<!---->
<svg
class="gl-icon s16"
>
<use
href="#copy-to-clipboard"
/>
</svg>
</button>
</span>
</div>
</p>
<div
class="text-center"
>
<!---->
<!---->
</div>
</div>
</div>
</div>
`;
import { mount } from '@vue/test-utils';
import { TEST_HOST } from 'helpers/test_constants';
import registry from '~/registry/list/components/app.vue';
import { reposServerResponse, parsedReposServerResponse } from '../mock_data';
describe('Registry List', () => {
let wrapper;
const findCollapsibleContainer = () => wrapper.findAll({ name: 'CollapsibeContainerRegisty' });
const findProjectEmptyState = () => wrapper.find({ name: 'ProjectEmptyState' });
const findGroupEmptyState = () => wrapper.find({ name: 'GroupEmptyState' });
const findSpinner = () => wrapper.find('.gl-spinner');
const findCharacterErrorText = () => wrapper.find('.js-character-error-text');
const propsData = {
endpoint: `${TEST_HOST}/foo`,
helpPagePath: 'foo',
noContainersImage: 'foo',
containersErrorImage: 'foo',
repositoryUrl: 'foo',
registryHostUrlWithPort: 'foo',
personalAccessTokensHelpLink: 'foo',
twoFactorAuthHelpLink: 'foo',
};
const setMainEndpoint = jest.fn();
const fetchRepos = jest.fn();
const setIsDeleteDisabled = jest.fn();
const methods = {
setMainEndpoint,
fetchRepos,
setIsDeleteDisabled,
};
beforeEach(() => {
wrapper = mount(registry, {
propsData,
computed: {
repos() {
return parsedReposServerResponse;
},
},
methods,
});
});
afterEach(() => {
wrapper.destroy();
});
describe('with data', () => {
it('should render a list of CollapsibeContainerRegisty', () => {
const containers = findCollapsibleContainer();
expect(wrapper.vm.repos.length).toEqual(reposServerResponse.length);
expect(containers.length).toEqual(reposServerResponse.length);
});
});
describe('without data', () => {
beforeEach(() => {
wrapper = mount(registry, {
propsData,
computed: {
repos() {
return [];
},
},
methods,
});
});
it('should render project empty message', () => {
const projectEmptyState = findProjectEmptyState();
expect(projectEmptyState.exists()).toBe(true);
});
});
describe('while loading data', () => {
beforeEach(() => {
wrapper = mount(registry, {
propsData,
computed: {
repos() {
return [];
},
isLoading() {
return true;
},
},
methods,
});
});
it('should render a loading spinner', () => {
const spinner = findSpinner();
expect(spinner.exists()).toBe(true);
});
});
describe('invalid characters in path', () => {
beforeEach(() => {
wrapper = mount(registry, {
propsData: {
...propsData,
characterError: true,
},
computed: {
repos() {
return [];
},
},
methods,
});
});
it('should render invalid characters error message', () => {
const characterErrorText = findCharacterErrorText();
expect(characterErrorText.text()).toEqual(
'We are having trouble connecting to Docker, which could be due to an issue with your project name or path. More Information',
);
});
});
describe('with groupId set', () => {
const isGroupPage = true;
beforeEach(() => {
wrapper = mount(registry, {
propsData: {
...propsData,
endpoint: '',
isGroupPage,
},
methods,
});
});
it('call the right vuex setters', () => {
expect(methods.setMainEndpoint).toHaveBeenLastCalledWith('');
expect(methods.setIsDeleteDisabled).toHaveBeenLastCalledWith(true);
});
it('should render groups empty message', () => {
const groupEmptyState = findGroupEmptyState(wrapper);
expect(groupEmptyState.exists()).toBe(true);
});
});
});
import Vuex from 'vuex';
import { mount, createLocalVue } from '@vue/test-utils';
import createFlash from '~/flash';
import Tracking from '~/tracking';
import collapsibleComponent from '~/registry/list/components/collapsible_container.vue';
import * as getters from '~/registry/list/stores/getters';
import { repoPropsData } from '../mock_data';
jest.mock('~/flash.js');
const localVue = createLocalVue();
localVue.use(Vuex);
describe('collapsible registry container', () => {
let wrapper;
let store;
const findDeleteBtn = () => wrapper.find('.js-remove-repo');
const findContainerImageTags = () => wrapper.find('.container-image-tags');
const findToggleRepos = () => wrapper.findAll('.js-toggle-repo');
const findDeleteModal = () => wrapper.find({ ref: 'deleteModal' });
const mountWithStore = config =>
mount(collapsibleComponent, {
...config,
store,
localVue,
});
beforeEach(() => {
createFlash.mockClear();
store = new Vuex.Store({
state: {
isDeleteDisabled: false,
},
getters,
});
wrapper = mountWithStore({
propsData: {
repo: repoPropsData,
},
});
});
afterEach(() => {
wrapper.destroy();
});
describe('toggle', () => {
beforeEach(() => {
const fetchList = jest.fn();
wrapper.setMethods({ fetchList });
return wrapper.vm.$nextTick();
});
const expectIsClosed = () => {
const container = findContainerImageTags();
expect(container.exists()).toBe(false);
expect(wrapper.vm.iconName).toEqual('angle-right');
};
it('should be closed by default', () => {
expectIsClosed();
});
it('should be open when user clicks on closed repo', () => {
const toggleRepos = findToggleRepos();
toggleRepos.at(0).trigger('click');
return wrapper.vm.$nextTick().then(() => {
const container = findContainerImageTags();
expect(container.exists()).toBe(true);
expect(wrapper.vm.fetchList).toHaveBeenCalled();
});
});
it('should be closed when the user clicks on an opened repo', () => {
const toggleRepos = findToggleRepos();
toggleRepos.at(0).trigger('click');
return wrapper.vm.$nextTick().then(() => {
toggleRepos.at(0).trigger('click');
wrapper.vm.$nextTick(() => {
expectIsClosed();
});
});
});
});
describe('delete repo', () => {
beforeEach(() => {
const deleteItem = jest.fn().mockResolvedValue();
const fetchRepos = jest.fn().mockResolvedValue();
wrapper.setMethods({ deleteItem, fetchRepos });
});
it('should be possible to delete a repo', () => {
const deleteBtn = findDeleteBtn();
expect(deleteBtn.exists()).toBe(true);
});
it('should call deleteItem when confirming deletion', () => {
wrapper.vm.handleDeleteRepository();
expect(wrapper.vm.deleteItem).toHaveBeenCalledWith(wrapper.vm.repo);
});
it('should show a flash with a success notice', () =>
wrapper.vm.handleDeleteRepository().then(() => {
expect(wrapper.vm.deleteImageConfirmationMessage).toContain(wrapper.vm.repo.name);
expect(createFlash).toHaveBeenCalledWith(
wrapper.vm.deleteImageConfirmationMessage,
'notice',
);
}));
it('should show an error when there is API error', () => {
const deleteItem = jest.fn().mockRejectedValue('error');
wrapper.setMethods({ deleteItem });
return wrapper.vm.handleDeleteRepository().then(() => {
expect(createFlash).toHaveBeenCalled();
});
});
});
describe('disabled delete', () => {
beforeEach(() => {
store = new Vuex.Store({
state: {
isDeleteDisabled: true,
},
getters,
});
wrapper = mountWithStore({
propsData: {
repo: repoPropsData,
},
});
});
it('should not render delete button', () => {
const deleteBtn = findDeleteBtn();
expect(deleteBtn.exists()).toBe(false);
});
});
describe('tracking', () => {
const testTrackingCall = action => {
expect(Tracking.event).toHaveBeenCalledWith(undefined, action, {
label: 'registry_repository_delete',
});
};
beforeEach(() => {
jest.spyOn(Tracking, 'event');
wrapper.vm.deleteItem = jest.fn().mockResolvedValue();
wrapper.vm.fetchRepos = jest.fn();
});
it('send an event when delete button is clicked', () => {
const deleteBtn = findDeleteBtn();
deleteBtn.trigger('click');
testTrackingCall('click_button');
});
it('send an event when cancel is pressed on modal', () => {
const deleteModal = findDeleteModal();
deleteModal.vm.$emit('cancel');
testTrackingCall('cancel_delete');
});
it('send an event when confirm is clicked on modal', () => {
const deleteModal = findDeleteModal();
deleteModal.vm.$emit('ok');
testTrackingCall('confirm_delete');
});
});
});
import { mount } from '@vue/test-utils';
import groupEmptyState from '~/registry/list/components/group_empty_state.vue';
describe('Registry Group Empty state', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(groupEmptyState, {
propsData: {
noContainersImage: 'imageUrl',
helpPagePath: 'help',
},
});
});
afterEach(() => {
wrapper.destroy();
});
it('to match the default snapshot', () => {
expect(wrapper.element).toMatchSnapshot();
});
});
import { mount } from '@vue/test-utils';
import projectEmptyState from '~/registry/list/components/project_empty_state.vue';
describe('Registry Project Empty state', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(projectEmptyState, {
propsData: {
noContainersImage: 'imageUrl',
helpPagePath: 'help',
repositoryUrl: 'url',
twoFactorAuthHelpLink: 'help_link',
personalAccessTokensHelpLink: 'personal_token',
registryHostUrlWithPort: 'host',
},
});
});
afterEach(() => {
wrapper.destroy();
});
it('to match the default snapshot', () => {
expect(wrapper.element).toMatchSnapshot();
});
});
export const defaultState = {
isLoading: false,
endpoint: '',
repos: [],
};
export const reposServerResponse = [
{
destroy_path: 'path',
id: '123',
location: 'location',
path: 'foo',
tags_path: 'tags_path',
},
{
destroy_path: 'path_',
id: '456',
location: 'location_',
path: 'bar',
tags_path: 'tags_path_',
},
];
export const registryServerResponse = [
{
name: 'centos7',
short_revision: 'b118ab5b0',
revision: 'b118ab5b0e90b7cb5127db31d5321ac14961d097516a8e0e72084b6cdc783b43',
total_size: 679,
layers: 19,
location: 'location',
created_at: 1505828744434,
destroy_path: 'path_',
},
{
name: 'centos6',
short_revision: 'b118ab5b0',
revision: 'b118ab5b0e90b7cb5127db31d5321ac14961d097516a8e0e72084b6cdc783b43',
total_size: 679,
layers: 19,
location: 'location',
created_at: 1505828744434,
},
];
export const parsedReposServerResponse = [
{
canDelete: true,
destroyPath: reposServerResponse[0].destroy_path,
id: reposServerResponse[0].id,
isLoading: false,
list: [],
location: reposServerResponse[0].location,
name: reposServerResponse[0].path,
tagsPath: reposServerResponse[0].tags_path,
},
{
canDelete: true,
destroyPath: reposServerResponse[1].destroy_path,
id: reposServerResponse[1].id,
isLoading: false,
list: [],
location: reposServerResponse[1].location,
name: reposServerResponse[1].path,
tagsPath: reposServerResponse[1].tags_path,
},
];
export const parsedRegistryServerResponse = [
{
tag: registryServerResponse[0].name,
revision: registryServerResponse[0].revision,
shortRevision: registryServerResponse[0].short_revision,
size: registryServerResponse[0].total_size,
layers: registryServerResponse[0].layers,
location: registryServerResponse[0].location,
createdAt: registryServerResponse[0].created_at,
destroyPath: registryServerResponse[0].destroy_path,
canDelete: true,
},
{
tag: registryServerResponse[1].name,
revision: registryServerResponse[1].revision,
shortRevision: registryServerResponse[1].short_revision,
size: registryServerResponse[1].total_size,
layers: registryServerResponse[1].layers,
location: registryServerResponse[1].location,
createdAt: registryServerResponse[1].created_at,
destroyPath: registryServerResponse[1].destroy_path,
canDelete: false,
},
];
export const repoPropsData = {
canDelete: true,
destroyPath: 'path',
id: '123',
isLoading: false,
list: [
{
tag: 'centos6',
revision: 'b118ab5b0e90b7cb5127db31d5321ac14961d097516a8e0e72084b6cdc783b43',
shortRevision: 'b118ab5b0',
size: 19,
layers: 10,
location: 'location',
createdAt: 1505828744434,
destroyPath: 'path',
canDelete: true,
},
{
tag: 'test-image',
revision: 'b969de599faea2b3d9b6605a8b0897261c571acaa36db1bdc7349b5775b4e0b4',
shortRevision: 'b969de599',
size: 19,
layers: 10,
location: 'location-2',
createdAt: 1505828744434,
destroyPath: 'path-2',
canDelete: true,
},
],
location: 'location',
name: 'foo',
tagsPath: 'path',
pagination: {
perPage: 5,
page: 1,
total: 13,
totalPages: 1,
nextPage: null,
previousPage: null,
},
};
import MockAdapter from 'axios-mock-adapter';
import { TEST_HOST } from 'helpers/test_constants';
import testAction from 'helpers/vuex_action_helper';
import axios from '~/lib/utils/axios_utils';
import * as actions from '~/registry/list/stores/actions';
import * as types from '~/registry/list/stores/mutation_types';
import createFlash from '~/flash';
import {
reposServerResponse,
registryServerResponse,
parsedReposServerResponse,
} from '../mock_data';
jest.mock('~/flash.js');
describe('Actions Registry Store', () => {
let mock;
let state;
beforeEach(() => {
mock = new MockAdapter(axios);
state = {
endpoint: `${TEST_HOST}/endpoint.json`,
};
});
afterEach(() => {
mock.restore();
});
describe('fetchRepos', () => {
beforeEach(() => {
mock.onGet(`${TEST_HOST}/endpoint.json`).replyOnce(200, reposServerResponse, {});
});
it('should set received repos', done => {
testAction(
actions.fetchRepos,
null,
state,
[
{ type: types.TOGGLE_MAIN_LOADING },
{ type: types.TOGGLE_MAIN_LOADING },
{ type: types.SET_REPOS_LIST, payload: reposServerResponse },
],
[],
done,
);
});
it('should create flash on API error', done => {
testAction(
actions.fetchRepos,
null,
{
endpoint: null,
},
[{ type: types.TOGGLE_MAIN_LOADING }, { type: types.TOGGLE_MAIN_LOADING }],
[],
() => {
expect(createFlash).toHaveBeenCalled();
done();
},
);
});
});
describe('fetchList', () => {
let repo;
beforeEach(() => {
state.repos = parsedReposServerResponse;
[, repo] = state.repos;
});
it('should set received list', done => {
mock.onGet(repo.tagsPath).replyOnce(200, registryServerResponse, {});
testAction(
actions.fetchList,
{ repo },
state,
[
{ type: types.TOGGLE_REGISTRY_LIST_LOADING, payload: repo },
{ type: types.TOGGLE_REGISTRY_LIST_LOADING, payload: repo },
{
type: types.SET_REGISTRY_LIST,
payload: {
repo,
resp: registryServerResponse,
headers: expect.anything(),
},
},
],
[],
done,
);
});
it('should create flash on API error', done => {
mock.onGet(repo.tagsPath).replyOnce(400);
const updatedRepo = {
...repo,
tagsPath: null,
};
testAction(
actions.fetchList,
{
repo: updatedRepo,
},
state,
[
{ type: types.TOGGLE_REGISTRY_LIST_LOADING, payload: updatedRepo },
{ type: types.TOGGLE_REGISTRY_LIST_LOADING, payload: updatedRepo },
],
[],
() => {
expect(createFlash).toHaveBeenCalled();
done();
},
);
});
});
describe('setMainEndpoint', () => {
it('should commit set main endpoint', done => {
testAction(
actions.setMainEndpoint,
'endpoint',
state,
[{ type: types.SET_MAIN_ENDPOINT, payload: 'endpoint' }],
[],
done,
);
});
});
describe('setIsDeleteDisabled', () => {
it('should commit set is delete disabled', done => {
testAction(
actions.setIsDeleteDisabled,
true,
state,
[{ type: types.SET_IS_DELETE_DISABLED, payload: true }],
[],
done,
);
});
});
describe('toggleLoading', () => {
it('should commit toggle main loading', done => {
testAction(
actions.toggleLoading,
null,
state,
[{ type: types.TOGGLE_MAIN_LOADING }],
[],
done,
);
});
});
describe('deleteItem and multiDeleteItems', () => {
let deleted;
const destroyPath = `${TEST_HOST}/mygroup/myproject/container_registry/1.json`;
const expectDelete = done => {
expect(mock.history.delete.length).toBe(1);
expect(deleted).toBe(true);
done();
};
beforeEach(() => {
deleted = false;
mock.onDelete(destroyPath).replyOnce(() => {
deleted = true;
return [200];
});
});
it('deleteItem should perform DELETE request on destroyPath', done => {
testAction(
actions.deleteItem,
{
destroyPath,
},
state,
)
.then(() => {
expectDelete(done);
})
.catch(done.fail);
});
it('multiDeleteItems should perform DELETE request on path', done => {
testAction(actions.multiDeleteItems, { path: destroyPath, items: [1] }, state)
.then(() => {
expectDelete(done);
})
.catch(done.fail);
});
});
});
import * as getters from '~/registry/list/stores/getters';
describe('Getters Registry Store', () => {
let state;
beforeEach(() => {
state = {
isLoading: false,
endpoint: '/root/empty-project/container_registry.json',
isDeleteDisabled: false,
repos: [
{
canDelete: true,
destroyPath: 'bar',
id: '134',
isLoading: false,
list: [],
location: 'foo',
name: 'gitlab-org/omnibus-gitlab/foo',
tagsPath: 'foo',
},
{
canDelete: true,
destroyPath: 'bar',
id: '123',
isLoading: false,
list: [],
location: 'foo',
name: 'gitlab-org/omnibus-gitlab',
tagsPath: 'foo',
},
],
};
});
describe('isLoading', () => {
it('should return the isLoading property', () => {
expect(getters.isLoading(state)).toEqual(state.isLoading);
});
});
describe('repos', () => {
it('should return the repos', () => {
expect(getters.repos(state)).toEqual(state.repos);
});
});
describe('isDeleteDisabled', () => {
it('should return isDeleteDisabled', () => {
expect(getters.isDeleteDisabled(state)).toEqual(state.isDeleteDisabled);
});
});
});
import mutations from '~/registry/list/stores/mutations';
import * as types from '~/registry/list/stores/mutation_types';
import {
defaultState,
reposServerResponse,
registryServerResponse,
parsedReposServerResponse,
parsedRegistryServerResponse,
} from '../mock_data';
describe('Mutations Registry Store', () => {
let mockState;
beforeEach(() => {
mockState = defaultState;
});
describe('SET_MAIN_ENDPOINT', () => {
it('should set the main endpoint', () => {
const expectedState = Object.assign({}, mockState, { endpoint: 'foo' });
mutations[types.SET_MAIN_ENDPOINT](mockState, 'foo');
expect(mockState.endpoint).toEqual(expectedState.endpoint);
});
});
describe('SET_IS_DELETE_DISABLED', () => {
it('should set the is delete disabled', () => {
const expectedState = Object.assign({}, mockState, { isDeleteDisabled: true });
mutations[types.SET_IS_DELETE_DISABLED](mockState, true);
expect(mockState.isDeleteDisabled).toEqual(expectedState.isDeleteDisabled);
});
});
describe('SET_REPOS_LIST', () => {
it('should set a parsed repository list', () => {
mutations[types.SET_REPOS_LIST](mockState, reposServerResponse);
expect(mockState.repos).toEqual(parsedReposServerResponse);
});
});
describe('TOGGLE_MAIN_LOADING', () => {
it('should set a parsed repository list', () => {
mutations[types.TOGGLE_MAIN_LOADING](mockState);
expect(mockState.isLoading).toEqual(true);
});
});
describe('SET_REGISTRY_LIST', () => {
it('should set a list of registries in a specific repository', () => {
mutations[types.SET_REPOS_LIST](mockState, reposServerResponse);
mutations[types.SET_REGISTRY_LIST](mockState, {
repo: mockState.repos[0],
resp: registryServerResponse,
headers: {
'x-per-page': 2,
'x-page': 1,
'x-total': 10,
},
});
expect(mockState.repos[0].list).toEqual(parsedRegistryServerResponse);
expect(mockState.repos[0].pagination).toEqual({
perPage: 2,
page: 1,
total: 10,
totalPages: NaN,
nextPage: NaN,
previousPage: NaN,
});
});
});
describe('TOGGLE_REGISTRY_LIST_LOADING', () => {
it('should toggle isLoading property for a specific repository', () => {
mutations[types.SET_REPOS_LIST](mockState, reposServerResponse);
mutations[types.SET_REGISTRY_LIST](mockState, {
repo: mockState.repos[0],
resp: registryServerResponse,
headers: {
'x-per-page': 2,
'x-page': 1,
'x-total': 10,
},
});
mutations[types.TOGGLE_REGISTRY_LIST_LOADING](mockState, mockState.repos[0]);
expect(mockState.repos[0].isLoading).toEqual(true);
});
});
});
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