Add latest changes from gitlab-org/gitlab@master

This commit is contained in:
GitLab Bot 2024-07-31 18:11:27 +00:00
parent 9a6e6bb248
commit 11c99a1a7a
251 changed files with 1039 additions and 695 deletions

View File

@ -108,7 +108,6 @@ Style/StringConcatenation:
- 'lib/gitlab/throttle.rb'
- 'lib/gitlab/time_tracking_formatter.rb'
- 'lib/gitlab/untrusted_regexp.rb'
- 'lib/gitlab/usage/metrics/instrumentations/issues_created_from_alerts_metric.rb'
- 'lib/gitlab/usage_data_queries.rb'
- 'lib/google_api/cloud_platform/client.rb'
- 'lib/kramdown/converter/commonmark.rb'

View File

@ -177,11 +177,11 @@ export default {
@setDateRange="onSetDateRange"
@setPredefinedDateRange="setPredefinedDateRange"
/>
<div class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row">
<div class="gl-flex gl-flex-col md:gl-flex-row">
<path-navigation
v-if="displayPathNavigation"
data-testid="vsa-path-navigation"
class="gl-w-full gl-mt-4"
class="gl-mt-4 gl-w-full"
:loading="isLoading || isLoadingStage"
:stages="pathNavigationData"
:selected-stage="selectedStage"

View File

@ -145,7 +145,7 @@ export default {
<template>
<div>
<filtered-search-bar
class="gl-flex-grow-1"
class="gl-grow"
:namespace="namespacePath"
recent-searches-storage-key="value-stream-analytics"
:search-input-placeholder="__('Filter results')"

View File

@ -65,16 +65,16 @@ export default {
>
<template #title>{{ pathItem.title }}</template>
<div class="gl-px-4">
<div class="gl-display-flex gl-justify-content-space-between">
<div class="gl-pr-4 gl-pb-3">
<div class="gl-flex gl-justify-between">
<div class="gl-pb-3 gl-pr-4">
{{ s__('ValueStreamEvent|Stage time (median)') }}
</div>
<div class="gl-pb-3 gl-font-bold">{{ pathItem.metric }}</div>
</div>
</div>
<div class="gl-px-4">
<div class="gl-display-flex gl-justify-content-space-between">
<div class="gl-pr-4 gl-pb-3">
<div class="gl-flex gl-justify-between">
<div class="gl-pb-3 gl-pr-4">
{{ s__('ValueStreamEvent|Items in stage') }}
</div>
<div class="gl-pb-3 gl-font-bold">
@ -87,29 +87,23 @@ export default {
{{ s__('ValueStreamEvent|Only items that reached their stop event.') }}
</div>
</div>
<div class="gl-px-4 gl-pt-4 gl-border-t-1 gl-border-t-solid gl-border-gray-50">
<div
v-if="pathItem.startEventHtmlDescription"
class="gl-display-flex gl-flex-direction-row"
>
<div class="gl-display-flex gl-flex-direction-column gl-pr-4 gl-pb-3 metric-label">
<div class="gl-border-t-1 gl-border-gray-50 gl-px-4 gl-pt-4 gl-border-t-solid">
<div v-if="pathItem.startEventHtmlDescription" class="gl-flex gl-flex-row">
<div class="metric-label gl-flex gl-flex-col gl-pb-3 gl-pr-4">
{{ s__('ValueStreamEvent|Start') }}
</div>
<div
v-safe-html="pathItem.startEventHtmlDescription"
class="gl-display-flex gl-flex-direction-column gl-pb-3 stage-event-description"
class="stage-event-description gl-flex gl-flex-col gl-pb-3"
></div>
</div>
<div
v-if="pathItem.endEventHtmlDescription"
class="gl-display-flex gl-flex-direction-row"
>
<div class="gl-display-flex gl-flex-direction-column gl-pr-4 metric-label">
<div v-if="pathItem.endEventHtmlDescription" class="gl-flex gl-flex-row">
<div class="metric-label gl-flex gl-flex-col gl-pr-4">
{{ s__('ValueStreamEvent|Stop') }}
</div>
<div
v-safe-html="pathItem.endEventHtmlDescription"
class="gl-display-flex gl-flex-direction-column stage-event-description"
class="stage-event-description gl-flex gl-flex-col"
></div>
</div>
</div>

View File

@ -225,7 +225,7 @@ export default {
<p class="gl-m-0">
<gl-link
data-testid="vsa-stage-event-link"
class="gl-text-black-normal"
class="gl-text-default"
:href="item.url"
>{{ itemId(item.id, '#') }}</gl-link
>
@ -233,7 +233,7 @@ export default {
<gl-link
v-if="item.branch"
:href="item.branch.url"
class="gl-text-black-normal ref-name"
class="ref-name gl-text-default"
>{{ item.branch.name }}</gl-link
>
<span class="icon-branch gl-text-gray-400">
@ -243,37 +243,33 @@ export default {
</p>
<p class="gl-m-0">
<span>
<gl-link class="gl-text-black-normal" :href="item.url">{{ item.date }}</gl-link>
<gl-link class="gl-text-default" :href="item.url">{{ item.date }}</gl-link>
{{ s__('ByAuthor|by') }}
<gl-link
class="gl-text-black-normal issue-author-link"
:href="item.author.webUrl"
>{{ item.author.name }}</gl-link
>
<gl-link class="issue-author-link gl-text-default" :href="item.author.webUrl">{{
item.author.name
}}</gl-link>
</span>
</p>
</div>
<div v-else>
<h5 class="gl-font-bold gl-my-1" data-testid="vsa-stage-event-title">
<gl-link class="gl-text-black-normal" :href="item.url">{{ itemTitle(item) }}</gl-link>
<h5 class="gl-my-1 gl-font-bold" data-testid="vsa-stage-event-title">
<gl-link class="gl-text-default" :href="item.url">{{ itemTitle(item) }}</gl-link>
</h5>
<p class="gl-m-0">
<gl-link
data-testid="vsa-stage-event-link"
class="gl-text-black-normal"
class="gl-text-default"
:href="item.url"
>{{ itemDisplayName(item) }}</gl-link
>
<span class="gl-font-lg">&middot;</span>
<span class="gl-text-lg">&middot;</span>
<span data-testid="vsa-stage-event-date">
{{ s__('OpenedNDaysAgo|Created') }}
<gl-link class="gl-text-black-normal" :href="item.url">{{
item.createdAt
}}</gl-link>
<gl-link class="gl-text-default" :href="item.url">{{ item.createdAt }}</gl-link>
</span>
<span data-testid="vsa-stage-event-author">
{{ s__('ByAuthor|by') }}
<gl-link class="gl-text-black-normal" :href="item.author.webUrl">{{
<gl-link class="gl-text-default" :href="item.author.webUrl">{{
item.author.name
}}</gl-link>
</span>

View File

@ -130,17 +130,17 @@ export default {
</script>
<template>
<div
class="gl-mt-3 gl-py-5 gl-px-3 gl-bg-gray-10 gl-border-b-1 gl-border-b-solid gl-border-t-1 gl-border-t-solid gl-border-gray-100"
class="gl-mt-3 gl-border-b-1 gl-border-t-1 gl-border-gray-100 gl-bg-gray-10 gl-px-3 gl-py-5 gl-border-b-solid gl-border-t-solid"
>
<filter-bar
data-testid="vsa-filter-bar"
class="filtered-search-box gl-display-flex gl-border-none"
class="filtered-search-box gl-flex gl-border-none"
:namespace-path="namespacePath"
/>
<hr v-if="shouldShowFilterDropdowns" class="gl-my-5" />
<div
v-if="shouldShowFilterDropdowns"
class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-gap-5"
class="gl-flex gl-flex-col gl-gap-5 lg:gl-flex-row"
data-testid="vsa-filter-dropdowns-container"
>
<projects-dropdown-filter
@ -155,7 +155,7 @@ export default {
/>
<div
v-if="shouldShowDateRangeFilters"
class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-gap-3"
class="gl-flex gl-flex-col gl-gap-3 lg:gl-flex-row"
data-testid="vsa-date-range-filter-container"
>
<date-ranges-dropdown

View File

@ -6,7 +6,7 @@ import { sprintf, s__ } from '~/locale';
import DevopsScoreCallout from './devops_score_callout.vue';
const defaultHeaderAttrs = {
thClass: 'gl-bg-white!',
thClass: '!gl-bg-white',
thAttr: { 'data-testid': 'header' },
};
@ -81,7 +81,7 @@ export default {
</template>
</gl-empty-state>
<div v-else data-testid="devops-score-app">
<div class="gl-text-gray-400 gl-my-4" data-testid="devops-score-note-text">
<div class="gl-my-4 gl-text-gray-400" data-testid="devops-score-note-text">
{{ titleHelperText }}
</div>
<gl-single-stat

View File

@ -130,7 +130,7 @@ export default {
</script>
<template>
<div class="gl-display-flex gl-align-items-center gl-gap-3">
<div class="gl-flex gl-items-center gl-gap-3">
<gl-collapsible-listbox v-model="selectedValue" :items="items" @select="onSelect" />
<div v-if="showDateRangeString || showTooltip" class="gl-text-gray-500">
<span v-if="showDateRangeString" data-testid="predefined-date-range-string">{{

View File

@ -73,11 +73,11 @@ export default {
<template>
<div
v-if="show"
class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row align-items-lg-center justify-content-lg-end"
class="align-items-lg-center justify-content-lg-end gl-flex gl-flex-col lg:gl-flex-row"
>
<gl-daterange-picker
v-model="dateRange"
class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row"
class="gl-flex gl-flex-col lg:gl-flex-row"
:default-start-date="startDate"
:default-end-date="endDate"
:default-min-date="minDate"
@ -88,9 +88,9 @@ export default {
:from-label="__('From')"
:to-label="__('To')"
theme="animate-picker"
start-picker-class="js-daterange-picker-from gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-lg-align-items-center gl-lg-mr-3 gl-mb-2 gl-lg-mb-0"
end-picker-class="js-daterange-picker-to gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-lg-align-items-center gl-mb-2 gl-lg-mb-0"
label-class="gl-mb-2 gl-lg-mb-0"
start-picker-class="js-daterange-picker-from gl-flex gl-flex-col lg:gl-flex-row lg:gl-items-center lg:gl-mr-3 gl-mb-2 lg:gl-mb-0"
end-picker-class="js-daterange-picker-to gl-flex gl-flex-col lg:gl-flex-row lg:gl-items-center gl-mb-2 lg:gl-mb-0"
label-class="gl-mb-2 lg:gl-mb-0"
>
<template #default="{ daysSelected }">
{{ numberOfDays(daysSelected) }}

View File

@ -34,14 +34,12 @@ export default {
<template>
<gl-popover :target="target" placement="top">
<template #title>
<div
class="gl-display-flex gl-justify-content-space-between gl-text-right gl-py-1 gl-align-items-center"
>
<div class="gl-flex gl-items-center gl-justify-between gl-py-1 gl-text-right">
<span data-testid="metric-label">{{ metric.label }}</span>
<gl-link
v-if="metricLink"
:href="metricLink.url"
class="gl-font-sm gl-font-normal"
class="gl-text-sm gl-font-normal"
data-testid="metric-link"
>{{ $options.metricPopoverLabel }}
<gl-icon name="chart" />
@ -52,7 +50,7 @@ export default {
<gl-link
v-if="docsLink"
:href="docsLink.url"
class="gl-font-sm"
class="gl-text-sm"
target="_blank"
data-testid="metric-docs-link"
>{{ docsLink.label }}

View File

@ -42,7 +42,7 @@ export default {
:unit="metric.unit || ''"
:should-animate="true"
:animation-decimal-places="decimalPlaces"
:class="{ 'gl-hover-cursor-pointer': hasLinks }"
:class="{ 'hover:gl-cursor-pointer': hasLinks }"
tabindex="0"
use-delimiters
@click="clickHandler(metric)"

View File

@ -252,7 +252,7 @@ export default {
>
<template #toggle>
<gl-button
button-text-classes="gl-w-full gl-justify-content-space-between gl-display-flex gl-shadow-none gl-mb-0"
button-text-classes="gl-w-full gl-justify-between gl-flex gl-shadow-none gl-mb-0"
:class="['dropdown-projects', toggleClasses]"
>
<gl-avatar
@ -263,14 +263,14 @@ export default {
:size="16"
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
:alt="selectedProjects[0].name"
class="gl-inline-flex gl-align-middle gl-mr-2 gl-flex-shrink-0"
class="gl-mr-2 gl-inline-flex gl-shrink-0 gl-align-middle"
/>
<gl-truncate :text="selectedProjectsLabel" class="gl-min-w-0 gl-flex-grow-1" />
<gl-icon class="gl-ml-2 gl-flex-shrink-0" name="chevron-down" />
<gl-truncate :text="selectedProjectsLabel" class="gl-min-w-0 gl-grow" />
<gl-icon class="gl-ml-2 gl-shrink-0" name="chevron-down" />
</gl-button>
</template>
<template #list-item="{ item }">
<div class="gl-display-flex">
<div class="gl-flex">
<gl-avatar
class="gl-mr-2 gl-align-middle"
:alt="item.name"

View File

@ -116,10 +116,10 @@ export default {
};
</script>
<template>
<div class="gl-display-flex" data-testid="vsa-metrics" :class="isLoading ? 'gl-my-6' : 'gl-mt-6'">
<div class="gl-flex" data-testid="vsa-metrics" :class="isLoading ? 'gl-my-6' : 'gl-mt-6'">
<gl-skeleton-loader v-if="isLoading" />
<template v-else>
<div v-if="hasGroupedMetrics" class="gl-flex-direction-column">
<div v-if="hasGroupedMetrics" class="gl-flex-col">
<div
v-for="(group, groupIndex) in groupedMetrics"
:key="group.key"
@ -127,7 +127,7 @@ export default {
data-testid="vsa-metrics-group"
>
<h4 class="gl-my-0">{{ group.title }}</h4>
<div class="gl-display-flex gl-flex-wrap">
<div class="gl-flex gl-flex-wrap">
<metric-tile
v-for="metric in group.data"
:key="metric.identifier"
@ -142,7 +142,7 @@ export default {
</div>
</div>
</div>
<div v-else class="gl-display-flex gl-flex-wrap gl-mb-7">
<div v-else class="gl-mb-7 gl-flex gl-flex-wrap">
<metric-tile
v-for="metric in metrics"
:key="metric.identifier"

View File

@ -19,11 +19,11 @@ export default {
};
</script>
<template>
<div class="gl-display-flex gl-flex-direction-column" data-testid="vsd-link">
<div class="gl-display-flex gl-mb-2">
<div class="gl-flex gl-flex-col" data-testid="vsd-link">
<div class="gl-mb-2 gl-flex">
<span>{{ $options.i18n.title }}</span>
</div>
<div class="gl-display-flex gl-align-items-baseline">
<div class="gl-flex gl-items-baseline">
<gl-link :href="requestPath">{{ $options.i18n.linkText }}</gl-link
>&nbsp;<gl-icon name="dashboard" />
</div>

View File

@ -63,15 +63,13 @@ export default {
<template>
<div>
<page-heading :heading="$options.i18n.pageTitle" />
<div
class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-my-6 gl-align-items-flex-start"
>
<div class="gl-my-6 gl-flex gl-flex-col gl-items-start md:gl-flex-row">
<gl-skeleton-loader v-if="$apollo.queries.counts.loading" />
<template v-else>
<gl-single-stat
v-for="count in counts"
:key="count.key"
class="gl-pr-9 gl-my-4 gl-md-mt-0 gl-md-mb-0"
class="gl-my-4 gl-pr-9 md:gl-mb-0 md:gl-mt-0"
:value="`${count.value}`"
:title="count.label"
:should-animate="true"

View File

@ -69,7 +69,7 @@ export default {
<gl-icon
v-show="connectSuccessful"
class="js-error-tracking-connect-success gl-ml-2 text-success align-middle"
class="js-error-tracking-connect-success gl-ml-2 gl-text-success align-middle"
:aria-label="__('Projects Successfully Retrieved')"
name="check"
/>

View File

@ -81,7 +81,7 @@ export const WEIGHT_DESC = 'WEIGHT_DESC';
export const API_PARAM = 'apiParam';
export const URL_PARAM = 'urlParam';
export const NORMAL_FILTER = 'normalFilter';
export const SPECIAL_FILTER = 'specialFilter';
export const WILDCARD_FILTER = 'wildcardFilter';
export const ALTERNATIVE_FILTER = 'alternativeFilter';
export const ISSUES_VIEW_TYPE_KEY = 'issuesViewType';
@ -136,7 +136,7 @@ export const urlSortParams = {
[BLOCKING_ISSUES_DESC]: 'blocking_issues_desc',
};
export const specialFilterValues = [
export const wildcardFilterValues = [
FILTER_NONE,
FILTER_ANY,
FILTER_CURRENT,
@ -219,13 +219,13 @@ export const filtersMap = {
[TOKEN_TYPE_ASSIGNEE]: {
[API_PARAM]: {
[NORMAL_FILTER]: 'assigneeUsernames',
[SPECIAL_FILTER]: 'assigneeWildcardId',
[WILDCARD_FILTER]: 'assigneeWildcardId',
[ALTERNATIVE_FILTER]: 'assigneeId',
},
[URL_PARAM]: {
[OPERATOR_IS]: {
[NORMAL_FILTER]: 'assignee_username[]',
[SPECIAL_FILTER]: 'assignee_id',
[WILDCARD_FILTER]: 'assignee_id',
[ALTERNATIVE_FILTER]: 'assignee_username',
},
[OPERATOR_NOT]: {
@ -250,13 +250,13 @@ export const filtersMap = {
[TOKEN_TYPE_REVIEWER]: {
[API_PARAM]: {
[NORMAL_FILTER]: 'reviewerUsername',
[SPECIAL_FILTER]: 'reviewerWildcardId',
[WILDCARD_FILTER]: 'reviewerWildcardId',
[ALTERNATIVE_FILTER]: 'reviewerId',
},
[URL_PARAM]: {
[OPERATOR_IS]: {
[NORMAL_FILTER]: 'reviewer_username',
[SPECIAL_FILTER]: 'reviewer_id',
[WILDCARD_FILTER]: 'reviewer_id',
[ALTERNATIVE_FILTER]: 'reviewer_username',
},
[OPERATOR_NOT]: {
@ -267,29 +267,29 @@ export const filtersMap = {
[TOKEN_TYPE_MILESTONE]: {
[API_PARAM]: {
[NORMAL_FILTER]: 'milestoneTitle',
[SPECIAL_FILTER]: 'milestoneWildcardId',
[WILDCARD_FILTER]: 'milestoneWildcardId',
},
[URL_PARAM]: {
[OPERATOR_IS]: {
[NORMAL_FILTER]: 'milestone_title',
[SPECIAL_FILTER]: 'milestone_title',
[WILDCARD_FILTER]: 'milestone_title',
},
[OPERATOR_NOT]: {
[NORMAL_FILTER]: 'not[milestone_title]',
[SPECIAL_FILTER]: 'not[milestone_title]',
[WILDCARD_FILTER]: 'not[milestone_title]',
},
},
},
[TOKEN_TYPE_LABEL]: {
[API_PARAM]: {
[NORMAL_FILTER]: 'labelName',
[SPECIAL_FILTER]: 'labelName',
[WILDCARD_FILTER]: 'labelName',
[ALTERNATIVE_FILTER]: 'labelNames',
},
[URL_PARAM]: {
[OPERATOR_IS]: {
[NORMAL_FILTER]: 'label_name[]',
[SPECIAL_FILTER]: 'label_name[]',
[WILDCARD_FILTER]: 'label_name[]',
[ALTERNATIVE_FILTER]: 'label_name',
},
[OPERATOR_NOT]: {
@ -336,12 +336,12 @@ export const filtersMap = {
[TOKEN_TYPE_RELEASE]: {
[API_PARAM]: {
[NORMAL_FILTER]: 'releaseTag',
[SPECIAL_FILTER]: 'releaseTagWildcardId',
[WILDCARD_FILTER]: 'releaseTagWildcardId',
},
[URL_PARAM]: {
[OPERATOR_IS]: {
[NORMAL_FILTER]: 'release_tag',
[SPECIAL_FILTER]: 'release_tag',
[WILDCARD_FILTER]: 'release_tag',
},
[OPERATOR_NOT]: {
[NORMAL_FILTER]: 'not[release_tag]',
@ -351,12 +351,12 @@ export const filtersMap = {
[TOKEN_TYPE_MY_REACTION]: {
[API_PARAM]: {
[NORMAL_FILTER]: 'myReactionEmoji',
[SPECIAL_FILTER]: 'myReactionEmoji',
[WILDCARD_FILTER]: 'myReactionEmoji',
},
[URL_PARAM]: {
[OPERATOR_IS]: {
[NORMAL_FILTER]: 'my_reaction_emoji',
[SPECIAL_FILTER]: 'my_reaction_emoji',
[WILDCARD_FILTER]: 'my_reaction_emoji',
},
[OPERATOR_NOT]: {
[NORMAL_FILTER]: 'not[my_reaction_emoji]',
@ -386,30 +386,30 @@ export const filtersMap = {
[TOKEN_TYPE_ITERATION]: {
[API_PARAM]: {
[NORMAL_FILTER]: 'iterationId',
[SPECIAL_FILTER]: 'iterationWildcardId',
[WILDCARD_FILTER]: 'iterationWildcardId',
[ALTERNATIVE_FILTER]: 'iterationCadenceId',
},
[URL_PARAM]: {
[OPERATOR_IS]: {
[NORMAL_FILTER]: 'iteration_id',
[SPECIAL_FILTER]: 'iteration_id',
[WILDCARD_FILTER]: 'iteration_id',
[ALTERNATIVE_FILTER]: 'iteration_cadence_id',
},
[OPERATOR_NOT]: {
[NORMAL_FILTER]: 'not[iteration_id]',
[SPECIAL_FILTER]: 'not[iteration_id]',
[WILDCARD_FILTER]: 'not[iteration_id]',
},
},
},
[TOKEN_TYPE_EPIC]: {
[API_PARAM]: {
[NORMAL_FILTER]: 'epicId',
[SPECIAL_FILTER]: 'epicWildcardId',
[WILDCARD_FILTER]: 'epicWildcardId',
},
[URL_PARAM]: {
[OPERATOR_IS]: {
[NORMAL_FILTER]: 'epic_id',
[SPECIAL_FILTER]: 'epic_id',
[WILDCARD_FILTER]: 'epic_id',
},
[OPERATOR_NOT]: {
[NORMAL_FILTER]: 'not[epic_id]',
@ -419,12 +419,12 @@ export const filtersMap = {
[TOKEN_TYPE_WEIGHT]: {
[API_PARAM]: {
[NORMAL_FILTER]: 'weight',
[SPECIAL_FILTER]: 'weightWildcardId',
[WILDCARD_FILTER]: 'weightWildcardId',
},
[URL_PARAM]: {
[OPERATOR_IS]: {
[NORMAL_FILTER]: 'weight',
[SPECIAL_FILTER]: 'weight',
[WILDCARD_FILTER]: 'weight',
},
[OPERATOR_NOT]: {
[NORMAL_FILTER]: 'not[weight]',
@ -434,12 +434,12 @@ export const filtersMap = {
[TOKEN_TYPE_HEALTH]: {
[API_PARAM]: {
[NORMAL_FILTER]: 'healthStatusFilter',
[SPECIAL_FILTER]: 'healthStatusFilter',
[WILDCARD_FILTER]: 'healthStatusFilter',
},
[URL_PARAM]: {
[OPERATOR_IS]: {
[NORMAL_FILTER]: 'health_status',
[SPECIAL_FILTER]: 'health_status',
[WILDCARD_FILTER]: 'health_status',
},
[OPERATOR_NOT]: {
[NORMAL_FILTER]: 'not[health_status]',

View File

@ -60,8 +60,8 @@ import {
PRIORITY_ASC,
PRIORITY_DESC,
RELATIVE_POSITION_ASC,
SPECIAL_FILTER,
specialFilterValues,
WILDCARD_FILTER,
wildcardFilterValues,
TITLE_ASC,
TITLE_DESC,
UPDATED_ASC,
@ -314,33 +314,29 @@ const getFilterType = ({ type, value: { data, operator } }) => {
) {
return ALTERNATIVE_FILTER;
}
if (specialFilterValues.includes(data)) {
return SPECIAL_FILTER;
if (wildcardFilterValues.includes(data)) {
return WILDCARD_FILTER;
}
return NORMAL_FILTER;
};
const wildcardTokens = [
TOKEN_TYPE_ASSIGNEE,
TOKEN_TYPE_EPIC,
TOKEN_TYPE_HEALTH,
TOKEN_TYPE_ITERATION,
TOKEN_TYPE_MILESTONE,
TOKEN_TYPE_RELEASE,
TOKEN_TYPE_EPIC,
TOKEN_TYPE_ASSIGNEE,
TOKEN_TYPE_REVIEWER,
TOKEN_TYPE_WEIGHT,
];
const isWildcardValue = (tokenType, value) =>
wildcardTokens.includes(tokenType) && specialFilterValues.includes(value);
const isHealthStatusSpecialFilter = (tokenType, value) =>
tokenType === TOKEN_TYPE_HEALTH && specialFilterValues.includes(value);
wildcardTokens.includes(tokenType) && wildcardFilterValues.includes(value);
const requiresUpperCaseValue = (tokenType, value) =>
tokenType === TOKEN_TYPE_TYPE ||
isWildcardValue(tokenType, value) ||
isHealthStatusSpecialFilter(tokenType, value);
tokenType === TOKEN_TYPE_TYPE || isWildcardValue(tokenType, value);
const formatData = (token) => {
if (requiresUpperCaseValue(token.type, token.value.data)) {
@ -383,7 +379,7 @@ export const convertToApiParams = (filterTokens) => {
const cadenceId = fullIterationCadenceId(cadence);
const iterationWildCardId = iteration.toUpperCase();
obj.set(apiField, obj.has(apiField) ? [obj.get(apiField), cadenceId].flat() : cadenceId);
const secondApiField = filtersMap[token.type][API_PARAM][SPECIAL_FILTER];
const secondApiField = filtersMap[token.type][API_PARAM][WILDCARD_FILTER];
obj.set(
secondApiField,
obj.has(secondApiField)

View File

@ -21,7 +21,7 @@ import {
ALTERNATIVE_FILTER,
API_PARAM,
NORMAL_FILTER,
SPECIAL_FILTER,
WILDCARD_FILTER,
URL_PARAM,
} from '~/issues/list/constants';
@ -58,12 +58,12 @@ export const filtersMap = {
[TOKEN_TYPE_ASSIGNEE]: {
[API_PARAM]: {
[NORMAL_FILTER]: 'assigneeUsernames',
[SPECIAL_FILTER]: 'assigneeId',
[WILDCARD_FILTER]: 'assigneeId',
},
[URL_PARAM]: {
[OPERATOR_IS]: {
[NORMAL_FILTER]: 'assignee_username[]',
[SPECIAL_FILTER]: 'assignee_id',
[WILDCARD_FILTER]: 'assignee_id',
[ALTERNATIVE_FILTER]: 'assignee_username',
},
[OPERATOR_NOT]: {
@ -77,29 +77,29 @@ export const filtersMap = {
[TOKEN_TYPE_MILESTONE]: {
[API_PARAM]: {
[NORMAL_FILTER]: 'milestoneTitle',
[SPECIAL_FILTER]: 'milestoneWildcardId',
[WILDCARD_FILTER]: 'milestoneWildcardId',
},
[URL_PARAM]: {
[OPERATOR_IS]: {
[NORMAL_FILTER]: 'milestone_title',
[SPECIAL_FILTER]: 'milestone_title',
[WILDCARD_FILTER]: 'milestone_title',
},
[OPERATOR_NOT]: {
[NORMAL_FILTER]: 'not[milestone_title]',
[SPECIAL_FILTER]: 'not[milestone_title]',
[WILDCARD_FILTER]: 'not[milestone_title]',
},
},
},
[TOKEN_TYPE_LABEL]: {
[API_PARAM]: {
[NORMAL_FILTER]: 'labelName',
[SPECIAL_FILTER]: 'labelName',
[WILDCARD_FILTER]: 'labelName',
[ALTERNATIVE_FILTER]: 'labelNames',
},
[URL_PARAM]: {
[OPERATOR_IS]: {
[NORMAL_FILTER]: 'label_name[]',
[SPECIAL_FILTER]: 'label_name[]',
[WILDCARD_FILTER]: 'label_name[]',
[ALTERNATIVE_FILTER]: 'label_name',
},
[OPERATOR_NOT]: {
@ -126,12 +126,12 @@ export const filtersMap = {
[TOKEN_TYPE_RELEASE]: {
[API_PARAM]: {
[NORMAL_FILTER]: 'releaseTag',
[SPECIAL_FILTER]: 'releaseTagWildcardId',
[WILDCARD_FILTER]: 'releaseTagWildcardId',
},
[URL_PARAM]: {
[OPERATOR_IS]: {
[NORMAL_FILTER]: 'release_tag',
[SPECIAL_FILTER]: 'release_tag',
[WILDCARD_FILTER]: 'release_tag',
},
[OPERATOR_NOT]: {
[NORMAL_FILTER]: 'not[release_tag]',
@ -141,12 +141,12 @@ export const filtersMap = {
[TOKEN_TYPE_MY_REACTION]: {
[API_PARAM]: {
[NORMAL_FILTER]: 'myReactionEmoji',
[SPECIAL_FILTER]: 'myReactionEmoji',
[WILDCARD_FILTER]: 'myReactionEmoji',
},
[URL_PARAM]: {
[OPERATOR_IS]: {
[NORMAL_FILTER]: 'my_reaction_emoji',
[SPECIAL_FILTER]: 'my_reaction_emoji',
[WILDCARD_FILTER]: 'my_reaction_emoji',
},
[OPERATOR_NOT]: {
[NORMAL_FILTER]: 'not[my_reaction_emoji]',
@ -166,28 +166,28 @@ export const filtersMap = {
[TOKEN_TYPE_ITERATION]: {
[API_PARAM]: {
[NORMAL_FILTER]: 'iterationId',
[SPECIAL_FILTER]: 'iterationWildcardId',
[WILDCARD_FILTER]: 'iterationWildcardId',
},
[URL_PARAM]: {
[OPERATOR_IS]: {
[NORMAL_FILTER]: 'iteration_id',
[SPECIAL_FILTER]: 'iteration_id',
[WILDCARD_FILTER]: 'iteration_id',
},
[OPERATOR_NOT]: {
[NORMAL_FILTER]: 'not[iteration_id]',
[SPECIAL_FILTER]: 'not[iteration_id]',
[WILDCARD_FILTER]: 'not[iteration_id]',
},
},
},
[TOKEN_TYPE_EPIC]: {
[API_PARAM]: {
[NORMAL_FILTER]: 'epicId',
[SPECIAL_FILTER]: 'epicId',
[WILDCARD_FILTER]: 'epicId',
},
[URL_PARAM]: {
[OPERATOR_IS]: {
[NORMAL_FILTER]: 'epic_id',
[SPECIAL_FILTER]: 'epic_id',
[WILDCARD_FILTER]: 'epic_id',
},
[OPERATOR_NOT]: {
[NORMAL_FILTER]: 'not[epic_id]',
@ -197,12 +197,12 @@ export const filtersMap = {
[TOKEN_TYPE_WEIGHT]: {
[API_PARAM]: {
[NORMAL_FILTER]: 'weight',
[SPECIAL_FILTER]: 'weight',
[WILDCARD_FILTER]: 'weight',
},
[URL_PARAM]: {
[OPERATOR_IS]: {
[NORMAL_FILTER]: 'weight',
[SPECIAL_FILTER]: 'weight',
[WILDCARD_FILTER]: 'weight',
},
[OPERATOR_NOT]: {
[NORMAL_FILTER]: 'not[weight]',
@ -212,12 +212,12 @@ export const filtersMap = {
[TOKEN_TYPE_HEALTH]: {
[API_PARAM]: {
[NORMAL_FILTER]: 'healthStatusFilter',
[SPECIAL_FILTER]: 'healthStatusFilter',
[WILDCARD_FILTER]: 'healthStatusFilter',
},
[URL_PARAM]: {
[OPERATOR_IS]: {
[NORMAL_FILTER]: 'health_status',
[SPECIAL_FILTER]: 'health_status',
[WILDCARD_FILTER]: 'health_status',
},
[OPERATOR_NOT]: {
[NORMAL_FILTER]: 'not[health_status]',

View File

@ -6,9 +6,9 @@ import { isAssigneeIdParam, isNotEmptySearchToken } from '~/issues/list/utils';
import {
ALTERNATIVE_FILTER,
NORMAL_FILTER,
SPECIAL_FILTER,
URL_PARAM,
specialFilterValues,
WILDCARD_FILTER,
wildcardFilterValues,
} from '~/issues/list/constants';
import { filtersMap } from './constants';
@ -18,8 +18,8 @@ const getFilterType = ({ type, value: { data, operator } }) => {
if (isUnionedLabel || isAssigneeIdParam(type, data)) {
return ALTERNATIVE_FILTER;
}
if (specialFilterValues.includes(data)) {
return SPECIAL_FILTER;
if (wildcardFilterValues.includes(data)) {
return WILDCARD_FILTER;
}
return NORMAL_FILTER;
};

View File

@ -157,7 +157,7 @@ export default {
coverageDeltaClass() {
const delta = this.pipelineCoverageDelta;
if (delta && parseFloat(delta) > 0) {
return 'text-success';
return 'gl-text-success';
}
if (delta && parseFloat(delta) < 0) {
return 'gl-text-danger';

View File

@ -253,7 +253,7 @@ export default {
:class="{ 'pr-sm-8': sidebarStatus }"
>
<div
class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-px-1 py-3 py-md-4 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-flex-direction-column gl-sm-flex-direction-row"
class="py-3 py-md-4 gl-flex gl-flex-col gl-items-center gl-justify-between gl-border-b-1 gl-border-b-gray-100 gl-px-1 gl-border-b-solid sm:gl-flex-row"
>
<div data-testid="alert-header">
<gl-badge class="gl-mr-3">
@ -270,7 +270,7 @@ export default {
</div>
<gl-button
v-if="alert.issue"
class="gl-mt-3 mt-sm-0 align-self-center align-self-sm-baseline alert-details-incident-button"
class="mt-sm-0 align-self-center align-self-sm-baseline alert-details-incident-button gl-mt-3"
data-testid="viewIncidentBtn"
:href="incidentPath(alert.issue.iid)"
category="primary"
@ -280,7 +280,7 @@ export default {
</gl-button>
<gl-button
v-else
class="gl-mt-3 mt-sm-0 align-self-center align-self-sm-baseline alert-details-incident-button"
class="mt-sm-0 align-self-center align-self-sm-baseline alert-details-incident-button gl-mt-3"
data-testid="createIncidentBtn"
:loading="incidentCreationInProgress"
category="primary"
@ -293,16 +293,13 @@ export default {
:aria-label="__('Toggle sidebar')"
category="primary"
variant="default"
class="d-sm-none gl-absolute toggle-sidebar-mobile-button"
class="d-sm-none toggle-sidebar-mobile-button gl-absolute"
type="button"
icon="chevron-double-lg-left"
@click="toggleSidebar"
/>
</div>
<div
v-if="alert"
class="gl-display-flex gl-justify-content-space-between gl-align-items-center"
>
<div v-if="alert" class="gl-flex gl-items-center gl-justify-between">
<h2 data-testid="title">{{ alert.title }}</h2>
</div>
<gl-tabs v-if="alert" v-model="currentTabIndex" data-testid="alertDetailsTabs">
@ -324,7 +321,7 @@ export default {
>
<gl-link
v-if="environmentPath"
class="gl-display-inline-block"
class="gl-inline-block"
data-testid="environmentPath"
:href="environmentPath"
>

View File

@ -51,7 +51,7 @@ export default {
},
computed: {
dropdownClass() {
return this.isSidebar && !this.isDropdownShowing ? 'gl-display-none' : '';
return this.isSidebar && !this.isDropdownShowing ? 'gl-hidden' : '';
},
items() {
return Object.entries(this.statuses).map(([value, text]) => ({ value, text }));

View File

@ -9,8 +9,8 @@ export default {
};
</script>
<template>
<div class="gl-my-5 gl-display-flex">
<div class="gl-font-bold gl-w-13 gl-text-right gl-pr-3">{{ label }}</div>
<div class="gl-my-5 gl-flex">
<div class="gl-w-13 gl-pr-3 gl-text-right gl-font-bold">{{ label }}</div>
<div class="gl-pl-2">
<slot></slot>
</div>

View File

@ -96,7 +96,7 @@ export default {
.sort((a, b) => (a.active === b.active ? 0 : a.active ? -1 : 1)); // eslint-disable-line no-nested-ternary
},
dropdownClass() {
return this.isDropdownShowing ? 'dropdown-menu-selectable show' : 'gl-display-none';
return this.isDropdownShowing ? 'dropdown-menu-selectable show' : 'gl-hidden';
},
dropDownTitle() {
return this.userName ?? __('Select assignee');
@ -193,8 +193,8 @@ export default {
<template>
<div
class="alert-assignees gl-py-5 gl-w-7/10"
:class="{ 'gl-border-b-1 gl-border-b-solid gl-border-b-gray-100': !sidebarCollapsed }"
class="alert-assignees gl-w-7/10 gl-py-5"
:class="{ 'gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid': !sidebarCollapsed }"
>
<template v-if="sidebarCollapsed">
<div
@ -216,16 +216,14 @@ export default {
</template>
<div v-else>
<p
class="gl-text-gray-900 gl-mb-2 gl-leading-20 gl-display-flex gl-justify-content-space-between"
>
<p class="gl-mb-2 gl-flex gl-justify-between gl-leading-20 gl-text-default">
{{ __('Assignee') }}
<gl-button
v-if="isEditable"
ref="editButton"
category="tertiary"
size="small"
class="gl-text-black-normal!"
class="!gl-text-default"
@click="toggleFormDropdown"
@keydown.esc="hideDropdown"
>
@ -282,18 +280,18 @@ export default {
class="hide-collapsed value gl-m-0"
:class="{ 'no-value': !userName }"
>
<div v-if="userName" class="gl-inline-flex gl-mt-2" data-testid="assigned-users">
<div v-if="userName" class="gl-mt-2 gl-inline-flex" data-testid="assigned-users">
<span class="gl-relative gl-mr-4">
<img :alt="userName" :src="userImg" :width="32" class="avatar avatar-inline gl-m-0 s32" />
<img :alt="userName" :src="userImg" :width="32" class="avatar avatar-inline s32 gl-m-0" />
</span>
<span class="gl-display-flex gl-flex-direction-column gl-overflow-hidden">
<span class="gl-flex gl-flex-col gl-overflow-hidden">
<strong class="dropdown-menu-user-full-name">
{{ userFullName }}
</strong>
<span class="dropdown-menu-user-username">@{{ userName }}</span>
</span>
</div>
<span v-else class="gl-display-flex gl-align-items-center gl-leading-normal">
<span v-else class="gl-flex gl-items-center gl-leading-normal">
{{ __('None') }} -
<gl-button
class="gl-ml-2 !gl-text-inherit"

View File

@ -25,7 +25,7 @@ export default {
</script>
<template>
<div class="block gl-display-flex gl-justify-content-space-between gl-border-b-gray-100!">
<div class="block gl-flex gl-justify-between !gl-border-b-gray-100">
<sidebar-todo
v-if="!sidebarCollapsed"
:project-path="projectPath"

View File

@ -49,7 +49,7 @@ export default {
},
computed: {
dropdownClass() {
return this.isDropdownShowing ? 'show' : 'gl-display-none';
return this.isDropdownShowing ? 'show' : 'gl-hidden';
},
},
methods: {
@ -77,7 +77,7 @@ export default {
<template>
<div
class="alert-status gl-py-5"
:class="{ 'gl-border-b-1 gl-border-b-solid gl-border-b-gray-100': !sidebarCollapsed }"
:class="{ 'gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid': !sidebarCollapsed }"
>
<template v-if="sidebarCollapsed">
<div ref="status" class="gl-ml-6" data-testid="status-icon" @click="$emit('toggle-sidebar')">
@ -94,13 +94,11 @@ export default {
</template>
<div v-else>
<p
class="gl-text-gray-900 gl-mb-2 gl-leading-20 gl-display-flex gl-justify-content-space-between"
>
<p class="gl-mb-2 gl-flex gl-justify-between gl-leading-20 gl-text-default">
{{ s__('AlertManagement|Status') }}
<gl-button
v-if="isEditable"
class="gl-text-black-normal!"
class="!gl-text-default"
category="tertiary"
size="small"
@click="toggleFormDropdown"

View File

@ -129,7 +129,7 @@ export default {
<div
:class="{
block: sidebarCollapsed,
'gl-inline-flex gl-flex-basis-full': !sidebarCollapsed,
'gl-inline-flex gl-basis-full': !sidebarCollapsed,
}"
>
<todo

View File

@ -35,12 +35,12 @@ export default {
<template>
<li
:id="noteAnchorId"
class="timeline-entry note system-note note-wrapper gl-p-0!"
class="timeline-entry note system-note note-wrapper !gl-p-0"
data-testid="alert-system-note-container"
>
<div class="gl-inline-flex gl-align-items-center gl-relative">
<div class="gl-relative gl-inline-flex gl-items-center">
<div
class="gl-display-inline gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-box-sizing-content-box gl-p-3 -gl-mt-2 gl-mr-6"
class="gl-box-sizing-content-box -gl-mt-2 gl-mr-6 gl-inline gl-rounded-full gl-border-1 gl-border-solid gl-border-gray-100 gl-bg-white gl-p-3 gl-text-gray-200"
>
<gl-icon :name="note.systemNoteIconName" />
</div>

View File

@ -10,8 +10,8 @@ import { isValidURL } from '~/lib/utils/url_utility';
import { s__ } from '~/locale';
import { PAGE_CONFIG } from '~/vue_shared/alert_details/constants';
const thClass = 'gl-bg-transparent! gl-border-1! gl-border-b-solid! gl-border-gray-200!';
const tdClass = 'gl-border-gray-100! gl-p-5!';
const thClass = '!gl-bg-transparent !gl-border-1 !gl-border-b-solid !gl-border-gray-200';
const tdClass = '!gl-border-gray-100 !gl-p-5';
const allowedFields = [
'iid',

View File

@ -179,7 +179,7 @@ export default {
v-for="awardList in groupedAwards"
:key="awardList.name"
v-gl-tooltip.viewport
class="gl-mr-3 gl-my-2"
class="gl-my-2 gl-mr-3"
:class="awardList.classes"
:title="awardList.title"
:data-emoji-name="awardList.name"

View File

@ -6,7 +6,7 @@ export default {
};
const template = `
<div style="height:600px;" class="gl-display-flex gl-justify-content-center gl-align-items-center">
<div style="height:600px;" class="gl-flex gl-justify-center gl-items-center">
<beta-badge />
</div>
`;

View File

@ -6,7 +6,7 @@ export default {
};
const template = `
<div style="height:600px;" class="gl-display-flex gl-justify-content-center gl-align-items-center">
<div style="height:600px;" class="gl-flex gl-justify-center gl-items-center">
<experiment-badge />
</div>
`;

View File

@ -145,26 +145,19 @@ export default {
</script>
<template>
<div>
<div
class="file-content code js-syntax-highlight gl-display-flex"
:class="$options.userColorScheme"
>
<div class="file-content code js-syntax-highlight gl-flex" :class="$options.userColorScheme">
<blame v-if="showBlame && blameInfoForRange.length" :blame-info="blameInfoForRange" />
<div class="line-numbers gl-px-0!">
<div
v-for="line in lineNumbers"
:key="line"
class="gl-display-flex diff-line-num line-links"
>
<div class="line-numbers !gl-px-0">
<div v-for="line in lineNumbers" :key="line" class="diff-line-num line-links gl-flex">
<a
v-if="showBlameLink"
class="gl-select-none !gl-shadow-none file-line-blame -gl-mx-2"
class="file-line-blame -gl-mx-2 gl-select-none !gl-shadow-none"
:href="`${blamePath}#L${line}`"
></a>
<a
:id="`L${line}`"
:key="line"
class="gl-select-none !gl-shadow-none file-line-num"
class="file-line-num gl-select-none !gl-shadow-none"
:href="`#L${line}`"
:data-line-number="line"
@click="scrollToLine(`#LC${line}`)"
@ -173,11 +166,9 @@ export default {
</a>
</div>
</div>
<div
class="blob-content gl-display-flex gl-flex-direction-column gl-overflow-y-auto gl-w-full"
>
<div class="blob-content gl-flex gl-w-full gl-flex-col gl-overflow-y-auto">
<pre
class="code highlight gl-p-0!"
class="code highlight !gl-p-0"
><code v-safe-html="content" :data-blob-hash="blobHash" ></code></pre>
</div>
</div>

View File

@ -50,7 +50,7 @@ export default {
</script>
<template>
<div>
<div class="gl-display-flex gl-flex-wrap gl-gap-5">
<div class="gl-flex gl-flex-wrap gl-gap-5">
<segmented-control-button-group
:options="chartRanges"
:value="selectedChart"

View File

@ -149,7 +149,7 @@ export default {
<gl-disclosure-dropdown-group v-if="sshUrl">
<code-dropdown-item
:label="$options.i18n.cloneWithSsh"
label-class="gl-font-sm! gl-pt-2!"
label-class="!gl-text-sm !gl-pt-2"
:link="sshUrl"
name="ssh_project_clone"
input-id="copy-ssh-url-input"
@ -159,7 +159,7 @@ export default {
<gl-disclosure-dropdown-group v-if="httpUrl">
<code-dropdown-item
:label="httpLabel"
label-class="gl-font-sm! gl-pt-2!"
label-class="!gl-text-sm !gl-pt-2"
:link="httpUrl"
name="http_project_clone"
input-id="copy-http-url-input"
@ -169,7 +169,7 @@ export default {
<gl-disclosure-dropdown-group v-if="kerberosUrl">
<code-dropdown-item
:label="$options.i18n.cloneWithKerberos"
label-class="gl-font-sm! gl-pt-2!"
label-class="!gl-text-sm !gl-pt-2"
:link="kerberosUrl"
name="kerberos_project_clone"
input-id="copy-http-url-input"

View File

@ -56,7 +56,7 @@ export default {
:label="label"
:label-class="labelClass"
:label-for="inputId"
class="gl-px-3 gl-mb-3 gl-text-left"
class="gl-mb-3 gl-px-3 gl-text-left"
>
<gl-form-input-group
:id="inputId"

View File

@ -78,7 +78,7 @@ export default {
:link="link"
:test-id="`${testId}-button`"
:data-testid="testId"
label-class="gl-font-sm! gl-pt-2!"
label-class="!gl-text-sm !gl-pt-2"
/>
</gl-disclosure-dropdown>
</template>

View File

@ -17,7 +17,7 @@ import { uniqueId } from 'lodash';
import { __ } from '~/locale';
const PREVIEW_COLOR_DEFAULT_CLASSES =
'gl-relative gl-w-7 gl-bg-gray-10 gl-rounded-top-left-base gl-rounded-bottom-left-base';
'gl-relative gl-w-7 gl-bg-gray-10 gl-rounded-tl-base gl-rounded-bl-base';
export default {
name: 'ColorPicker',
@ -105,12 +105,12 @@ export default {
:description="description"
:invalid-feedback="invalidFeedback"
:state="state"
:class="{ 'gl-mb-3!': hasSuggestedColors }"
:class="{ '!gl-mb-3': hasSuggestedColors }"
>
<gl-form-input-group
max-length="7"
type="text"
class="gl-align-center gl-rounded-0 gl-rounded-top-right-base gl-rounded-bottom-right-base gl-max-w-26"
class="gl-align-center gl-max-w-26 gl-rounded-none gl-rounded-br-base gl-rounded-tr-base"
:value="value"
:state="state"
@input="handleColorChange"
@ -120,7 +120,7 @@ export default {
<gl-form-input
:id="id"
type="color"
class="gl-absolute gl-top-0 gl-left-0 gl-h-full! gl-p-0! gl-m-0! gl-opacity-0"
class="gl-absolute gl-left-0 gl-top-0 !gl-m-0 !gl-h-full !gl-p-0 gl-opacity-0"
tabindex="-1"
:value="value"
@input="handleColorChange"
@ -137,7 +137,7 @@ export default {
v-gl-tooltip
:title="name"
:style="{ backgroundColor: hex }"
class="gl-rounded-base gl-w-7 gl-h-7 gl-display-inline-block gl-mr-3 gl-mb-3 gl-text-decoration-none"
class="gl-mb-3 gl-mr-3 gl-inline-block gl-h-7 gl-w-7 gl-rounded-base gl-no-underline"
@click.prevent="handleColorChange(hex)"
/>
</div>

View File

@ -16,13 +16,13 @@ export default {
<template>
<div>
<div class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!">
<span class="gl-flex-grow-1">{{ dropdownTitle }}</span>
<div class="dropdown-title gl-flex gl-items-center !gl-pb-3 gl-pt-0">
<span class="gl-grow">{{ dropdownTitle }}</span>
<gl-button
:aria-label="__('Close')"
variant="link"
size="small"
class="dropdown-header-button gl-p-0!"
class="dropdown-header-button !gl-p-0"
icon="close"
@click="$emit('closeDropdown')"
/>

View File

@ -146,7 +146,7 @@ export default {
<template>
<div class="branch-commit gl-text-primary">
<template v-if="shouldShowRefInfo">
<div class="icon-container gl-display-inline-block">
<div class="icon-container gl-inline-block">
<gl-icon v-if="tag" name="tag" />
<gl-icon v-else-if="mergeRequestRef" name="merge-request" />
<gl-icon v-else name="branch" />

View File

@ -37,7 +37,7 @@ export default {
<template>
<div class="file-container">
<div class="file-content">
<p class="gl-mt-3 file-info">
<p class="file-info gl-mt-3">
{{ fileName }}
<template v-if="fileSize > 0"> ({{ fileSizeReadable }}) </template>
</p>

View File

@ -58,13 +58,13 @@ export default {
<template>
<section>
<div ref="crudComponent" class="crud gl-bg-subtle gl-border gl-border-default gl-rounded-base">
<div ref="crudComponent" class="crud gl-border gl-rounded-base gl-border-default gl-bg-subtle">
<header
class="gl-flex gl-flex-wrap gl-justify-between gl-gap-x-5 gl-gap-y-2 gl-px-5 gl-py-4 gl-bg-default gl-border-b gl-border-default gl-rounded-t-base"
class="gl-border-b gl-flex gl-flex-wrap gl-justify-between gl-gap-x-5 gl-gap-y-2 gl-rounded-t-base gl-border-default gl-bg-default gl-px-5 gl-py-4"
>
<div class="gl-flex gl-flex-col gl-self-center">
<h2
class="gl-text-base gl-font-bold gl-leading-24 gl-inline-flex gl-gap-3 gl-m-0"
class="gl-m-0 gl-inline-flex gl-gap-3 gl-text-base gl-font-bold gl-leading-24"
data-testid="crud-title"
>
{{ title }}
@ -79,14 +79,14 @@ export default {
</h2>
<p
v-if="description || $scopedSlots.description"
class="gl-text-sm gl-text-subtle gl-mt-1 gl-mb-0"
class="gl-mb-0 gl-mt-1 gl-text-sm gl-text-subtle"
data-testid="crud-description"
>
<slot v-if="$scopedSlots.description" name="description"></slot>
<template v-else>{{ description }}</template>
</p>
</div>
<div class="gl-flex gl-gap-3 gl-items-baseline" data-testid="crud-actions">
<div class="gl-flex gl-items-baseline gl-gap-3" data-testid="crud-actions">
<gl-button
v-if="toggleText"
size="small"
@ -100,7 +100,7 @@ export default {
<div
v-if="$scopedSlots.form && isFormVisible"
class="gl-p-5 gl-pt-4 gl-bg-default gl-border-b gl-border-default"
class="gl-border-b gl-border-default gl-bg-default gl-p-5 gl-pt-4"
data-testid="crud-form"
>
<slot name="form"></slot>
@ -116,7 +116,7 @@ export default {
<footer
v-if="$scopedSlots.footer"
class="gl-px-5 gl-py-4 gl-bg-default gl-border-t gl-border-default gl-rounded-b-base"
class="gl-border-t gl-rounded-b-base gl-border-default gl-bg-default gl-px-5 gl-py-4"
data-testid="crud-footer"
>
<slot name="footer"></slot>

View File

@ -73,6 +73,6 @@ export default {
v-gl-tooltip
:class="cssClass"
:title="tooltipText"
class="deployment-instance gl-flex justify-content-center gl-items-center"
class="deployment-instance justify-content-center gl-flex gl-items-center"
/>
</template>

View File

@ -13,7 +13,7 @@ export default {
<transition name="design-disclosure">
<aside
v-if="open"
class="design-disclosure gl-w-full gl-flex gl-flex-col gl-relative gl-border-l gl-z-0 gl-bg-white gl-top-0 gl-right-0 gl-h-full gl-overflow-y-auto"
class="design-disclosure gl-border-l gl-relative gl-right-0 gl-top-0 gl-z-0 gl-flex gl-h-full gl-w-full gl-flex-col gl-overflow-y-auto gl-bg-white"
>
<slot></slot>
</aside>

View File

@ -81,7 +81,7 @@ export default {
'gl-absolute': position,
small: size === 'sm',
}"
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-font-sm"
class="gl-flex gl-items-center gl-justify-center gl-text-sm"
type="button"
@mousedown="$emit('mousedown', $event)"
@mouseup="$emit('mouseup', $event)"

View File

@ -101,7 +101,7 @@ export default {
variant="confirm"
data-testid="diff-stats-dropdown"
class="gl-align-baseline"
toggle-class="gl-px-0! !gl-font-bold"
toggle-class="!gl-px-0 !gl-font-bold"
fluid-width
@shown="focusInput"
>
@ -118,13 +118,13 @@ export default {
</span>
</template>
<template #list-item="{ item }">
<div class="gl-display-flex gl-gap-3 gl-align-items-center gl-overflow-hidden">
<gl-icon :name="item.icon" :class="item.iconColor" class="gl-flex-shrink-0" />
<div class="gl-flex-grow-1 gl-overflow-hidden">
<div class="gl-display-flex">
<div class="gl-flex gl-items-center gl-gap-3 gl-overflow-hidden">
<gl-icon :name="item.icon" :class="item.iconColor" class="gl-shrink-0" />
<div class="gl-grow gl-overflow-hidden">
<div class="gl-flex">
<span
class="gl-font-bold gl-mr-3 gl-flex-grow-1"
:class="item.name ? 'gl-text-truncate' : 'gl-italic gl-gray-400'"
class="gl-mr-3 gl-grow gl-font-bold"
:class="item.name ? 'gl-truncate' : 'gl-gray-400 gl-italic'"
>{{ item.text }}</span
>
<span class="gl-ml-auto gl-whitespace-nowrap" aria-hidden="true">
@ -135,7 +135,7 @@ export default {
>{{ additionsText(item.added) }}, {{ deletionsText(item.removed) }}</span
>
</div>
<div class="gl-text-gray-700 gl-overflow-hidden gl-text-overflow-ellipsis">
<div class="gl-overflow-hidden gl-text-ellipsis gl-text-gray-700">
{{ item.path }}
</div>
</div>
@ -150,10 +150,10 @@ export default {
>
<gl-sprintf :message="$options.i18n.messageAdditionsDeletions">
<template #additions>
<span class="gl-text-green-600 gl-font-bold">{{ additionsText() }}</span>
<span class="gl-font-bold gl-text-green-600">{{ additionsText() }}</span>
</template>
<template #deletions>
<span class="gl-text-red-500 gl-font-bold">{{ deletionsText() }}</span>
<span class="gl-font-bold gl-text-red-500">{{ deletionsText() }}</span>
</template>
</gl-sprintf>
</span>

View File

@ -35,7 +35,7 @@ export default {
<template>
<div>
<div class="gl-display-flex gl-align-items-center">
<div class="gl-flex gl-items-center">
<slot name="title"></slot>
<div class="ml-auto">
<button

View File

@ -42,7 +42,7 @@ export default {
<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"
class="gl-absolute gl-right-3 gl-top-3 gl-text-gray-500"
name="chevron-down"
/>
</button>

View File

@ -148,7 +148,7 @@ export default {
<gl-loading-icon
v-if="isLoading"
size="lg"
class="gl-absolute gl-left-0 gl-top-0 gl-right-0"
class="gl-absolute gl-left-0 gl-right-0 gl-top-0"
/>
<template v-else>
<template v-if="isSearchEmpty && presetOptions.length > 0">
@ -182,7 +182,7 @@ export default {
</slot>
</gl-dropdown-item>
<slot v-bind="{ isSelected }" name="grouped-options"></slot>
<gl-dropdown-item v-if="noOptionsFound" class="gl-pl-6!">
<gl-dropdown-item v-if="noOptionsFound" class="!gl-pl-6">
{{ $options.i18n.noMatchingResults }}
</gl-dropdown-item>
<gl-dropdown-item v-if="noOptions">

View File

@ -272,7 +272,7 @@ export default {
</li>
</template>
<li v-else class="dropdown-menu-empty-item">
<div class="gl-mr-3 gl-ml-3 gl-mt-5 gl-mb-3">
<div class="gl-mb-3 gl-ml-3 gl-mr-3 gl-mt-5">
<template v-if="loading">
<gl-loading-icon />
</template>

View File

@ -106,7 +106,7 @@ export default {
<span class="cgreen gl-font-bold">
<gl-icon name="file-addition" class="align-text-top" /> {{ file.addedLines }}
</span>
<span class="gl-text-red-500 gl-font-bold ml-1">
<span class="ml-1 gl-font-bold gl-text-red-500">
<gl-icon name="file-deletion" class="align-text-top" /> {{ file.removedLines }}
</span>
</span>

View File

@ -15,7 +15,7 @@ export default {
</script>
<template>
<div class="file-row-header bg-white sticky-top gl-px-2 js-file-row-header" :title="path">
<div class="file-row-header bg-white sticky-top js-file-row-header gl-px-2" :title="path">
<gl-truncate :text="path" position="middle" class="gl-font-bold" />
</div>
</template>

View File

@ -403,7 +403,7 @@ export default {
:sort-options="transformedSortOptions"
:sort-by="sortById"
:is-ascending="sortDirectionAscending"
class="sort-dropdown-container gl-w-full sm:gl-w-auto sm:!gl-m-0"
class="sort-dropdown-container gl-w-full sm:!gl-m-0 sm:gl-w-auto"
dropdown-class="gl-grow"
dropdown-toggle-class="gl-grow"
sort-direction-toggle-class="!gl-shrink !gl-grow-0"

View File

@ -78,8 +78,8 @@ export default {
:key="branch.id"
:value="branch.name"
>
<div class="gl-display-flex">
<span class="gl-display-inline-block gl-mr-3 gl-p-3"></span>
<div class="gl-flex">
<span class="gl-mr-3 gl-inline-block gl-p-3"></span>
{{ branch.name }}
</div>
</gl-filtered-search-suggestion>

View File

@ -124,7 +124,7 @@ export default {
>
<div>
<div>{{ getContactName(contact) }}</div>
<div class="gl-font-sm">{{ contact.email }}</div>
<div class="gl-text-sm">{{ contact.email }}</div>
</div>
</gl-filtered-search-suggestion>
</template>

View File

@ -133,7 +133,7 @@ export default {
<div
v-if="datePickerShown"
v-outside="handleClickOutside"
class="gl-absolute gl-z-1 gl-bg-white gl-border-1 gl-border-gray-200 gl-my-2 gl-p-4 gl-rounded-base gl-shadow-x0-y2-b4-s0 gl-top-full"
class="gl-absolute gl-top-full gl-z-1 gl-my-2 gl-rounded-base gl-border-1 gl-border-gray-200 gl-bg-white gl-p-4 gl-shadow-x0-y2-b4-s0"
>
<gl-daterange-picker
:max-date-range="computedConfig.maxDateRange"

View File

@ -87,7 +87,7 @@ export default {
:key="getEmojiName(emoji)"
:value="getEmojiName(emoji)"
>
<div class="gl-display-flex">
<div class="gl-flex">
<gl-emoji class="gl-mr-3" :data-name="getEmojiName(emoji)" />
{{ getEmojiName(emoji) }}
</div>

View File

@ -171,17 +171,17 @@ export default {
:value="getLabelName(label)"
>
<div
class="gl-display-flex gl-align-items-center"
class="gl-flex gl-items-center"
:class="{ 'gl-pl-6': !selections.includes(label.title) }"
>
<gl-icon
v-if="selections.includes(label.title)"
name="check"
class="gl-mr-3 gl-text-secondary gl-flex-shrink-0"
class="gl-mr-3 gl-shrink-0 gl-text-secondary"
/>
<span
:style="{ backgroundColor: label.color }"
class="gl-display-inline-block gl-mr-3 gl-p-3"
class="gl-mr-3 gl-inline-block gl-p-3"
></span>
<div>{{ getLabelName(label) }}</div>
</div>

View File

@ -151,13 +151,13 @@ export default {
:value="getUsername(user)"
>
<div
class="gl-display-flex gl-align-items-center"
class="gl-flex gl-items-center"
:class="{ 'gl-pl-6': !selections.includes(getUsername(user)) }"
>
<gl-icon
v-if="selections.includes(getUsername(user))"
name="check"
class="gl-mr-3 gl-text-secondary gl-flex-shrink-0"
class="gl-mr-3 gl-shrink-0 gl-text-secondary"
/>
<gl-avatar :size="32" :src="getAvatarUrl(user)" />
<div>

View File

@ -53,7 +53,7 @@ export default {
variant="danger"
@dismiss="$emit('input', [])"
>
<ul class="gl-pl-5 gl-mb-0">
<ul class="gl-mb-0 gl-pl-5">
<li v-for="error in errors" :key="error">
{{ error }}
</li>

View File

@ -1,5 +1,5 @@
<template>
<footer class="gl-mt-5 footer-block">
<footer class="footer-block gl-mt-5">
<slot name="prepend"></slot>
<slot></slot>
<slot name="append"></slot>

View File

@ -96,8 +96,7 @@ export default {
},
formInputClass() {
return [
// eslint-disable-next-line @gitlab/require-i18n-strings
'!gl-font-monospace gl-cursor-default!',
'!gl-font-monospace !gl-cursor-default',
{ 'input-copy-show-disc': !this.computedValueIsVisible },
this.formInputGroupProps.class,
];

View File

@ -35,7 +35,7 @@ export default {
</script>
<template>
<ul class="gl-p-0 gl-list-none">
<ul class="gl-list-none gl-p-0">
<groups-list-item
v-for="group in groups"
:key="group.id"

View File

@ -144,7 +144,7 @@ export default {
<li class="groups-list-item gl-border-b gl-flex gl-py-5">
<div class="gl-grow md:gl-flex">
<div class="gl-flex gl-grow gl-items-start">
<div v-if="showGroupIcon" class="gl-mr-3 gl-flex gl-h-9 gl-flex-shrink-0 gl-items-center">
<div v-if="showGroupIcon" class="gl-mr-3 gl-flex gl-h-9 gl-shrink-0 gl-items-center">
<gl-icon class="gl-text-secondary" :name="groupIconName" />
</div>
<gl-avatar-labeled

View File

@ -42,7 +42,7 @@ export default {
</script>
<template>
<div v-if="isPaginationVisible" class="gl-flex gl-justify-center gl-items-center">
<div v-if="isPaginationVisible" class="gl-flex gl-items-center gl-justify-center">
<gl-keyset-pagination
:start-cursor="startCursor"
:end-cursor="endCursor"

View File

@ -164,7 +164,7 @@ export default {
};
</script>
<template>
<div class="gl-display-inline">
<div class="gl-inline">
<gl-icon
:id="glIconId"
ref="icon"
@ -179,12 +179,12 @@ export default {
>
<template v-if="loading">
<gl-loading-icon size="sm" />
<p class="gl-mt-4 gl-mb-0 gl-font-small">{{ loadingMessage }}</p>
<p class="gl-mb-0 gl-mt-4">{{ loadingMessage }}</p>
</template>
<template v-else>
<ul class="gl-list-none gl-p-0 gl-mb-0">
<ul class="gl-mb-0 gl-list-none gl-p-0">
<li v-for="(issuable, index) in displayedIssuables" :key="issuable.id">
<gl-link :href="issuable.webUrl" class="gl-text-blue-500! gl-font-sm">{{
<gl-link :href="issuable.webUrl" class="gl-text-sm !gl-text-blue-500">{{
issuable.reference
}}</gl-link>
<p
@ -204,7 +204,7 @@ export default {
<gl-link
data-testid="view-all-issues"
:href="`${item.webUrl}#related-issues`"
class="gl-text-blue-500! gl-font-sm"
class="gl-text-sm !gl-text-blue-500"
>{{ viewAllIssuablesText }}</gl-link
>
</div>

View File

@ -46,7 +46,7 @@ export default {
<template>
<div class="gl-flex gl-items-center gl-gap-3">
<hidden-groups-item v-if="isHiddenGroups" class="gl-grow" />
<div v-else class="gl-flex gl-items-center gl-gap-3 gl-grow">
<div v-else class="gl-flex gl-grow gl-items-center gl-gap-3">
<gl-avatar
:alt="fullName"
:entity-name="fullName"

View File

@ -20,7 +20,7 @@ export default {
<template>
<a
:id="lineId"
class="gl-inline-block gl-w-9 gl-pr-2 -gl-ml-9 gl-select-none gl-text-right"
class="-gl-ml-9 gl-inline-block gl-w-9 gl-select-none gl-pr-2 gl-text-right"
:href="lineHref"
>
{{ lineNumber }}

View File

@ -115,7 +115,7 @@ export default {
@scrollToBottom="onScrollToBottom"
><slot name="header-details"></slot>
</logs-top-bar>
<code class="gl-block gl-bg-black gl-text-base gl-pt-3">
<code class="gl-block gl-bg-black gl-pt-3 gl-text-base">
<log-line
v-for="logLine in logLines"
:key="logLine.lineId"

View File

@ -100,10 +100,10 @@ export default {
v-if="hoverMap[`code-${index}`]"
:title="$options.i18n.copyCodeTitle"
:text="block.text"
class="gl-absolute gl-top-3 gl-right-3 gl-z-1 gl-duration-medium"
class="gl-absolute gl-right-3 gl-top-3 gl-z-1 gl-duration-medium"
/>
<code-block-highlighted
class="gl-border gl-rounded-0! gl-p-4 gl-mb-0 gl-overflow-y-auto"
class="gl-border gl-mb-0 gl-overflow-y-auto !gl-rounded-none gl-p-4"
:language="block.lang || $options.fallbackLanguage"
:code="block.text"
/>

View File

@ -88,7 +88,7 @@ export default {
'gl-border-1',
'gl-border-t-solid',
'gl-border-gray-100',
{ 'gl-display-none': this.isCollapsed },
{ 'gl-hidden': this.isCollapsed },
];
},
},
@ -112,12 +112,12 @@ export default {
<template>
<gl-card
class="collapsible-card border gl-p-0 gl-mb-5"
header-class="gl-display-flex gl-align-items-center gl-border-b-0 gl-py-3"
class="collapsible-card border gl-mb-5 gl-p-0"
header-class="gl-flex gl-items-center gl-border-b-0 gl-py-3"
:body-class="bodyClass"
>
<gl-modal
body-class="gl-pb-0! gl-min-h-6!"
body-class="!gl-pb-0 !gl-min-h-6"
modal-id="delete-metric-modal"
size="sm"
:visible="modalVisible"
@ -149,10 +149,10 @@ export default {
/>
<template #header>
<div class="gl-w-full gl-display-flex gl-flex-direction-row gl-justify-content-space-between">
<div class="gl-display-flex gl-flex-direction-row gl-align-items-center gl-w-full">
<div class="gl-flex gl-w-full gl-flex-row gl-justify-between">
<div class="gl-flex gl-w-full gl-flex-row gl-items-center">
<gl-button
class="collapsible-card-btn gl-display-flex gl-text-decoration-none !gl-text-inherit gl-hover-text-blue-800! !gl-shadow-none"
class="collapsible-card-btn gl-flex !gl-text-inherit gl-no-underline !gl-shadow-none hover:!gl-text-blue-800"
:aria-label="filename"
variant="link"
category="tertiary"
@ -168,7 +168,7 @@ export default {
<span v-else data-testid="metric-image-label-span">{{
urlText == null || urlText == '' ? filename : urlText
}}</span>
<div class="gl-ml-auto btn-group">
<div class="btn-group gl-ml-auto">
<gl-button
v-if="canUpdate"
v-gl-tooltip.bottom
@ -191,12 +191,8 @@ export default {
</div>
</div>
</template>
<div
v-show="!isCollapsed"
class="gl-display-flex gl-flex-direction-column"
data-testid="metric-image-body"
>
<img class="gl-max-w-full gl-align-self-center" :src="filePath" />
<div v-show="!isCollapsed" class="gl-flex gl-flex-col" data-testid="metric-image-body">
<img class="gl-max-w-full gl-self-center" :src="filePath" />
</div>
</gl-card>
</template>

View File

@ -222,7 +222,7 @@ export default {
</script>
<template>
<div class="gl-display-flex gl-justify-content-end gl-w-full" data-testid="merge-request-actions">
<div class="gl-flex gl-w-full gl-justify-end" data-testid="merge-request-actions">
<gl-disclosure-dropdown
id="new-actions-header-dropdown"
ref="mrMoreActionsDropdown"
@ -237,10 +237,10 @@ export default {
@hidden="hideDropdown"
>
<template #toggle>
<div class="gl-min-h-7 gl-mb-2 gl-sm-mb-0!">
<div class="gl-mb-2 gl-min-h-7 sm:!gl-mb-0">
<gl-button
class="sm:!gl-hidden gl-new-dropdown-toggle gl-w-full"
button-text-classes="gl-display-flex gl-justify-content-space-between gl-w-full"
class="gl-new-dropdown-toggle gl-w-full sm:!gl-hidden"
button-text-classes="gl-flex gl-justify-between gl-w-full"
category="secondary"
tabindex="0"
:aria-label="$options.i18n.mergeRequestActions"
@ -249,7 +249,7 @@ export default {
<gl-icon class="dropdown-chevron" name="chevron-down" />
</gl-button>
<gl-button
class="gl-hidden sm:!gl-flex gl-new-dropdown-toggle gl-new-dropdown-icon-only gl-new-dropdown-toggle-no-caret"
class="gl-new-dropdown-toggle gl-new-dropdown-icon-only gl-new-dropdown-toggle-no-caret gl-hidden sm:!gl-flex"
category="tertiary"
icon="ellipsis_v"
tabindex="0"
@ -270,7 +270,7 @@ export default {
<gl-disclosure-dropdown-group
bordered
:class="{
'gl-mt-0! gl-pt-0! gl-border-t-0!': !isLoggedIn || isNotificationsTodosButtons,
'!gl-mt-0 !gl-border-t-0 !gl-pt-0': !isLoggedIn || isNotificationsTodosButtons,
}"
>
<gl-disclosure-dropdown-item
@ -351,7 +351,7 @@ export default {
<gl-disclosure-dropdown-group
v-if="!isCurrentUser"
bordered
:class="{ 'gl-mt-0! gl-pt-0! gl-border-t-0!': !canUpdateMergeRequest }"
:class="{ '!gl-mt-0 !gl-border-t-0 !gl-pt-0': !canUpdateMergeRequest }"
>
<gl-disclosure-dropdown-item
class="js-report-abuse-dropdown-item"

View File

@ -56,7 +56,7 @@ export default {
};
</script>
<template>
<gl-tabs class="gl-display-flex gl-w-full" nav-class="gl-border-0!">
<gl-tabs class="gl-flex gl-w-full" nav-class="!gl-border-0">
<gl-tab
v-for="(tab, i) in tabs"
:key="i"

View File

@ -186,8 +186,8 @@ export default {
:toggle-text="$options.i18n.toggleButtonLabel"
variant="confirm"
data-testid="new-resource-dropdown"
class="gl-display-flex! !gl-w-auto"
toggle-class="gl-m-0! !gl-w-auto gl-flex-grow-0!"
class="!gl-flex !gl-w-auto"
toggle-class="!gl-m-0 !gl-w-auto !gl-grow-0"
@click="handleDropdownClick"
@shown="handleDropdownShown"
>

View File

@ -85,7 +85,7 @@ export default {
<div class="note-header">
<div class="note-header-info">
<a :href="getUserData.path">
<span class="gl-hidden sm:gl-inline-block gl-font-bold">{{ getUserData.name }}</span>
<span class="gl-hidden gl-font-bold sm:gl-inline-block">{{ getUserData.name }}</span>
<span class="note-headline-light">@{{ getUserData.username }}</span>
</a>
</div>

View File

@ -14,7 +14,7 @@ export default {
<template>
<timeline-entry-item class="note note-wrapper">
<div
class="gl-float-left gl-flex gl-justify-center gl-items-center gl-rounded-full -gl-mt-1 gl-ml-2 gl-w-6 gl-h-6 gl-bg-gray-50 gl-text-gray-600"
class="gl-float-left -gl-mt-1 gl-ml-2 gl-flex gl-h-6 gl-w-6 gl-items-center gl-justify-center gl-rounded-full gl-bg-gray-50 gl-text-gray-600"
></div>
<div class="timeline-content">
<div class="note-header"></div>

View File

@ -149,10 +149,10 @@ export default {
iconBgClass,
{
'system-note-icon': isAllowedIcon,
'system-note-tiny-dot gl-bg-gray-900!': !isAllowedIcon,
'system-note-tiny-dot !gl-bg-gray-900': !isAllowedIcon,
},
]"
class="gl-float-left gl-flex gl-justify-center gl-items-center gl-rounded-full gl-relative timeline-icon"
class="timeline-icon gl-relative gl-float-left gl-flex gl-items-center gl-justify-center gl-rounded-full"
>
<gl-icon
v-if="isAllowedIcon"
@ -180,7 +180,7 @@ export default {
variant="link"
:icon="descriptionVersionToggleIcon"
data-testid="compare-btn"
class="gl-vertical-align-text-bottom gl-font-sm! gl-ml-3"
class="gl-ml-3 gl-align-text-bottom !gl-text-sm"
@click="toggleDescriptionVersion"
>{{ __('Compare with previous version') }}</gl-button
>
@ -189,7 +189,7 @@ export default {
:icon="showLines ? 'chevron-up' : 'chevron-down'"
variant="link"
data-testid="outdated-lines-change-btn"
class="gl-vertical-align-text-bottom gl-font-sm!"
class="gl-align-text-bottom !gl-text-sm"
@click="toggleDiff"
>
{{ __('Compare changes') }}
@ -232,7 +232,7 @@ export default {
</div>
<div
v-if="lines.length && showLines"
class="diff-content outdated-lines-wrapper gl-border-solid gl-border-1 gl-border-gray-200 gl-mt-4 gl-rounded-small gl-overflow-hidden"
class="diff-content outdated-lines-wrapper gl-mt-4 gl-overflow-hidden gl-rounded-small gl-border-1 gl-border-solid gl-border-gray-200"
>
<table
:class="$options.userColorSchemeClass"
@ -242,19 +242,16 @@ export default {
<tr v-for="line in lines" v-once :key="line.line_code" class="line_holder">
<td
:class="line.type"
class="diff-line-num old_line gl-border-bottom-0! gl-border-top-0! gl-border-0! gl-rounded-0!"
class="diff-line-num old_line !gl-rounded-none !gl-border-0 !gl-border-b-0 !gl-border-t-0"
>
{{ line.old_line }}
</td>
<td
:class="line.type"
class="diff-line-num new_line gl-border-bottom-0! gl-border-top-0!"
>
<td :class="line.type" class="diff-line-num new_line !gl-border-b-0 !gl-border-t-0">
{{ line.new_line }}
</td>
<td
:class="line.type"
class="line_content gl-display-table-cell! gl-border-0! gl-rounded-0!"
class="line_content !gl-table-cell !gl-rounded-none !gl-border-0"
v-html="line.rich_text /* eslint-disable-line vue/no-v-html */"
></td>
</tr>

View File

@ -1,6 +1,6 @@
<template>
<div
class="gl-float-left gl-flex gl-justify-center gl-items-center gl-rounded-full -gl-mt-1 gl-ml-2 gl-w-6 gl-h-6 gl-bg-gray-50 gl-text-gray-600"
class="gl-float-left -gl-mt-1 gl-ml-2 gl-flex gl-h-6 gl-w-6 gl-items-center gl-justify-center gl-rounded-full gl-bg-gray-50 gl-text-gray-600"
>
<slot></slot>
</div>

View File

@ -30,5 +30,5 @@ export const CustomStyles = Template.bind({});
CustomStyles.args = {
...Default.args,
class: 'gl-font-bold',
labelClass: 'gl-font-sm gl-text-gray-500',
labelClass: 'gl-text-sm gl-text-gray-500',
};

View File

@ -13,7 +13,7 @@ export default {
<template>
<div>
<div
class="gl-flex gl-flex-wrap gl-items-center gl-justify-between gl-gap-y-2 gl-gap-x-5 gl-my-5"
class="gl-my-5 gl-flex gl-flex-wrap gl-items-center gl-justify-between gl-gap-x-5 gl-gap-y-2"
>
<h1 class="gl-heading-1 !gl-m-0" data-testid="page-heading">
<slot name="heading"></slot>
@ -28,7 +28,7 @@ export default {
</div>
<div
v-if="$scopedSlots.description"
class="gl-w-full gl-mt-2 gl-text-secondary"
class="gl-mt-2 gl-w-full gl-text-secondary"
data-testid="page-heading-description"
>
<slot name="description"></slot>

View File

@ -1,7 +1,6 @@
export const tdClass =
'table-col gl-display-flex d-md-table-cell gl-align-items-center gl-whitespace-nowrap';
export const tdClass = 'table-col gl-flex d-md-table-cell gl-items-center gl-whitespace-nowrap';
export const bodyTrClass =
'gl-border-1 gl-border-t-solid gl-border-gray-100 gl-hover-cursor-pointer gl-hover-bg-gray-50 gl-hover-border-b-solid';
'gl-border-1 gl-border-t-solid gl-border-gray-100 hover:gl-cursor-pointer hover:gl-bg-gray-50 hover:gl-border-b-solid';
export const defaultPageSize = 20;

View File

@ -279,7 +279,7 @@ export default {
<span v-safe-html="serverErrorMessage || i18n.errorMsg"></span>
</gl-alert>
<div class="list-header gl-display-flex gl-justify-content-space-between">
<div class="list-header gl-flex gl-justify-between">
<gl-tabs content-class="gl-p-0" @input="filterItemsByStatus">
<gl-tab v-for="tab in statusTabs" :key="tab.status" :data-testid="tab.status">
<template #title>
@ -301,13 +301,13 @@ export default {
:initial-filter-value="filteredSearchValue"
initial-sortby="created_desc"
:recent-searches-storage-key="filterSearchKey"
:class="{ 'gl-border-bottom-0': showItems }"
:class="{ 'gl-border-b-0': showItems }"
class="row-content-block"
@onFilter="handleFilterItems"
/>
</div>
<h4 class="gl-block md:gl-hidden my-3">
<h4 class="my-3 gl-block md:gl-hidden">
<slot name="title"></slot>
</h4>

View File

@ -79,7 +79,7 @@ export default {
</script>
<template>
<div class="gl-display-flex gl-align-items-center">
<div class="gl-flex gl-items-center">
<local-storage-sync
v-if="storageKey"
:storage-key="storageKey"

View File

@ -35,7 +35,7 @@ export default {
<template>
<gl-alert variant="danger" :dismissible="false">
{{ $options.i18n.genericErrorMessage }}
<ul class="gl-mb-0!">
<ul class="!gl-mb-0">
<li v-for="error in errorMessages" :key="error">
{{ error }}
</li>

View File

@ -46,12 +46,10 @@ export default {
<template>
<gl-button
category="tertiary"
class="gl-display-flex gl-align-items-center gl-justify-content-start! gl-mb-2 gl-w-full"
class="gl-mb-2 gl-flex gl-w-full gl-items-center !gl-justify-start"
@click="onClick"
>
<div
class="gl-display-flex gl-align-items-center gl-flex-wrap project-namespace-name-container"
>
<div class="project-namespace-name-container gl-flex gl-flex-wrap gl-items-center">
<gl-icon v-if="selected" data-testid="selected-icon" name="mobile-issue-close" />
<project-avatar
:project-id="project.id"

View File

@ -103,7 +103,7 @@ export default {
data-testid="project-search-field"
@input="onInput"
/>
<div class="gl-flex flex-column">
<div class="flex-column gl-flex">
<gl-loading-icon v-if="showLoadingIndicator" size="sm" class="py-2 px-4" />
<gl-infinite-scroll
:max-list-height="maxListHeight"
@ -130,18 +130,18 @@ export default {
<span data-testid="legend-text">{{ legendText }}</span>
</template>
</gl-infinite-scroll>
<div v-if="showNoResultsMessage" class="gl-text-gray-600 gl-ml-3 js-no-results-message">
<div v-if="showNoResultsMessage" class="js-no-results-message gl-ml-3 gl-text-gray-600">
{{ __('Sorry, no projects matched your search') }}
</div>
<div
v-if="showMinimumSearchQueryMessage"
class="gl-text-gray-600 gl-ml-3 js-minimum-search-query-message"
class="js-minimum-search-query-message gl-ml-3 gl-text-gray-600"
>
{{ __('Enter at least three characters to search') }}
</div>
<div
v-if="showSearchErrorMessage"
class="gl-text-red-500 gl-font-bold gl-ml-3 js-search-error-message"
class="js-search-error-message gl-ml-3 gl-font-bold gl-text-red-500"
>
{{ __('Something went wrong, unable to search projects') }}
</div>

View File

@ -58,7 +58,7 @@ export default {
</script>
<template>
<ul class="gl-p-0 gl-list-none">
<ul class="gl-list-none gl-p-0">
<projects-list-item
v-for="project in projects"
:key="project.id"

View File

@ -252,7 +252,7 @@ export default {
<li class="projects-list-item gl-border-b gl-flex gl-py-5">
<div class="gl-grow md:gl-flex">
<div class="gl-flex gl-grow gl-items-start">
<div v-if="showProjectIcon" class="gl-mr-3 gl-flex gl-h-9 gl-flex-shrink-0 gl-items-center">
<div v-if="showProjectIcon" class="gl-mr-3 gl-flex gl-h-9 gl-shrink-0 gl-items-center">
<gl-icon class="gl-text-secondary" name="project" />
</div>
<gl-avatar-labeled

View File

@ -32,10 +32,10 @@ export default {
<template>
<div
class="gl-display-flex gl-align-items-top gl-font-monospace gl-font-sm gl-break-all"
class="gl-align-items-top gl-flex gl-break-all gl-text-sm gl-font-monospace"
:class="[padding, borderClass]"
>
<div v-if="icon" class="gl-w-5 gl-mr-4">
<div v-if="icon" class="gl-mr-4 gl-w-5">
<gl-icon :name="icon" />
</div>
<div>

View File

@ -20,7 +20,7 @@ export default {
<template>
<timeline-entry-item class="system-note note-wrapper">
<div
class="gl-flex gl-justify-center gl-items-center gl-rounded-full -gl-mt-1 gl-ml-2 gl-w-6 gl-h-6 gl-bg-gray-50 gl-text-gray-600 gl-float-left"
class="gl-float-left -gl-mt-1 gl-ml-2 gl-flex gl-h-6 gl-w-6 gl-items-center gl-justify-center gl-rounded-full gl-bg-gray-50 gl-text-gray-600"
>
<gl-icon :name="icon" />
</div>

View File

@ -104,7 +104,7 @@ export default {
</div>
</div>
<div
class="gl-flex gl-flex-shrink-0 gl-flex-col gl-justify-between gl-text-secondary sm:gl-items-end"
class="gl-flex gl-shrink-0 gl-flex-col gl-justify-between gl-text-secondary sm:gl-items-end"
>
<div
v-if="

View File

@ -50,9 +50,9 @@ export default {
</script>
<template>
<div class="gl-inline-flex gl-align-items-center">
<gl-icon v-if="icon" :name="icon" class="gl-text-gray-500 gl-min-w-5 gl-mr-3" />
<tooltip-on-truncate v-if="link" :title="text" class="gl-text-truncate" :class="sizeClass">
<div class="gl-inline-flex gl-items-center">
<gl-icon v-if="icon" :name="icon" class="gl-mr-3 gl-min-w-5 gl-text-gray-500" />
<tooltip-on-truncate v-if="link" :title="text" class="gl-truncate" :class="sizeClass">
<gl-link :href="link" class="gl-font-bold">
{{ text }}
</gl-link>
@ -60,10 +60,10 @@ export default {
<div
v-else
data-testid="metadata-item-text"
class="gl-font-bold gl-inline-flex"
class="gl-inline-flex gl-font-bold"
:class="sizeClass"
>
<tooltip-on-truncate v-if="!textTooltip" :title="text" class="gl-text-truncate">
<tooltip-on-truncate v-if="!textTooltip" :title="text" class="gl-truncate">
{{ text }}
</tooltip-on-truncate>
<span v-else v-gl-tooltip="{ title: textTooltip }" data-testid="text-tooltip-container">

View File

@ -126,12 +126,10 @@ export default {
</script>
<template>
<div
class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-gap-3 row-content-block"
>
<div class="row-content-block gl-flex gl-flex-col gl-gap-3 md:gl-flex-row">
<gl-filtered-search
v-model="internalFilter"
class="gl-flex-grow-1 gl-min-w-0"
class="gl-min-w-0 gl-grow"
:placeholder="__('Filter results')"
:available-tokens="tokens"
@submit="submitSearch"

View File

@ -61,42 +61,37 @@ export default {
</script>
<template>
<div class="gl-display-flex gl-flex-direction-column">
<div
class="gl-display-flex gl-flex-wrap gl-sm-flex-nowrap gl-justify-content-space-between gl-py-3"
>
<div class="gl-flex-direction-column gl-flex-grow-1 gl-min-w-0">
<div class="gl-display-flex">
<div class="gl-flex gl-flex-col">
<div class="gl-flex gl-flex-wrap gl-justify-between gl-py-3 sm:gl-flex-nowrap">
<div class="gl-min-w-0 gl-grow gl-flex-col">
<div class="gl-flex">
<gl-avatar
v-if="avatar"
:src="avatar"
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
class="gl-align-self-center gl-mr-4"
class="gl-mr-4 gl-self-center"
/>
<div class="gl-display-flex gl-flex-direction-column gl-min-w-0">
<h2 class="gl-font-size-h1 gl-mt-3 gl-mb-0" data-testid="title">
<div class="gl-flex gl-min-w-0 gl-flex-col">
<h2 class="gl-mb-0 gl-mt-3 gl-text-size-h1" data-testid="title">
<slot name="title">{{ title }}</slot>
</h2>
<div
v-if="$scopedSlots['sub-header']"
class="gl-display-flex gl-align-items-center gl-text-gray-500 gl-mt-3"
class="gl-mt-3 gl-flex gl-items-center gl-text-gray-500"
>
<slot name="sub-header"></slot>
</div>
</div>
</div>
<div
v-if="metadataSlots.length > 0"
class="gl-display-flex gl-flex-wrap gl-align-items-center gl-mt-3"
>
<div v-if="metadataSlots.length > 0" class="gl-mt-3 gl-flex gl-flex-wrap gl-items-center">
<template v-if="!metadataLoading">
<div
v-for="(row, metadataIndex) in metadataSlots"
:key="metadataIndex"
class="gl-display-flex gl-align-items-center gl-mr-5"
class="gl-mr-5 gl-flex gl-items-center"
>
<slot :name="row"></slot>
</div>
@ -111,10 +106,7 @@ export default {
</template>
</div>
</div>
<div
v-if="$scopedSlots['right-actions']"
class="gl-display-flex gl-align-items-flex-start gl-gap-3 gl-mt-3"
>
<div v-if="$scopedSlots['right-actions']" class="gl-mt-3 gl-flex gl-items-start gl-gap-3">
<slot name="right-actions"></slot>
</div>
</div>

View File

@ -55,12 +55,12 @@ export default {
<template>
<section class="vue-settings-block">
<div class="gl-flex gl-justify-between gl-items-start">
<div class="gl-flex gl-items-start gl-justify-between">
<div class="gl-grow">
<h2
role="button"
tabindex="-1"
class="gl-heading-2 gl-cursor-pointer !gl-mb-2"
class="gl-heading-2 !gl-mb-2 gl-cursor-pointer"
:aria-expanded="ariaExpanded"
:aria-controls="collapseId"
@click="toggleExpanded"
@ -68,9 +68,9 @@ export default {
<slot v-if="$scopedSlots.title" name="title"></slot>
<template v-else>{{ title }}</template>
</h2>
<p class="gl-text-subtle gl-m-0"><slot name="description"></slot></p>
<p class="gl-m-0 gl-text-subtle"><slot name="description"></slot></p>
</div>
<div class="gl-flex-shrink-0 gl-px-2">
<div class="gl-shrink-0 gl-px-2">
<gl-button
class="gl-min-w-12 gl-shrink-0"
:aria-expanded="ariaExpanded"

View File

@ -25,7 +25,7 @@ export default {
</h2>
<p
v-if="$scopedSlots.description || description"
class="gl-text-subtle gl-mb-3"
class="gl-mb-3 gl-text-subtle"
data-testid="settings-section-description"
>
<slot v-if="$scopedSlots.description" name="description"></slot>

View File

@ -46,7 +46,7 @@ export default {
</script>
<template>
<div class="board-labels-toggle-wrapper gl-display-flex gl-align-items-center gl-md-ml-3 gl-h-7">
<div class="board-labels-toggle-wrapper gl-flex gl-h-7 gl-items-center md:gl-ml-3">
<local-storage-sync :value="isShowingLabels" :storage-key="storageKey" @input="setShowLabels" />
<gl-toggle
:value="isShowingLabels"
@ -57,7 +57,7 @@ export default {
label-position="left"
aria-describedby="board-labels-toggle-text"
data-testid="show-labels-toggle"
class="gl-flex-direction-row"
class="gl-flex-row"
@change="setShowLabels"
/>
</div>

View File

@ -14,7 +14,7 @@ const createStory = ({ ...options }) => {
props: Object.keys(argTypes),
template: `
<div class="gl-bg-blue-50" :style="{ width }">
<tooltip-on-truncate :title="title" :placement="placement" class="gl-block gl-text-truncate">
<tooltip-on-truncate :title="title" :placement="placement" class="gl-block gl-truncate">
{{title}}
</tooltip-on-truncate>
</div>
@ -72,8 +72,8 @@ LiveUpdates.argTypes = {
export const TruncateTarget = createStory({
template: `
<div class="gl-bg-black" :style="{ width }">
<tooltip-on-truncate class="gl-display-flex" :truncate-target="truncateTarget" :title="title">
<div class="gl-m-5 gl-bg-blue-50 gl-text-truncate">
<tooltip-on-truncate class="gl-flex" :truncate-target="truncateTarget" :title="title">
<div class="gl-m-5 gl-bg-blue-50 gl-truncate">
{{ title }}
</div>
</tooltip-on-truncate>

View File

@ -44,7 +44,7 @@ export default {
</div>
</div>
<div
class="gl-flex gl-flex-shrink-0 gl-flex-col gl-justify-between gl-text-gray-500 sm:gl-items-end"
class="gl-flex gl-shrink-0 gl-flex-col gl-justify-between gl-text-gray-500 sm:gl-items-end"
>
<div
v-if="

Some files were not shown because too many files have changed in this diff Show More