diff options
Diffstat (limited to 'app/assets/javascripts/sidebar/components/lock/edit_form.vue')
-rw-r--r-- | app/assets/javascripts/sidebar/components/lock/edit_form.vue | 62 |
1 files changed, 34 insertions, 28 deletions
diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form.vue b/app/assets/javascripts/sidebar/components/lock/edit_form.vue index 630da751704..65b51169420 100644 --- a/app/assets/javascripts/sidebar/components/lock/edit_form.vue +++ b/app/assets/javascripts/sidebar/components/lock/edit_form.vue @@ -1,40 +1,20 @@ <script> +import { GlSprintf } from '@gitlab/ui'; import editFormButtons from './edit_form_buttons.vue'; -import issuableMixin from '../../../vue_shared/mixins/issuable'; -import { __, sprintf } from '../../../locale'; export default { components: { editFormButtons, + GlSprintf, }, - mixins: [issuableMixin], props: { isLocked: { required: true, type: Boolean, }, - - updateLockedAttribute: { + issuableDisplayName: { required: true, - type: Function, - }, - }, - computed: { - lockWarning() { - return sprintf( - __( - 'Lock this %{issuableDisplayName}? Only <strong>project members</strong> will be able to comment.', - ), - { issuableDisplayName: this.issuableDisplayName }, - ); - }, - unlockWarning() { - return sprintf( - __( - 'Unlock this %{issuableDisplayName}? <strong>Everyone</strong> will be able to comment.', - ), - { issuableDisplayName: this.issuableDisplayName }, - ); + type: String, }, }, }; @@ -42,12 +22,38 @@ export default { <template> <div class="dropdown show"> - <div class="dropdown-menu sidebar-item-warning-message"> - <p v-if="isLocked" class="text" v-html="unlockWarning"></p> + <div class="dropdown-menu sidebar-item-warning-message" data-testid="warning-text"> + <p v-if="isLocked" class="text"> + <gl-sprintf + :message=" + __( + 'Unlock this %{issuableDisplayName}? %{strongStart}Everyone%{strongEnd} will be able to comment.', + ) + " + > + <template #issuableDisplayName>{{ issuableDisplayName }}</template> + <template #strong="{ content }" + ><strong>{{ content }}</strong></template + > + </gl-sprintf> + </p> - <p v-else class="text" v-html="lockWarning"></p> + <p v-else class="text"> + <gl-sprintf + :message=" + __( + 'Lock this %{issuableDisplayName}? Only %{strongStart}project members%{strongEnd} will be able to comment.', + ) + " + > + <template #issuableDisplayName>{{ issuableDisplayName }}</template> + <template #strong="{ content }" + ><strong>{{ content }}</strong></template + > + </gl-sprintf> + </p> - <edit-form-buttons :is-locked="isLocked" :update-locked-attribute="updateLockedAttribute" /> + <edit-form-buttons :is-locked="isLocked" :issuable-display-name="issuableDisplayName" /> </div> </div> </template> |