Add latest changes from gitlab-org/gitlab@13-9-stable-eev13.9.0-rc42

24 files changed, 92 insertions, 93 deletions

diff --git a/app/assets/javascripts/feature_flags/components/edit_feature_flag.vue b/app/assets/javascripts/feature_flags/components/edit_feature_flag.vue
index 210212fa900..b1e60066e11 100644
--- a/app/assets/javascripts/feature_flags/components/edit_feature_flag.vue
+++ b/app/assets/javascripts/feature_flags/components/edit_feature_flag.vue
@@ -91,9 +91,9 @@ export default {
         <h3 class="page-title gl-m-0">{{ title }}</h3>
       </div>
 
-      <div v-if="error.length" class="alert alert-danger">
+      <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>
-      </div>
+      </gl-alert>
 
       <feature-flag-form
         :name="name"
diff --git a/app/assets/javascripts/feature_flags/components/environments_dropdown.vue b/app/assets/javascripts/feature_flags/components/environments_dropdown.vue
index 88f1e692f5f..7f316d20f9c 100644
--- a/app/assets/javascripts/feature_flags/components/environments_dropdown.vue
+++ b/app/assets/javascripts/feature_flags/components/environments_dropdown.vue
@@ -1,9 +1,9 @@
 <script>
-import { debounce } from 'lodash';
 import { GlButton, GlSearchBoxByType } from '@gitlab/ui';
+import { debounce } from 'lodash';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
 
 /**
  * Creates a searchable input for environments.
diff --git a/app/assets/javascripts/feature_flags/components/feature_flags.vue b/app/assets/javascripts/feature_flags/components/feature_flags.vue
index ddeefd7b827..348b71dc1c6 100644
--- a/app/assets/javascripts/feature_flags/components/feature_flags.vue
+++ b/app/assets/javascripts/feature_flags/components/feature_flags.vue
@@ -1,20 +1,19 @@
 <script>
-import { mapState, mapActions } from 'vuex';
-import { isEmpty } from 'lodash';
 import { GlAlert, GlButton, GlModalDirective, GlSprintf, GlTabs } from '@gitlab/ui';
+import { isEmpty } from 'lodash';
+import { mapState, mapActions } from 'vuex';
 
-import { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE } from '../constants';
-import FeatureFlagsTab from './feature_flags_tab.vue';
-import FeatureFlagsTable from './feature_flags_table.vue';
-import UserListsTable from './user_lists_table.vue';
-import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
 import {
   buildUrlWithCurrentLocation,
   getParameterByName,
   historyPushState,
 } from '~/lib/utils/common_utils';
-
+import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
+import { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE } from '../constants';
 import ConfigureFeatureFlagsModal from './configure_feature_flags_modal.vue';
+import FeatureFlagsTab from './feature_flags_tab.vue';
+import FeatureFlagsTable from './feature_flags_table.vue';
+import UserListsTable from './user_lists_table.vue';
 
 const SCOPES = { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE };
 
@@ -198,7 +197,7 @@ export default {
       @token="rotateInstanceId()"
     />
     <div :class="topAreaBaseClasses">
-      <div class="gl-display-flex gl-flex-direction-column gl-display-md-none!">
+      <div class="gl-display-flex gl-flex-direction-column gl-md-display-none!">
         <gl-button
           v-if="canUserConfigure"
           v-gl-modal="'configure-feature-flags'"
@@ -285,7 +284,7 @@ export default {
         </feature-flags-tab>
         <template #tabs-end>
           <li
-            class="gl-display-none gl-display-md-flex gl-align-items-center gl-flex-fill-1 gl-justify-content-end"
+            class="gl-display-none gl-md-display-flex gl-align-items-center gl-flex-fill-1 gl-justify-content-end"
           >
             <gl-button
               v-if="canUserConfigure"
diff --git a/app/assets/javascripts/feature_flags/components/feature_flags_tab.vue b/app/assets/javascripts/feature_flags/components/feature_flags_tab.vue
index 24b0b54d1be..d0df00e446b 100644
--- a/app/assets/javascripts/feature_flags/components/feature_flags_tab.vue
+++ b/app/assets/javascripts/feature_flags/components/feature_flags_tab.vue
@@ -68,41 +68,39 @@ export default {
       <span data-testid="feature-flags-tab-title">{{ title }}</span>
       <gl-badge size="sm" class="gl-tab-counter-badge">{{ itemCount }}</gl-badge>
     </template>
-    <template>
-      <gl-alert
-        v-for="(message, index) in alerts"
-        :key="index"
-        data-testid="serverErrors"
-        variant="danger"
-        @dismiss="clearAlert(index)"
-      >
-        {{ message }}
-      </gl-alert>
+    <gl-alert
+      v-for="(message, index) in alerts"
+      :key="index"
+      data-testid="serverErrors"
+      variant="danger"
+      @dismiss="clearAlert(index)"
+    >
+      {{ 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="md" class="gl-mt-4" />
 
-      <gl-empty-state
-        v-else-if="errorState"
-        :title="errorTitle"
-        :description="s__(`FeatureFlags|Try again in a few moments or contact your support team.`)"
-        :svg-path="errorStateSvgPath"
-        data-testid="error-state"
-      />
+    <gl-empty-state
+      v-else-if="errorState"
+      :title="errorTitle"
+      :description="s__(`FeatureFlags|Try again in a few moments or contact your support team.`)"
+      :svg-path="errorStateSvgPath"
+      data-testid="error-state"
+    />
 
-      <gl-empty-state
-        v-else-if="emptyState"
-        :title="emptyTitle"
-        :svg-path="errorStateSvgPath"
-        data-testid="empty-state"
-      >
-        <template #description>
-          {{ emptyDescription }}
-          <gl-link :href="featureFlagsHelpPagePath" target="_blank">
-            {{ s__('FeatureFlags|More information') }}
-          </gl-link>
-        </template>
-      </gl-empty-state>
-      <slot> </slot>
-    </template>
+    <gl-empty-state
+      v-else-if="emptyState"
+      :title="emptyTitle"
+      :svg-path="errorStateSvgPath"
+      data-testid="empty-state"
+    >
+      <template #description>
+        {{ emptyDescription }}
+        <gl-link :href="featureFlagsHelpPagePath" target="_blank">
+          {{ s__('FeatureFlags|More information') }}
+        </gl-link>
+      </template>
+    </gl-empty-state>
+    <slot> </slot>
   </gl-tab>
 </template>
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 f3b199b5aca..04a5e5bc3c5 100644
--- a/app/assets/javascripts/feature_flags/components/feature_flags_table.vue
+++ b/app/assets/javascripts/feature_flags/components/feature_flags_table.vue
@@ -199,7 +199,7 @@ export default {
                 :key="strategy.id"
                 data-testid="strategy-badge"
                 variant="info"
-                class="gl-mr-3 gl-mt-2"
+                class="gl-mr-3 gl-mt-2 gl-white-space-normal gl-text-left gl-px-5"
                 >{{ strategyBadgeText(strategy) }}</gl-badge
               >
             </template>
diff --git a/app/assets/javascripts/feature_flags/components/form.vue b/app/assets/javascripts/feature_flags/components/form.vue
index 253661ece1f..f6a14d9996f 100644
--- a/app/assets/javascripts/feature_flags/components/form.vue
+++ b/app/assets/javascripts/feature_flags/components/form.vue
@@ -1,6 +1,4 @@
 <script>
-import Vue from 'vue';
-import { memoize, isString, cloneDeep, isNumber, uniqueId } from 'lodash';
 import {
   GlButton,
   GlBadge,
@@ -10,13 +8,13 @@ import {
   GlFormCheckbox,
   GlSprintf,
   GlIcon,
+  GlToggle,
 } from '@gitlab/ui';
-import RelatedIssuesRoot from '~/related_issues/components/related_issues_root.vue';
+import { memoize, isString, cloneDeep, isNumber, uniqueId } from 'lodash';
+import Vue from 'vue';
 import { s__ } from '~/locale';
+import RelatedIssuesRoot from '~/related_issues/components/related_issues_root.vue';
 import featureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import ToggleButton from '~/vue_shared/components/toggle_button.vue';
-import EnvironmentsDropdown from './environments_dropdown.vue';
-import Strategy from './strategy.vue';
 import {
   ROLLOUT_STRATEGY_ALL_USERS,
   ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
@@ -27,6 +25,8 @@ import {
   LEGACY_FLAG,
 } from '../constants';
 import { createNewEnvironmentScope } from '../store/helpers';
+import EnvironmentsDropdown from './environments_dropdown.vue';
+import Strategy from './strategy.vue';
 
 export default {
   components: {
@@ -37,7 +37,7 @@ export default {
     GlTooltip,
     GlSprintf,
     GlIcon,
-    ToggleButton,
+    GlToggle,
     EnvironmentsDropdown,
     Strategy,
     RelatedIssuesRoot,
@@ -372,7 +372,7 @@ export default {
                   {{ s__('FeatureFlags|Environment Spec') }}
                 </div>
                 <div
-                  class="table-mobile-content js-feature-flag-status d-flex align-items-center justify-content-start"
+                  class="table-mobile-content gl-display-flex gl-align-items-center gl-justify-content-start"
                 >
                   <p v-if="isAllEnvironment(scope.environmentScope)" class="js-scope-all pl-3">
                     {{ $options.translations.allEnvironmentsText }}
@@ -398,10 +398,10 @@ export default {
                 <div class="table-mobile-header" role="rowheader">
                   {{ s__('FeatureFlags|Status') }}
                 </div>
-                <div class="table-mobile-content js-feature-flag-status">
-                  <toggle-button
+                <div class="table-mobile-content gl-display-flex gl-justify-content-center">
+                  <gl-toggle
                     :value="scope.active"
-                    :disabled-input="!active || !canUpdateScope(scope)"
+                    :disabled="!active || !canUpdateScope(scope)"
                     @change="(status) => (scope.active = status)"
                   />
                 </div>
@@ -498,25 +498,26 @@ export default {
                 <div class="table-mobile-header" role="rowheader">
                   {{ s__('FeatureFlags|Remove') }}
                 </div>
-                <div class="table-mobile-content js-feature-flag-delete">
+                <div class="table-mobile-content">
                   <gl-button
                     v-if="!isAllEnvironment(scope.environmentScope) && canUpdateScope(scope)"
                     v-gl-tooltip
                     :title="s__('FeatureFlags|Remove')"
                     class="js-delete-scope btn-transparent pr-3 pl-3"
                     icon="clear"
+                    data-testid="feature-flag-delete"
                     @click="removeScope(scope)"
                   />
                 </div>
               </div>
             </div>
 
-            <div class="js-add-new-scope gl-responsive-table-row" role="row">
+            <div class="gl-responsive-table-row" role="row" data-testid="add-new-scope">
               <div class="table-section section-30" role="gridcell">
                 <div class="table-mobile-header" role="rowheader">
                   {{ s__('FeatureFlags|Environment Spec') }}
                 </div>
-                <div class="table-mobile-content js-feature-flag-status">
+                <div class="table-mobile-content">
                   <environments-dropdown
                     class="js-new-scope-name col-12"
                     :value="newScope"
@@ -530,9 +531,9 @@ export default {
                 <div class="table-mobile-header" role="rowheader">
                   {{ s__('FeatureFlags|Status') }}
                 </div>
-                <div class="table-mobile-content js-feature-flag-status">
-                  <toggle-button
-                    :disabled-input="!active"
+                <div class="table-mobile-content gl-display-flex gl-justify-content-center">
+                  <gl-toggle
+                    :disabled="!active"
                     :value="false"
                     @change="createNewScope({ active: true })"
                   />
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 f2017c22abf..efe4ff71a9e 100644
--- a/app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue
+++ b/app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue
@@ -1,5 +1,4 @@
 <script>
-import { debounce } from 'lodash';
 import {
   GlDropdown,
   GlDropdownDivider,
@@ -8,9 +7,10 @@ import {
   GlLoadingIcon,
   GlSearchBoxByType,
 } from '@gitlab/ui';
+import { debounce } from 'lodash';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __, sprintf } from '~/locale';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
 
 export default {
   components: {
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 529fefd7e45..19be57f9d27 100644
--- a/app/assets/javascripts/feature_flags/components/new_feature_flag.vue
+++ b/app/assets/javascripts/feature_flags/components/new_feature_flag.vue
@@ -1,15 +1,16 @@
 <script>
+import { GlAlert } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import axios from '~/lib/utils/axios_utils';
-import FeatureFlagForm from './form.vue';
+import featureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { NEW_VERSION_FLAG, ROLLOUT_STRATEGY_ALL_USERS } from '../constants';
 import { createNewEnvironmentScope } from '../store/helpers';
-
-import featureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import FeatureFlagForm from './form.vue';
 
 export default {
   components: {
     FeatureFlagForm,
+    GlAlert,
   },
   mixins: [featureFlagsMixin()],
   inject: {
@@ -61,9 +62,9 @@ export default {
   <div>
     <h3 class="page-title">{{ s__('FeatureFlags|New feature flag') }}</h3>
 
-    <div v-if="error.length" class="alert alert-danger">
-      <p v-for="(message, index) in error" :key="index" class="mb-0">{{ message }}</p>
-    </div>
+    <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>
+    </gl-alert>
 
     <feature-flag-form
       :cancel-path="path"
diff --git a/app/assets/javascripts/feature_flags/components/strategies/gitlab_user_list.vue b/app/assets/javascripts/feature_flags/components/strategies/gitlab_user_list.vue
index 6a57e9a8759..45fc37da747 100644
--- a/app/assets/javascripts/feature_flags/components/strategies/gitlab_user_list.vue
+++ b/app/assets/javascripts/feature_flags/components/strategies/gitlab_user_list.vue
@@ -1,7 +1,7 @@
 <script>
+import { GlDropdown, GlDropdownItem, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import { createNamespacedHelpers } from 'vuex';
-import { GlDropdown, GlDropdownItem, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import ParameterFormGroup from './parameter_form_group.vue';
 
diff --git a/app/assets/javascripts/feature_flags/components/strategies/parameter_form_group.vue b/app/assets/javascripts/feature_flags/components/strategies/parameter_form_group.vue
index 7f2c6d55db8..822ff92b405 100644
--- a/app/assets/javascripts/feature_flags/components/strategies/parameter_form_group.vue
+++ b/app/assets/javascripts/feature_flags/components/strategies/parameter_form_group.vue
@@ -1,6 +1,6 @@
 <script>
-import { uniqueId } from 'lodash';
 import { GlFormGroup } from '@gitlab/ui';
+import { uniqueId } from 'lodash';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/feature_flags/components/strategy.vue b/app/assets/javascripts/feature_flags/components/strategy.vue
index 9593bcf6487..170f120b036 100644
--- a/app/assets/javascripts/feature_flags/components/strategy.vue
+++ b/app/assets/javascripts/feature_flags/components/strategy.vue
@@ -1,7 +1,7 @@
 <script>
-import Vue from 'vue';
-import { isNumber } from 'lodash';
 import { GlAlert, GlButton, GlFormSelect, GlFormGroup, GlIcon, GlLink, GlToken } from '@gitlab/ui';
+import { isNumber } from 'lodash';
+import Vue from 'vue';
 import { s__, __ } from '~/locale';
 import {
   EMPTY_PARAMETERS,
diff --git a/app/assets/javascripts/feature_flags/components/strategy_parameters.vue b/app/assets/javascripts/feature_flags/components/strategy_parameters.vue
index a22f081bb92..ded91621cb8 100644
--- a/app/assets/javascripts/feature_flags/components/strategy_parameters.vue
+++ b/app/assets/javascripts/feature_flags/components/strategy_parameters.vue
@@ -9,9 +9,9 @@ import {
 
 import Default from './strategies/default.vue';
 import FlexibleRollout from './strategies/flexible_rollout.vue';
+import GitlabUserList from './strategies/gitlab_user_list.vue';
 import PercentRollout from './strategies/percent_rollout.vue';
 import UsersWithId from './strategies/users_with_id.vue';
-import GitlabUserList from './strategies/gitlab_user_list.vue';
 
 const STRATEGIES = Object.freeze({
   [ROLLOUT_STRATEGY_ALL_USERS]: Default,
diff --git a/app/assets/javascripts/feature_flags/edit.js b/app/assets/javascripts/feature_flags/edit.js
index 05a9bbce654..010674592f8 100644
--- a/app/assets/javascripts/feature_flags/edit.js
+++ b/app/assets/javascripts/feature_flags/edit.js
@@ -1,8 +1,8 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import createStore from './store/edit';
 import EditFeatureFlag from './components/edit_feature_flag.vue';
+import createStore from './store/edit';
 
 Vue.use(Vuex);
 
diff --git a/app/assets/javascripts/feature_flags/new.js b/app/assets/javascripts/feature_flags/new.js
index 8e18213cc03..f763b12fedb 100644
--- a/app/assets/javascripts/feature_flags/new.js
+++ b/app/assets/javascripts/feature_flags/new.js
@@ -1,8 +1,8 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import createStore from './store/new';
 import NewFeatureFlag from './components/new_feature_flag.vue';
+import createStore from './store/new';
 
 Vue.use(Vuex);
 
diff --git a/app/assets/javascripts/feature_flags/store/edit/actions.js b/app/assets/javascripts/feature_flags/store/edit/actions.js
index c4515e07a00..72b17333832 100644
--- a/app/assets/javascripts/feature_flags/store/edit/actions.js
+++ b/app/assets/javascripts/feature_flags/store/edit/actions.js
@@ -1,10 +1,10 @@
-import * as types from './mutation_types';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { __ } from '~/locale';
 import { NEW_VERSION_FLAG } from '../../constants';
 import { mapFromScopesViewModel, mapStrategiesToRails } from '../helpers';
+import * as types from './mutation_types';
 
 /**
  * Handles the edition of a feature flag.
diff --git a/app/assets/javascripts/feature_flags/store/edit/index.js b/app/assets/javascripts/feature_flags/store/edit/index.js
index 65ea61c3025..16b8a5ae970 100644
--- a/app/assets/javascripts/feature_flags/store/edit/index.js
+++ b/app/assets/javascripts/feature_flags/store/edit/index.js
@@ -1,8 +1,8 @@
 import Vuex from 'vuex';
 import userLists from '../gitlab_user_list';
-import state from './state';
 import * as actions from './actions';
 import mutations from './mutations';
+import state from './state';
 
 export default (data) =>
   new Vuex.Store({
diff --git a/app/assets/javascripts/feature_flags/store/edit/mutations.js b/app/assets/javascripts/feature_flags/store/edit/mutations.js
index e60dbaf4a34..0a610f4b395 100644
--- a/app/assets/javascripts/feature_flags/store/edit/mutations.js
+++ b/app/assets/javascripts/feature_flags/store/edit/mutations.js
@@ -1,6 +1,6 @@
-import * as types from './mutation_types';
-import { mapToScopesViewModel, mapStrategiesToViewModel } from '../helpers';
 import { LEGACY_FLAG } from '../../constants';
+import { mapToScopesViewModel, mapStrategiesToViewModel } from '../helpers';
+import * as types from './mutation_types';
 
 export default {
   [types.REQUEST_FEATURE_FLAG](state) {
diff --git a/app/assets/javascripts/feature_flags/store/gitlab_user_list/index.js b/app/assets/javascripts/feature_flags/store/gitlab_user_list/index.js
index 5f2726770d5..8a38f068609 100644
--- a/app/assets/javascripts/feature_flags/store/gitlab_user_list/index.js
+++ b/app/assets/javascripts/feature_flags/store/gitlab_user_list/index.js
@@ -1,7 +1,7 @@
-import state from './state';
-import mutations from './mutations';
 import * as actions from './actions';
 import * as getters from './getters';
+import mutations from './mutations';
+import state from './state';
 
 export default (data) => ({
   state: state(data),
diff --git a/app/assets/javascripts/feature_flags/store/gitlab_user_list/mutations.js b/app/assets/javascripts/feature_flags/store/gitlab_user_list/mutations.js
index bd7c6f68009..31e67a47541 100644
--- a/app/assets/javascripts/feature_flags/store/gitlab_user_list/mutations.js
+++ b/app/assets/javascripts/feature_flags/store/gitlab_user_list/mutations.js
@@ -1,5 +1,5 @@
-import statuses from './status';
 import * as types from './mutation_types';
+import statuses from './status';
 
 export default {
   [types.FETCH_USER_LISTS](state) {
diff --git a/app/assets/javascripts/feature_flags/store/index/actions.js b/app/assets/javascripts/feature_flags/store/index/actions.js
index 6b6b3d55e16..4372c280f39 100644
--- a/app/assets/javascripts/feature_flags/store/index/actions.js
+++ b/app/assets/javascripts/feature_flags/store/index/actions.js
@@ -1,6 +1,6 @@
 import Api from '~/api';
-import * as types from './mutation_types';
 import axios from '~/lib/utils/axios_utils';
+import * as types from './mutation_types';
 
 export const setFeatureFlagsOptions = ({ commit }, options) =>
   commit(types.SET_FEATURE_FLAGS_OPTIONS, options);
diff --git a/app/assets/javascripts/feature_flags/store/index/index.js b/app/assets/javascripts/feature_flags/store/index/index.js
index 76495a33232..96ccb35fa21 100644
--- a/app/assets/javascripts/feature_flags/store/index/index.js
+++ b/app/assets/javascripts/feature_flags/store/index/index.js
@@ -1,7 +1,7 @@
 import Vuex from 'vuex';
-import state from './state';
 import * as actions from './actions';
 import mutations from './mutations';
+import state from './state';
 
 export default (data) =>
   new Vuex.Store({
diff --git a/app/assets/javascripts/feature_flags/store/index/mutations.js b/app/assets/javascripts/feature_flags/store/index/mutations.js
index 910b2ec42d4..25eb7da1c72 100644
--- a/app/assets/javascripts/feature_flags/store/index/mutations.js
+++ b/app/assets/javascripts/feature_flags/store/index/mutations.js
@@ -1,8 +1,8 @@
 import Vue from 'vue';
-import * as types from './mutation_types';
 import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 import { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE } from '../../constants';
 import { mapToScopesViewModel } from '../helpers';
+import * as types from './mutation_types';
 
 const mapFlag = (flag) => ({ ...flag, scopes: mapToScopesViewModel(flag.scopes || []) });
 
diff --git a/app/assets/javascripts/feature_flags/store/new/actions.js b/app/assets/javascripts/feature_flags/store/new/actions.js
index 6d595603819..d0a1c77a69e 100644
--- a/app/assets/javascripts/feature_flags/store/new/actions.js
+++ b/app/assets/javascripts/feature_flags/store/new/actions.js
@@ -1,8 +1,8 @@
-import * as types from './mutation_types';
 import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { NEW_VERSION_FLAG } from '../../constants';
 import { mapFromScopesViewModel, mapStrategiesToRails } from '../helpers';
+import * as types from './mutation_types';
 
 /**
  * Handles the creation of a new feature flag.
diff --git a/app/assets/javascripts/feature_flags/store/new/index.js b/app/assets/javascripts/feature_flags/store/new/index.js
index 65ea61c3025..16b8a5ae970 100644
--- a/app/assets/javascripts/feature_flags/store/new/index.js
+++ b/app/assets/javascripts/feature_flags/store/new/index.js
@@ -1,8 +1,8 @@
 import Vuex from 'vuex';
 import userLists from '../gitlab_user_list';
-import state from './state';
 import * as actions from './actions';
 import mutations from './mutations';
+import state from './state';
 
 export default (data) =>
   new Vuex.Store({