Skip to content

G
gitlab-ce
Commit 8c924b47 authored by David O'Regan's avatar David O'Regan
Browse files
Options

Merge branch '334245-remove-deprecated-slot-scope-attribute-from-the-codebase' into 'master' 

Remove deprecated `slot-scope` attribute from the codebase[RUN ALL RSPEC] [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!64604
parents 87fd9807 f9ac9550
Hide whitespace changes
Inline Side-by-side
Showing with 387 additions and 292 deletions
.eslintrc.yml
View file @ 8c924b47
......@@ -17,6 +17,14 @@ settings:
webpack:
config: './config/webpack.config.js'
rules:
# BEGIN Disallow deprecated slot syntax
# TODO: Remove once
# https://gitlab.com/gitlab-org/frontend/eslint-plugin/-/issues/31 is closed
# and consumed by GitLab.
vue/no-deprecated-scope-attribute: error
vue/no-deprecated-slot-attribute: error
vue/no-deprecated-slot-scope-attribute: error
# END Disallow deprecated slot syntax
import/no-commonjs: error
import/no-default-export: off
no-underscore-dangle:
......
app/assets/javascripts/batch_comments/components/draft_note.vue
View file @ 8c924b47
......@@ -94,9 +94,11 @@ export default {
@handleUpdateNote="update"
@toggleResolveStatus="toggleResolveDiscussion(draft.id)"
>
<strong slot="note-header-info" class="badge draft-pending-label gl-mr-2">
{{ __('Pending') }}
</strong>
<template #note-header-info>
<strong class="badge draft-pending-label gl-mr-2">
{{ __('Pending') }}
</strong>
</template>
</noteable-note>
</ul>
......
app/assets/javascripts/contributors/components/contributors.vue
View file @ 8c924b47
......@@ -204,15 +204,16 @@ export default {
<h4 class="gl-mb-2 gl-mt-5">{{ __('Commits to') }} {{ branch }}</h4>
<span>{{ __('Excluding merge commits. Limited to 6,000 commits.') }}</span>
<resizable-chart-container>
<gl-area-chart
slot-scope="{ width }"
class="gl-mb-5"
:width="width"
:data="masterChartData"
:option="masterChartOptions"
:height="masterChartHeight"
@created="onMasterChartCreated"
/>
<template #default="{ width }">
<gl-area-chart
class="gl-mb-5"
:width="width"
:data="masterChartData"
:option="masterChartOptions"
:height="masterChartHeight"
@created="onMasterChartCreated"
/>
</template>
</resizable-chart-container>
<div class="row">
......@@ -226,14 +227,15 @@ export default {
{{ n__('%d commit', '%d commits', contributor.commits) }} ({{ contributor.email }})
</p>
<resizable-chart-container>
<gl-area-chart
slot-scope="{ width }"
:width="width"
:data="contributor.dates"
:option="individualChartOptions"
:height="individualChartHeight"
@created="onIndividualChartCreated"
/>
<template #default="{ width }">
<gl-area-chart
:width="width"
:data="contributor.dates"
:option="individualChartOptions"
:height="individualChartHeight"
@created="onIndividualChartCreated"
/>
</template>
</resizable-chart-container>
</div>
</div>
......
app/assets/javascripts/issuable_create/components/issuable_form.vue
View file @ 8c924b47
......@@ -72,16 +72,17 @@ export default {
:show-suggest-popover="true"
:textarea-value="issuableDescription"
>
<textarea
id="issuable-description"
ref="textarea"
slot="textarea"
v-model="issuableDescription"
dir="auto"
class="note-textarea qa-issuable-form-description rspec-issuable-form-description js-gfm-input js-autosize markdown-area"
:aria-label="__('Description')"
:placeholder="__('Write a comment or drag your files here…')"
></textarea>
<template #textarea>
<textarea
id="issuable-description"
ref="textarea"
v-model="issuableDescription"
dir="auto"
class="note-textarea qa-issuable-form-description rspec-issuable-form-description js-gfm-input js-autosize markdown-area"
:aria-label="__('Description')"
:placeholder="__('Write a comment or drag your files here…')"
></textarea>
</template>
</markdown-field>
</div>
</div>
......
app/assets/javascripts/members/components/members_tabs.vue
View file @ 8c924b47
......@@ -116,7 +116,7 @@ export default {
:title-link-attributes="tab.attrs"
:query-param-value="tab.queryParamValue"
>
<template slot="title">
<template #title>
<span>{{ tab.title }}</span>
<gl-badge size="sm" class="gl-tab-counter-badge">{{ getTabCount(tab) }}</gl-badge>
</template>
......
app/assets/javascripts/milestones/components/milestone_combobox.vue
View file @ 8c924b47
......@@ -171,7 +171,7 @@ export default {
<template>
<gl-dropdown v-bind="$attrs" class="milestone-combobox" @shown="focusSearchBox">
<template slot="button-content">
<template #button-content>
<span data-testid="milestone-combobox-button-content" class="gl-flex-grow-1 text-muted">{{
selectedMilestonesLabel
}}</span>
......
app/assets/javascripts/monitoring/components/charts/time_series.vue
View file @ 8c924b47
......@@ -402,22 +402,20 @@ export default {
@created="onChartCreated"
@updated="onChartUpdated"
>
<template v-if="tooltip.type === 'deployments'">
<template slot="tooltip-title">
<template #tooltip-title>
<template v-if="tooltip.type === 'deployments'">
{{ __('Deployed') }}
</template>
<div slot="tooltip-content" class="d-flex align-items-center">
<div v-else class="text-nowrap">
{{ tooltip.title }}
</div>
</template>
<template #tooltip-content>
<div v-if="tooltip.type === 'deployments'" class="d-flex align-items-center">
<gl-icon name="commit" class="mr-2" />
<gl-link :href="tooltip.commitUrl">{{ tooltip.sha }}</gl-link>
</div>
</template>
<template v-else>
<template slot="tooltip-title">
<div class="text-nowrap">
{{ tooltip.title }}
</div>
</template>
<template slot="tooltip-content" :tooltip="tooltip">
<template v-else>
<div
v-for="(content, key) in tooltip.content"
:key="key"
......
app/assets/javascripts/monitoring/components/dashboard_actions_menu.vue
View file @ 8c924b47
......@@ -138,10 +138,10 @@ export default {
</script>
<template>
<!--
<!--
This component should be replaced with a variant developed
as part of https://gitlab.com/gitlab-org/gitlab-ui/-/issues/936
The variant will create a dropdown with an icon, no text and no caret
The variant will create a dropdown with an icon, no text and no caret
-->
<gl-dropdown
v-gl-tooltip
......@@ -177,20 +177,22 @@ export default {
@formValidation="setFormValidity"
/>
</form>
<div slot="modal-footer">
<gl-button @click="hideAddMetricModal">
{{ __('Cancel') }}
</gl-button>
<gl-button
v-track-event="getAddMetricTrackingOptions()"
data-testid="add-metric-modal-submit-button"
:disabled="!customMetricsFormIsValid"
variant="success"
@click="submitCustomMetricsForm"
>
{{ __('Save changes') }}
</gl-button>
</div>
<template #modal-footer>
<div>
<gl-button @click="hideAddMetricModal">
{{ __('Cancel') }}
</gl-button>
<gl-button
v-track-event="getAddMetricTrackingOptions()"
data-testid="add-metric-modal-submit-button"
:disabled="!customMetricsFormIsValid"
variant="success"
@click="submitCustomMetricsForm"
>
{{ __('Save changes') }}
</gl-button>
</div>
</template>
</gl-modal>
</template>
......
app/assets/javascripts/notes/components/discussion_notes.vue
View file @ 8c924b47
......@@ -130,15 +130,18 @@ export default {
@handleDeleteNote="$emit('deleteNote')"
@startReplying="$emit('startReplying')"
>
<note-edited-text
v-if="discussion.resolved"
slot="discussion-resolved-text"
:edited-at="discussion.resolved_at"
:edited-by="discussion.resolved_by"
:action-text="resolvedText"
class-name="discussion-headline-light js-discussion-headline discussion-resolved-text"
/>
<slot slot="avatar-badge" name="avatar-badge"></slot>
<template #discussion-resolved-text>
<note-edited-text
v-if="discussion.resolved"
:edited-at="discussion.resolved_at"
:edited-by="discussion.resolved_by"
:action-text="resolvedText"
class-name="discussion-headline-light js-discussion-headline discussion-resolved-text"
/>
</template>
<template #avatar-badge>
<slot name="avatar-badge"></slot>
</template>
</component>
<discussion-notes-replies-wrapper :is-diff-discussion="discussion.diff_discussion">
<toggle-replies-widget
......@@ -175,7 +178,9 @@ export default {
:discussion-resolve-path="discussion.resolve_path"
@handleDeleteNote="$emit('deleteNote')"
>
<slot v-if="index === 0" slot="avatar-badge" name="avatar-badge"></slot>
<template #avatar-badge>
<slot v-if="index === 0" name="avatar-badge"></slot>
</template>
</component>
<slot :show-replies="isExpanded || !hasReplies" name="footer"></slot>
</template>
......
app/assets/javascripts/notes/components/noteable_discussion.vue
View file @ 8c924b47
......@@ -265,7 +265,9 @@ export default {
@startReplying="showReplyForm"
@deleteNote="deleteNoteHandler"
>
<slot slot="avatar-badge" name="avatar-badge"></slot>
<template #avatar-badge>
<slot name="avatar-badge"></slot>
</template>
<template #footer="{ showReplies }">
<draft-note
v-if="showDraft(discussion.reply_id)"
......
app/assets/javascripts/notes/components/noteable_note.vue
View file @ 8c924b47
......@@ -392,7 +392,9 @@ export default {
:img-alt="author.name"
:img-size="40"
>
<slot slot="avatar-badge" name="avatar-badge"></slot>
<template #avatar-badge>
<slot name="avatar-badge"></slot>
</template>
</user-avatar-link>
</div>
<div class="timeline-content">
......@@ -403,7 +405,9 @@ export default {
:note-id="note.id"
:is-confidential="note.confidential"
>
<slot slot="note-header-info" name="note-header-info"></slot>
<template #note-header-info>
<slot name="note-header-info"></slot>
</template>
<span v-if="commit" v-safe-html="actionText"></span>
<span v-else-if="note.created_at" class="d-none d-sm-inline">&middot;</span>
</note-header>
......
app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
View file @ 8c924b47
......@@ -301,7 +301,7 @@ export default {
:state="form.fields.namespace.state"
required
>
<template slot="first">
<template #first>
<option :value="null" disabled>{{ s__('ForkProject|Select a namespace') }}</option>
</template>
<option v-for="namespace in namespaces" :key="namespace.id" :value="namespace">
......
app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
View file @ 8c924b47
......@@ -85,28 +85,29 @@ export default {
:action-cancel="$options.cancelProps"
@primary="onSubmit"
>
<div slot="modal-title" class="modal-title-with-label">
<gl-sprintf
:message="
s__(
'Labels|%{spanStart}Promote label%{spanEnd} %{labelTitle} %{spanStart}to Group Label?%{spanEnd}',
)
"
>
<template #labelTitle>
<span
class="label color-label"
:style="`background-color: ${labelColor}; color: ${labelTextColor};`"
>
{{ labelTitle }}
</span>
</template>
<template #span="{ content }"
><span>{{ content }}</span></template
<template #modal-title>
<div class="modal-title-with-label">
<gl-sprintf
:message="
s__(
'Labels|%{spanStart}Promote label%{spanEnd} %{labelTitle} %{spanStart}to Group Label?%{spanEnd}',
)
"
>
</gl-sprintf>
</div>
<template #labelTitle>
<span
class="label color-label"
:style="`background-color: ${labelColor}; color: ${labelTextColor};`"
>
{{ labelTitle }}
</span>
</template>
<template #span="{ content }"
><span>{{ content }}</span></template
>
</gl-sprintf>
</div>
</template>
{{ text }}
</gl-modal>
</template>
app/assets/javascripts/static_site_editor/rich_content_editor/modals/insert_video_modal.vue
View file @ 8c924b47
......@@ -81,11 +81,13 @@ export default {
:invalid-feedback="urlError"
>
<gl-form-input id="video-modal-url-input" ref="urlInput" v-model="url" />
<gl-sprintf slot="description" :message="description" class="text-gl-muted">
<template #id>
<strong>{{ __('0t1DgySidms') }}</strong>
</template>
</gl-sprintf>
<template #description>
<gl-sprintf :message="description" class="text-gl-muted">
<template #id>
<strong>{{ __('0t1DgySidms') }}</strong>
</template>
</gl-sprintf>
</template>
</gl-form-group>
</gl-modal>
</template>
app/assets/javascripts/terraform/components/terraform_list.vue
View file @ 8c924b47
......@@ -98,7 +98,7 @@ export default {
<section>
<gl-tabs>
<gl-tab>
<template slot="title">
<template #title>
<p class="gl-m-0">
{{ s__('Terraform|States') }}
<gl-badge v-if="statesCount">{{ statesCount }}</gl-badge>
......
app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
View file @ 8c924b47
......@@ -629,11 +629,9 @@ export default {
input-id="squash-message-edit"
squash
>
<commit-message-dropdown
slot="header"
v-model="squashCommitMessage"
:commits="commits"
/>
<template #header>
<commit-message-dropdown v-model="squashCommitMessage" :commits="commits" />
</template>
</commit-edit>
<commit-edit
v-if="shouldShowMergeEdit"
......@@ -641,14 +639,16 @@ export default {
:label="__('Merge commit message')"
input-id="merge-message-edit"
>
<label slot="checkbox">
<input
id="include-description"
type="checkbox"
@change="updateMergeCommitMessage($event.target.checked)"
/>
{{ __('Include merge request description') }}
</label>
<template #checkbox>
<label>
<input
id="include-description"
type="checkbox"
@change="updateMergeCommitMessage($event.target.checked)"
/>
{{ __('Include merge request description') }}
</label>
</template>
</commit-edit>
</ul>
</commits-header>
......
app/assets/javascripts/vue_shared/components/actions_button.vue
View file @ 8c924b47
......@@ -68,7 +68,7 @@ export default {
split
@click="handleClick(selectedAction, $event)"
>
<template slot="button-content">
<template #button-content>
<span class="gl-new-dropdown-button-text" v-bind="selectedAction.attrs">
{{ selectedAction.text }}
</span>
......
app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue
View file @ 8c924b47
......@@ -28,18 +28,23 @@ export default {
<slot></slot>
</p>
<resizable-chart-container>
<gl-area-chart
slot-scope="{ width }"
v-bind="$attrs"
:width="width"
:height="$options.chartContainerHeight"
:data="chartData"
:include-legend-avg-max="false"
:option="areaChartOptions"
>
<slot slot="tooltip-title" name="tooltip-title"></slot>
<slot slot="tooltip-content" name="tooltip-content"></slot>
</gl-area-chart>
<template #default="{ width }">
<gl-area-chart
v-bind="$attrs"
:width="width"
:height="$options.chartContainerHeight"
:data="chartData"
:include-legend-avg-max="false"
:option="areaChartOptions"
>
<template #tooltip-title>
<slot name="tooltip-title"></slot>
</template>
<template #tooltip-content>
<slot name="tooltip-content"></slot>
</template>
</gl-area-chart>
</template>
</resizable-chart-container>
</div>
</template>
app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue
View file @ 8c924b47
......@@ -46,9 +46,12 @@ export default {
:area-chart-options="chartOptions"
>
{{ dateRange }}
<slot slot="tooltip-title" name="tooltip-title"></slot>
<slot slot="tooltip-content" name="tooltip-content"></slot>
<template #tooltip-title>
<slot name="tooltip-title"></slot>
</template>
<template #tooltip-content>
<slot name="tooltip-content"></slot>
</template>
</ci-cd-analytics-area-chart>
</div>
</template>
app/assets/javascripts/vue_shared/components/expand_button.vue
View file @ 8c924b47
......@@ -7,7 +7,7 @@ import { __ } from '~/locale';
*
* @example
* <expand-button>
* <template slot="expanded">
* <template #expanded>
* Text goes here.
* </template>
* </expand-button>
......
app/assets/javascripts/vue_shared/components/gl_modal_vuex.vue
View file @ 8c924b47
......@@ -74,6 +74,8 @@ export default {
@hidden="syncHide"
>
<slot></slot>
<slot slot="modal-footer" name="modal-footer" :ok="ok" :cancel="cancel"></slot>
<template #modal-footer>
<slot name="modal-footer" :ok="ok" :cancel="cancel"></slot>
</template>
</gl-modal>
</template>
app/assets/javascripts/vue_shared/components/notes/system_note.vue
View file @ 8c924b47
......@@ -111,7 +111,7 @@ export default {
<div class="note-header">
<note-header :author="note.author" :created-at="note.created_at" :note-id="note.id">
<span v-safe-html="actionTextHtml"></span>
<template v-if="canSeeDescriptionVersion" slot="extra-controls">
<template v-if="canSeeDescriptionVersion" #extra-controls>
&middot;
<gl-button
variant="link"
......
ee/app/assets/javascripts/analytics/shared/components/scatterplot.vue
View file @ 8c924b47
......@@ -89,10 +89,14 @@ export default {
:x-axis-title="xAxisTitle"
:format-tooltip-text="renderTooltip"
>
<div slot="tooltip-title">{{ tooltipTitle }} ({{ xAxisTitle }})</div>
<div slot="tooltip-content" class="d-flex">
<div class="flex-grow-1">{{ yAxisTitle }}:&nbsp;</div>
<div class="font-weight-bold">{{ tooltipContent }}</div>
</div>
<template #tooltip-title>
<div>{{ tooltipTitle }} ({{ xAxisTitle }})</div>
</template>
<template #tooltip-content>
<div class="d-flex">
<div class="flex-grow-1">{{ yAxisTitle }}:&nbsp;</div>
<div class="font-weight-bold">{{ tooltipContent }}</div>
</div>
</template>
</gl-discrete-scatter-chart>
</template>
ee/app/assets/javascripts/approvals/components/mr_edit/app.vue
View file @ 8c924b47
......@@ -115,35 +115,43 @@ export default {
<gl-accordion :header-level="3">
<gl-accordion-item :title="accordionTitle">
<app>
<mr-rules slot="rules" />
<div slot="footer">
<mr-rules-hidden-inputs />
<div
v-if="canUpdateApprovers && showCodeOwnerTip"
class="form-text text-muted"
data-testid="codeowners-tip"
>
<gl-sprintf
:message="
__(
'Tip: add a %{linkStart}CODEOWNERS%{linkEnd} to automatically add approvers based on file paths and file types.',
)
"
<template #rules>
<mr-rules />
</template>
<template #footer>
<div>
<mr-rules-hidden-inputs />
<div
v-if="canUpdateApprovers && showCodeOwnerTip"
class="form-text text-muted"
data-testid="codeowners-tip"
>
<template #link="{ content }">
<gl-link :href="$options.codeOwnerHelpPage" target="_blank">{{
content
}}</gl-link>
</template>
</gl-sprintf>
<gl-sprintf
:message="
__(
'Tip: add a %{linkStart}CODEOWNERS%{linkEnd} to automatically add approvers based on file paths and file types.',
)
"
>
<template #link="{ content }">
<gl-link :href="$options.codeOwnerHelpPage" target="_blank">{{
content
}}</gl-link>
</template>
</gl-sprintf>
</div>
</div>
</div>
</template>
</app>
</gl-accordion-item>
</gl-accordion>
</div>
<app v-else>
<mr-rules slot="rules" />
<mr-rules-hidden-inputs slot="footer" />
<template #rules>
<mr-rules />
</template>
<template #footer>
<mr-rules-hidden-inputs />
</template>
</app>
</template>
ee/app/assets/javascripts/approvals/components/project_settings/app.vue
View file @ 8c924b47
......@@ -11,5 +11,9 @@ export default {
</script>
<template>
<app :is-mr-edit="false"><project-rules slot="rules" /></app>
<app :is-mr-edit="false">
<template #rules>
<project-rules />
</template>
</app>
</template>
ee/app/assets/javascripts/burndown_chart/components/burn_charts.vue
View file @ 8c924b47
......@@ -338,12 +338,9 @@ export default {
:namespace-type="namespaceType"
:display-value="displayValue"
>
<timebox-summary-cards
slot-scope="{ columns: openColumns, loading: summaryLoading, total }"
:columns="openColumns"
:loading="summaryLoading"
:total="total"
/>
<template #default="{ columns: openColumns, loading: summaryLoading, total }">
<timebox-summary-cards :columns="openColumns" :loading="summaryLoading" :total="total" />
</template>
</open-timebox-summary>
</template>
<div class="row">
......
ee/app/assets/javascripts/burndown_chart/components/burndown_chart.vue
View file @ 8c924b47
......@@ -149,8 +149,8 @@ export default {
:include-legend-avg-max="false"
@created="setChart"
>
<template slot="tooltip-title">{{ tooltip.title }}</template>
<template slot="tooltip-content">{{ tooltip.content }}</template>
<template #tooltip-title>{{ tooltip.title }}</template>
<template #tooltip-content>{{ tooltip.content }}</template>
</gl-line-chart>
</div>
</template>
ee/app/assets/javascripts/burndown_chart/components/burnup_chart.vue
View file @ 8c924b47
......@@ -138,8 +138,8 @@ export default {
:include-legend-avg-max="false"
@created="setChart"
>
<template slot="tooltip-title">{{ tooltip.title }}</template>
<template slot="tooltip-content">
<template #tooltip-title>{{ tooltip.title }}</template>
<template #tooltip-content>
<div>{{ tooltip.total }}</div>
<div>{{ tooltip.completed }}</div>
</template>
......
ee/app/assets/javascripts/clusters/agents/components/show.vue
View file @ 8c924b47
......@@ -129,7 +129,7 @@ export default {
<gl-tabs>
<gl-tab>
<template slot="title">
<template #title>
<span data-testid="cluster-agent-token-count">
{{ $options.i18n.tokens }}
......
ee/app/assets/javascripts/clusters/components/environments.vue
View file @ 8c924b47
......@@ -81,19 +81,21 @@ export default {
:primary-button-link="clustersHelpPath"
:primary-button-text="__('Learn more about deploying to a cluster')"
>
<div slot="description">
<gl-sprintf
:message="
__(
'Ensure your %{linkStart}environment is part of the deploy stage%{linkEnd} of your CI pipeline to track deployments to your cluster.',
)
"
>
<template #link="{ content }">
<gl-link :href="environmentsHelpPath">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
<template #description>
<div>
<gl-sprintf
:message="
__(
'Ensure your %{linkStart}environment is part of the deploy stage%{linkEnd} of your CI pipeline to track deployments to your cluster.',
)
"
>
<template #link="{ content }">
<gl-link :href="environmentsHelpPath">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
</template>
</gl-empty-state>
<gl-table
......
ee/app/assets/javascripts/related_items_tree/components/related_items_tree_app.vue
View file @ 8c924b47
......@@ -173,19 +173,21 @@ export default {
:active-slot-names="[visibleForm]"
class="gl-p-5 gl-pb-0"
>
<h6 v-for="slot in formSlots" :key="slot.name" :slot="slot.name">
{{ slot.value }}
<gl-icon
v-gl-tooltip.hover
name="question-o"
class="gl-text-gray-500"
:title="
__(
'The parent epic is confidential and can only contain confidential epics and issues',
)
"
/>
</h6>
<template v-for="slot in formSlots" #[slot.name]>
<h6 :key="slot.name">
{{ slot.value }}
<gl-icon
v-gl-tooltip.hover
name="question-o"
class="gl-text-gray-500"
:title="
__(
'The parent epic is confidential and can only contain confidential epics and issues',
)
"
/>
</h6>
</template>
</slot-switch>
<slot-switch
v-if="visibleForm"
......@@ -196,35 +198,38 @@ export default {
'gl-show-field-errors': itemAddFailure,
}"
>
<add-item-form
:slot="$options.FORM_SLOTS.addItem"
:issuable-type="issuableType"
:input-value="itemInputValue"
:is-submitting="itemAddInProgress"
:pending-references="pendingReferences"
:auto-complete-sources="itemAutoCompleteSources"
:path-id-separator="itemPathIdSeparator"
:has-error="itemAddFailure"
:item-add-failure-type="itemAddFailureType"
:item-add-failure-message="itemAddFailureMessage"
:confidential="parentItem.confidential"
@pendingIssuableRemoveRequest="handlePendingItemRemove"
@addIssuableFormInput="handleAddItemFormInput"
@addIssuableFormBlur="handleAddItemFormBlur"
@addIssuableFormSubmit="handleAddItemFormSubmit"
@addIssuableFormCancel="handleAddItemFormCancel"
/>
<create-epic-form
:slot="$options.FORM_SLOTS.createEpic"
:is-submitting="itemCreateInProgress"
@createEpicFormSubmit="handleCreateEpicFormSubmit"
@createEpicFormCancel="handleCreateEpicFormCancel"
/>
<create-issue-form
:slot="$options.FORM_SLOTS.createIssue"
@cancel="toggleCreateIssueForm({ toggleState: false })"
@submit="createNewIssue"
/>
<template #[$options.FORM_SLOTS.addItem]>
<add-item-form
:issuable-type="issuableType"
:input-value="itemInputValue"
:is-submitting="itemAddInProgress"
:pending-references="pendingReferences"
:auto-complete-sources="itemAutoCompleteSources"
:path-id-separator="itemPathIdSeparator"
:has-error="itemAddFailure"
:item-add-failure-type="itemAddFailureType"
:item-add-failure-message="itemAddFailureMessage"
:confidential="parentItem.confidential"
@pendingIssuableRemoveRequest="handlePendingItemRemove"
@addIssuableFormInput="handleAddItemFormInput"
@addIssuableFormBlur="handleAddItemFormBlur"
@addIssuableFormSubmit="handleAddItemFormSubmit"
@addIssuableFormCancel="handleAddItemFormCancel"
/>
</template>
<template #[$options.FORM_SLOTS.createEpic]>
<create-epic-form
:is-submitting="itemCreateInProgress"
@createEpicFormSubmit="handleCreateEpicFormSubmit"
@createEpicFormCancel="handleCreateEpicFormCancel"
/>
</template>
<template #[$options.FORM_SLOTS.createIssue]>
<create-issue-form
@cancel="toggleCreateIssueForm({ toggleState: false })"
@submit="createNewIssue"
/>
</template>
</slot-switch>
<related-items-tree-body
v-if="!itemsFetchResultEmpty"
......
ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_auth.vue
View file @ 8c924b47
......@@ -83,9 +83,9 @@ export default {
</div>
</form>
<template slot="modal-cancel">{{ s__('Cancel') }}</template>
<template #modal-cancel>{{ s__('Cancel') }}</template>
<template slot="modal-ok">
<template #modal-ok>
<gl-loading-icon v-if="isApproving" inline />
{{ s__('Approve') }}
</template>
......
ee/app/assets/javascripts/vue_shared/metrics_reports/grouped_metrics_reports_app.vue
View file @ 8c924b47
......@@ -92,25 +92,27 @@ export default {
class="mr-widget-border-top grouped-security-reports mr-report"
@toggleEvent="handleToggleEvent"
>
<div slot="body" class="mr-widget-grouped-section report-block">
<smart-virtual-list
:length="metrics.length"
:remain="$options.maxShownReportItems"
:size="$options.typicalReportItemHeight"
class="report-block-container"
wtag="ul"
wclass="report-block-list"
>
<report-item
v-for="(metric, index) in metrics"
:key="index"
:issue="metric"
status="none"
:status-icon-size="24"
:component="$options.componentNames.MetricsReportsIssueBody"
class="gl-ml-2 gl-mt-2 gl-mb-3"
/>
</smart-virtual-list>
</div>
<template #body>
<div class="mr-widget-grouped-section report-block">
<smart-virtual-list
:length="metrics.length"
:remain="$options.maxShownReportItems"
:size="$options.typicalReportItemHeight"
class="report-block-container"
wtag="ul"
wclass="report-block-list"
>
<report-item
v-for="(metric, index) in metrics"
:key="index"
:issue="metric"
status="none"
:status-icon-size="24"
:component="$options.componentNames.MetricsReportsIssueBody"
class="gl-ml-2 gl-mt-2 gl-mb-3"
/>
</smart-virtual-list>
</div>
</template>
</report-section>
</template>
ee/spec/frontend/approvals/components/license_compliance/modal_spec.js
View file @ 8c924b47
import { GlSprintf } from '@gitlab/ui';
import { GlSprintf, GlModal } from '@gitlab/ui';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import LicenseComplianceModal from 'ee/approvals/components/license_compliance/modal.vue';
......@@ -57,6 +57,7 @@ describe('EE Approvals LicenseCompliance Modal', () => {
stubs: {
GlModalVuex,
GlSprintf,
GlModal,
RuleForm: mocks.RuleForm,
},
});
......
ee/spec/frontend/clusters/agents/components/show_spec.js
View file @ 8c924b47
import { GlAlert, GlKeysetPagination, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
import { GlAlert, GlKeysetPagination, GlLoadingIcon, GlSprintf, GlTab } from '@gitlab/ui';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import VueApollo from 'vue-apollo';
import ClusterAgentShow from 'ee/clusters/agents/components/show.vue';
......@@ -44,7 +44,7 @@ describe('ClusterAgentShow', () => {
localVue,
apolloProvider,
propsData,
stubs: { GlSprintf, TimeAgoTooltip },
stubs: { GlSprintf, TimeAgoTooltip, GlTab },
});
};
......@@ -54,6 +54,7 @@ describe('ClusterAgentShow', () => {
wrapper = shallowMount(ClusterAgentShow, {
propsData,
mocks: { $apollo, clusterAgent },
stubs: { GlTab },
});
};
......
spec/frontend/batch_comments/components/draft_note_spec.js
View file @ 8c924b47
import { getByRole } from '@testing-library/dom';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { stubComponent } from 'helpers/stub_component';
import DraftNote from '~/batch_comments/components/draft_note.vue';
import { createStore } from '~/batch_comments/stores';
import NoteableNote from '~/notes/components/noteable_note.vue';
......@@ -8,6 +9,14 @@ import { createDraft } from '../mock_data';
const localVue = createLocalVue();
const NoteableNoteStub = stubComponent(NoteableNote, {
template: `
<div>
<slot name="note-header-info">Test</slot>
</div>
`,
});
describe('Batch comments draft note component', () => {
let store;
let wrapper;
......@@ -26,6 +35,9 @@ describe('Batch comments draft note component', () => {
store,
propsData,
localVue,
stubs: {
NoteableNote: NoteableNoteStub,
},
});
jest.spyOn(wrapper.vm.$store, 'dispatch').mockImplementation();
......
spec/frontend/issuable_create/components/issuable_form_spec.js
View file @ 8c924b47
......@@ -23,6 +23,9 @@ const createComponent = ({
<button class="js-issuable-save">Submit issuable</button>
`,
},
stubs: {
MarkdownField,
},
});
};
......
spec/frontend/monitoring/components/charts/time_series_spec.js
View file @ 8c924b47
......@@ -51,6 +51,8 @@ describe('Time series component', () => {
},
stubs: {
GlPopover: true,
GlLineChart,
GlAreaChart,
},
attachTo: document.body,
});
......@@ -202,7 +204,7 @@ describe('Time series component', () => {
describe('when series is of line type', () => {
beforeEach(() => {
createWrapper();
createWrapper({}, mount);
wrapper.vm.formatTooltipText(mockLineSeriesData());
return wrapper.vm.$nextTick();
});
......
spec/frontend/monitoring/components/dashboard_actions_menu_spec.js
View file @ 8c924b47
import { GlDropdownItem } from '@gitlab/ui';
import { GlDropdownItem, GlModal } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import CustomMetricsFormFields from '~/custom_metrics/components/custom_metrics_form_fields.vue';
import { redirectTo } from '~/lib/utils/url_utility';
......@@ -43,6 +43,9 @@ describe('Actions menu', () => {
wrapper = shallowMount(ActionsMenu, {
propsData: { ...dashboardActionsMenuProps, ...props },
store,
stubs: {
GlModal,
},
...options,
});
};
......@@ -82,7 +85,7 @@ describe('Actions menu', () => {
it('modal for custom metrics form is rendered', () => {
expect(findAddMetricModal().exists()).toBe(true);
expect(findAddMetricModal().attributes().modalid).toBe('addMetric');
expect(findAddMetricModal().props('modalId')).toBe('addMetric');
});
it('add metric modal submit button exists', () => {
......
spec/frontend/notes/components/discussion_notes_spec.js
View file @ 8c924b47
import { getByRole } from '@testing-library/dom';
import { shallowMount } from '@vue/test-utils';
import { shallowMount, mount } from '@vue/test-utils';
import '~/behaviors/markdown/render_gfm';
import DiscussionNotes from '~/notes/components/discussion_notes.vue';
import NoteableNote from '~/notes/components/noteable_note.vue';
......@@ -23,8 +23,8 @@ describe('DiscussionNotes', () => {
let wrapper;
const getList = () => getByRole(wrapper.element, 'list');
const createComponent = (props) => {
wrapper = shallowMount(DiscussionNotes, {
const createComponent = (props, mountingMethod = shallowMount) => {
wrapper = mountingMethod(DiscussionNotes, {
store,
propsData: {
discussion: discussionMock,
......@@ -33,7 +33,11 @@ describe('DiscussionNotes', () => {
...props,
},
scopedSlots: {
footer: '<p slot-scope="{ showReplies }">showReplies:{{showReplies}}</p>',
footer: `
<template #default="{ showReplies }">
<p>showReplies:{{ showReplies }}</p>,
</template>
`,
},
slots: {
'avatar-badge': '<span class="avatar-badge-slot-content" />',
......@@ -112,7 +116,7 @@ describe('DiscussionNotes', () => {
});
it('passes down avatar-badge slot content', () => {
createComponent();
createComponent({}, mount);
expect(wrapper.find('.avatar-badge-slot-content').exists()).toBe(true);
});
});
......
spec/frontend/pages/projects/forks/new/components/fork_form_spec.js
View file @ 8c924b47
......@@ -155,7 +155,7 @@ describe('ForkForm component', () => {
describe('forks namespaces', () => {
beforeEach(() => {
mockGetRequest({ namespaces: MOCK_NAMESPACES_RESPONSE });
createComponent();
createFullComponent();
});
it('make GET request from endpoint', async () => {
......
spec/frontend/projects/pipelines/charts/components/__snapshots__/ci_cd_analytics_area_chart_spec.js.snap
View file @ 8c924b47
......@@ -21,11 +21,7 @@ exports[`CiCdAnalyticsAreaChart matches the snapshot 1`] = `
option="[object Object]"
thresholds=""
width="0"
>
<template />
<template />
</glareachart-stub>
/>
</div>
</div>
`;
spec/frontend/terraform/components/terraform_list_spec.js
View file @ 8c924b47
......@@ -47,6 +47,9 @@ describe('TerraformList', () => {
localVue,
apolloProvider,
propsData,
stubs: {
GlTab,
},
});
};
......
spec/frontend/vue_mr_widget/components/states/commit_edit_spec.js
View file @ 8c924b47
......@@ -63,7 +63,7 @@ describe('Commits edit component', () => {
beforeEach(() => {
createComponent({
header: `<div class="test-header">${testCommitMessage}</div>`,
checkbox: `<label slot="checkbox" class="test-checkbox">${testLabel}</label >`,
checkbox: `<label class="test-checkbox">${testLabel}</label >`,
});
});
......
spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
View file @ 8c924b47
......@@ -70,6 +70,9 @@ const createComponent = (customConfig = {}, mergeRequestWidgetGraphql = false) =
mergeRequestWidgetGraphql,
},
},
stubs: {
CommitEdit,
},
});
};
......
spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js
View file @ 8c924b47
......@@ -121,7 +121,9 @@ describe('ImageDiffViewer', () => {
:new-size="newSize"
:old-size="oldSize"
>
<span slot="image-overlay" class="overlay">test</span>
<template #image-overlay>
<span class="overlay">test</span>
</template>
</image-diff-viewer>
`),
}).$mount();
......
spec/frontend/vue_shared/components/paginated_list_spec.js
View file @ 8c924b47
......@@ -7,9 +7,11 @@ describe('Pagination links component', () => {
let glPaginatedList;
const template = `
<div class="slot" slot-scope="{ listItem }">
<span class="item">Item Name: {{listItem.id}}</span>
</div>
<template #default="{ listItem }">
<div class="slot">
<span class="item">Item Name: {{ listItem.id }}</span>
</div>
</template>
`;
const props = {
......
spec/frontend/vue_shared/components/resizable_chart/__snapshots__/resizable_chart_container_spec.js.snap
View file @ 8c924b47
......@@ -2,20 +2,22 @@
exports[`Resizable Chart Container renders the component 1`] = `
<div>
<div
class="slot"
>
<span
class="width"
<template>
<div
class="slot"
>
0
</span>
<span
class="height"
>
0
</span>
</div>
<span
class="width"
>
0
</span>
<span
class="height"
>
0
</span>
</div>
</template>
</div>
`;
spec/frontend/vue_shared/components/resizable_chart/resizable_chart_container_spec.js
View file @ 8c924b47
......@@ -16,10 +16,12 @@ describe('Resizable Chart Container', () => {
wrapper = mount(ResizableChartContainer, {
scopedSlots: {
default: `
<div class="slot" slot-scope="{ width, height }">
<span class="width">{{width}}</span>
<span class="height">{{height}}</span>
</div>
<template #default="{ width, height }">
<div class="slot">
<span class="width">{{width}}</span>
<span class="height">{{height}}</span>
</div>
</template>
`,
},
});
......
vendor/assets/javascripts/vue-virtual-scroller/src/components/DynamicScroller.vue
View file @ 8c924b47
......@@ -10,7 +10,7 @@
@visible="onScrollerVisible"
v-on="listeners"
>
<template slot-scope="{ item: itemWithSize, index, active }">
<template #default="{ item: itemWithSize, index, active }">
<slot
v-bind="{
item: itemWithSize.item,
......@@ -20,10 +20,10 @@
}"
/>
</template>
<template slot="before">
<template #before>
<slot name="before" />
</template>
<template slot="after">
<template #after>
<slot name="after" />
</template>
</RecycleScroller>
......
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