Add metric visility toggle in project

This adds the frontend code plus the feature
flag push for the controller that will display
the metrics visibility toggle that allows
to change if a metrics dashboard can
be accessed by project members or everyone

app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue

@@ -124,11 +124,14 @@ export default {
       wikiAccessLevel: 20,
       snippetsAccessLevel: 20,
       pagesAccessLevel: 20,
+      metricsAccessLevel: visibilityOptions.PRIVATE,
       containerRegistryEnabled: true,
       lfsEnabled: true,
       requestAccessEnabled: true,
       highlightChangesClass: false,
       emailsDisabled: false,
+      featureAccessLevelEveryone,
+      featureAccessLevelMembers,
     };
 
     return { ...defaults, ...this.currentSettings };
@@ -189,6 +192,10 @@ export default {
         'ProjectSettings|View and edit files in this project. Non-project members will only have read access',
       );
     },
+
+    metricVisibilityToggleAvailable() {
+      return gon.features?.metricsVisibilityToggle;
+    },
   },
 
   watch: {
@@ -462,6 +469,39 @@ export default {
           name="project[project_feature_attributes][pages_access_level]"
         />
       </project-setting-row>
+      <project-setting-row
+        v-if="metricVisibilityToggleAvailable"
+        ref="metrics-visibility-settings"
+        :label="s__('ProjectSettings|Metrics Dashboard')"
+        :help-text="
+          s__(
+            'ProjectSettings|With Metrics Dashboard you can visualize this project performance metrics',
+          )
+        "
+      >
+        <div class="project-feature-controls">
+          <div class="select-wrapper">
+            <select
+              v-model="metricsAccessLevel"
+              :disabled="false"
+              name="project[project_feature_attributes][metrics_access_level]"
+              class="form-control select-control"
+            >
+              <option
+                :value="visibilityOptions.PRIVATE"
+                :disabled="!visibilityAllowed(visibilityOptions.PRIVATE)"
+                >{{ featureAccessLevelMembers[1] }}</option
+              >
+              <option
+                :value="visibilityOptions.PUBLIC"
+                :disabled="!visibilityAllowed(visibilityOptions.PUBLIC)"
+                >{{ featureAccessLevelEveryone[1] }}</option
+              >
+            </select>
+            <i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"></i>
+          </div>
+        </div>
+      </project-setting-row>
     </div>
     <project-setting-row v-if="canDisableEmails" ref="email-settings" class="mb-3">
       <label class="js-emails-disabled">

app/controllers/projects_controller.rb

@@ -36,6 +36,10 @@ class ProjectsController < Projects::ApplicationController
 
   layout :determine_layout
 
+  before_action do
+    push_frontend_feature_flag(:metrics_visibility_toggle)
+  end
+
   def index
     redirect_to(current_user ? root_path : explore_root_path)
   end

locale/gitlab.pot

@@ -15955,6 +15955,9 @@ msgstr ""
 msgid "ProjectSettings|Merge suggestions"
 msgstr ""
 
+msgid "ProjectSettings|Metrics Dashboard"
+msgstr ""
+
 msgid "ProjectSettings|No merge commits are created"
 msgstr ""
 
@@ -16048,6 +16051,9 @@ msgstr ""
 msgid "ProjectSettings|With GitLab Pages you can host your static websites on GitLab"
 msgstr ""
 
+msgid "ProjectSettings|With Metrics Dashboard you can visualize this project performance metrics"
+msgstr ""
+
 msgid "ProjectTemplates|.NET Core"
 msgstr ""
 

spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js

@@ -66,6 +66,9 @@ describe('Settings Panel', () => {
 
   beforeEach(() => {
     wrapper = mountComponent();
+
+    gon.features = gon.features || {};
+    gon.features.metricsVisibilityToggle = true;
   });
 
   afterEach(() => {
@@ -471,4 +474,28 @@ describe('Settings Panel', () => {
       });
     });
   });
+
+  describe('Metrics dashboard', () => {
+    it('should show the metrics dashboard access toggle', () => {
+      return wrapper.vm.$nextTick(() => {
+        expect(wrapper.find({ ref: 'metrics-visibility-settings' }).exists()).toBe(true);
+      });
+    });
+
+    it('should set the visibility level description based upon the selected visibility level', () => {
+      wrapper
+        .find('[name="project[project_feature_attributes][metrics_access_level]"]')
+        .setValue(visibilityOptions.PUBLIC);
+
+      expect(wrapper.vm.metricsAccessLevel).toBe(visibilityOptions.PUBLIC);
+    });
+
+    it('should contain help text', () => {
+      wrapper = overrideCurrentSettings({ visibilityLevel: visibilityOptions.PRIVATE });
+
+      expect(wrapper.find({ ref: 'metrics-visibility-settings' }).props().helpText).toEqual(
+        'With Metrics Dashboard you can visualize this project performance metrics',
+      );
+    });
+  });
 });