Add latest changes from gitlab-org/gitlab@master

2 files changed, 9 insertions, 12 deletions

diff --git a/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue b/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue
index bf47d7cf7c0..5953a4fbad8 100644
--- a/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue
+++ b/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue
@@ -9,10 +9,10 @@ import {
   GlSprintf,
   GlLink,
   GlIcon,
+  GlAlert,
 } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
-import Callout from '~/vue_shared/components/callout.vue';
 
 export default {
   components: {
@@ -22,10 +22,10 @@ export default {
     GlModal,
     ModalCopyButton,
     GlIcon,
-    Callout,
     GlLoadingIcon,
     GlSprintf,
     GlLink,
+    GlAlert,
   },
 
   directives: {
@@ -153,8 +153,7 @@ export default {
         </template>
       </gl-sprintf>
     </p>
-
-    <callout category="warning">
+    <gl-alert variant="warning" class="gl-mb-5" :dismissible="false">
       <gl-sprintf
         :message="
           s__(
@@ -168,7 +167,7 @@ export default {
           }}</gl-link>
         </template>
       </gl-sprintf>
-    </callout>
+    </gl-alert>
     <gl-form-group :label="$options.translations.apiUrlLabelText" label-for="api-url">
       <gl-form-input-group id="api-url" :value="unleashApiUrl" readonly type="text" name="api-url">
         <template #append>
@@ -212,11 +211,9 @@ export default {
       <gl-icon name="warning" class="gl-mr-2" />
       <span>{{ $options.translations.instanceIdRegenerateError }}</span>
     </div>
-    <callout
-      v-if="canUserRotateToken"
-      category="danger"
-      :message="$options.translations.instanceIdRegenerateText"
-    />
+    <gl-alert v-if="canUserRotateToken" variant="danger" class="gl-mb-5" :dismissible="false">
+      {{ $options.translations.instanceIdRegenerateText }}
+    </gl-alert>
     <p v-if="canUserRotateToken" data-testid="prevent-accident-text">
       <gl-sprintf
         :message="
diff --git a/app/assets/javascripts/feature_flags/components/strategy.vue b/app/assets/javascripts/feature_flags/components/strategy.vue
index 9c41dde62e4..ce03248381c 100644
--- a/app/assets/javascripts/feature_flags/components/strategy.vue
+++ b/app/assets/javascripts/feature_flags/components/strategy.vue
@@ -183,11 +183,11 @@ export default {
           <span v-if="appliesToAllEnvironments" class="text-secondary gl-mt-3 mt-md-0 ml-md-3">
             {{ $options.i18n.allEnvironments }}
           </span>
-          <div v-else class="gl-display-flex gl-align-items-center">
+          <div v-else class="gl-display-flex gl-align-items-center gl-flex-wrap">
             <gl-token
               v-for="environment in filteredEnvironments"
               :key="environment.id"
-              class="gl-mt-3 gl-mr-3 mt-md-0 mr-md-0 ml-md-2 rounded-pill"
+              class="gl-mt-3 gl-mr-3 gl-mb-3 mt-md-0 mr-md-0 ml-md-2 rounded-pill"
               @close="removeScope(environment)"
             >
               {{ environment.environmentScope }}