Skip to content

Commit e5de358

Browse files
author
GitLab Bot
committed
Add latest changes from gitlab-org/gitlab@master
1 parent daf5e72 commit e5de358

File tree

31 files changed

+476
-107
lines changed

31 files changed

+476
-107
lines changed

‎app/assets/javascripts/gfm_auto_complete.js

+10
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,7 @@ class GfmAutoComplete {
181181
skipSpecialCharacterTest: true,
182182
skipMarkdownCharacterTest: true,
183183
data: GfmAutoComplete.defaultLoadingData,
184+
maxLen: 100,
184185
displayTpl(value) {
185186
const cssClasses = [];
186187

@@ -297,6 +298,7 @@ class GfmAutoComplete {
297298
at: '/submit_review ',
298299
alias: 'submit_review',
299300
data: Object.keys(REVIEW_STATES),
301+
maxLen: 100,
300302
displayTpl({ name }) {
301303
const reviewState = REVIEW_STATES[name];
302304

@@ -315,6 +317,7 @@ class GfmAutoComplete {
315317
insertTpl: GfmAutoComplete.Emoji.insertTemplateFunction,
316318
skipSpecialCharacterTest: true,
317319
data: GfmAutoComplete.defaultLoadingData,
320+
maxLen: 100,
318321
callbacks: {
319322
...this.getDefaultCallbacks(),
320323
matcher(flag, subtext) {
@@ -373,6 +376,7 @@ class GfmAutoComplete {
373376
$input.atwho({
374377
at: '@',
375378
alias: USERS_ALIAS,
379+
maxLen: 100,
376380
displayTpl(value) {
377381
let tmpl = GfmAutoComplete.Loading.template;
378382
const { avatarTag, username, title, icon, availability } = value;
@@ -478,6 +482,7 @@ class GfmAutoComplete {
478482
at: '#',
479483
alias: ISSUES_ALIAS,
480484
searchKey: 'search',
485+
maxLen: 100,
481486
displayTpl(value) {
482487
let tmpl = GfmAutoComplete.Loading.template;
483488
if (value.title != null) {
@@ -515,6 +520,7 @@ class GfmAutoComplete {
515520
searchKey: 'search',
516521
// eslint-disable-next-line no-template-curly-in-string
517522
insertTpl: '${atwho-at}${title}',
523+
maxLen: 100,
518524
displayTpl(value) {
519525
let tmpl = GfmAutoComplete.Loading.template;
520526
if (value.title != null) {
@@ -570,6 +576,7 @@ class GfmAutoComplete {
570576
at: '!',
571577
alias: MERGEREQUESTS_ALIAS,
572578
searchKey: 'search',
579+
maxLen: 100,
573580
displayTpl(value) {
574581
let tmpl = GfmAutoComplete.Loading.template;
575582
if (value.title != null) {
@@ -616,6 +623,7 @@ class GfmAutoComplete {
616623
alias: LABELS_ALIAS,
617624
searchKey: 'search',
618625
data: GfmAutoComplete.defaultLoadingData,
626+
maxLen: 100,
619627
displayTpl(value) {
620628
let tmpl = GfmAutoComplete.Labels.templateFunction(value.color, value.title);
621629
if (GfmAutoComplete.isLoading(value)) {
@@ -703,6 +711,7 @@ class GfmAutoComplete {
703711
at: '$',
704712
alias: SNIPPETS_ALIAS,
705713
searchKey: 'search',
714+
maxLen: 100,
706715
displayTpl(value) {
707716
let tmpl = GfmAutoComplete.Loading.template;
708717
if (value.title != null) {
@@ -741,6 +750,7 @@ class GfmAutoComplete {
741750
suffix: ']',
742751
alias: CONTACTS_ALIAS,
743752
searchKey: 'search',
753+
maxLen: 100,
744754
displayTpl(value) {
745755
let tmpl = GfmAutoComplete.Loading.template;
746756
if (value.email != null) {

‎app/assets/javascripts/sidebar/components/todo_toggle/todo.vue

+13-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
<!-- eslint-disable vue/multi-word-component-names -->
22
<script>
3-
import { GlLoadingIcon, GlIcon, GlTooltipDirective } from '@gitlab/ui';
3+
import { GlButton, GlLoadingIcon, GlIcon, GlTooltipDirective } from '@gitlab/ui';
44
import { __ } from '~/locale';
55

66
const MARK_TEXT = __('Mark as done');
77
const TODO_TEXT = __('Add a to do');
88

99
export default {
1010
components: {
11+
GlButton,
1112
GlIcon,
1213
GlLoadingIcon,
1314
},
@@ -42,8 +43,11 @@ export default {
4243
computed: {
4344
buttonClasses() {
4445
return this.collapsed
45-
? 'btn-blank btn-todo sidebar-collapsed-icon js-dont-change-state'
46-
: 'gl-button btn btn-default btn-todo issuable-header-btn gl-float-right';
46+
? 'sidebar-collapsed-icon js-dont-change-state'
47+
: 'issuable-header-btn gl-float-right';
48+
},
49+
buttonVariant() {
50+
return this.collapsed ? 'link' : 'default';
4751
},
4852
buttonLabel() {
4953
return this.isTodo ? MARK_TEXT : TODO_TEXT;
@@ -70,13 +74,15 @@ export default {
7074
</script>
7175

7276
<template>
73-
<button
77+
<gl-button
7478
v-gl-tooltip.left.viewport
7579
:class="buttonClasses"
80+
:variant="buttonVariant"
7681
:title="buttonTooltip"
7782
:aria-label="buttonLabel"
7883
:data-issuable-id="issuableId"
7984
:data-issuable-type="issuableType"
85+
size="small"
8086
type="button"
8187
@click="handleButtonClick"
8288
>
@@ -85,7 +91,7 @@ export default {
8591
:class="collapsedButtonIconClasses"
8692
:name="collapsedButtonIcon"
8793
/>
88-
<span v-show="!collapsed" class="issuable-todo-inner">{{ buttonLabel }}</span>
89-
<gl-loading-icon v-show="isActionActive" size="sm" :inline="true" />
90-
</button>
94+
<span v-if="!collapsed" class="issuable-todo-inner">{{ buttonLabel }}</span>
95+
<gl-loading-icon v-if="isActionActive" size="sm" inline />
96+
</gl-button>
9197
</template>

‎app/assets/javascripts/snippets/components/snippet_visibility_edit.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,12 @@ export default {
5151
v-for="option in defaultVisibilityLevels"
5252
:key="option.value"
5353
:value="option.value"
54-
class="mb-3"
54+
class="gl-mb-3"
5555
>
56-
<div class="d-flex gl-align-items-center">
56+
<div class="gl-display-flex gl-align-items-center">
5757
<gl-icon :size="16" :name="option.icon" />
5858
<span
59-
class="font-weight-bold ml-1 js-visibility-option"
59+
class="gl-font-weight-semibold gl-ml-2 js-visibility-option"
6060
data-testid="visibility-content"
6161
:data-qa-visibility="option.label"
6262
>{{ option.label }}</span
@@ -71,7 +71,7 @@ export default {
7171
</gl-form-radio-group>
7272
</gl-form-group>
7373

74-
<div class="text-muted" data-testid="restricted-levels-info">
74+
<div class="gl-text-secondary" data-testid="restricted-levels-info">
7575
<template v-if="!defaultVisibilityLevels.length">{{
7676
$options.SNIPPET_LEVELS_DISABLED
7777
}}</template>

‎app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_header.vue

-3
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,6 @@ export default {
2626

2727
<template>
2828
<div class="block gl-display-flex gl-justify-content-space-between gl-border-b-gray-100!">
29-
<span class="issuable-header-text hide-collapsed">
30-
{{ __('To Do') }}
31-
</span>
3229
<sidebar-todo
3330
v-if="!sidebarCollapsed"
3431
:project-path="projectPath"

‎app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_todo.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,8 @@ export default {
138138
<template>
139139
<div
140140
:class="{
141-
'block todo': sidebarCollapsed,
142-
'gl-ml-auto': !sidebarCollapsed,
141+
block: sidebarCollapsed,
142+
'gl-display-inline-flex gl-flex-basis-full': !sidebarCollapsed,
143143
}"
144144
>
145145
<todo

‎app/assets/javascripts/work_items/components/work_item_description.vue

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
import { GlAlert, GlButton, GlForm, GlFormGroup } from '@gitlab/ui';
2+
import { GlAlert, GlButton, GlForm, GlFormGroup, GlFormTextarea } from '@gitlab/ui';
33
import * as Sentry from '~/sentry/sentry_browser_wrapper';
44
import { helpPagePath } from '~/helpers/help_page_helper';
55
import { getDraft, clearDraft, updateDraft } from '~/lib/utils/autosave';
@@ -22,6 +22,7 @@ export default {
2222
GlButton,
2323
GlForm,
2424
GlFormGroup,
25+
GlFormTextarea,
2526
MarkdownEditor,
2627
WorkItemDescriptionRendered,
2728
},
@@ -312,11 +313,12 @@ export default {
312313
</p>
313314
<details class="gl-mb-5">
314315
<summary class="gl-text-blue-500">{{ s__('WorkItem|View current version') }}</summary>
315-
<textarea
316-
class="note-textarea js-gfm-input js-autosize markdown-area gl-p-3"
316+
<gl-form-textarea
317+
class="js-gfm-input js-autosize markdown-area gl-font-monospace!"
318+
data-testid="conflicted-description"
317319
readonly
318320
:value="conflictedDescription"
319-
></textarea>
321+
/>
320322
</details>
321323
<template #actions>
322324
<gl-button

‎app/assets/javascripts/work_items/components/work_item_detail.vue

+5-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script>
22
import { isEmpty } from 'lodash';
3-
import { GlAlert, GlSkeletonLoader, GlButton, GlTooltipDirective, GlEmptyState } from '@gitlab/ui';
3+
import { GlAlert, GlButton, GlTooltipDirective, GlEmptyState } from '@gitlab/ui';
44
import noAccessSvg from '@gitlab/svgs/dist/illustrations/analytics/no-access.svg?raw';
55
import * as Sentry from '~/sentry/sentry_browser_wrapper';
66
import { s__ } from '~/locale';
@@ -46,6 +46,7 @@ import WorkItemRelationships from './work_item_relationships/work_item_relations
4646
import WorkItemStickyHeader from './work_item_sticky_header.vue';
4747
import WorkItemAncestors from './work_item_ancestors/work_item_ancestors.vue';
4848
import WorkItemTitleWithEdit from './work_item_title_with_edit.vue';
49+
import WorkItemLoading from './work_item_loading.vue';
4950
5051
export default {
5152
i18n,
@@ -56,7 +57,6 @@ export default {
5657
components: {
5758
GlAlert,
5859
GlButton,
59-
GlSkeletonLoader,
6060
GlEmptyState,
6161
WorkItemActions,
6262
WorkItemTodos,
@@ -74,6 +74,7 @@ export default {
7474
WorkItemStickyHeader,
7575
WorkItemAncestors,
7676
WorkItemTitleWithEdit,
77+
WorkItemLoading,
7778
},
7879
mixins: [glFeatureFlagMixin()],
7980
inject: ['fullPath', 'isGroup', 'reportAbusePath'],
@@ -428,11 +429,8 @@ export default {
428429
</gl-alert>
429430
</section>
430431
<section :class="workItemBodyClass">
431-
<div v-if="workItemLoading" class="gl-max-w-26 gl-py-5">
432-
<gl-skeleton-loader :height="65" :width="240">
433-
<rect width="240" height="20" x="5" y="0" rx="4" />
434-
<rect width="100" height="20" x="5" y="45" rx="4" />
435-
</gl-skeleton-loader>
432+
<div v-if="workItemLoading">
433+
<work-item-loading :two-column-view="workItemsBetaEnabled" />
436434
</div>
437435
<template v-else>
438436
<div class="gl-sm-display-none! gl-display-flex">

‎app/assets/javascripts/work_items/components/work_item_loading.vue

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<script>
2+
import { GlSkeletonLoader } from '@gitlab/ui';
3+
4+
export default {
5+
name: 'WorkItemLoading',
6+
loader: {
7+
repeat: 10,
8+
width: 1000,
9+
height: 40,
10+
descriptionRepeat: 2,
11+
attributesRepeat: 6,
12+
},
13+
components: {
14+
GlSkeletonLoader,
15+
},
16+
props: {
17+
twoColumnView: {
18+
type: Boolean,
19+
required: false,
20+
default: false,
21+
},
22+
},
23+
};
24+
</script>
25+
26+
<template>
27+
<div v-if="twoColumnView" class="work-item-overview" data-testid="work-item-two-column-loading">
28+
<section>
29+
<gl-skeleton-loader :height="60" :width="600" data-testid="work-title-and-meta-loading">
30+
<!--- START work item title -->
31+
<rect width="500" height="20" x="5" y="0" rx="4" />
32+
<!--- END work item title -->
33+
<!--- START work item meta -->
34+
<rect width="50" height="15" x="5" y="30" rx="6" />
35+
<rect width="150" height="5" x="60" y="35" rx="2" />
36+
<!--- END work item meta -->
37+
</gl-skeleton-loader>
38+
39+
<!--- START work item description -->
40+
<div data-testid="work-item-description-loading">
41+
<gl-skeleton-loader
42+
v-for="i in $options.loader.descriptionRepeat"
43+
:key="i"
44+
:width="600"
45+
:height="20"
46+
>
47+
<rect width="500" x="5" y="0" height="5" rx="2" />
48+
<rect width="595" x="5" y="10" height="5" rx="2" />
49+
</gl-skeleton-loader>
50+
51+
<gl-skeleton-loader :width="600" :height="20">
52+
<rect width="300" x="5" y="0" height="5" rx="2" />
53+
</gl-skeleton-loader>
54+
55+
<gl-skeleton-loader :width="600" :height="20">
56+
<rect width="500" x="5" y="0" height="5" rx="2" />
57+
<rect width="595" x="5" y="10" height="5" rx="2" />
58+
</gl-skeleton-loader>
59+
60+
<gl-skeleton-loader :width="600" :height="20">
61+
<rect width="300" x="5" y="0" height="5" rx="2" />
62+
</gl-skeleton-loader>
63+
</div>
64+
<!--- END work item description -->
65+
66+
<!--- START work item attributes wrapper small/xs screen -->
67+
<div
68+
class="work-item-attributes-wrapper gl-md-display-none!"
69+
data-testid="work-item-attributes-xssm-loading"
70+
>
71+
<gl-skeleton-loader
72+
v-for="i in $options.loader.attributesRepeat"
73+
:key="i"
74+
:width="240"
75+
:height="20"
76+
>
77+
<rect width="50" x="2" y="0" height="2" rx="1" />
78+
<rect width="100" x="2" y="5" height="4" rx="1" />
79+
</gl-skeleton-loader>
80+
</div>
81+
<!--- END work item attributes wrapper small/xs screen -->
82+
83+
<!--- START work item notes activity placeholder -->
84+
<gl-skeleton-loader
85+
:height="30"
86+
:width="600"
87+
data-testid="work-item-activity-placeholder-loading"
88+
>
89+
<rect width="100" height="15" x="5" y="0" rx="4" />
90+
</gl-skeleton-loader>
91+
<!--- END work item notes activity placeholder -->
92+
93+
<!--- START work item notes -->
94+
<gl-skeleton-loader
95+
v-for="i in $options.loader.repeat"
96+
:key="i"
97+
data-testid="work-item-notes-loading"
98+
:width="$options.loader.width"
99+
:height="$options.loader.height"
100+
preserve-aspect-ratio="xMinYMax meet"
101+
>
102+
<circle cx="20" cy="20" r="16" />
103+
<rect width="950" x="45" y="15" height="10" rx="4" />
104+
</gl-skeleton-loader>
105+
<!--- END work item notes -->
106+
</section>
107+
108+
<!--- START work item attributes wrapper md/lg screens -->
109+
<aside
110+
class="work-item-overview-right-sidebar gl-md-display-block! gl-display-none"
111+
data-testid="work-item-attributes-mdup-loading"
112+
>
113+
<div class="work-item-attributes-wrapper">
114+
<gl-skeleton-loader
115+
v-for="i in $options.loader.attributesRepeat"
116+
:key="i"
117+
:width="240"
118+
:height="50"
119+
>
120+
<rect width="100" x="0" y="25" height="5" rx="4" />
121+
<rect width="240" x="0" y="35" height="10" rx="4" />
122+
</gl-skeleton-loader>
123+
</div>
124+
</aside>
125+
<!--- END work item attributes wrapper md/lg screens -->
126+
</div>
127+
<div v-else data-testid="work-item-single-column-loading" class="gl-max-w-26 gl-py-5">
128+
<!--- START work item loading original loader -->
129+
<gl-skeleton-loader :height="65" :width="240">
130+
<rect width="240" height="20" x="5" y="0" rx="4" />
131+
<rect width="100" height="20" x="5" y="45" rx="4" />
132+
</gl-skeleton-loader>
133+
<!--- END work item loading original loader -->
134+
</div>
135+
</template>

0 commit comments

Comments
 (0)