kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Merge branch 'replace-svg-message-with-empty-state' into 'master' 

Remove svg component from Container Registry

Closes #66371

See merge request gitlab-org/gitlab-ce!30845
This commit is contained in:
Clement Ho 2019-08-21 18:55:44 +00:00
parent f91282c90b 646913f4e2
commit b0af3979a4
4 changed files with 56 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
app/assets/javascripts/registry/components/app.vue
View File

@ -1,10 +1,9 @@
<script>
import { mapGetters, mapActions } from 'vuex';
import { GlLoadingIcon } from '@gitlab/ui';
import { GlLoadingIcon, GlEmptyState } from '@gitlab/ui';
import store from '../stores';
import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
import CollapsibleContainer from './collapsible_container.vue';
import SvgMessage from './svg_message.vue';
import { s__, sprintf } from '../../locale';
export default {
@ -12,8 +11,8 @@ export default {
components: {
clipboardButton,
CollapsibleContainer,
GlEmptyState,
GlLoadingIcon,
SvgMessage,
},
props: {
endpoint: {
@ -93,7 +92,9 @@ export default {
this.setMainEndpoint(this.endpoint);
},
mounted() {
this.fetchRepos();
if (!this.characterError) {
this.fetchRepos();
}
},
methods: {
...mapActions(['setMainEndpoint', 'fetchRepos']),
@ -102,61 +103,63 @@ export default {
</script>
<template>
<div>
<svg-message v-if="characterError" id="invalid-characters" :svg-path="containersErrorImage">
<h4>
{{ s__('ContainerRegistry|Docker connection error') }}
</h4>
<p v-html="dockerConnectionErrorText"></p>
</svg-message>
<gl-empty-state
v-if="characterError"
:title="s__('ContainerRegistry|Docker connection error')"
:svg-path="containersErrorImage"
>
<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>
<p v-html="introText"></p>
<collapsible-container v-for="item in repos" :key="item.id" :repo="item" />
</div>
<svg-message
v-else-if="!isLoading && !characterError && !repos.length"
id="no-container-images"
<gl-empty-state
v-else
:title="s__('ContainerRegistry|There are no container images stored for this project')"
:svg-path="noContainersImage"
class="container-message"
>
<h4>
{{ s__('ContainerRegistry|There are no container images stored for this project') }}
</h4>
<p v-html="noContainerImagesText"></p>
<template #description>
<p class="js-no-container-images-text" v-html="noContainerImagesText"></p>
<h5>{{ s__('ContainerRegistry|Quick Start') }}</h5>
<p>
{{
s__(
'ContainerRegistry|You can add an image to this registry with the following commands:',
)
}}
</p>
<h5>{{ s__('ContainerRegistry|Quick Start') }}</h5>
<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 to clipboard')"
class="input-group-text"
/>
</span>
</div>
<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 to clipboard')"
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 to clipboard')"
class="input-group-text"
/>
</span>
</div>
</svg-message>
<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 to clipboard')"
class="input-group-text"
/>
</span>
</div>
</template>
</gl-empty-state>
</div>
</template>

26
app/assets/javascripts/registry/components/svg_message.vue
View File

@ -1,26 +0,0 @@
<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>

4
app/assets/stylesheets/pages/container_registry.scss
View File

@ -3,10 +3,6 @@
*/
.container-message {
pre {
white-space: pre-line;
}
span .btn {
margin: 0;
}

11
spec/javascripts/registry/components/app_spec.js
View File

@ -84,12 +84,7 @@ describe('Registry List', () => {
it('should render empty message', done => {
setTimeout(() => {
expect(
vm.$el
.querySelector('p')
.textContent.trim()
.replace(/[\r\n]+/g, ' '),
).toEqual(
expect(vm.$el.querySelector('.js-no-container-images-text').textContent).toEqual(
'With the Container Registry, every project can have its own space to store its Docker images. More Information',
);
done();
@ -124,7 +119,9 @@ describe('Registry List', () => {
it('should render invalid characters error message', done => {
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();
});
});