Add latest changes from gitlab-org/gitlab@master

34 files changed, 651 insertions, 401 deletions

diff --git a/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_note.vue b/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_note.vue
index 9fea483c036..4423eb9e7b2 100644
--- a/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_note.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_note.vue
@@ -54,6 +54,9 @@ export default {
     authorId() {
       return getIdFromGraphQLId(this.author.id);
     },
+    showEditButton() {
+      return this.note.userPermissions.resolveNote;
+    },
     editedAtClasses() {
       return this.showReplyButton ? 'gl-text-secondary gl-pl-3' : 'gl-text-secondary gl-pl-8';
     },
@@ -106,7 +109,7 @@ export default {
           <div class="gl-display-inline-flex">
             <abuse-report-note-actions
               :show-reply-button="showReplyButton"
-              show-edit-button
+              :show-edit-button="showEditButton"
               @startReplying="$emit('startReplying')"
               @startEditing="startEditing"
             />
diff --git a/app/assets/javascripts/admin/abuse_report/graphql/notes/abuse_report_note_permissions.fragment.graphql b/app/assets/javascripts/admin/abuse_report/graphql/notes/abuse_report_note_permissions.fragment.graphql
index 01436436b93..31ca24e675f 100644
--- a/app/assets/javascripts/admin/abuse_report/graphql/notes/abuse_report_note_permissions.fragment.graphql
+++ b/app/assets/javascripts/admin/abuse_report/graphql/notes/abuse_report_note_permissions.fragment.graphql
@@ -1,3 +1,3 @@
 fragment AbuseReportNotePermissions on NotePermissions {
-  adminNote
+  resolveNote
 }
diff --git a/app/assets/javascripts/deploy_keys/graphql/client.js b/app/assets/javascripts/deploy_keys/graphql/client.js
new file mode 100644
index 00000000000..3c183963683
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/graphql/client.js
@@ -0,0 +1,47 @@
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import typeDefs from './typedefs.graphql';
+import { resolvers } from './resolvers';
+
+export const createApolloProvider = (endpoints) => {
+  const defaultClient = createDefaultClient(resolvers(endpoints), {
+    typeDefs,
+    cacheConfig: {
+      typePolicies: {
+        Query: {
+          fields: {
+            currentScope: {
+              read(data) {
+                return data || 'enabledKeys';
+              },
+            },
+            currentPage: {
+              read(data) {
+                return data || 1;
+              },
+            },
+            pageInfo: {
+              read(data) {
+                return data || {};
+              },
+            },
+            deployKeyToRemove: {
+              read(data) {
+                return data || null;
+              },
+            },
+          },
+        },
+        LocalDeployKey: {
+          deployKeysProjects: {
+            merge(_, incoming) {
+              return incoming;
+            },
+          },
+        },
+      },
+    },
+  });
+
+  return new VueApollo({ defaultClient });
+};
diff --git a/app/assets/javascripts/deploy_keys/graphql/mutations/confirm_action.mutation.graphql b/app/assets/javascripts/deploy_keys/graphql/mutations/confirm_action.mutation.graphql
new file mode 100644
index 00000000000..adc78e6d2d2
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/graphql/mutations/confirm_action.mutation.graphql
@@ -0,0 +1,3 @@
+mutation confirmDisable($id: ID) {
+  confirmDisable(id: $id) @client
+}
diff --git a/app/assets/javascripts/deploy_keys/graphql/mutations/disable_key.mutation.graphql b/app/assets/javascripts/deploy_keys/graphql/mutations/disable_key.mutation.graphql
new file mode 100644
index 00000000000..923dd636785
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/graphql/mutations/disable_key.mutation.graphql
@@ -0,0 +1,3 @@
+mutation disableKey($id: ID!) {
+  disableKey(id: $id) @client
+}
diff --git a/app/assets/javascripts/deploy_keys/graphql/mutations/enable_key.mutation.graphql b/app/assets/javascripts/deploy_keys/graphql/mutations/enable_key.mutation.graphql
new file mode 100644
index 00000000000..fb978679b7c
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/graphql/mutations/enable_key.mutation.graphql
@@ -0,0 +1,3 @@
+mutation enableKey($id: ID!) {
+  enableKey(id: $id) @client
+}
diff --git a/app/assets/javascripts/deploy_keys/graphql/mutations/update_current_page.mutation.graphql b/app/assets/javascripts/deploy_keys/graphql/mutations/update_current_page.mutation.graphql
new file mode 100644
index 00000000000..8e6438cdad0
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/graphql/mutations/update_current_page.mutation.graphql
@@ -0,0 +1,3 @@
+mutation updateCurrentDeployKeyPage($page: String) {
+  currentPage(page: $page) @client
+}
diff --git a/app/assets/javascripts/deploy_keys/graphql/mutations/update_current_scope.mutation.graphql b/app/assets/javascripts/deploy_keys/graphql/mutations/update_current_scope.mutation.graphql
new file mode 100644
index 00000000000..3502eee5142
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/graphql/mutations/update_current_scope.mutation.graphql
@@ -0,0 +1,3 @@
+mutation updateCurrentScope($scope: DeployKeysScope) {
+  currentScope(scope: $scope) @client
+}
diff --git a/app/assets/javascripts/deploy_keys/graphql/queries/confirm_remove_key.query.graphql b/app/assets/javascripts/deploy_keys/graphql/queries/confirm_remove_key.query.graphql
new file mode 100644
index 00000000000..11d6a6ab83c
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/graphql/queries/confirm_remove_key.query.graphql
@@ -0,0 +1,5 @@
+query confirmRemoveKey {
+  deployKeyToRemove @client {
+    id
+  }
+}
diff --git a/app/assets/javascripts/deploy_keys/graphql/queries/current_page.query.graphql b/app/assets/javascripts/deploy_keys/graphql/queries/current_page.query.graphql
new file mode 100644
index 00000000000..dc02d97531a
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/graphql/queries/current_page.query.graphql
@@ -0,0 +1,3 @@
+query getCurrentDeployKeyPage {
+  currentPage @client
+}
diff --git a/app/assets/javascripts/deploy_keys/graphql/queries/current_scope.query.graphql b/app/assets/javascripts/deploy_keys/graphql/queries/current_scope.query.graphql
new file mode 100644
index 00000000000..181f5c52254
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/graphql/queries/current_scope.query.graphql
@@ -0,0 +1,3 @@
+query getCurrentScope {
+  currentScope @client
+}
diff --git a/app/assets/javascripts/deploy_keys/graphql/queries/deploy_keys.query.graphql b/app/assets/javascripts/deploy_keys/graphql/queries/deploy_keys.query.graphql
new file mode 100644
index 00000000000..c98da2920cc
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/graphql/queries/deploy_keys.query.graphql
@@ -0,0 +1,26 @@
+query getDeployKeys($projectPath: ID!, $scope: DeployKeysScope, $page: Integer) {
+  project(fullPath: $projectPath) {
+    id
+    deployKeys(scope: $scope, page: $page) @client {
+      id
+      title
+      fingerprintSha256
+      fingerprint
+      editPath
+      destroyedWhenOrphaned
+      almostOrphaned
+      expiresAt
+      createdAt
+      enablePath
+      disablePath
+      deployKeysProjects {
+        canPush
+        project {
+          id
+          fullPath
+          fullName
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/deploy_keys/graphql/resolvers.js b/app/assets/javascripts/deploy_keys/graphql/resolvers.js
new file mode 100644
index 00000000000..1993801636e
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/graphql/resolvers.js
@@ -0,0 +1,106 @@
+import { gql } from '@apollo/client/core';
+import axios from '~/lib/utils/axios_utils';
+import {
+  convertObjectPropsToCamelCase,
+  parseIntPagination,
+  normalizeHeaders,
+} from '~/lib/utils/common_utils';
+import pageInfoQuery from '~/graphql_shared/client/page_info.query.graphql';
+import currentPageQuery from './queries/current_page.query.graphql';
+import currentScopeQuery from './queries/current_scope.query.graphql';
+import confirmRemoveKeyQuery from './queries/confirm_remove_key.query.graphql';
+
+export const mapDeployKey = (deployKey) => ({
+  ...convertObjectPropsToCamelCase(deployKey, { deep: true }),
+  __typename: 'LocalDeployKey',
+});
+
+export const resolvers = (endpoints) => ({
+  Project: {
+    deployKeys(_, { scope, page }, { client }) {
+      const key = `${scope}Endpoint`;
+      let { [key]: endpoint } = endpoints;
+
+      if (!endpoint) {
+        endpoint = endpoints.enabledKeysEndpoint;
+      }
+
+      return axios.get(endpoint, { params: { page } }).then(({ headers, data }) => {
+        const normalizedHeaders = normalizeHeaders(headers);
+        const pageInfo = {
+          ...parseIntPagination(normalizedHeaders),
+          __typename: 'LocalPageInfo',
+        };
+        client.writeQuery({
+          query: pageInfoQuery,
+          variables: { input: { page, scope } },
+          data: { pageInfo },
+        });
+        return data?.keys?.map(mapDeployKey) || [];
+      });
+    },
+  },
+  Mutation: {
+    currentPage(_, { page }, { client }) {
+      client.writeQuery({
+        query: currentPageQuery,
+        data: { currentPage: page },
+      });
+    },
+    currentScope(_, { scope }, { client }) {
+      client.writeQuery({
+        query: currentPageQuery,
+        data: { currentPage: 1 },
+      });
+      client.writeQuery({
+        query: currentScopeQuery,
+        data: { currentScope: scope },
+      });
+    },
+    disableKey(_, _variables, { client }) {
+      const {
+        deployKeyToRemove: { id },
+      } = client.readQuery({
+        query: confirmRemoveKeyQuery,
+      });
+
+      const fragment = gql`
+        fragment DisablePath on LocalDeployKey {
+          disablePath
+        }
+      `;
+
+      const { disablePath } = client.readFragment({ fragment, id: `LocalDeployKey:${id}` });
+
+      return axios.put(disablePath).then(({ data }) => {
+        client.cache.evict({ fieldName: 'deployKeyToRemove' });
+        client.cache.evict({ id: `LocalDeployKey:${id}` });
+        client.cache.gc();
+
+        return data;
+      });
+    },
+    enableKey(_, { id }, { client }) {
+      const fragment = gql`
+        fragment EnablePath on LocalDeployKey {
+          enablePath
+        }
+      `;
+
+      const { enablePath } = client.readFragment({ fragment, id: `LocalDeployKey:${id}` });
+
+      return axios.put(enablePath).then(({ data }) => {
+        client.cache.evict({ id: `LocalDeployKey:${id}` });
+        client.cache.gc();
+
+        return data;
+      });
+    },
+    confirmDisable(_, { id }, { client }) {
+      client.writeQuery({
+        query: confirmRemoveKeyQuery,
+        data: { deployKeyToRemove: id ? { id, __type: 'LocalDeployKey' } : null },
+      });
+    },
+  },
+});
diff --git a/app/assets/javascripts/deploy_keys/graphql/typedefs.graphql b/app/assets/javascripts/deploy_keys/graphql/typedefs.graphql
new file mode 100644
index 00000000000..a08dda3da92
--- /dev/null
+++ b/app/assets/javascripts/deploy_keys/graphql/typedefs.graphql
@@ -0,0 +1,45 @@
+#import "~/graphql_shared/client/page_info.typedefs.graphql"
+
+enum DeployKeysScope {
+  enabledKeys
+  availableProjectKeys
+  availablePublicKeys
+}
+
+enum LocalDeployKeyActions {
+  enable
+  disable
+}
+
+type LocalProject {
+  id: ID!
+  fullPath: String
+  fullName: String
+}
+
+type LocalDeployKeysProject {
+  canPush: Boolean
+  projects: [LocalProject]
+}
+
+type LocalDeployKey {
+  id: ID!
+  title: String
+  fingerprintSha256: String
+  fingerprint: String
+  editPath: String
+  isEnabled: Boolean
+  destroyedWhenOrphaned: Boolean
+  almostOrphaned: Boolean
+  expiresAt: String
+  createdAt: String
+  deployKeysProjects: [LocalDeployKeysProject]
+}
+
+extend type LocalPageInfoInput {
+  scope: DeployKeysScope
+}
+
+extend type Project {
+  deployKeys: [LocalDeployKey]
+}
diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index 4e8b75536a4..8de0e0266c5 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -4,9 +4,9 @@ import { debounce } from 'lodash';
 import { s__, __, sprintf } from '~/locale';
 import { updateHistory, setUrlParams, queryToObject } from '~/lib/utils/url_utility';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
+import pageInfoQuery from '~/graphql_shared/client/page_info.query.graphql';
 import environmentAppQuery from '../graphql/queries/environment_app.query.graphql';
 import pollIntervalQuery from '../graphql/queries/poll_interval.query.graphql';
-import pageInfoQuery from '../graphql/queries/page_info.query.graphql';
 import environmentToDeleteQuery from '../graphql/queries/environment_to_delete.query.graphql';
 import environmentToRollbackQuery from '../graphql/queries/environment_to_rollback.query.graphql';
 import environmentToStopQuery from '../graphql/queries/environment_to_stop.query.graphql';
@@ -56,6 +56,9 @@ export default {
     },
     pageInfo: {
       query: pageInfoQuery,
+      variables() {
+        return { page: this.page };
+      },
     },
     environmentToDelete: {
       query: environmentToDeleteQuery,
diff --git a/app/assets/javascripts/environments/graphql/client.js b/app/assets/javascripts/environments/graphql/client.js
index 8f57069d89d..0eb12427914 100644
--- a/app/assets/javascripts/environments/graphql/client.js
+++ b/app/assets/javascripts/environments/graphql/client.js
@@ -1,7 +1,7 @@
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
+import pageInfoQuery from '~/graphql_shared/client/page_info.query.graphql';
 import environmentApp from './queries/environment_app.query.graphql';
-import pageInfoQuery from './queries/page_info.query.graphql';
 import environmentToDeleteQuery from './queries/environment_to_delete.query.graphql';
 import environmentToRollbackQuery from './queries/environment_to_rollback.query.graphql';
 import environmentToStopQuery from './queries/environment_to_stop.query.graphql';
diff --git a/app/assets/javascripts/environments/graphql/queries/page_info.query.graphql b/app/assets/javascripts/environments/graphql/queries/page_info.query.graphql
deleted file mode 100644
index d77ca05d46f..00000000000
--- a/app/assets/javascripts/environments/graphql/queries/page_info.query.graphql
+++ /dev/null
@@ -1,8 +0,0 @@
-query getPageInfo {
-  pageInfo @client {
-    total
-    perPage
-    nextPage
-    previousPage
-  }
-}
diff --git a/app/assets/javascripts/environments/graphql/resolvers/base.js b/app/assets/javascripts/environments/graphql/resolvers/base.js
index c9f9a2da13a..7d2a0689da2 100644
--- a/app/assets/javascripts/environments/graphql/resolvers/base.js
+++ b/app/assets/javascripts/environments/graphql/resolvers/base.js
@@ -6,13 +6,13 @@ import {
   normalizeHeaders,
 } from '~/lib/utils/common_utils';
 
+import pageInfoQuery from '~/graphql_shared/client/page_info.query.graphql';
 import pollIntervalQuery from '../queries/poll_interval.query.graphql';
 import environmentToRollbackQuery from '../queries/environment_to_rollback.query.graphql';
 import environmentToStopQuery from '../queries/environment_to_stop.query.graphql';
 import environmentToDeleteQuery from '../queries/environment_to_delete.query.graphql';
 import environmentToChangeCanaryQuery from '../queries/environment_to_change_canary.query.graphql';
 import isEnvironmentStoppingQuery from '../queries/is_environment_stopping.query.graphql';
-import pageInfoQuery from '../queries/page_info.query.graphql';
 
 const buildErrors = (errors = []) => ({
   errors,
diff --git a/app/assets/javascripts/environments/graphql/typedefs.graphql b/app/assets/javascripts/environments/graphql/typedefs.graphql
index 24898c2cadb..a235e387930 100644
--- a/app/assets/javascripts/environments/graphql/typedefs.graphql
+++ b/app/assets/javascripts/environments/graphql/typedefs.graphql
@@ -1,3 +1,5 @@
+#import "~/graphql_shared/client/page_info.typedefs.graphql"
+
 type LocalEnvironment {
   id: Int!
   globalId: ID!
@@ -55,13 +57,6 @@ type LocalErrors {
   errors: [String!]!
 }
 
-type LocalPageInfo {
-  total: Int!
-  perPage: Int!
-  nextPage: Int!
-  previousPage: Int!
-}
-
 type k8sPodStatus {
   phase: String
 }
diff --git a/app/assets/javascripts/graphql_shared/client/page_info.query.graphql b/app/assets/javascripts/graphql_shared/client/page_info.query.graphql
new file mode 100644
index 00000000000..958d3eade68
--- /dev/null
+++ b/app/assets/javascripts/graphql_shared/client/page_info.query.graphql
@@ -0,0 +1,8 @@
+query getPageInfo($input: LocalPageInfoInput) {
+  pageInfo(input: $input) @client {
+    total
+    perPage
+    nextPage
+    previousPage
+  }
+}
diff --git a/app/assets/javascripts/graphql_shared/client/page_info.typedefs.graphql b/app/assets/javascripts/graphql_shared/client/page_info.typedefs.graphql
new file mode 100644
index 00000000000..2c74fa4cc34
--- /dev/null
+++ b/app/assets/javascripts/graphql_shared/client/page_info.typedefs.graphql
@@ -0,0 +1,10 @@
+type LocalPageInfoInput {
+  page: Int
+}
+
+type LocalPageInfo {
+  total: Int!
+  perPage: Int!
+  nextPage: Int!
+  previousPage: Int!
+}
diff --git a/app/assets/javascripts/security_configuration/components/app.vue b/app/assets/javascripts/security_configuration/components/app.vue
index 32d46a0d4af..4a4c91c6ba7 100644
--- a/app/assets/javascripts/security_configuration/components/app.vue
+++ b/app/assets/javascripts/security_configuration/components/app.vue
@@ -1,43 +1,21 @@
 <script>
 import { GlTab, GlTabs, GlSprintf, GlLink, GlAlert } from '@gitlab/ui';
 import Api from '~/api';
-import { __, s__ } from '~/locale';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
 import SectionLayout from '~/vue_shared/security_configuration/components/section_layout.vue';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { SERVICE_PING_SECURITY_CONFIGURATION_THREAT_MANAGEMENT_VISIT } from '~/tracking/constants';
-import AutoDevOpsAlert from './auto_dev_ops_alert.vue';
-import AutoDevOpsEnabledAlert from './auto_dev_ops_enabled_alert.vue';
 import {
   AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY,
   TAB_VULNERABILITY_MANAGEMENT_INDEX,
-} from './constants';
+  i18n,
+} from '../constants';
+import AutoDevOpsAlert from './auto_dev_ops_alert.vue';
+import AutoDevOpsEnabledAlert from './auto_dev_ops_enabled_alert.vue';
 import FeatureCard from './feature_card.vue';
 import TrainingProviderList from './training_provider_list.vue';
 
-export const i18n = {
-  configurationHistory: s__('SecurityConfiguration|Configuration history'),
-  securityTesting: s__('SecurityConfiguration|Security testing'),
-  latestPipelineDescription: s__(
-    `SecurityConfiguration|The status of the tools only applies to the
-     default branch and is based on the %{linkStart}latest pipeline%{linkEnd}.`,
-  ),
-  description: s__(
-    `SecurityConfiguration|Once you've enabled a scan for the default branch,
-     any subsequent feature branch you create will include the scan. An enabled
-     scanner will not be reflected as such until the pipeline has been
-     successfully executed and it has generated valid artifacts.`,
-  ),
-  securityConfiguration: __('Security configuration'),
-  vulnerabilityManagement: s__('SecurityConfiguration|Vulnerability Management'),
-  securityTraining: s__('SecurityConfiguration|Security training'),
-  securityTrainingDescription: s__(
-    'SecurityConfiguration|Enable security training to help your developers learn how to fix vulnerabilities. Developers can view security training from selected educational providers, relevant to the detected vulnerability.',
-  ),
-  securityTrainingDoc: s__('SecurityConfiguration|Learn more about vulnerability training'),
-};
-
 export default {
   i18n,
   components: {
diff --git a/app/assets/javascripts/security_configuration/components/constants.js b/app/assets/javascripts/security_configuration/components/constants.js
deleted file mode 100644
index fd713a7a504..00000000000
--- a/app/assets/javascripts/security_configuration/components/constants.js
+++ /dev/null
@@ -1,330 +0,0 @@
-import { helpPagePath } from '~/helpers/help_page_helper';
-import { __, s__ } from '~/locale';
-
-import {
-  REPORT_TYPE_SAST,
-  REPORT_TYPE_SAST_IAC,
-  REPORT_TYPE_DAST,
-  REPORT_TYPE_DAST_PROFILES,
-  REPORT_TYPE_BREACH_AND_ATTACK_SIMULATION,
-  REPORT_TYPE_SECRET_DETECTION,
-  REPORT_TYPE_DEPENDENCY_SCANNING,
-  REPORT_TYPE_CONTAINER_SCANNING,
-  REPORT_TYPE_COVERAGE_FUZZING,
-  REPORT_TYPE_CORPUS_MANAGEMENT,
-  REPORT_TYPE_API_FUZZING,
-} from '~/vue_shared/security_reports/constants';
-
-import kontraLogo from 'images/vulnerability/kontra-logo.svg?raw';
-import scwLogo from 'images/vulnerability/scw-logo.svg?raw';
-import secureflagLogo from 'images/vulnerability/secureflag-logo.svg?raw';
-import configureSastMutation from '../graphql/configure_sast.mutation.graphql';
-import configureSastIacMutation from '../graphql/configure_iac.mutation.graphql';
-import configureSecretDetectionMutation from '../graphql/configure_secret_detection.mutation.graphql';
-
-/**
- * Translations & helpPagePaths for Security Configuration Page
- * Make sure to add new scanner translations to the SCANNER_NAMES_MAP below.
- */
-
-export const SAST_NAME = __('Static Application Security Testing (SAST)');
-export const SAST_SHORT_NAME = s__('ciReport|SAST');
-export const SAST_DESCRIPTION = __('Analyze your source code for known vulnerabilities.');
-export const SAST_HELP_PATH = helpPagePath('user/application_security/sast/index');
-export const SAST_CONFIG_HELP_PATH = helpPagePath('user/application_security/sast/index', {
-  anchor: 'configuration',
-});
-
-export const SAST_IAC_NAME = __('Infrastructure as Code (IaC) Scanning');
-export const SAST_IAC_SHORT_NAME = s__('ciReport|SAST IaC');
-export const SAST_IAC_DESCRIPTION = __(
-  'Analyze your infrastructure as code configuration files for known vulnerabilities.',
-);
-export const SAST_IAC_HELP_PATH = helpPagePath('user/application_security/iac_scanning/index');
-export const SAST_IAC_CONFIG_HELP_PATH = helpPagePath(
-  'user/application_security/iac_scanning/index',
-  {
-    anchor: 'configuration',
-  },
-);
-
-export const DAST_NAME = __('Dynamic Application Security Testing (DAST)');
-export const DAST_SHORT_NAME = s__('ciReport|DAST');
-export const DAST_DESCRIPTION = s__(
-  'ciReport|Analyze a deployed version of your web application for known vulnerabilities by examining it from the outside in. DAST works by simulating external attacks on your application while it is running.',
-);
-export const DAST_HELP_PATH = helpPagePath('user/application_security/dast/index');
-export const DAST_CONFIG_HELP_PATH = helpPagePath('user/application_security/dast/index', {
-  anchor: 'enable-automatic-dast-run',
-});
-export const DAST_BADGE_TEXT = __('Available on demand');
-export const DAST_BADGE_TOOLTIP = __(
-  'On-demand scans run outside of the DevOps cycle and find vulnerabilities in your projects',
-);
-
-export const DAST_PROFILES_NAME = __('DAST profiles');
-export const DAST_PROFILES_DESCRIPTION = s__(
-  'SecurityConfiguration|Manage profiles for use by DAST scans.',
-);
-export const DAST_PROFILES_CONFIG_TEXT = s__('SecurityConfiguration|Manage profiles');
-
-export const BAS_BADGE_TEXT = s__('SecurityConfiguration|Incubating feature');
-export const BAS_BADGE_TOOLTIP = s__(
-  'SecurityConfiguration|Breach and Attack Simulation is an incubating feature extending existing security testing by simulating adversary activity.',
-);
-export const BAS_DESCRIPTION = s__(
-  'SecurityConfiguration|Simulate breach and attack scenarios against your running application by attempting to detect and exploit known vulnerabilities.',
-);
-export const BAS_HELP_PATH = helpPagePath(
-  'user/application_security/breach_and_attack_simulation/index',
-);
-export const BAS_NAME = s__('SecurityConfiguration|Breach and Attack Simulation (BAS)');
-export const BAS_SHORT_NAME = s__('SecurityConfiguration|BAS');
-
-export const BAS_DAST_FEATURE_FLAG_DESCRIPTION = s__(
-  'SecurityConfiguration|Enable incubating Breach and Attack Simulation focused features such as callback attacks in your DAST scans.',
-);
-export const BAS_DAST_FEATURE_FLAG_HELP_PATH = helpPagePath(
-  'user/application_security/breach_and_attack_simulation/index',
-  { anchor: 'extend-dynamic-application-security-testing-dast' },
-);
-export const BAS_DAST_FEATURE_FLAG_NAME = s__(
-  'SecurityConfiguration|Out-of-Band Application Security Testing (OAST)',
-);
-
-export const SECRET_DETECTION_NAME = __('Secret Detection');
-export const SECRET_DETECTION_DESCRIPTION = __(
-  'Analyze your source code and git history for secrets.',
-);
-export const SECRET_DETECTION_HELP_PATH = helpPagePath(
-  'user/application_security/secret_detection/index',
-);
-export const SECRET_DETECTION_CONFIG_HELP_PATH = helpPagePath(
-  'user/application_security/secret_detection/index',
-  { anchor: 'configuration' },
-);
-
-export const DEPENDENCY_SCANNING_NAME = __('Dependency Scanning');
-export const DEPENDENCY_SCANNING_DESCRIPTION = __(
-  'Analyze your dependencies for known vulnerabilities.',
-);
-export const DEPENDENCY_SCANNING_HELP_PATH = helpPagePath(
-  'user/application_security/dependency_scanning/index',
-);
-export const DEPENDENCY_SCANNING_CONFIG_HELP_PATH = helpPagePath(
-  'user/application_security/dependency_scanning/index',
-  { anchor: 'configuration' },
-);
-
-export const CONTAINER_SCANNING_NAME = __('Container Scanning');
-export const CONTAINER_SCANNING_DESCRIPTION = __(
-  'Check your Docker images for known vulnerabilities.',
-);
-export const CONTAINER_SCANNING_HELP_PATH = helpPagePath(
-  'user/application_security/container_scanning/index',
-);
-export const CONTAINER_SCANNING_CONFIG_HELP_PATH = helpPagePath(
-  'user/application_security/container_scanning/index',
-  { anchor: 'configuration' },
-);
-
-export const COVERAGE_FUZZING_NAME = __('Coverage Fuzzing');
-export const COVERAGE_FUZZING_DESCRIPTION = __(
-  'Find bugs in your code with coverage-guided fuzzing.',
-);
-export const COVERAGE_FUZZING_HELP_PATH = helpPagePath(
-  'user/application_security/coverage_fuzzing/index',
-);
-export const COVERAGE_FUZZING_CONFIG_HELP_PATH = helpPagePath(
-  'user/application_security/coverage_fuzzing/index',
-  { anchor: 'enable-coverage-guided-fuzz-testing' },
-);
-
-export const CORPUS_MANAGEMENT_NAME = __('Corpus Management');
-export const CORPUS_MANAGEMENT_DESCRIPTION = s__(
-  'SecurityConfiguration|Manage corpus files used as seed inputs with coverage-guided fuzzing.',
-);
-export const CORPUS_MANAGEMENT_CONFIG_TEXT = s__('SecurityConfiguration|Manage corpus');
-
-export const API_FUZZING_NAME = __('API Fuzzing');
-export const API_FUZZING_DESCRIPTION = __('Find bugs in your code with API fuzzing.');
-export const API_FUZZING_HELP_PATH = helpPagePath('user/application_security/api_fuzzing/index');
-
-export const CLUSTER_IMAGE_SCANNING_NAME = s__('ciReport|Cluster Image Scanning');
-
-export const SCANNER_NAMES_MAP = {
-  SAST: SAST_SHORT_NAME,
-  SAST_IAC: SAST_IAC_NAME,
-  DAST: DAST_SHORT_NAME,
-  API_FUZZING: API_FUZZING_NAME,
-  CONTAINER_SCANNING: CONTAINER_SCANNING_NAME,
-  COVERAGE_FUZZING: COVERAGE_FUZZING_NAME,
-  SECRET_DETECTION: SECRET_DETECTION_NAME,
-  DEPENDENCY_SCANNING: DEPENDENCY_SCANNING_NAME,
-  BREACH_AND_ATTACK_SIMULATION: BAS_NAME,
-  CLUSTER_IMAGE_SCANNING: CLUSTER_IMAGE_SCANNING_NAME,
-  GENERIC: s__('ciReport|Manually added'),
-};
-
-export const securityFeatures = [
-  {
-    name: SAST_NAME,
-    shortName: SAST_SHORT_NAME,
-    description: SAST_DESCRIPTION,
-    helpPath: SAST_HELP_PATH,
-    configurationHelpPath: SAST_CONFIG_HELP_PATH,
-    type: REPORT_TYPE_SAST,
-  },
-  {
-    name: SAST_IAC_NAME,
-    shortName: SAST_IAC_SHORT_NAME,
-    description: SAST_IAC_DESCRIPTION,
-    helpPath: SAST_IAC_HELP_PATH,
-    configurationHelpPath: SAST_IAC_CONFIG_HELP_PATH,
-    type: REPORT_TYPE_SAST_IAC,
-  },
-  {
-    badge: {
-      text: DAST_BADGE_TEXT,
-      tooltipText: DAST_BADGE_TOOLTIP,
-      variant: 'info',
-    },
-    secondary: {
-      type: REPORT_TYPE_DAST_PROFILES,
-      name: DAST_PROFILES_NAME,
-      description: DAST_PROFILES_DESCRIPTION,
-      configurationText: DAST_PROFILES_CONFIG_TEXT,
-    },
-    name: DAST_NAME,
-    shortName: DAST_SHORT_NAME,
-    description: DAST_DESCRIPTION,
-    helpPath: DAST_HELP_PATH,
-    configurationHelpPath: DAST_CONFIG_HELP_PATH,
-    type: REPORT_TYPE_DAST,
-    anchor: 'dast',
-  },
-  {
-    name: DEPENDENCY_SCANNING_NAME,
-    description: DEPENDENCY_SCANNING_DESCRIPTION,
-    helpPath: DEPENDENCY_SCANNING_HELP_PATH,
-    configurationHelpPath: DEPENDENCY_SCANNING_CONFIG_HELP_PATH,
-    type: REPORT_TYPE_DEPENDENCY_SCANNING,
-    anchor: 'dependency-scanning',
-  },
-  {
-    name: CONTAINER_SCANNING_NAME,
-    description: CONTAINER_SCANNING_DESCRIPTION,
-    helpPath: CONTAINER_SCANNING_HELP_PATH,
-    configurationHelpPath: CONTAINER_SCANNING_CONFIG_HELP_PATH,
-    type: REPORT_TYPE_CONTAINER_SCANNING,
-  },
-  {
-    name: SECRET_DETECTION_NAME,
-    description: SECRET_DETECTION_DESCRIPTION,
-    helpPath: SECRET_DETECTION_HELP_PATH,
-    configurationHelpPath: SECRET_DETECTION_CONFIG_HELP_PATH,
-    type: REPORT_TYPE_SECRET_DETECTION,
-  },
-  {
-    name: API_FUZZING_NAME,
-    description: API_FUZZING_DESCRIPTION,
-    helpPath: API_FUZZING_HELP_PATH,
-    type: REPORT_TYPE_API_FUZZING,
-  },
-  {
-    name: COVERAGE_FUZZING_NAME,
-    description: COVERAGE_FUZZING_DESCRIPTION,
-    helpPath: COVERAGE_FUZZING_HELP_PATH,
-    configurationHelpPath: COVERAGE_FUZZING_CONFIG_HELP_PATH,
-    type: REPORT_TYPE_COVERAGE_FUZZING,
-    secondary: {
-      type: REPORT_TYPE_CORPUS_MANAGEMENT,
-      name: CORPUS_MANAGEMENT_NAME,
-      description: CORPUS_MANAGEMENT_DESCRIPTION,
-      configurationText: CORPUS_MANAGEMENT_CONFIG_TEXT,
-    },
-  },
-  {
-    anchor: 'bas',
-    badge: {
-      alwaysDisplay: true,
-      text: BAS_BADGE_TEXT,
-      tooltipText: BAS_BADGE_TOOLTIP,
-      variant: 'info',
-    },
-    description: BAS_DESCRIPTION,
-    name: BAS_NAME,
-    helpPath: BAS_HELP_PATH,
-    secondary: {
-      configurationHelpPath: BAS_DAST_FEATURE_FLAG_HELP_PATH,
-      description: BAS_DAST_FEATURE_FLAG_DESCRIPTION,
-      name: BAS_DAST_FEATURE_FLAG_NAME,
-    },
-    shortName: BAS_SHORT_NAME,
-    type: REPORT_TYPE_BREACH_AND_ATTACK_SIMULATION,
-  },
-];
-
-export const featureToMutationMap = {
-  [REPORT_TYPE_SAST]: {
-    mutationId: 'configureSast',
-    getMutationPayload: (projectPath) => ({
-      mutation: configureSastMutation,
-      variables: {
-        input: {
-          projectPath,
-          configuration: { global: [], pipeline: [], analyzers: [] },
-        },
-      },
-    }),
-  },
-  [REPORT_TYPE_SAST_IAC]: {
-    mutationId: 'configureSastIac',
-    getMutationPayload: (projectPath) => ({
-      mutation: configureSastIacMutation,
-      variables: {
-        input: {
-          projectPath,
-        },
-      },
-    }),
-  },
-  [REPORT_TYPE_SECRET_DETECTION]: {
-    mutationId: 'configureSecretDetection',
-    getMutationPayload: (projectPath) => ({
-      mutation: configureSecretDetectionMutation,
-      variables: {
-        input: {
-          projectPath,
-        },
-      },
-    }),
-  },
-};
-
-export const AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY =
-  'security_configuration_auto_devops_enabled_dismissed_projects';
-
-// Fetch the svg path from the GraphQL query once this issue is resolved
-// https://gitlab.com/gitlab-org/gitlab/-/issues/346899
-export const TEMP_PROVIDER_LOGOS = {
-  Kontra: {
-    svg: kontraLogo,
-  },
-  [__('Secure Code Warrior')]: {
-    svg: scwLogo,
-  },
-  SecureFlag: {
-    svg: secureflagLogo,
-  },
-};
-
-// Use the `url` field from the GraphQL query once this issue is resolved
-// https://gitlab.com/gitlab-org/gitlab/-/issues/356129
-export const TEMP_PROVIDER_URLS = {
-  Kontra: 'https://application.security/',
-  [__('Secure Code Warrior')]: 'https://www.securecodewarrior.com/',
-  SecureFlag: 'https://www.secureflag.com/',
-};
-
-export const TAB_VULNERABILITY_MANAGEMENT_INDEX = 1;
diff --git a/app/assets/javascripts/security_configuration/components/training_provider_list.vue b/app/assets/javascripts/security_configuration/components/training_provider_list.vue
index d424ec6dfeb..ae2894e25a2 100644
--- a/app/assets/javascripts/security_configuration/components/training_provider_list.vue
+++ b/app/assets/javascripts/security_configuration/components/training_provider_list.vue
@@ -18,6 +18,8 @@ import {
   TRACK_TOGGLE_TRAINING_PROVIDER_LABEL,
   TRACK_PROVIDER_LEARN_MORE_CLICK_ACTION,
   TRACK_PROVIDER_LEARN_MORE_CLICK_LABEL,
+  TEMP_PROVIDER_LOGOS,
+  TEMP_PROVIDER_URLS,
 } from '~/security_configuration/constants';
 import dismissUserCalloutMutation from '~/graphql_shared/mutations/dismiss_user_callout.mutation.graphql';
 import securityTrainingProvidersQuery from '~/security_configuration/graphql/security_training_providers.query.graphql';
@@ -26,7 +28,6 @@ import {
   updateSecurityTrainingCache,
   updateSecurityTrainingOptimisticResponse,
 } from '~/security_configuration/graphql/cache_utils';
-import { TEMP_PROVIDER_LOGOS, TEMP_PROVIDER_URLS } from './constants';
 
 const i18n = {
   providerQueryErrorMessage: __(
diff --git a/app/assets/javascripts/security_configuration/constants.js b/app/assets/javascripts/security_configuration/constants.js
index 14eb10ac2aa..94bcf81a3eb 100644
--- a/app/assets/javascripts/security_configuration/constants.js
+++ b/app/assets/javascripts/security_configuration/constants.js
@@ -1,3 +1,334 @@
+import kontraLogo from 'images/vulnerability/kontra-logo.svg?raw';
+import scwLogo from 'images/vulnerability/scw-logo.svg?raw';
+import secureflagLogo from 'images/vulnerability/secureflag-logo.svg?raw';
+import { __, s__ } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+import {
+  REPORT_TYPE_SAST,
+  REPORT_TYPE_SAST_IAC,
+  REPORT_TYPE_DAST,
+  REPORT_TYPE_DAST_PROFILES,
+  REPORT_TYPE_BREACH_AND_ATTACK_SIMULATION,
+  REPORT_TYPE_SECRET_DETECTION,
+  REPORT_TYPE_DEPENDENCY_SCANNING,
+  REPORT_TYPE_CONTAINER_SCANNING,
+  REPORT_TYPE_COVERAGE_FUZZING,
+  REPORT_TYPE_CORPUS_MANAGEMENT,
+  REPORT_TYPE_API_FUZZING,
+} from '~/vue_shared/security_reports/constants';
+
+import configureSastMutation from './graphql/configure_sast.mutation.graphql';
+import configureSastIacMutation from './graphql/configure_iac.mutation.graphql';
+import configureSecretDetectionMutation from './graphql/configure_secret_detection.mutation.graphql';
+
+/**
+ * Translations & helpPagePaths for Security Configuration Page
+ * Make sure to add new scanner translations to the SCANNER_NAMES_MAP below.
+ */
+
+export const SAST_NAME = __('Static Application Security Testing (SAST)');
+export const SAST_SHORT_NAME = s__('ciReport|SAST');
+export const SAST_DESCRIPTION = __('Analyze your source code for known vulnerabilities.');
+export const SAST_HELP_PATH = helpPagePath('user/application_security/sast/index');
+export const SAST_CONFIG_HELP_PATH = helpPagePath('user/application_security/sast/index', {
+  anchor: 'configuration',
+});
+
+export const SAST_IAC_NAME = __('Infrastructure as Code (IaC) Scanning');
+export const SAST_IAC_SHORT_NAME = s__('ciReport|SAST IaC');
+export const SAST_IAC_DESCRIPTION = __(
+  'Analyze your infrastructure as code configuration files for known vulnerabilities.',
+);
+export const SAST_IAC_HELP_PATH = helpPagePath('user/application_security/iac_scanning/index');
+export const SAST_IAC_CONFIG_HELP_PATH = helpPagePath(
+  'user/application_security/iac_scanning/index',
+  {
+    anchor: 'configuration',
+  },
+);
+
+export const DAST_NAME = __('Dynamic Application Security Testing (DAST)');
+export const DAST_SHORT_NAME = s__('ciReport|DAST');
+export const DAST_DESCRIPTION = s__(
+  'ciReport|Analyze a deployed version of your web application for known vulnerabilities by examining it from the outside in. DAST works by simulating external attacks on your application while it is running.',
+);
+export const DAST_HELP_PATH = helpPagePath('user/application_security/dast/index');
+export const DAST_CONFIG_HELP_PATH = helpPagePath('user/application_security/dast/index', {
+  anchor: 'enable-automatic-dast-run',
+});
+export const DAST_BADGE_TEXT = __('Available on demand');
+export const DAST_BADGE_TOOLTIP = __(
+  'On-demand scans run outside of the DevOps cycle and find vulnerabilities in your projects',
+);
+
+export const DAST_PROFILES_NAME = __('DAST profiles');
+export const DAST_PROFILES_DESCRIPTION = s__(
+  'SecurityConfiguration|Manage profiles for use by DAST scans.',
+);
+export const DAST_PROFILES_CONFIG_TEXT = s__('SecurityConfiguration|Manage profiles');
+
+export const BAS_BADGE_TEXT = s__('SecurityConfiguration|Incubating feature');
+export const BAS_BADGE_TOOLTIP = s__(
+  'SecurityConfiguration|Breach and Attack Simulation is an incubating feature extending existing security testing by simulating adversary activity.',
+);
+export const BAS_DESCRIPTION = s__(
+  'SecurityConfiguration|Simulate breach and attack scenarios against your running application by attempting to detect and exploit known vulnerabilities.',
+);
+export const BAS_HELP_PATH = helpPagePath(
+  'user/application_security/breach_and_attack_simulation/index',
+);
+export const BAS_NAME = s__('SecurityConfiguration|Breach and Attack Simulation (BAS)');
+export const BAS_SHORT_NAME = s__('SecurityConfiguration|BAS');
+
+export const BAS_DAST_FEATURE_FLAG_DESCRIPTION = s__(
+  'SecurityConfiguration|Enable incubating Breach and Attack Simulation focused features such as callback attacks in your DAST scans.',
+);
+export const BAS_DAST_FEATURE_FLAG_HELP_PATH = helpPagePath(
+  'user/application_security/breach_and_attack_simulation/index',
+  { anchor: 'extend-dynamic-application-security-testing-dast' },
+);
+export const BAS_DAST_FEATURE_FLAG_NAME = s__(
+  'SecurityConfiguration|Out-of-Band Application Security Testing (OAST)',
+);
+
+export const SECRET_DETECTION_NAME = __('Secret Detection');
+export const SECRET_DETECTION_DESCRIPTION = __(
+  'Analyze your source code and git history for secrets.',
+);
+export const SECRET_DETECTION_HELP_PATH = helpPagePath(
+  'user/application_security/secret_detection/index',
+);
+export const SECRET_DETECTION_CONFIG_HELP_PATH = helpPagePath(
+  'user/application_security/secret_detection/index',
+  { anchor: 'configuration' },
+);
+
+export const DEPENDENCY_SCANNING_NAME = __('Dependency Scanning');
+export const DEPENDENCY_SCANNING_DESCRIPTION = __(
+  'Analyze your dependencies for known vulnerabilities.',
+);
+export const DEPENDENCY_SCANNING_HELP_PATH = helpPagePath(
+  'user/application_security/dependency_scanning/index',
+);
+export const DEPENDENCY_SCANNING_CONFIG_HELP_PATH = helpPagePath(
+  'user/application_security/dependency_scanning/index',
+  { anchor: 'configuration' },
+);
+
+export const CONTAINER_SCANNING_NAME = __('Container Scanning');
+export const CONTAINER_SCANNING_DESCRIPTION = __(
+  'Check your Docker images for known vulnerabilities.',
+);
+export const CONTAINER_SCANNING_HELP_PATH = helpPagePath(
+  'user/application_security/container_scanning/index',
+);
+export const CONTAINER_SCANNING_CONFIG_HELP_PATH = helpPagePath(
+  'user/application_security/container_scanning/index',
+  { anchor: 'configuration' },
+);
+
+export const COVERAGE_FUZZING_NAME = __('Coverage Fuzzing');
+export const COVERAGE_FUZZING_DESCRIPTION = __(
+  'Find bugs in your code with coverage-guided fuzzing.',
+);
+export const COVERAGE_FUZZING_HELP_PATH = helpPagePath(
+  'user/application_security/coverage_fuzzing/index',
+);
+export const COVERAGE_FUZZING_CONFIG_HELP_PATH = helpPagePath(
+  'user/application_security/coverage_fuzzing/index',
+  { anchor: 'enable-coverage-guided-fuzz-testing' },
+);
+
+export const CORPUS_MANAGEMENT_NAME = __('Corpus Management');
+export const CORPUS_MANAGEMENT_DESCRIPTION = s__(
+  'SecurityConfiguration|Manage corpus files used as seed inputs with coverage-guided fuzzing.',
+);
+export const CORPUS_MANAGEMENT_CONFIG_TEXT = s__('SecurityConfiguration|Manage corpus');
+
+export const API_FUZZING_NAME = __('API Fuzzing');
+export const API_FUZZING_DESCRIPTION = __('Find bugs in your code with API fuzzing.');
+export const API_FUZZING_HELP_PATH = helpPagePath('user/application_security/api_fuzzing/index');
+
+export const CLUSTER_IMAGE_SCANNING_NAME = s__('ciReport|Cluster Image Scanning');
+
+export const SCANNER_NAMES_MAP = {
+  SAST: SAST_SHORT_NAME,
+  SAST_IAC: SAST_IAC_NAME,
+  DAST: DAST_SHORT_NAME,
+  API_FUZZING: API_FUZZING_NAME,
+  CONTAINER_SCANNING: CONTAINER_SCANNING_NAME,
+  COVERAGE_FUZZING: COVERAGE_FUZZING_NAME,
+  SECRET_DETECTION: SECRET_DETECTION_NAME,
+  DEPENDENCY_SCANNING: DEPENDENCY_SCANNING_NAME,
+  BREACH_AND_ATTACK_SIMULATION: BAS_NAME,
+  CLUSTER_IMAGE_SCANNING: CLUSTER_IMAGE_SCANNING_NAME,
+  GENERIC: s__('ciReport|Manually added'),
+};
+
+export const securityFeatures = [
+  {
+    name: SAST_NAME,
+    shortName: SAST_SHORT_NAME,
+    description: SAST_DESCRIPTION,
+    helpPath: SAST_HELP_PATH,
+    configurationHelpPath: SAST_CONFIG_HELP_PATH,
+    type: REPORT_TYPE_SAST,
+  },
+  {
+    name: SAST_IAC_NAME,
+    shortName: SAST_IAC_SHORT_NAME,
+    description: SAST_IAC_DESCRIPTION,
+    helpPath: SAST_IAC_HELP_PATH,
+    configurationHelpPath: SAST_IAC_CONFIG_HELP_PATH,
+    type: REPORT_TYPE_SAST_IAC,
+  },
+  {
+    badge: {
+      text: DAST_BADGE_TEXT,
+      tooltipText: DAST_BADGE_TOOLTIP,
+      variant: 'info',
+    },
+    secondary: {
+      type: REPORT_TYPE_DAST_PROFILES,
+      name: DAST_PROFILES_NAME,
+      description: DAST_PROFILES_DESCRIPTION,
+      configurationText: DAST_PROFILES_CONFIG_TEXT,
+    },
+    name: DAST_NAME,
+    shortName: DAST_SHORT_NAME,
+    description: DAST_DESCRIPTION,
+    helpPath: DAST_HELP_PATH,
+    configurationHelpPath: DAST_CONFIG_HELP_PATH,
+    type: REPORT_TYPE_DAST,
+    anchor: 'dast',
+  },
+  {
+    name: DEPENDENCY_SCANNING_NAME,
+    description: DEPENDENCY_SCANNING_DESCRIPTION,
+    helpPath: DEPENDENCY_SCANNING_HELP_PATH,
+    configurationHelpPath: DEPENDENCY_SCANNING_CONFIG_HELP_PATH,
+    type: REPORT_TYPE_DEPENDENCY_SCANNING,
+    anchor: 'dependency-scanning',
+  },
+  {
+    name: CONTAINER_SCANNING_NAME,
+    description: CONTAINER_SCANNING_DESCRIPTION,
+    helpPath: CONTAINER_SCANNING_HELP_PATH,
+    configurationHelpPath: CONTAINER_SCANNING_CONFIG_HELP_PATH,
+    type: REPORT_TYPE_CONTAINER_SCANNING,
+  },
+  {
+    name: SECRET_DETECTION_NAME,
+    description: SECRET_DETECTION_DESCRIPTION,
+    helpPath: SECRET_DETECTION_HELP_PATH,
+    configurationHelpPath: SECRET_DETECTION_CONFIG_HELP_PATH,
+    type: REPORT_TYPE_SECRET_DETECTION,
+  },
+  {
+    name: API_FUZZING_NAME,
+    description: API_FUZZING_DESCRIPTION,
+    helpPath: API_FUZZING_HELP_PATH,
+    type: REPORT_TYPE_API_FUZZING,
+  },
+  {
+    name: COVERAGE_FUZZING_NAME,
+    description: COVERAGE_FUZZING_DESCRIPTION,
+    helpPath: COVERAGE_FUZZING_HELP_PATH,
+    configurationHelpPath: COVERAGE_FUZZING_CONFIG_HELP_PATH,
+    type: REPORT_TYPE_COVERAGE_FUZZING,
+    secondary: {
+      type: REPORT_TYPE_CORPUS_MANAGEMENT,
+      name: CORPUS_MANAGEMENT_NAME,
+      description: CORPUS_MANAGEMENT_DESCRIPTION,
+      configurationText: CORPUS_MANAGEMENT_CONFIG_TEXT,
+    },
+  },
+  {
+    anchor: 'bas',
+    badge: {
+      alwaysDisplay: true,
+      text: BAS_BADGE_TEXT,
+      tooltipText: BAS_BADGE_TOOLTIP,
+      variant: 'info',
+    },
+    description: BAS_DESCRIPTION,
+    name: BAS_NAME,
+    helpPath: BAS_HELP_PATH,
+    secondary: {
+      configurationHelpPath: BAS_DAST_FEATURE_FLAG_HELP_PATH,
+      description: BAS_DAST_FEATURE_FLAG_DESCRIPTION,
+      name: BAS_DAST_FEATURE_FLAG_NAME,
+    },
+    shortName: BAS_SHORT_NAME,
+    type: REPORT_TYPE_BREACH_AND_ATTACK_SIMULATION,
+  },
+];
+
+export const featureToMutationMap = {
+  [REPORT_TYPE_SAST]: {
+    mutationId: 'configureSast',
+    getMutationPayload: (projectPath) => ({
+      mutation: configureSastMutation,
+      variables: {
+        input: {
+          projectPath,
+          configuration: { global: [], pipeline: [], analyzers: [] },
+        },
+      },
+    }),
+  },
+  [REPORT_TYPE_SAST_IAC]: {
+    mutationId: 'configureSastIac',
+    getMutationPayload: (projectPath) => ({
+      mutation: configureSastIacMutation,
+      variables: {
+        input: {
+          projectPath,
+        },
+      },
+    }),
+  },
+  [REPORT_TYPE_SECRET_DETECTION]: {
+    mutationId: 'configureSecretDetection',
+    getMutationPayload: (projectPath) => ({
+      mutation: configureSecretDetectionMutation,
+      variables: {
+        input: {
+          projectPath,
+        },
+      },
+    }),
+  },
+};
+
+export const AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY =
+  'security_configuration_auto_devops_enabled_dismissed_projects';
+
+// Fetch the svg path from the GraphQL query once this issue is resolved
+// https://gitlab.com/gitlab-org/gitlab/-/issues/346899
+export const TEMP_PROVIDER_LOGOS = {
+  Kontra: {
+    svg: kontraLogo,
+  },
+  [__('Secure Code Warrior')]: {
+    svg: scwLogo,
+  },
+  SecureFlag: {
+    svg: secureflagLogo,
+  },
+};
+
+// Use the `url` field from the GraphQL query once this issue is resolved
+// https://gitlab.com/gitlab-org/gitlab/-/issues/356129
+export const TEMP_PROVIDER_URLS = {
+  Kontra: 'https://application.security/',
+  [__('Secure Code Warrior')]: 'https://www.securecodewarrior.com/',
+  SecureFlag: 'https://www.secureflag.com/',
+};
+
+export const TAB_VULNERABILITY_MANAGEMENT_INDEX = 1;
+
 export const TRACK_TOGGLE_TRAINING_PROVIDER_ACTION = 'toggle_security_training_provider';
 export const TRACK_TOGGLE_TRAINING_PROVIDER_LABEL = 'update_security_training_provider';
 export const TRACK_CLICK_TRAINING_LINK_ACTION = 'click_security_training_link';
@@ -6,3 +337,25 @@ export const TRACK_PROVIDER_LEARN_MORE_CLICK_LABEL = 'security_training_provider
 export const TRACK_TRAINING_LOADED_ACTION = 'security_training_link_loaded';
 export const TRACK_PROMOTION_BANNER_CTA_CLICK_ACTION = 'click_button';
 export const TRACK_PROMOTION_BANNER_CTA_CLICK_LABEL = 'security_training_promotion_cta';
+
+export const i18n = {
+  configurationHistory: s__('SecurityConfiguration|Configuration history'),
+  securityTesting: s__('SecurityConfiguration|Security testing'),
+  latestPipelineDescription: s__(
+    `SecurityConfiguration|The status of the tools only applies to the
+       default branch and is based on the %{linkStart}latest pipeline%{linkEnd}.`,
+  ),
+  description: s__(
+    `SecurityConfiguration|Once you've enabled a scan for the default branch,
+       any subsequent feature branch you create will include the scan. An enabled
+       scanner will not be reflected as such until the pipeline has been
+       successfully executed and it has generated valid artifacts.`,
+  ),
+  securityConfiguration: __('Security configuration'),
+  vulnerabilityManagement: s__('SecurityConfiguration|Vulnerability Management'),
+  securityTraining: s__('SecurityConfiguration|Security training'),
+  securityTrainingDescription: s__(
+    'SecurityConfiguration|Enable security training to help your developers learn how to fix vulnerabilities. Developers can view security training from selected educational providers, relevant to the detected vulnerability. Please note that security training is not accessible in an environment that is offline.',
+  ),
+  securityTrainingDoc: s__('SecurityConfiguration|Learn more about vulnerability training'),
+};
diff --git a/app/assets/javascripts/security_configuration/index.js b/app/assets/javascripts/security_configuration/index.js
index aa3c9c87622..8086b200891 100644
--- a/app/assets/javascripts/security_configuration/index.js
+++ b/app/assets/javascripts/security_configuration/index.js
@@ -3,7 +3,7 @@ import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
 import { parseBooleanDataAttributes } from '~/lib/utils/dom_utils';
 import SecurityConfigurationApp from './components/app.vue';
-import { securityFeatures } from './components/constants';
+import { securityFeatures } from './constants';
 import { augmentFeatures } from './utils';
 
 export const initSecurityConfiguration = (el) => {
diff --git a/app/assets/javascripts/security_configuration/utils.js b/app/assets/javascripts/security_configuration/utils.js
index 7f0caf1af46..59b49cb3820 100644
--- a/app/assets/javascripts/security_configuration/utils.js
+++ b/app/assets/javascripts/security_configuration/utils.js
@@ -1,5 +1,5 @@
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import { SCANNER_NAMES_MAP } from '~/security_configuration/components/constants';
+import { SCANNER_NAMES_MAP } from '~/security_configuration/constants';
 import { REPORT_TYPE_DAST } from '~/vue_shared/security_reports/constants';
 
 /**
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index 473e8a936fd..9ce5448d86e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -122,6 +122,7 @@ export default class MergeRequestStore {
       this.availableAutoMergeStrategies,
     );
     this.ffOnlyEnabled = data.ff_only_enabled;
+    this.ffMergePossible = data.ff_merge_possible;
     this.isRemovingSourceBranch = this.isRemovingSourceBranch || false;
     this.mergeRequestState = data.state;
     this.isOpen = this.mergeRequestState === STATUS_OPEN;
diff --git a/app/assets/javascripts/vue_shared/security_configuration/components/manage_via_mr.vue b/app/assets/javascripts/vue_shared/security_configuration/components/manage_via_mr.vue
index b81d288d932..dccff4a288f 100644
--- a/app/assets/javascripts/vue_shared/security_configuration/components/manage_via_mr.vue
+++ b/app/assets/javascripts/vue_shared/security_configuration/components/manage_via_mr.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlButton } from '@gitlab/ui';
-import { featureToMutationMap } from 'ee_else_ce/security_configuration/components/constants';
+import { featureToMutationMap } from 'ee_else_ce/security_configuration/constants';
 import { parseErrorMessage } from '~/lib/utils/error_message';
 import { redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated
 import { sprintf, s__ } from '~/locale';
diff --git a/app/graphql/types/abuse_report_type.rb b/app/graphql/types/abuse_report_type.rb
index 2532530cfa9..dc40800af94 100644
--- a/app/graphql/types/abuse_report_type.rb
+++ b/app/graphql/types/abuse_report_type.rb
@@ -10,8 +10,6 @@ module Types
 
     authorize :read_abuse_report
 
-    expose_permissions Types::PermissionTypes::AbuseReport
-
     field :id, Types::GlobalIDType[::AbuseReport],
       null: false, description: 'Global ID of the abuse report.'
 
diff --git a/app/graphql/types/permission_types/abuse_report.rb b/app/graphql/types/permission_types/abuse_report.rb
deleted file mode 100644
index abd5d545d02..00000000000
--- a/app/graphql/types/permission_types/abuse_report.rb
+++ /dev/null
@@ -1,11 +0,0 @@
-# frozen_string_literal: true
-
-module Types
-  module PermissionTypes
-    class AbuseReport < BasePermissionType
-      graphql_name 'AbuseReportPermissions'
-
-      abilities :read_abuse_report, :create_note
-    end
-  end
-end
diff --git a/app/helpers/groups_helper.rb b/app/helpers/groups_helper.rb
index f4526a4f182..25a2cc8a5ae 100644
--- a/app/helpers/groups_helper.rb
+++ b/app/helpers/groups_helper.rb
@@ -208,14 +208,10 @@ module GroupsHelper
   end
 
   def access_level_roles_user_can_assign(group)
-    return {} unless current_user
-    return group.access_level_roles if current_user.can_admin_all_resources?
-
-    max_access_level = group.highest_group_member(current_user)&.access_level
-
-    return {} unless max_access_level
-
-    group.access_level_roles.select { |_k, v| v <= max_access_level }
+    max_access_level = group.max_member_access_for_user(current_user)
+    group.access_level_roles.select do |_name, access_level|
+      access_level <= max_access_level
+    end
   end
 
   def groups_projects_more_actions_dropdown_data(source)
diff --git a/app/policies/abuse_report_policy.rb b/app/policies/abuse_report_policy.rb
index 043dbd0cb89..ca200c538f2 100644
--- a/app/policies/abuse_report_policy.rb
+++ b/app/policies/abuse_report_policy.rb
@@ -3,6 +3,7 @@
 class AbuseReportPolicy < ::BasePolicy
   rule { admin }.policy do
     enable :read_abuse_report
+    enable :read_note
     enable :create_note
   end
 end
diff --git a/app/serializers/merge_request_poll_widget_entity.rb b/app/serializers/merge_request_poll_widget_entity.rb
index cef3f4555df..3374cd46729 100644
--- a/app/serializers/merge_request_poll_widget_entity.rb
+++ b/app/serializers/merge_request_poll_widget_entity.rb
@@ -15,6 +15,8 @@ class MergeRequestPollWidgetEntity < Grape::Entity
     merge_request.project.merge_requests_ff_only_enabled
   end
 
+  expose :ff_merge_possible?, as: :ff_merge_possible
+
   # User entities
   expose :merge_user, using: UserEntity