Commit 260cbd35 authored by Mark Florian's avatar Mark Florian Committed by Phil Hughes

Fix vue/no-lone-template violations

This rule aims to eliminate unnecessary and potentially confusing lone
`<template>` tags in Vue components.

In Vue.js 2.x, `<template>` elements that have no specific directives
have no effect.

In Vue.js 3.x, `<template>` elements that have no specific directives
render `<template>` DOM elements as is, but in most cases this may not
be what is intended.

Part of https://gitlab.com/gitlab-org/gitlab/-/issues/297218.
parent 67b05485
......@@ -51,7 +51,6 @@ rules:
# new ones, to ease migration to v7, so violations of each can be fixed
# separately.
vue/no-mutating-props: off
vue/no-lone-template: off
# END eslint-plugin-vue@7 overrides
overrides:
- files:
......
......@@ -88,15 +88,13 @@ export default {
</gl-button>
</div>
</template>
<template>
<gl-datepicker
ref="datePicker"
:value="parsedDueDate"
show-clear-button
@input="setDueDate"
@clear="setDueDate(null)"
/>
</template>
<gl-datepicker
ref="datePicker"
:value="parsedDueDate"
show-clear-button
@input="setDueDate"
@clear="setDueDate(null)"
/>
</board-editable-item>
</template>
<style>
......
......@@ -136,36 +136,34 @@ export default {
<template #collapsed>
<span class="gl-text-gray-800">{{ issue.referencePath }}</span>
</template>
<template>
<gl-alert v-if="showChangesAlert" variant="warning" class="gl-mb-5" :dismissible="false">
{{ $options.i18n.reviewYourChanges }}
</gl-alert>
<gl-form @submit.prevent="setTitle">
<gl-form-group :invalid-feedback="$options.i18n.invalidFeedback" :state="validationState">
<gl-form-input
v-model="title"
v-autofocusonshow
:placeholder="$options.i18n.issueTitlePlaceholder"
:state="validationState"
/>
</gl-form-group>
<gl-alert v-if="showChangesAlert" variant="warning" class="gl-mb-5" :dismissible="false">
{{ $options.i18n.reviewYourChanges }}
</gl-alert>
<gl-form @submit.prevent="setTitle">
<gl-form-group :invalid-feedback="$options.i18n.invalidFeedback" :state="validationState">
<gl-form-input
v-model="title"
v-autofocusonshow
:placeholder="$options.i18n.issueTitlePlaceholder"
:state="validationState"
/>
</gl-form-group>
<div class="gl-display-flex gl-w-full gl-justify-content-space-between gl-mt-5">
<gl-button
variant="success"
size="small"
data-testid="submit-button"
:disabled="!title"
@click="setTitle"
>
{{ $options.i18n.submitButton }}
</gl-button>
<div class="gl-display-flex gl-w-full gl-justify-content-space-between gl-mt-5">
<gl-button
variant="success"
size="small"
data-testid="submit-button"
:disabled="!title"
@click="setTitle"
>
{{ $options.i18n.submitButton }}
</gl-button>
<gl-button size="small" data-testid="cancel-button" @click="cancel">
{{ $options.i18n.cancelButton }}
</gl-button>
</div>
</gl-form>
</template>
<gl-button size="small" data-testid="cancel-button" @click="cancel">
{{ $options.i18n.cancelButton }}
</gl-button>
</div>
</gl-form>
</board-editable-item>
</template>
......@@ -122,40 +122,38 @@ export default {
<template v-if="hasMilestone" #collapsed>
<strong class="gl-text-gray-900">{{ activeIssue.milestone.title }}</strong>
</template>
<template>
<gl-dropdown
ref="dropdown"
:text="dropdownText"
:header-text="$options.i18n.assignMilestone"
block
<gl-dropdown
ref="dropdown"
:text="dropdownText"
:header-text="$options.i18n.assignMilestone"
block
>
<gl-search-box-by-type ref="search" v-model.trim="searchTitle" class="gl-m-3" />
<gl-dropdown-item
data-testid="no-milestone-item"
:is-check-item="true"
:is-checked="!activeIssue.milestone"
@click="setMilestone(null)"
>
<gl-search-box-by-type ref="search" v-model.trim="searchTitle" class="gl-m-3" />
{{ $options.i18n.noMilestone }}
</gl-dropdown-item>
<gl-dropdown-divider />
<gl-loading-icon v-if="$apollo.loading" class="gl-py-4" />
<template v-else-if="milestones.length > 0">
<gl-dropdown-item
data-testid="no-milestone-item"
v-for="milestone in milestones"
:key="milestone.id"
:is-check-item="true"
:is-checked="!activeIssue.milestone"
@click="setMilestone(null)"
:is-checked="activeIssue.milestone && milestone.id === activeIssue.milestone.id"
data-testid="milestone-item"
@click="setMilestone(milestone.id)"
>
{{ $options.i18n.noMilestone }}
{{ milestone.title }}
</gl-dropdown-item>
<gl-dropdown-divider />
<gl-loading-icon v-if="$apollo.loading" class="gl-py-4" />
<template v-else-if="milestones.length > 0">
<gl-dropdown-item
v-for="milestone in milestones"
:key="milestone.id"
:is-check-item="true"
:is-checked="activeIssue.milestone && milestone.id === activeIssue.milestone.id"
data-testid="milestone-item"
@click="setMilestone(milestone.id)"
>
{{ milestone.title }}
</gl-dropdown-item>
</template>
<gl-dropdown-text v-else data-testid="no-milestones-found">
{{ $options.i18n.noMilestonesFound }}
</gl-dropdown-text>
</gl-dropdown>
</template>
</template>
<gl-dropdown-text v-else data-testid="no-milestones-found">
{{ $options.i18n.noMilestonesFound }}
</gl-dropdown-text>
</gl-dropdown>
</board-editable-item>
</template>
......@@ -131,48 +131,46 @@ export default {
:title="modalTitle"
kind="danger"
>
<template>
<p>{{ warningMessage }}</p>
<div v-if="confirmCleanup">
{{ s__('ClusterIntegration|This will permanently delete the following resources:') }}
<ul>
<li>
{{ s__('ClusterIntegration|All installed applications and related resources') }}
</li>
<li>
<gl-sprintf :message="s__('ClusterIntegration|The %{gitlabNamespace} namespace')">
<template #gitlabNamespace>
<!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
<code>{{ 'gitlab-managed-apps' }}</code>
</template>
</gl-sprintf>
</li>
<li>{{ s__('ClusterIntegration|Any project namespaces') }}</li>
<!-- eslint-disable @gitlab/vue-require-i18n-strings -->
<li><code>clusterroles</code></li>
<li><code>clusterrolebindings</code></li>
<!-- eslint-enable @gitlab/vue-require-i18n-strings -->
</ul>
</div>
<strong v-html="confirmationTextLabel"></strong>
<form ref="form" :action="clusterPath" method="post" class="gl-mb-5">
<input ref="method" type="hidden" name="_method" value="delete" />
<input :value="csrfToken" type="hidden" name="authenticity_token" />
<input ref="cleanup" type="hidden" name="cleanup" value="true" />
<gl-form-input
v-model="enteredClusterName"
autofocus
type="text"
name="confirm_cluster_name_input"
autocomplete="off"
/>
</form>
<span v-if="confirmCleanup">{{
s__(
'ClusterIntegration|If you do not wish to delete all associated GitLab resources, you can simply remove the integration.',
)
}}</span>
</template>
<p>{{ warningMessage }}</p>
<div v-if="confirmCleanup">
{{ s__('ClusterIntegration|This will permanently delete the following resources:') }}
<ul>
<li>
{{ s__('ClusterIntegration|All installed applications and related resources') }}
</li>
<li>
<gl-sprintf :message="s__('ClusterIntegration|The %{gitlabNamespace} namespace')">
<template #gitlabNamespace>
<!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
<code>{{ 'gitlab-managed-apps' }}</code>
</template>
</gl-sprintf>
</li>
<li>{{ s__('ClusterIntegration|Any project namespaces') }}</li>
<!-- eslint-disable @gitlab/vue-require-i18n-strings -->
<li><code>clusterroles</code></li>
<li><code>clusterrolebindings</code></li>
<!-- eslint-enable @gitlab/vue-require-i18n-strings -->
</ul>
</div>
<strong v-html="confirmationTextLabel"></strong>
<form ref="form" :action="clusterPath" method="post" class="gl-mb-5">
<input ref="method" type="hidden" name="_method" value="delete" />
<input :value="csrfToken" type="hidden" name="authenticity_token" />
<input ref="cleanup" type="hidden" name="cleanup" value="true" />
<gl-form-input
v-model="enteredClusterName"
autofocus
type="text"
name="confirm_cluster_name_input"
autocomplete="off"
/>
</form>
<span v-if="confirmCleanup">{{
s__(
'ClusterIntegration|If you do not wish to delete all associated GitLab resources, you can simply remove the integration.',
)
}}</span>
<template #modal-footer>
<gl-button variant="secondary" @click="handleCancel">{{ s__('Cancel') }}</gl-button>
<template v-if="confirmCleanup">
......
......@@ -68,41 +68,39 @@ export default {
<span data-testid="feature-flags-tab-title">{{ title }}</span>
<gl-badge size="sm" class="gl-tab-counter-badge">{{ itemCount }}</gl-badge>
</template>
<template>
<gl-alert
v-for="(message, index) in alerts"
:key="index"
data-testid="serverErrors"
variant="danger"
@dismiss="clearAlert(index)"
>
{{ message }}
</gl-alert>
<gl-alert
v-for="(message, index) in alerts"
:key="index"
data-testid="serverErrors"
variant="danger"
@dismiss="clearAlert(index)"
>
{{ message }}
</gl-alert>
<gl-loading-icon v-if="isLoading" :label="loadingLabel" size="md" class="gl-mt-4" />
<gl-loading-icon v-if="isLoading" :label="loadingLabel" size="md" class="gl-mt-4" />
<gl-empty-state
v-else-if="errorState"
:title="errorTitle"
:description="s__(`FeatureFlags|Try again in a few moments or contact your support team.`)"
:svg-path="errorStateSvgPath"
data-testid="error-state"
/>
<gl-empty-state
v-else-if="errorState"
:title="errorTitle"
:description="s__(`FeatureFlags|Try again in a few moments or contact your support team.`)"
:svg-path="errorStateSvgPath"
data-testid="error-state"
/>
<gl-empty-state
v-else-if="emptyState"
:title="emptyTitle"
:svg-path="errorStateSvgPath"
data-testid="empty-state"
>
<template #description>
{{ emptyDescription }}
<gl-link :href="featureFlagsHelpPagePath" target="_blank">
{{ s__('FeatureFlags|More information') }}
</gl-link>
</template>
</gl-empty-state>
<slot> </slot>
</template>
<gl-empty-state
v-else-if="emptyState"
:title="emptyTitle"
:svg-path="errorStateSvgPath"
data-testid="empty-state"
>
<template #description>
{{ emptyDescription }}
<gl-link :href="featureFlagsHelpPagePath" target="_blank">
{{ s__('FeatureFlags|More information') }}
</gl-link>
</template>
</gl-empty-state>
<slot> </slot>
</gl-tab>
</template>
......@@ -201,9 +201,7 @@ export default {
/>
<template v-else>{{ clusterNameOrLink.name }}</template>
</template>
<template #kubernetesNamespace>
<template>{{ kubernetesNamespace }}</template>
</template>
<template #kubernetesNamespace>{{ kubernetesNamespace }}</template>
<template #deploymentLink>
<gl-link
:href="deploymentLink.path"
......
......@@ -85,38 +85,36 @@ export default {
<template>
<gl-modal ref="modal" modal-id="delete-user-modal" :title="modalTitle" kind="danger">
<template>
<p>
<gl-sprintf :message="content">
<template #username>
<strong>{{ username }}</strong>
</template>
<template #strong="props">
<strong>{{ props.content }}</strong>
</template>
</gl-sprintf>
</p>
<p>
<gl-sprintf :message="content">
<template #username>
<strong>{{ username }}</strong>
</template>
<template #strong="props">
<strong>{{ props.content }}</strong>
</template>
</gl-sprintf>
</p>
<p>
<gl-sprintf :message="s__('AdminUsers|To confirm, type %{username}')">
<template #username>
<code>{{ username }}</code>
</template>
</gl-sprintf>
</p>
<p>
<gl-sprintf :message="s__('AdminUsers|To confirm, type %{username}')">
<template #username>
<code>{{ username }}</code>
</template>
</gl-sprintf>
</p>
<form ref="form" :action="deleteUserUrl" method="post" @submit.prevent>
<input ref="method" type="hidden" name="_method" value="delete" />
<input :value="csrfToken" type="hidden" name="authenticity_token" />
<gl-form-input
v-model="enteredUsername"
autofocus
type="text"
name="username"
autocomplete="off"
/>
</form>
</template>
<form ref="form" :action="deleteUserUrl" method="post" @submit.prevent>
<input ref="method" type="hidden" name="_method" value="delete" />
<input :value="csrfToken" type="hidden" name="authenticity_token" />
<gl-form-input
v-model="enteredUsername"
autofocus
type="text"
name="username"
autocomplete="off"
/>
</form>
<template #modal-footer>
<gl-button @click="onCancel">{{ s__('Cancel') }}</gl-button>
<gl-button
......
......@@ -123,17 +123,15 @@ export default {
:width="`${containerMeasurements.width}px`"
:height="`${containerMeasurements.height}px`"
>
<template>
<path
v-for="link in links"
:key="link.path"
:ref="link.ref"
:d="link.path"
class="gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease"
:class="getLinkClasses(link)"
:stroke-width="$options.STROKE_WIDTH"
/>
</template>
<path
v-for="link in links"
:key="link.path"
:ref="link.ref"
:d="link.path"
class="gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease"
:class="getLinkClasses(link)"
:stroke-width="$options.STROKE_WIDTH"
/>
</svg>
<slot></slot>
</div>
......
......@@ -224,17 +224,15 @@ export default {
data-testid="graph-container"
>
<svg :viewBox="viewBox" :width="width" :height="height" class="gl-absolute">
<template>
<path
v-for="link in links"
:key="link.path"
:ref="link.ref"
:d="link.path"
class="gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease"
:class="getLinkClasses(link)"
:stroke-width="$options.STROKE_WIDTH"
/>
</template>
<path
v-for="link in links"
:key="link.path"
:ref="link.ref"
:d="link.path"
class="gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease"
:class="getLinkClasses(link)"
:stroke-width="$options.STROKE_WIDTH"
/>
</svg>
<div
v-for="(stage, index) in pipelineStages"
......
......@@ -69,18 +69,16 @@ export default {
<div v-else-if="isInstalled">
<div v-if="hasFunctionData">
<template>
<div class="groups-list-tree-container js-functions-wrapper">
<ul class="content-list group-list-tree">
<environment-row
v-for="(env, index) in getFunctions"
:key="index"
:env="env"
:env-name="index"
/>
</ul>
</div>
</template>
<div class="groups-list-tree-container js-functions-wrapper">
<ul class="content-list group-list-tree">
<environment-row
v-for="(env, index) in getFunctions"
:key="index"
:env="env"
:env-name="index"
/>
</ul>
</div>
<gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-3 gl-mb-3 js-functions-loader" />
</div>
<div v-else class="empty-state js-empty-state">
......
......@@ -22,11 +22,6 @@ export default {
<template>
<gl-drawer class="gl-pt-8" :open="isOpen" @close="$emit('close')">
<template #header>{{ __('Page settings') }}</template>
<template>
<front-matter-controls
:settings="settings"
@updateSettings="$emit('updateSettings', $event)"
/>
</template>
<front-matter-controls :settings="settings" @updateSettings="$emit('updateSettings', $event)" />
</gl-drawer>
</template>
......@@ -36,10 +36,8 @@ export default {
aria-expanded="false"
>
<gl-loading-icon v-show="isLoading" :inline="true" />
<template>
<slot v-if="$slots.default"></slot>
<span v-else class="dropdown-toggle-text"> {{ toggleText }} </span>
</template>
<slot v-if="$slots.default"></slot>
<span v-else class="dropdown-toggle-text"> {{ toggleText }} </span>
<gl-icon
v-show="!isLoading"
class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500"
......
......@@ -60,9 +60,7 @@ export default {
</div>
<span v-if="canAttachFile" class="uploading-container">
<span class="uploading-progress-container hide">
<template>
<gl-icon name="media" />
</template>
<gl-icon name="media" />
<span class="attaching-file-message"></span>
<!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
<span class="uploading-progress">0%</span>
......
......@@ -144,40 +144,38 @@ export default {
</slot>
</template>
<template>
<slot name="label-dropdown-list-header">
<gl-dropdown-section-header>{{ __('Select a label') }} </gl-dropdown-section-header>
</slot>
<div class="mb-3 px-3">
<gl-search-box-by-type v-model.trim="searchTerm" />
<slot name="label-dropdown-list-header">
<gl-dropdown-section-header>{{ __('Select a label') }} </gl-dropdown-section-header>
</slot>
<div class="mb-3 px-3">
<gl-search-box-by-type v-model.trim="searchTerm" />
</div>
<div class="mb-3 px-3">
<gl-dropdown-item
v-for="label in labels"
:key="label.id"
:class="{
'pl-4': multiselect && !isSelectedLabel(label.id),
'cursor-not-allowed': disabled,
}"
:active="isSelectedLabel(label.id)"
@click.prevent="$emit('selectLabel', label.id, selectedLabelIds)"
>
<gl-icon
v-if="multiselect && isSelectedLabel(label.id)"
class="text-gray-700 mr-1 vertical-align-middle"
name="mobile-issue-close"
/>
<span :style="{ backgroundColor: label.color }" class="d-inline-block dropdown-label-box">
</span>
{{ labelTitle(label) }}
</gl-dropdown-item>
<div v-show="loading" class="text-center">
<gl-loading-icon :inline="true" size="md" />
</div>
<div class="mb-3 px-3">
<gl-dropdown-item
v-for="label in labels"
:key="label.id"
:class="{
'pl-4': multiselect && !isSelectedLabel(label.id),
'cursor-not-allowed': disabled,
}"
:active="isSelectedLabel(label.id)"
@click.prevent="$emit('selectLabel', label.id, selectedLabelIds)"
>
<gl-icon
v-if="multiselect && isSelectedLabel(label.id)"
class="text-gray-700 mr-1 vertical-align-middle"
name="mobile-issue-close"
/>
<span :style="{ backgroundColor: label.color }" class="d-inline-block dropdown-label-box">
</span>
{{ labelTitle(label) }}
</gl-dropdown-item>
<div v-show="loading" class="text-center">
<gl-loading-icon :inline="true" size="md" />
</div>
<div v-show="noMatchingLabels" class="text-secondary">
{{ __('No matching labels') }}
</div>
<div v-show="noMatchingLabels" class="text-secondary">
{{ __('No matching labels') }}
</div>
</template>
</div>
</gl-dropdown>
</template>
......@@ -51,16 +51,14 @@ export default {
>
<template #header>{{ __('Issue details') }}</template>
<template>
<board-sidebar-issue-title />
<board-assignee-dropdown />
<board-sidebar-epic-select />
<board-sidebar-milestone-select />
<board-sidebar-time-tracker class="swimlanes-sidebar-time-tracker" />
<board-sidebar-due-date />
<board-sidebar-labels-select />
<board-sidebar-weight-input v-if="glFeatures.issueWeights" />
<board-sidebar-subscription />
</template>
<board-sidebar-issue-title />
<board-assignee-dropdown />
<board-sidebar-epic-select />
<board-sidebar-milestone-select />
<board-sidebar-time-tracker class="swimlanes-sidebar-time-tracker" />
<board-sidebar-due-date />
<board-sidebar-labels-select />
<board-sidebar-weight-input v-if="glFeatures.issueWeights" />
<board-sidebar-subscription />
</gl-drawer>
</template>
......@@ -81,18 +81,16 @@ export default {
{{ storedEpic.title }}
</a>
</template>
<template>
<epics-select
ref="epicSelect"
class="gl-w-full"
:group-id="groupId"
:can-edit="true"
:initial-epic="storedEpic"
:initial-epic-loading="false"
variant="standalone"
:show-header="false"
@onEpicSelect="setEpic"
/>
</template>
<epics-select
ref="epicSelect"
class="gl-w-full"
:group-id="groupId"
:can-edit="true"
:initial-epic="storedEpic"
:initial-epic-loading="false"
variant="standalone"
:show-header="false"
@onEpicSelect="setEpic"
/>
</board-editable-item>
</template>
......@@ -87,16 +87,14 @@ export default {
</gl-button>
</div>
</template>
<template>
<gl-form @submit.prevent="handleFormSubmit()">
<gl-form-input
v-model.number="weight"
v-autofocusonshow
type="number"
min="0"
:placeholder="__('Enter a number')"
/>
</gl-form>
</template>
<gl-form @submit.prevent="handleFormSubmit()">
<gl-form-input
v-model.number="weight"
v-autofocusonshow
type="number"
min="0"
:placeholder="__('Enter a number')"
/>
</gl-form>
</board-editable-item>
</template>
......@@ -233,9 +233,7 @@ export default {
@cancel="hideNodeActionModal"
@ok="handleNodeAction"
>
<template>
{{ modalMessage }}
</template>
{{ modalMessage }}
</gl-modal>
</div>
</template>
......@@ -144,10 +144,8 @@ export default {
:options="$options.selectOptions"
/>
</div>
<template name="valid-feedback">
<gl-form-text v-show="showValidFeedback" class="gl-font-base gl-text-gray-400!">
{{ $options.i18n.validFeedback }}
</gl-form-text>
<template v-if="showValidFeedback" #description>
{{ $options.i18n.validFeedback }}
</template>
</gl-form-group>
<gl-button variant="success" type="submit" :disabled="disableSubmit" :loading="loading">
......
......@@ -93,13 +93,12 @@ export default {
@primary.prevent="onUpload"
>
<p>{{ $options.i18n.modalDescription }}</p>
<gl-form-group :label="__('URL')" label-for="upload-url-input">
<gl-form-group
:label="__('URL')"
label-for="upload-url-input"
:description="s__('Incidents|Must start with http or https')"
>
<gl-form-input id="upload-url-input" v-model="modalUrl" />
<template name="description">
<p class="gl-text-gray-500 gl-mt-3 gl-mb-0">
{{ s__('Incidents|Must start with http or https') }}
</p>
</template>
</gl-form-group>
</gl-modal>
<metrics-image v-for="metric in metricImages" :key="metric.id" v-bind="metric" />
......
......@@ -246,58 +246,56 @@ export default {
/>
</div>
</template>
<template>
<issuable-body
:issuable="requirementObject"
:enable-edit="canEditRequirement"
:enable-autocomplete="false"
:enable-autosave="false"
:edit-form-visible="enableRequirementEdit || isCreate"
:show-field-title="true"
:description-preview-path="descriptionPreviewPath"
:description-help-path="descriptionHelpPath"
status-badge-class="status-box-open"
status-icon="issue-open-m"
@edit-issuable="$emit($options.events.enableEdit, $event)"
@keydown-title.escape.exact.stop="handleFormInputKeyDown"
@keydown-description.escape.exact.stop="handleFormInputKeyDown"
@keydown-title.meta.enter="handleSave(arguments[1])"
@keydown-title.ctrl.enter="handleSave(arguments[1])"
@keydown-description.meta.enter="handleSave(arguments[1])"
@keydown-description.ctrl.enter="handleSave(arguments[1])"
>
<template #edit-form-actions="issuableMeta">
<gl-form-checkbox v-if="!isCreate" v-model="satisfied" class="gl-mt-6">{{
__('Satisfied')
}}</gl-form-checkbox>
<div class="gl-display-flex requirement-form-actions gl-mt-6">
<gl-button
:disabled="
requirementRequestActive ||
issuableMeta.issuableTitle.length > $options.maxTitleLength ||
!issuableMeta.issuableTitle.length
"
:loading="requirementRequestActive"
data-testid="requirement-save"
variant="success"
category="primary"
class="gl-mr-auto js-requirement-save"
@click="handleSave(issuableMeta)"
>
{{ saveButtonLabel }}
</gl-button>
<gl-button
data-testid="requirement-cancel"
variant="default"
category="primary"
class="js-requirement-cancel"
@click="handleCancel"
>
{{ __('Cancel') }}
</gl-button>
</div>
</template>
</issuable-body>
</template>
<issuable-body
:issuable="requirementObject"
:enable-edit="canEditRequirement"
:enable-autocomplete="false"
:enable-autosave="false"
:edit-form-visible="enableRequirementEdit || isCreate"
:show-field-title="true"
:description-preview-path="descriptionPreviewPath"
:description-help-path="descriptionHelpPath"
status-badge-class="status-box-open"
status-icon="issue-open-m"
@edit-issuable="$emit($options.events.enableEdit, $event)"
@keydown-title.escape.exact.stop="handleFormInputKeyDown"
@keydown-description.escape.exact.stop="handleFormInputKeyDown"
@keydown-title.meta.enter="handleSave(arguments[1])"
@keydown-title.ctrl.enter="handleSave(arguments[1])"
@keydown-description.meta.enter="handleSave(arguments[1])"
@keydown-description.ctrl.enter="handleSave(arguments[1])"
>
<template #edit-form-actions="issuableMeta">
<gl-form-checkbox v-if="!isCreate" v-model="satisfied" class="gl-mt-6">{{
__('Satisfied')
}}</gl-form-checkbox>
<div class="gl-display-flex requirement-form-actions gl-mt-6">
<gl-button
:disabled="
requirementRequestActive ||
issuableMeta.issuableTitle.length > $options.maxTitleLength ||
!issuableMeta.issuableTitle.length
"
:loading="requirementRequestActive"
data-testid="requirement-save"
variant="success"
category="primary"
class="gl-mr-auto js-requirement-save"
@click="handleSave(issuableMeta)"
>
{{ saveButtonLabel }}
</gl-button>
<gl-button
data-testid="requirement-cancel"
variant="default"
category="primary"
class="js-requirement-cancel"
@click="handleCancel"
>
{{ __('Cancel') }}
</gl-button>
</div>
</template>
</issuable-body>
</gl-drawer>
</template>
......@@ -277,29 +277,27 @@ export default {
</div>
</div>
</template>
<template>
<div v-if="hasSelectedPolicy">
<policy-drawer v-if="shouldShowCiliumDrawer" v-model="selectedPolicy.manifest" />
<div v-if="hasSelectedPolicy">
<policy-drawer v-if="shouldShowCiliumDrawer" v-model="selectedPolicy.manifest" />
<div v-else>
<h5>{{ s__('NetworkPolicies|Policy definition') }}</h5>
<p>
{{ s__("NetworkPolicies|Define this policy's location, conditions and actions.") }}
</p>
<div class="gl-p-3 gl-bg-gray-50">
<network-policy-editor
ref="policyEditor"
v-model="selectedPolicy.manifest"
class="network-policy-editor"
/>
</div>
<div v-else>
<h5>{{ s__('NetworkPolicies|Policy definition') }}</h5>
<p>
{{ s__("NetworkPolicies|Define this policy's location, conditions and actions.") }}
</p>
<div class="gl-p-3 gl-bg-gray-50">
<network-policy-editor
ref="policyEditor"
v-model="selectedPolicy.manifest"
class="network-policy-editor"
/>
</div>
<h5 class="gl-mt-6">{{ s__('NetworkPolicies|Enforcement status') }}</h5>
<p>{{ s__('NetworkPolicies|Choose whether to enforce this policy.') }}</p>
<gl-toggle v-model="selectedPolicy.isEnabled" data-testid="policyToggle" />
</div>
</template>
<h5 class="gl-mt-6">{{ s__('NetworkPolicies|Enforcement status') }}</h5>
<p>{{ s__('NetworkPolicies|Choose whether to enforce this policy.') }}</p>
<gl-toggle v-model="selectedPolicy.isEnabled" data-testid="policyToggle" />
</div>
</gl-drawer>
</div>
</template>
......@@ -101,7 +101,7 @@ export default {
:aria-describedby="`js-${option.value}-license-radio`"
:class="{ 'mb-3': isDescriptionEnabled }"
>
<template>{{ option.label }}</template>
{{ option.label }}
<div v-if="isDescriptionEnabled" class="text-secondary">
{{ option.description }}
</div>
......
......@@ -59,16 +59,6 @@ exports[`Alert integration settings form should match the default snapshot 1`] =
value="minutes"
/>
</div>
<gl-form-text-stub
class="gl-font-base gl-text-gray-400!"
tag="small"
textvariant="muted"
>
Time limit must be a multiple of 15 minutes
</gl-form-text-stub>
</gl-form-group-stub>
<gl-button-stub
......
......@@ -7,7 +7,9 @@ exports[`AddLicenseForm template does not show radio button descriptions, if lic
data-qa-selector="approved_license_radio"
value="approved"
>
Allow
Allow
<!---->
</gl-form-radio-stub>
`;
......@@ -19,7 +21,9 @@ exports[`AddLicenseForm template does not show radio button descriptions, if lic
data-qa-selector="blacklisted_license_radio"
value="blacklisted"
>
Deny
Deny
<!---->
</gl-form-radio-stub>
`;
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