Skip to content

G
gitlab-ce
Commit 0e3428ed authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera Committed by Martin Wortschack
Browse files
Options

Refactor sprintf to gl-sprints 

- expiration_policy_fields
- registry_settings_app
- unit tests
- swap a in favour of gl-link
parent bec1642c
Hide whitespace changes
Inline Side-by-side
Showing with 65 additions and 63 deletions
app/assets/javascripts/registry/settings/components/registry_settings_app.vue
View file @ 0e3428ed
<script>
import { mapActions, mapState } from 'vuex';
import { GlAlert } from '@gitlab/ui';
import { sprintf, s__ } from '~/locale';
import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
import { s__ } from '~/locale';
import { FETCH_SETTINGS_ERROR_MESSAGE } from '../../shared/constants';
......@@ -11,22 +11,16 @@ export default {
components: {
SettingsForm,
GlAlert,
GlSprintf,
GlLink,
},
i18n: {
unavailableFeatureText: s__(
'ContainerRegistry|Currently, the Container Registry tag expiration feature is not available for projects created before GitLab version 12.8. For updates and more information, visit Issue %{linkStart}#196124%{linkEnd}',
),
},
computed: {
...mapState(['isDisabled']),
notAvailableMessage() {
return sprintf(
s__(
'ContainerRegistry|Currently, the Container Registry tag expiration feature is not available for projects created before GitLab version 12.8. For updates and more information, visit Issue %{linkStart}#196124%{linkEnd}',
),
{
linkStart:
'<a href="https://gitlab.com/gitlab-org/gitlab/issues/196124" target="_blank" rel="noopener noreferrer">',
linkEnd: '</a>',
},
false,
);
},
},
mounted() {
this.fetchSettings().catch(() =>
......@@ -56,7 +50,15 @@ export default {
</ul>
<settings-form v-if="!isDisabled" />
<gl-alert v-else :dismissible="false">
<p v-html="notAvailableMessage"></p>
<p>
<gl-sprintf :message="$options.i18n.unavailableFeatureText">
<template #link="{content}">
<gl-link href="https://gitlab.com/gitlab-org/gitlab/issues/196124" target="_blank">
{{ content }}
</gl-link>
</template>
</gl-sprintf>
</p>
</gl-alert>
</div>
</template>
app/assets/javascripts/registry/shared/components/expiration_policy_fields.vue
View file @ 0e3428ed
<script>
import { uniqueId } from 'lodash';
import { GlFormGroup, GlToggle, GlFormSelect, GlFormTextarea } from '@gitlab/ui';
import { s__, __, sprintf } from '~/locale';
import { GlFormGroup, GlToggle, GlFormSelect, GlFormTextarea, GlSprintf } from '@gitlab/ui';
import { s__, __ } from '~/locale';
import { NAME_REGEX_LENGTH } from '../constants';
import { mapComputedToEvent } from '../utils';
......@@ -11,6 +11,7 @@ export default {
GlToggle,
GlFormSelect,
GlFormTextarea,
GlSprintf,
},
props: {
formOptions: {
......@@ -70,27 +71,6 @@ export default {
policyEnabledText() {
return this.enabled ? __('enabled') : __('disabled');
},
toggleDescriptionText() {
return sprintf(
s__('ContainerRegistry|Docker tag expiration policy is %{toggleStatus}'),
{
toggleStatus: `<strong>${this.policyEnabledText}</strong>`,
},
false,
);
},
regexHelpText() {
return sprintf(
s__(
'ContainerRegistry|Wildcards such as %{codeStart}.*-stable%{codeEnd} or %{codeStart}production/.*%{codeEnd} are supported. To select all tags, use %{codeStart}.*%{codeEnd}',
),
{
codeStart: '<code>',
codeEnd: '</code>',
},
false,
);
},
nameRegexState() {
return this.name_regex ? this.name_regex.length <= NAME_REGEX_LENGTH : null;
},
......@@ -139,7 +119,15 @@ export default {
v-model="enabled"
:disabled="isLoading"
/>
<span class="mb-2 ml-1 lh-2" v-html="toggleDescriptionText"></span>
<span class="mb-2 ml-1 lh-2">
<gl-sprintf
:message="s__('ContainerRegistry|Docker tag expiration policy is %{toggleStatus}')"
>
<template #toggleStatus>
<strong>{{ policyEnabledText }}</strong>
</template>
</gl-sprintf>
</span>
</div>
</gl-form-group>
......@@ -190,7 +178,19 @@ export default {
trim
/>
<template #description>
<span ref="regex-description" v-html="regexHelpText"></span>
<span ref="regex-description">
<gl-sprintf
:message="
s__(
'ContainerRegistry|Wildcards such as %{codeStart}.*-stable%{codeEnd} or %{codeStart}production/.*%{codeEnd} are supported. To select all tags, use %{codeStart}.*%{codeEnd}',
)
"
>
<template #code="{content}">
<code>{{ content }}</code>
</template>
</gl-sprintf>
</span>
</template>
</gl-form-group>
</div>
......
spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap
View file @ 0e3428ed
......@@ -4,7 +4,7 @@ exports[`Expiration Policy Form renders 1`] = `
<div
class="lh-2"
>
<glformgroup-stub
<gl-form-group-stub
id="expiration-policy-toggle-group"
label="Expiration policy:"
label-align="right"
......@@ -14,7 +14,7 @@ exports[`Expiration Policy Form renders 1`] = `
<div
class="d-flex align-items-start"
>
<gltoggle-stub
<gl-toggle-stub
id="expiration-policy-toggle"
labeloff="Toggle Status: OFF"
labelon="Toggle Status: ON"
......@@ -30,16 +30,16 @@ exports[`Expiration Policy Form renders 1`] = `
</strong>
</span>
</div>
</glformgroup-stub>
</gl-form-group-stub>
<glformgroup-stub
<gl-form-group-stub
id="expiration-policy-interval-group"
label="Expiration interval:"
label-align="right"
label-cols="3"
label-for="expiration-policy-interval"
>
<glformselect-stub
<gl-form-select-stub
disabled="true"
id="expiration-policy-interval"
>
......@@ -57,16 +57,16 @@ exports[`Expiration Policy Form renders 1`] = `
Bar
</option>
</glformselect-stub>
</glformgroup-stub>
<glformgroup-stub
</gl-form-select-stub>
</gl-form-group-stub>
<gl-form-group-stub
id="expiration-policy-schedule-group"
label="Expiration schedule:"
label-align="right"
label-cols="3"
label-for="expiration-policy-schedule"
>
<glformselect-stub
<gl-form-select-stub
disabled="true"
id="expiration-policy-schedule"
>
......@@ -84,16 +84,16 @@ exports[`Expiration Policy Form renders 1`] = `
Bar
</option>
</glformselect-stub>
</glformgroup-stub>
<glformgroup-stub
</gl-form-select-stub>
</gl-form-group-stub>
<gl-form-group-stub
id="expiration-policy-latest-group"
label="Number of tags to retain:"
label-align="right"
label-cols="3"
label-for="expiration-policy-latest"
>
<glformselect-stub
<gl-form-select-stub
disabled="true"
id="expiration-policy-latest"
>
......@@ -111,10 +111,10 @@ exports[`Expiration Policy Form renders 1`] = `
Bar
</option>
</glformselect-stub>
</glformgroup-stub>
</gl-form-select-stub>
</gl-form-group-stub>
<glformgroup-stub
<gl-form-group-stub
id="expiration-policy-name-matching-group"
invalid-feedback="The value of this input should be less than 255 characters"
label="Docker tags with names matching this regex pattern will expire:"
......@@ -122,13 +122,13 @@ exports[`Expiration Policy Form renders 1`] = `
label-cols="3"
label-for="expiration-policy-name-matching"
>
<glformtextarea-stub
<gl-form-textarea-stub
disabled="true"
id="expiration-policy-name-matching"
placeholder=".*"
trim=""
value=""
/>
</glformgroup-stub>
</gl-form-group-stub>
</div>
`;
spec/frontend/registry/shared/components/expiration_policy_fields_spec.js
View file @ 0e3428ed
import { mount } from '@vue/test-utils';
import stubChildren from 'helpers/stub_children';
import { shallowMount } from '@vue/test-utils';
import { GlSprintf } from '@gitlab/ui';
import component from '~/registry/shared/components/expiration_policy_fields.vue';
import { NAME_REGEX_LENGTH } from '~/registry/shared/constants';
......@@ -15,9 +15,9 @@ describe('Expiration Policy Form', () => {
parent.find(`${FORM_ELEMENTS_ID_PREFIX}-${name}`);
const mountComponent = props => {
wrapper = mount(component, {
wrapper = shallowMount(component, {
stubs: {
...stubChildren(component),
GlSprintf,
},
propsData: {
formOptions,
......
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