Add latest changes from gitlab-org/gitlab@master

34 files changed, 153 insertions, 65 deletions

diff --git a/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue b/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue
index 681b501fc98..87502db8b82 100644
--- a/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue
+++ b/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue
@@ -2,11 +2,13 @@
 import Mousetrap from 'mousetrap';
 import { GlSprintf, GlButton, GlAlert } from '@gitlab/ui';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import Tracking from '~/tracking';
 import { __ } from '~/locale';
 import {
   COPY_BUTTON_ACTION,
   DOWNLOAD_BUTTON_ACTION,
   PRINT_BUTTON_ACTION,
+  TRACKING_LABEL_PREFIX,
   RECOVERY_CODE_DOWNLOAD_FILENAME,
   COPY_KEYBOARD_SHORTCUT,
 } from '../constants';
@@ -28,10 +30,12 @@ export default {
   copyButtonAction: COPY_BUTTON_ACTION,
   downloadButtonAction: DOWNLOAD_BUTTON_ACTION,
   printButtonAction: PRINT_BUTTON_ACTION,
+  trackingLabelPrefix: TRACKING_LABEL_PREFIX,
   recoveryCodeDownloadFilename: RECOVERY_CODE_DOWNLOAD_FILENAME,
   i18n,
   mousetrap: null,
   components: { GlSprintf, GlButton, GlAlert, ClipboardButton },
+  mixins: [Tracking.mixin()],
   props: {
     codes: {
       type: Array,
@@ -74,6 +78,8 @@ export default {
       if (action === this.$options.printButtonAction) {
         window.print();
       }
+
+      this.track('click_button', { label: `${this.$options.trackingLabelPrefix}${action}_button` });
     },
     handleKeyboardCopy() {
       if (!window.getSelection) {
@@ -84,6 +90,9 @@ export default {
 
       if (copiedText.includes(this.codesAsString)) {
         this.proceedButtonDisabled = false;
+        this.track('copy_keyboard_shortcut', {
+          label: `${this.$options.trackingLabelPrefix}manual_copy`,
+        });
       }
     },
   },
@@ -155,6 +164,8 @@ export default {
           :title="$options.i18n.proceedButton"
           variant="success"
           data-qa-selector="proceed_button"
+          data-track-event="click_button"
+          :data-track-label="`${$options.trackingLabelPrefix}proceed_button`"
           >{{ $options.i18n.proceedButton }}</gl-button
         >
       </div>
diff --git a/app/assets/javascripts/authentication/two_factor_auth/constants.js b/app/assets/javascripts/authentication/two_factor_auth/constants.js
index d27454406ef..35fc49c88b2 100644
--- a/app/assets/javascripts/authentication/two_factor_auth/constants.js
+++ b/app/assets/javascripts/authentication/two_factor_auth/constants.js
@@ -2,6 +2,8 @@ export const COPY_BUTTON_ACTION = 'copy';
 export const DOWNLOAD_BUTTON_ACTION = 'download';
 export const PRINT_BUTTON_ACTION = 'print';
 
+export const TRACKING_LABEL_PREFIX = '2fa_recovery_codes_';
+
 export const RECOVERY_CODE_DOWNLOAD_FILENAME = 'gitlab-recovery-codes.txt';
 
 export const SUCCESS_QUERY_PARAM = 'two_factor_auth_enabled_successfully';
diff --git a/app/assets/javascripts/ide/components/preview/clientside.vue b/app/assets/javascripts/ide/components/preview/clientside.vue
index 3852f2fdfa4..f65b1201d94 100644
--- a/app/assets/javascripts/ide/components/preview/clientside.vue
+++ b/app/assets/javascripts/ide/components/preview/clientside.vue
@@ -152,7 +152,7 @@ export default {
 </script>
 
 <template>
-  <div class="preview h-100 w-100 d-flex flex-column">
+  <div class="preview h-100 w-100 d-flex flex-column gl-bg-white">
     <template v-if="showPreview">
       <navigator :manager="manager" />
       <div id="ide-preview"></div>
diff --git a/app/assets/javascripts/import_projects/components/import_status.vue b/app/assets/javascripts/import_entities/components/import_status.vue
index 9e3347a657f..9e3347a657f 100644
--- a/app/assets/javascripts/import_projects/components/import_status.vue
+++ b/app/assets/javascripts/import_entities/components/import_status.vue
diff --git a/app/assets/javascripts/import_projects/constants.js b/app/assets/javascripts/import_entities/constants.js
index ad33ca158d2..ad33ca158d2 100644
--- a/app/assets/javascripts/import_projects/constants.js
+++ b/app/assets/javascripts/import_entities/constants.js
diff --git a/app/assets/javascripts/import_projects/components/bitbucket_status_table.vue b/app/assets/javascripts/import_entities/import_projects/components/bitbucket_status_table.vue
index bc8aa522596..bc8aa522596 100644
--- a/app/assets/javascripts/import_projects/components/bitbucket_status_table.vue
+++ b/app/assets/javascripts/import_entities/import_projects/components/bitbucket_status_table.vue
diff --git a/app/assets/javascripts/import_projects/components/import_projects_table.vue b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
index 2b6b8b765a2..2b6b8b765a2 100644
--- a/app/assets/javascripts/import_projects/components/import_projects_table.vue
+++ b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
diff --git a/app/assets/javascripts/import_projects/components/provider_repo_table_row.vue b/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue
index 18971313dfe..983abda57f7 100644
--- a/app/assets/javascripts/import_projects/components/provider_repo_table_row.vue
+++ b/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue
@@ -3,8 +3,8 @@ import { mapState, mapGetters, mapActions } from 'vuex';
 import { GlIcon, GlBadge } from '@gitlab/ui';
 import Select2Select from '~/vue_shared/components/select2_select.vue';
 import { __ } from '~/locale';
-import ImportStatus from './import_status.vue';
-import { STATUSES } from '../constants';
+import ImportStatus from '../../components/import_status.vue';
+import { STATUSES } from '../../constants';
 import { isProjectImportable, isIncompatible, getImportStatus } from '../utils';
 
 export default {
diff --git a/app/assets/javascripts/import_projects/index.js b/app/assets/javascripts/import_entities/import_projects/index.js
index cbb98efa07e..7373b628f2b 100644
--- a/app/assets/javascripts/import_projects/index.js
+++ b/app/assets/javascripts/import_entities/import_projects/index.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
-import Translate from '../vue_shared/translate';
+import Translate from '~/vue_shared/translate';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import ImportProjectsTable from './components/import_projects_table.vue';
-import { parseBoolean } from '../lib/utils/common_utils';
 import createStore from './store';
 
 Vue.use(Translate);
diff --git a/app/assets/javascripts/import_projects/store/actions.js b/app/assets/javascripts/import_entities/import_projects/store/actions.js
index 7b7afd13c55..7b7afd13c55 100644
--- a/app/assets/javascripts/import_projects/store/actions.js
+++ b/app/assets/javascripts/import_entities/import_projects/store/actions.js
diff --git a/app/assets/javascripts/import_projects/store/getters.js b/app/assets/javascripts/import_entities/import_projects/store/getters.js
index b76c52beea2..31e22b50554 100644
--- a/app/assets/javascripts/import_projects/store/getters.js
+++ b/app/assets/javascripts/import_entities/import_projects/store/getters.js
@@ -1,4 +1,4 @@
-import { STATUSES } from '../constants';
+import { STATUSES } from '../../constants';
 import { isProjectImportable, isIncompatible } from '../utils';
 
 export const isLoading = state => state.isLoadingRepos || state.isLoadingNamespaces;
diff --git a/app/assets/javascripts/import_projects/store/index.js b/app/assets/javascripts/import_entities/import_projects/store/index.js
index 7ba12f81eb9..7ba12f81eb9 100644
--- a/app/assets/javascripts/import_projects/store/index.js
+++ b/app/assets/javascripts/import_entities/import_projects/store/index.js
diff --git a/app/assets/javascripts/import_projects/store/mutation_types.js b/app/assets/javascripts/import_entities/import_projects/store/mutation_types.js
index 6adf5e59cff..6adf5e59cff 100644
--- a/app/assets/javascripts/import_projects/store/mutation_types.js
+++ b/app/assets/javascripts/import_entities/import_projects/store/mutation_types.js
diff --git a/app/assets/javascripts/import_projects/store/mutations.js b/app/assets/javascripts/import_entities/import_projects/store/mutations.js
index 6999253d4b2..3d718a6a386 100644
--- a/app/assets/javascripts/import_projects/store/mutations.js
+++ b/app/assets/javascripts/import_entities/import_projects/store/mutations.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import * as types from './mutation_types';
-import { STATUSES } from '../constants';
+import { STATUSES } from '../../constants';
 
 const makeNewImportedProject = importedProject => ({
   importSource: {
diff --git a/app/assets/javascripts/import_projects/store/state.js b/app/assets/javascripts/import_entities/import_projects/store/state.js
index ecd93561d52..ecd93561d52 100644
--- a/app/assets/javascripts/import_projects/store/state.js
+++ b/app/assets/javascripts/import_entities/import_projects/store/state.js
diff --git a/app/assets/javascripts/import_projects/utils.js b/app/assets/javascripts/import_entities/import_projects/utils.js
index 695b12cbcba..0610117e09b 100644
--- a/app/assets/javascripts/import_projects/utils.js
+++ b/app/assets/javascripts/import_entities/import_projects/utils.js
@@ -1,4 +1,4 @@
-import { STATUSES } from './constants';
+import { STATUSES } from '../constants';
 
 export function isIncompatible(project) {
   return project.importSource.incompatible;
diff --git a/app/assets/javascripts/pages/import/bitbucket/status/index.js b/app/assets/javascripts/pages/import/bitbucket/status/index.js
index 2a5432ce09d..f450a2aac00 100644
--- a/app/assets/javascripts/pages/import/bitbucket/status/index.js
+++ b/app/assets/javascripts/pages/import/bitbucket/status/index.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import { initStoreFromElement, initPropsFromElement } from '~/import_projects';
-import BitbucketStatusTable from '~/import_projects/components/bitbucket_status_table.vue';
+import { initStoreFromElement, initPropsFromElement } from '~/import_entities/import_projects';
+import BitbucketStatusTable from '~/import_entities/import_projects/components/bitbucket_status_table.vue';
 
 document.addEventListener('DOMContentLoaded', () => {
   const mountElement = document.getElementById('import-projects-mount-element');
diff --git a/app/assets/javascripts/pages/import/bitbucket_server/status/components/bitbucket_server_status_table.vue b/app/assets/javascripts/pages/import/bitbucket_server/status/components/bitbucket_server_status_table.vue
index 35ae9d8419f..f0c4ecbe3eb 100644
--- a/app/assets/javascripts/pages/import/bitbucket_server/status/components/bitbucket_server_status_table.vue
+++ b/app/assets/javascripts/pages/import/bitbucket_server/status/components/bitbucket_server_status_table.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlButton } from '@gitlab/ui';
-import BitbucketStatusTable from '~/import_projects/components/bitbucket_status_table.vue';
+import BitbucketStatusTable from '~/import_entities/import_projects/components/bitbucket_status_table.vue';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/pages/import/bitbucket_server/status/index.js b/app/assets/javascripts/pages/import/bitbucket_server/status/index.js
index a44fc4e6b29..a6d748ce857 100644
--- a/app/assets/javascripts/pages/import/bitbucket_server/status/index.js
+++ b/app/assets/javascripts/pages/import/bitbucket_server/status/index.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { initStoreFromElement, initPropsFromElement } from '~/import_projects';
+import { initStoreFromElement, initPropsFromElement } from '~/import_entities/import_projects';
 import BitbucketServerStatusTable from './components/bitbucket_server_status_table.vue';
 
 document.addEventListener('DOMContentLoaded', () => {
diff --git a/app/assets/javascripts/pages/import/fogbugz/status/index.js b/app/assets/javascripts/pages/import/fogbugz/status/index.js
index dcd84f0faf9..98ddb8b3aa4 100644
--- a/app/assets/javascripts/pages/import/fogbugz/status/index.js
+++ b/app/assets/javascripts/pages/import/fogbugz/status/index.js
@@ -1,4 +1,4 @@
-import mountImportProjectsTable from '~/import_projects';
+import mountImportProjectsTable from '~/import_entities/import_projects';
 
 document.addEventListener('DOMContentLoaded', () => {
   const mountElement = document.getElementById('import-projects-mount-element');
diff --git a/app/assets/javascripts/pages/import/gitea/status/index.js b/app/assets/javascripts/pages/import/gitea/status/index.js
index dcd84f0faf9..98ddb8b3aa4 100644
--- a/app/assets/javascripts/pages/import/gitea/status/index.js
+++ b/app/assets/javascripts/pages/import/gitea/status/index.js
@@ -1,4 +1,4 @@
-import mountImportProjectsTable from '~/import_projects';
+import mountImportProjectsTable from '~/import_entities/import_projects';
 
 document.addEventListener('DOMContentLoaded', () => {
   const mountElement = document.getElementById('import-projects-mount-element');
diff --git a/app/assets/javascripts/pages/import/github/status/index.js b/app/assets/javascripts/pages/import/github/status/index.js
index dcd84f0faf9..98ddb8b3aa4 100644
--- a/app/assets/javascripts/pages/import/github/status/index.js
+++ b/app/assets/javascripts/pages/import/github/status/index.js
@@ -1,4 +1,4 @@
-import mountImportProjectsTable from '~/import_projects';
+import mountImportProjectsTable from '~/import_entities/import_projects';
 
 document.addEventListener('DOMContentLoaded', () => {
   const mountElement = document.getElementById('import-projects-mount-element');
diff --git a/app/assets/javascripts/pages/import/gitlab/status/index.js b/app/assets/javascripts/pages/import/gitlab/status/index.js
index dcd84f0faf9..98ddb8b3aa4 100644
--- a/app/assets/javascripts/pages/import/gitlab/status/index.js
+++ b/app/assets/javascripts/pages/import/gitlab/status/index.js
@@ -1,4 +1,4 @@
-import mountImportProjectsTable from '~/import_projects';
+import mountImportProjectsTable from '~/import_entities/import_projects';
 
 document.addEventListener('DOMContentLoaded', () => {
   const mountElement = document.getElementById('import-projects-mount-element');
diff --git a/app/assets/javascripts/pages/import/manifest/status/index.js b/app/assets/javascripts/pages/import/manifest/status/index.js
index dcd84f0faf9..98ddb8b3aa4 100644
--- a/app/assets/javascripts/pages/import/manifest/status/index.js
+++ b/app/assets/javascripts/pages/import/manifest/status/index.js
@@ -1,4 +1,4 @@
-import mountImportProjectsTable from '~/import_projects';
+import mountImportProjectsTable from '~/import_entities/import_projects';
 
 document.addEventListener('DOMContentLoaded', () => {
   const mountElement = document.getElementById('import-projects-mount-element');
diff --git a/app/assets/javascripts/terraform/components/states_table.vue b/app/assets/javascripts/terraform/components/states_table.vue
index c77eb84dddb..cf9c6e19094 100644
--- a/app/assets/javascripts/terraform/components/states_table.vue
+++ b/app/assets/javascripts/terraform/components/states_table.vue
@@ -52,12 +52,18 @@ export default {
       return columns;
     },
   },
+  i18n: {
+    locked: s__('Terraform|Locked'),
+    lockedByUser: s__('Terraform|Locked by %{user} %{timeAgo}'),
+    unknownUser: s__('Terraform|Unknown User'),
+    updatedUser: s__('Terraform|%{user} updated %{timeAgo}'),
+  },
   methods: {
     createdByUserName(item) {
       return item.latestVersion?.createdByUser?.name;
     },
     lockedByUserName(item) {
-      return item.lockedByUser?.name || s__('Terraform|Unknown User');
+      return item.lockedByUser?.name || this.$options.i18n.unknownUser;
     },
     updatedTime(item) {
       return item.latestVersion?.updatedAt || item.updatedAt;
@@ -74,18 +80,18 @@ export default {
           {{ item.name }}
         </p>
 
-        <div v-if="item.lockedAt" id="terraformLockedBadgeContainer" class="gl-mx-2">
-          <gl-badge id="terraformLockedBadge">
+        <div v-if="item.lockedAt" :id="`terraformLockedBadgeContainer${item.name}`" class="gl-mx-2">
+          <gl-badge :id="`terraformLockedBadge${item.name}`">
             <gl-icon name="lock" />
-            {{ s__('Terraform|Locked') }}
+            {{ $options.i18n.locked }}
           </gl-badge>
 
           <gl-tooltip
-            container="terraformLockedBadgeContainer"
+            :container="`terraformLockedBadgeContainer${item.name}`"
+            :target="`terraformLockedBadge${item.name}`"
             placement="right"
-            target="terraformLockedBadge"
           >
-            <gl-sprintf :message="s__('Terraform|Locked by %{user} %{timeAgo}')">
+            <gl-sprintf :message="$options.i18n.lockedByUser">
               <template #user>
                 {{ lockedByUserName(item) }}
               </template>
@@ -101,7 +107,7 @@ export default {
 
     <template #cell(updated)="{ item }">
       <p class="gl-m-0" data-testid="terraform-states-table-updated">
-        <gl-sprintf :message="s__('Terraform|%{user} updated %{timeAgo}')">
+        <gl-sprintf :message="$options.i18n.updatedUser">
           <template #user>
             <span v-if="item.latestVersion">
               {{ createdByUserName(item) }}
diff --git a/app/assets/javascripts/terraform/components/states_table_actions.vue b/app/assets/javascripts/terraform/components/states_table_actions.vue
index 64d30f0c678..5375e4e45f7 100644
--- a/app/assets/javascripts/terraform/components/states_table_actions.vue
+++ b/app/assets/javascripts/terraform/components/states_table_actions.vue
@@ -1,11 +1,14 @@
 <script>
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import lockState from '../graphql/mutations/lock_state.mutation.graphql';
+import unlockState from '../graphql/mutations/unlock_state.mutation.graphql';
 
 export default {
   components: {
     GlDropdown,
     GlDropdownItem,
+    GlIcon,
   },
   props: {
     state: {
@@ -13,22 +16,73 @@ export default {
       type: Object,
     },
   },
+  data() {
+    return {
+      loading: false,
+    };
+  },
   i18n: {
     downloadJSON: s__('Terraform|Download JSON'),
+    lock: s__('Terraform|Lock'),
+    unlock: s__('Terraform|Unlock'),
+  },
+  methods: {
+    lock() {
+      this.stateMutation(lockState);
+    },
+    unlock() {
+      this.stateMutation(unlockState);
+    },
+    stateMutation(mutation) {
+      this.loading = true;
+      this.$apollo
+        .mutate({
+          mutation,
+          variables: {
+            stateID: this.state.id,
+          },
+          refetchQueries: () => ['getStates'],
+          awaitRefetchQueries: true,
+          notifyOnNetworkStatusChange: true,
+        })
+        .catch(() => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
   },
 };
 </script>
 
 <template>
-  <div v-if="state.latestVersion">
-    <gl-dropdown icon="ellipsis_v" right :data-testid="`terraform-state-actions-${state.name}`">
+  <div>
+    <gl-dropdown
+      icon="ellipsis_v"
+      right
+      :data-testid="`terraform-state-actions-${state.name}`"
+      :disabled="loading"
+      toggle-class="gl-px-3! gl-shadow-none!"
+    >
+      <template #button-content>
+        <gl-icon class="gl-mr-0" name="ellipsis_v" />
+      </template>
+
       <gl-dropdown-item
+        v-if="state.latestVersion"
         data-testid="terraform-state-download"
         :download="`${state.name}.json`"
         :href="state.latestVersion.downloadPath"
       >
         {{ $options.i18n.downloadJSON }}
       </gl-dropdown-item>
+
+      <gl-dropdown-item v-if="state.lockedAt" data-testid="terraform-state-unlock" @click="unlock">
+        {{ $options.i18n.unlock }}
+      </gl-dropdown-item>
+
+      <gl-dropdown-item v-else data-testid="terraform-state-lock" @click="lock">
+        {{ $options.i18n.lock }}
+      </gl-dropdown-item>
     </gl-dropdown>
   </div>
 </template>
diff --git a/app/assets/javascripts/terraform/components/terraform_list.vue b/app/assets/javascripts/terraform/components/terraform_list.vue
index ad21bc47a76..26a0bfe5fa5 100644
--- a/app/assets/javascripts/terraform/components/terraform_list.vue
+++ b/app/assets/javascripts/terraform/components/terraform_list.vue
@@ -15,13 +15,7 @@ export default {
           ...this.cursor,
         };
       },
-      update: data => {
-        return {
-          count: data?.project?.terraformStates?.count,
-          list: data?.project?.terraformStates?.nodes,
-          pageInfo: data?.project?.terraformStates?.pageInfo,
-        };
-      },
+      update: data => data,
       error() {
         this.states = null;
       },
@@ -67,35 +61,34 @@ export default {
       return this.$apollo.queries.states.loading;
     },
     pageInfo() {
-      return this.states?.pageInfo || {};
+      return this.states?.project?.terraformStates?.pageInfo || {};
     },
     showPagination() {
       return this.pageInfo.hasPreviousPage || this.pageInfo.hasNextPage;
     },
     statesCount() {
-      return this.states?.count;
+      return this.states?.project?.terraformStates?.count;
     },
     statesList() {
-      return this.states?.list;
+      return this.states?.project?.terraformStates?.nodes;
     },
   },
   methods: {
-    updatePagination(item) {
-      if (item === this.pageInfo.endCursor) {
-        this.cursor = {
-          first: MAX_LIST_COUNT,
-          after: item,
-          last: null,
-          before: null,
-        };
-      } else {
-        this.cursor = {
-          first: null,
-          after: null,
-          last: MAX_LIST_COUNT,
-          before: item,
-        };
-      }
+    nextPage(item) {
+      this.cursor = {
+        first: MAX_LIST_COUNT,
+        after: item,
+        last: null,
+        before: null,
+      };
+    },
+    prevPage(item) {
+      this.cursor = {
+        first: null,
+        after: null,
+        last: MAX_LIST_COUNT,
+        before: item,
+      };
     },
   },
 };
@@ -119,11 +112,7 @@ export default {
             <states-table :states="statesList" :terraform-admin="terraformAdmin" />
 
             <div v-if="showPagination" class="gl-display-flex gl-justify-content-center gl-mt-5">
-              <gl-keyset-pagination
-                v-bind="pageInfo"
-                @prev="updatePagination"
-                @next="updatePagination"
-              />
+              <gl-keyset-pagination v-bind="pageInfo" @prev="prevPage" @next="nextPage" />
             </div>
           </div>
 
diff --git a/app/assets/javascripts/terraform/graphql/mutations/lock_state.mutation.graphql b/app/assets/javascripts/terraform/graphql/mutations/lock_state.mutation.graphql
new file mode 100644
index 00000000000..aea0f8b025a
--- /dev/null
+++ b/app/assets/javascripts/terraform/graphql/mutations/lock_state.mutation.graphql
@@ -0,0 +1,5 @@
+mutation lockState($stateID: TerraformStateID!) {
+  terraformStateLock(input: { id: $stateID }) {
+    errors
+  }
+}
diff --git a/app/assets/javascripts/terraform/graphql/mutations/unlock_state.mutation.graphql b/app/assets/javascripts/terraform/graphql/mutations/unlock_state.mutation.graphql
new file mode 100644
index 00000000000..1909fe95cf3
--- /dev/null
+++ b/app/assets/javascripts/terraform/graphql/mutations/unlock_state.mutation.graphql
@@ -0,0 +1,5 @@
+mutation unlockState($stateID: TerraformStateID!) {
+  terraformStateUnlock(input: { id: $stateID }) {
+    errors
+  }
+}
diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss
index 52bc19fddd9..f56665553ba 100644
--- a/app/assets/stylesheets/_page_specific_files.scss
+++ b/app/assets/stylesheets/_page_specific_files.scss
@@ -10,7 +10,6 @@
 @import './pages/events';
 @import './pages/groups';
 @import './pages/help';
-@import './pages/import';
 @import './pages/incident_management_list';
 @import './pages/issuable';
 @import './pages/issues/issue_count_badge';
diff --git a/app/assets/stylesheets/pages/import.scss b/app/assets/stylesheets/page_bundles/import.scss
index 68641aa4d5d..2a154393630 100644
--- a/app/assets/stylesheets/pages/import.scss
+++ b/app/assets/stylesheets/page_bundles/import.scss
@@ -1,3 +1,5 @@
+@import 'mixins_and_variables_and_functions';
+
 .import-jobs-to-col {
   width: 39%;
 }
@@ -39,3 +41,17 @@
 .import-projects-loading-icon {
   margin-top: $gl-padding-32;
 }
+
+.import-entities-target-select {
+  .select2-container {
+    > .select2-choice {
+      border-color: var(--gray-200, $gray-200);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  .gl-form-input {
+    box-shadow: inset 0 0 0 1px var(--gray-200, $gray-200);
+  }
+}
diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml
index e32d9dcba92..33cd90ce5d3 100644
--- a/app/views/groups/edit.html.haml
+++ b/app/views/groups/edit.html.haml
@@ -8,7 +8,7 @@
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only{ role: 'button' }
       = _('Naming, visibility')
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %button.btn.gl-button.js-settings-toggle{ type: 'button' }
       = _('Collapse')
     %p
       = _('Update your group name, description, avatar, and visibility.')
@@ -19,7 +19,7 @@
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only{ role: 'button' }
       = _('Permissions, LFS, 2FA')
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %button.btn.gl-button.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
     %p
       = _('Advanced permissions, Large File Storage and Two-Factor authentication settings.')
@@ -32,7 +32,7 @@
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only{ role: 'button' }
       = s_('GroupSettings|Badges')
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %button.btn.gl-button.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
     %p
       = s_('GroupSettings|Customize your group badges.')
@@ -48,7 +48,7 @@
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only{ role: 'button' }
       = _('Advanced')
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %button.btn.gl-button.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
     %p
       = _('Perform advanced options such as changing path, transferring, exporting, or removing the group.')
diff --git a/app/views/import/_githubish_status.html.haml b/app/views/import/_githubish_status.html.haml
index fca73f118b3..4cf08b1d2be 100644
--- a/app/views/import/_githubish_status.html.haml
+++ b/app/views/import/_githubish_status.html.haml
@@ -1,3 +1,4 @@
+- add_page_specific_style 'page_bundles/import'
 - provider = local_assigns.fetch(:provider)
 - extra_data = local_assigns.fetch(:extra_data, {})
 - filterable = local_assigns.fetch(:filterable, true)
diff --git a/app/views/projects/compare/_form.html.haml b/app/views/projects/compare/_form.html.haml
index a257f2e9433..0c0530110c5 100644
--- a/app/views/projects/compare/_form.html.haml
+++ b/app/views/projects/compare/_form.html.haml
@@ -28,4 +28,4 @@
   - if @merge_request.present?
     = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'gl-ml-3 btn'
   - elsif create_mr_button?
-    = link_to _("Create merge request"), create_mr_path, class: 'gl-ml-3 btn'
+    = link_to _("Create merge request"), create_mr_path, class: 'gl-ml-3 btn gl-button'