Add latest changes from gitlab-org/gitlab@15-3-stable-eev15.3.0-rc42

21 files changed, 921 insertions, 144 deletions

diff --git a/app/assets/javascripts/ci_variable_list/components/ci_admin_variables.vue b/app/assets/javascripts/ci_variable_list/components/ci_admin_variables.vue
new file mode 100644
index 00000000000..83bad9eb518
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/components/ci_admin_variables.vue
@@ -0,0 +1,101 @@
+<script>
+import createFlash from '~/flash';
+import getAdminVariables from '../graphql/queries/variables.query.graphql';
+import {
+  ADD_MUTATION_ACTION,
+  DELETE_MUTATION_ACTION,
+  UPDATE_MUTATION_ACTION,
+  genericMutationErrorText,
+  variableFetchErrorText,
+} from '../constants';
+import addAdminVariable from '../graphql/mutations/admin_add_variable.mutation.graphql';
+import deleteAdminVariable from '../graphql/mutations/admin_delete_variable.mutation.graphql';
+import updateAdminVariable from '../graphql/mutations/admin_update_variable.mutation.graphql';
+import ciVariableSettings from './ci_variable_settings.vue';
+
+export default {
+  components: {
+    ciVariableSettings,
+  },
+  inject: ['endpoint'],
+  data() {
+    return {
+      adminVariables: [],
+      isInitialLoading: true,
+    };
+  },
+  apollo: {
+    adminVariables: {
+      query: getAdminVariables,
+      update(data) {
+        return data?.ciVariables?.nodes || [];
+      },
+      error() {
+        createFlash({ message: variableFetchErrorText });
+      },
+      watchLoading(flag) {
+        if (!flag) {
+          this.isInitialLoading = false;
+        }
+      },
+    },
+  },
+  computed: {
+    isLoading() {
+      return this.$apollo.queries.adminVariables.loading && this.isInitialLoading;
+    },
+  },
+  methods: {
+    addVariable(variable) {
+      this.variableMutation(ADD_MUTATION_ACTION, variable);
+    },
+    deleteVariable(variable) {
+      this.variableMutation(DELETE_MUTATION_ACTION, variable);
+    },
+    updateVariable(variable) {
+      this.variableMutation(UPDATE_MUTATION_ACTION, variable);
+    },
+    async variableMutation(mutationAction, variable) {
+      try {
+        const currentMutation = this.$options.mutationData[mutationAction];
+        const { data } = await this.$apollo.mutate({
+          mutation: currentMutation.action,
+          variables: {
+            endpoint: this.endpoint,
+            variable,
+          },
+        });
+
+        const { errors } = data[currentMutation.name];
+
+        if (errors.length > 0) {
+          createFlash({ message: errors[0] });
+        } else {
+          // The writing to cache for admin variable is not working
+          // because there is no ID in the cache at the top level.
+          // We therefore need to manually refetch.
+          this.$apollo.queries.adminVariables.refetch();
+        }
+      } catch {
+        createFlash({ message: genericMutationErrorText });
+      }
+    },
+  },
+  mutationData: {
+    [ADD_MUTATION_ACTION]: { action: addAdminVariable, name: 'addAdminVariable' },
+    [UPDATE_MUTATION_ACTION]: { action: updateAdminVariable, name: 'updateAdminVariable' },
+    [DELETE_MUTATION_ACTION]: { action: deleteAdminVariable, name: 'deleteAdminVariable' },
+  },
+};
+</script>
+
+<template>
+  <ci-variable-settings
+    :are-scoped-variables-available="false"
+    :is-loading="isLoading"
+    :variables="adminVariables"
+    @add-variable="addVariable"
+    @delete-variable="deleteVariable"
+    @update-variable="updateVariable"
+  />
+</template>
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue b/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue
index ecb39f214ec..c9002edc1ab 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlDropdown, GlDropdownItem, GlDropdownDivider, GlSearchBoxByType } from '@gitlab/ui';
-import { mapGetters } from 'vuex';
 import { __, sprintf } from '~/locale';
+import { convertEnvironmentScope } from '../utils';
 
 export default {
   name: 'CiEnvironmentsDropdown',
@@ -12,7 +12,11 @@ export default {
     GlSearchBoxByType,
   },
   props: {
-    value: {
+    environments: {
+      type: Array,
+      required: true,
+    },
+    selectedEnvironmentScope: {
       type: String,
       required: false,
       default: '',
@@ -24,31 +28,36 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['joinedEnvironments']),
     composedCreateButtonLabel() {
       return sprintf(__('Create wildcard: %{searchTerm}'), { searchTerm: this.searchTerm });
     },
+    filteredEnvironments() {
+      const lowerCasedSearchTerm = this.searchTerm.toLowerCase();
+      return this.environments.filter((environment) => {
+        return environment.toLowerCase().includes(lowerCasedSearchTerm);
+      });
+    },
     shouldRenderCreateButton() {
-      return this.searchTerm && !this.joinedEnvironments.includes(this.searchTerm);
+      return this.searchTerm && !this.environments.includes(this.searchTerm);
     },
-    filteredResults() {
-      const lowerCasedSearchTerm = this.searchTerm.toLowerCase();
-      return this.joinedEnvironments.filter((resultString) =>
-        resultString.toLowerCase().includes(lowerCasedSearchTerm),
-      );
+    environmentScopeLabel() {
+      return convertEnvironmentScope(this.selectedEnvironmentScope);
     },
   },
   methods: {
     selectEnvironment(selected) {
-      this.$emit('selectEnvironment', selected);
-      this.searchTerm = '';
+      this.$emit('select-environment', selected);
+      this.clearSearch();
     },
-    createClicked() {
-      this.$emit('createClicked', this.searchTerm);
-      this.searchTerm = '';
+    convertEnvironmentScopeValue(scope) {
+      return convertEnvironmentScope(scope);
+    },
+    createEnvironmentScope() {
+      this.$emit('create-environment-scope', this.searchTerm);
+      this.selectEnvironment(this.searchTerm);
     },
     isSelected(env) {
-      return this.value === env;
+      return this.selectedEnvironmentScope === env;
     },
     clearSearch() {
       this.searchTerm = '';
@@ -57,23 +66,23 @@ export default {
 };
 </script>
 <template>
-  <gl-dropdown :text="value" @show="clearSearch">
+  <gl-dropdown :text="environmentScopeLabel" @show="clearSearch">
     <gl-search-box-by-type v-model.trim="searchTerm" data-testid="ci-environment-search" />
     <gl-dropdown-item
-      v-for="environment in filteredResults"
+      v-for="environment in filteredEnvironments"
       :key="environment"
       :is-checked="isSelected(environment)"
       is-check-item
       @click="selectEnvironment(environment)"
     >
-      {{ environment }}
+      {{ convertEnvironmentScopeValue(environment) }}
     </gl-dropdown-item>
-    <gl-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{
+    <gl-dropdown-item v-if="!filteredEnvironments.length" ref="noMatchingResults">{{
       __('No matching results')
     }}</gl-dropdown-item>
     <template v-if="shouldRenderCreateButton">
       <gl-dropdown-divider />
-      <gl-dropdown-item data-testid="create-wildcard-button" @click="createClicked">
+      <gl-dropdown-item data-testid="create-wildcard-button" @click="createEnvironmentScope">
         {{ composedCreateButtonLabel }}
       </gl-dropdown-item>
     </template>
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_group_variables.vue b/app/assets/javascripts/ci_variable_list/components/ci_group_variables.vue
new file mode 100644
index 00000000000..3af83ffa8ed
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/components/ci_group_variables.vue
@@ -0,0 +1,104 @@
+<script>
+import createFlash from '~/flash';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import getGroupVariables from '../graphql/queries/group_variables.query.graphql';
+import {
+  ADD_MUTATION_ACTION,
+  DELETE_MUTATION_ACTION,
+  GRAPHQL_GROUP_TYPE,
+  UPDATE_MUTATION_ACTION,
+  genericMutationErrorText,
+  variableFetchErrorText,
+} from '../constants';
+import addGroupVariable from '../graphql/mutations/group_add_variable.mutation.graphql';
+import deleteGroupVariable from '../graphql/mutations/group_delete_variable.mutation.graphql';
+import updateGroupVariable from '../graphql/mutations/group_update_variable.mutation.graphql';
+import ciVariableSettings from './ci_variable_settings.vue';
+
+export default {
+  components: {
+    ciVariableSettings,
+  },
+  mixins: [glFeatureFlagsMixin()],
+  inject: ['endpoint', 'groupPath', 'groupId'],
+  data() {
+    return {
+      groupVariables: [],
+    };
+  },
+  apollo: {
+    groupVariables: {
+      query: getGroupVariables,
+      variables() {
+        return {
+          fullPath: this.groupPath,
+        };
+      },
+      update(data) {
+        return data?.group?.ciVariables?.nodes || [];
+      },
+      error() {
+        createFlash({ message: variableFetchErrorText });
+      },
+    },
+  },
+  computed: {
+    areScopedVariablesAvailable() {
+      return this.glFeatures.groupScopedCiVariables;
+    },
+    isLoading() {
+      return this.$apollo.queries.groupVariables.loading;
+    },
+  },
+  methods: {
+    addVariable(variable) {
+      this.variableMutation(ADD_MUTATION_ACTION, variable);
+    },
+    deleteVariable(variable) {
+      this.variableMutation(DELETE_MUTATION_ACTION, variable);
+    },
+    updateVariable(variable) {
+      this.variableMutation(UPDATE_MUTATION_ACTION, variable);
+    },
+    async variableMutation(mutationAction, variable) {
+      try {
+        const currentMutation = this.$options.mutationData[mutationAction];
+        const { data } = await this.$apollo.mutate({
+          mutation: currentMutation.action,
+          variables: {
+            endpoint: this.endpoint,
+            fullPath: this.groupPath,
+            groupId: convertToGraphQLId(GRAPHQL_GROUP_TYPE, this.groupId),
+            variable,
+          },
+        });
+
+        const { errors } = data[currentMutation.name];
+
+        if (errors.length > 0) {
+          createFlash({ message: errors[0] });
+        }
+      } catch {
+        createFlash({ message: genericMutationErrorText });
+      }
+    },
+  },
+  mutationData: {
+    [ADD_MUTATION_ACTION]: { action: addGroupVariable, name: 'addGroupVariable' },
+    [UPDATE_MUTATION_ACTION]: { action: updateGroupVariable, name: 'updateGroupVariable' },
+    [DELETE_MUTATION_ACTION]: { action: deleteGroupVariable, name: 'deleteGroupVariable' },
+  },
+};
+</script>
+
+<template>
+  <ci-variable-settings
+    :are-scoped-variables-available="areScopedVariablesAvailable"
+    :is-loading="isLoading"
+    :variables="groupVariables"
+    @add-variable="addVariable"
+    @delete-variable="deleteVariable"
+    @update-variable="updateVariable"
+  />
+</template>
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue
index 557a8d6b5ba..5ba63de8c96 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue
@@ -14,22 +14,26 @@ import {
   GlModal,
   GlSprintf,
 } from '@gitlab/ui';
-import { mapActions, mapState } from 'vuex';
 import { getCookie, setCookie } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import Tracking from '~/tracking';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { mapComputed } from '~/vuex_shared/bindings';
+
 import {
+  allEnvironments,
   AWS_TOKEN_CONSTANTS,
   ADD_CI_VARIABLE_MODAL_ID,
   AWS_TIP_DISMISSED_COOKIE_NAME,
   AWS_TIP_MESSAGE,
   CONTAINS_VARIABLE_REFERENCE_MESSAGE,
+  defaultVariableState,
   ENVIRONMENT_SCOPE_LINK_TITLE,
   EVENT_LABEL,
   EVENT_ACTION,
+  EDIT_VARIABLE_ACTION,
+  VARIABLE_ACTIONS,
+  variableOptions,
 } from '../constants';
+import { createJoinedEnvironments } from '../utils';
 import CiEnvironmentsDropdown from './ci_environments_dropdown.vue';
 import { awsTokens, awsTokenList } from './ci_variable_autocomplete_tokens';
 
@@ -58,66 +62,84 @@ export default {
     GlModal,
     GlSprintf,
   },
-  mixins: [glFeatureFlagsMixin(), trackingMixin],
+  mixins: [trackingMixin],
+  inject: [
+    'awsLogoSvgPath',
+    'awsTipCommandsLink',
+    'awsTipDeployLink',
+    'awsTipLearnLink',
+    'containsVariableReferenceLink',
+    'environmentScopeLink',
+    'isProtectedByDefault',
+    'maskedEnvironmentVariablesLink',
+    'maskableRegex',
+    'protectedEnvironmentVariablesLink',
+  ],
+  props: {
+    areScopedVariablesAvailable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    environments: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    mode: {
+      type: String,
+      required: true,
+      validator(val) {
+        return VARIABLE_ACTIONS.includes(val);
+      },
+    },
+    selectedVariable: {
+      type: Object,
+      required: false,
+      default: () => {},
+    },
+    variables: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
   data() {
     return {
+      newEnvironments: [],
       isTipDismissed: getCookie(AWS_TIP_DISMISSED_COOKIE_NAME) === 'true',
+      typeOptions: variableOptions,
       validationErrorEventProperty: '',
+      variable: { ...defaultVariableState, ...this.selectedVariable },
     };
   },
   computed: {
-    ...mapState([
-      'projectId',
-      'environments',
-      'typeOptions',
-      'variable',
-      'variableBeingEdited',
-      'isGroup',
-      'maskableRegex',
-      'selectedEnvironment',
-      'isProtectedByDefault',
-      'awsLogoSvgPath',
-      'awsTipDeployLink',
-      'awsTipCommandsLink',
-      'awsTipLearnLink',
-      'containsVariableReferenceLink',
-      'protectedEnvironmentVariablesLink',
-      'maskedEnvironmentVariablesLink',
-      'environmentScopeLink',
-    ]),
-    ...mapComputed(
-      [
-        { key: 'key', updateFn: 'updateVariableKey' },
-        { key: 'secret_value', updateFn: 'updateVariableValue' },
-        { key: 'variable_type', updateFn: 'updateVariableType' },
-        { key: 'environment_scope', updateFn: 'setEnvironmentScope' },
-        { key: 'protected_variable', updateFn: 'updateVariableProtected' },
-        { key: 'masked', updateFn: 'updateVariableMasked' },
-      ],
-      false,
-      'variable',
-    ),
-    isTipVisible() {
-      return !this.isTipDismissed && AWS_TOKEN_CONSTANTS.includes(this.variable.key);
-    },
-    canSubmit() {
-      return (
-        this.variableValidationState &&
-        this.variable.key !== '' &&
-        this.variable.secret_value !== ''
-      );
-    },
     canMask() {
       const regex = RegExp(this.maskableRegex);
-      return regex.test(this.variable.secret_value);
+      return regex.test(this.variable.value);
+    },
+    canSubmit() {
+      return this.variableValidationState && this.variable.key !== '' && this.variable.value !== '';
     },
     containsVariableReference() {
       const regex = /\$/;
-      return regex.test(this.variable.secret_value);
+      return regex.test(this.variable.value);
     },
     displayMaskedError() {
       return !this.canMask && this.variable.masked;
     },
+    isEditing() {
+      return this.mode === EDIT_VARIABLE_ACTION;
+    },
+    isTipVisible() {
+      return !this.isTipDismissed && AWS_TOKEN_CONSTANTS.includes(this.variable.key);
+    },
+    joinedEnvironments() {
+      return createJoinedEnvironments(this.variables, this.environments, this.newEnvironments);
+    },
+    maskedFeedback() {
+      return this.displayMaskedError ? __('This variable can not be masked.') : '';
+    },
     maskedState() {
       if (this.displayMaskedError) {
         return false;
@@ -125,10 +147,7 @@ export default {
       return true;
     },
     modalActionText() {
-      return this.variableBeingEdited ? __('Update variable') : __('Add variable');
-    },
-    maskedFeedback() {
-      return this.displayMaskedError ? __('This variable can not be masked.') : '';
+      return this.isEditing ? __('Update variable') : __('Add variable');
     },
     tokenValidationFeedback() {
       const tokenSpecificFeedback = this.$options.tokens?.[this.variable.key]?.invalidMessage;
@@ -141,19 +160,16 @@ export default {
       const validator = this.$options.tokens?.[this.variable.key]?.validation;
 
       if (validator) {
-        return validator(this.variable.secret_value);
+        return validator(this.variable.value);
       }
 
       return true;
     },
-    scopedVariablesAvailable() {
-      return !this.isGroup || this.glFeatures.groupScopedCiVariables;
-    },
     variableValidationFeedback() {
       return `${this.tokenValidationFeedback} ${this.maskedFeedback}`;
     },
     variableValidationState() {
-      return this.variable.secret_value === '' || (this.tokenValidationState && this.maskedState);
+      return this.variable.value === '' || (this.tokenValidationState && this.maskedState);
     },
   },
   watch: {
@@ -165,19 +181,18 @@ export default {
     },
   },
   methods: {
-    ...mapActions([
-      'addVariable',
-      'updateVariable',
-      'resetEditing',
-      'displayInputValue',
-      'clearModal',
-      'deleteVariable',
-      'setEnvironmentScope',
-      'addWildCardScope',
-      'resetSelectedEnvironment',
-      'setSelectedEnvironment',
-      'setVariableProtected',
-    ]),
+    addVariable() {
+      this.$emit('add-variable', this.variable);
+    },
+    createEnvironmentScope(env) {
+      this.newEnvironments.push(env);
+    },
+    deleteVariable() {
+      this.$emit('delete-variable', this.variable);
+    },
+    updateVariable() {
+      this.$emit('update-variable', this.variable);
+    },
     dismissTip() {
       setCookie(AWS_TIP_DISMISSED_COOKIE_NAME, 'true', { expires: 90 });
       this.isTipDismissed = true;
@@ -190,16 +205,22 @@ export default {
       this.$refs.modal.hide();
     },
     resetModalHandler() {
-      if (this.variableBeingEdited) {
-        this.resetEditing();
-      }
-
-      this.clearModal();
-      this.resetSelectedEnvironment();
+      this.resetVariableData();
       this.resetValidationErrorEvents();
+
+      this.$emit('hideModal');
+    },
+    resetVariableData() {
+      this.variable = { ...defaultVariableState };
+    },
+    setEnvironmentScope(scope) {
+      this.variable = { ...this.variable, environmentScope: scope };
+    },
+    setVariableProtected() {
+      this.variable = { ...this.variable, protected: true };
     },
     updateOrAddVariable() {
-      if (this.variableBeingEdited) {
+      if (this.isEditing) {
         this.updateVariable();
       } else {
         this.addVariable();
@@ -207,7 +228,7 @@ export default {
       this.hideModal();
     },
     setVariableProtectedByDefault() {
-      if (this.isProtectedByDefault && !this.variableBeingEdited) {
+      if (this.isProtectedByDefault && !this.isEditing) {
         this.setVariableProtected();
       }
     },
@@ -220,11 +241,11 @@ export default {
     },
     getTrackingErrorProperty() {
       let property;
-      if (this.variable.secret_value?.length && !property) {
+      if (this.variable.value?.length && !property) {
         if (this.displayMaskedError && this.maskableRegex?.length) {
           const supportedChars = this.maskableRegex.replace('^', '').replace(/{(\d,)}\$/, '');
           const regex = new RegExp(supportedChars, 'g');
-          property = this.variable.secret_value.replace(regex, '');
+          property = this.variable.value.replace(regex, '');
         }
         if (this.containsVariableReference) {
           property = '$';
@@ -237,6 +258,7 @@ export default {
       this.validationErrorEventProperty = '';
     },
   },
+  defaultScope: allEnvironments.text,
 };
 </script>
 
@@ -252,7 +274,7 @@ export default {
   >
     <form>
       <gl-form-combobox
-        v-model="key"
+        v-model="variable.key"
         :token-list="$options.tokenList"
         :label-text="__('Key')"
         data-qa-selector="ci_variable_key_field"
@@ -267,7 +289,7 @@ export default {
         <gl-form-textarea
           id="ci-variable-value"
           ref="valueField"
-          v-model="secret_value"
+          v-model="variable.value"
           :state="variableValidationState"
           rows="3"
           max-rows="6"
@@ -278,7 +300,11 @@ export default {
 
       <div class="d-flex">
         <gl-form-group :label="__('Type')" label-for="ci-variable-type" class="w-50 gl-mr-5">
-          <gl-form-select id="ci-variable-type" v-model="variable_type" :options="typeOptions" />
+          <gl-form-select
+            id="ci-variable-type"
+            v-model="variable.variableType"
+            :options="typeOptions"
+          />
         </gl-form-group>
 
         <gl-form-group label-for="ci-variable-env" class="w-50" data-testid="environment-scope">
@@ -294,22 +320,24 @@ export default {
             </gl-link>
           </template>
           <ci-environments-dropdown
-            v-if="scopedVariablesAvailable"
-            class="w-100"
-            :value="environment_scope"
-            @selectEnvironment="setEnvironmentScope"
-            @createClicked="addWildCardScope"
+            v-if="areScopedVariablesAvailable"
+            class="gl-w-full"
+            :selected-environment-scope="variable.environmentScope"
+            :environments="joinedEnvironments"
+            @select-environment="setEnvironmentScope"
+            @create-environment-scope="createEnvironmentScope"
           />
 
-          <gl-form-input v-else v-model="environment_scope" class="w-100" readonly />
+          <gl-form-input v-else :value="$options.defaultScope" class="gl-w-full" readonly />
         </gl-form-group>
       </div>
 
       <gl-form-group :label="__('Flags')" label-for="ci-variable-flags">
         <gl-form-checkbox
-          v-model="protected_variable"
-          class="mb-0"
+          v-model="variable.protected"
+          class="gl-mb-0"
           data-testid="ci-variable-protected-checkbox"
+          :data-is-protected-checked="variable.protected"
         >
           {{ __('Protect variable') }}
           <gl-link target="_blank" :href="protectedEnvironmentVariablesLink">
@@ -322,7 +350,7 @@ export default {
 
         <gl-form-checkbox
           ref="masked-ci-variable"
-          v-model="masked"
+          v-model="variable.masked"
           data-testid="ci-variable-masked-checkbox"
         >
           {{ __('Mask variable') }}
@@ -403,7 +431,7 @@ export default {
     <template #modal-footer>
       <gl-button @click="hideModal">{{ __('Cancel') }}</gl-button>
       <gl-button
-        v-if="variableBeingEdited"
+        v-if="isEditing"
         ref="deleteCiVariable"
         variant="danger"
         category="secondary"
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue
index 4cc00eb01d9..81e3a983ea3 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue
@@ -1,9 +1,91 @@
 <script>
-export default {};
+import { ADD_VARIABLE_ACTION, EDIT_VARIABLE_ACTION, VARIABLE_ACTIONS } from '../constants';
+import CiVariableTable from './ci_variable_table.vue';
+import CiVariableModal from './ci_variable_modal.vue';
+
+export default {
+  components: {
+    CiVariableTable,
+    CiVariableModal,
+  },
+  props: {
+    areScopedVariablesAvailable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    environments: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    variables: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selectedVariable: {},
+      mode: null,
+    };
+  },
+  computed: {
+    showModal() {
+      return VARIABLE_ACTIONS.includes(this.mode);
+    },
+  },
+  methods: {
+    addVariable(variable) {
+      this.$emit('add-variable', variable);
+    },
+    deleteVariable(variable) {
+      this.$emit('delete-variable', variable);
+    },
+    updateVariable(variable) {
+      this.$emit('update-variable', variable);
+    },
+    hideModal() {
+      this.mode = null;
+    },
+    setSelectedVariable(variable = null) {
+      if (!variable) {
+        this.selectedVariable = {};
+        this.mode = ADD_VARIABLE_ACTION;
+      } else {
+        this.selectedVariable = variable;
+        this.mode = EDIT_VARIABLE_ACTION;
+      }
+    },
+  },
+};
 </script>
 
 <template>
   <div class="row">
-    <div class="col-lg-12"></div>
+    <div class="col-lg-12">
+      <ci-variable-table
+        :is-loading="isLoading"
+        :variables="variables"
+        @set-selected-variable="setSelectedVariable"
+      />
+      <ci-variable-modal
+        v-if="showModal"
+        :are-scoped-variables-available="areScopedVariablesAvailable"
+        :environments="environments"
+        :variables="variables"
+        :mode="mode"
+        :selected-variable="selectedVariable"
+        @add-variable="addVariable"
+        @delete-variable="deleteVariable"
+        @hideModal="hideModal"
+        @update-variable="updateVariable"
+      />
+    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue
index f078234829a..1bb94080694 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue
@@ -1,10 +1,17 @@
 <script>
-import { GlTable, GlButton, GlModalDirective, GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import { mapState, mapActions } from 'vuex';
+import {
+  GlButton,
+  GlIcon,
+  GlLoadingIcon,
+  GlModalDirective,
+  GlTable,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import { s__, __ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
-import { ADD_CI_VARIABLE_MODAL_ID } from '../constants';
+import { ADD_CI_VARIABLE_MODAL_ID, variableText } from '../constants';
+import { convertEnvironmentScope } from '../utils';
 import CiVariablePopover from './ci_variable_popover.vue';
 
 export default {
@@ -14,7 +21,7 @@ export default {
   iconSize: 16,
   fields: [
     {
-      key: 'variable_type',
+      key: 'variableType',
       label: s__('CiVariables|Type'),
       customStyle: { width: '70px' },
     },
@@ -41,7 +48,7 @@ export default {
       customStyle: { width: '100px' },
     },
     {
-      key: 'environment_scope',
+      key: 'environmentScope',
       label: s__('CiVariables|Environments'),
       customStyle: { width: '20%' },
     },
@@ -56,6 +63,7 @@ export default {
     CiVariablePopover,
     GlButton,
     GlIcon,
+    GlLoadingIcon,
     GlTable,
     TooltipOnTruncate,
   },
@@ -64,10 +72,25 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   mixins: [glFeatureFlagsMixin()],
+  props: {
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    variables: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      areValuesHidden: true,
+    };
+  },
   computed: {
-    ...mapState(['variables', 'valuesHidden', 'isLoading', 'isDeleting']),
     valuesButtonText() {
-      return this.valuesHidden ? __('Reveal values') : __('Hide values');
+      return this.areValuesHidden ? __('Reveal values') : __('Hide values');
     },
     isTableEmpty() {
       return !this.variables || this.variables.length === 0;
@@ -76,18 +99,28 @@ export default {
       return this.$options.fields;
     },
   },
-  mounted() {
-    this.fetchVariables();
-  },
   methods: {
-    ...mapActions(['fetchVariables', 'toggleValues', 'editVariable']),
+    convertEnvironmentScopeValue(env) {
+      return convertEnvironmentScope(env);
+    },
+    generateTypeText(item) {
+      return variableText[item.variableType];
+    },
+    toggleHiddenState() {
+      this.areValuesHidden = !this.areValuesHidden;
+    },
+    setSelectedVariable(variable = null) {
+      this.$emit('set-selected-variable', variable);
+    },
   },
 };
 </script>
 
 <template>
   <div class="ci-variable-table" data-testid="ci-variable-table">
+    <gl-loading-icon v-if="isLoading" />
     <gl-table
+      v-else
       :fields="fields"
       :items="variables"
       tbody-tr-class="js-ci-variable-row"
@@ -104,6 +137,11 @@ export default {
       <template #table-colgroup="scope">
         <col v-for="field in scope.fields" :key="field.key" :style="field.customStyle" />
       </template>
+      <template #cell(variableType)="{ item }">
+        <div class="gl-pt-2">
+          {{ generateTypeText(item) }}
+        </div>
+      </template>
       <template #cell(key)="{ item }">
         <div class="gl-display-flex gl-align-items-center">
           <tooltip-on-truncate :title="item.key" truncate-target="child">
@@ -125,11 +163,12 @@ export default {
       </template>
       <template #cell(value)="{ item }">
         <div class="gl-display-flex gl-align-items-center">
-          <span v-if="valuesHidden">*********************</span>
+          <span v-if="areValuesHidden" data-testid="hiddenValue">*********************</span>
           <span
             v-else
             :id="`ci-variable-value-${item.id}`"
             class="gl-display-inline-block gl-max-w-full gl-text-truncate"
+            data-testid="revealedValue"
             >{{ item.value }}</span
           >
           <gl-button
@@ -150,16 +189,16 @@ export default {
         <gl-icon v-if="item.masked" :size="$options.iconSize" :name="$options.trueIcon" />
         <gl-icon v-else :size="$options.iconSize" :name="$options.falseIcon" />
       </template>
-      <template #cell(environment_scope)="{ item }">
+      <template #cell(environmentScope)="{ item }">
         <div class="gl-display-flex">
           <span
             :id="`ci-variable-env-${item.id}`"
             class="gl-display-inline-block gl-max-w-full gl-text-truncate"
-            >{{ item.environment_scope }}</span
+            >{{ convertEnvironmentScopeValue(item.environmentScope) }}</span
           >
           <ci-variable-popover
             :target="`ci-variable-env-${item.id}`"
-            :value="item.environment_scope"
+            :value="convertEnvironmentScopeValue(item.environmentScope)"
             :tooltip-text="__('Copy environment')"
           />
         </div>
@@ -170,7 +209,7 @@ export default {
           icon="pencil"
           :aria-label="__('Edit')"
           data-qa-selector="edit_ci_variable_button"
-          @click="editVariable(item)"
+          @click="setSelectedVariable(item)"
         />
       </template>
       <template #empty>
@@ -186,12 +225,14 @@ export default {
         data-qa-selector="add_ci_variable_button"
         variant="confirm"
         category="primary"
+        :aria-label="__('Add')"
+        @click="setSelectedVariable()"
         >{{ __('Add variable') }}</gl-button
       >
       <gl-button
         v-if="!isTableEmpty"
         data-qa-selector="reveal_ci_variable_value_button"
-        @click="toggleValues(!valuesHidden)"
+        @click="toggleHiddenState"
         >{{ valuesButtonText }}</gl-button
       >
     </div>
diff --git a/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_modal.vue b/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_modal.vue
index 7dcc5ce42d7..cebb7eb85ac 100644
--- a/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_modal.vue
+++ b/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_modal.vue
@@ -30,7 +30,7 @@ import {
   EVENT_LABEL,
   EVENT_ACTION,
 } from '../constants';
-import CiEnvironmentsDropdown from './ci_environments_dropdown.vue';
+import LegacyCiEnvironmentsDropdown from './legacy_ci_environments_dropdown.vue';
 import { awsTokens, awsTokenList } from './ci_variable_autocomplete_tokens';
 
 const trackingMixin = Tracking.mixin({ label: EVENT_LABEL });
@@ -43,7 +43,7 @@ export default {
   containsVariableReferenceMessage: CONTAINS_VARIABLE_REFERENCE_MESSAGE,
   environmentScopeLinkTitle: ENVIRONMENT_SCOPE_LINK_TITLE,
   components: {
-    CiEnvironmentsDropdown,
+    LegacyCiEnvironmentsDropdown,
     GlAlert,
     GlButton,
     GlCollapse,
@@ -293,7 +293,7 @@ export default {
               <gl-icon name="question" :size="12" />
             </gl-link>
           </template>
-          <ci-environments-dropdown
+          <legacy-ci-environments-dropdown
             v-if="scopedVariablesAvailable"
             class="w-100"
             :value="environment_scope"
diff --git a/app/assets/javascripts/ci_variable_list/constants.js b/app/assets/javascripts/ci_variable_list/constants.js
index fa55b4d9e77..5d22974ffbb 100644
--- a/app/assets/javascripts/ci_variable_list/constants.js
+++ b/app/assets/javascripts/ci_variable_list/constants.js
@@ -2,18 +2,58 @@ import { __ } from '~/locale';
 
 export const ADD_CI_VARIABLE_MODAL_ID = 'add-ci-variable';
 
+// This const will be deprecated once we remove VueX from the section
 export const displayText = {
   variableText: __('Variable'),
   fileText: __('File'),
   allEnvironmentsText: __('All (default)'),
 };
 
+export const variableTypes = {
+  variableType: 'ENV_VAR',
+  fileType: 'FILE',
+};
+
+// Once REST is removed, we won't need `types`
 export const types = {
   variableType: 'env_var',
   fileType: 'file',
-  allEnvironmentsType: '*',
 };
 
+export const allEnvironments = {
+  type: '*',
+  text: __('All (default)'),
+};
+
+// Once REST is removed, we won't need `types` key
+export const variableText = {
+  [types.variableType]: __('Variable'),
+  [types.fileType]: __('File'),
+  [variableTypes.variableType]: __('Variable'),
+  [variableTypes.fileType]: __('File'),
+};
+
+export const variableOptions = [
+  { value: types.variableType, text: variableText[types.variableType] },
+  { value: types.fileType, text: variableText[types.fileType] },
+];
+
+export const defaultVariableState = {
+  environmentScope: allEnvironments.type,
+  key: '',
+  masked: false,
+  protected: false,
+  value: '',
+  variableType: types.variableType,
+};
+
+// eslint-disable-next-line @gitlab/require-i18n-strings
+export const groupString = 'Group';
+// eslint-disable-next-line @gitlab/require-i18n-strings
+export const instanceString = 'Instance';
+// eslint-disable-next-line @gitlab/require-i18n-strings
+export const projectString = 'Instance';
+
 export const AWS_TIP_DISMISSED_COOKIE_NAME = 'ci_variable_list_constants_aws_tip_dismissed';
 export const AWS_TIP_MESSAGE = __(
   '%{deployLinkStart}Use a template to deploy to ECS%{deployLinkEnd}, or use a docker image to %{commandsLinkStart}run AWS commands in GitLab CI/CD%{commandsLinkEnd}.',
@@ -33,3 +73,20 @@ export const CONTAINS_VARIABLE_REFERENCE_MESSAGE = __(
 );
 
 export const ENVIRONMENT_SCOPE_LINK_TITLE = __('Learn more');
+
+export const ADD_VARIABLE_ACTION = 'ADD_VARIABLE';
+export const EDIT_VARIABLE_ACTION = 'EDIT_VARIABLE';
+export const VARIABLE_ACTIONS = [ADD_VARIABLE_ACTION, EDIT_VARIABLE_ACTION];
+
+export const GRAPHQL_PROJECT_TYPE = 'Project';
+export const GRAPHQL_GROUP_TYPE = 'Group';
+
+export const ADD_MUTATION_ACTION = 'add';
+export const UPDATE_MUTATION_ACTION = 'update';
+export const DELETE_MUTATION_ACTION = 'delete';
+
+export const environmentFetchErrorText = __(
+  'There was an error fetching the environments information.',
+);
+export const genericMutationErrorText = __('Something went wrong on our end. Please try again.');
+export const variableFetchErrorText = __('There was an error fetching the variables.');
diff --git a/app/assets/javascripts/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql b/app/assets/javascripts/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql
new file mode 100644
index 00000000000..a28ca4eebc9
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql
@@ -0,0 +1,7 @@
+fragment BaseCiVariable on CiVariable {
+  __typename
+  id
+  key
+  value
+  variableType
+}
diff --git a/app/assets/javascripts/ci_variable_list/graphql/mutations/admin_add_variable.mutation.graphql b/app/assets/javascripts/ci_variable_list/graphql/mutations/admin_add_variable.mutation.graphql
new file mode 100644
index 00000000000..eba4b0c32f8
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/mutations/admin_add_variable.mutation.graphql
@@ -0,0 +1,16 @@
+#import "~/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql"
+
+mutation addAdminVariable($variable: CiVariable!, $endpoint: String!) {
+  addAdminVariable(variable: $variable, endpoint: $endpoint) @client {
+    ciVariables {
+      nodes {
+        ...BaseCiVariable
+        ... on CiInstanceVariable {
+          protected
+          masked
+        }
+      }
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/ci_variable_list/graphql/mutations/admin_delete_variable.mutation.graphql b/app/assets/javascripts/ci_variable_list/graphql/mutations/admin_delete_variable.mutation.graphql
new file mode 100644
index 00000000000..96eb8c794bc
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/mutations/admin_delete_variable.mutation.graphql
@@ -0,0 +1,16 @@
+#import "~/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql"
+
+mutation deleteAdminVariable($variable: CiVariable!, $endpoint: String!) {
+  deleteAdminVariable(variable: $variable, endpoint: $endpoint) @client {
+    ciVariables {
+      nodes {
+        ...BaseCiVariable
+        ... on CiInstanceVariable {
+          protected
+          masked
+        }
+      }
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/ci_variable_list/graphql/mutations/admin_update_variable.mutation.graphql b/app/assets/javascripts/ci_variable_list/graphql/mutations/admin_update_variable.mutation.graphql
new file mode 100644
index 00000000000..c0388507bb8
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/mutations/admin_update_variable.mutation.graphql
@@ -0,0 +1,16 @@
+#import "~/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql"
+
+mutation updateAdminVariable($variable: CiVariable!, $endpoint: String!) {
+  updateAdminVariable(variable: $variable, endpoint: $endpoint) @client {
+    ciVariables {
+      nodes {
+        ...BaseCiVariable
+        ... on CiInstanceVariable {
+          protected
+          masked
+        }
+      }
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/ci_variable_list/graphql/mutations/group_add_variable.mutation.graphql b/app/assets/javascripts/ci_variable_list/graphql/mutations/group_add_variable.mutation.graphql
new file mode 100644
index 00000000000..f8e4dc55fa4
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/mutations/group_add_variable.mutation.graphql
@@ -0,0 +1,30 @@
+#import "~/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql"
+
+mutation addGroupVariable(
+  $variable: CiVariable!
+  $endpoint: String!
+  $fullPath: ID!
+  $groupId: ID!
+) {
+  addGroupVariable(
+    variable: $variable
+    endpoint: $endpoint
+    fullPath: $fullPath
+    groupId: $groupId
+  ) @client {
+    group {
+      id
+      ciVariables {
+        nodes {
+          ...BaseCiVariable
+          ... on CiGroupVariable {
+            environmentScope
+            masked
+            protected
+          }
+        }
+      }
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/ci_variable_list/graphql/mutations/group_delete_variable.mutation.graphql b/app/assets/javascripts/ci_variable_list/graphql/mutations/group_delete_variable.mutation.graphql
new file mode 100644
index 00000000000..310e4a6e551
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/mutations/group_delete_variable.mutation.graphql
@@ -0,0 +1,30 @@
+#import "~/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql"
+
+mutation deleteGroupVariable(
+  $variable: CiVariable!
+  $endpoint: String!
+  $fullPath: ID!
+  $groupId: ID!
+) {
+  deleteGroupVariable(
+    variable: $variable
+    endpoint: $endpoint
+    fullPath: $fullPath
+    groupId: $groupId
+  ) @client {
+    group {
+      id
+      ciVariables {
+        nodes {
+          ...BaseCiVariable
+          ... on CiGroupVariable {
+            environmentScope
+            masked
+            protected
+          }
+        }
+      }
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/ci_variable_list/graphql/mutations/group_update_variable.mutation.graphql b/app/assets/javascripts/ci_variable_list/graphql/mutations/group_update_variable.mutation.graphql
new file mode 100644
index 00000000000..5291942eb87
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/mutations/group_update_variable.mutation.graphql
@@ -0,0 +1,30 @@
+#import "~/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql"
+
+mutation updateGroupVariable(
+  $variable: CiVariable!
+  $endpoint: String!
+  $fullPath: ID!
+  $groupId: ID!
+) {
+  updateGroupVariable(
+    variable: $variable
+    endpoint: $endpoint
+    fullPath: $fullPath
+    groupId: $groupId
+  ) @client {
+    group {
+      id
+      ciVariables {
+        nodes {
+          ...BaseCiVariable
+          ... on CiGroupVariable {
+            environmentScope
+            masked
+            protected
+          }
+        }
+      }
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/ci_variable_list/graphql/queries/group_variables.query.graphql b/app/assets/javascripts/ci_variable_list/graphql/queries/group_variables.query.graphql
new file mode 100644
index 00000000000..c6dd6d4faaf
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/queries/group_variables.query.graphql
@@ -0,0 +1,17 @@
+#import "~/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql"
+
+query getGroupVariables($fullPath: ID!) {
+  group(fullPath: $fullPath) {
+    id
+    ciVariables {
+      nodes {
+        ...BaseCiVariable
+        ... on CiGroupVariable {
+          environmentScope
+          masked
+          protected
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/ci_variable_list/graphql/queries/variables.query.graphql b/app/assets/javascripts/ci_variable_list/graphql/queries/variables.query.graphql
new file mode 100644
index 00000000000..95056842b49
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/queries/variables.query.graphql
@@ -0,0 +1,13 @@
+#import "~/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql"
+
+query getVariables {
+  ciVariables {
+    nodes {
+      ...BaseCiVariable
+      ... on CiInstanceVariable {
+        masked
+        protected
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/ci_variable_list/graphql/resolvers.js b/app/assets/javascripts/ci_variable_list/graphql/resolvers.js
new file mode 100644
index 00000000000..be7e3f88cfd
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/resolvers.js
@@ -0,0 +1,113 @@
+import axios from 'axios';
+import {
+  convertObjectPropsToCamelCase,
+  convertObjectPropsToSnakeCase,
+} from '../../lib/utils/common_utils';
+import { getIdFromGraphQLId } from '../../graphql_shared/utils';
+import { GRAPHQL_GROUP_TYPE, groupString, instanceString } from '../constants';
+import getAdminVariables from './queries/variables.query.graphql';
+import getGroupVariables from './queries/group_variables.query.graphql';
+
+const prepareVariableForApi = ({ variable, destroy = false }) => {
+  return {
+    ...convertObjectPropsToSnakeCase(variable),
+    id: getIdFromGraphQLId(variable?.id),
+    variable_type: variable.variableType.toLowerCase(),
+    secret_value: variable.value,
+    _destroy: destroy,
+  };
+};
+
+const mapVariableTypes = (variables = [], kind) => {
+  return variables.map((ciVar) => {
+    return {
+      __typename: `Ci${kind}Variable`,
+      ...convertObjectPropsToCamelCase(ciVar),
+      variableType: ciVar.variable_type ? ciVar.variable_type.toUpperCase() : ciVar.variableType,
+    };
+  });
+};
+
+const prepareGroupGraphQLResponse = ({ data, groupId, errors = [] }) => {
+  return {
+    errors,
+    group: {
+      __typename: GRAPHQL_GROUP_TYPE,
+      id: groupId,
+      ciVariables: {
+        __typename: 'CiVariableConnection',
+        nodes: mapVariableTypes(data.variables, groupString),
+      },
+    },
+  };
+};
+
+const prepareAdminGraphQLResponse = ({ data, errors = [] }) => {
+  return {
+    errors,
+    ciVariables: {
+      __typename: `Ci${instanceString}VariableConnection`,
+      nodes: mapVariableTypes(data.variables, instanceString),
+    },
+  };
+};
+
+const callGroupEndpoint = async ({
+  endpoint,
+  fullPath,
+  variable,
+  groupId,
+  cache,
+  destroy = false,
+}) => {
+  try {
+    const { data } = await axios.patch(endpoint, {
+      variables_attributes: [prepareVariableForApi({ variable, destroy })],
+    });
+    return prepareGroupGraphQLResponse({ data, groupId });
+  } catch (e) {
+    return prepareGroupGraphQLResponse({
+      data: cache.readQuery({ query: getGroupVariables, variables: { fullPath } }),
+      groupId,
+      errors: [...e.response.data],
+    });
+  }
+};
+
+const callAdminEndpoint = async ({ endpoint, variable, cache, destroy = false }) => {
+  try {
+    const { data } = await axios.patch(endpoint, {
+      variables_attributes: [prepareVariableForApi({ variable, destroy })],
+    });
+
+    return prepareAdminGraphQLResponse({ data });
+  } catch (e) {
+    return prepareAdminGraphQLResponse({
+      data: cache.readQuery({ query: getAdminVariables }),
+      errors: [...e.response.data],
+    });
+  }
+};
+
+export const resolvers = {
+  Mutation: {
+    addGroupVariable: async (_, { endpoint, fullPath, variable, groupId }, { cache }) => {
+      return callGroupEndpoint({ endpoint, fullPath, variable, groupId, cache });
+    },
+    updateGroupVariable: async (_, { endpoint, fullPath, variable, groupId }, { cache }) => {
+      return callGroupEndpoint({ endpoint, fullPath, variable, groupId, cache });
+    },
+    deleteGroupVariable: async (_, { endpoint, fullPath, variable, groupId }, { cache }) => {
+      return callGroupEndpoint({ endpoint, fullPath, variable, groupId, cache, destroy: true });
+    },
+    addAdminVariable: async (_, { endpoint, variable }, { cache }) => {
+      return callAdminEndpoint({ endpoint, variable, cache });
+    },
+    updateAdminVariable: async (_, { endpoint, variable }, { cache }) => {
+      return callAdminEndpoint({ endpoint, variable, cache });
+    },
+    deleteAdminVariable: async (_, { endpoint, variable }, { cache }) => {
+      return callAdminEndpoint({ endpoint, variable, cache, destroy: true });
+    },
+  },
+};
diff --git a/app/assets/javascripts/ci_variable_list/index.js b/app/assets/javascripts/ci_variable_list/index.js
index 2b54af6a2a4..a74af8aed12 100644
--- a/app/assets/javascripts/ci_variable_list/index.js
+++ b/app/assets/javascripts/ci_variable_list/index.js
@@ -2,8 +2,10 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import CiVariableSettings from './components/ci_variable_settings.vue';
+import CiAdminVariables from './components/ci_admin_variables.vue';
+import CiGroupVariables from './components/ci_group_variables.vue';
 import LegacyCiVariableSettings from './components/legacy_ci_variable_settings.vue';
+import { resolvers } from './graphql/resolvers';
 import createStore from './store';
 
 const mountCiVariableListApp = (containerEl) => {
@@ -13,8 +15,12 @@ const mountCiVariableListApp = (containerEl) => {
     awsTipDeployLink,
     awsTipLearnLink,
     containsVariableReferenceLink,
+    endpoint,
     environmentScopeLink,
-    group,
+    groupId,
+    groupPath,
+    isGroup,
+    isProject,
     maskedEnvironmentVariablesLink,
     maskableRegex,
     projectFullPath,
@@ -23,13 +29,20 @@ const mountCiVariableListApp = (containerEl) => {
     protectedEnvironmentVariablesLink,
   } = containerEl.dataset;
 
-  const isGroup = parseBoolean(group);
+  const parsedIsProject = parseBoolean(isProject);
+  const parsedIsGroup = parseBoolean(isGroup);
   const isProtectedByDefault = parseBoolean(protectedByDefault);
 
+  let component = CiAdminVariables;
+
+  if (parsedIsGroup) {
+    component = CiGroupVariables;
+  }
+
   Vue.use(VueApollo);
 
   const apolloProvider = new VueApollo({
-    defaultClient: createDefaultClient(),
+    defaultClient: createDefaultClient(resolvers),
   });
 
   return new Vue({
@@ -41,8 +54,12 @@ const mountCiVariableListApp = (containerEl) => {
       awsTipDeployLink,
       awsTipLearnLink,
       containsVariableReferenceLink,
+      endpoint,
       environmentScopeLink,
-      isGroup,
+      groupId,
+      groupPath,
+      isGroup: parsedIsGroup,
+      isProject: parsedIsProject,
       isProtectedByDefault,
       maskedEnvironmentVariablesLink,
       maskableRegex,
@@ -51,7 +68,7 @@ const mountCiVariableListApp = (containerEl) => {
       protectedEnvironmentVariablesLink,
     },
     render(createElement) {
-      return createElement(CiVariableSettings);
+      return createElement(component);
     },
   });
 };
diff --git a/app/assets/javascripts/ci_variable_list/store/utils.js b/app/assets/javascripts/ci_variable_list/store/utils.js
index d9ca460a8e1..f46a671ae7b 100644
--- a/app/assets/javascripts/ci_variable_list/store/utils.js
+++ b/app/assets/javascripts/ci_variable_list/store/utils.js
@@ -1,5 +1,5 @@
 import { cloneDeep } from 'lodash';
-import { displayText, types } from '../constants';
+import { displayText, types, allEnvironments } from '../constants';
 
 const variableTypeHandler = (type) =>
   type === displayText.variableText ? types.variableType : types.fileType;
@@ -15,7 +15,7 @@ export const prepareDataForDisplay = (variables) => {
     }
     variableCopy.secret_value = variableCopy.value;
 
-    if (variableCopy.environment_scope === types.allEnvironmentsType) {
+    if (variableCopy.environment_scope === allEnvironments.type) {
       variableCopy.environment_scope = displayText.allEnvironmentsText;
     }
     variableCopy.protected_variable = variableCopy.protected;
@@ -31,7 +31,7 @@ export const prepareDataForApi = (variable, destroy = false) => {
   variableCopy.masked = variableCopy.masked.toString();
   variableCopy.variable_type = variableTypeHandler(variableCopy.variable_type);
   if (variableCopy.environment_scope === displayText.allEnvironmentsText) {
-    variableCopy.environment_scope = types.allEnvironmentsType;
+    variableCopy.environment_scope = allEnvironments.type;
   }
 
   if (destroy) {
diff --git a/app/assets/javascripts/ci_variable_list/utils.js b/app/assets/javascripts/ci_variable_list/utils.js
new file mode 100644
index 00000000000..1faa97a5f73
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/utils.js
@@ -0,0 +1,50 @@
+import { uniq } from 'lodash';
+import { allEnvironments } from './constants';
+
+/**
+ * This function takes a list of variable, environments and
+ * new environments added through the scope dropdown
+ * and create a new Array that concatenate the environment list
+ * with the environment scopes find in the variable list. This is
+ * useful for variable settings so that we can render a list of all
+ * environment scopes available based on the list of envs, the ones the user
+ * added explictly and what is found under each variable.
+ * @param {Array} variables
+ * @param {Array} environments
+ * @returns {Array} - Array of environments
+ */
+
+export const createJoinedEnvironments = (
+  variables = [],
+  environments = [],
+  newEnvironments = [],
+) => {
+  const scopesFromVariables = variables.map((variable) => variable.environmentScope);
+  return uniq([...environments, ...newEnvironments, ...scopesFromVariables]).sort();
+};
+
+/**
+ * This function job is to convert the * wildcard to text when applicable
+ * in the UI. It uses a constants to compare the incoming value to that
+ * of the * and then apply the corresponding label if applicable. If there
+ * is no scope, then we return the default value as well.
+ * @param {String} scope
+ * @returns {String} - Converted value if applicable
+ */
+
+export const convertEnvironmentScope = (environmentScope = '') => {
+  if (environmentScope === allEnvironments.type || !environmentScope) {
+    return allEnvironments.text;
+  }
+
+  return environmentScope;
+};
+
+/**
+ * Gives us an array of all the environments by name
+ * @param {Array} nodes
+ * @return {Array<String>} - Array of environments strings
+ */
+export const mapEnvironmentNames = (nodes = []) => {
+  return nodes.map((env) => env.name);
+};