Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42

8 files changed, 208 insertions, 182 deletions

diff --git a/app/assets/javascripts/design_management/components/delete_button.vue b/app/assets/javascripts/design_management/components/delete_button.vue
index ae2ce7c3e5e..dec1038d2e3 100644
--- a/app/assets/javascripts/design_management/components/delete_button.vue
+++ b/app/assets/javascripts/design_management/components/delete_button.vue
@@ -26,7 +26,7 @@ export default {
     buttonVariant: {
       type: String,
       required: false,
-      default: 'info',
+      default: 'default',
     },
     buttonCategory: {
       type: String,
diff --git a/app/assets/javascripts/design_management/components/design_presentation.vue b/app/assets/javascripts/design_management/components/design_presentation.vue
index 5116bacefa5..6bdd8568625 100644
--- a/app/assets/javascripts/design_management/components/design_presentation.vue
+++ b/app/assets/javascripts/design_management/components/design_presentation.vue
@@ -1,4 +1,5 @@
 <script>
+import { GlLoadingIcon } from '@gitlab/ui';
 import { throttle } from 'lodash';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 import DesignOverlay from './design_overlay.vue';
@@ -10,6 +11,7 @@ export default {
   components: {
     DesignImage,
     DesignOverlay,
+    GlLoadingIcon,
   },
   props: {
     image: {
@@ -40,6 +42,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
@@ -299,7 +305,12 @@ export default {
     @touchend="onPresentationMouseup"
     @touchcancel="onPresentationMouseup"
   >
-    <div class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative">
+    <gl-loading-icon
+      v-if="isLoading"
+      size="xl"
+      class="gl-display-flex gl-h-full gl-align-items-center"
+    />
+    <div v-else class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative">
       <design-image
         v-if="image"
         :image="image"
diff --git a/app/assets/javascripts/design_management/components/design_sidebar.vue b/app/assets/javascripts/design_management/components/design_sidebar.vue
index 81d0b6d0df4..8a6dd17a25b 100644
--- a/app/assets/javascripts/design_management/components/design_sidebar.vue
+++ b/app/assets/javascripts/design_management/components/design_sidebar.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlCollapse, GlButton, GlPopover } from '@gitlab/ui';
+import { GlCollapse, GlButton, GlPopover, GlSkeletonLoader } from '@gitlab/ui';
 import { getCookie, setCookie, parseBoolean, isLoggedIn } from '~/lib/utils/common_utils';
 
 import { s__ } from '~/locale';
@@ -20,6 +20,7 @@ export default {
     GlCollapse,
     GlButton,
     GlPopover,
+    GlSkeletonLoader,
     DesignTodoButton,
   },
   mixins: [glFeatureFlagsMixin()],
@@ -50,6 +51,10 @@ export default {
       type: String,
       required: true,
     },
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
@@ -65,11 +70,11 @@ export default {
     issue() {
       return {
         ...this.design.issue,
-        webPath: this.design.issue.webPath.substr(1),
+        webPath: this.design.issue?.webPath.substr(1),
       };
     },
     discussionParticipants() {
-      return extractParticipants(this.issue.participants.nodes);
+      return extractParticipants(this.issue.participants?.nodes || []);
     },
     resolvedDiscussions() {
       return this.discussions.filter((discussion) => discussion.resolved);
@@ -142,91 +147,94 @@ export default {
       :show-participant-label="false"
       class="gl-mb-4"
     />
-    <h2
-      v-if="isLoggedIn && unresolvedDiscussions.length === 0"
-      class="new-discussion-disclaimer gl-font-base gl-m-0 gl-mb-4"
-      data-testid="new-discussion-disclaimer"
-    >
-      {{ s__("DesignManagement|Click the image where you'd like to start a new discussion") }}
-    </h2>
-    <design-note-signed-out
-      v-if="!isLoggedIn"
-      class="gl-mb-4"
-      :register-path="registerPath"
-      :sign-in-path="signInPath"
-      :is-add-discussion="true"
-    />
-    <design-discussion
-      v-for="discussion in unresolvedDiscussions"
-      :key="discussion.id"
-      :discussion="discussion"
-      :design-id="$route.params.id"
-      :noteable-id="design.id"
-      :markdown-preview-path="markdownPreviewPath"
-      :register-path="registerPath"
-      :sign-in-path="signInPath"
-      :resolved-discussions-expanded="resolvedDiscussionsExpanded"
-      :discussion-with-open-form="discussionWithOpenForm"
-      data-testid="unresolved-discussion"
-      @create-note-error="$emit('onDesignDiscussionError', $event)"
-      @update-note-error="$emit('updateNoteError', $event)"
-      @resolve-discussion-error="$emit('resolveDiscussionError', $event)"
-      @click.native.stop="updateActiveDiscussion(discussion.notes[0].id)"
-      @open-form="updateDiscussionWithOpenForm"
-    />
-    <template v-if="resolvedDiscussions.length > 0">
-      <gl-button
-        id="resolved-comments"
-        ref="resolvedComments"
-        data-testid="resolved-comments"
-        :icon="resolvedCommentsToggleIcon"
-        variant="link"
-        class="link-inherit-color gl-text-body gl-text-decoration-none gl-font-weight-bold gl-mb-4"
-        @click="$emit('toggleResolvedComments')"
-        >{{ $options.resolveCommentsToggleText }} ({{ resolvedDiscussions.length }})
-      </gl-button>
-      <gl-popover
-        v-if="!isResolvedCommentsPopoverHidden"
-        :show="!isResolvedCommentsPopoverHidden"
-        target="resolved-comments"
-        container="popovercontainer"
-        placement="top"
-        :title="s__('DesignManagement|Resolved Comments')"
+    <gl-skeleton-loader v-if="isLoading" />
+    <template v-else>
+      <h2
+        v-if="isLoggedIn && unresolvedDiscussions.length === 0"
+        class="new-discussion-disclaimer gl-font-base gl-m-0 gl-mb-4"
+        data-testid="new-discussion-disclaimer"
       >
-        <p>
-          {{
-            s__(
-              'DesignManagement|Comments you resolve can be viewed and unresolved by going to the "Resolved Comments" section below',
-            )
-          }}
-        </p>
-        <a
-          href="https://docs.gitlab.com/ee/user/project/issues/design_management.html#resolve-design-threads"
-          rel="noopener noreferrer"
-          target="_blank"
-          >{{ s__('DesignManagement|Learn more about resolving comments') }}</a
+        {{ s__("DesignManagement|Click the image where you'd like to start a new discussion") }}
+      </h2>
+      <design-note-signed-out
+        v-if="!isLoggedIn"
+        class="gl-mb-4"
+        :register-path="registerPath"
+        :sign-in-path="signInPath"
+        :is-add-discussion="true"
+      />
+      <design-discussion
+        v-for="discussion in unresolvedDiscussions"
+        :key="discussion.id"
+        :discussion="discussion"
+        :design-id="$route.params.id"
+        :noteable-id="design.id"
+        :markdown-preview-path="markdownPreviewPath"
+        :register-path="registerPath"
+        :sign-in-path="signInPath"
+        :resolved-discussions-expanded="resolvedDiscussionsExpanded"
+        :discussion-with-open-form="discussionWithOpenForm"
+        data-testid="unresolved-discussion"
+        @create-note-error="$emit('onDesignDiscussionError', $event)"
+        @update-note-error="$emit('updateNoteError', $event)"
+        @resolve-discussion-error="$emit('resolveDiscussionError', $event)"
+        @click.native.stop="updateActiveDiscussion(discussion.notes[0].id)"
+        @open-form="updateDiscussionWithOpenForm"
+      />
+      <template v-if="resolvedDiscussions.length > 0">
+        <gl-button
+          id="resolved-comments"
+          ref="resolvedComments"
+          data-testid="resolved-comments"
+          :icon="resolvedCommentsToggleIcon"
+          variant="link"
+          class="link-inherit-color gl-text-body gl-text-decoration-none gl-font-weight-bold gl-mb-4"
+          @click="$emit('toggleResolvedComments')"
+          >{{ $options.resolveCommentsToggleText }} ({{ resolvedDiscussions.length }})
+        </gl-button>
+        <gl-popover
+          v-if="!isResolvedCommentsPopoverHidden"
+          :show="!isResolvedCommentsPopoverHidden"
+          target="resolved-comments"
+          container="popovercontainer"
+          placement="top"
+          :title="s__('DesignManagement|Resolved Comments')"
         >
-      </gl-popover>
-      <gl-collapse :visible="resolvedDiscussionsExpanded" class="gl-mt-3">
-        <design-discussion
-          v-for="discussion in resolvedDiscussions"
-          :key="discussion.id"
-          :discussion="discussion"
-          :design-id="$route.params.id"
-          :noteable-id="design.id"
-          :markdown-preview-path="markdownPreviewPath"
-          :register-path="registerPath"
-          :sign-in-path="signInPath"
-          :resolved-discussions-expanded="resolvedDiscussionsExpanded"
-          :discussion-with-open-form="discussionWithOpenForm"
-          data-testid="resolved-discussion"
-          @error="$emit('onDesignDiscussionError', $event)"
-          @updateNoteError="$emit('updateNoteError', $event)"
-          @open-form="updateDiscussionWithOpenForm"
-          @click.native.stop="updateActiveDiscussion(discussion.notes[0].id)"
-        />
-      </gl-collapse>
+          <p>
+            {{
+              s__(
+                'DesignManagement|Comments you resolve can be viewed and unresolved by going to the "Resolved Comments" section below',
+              )
+            }}
+          </p>
+          <a
+            href="https://docs.gitlab.com/ee/user/project/issues/design_management.html#resolve-design-threads"
+            rel="noopener noreferrer"
+            target="_blank"
+            >{{ s__('DesignManagement|Learn more about resolving comments') }}</a
+          >
+        </gl-popover>
+        <gl-collapse :visible="resolvedDiscussionsExpanded" class="gl-mt-3">
+          <design-discussion
+            v-for="discussion in resolvedDiscussions"
+            :key="discussion.id"
+            :discussion="discussion"
+            :design-id="$route.params.id"
+            :noteable-id="design.id"
+            :markdown-preview-path="markdownPreviewPath"
+            :register-path="registerPath"
+            :sign-in-path="signInPath"
+            :resolved-discussions-expanded="resolvedDiscussionsExpanded"
+            :discussion-with-open-form="discussionWithOpenForm"
+            data-testid="resolved-discussion"
+            @error="$emit('onDesignDiscussionError', $event)"
+            @updateNoteError="$emit('updateNoteError', $event)"
+            @open-form="updateDiscussionWithOpenForm"
+            @click.native.stop="updateActiveDiscussion(discussion.notes[0].id)"
+          />
+        </gl-collapse>
+      </template>
+      <slot name="reply-form"></slot>
     </template>
-    <slot name="reply-form"></slot>
   </div>
 </template>
diff --git a/app/assets/javascripts/design_management/components/list/item.vue b/app/assets/javascripts/design_management/components/list/item.vue
index b6163491abc..3092b8554ac 100644
--- a/app/assets/javascripts/design_management/components/list/item.vue
+++ b/app/assets/javascripts/design_management/components/list/item.vue
@@ -145,7 +145,7 @@ export default {
         </span>
       </div>
       <gl-intersection-observer @appear="onAppear">
-        <gl-loading-icon v-if="showLoadingSpinner" size="md" />
+        <gl-loading-icon v-if="showLoadingSpinner" size="lg" />
         <gl-icon
           v-else-if="showImageErrorIcon"
           name="media-broken"
diff --git a/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue b/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue
index 3ebcde817f9..0bbbc795fff 100644
--- a/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue
+++ b/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue
@@ -87,7 +87,7 @@ export default {
         :disabled="!previousDesign"
         :title="$options.i18n.previousButton"
         :aria-label="$options.i18n.previousButton"
-        icon="angle-left"
+        icon="chevron-lg-left"
         class="js-previous-design"
         @click="navigateToDesign(previousDesign)"
       />
@@ -96,7 +96,7 @@ export default {
         :disabled="!nextDesign"
         :title="$options.i18n.nextButton"
         :aria-label="$options.i18n.nextButton"
-        icon="angle-right"
+        icon="chevron-lg-right"
         class="js-next-design"
         @click="navigateToDesign(nextDesign)"
       />
diff --git a/app/assets/javascripts/design_management/components/toolbar/index.vue b/app/assets/javascripts/design_management/components/toolbar/index.vue
index b84fe45b77e..6d571365306 100644
--- a/app/assets/javascripts/design_management/components/toolbar/index.vue
+++ b/app/assets/javascripts/design_management/components/toolbar/index.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlIcon, GlTooltipDirective, GlSkeletonLoader } from '@gitlab/ui';
 import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql';
 import { __, s__, sprintf } from '~/locale';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
@@ -14,6 +14,7 @@ export default {
   components: {
     GlButton,
     GlIcon,
+    GlSkeletonLoader,
     DesignNavigation,
     DeleteButton,
   },
@@ -61,6 +62,10 @@ export default {
       type: String,
       required: true,
     },
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
@@ -113,7 +118,8 @@ export default {
         <gl-icon name="close" />
       </router-link>
       <div class="gl-overflow-hidden gl-display-flex gl-align-items-center">
-        <h2 class="gl-m-0 str-truncated-100 gl-font-base">{{ filename }}</h2>
+        <gl-skeleton-loader v-if="isLoading" :lines="1" />
+        <h2 v-else class="gl-m-0 str-truncated-100 gl-font-base">{{ filename }}</h2>
         <small v-if="updatedAt" class="gl-text-gray-500">{{ updatedText }}</small>
       </div>
     </div>
@@ -130,7 +136,7 @@ export default {
       v-gl-tooltip.bottom
       class="gl-ml-3"
       :is-deleting="isDeleting"
-      button-variant="warning"
+      button-variant="default"
       button-icon="archive"
       button-category="secondary"
       :title="s__('DesignManagement|Archive design')"
diff --git a/app/assets/javascripts/design_management/pages/design/index.vue b/app/assets/javascripts/design_management/pages/design/index.vue
index 2b395921ee1..1825ce7f092 100644
--- a/app/assets/javascripts/design_management/pages/design/index.vue
+++ b/app/assets/javascripts/design_management/pages/design/index.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
+import { GlAlert } from '@gitlab/ui';
 import { isNull } from 'lodash';
 import Mousetrap from 'mousetrap';
 import { ApolloMutation } from 'vue-apollo';
@@ -56,7 +56,6 @@ export default {
     DesignScaler,
     DesignDestroyer,
     Toolbar,
-    GlLoadingIcon,
     GlAlert,
     DesignSidebar,
   },
@@ -118,10 +117,8 @@ export default {
     },
   },
   computed: {
-    isFirstLoading() {
-      // We only want to show spinner on initial design load (when opened from a deep link to design)
-      // If we already have cached a design, loading shouldn't be indicated to user
-      return this.$apollo.queries.design.loading && !this.design.filename;
+    isLoading() {
+      return this.$apollo.queries.design.loading;
     },
     discussions() {
       if (!this.design.discussions) {
@@ -343,88 +340,88 @@ export default {
   <div
     class="design-detail js-design-detail fixed-top gl-w-full gl-bottom-0 gl-display-flex gl-justify-content-center gl-flex-direction-column gl-lg-flex-direction-row"
   >
-    <gl-loading-icon v-if="isFirstLoading" size="xl" class="gl-align-self-center" />
-    <template v-else>
-      <div
-        class="gl-display-flex gl-overflow-hidden gl-flex-grow-1 gl-flex-direction-column gl-relative"
+    <div
+      class="gl-display-flex gl-overflow-hidden gl-flex-grow-1 gl-flex-direction-column gl-relative"
+    >
+      <design-destroyer
+        :filenames="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ [
+          design.filename,
+        ] /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */"
+        :project-path="projectPath"
+        :iid="issueIid"
+        @done="$router.push({ name: $options.DESIGNS_ROUTE_NAME })"
+        @error="onDesignDeleteError"
       >
-        <design-destroyer
-          :filenames="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ [
-            design.filename,
-          ] /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */"
-          :project-path="projectPath"
-          :iid="issueIid"
-          @done="$router.push({ name: $options.DESIGNS_ROUTE_NAME })"
-          @error="onDesignDeleteError"
-        >
-          <template #default="{ mutate, loading }">
-            <toolbar
-              :id="id"
-              :is-deleting="loading"
-              :is-latest-version="isLatestVersion"
-              v-bind="design"
-              @delete="mutate"
-            />
-          </template>
-        </design-destroyer>
+        <template #default="{ mutate, loading }">
+          <toolbar
+            :id="id"
+            :is-deleting="loading"
+            :is-latest-version="isLatestVersion"
+            :is-loading="isLoading"
+            v-bind="design"
+            @delete="mutate"
+          />
+        </template>
+      </design-destroyer>
 
-        <div v-if="errorMessage" class="gl-p-5">
-          <gl-alert variant="danger" @dismiss="errorMessage = null">
-            {{ errorMessage }}
-          </gl-alert>
-        </div>
-        <design-presentation
-          :image="design.image"
-          :image-name="design.filename"
-          :discussions="discussions"
-          :is-annotating="isAnnotating"
-          :scale="scale"
-          :resolved-discussions-expanded="resolvedDiscussionsExpanded"
-          @openCommentForm="openCommentForm"
-          @closeCommentForm="closeCommentForm"
-          @moveNote="onMoveNote"
-          @setMaxScale="setMaxScale"
-        />
-
-        <div
-          class="design-scaler-wrapper gl-absolute gl-mb-6 gl-display-flex gl-justify-content-center gl-align-items-center"
-        >
-          <design-scaler :max-scale="maxScale" @scale="scale = $event" />
-        </div>
+      <div v-if="errorMessage" class="gl-p-5">
+        <gl-alert variant="danger" @dismiss="errorMessage = null">
+          {{ errorMessage }}
+        </gl-alert>
       </div>
-      <design-sidebar
-        :design="design"
+      <design-presentation
+        :image="design.image"
+        :image-name="design.filename"
+        :discussions="discussions"
+        :is-annotating="isAnnotating"
+        :scale="scale"
         :resolved-discussions-expanded="resolvedDiscussionsExpanded"
-        :markdown-preview-path="markdownPreviewPath"
-        @onDesignDiscussionError="onDesignDiscussionError"
-        @onCreateImageDiffNoteError="onCreateImageDiffNoteError"
-        @updateNoteError="onUpdateNoteError"
-        @resolveDiscussionError="onResolveDiscussionError"
-        @toggleResolvedComments="toggleResolvedComments"
-        @todoError="onTodoError"
+        :is-loading="isLoading"
+        @openCommentForm="openCommentForm"
+        @closeCommentForm="closeCommentForm"
+        @moveNote="onMoveNote"
+        @setMaxScale="setMaxScale"
+      />
+
+      <div
+        class="design-scaler-wrapper gl-absolute gl-mb-6 gl-display-flex gl-justify-content-center gl-align-items-center"
       >
-        <template #reply-form>
-          <apollo-mutation
-            v-if="isAnnotating"
-            #default="{ mutate, loading }"
-            :mutation="$options.createImageDiffNoteMutation"
-            :variables="{
-              input: mutationPayload,
-            }"
-            :update="addImageDiffNoteToStore"
-            @done="closeCommentForm"
-            @error="onCreateImageDiffNoteError"
-          >
-            <design-reply-form
-              ref="newDiscussionForm"
-              v-model="comment"
-              :is-saving="loading"
-              :markdown-preview-path="markdownPreviewPath"
-              @submit-form="mutate"
-              @cancel-form="closeCommentForm"
-            /> </apollo-mutation
-        ></template>
-      </design-sidebar>
-    </template>
+        <design-scaler :max-scale="maxScale" @scale="scale = $event" />
+      </div>
+    </div>
+    <design-sidebar
+      :design="design"
+      :resolved-discussions-expanded="resolvedDiscussionsExpanded"
+      :markdown-preview-path="markdownPreviewPath"
+      :is-loading="isLoading"
+      @onDesignDiscussionError="onDesignDiscussionError"
+      @onCreateImageDiffNoteError="onCreateImageDiffNoteError"
+      @updateNoteError="onUpdateNoteError"
+      @resolveDiscussionError="onResolveDiscussionError"
+      @toggleResolvedComments="toggleResolvedComments"
+      @todoError="onTodoError"
+    >
+      <template #reply-form>
+        <apollo-mutation
+          v-if="isAnnotating"
+          #default="{ mutate, loading }"
+          :mutation="$options.createImageDiffNoteMutation"
+          :variables="{
+            input: mutationPayload,
+          }"
+          :update="addImageDiffNoteToStore"
+          @done="closeCommentForm"
+          @error="onCreateImageDiffNoteError"
+        >
+          <design-reply-form
+            ref="newDiscussionForm"
+            v-model="comment"
+            :is-saving="loading"
+            :markdown-preview-path="markdownPreviewPath"
+            @submit-form="mutate"
+            @cancel-form="closeCommentForm"
+          /> </apollo-mutation
+      ></template>
+    </design-sidebar>
   </div>
 </template>
diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue
index 42d5d8fb359..f81d4f6662f 100644
--- a/app/assets/javascripts/design_management/pages/index.vue
+++ b/app/assets/javascripts/design_management/pages/index.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlLoadingIcon, GlButton, GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
 import VueDraggable from 'vuedraggable';
 import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql';
 import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql';
@@ -97,6 +98,9 @@ export default {
     isSaving() {
       return this.filesToBeSaved.length > 0;
     },
+    isMobile() {
+      return GlBreakpointInstance.getBreakpointSize() === 'xs';
+    },
     canCreateDesign() {
       return this.permissions.createDesign;
     },
@@ -354,7 +358,7 @@ export default {
   >
     <header
       v-if="showToolbar"
-      class="row-content-block gl-border-t-0 gl-py-3 gl-display-flex"
+      class="gl-display-flex gl-my-0 gl-text-gray-900"
       data-testid="design-toolbar-wrapper"
     >
       <div
@@ -370,7 +374,7 @@ export default {
         >
           <gl-button
             v-if="isLatestVersion"
-            variant="link"
+            category="tertiary"
             size="small"
             class="gl-mr-3"
             data-testid="select-all-designs-button"
@@ -407,7 +411,7 @@ export default {
       </div>
     </header>
     <div class="gl-mt-6">
-      <gl-loading-icon v-if="isLoading" size="md" />
+      <gl-loading-icon v-if="isLoading" size="lg" />
       <gl-alert v-else-if="error" variant="danger" :dismissible="false">
         {{ __('An error occurred while loading designs. Please try again.') }}
       </gl-alert>
@@ -429,7 +433,7 @@ export default {
       <vue-draggable
         v-else
         :value="designs"
-        :disabled="!isLatestVersion || isReorderingInProgress"
+        :disabled="!isLatestVersion || isReorderingInProgress || isMobile"
         v-bind="$options.dragOptions"
         tag="ol"
         draggable=".js-design-tile"