Update copyState to reflect new enum values

The values of DesignCollection#copyState changed from `PENDING` and
`COPYING` to just `IN_PROGRESS`. This change updates the frontend to
correctly reflect the in progress state of a Design Collection copy.

It also adjusts the padding of the box as per
https://gitlab.com/gitlab-org/gitlab/-/issues/13426#note_414551182.

app/assets/javascripts/design_management/pages/index.vue

@@ -113,9 +113,7 @@ export default {
       return !this.isSaving && !this.hasDesigns;
     },
     isDesignCollectionCopying() {
-      return (
-        this.designCollection && ['PENDING', 'COPYING'].includes(this.designCollection.copyState)
-      );
+      return this.designCollection && this.designCollection.copyState === 'IN_PROGRESS';
     },
     designDropzoneWrapperClass() {
       return this.isDesignListEmpty
@@ -370,11 +368,11 @@ export default {
       </gl-alert>
       <header
         v-else-if="isDesignCollectionCopying"
-        class="card gl-p-3"
+        class="card"
         data-testid="design-collection-is-copying"
       >
         <div class="card-header design-card-header border-bottom-0">
-          <div class="card-title gl-my-0 gl-h-7">
+          <div class="card-title gl-display-flex gl-align-items-center gl-my-0 gl-h-7">
             {{
               s__(
                 'DesignManagement|Your designs are being copied and are on their way… Please refresh to update.',

changelogs/unreleased/13426-bugfix-copyState-and-padding.yml

+---
+title: Fix displaying a message when design copying is in progress
+merge_request: 43749
+author:
+type: fixed

spec/frontend/design_management/pages/index_spec.js

@@ -265,7 +265,7 @@ describe('Design management index page', () => {
   describe('handling design collection copy state', () => {
     it.each`
       copyState        | isRendered | description
-      ${'COPYING'} | ${true}    | ${'renders'}
+      ${'IN_PROGRESS'} | ${true}    | ${'renders'}
       ${'READY'}       | ${false}   | ${'does not render'}
       ${'ERROR'}       | ${false}   | ${'does not render'}
     `(