From 3b92dcccb03909ad7099ea61402fb4f60ac94cef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Caplette?= <fcaplette@gitlab.com>
Date: Mon, 4 Jul 2022 15:08:15 -0400
Subject: [PATCH] Refactor ci variable settings with graphQL

Instead of using VueX + REST for the variable settings
in CI/CD, we migrate to use apollo + graphQL.
---
 .../components/ci_admin_variables.vue         | 105 +++++
 .../components/ci_environments_dropdown.vue   |  47 ++-
 .../components/ci_group_variables.vue         | 124 ++++++
 .../components/ci_project_variables.vue       | 122 ++++++
 .../components/ci_variable_modal.vue          | 203 +++++-----
 .../components/ci_variable_settings.vue       |  88 ++++-
 .../components/ci_variable_table.vue          |  75 +++-
 .../components/legacy_ci_variable_modal.vue   |   6 +-
 .../javascripts/ci_variable_list/constants.js |  52 ++-
 .../fragments/ci_variable.fragment.graphql    |   9 +
 .../admin_add_variable.mutation.graphql       |  12 +
 .../admin_delete_variable.mutation.graphql    |  12 +
 .../admin_update_variable.mutation.graphql    |  12 +
 .../add_group_environment.mutation.graphql    |   3 +
 .../add_project_environment.mutation.graphql  |   3 +
 .../group_add_variable.mutation.graphql       |  25 ++
 .../group_delete_variable.mutation.graphql    |  25 ++
 .../group_update_variable.mutation.graphql    |  25 ++
 .../project_add_variable.mutation.graphql     |  25 ++
 .../project_delete_variable.mutation.graphql  |  25 ++
 .../project_update_variable.mutation.graphql  |  25 ++
 .../client/group_environments.query.graphql   |  11 +
 .../queries/group_variables.query.graphql     |  13 +
 .../project_environments.query.graphql        |  11 +
 .../queries/project_variables.query.graphql   |  13 +
 .../graphql/queries/variables.query.graphql   |   9 +
 .../ci_variable_list/graphql/resolvers.js     | 205 ++++++++++
 .../javascripts/ci_variable_list/index.js     |  32 +-
 .../mixins/variable_mutation.js               |  27 ++
 .../ci_variable_list/store/utils.js           |   6 +-
 .../javascripts/ci_variable_list/utils.js     |  45 +++
 .../admin/application_settings_controller.rb  |   4 +
 .../groups/settings/ci_cd_controller.rb       |   3 +
 app/views/ci/variables/_index.html.haml       |   7 +-
 spec/features/group_variables_spec.rb         |  10 +-
 spec/features/project_variables_spec.rb       |  30 +-
 .../components/ci_admin_variables_spec.js     | 180 +++++++++
 .../ci_environments_dropdown_spec.js          | 124 ++++++
 .../components/ci_group_variables_spec.js     | 185 +++++++++
 .../components/ci_project_variables_spec.js   | 217 +++++++++++
 .../components/ci_variable_modal_spec.js      | 368 ++++++++++++++++++
 .../components/ci_variable_settings_spec.js   | 113 ++++++
 .../components/ci_variable_table_spec.js      | 101 +++++
 spec/frontend/ci_variable_list/mocks.js       | 116 ++++++
 spec/frontend/ci_variable_list/utils_spec.js  |  68 ++++
 45 files changed, 2772 insertions(+), 149 deletions(-)
 create mode 100644 app/assets/javascripts/ci_variable_list/components/ci_admin_variables.vue
 create mode 100644 app/assets/javascripts/ci_variable_list/components/ci_group_variables.vue
 create mode 100644 app/assets/javascripts/ci_variable_list/components/ci_project_variables.vue
 create mode 100644 app/assets/javascripts/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql
 create mode 100644 app/assets/javascripts/ci_variable_list/graphql/mutations/admin_add_variable.mutation.graphql
 create mode 100644 app/assets/javascripts/ci_variable_list/graphql/mutations/admin_delete_variable.mutation.graphql
 create mode 100644 app/assets/javascripts/ci_variable_list/graphql/mutations/admin_update_variable.mutation.graphql
 create mode 100644 app/assets/javascripts/ci_variable_list/graphql/mutations/client/add_group_environment.mutation.graphql
 create mode 100644 app/assets/javascripts/ci_variable_list/graphql/mutations/client/add_project_environment.mutation.graphql
 create mode 100644 app/assets/javascripts/ci_variable_list/graphql/mutations/group_add_variable.mutation.graphql
 create mode 100644 app/assets/javascripts/ci_variable_list/graphql/mutations/group_delete_variable.mutation.graphql
 create mode 100644 app/assets/javascripts/ci_variable_list/graphql/mutations/group_update_variable.mutation.graphql
 create mode 100644 app/assets/javascripts/ci_variable_list/graphql/mutations/project_add_variable.mutation.graphql
 create mode 100644 app/assets/javascripts/ci_variable_list/graphql/mutations/project_delete_variable.mutation.graphql
 create mode 100644 app/assets/javascripts/ci_variable_list/graphql/mutations/project_update_variable.mutation.graphql
 create mode 100644 app/assets/javascripts/ci_variable_list/graphql/queries/client/group_environments.query.graphql
 create mode 100644 app/assets/javascripts/ci_variable_list/graphql/queries/group_variables.query.graphql
 create mode 100644 app/assets/javascripts/ci_variable_list/graphql/queries/project_environments.query.graphql
 create mode 100644 app/assets/javascripts/ci_variable_list/graphql/queries/project_variables.query.graphql
 create mode 100644 app/assets/javascripts/ci_variable_list/graphql/queries/variables.query.graphql
 create mode 100644 app/assets/javascripts/ci_variable_list/graphql/resolvers.js
 create mode 100644 app/assets/javascripts/ci_variable_list/mixins/variable_mutation.js
 create mode 100644 app/assets/javascripts/ci_variable_list/utils.js
 create mode 100644 spec/frontend/ci_variable_list/components/ci_admin_variables_spec.js
 create mode 100644 spec/frontend/ci_variable_list/components/ci_environments_dropdown_spec.js
 create mode 100644 spec/frontend/ci_variable_list/components/ci_group_variables_spec.js
 create mode 100644 spec/frontend/ci_variable_list/components/ci_project_variables_spec.js
 create mode 100644 spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js
 create mode 100644 spec/frontend/ci_variable_list/components/ci_variable_settings_spec.js
 create mode 100644 spec/frontend/ci_variable_list/components/ci_variable_table_spec.js
 create mode 100644 spec/frontend/ci_variable_list/mocks.js
 create mode 100644 spec/frontend/ci_variable_list/utils_spec.js

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 00000000000000..1da7c8656ce8f2
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/components/ci_admin_variables.vue
@@ -0,0 +1,105 @@
+<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 {
+      adminEnvironments: [],
+      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;
+    },
+    mutationData() {
+      return {
+        [ADD_MUTATION_ACTION]: { action: addAdminVariable, name: 'addAdminVariable' },
+        [UPDATE_MUTATION_ACTION]: { action: updateAdminVariable, name: 'updateAdminVariable' },
+        [DELETE_MUTATION_ACTION]: { action: deleteAdminVariable, name: 'deleteAdminVariable' },
+      };
+    },
+  },
+  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.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 (e) {
+        createFlash({ message: genericMutationErrorText });
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <ci-variable-settings
+    :are-scoped-variables-available="false"
+    :environments="adminEnvironments"
+    :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 ecb39f214ec56f..69feceb63bac49 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 });
     },
-    shouldRenderCreateButton() {
-      return this.searchTerm && !this.joinedEnvironments.includes(this.searchTerm);
-    },
-    filteredResults() {
+    filteredEnvironments() {
       const lowerCasedSearchTerm = this.searchTerm.toLowerCase();
-      return this.joinedEnvironments.filter((resultString) =>
+      return this.environments.filter((resultString) =>
         resultString.toLowerCase().includes(lowerCasedSearchTerm),
       );
     },
+    shouldRenderCreateButton() {
+      return this.searchTerm && !this.environments.includes(this.searchTerm);
+    },
+    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);
+    },
+    async createEnvironmentScope() {
+      await 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 00000000000000..833133aebf9e72
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/components/ci_group_variables.vue
@@ -0,0 +1,124 @@
+<script>
+import createFlash from '~/flash';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import getGroupEnvironments from '../graphql/queries/client/group_environments.query.graphql';
+import getGroupVariables from '../graphql/queries/group_variables.query.graphql';
+import { mapEnvironmentNames } from '../utils';
+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 {
+      groupEnvironments: [],
+      groupVariables: [],
+    };
+  },
+  apollo: {
+    groupEnvironments: {
+      query: getGroupEnvironments,
+      variables() {
+        return {
+          fullPath: this.groupPath,
+        };
+      },
+      update(data) {
+        return mapEnvironmentNames(data?.group?.environments?.nodes);
+      },
+    },
+    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 ||
+        this.$apollo.queries.groupEnvironments.loading
+      );
+    },
+    mutationData() {
+      return {
+        [ADD_MUTATION_ACTION]: { action: addGroupVariable, name: 'addGroupVariable' },
+        [UPDATE_MUTATION_ACTION]: { action: updateGroupVariable, name: 'updateGroupVariable' },
+        [DELETE_MUTATION_ACTION]: { action: deleteGroupVariable, name: 'deleteGroupVariable' },
+      };
+    },
+  },
+  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.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 });
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <ci-variable-settings
+    :are-scoped-variables-available="areScopedVariablesAvailable"
+    :environments="groupEnvironments"
+    :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_project_variables.vue b/app/assets/javascripts/ci_variable_list/components/ci_project_variables.vue
new file mode 100644
index 00000000000000..1689c10a63111e
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/components/ci_project_variables.vue
@@ -0,0 +1,122 @@
+<script>
+import createFlash from '~/flash';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import getProjectEnvironments from '../graphql/queries/project_environments.query.graphql';
+import getProjectVariables from '../graphql/queries/project_variables.query.graphql';
+import { mapEnvironmentNames } from '../utils';
+import {
+  ADD_MUTATION_ACTION,
+  DELETE_MUTATION_ACTION,
+  GRAPHQL_PROJECT_TYPE,
+  UPDATE_MUTATION_ACTION,
+  environmentFetchErrorText,
+  genericMutationErrorText,
+  variableFetchErrorText,
+} from '../constants';
+import addProjectVariable from '../graphql/mutations/project_add_variable.mutation.graphql';
+import deleteProjectVariable from '../graphql/mutations/project_delete_variable.mutation.graphql';
+import updateProjectVariable from '../graphql/mutations/project_update_variable.mutation.graphql';
+import ciVariableSettings from './ci_variable_settings.vue';
+
+export default {
+  components: {
+    ciVariableSettings,
+  },
+  inject: ['endpoint', 'projectFullPath', 'projectId'],
+  data() {
+    return {
+      projectEnvironments: [],
+      projectVariables: [],
+    };
+  },
+  apollo: {
+    projectEnvironments: {
+      query: getProjectEnvironments,
+      variables() {
+        return {
+          fullPath: this.projectFullPath,
+        };
+      },
+      update(data) {
+        return mapEnvironmentNames(data?.project?.environments?.nodes);
+      },
+      error() {
+        createFlash({ message: environmentFetchErrorText });
+      },
+    },
+    projectVariables: {
+      query: getProjectVariables,
+      variables() {
+        return {
+          fullPath: this.projectFullPath,
+        };
+      },
+      update(data) {
+        return data?.project?.ciVariables?.nodes;
+      },
+      error() {
+        createFlash({ message: variableFetchErrorText });
+      },
+    },
+  },
+  computed: {
+    isLoading() {
+      return (
+        this.$apollo.queries.projectVariables.loading ||
+        this.$apollo.queries.projectEnvironments.loading
+      );
+    },
+    mutationData() {
+      return {
+        [ADD_MUTATION_ACTION]: { action: addProjectVariable, name: 'addProjectVariable' },
+        [UPDATE_MUTATION_ACTION]: { action: updateProjectVariable, name: 'updateProjectVariable' },
+        [DELETE_MUTATION_ACTION]: { action: deleteProjectVariable, name: 'deleteProjectVariable' },
+      };
+    },
+  },
+  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.mutationData[mutationAction];
+        const { data } = await this.$apollo.mutate({
+          mutation: currentMutation.action,
+          variables: {
+            endpoint: this.endpoint,
+            fullPath: this.projectFullPath,
+            projectId: convertToGraphQLId(GRAPHQL_PROJECT_TYPE, this.projectId),
+            variable,
+          },
+        });
+
+        const { errors } = data[currentMutation.name];
+        if (errors.length > 0) {
+          createFlash({ message: errors[0] });
+        }
+      } catch (e) {
+        createFlash({ message: genericMutationErrorText });
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <ci-variable-settings
+    :are-scoped-variables-available="true"
+    :environments="projectEnvironments"
+    :is-loading="isLoading"
+    :variables="projectVariables"
+    @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 557a8d6b5ba033..dc57f3fe4ced88 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 CiEnvironmentsDropdown from './ci_environments_dropdown.vue';
 import { awsTokens, awsTokenList } from './ci_variable_autocomplete_tokens';
 
@@ -58,66 +62,75 @@ 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: () => {},
+    },
+  },
   data() {
     return {
       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);
+    },
+    maskedFeedback() {
+      return this.displayMaskedError ? __('This variable can not be masked.') : '';
+    },
     maskedState() {
       if (this.displayMaskedError) {
         return false;
@@ -125,10 +138,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 +151,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 +172,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.$emit('create-environment-scope', 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 +196,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 +219,7 @@ export default {
       this.hideModal();
     },
     setVariableProtectedByDefault() {
-      if (this.isProtectedByDefault && !this.variableBeingEdited) {
+      if (this.isProtectedByDefault && !this.isEditing) {
         this.setVariableProtected();
       }
     },
@@ -220,11 +232,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 +249,7 @@ export default {
       this.validationErrorEventProperty = '';
     },
   },
+  defaultScope: allEnvironments.text,
 };
 </script>
 
@@ -252,7 +265,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 +280,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 +291,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 +311,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="environments"
+            @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 +341,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 +422,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 4cc00eb01d934e..7453f3d33be4a5 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,93 @@
 <script>
-export default {};
+import { ADD_VARIABLE_ACTION, EDIT_VARIABLE_ACTION } from '../constants';
+import { createJoinedEnvironments } from '../utils';
+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: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    variables: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selectedVariable: {},
+      showModal: false,
+      mode: ADD_VARIABLE_ACTION,
+    };
+  },
+  computed: {
+    joinedEnvironments() {
+      return createJoinedEnvironments(this.variables, this.environments);
+    },
+  },
+  methods: {
+    addVariable(variable) {
+      this.$emit('add-variable', variable);
+    },
+    deleteVariable(variable) {
+      this.$emit('delete-variable', variable);
+    },
+    updateVariable(variable) {
+      this.$emit('update-variable', variable);
+    },
+    hideModal() {
+      this.showModal = false;
+    },
+    setSelectedVariable(variable = null) {
+      if (!variable) {
+        this.selectedVariable = {};
+        this.mode = ADD_VARIABLE_ACTION;
+      } else {
+        this.selectedVariable = variable;
+        this.mode = EDIT_VARIABLE_ACTION;
+      }
+
+      this.showModal = true;
+    },
+  },
+};
 </script>
 
 <template>
   <div class="row">
-    <div class="col-lg-12"></div>
+    <div class="col-lg-12">
+      <ci-variable-table
+        :is-loading="isLoading"
+        :variables="variables"
+        @setSelectedVariable="setSelectedVariable"
+      />
+      <ci-variable-modal
+        v-if="showModal"
+        :are-scoped-variables-available="areScopedVariablesAvailable"
+        :environments="joinedEnvironments"
+        :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 f078234829acc7..0906515d0c16d5 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('setSelectedVariable', 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 7dcc5ce42d7ab6..cebb7eb85ac8e8 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 fa55b4d9e77fa2..e42a728a44ed06 100644
--- a/app/assets/javascripts/ci_variable_list/constants.js
+++ b/app/assets/javascripts/ci_variable_list/constants.js
@@ -2,16 +2,49 @@ 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,
 };
 
 export const AWS_TIP_DISMISSED_COOKIE_NAME = 'ci_variable_list_constants_aws_tip_dismissed';
@@ -33,3 +66,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 00000000000000..57ec97c1fb62e1
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql
@@ -0,0 +1,9 @@
+fragment BaseCiVariable on CiVariable {
+  __typename
+  id
+  key
+  masked
+  protected
+  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 00000000000000..ba3e5034e787d8
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/mutations/admin_add_variable.mutation.graphql
@@ -0,0 +1,12 @@
+#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
+      }
+    }
+    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 00000000000000..fbaa79d2405c41
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/mutations/admin_delete_variable.mutation.graphql
@@ -0,0 +1,12 @@
+#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
+      }
+    }
+    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 00000000000000..392e40e6dcbfc1
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/mutations/admin_update_variable.mutation.graphql
@@ -0,0 +1,12 @@
+#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
+      }
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/ci_variable_list/graphql/mutations/client/add_group_environment.mutation.graphql b/app/assets/javascripts/ci_variable_list/graphql/mutations/client/add_group_environment.mutation.graphql
new file mode 100644
index 00000000000000..538af71eadcce2
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/mutations/client/add_group_environment.mutation.graphql
@@ -0,0 +1,3 @@
+mutation addGroupEnvironment($environment: CiEnvironment, $fullPath: ID!) {
+  addGroupEnvironment(environment: $environment, fullPath: $fullPath) @client
+}
diff --git a/app/assets/javascripts/ci_variable_list/graphql/mutations/client/add_project_environment.mutation.graphql b/app/assets/javascripts/ci_variable_list/graphql/mutations/client/add_project_environment.mutation.graphql
new file mode 100644
index 00000000000000..45109762e80764
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/mutations/client/add_project_environment.mutation.graphql
@@ -0,0 +1,3 @@
+mutation addProjectEnvironment($environment: CiEnvironment, $fullPath: ID!) {
+  addProjectEnvironment(environment: $environment, fullPath: $fullPath) @client
+}
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 00000000000000..c6cf22427255a4
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/mutations/group_add_variable.mutation.graphql
@@ -0,0 +1,25 @@
+#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
+        }
+      }
+    }
+    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 00000000000000..cd05d055882497
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/mutations/group_delete_variable.mutation.graphql
@@ -0,0 +1,25 @@
+#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
+        }
+      }
+    }
+    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 00000000000000..bf121aca995c97
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/mutations/group_update_variable.mutation.graphql
@@ -0,0 +1,25 @@
+#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
+        }
+      }
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/ci_variable_list/graphql/mutations/project_add_variable.mutation.graphql b/app/assets/javascripts/ci_variable_list/graphql/mutations/project_add_variable.mutation.graphql
new file mode 100644
index 00000000000000..932f3a5b369502
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/mutations/project_add_variable.mutation.graphql
@@ -0,0 +1,25 @@
+#import "~/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql"
+
+mutation addProjectVariable(
+  $variable: CiVariable!
+  $endpoint: String!
+  $fullPath: ID!
+  $projectId: ID!
+) {
+  addProjectVariable(
+    variable: $variable
+    endpoint: $endpoint
+    fullPath: $fullPath
+    projectId: $projectId
+  ) @client {
+    project {
+      id
+      ciVariables {
+        nodes {
+          ...BaseCiVariable
+        }
+      }
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/ci_variable_list/graphql/mutations/project_delete_variable.mutation.graphql b/app/assets/javascripts/ci_variable_list/graphql/mutations/project_delete_variable.mutation.graphql
new file mode 100644
index 00000000000000..e4598dc7a40fa3
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/mutations/project_delete_variable.mutation.graphql
@@ -0,0 +1,25 @@
+#import "~/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql"
+
+mutation deleteProjectVariable(
+  $variable: CiVariable!
+  $endpoint: String!
+  $fullPath: ID!
+  $projectId: ID!
+) {
+  deleteProjectVariable(
+    variable: $variable
+    endpoint: $endpoint
+    fullPath: $fullPath
+    projectId: $projectId
+  ) @client {
+    project {
+      id
+      ciVariables {
+        nodes {
+          ...BaseCiVariable
+        }
+      }
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/ci_variable_list/graphql/mutations/project_update_variable.mutation.graphql b/app/assets/javascripts/ci_variable_list/graphql/mutations/project_update_variable.mutation.graphql
new file mode 100644
index 00000000000000..37e50cccd3c2a4
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/mutations/project_update_variable.mutation.graphql
@@ -0,0 +1,25 @@
+#import "~/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql"
+
+mutation updateProjectVariable(
+  $variable: CiVariable!
+  $endpoint: String!
+  $fullPath: ID!
+  $projectId: ID!
+) {
+  updateProjectVariable(
+    variable: $variable
+    endpoint: $endpoint
+    fullPath: $fullPath
+    projectId: $projectId
+  ) @client {
+    project {
+      id
+      ciVariables {
+        nodes {
+          ...BaseCiVariable
+        }
+      }
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/ci_variable_list/graphql/queries/client/group_environments.query.graphql b/app/assets/javascripts/ci_variable_list/graphql/queries/client/group_environments.query.graphql
new file mode 100644
index 00000000000000..4d8e020610cbba
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/queries/client/group_environments.query.graphql
@@ -0,0 +1,11 @@
+query getGroupEnvironments($fullPath: ID!) {
+  group(fullPath: $fullPath) @client {
+    id
+    environments {
+      nodes {
+        id
+        name
+      }
+    }
+  }
+}
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 00000000000000..c911ab0d868d53
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/queries/group_variables.query.graphql
@@ -0,0 +1,13 @@
+#import "~/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql"
+
+query getGroupVariables($fullPath: ID!) {
+  group(fullPath: $fullPath) {
+    id
+    ciVariables {
+      nodes {
+        ...BaseCiVariable
+        environmentScope
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/ci_variable_list/graphql/queries/project_environments.query.graphql b/app/assets/javascripts/ci_variable_list/graphql/queries/project_environments.query.graphql
new file mode 100644
index 00000000000000..921e0ca25b935e
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/queries/project_environments.query.graphql
@@ -0,0 +1,11 @@
+query getProjectEnvironments($fullPath: ID!) {
+  project(fullPath: $fullPath) {
+    id
+    environments {
+      nodes {
+        id
+        name
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/ci_variable_list/graphql/queries/project_variables.query.graphql b/app/assets/javascripts/ci_variable_list/graphql/queries/project_variables.query.graphql
new file mode 100644
index 00000000000000..33ae7ef03f8598
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/queries/project_variables.query.graphql
@@ -0,0 +1,13 @@
+#import "~/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql"
+
+query getProjectVariables($fullPath: ID!) {
+  project(fullPath: $fullPath) {
+    id
+    ciVariables {
+      nodes {
+        ...BaseCiVariable
+        environmentScope
+      }
+    }
+  }
+}
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 00000000000000..734c4a340d7b76
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/queries/variables.query.graphql
@@ -0,0 +1,9 @@
+#import "~/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql"
+
+query getVariables {
+  ciVariables {
+    nodes {
+      ...BaseCiVariable
+    }
+  }
+}
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 00000000000000..55217a742c50f8
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/graphql/resolvers.js
@@ -0,0 +1,205 @@
+import axios from 'axios';
+import { produce } from 'immer';
+import {
+  convertObjectPropsToCamelCase,
+  convertObjectPropsToSnakeCase,
+} from '../../lib/utils/common_utils';
+import { getIdFromGraphQLId } from '../../graphql_shared/utils';
+import { GRAPHQL_GROUP_TYPE, GRAPHQL_PROJECT_TYPE } from '../constants';
+import getGroupEnvironments from './queries/client/group_environments.query.graphql';
+import getProjectEnvironments from './queries/project_environments.query.graphql';
+import getProjectVariables from './queries/project_variables.query.graphql';
+import getGroupVariables from './queries/group_variables.query.graphql';
+import getAdminVariables from './queries/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 = []) => {
+  return variables.map((ciVar) => {
+    return {
+      __typename: 'CiVariable',
+      ...convertObjectPropsToCamelCase(ciVar),
+      variableType: ciVar.variable_type ? ciVar.variable_type.toUpperCase() : ciVar.variableType,
+    };
+  });
+};
+
+const prepareProjectGraphQLResponse = ({ data, projectId, errors = [] }) => {
+  return {
+    errors,
+    project: {
+      __typename: GRAPHQL_PROJECT_TYPE,
+      id: projectId,
+      ciVariables: {
+        __typename: 'CiVariableConnection',
+        nodes: mapVariableTypes(data.variables),
+      },
+    },
+  };
+};
+
+const prepareGroupGraphQLResponse = ({ data, groupId, errors = [] }) => {
+  return {
+    errors,
+    group: {
+      __typename: GRAPHQL_GROUP_TYPE,
+      id: groupId,
+      ciVariables: {
+        __typename: 'CiVariableConnection',
+        nodes: mapVariableTypes(data.variables),
+      },
+    },
+  };
+};
+
+const prepareAdminGraphQLResponse = ({ data, errors = [] }) => {
+  return {
+    errors,
+    ciVariables: {
+      __typename: 'CiVariableConnection',
+      nodes: mapVariableTypes(data.variables),
+    },
+  };
+};
+
+const callProjectEndpoint = async ({
+  endpoint,
+  fullPath,
+  variable,
+  projectId,
+  cache,
+  destroy = false,
+}) => {
+  try {
+    const { data } = await axios.patch(endpoint, {
+      variables_attributes: [prepareVariableForApi({ variable, destroy })],
+    });
+    return prepareProjectGraphQLResponse({ data, projectId });
+  } catch (e) {
+    return prepareProjectGraphQLResponse({
+      data: cache.readQuery({ query: getProjectVariables, variables: { fullPath } }),
+      projectId,
+      errors: [...e.response.data],
+    });
+  }
+};
+
+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 produceEnvironments = (envs, newEnv, property) => {
+  return produce(envs, (draftData) => {
+    draftData[property] = { ...envs[property] };
+    draftData[property].environments = {
+      nodes: [...envs[property].environments.nodes, { name: newEnv, id: '__CiVariable' }],
+    };
+  });
+};
+
+export const resolvers = {
+  Query: {
+    getGroupEnvironments: async (_, { groupId }) => {
+      return {
+        group: {
+          __typename: GRAPHQL_GROUP_TYPE,
+          id: groupId,
+          environments: {
+            __typename: 'EnvironmentConnection',
+            nodes: [],
+          },
+        },
+      };
+    },
+  },
+  Mutation: {
+    addGroupEnvironment: async (_, { environment, fullPath }, { cache }) => {
+      const sourceEnvironments = cache.readQuery({
+        query: getGroupEnvironments,
+        variables: { fullPath },
+      });
+
+      const data = produceEnvironments(sourceEnvironments, environment, 'group');
+
+      cache.writeQuery({ query: getGroupEnvironments, variables: { fullPath }, data });
+    },
+    addProjectEnvironment: async (_, { environment, fullPath }, { cache }) => {
+      const sourceEnvironments = cache.readQuery({
+        query: getProjectEnvironments,
+        variables: { fullPath },
+      });
+
+      const data = produceEnvironments(sourceEnvironments, environment, 'project');
+
+      cache.writeQuery({ query: getProjectEnvironments, variables: { fullPath }, data });
+    },
+    addProjectVariable: async (_, { endpoint, fullPath, variable, projectId }, { cache }) => {
+      return callProjectEndpoint({ endpoint, fullPath, variable, projectId, cache });
+    },
+    updateProjectVariable: async (_, { endpoint, fullPath, variable, projectId }, { cache }) => {
+      return callProjectEndpoint({ endpoint, fullPath, variable, projectId, cache });
+    },
+    deleteProjectVariable: async (_, { endpoint, fullPath, variable, projectId }, { cache }) => {
+      return callProjectEndpoint({ endpoint, fullPath, variable, projectId, cache, destroy: true });
+    },
+    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 2b54af6a2a4926..2526c3b8a39bc7 100644
--- a/app/assets/javascripts/ci_variable_list/index.js
+++ b/app/assets/javascripts/ci_variable_list/index.js
@@ -2,8 +2,11 @@ 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 CiProjectVariables from './components/ci_project_variables.vue';
+import CiGroupVariables from './components/ci_group_variables.vue';
+import CiAdminVariables from './components/ci_admin_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 +16,12 @@ const mountCiVariableListApp = (containerEl) => {
     awsTipDeployLink,
     awsTipLearnLink,
     containsVariableReferenceLink,
+    endpoint,
     environmentScopeLink,
-    group,
+    groupId,
+    groupPath,
+    isGroup,
+    isProject,
     maskedEnvironmentVariablesLink,
     maskableRegex,
     projectFullPath,
@@ -23,13 +30,22 @@ 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 (parsedIsProject) {
+    component = CiProjectVariables;
+  } else if (parsedIsGroup) {
+    component = CiGroupVariables;
+  }
+
   Vue.use(VueApollo);
 
   const apolloProvider = new VueApollo({
-    defaultClient: createDefaultClient(),
+    defaultClient: createDefaultClient(resolvers),
   });
 
   return new Vue({
@@ -41,8 +57,12 @@ const mountCiVariableListApp = (containerEl) => {
       awsTipDeployLink,
       awsTipLearnLink,
       containsVariableReferenceLink,
+      endpoint,
       environmentScopeLink,
-      isGroup,
+      groupId,
+      groupPath,
+      isGroup: parsedIsGroup,
+      isProject: parsedIsProject,
       isProtectedByDefault,
       maskedEnvironmentVariablesLink,
       maskableRegex,
@@ -51,7 +71,7 @@ const mountCiVariableListApp = (containerEl) => {
       protectedEnvironmentVariablesLink,
     },
     render(createElement) {
-      return createElement(CiVariableSettings);
+      return createElement(component);
     },
   });
 };
diff --git a/app/assets/javascripts/ci_variable_list/mixins/variable_mutation.js b/app/assets/javascripts/ci_variable_list/mixins/variable_mutation.js
new file mode 100644
index 00000000000000..8ecc675dc07d95
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/mixins/variable_mutation.js
@@ -0,0 +1,27 @@
+import createFlash from '~/flash';
+
+export default {
+  methods: {
+    async variableMutation(mutationAction, variable) {
+      try {
+        const currentMutation = this.mutationData[mutationAction];
+        const { data } = await this.$apollo.mutate({
+          mutation: currentMutation.query,
+          variables: {
+            endpoint: this.endpoint,
+            variable,
+            ...this.mutationData.variables,
+          },
+        });
+
+        const { errors } = data[currentMutation.name];
+
+        if (errors.length > 0) {
+          createFlash({ message: errors[0] });
+        }
+      } catch (err) {
+        createFlash({ message: err });
+      }
+    },
+  },
+};
diff --git a/app/assets/javascripts/ci_variable_list/store/utils.js b/app/assets/javascripts/ci_variable_list/store/utils.js
index d9ca460a8e11ae..f46a671ae7be93 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 00000000000000..009e56469d1666
--- /dev/null
+++ b/app/assets/javascripts/ci_variable_list/utils.js
@@ -0,0 +1,45 @@
+import { uniq } from 'lodash';
+import { allEnvironments } from './constants';
+
+/**
+ * This function takes aa list of variable and environments
+ * 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 both the list of envs and what
+ * is found under each variable.
+ * @param {Array} variables
+ * @param {Array} environments
+ * @returns {Array} - Array of environments
+ */
+
+export const createJoinedEnvironments = (variables = [], environments = []) => {
+  const scopesFromVariables = variables.map((variable) => variable.environmentScope);
+  return uniq(environments.concat(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);
+};
diff --git a/app/controllers/admin/application_settings_controller.rb b/app/controllers/admin/application_settings_controller.rb
index e05e87ffd89719..6f21b123eb01e7 100644
--- a/app/controllers/admin/application_settings_controller.rb
+++ b/app/controllers/admin/application_settings_controller.rb
@@ -13,6 +13,10 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
 
   before_action :disable_query_limiting, only: [:usage_data]
 
+  before_action do
+    push_frontend_feature_flag(:ci_variable_settings_graphql)
+  end
+
   feature_category :not_owned, [ # rubocop:todo Gitlab/AvoidFeatureCategoryNotOwned
                      :general, :reporting, :metrics_and_profiling, :network,
                      :preferences, :update, :reset_health_check_token
diff --git a/app/controllers/groups/settings/ci_cd_controller.rb b/app/controllers/groups/settings/ci_cd_controller.rb
index b1afac1f1c701c..e164a834519b45 100644
--- a/app/controllers/groups/settings/ci_cd_controller.rb
+++ b/app/controllers/groups/settings/ci_cd_controller.rb
@@ -10,6 +10,9 @@ class CiCdController < Groups::ApplicationController
       before_action :define_variables, only: [:show]
       before_action :push_licensed_features, only: [:show]
       before_action :assign_variables_to_gon, only: [:show]
+      before_action do
+        push_frontend_feature_flag(:ci_variable_settings_graphql, @group)
+      end
 
       feature_category :continuous_integration
       urgency :low
diff --git a/app/views/ci/variables/_index.html.haml b/app/views/ci/variables/_index.html.haml
index 9ef2599a2a6b4e..02c468cebd745b 100644
--- a/app/views/ci/variables/_index.html.haml
+++ b/app/views/ci/variables/_index.html.haml
@@ -6,10 +6,15 @@
     = s_('Environment variables are configured by your administrator to be %{link_start}protected%{link_end} by default.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
 
 - is_group = !@group.nil?
+- is_project = !@project.nil?
 
 #js-ci-project-variables{ data: { endpoint: save_endpoint,
+  is_project: is_project.to_s,
   project_id: @project&.id || '',
-  group: is_group.to_s,
+  project_full_path: @project&.full_path || '',
+  is_group: is_group.to_s,
+  group_id: @group&.id || '',
+  group_path: @group&.full_path,
   maskable_regex: ci_variable_maskable_regex,
   protected_by_default: ci_variable_protected_by_default?.to_s,
   aws_logo_svg_path: image_path('aws_logo.svg'),
diff --git a/spec/features/group_variables_spec.rb b/spec/features/group_variables_spec.rb
index 9af9baeb5bb0e9..ab24162ad5a5b4 100644
--- a/spec/features/group_variables_spec.rb
+++ b/spec/features/group_variables_spec.rb
@@ -23,7 +23,11 @@
     it_behaves_like 'variable list'
   end
 
-  # TODO: Uncomment when the new graphQL app for variable settings
-  # is enabled.
-  # it_behaves_like 'variable list'
+  context 'with enabled ff `ci_variable_settings_graphql' do
+    before do
+      visit page_path
+    end
+
+    it_behaves_like 'variable list'
+  end
 end
diff --git a/spec/features/project_variables_spec.rb b/spec/features/project_variables_spec.rb
index 89dbd1afc6bc13..d3bedbf3a75574 100644
--- a/spec/features/project_variables_spec.rb
+++ b/spec/features/project_variables_spec.rb
@@ -14,8 +14,6 @@
     project.variables << variable
   end
 
-  # TODO: Add same tests but with FF enabled context when
-  # the new graphQL app for variable settings is enabled.
   context 'with disabled ff `ci_variable_settings_graphql' do
     before do
       stub_feature_flags(ci_variable_settings_graphql: false)
@@ -44,4 +42,32 @@
       end
     end
   end
+
+  context 'with enabled ff `ci_variable_settings_graphql' do
+    before do
+      visit page_path
+    end
+
+    it_behaves_like 'variable list'
+
+    it 'adds a new variable with an environment scope' do
+      click_button('Add variable')
+
+      page.within('#add-ci-variable') do
+        fill_in 'Key', with: 'akey'
+        find('#ci-variable-value').set('akey_value')
+        find('[data-testid="environment-scope"]').click
+        find('[data-testid="ci-environment-search"]').set('review/*')
+        find('[data-testid="create-wildcard-button"]').click
+
+        click_button('Add variable')
+      end
+
+      wait_for_requests
+
+      page.within('[data-testid="ci-variable-table"]') do
+        expect(find('.js-ci-variable-row:first-child [data-label="Environments"]').text).to eq('review/*')
+      end
+    end
+  end
 end
diff --git a/spec/frontend/ci_variable_list/components/ci_admin_variables_spec.js b/spec/frontend/ci_variable_list/components/ci_admin_variables_spec.js
new file mode 100644
index 00000000000000..f6c7f495731083
--- /dev/null
+++ b/spec/frontend/ci_variable_list/components/ci_admin_variables_spec.js
@@ -0,0 +1,180 @@
+import { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlLoadingIcon, GlTable } from '@gitlab/ui';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import createFlash from '~/flash';
+import { resolvers } from '~/ci_variable_list/graphql/resolvers';
+
+import ciAdminVariables from '~/ci_variable_list/components/ci_admin_variables.vue';
+import ciVariableSettings from '~/ci_variable_list/components/ci_variable_settings.vue';
+import ciVariableTable from '~/ci_variable_list/components/ci_variable_table.vue';
+import getAdminVariables from '~/ci_variable_list/graphql/queries/variables.query.graphql';
+
+import addAdminVariable from '~/ci_variable_list/graphql/mutations/admin_add_variable.mutation.graphql';
+import deleteAdminVariable from '~/ci_variable_list/graphql/mutations/admin_delete_variable.mutation.graphql';
+import updateAdminVariable from '~/ci_variable_list/graphql/mutations/admin_update_variable.mutation.graphql';
+
+import { genericMutationErrorText, variableFetchErrorText } from '~/ci_variable_list/constants';
+
+import { mockAdminVariables, newVariable } from '../mocks';
+
+jest.mock('~/flash');
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
+const mockProvide = {
+  endpoint: '/variables',
+};
+
+describe('Ci Admin Variable list', () => {
+  let wrapper;
+
+  let mockApollo;
+  let mockVariables;
+
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findCiTable = () => wrapper.findComponent(GlTable);
+  const findCiSettings = () => wrapper.findComponent(ciVariableSettings);
+
+  // eslint-disable-next-line consistent-return
+  const createComponentWithApollo = async ({ isLoading = false } = {}) => {
+    const handlers = [[getAdminVariables, mockVariables]];
+
+    mockApollo = createMockApollo(handlers, resolvers);
+
+    wrapper = shallowMount(ciAdminVariables, {
+      provide: mockProvide,
+      apolloProvider: mockApollo,
+      stubs: { ciVariableSettings, ciVariableTable },
+      localVue,
+    });
+
+    if (!isLoading) {
+      return waitForPromises();
+    }
+  };
+
+  beforeEach(() => {
+    mockVariables = jest.fn();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('while queries are being fetch', () => {
+    beforeEach(() => {
+      createComponentWithApollo({ isLoading: true });
+    });
+
+    it('shows a loading icon', () => {
+      expect(findLoadingIcon().exists()).toBe(true);
+      expect(findCiTable().exists()).toBe(false);
+    });
+  });
+
+  describe('when queries are resolved', () => {
+    describe('successfuly', () => {
+      beforeEach(async () => {
+        mockVariables.mockResolvedValue(mockAdminVariables);
+
+        await createComponentWithApollo();
+      });
+
+      it('passes down the expected environments as props', () => {
+        expect(findCiSettings().props('environments')).toEqual([]);
+      });
+
+      it('passes down the expected variables as props', () => {
+        expect(findCiSettings().props('variables')).toEqual(
+          mockAdminVariables.data.ciVariables.nodes,
+        );
+      });
+
+      it('createFlash was not called', () => {
+        expect(createFlash).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('with an error for variables', () => {
+      beforeEach(async () => {
+        mockVariables.mockRejectedValue();
+
+        await createComponentWithApollo();
+      });
+
+      it('calls createFlash with the expected error message', () => {
+        expect(createFlash).toHaveBeenCalledWith({ message: variableFetchErrorText });
+      });
+    });
+  });
+
+  describe('mutations', () => {
+    beforeEach(async () => {
+      mockVariables.mockResolvedValue(mockAdminVariables);
+
+      await createComponentWithApollo();
+    });
+    it.each`
+      actionName  | mutation               | event
+      ${'add'}    | ${addAdminVariable}    | ${'add-variable'}
+      ${'update'} | ${updateAdminVariable} | ${'update-variable'}
+      ${'delete'} | ${deleteAdminVariable} | ${'delete-variable'}
+    `(
+      'calls the right mutation when user performs $actionName variable',
+      async ({ event, mutation }) => {
+        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue();
+        await findCiSettings().vm.$emit(event, newVariable);
+
+        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
+          mutation,
+          variables: {
+            endpoint: mockProvide.endpoint,
+            variable: newVariable,
+          },
+        });
+      },
+    );
+
+    it.each`
+      actionName  | event                | mutationName
+      ${'add'}    | ${'add-variable'}    | ${'addAdminVariable'}
+      ${'update'} | ${'update-variable'} | ${'updateAdminVariable'}
+      ${'delete'} | ${'delete-variable'} | ${'deleteAdminVariable'}
+    `(
+      'throws with the specific graphql error if present when user performs $actionName variable',
+      async ({ event, mutationName }) => {
+        const graphQLErrorMessage = 'There is a problem with this graphQL action';
+        jest
+          .spyOn(wrapper.vm.$apollo, 'mutate')
+          .mockResolvedValue({ data: { [mutationName]: { errors: [graphQLErrorMessage] } } });
+        await findCiSettings().vm.$emit(event, newVariable);
+        await nextTick();
+
+        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalled();
+        expect(createFlash).toHaveBeenCalledWith({ message: graphQLErrorMessage });
+      },
+    );
+
+    it.each`
+      actionName  | event
+      ${'add'}    | ${'add-variable'}
+      ${'update'} | ${'update-variable'}
+      ${'delete'} | ${'delete-variable'}
+    `(
+      'throws generic error when the mutation fails with no graphql errors and user performs $actionName variable',
+      async ({ event }) => {
+        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockImplementationOnce(() => {
+          throw new Error();
+        });
+        await findCiSettings().vm.$emit(event, newVariable);
+
+        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalled();
+        expect(createFlash).toHaveBeenCalledWith({ message: genericMutationErrorText });
+      },
+    );
+  });
+});
diff --git a/spec/frontend/ci_variable_list/components/ci_environments_dropdown_spec.js b/spec/frontend/ci_variable_list/components/ci_environments_dropdown_spec.js
new file mode 100644
index 00000000000000..9252d2a71175b9
--- /dev/null
+++ b/spec/frontend/ci_variable_list/components/ci_environments_dropdown_spec.js
@@ -0,0 +1,124 @@
+import { GlDropdown, GlDropdownItem, GlIcon, GlSearchBoxByType } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import CiEnvironmentsDropdown from '~/ci_variable_list/components/ci_environments_dropdown.vue';
+
+describe('Ci environments dropdown', () => {
+  let wrapper;
+
+  const envs = ['dev', 'prod', 'staging'];
+  const defaultProps = { environments: envs, selectedEnvironmentScope: '' };
+
+  const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findDropdownItemByIndex = (index) => wrapper.findAllComponents(GlDropdownItem).at(index);
+  const findActiveIconByIndex = (index) => findDropdownItemByIndex(index).findComponent(GlIcon);
+  const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
+
+  const createComponent = ({ props = {}, searchTerm = '' } = {}) => {
+    wrapper = mount(CiEnvironmentsDropdown, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+    });
+
+    findSearchBox().vm.$emit('input', searchTerm);
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('No environments found', () => {
+    beforeEach(() => {
+      createComponent({ searchTerm: 'stable' });
+    });
+
+    it('renders create button with search term if environments do not contain search term', () => {
+      expect(findAllDropdownItems()).toHaveLength(2);
+      expect(findDropdownItemByIndex(1).text()).toBe('Create wildcard: stable');
+    });
+
+    it('renders empty results message', () => {
+      expect(findDropdownItemByIndex(0).text()).toBe('No matching results');
+    });
+  });
+
+  describe('Search term is empty', () => {
+    beforeEach(() => {
+      createComponent({ props: { environments: envs } });
+    });
+
+    it('renders all environments when search term is empty', () => {
+      expect(findAllDropdownItems()).toHaveLength(3);
+      expect(findDropdownItemByIndex(0).text()).toBe(envs[0]);
+      expect(findDropdownItemByIndex(1).text()).toBe(envs[1]);
+      expect(findDropdownItemByIndex(2).text()).toBe(envs[2]);
+    });
+
+    it('should not display active checkmark on the inactive stage', () => {
+      expect(findActiveIconByIndex(0).classes('gl-visibility-hidden')).toBe(true);
+    });
+  });
+
+  describe('Environments found', () => {
+    const currentEnv = envs[2];
+
+    beforeEach(async () => {
+      createComponent({ searchTerm: currentEnv });
+      await nextTick();
+    });
+
+    it('renders only the environment searched for', () => {
+      expect(findAllDropdownItems()).toHaveLength(1);
+      expect(findDropdownItemByIndex(0).text()).toBe(currentEnv);
+    });
+
+    it('should not display create button', () => {
+      const environments = findAllDropdownItems().filter((env) => env.text().startsWith('Create'));
+      expect(environments).toHaveLength(0);
+      expect(findAllDropdownItems()).toHaveLength(1);
+    });
+
+    it('should not display empty results message', () => {
+      expect(wrapper.findComponent({ ref: 'noMatchingResults' }).exists()).toBe(false);
+    });
+
+    it('should clear the search term when showing the dropdown', () => {
+      wrapper.findComponent(GlDropdown).trigger('click');
+
+      expect(findSearchBox().text()).toBe('');
+    });
+
+    describe('Custom events', () => {
+      describe('when clicking on an environment', () => {
+        const itemIndex = 0;
+
+        beforeEach(() => {
+          createComponent();
+        });
+
+        it('should emit `select-environment` if an environment is clicked', async () => {
+          await nextTick();
+
+          await findDropdownItemByIndex(itemIndex).vm.$emit('click');
+
+          expect(wrapper.emitted('select-environment')).toEqual([[envs[itemIndex]]]);
+        });
+      });
+
+      describe('when creating a new environment from a search term', () => {
+        const search = 'new-env';
+        beforeEach(() => {
+          createComponent({ searchTerm: search });
+        });
+
+        it('should emit createClicked if an environment is clicked', async () => {
+          await nextTick();
+          findDropdownItemByIndex(1).vm.$emit('click');
+          expect(wrapper.emitted('create-environment-scope')).toEqual([[search]]);
+        });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/ci_variable_list/components/ci_group_variables_spec.js b/spec/frontend/ci_variable_list/components/ci_group_variables_spec.js
new file mode 100644
index 00000000000000..addf1c3e66eb02
--- /dev/null
+++ b/spec/frontend/ci_variable_list/components/ci_group_variables_spec.js
@@ -0,0 +1,185 @@
+import { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlLoadingIcon, GlTable } from '@gitlab/ui';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import createFlash from '~/flash';
+import { resolvers } from '~/ci_variable_list/graphql/resolvers';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+
+import ciGroupVariables from '~/ci_variable_list/components/ci_group_variables.vue';
+import ciVariableSettings from '~/ci_variable_list/components/ci_variable_settings.vue';
+import ciVariableTable from '~/ci_variable_list/components/ci_variable_table.vue';
+import getGroupVariables from '~/ci_variable_list/graphql/queries/group_variables.query.graphql';
+
+import addGroupVariable from '~/ci_variable_list/graphql/mutations/group_add_variable.mutation.graphql';
+import deleteGroupVariable from '~/ci_variable_list/graphql/mutations/group_delete_variable.mutation.graphql';
+import updateGroupVariable from '~/ci_variable_list/graphql/mutations/group_update_variable.mutation.graphql';
+
+import { genericMutationErrorText, variableFetchErrorText } from '~/ci_variable_list/constants';
+
+import { mockGroupVariables, newVariable } from '../mocks';
+
+jest.mock('~/flash');
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
+const mockProvide = {
+  endpoint: '/variables',
+  groupPath: '/namespace/group',
+  groupId: 1,
+};
+
+describe('Ci Group Variable list', () => {
+  let wrapper;
+
+  let mockApollo;
+  let mockVariables;
+
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findCiTable = () => wrapper.findComponent(GlTable);
+  const findCiSettings = () => wrapper.findComponent(ciVariableSettings);
+
+  // eslint-disable-next-line consistent-return
+  const createComponentWithApollo = async ({ isLoading = false } = {}) => {
+    const handlers = [[getGroupVariables, mockVariables]];
+
+    mockApollo = createMockApollo(handlers, resolvers);
+
+    wrapper = shallowMount(ciGroupVariables, {
+      provide: mockProvide,
+      apolloProvider: mockApollo,
+      stubs: { ciVariableSettings, ciVariableTable },
+      localVue,
+    });
+
+    if (!isLoading) {
+      return waitForPromises();
+    }
+  };
+
+  beforeEach(() => {
+    mockVariables = jest.fn();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('while queries are being fetch', () => {
+    beforeEach(() => {
+      createComponentWithApollo({ isLoading: true });
+    });
+
+    it('shows a loading icon', () => {
+      expect(findLoadingIcon().exists()).toBe(true);
+      expect(findCiTable().exists()).toBe(false);
+    });
+  });
+
+  describe('when queries are resolved', () => {
+    describe('successfuly', () => {
+      beforeEach(async () => {
+        mockVariables.mockResolvedValue(mockGroupVariables);
+
+        await createComponentWithApollo();
+      });
+
+      it('passes down the expected environments as props', () => {
+        expect(findCiSettings().props('environments')).toEqual([]);
+      });
+
+      it('passes down the expected variables as props', () => {
+        expect(findCiSettings().props('variables')).toEqual(
+          mockGroupVariables.data.group.ciVariables.nodes,
+        );
+      });
+
+      it('createFlash was not called', () => {
+        expect(createFlash).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('with an error for variables', () => {
+      beforeEach(async () => {
+        mockVariables.mockRejectedValue();
+
+        await createComponentWithApollo();
+      });
+
+      it('calls createFlash with the expected error message', () => {
+        expect(createFlash).toHaveBeenCalledWith({ message: variableFetchErrorText });
+      });
+    });
+  });
+
+  describe('mutations', () => {
+    beforeEach(async () => {
+      mockVariables.mockResolvedValue(mockGroupVariables);
+
+      await createComponentWithApollo();
+    });
+    it.each`
+      actionName  | mutation               | event
+      ${'add'}    | ${addGroupVariable}    | ${'add-variable'}
+      ${'update'} | ${updateGroupVariable} | ${'update-variable'}
+      ${'delete'} | ${deleteGroupVariable} | ${'delete-variable'}
+    `(
+      'calls the right mutation when user performs $actionName variable',
+      async ({ event, mutation }) => {
+        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue();
+        await findCiSettings().vm.$emit(event, newVariable);
+
+        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
+          mutation,
+          variables: {
+            endpoint: mockProvide.endpoint,
+            fullPath: mockProvide.groupPath,
+            groupId: convertToGraphQLId('Group', mockProvide.groupId),
+            variable: newVariable,
+          },
+        });
+      },
+    );
+
+    it.each`
+      actionName  | event                | mutationName
+      ${'add'}    | ${'add-variable'}    | ${'addGroupVariable'}
+      ${'update'} | ${'update-variable'} | ${'updateGroupVariable'}
+      ${'delete'} | ${'delete-variable'} | ${'deleteGroupVariable'}
+    `(
+      'throws with the specific graphql error if present when user performs $actionName variable',
+      async ({ event, mutationName }) => {
+        const graphQLErrorMessage = 'There is a problem with this graphQL action';
+        jest
+          .spyOn(wrapper.vm.$apollo, 'mutate')
+          .mockResolvedValue({ data: { [mutationName]: { errors: [graphQLErrorMessage] } } });
+        await findCiSettings().vm.$emit(event, newVariable);
+        await nextTick();
+
+        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalled();
+        expect(createFlash).toHaveBeenCalledWith({ message: graphQLErrorMessage });
+      },
+    );
+
+    it.each`
+      actionName  | event
+      ${'add'}    | ${'add-variable'}
+      ${'update'} | ${'update-variable'}
+      ${'delete'} | ${'delete-variable'}
+    `(
+      'throws generic error when the mutation fails with no graphql errors and user performs $actionName variable',
+      async ({ event }) => {
+        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockImplementationOnce(() => {
+          throw new Error();
+        });
+        await findCiSettings().vm.$emit(event, newVariable);
+
+        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalled();
+        expect(createFlash).toHaveBeenCalledWith({ message: genericMutationErrorText });
+      },
+    );
+  });
+});
diff --git a/spec/frontend/ci_variable_list/components/ci_project_variables_spec.js b/spec/frontend/ci_variable_list/components/ci_project_variables_spec.js
new file mode 100644
index 00000000000000..6bfaf3bcb5706e
--- /dev/null
+++ b/spec/frontend/ci_variable_list/components/ci_project_variables_spec.js
@@ -0,0 +1,217 @@
+import { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlLoadingIcon, GlTable } from '@gitlab/ui';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import createFlash from '~/flash';
+import { resolvers } from '~/ci_variable_list/graphql/resolvers';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+
+import ciProjectVariables from '~/ci_variable_list/components/ci_project_variables.vue';
+import ciVariableSettings from '~/ci_variable_list/components/ci_variable_settings.vue';
+import ciVariableTable from '~/ci_variable_list/components/ci_variable_table.vue';
+import getProjectEnvironments from '~/ci_variable_list/graphql/queries/project_environments.query.graphql';
+import getProjectVariables from '~/ci_variable_list/graphql/queries/project_variables.query.graphql';
+
+import addProjectVariable from '~/ci_variable_list/graphql/mutations/project_add_variable.mutation.graphql';
+import deleteProjectVariable from '~/ci_variable_list/graphql/mutations/project_delete_variable.mutation.graphql';
+import updateProjectVariable from '~/ci_variable_list/graphql/mutations/project_update_variable.mutation.graphql';
+
+import {
+  environmentFetchErrorText,
+  genericMutationErrorText,
+  variableFetchErrorText,
+} from '~/ci_variable_list/constants';
+
+import {
+  devName,
+  mockProjectEnvironments,
+  mockProjectVariables,
+  newVariable,
+  prodName,
+} from '../mocks';
+
+jest.mock('~/flash');
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
+const mockProvide = {
+  endpoint: '/variables',
+  projectFullPath: '/namespace/project',
+  projectId: 1,
+};
+
+describe('Ci Project Variable list', () => {
+  let wrapper;
+
+  let mockApollo;
+  let mockEnvironments;
+  let mockVariables;
+
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findCiTable = () => wrapper.findComponent(GlTable);
+  const findCiSettings = () => wrapper.findComponent(ciVariableSettings);
+
+  // eslint-disable-next-line consistent-return
+  const createComponentWithApollo = async ({ isLoading = false } = {}) => {
+    const handlers = [
+      [getProjectEnvironments, mockEnvironments],
+      [getProjectVariables, mockVariables],
+    ];
+
+    mockApollo = createMockApollo(handlers, resolvers);
+
+    wrapper = shallowMount(ciProjectVariables, {
+      provide: mockProvide,
+      apolloProvider: mockApollo,
+      stubs: { ciVariableSettings, ciVariableTable },
+      localVue,
+    });
+
+    if (!isLoading) {
+      return waitForPromises();
+    }
+  };
+
+  beforeEach(() => {
+    mockEnvironments = jest.fn();
+    mockVariables = jest.fn();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('while queries are being fetch', () => {
+    beforeEach(() => {
+      createComponentWithApollo({ isLoading: true });
+    });
+
+    it('shows a loading icon', () => {
+      expect(findLoadingIcon().exists()).toBe(true);
+      expect(findCiTable().exists()).toBe(false);
+    });
+  });
+
+  describe('when queries are resolved', () => {
+    describe('successfuly', () => {
+      beforeEach(async () => {
+        mockEnvironments.mockResolvedValue(mockProjectEnvironments);
+        mockVariables.mockResolvedValue(mockProjectVariables);
+
+        await createComponentWithApollo();
+      });
+
+      it('passes down the expected environments as props', () => {
+        expect(findCiSettings().props('environments')).toEqual([prodName, devName]);
+      });
+
+      it('passes down the expected variables as props', () => {
+        expect(findCiSettings().props('variables')).toEqual(
+          mockProjectVariables.data.project.ciVariables.nodes,
+        );
+      });
+
+      it('createFlash was not called', () => {
+        expect(createFlash).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('with an error for variables', () => {
+      beforeEach(async () => {
+        mockEnvironments.mockResolvedValue(mockProjectEnvironments);
+        mockVariables.mockRejectedValue();
+
+        await createComponentWithApollo();
+      });
+
+      it('calls createFlash with the expected error message', () => {
+        expect(createFlash).toHaveBeenCalledWith({ message: variableFetchErrorText });
+      });
+    });
+
+    describe('with an error for environments', () => {
+      beforeEach(async () => {
+        mockEnvironments.mockRejectedValue();
+        mockVariables.mockResolvedValue(mockProjectVariables);
+
+        await createComponentWithApollo();
+      });
+
+      it('calls createFlash with the expected error message', () => {
+        expect(createFlash).toHaveBeenCalledWith({ message: environmentFetchErrorText });
+      });
+    });
+  });
+
+  describe('mutations', () => {
+    beforeEach(async () => {
+      mockEnvironments.mockResolvedValue(mockProjectEnvironments);
+      mockVariables.mockResolvedValue(mockProjectVariables);
+
+      await createComponentWithApollo();
+    });
+    it.each`
+      actionName  | mutation                 | event
+      ${'add'}    | ${addProjectVariable}    | ${'add-variable'}
+      ${'update'} | ${updateProjectVariable} | ${'update-variable'}
+      ${'delete'} | ${deleteProjectVariable} | ${'delete-variable'}
+    `(
+      'calls the right mutation when user performs $actionName variable',
+      async ({ event, mutation }) => {
+        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue();
+        await findCiSettings().vm.$emit(event, newVariable);
+
+        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
+          mutation,
+          variables: {
+            endpoint: mockProvide.endpoint,
+            fullPath: mockProvide.projectFullPath,
+            projectId: convertToGraphQLId('Project', mockProvide.projectId),
+            variable: newVariable,
+          },
+        });
+      },
+    );
+
+    it.each`
+      actionName  | event                | mutationName
+      ${'add'}    | ${'add-variable'}    | ${'addProjectVariable'}
+      ${'update'} | ${'update-variable'} | ${'updateProjectVariable'}
+      ${'delete'} | ${'delete-variable'} | ${'deleteProjectVariable'}
+    `(
+      'throws with the specific graphql error if present when user performs $actionName variable',
+      async ({ event, mutationName }) => {
+        const graphQLErrorMessage = 'There is a problem with this graphQL action';
+        jest
+          .spyOn(wrapper.vm.$apollo, 'mutate')
+          .mockResolvedValue({ data: { [mutationName]: { errors: [graphQLErrorMessage] } } });
+        await findCiSettings().vm.$emit(event, newVariable);
+        await nextTick();
+
+        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalled();
+        expect(createFlash).toHaveBeenCalledWith({ message: graphQLErrorMessage });
+      },
+    );
+
+    it.each`
+      actionName  | event
+      ${'add'}    | ${'add-variable'}
+      ${'update'} | ${'update-variable'}
+      ${'delete'} | ${'delete-variable'}
+    `(
+      'throws generic error when the mutation fails with no graphql errors and user performs $actionName variable',
+      async ({ event }) => {
+        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockImplementationOnce(() => {
+          throw new Error();
+        });
+        await findCiSettings().vm.$emit(event, newVariable);
+
+        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalled();
+        expect(createFlash).toHaveBeenCalledWith({ message: genericMutationErrorText });
+      },
+    );
+  });
+});
diff --git a/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js b/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js
new file mode 100644
index 00000000000000..4e29d6388b4af9
--- /dev/null
+++ b/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js
@@ -0,0 +1,368 @@
+import { GlButton, GlFormInput } from '@gitlab/ui';
+import { mockTracking } from 'helpers/tracking_helper';
+import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
+import CiEnvironmentsDropdown from '~/ci_variable_list/components/ci_environments_dropdown.vue';
+import CiVariableModal from '~/ci_variable_list/components/ci_variable_modal.vue';
+import {
+  ADD_VARIABLE_ACTION,
+  AWS_ACCESS_KEY_ID,
+  EDIT_VARIABLE_ACTION,
+  EVENT_LABEL,
+  EVENT_ACTION,
+  ENVIRONMENT_SCOPE_LINK_TITLE,
+} from '~/ci_variable_list/constants';
+import { mockVariablesWithScopes } from '../mocks';
+import ModalStub from '../stubs';
+
+describe('Ci variable modal', () => {
+  let wrapper;
+  let trackingSpy;
+
+  const maskableRegex = '^[a-zA-Z0-9_+=/@:.~-]{8,}$';
+
+  const defaultProvide = {
+    awsLogoSvgPath: '/logo',
+    awsTipCommandsLink: '/tips',
+    awsTipDeployLink: '/deploy',
+    awsTipLearnLink: '/learn-link',
+    containsVariableReferenceLink: '/reference',
+    environmentScopeLink: '/help/environments',
+    isProtectedByDefault: false,
+    maskedEnvironmentVariablesLink: '/variables-link',
+    maskableRegex,
+    protectedEnvironmentVariablesLink: '/protected-link',
+  };
+
+  const defaultProps = {
+    areScopedVariablesAvailable: true,
+    environments: [],
+    mode: ADD_VARIABLE_ACTION,
+    selectedVariable: {},
+  };
+
+  const createComponent = ({ mountFn = shallowMountExtended, props = {}, provide = {} } = {}) => {
+    wrapper = mountFn(CiVariableModal, {
+      attachTo: document.body,
+      provide: { ...defaultProvide, ...provide },
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+      stubs: {
+        GlModal: ModalStub,
+      },
+    });
+  };
+
+  const findCiEnvironmentsDropdown = () => wrapper.find(CiEnvironmentsDropdown);
+  const findReferenceWarning = () => wrapper.findByTestId('contains-variable-reference');
+  const findModal = () => wrapper.find(ModalStub);
+  const findAWSTip = () => wrapper.findByTestId('aws-guidance-tip');
+  const findAddorUpdateButton = () => findModal().find('[data-testid="ciUpdateOrAddVariableBtn"]');
+  const deleteVariableButton = () =>
+    findModal()
+      .findAll(GlButton)
+      .wrappers.find((button) => button.props('variant') === 'danger');
+  const findProtectedVariableCheckbox = () =>
+    wrapper.findByTestId('ci-variable-protected-checkbox');
+  const findMaskedVariableCheckbox = () => wrapper.findByTestId('ci-variable-masked-checkbox');
+  const findValueField = () => wrapper.find('#ci-variable-value');
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('Adding a variable', () => {
+    describe('when no key/value pair are present', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('shows the submit button as disabled ', () => {
+        expect(findAddorUpdateButton().attributes('disabled')).toBeTruthy();
+      });
+    });
+
+    describe('when a key/value pair is present', () => {
+      beforeEach(() => {
+        createComponent({ props: { selectedVariable: mockVariablesWithScopes[0] } });
+      });
+
+      it('shows the submit button as enabled ', () => {
+        expect(findAddorUpdateButton().attributes('disabled')).toBeFalsy();
+      });
+    });
+
+    describe('events', () => {
+      const [currentVariable] = mockVariablesWithScopes;
+
+      beforeEach(() => {
+        createComponent({ props: { selectedVariable: currentVariable } });
+        jest.spyOn(wrapper.vm, '$emit');
+      });
+
+      it('Dispatches `add-variable` action on submit', () => {
+        findAddorUpdateButton().vm.$emit('click');
+        expect(wrapper.vm.$emit).toHaveBeenCalledWith('add-variable', currentVariable);
+      });
+
+      it('Dispatches the `hideModal` event when dismissing', () => {
+        findModal().vm.$emit('hidden');
+        expect(wrapper.vm.$emit).toHaveBeenCalledWith('hideModal');
+      });
+    });
+  });
+
+  describe('when protected by default', () => {
+    describe('when adding a new variable', () => {
+      beforeEach(() => {
+        createComponent({ provide: { isProtectedByDefault: true } });
+        findModal().vm.$emit('shown');
+      });
+
+      it('updates the protected value to true', () => {
+        expect(
+          findProtectedVariableCheckbox().attributes('data-is-protected-checked'),
+        ).toBeTruthy();
+      });
+    });
+
+    describe('when editing a variable', () => {
+      beforeEach(() => {
+        createComponent({
+          provide: { isProtectedByDefault: false },
+          props: {
+            selectedVariable: {},
+            mode: EDIT_VARIABLE_ACTION,
+          },
+        });
+        findModal().vm.$emit('shown');
+      });
+
+      it('keeps the value as false', async () => {
+        expect(
+          findProtectedVariableCheckbox().attributes('data-is-protected-checked'),
+        ).toBeUndefined();
+      });
+    });
+  });
+
+  describe('Adding a new non-AWS variable', () => {
+    beforeEach(() => {
+      const [variable] = mockVariablesWithScopes;
+      createComponent({ mountFn: mountExtended, props: { selectedVariable: variable } });
+    });
+
+    it('does not show AWS guidance tip', () => {
+      const tip = findAWSTip();
+      expect(tip.exists()).toBe(true);
+      expect(tip.isVisible()).toBe(false);
+    });
+  });
+
+  describe('Adding a new AWS variable', () => {
+    beforeEach(() => {
+      const [variable] = mockVariablesWithScopes;
+      const AWSKeyVariable = {
+        ...variable,
+        key: AWS_ACCESS_KEY_ID,
+        value: 'AKIAIOSFODNN7EXAMPLEjdhy',
+      };
+      createComponent({ mountFn: mountExtended, props: { selectedVariable: AWSKeyVariable } });
+    });
+
+    it('shows AWS guidance tip', () => {
+      const tip = findAWSTip();
+      expect(tip.exists()).toBe(true);
+      expect(tip.isVisible()).toBe(true);
+    });
+  });
+
+  describe.each`
+    value           | secret            | isShown
+    ${'value'}      | ${'secret_value'} | ${false}
+    ${'dollar$ign'} | ${'dollar$ign'}   | ${true}
+  `('Adding a new variable', ({ value, secret, isShown }) => {
+    beforeEach(() => {
+      const [variable] = mockVariablesWithScopes;
+      const invalidKeyVariable = {
+        ...variable,
+        key: 'key',
+        value,
+        secret_value: secret,
+      };
+      createComponent({ mountFn: mountExtended, props: { selectedVariable: invalidKeyVariable } });
+    });
+
+    it(`${isShown ? 'renders' : 'does not render'} the variable reference warning`, () => {
+      expect(findReferenceWarning().exists()).toBe(isShown);
+    });
+  });
+
+  describe('Editing a variable', () => {
+    const [variable] = mockVariablesWithScopes;
+
+    beforeEach(() => {
+      createComponent({ props: { selectedVariable: variable, mode: EDIT_VARIABLE_ACTION } });
+      jest.spyOn(wrapper.vm, '$emit');
+    });
+
+    it('button text is Update variable when updating', () => {
+      expect(findAddorUpdateButton().text()).toBe('Update variable');
+    });
+
+    it('Update variable button dispatches updateVariable with correct variable', () => {
+      findAddorUpdateButton().vm.$emit('click');
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('update-variable', variable);
+    });
+
+    it('Propagates the `hideModal` event', () => {
+      findModal().vm.$emit('hidden');
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('hideModal');
+    });
+
+    it('dispatches `delete-variable` with correct variable to delete', () => {
+      deleteVariableButton().vm.$emit('click');
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('delete-variable', variable);
+    });
+  });
+
+  describe('Environment scope', () => {
+    describe('when feature is available', () => {
+      it('renders the environment dropdown', () => {
+        createComponent({
+          mountFn: mountExtended,
+          props: {
+            areScopedVariablesAvailable: true,
+          },
+        });
+
+        expect(findCiEnvironmentsDropdown().exists()).toBe(true);
+        expect(findCiEnvironmentsDropdown().isVisible()).toBe(true);
+      });
+
+      it('renders a link to documentation on scopes', () => {
+        createComponent({ mountFn: mountExtended });
+
+        const link = wrapper.find('[data-testid="environment-scope-link"]');
+
+        expect(link.attributes('title')).toBe(ENVIRONMENT_SCOPE_LINK_TITLE);
+        expect(link.attributes('href')).toBe(defaultProvide.environmentScopeLink);
+      });
+    });
+
+    describe('when feature is not available', () => {
+      it('disables the dropdown', () => {
+        createComponent({
+          mountFn: mountExtended,
+          props: {
+            areScopedVariablesAvailable: false,
+          },
+        });
+
+        const environmentScopeInput = wrapper
+          .find('[data-testid="environment-scope"]')
+          .find(GlFormInput);
+        expect(findCiEnvironmentsDropdown().exists()).toBe(false);
+        expect(environmentScopeInput.attributes('readonly')).toBe('readonly');
+      });
+    });
+  });
+
+  describe('Validations', () => {
+    const maskError = 'This variable can not be masked.';
+
+    describe('when the mask state is invalid', () => {
+      beforeEach(async () => {
+        const [variable] = mockVariablesWithScopes;
+        const invalidMaskVariable = {
+          ...variable,
+          value: 'd:;',
+          masked: false,
+        };
+        createComponent({
+          mountFn: mountExtended,
+          props: { selectedVariable: invalidMaskVariable },
+        });
+        trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+        await findMaskedVariableCheckbox().trigger('click');
+      });
+
+      it('disables the submit button', () => {
+        expect(findAddorUpdateButton().attributes('disabled')).toBeTruthy();
+      });
+
+      it('shows the correct error text', () => {
+        expect(findModal().text()).toContain(maskError);
+      });
+
+      it('sends the correct tracking event', () => {
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTION, {
+          label: EVENT_LABEL,
+          property: ';',
+        });
+      });
+    });
+
+    describe.each`
+      value                 | masked   | eventSent | trackingErrorProperty
+      ${'secretValue'}      | ${false} | ${0}      | ${null}
+      ${'short'}            | ${true}  | ${0}      | ${null}
+      ${'dollar$ign'}       | ${false} | ${1}      | ${'$'}
+      ${'dollar$ign'}       | ${true}  | ${1}      | ${'$'}
+      ${'unsupported|char'} | ${true}  | ${1}      | ${'|'}
+      ${'unsupported|char'} | ${false} | ${0}      | ${null}
+    `('Adding a new variable', ({ value, masked, eventSent, trackingErrorProperty }) => {
+      beforeEach(async () => {
+        const [variable] = mockVariablesWithScopes;
+        const invalidKeyVariable = {
+          ...variable,
+          value: '',
+          masked: false,
+        };
+        createComponent({
+          mountFn: mountExtended,
+          props: { selectedVariable: invalidKeyVariable },
+        });
+        trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+        await findValueField().vm.$emit('input', value);
+        if (masked) {
+          await findMaskedVariableCheckbox().trigger('click');
+        }
+      });
+
+      it(`${
+        eventSent > 0 ? 'sends the correct' : 'does not send the'
+      } variable validation tracking event with ${value}`, () => {
+        expect(trackingSpy).toHaveBeenCalledTimes(eventSent);
+
+        if (eventSent > 0) {
+          expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTION, {
+            label: EVENT_LABEL,
+            property: trackingErrorProperty,
+          });
+        }
+      });
+    });
+
+    describe('when masked variable has acceptable value', () => {
+      beforeEach(() => {
+        const [variable] = mockVariablesWithScopes;
+        const validMaskandKeyVariable = {
+          ...variable,
+          key: AWS_ACCESS_KEY_ID,
+          value: '12345678',
+          masked: true,
+        };
+        createComponent({
+          mountFn: mountExtended,
+          props: { selectedVariable: validMaskandKeyVariable },
+        });
+      });
+
+      it('does not disable the submit button', () => {
+        expect(findAddorUpdateButton().attributes('disabled')).toBeFalsy();
+      });
+    });
+  });
+});
diff --git a/spec/frontend/ci_variable_list/components/ci_variable_settings_spec.js b/spec/frontend/ci_variable_list/components/ci_variable_settings_spec.js
new file mode 100644
index 00000000000000..017348ad2ac202
--- /dev/null
+++ b/spec/frontend/ci_variable_list/components/ci_variable_settings_spec.js
@@ -0,0 +1,113 @@
+import { shallowMount } from '@vue/test-utils';
+import CiVariableSettings from '~/ci_variable_list/components/ci_variable_settings.vue';
+import ciVariableModal from '~/ci_variable_list/components/ci_variable_modal.vue';
+import ciVariableTable from '~/ci_variable_list/components/ci_variable_table.vue';
+import { ADD_VARIABLE_ACTION, EDIT_VARIABLE_ACTION } from '~/ci_variable_list/constants';
+import { createJoinedEnvironments, mapEnvironmentNames } from '~/ci_variable_list/utils';
+
+import { mockEnvs, mockVariablesWithScopes, newVariable } from '../mocks';
+
+describe('Ci variable table', () => {
+  let wrapper;
+
+  const defaultProps = {
+    areScopedVariablesAvailable: true,
+    environments: mapEnvironmentNames(mockEnvs),
+    isLoading: false,
+    variables: mockVariablesWithScopes,
+  };
+
+  const findCiVariableTable = () => wrapper.findComponent(ciVariableTable);
+  const findCiVariableModal = () => wrapper.findComponent(ciVariableModal);
+
+  const createComponent = () => {
+    wrapper = shallowMount(CiVariableSettings, {
+      propsData: {
+        ...defaultProps,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('props passing', () => {
+    it('passes props down correctly to the ci table', () => {
+      expect(findCiVariableTable().props()).toEqual({
+        isLoading: defaultProps.isLoading,
+        variables: defaultProps.variables,
+      });
+    });
+
+    it('passes props down correctly to the ci modal', async () => {
+      await findCiVariableTable().vm.$emit('setSelectedVariable');
+
+      expect(findCiVariableModal().props()).toEqual({
+        areScopedVariablesAvailable: defaultProps.areScopedVariablesAvailable,
+        environments: createJoinedEnvironments(defaultProps.variables, defaultProps.environments),
+        mode: ADD_VARIABLE_ACTION,
+        selectedVariable: {},
+      });
+    });
+  });
+
+  describe('modal mode', () => {
+    it('passes down ADD mode when receiving an empty variable', async () => {
+      await findCiVariableTable().vm.$emit('setSelectedVariable');
+
+      expect(findCiVariableModal().props('mode')).toBe(ADD_VARIABLE_ACTION);
+    });
+
+    it('passes down EDIT mode when receiving a variable', async () => {
+      await findCiVariableTable().vm.$emit('setSelectedVariable', newVariable);
+
+      expect(findCiVariableModal().props('mode')).toBe(EDIT_VARIABLE_ACTION);
+    });
+  });
+
+  describe('variable modal', () => {
+    it('is hidden by default', () => {
+      expect(findCiVariableModal().exists()).toBe(false);
+    });
+
+    it('shows modal when adding a new variable', async () => {
+      await findCiVariableTable().vm.$emit('setSelectedVariable');
+
+      expect(findCiVariableModal().exists()).toBe(true);
+    });
+
+    it('shows modal when updating a variable', async () => {
+      await findCiVariableTable().vm.$emit('setSelectedVariable', newVariable);
+
+      expect(findCiVariableModal().exists()).toBe(true);
+    });
+
+    it('hides modal when receiving the event from the modal', async () => {
+      await findCiVariableTable().vm.$emit('setSelectedVariable');
+      await findCiVariableModal().vm.$emit('hideModal');
+
+      expect(findCiVariableModal().exists()).toBe(false);
+    });
+  });
+
+  describe('variable events', () => {
+    it.each`
+      eventName
+      ${'add-variable'}
+      ${'update-variable'}
+      ${'delete-variable'}
+    `('bubbles up the $eventName event', async ({ eventName }) => {
+      jest.spyOn(wrapper.vm, '$emit');
+
+      await findCiVariableTable().vm.$emit('setSelectedVariable');
+      await findCiVariableModal().vm.$emit(eventName, newVariable);
+
+      expect(wrapper.vm.$emit).toBeCalledWith(eventName, newVariable);
+    });
+  });
+});
diff --git a/spec/frontend/ci_variable_list/components/ci_variable_table_spec.js b/spec/frontend/ci_variable_list/components/ci_variable_table_spec.js
new file mode 100644
index 00000000000000..384acf35c20f21
--- /dev/null
+++ b/spec/frontend/ci_variable_list/components/ci_variable_table_spec.js
@@ -0,0 +1,101 @@
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import CiVariableTable from '~/ci_variable_list/components/ci_variable_table.vue';
+import { mockVariables } from '../mocks';
+
+describe('Ci variable table', () => {
+  let wrapper;
+
+  const defaultProps = {
+    isLoading: false,
+    variables: mockVariables,
+  };
+
+  const createComponent = ({ props = {} } = {}) => {
+    wrapper = mountExtended(CiVariableTable, {
+      attachTo: document.body,
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+    });
+  };
+
+  const findRevealButton = () => wrapper.findByText('Reveal values');
+  const findAddButton = () => wrapper.findByLabelText('Add');
+  const findEditButton = () => wrapper.findByLabelText('Edit');
+  const findEmptyVariablesPlaceholder = () => wrapper.findByText('There are no variables yet.');
+  const findHiddenValues = () => wrapper.findAll('[data-testid="hiddenValue"]');
+  const findRevealedValues = () => wrapper.findAll('[data-testid="revealedValue"]');
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('When table is empty', () => {
+    beforeEach(() => {
+      createComponent({ props: { variables: [] } });
+    });
+
+    it('displays empty message', () => {
+      expect(findEmptyVariablesPlaceholder().exists()).toBe(true);
+    });
+
+    it('hides the reveal button', () => {
+      expect(findRevealButton().exists()).toBe(false);
+    });
+  });
+
+  describe('When table has variables', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('does not display the empty message', () => {
+      expect(findEmptyVariablesPlaceholder().exists()).toBe(false);
+    });
+
+    it('displays the reveal button', () => {
+      expect(findRevealButton().exists()).toBe(true);
+    });
+
+    it('displays the correct amount of variables', async () => {
+      expect(wrapper.findAll('.js-ci-variable-row')).toHaveLength(defaultProps.variables.length);
+    });
+  });
+
+  describe('Table click actions', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('reveals secret values when button is clicked', async () => {
+      expect(findHiddenValues()).toHaveLength(defaultProps.variables.length);
+      expect(findRevealedValues()).toHaveLength(0);
+
+      await findRevealButton().trigger('click');
+
+      expect(findHiddenValues()).toHaveLength(0);
+      expect(findRevealedValues()).toHaveLength(defaultProps.variables.length);
+    });
+
+    it('dispatches `setSelectedVarriable` with correct variable to edit', async () => {
+      jest.spyOn(wrapper.vm, '$emit');
+
+      await findEditButton().trigger('click');
+
+      expect(wrapper.vm.$emit).toBeCalledWith('setSelectedVariable', defaultProps.variables[0]);
+    });
+
+    it('dispatches `setSelectedVarriable` with no variable when adding a new one', async () => {
+      jest.spyOn(wrapper.vm, '$emit');
+
+      await findAddButton().trigger('click');
+
+      expect(wrapper.vm.$emit).toBeCalledWith('setSelectedVariable', null);
+    });
+  });
+});
diff --git a/spec/frontend/ci_variable_list/mocks.js b/spec/frontend/ci_variable_list/mocks.js
new file mode 100644
index 00000000000000..1ba50c74152f1c
--- /dev/null
+++ b/spec/frontend/ci_variable_list/mocks.js
@@ -0,0 +1,116 @@
+import { variableTypes } from '~/ci_variable_list/constants';
+
+export const devName = 'dev';
+export const prodName = 'prod';
+
+export const mockVariables = [
+  {
+    __typename: 'CiVariable',
+    id: 1,
+    key: 'my-var',
+    masked: false,
+    protected: true,
+    value: 'env_val',
+    variableType: variableTypes.variableType,
+  },
+  {
+    __typename: 'CiVariable',
+    id: 2,
+    key: 'secret',
+    masked: true,
+    protected: false,
+    value: 'the_secret_value',
+    variableType: variableTypes.fileType,
+  },
+];
+
+export const mockVariablesWithScopes = mockVariables.map((variable) => {
+  return { ...variable, environmentScope: '*' };
+});
+
+const createDefaultVars = ({ withScope = true } = {}) => {
+  let base = mockVariables;
+
+  if (withScope) {
+    base = mockVariablesWithScopes;
+  }
+
+  return {
+    __typename: 'CiVariableConnection',
+    nodes: base,
+  };
+};
+
+const defaultEnvs = {
+  __typename: 'EnvironmentConnection',
+  nodes: [
+    {
+      __typename: 'Environment',
+      id: 1,
+      name: prodName,
+    },
+    {
+      __typename: 'Environment',
+      id: 2,
+      name: devName,
+    },
+  ],
+};
+
+export const mockEnvs = defaultEnvs.nodes;
+
+export const mockProjectEnvironments = {
+  data: {
+    project: {
+      __typename: 'Project',
+      id: 1,
+      environments: defaultEnvs,
+    },
+  },
+};
+
+export const mockProjectVariables = {
+  data: {
+    project: {
+      __typename: 'Project',
+      id: 1,
+      ciVariables: createDefaultVars(),
+    },
+  },
+};
+
+export const mockGroupEnvironments = {
+  data: {
+    group: {
+      __typename: 'Group',
+      id: 1,
+      environments: defaultEnvs,
+    },
+  },
+};
+
+export const mockGroupVariables = {
+  data: {
+    group: {
+      __typename: 'Group',
+      id: 1,
+      ciVariables: createDefaultVars(),
+    },
+  },
+};
+
+export const mockAdminVariables = {
+  data: {
+    ciVariables: createDefaultVars({ withScope: false }),
+  },
+};
+
+export const newVariable = {
+  id: 3,
+  environmentScope: 'new',
+  key: 'AWS_RANDOM_THING',
+  masked: true,
+  protected: false,
+  value: 'devops',
+  variableType: variableTypes.variableType,
+};
diff --git a/spec/frontend/ci_variable_list/utils_spec.js b/spec/frontend/ci_variable_list/utils_spec.js
new file mode 100644
index 00000000000000..1676e786515dcc
--- /dev/null
+++ b/spec/frontend/ci_variable_list/utils_spec.js
@@ -0,0 +1,68 @@
+import {
+  createJoinedEnvironments,
+  convertEnvironmentScope,
+  mapEnvironmentNames,
+} from '~/ci_variable_list/utils';
+import { allEnvironments } from '~/ci_variable_list/constants';
+
+describe('utils', () => {
+  const environments = ['dev', 'prod'];
+
+  describe('createJoinedEnvironments', () => {
+    it('returns only `environments` if `variables` argument is undefined', () => {
+      const variables = undefined;
+
+      expect(createJoinedEnvironments(variables, environments)).toEqual(environments);
+    });
+
+    it('returns a list of environments and environment scopes taken from variables in alphabetical order', () => {
+      const envScope1 = 'new1';
+      const envScope2 = 'new2';
+
+      const variables = [{ environmentScope: envScope1 }, { environmentScope: envScope2 }];
+
+      expect(createJoinedEnvironments(variables, environments)).toEqual([
+        environments[0],
+        envScope1,
+        envScope2,
+        environments[1],
+      ]);
+    });
+
+    it('removes duplicate environments', () => {
+      const envScope1 = environments[0];
+      const envScope2 = 'new2';
+
+      const variables = [{ environmentScope: envScope1 }, { environmentScope: envScope2 }];
+
+      expect(createJoinedEnvironments(variables, environments)).toEqual([
+        environments[0],
+        envScope2,
+        environments[1],
+      ]);
+    });
+  });
+
+  describe('convertEnvironmentScope', () => {
+    it('converts the * to the `All environments` text', () => {
+      expect(convertEnvironmentScope('*')).toBe(allEnvironments.text);
+    });
+
+    it('returns the environment as is if not the *', () => {
+      expect(convertEnvironmentScope('prod')).toBe('prod');
+    });
+  });
+
+  describe('mapEnvironmentNames', () => {
+    const envName = 'dev';
+    const envName2 = 'prod';
+
+    const nodes = [
+      { name: envName, otherProp: {} },
+      { name: envName2, otherProp: {} },
+    ];
+    it('flatten a nodes array with only their names', () => {
+      expect(mapEnvironmentNames(nodes)).toEqual([envName, envName2]);
+    });
+  });
+});
-- 
GitLab