From 8236640b0639ad0d1948ce292ae0139cfc7ee378 Mon Sep 17 00:00:00 2001 From: Nick Kipling Date: Mon, 15 Jul 2019 23:51:36 +0000 Subject: [PATCH] Updating wording as per desgn guidelines Shortened descriptive text Added copy button to code snippets --- .../javascripts/registry/components/app.vue | 51 ++++++++++++++----- .../registry/components/svg_message.vue | 6 ++- .../stylesheets/pages/container_registry.scss | 4 ++ ...try-empty-state-with-design-guidelines.yml | 5 ++ locale/gitlab.pot | 12 +++-- .../registry/components/app_spec.js | 2 +- 6 files changed, 61 insertions(+), 19 deletions(-) create mode 100644 changelogs/unreleased/64249-align-container-registry-empty-state-with-design-guidelines.yml diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue index 7752723baac..38519c220c5 100644 --- a/app/assets/javascripts/registry/components/app.vue +++ b/app/assets/javascripts/registry/components/app.vue @@ -2,6 +2,7 @@ import { mapGetters, mapActions } from 'vuex'; import { GlLoadingIcon } 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'; @@ -9,6 +10,7 @@ import { s__, sprintf } from '../../locale'; export default { name: 'RegistryListApp', components: { + clipboardButton, CollapsibleContainer, GlLoadingIcon, SvgMessage, @@ -46,10 +48,10 @@ export default { 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. For more information, please review the - %{docLinkStart}Container Registry documentation%{docLinkEnd}.`), + issue with your project name or path. + %{docLinkStart}More Information%{docLinkEnd}`), { - docLinkStart: ``, + docLinkStart: ``, docLinkEnd: '', }, false, @@ -58,10 +60,10 @@ export default { 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. Learn more about the - %{docLinkStart}Container Registry%{docLinkEnd}.`), + project can have its own space to store its Docker images. + %{docLinkStart}More Information%{docLinkEnd}`), { - docLinkStart: ``, + docLinkStart: ``, docLinkEnd: '', }, false, @@ -70,14 +72,20 @@ export default { noContainerImagesText() { return sprintf( s__(`ContainerRegistry|With the Container Registry, every project can have its own space to - store its Docker images. Learn more about the %{docLinkStart}Container Registry%{docLinkEnd}.`), + store its Docker images. %{docLinkStart}More Information%{docLinkEnd}`), { - docLinkStart: ``, + docLinkStart: ``, docLinkEnd: '', }, false, ); }, + dockerBuildCommand() { + return `docker build -t ${this.repositoryUrl} .`; + }, + dockerPushCommand() { + return `docker push ${this.repositoryUrl}`; + }, }, created() { this.setMainEndpoint(this.endpoint); @@ -99,7 +107,7 @@ export default {

- +

{{ s__('ContainerRegistry|Container Registry') }}

@@ -126,10 +134,27 @@ export default { }}

- 
-        docker build -t {{ repositoryUrl }} .
-        docker push {{ repositoryUrl }}
-
+
+ + + + +
+ +
+ + + + +
diff --git a/app/assets/javascripts/registry/components/svg_message.vue b/app/assets/javascripts/registry/components/svg_message.vue index d0d44bf2d14..617093e054e 100644 --- a/app/assets/javascripts/registry/components/svg_message.vue +++ b/app/assets/javascripts/registry/components/svg_message.vue @@ -15,10 +15,12 @@ export default { diff --git a/app/assets/stylesheets/pages/container_registry.scss b/app/assets/stylesheets/pages/container_registry.scss index cca5214a508..a21fa29f34a 100644 --- a/app/assets/stylesheets/pages/container_registry.scss +++ b/app/assets/stylesheets/pages/container_registry.scss @@ -6,6 +6,10 @@ pre { white-space: pre-line; } + + span .btn { + margin: 0; + } } .container-image { diff --git a/changelogs/unreleased/64249-align-container-registry-empty-state-with-design-guidelines.yml b/changelogs/unreleased/64249-align-container-registry-empty-state-with-design-guidelines.yml new file mode 100644 index 00000000000..ecdb4b6bed1 --- /dev/null +++ b/changelogs/unreleased/64249-align-container-registry-empty-state-with-design-guidelines.yml @@ -0,0 +1,5 @@ +--- +title: Alignign empty container registry message with design guidelines +merge_request: 30502 +author: +type: other diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 49224502958..dd0aac1f259 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -2978,6 +2978,12 @@ msgstr "" msgid "ContainerRegistry|Container Registry" msgstr "" +msgid "ContainerRegistry|Copy build command to clipboard" +msgstr "" + +msgid "ContainerRegistry|Copy push command to clipboard" +msgstr "" + msgid "ContainerRegistry|Docker connection error" msgstr "" @@ -3011,13 +3017,13 @@ msgstr "" msgid "ContainerRegistry|There are no container images stored for this project" msgstr "" -msgid "ContainerRegistry|We are having trouble connecting to Docker, which could be due to an issue with your project name or path. For more information, please review the %{docLinkStart}Container Registry documentation%{docLinkEnd}." +msgid "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}" msgstr "" -msgid "ContainerRegistry|With the Container Registry, every project can have its own space to store its Docker images. Learn more about the %{docLinkStart}Container Registry%{docLinkEnd}." +msgid "ContainerRegistry|With the Container Registry, every project can have its own space to store its Docker images. %{docLinkStart}More Information%{docLinkEnd}" msgstr "" -msgid "ContainerRegistry|With the Docker Container Registry integrated into GitLab, every project can have its own space to store its Docker images. Learn more about the %{docLinkStart}Container Registry%{docLinkEnd}." +msgid "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}" msgstr "" msgid "ContainerRegistry|You are about to delete the image %{title}. This will delete the image and all tags pointing to this image." diff --git a/spec/javascripts/registry/components/app_spec.js b/spec/javascripts/registry/components/app_spec.js index 87237d2853d..7b9b8d2b039 100644 --- a/spec/javascripts/registry/components/app_spec.js +++ b/spec/javascripts/registry/components/app_spec.js @@ -90,7 +90,7 @@ describe('Registry List', () => { .textContent.trim() .replace(/[\r\n]+/g, ' '), ).toEqual( - 'With the Container Registry, every project can have its own space to store its Docker images. Learn more about the Container Registry.', + 'With the Container Registry, every project can have its own space to store its Docker images. More Information', ); done(); }, 0);