From 35b9213cd7e378a732991a11bc8b5fa9e711c52b Mon Sep 17 00:00:00 2001
From: Zeger-Jan van de Weg <git@zjvandeweg.nl>
Date: Thu, 31 Aug 2017 13:47:29 +0200
Subject: Add config_source to ci_pipelines

Given the user can soon have multiple config sources for CI, we now store
what type at the time of the pipeline run we chose. This will give us
insight into what triggered the new pipeline so we can display it to the
enduser.
---
 app/assets/javascripts/pipelines/components/pipeline_url.vue | 7 +++++++
 1 file changed, 7 insertions(+)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index 2ca5ac2912f..3cab411d321 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -57,6 +57,13 @@ export default {
         :title="pipeline.yaml_errors">
         yaml invalid
       </span>
+      <span
+        v-if="pipeline.flags.auto_devops"
+        v-tooltip
+        class="label label-info"
+        title="Pipeline was configured by Auto DevOps">
+        Auto DevOps
+      </span>
       <span
         v-if="pipeline.flags.stuck"
         class="js-pipeline-url-stuck label label-warning">
-- 
cgit v1.2.1


From 1fb2c1ca4ec6bb8b66a4cd06ea5c8374572c525b Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Fri, 1 Sep 2017 10:46:08 +0100
Subject: Adds tooltip for Auto DevOps badge in pipeline table

---
 .../pipelines/components/pipeline_url.vue          | 61 +++++++++++++---------
 .../javascripts/vue_shared/directives/popover.js   | 24 +++++++++
 2 files changed, 61 insertions(+), 24 deletions(-)
 create mode 100644 app/assets/javascripts/vue_shared/directives/popover.js

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index 3cab411d321..6988417bd39 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -1,26 +1,34 @@
 <script>
-import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
-import tooltip from '../../vue_shared/directives/tooltip';
+  import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+  import tooltip from '../../vue_shared/directives/tooltip';
+  import popover from '../../vue_shared/directives/popover';
 
-export default {
-  props: {
-    pipeline: {
-      type: Object,
-      required: true,
+  export default {
+    props: {
+      pipeline: {
+        type: Object,
+        required: true,
+      },
     },
-  },
-  components: {
-    userAvatarLink,
-  },
-  directives: {
-    tooltip,
-  },
-  computed: {
-    user() {
-      return this.pipeline.user;
+    components: {
+      userAvatarLink,
     },
-  },
-};
+    directives: {
+      tooltip,
+      popover,
+    },
+    computed: {
+      user() {
+        return this.pipeline.user;
+      },
+      autoDevOpsTitle() {
+        return '<div class="autodevops-title">This pipeline makes use of a predefined CI/CD configuration enabled by <b>Auto DevOps.</b></div>';
+      },
+      autoDevOpsContent() {
+        return '<a class="autodevops-link" href="">Learn more about Auto DevOps</a>';
+      },
+    },
+  };
 </script>
 <template>
   <div class="table-section section-15 hidden-xs hidden-sm">
@@ -57,13 +65,18 @@ export default {
         :title="pipeline.yaml_errors">
         yaml invalid
       </span>
-      <span
+      <a
         v-if="pipeline.flags.auto_devops"
-        v-tooltip
-        class="label label-info"
-        title="Pipeline was configured by Auto DevOps">
+        class="js-pipeline-url-autodevops label label-info"
+        v-popover:html
+        tabindex="0"
+        role="button"
+        data-trigger="focus"
+        data-placement="top"
+        :title="autoDevOpsTitle"
+        :data-content="autoDevOpsContent">
         Auto DevOps
-      </span>
+      </a>
       <span
         v-if="pipeline.flags.stuck"
         class="js-pipeline-url-stuck label label-warning">
diff --git a/app/assets/javascripts/vue_shared/directives/popover.js b/app/assets/javascripts/vue_shared/directives/popover.js
new file mode 100644
index 00000000000..ac78231a347
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/directives/popover.js
@@ -0,0 +1,24 @@
+/**
+ * Helper to user bootstrap popover in vue.js.
+ * Follow docs for html attributes: https://getbootstrap.com/docs/3.3/javascript/#static-popover
+ *
+ * @example
+ * import popover from 'vue_shared/directives/popover.js';
+ * {
+ *   directives: [popover]
+ * }
+ * <a v-popover>popover</a>
+ */
+export default {
+  bind(el, binding) {
+    const renderHTML = binding.arg === 'html';
+
+    $(el).popover({
+      html: renderHTML,
+    });
+  },
+
+  unbind(el) {
+    $(el).popover('destroy');
+  },
+};
-- 
cgit v1.2.1


From df3d4764034bdad9f6151ab8808b71e1e5088d9c Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Fri, 1 Sep 2017 11:20:14 +0100
Subject: Adds documentation link to the autodevops popover

---
 app/assets/javascripts/commit/pipelines/pipelines_bundle.js      | 1 +
 app/assets/javascripts/commit/pipelines/pipelines_table.vue      | 5 +++++
 app/assets/javascripts/pipelines/components/pipeline_url.vue     | 6 +++++-
 app/assets/javascripts/pipelines/components/pipelines.vue        | 2 ++
 app/assets/javascripts/pipelines/components/pipelines_table.vue  | 5 +++++
 .../javascripts/pipelines/components/pipelines_table_row.vue     | 9 ++++++++-
 6 files changed, 26 insertions(+), 2 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
index 687f09882a7..16c5d0fa344 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
@@ -35,6 +35,7 @@ document.addEventListener('DOMContentLoaded', () => {
         propsData: {
           endpoint: pipelineTableViewEl.dataset.endpoint,
           helpPagePath: pipelineTableViewEl.dataset.helpPagePath,
+          autoDevopsHelpPath: pipelineTableViewEl.dataset.helpAutoDevopsPath,
         },
       }).$mount();
       pipelineTableViewEl.appendChild(table.$el);
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
index dd751ec97a8..c931e1e0ea5 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
@@ -13,6 +13,10 @@
         type: String,
         required: true,
       },
+      autoDevopsHelpPath: {
+        type: String,
+        required: true,
+      },
     },
     mixins: [
       pipelinesMixin,
@@ -95,6 +99,7 @@
       <pipelines-table-component
         :pipelines="state.pipelines"
         :update-graph-dropdown="updateGraphDropdown"
+        :auto-devops-help-path="autoDevopsHelpPath"
         />
     </div>
   </div>
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index 6988417bd39..b4a7fbec5f9 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -9,6 +9,10 @@
         type: Object,
         required: true,
       },
+      autoDevopsHelpPath: {
+        type: String,
+        required: true,
+      },
     },
     components: {
       userAvatarLink,
@@ -25,7 +29,7 @@
         return '<div class="autodevops-title">This pipeline makes use of a predefined CI/CD configuration enabled by <b>Auto DevOps.</b></div>';
       },
       autoDevOpsContent() {
-        return '<a class="autodevops-link" href="">Learn more about Auto DevOps</a>';
+        return `<a class="autodevops-link" href="${this.autoDevopsHelpPath}" target="_blank" rel="noopener noreferrer nofollow">Learn more about Auto DevOps</a>`;
       },
     },
   };
diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue
index 010063a0240..75e40da6d28 100644
--- a/app/assets/javascripts/pipelines/components/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines.vue
@@ -27,6 +27,7 @@
         endpoint: pipelinesData.endpoint,
         cssClass: pipelinesData.cssClass,
         helpPagePath: pipelinesData.helpPagePath,
+        autoDevopsPath: pipelinesData.helpautoDevopsPath,
         newPipelinePath: pipelinesData.newPipelinePath,
         canCreatePipeline: pipelinesData.canCreatePipeline,
         allPath: pipelinesData.allPath,
@@ -200,6 +201,7 @@
         <pipelines-table-component
           :pipelines="state.pipelines"
           :update-graph-dropdown="updateGraphDropdown"
+          :auto-devops-help-path="autoDevopsPath"
           />
       </div>
 
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_table.vue
index 5088d92209f..7aa0c0e8a7f 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table.vue
@@ -17,6 +17,10 @@
         required: false,
         default: false,
       },
+      autoDevopsHelpPath: {
+        type: String,
+        required: true,
+      },
     },
     components: {
       pipelinesTableRowComponent,
@@ -54,6 +58,7 @@
       :key="model.id"
       :pipeline="model"
       :update-graph-dropdown="updateGraphDropdown"
+      :auto-devops-help-path="autoDevopsHelpPath"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
index c3f1c426d8a..5b9bb6c3750 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
@@ -25,6 +25,10 @@ export default {
       required: false,
       default: false,
     },
+    autoDevopsHelpPath: {
+      type: String,
+      required: true,
+    },
   },
   components: {
     asyncButtonComponent,
@@ -218,7 +222,10 @@ export default {
       </div>
     </div>
 
-    <pipeline-url :pipeline="pipeline" />
+    <pipeline-url
+      :pipeline="pipeline"
+      :auto-devops-help-path="autoDevopsHelpPath"
+      />
 
     <div class="table-section section-25">
       <div
-- 
cgit v1.2.1


From 1c4d39c16940795054a886fbc59fc13a00ebfe40 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Fri, 1 Sep 2017 12:24:49 +0100
Subject: Fix documention path

---
 app/assets/javascripts/pipelines/components/pipelines.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue
index 75e40da6d28..5ce4fe58e55 100644
--- a/app/assets/javascripts/pipelines/components/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines.vue
@@ -27,7 +27,7 @@
         endpoint: pipelinesData.endpoint,
         cssClass: pipelinesData.cssClass,
         helpPagePath: pipelinesData.helpPagePath,
-        autoDevopsPath: pipelinesData.helpautoDevopsPath,
+        autoDevopsPath: pipelinesData.helpAutoDevopsPath,
         newPipelinePath: pipelinesData.newPipelinePath,
         canCreatePipeline: pipelinesData.canCreatePipeline,
         allPath: pipelinesData.allPath,
-- 
cgit v1.2.1


From 354df65295028ac09ed7e4a924e39ff567b38a4b Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Fri, 1 Sep 2017 12:18:00 +0100
Subject: Creates auto devops callout

---
 app/assets/javascripts/dispatcher.js                      | 10 ++++++++++
 app/assets/javascripts/pipelines/components/pipelines.vue |  5 +----
 2 files changed, 11 insertions(+), 4 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index c70a17104fd..2b98bdeb54d 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -155,6 +155,9 @@ import initChangesDropdown from './init_changes_dropdown';
           shortcut_handler = new ShortcutsNavigation();
           new UsersSelect();
           break;
+        case 'projects:merge_requests:index':
+          new UserCallout();
+          break;
         case 'projects:merge_requests:index':
         case 'projects:issues:index':
           if (filteredSearchEnabled) {
@@ -344,6 +347,7 @@ import initChangesDropdown from './init_changes_dropdown';
         case 'projects:show':
           shortcut_handler = new ShortcutsNavigation();
           new NotificationsForm();
+          new UserCallout();
 
           if ($('#tree-slider').length) new TreeView();
           if ($('.blob-viewer').length) new BlobViewer();
@@ -363,6 +367,9 @@ import initChangesDropdown from './init_changes_dropdown';
         case 'projects:pipelines:new':
           new NewBranchForm($('.js-new-pipeline-form'));
           break;
+        case 'projects:pipelines:index':
+          new UserCallout();
+          break;
         case 'projects:pipelines:builds':
         case 'projects:pipelines:failures':
         case 'projects:pipelines:show':
@@ -378,6 +385,8 @@ import initChangesDropdown from './init_changes_dropdown';
               parentEl: '.pipelines-tabs',
             },
           });
+
+          new UserCallout();
           break;
         case 'groups:activity':
           new gl.Activities();
@@ -420,6 +429,7 @@ import initChangesDropdown from './init_changes_dropdown';
           new TreeView();
           new BlobViewer();
           new NewCommitForm($('.js-create-dir-form'));
+          new UserCallout();
           $('#tree-slider').waitForImages(function() {
             gl.utils.ajaxGet(document.querySelector('.js-tree-content').dataset.logsPath);
           });
diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue
index 75e40da6d28..49c87bf5e91 100644
--- a/app/assets/javascripts/pipelines/components/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines.vue
@@ -25,7 +25,6 @@
 
       return {
         endpoint: pipelinesData.endpoint,
-        cssClass: pipelinesData.cssClass,
         helpPagePath: pipelinesData.helpPagePath,
         autoDevopsPath: pipelinesData.helpautoDevopsPath,
         newPipelinePath: pipelinesData.newPipelinePath,
@@ -140,9 +139,7 @@
   };
 </script>
 <template>
-  <div
-    class="pipelines-container"
-    :class="cssClass">
+  <div class="pipelines-container">
     <div
       class="top-area scrolling-tabs-container inner-page-scroll-tabs"
       v-if="!isLoading && !shouldRenderEmptyState">
-- 
cgit v1.2.1


From 583f835e9a26cf6b0a2b2c8abc827753c417641c Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Fri, 1 Sep 2017 13:32:05 +0100
Subject: Adds verfication for the cookie

---
 app/assets/javascripts/dispatcher.js | 2 --
 1 file changed, 2 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 2b98bdeb54d..c57472b9747 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -385,8 +385,6 @@ import initChangesDropdown from './init_changes_dropdown';
               parentEl: '.pipelines-tabs',
             },
           });
-
-          new UserCallout();
           break;
         case 'groups:activity':
           new gl.Activities();
-- 
cgit v1.2.1


From 64e23d75406188ab318c3727a38582bc496687c8 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Fri, 1 Sep 2017 14:25:15 +0100
Subject: Improves popover to show on focus CSS improvements after review

---
 .../pipelines/components/pipeline_url.vue          | 25 +++++++++++-----------
 .../javascripts/vue_shared/directives/popover.js   |  8 ++-----
 2 files changed, 14 insertions(+), 19 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index b4a7fbec5f9..db10abdae83 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -25,11 +25,15 @@
       user() {
         return this.pipeline.user;
       },
-      autoDevOpsTitle() {
-        return '<div class="autodevops-title">This pipeline makes use of a predefined CI/CD configuration enabled by <b>Auto DevOps.</b></div>';
-      },
-      autoDevOpsContent() {
-        return `<a class="autodevops-link" href="${this.autoDevopsHelpPath}" target="_blank" rel="noopener noreferrer nofollow">Learn more about Auto DevOps</a>`;
+      popoverOptions() {
+        return {
+          html: true,
+          delay: { hide: 600 },
+          trigger: 'hover',
+          placement: 'top',
+          title: '<div class="autodevops-title">This pipeline makes use of a predefined CI/CD configuration enabled by <b>Auto DevOps.</b></div>',
+          content: `<a class="autodevops-link" href="${this.autoDevopsHelpPath}" target="_blank" rel="noopener noreferrer nofollow">Learn more about Auto DevOps</a>`,
+        };
       },
     },
   };
@@ -71,14 +75,9 @@
       </span>
       <a
         v-if="pipeline.flags.auto_devops"
-        class="js-pipeline-url-autodevops label label-info"
-        v-popover:html
-        tabindex="0"
-        role="button"
-        data-trigger="focus"
-        data-placement="top"
-        :title="autoDevOpsTitle"
-        :data-content="autoDevOpsContent">
+        class="js-pipeline-url-autodevops label label-info autodevops-link"
+        v-popover="popoverOptions"
+        role="button">
         Auto DevOps
       </a>
       <span
diff --git a/app/assets/javascripts/vue_shared/directives/popover.js b/app/assets/javascripts/vue_shared/directives/popover.js
index ac78231a347..05fa563cbd0 100644
--- a/app/assets/javascripts/vue_shared/directives/popover.js
+++ b/app/assets/javascripts/vue_shared/directives/popover.js
@@ -7,15 +7,11 @@
  * {
  *   directives: [popover]
  * }
- * <a v-popover>popover</a>
+ * <a v-popover="{options}">popover</a>
  */
 export default {
   bind(el, binding) {
-    const renderHTML = binding.arg === 'html';
-
-    $(el).popover({
-      html: renderHTML,
-    });
+    $(el).popover(binding.value);
   },
 
   unbind(el) {
-- 
cgit v1.2.1


From 74cd4d76e45c1e830aec3c8145afbe0dce765e4b Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Fri, 1 Sep 2017 14:46:02 +0100
Subject: Accomodate several tags in one cell

---
 app/assets/javascripts/pipelines/components/pipeline_url.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index db10abdae83..f0b44dfa6d8 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -39,7 +39,7 @@
   };
 </script>
 <template>
-  <div class="table-section section-15 hidden-xs hidden-sm">
+  <div class="table-section section-15 hidden-xs hidden-sm pipeline-tags">
     <a
       :href="pipeline.path"
       class="js-pipeline-url-link">
@@ -75,7 +75,7 @@
       </span>
       <a
         v-if="pipeline.flags.auto_devops"
-        class="js-pipeline-url-autodevops label label-info autodevops-link"
+        class="js-pipeline-url-autodevops label label-info autodevops-badge"
         v-popover="popoverOptions"
         role="button">
         Auto DevOps
-- 
cgit v1.2.1


From aa5d0ecba46ae187eaca3ce7cdc4bfe98a5dcd37 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Mon, 4 Sep 2017 10:04:49 +0100
Subject: Adds documentation path to pipelines table in merge request page

---
 app/assets/javascripts/merge_request_tabs.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 3b3620fe61b..0c3c877ff15 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -243,6 +243,7 @@ import bp from './breakpoints';
         propsData: {
           endpoint: pipelineTableViewEl.dataset.endpoint,
           helpPagePath: pipelineTableViewEl.dataset.helpPagePath,
+          autoDevopsHelpPath: pipelineTableViewEl.dataset.helpAutoDevopsPath,
         },
       }).$mount();
 
-- 
cgit v1.2.1


From 8eec09249cf682bf04562ab635209e7a57c36ce7 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Tue, 5 Sep 2017 12:04:19 +0100
Subject: Sets callout dissmiss cookie per project using a path

---
 app/assets/javascripts/dispatcher.js   |  8 ++++----
 app/assets/javascripts/user_callout.js | 12 ++++++++++--
 2 files changed, 14 insertions(+), 6 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 88b4267359a..e2bc11038da 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -156,7 +156,7 @@ import initChangesDropdown from './init_changes_dropdown';
           new UsersSelect();
           break;
         case 'projects:merge_requests:index':
-          new UserCallout();
+          new UserCallout({ setCalloutPerProject: true });
           break;
         case 'projects:merge_requests:index':
         case 'projects:issues:index':
@@ -346,7 +346,7 @@ import initChangesDropdown from './init_changes_dropdown';
         case 'projects:show':
           shortcut_handler = new ShortcutsNavigation();
           new NotificationsForm();
-          new UserCallout();
+          new UserCallout({ setCalloutPerProject: true });
 
           if ($('#tree-slider').length) new TreeView();
           if ($('.blob-viewer').length) new BlobViewer();
@@ -367,7 +367,7 @@ import initChangesDropdown from './init_changes_dropdown';
           new NewBranchForm($('.js-new-pipeline-form'));
           break;
         case 'projects:pipelines:index':
-          new UserCallout();
+          new UserCallout({ setCalloutPerProject: true });
           break;
         case 'projects:pipelines:builds':
         case 'projects:pipelines:failures':
@@ -426,7 +426,7 @@ import initChangesDropdown from './init_changes_dropdown';
           new TreeView();
           new BlobViewer();
           new NewCommitForm($('.js-create-dir-form'));
-          new UserCallout();
+          new UserCallout({ setCalloutPerProject: true });
           $('#tree-slider').waitForImages(function() {
             gl.utils.ajaxGet(document.querySelector('.js-tree-content').dataset.logsPath);
           });
diff --git a/app/assets/javascripts/user_callout.js b/app/assets/javascripts/user_callout.js
index ff2208baeab..eab6cee0886 100644
--- a/app/assets/javascripts/user_callout.js
+++ b/app/assets/javascripts/user_callout.js
@@ -1,7 +1,11 @@
 import Cookies from 'js-cookie';
 
 export default class UserCallout {
-  constructor(className = 'user-callout') {
+  constructor(options = {}) {
+    this.options = options;
+
+    const className = this.options.className || 'user-callout';
+
     this.userCalloutBody = $(`.${className}`);
     this.cookieName = this.userCalloutBody.data('uid');
     this.isCalloutDismissed = Cookies.get(this.cookieName);
@@ -17,7 +21,11 @@ export default class UserCallout {
   dismissCallout(e) {
     const $currentTarget = $(e.currentTarget);
 
-    Cookies.set(this.cookieName, 'true', { expires: 365 });
+    if (this.options.setCalloutPerProject) {
+      Cookies.set(this.cookieName, 'true', { expires: 365, path: gon.project_url });
+    } else {
+      Cookies.set(this.cookieName, 'true', { expires: 365 });
+    }
 
     if ($currentTarget.hasClass('close')) {
       this.userCalloutBody.remove();
-- 
cgit v1.2.1


From 5dd1d5782e748382cfef14a87efbdcea3b8bbbb2 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Tue, 5 Sep 2017 18:22:20 +0100
Subject: Fixes the Cookie path Prepares for i18n

---
 app/assets/javascripts/user_callout.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/user_callout.js b/app/assets/javascripts/user_callout.js
index eab6cee0886..6165d97f425 100644
--- a/app/assets/javascripts/user_callout.js
+++ b/app/assets/javascripts/user_callout.js
@@ -22,7 +22,7 @@ export default class UserCallout {
     const $currentTarget = $(e.currentTarget);
 
     if (this.options.setCalloutPerProject) {
-      Cookies.set(this.cookieName, 'true', { expires: 365, path: gon.project_url });
+      Cookies.set(this.cookieName, 'true', { expires: 365, path: gon.project_path });
     } else {
       Cookies.set(this.cookieName, 'true', { expires: 365 });
     }
-- 
cgit v1.2.1


From 38bcf699abf1f8cec7b4e11c914e1baae57f9b81 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Thu, 7 Sep 2017 10:26:51 +0100
Subject: Get the project path through the DOM instead of `gon` Open the
 settings section based on the location hash

---
 app/assets/javascripts/settings_panels.js | 4 ++++
 app/assets/javascripts/user_callout.js    | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/settings_panels.js b/app/assets/javascripts/settings_panels.js
index 7fa5996d600..8635ccece6e 100644
--- a/app/assets/javascripts/settings_panels.js
+++ b/app/assets/javascripts/settings_panels.js
@@ -41,4 +41,8 @@ export default function initSettingsPanels() {
     $section.on('click.toggleSection', '.js-settings-toggle', () => toggleSection($section));
     $section.find('.settings-content:not(.expanded)').on('scroll.expandSection', () => expandSection($section));
   });
+
+  if (location.hash) {
+    expandSection($(location.hash));
+  }
 }
diff --git a/app/assets/javascripts/user_callout.js b/app/assets/javascripts/user_callout.js
index 6165d97f425..a45b22f3084 100644
--- a/app/assets/javascripts/user_callout.js
+++ b/app/assets/javascripts/user_callout.js
@@ -22,7 +22,7 @@ export default class UserCallout {
     const $currentTarget = $(e.currentTarget);
 
     if (this.options.setCalloutPerProject) {
-      Cookies.set(this.cookieName, 'true', { expires: 365, path: gon.project_path });
+      Cookies.set(this.cookieName, 'true', { expires: 365, path: this.userCalloutBody.data('project-path') });
     } else {
       Cookies.set(this.cookieName, 'true', { expires: 365 });
     }
-- 
cgit v1.2.1


From e3c76e6b1bff3599ea79644073620e905e0059d1 Mon Sep 17 00:00:00 2001
From: Chris Peressini <cperessini@gitlab.com>
Date: Wed, 6 Sep 2017 13:36:51 +0000
Subject: Change strings for projects dropdown placeholder and error state

gitlab-ce#37513
---
 .../javascripts/projects_dropdown/components/projects_list_search.vue   | 2 +-
 app/assets/javascripts/projects_dropdown/components/search.vue          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue b/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue
index fa5efef2919..8d0c29177e6 100644
--- a/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue
+++ b/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue
@@ -27,7 +27,7 @@ export default {
     listEmptyMessage() {
       return this.searchFailed ?
         s__('ProjectsDropdown|Something went wrong on our end.') :
-        s__('ProjectsDropdown|No projects matched your query');
+        s__('ProjectsDropdown|Sorry, no projects matched your search');
     },
   },
 };
diff --git a/app/assets/javascripts/projects_dropdown/components/search.vue b/app/assets/javascripts/projects_dropdown/components/search.vue
index b71997234e5..53bc76d0f2d 100644
--- a/app/assets/javascripts/projects_dropdown/components/search.vue
+++ b/app/assets/javascripts/projects_dropdown/components/search.vue
@@ -53,7 +53,7 @@ export default {
       class="form-control"
       ref="search"
       v-model="searchQuery"
-      :placeholder="s__('ProjectsDropdown|Search projects')"
+      :placeholder="s__('ProjectsDropdown|Search your projects')"
     />
     <i
       v-if="!searchQuery"
-- 
cgit v1.2.1


From 4eb8722d94459b4e7cf09b997e9e83ef62d8730a Mon Sep 17 00:00:00 2001
From: Kamil Trzcinski <ayufan@ayufan.eu>
Date: Thu, 7 Sep 2017 18:50:55 +0200
Subject: Fix broken case for projects:merge_requests:index

---
 app/assets/javascripts/dispatcher.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 04cb359d1e8..84b5f007282 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -154,15 +154,15 @@ import initChangesDropdown from './init_changes_dropdown';
           shortcut_handler = new ShortcutsNavigation();
           new UsersSelect();
           break;
-        case 'projects:merge_requests:index':
-          new UserCallout({ setCalloutPerProject: true });
-          break;
         case 'projects:merge_requests:index':
         case 'projects:issues:index':
           if (filteredSearchEnabled) {
             const filteredSearchManager = new gl.FilteredSearchManager(page === 'projects:issues:index' ? 'issues' : 'merge_requests');
             filteredSearchManager.setup();
           }
+          if (page === 'projects:merge_requests:index') {
+            new UserCallout({ setCalloutPerProject: true });
+          }
           const pagePrefix = page === 'projects:merge_requests:index' ? 'merge_request_' : 'issue_';
           IssuableIndex.init(pagePrefix);
 
-- 
cgit v1.2.1


From 03b14b48a07e3bcab53b273bbeccdba1ef921ac2 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mgreiling@gitlab.com>
Date: Thu, 7 Sep 2017 18:07:40 +0000
Subject: Resolve "Make project and features visibility settings less
 confusing"

---
 app/assets/javascripts/dispatcher.js               |   3 +
 .../components/project_feature_setting.vue         | 104 +++++++
 .../components/project_feature_toggle.vue          |  51 ++++
 .../permissions/components/project_setting_row.vue |  36 +++
 .../permissions/components/settings_panel.vue      | 312 +++++++++++++++++++++
 .../javascripts/projects/permissions/constants.js  |  11 +
 .../javascripts/projects/permissions/external.js   |  18 ++
 .../javascripts/projects/permissions/index.js      |  13 +
 8 files changed, 548 insertions(+)
 create mode 100644 app/assets/javascripts/projects/permissions/components/project_feature_setting.vue
 create mode 100644 app/assets/javascripts/projects/permissions/components/project_feature_toggle.vue
 create mode 100644 app/assets/javascripts/projects/permissions/components/project_setting_row.vue
 create mode 100644 app/assets/javascripts/projects/permissions/components/settings_panel.vue
 create mode 100644 app/assets/javascripts/projects/permissions/constants.js
 create mode 100644 app/assets/javascripts/projects/permissions/external.js
 create mode 100644 app/assets/javascripts/projects/permissions/index.js

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 84b5f007282..f3b537c83e2 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -577,6 +577,9 @@ import initChangesDropdown from './init_changes_dropdown';
             case 'edit':
               shortcut_handler = new ShortcutsNavigation();
               new ProjectNew();
+              import(/* webpackChunkName: 'project_permissions' */ './projects/permissions')
+                .then(permissions => permissions.default())
+                .catch(() => {});
               break;
             case 'new':
               new ProjectNew();
diff --git a/app/assets/javascripts/projects/permissions/components/project_feature_setting.vue b/app/assets/javascripts/projects/permissions/components/project_feature_setting.vue
new file mode 100644
index 00000000000..80c5d39f736
--- /dev/null
+++ b/app/assets/javascripts/projects/permissions/components/project_feature_setting.vue
@@ -0,0 +1,104 @@
+<script>
+import projectFeatureToggle from './project_feature_toggle.vue';
+
+export default {
+  props: {
+    name: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    options: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    value: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    disabledInput: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  components: {
+    projectFeatureToggle,
+  },
+
+  computed: {
+    featureEnabled() {
+      return this.value !== 0;
+    },
+
+    displayOptions() {
+      if (this.featureEnabled) {
+        return this.options;
+      }
+      return [
+        [0, 'Enable feature to choose access level'],
+      ];
+    },
+
+    displaySelectInput() {
+      return this.disabledInput || !this.featureEnabled || this.displayOptions.length < 2;
+    },
+  },
+
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+
+  methods: {
+    toggleFeature(featureEnabled) {
+      if (featureEnabled === false || this.options.length < 1) {
+        this.$emit('change', 0);
+      } else {
+        const [firstOptionValue] = this.options[this.options.length - 1];
+        this.$emit('change', firstOptionValue);
+      }
+    },
+
+    selectOption(e) {
+      this.$emit('change', Number(e.target.value));
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="project-feature-controls" :data-for="name">
+    <input
+      v-if="name"
+      type="hidden"
+      :name="name"
+      :value="value"
+    />
+    <project-feature-toggle
+      :value="featureEnabled"
+      @change="toggleFeature"
+      :disabledInput="disabledInput"
+    />
+    <div class="select-wrapper">
+      <select
+        class="form-control project-repo-select select-control"
+        @change="selectOption"
+        :disabled="displaySelectInput"
+      >
+        <option
+          v-for="[optionValue, optionName] in displayOptions"
+          :key="optionValue"
+          :value="optionValue"
+          :selected="optionValue === value"
+        >
+          {{optionName}}
+        </option>
+      </select>
+      <i aria-hidden="true" class="fa fa-chevron-down"></i>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/projects/permissions/components/project_feature_toggle.vue b/app/assets/javascripts/projects/permissions/components/project_feature_toggle.vue
new file mode 100644
index 00000000000..2403c60186a
--- /dev/null
+++ b/app/assets/javascripts/projects/permissions/components/project_feature_toggle.vue
@@ -0,0 +1,51 @@
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    value: {
+      type: Boolean,
+      required: true,
+    },
+    disabledInput: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+
+  methods: {
+    toggleFeature() {
+      if (!this.disabledInput) this.$emit('change', !this.value);
+    },
+  },
+};
+</script>
+
+<template>
+  <label class="toggle-wrapper">
+    <input
+      v-if="name"
+      type="hidden"
+      :name="name"
+      :value="value"
+    />
+    <button
+      type="button"
+      aria-label="Toggle"
+      class="project-feature-toggle"
+      data-enabled-text="Enabled"
+      data-disabled-text="Disabled"
+      :class="{ checked: value, disabled: disabledInput }"
+      @click="toggleFeature"
+    />
+  </label>
+</template>
diff --git a/app/assets/javascripts/projects/permissions/components/project_setting_row.vue b/app/assets/javascripts/projects/permissions/components/project_setting_row.vue
new file mode 100644
index 00000000000..6140d74fea8
--- /dev/null
+++ b/app/assets/javascripts/projects/permissions/components/project_setting_row.vue
@@ -0,0 +1,36 @@
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    helpPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    helpText: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="project-feature-row">
+    <label v-if="label" class="label-light">
+      {{label}}
+      <a v-if="helpPath" :href="helpPath" target="_blank">
+        <i aria-hidden="true" data-hidden="true" class="fa fa-question-circle"></i>
+      </a>
+    </label>
+    <span v-if="helpText" class="help-block">
+      {{helpText}}
+    </span>
+    <slot />
+  </div>
+</template>
diff --git a/app/assets/javascripts/projects/permissions/components/settings_panel.vue b/app/assets/javascripts/projects/permissions/components/settings_panel.vue
new file mode 100644
index 00000000000..326d9105666
--- /dev/null
+++ b/app/assets/javascripts/projects/permissions/components/settings_panel.vue
@@ -0,0 +1,312 @@
+<script>
+import projectFeatureSetting from './project_feature_setting.vue';
+import projectFeatureToggle from './project_feature_toggle.vue';
+import projectSettingRow from './project_setting_row.vue';
+import { visibilityOptions, visibilityLevelDescriptions } from '../constants';
+import { toggleHiddenClassBySelector } from '../external';
+
+export default {
+  props: {
+    currentSettings: {
+      type: Object,
+      required: true,
+    },
+    canChangeVisibilityLevel: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    allowedVisibilityOptions: {
+      type: Array,
+      required: false,
+      default: () => [0, 10, 20],
+    },
+    lfsAvailable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    registryAvailable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    visibilityHelpPath: {
+      type: String,
+      required: false,
+    },
+    lfsHelpPath: {
+      type: String,
+      required: false,
+    },
+    registryHelpPath: {
+      type: String,
+      required: false,
+    },
+  },
+
+  data() {
+    const defaults = {
+      visibilityOptions,
+      visibilityLevel: visibilityOptions.PUBLIC,
+      issuesAccessLevel: 20,
+      repositoryAccessLevel: 20,
+      mergeRequestsAccessLevel: 20,
+      buildsAccessLevel: 20,
+      wikiAccessLevel: 20,
+      snippetsAccessLevel: 20,
+      containerRegistryEnabled: true,
+      lfsEnabled: true,
+      requestAccessEnabled: true,
+      highlightChangesClass: false,
+    };
+
+    return { ...defaults, ...this.currentSettings };
+  },
+
+  components: {
+    projectFeatureSetting,
+    projectFeatureToggle,
+    projectSettingRow,
+  },
+
+  computed: {
+    featureAccessLevelOptions() {
+      const options = [
+        [10, 'Only Project Members'],
+      ];
+      if (this.visibilityLevel !== visibilityOptions.PRIVATE) {
+        options.push([20, 'Everyone With Access']);
+      }
+      return options;
+    },
+
+    repoFeatureAccessLevelOptions() {
+      return this.featureAccessLevelOptions.filter(
+        ([value]) => value <= this.repositoryAccessLevel,
+      );
+    },
+
+    repositoryEnabled() {
+      return this.repositoryAccessLevel > 0;
+    },
+
+    visibilityLevelDescription() {
+      return visibilityLevelDescriptions[this.visibilityLevel];
+    },
+  },
+
+  methods: {
+    highlightChanges() {
+      this.highlightChangesClass = true;
+      this.$nextTick(() => {
+        this.highlightChangesClass = false;
+      });
+    },
+
+    visibilityAllowed(option) {
+      return this.allowedVisibilityOptions.includes(option);
+    },
+  },
+
+  watch: {
+    visibilityLevel(value, oldValue) {
+      if (value === visibilityOptions.PRIVATE) {
+        // when private, features are restricted to "only team members"
+        this.issuesAccessLevel = Math.min(10, this.issuesAccessLevel);
+        this.repositoryAccessLevel = Math.min(10, this.repositoryAccessLevel);
+        this.mergeRequestsAccessLevel = Math.min(10, this.mergeRequestsAccessLevel);
+        this.buildsAccessLevel = Math.min(10, this.buildsAccessLevel);
+        this.wikiAccessLevel = Math.min(10, this.wikiAccessLevel);
+        this.snippetsAccessLevel = Math.min(10, this.snippetsAccessLevel);
+        this.highlightChanges();
+      } else if (oldValue === visibilityOptions.PRIVATE) {
+        // if changing away from private, make enabled features more permissive
+        if (this.issuesAccessLevel > 0) this.issuesAccessLevel = 20;
+        if (this.repositoryAccessLevel > 0) this.repositoryAccessLevel = 20;
+        if (this.mergeRequestsAccessLevel > 0) this.mergeRequestsAccessLevel = 20;
+        if (this.buildsAccessLevel > 0) this.buildsAccessLevel = 20;
+        if (this.wikiAccessLevel > 0) this.wikiAccessLevel = 20;
+        if (this.snippetsAccessLevel > 0) this.snippetsAccessLevel = 20;
+        this.highlightChanges();
+      }
+    },
+
+    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);
+    },
+
+    mergeRequestsAccessLevel(value, oldValue) {
+      if (value === 0) toggleHiddenClassBySelector('.merge-requests-feature', true);
+      else if (oldValue === 0) toggleHiddenClassBySelector('.merge-requests-feature', false);
+    },
+
+    buildsAccessLevel(value, oldValue) {
+      if (value === 0) toggleHiddenClassBySelector('.builds-feature', true);
+      else if (oldValue === 0) toggleHiddenClassBySelector('.builds-feature', false);
+    },
+  },
+};
+
+</script>
+
+<template>
+  <div>
+    <div class="project-visibility-setting">
+      <project-setting-row
+        label="Project visibility"
+        :help-path="visibilityHelpPath"
+      >
+        <div class="project-feature-controls">
+          <div class="select-wrapper">
+            <select
+              name="project[visibility_level]"
+              v-model="visibilityLevel"
+              class="form-control select-control"
+              :disabled="!canChangeVisibilityLevel"
+            >
+              <option
+                :value="visibilityOptions.PRIVATE"
+                :disabled="!visibilityAllowed(visibilityOptions.PRIVATE)"
+              >
+                Private
+              </option>
+              <option
+                :value="visibilityOptions.INTERNAL"
+                :disabled="!visibilityAllowed(visibilityOptions.INTERNAL)"
+              >
+                Internal
+              </option>
+              <option
+                :value="visibilityOptions.PUBLIC"
+                :disabled="!visibilityAllowed(visibilityOptions.PUBLIC)"
+              >
+                Public
+              </option>
+            </select>
+            <i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"></i>
+          </div>
+        </div>
+        <span class="help-block">{{ visibilityLevelDescription }}</span>
+        <label v-if="visibilityLevel !== visibilityOptions.PUBLIC" class="request-access">
+          <input
+            type="hidden"
+            name="project[request_access_enabled]"
+            :value="requestAccessEnabled"
+          />
+          <input type="checkbox" v-model="requestAccessEnabled" />
+          Allow users to request access
+        </label>
+      </project-setting-row>
+    </div>
+    <div class="project-feature-settings" :class="{ 'highlight-changes': highlightChangesClass }">
+      <project-setting-row
+        label="Issues"
+        help-text="Lightweight issue tracking system for this project"
+      >
+        <project-feature-setting
+          name="project[project_feature_attributes][issues_access_level]"
+          :options="featureAccessLevelOptions"
+          v-model="issuesAccessLevel"
+        />
+      </project-setting-row>
+      <project-setting-row
+        label="Repository"
+        help-text="View and edit files in this project"
+      >
+        <project-feature-setting
+          name="project[project_feature_attributes][repository_access_level]"
+          :options="featureAccessLevelOptions"
+          v-model="repositoryAccessLevel"
+        />
+      </project-setting-row>
+      <div class="project-feature-setting-group">
+        <project-setting-row
+          label="Merge requests"
+          help-text="Submit changes to be merged upstream"
+        >
+          <project-feature-setting
+            name="project[project_feature_attributes][merge_requests_access_level]"
+            :options="repoFeatureAccessLevelOptions"
+            v-model="mergeRequestsAccessLevel"
+            :disabledInput="!repositoryEnabled"
+          />
+        </project-setting-row>
+        <project-setting-row
+          label="Pipelines"
+          help-text="Build, test, and deploy your changes"
+        >
+          <project-feature-setting
+            name="project[project_feature_attributes][builds_access_level]"
+            :options="repoFeatureAccessLevelOptions"
+            v-model="buildsAccessLevel"
+            :disabledInput="!repositoryEnabled"
+          />
+        </project-setting-row>
+        <project-setting-row
+          v-if="registryAvailable"
+          label="Container registry"
+          :help-path="registryHelpPath"
+          help-text="Every project can have its own space to store its Docker images"
+        >
+          <project-feature-toggle
+            name="project[container_registry_enabled]"
+            v-model="containerRegistryEnabled"
+            :disabledInput="!repositoryEnabled"
+          />
+        </project-setting-row>
+        <project-setting-row
+          v-if="lfsAvailable"
+          label="Git Large File Storage"
+          :help-path="lfsHelpPath"
+          help-text="Manages large files such as audio, video, and graphics files"
+        >
+          <project-feature-toggle
+            name="project[lfs_enabled]"
+            v-model="lfsEnabled"
+            :disabledInput="!repositoryEnabled"
+          />
+        </project-setting-row>
+      </div>
+      <project-setting-row
+        label="Wiki"
+        help-text="Pages for project documentation"
+      >
+        <project-feature-setting
+          name="project[project_feature_attributes][wiki_access_level]"
+          :options="featureAccessLevelOptions"
+          v-model="wikiAccessLevel"
+        />
+      </project-setting-row>
+      <project-setting-row
+        label="Snippets"
+        help-text="Share code pastes with others out of Git repository"
+      >
+        <project-feature-setting
+          name="project[project_feature_attributes][snippets_access_level]"
+          :options="featureAccessLevelOptions"
+          v-model="snippetsAccessLevel"
+        />
+      </project-setting-row>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/projects/permissions/constants.js b/app/assets/javascripts/projects/permissions/constants.js
new file mode 100644
index 00000000000..ce47562f259
--- /dev/null
+++ b/app/assets/javascripts/projects/permissions/constants.js
@@ -0,0 +1,11 @@
+export const visibilityOptions = {
+  PRIVATE: 0,
+  INTERNAL: 10,
+  PUBLIC: 20,
+};
+
+export const visibilityLevelDescriptions = {
+  [visibilityOptions.PRIVATE]: 'The project is accessible only by members of the project. Access must be granted explicitly to each user.',
+  [visibilityOptions.INTERNAL]: 'The project can be accessed by any user who is logged in.',
+  [visibilityOptions.PUBLIC]: 'The project can be accessed by anyone, regardless of authentication.',
+};
diff --git a/app/assets/javascripts/projects/permissions/external.js b/app/assets/javascripts/projects/permissions/external.js
new file mode 100644
index 00000000000..460af4a2111
--- /dev/null
+++ b/app/assets/javascripts/projects/permissions/external.js
@@ -0,0 +1,18 @@
+const selectorCache = [];
+
+// workaround since we don't have a polyfill for classList.toggle 2nd parameter
+export function toggleHiddenClass(element, hidden) {
+  if (hidden) {
+    element.classList.add('hidden');
+  } else {
+    element.classList.remove('hidden');
+  }
+}
+
+// hide external feature-specific settings when a given feature is disabled
+export function toggleHiddenClassBySelector(selector, hidden) {
+  if (!selectorCache[selector]) {
+    selectorCache[selector] = document.querySelectorAll(selector);
+  }
+  selectorCache[selector].forEach(elm => toggleHiddenClass(elm, hidden));
+}
diff --git a/app/assets/javascripts/projects/permissions/index.js b/app/assets/javascripts/projects/permissions/index.js
new file mode 100644
index 00000000000..dbde8dda634
--- /dev/null
+++ b/app/assets/javascripts/projects/permissions/index.js
@@ -0,0 +1,13 @@
+import Vue from 'vue';
+import settingsPanel from './components/settings_panel.vue';
+
+export default function initProjectPermissionsSettings() {
+  const mountPoint = document.querySelector('.js-project-permissions-form');
+  const componentPropsEl = document.querySelector('.js-project-permissions-form-data');
+  const componentProps = JSON.parse(componentPropsEl.innerHTML);
+
+  return new Vue({
+    el: mountPoint,
+    render: createElement => createElement(settingsPanel, { props: { ...componentProps } }),
+  });
+}
-- 
cgit v1.2.1