Commit 62582710 authored by Natalia Tepluhina's avatar Natalia Tepluhina

Merge branch '225664-package-registry-swap-custom-css-for-gitlab-ui-utility-classes' into 'master'

Package registry: swap custom css for gitlab-ui utility classes

Closes #239859

See merge request gitlab-org/gitlab!40868
parents c593a495 9e7b5c1a
......@@ -268,22 +268,24 @@ export default {
</template>
</gl-sprintf>
<div slot="modal-footer" class="w-100">
<div class="float-right">
<gl-button @click="cancelDelete()">{{ __('Cancel') }}</gl-button>
<gl-button
ref="modal-delete-button"
data-method="delete"
:to="destroyPath"
variant="danger"
category="primary"
data-qa-selector="delete_modal_button"
@click="track($options.trackingActions.DELETE_PACKAGE)"
>
{{ __('Delete') }}
</gl-button>
<template #modal-footer>
<div class="gl-w-full">
<div class="float-right">
<gl-button @click="cancelDelete">{{ __('Cancel') }}</gl-button>
<gl-button
ref="modal-delete-button"
data-method="delete"
:to="destroyPath"
variant="danger"
category="primary"
data-qa-selector="delete_modal_button"
@click="track($options.trackingActions.DELETE_PACKAGE)"
>
{{ __('Delete') }}
</gl-button>
</div>
</div>
</div>
</template>
</gl-modal>
</div>
</template>
......@@ -48,7 +48,7 @@ export default {
<input
:value="instruction"
type="text"
class="form-control monospace js-instruction-input"
class="form-control gl-font-monospace js-instruction-input"
readonly
@copy="trackCopy"
/>
......
......@@ -26,7 +26,7 @@ export default {
<div
v-if="showVersion"
class="table-section section-50 gl-display-flex justify-content-md-end"
class="table-section section-50 gl-display-flex gl-justify-content-md-end"
data-testid="version-pattern"
>
<span class="gl-text-body">{{ dependency.version_pattern }}</span>
......
......@@ -82,7 +82,7 @@ export default {
</script>
<template>
<div class="d-flex flex-column">
<div class="gl-display-flex gl-flex-direction-column">
<slot v-if="isListEmpty && !isLoading" name="empty-state"></slot>
<div v-else-if="isLoading">
......@@ -106,7 +106,7 @@ export default {
:per-page="perPage"
:total-items="totalItems"
align="center"
class="w-100 mt-2"
class="gl-w-full gl-mt-3"
/>
<gl-modal
......
......@@ -77,7 +77,9 @@ export default {
<template>
<gl-tabs @input="tabChanged">
<template #tabs-end>
<div class="d-flex align-self-center ml-md-auto py-1 py-md-0">
<div
class="gl-display-flex gl-align-self-center gl-py-2 gl-flex-grow-1 gl-justify-content-end"
>
<package-filter class="mr-1" @filter="requestPackagesList" />
<package-sort @sort:changed="requestPackagesList" />
</div>
......
......@@ -91,7 +91,7 @@ export default {
variant="muted"
:title="moreTagsTooltip"
size="sm"
class="gl-display-none d-md-flex gl-ml-2"
class="gl-display-none gl-display-md-flex gl-ml-2"
><gl-sprintf :message="__('+%{tags} more')">
<template #tags>
{{ moreTagsDisplay }}
......@@ -103,7 +103,7 @@ export default {
v-if="moreTagsDisplay && hideLabel"
data-testid="moreBadge"
variant="muted"
class="d-md-none gl-ml-2"
class="gl-display-md-none gl-ml-2"
>{{ tagsDisplay }}</gl-badge
>
</div>
......
......@@ -48,7 +48,7 @@ export default {
<template>
<div>
<div class="d-xs-flex flex-column d-md-none">
<div class="gl-display-sm-flex gl-flex-direction-column gl-display-md-none">
<gl-skeleton-loader
v-for="index in $options.rowsToRender.mobile"
:key="index"
......@@ -65,7 +65,7 @@ export default {
</gl-skeleton-loader>
</div>
<div class="d-none d-md-flex flex-column">
<div class="gl-display-none gl-display-md-flex gl-flex-direction-column">
<gl-skeleton-loader
v-for="index in $options.rowsToRender.desktop"
:key="index"
......
......@@ -36,24 +36,28 @@ export default {
</script>
<template>
<div class="d-flex align-items-center order-1 order-md-0 mb-md-1">
<div class="gl-display-flex gl-align-items-center gl-mb-2">
<template v-if="hasPipeline">
<gl-icon name="git-merge" class="mr-1" />
<span ref="pipeline-ref" class="mr-1">{{ packageEntity.pipeline.ref }}</span>
<gl-icon name="git-merge" class="gl-mr-2" />
<span data-testid="pipeline-ref" class="gl-mr-2">{{ packageEntity.pipeline.ref }}</span>
<gl-icon name="commit" class="mr-1" />
<gl-link ref="pipeline-sha" :href="linkToCommit" class="mr-1">{{ packageShaShort }}</gl-link>
<gl-icon name="commit" class="gl-mr-2" />
<gl-link data-testid="pipeline-sha" :href="linkToCommit" class="gl-mr-2">{{
packageShaShort
}}</gl-link>
<clipboard-button
:text="packageEntity.pipeline.sha"
:title="__('Copy commit SHA')"
css-class="border-0 py-0 px-1"
css-class="gl-border-0 gl-py-0 gl-px-2"
/>
</template>
<template v-else>
<gl-icon name="upload" class="mr-1" />
<span ref="manual-ref">{{ s__('PackageRegistry|Manually Published') }}</span>
<gl-icon name="upload" class="gl-mr-2" />
<span data-testid="manually-published">
{{ s__('PackageRegistry|Manually Published') }}
</span>
</template>
</div>
</template>
......@@ -40,7 +40,6 @@
@import './pages/note_form';
@import './pages/notes';
@import './pages/notifications';
@import './pages/packages';
@import './pages/pages';
@import './pages/pipeline_schedules';
@import './pages/pipelines';
......
.commit-row-description {
border: 0;
border-left: 3px solid $white-dark;
}
.package-list-table[aria-busy='true'] {
td {
padding-bottom: 0;
padding-top: 0;
}
}
......@@ -160,3 +160,20 @@
min-height: $gl-spacing-scale-6;
}
.gl-justify-content-md-end {
@media (min-width: $breakpoint-md) {
width: auto !important;
}
}
.gl-display-md-flex {
@media (min-width: $breakpoint-md) {
display: flex;
}
}
.gl-display-md-none {
@media (min-width: $breakpoint-md) {
display: none;
}
}
......@@ -16,7 +16,7 @@ exports[`Package code instruction single line to match the default snapshot 1`]
class="input-group gl-mb-3"
>
<input
class="form-control monospace js-instruction-input"
class="form-control gl-font-monospace js-instruction-input"
readonly="readonly"
type="text"
/>
......
......@@ -21,7 +21,7 @@ exports[`DependencyRow renders full dependency 1`] = `
</div>
<div
class="table-section section-50 gl-display-flex justify-content-md-end"
class="table-section section-50 gl-display-flex gl-justify-content-md-end"
data-testid="version-pattern"
>
<span
......
......@@ -444,7 +444,7 @@ exports[`packages_list_app renders 1`] = `
</template>
<template>
<div
class="d-flex align-self-center ml-md-auto py-1 py-md-0"
class="gl-display-flex gl-align-self-center gl-py-2 gl-flex-grow-1 gl-justify-content-end"
>
<package-filter-stub
class="mr-1"
......
......@@ -2,35 +2,37 @@
exports[`publish_method renders 1`] = `
<div
class="d-flex align-items-center order-1 order-md-0 mb-md-1"
class="gl-display-flex gl-align-items-center gl-mb-2"
>
<gl-icon-stub
class="mr-1"
class="gl-mr-2"
name="git-merge"
size="16"
/>
<span
class="mr-1"
class="gl-mr-2"
data-testid="pipeline-ref"
>
branch-name
</span>
<gl-icon-stub
class="mr-1"
class="gl-mr-2"
name="commit"
size="16"
/>
<gl-link-stub
class="mr-1"
class="gl-mr-2"
data-testid="pipeline-sha"
href="../commit/sha-baz"
>
sha-baz
</gl-link-stub>
<clipboard-button-stub
cssclass="border-0 py-0 px-1"
cssclass="gl-border-0 gl-py-0 gl-px-2"
text="sha-baz"
title="Copy commit SHA"
tooltipplacement="top"
......
......@@ -7,9 +7,9 @@ describe('publish_method', () => {
const [packageWithoutPipeline, packageWithPipeline] = packageList;
const findPipelineRef = () => wrapper.find({ ref: 'pipeline-ref' });
const findPipelineSha = () => wrapper.find({ ref: 'pipeline-sha' });
const findManualPublish = () => wrapper.find({ ref: 'manual-ref' });
const findPipelineRef = () => wrapper.find('[data-testid="pipeline-ref"]');
const findPipelineSha = () => wrapper.find('[data-testid="pipeline-sha"]');
const findManualPublish = () => wrapper.find('[data-testid="manually-published"]');
const mountComponent = (packageEntity = {}, isGroup = false) => {
wrapper = shallowMount(PublishMethod, {
......
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