2 files changed, 55 insertions, 27 deletions

diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
index dea7c586868..0bcfb740469 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
@@ -1,6 +1,7 @@
 <script>
+import settingsMixin from 'ee_else_ce/pages/projects/shared/permissions/mixins/settings_pannel_mixin';
 import projectFeatureSetting from './project_feature_setting.vue';
-import projectFeatureToggle from '../../../../../vue_shared/components/toggle_button.vue';
+import projectFeatureToggle from '~/vue_shared/components/toggle_button.vue';
 import projectSettingRow from './project_setting_row.vue';
 import { visibilityOptions, visibilityLevelDescriptions } from '../constants';
 import { toggleHiddenClassBySelector } from '../external';
@@ -11,6 +12,7 @@ export default {
     projectFeatureToggle,
     projectSettingRow,
   },
+  mixins: [settingsMixin],
 
   props: {
     currentSettings: {
@@ -37,6 +39,11 @@ export default {
       required: false,
       default: false,
     },
+    packagesAvailable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     visibilityHelpPath: {
       type: String,
       required: false,
@@ -67,8 +74,12 @@ export default {
       required: false,
       default: '',
     },
+    packagesHelpPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
-
   data() {
     const defaults = {
       visibilityOptions,
@@ -148,24 +159,6 @@ export default {
       }
     },
 
-    repositoryAccessLevel(value, oldValue) {
-      if (value < oldValue) {
-        // sub-features cannot have more premissive access level
-        this.mergeRequestsAccessLevel = Math.min(this.mergeRequestsAccessLevel, value);
-        this.buildsAccessLevel = Math.min(this.buildsAccessLevel, value);
-
-        if (value === 0) {
-          this.containerRegistryEnabled = false;
-          this.lfsEnabled = false;
-        }
-      } else if (oldValue === 0) {
-        this.mergeRequestsAccessLevel = value;
-        this.buildsAccessLevel = value;
-        this.containerRegistryEnabled = true;
-        this.lfsEnabled = true;
-      }
-    },
-
     issuesAccessLevel(value, oldValue) {
       if (value === 0) toggleHiddenClassBySelector('.issues-feature', true);
       else if (oldValue === 0) toggleHiddenClassBySelector('.issues-feature', false);
@@ -207,23 +200,20 @@ export default {
               <option
                 :value="visibilityOptions.PRIVATE"
                 :disabled="!visibilityAllowed(visibilityOptions.PRIVATE)"
+                >Private</option
               >
-                Private
-              </option>
               <option
                 :value="visibilityOptions.INTERNAL"
                 :disabled="!visibilityAllowed(visibilityOptions.INTERNAL)"
+                >Internal</option
               >
-                Internal
-              </option>
               <option
                 :value="visibilityOptions.PUBLIC"
                 :disabled="!visibilityAllowed(visibilityOptions.PUBLIC)"
+                >Public</option
               >
-                Public
-              </option>
             </select>
-            <i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"> </i>
+            <i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"></i>
           </div>
         </div>
         <span class="form-text text-muted">{{ visibilityLevelDescription }}</span>
@@ -299,6 +289,18 @@ export default {
             name="project[lfs_enabled]"
           />
         </project-setting-row>
+        <project-setting-row
+          v-if="packagesAvailable"
+          :help-path="packagesHelpPath"
+          label="Packages"
+          help-text="Every project can have its own space to store its packages"
+        >
+          <project-feature-toggle
+            v-model="packagesEnabled"
+            :disabled-input="!repositoryEnabled"
+            name="project[packages_enabled]"
+          />
+        </project-setting-row>
       </div>
       <project-setting-row label="Wiki" help-text="Pages for project documentation">
         <project-feature-setting
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/mixins/settings_pannel_mixin.js b/app/assets/javascripts/pages/projects/shared/permissions/mixins/settings_pannel_mixin.js
new file mode 100644
index 00000000000..fcbd81416f2
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/shared/permissions/mixins/settings_pannel_mixin.js
@@ -0,0 +1,26 @@
+export default {
+  data() {
+    return {
+      packagesEnabled: false,
+    };
+  },
+  watch: {
+    repositoryAccessLevel(value, oldValue) {
+      if (value < oldValue) {
+        // sub-features cannot have more premissive access level
+        this.mergeRequestsAccessLevel = Math.min(this.mergeRequestsAccessLevel, value);
+        this.buildsAccessLevel = Math.min(this.buildsAccessLevel, value);
+
+        if (value === 0) {
+          this.containerRegistryEnabled = false;
+          this.lfsEnabled = false;
+        }
+      } else if (oldValue === 0) {
+        this.mergeRequestsAccessLevel = value;
+        this.buildsAccessLevel = value;
+        this.containerRegistryEnabled = true;
+        this.lfsEnabled = true;
+      }
+    },
+  },
+};