.gitlab/CODEOWNERS

@@ -151,7 +151,7 @@ Dangerfile @gl-quality/eng-prod
 /lib/gitlab/ci/templates/ @gitlab-org/maintainers/cicd-templates
 /lib/gitlab/ci/templates/Auto-DevOps.gitlab-ci.yml @DylanGriffith @mayra-cabrera @tkuah
 /lib/gitlab/ci/templates/Security/ @gonzoyumo @twoodham @sethgitlab @thiagocsf
-/lib/gitlab/ci/templates/Security/Container-Scanning.*.yml @gitlab-org/protect/container-security-backend
+/lib/gitlab/ci/templates/Security/Container-Scanning.*.yml @gitlab-org/govern/security-policies-backend
 
 ^[Project Alias]
 /ee/app/models/project_alias.rb @patrickbajao
@@ -183,23 +183,23 @@ Dangerfile @gl-quality/eng-prod
 /ee/app/services/app_sec/dast/ @gitlab-org/secure/dynamic-analysis-be
 
 ^[Container Security]
-/ee/app/views/projects/threat_monitoring/** @gitlab-org/protect/container-security-frontend
-/ee/app/views/projects/security/policies/** @gitlab-org/protect/container-security-frontend
-/ee/spec/views/projects/security/policies/** @gitlab-org/protect/container-security-frontend
-/ee/app/assets/javascripts/pages/projects/threat_monitoring/** @gitlab-org/protect/container-security-frontend
-/ee/app/assets/javascripts/threat_monitoring/** @gitlab-org/protect/container-security-frontend
-/ee/spec/frontend/threat_monitoring/** @gitlab-org/protect/container-security-frontend
+/ee/app/views/projects/threat_monitoring/** @gitlab-org/govern/security-policies-frontend
+/ee/app/views/projects/security/policies/** @gitlab-org/govern/security-policies-frontend
+/ee/spec/views/projects/security/policies/** @gitlab-org/govern/security-policies-frontend
+/ee/app/assets/javascripts/pages/projects/threat_monitoring/** @gitlab-org/govern/security-policies-frontend
+/ee/app/assets/javascripts/threat_monitoring/** @gitlab-org/govern/security-policies-frontend
+/ee/spec/frontend/threat_monitoring/** @gitlab-org/govern/security-policies-frontend
 
-/ee/app/controllers/projects/threat_monitoring_controller.rb @gitlab-org/protect/container-security-backend
-/ee/spec/controllers/projects/threat_monitoring_controller_spec.rb @gitlab-org/protect/container-security-backend
-/ee/app/controllers/projects/security/policies_controller.rb @gitlab-org/protect/container-security-backend
-/ee/spec/requests/projects/security/policies_controller_spec.rb @gitlab-org/protect/container-security-backend
-/ee/app/models/security/orchestration_policy_configuration.rb @gitlab-org/protect/container-security-backend
-/ee/spec/models/security/orchestration_policy_configuration_spec.rb @gitlab-org/protect/container-security-backend
-/app/models/clusters/applications/cilium.rb @gitlab-org/protect/container-security-backend
-/spec/models/clusters/applications/cilium_spec.rb @gitlab-org/protect/container-security-backend
-/ee/app/services/security/orchestration/** @gitlab-org/protect/container-security-backend
-/ee/spec/services/security/orchestration/** @gitlab-org/protect/container-security-backend
+/ee/app/controllers/projects/threat_monitoring_controller.rb @gitlab-org/govern/security-policies-backend
+/ee/spec/controllers/projects/threat_monitoring_controller_spec.rb @gitlab-org/govern/container-security-backend
+/ee/app/controllers/projects/security/policies_controller.rb @gitlab-org/govern/security-policies-backend
+/ee/spec/requests/projects/security/policies_controller_spec.rb @gitlab-org/govern/security-policies-backend
+/ee/app/models/security/orchestration_policy_configuration.rb @gitlab-org/govern/security-policies-backend
+/ee/spec/models/security/orchestration_policy_configuration_spec.rb @gitlab-org/govern/security-policies-backend
+/app/models/clusters/applications/cilium.rb @gitlab-org/govern/security-policies-backend
+/spec/models/clusters/applications/cilium_spec.rb @gitlab-org/govern/security-policies-backend
+/ee/app/services/security/orchestration/** @gitlab-org/govern/security-policies-backend
+/ee/spec/services/security/orchestration/** @gitlab-org/govern/security-policies-backend
 
 ^[Code Owners]
 /ee/lib/gitlab/code_owners.rb @reprazent @kerrizor @garyh

.rubocop_todo/cop/user_admin.yml

@@ -52,7 +52,6 @@ Cop/UserAdmin:
   - lib/api/entities/ci/runner_details.rb
   - lib/api/groups.rb
   - lib/api/helpers.rb
-  - lib/api/personal_access_tokens.rb
   - lib/api/users.rb
   - lib/api/v3/github.rb
   - lib/constraints/admin_constrainer.rb

.rubocop_todo/layout/hash_alignment.yml

@@ -4,26 +4,6 @@ Layout/HashAlignment:
   Exclude:
     - 'ee/spec/lib/ee/gitlab/usage_data_spec.rb'
     - 'spec/controllers/projects/merge_requests_controller_spec.rb'
-    - 'spec/lib/gitlab/ci/config/external/mapper_spec.rb'
-    - 'spec/lib/gitlab/ci/lint_spec.rb'
-    - 'spec/lib/gitlab/ci/pipeline/seed/deployment_spec.rb'
-    - 'spec/lib/gitlab/ci/variables/builder_spec.rb'
-    - 'spec/lib/gitlab/ci/yaml_processor_spec.rb'
-    - 'spec/lib/gitlab/data_builder/issuable_spec.rb'
-    - 'spec/lib/gitlab/data_builder/note_spec.rb'
-    - 'spec/lib/gitlab/database/migration_helpers_spec.rb'
-    - 'spec/lib/gitlab/database/partitioning/sliding_list_strategy_spec.rb'
-    - 'spec/lib/gitlab/database/partitioning_migration_helpers/backfill_partitioned_table_spec.rb'
-    - 'spec/lib/gitlab/database_importers/self_monitoring/project/create_service_spec.rb'
-    - 'spec/lib/gitlab/diff/highlight_cache_spec.rb'
-    - 'spec/lib/gitlab/diff/lines_unfolder_spec.rb'
-    - 'spec/lib/gitlab/diff/position_spec.rb'
-    - 'spec/lib/gitlab/error_tracking/processor/context_payload_processor_spec.rb'
-    - 'spec/lib/gitlab/error_tracking/stack_trace_highlight_decorator_spec.rb'
-    - 'spec/lib/gitlab/etag_caching/middleware_spec.rb'
-    - 'spec/lib/gitlab/etag_caching/router/graphql_spec.rb'
-    - 'spec/lib/gitlab/grape_logging/formatters/lograge_with_timestamp_spec.rb'
-    - 'spec/lib/gitlab/import_export/attributes_finder_spec.rb'
     - 'spec/lib/gitlab/import_export/group/object_builder_spec.rb'
     - 'spec/lib/gitlab/import_export/group/relation_tree_restorer_spec.rb'
     - 'spec/lib/gitlab/import_export/project/relation_tree_restorer_spec.rb'

app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue

@@ -277,6 +277,7 @@ export default {
         v-model="variable.key"
         :token-list="$options.tokenList"
         :label-text="__('Key')"
+        data-testid="pipeline-form-ci-variable-key"
         data-qa-selector="ci_variable_key_field"
       />
 
@@ -293,6 +294,7 @@ export default {
           :state="variableValidationState"
           rows="3"
           max-rows="6"
+          data-testid="pipeline-form-ci-variable-value"
           data-qa-selector="ci_variable_value_field"
           class="gl-font-monospace!"
         />

app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_modal.vue

@@ -255,6 +255,7 @@ export default {
         v-model="key"
         :token-list="$options.tokenList"
         :label-text="__('Key')"
+        data-testid="pipeline-form-ci-variable-key"
         data-qa-selector="ci_variable_key_field"
       />
 
@@ -271,6 +272,7 @@ export default {
           :state="variableValidationState"
           rows="3"
           max-rows="6"
+          data-testid="pipeline-form-ci-variable-value"
           data-qa-selector="ci_variable_value_field"
           class="gl-font-monospace!"
         />

app/assets/javascripts/feature_flags/components/feature_flags.vue

@@ -163,7 +163,6 @@ export default {
           v-gl-modal="'configure-feature-flags'"
           variant="confirm"
           category="secondary"
-          data-qa-selector="configure_feature_flags_button"
           data-testid="ff-configure-button"
           class="gl-mb-3"
         >

app/assets/javascripts/graphql_shared/possible_types.json

@@ -140,6 +140,7 @@
     "WorkItemWidgetAssignees",
     "WorkItemWidgetDescription",
     "WorkItemWidgetHierarchy",
+    "WorkItemWidgetIteration",
     "WorkItemWidgetLabels",
     "WorkItemWidgetStartAndDueDate",
     "WorkItemWidgetVerificationStatus",

app/assets/javascripts/lib/utils/datetime/date_calculation_utility.js

@@ -142,9 +142,16 @@ export const dayInQuarter = (date, quarter) => {
 
 export const millisecondsPerDay = 1000 * 60 * 60 * 24;
 
-export const getDayDifference = (a, b) => {
-  const date1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
-  const date2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
+/**
+ * Calculates the number of days between 2 specified dates, excluding the current date
+ *
+ * @param {Date} startDate the earlier date that we will substract from the end date
+ * @param {Date} endDate the last date in the range
+ * @return {Number} number of days in between
+ */
+export const getDayDifference = (startDate, endDate) => {
+  const date1 = Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
+  const date2 = Date.UTC(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
 
   return Math.floor((date2 - date1) / millisecondsPerDay);
 };

app/assets/javascripts/members/components/modals/remove_member_modal.vue

@@ -88,7 +88,8 @@ export default {
     :action-primary="actionPrimary"
     :title="actionText"
     :visible="removeMemberModalVisible"
-    data-qa-selector="remove_member_modal_content"
+    data-qa-selector="remove_member_modal"
+    data-testid="remove-member-modal-content"
     @primary="submitForm"
     @hide="hideRemoveMemberModal"
   >

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -391,7 +391,11 @@ export default {
 };
 </script>
 <template>
-  <div class="prometheus-graphs" data-qa-selector="prometheus_graphs">
+  <div
+    class="prometheus-graphs"
+    data-qa-selector="prometheus_graphs_content"
+    data-testid="prometheus-graphs"
+  >
     <div>
       <gl-alert
         v-if="!isDeprecationNoticeDismissed"

app/assets/javascripts/monitoring/components/dashboard_header.vue

@@ -189,6 +189,7 @@ export default {
         ref="monitorEnvironmentsDropdown"
         class="flex-grow-1"
         data-qa-selector="environments_dropdown"
+        data-testid="environments-dropdown"
         toggle-class="dropdown-menu-toggle"
         menu-class="monitor-environment-dropdown-menu"
         :text="environmentDropdownText"

app/assets/javascripts/notes/components/discussion_actions.vue

@@ -59,6 +59,7 @@ export default {
         <resolve-discussion-button
           v-if="discussion.resolvable"
           data-qa-selector="resolve_discussion_button"
+          data-testid="resolve-discussion-button"
           :is-resolving="isResolving"
           :button-title="resolveButtonTitle"
           @onClick="$emit('resolve')"

app/assets/javascripts/notes/components/note_form.vue

@@ -423,7 +423,7 @@ export default {
               category="primary"
               variant="confirm"
               data-qa-selector="reply_comment_button"
-              class="gl-mr-3 js-vue-issue-save js-comment-button"
+              class="gl-sm-mr-3 gl-xs-mb-3 js-vue-issue-save js-comment-button"
               @click="handleUpdate()"
             >
               {{ saveButtonTitle }}
@@ -432,7 +432,7 @@ export default {
               v-if="discussion.resolvable"
               category="secondary"
               variant="default"
-              class="gl-mr-3 js-comment-resolve-button"
+              class="gl-sm-mr-3 gl-xs-mb-3 js-comment-resolve-button"
               @click.prevent="handleUpdate(true)"
             >
               {{ resolveButtonTitle }}

app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list.vue

@@ -98,7 +98,7 @@ export default {
     </div>
 
     <template v-else>
-      <div data-qa-selector="packages-table">
+      <div data-testid="packages-table">
         <packages-list-row
           v-for="packageEntity in list"
           :key="packageEntity.id"

app/assets/javascripts/packages_and_registries/infrastructure_registry/shared/package_list_row.vue

@@ -78,7 +78,7 @@ export default {
 </script>
 
 <template>
-  <list-item data-qa-selector="package_row" :disabled="disabledRow">
+  <list-item data-testid="package-row" :disabled="disabledRow">
     <template #left-primary>
       <div class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0">
         <gl-link

app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue

@@ -90,7 +90,7 @@ export default {
 </script>
 
 <template>
-  <list-item data-qa-selector="package_row">
+  <list-item data-testid="package-row">
     <template #left-primary>
       <div class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0">
         <router-link

app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue

@@ -151,7 +151,7 @@ export default {
         @primaryAction="showConfirmationModal"
         >{{ $options.i18n.errorMessageBodyAlert }}</gl-alert
       >
-      <div data-qa-selector="packages-table">
+      <div data-testid="packages-table">
         <packages-list-row
           v-for="packageEntity in list"
           :key="packageEntity.id"

app/assets/javascripts/pages/shared/wikis/components/wiki_content.vue

@@ -87,7 +87,7 @@ export default {
     v-else-if="!loadingContentFailed && !isLoadingContent"
     ref="content"
     data-qa-selector="wiki_page_content"
-    data-testid="wiki_page_content"
+    data-testid="wiki-page-content"
     class="js-wiki-page-content md"
     v-html="content /* eslint-disable-line vue/no-v-html */"
   ></div>

app/assets/javascripts/pipeline_new/components/legacy_pipeline_new_form.vue

+<script>
+import {
+  GlAlert,
+  GlIcon,
+  GlButton,
+  GlDropdown,
+  GlDropdownItem,
+  GlForm,
+  GlFormGroup,
+  GlFormInput,
+  GlFormTextarea,
+  GlLink,
+  GlSprintf,
+  GlLoadingIcon,
+  GlSafeHtmlDirective as SafeHtml,
+} from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
+import { uniqueId } from 'lodash';
+import Vue from 'vue';
+import axios from '~/lib/utils/axios_utils';
+import { backOff } from '~/lib/utils/common_utils';
+import httpStatusCodes from '~/lib/utils/http_status';
+import { redirectTo } from '~/lib/utils/url_utility';
+import { s__, __, n__ } from '~/locale';
+import {
+  VARIABLE_TYPE,
+  FILE_TYPE,
+  CONFIG_VARIABLES_TIMEOUT,
+  CC_VALIDATION_REQUIRED_ERROR,
+} from '../constants';
+import filterVariables from '../utils/filter_variables';
+import RefsDropdown from './refs_dropdown.vue';
+
+const i18n = {
+  variablesDescription: s__(
+    'Pipeline|Specify variable values to be used in this run. The values specified in %{linkStart}CI/CD settings%{linkEnd} will be used by default.',
+  ),
+  defaultError: __('Something went wrong on our end. Please try again.'),
+  refsLoadingErrorTitle: s__('Pipeline|Branches or tags could not be loaded.'),
+  submitErrorTitle: s__('Pipeline|Pipeline cannot be run.'),
+  warningTitle: __('The form contains the following warning:'),
+  maxWarningsSummary: __('%{total} warnings found: showing first %{warningsDisplayed}'),
+  removeVariableLabel: s__('CiVariables|Remove variable'),
+};
+
+export default {
+  typeOptions: {
+    [VARIABLE_TYPE]: __('Variable'),
+    [FILE_TYPE]: __('File'),
+  },
+  i18n,
+  formElementClasses: 'gl-mr-3 gl-mb-3 gl-flex-basis-quarter gl-flex-shrink-0 gl-flex-grow-0',
+  // this height value is used inline on the textarea to match the input field height
+  // it's used to prevent the overwrite if 'gl-h-7' or 'gl-h-7!' were used
+  textAreaStyle: { height: '32px' },
+  components: {
+    GlAlert,
+    GlIcon,
+    GlButton,
+    GlDropdown,
+    GlDropdownItem,
+    GlForm,
+    GlFormGroup,
+    GlFormInput,
+    GlFormTextarea,
+    GlLink,
+    GlSprintf,
+    GlLoadingIcon,
+    RefsDropdown,
+    CcValidationRequiredAlert: () =>
+      import('ee_component/billings/components/cc_validation_required_alert.vue'),
+  },
+  directives: { SafeHtml },
+  props: {
+    pipelinesPath: {
+      type: String,
+      required: true,
+    },
+    configVariablesPath: {
+      type: String,
+      required: true,
+    },
+    defaultBranch: {
+      type: String,
+      required: true,
+    },
+    projectId: {
+      type: String,
+      required: true,
+    },
+    settingsLink: {
+      type: String,
+      required: true,
+    },
+    fileParams: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    refParam: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    variableParams: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    maxWarnings: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      refValue: {
+        shortName: this.refParam,
+      },
+      form: {},
+      errorTitle: null,
+      error: null,
+      warnings: [],
+      totalWarnings: 0,
+      isWarningDismissed: false,
+      isLoading: false,
+      submitted: false,
+      ccAlertDismissed: false,
+    };
+  },
+  computed: {
+    overMaxWarningsLimit() {
+      return this.totalWarnings > this.maxWarnings;
+    },
+    warningsSummary() {
+      return n__('%d warning found:', '%d warnings found:', this.warnings.length);
+    },
+    summaryMessage() {
+      return this.overMaxWarningsLimit ? i18n.maxWarningsSummary : this.warningsSummary;
+    },
+    shouldShowWarning() {
+      return this.warnings.length > 0 && !this.isWarningDismissed;
+    },
+    refShortName() {
+      return this.refValue.shortName;
+    },
+    refFullName() {
+      return this.refValue.fullName;
+    },
+    variables() {
+      return this.form[this.refFullName]?.variables ?? [];
+    },
+    descriptions() {
+      return this.form[this.refFullName]?.descriptions ?? {};
+    },
+    ccRequiredError() {
+      return this.error === CC_VALIDATION_REQUIRED_ERROR && !this.ccAlertDismissed;
+    },
+  },
+  watch: {
+    refValue() {
+      this.loadConfigVariablesForm();
+    },
+  },
+  created() {
+    // this is needed until we add support for ref type in url query strings
+    // ensure default branch is called with full ref on load
+    // https://gitlab.com/gitlab-org/gitlab/-/issues/287815
+    if (this.refValue.shortName === this.defaultBranch) {
+      this.refValue.fullName = `refs/heads/${this.refValue.shortName}`;
+    }
+
+    this.loadConfigVariablesForm();
+  },
+  methods: {
+    addEmptyVariable(refValue) {
+      const { variables } = this.form[refValue];
+
+      const lastVar = variables[variables.length - 1];
+      if (lastVar?.key === '' && lastVar?.value === '') {
+        return;
+      }
+
+      variables.push({
+        uniqueId: uniqueId(`var-${refValue}`),
+        variable_type: VARIABLE_TYPE,
+        key: '',
+        value: '',
+      });
+    },
+    setVariable(refValue, type, key, value) {
+      const { variables } = this.form[refValue];
+
+      const variable = variables.find((v) => v.key === key);
+      if (variable) {
+        variable.type = type;
+        variable.value = value;
+      } else {
+        variables.push({
+          uniqueId: uniqueId(`var-${refValue}`),
+          key,
+          value,
+          variable_type: type,
+        });
+      }
+    },
+    setVariableType(key, type) {
+      const { variables } = this.form[this.refFullName];
+      const variable = variables.find((v) => v.key === key);
+      variable.variable_type = type;
+    },
+    setVariableParams(refValue, type, paramsObj) {
+      Object.entries(paramsObj).forEach(([key, value]) => {
+        this.setVariable(refValue, type, key, value);
+      });
+    },
+    removeVariable(index) {
+      this.variables.splice(index, 1);
+    },
+    canRemove(index) {
+      return index < this.variables.length - 1;
+    },
+    loadConfigVariablesForm() {
+      // Skip when variables already cached in `form`
+      if (this.form[this.refFullName]) {
+        return;
+      }
+
+      this.fetchConfigVariables(this.refFullName || this.refShortName)
+        .then(({ descriptions, params }) => {
+          Vue.set(this.form, this.refFullName, {
+            variables: [],
+            descriptions,
+          });
+
+          // Add default variables from yml
+          this.setVariableParams(this.refFullName, VARIABLE_TYPE, params);
+        })
+        .catch(() => {
+          Vue.set(this.form, this.refFullName, {
+            variables: [],
+            descriptions: {},
+          });
+        })
+        .finally(() => {
+          // Add/update variables, e.g. from query string
+          if (this.variableParams) {
+            this.setVariableParams(this.refFullName, VARIABLE_TYPE, this.variableParams);
+          }
+          if (this.fileParams) {
+            this.setVariableParams(this.refFullName, FILE_TYPE, this.fileParams);
+          }
+
+          // Adds empty var at the end of the form
+          this.addEmptyVariable(this.refFullName);
+        });
+    },
+    fetchConfigVariables(refValue) {
+      this.isLoading = true;
+
+      return backOff((next, stop) => {
+        axios
+          .get(this.configVariablesPath, {
+            params: {
+              sha: refValue,
+            },
+          })
+          .then(({ data, status }) => {
+            if (status === httpStatusCodes.NO_CONTENT) {
+              next();
+            } else {
+              this.isLoading = false;
+              stop(data);
+            }
+          })
+          .catch((error) => {
+            stop(error);
+          });
+      }, CONFIG_VARIABLES_TIMEOUT)
+        .then((data) => {
+          const params = {};
+          const descriptions = {};
+
+          Object.entries(data).forEach(([key, { value, description }]) => {
+            if (description) {
+              params[key] = value;
+              descriptions[key] = description;
+            }
+          });
+
+          return { params, descriptions };
+        })
+        .catch((error) => {
+          this.isLoading = false;
+
+          Sentry.captureException(error);
+
+          return { params: {}, descriptions: {} };
+        });
+    },
+    createPipeline() {
+      this.submitted = true;
+      this.ccAlertDismissed = false;
+
+      return axios
+        .post(this.pipelinesPath, {
+          // send shortName as fall back for query params
+          // https://gitlab.com/gitlab-org/gitlab/-/issues/287815
+          ref: this.refValue.fullName || this.refShortName,
+          variables_attributes: filterVariables(this.variables),
+        })
+        .then(({ data }) => {
+          redirectTo(`${this.pipelinesPath}/${data.id}`);
+        })
+        .catch((err) => {
+          // always re-enable submit button
+          this.submitted = false;
+
+          const {
+            errors = [],
+            warnings = [],
+            total_warnings: totalWarnings = 0,
+          } = err.response.data;
+          const [error] = errors;
+
+          this.reportError({
+            title: i18n.submitErrorTitle,
+            error,
+            warnings,
+            totalWarnings,
+          });
+        });
+    },
+    onRefsLoadingError(error) {
+      this.reportError({ title: i18n.refsLoadingErrorTitle });
+
+      Sentry.captureException(error);
+    },
+    reportError({ title = null, error = i18n.defaultError, warnings = [], totalWarnings = 0 }) {
+      this.errorTitle = title;
+      this.error = error;
+      this.warnings = warnings;
+      this.totalWarnings = totalWarnings;
+    },
+    dismissError() {
+      this.ccAlertDismissed = true;
+      this.error = null;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-form @submit.prevent="createPipeline">
+    <cc-validation-required-alert v-if="ccRequiredError" class="gl-pb-5" @dismiss="dismissError" />
+    <gl-alert
+      v-else-if="error"
+      :title="errorTitle"
+      :dismissible="false"
+      variant="danger"
+      class="gl-mb-4"
+      data-testid="run-pipeline-error-alert"
+    >
+      <span v-safe-html="error"></span>
+    </gl-alert>
+    <gl-alert
+      v-if="shouldShowWarning"
+      :title="$options.i18n.warningTitle"
+      variant="warning"
+      class="gl-mb-4"
+      data-testid="run-pipeline-warning-alert"
+      @dismiss="isWarningDismissed = true"
+    >
+      <details>
+        <summary>
+          <gl-sprintf :message="summaryMessage">
+            <template #total>
+              {{ totalWarnings }}
+            </template>
+            <template #warningsDisplayed>
+              {{ maxWarnings }}
+            </template>
+          </gl-sprintf>
+        </summary>
+        <p
+          v-for="(warning, index) in warnings"
+          :key="`warning-${index}`"
+          data-testid="run-pipeline-warning"
+        >
+          {{ warning }}
+        </p>
+      </details>
+    </gl-alert>
+    <gl-form-group :label="s__('Pipeline|Run for branch name or tag')">
+      <refs-dropdown v-model="refValue" @loadingError="onRefsLoadingError" />
+    </gl-form-group>
+
+    <gl-loading-icon v-if="isLoading" class="gl-mb-5" size="lg" />
+
+    <gl-form-group v-else :label="s__('Pipeline|Variables')">
+      <div
+        v-for="(variable, index) in variables"
+        :key="variable.uniqueId"
+        class="gl-mb-3 gl-ml-n3 gl-pb-2"
+        data-testid="ci-variable-row"
+        data-qa-selector="ci_variable_row_container"
+      >
+        <div
+          class="gl-display-flex gl-align-items-stretch gl-flex-direction-column gl-md-flex-direction-row"
+        >
+          <gl-dropdown
+            :text="$options.typeOptions[variable.variable_type]"
+            :class="$options.formElementClasses"
+            data-testid="pipeline-form-ci-variable-type"
+          >
+            <gl-dropdown-item
+              v-for="type in Object.keys($options.typeOptions)"
+              :key="type"
+              @click="setVariableType(variable.key, type)"
+            >
+              {{ $options.typeOptions[type] }}
+            </gl-dropdown-item>
+          </gl-dropdown>
+          <gl-form-input
+            v-model="variable.key"
+            :placeholder="s__('CiVariables|Input variable key')"
+            :class="$options.formElementClasses"
+            data-testid="pipeline-form-ci-variable-key"
+            data-qa-selector="ci_variable_key_field"
+            @change="addEmptyVariable(refFullName)"
+          />
+          <gl-form-textarea
+            v-model="variable.value"
+            :placeholder="s__('CiVariables|Input variable value')"
+            class="gl-mb-3"
+            :style="$options.textAreaStyle"
+            :no-resize="false"
+            data-testid="pipeline-form-ci-variable-value"
+            data-qa-selector="ci_variable_value_field"
+          />
+
+          <template v-if="variables.length > 1">
+            <gl-button
+              v-if="canRemove(index)"
+              class="gl-md-ml-3 gl-mb-3"
+              data-testid="remove-ci-variable-row"
+              variant="danger"
+              category="secondary"
+              :aria-label="$options.i18n.removeVariableLabel"
+              @click="removeVariable(index)"
+            >
+              <gl-icon class="gl-mr-0! gl-display-none gl-md-display-block" name="clear" />
+              <span class="gl-md-display-none">{{ $options.i18n.removeVariableLabel }}</span>
+            </gl-button>
+            <gl-button
+              v-else
+              class="gl-md-ml-3 gl-mb-3 gl-display-none gl-md-display-block gl-visibility-hidden"
+              icon="clear"
+              :aria-label="$options.i18n.removeVariableLabel"
+            />
+          </template>
+        </div>
+        <div v-if="descriptions[variable.key]" class="gl-text-gray-500 gl-mb-3">
+          {{ descriptions[variable.key] }}
+        </div>
+      </div>
+
+      <template #description
+        ><gl-sprintf :message="$options.i18n.variablesDescription">
+          <template #link="{ content }">
+            <gl-link :href="settingsLink">{{ content }}</gl-link>
+          </template>
+        </gl-sprintf></template
+      >
+    </gl-form-group>
+    <div class="gl-pt-5 gl-display-flex">
+      <gl-button
+        type="submit"
+        category="primary"
+        variant="confirm"
+        class="js-no-auto-disable gl-mr-3"
+        data-qa-selector="run_pipeline_button"
+        data-testid="run_pipeline_button"
+        :disabled="submitted"
+        >{{ s__('Pipeline|Run pipeline') }}</gl-button
+      >
+      <gl-button :href="pipelinesPath">{{ __('Cancel') }}</gl-button>
+    </div>
+  </gl-form>
+</template>

app/assets/javascripts/pipeline_new/index.js

 import Vue from 'vue';
+import LegacyPipelineNewForm from './components/legacy_pipeline_new_form.vue';
 import PipelineNewForm from './components/pipeline_new_form.vue';
 
-export default () => {
-  const el = document.getElementById('js-new-pipeline');
+const mountLegacyPipelineNewForm = (el) => {
   const {
     // provide/inject
     projectRefsEndpoint,
 
     // props
-    projectId,
-    pipelinesPath,
     configVariablesPath,
     defaultBranch,
+    fileParam,
+    maxWarnings,
+    pipelinesPath,
+    projectId,
     refParam,
+    settingsLink,
     varParam,
+  } = el.dataset;
+
+  const variableParams = JSON.parse(varParam);
+  const fileParams = JSON.parse(fileParam);
+
+  return new Vue({
+    el,
+    provide: {
+      projectRefsEndpoint,
+    },
+    render(createElement) {
+      return createElement(LegacyPipelineNewForm, {
+        props: {
+          configVariablesPath,
+          defaultBranch,
+          fileParams,
+          maxWarnings: Number(maxWarnings),
+          pipelinesPath,
+          projectId,
+          refParam,
+          settingsLink,
+          variableParams,
+        },
+      });
+    },
+  });
+};
+
+const mountPipelineNewForm = (el) => {
+  const {
+    // provide/inject
+    projectRefsEndpoint,
+
+    // props
+    configVariablesPath,
+    defaultBranch,
     fileParam,
-    settingsLink,
     maxWarnings,
+    pipelinesPath,
+    projectId,
+    refParam,
+    settingsLink,
+    varParam,
   } = el.dataset;
 
   const variableParams = JSON.parse(varParam);
   const fileParams = JSON.parse(fileParam);
 
+  // TODO: add apolloProvider
+
   return new Vue({
     el,
     provide: {
@@ -30,17 +75,27 @@ export default () => {
     render(createElement) {
       return createElement(PipelineNewForm, {
         props: {
-          projectId,
-          pipelinesPath,
           configVariablesPath,
           defaultBranch,
-          refParam,
-          variableParams,
           fileParams,
-          settingsLink,
           maxWarnings: Number(maxWarnings),
+          pipelinesPath,
+          projectId,
+          refParam,
+          settingsLink,
+          variableParams,
         },
       });
     },
   });
 };
+
+export default () => {
+  const el = document.getElementById('js-new-pipeline');
+
+  if (gon.features?.runPipelineGraphql) {
+    mountPipelineNewForm(el);
+  } else {
+    mountLegacyPipelineNewForm(el);
+  }
+};