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