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

app/assets/javascripts/packages/details/components/app.vue

@@ -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>

app/assets/javascripts/packages/details/components/code_instruction.vue

@@ -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"
     />

app/assets/javascripts/packages/details/components/dependency_row.vue

@@ -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>

app/assets/javascripts/packages/list/components/packages_list.vue

@@ -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

app/assets/javascripts/packages/list/components/packages_list_app.vue

@@ -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>

app/assets/javascripts/packages/shared/components/package_tags.vue

@@ -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>

app/assets/javascripts/packages/shared/components/packages_list_loader.vue

@@ -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"

app/assets/javascripts/packages/shared/components/publish_method.vue

@@ -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>

app/assets/stylesheets/_page_specific_files.scss

@@ -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';

app/assets/stylesheets/pages/packages.scss

-.commit-row-description {
-  border: 0;
-  border-left: 3px solid $white-dark;
-}
-
-.package-list-table[aria-busy='true'] {
-  td {
-    padding-bottom: 0;
-    padding-top: 0;
-  }
-}

app/assets/stylesheets/utilities.scss

@@ -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;
+  }
+}

spec/frontend/packages/details/components/__snapshots__/code_instruction_spec.js.snap

@@ -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"
   />

spec/frontend/packages/details/components/__snapshots__/dependency_row_spec.js.snap

@@ -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

spec/frontend/packages/list/components/__snapshots__/packages_list_app_spec.js.snap

@@ -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"

spec/frontend/packages/shared/components/__snapshots__/publish_method_spec.js.snap

@@ -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"

spec/frontend/packages/shared/components/publish_method_spec.js

@@ -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, {