Commit 3d9dd24b authored by Mike Greiling's avatar Mike Greiling

Merge branch '64249-align-container-registry-empty-state-with-design-guidelines' into 'master'

Align container registry empty state with design guidelines

Closes #64249

See merge request gitlab-org/gitlab-ce!30502
parents 3d9dc7db 8236640b
......@@ -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: `<a href="${this.helpPagePath}#docker-connection-error">`,
docLinkStart: `<a href="${this.helpPagePath}#docker-connection-error" target="_blank">`,
docLinkEnd: '</a>',
},
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: `<a href="${this.helpPagePath}">`,
docLinkStart: `<a href="${this.helpPagePath}" target="_blank">`,
docLinkEnd: '</a>',
},
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: `<a href="${this.helpPagePath}">`,
docLinkStart: `<a href="${this.helpPagePath}" target="_blank">`,
docLinkEnd: '</a>',
},
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 {
<p v-html="dockerConnectionErrorText"></p>
</svg-message>
<gl-loading-icon v-else-if="isLoading" size="md" class="prepend-top-16" />
<gl-loading-icon v-else-if="isLoading && !characterError" size="md" class="prepend-top-16" />
<div v-else-if="!isLoading && !characterError && repos.length">
<h4>{{ s__('ContainerRegistry|Container Registry') }}</h4>
......@@ -126,10 +134,27 @@ export default {
}}
</p>
<pre>
docker build -t {{ repositoryUrl }} .
docker push {{ repositoryUrl }}
</pre>
<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>
</template>
......@@ -15,10 +15,12 @@ export default {
</script>
<template>
<div :id="id" class="empty-state container-message mw-70p">
<div :id="id" class="empty-state container-message">
<div class="svg-content">
<img :src="svgPath" class="flex-align-self-center" />
</div>
<slot></slot>
<div class="text-content">
<slot></slot>
</div>
</div>
</template>
......@@ -6,6 +6,10 @@
pre {
white-space: pre-line;
}
span .btn {
margin: 0;
}
}
.container-image {
......
---
title: Alignign empty container registry message with design guidelines
merge_request: 30502
author:
type: other
......@@ -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 <b>%{title}</b>. This will delete the image and all tags pointing to this image."
......
......@@ -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);
......
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