Show inherited group vars in sub project

This first commit creates a section in
a subproject settings that shows all
inherited group vars available to the
project.

Add styles and origin column with group name

Added styling to align with mockup and a
new column to display the origin of where
the group variable is coming from.

Add support for nested subgroups

There is the ability to have a nested
subgroup under a group. I've added the
ability to naviagate to that groups ci
variables settings page

Add conditionals for ruby variables

If a project doesn't exist in a group
but instead a personal namespace, the
code will break since we don't have a
check for that. Also added a changelog

Fix linting errors

Adjust styling for mobile and desktop

A certain class needed was adding border
top on mobile for keys. I removed so it
didnt break layout. Also removed padding
that bunched up borders

Add test coverage for new feature

Remove un-needed code in multiple files

Remove class selector that is not used
and remove variable declartion that is
not used. As well as remove un-needed
conditional in Haml file.

Fix linting errors

Hide group variable section if no group

Move inherited vars in UI

Move ci inherited variables under variables
section in project settings. Also add another
use case and more test coverage.

Remove padding right from group vars table

app/assets/stylesheets/framework/ci_variable_list.scss

@@ -99,3 +99,13 @@
     color: $gl-text-color-disabled;
   }
 }
+
+.group-variable-list {
+  color: $gray-700;
+
+  .table-section:not(:first-child) {
+    @include media-breakpoint-down(sm) {
+      border-top: hidden;
+    }
+  }
+}

app/views/ci/group_variables/_content.html.haml

+= _("These variables are configured in the parent group settings, and will be active in the current project in addition to the project variables.")

app/views/ci/group_variables/_header.html.haml

+%h5
+  = _('Group variables (inherited)')
+
+%p
+  = render "ci/group_variables/content"

app/views/ci/group_variables/_index.html.haml

+- variables = @project.group.self_and_ancestors.map(&:variables).flatten
+
+.row
+  .col-lg-12
+    .group-variable-list
+      = render 'ci/group_variables/variable_header'
+      - variables.each do |variable|
+        .group-variable-row.d-flex.w-100.border-bottom.pt-2.pb-2
+          .table-section.section-40.append-right-10.key
+            = variable.key
+          .table-section.section-40.append-right-10
+            %a.group-origin-link{ href: group_settings_ci_cd_path(variable.group) }
+              = variable.group.name

app/views/ci/group_variables/_variable_header.html.haml

+.group-variable-keys.d-flex.w-100.align-items-center.pb-2.border-bottom
+  .bold.table-section.section-40.append-right-10
+    = s_('Key')
+  .bold.table-section.section-40.append-right-10
+    = s_('Origin')

app/views/ci/variables/_index.html.haml

@@ -24,3 +24,8 @@
           = n_('Hide value', 'Hide values', @variables.size)
         - else
           = n_('Reveal value', 'Reveal values', @variables.size)
+    - if !@group && @project.group
+      .settings-header.border-top.prepend-top-20
+        = render 'ci/group_variables/header'
+      .settings-content.pr-0
+        = render 'ci/group_variables/index'

changelogs/unreleased/24172-group-vars.yml

+---
+title: Show inherited group variables in project view
+merge_request: 18759
+author:
+type: added

doc/ci/variables/README.md

@@ -357,7 +357,12 @@ Group-level variables can be added by:
 1. Inputing variable types, keys, and values in the **Variables** section.
    Any variables of [subgroups](../../user/group/subgroups/index.md) will be inherited recursively.
 
-Once you set them, they will be available for all subsequent pipelines.
+Once you set them, they will be available for all subsequent pipelines. Any group-level user defined variables can be viewed in projects by:
+
+1. Navigating to the project's **Settings > CI/CD** page.
+1. Expanding the **Variables** section.
+
+![CI/CD settings - inherited variables](img/inherited_group_variables_v12_5.png)
 
 ## Priority of environment variables
 

locale/gitlab.pot

@@ -8336,6 +8336,9 @@ msgstr ""
 msgid "Group pipeline minutes were successfully reset."
 msgstr ""
 
+msgid "Group variables (inherited)"
+msgstr ""
+
 msgid "Group was successfully updated."
 msgstr ""
 
@@ -9537,6 +9540,9 @@ msgstr ""
 msgid "June"
 msgstr ""
 
+msgid "Key"
+msgstr ""
+
 msgid "Key (PEM)"
 msgstr ""
 
@@ -11601,6 +11607,9 @@ msgstr ""
 msgid "Or you can choose one of the suggested colors below"
 msgstr ""
 
+msgid "Origin"
+msgstr ""
+
 msgid "Other Labels"
 msgstr ""
 
@@ -16933,6 +16942,9 @@ msgstr ""
 msgid "These existing issues have a similar title. It might be better to comment there instead of creating another similar issue."
 msgstr ""
 
+msgid "These variables are configured in the parent group settings, and will be active in the current project in addition to the project variables."
+msgstr ""
+
 msgid "They can be managed using the %{link}."
 msgstr ""
 

spec/features/project_group_variables_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'Project group variables', :js do
+  let(:user) { create(:user) }
+  let(:group) { create(:group) }
+  let(:subgroup) { create(:group, parent: group) }
+  let(:subgroup_nested) { create(:group, parent: subgroup) }
+  let(:project) { create(:project, group: group) }
+  let(:project2) { create(:project, group: subgroup) }
+  let(:project3) { create(:project, group: subgroup_nested) }
+  let(:key1) { 'test_key' }
+  let(:key2) { 'test_key2' }
+  let(:key3) { 'test_key3' }
+  let!(:ci_variable) { create(:ci_group_variable, group: group, key: key1) }
+  let!(:ci_variable2) { create(:ci_group_variable, group: subgroup, key: key2) }
+  let!(:ci_variable3) { create(:ci_group_variable, group: subgroup_nested, key: key3) }
+  let(:project_path) { project_settings_ci_cd_path(project) }
+  let(:project2_path) { project_settings_ci_cd_path(project2) }
+  let(:project3_path) { project_settings_ci_cd_path(project3) }
+
+  before do
+    sign_in(user)
+    project.add_maintainer(user)
+    group.add_owner(user)
+  end
+
+  it 'project in group shows inherited vars from ancestor group' do
+    visit project_path
+    expect(page).to have_content(key1)
+    expect(page).to have_content(group.name)
+  end
+
+  it 'project in subgroup shows inherited vars from all ancestor groups' do
+    visit project2_path
+    expect(page).to have_content(key1)
+    expect(page).to have_content(key2)
+    expect(page).to have_content(group.name)
+    expect(page).to have_content(subgroup.name)
+  end
+
+  it 'project in nested subgroup shows inherited vars from all ancestor groups' do
+    visit project3_path
+    expect(page).to have_content(key1)
+    expect(page).to have_content(key2)
+    expect(page).to have_content(key3)
+    expect(page).to have_content(group.name)
+    expect(page).to have_content(subgroup.name)
+    expect(page).to have_content(subgroup_nested.name)
+  end
+
+  it 'project origin keys link to ancestor groups ci_cd settings' do
+    visit project_path
+    find('.group-origin-link').click
+    page.within('.js-ci-variable-list-section .js-row:nth-child(2)') do
+      expect(find('.js-ci-variable-input-key').value).to eq(key1)
+    end
+  end
+end