Use GlAlert component for design list load error

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

 <script>
-import { GlLoadingIcon, GlButton } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton, GlAlert } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { s__, sprintf } from '~/locale';
 import UploadButton from '../components/upload/button.vue';
@@ -28,8 +28,9 @@ const MAXIMUM_FILE_UPLOAD_LIMIT = 10;
 export default {
   components: {
     GlLoadingIcon,
-    UploadButton,
+    GlAlert,
     GlButton,
+    UploadButton,
     Design,
     DesignDestroyer,
     DesignVersionDropdown,
@@ -260,9 +261,9 @@ export default {
     </header>
     <div class="mt-4">
       <gl-loading-icon v-if="isLoading" size="md" />
-      <div v-else-if="error" class="alert alert-danger">
+      <gl-alert v-else-if="error" variant="danger" :dismissible="false">
         {{ __('An error occurred while loading designs. Please try again.') }}
-      </div>
+      </gl-alert>
       <ol v-else class="list-unstyled row">
         <li class="col-md-6 col-lg-4 mb-3">
           <design-dropzone class="design-list-item" @change="onUploadDesign" />

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

@@ -194,13 +194,19 @@ exports[`Design management index page designs renders error 1`] = `
   <div
     class="mt-4"
   >
-    <div
-      class="alert alert-danger"
+    <gl-alert-stub
+      dismisslabel="Dismiss"
+      primarybuttonlink=""
+      primarybuttontext=""
+      secondarybuttonlink=""
+      secondarybuttontext=""
+      title=""
+      variant="danger"
     >
       
       An error occurred while loading designs. Please try again.
     
-    </div>
+    </gl-alert-stub>
   </div>
    
   <router-view-stub