Add latest changes from gitlab-org/gitlab@master

24 files changed, 175 insertions, 127 deletions

diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
index 428291f2313..e88e0a3a344 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
@@ -16,7 +16,7 @@ import {
 import * as Sentry from '@sentry/browser';
 import { isEqual, isEmpty, omit } from 'lodash';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-import { PROMO_URL } from 'jh_else_ce/lib/utils/url_utility';
+import { PROMO_URL, DOCS_URL_IN_EE_DIR } from 'jh_else_ce/lib/utils/url_utility';
 import {
   integrationTypes,
   integrationSteps,
@@ -38,6 +38,7 @@ export default {
   placeholders: {
     prometheus: targetPrometheusUrlPlaceholder,
   },
+  incidentManagementDocsLink: `${DOCS_URL_IN_EE_DIR}/operations/incident_management/integrations.html#configuration`,
   JSON_VALIDATE_DELAY,
   typeSet,
   integrationSteps,
@@ -617,7 +618,7 @@ export default {
       >
         <alert-settings-form-help-block
           :message="viewCredentialsHelpMsg"
-          link="https://docs.gitlab.com/ee/operations/incident_management/integrations.html#configuration"
+          :link="$options.incidentManagementDocsLink"
         />
 
         <gl-form-group id="integration-webhook">
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/drawer/cards/first_pipeline_card.vue b/app/assets/javascripts/ci/pipeline_editor/components/drawer/cards/first_pipeline_card.vue
index 0b57433e894..8d670cb5389 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/drawer/cards/first_pipeline_card.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/drawer/cards/first_pipeline_card.vue
@@ -2,6 +2,7 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import Tracking from '~/tracking';
+import { DOCS_URL } from 'jh_else_ce/lib/utils/url_utility';
 import { pipelineEditorTrackingOptions } from '../../../constants';
 
 export default {
@@ -34,7 +35,7 @@ export default {
       this.track(actions.helpDrawerLinks.runners, { label });
     },
   },
-  RUNNER_HELP_URL: 'https://docs.gitlab.com/runner/register/index.html',
+  RUNNER_HELP_URL: `${DOCS_URL}/runner/register/index.html`,
 };
 </script>
 <template>
diff --git a/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue
index 6695c6179cf..cac0140931b 100644
--- a/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue
+++ b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue
@@ -58,6 +58,9 @@ export default {
     pipelinesPath: {
       default: '',
     },
+    newSchedulePath: {
+      default: '',
+    },
   },
   apollo: {
     schedules: {
@@ -289,7 +292,12 @@ export default {
       </gl-tab>
 
       <template #tabs-end>
-        <gl-button variant="confirm" class="gl-ml-auto" data-testid="new-schedule-button">
+        <gl-button
+          :href="newSchedulePath"
+          variant="confirm"
+          class="gl-ml-auto"
+          data-testid="new-schedule-button"
+        >
           {{ $options.i18n.newSchedule }}
         </gl-button>
       </template>
diff --git a/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules_empty_state.vue b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules_empty_state.vue
index ab249dc61d1..fbdb60f61f1 100644
--- a/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules_empty_state.vue
+++ b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules_empty_state.vue
@@ -26,6 +26,11 @@ export default {
     GlLink,
     GlSprintf,
   },
+  inject: {
+    newSchedulePath: {
+      default: '',
+    },
+  },
   computed: {
     schedulesHelpPath() {
       return helpPagePath('ci/pipelines/schedules');
@@ -37,7 +42,7 @@ export default {
   <gl-empty-state
     :svg-path="$options.SCHEDULE_MD_SVG_URL"
     :primary-button-text="$options.i18n.createNew"
-    primary-button-link="#"
+    :primary-button-link="newSchedulePath"
   >
     <template #title>
       <h3>
diff --git a/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules_form.vue b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules_form.vue
index 367b1812a27..31500b919f3 100644
--- a/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules_form.vue
+++ b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules_form.vue
@@ -8,16 +8,15 @@ import {
   GlFormGroup,
   GlFormInput,
   GlFormTextarea,
-  GlLink,
-  GlSprintf,
 } from '@gitlab/ui';
-import { uniqueId } from 'lodash';
-import Vue from 'vue';
 import { __, s__ } from '~/locale';
+import { createAlert } from '~/alert';
+import { visitUrl } from '~/lib/utils/url_utility';
 import { REF_TYPE_BRANCHES, REF_TYPE_TAGS } from '~/ref/constants';
 import RefSelector from '~/ref/components/ref_selector.vue';
 import TimezoneDropdown from '~/vue_shared/components/timezone_dropdown/timezone_dropdown.vue';
 import IntervalPatternInput from '~/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue';
+import createPipelineScheduleMutation from '../graphql/mutations/create_pipeline_schedule.mutation.graphql';
 import { VARIABLE_TYPE, FILE_TYPE } from '../constants';
 
 export default {
@@ -30,8 +29,6 @@ export default {
     GlFormGroup,
     GlFormInput,
     GlFormTextarea,
-    GlLink,
-    GlSprintf,
     RefSelector,
     TimezoneDropdown,
     IntervalPatternInput,
@@ -44,6 +41,7 @@ export default {
     'cronTimezone',
     'dailyLimit',
     'settingsLink',
+    'schedulesPath',
   ],
   props: {
     timezoneData: {
@@ -55,24 +53,19 @@ export default {
       required: false,
       default: '',
     },
+    editing: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
-      refValue: {
-        shortName: this.refParam,
-        // 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
-        fullName: this.refParam === this.defaultBranch ? `refs/heads/${this.refParam}` : undefined,
-      },
+      cronValue: this.cron,
       description: '',
       scheduleRef: this.defaultBranch,
       activated: true,
       timezone: this.cronTimezone,
-      formCiVariables: {},
-      // TODO: Add the GraphQL query to help populate the predefined variables
-      // app/assets/javascripts/ci/pipeline_new/components/pipeline_new_form.vue#131
-      predefinedValueOptions: {},
+      variables: [],
     };
   },
   i18n: {
@@ -91,6 +84,9 @@ export default {
     ),
     removeVariableLabel: s__('CiVariables|Remove variable'),
     variables: s__('Pipeline|Variables'),
+    scheduleCreateError: s__(
+      'PipelineSchedules|An error occurred while creating the pipeline schedule.',
+    ),
   },
   typeOptions: {
     [VARIABLE_TYPE]: __('Variable'),
@@ -103,15 +99,6 @@ export default {
         dropdownHeader: this.$options.i18n.targetBranchTag,
       };
     },
-    refFullName() {
-      return this.refValue.fullName;
-    },
-    variables() {
-      return this.formCiVariables[this.refFullName]?.variables ?? [];
-    },
-    descriptions() {
-      return this.formCiVariables[this.refFullName]?.descriptions ?? {};
-    },
     typeOptionsListbox() {
       return [
         {
@@ -127,51 +114,84 @@ export default {
     getEnabledRefTypes() {
       return [REF_TYPE_BRANCHES, REF_TYPE_TAGS];
     },
+    preparedVariables() {
+      return this.variables.filter((variable) => variable.key !== '');
+    },
   },
   created() {
-    Vue.set(this.formCiVariables, this.refFullName, {
-      variables: [],
-      descriptions: {},
-    });
-
-    this.addEmptyVariable(this.refFullName);
+    this.addEmptyVariable();
   },
   methods: {
-    addEmptyVariable(refValue) {
-      const { variables } = this.formCiVariables[refValue];
+    addEmptyVariable() {
+      const lastVar = this.variables[this.variables.length - 1];
 
-      const lastVar = variables[variables.length - 1];
       if (lastVar?.key === '' && lastVar?.value === '') {
         return;
       }
 
-      variables.push({
-        uniqueId: uniqueId(`var-${refValue}`),
-        variable_type: VARIABLE_TYPE,
+      this.variables.push({
+        variableType: VARIABLE_TYPE,
         key: '',
         value: '',
       });
     },
     setVariableAttribute(key, attribute, value) {
-      const { variables } = this.formCiVariables[this.refFullName];
-      const variable = variables.find((v) => v.key === key);
+      const variable = this.variables.find((v) => v.key === key);
       variable[attribute] = value;
     },
-    shouldShowValuesDropdown(key) {
-      return this.predefinedValueOptions[key]?.length > 1;
-    },
     removeVariable(index) {
       this.variables.splice(index, 1);
     },
     canRemove(index) {
       return index < this.variables.length - 1;
     },
+    scheduleHandler() {
+      if (!this.editing) {
+        this.createPipelineSchedule();
+      }
+    },
+    async createPipelineSchedule() {
+      try {
+        const {
+          data: {
+            pipelineScheduleCreate: { errors },
+          },
+        } = await this.$apollo.mutate({
+          mutation: createPipelineScheduleMutation,
+          variables: {
+            input: {
+              description: this.description,
+              cron: this.cronValue,
+              cronTimezone: this.timezone,
+              ref: this.scheduleRef,
+              variables: this.preparedVariables,
+              active: this.activated,
+              projectPath: this.fullPath,
+            },
+          },
+        });
+
+        if (errors.length > 0) {
+          createAlert({ message: errors[0] });
+        } else {
+          visitUrl(this.schedulesPath);
+        }
+      } catch {
+        createAlert({ message: this.$options.i18n.scheduleCreateError });
+      }
+    },
+    setCronValue(cron) {
+      this.cronValue = cron;
+    },
+    setTimezone(timezone) {
+      this.timezone = timezone.identifier || '';
+    },
   },
 };
 </script>
 
 <template>
-  <div class="col-lg-8">
+  <div class="col-lg-8 gl-pl-0">
     <gl-form>
       <!--Description-->
       <gl-form-group :label="$options.i18n.description" label-for="schedule-description">
@@ -181,6 +201,7 @@ export default {
           type="text"
           :placeholder="$options.i18n.shortDescriptionPipeline"
           data-testid="schedule-description"
+          required
         />
       </gl-form-group>
       <!--Interval Pattern-->
@@ -190,6 +211,7 @@ export default {
           :initial-cron-interval="cron"
           :daily-limit="dailyLimit"
           :send-native-errors="false"
+          @cronValue="setCronValue"
         />
       </gl-form-group>
       <!--Timezone-->
@@ -199,12 +221,14 @@ export default {
           :value="timezone"
           :timezone-data="timezoneData"
           name="schedule-timezone"
+          @input="setTimezone"
         />
       </gl-form-group>
       <!--Branch/Tag Selector-->
       <gl-form-group :label="$options.i18n.targetBranchTag" label-for="schedule-target-branch-tag">
         <ref-selector
           id="schedule-target-branch-tag"
+          v-model="scheduleRef"
           :enabled-ref-types="getEnabledRefTypes"
           :project-id="projectId"
           :value="scheduleRef"
@@ -217,7 +241,7 @@ export default {
       <gl-form-group :label="$options.i18n.variables">
         <div
           v-for="(variable, index) in variables"
-          :key="variable.uniqueId"
+          :key="`var-${index}`"
           class="gl-mb-3 gl-pb-2"
           data-testid="ci-variable-row"
           data-qa-selector="ci_variable_row_container"
@@ -226,14 +250,14 @@ export default {
             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]"
+              :text="$options.typeOptions[variable.variableType]"
               :class="$options.formElementClasses"
               data-testid="pipeline-form-ci-variable-type"
             >
               <gl-dropdown-item
                 v-for="type in Object.keys($options.typeOptions)"
                 :key="type"
-                @click="setVariableAttribute(variable.key, 'variable_type', type)"
+                @click="setVariableAttribute(variable.key, 'variableType', type)"
               >
                 {{ $options.typeOptions[type] }}
               </gl-dropdown-item>
@@ -244,26 +268,10 @@ export default {
               :class="$options.formElementClasses"
               data-testid="pipeline-form-ci-variable-key"
               data-qa-selector="ci_variable_key_field"
-              @change="addEmptyVariable(refFullName)"
+              @change="addEmptyVariable()"
             />
-            <gl-dropdown
-              v-if="shouldShowValuesDropdown(variable.key)"
-              :text="variable.value"
-              :class="$options.formElementClasses"
-              class="gl-flex-grow-1 gl-mr-0!"
-              data-testid="pipeline-form-ci-variable-value-dropdown"
-            >
-              <gl-dropdown-item
-                v-for="value in predefinedValueOptions[variable.key]"
-                :key="value"
-                data-testid="pipeline-form-ci-variable-value-dropdown-items"
-                @click="setVariableAttribute(variable.key, 'value', value)"
-              >
-                {{ value }}
-              </gl-dropdown-item>
-            </gl-dropdown>
+
             <gl-form-textarea
-              v-else
               v-model="variable.value"
               :placeholder="s__('CiVariables|Input variable value')"
               class="gl-mb-3 gl-h-7!"
@@ -292,30 +300,19 @@ export default {
               />
             </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>
       <!--Activated-->
-      <gl-form-checkbox id="schedule-active" v-model="activated" class="gl-mb-3">{{
-        $options.i18n.activated
-      }}</gl-form-checkbox>
+      <gl-form-checkbox id="schedule-active" v-model="activated" class="gl-mb-3">
+        {{ $options.i18n.activated }}
+      </gl-form-checkbox>
 
-      <gl-button type="submit" variant="confirm" data-testid="schedule-submit-button">{{
-        $options.i18n.savePipelineSchedule
-      }}</gl-button>
-      <gl-button type="reset" data-testid="schedule-cancel-button">{{
-        $options.i18n.cancel
-      }}</gl-button>
+      <gl-button variant="confirm" data-testid="schedule-submit-button" @click="scheduleHandler">
+        {{ $options.i18n.savePipelineSchedule }}
+      </gl-button>
+      <gl-button :href="schedulesPath" data-testid="schedule-cancel-button">
+        {{ $options.i18n.cancel }}
+      </gl-button>
     </gl-form>
   </div>
 </template>
diff --git a/app/assets/javascripts/ci/pipeline_schedules/components/table/cells/pipeline_schedule_actions.vue b/app/assets/javascripts/ci/pipeline_schedules/components/table/cells/pipeline_schedule_actions.vue
index 5bd58bfd95d..a56da06f5da 100644
--- a/app/assets/javascripts/ci/pipeline_schedules/components/table/cells/pipeline_schedule_actions.vue
+++ b/app/assets/javascripts/ci/pipeline_schedules/components/table/cells/pipeline_schedule_actions.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlButton, GlButtonGroup, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 
 export const i18n = {
   playTooltip: s__('PipelineSchedules|Run pipeline schedule'),
@@ -44,6 +45,11 @@ export default {
     canRemove() {
       return this.schedule.userPermissions.adminPipelineSchedule;
     },
+    editPathWithIdParam() {
+      const id = getIdFromGraphQLId(this.schedule.id);
+
+      return `${this.schedule.editPath}?id=${id}`;
+    },
   },
 };
 </script>
@@ -67,7 +73,14 @@ export default {
         data-testid="take-ownership-pipeline-schedule-btn"
         @click="$emit('showTakeOwnershipModal', schedule.id)"
       />
-      <gl-button v-if="canUpdate" v-gl-tooltip :title="$options.i18n.editTooltip" icon="pencil" />
+      <gl-button
+        v-if="canUpdate"
+        v-gl-tooltip
+        :href="editPathWithIdParam"
+        :title="$options.i18n.editTooltip"
+        icon="pencil"
+        data-testid="edit-pipeline-schedule-btn"
+      />
       <gl-button
         v-if="canRemove"
         v-gl-tooltip
diff --git a/app/assets/javascripts/ci/pipeline_schedules/constants.js b/app/assets/javascripts/ci/pipeline_schedules/constants.js
index b4ab1143f60..be6fb316245 100644
--- a/app/assets/javascripts/ci/pipeline_schedules/constants.js
+++ b/app/assets/javascripts/ci/pipeline_schedules/constants.js
@@ -1,2 +1,2 @@
-export const VARIABLE_TYPE = 'env_var';
-export const FILE_TYPE = 'file';
+export const VARIABLE_TYPE = 'ENV_VAR';
+export const FILE_TYPE = 'FILE';
diff --git a/app/assets/javascripts/ci/pipeline_schedules/graphql/mutations/create_pipeline_schedule.mutation.graphql b/app/assets/javascripts/ci/pipeline_schedules/graphql/mutations/create_pipeline_schedule.mutation.graphql
new file mode 100644
index 00000000000..0bea1bb8360
--- /dev/null
+++ b/app/assets/javascripts/ci/pipeline_schedules/graphql/mutations/create_pipeline_schedule.mutation.graphql
@@ -0,0 +1,6 @@
+mutation createPipelineSchedule($input: PipelineScheduleCreateInput!) {
+  pipelineScheduleCreate(input: $input) {
+    clientMutationId
+    errors
+  }
+}
diff --git a/app/assets/javascripts/ci/pipeline_schedules/graphql/queries/get_pipeline_schedules.query.graphql b/app/assets/javascripts/ci/pipeline_schedules/graphql/queries/get_pipeline_schedules.query.graphql
index 6167c7dc577..0e091afb9d7 100644
--- a/app/assets/javascripts/ci/pipeline_schedules/graphql/queries/get_pipeline_schedules.query.graphql
+++ b/app/assets/javascripts/ci/pipeline_schedules/graphql/queries/get_pipeline_schedules.query.graphql
@@ -11,6 +11,7 @@ query getPipelineSchedulesQuery($projectPath: ID!, $status: PipelineScheduleStat
         id
         description
         forTag
+        editPath
         refPath
         refForDisplay
         lastPipeline {
diff --git a/app/assets/javascripts/ci/pipeline_schedules/mount_pipeline_schedules_app.js b/app/assets/javascripts/ci/pipeline_schedules/mount_pipeline_schedules_app.js
index 8bca4f85e9f..71db9400909 100644
--- a/app/assets/javascripts/ci/pipeline_schedules/mount_pipeline_schedules_app.js
+++ b/app/assets/javascripts/ci/pipeline_schedules/mount_pipeline_schedules_app.js
@@ -18,7 +18,7 @@ export default () => {
     return false;
   }
 
-  const { fullPath, pipelinesPath } = containerEl.dataset;
+  const { fullPath, pipelinesPath, newSchedulePath, schedulesPath } = containerEl.dataset;
 
   return new Vue({
     el: containerEl,
@@ -27,6 +27,8 @@ export default () => {
     provide: {
       fullPath,
       pipelinesPath,
+      newSchedulePath,
+      schedulesPath,
     },
     render(createElement) {
       return createElement(PipelineSchedules);
diff --git a/app/assets/javascripts/ci/pipeline_schedules/mount_pipeline_schedules_form_app.js b/app/assets/javascripts/ci/pipeline_schedules/mount_pipeline_schedules_form_app.js
index 445161f99cb..749e3d0a69f 100644
--- a/app/assets/javascripts/ci/pipeline_schedules/mount_pipeline_schedules_form_app.js
+++ b/app/assets/javascripts/ci/pipeline_schedules/mount_pipeline_schedules_form_app.js
@@ -9,7 +9,7 @@ const apolloProvider = new VueApollo({
   defaultClient: createDefaultClient(),
 });
 
-export default (selector) => {
+export default (selector, editing = false) => {
   const containerEl = document.querySelector(selector);
 
   if (!containerEl) {
@@ -25,6 +25,7 @@ export default (selector) => {
     projectId,
     defaultBranch,
     settingsLink,
+    schedulesPath,
   } = containerEl.dataset;
 
   return new Vue({
@@ -39,12 +40,14 @@ export default (selector) => {
       cronTimezone: cronTimezone ?? '',
       cron: cron ?? '',
       settingsLink,
+      schedulesPath,
     },
     render(createElement) {
       return createElement(PipelineSchedulesForm, {
         props: {
           timezoneData: JSON.parse(timezoneData),
           refParam: defaultBranch,
+          editing,
         },
       });
     },
diff --git a/app/assets/javascripts/ci/runner/constants.js b/app/assets/javascripts/ci/runner/constants.js
index 452b5a58b6e..1a45135d869 100644
--- a/app/assets/javascripts/ci/runner/constants.js
+++ b/app/assets/javascripts/ci/runner/constants.js
@@ -1,4 +1,5 @@
 import { __, s__ } from '~/locale';
+import { DOCS_URL } from 'jh_else_ce/lib/utils/url_utility';
 
 export const RUNNER_TYPENAME = 'CiRunner'; // __typename
 
@@ -268,12 +269,10 @@ export const DEFAULT_PLATFORM = LINUX_PLATFORM;
 
 // Runner docs are in a separate repository and are not shipped with GitLab
 // they are rendered as external URLs.
-export const INSTALL_HELP_URL = 'https://docs.gitlab.com/runner/install';
-export const EXECUTORS_HELP_URL = 'https://docs.gitlab.com/runner/executors/';
-export const SERVICE_COMMANDS_HELP_URL =
-  'https://docs.gitlab.com/runner/commands/#service-related-commands';
-export const CHANGELOG_URL = 'https://gitlab.com/gitlab-org/gitlab-runner/blob/main/CHANGELOG.md';
-export const DOCKER_HELP_URL = 'https://docs.gitlab.com/runner/install/docker.html';
-export const KUBERNETES_HELP_URL = 'https://docs.gitlab.com/runner/install/kubernetes.html';
-export const RUNNER_MANAGERS_HELP_URL =
-  'https://docs.gitlab.com/runner/fleet_scaling/#workers-executors-and-autoscaling-capabilities';
+export const INSTALL_HELP_URL = `${DOCS_URL}/runner/install`;
+export const EXECUTORS_HELP_URL = `${DOCS_URL}/runner/executors/`;
+export const SERVICE_COMMANDS_HELP_URL = `${DOCS_URL}/runner/commands/#service-related-commands`;
+export const CHANGELOG_URL = `https://gitlab.com/gitlab-org/gitlab-runner/blob/main/CHANGELOG.md`;
+export const DOCKER_HELP_URL = `${DOCS_URL}/runner/install/docker.html`;
+export const KUBERNETES_HELP_URL = `${DOCS_URL}/runner/install/kubernetes.html`;
+export const RUNNER_MANAGERS_HELP_URL = `${DOCS_URL}/runner/fleet_scaling/#workers-executors-and-autoscaling-capabilities`;
diff --git a/app/assets/javascripts/environments/components/stop_environment_modal.vue b/app/assets/javascripts/environments/components/stop_environment_modal.vue
index 95ece2b653e..b583694e154 100644
--- a/app/assets/javascripts/environments/components/stop_environment_modal.vue
+++ b/app/assets/javascripts/environments/components/stop_environment_modal.vue
@@ -1,10 +1,14 @@
 <script>
 import { GlSprintf, GlTooltipDirective, GlModal } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
+import { DOCS_URL_IN_EE_DIR } from 'jh_else_ce/lib/utils/url_utility';
 import eventHub from '../event_hub';
 import stopEnvironmentMutation from '../graphql/mutations/stop_environment.mutation.graphql';
 
 export default {
+  yamlDocsLink: `${DOCS_URL_IN_EE_DIR}/ee/ci/yaml/`,
+  stoppingEnvironmentDocsLink: `${DOCS_URL_IN_EE_DIR}/environments/#stopping-an-environment`,
+
   id: 'stop-environment-modal',
   name: 'StopEnvironmentModal',
 
@@ -98,18 +102,15 @@ export default {
             <strong>{{ content }}</strong>
           </template>
           <template #ciConfigLink="{ content }">
-            <a href="https://docs.gitlab.com/ee/ci/yaml/" target="_blank" rel="noopener noreferrer">
+            <a :href="$options.yamlDocsLink" target="_blank" rel="noopener noreferrer">
               {{ content }}</a
             >
           </template>
         </gl-sprintf>
       </p>
-      <a
-        href="https://docs.gitlab.com/ee/ci/environments/#stopping-an-environment"
-        target="_blank"
-        rel="noopener noreferrer"
-        >{{ s__('Environments|Learn more about stopping environments') }}</a
-      >
+      <a :href="$options.stoppingEnvironmentDocsLink" target="_blank" rel="noopener noreferrer">{{
+        s__('Environments|Learn more about stopping environments')
+      }}</a>
     </div>
   </gl-modal>
 </template>
diff --git a/app/assets/javascripts/gitlab_version_check/constants.js b/app/assets/javascripts/gitlab_version_check/constants.js
index 049397148ab..5cef29d73f3 100644
--- a/app/assets/javascripts/gitlab_version_check/constants.js
+++ b/app/assets/javascripts/gitlab_version_check/constants.js
@@ -1,4 +1,5 @@
 import { helpPagePath } from '~/helpers/help_page_helper';
+import { PROMO_URL } from 'jh_else_ce/lib/utils/url_utility';
 
 export const STATUS_TYPES = {
   SUCCESS: 'success',
@@ -8,7 +9,7 @@ export const STATUS_TYPES = {
 
 export const UPGRADE_DOCS_URL = helpPagePath('update/index');
 
-export const ABOUT_RELEASES_PAGE = 'https://about.gitlab.com/releases/categories/releases/';
+export const ABOUT_RELEASES_PAGE = `${PROMO_URL}/releases/categories/releases/`;
 
 export const ALERT_MODAL_ID = 'security-patch-upgrade-alert-modal';
 
diff --git a/app/assets/javascripts/google_cloud/service_accounts/list.vue b/app/assets/javascripts/google_cloud/service_accounts/list.vue
index c9d9a9a3e8c..4ac788aafbe 100644
--- a/app/assets/javascripts/google_cloud/service_accounts/list.vue
+++ b/app/assets/javascripts/google_cloud/service_accounts/list.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlAlert, GlButton, GlEmptyState, GlLink, GlSprintf, GlTable } from '@gitlab/ui';
-import { setUrlParams } from '~/lib/utils/url_utility';
+import { setUrlParams, DOCS_URL_IN_EE_DIR } from 'jh_else_ce/lib/utils/url_utility';
 import { __ } from '~/locale';
 
 const GOOGLE_CONSOLE_URL = 'https://console.cloud.google.com/iam-admin/serviceaccounts';
@@ -49,6 +49,7 @@ export default {
     },
   },
   GOOGLE_CONSOLE_URL,
+  secretsDocsLink: `${DOCS_URL_IN_EE_DIR}/ci/secrets/`,
 };
 </script>
 
@@ -86,7 +87,7 @@ export default {
       <gl-alert class="gl-mt-5" :dismissible="false" variant="tip">
         <gl-sprintf :message="$options.i18n.secretManagersDescription">
           <template #docLink="{ content }">
-            <gl-link href="https://docs.gitlab.com/ee/ci/secrets/">
+            <gl-link :href="$options.secretsDocsLink">
               {{ content }}
             </gl-link>
           </template>
diff --git a/app/assets/javascripts/jobs/components/job/stuck_block.vue b/app/assets/javascripts/jobs/components/job/stuck_block.vue
index d7a26d22406..1a678ce69a8 100644
--- a/app/assets/javascripts/jobs/components/job/stuck_block.vue
+++ b/app/assets/javascripts/jobs/components/job/stuck_block.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlAlert, GlBadge, GlLink, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import { DOCS_URL } from 'jh_else_ce/lib/utils/url_utility';
 /**
  * Renders Stuck Runners block for job's view.
  */
@@ -31,7 +32,7 @@ export default {
       return this.tags.length > 0;
     },
     protectedBranchSettingsDocsLink() {
-      return 'https://docs.gitlab.com/runner/security/index.html#reduce-the-security-risk-of-using-privileged-containers';
+      return `${DOCS_URL}/runner/security/index.html#reduce-the-security-risk-of-using-privileged-containers`;
     },
     stuckData() {
       if (this.hasNoRunnersWithCorrespondingTags) {
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/edit/index.js b/app/assets/javascripts/pages/projects/pipeline_schedules/edit/index.js
index e2a782bc5d8..a51c2e9c47b 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/edit/index.js
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/edit/index.js
@@ -2,7 +2,7 @@ import initPipelineSchedulesFormApp from '~/ci/pipeline_schedules/mount_pipeline
 import initForm from '../shared/init_form';
 
 if (gon.features?.pipelineSchedulesVue) {
-  initPipelineSchedulesFormApp('#pipeline-schedules-form-edit');
+  initPipelineSchedulesFormApp('#pipeline-schedules-form-edit', true);
 } else {
   initForm();
 }
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
index eab4be4dcf1..a79f20d596c 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
@@ -10,6 +10,7 @@ import {
 import { getWeekdayNames } from '~/lib/utils/datetime_utility';
 import { __, s__, sprintf } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { DOCS_URL_IN_EE_DIR } from 'jh_else_ce/lib/utils/url_utility';
 
 const KEY_EVERY_DAY = 'everyDay';
 const KEY_EVERY_WEEK = 'everyWeek';
@@ -54,7 +55,7 @@ export default {
       inputNameAttribute: 'schedule[cron]',
       radioValue: this.initialCronInterval ? KEY_CUSTOM : KEY_EVERY_DAY,
       cronInterval: this.initialCronInterval,
-      cronSyntaxUrl: 'https://docs.gitlab.com/ee/topics/cron/',
+      cronSyntaxUrl: `${DOCS_URL_IN_EE_DIR}/topics/cron/`,
     };
   },
   computed: {
@@ -116,7 +117,7 @@ export default {
     },
   },
   watch: {
-    cronInterval() {
+    cronInterval(val) {
       // updates field validation state when model changes, as
       // glFieldError only updates on input.
       if (this.sendNativeErrors) {
@@ -124,6 +125,8 @@ export default {
           gl.pipelineScheduleFieldErrors.updateFormValidityState();
         });
       }
+
+      this.$emit('cronValue', val);
     },
     radioValue: {
       immediate: true,
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state/ios_templates.vue b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state/ios_templates.vue
index 8ff311e90e7..5208f9a3ce7 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state/ios_templates.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state/ios_templates.vue
@@ -2,7 +2,7 @@
 import { GlButton, GlCard, GlSprintf, GlLink, GlPopover, GlModalDirective } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
-import { mergeUrlParams } from '~/lib/utils/url_utility';
+import { mergeUrlParams, DOCS_URL } from '~/lib/utils/url_utility';
 import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue';
 import apolloProvider from '~/pipelines/graphql/provider';
 import CiTemplates from './ci_templates.vue';
@@ -31,7 +31,7 @@ export default {
   apolloProvider,
   iOSTemplateName: 'iOS-Fastlane',
   modalId: 'runner-instructions-modal',
-  runnerDocsLink: 'https://docs.gitlab.com/runner/install/osx',
+  runnerDocsLink: `${DOCS_URL}/runner/install/osx`,
   whatElseLink: helpPagePath('ci/index.md'),
   i18n: {
     title: s__('Pipelines|Get started with GitLab CI/CD'),
diff --git a/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue b/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue
index 916ff70a5ea..398a94356e2 100644
--- a/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue
+++ b/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue
@@ -4,10 +4,12 @@ import { __, n__, sprintf } from '~/locale';
 import { createAlert } from '~/alert';
 import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { TYPENAME_ISSUE } from '~/graphql_shared/constants';
+import { DOCS_URL_IN_EE_DIR } from 'jh_else_ce/lib/utils/url_utility';
 import getIssueCrmContactsQuery from '../../queries/get_issue_crm_contacts.query.graphql';
 import issueCrmContactsSubscription from '../../queries/issue_crm_contacts.subscription.graphql';
 
 export default {
+  crmDocsLink: `${DOCS_URL_IN_EE_DIR}/user/crm/`,
   components: {
     GlIcon,
     GlLink,
@@ -104,9 +106,7 @@ export default {
       <span> {{ contactCount }} </span>
     </div>
     <div class="hide-collapsed help-button gl-float-right">
-      <gl-link href="https://docs.gitlab.com/ee/user/crm/" target="_blank"
-        ><gl-icon name="question-o"
-      /></gl-link>
+      <gl-link :href="$options.crmDocsLink" target="_blank"><gl-icon name="question-o" /></gl-link>
     </div>
     <div class="title hide-collapsed gl-mb-2 gl-line-height-20 gl-font-weight-bold">
       {{ contactsLabel }}
diff --git a/app/assets/javascripts/surveys/merge_request_experience/app.vue b/app/assets/javascripts/surveys/merge_request_experience/app.vue
index 333059b5340..2dd658d62ea 100644
--- a/app/assets/javascripts/surveys/merge_request_experience/app.vue
+++ b/app/assets/javascripts/surveys/merge_request_experience/app.vue
@@ -6,6 +6,7 @@ import { s__, __ } from '~/locale';
 import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
 import SatisfactionRate from '~/surveys/components/satisfaction_rate.vue';
 import Tracking from '~/tracking';
+import { PROMO_URL } from 'jh_else_ce/lib/utils/url_utility';
 
 const steps = [
   {
@@ -50,6 +51,7 @@ export default {
     thanks: s__('MrSurvey|Thank you for your feedback!'),
   },
   gitlabLogo,
+  privacyLink: `${PROMO_URL}/privacy/`,
   data() {
     return {
       visible: false,
@@ -152,7 +154,7 @@ export default {
                 <template #link="{ content }">
                   <a
                     class="gl-text-decoration-underline gl-text-gray-500"
-                    href="https://about.gitlab.com/privacy/"
+                    :href="$options.privacyLink"
                     target="_blank"
                     rel="noreferrer nofollow"
                     v-text="content"
diff --git a/app/assets/javascripts/vue_merge_request_widget/constants.js b/app/assets/javascripts/vue_merge_request_widget/constants.js
index db237bc7439..a59f48fb8b2 100644
--- a/app/assets/javascripts/vue_merge_request_widget/constants.js
+++ b/app/assets/javascripts/vue_merge_request_widget/constants.js
@@ -1,5 +1,6 @@
 import { s__ } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
+import { DOCS_URL_IN_EE_DIR } from 'jh_else_ce/lib/utils/url_utility';
 import { stateToComponentMap as classStateMap, stateKey } from './stores/state_maps';
 
 export const FOUR_MINUTES_IN_MS = 1000 * 60 * 4;
@@ -26,7 +27,7 @@ export const SP_SHOW_TRACK_VALUE = 10;
 export const SP_HELP_CONTENT = s__(
   `mrWidget|GitLab %{linkStart}CI/CD can automatically build, test, and deploy your application.%{linkEnd} It only takes a few minutes to get started, and we can help you create a pipeline configuration file.`,
 );
-export const SP_HELP_URL = 'https://docs.gitlab.com/ee/ci/quick_start/';
+export const SP_HELP_URL = `${DOCS_URL_IN_EE_DIR}/ci/quick_start/`;
 export const SP_ICON_NAME = 'status_notfound';
 
 export const MERGE_ACTIVE_STATUS_PHRASES = [
diff --git a/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_docker_instructions.vue b/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_docker_instructions.vue
index ff7e803af2a..5d04fd1d8e7 100644
--- a/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_docker_instructions.vue
+++ b/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_docker_instructions.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlButton, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import { DOCS_URL } from 'jh_else_ce/lib/utils/url_utility';
 
 export default {
   components: {
@@ -16,7 +17,7 @@ export default {
     'Runners|To install Runner in a container follow the instructions described in the GitLab documentation',
   ),
   I18N_VIEW_INSTRUCTIONS: s__('Runners|View installation instructions'),
-  HELP_URL: 'https://docs.gitlab.com/runner/install/docker.html',
+  HELP_URL: `${DOCS_URL}/runner/install/docker.html`,
 };
 </script>
 <template>
diff --git a/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_kubernetes_instructions.vue b/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_kubernetes_instructions.vue
index ee41dab0cec..a769b4a6ad8 100644
--- a/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_kubernetes_instructions.vue
+++ b/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_kubernetes_instructions.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlButton, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import { DOCS_URL } from 'jh_else_ce/lib/utils/url_utility';
 
 export default {
   components: {
@@ -16,7 +17,7 @@ export default {
     'Runners|To install Runner in Kubernetes follow the instructions described in the GitLab documentation.',
   ),
   I18N_VIEW_INSTRUCTIONS: s__('Runners|View installation instructions'),
-  HELP_URL: 'https://docs.gitlab.com/runner/install/kubernetes.html',
+  HELP_URL: `${DOCS_URL}/runner/install/kubernetes.html`,
 };
 </script>
 <template>