Gemfile

@@ -485,7 +485,7 @@ gem 'ssh_data', '~> 1.3'
 gem 'spamcheck', '~> 0.1.0'
 
 # Gitaly GRPC protocol definitions
-gem 'gitaly', '~> 15.3.0-rc3'
+gem 'gitaly', '~> 15.3.0-rc4'
 
 # KAS GRPC protocol definitions
 gem 'kas-grpc', '~> 0.0.2'
@@ -497,9 +497,9 @@ gem 'google-protobuf', '~> 3.21'
 gem 'toml-rb', '~> 2.0'
 
 # Feature toggles
-gem 'flipper', '~> 0.21.0'
-gem 'flipper-active_record', '~> 0.21.0'
-gem 'flipper-active_support_cache_store', '~> 0.21.0'
+gem 'flipper', '~> 0.25.0'
+gem 'flipper-active_record', '~> 0.25.0'
+gem 'flipper-active_support_cache_store', '~> 0.25.0'
 gem 'unleash', '~> 3.2.2'
 gem 'gitlab-experiment', '~> 0.7.1'
 

Gemfile.lock

@@ -438,13 +438,13 @@ GEM
       libyajl2 (~> 1.2)
     filelock (1.1.1)
     find_a_port (1.0.1)
-    flipper (0.21.0)
-    flipper-active_record (0.21.0)
-      activerecord (>= 5.0, < 7)
-      flipper (~> 0.21.0)
-    flipper-active_support_cache_store (0.21.0)
-      activesupport (>= 5.0, < 7)
-      flipper (~> 0.21.0)
+    flipper (0.25.0)
+    flipper-active_record (0.25.0)
+      activerecord (>= 4.2, < 8)
+      flipper (~> 0.25.0)
+    flipper-active_support_cache_store (0.25.0)
+      activesupport (>= 4.2, < 8)
+      flipper (~> 0.25.0)
     flowdock (0.7.1)
       httparty (~> 0.7)
       multi_json
@@ -508,7 +508,7 @@ GEM
       rails (>= 3.2.0)
     git (1.11.0)
       rchardet (~> 1.8)
-    gitaly (15.3.0.pre.rc3)
+    gitaly (15.3.0.pre.rc4)
       grpc (~> 1.0)
     github-markup (1.7.0)
     gitlab (4.16.1)
@@ -1558,9 +1558,9 @@ DEPENDENCIES
   faraday_middleware-aws-sigv4 (~> 0.3.0)
   fast_blank
   ffaker (~> 2.10)
-  flipper (~> 0.21.0)
-  flipper-active_record (~> 0.21.0)
-  flipper-active_support_cache_store (~> 0.21.0)
+  flipper (~> 0.25.0)
+  flipper-active_record (~> 0.25.0)
+  flipper-active_support_cache_store (~> 0.25.0)
   flowdock (~> 0.7)
   fog-aliyun (~> 0.3)
   fog-aws (~> 3.14)
@@ -1574,7 +1574,7 @@ DEPENDENCIES
   gettext (~> 3.3)
   gettext_i18n_rails (~> 1.8.0)
   gettext_i18n_rails_js (~> 1.3)
-  gitaly (~> 15.3.0.pre.rc3)
+  gitaly (~> 15.3.0.pre.rc4)
   github-markup (~> 1.7.0)
   gitlab-chronic (~> 0.10.5)
   gitlab-dangerfiles (~> 3.5.0)

app/assets/javascripts/access_tokens/components/new_access_token_app.vue

@@ -42,7 +42,6 @@ export default {
     formInputGroupProps() {
       return {
         id: this.$options.tokenInputId,
-        class: 'qa-created-access-token',
         'data-qa-selector': 'created_access_token_field',
         name: this.$options.tokenInputId,
       };

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

+<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
+      );
+    },
+  },
+  methods: {
+    addVariable(variable) {
+      this.variableMutation(ADD_MUTATION_ACTION, variable);
+    },
+    deleteVariable(variable) {
+      this.variableMutation(DELETE_MUTATION_ACTION, variable);
+    },
+    updateVariable(variable) {
+      this.variableMutation(UPDATE_MUTATION_ACTION, variable);
+    },
+    async variableMutation(mutationAction, variable) {
+      try {
+        const currentMutation = this.$options.mutationData[mutationAction];
+        const { data } = await this.$apollo.mutate({
+          mutation: currentMutation.action,
+          variables: {
+            endpoint: this.endpoint,
+            fullPath: this.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 });
+      }
+    },
+  },
+  mutationData: {
+    [ADD_MUTATION_ACTION]: { action: addProjectVariable, name: 'addProjectVariable' },
+    [UPDATE_MUTATION_ACTION]: { action: updateProjectVariable, name: 'updateProjectVariable' },
+    [DELETE_MUTATION_ACTION]: { action: deleteProjectVariable, name: 'deleteProjectVariable' },
+  },
+};
+</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>

app/assets/javascripts/ci_variable_list/graphql/mutations/client/add_project_environment.mutation.graphql

+mutation addProjectEnvironment($environment: CiEnvironment, $fullPath: ID!) {
+  addProjectEnvironment(environment: $environment, fullPath: $fullPath) @client
+}

app/assets/javascripts/ci_variable_list/graphql/mutations/project_add_variable.mutation.graphql

+#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
+          ... on CiProjectVariable {
+            environmentScope
+            masked
+            protected
+          }
+        }
+      }
+    }
+    errors
+  }
+}

app/assets/javascripts/ci_variable_list/graphql/mutations/project_delete_variable.mutation.graphql

+#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
+          ... on CiProjectVariable {
+            environmentScope
+            masked
+            protected
+          }
+        }
+      }
+    }
+    errors
+  }
+}

app/assets/javascripts/ci_variable_list/graphql/mutations/project_update_variable.mutation.graphql

+#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
+          ... on CiProjectVariable {
+            environmentScope
+            masked
+            protected
+          }
+        }
+      }
+    }
+    errors
+  }
+}

app/assets/javascripts/ci_variable_list/graphql/queries/project_environments.query.graphql

+query getProjectEnvironments($fullPath: ID!) {
+  project(fullPath: $fullPath) {
+    id
+    environments {
+      nodes {
+        id
+        name
+      }
+    }
+  }
+}

app/assets/javascripts/ci_variable_list/graphql/queries/project_variables.query.graphql

+#import "~/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql"
+
+query getProjectVariables($fullPath: ID!) {
+  project(fullPath: $fullPath) {
+    id
+    ciVariables {
+      nodes {
+        ...BaseCiVariable
+        environmentScope
+        masked
+        protected
+      }
+    }
+  }
+}

app/assets/javascripts/ci_variable_list/graphql/resolvers.js

@@ -4,9 +4,16 @@ import {
   convertObjectPropsToSnakeCase,
 } from '../../lib/utils/common_utils';
 import { getIdFromGraphQLId } from '../../graphql_shared/utils';
-import { GRAPHQL_GROUP_TYPE, groupString, instanceString } from '../constants';
-import getAdminVariables from './queries/variables.query.graphql';
+import {
+  GRAPHQL_GROUP_TYPE,
+  GRAPHQL_PROJECT_TYPE,
+  groupString,
+  instanceString,
+  projectString,
+} from '../constants';
+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 {
@@ -28,6 +35,20 @@ const mapVariableTypes = (variables = [], kind) => {
   });
 };
 
+const prepareProjectGraphQLResponse = ({ data, projectId, errors = [] }) => {
+  return {
+    errors,
+    project: {
+      __typename: GRAPHQL_PROJECT_TYPE,
+      id: projectId,
+      ciVariables: {
+        __typename: 'CiVariableConnection',
+        nodes: mapVariableTypes(data.variables, projectString),
+      },
+    },
+  };
+};
+
 const prepareGroupGraphQLResponse = ({ data, groupId, errors = [] }) => {
   return {
     errors,
@@ -52,6 +73,28 @@ const prepareAdminGraphQLResponse = ({ data, errors = [] }) => {
   };
 };
 
+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,
@@ -91,6 +134,15 @@ const callAdminEndpoint = async ({ endpoint, variable, cache, destroy = false })
 
 export const resolvers = {
   Mutation: {
+    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 });
     },

app/assets/javascripts/ci_variable_list/index.js

@@ -4,6 +4,7 @@ import createDefaultClient from '~/lib/graphql';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import CiAdminVariables from './components/ci_admin_variables.vue';
 import CiGroupVariables from './components/ci_group_variables.vue';
+import CiProjectVariables from './components/ci_project_variables.vue';
 import LegacyCiVariableSettings from './components/legacy_ci_variable_settings.vue';
 import { resolvers } from './graphql/resolvers';
 import createStore from './store';
@@ -37,6 +38,8 @@ const mountCiVariableListApp = (containerEl) => {
 
   if (parsedIsGroup) {
     component = CiGroupVariables;
+  } else if (parsedIsProject) {
+    component = CiProjectVariables;
   }
 
   Vue.use(VueApollo);

app/assets/javascripts/content_editor/components/content_editor.vue

@@ -4,10 +4,10 @@ import { createContentEditor } from '../services/create_content_editor';
 import ContentEditorAlert from './content_editor_alert.vue';
 import ContentEditorProvider from './content_editor_provider.vue';
 import EditorStateObserver from './editor_state_observer.vue';
-import FormattingBubbleMenu from './bubble_menus/formatting.vue';
-import CodeBlockBubbleMenu from './bubble_menus/code_block.vue';
-import LinkBubbleMenu from './bubble_menus/link.vue';
-import MediaBubbleMenu from './bubble_menus/media.vue';
+import FormattingBubbleMenu from './bubble_menus/formatting_bubble_menu.vue';
+import CodeBlockBubbleMenu from './bubble_menus/code_block_bubble_menu.vue';
+import LinkBubbleMenu from './bubble_menus/link_bubble_menu.vue';
+import MediaBubbleMenu from './bubble_menus/media_bubble_menu.vue';
 import TopToolbar from './top_toolbar.vue';
 import LoadingIndicator from './loading_indicator.vue';
 

app/assets/javascripts/ide/components/new_dropdown/modal.vue

@@ -176,7 +176,11 @@ export default {
             :placeholder="placeholder"
           />
         </form>
-        <ul v-if="isCreatingNewFile" class="file-templates gl-mt-3 list-inline qa-template-list">
+        <ul
+          v-if="isCreatingNewFile"
+          class="file-templates gl-mt-3 list-inline"
+          data-qa-selector="template_list_content"
+        >
           <li v-for="(template, index) in templateTypes" :key="index" class="list-inline-item">
             <gl-button
               variant="dashed"

app/assets/javascripts/jobs/components/job_app.vue

@@ -197,7 +197,7 @@ export default {
 </script>
 <template>
   <div>
-    <gl-loading-icon v-if="isLoading" size="lg" class="qa-loading-animation gl-mt-6" />
+    <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-6" />
 
     <template v-else-if="shouldRenderContent">
       <div class="build-page" data-testid="job-content">

app/assets/javascripts/pipelines/components/pipeline_mini_graph/job_item.vue

@@ -158,7 +158,7 @@ export default {
       :href="detailsPath"
       :title="tooltipText"
       :class="jobClasses"
-      class="js-pipeline-graph-job-link qa-job-link menu-item gl-text-gray-900 gl-active-text-decoration-none gl-focus-text-decoration-none gl-hover-text-decoration-none"
+      class="js-pipeline-graph-job-link menu-item gl-text-gray-900 gl-active-text-decoration-none gl-focus-text-decoration-none gl-hover-text-decoration-none"
       data-testid="job-with-link"
       @click.stop="hideTooltips"
       @mouseout="hideTooltips"