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

7 files changed, 35 insertions, 18 deletions

diff --git a/app/assets/javascripts/feature_flags/components/empty_state.vue b/app/assets/javascripts/feature_flags/components/empty_state.vue
index a6de4972bb1..a66215cdae6 100644
--- a/app/assets/javascripts/feature_flags/components/empty_state.vue
+++ b/app/assets/javascripts/feature_flags/components/empty_state.vue
@@ -67,7 +67,7 @@ export default {
       {{ message }}
     </gl-alert>
 
-    <gl-loading-icon v-if="isLoading" :label="loadingLabel" size="md" class="gl-mt-4" />
+    <gl-loading-icon v-if="isLoading" :label="loadingLabel" size="lg" class="gl-mt-4" />
 
     <gl-empty-state
       v-else-if="errorState"
diff --git a/app/assets/javascripts/feature_flags/components/feature_flags.vue b/app/assets/javascripts/feature_flags/components/feature_flags.vue
index 53909dcf42e..645c2456c6e 100644
--- a/app/assets/javascripts/feature_flags/components/feature_flags.vue
+++ b/app/assets/javascripts/feature_flags/components/feature_flags.vue
@@ -161,7 +161,7 @@ export default {
         <gl-button
           v-if="canUserConfigure"
           v-gl-modal="'configure-feature-flags'"
-          variant="info"
+          variant="confirm"
           category="secondary"
           data-qa-selector="configure_feature_flags_button"
           data-testid="ff-configure-button"
@@ -184,7 +184,10 @@ export default {
         class="gl-display-flex gl-align-items-baseline gl-flex-direction-row gl-justify-content-space-between gl-mt-6"
       >
         <div class="gl-display-flex gl-align-items-center">
-          <h2 data-testid="feature-flags-tab-title" class="gl-font-size-h2 gl-my-0">
+          <h2
+            data-testid="feature-flags-tab-title"
+            class="page-title gl-font-size-h-display gl-my-0"
+          >
             {{ s__('FeatureFlags|Feature Flags') }}
           </h2>
           <gl-badge v-if="count" class="gl-ml-4">{{ count }}</gl-badge>
@@ -197,7 +200,7 @@ export default {
             :href="userListPath"
             variant="confirm"
             category="tertiary"
-            class="gl-mb-0 gl-mr-4"
+            class="gl-mb-0 gl-mr-3"
             data-testid="ff-user-list-button"
           >
             {{ s__('FeatureFlags|View user lists') }}
@@ -205,11 +208,11 @@ export default {
           <gl-button
             v-if="canUserConfigure"
             v-gl-modal="'configure-feature-flags'"
-            variant="info"
+            variant="confirm"
             category="secondary"
             data-qa-selector="configure_feature_flags_button"
             data-testid="ff-configure-button"
-            class="gl-mb-0 gl-mr-4"
+            class="gl-mb-0 gl-mr-3"
           >
             {{ s__('FeatureFlags|Configure') }}
           </gl-button>
diff --git a/app/assets/javascripts/feature_flags/components/feature_flags_table.vue b/app/assets/javascripts/feature_flags/components/feature_flags_table.vue
index f8a8bed2467..f0f42d19ea5 100644
--- a/app/assets/javascripts/feature_flags/components/feature_flags_table.vue
+++ b/app/assets/javascripts/feature_flags/components/feature_flags_table.vue
@@ -81,6 +81,20 @@ export default {
       });
     },
   },
+  modal: {
+    actionPrimary: {
+      text: s__('FeatureFlags|Delete feature flag'),
+      attributes: {
+        variant: 'danger',
+      },
+    },
+    actionSecondary: {
+      text: __('Cancel'),
+      attributes: {
+        variant: 'default',
+      },
+    },
+  },
 };
 </script>
 <template>
@@ -193,11 +207,11 @@ export default {
     <gl-modal
       :ref="modalId"
       :title="modalTitle"
-      :ok-title="s__('FeatureFlags|Delete feature flag')"
       :modal-id="modalId"
       title-tag="h4"
-      ok-variant="danger"
-      category="primary"
+      size="sm"
+      :action-primary="$options.modal.actionPrimary"
+      :action-secondary="$options.modal.actionSecondary"
       @ok="onSubmit"
     >
       {{ deleteModalMessage }}
diff --git a/app/assets/javascripts/feature_flags/components/form.vue b/app/assets/javascripts/feature_flags/components/form.vue
index 26da0d56f9a..8b79c661b12 100644
--- a/app/assets/javascripts/feature_flags/components/form.vue
+++ b/app/assets/javascripts/feature_flags/components/form.vue
@@ -188,8 +188,8 @@ export default {
       <div class="row">
         <div class="col-md-12">
           <h4>{{ s__('FeatureFlags|Strategies') }}</h4>
-          <div class="flex align-items-baseline justify-content-between">
-            <p class="mr-3">{{ $options.translations.newHelpText }}</p>
+          <div class="gl-display-flex gl-align-items-baseline gl-justify-content-space-between">
+            <p class="gl-mr-5">{{ $options.translations.newHelpText }}</p>
             <gl-button variant="confirm" category="secondary" @click="addStrategy">
               {{ s__('FeatureFlags|Add strategy') }}
             </gl-button>
@@ -206,21 +206,21 @@ export default {
           @delete="deleteStrategy(strategy)"
         />
       </div>
-      <div v-else class="flex justify-content-center border-top py-4 w-100">
+      <div v-else class="gl-display-flex gl-justify-content-center gl-border-t gl-py-6 w-100">
         <span>{{ $options.translations.noStrategiesText }}</span>
       </div>
     </fieldset>
 
-    <div class="form-actions">
+    <div class="gl-mr-6">
       <gl-button
         ref="submitButton"
         type="button"
         variant="confirm"
-        class="js-ff-submit col-xs-12"
+        class="js-ff-submit gl-mr-2"
         @click="handleSubmit"
         >{{ submitText }}</gl-button
       >
-      <gl-button :href="cancelPath" class="js-ff-cancel col-xs-12 float-right">
+      <gl-button :href="cancelPath" class="js-ff-cancel">
         {{ __('Cancel') }}
       </gl-button>
     </div>
diff --git a/app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue b/app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue
index 5575c6567b5..98982920121 100644
--- a/app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue
+++ b/app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue
@@ -72,7 +72,7 @@ export default {
       <span class="d-md-none mr-1">
         {{ $options.translations.addEnvironmentsLabel }}
       </span>
-      <gl-icon class="d-none d-md-inline-flex" name="plus" />
+      <gl-icon class="d-none d-md-inline-flex gl-mr-1" name="plus" />
     </template>
     <gl-search-box-by-type
       ref="searchBox"
diff --git a/app/assets/javascripts/feature_flags/components/new_feature_flag.vue b/app/assets/javascripts/feature_flags/components/new_feature_flag.vue
index 865c1e677cd..bc05e88e643 100644
--- a/app/assets/javascripts/feature_flags/components/new_feature_flag.vue
+++ b/app/assets/javascripts/feature_flags/components/new_feature_flag.vue
@@ -24,7 +24,7 @@ export default {
 </script>
 <template>
   <div>
-    <h3 class="page-title">{{ s__('FeatureFlags|New feature flag') }}</h3>
+    <h1 class="page-title gl-font-size-h-display">{{ s__('FeatureFlags|New feature flag') }}</h1>
 
     <gl-alert v-if="error.length" variant="warning" class="gl-mb-5" :dismissible="false">
       <p v-for="(message, index) in error" :key="index" class="gl-mb-0">{{ message }}</p>
diff --git a/app/assets/javascripts/feature_flags/components/strategy.vue b/app/assets/javascripts/feature_flags/components/strategy.vue
index 3f515dcdf18..1d7a79f926a 100644
--- a/app/assets/javascripts/feature_flags/components/strategy.vue
+++ b/app/assets/javascripts/feature_flags/components/strategy.vue
@@ -176,7 +176,7 @@ export default {
       }}</label>
       <div class="gl-display-flex gl-flex-direction-column">
         <div
-          class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row align-items-start gl-md-align-items-center"
+          class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-md-align-items-center"
         >
           <new-environments-dropdown
             :id="environmentsDropdownId"