Merge branch...

Merge branch '11307-use-empty-state-region-component-for-design-management-empty-state' into 'master'

Use GlEmptyState component for design management empty state

Closes #11307

See merge request gitlab-org/gitlab-ee!15374

ee/app/assets/javascripts/design_management/components/empty_state.vue

-<script>
-import UploadButton from './upload/button.vue';
-
-export default {
-  components: {
-    UploadButton,
-  },
-  props: {
-    canUploadDesign: {
-      type: Boolean,
-      required: true,
-    },
-    isSaving: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  methods: {
-    onFileUploadChange(files) {
-      this.$emit('upload', files);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="empty-state row">
-    <div class="col-12">
-      <div class="text-content">
-        <h4 class="center">
-          {{ s__('DesignManagement|The one place for your designs') }}
-        </h4>
-        <p>
-          {{
-            s__(`DesignManagement|Upload and view the latest designs for this issue.
-            Consistent and easy to find, so everyone is up to date.`)
-          }}
-        </p>
-        <div v-if="canUploadDesign" class="center">
-          <upload-button :is-saving="isSaving" @upload="onFileUploadChange" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

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

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlEmptyState } from '@gitlab/ui';
 import _ from 'underscore';
 import createFlash from '~/flash';
 import { s__, sprintf } from '~/locale';
 import DesignList from '../components/list/index.vue';
 import UploadForm from '../components/upload/form.vue';
-import EmptyState from '../components/empty_state.vue';
+import UploadButton from '../components/upload/button.vue';
 import uploadDesignMutation from '../graphql/mutations/uploadDesign.mutation.graphql';
 import permissionsQuery from '../graphql/queries/permissions.query.graphql';
 import allDesignsMixin from '../mixins/all_designs';
@@ -18,7 +18,8 @@ export default {
     GlLoadingIcon,
     DesignList,
     UploadForm,
-    EmptyState,
+    UploadButton,
+    GlEmptyState,
   },
   mixins: [allDesignsMixin],
   apollo: {
@@ -233,12 +234,20 @@ export default {
       </div>
       <design-list v-else-if="hasVersion" :designs="versionDesigns" />
       <design-list v-else-if="hasDesigns" :designs="designs" />
-      <empty-state
+      <gl-empty-state
         v-else
-        :can-upload-design="canCreateDesign"
-        :is-saving="isSaving"
-        @upload="onUploadDesign"
-      />
+        :title="s__('DesignManagement|The one place for your designs')"
+        :description="
+          s__(`DesignManagement|Upload and view the latest designs for this issue.
+            Consistent and easy to find, so everyone is up to date.`)
+        "
+      >
+        <template #actions>
+          <div v-if="canCreateDesign" class="center">
+            <upload-button :is-saving="isSaving" @upload="onUploadDesign" />
+          </div>
+        </template>
+      </gl-empty-state>
     </div>
     <router-view />
   </div>

ee/changelogs/unreleased/11307-use-empty-state-region-component-for-design-management-empty-sta.yml

+---
+title: Use GlEmptyState component for design management empty state
+merge_request: 15374
+author:
+type: changed

ee/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap

@@ -26,8 +26,9 @@ exports[`Design management index page designs renders empty text 1`] = `
   <div
     class="mt-4"
   >
-    <emptystate-stub
-      canuploaddesign="true"
+    <glemptystate-stub
+      description="Upload and view the latest designs for this issue. Consistent and easy to find, so everyone is up to date."
+      title="The one place for your designs"
     />
   </div>