Merge branch...

Merge branch '20083-conflict-between-project-s-permission-settings-description-and-actual-permissions' into 'master'

Update project's permission settings description based on visibility

See merge request gitlab-org/gitlab!25523

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

@@ -165,6 +165,16 @@ export default {
     showContainerRegistryPublicNote() {
       return this.visibilityLevel === visibilityOptions.PUBLIC;
     },
+
+    repositoryHelpText() {
+      if (this.visibilityLevel === visibilityOptions.PRIVATE) {
+        return s__('ProjectSettings|View and edit files in this project');
+      }
+
+      return s__(
+        'ProjectSettings|View and edit files in this project. Non-project members will only have read access',
+      );
+    },
   },
 
   watch: {
@@ -225,6 +235,7 @@ export default {
   <div>
     <div class="project-visibility-setting">
       <project-setting-row
+        ref="project-visibility-settings"
         :help-path="visibilityHelpPath"
         :label="s__('ProjectSettings|Project visibility')"
       >
@@ -270,6 +281,7 @@ export default {
     </div>
     <div :class="{ 'highlight-changes': highlightChangesClass }" class="project-feature-settings">
       <project-setting-row
+        ref="issues-settings"
         :label="s__('ProjectSettings|Issues')"
         :help-text="s__('ProjectSettings|Lightweight issue tracking system for this project')"
       >
@@ -280,8 +292,9 @@ export default {
         />
       </project-setting-row>
       <project-setting-row
+        ref="repository-settings"
         :label="s__('ProjectSettings|Repository')"
-        :help-text="s__('ProjectSettings|View and edit files in this project')"
+        :help-text="repositoryHelpText"
       >
         <project-feature-setting
           v-model="repositoryAccessLevel"
@@ -291,6 +304,7 @@ export default {
       </project-setting-row>
       <div class="project-feature-setting-group">
         <project-setting-row
+          ref="merge-request-settings"
           :label="s__('ProjectSettings|Merge requests')"
           :help-text="s__('ProjectSettings|Submit changes to be merged upstream')"
         >
@@ -302,6 +316,7 @@ export default {
           />
         </project-setting-row>
         <project-setting-row
+          ref="fork-settings"
           :label="s__('ProjectSettings|Forks')"
           :help-text="
             s__('ProjectSettings|Allow users to make copies of your repository to a new project')
@@ -315,6 +330,7 @@ export default {
           />
         </project-setting-row>
         <project-setting-row
+          ref="pipeline-settings"
           :label="s__('ProjectSettings|Pipelines')"
           :help-text="s__('ProjectSettings|Build, test, and deploy your changes')"
         >
@@ -327,6 +343,7 @@ export default {
         </project-setting-row>
         <project-setting-row
           v-if="registryAvailable"
+          ref="container-registry-settings"
           :help-path="registryHelpPath"
           :label="s__('ProjectSettings|Container registry')"
           :help-text="
@@ -348,6 +365,7 @@ export default {
         </project-setting-row>
         <project-setting-row
           v-if="lfsAvailable"
+          ref="git-lfs-settings"
           :help-path="lfsHelpPath"
           :label="s__('ProjectSettings|Git Large File Storage')"
           :help-text="
@@ -362,6 +380,7 @@ export default {
         </project-setting-row>
         <project-setting-row
           v-if="packagesAvailable"
+          ref="package-settings"
           :help-path="packagesHelpPath"
           :label="s__('ProjectSettings|Packages')"
           :help-text="
@@ -376,6 +395,7 @@ export default {
         </project-setting-row>
       </div>
       <project-setting-row
+        ref="wiki-settings"
         :label="s__('ProjectSettings|Wiki')"
         :help-text="s__('ProjectSettings|Pages for project documentation')"
       >
@@ -386,6 +406,7 @@ export default {
         />
       </project-setting-row>
       <project-setting-row
+        ref="snippet-settings"
         :label="s__('ProjectSettings|Snippets')"
         :help-text="s__('ProjectSettings|Share code pastes with others out of Git repository')"
       >
@@ -397,6 +418,7 @@ export default {
       </project-setting-row>
       <project-setting-row
         v-if="pagesAvailable && pagesAccessControlEnabled"
+        ref="pages-settings"
         :help-path="pagesHelpPath"
         :label="s__('ProjectSettings|Pages')"
         :help-text="
@@ -410,7 +432,7 @@ export default {
         />
       </project-setting-row>
     </div>
-    <project-setting-row v-if="canDisableEmails" class="mb-3">
+    <project-setting-row v-if="canDisableEmails" ref="email-settings" class="mb-3">
       <label class="js-emails-disabled">
         <input :value="emailsDisabled" type="hidden" name="project[emails_disabled]" />
         <input v-model="emailsDisabled" type="checkbox" />

changelogs/unreleased/20083-conflict-between-project-s-permission-settings-description-and-actu.yml

+---
+title: Update project's permission settings description to reflect actual permissions
+merge_request: 25523
+author:
+type: other

locale/gitlab.pot

@@ -15422,6 +15422,9 @@ msgstr ""
 msgid "ProjectSettings|View and edit files in this project"
 msgstr ""
 
+msgid "ProjectSettings|View and edit files in this project. Non-project members will only have read access"
+msgstr ""
+
 msgid "ProjectSettings|When conflicts arise the user is given the option to rebase"
 msgstr ""
 

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

+import { mount, shallowMount } from '@vue/test-utils';
+
+import projectFeatureSetting from '~/pages/projects/shared/permissions/components/project_feature_setting.vue';
+import projectFeatureToggle from '~/vue_shared/components/toggle_button.vue';
+
+describe('Project Feature Settings', () => {
+  const defaultProps = {
+    name: 'Test',
+    options: [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5]],
+    value: 1,
+    disabledInput: false,
+  };
+  let wrapper;
+
+  const mountComponent = customProps => {
+    const propsData = { ...defaultProps, ...customProps };
+    return shallowMount(projectFeatureSetting, { propsData });
+  };
+
+  beforeEach(() => {
+    wrapper = mountComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('Hidden name input', () => {
+    it('should set the hidden name input if the name exists', () => {
+      expect(wrapper.find({ name: 'Test' }).props().value).toBe(1);
+    });
+
+    it('should not set the hidden name input if the name does not exist', () => {
+      wrapper.setProps({ name: null });
+
+      return wrapper.vm.$nextTick(() => {
+        expect(wrapper.find({ name: 'Test' }).exists()).toBe(false);
+      });
+    });
+  });
+
+  describe('Feature toggle', () => {
+    it('should enable the feature toggle if the value is not 0', () => {
+      expect(wrapper.find(projectFeatureToggle).props().value).toBe(true);
+    });
+
+    it('should enable the feature toggle if the value is less than 0', () => {
+      wrapper.setProps({ value: -1 });
+
+      return wrapper.vm.$nextTick(() => {
+        expect(wrapper.find(projectFeatureToggle).props().value).toBe(true);
+      });
+    });
+
+    it('should disable the feature toggle if the value is 0', () => {
+      wrapper.setProps({ value: 0 });
+
+      return wrapper.vm.$nextTick(() => {
+        expect(wrapper.find(projectFeatureToggle).props().value).toBe(false);
+      });
+    });
+
+    it('should disable the feature toggle if disabledInput is set', () => {
+      wrapper.setProps({ disabledInput: true });
+
+      return wrapper.vm.$nextTick(() => {
+        expect(wrapper.find(projectFeatureToggle).props().disabledInput).toBe(true);
+      });
+    });
+
+    it('should emit a change event when the feature toggle changes', () => {
+      // Needs to be fully mounted to be able to trigger the click event on the internal button
+      wrapper = mount(projectFeatureSetting, { propsData: defaultProps });
+
+      expect(wrapper.emitted().change).toBeUndefined();
+      wrapper
+        .find(projectFeatureToggle)
+        .find('button')
+        .trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.emitted().change.length).toBe(1);
+        expect(wrapper.emitted().change[0]).toEqual([0]);
+      });
+    });
+  });
+
+  describe('Project repo select', () => {
+    it.each`
+      disabledInput | value | options                     | isDisabled
+      ${true}       | ${0}  | ${[[1, 1]]}                 | ${true}
+      ${true}       | ${1}  | ${[[1, 1], [2, 2], [3, 3]]} | ${true}
+      ${false}      | ${0}  | ${[[1, 1], [2, 2], [3, 3]]} | ${true}
+      ${false}      | ${1}  | ${[[1, 1]]}                 | ${true}
+      ${false}      | ${1}  | ${[[1, 1], [2, 2], [3, 3]]} | ${false}
+    `(
+      'should set disabled to $isDisabled when disabledInput is $disabledInput, the value is $value and options are $options',
+      ({ disabledInput, value, options, isDisabled }) => {
+        wrapper.setProps({ disabledInput, value, options });
+
+        return wrapper.vm.$nextTick(() => {
+          if (isDisabled) {
+            expect(wrapper.find('select').attributes().disabled).toEqual('disabled');
+          } else {
+            expect(wrapper.find('select').attributes().disabled).toBeUndefined();
+          }
+        });
+      },
+    );
+
+    it('should emit the change when a new option is selected', () => {
+      expect(wrapper.emitted().change).toBeUndefined();
+      wrapper
+        .findAll('option')
+        .at(1)
+        .trigger('change');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.emitted().change.length).toBe(1);
+        expect(wrapper.emitted().change[0]).toEqual([2]);
+      });
+    });
+  });
+});

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

+import { shallowMount } from '@vue/test-utils';
+
+import projectSettingRow from '~/pages/projects/shared/permissions/components/project_setting_row.vue';
+
+describe('Project Setting Row', () => {
+  let wrapper;
+
+  const mountComponent = (customProps = {}) => {
+    const propsData = { ...customProps };
+    return shallowMount(projectSettingRow, { propsData });
+  };
+
+  beforeEach(() => {
+    wrapper = mountComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should show the label if it is set', () => {
+    wrapper.setProps({ label: 'Test label' });
+
+    return wrapper.vm.$nextTick(() => {
+      expect(wrapper.find('label').text()).toEqual('Test label');
+    });
+  });
+
+  it('should hide the label if it is not set', () => {
+    expect(wrapper.find('label').exists()).toBe(false);
+  });
+
+  it('should show the help icon with the correct help path if it is set', () => {
+    wrapper.setProps({ label: 'Test label', helpPath: '/123' });
+
+    return wrapper.vm.$nextTick(() => {
+      const link = wrapper.find('a');
+
+      expect(link.exists()).toBe(true);
+      expect(link.attributes().href).toEqual('/123');
+    });
+  });
+
+  it('should hide the help icon if no help path is set', () => {
+    wrapper.setProps({ label: 'Test label' });
+
+    return wrapper.vm.$nextTick(() => {
+      expect(wrapper.find('a').exists()).toBe(false);
+    });
+  });
+
+  it('should show the help text if it is set', () => {
+    wrapper.setProps({ helpText: 'Test text' });
+
+    return wrapper.vm.$nextTick(() => {
+      expect(wrapper.find('span').text()).toEqual('Test text');
+    });
+  });
+
+  it('should hide the help text if it is set', () => {
+    expect(wrapper.find('span').exists()).toBe(false);
+  });
+});