<script> <script>
import { mapGetters, mapActions } from 'vuex'; import { mapGetters, mapActions } from 'vuex';
import { GlLoadingIcon } from '@gitlab/ui'; import { GlLoadingIcon, GlEmptyState } from '@gitlab/ui';
import store from '../stores'; import store from '../stores';
import clipboardButton from '../../vue_shared/components/clipboard_button.vue'; import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
import CollapsibleContainer from './collapsible_container.vue'; import CollapsibleContainer from './collapsible_container.vue';
import SvgMessage from './svg_message.vue';
import { s__, sprintf } from '../../locale'; import { s__, sprintf } from '../../locale';
export default { export default {
...@@ -12,8 +11,8 @@ export default { ...@@ -12,8 +11,8 @@ export default {
components: { components: {
clipboardButton, clipboardButton,
CollapsibleContainer, CollapsibleContainer,
GlEmptyState,
GlLoadingIcon, GlLoadingIcon,
SvgMessage,
}, },
props: { props: {
endpoint: { endpoint: {
...@@ -93,7 +92,9 @@ export default { ...@@ -93,7 +92,9 @@ export default {
this.setMainEndpoint(this.endpoint); this.setMainEndpoint(this.endpoint);
}, },
mounted() { mounted() {
this.fetchRepos(); if (!this.characterError) {
this.fetchRepos();
}
}, },
methods: { methods: {
...mapActions(['setMainEndpoint', 'fetchRepos']), ...mapActions(['setMainEndpoint', 'fetchRepos']),
...@@ -102,61 +103,63 @@ export default { ...@@ -102,61 +103,63 @@ export default {
</script> </script>
<template> <template>
<div> <div>
<svg-message v-if="characterError" id="invalid-characters" :svg-path="containersErrorImage"> <gl-empty-state
<h4> v-if="characterError"
{{ s__('ContainerRegistry|Docker connection error') }} :title="s__('ContainerRegistry|Docker connection error')"
</h4> :svg-path="containersErrorImage"
<p v-html="dockerConnectionErrorText"></p> >
</svg-message> <template #description>
<p v-html="dockerConnectionErrorText"></p>
</template>
</gl-empty-state>
<gl-loading-icon v-else-if="isLoading && !characterError" size="md" class="prepend-top-16" /> <gl-loading-icon v-else-if="isLoading" size="md" class="prepend-top-16" />
<div v-else-if="!isLoading && !characterError && repos.length"> <div v-else-if="!isLoading && repos.length">
<h4>{{ s__('ContainerRegistry|Container Registry') }}</h4> <h4>{{ s__('ContainerRegistry|Container Registry') }}</h4>
<p v-html="introText"></p> <p v-html="introText"></p>
<collapsible-container v-for="item in repos" :key="item.id" :repo="item" /> <collapsible-container v-for="item in repos" :key="item.id" :repo="item" />
</div> </div>
<svg-message <gl-empty-state
v-else-if="!isLoading && !characterError && !repos.length" v-else
id="no-container-images" :title="s__('ContainerRegistry|There are no container images stored for this project')"
:svg-path="noContainersImage" :svg-path="noContainersImage"
class="container-message"
> >
<h4> <template #description>
{{ s__('ContainerRegistry|There are no container images stored for this project') }} <p class="js-no-container-images-text" v-html="noContainerImagesText"></p>
</h4> <h5>{{ s__('ContainerRegistry|Quick Start') }}</h5>
<p v-html="noContainerImagesText"></p> <p>
{{
<h5>{{ s__('ContainerRegistry|Quick Start') }}</h5> s__(
<p> 'ContainerRegistry|You can add an image to this registry with the following commands:',
{{ )
s__( }}
'ContainerRegistry|You can add an image to this registry with the following commands:', </p>
)
}}
</p>
<div class="input-group append-bottom-10"> <div class="input-group append-bottom-10">
<input :value="dockerBuildCommand" type="text" class="form-control monospace" readonly /> <input :value="dockerBuildCommand" type="text" class="form-control monospace" readonly />
<span class="input-group-append"> <span class="input-group-append">
<clipboard-button <clipboard-button
:text="dockerBuildCommand" :text="dockerBuildCommand"
:title="s__('ContainerRegistry|Copy build command to clipboard')" :title="s__('ContainerRegistry|Copy build command to clipboard')"
class="input-group-text" class="input-group-text"
/> />
</span> </span>
</div> </div>
<div class="input-group"> <div class="input-group">
<input :value="dockerPushCommand" type="text" class="form-control monospace" readonly /> <input :value="dockerPushCommand" type="text" class="form-control monospace" readonly />
<span class="input-group-append"> <span class="input-group-append">
<clipboard-button <clipboard-button
:text="dockerPushCommand" :text="dockerPushCommand"
:title="s__('ContainerRegistry|Copy push command to clipboard')" :title="s__('ContainerRegistry|Copy push command to clipboard')"
class="input-group-text" class="input-group-text"
/> />
</span> </span>
</div> </div>
</svg-message> </template>
</gl-empty-state>
</div> </div>
</template> </template>
<script>
export default {
name: 'RegistrySvgMessage',
props: {
id: {
type: String,
required: true,
},
svgPath: {
type: String,
required: true,
},
},
};
</script>
<template>
<div :id="id" class="empty-state container-message">
<div class="svg-content">
<img :src="svgPath" class="flex-align-self-center" />
</div>
<div class="text-content">
<slot></slot>
</div>
</div>
</template>
...@@ -3,10 +3,6 @@ ...@@ -3,10 +3,6 @@
*/ */
.container-message { .container-message {
pre {
white-space: pre-line;
}
span .btn { span .btn {
margin: 0; margin: 0;
} }
... ...
......
...@@ -84,12 +84,7 @@ describe('Registry List', () => { ...@@ -84,12 +84,7 @@ describe('Registry List', () => {
it('should render empty message', done => { it('should render empty message', done => {
setTimeout(() => { setTimeout(() => {
expect( expect(vm.$el.querySelector('.js-no-container-images-text').textContent).toEqual(
vm.$el
.querySelector('p')
.textContent.trim()
.replace(/[\r\n]+/g, ' '),
).toEqual(
'With the Container Registry, every project can have its own space to store its Docker images. More Information', 'With the Container Registry, every project can have its own space to store its Docker images. More Information',
); );
done(); done();
...@@ -124,7 +119,9 @@ describe('Registry List', () => { ...@@ -124,7 +119,9 @@ describe('Registry List', () => {
it('should render invalid characters error message', done => { it('should render invalid characters error message', done => {
setTimeout(() => { setTimeout(() => {
expect(vm.$el.querySelector('.container-message')).not.toBe(null); expect(vm.$el.querySelector('p')).not.toContain(
'We are having trouble connecting to Docker, which could be due to an issue with your project name or path. More information',
);
done(); done();
}); });
}); });
... ...
......