Skip to content

G
gitlab-ce
Commit b6701fc1 authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera Committed by Jose Ivan Vargas
Browse files
Options

Refactor empty state to use gitlab-ui components 

- refactor component
- adjust unit tests
parent 29fe9d5d
Show whitespace changes
Inline Side-by-side
Showing with 67 additions and 144 deletions
app/assets/javascripts/registry/explorer/components/list_page/group_empty_state.vue
View file @ b6701fc1
......@@ -18,10 +18,9 @@ export default {
<gl-empty-state
:title="s__('ContainerRegistry|There are no container images available in this group')"
:svg-path="config.noContainersImage"
class="container-message"
>
<template #description>
<p class="js-no-container-images-text">
<p>
<gl-sprintf
:message="
s__(
......
app/assets/javascripts/registry/explorer/components/list_page/project_empty_state.vue
View file @ b6701fc1
<script>
import { GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui';
import { GlEmptyState, GlSprintf, GlLink, GlFormInputGroup, GlFormInput } from '@gitlab/ui';
import { mapState, mapGetters } from 'vuex';
import { s__ } from '~/locale';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
......@@ -17,6 +17,8 @@ export default {
GlEmptyState,
GlSprintf,
GlLink,
GlFormInputGroup,
GlFormInput,
},
i18n: {
quickStart: QUICK_START,
......@@ -43,10 +45,9 @@ export default {
<gl-empty-state
:title="s__('ContainerRegistry|There are no container images stored for this project')"
:svg-path="config.noContainersImage"
class="container-message"
>
<template #description>
<p class="js-no-container-images-text">
<p>
<gl-sprintf :message="$options.i18n.introText">
<template #docLink="{content}">
<gl-link :href="config.helpPagePath" target="_blank">{{ content }}</gl-link>
......@@ -54,7 +55,7 @@ export default {
</gl-sprintf>
</p>
<h5>{{ $options.i18n.quickStart }}</h5>
<p class="js-not-logged-in-to-registry-text">
<p>
<gl-sprintf :message="$options.i18n.notLoggedInMessage">
<template #twofaDocLink="{content}">
<gl-link :href="config.twoFactorAuthHelpLink" target="_blank">{{ content }}</gl-link>
......@@ -66,42 +67,49 @@ export default {
</template>
</gl-sprintf>
</p>
<div class="input-group append-bottom-10">
<input :value="dockerLoginCommand" type="text" class="form-control monospace" readonly />
<span class="input-group-append">
<gl-form-input-group class="gl-mb-4">
<gl-form-input
:value="dockerLoginCommand"
readonly
type="text"
class="gl-font-monospace!"
/>
<template #append>
<clipboard-button
:text="dockerLoginCommand"
:title="$options.i18n.copyLoginTitle"
class="input-group-text"
class="gl-m-0!"
/>
</span>
</div>
<p></p>
<p>
</template>
</gl-form-input-group>
<p class="gl-mb-4">
{{ $options.i18n.addImageText }}
</p>
<div class="input-group append-bottom-10">
<input :value="dockerBuildCommand" type="text" class="form-control monospace" readonly />
<span class="input-group-append">
<gl-form-input-group class="gl-mb-4 ">
<gl-form-input
:value="dockerBuildCommand"
readonly
type="text"
class="gl-font-monospace!"
/>
<template #append>
<clipboard-button
:text="dockerBuildCommand"
:title="$options.i18n.copyBuildTitle"
class="input-group-text"
class="gl-m-0!"
/>
</span>
</div>
<div class="input-group">
<input :value="dockerPushCommand" type="text" class="form-control monospace" readonly />
<span class="input-group-append">
</template>
</gl-form-input-group>
<gl-form-input-group>
<gl-form-input :value="dockerPushCommand" readonly type="text" class="gl-font-monospace!" />
<template #append>
<clipboard-button
:text="dockerPushCommand"
:title="$options.i18n.copyPushTitle"
class="input-group-text"
class="gl-m-0!"
/>
</span>
</div>
</template>
</gl-form-input-group>
</template>
</gl-empty-state>
</template>
app/assets/javascripts/registry/explorer/pages/list.vue
View file @ b6701fc1
......@@ -217,7 +217,6 @@ export default {
:svg-path="config.noContainersImage"
data-testid="emptySearch"
:title="$options.i18n.EMPTY_RESULT_TITLE"
class="container-message"
>
<template #description>
{{ $options.i18n.EMPTY_RESULT_MESSAGE }}
......
app/assets/stylesheets/pages/container_registry.scss deleted 100644 → 0
View file @ 29fe9d5d
/**
* Container Registry
*/
.container-message {
span .btn {
margin: 0;
}
}
.container-image {
border-bottom: 1px solid $white-normal;
}
.container-image-head {
padding: 0 16px;
line-height: 4em;
.btn-link {
padding: 0;
&:focus {
outline: none;
}
}
}
.table.tags {
margin-bottom: 0;
.registry-image-row {
.check {
padding-right: $gl-padding;
width: 5%;
}
.action-buttons {
opacity: 0;
}
&:hover {
.action-buttons {
opacity: 1;
}
}
}
}
spec/frontend/registry/explorer/components/list_page/__snapshots__/group_empty_state_spec.js.snap
View file @ b6701fc1
......@@ -2,13 +2,10 @@
exports[`Registry Group Empty state to match the default snapshot 1`] = `
<div
class="container-message"
svg-path="foo"
title="There are no container images available in this group"
>
<p
class="js-no-container-images-text"
>
<p>
With the Container Registry, every project can have its own space to store its Docker images. Push at least one Docker image in one of this group's projects in order to show up here.
<gl-link-stub
href="baz"
......
spec/frontend/registry/explorer/components/list_page/__snapshots__/project_empty_state_spec.js.snap
View file @ b6701fc1
......@@ -2,13 +2,10 @@
exports[`Registry Project Empty state to match the default snapshot 1`] = `
<div
class="container-message"
svg-path="bazFoo"
title="There are no container images stored for this project"
>
<p
class="js-no-container-images-text"
>
<p>
With the Container Registry, every project can have its own space to store its Docker images.
<gl-link-stub
href="baz"
......@@ -22,9 +19,7 @@ exports[`Registry Project Empty state to match the default snapshot 1`] = `
CLI Commands
</h5>
<p
class="js-not-logged-in-to-registry-text"
>
<p>
If you are not already logged in, you need to authenticate to the Container Registry by using your GitLab username and password. If you have
<gl-link-stub
href="barBaz"
......@@ -42,78 +37,50 @@ exports[`Registry Project Empty state to match the default snapshot 1`] = `
instead of a password.
</p>
<div
class="input-group append-bottom-10"
<gl-form-input-group-stub
class="gl-mb-4"
predefinedoptions="[object Object]"
value=""
>
<input
class="form-control monospace"
readonly="readonly"
<gl-form-input-stub
class="gl-font-monospace!"
readonly=""
type="text"
value="docker login bar"
/>
</gl-form-input-group-stub>
<span
class="input-group-append"
<p
class="gl-mb-4"
>
<clipboard-button-stub
class="input-group-text"
cssclass="btn-default"
text="docker login bar"
title="Copy login command"
tooltipplacement="top"
/>
</span>
</div>
<p />
<p>
You can add an image to this registry with the following commands:
</p>
<div
class="input-group append-bottom-10"
<gl-form-input-group-stub
class="gl-mb-4 "
predefinedoptions="[object Object]"
value=""
>
<input
class="form-control monospace"
readonly="readonly"
<gl-form-input-stub
class="gl-font-monospace!"
readonly=""
type="text"
value="docker build -t foo ."
/>
</gl-form-input-group-stub>
<span
class="input-group-append"
>
<clipboard-button-stub
class="input-group-text"
cssclass="btn-default"
text="docker build -t foo ."
title="Copy build command"
tooltipplacement="top"
/>
</span>
</div>
<div
class="input-group"
<gl-form-input-group-stub
predefinedoptions="[object Object]"
value=""
>
<input
class="form-control monospace"
readonly="readonly"
<gl-form-input-stub
class="gl-font-monospace!"
readonly=""
type="text"
value="docker push foo"
/>
<span
class="input-group-append"
>
<clipboard-button-stub
class="input-group-text"
cssclass="btn-default"
text="docker push foo"
title="Copy push command"
tooltipplacement="top"
/>
</span>
</div>
</gl-form-input-group-stub>
</div>
`;
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7