diff options
author | Nick Kipling <nkipling@gitlab.com> | 2019-08-21 21:55:42 +0300 |
---|---|---|
committer | Clement Ho <408677-ClemMakesApps@users.noreply.gitlab.com> | 2019-08-21 21:55:42 +0300 |
commit | 646913f4e2c141327bacaf8ee20279c120fdeedf (patch) | |
tree | ffbbf587d177a1c56f34159b7f18357addbf347f /app | |
parent | f91282c90b3718a8ee1690ef4e32ffaae7106e51 (diff) |
Fixed tech debt of using custom component
Changed the container registry to use the empty state component
Removed the custom svg-component
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/registry/components/app.vue | 101 | ||||
-rw-r--r-- | app/assets/javascripts/registry/components/svg_message.vue | 26 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/container_registry.scss | 4 |
3 files changed, 52 insertions, 79 deletions
diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue index efbf0a4e3cf..346dc470a59 100644 --- a/app/assets/javascripts/registry/components/app.vue +++ b/app/assets/javascripts/registry/components/app.vue @@ -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> - - <h5>{{ s__('ContainerRegistry|Quick Start') }}</h5> - <p> - {{ - s__( - 'ContainerRegistry|You can add an image to this registry with the following commands:', - ) - }} - </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> - <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> diff --git a/app/assets/javascripts/registry/components/svg_message.vue b/app/assets/javascripts/registry/components/svg_message.vue deleted file mode 100644 index 617093e054e..00000000000 --- a/app/assets/javascripts/registry/components/svg_message.vue +++ /dev/null @@ -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> diff --git a/app/assets/stylesheets/pages/container_registry.scss b/app/assets/stylesheets/pages/container_registry.scss index 0f4bdb219a3..b88bd78cf3d 100644 --- a/app/assets/stylesheets/pages/container_registry.scss +++ b/app/assets/stylesheets/pages/container_registry.scss @@ -3,10 +3,6 @@ */ .container-message { - pre { - white-space: pre-line; - } - span .btn { margin: 0; } |