Merge branch 'project-variables-ui' into 'master'

Project variables UI

![Screen_Shot_2016-04-27_at_09.01.23](/uploads/cb9b1ac42aa734cfd3271c03dfaccc12/Screen_Shot_2016-04-27_at_09.01.23.png)

![Screen_Shot_2016-04-27_at_09.01.29](/uploads/4f317014d60f205a0e29497ad20f8a2e/Screen_Shot_2016-04-27_at_09.01.29.png)

Closes #14091

See merge request !3942

7 files changed, 95 insertions, 38 deletions

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 5fa4c266607..7360bdbcc82 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -12,7 +12,7 @@ $gutter_inner_width: 258px;
  */
 $border-color:       #e5e5e5;
 $focus-border-color: #3aabf0;
-$table-border-color: #ececec;
+$table-border-color: #f0f0f0;
 $background-color:   #fafafa;
 
 /*
diff --git a/app/controllers/projects/variables_controller.rb b/app/controllers/projects/variables_controller.rb
index 00234654578..6f068729390 100644
--- a/app/controllers/projects/variables_controller.rb
+++ b/app/controllers/projects/variables_controller.rb
@@ -3,20 +3,44 @@ class Projects::VariablesController < Projects::ApplicationController
 
   layout 'project_settings'
 
+  def index
+    @variable = Ci::Variable.new
+  end
+
   def show
+    @variable = @project.variables.find(params[:id])
   end
 
   def update
-    if project.update_attributes(project_params)
+    @variable = @project.variables.find(params[:id])
+
+    if @variable.update_attributes(project_params)
+      redirect_to namespace_project_variables_path(project.namespace, project), notice: 'Variable was successfully updated.'
+    else
+      render action: "show"
+    end
+  end
+
+  def create
+    @variable = Ci::Variable.new(project_params)
+
+    if @variable.valid? && @project.variables << @variable
       redirect_to namespace_project_variables_path(project.namespace, project), notice: 'Variables were successfully updated.'
     else
-      render action: 'show'
+      render action: "index"
     end
   end
 
+  def destroy
+    @key = @project.variables.find(params[:id])
+    @key.destroy
+
+    redirect_to namespace_project_variables_path(project.namespace, project), notice: 'Variable was successfully removed.'
+  end
+
   private
 
   def project_params
-    params.require(:project).permit({ variables_attributes: [:id, :key, :value, :_destroy] })
+    params.require(:variable).permit([:id, :key, :value, :_destroy])
   end
 end
diff --git a/app/views/projects/variables/_content.html.haml b/app/views/projects/variables/_content.html.haml
new file mode 100644
index 00000000000..0249e0c1bf1
--- /dev/null
+++ b/app/views/projects/variables/_content.html.haml
@@ -0,0 +1,8 @@
+%h4.prepend-top-0
+  Secret Variables
+%p
+  These variables will be set to environment by the runner.
+%p
+  So you can use them for passwords, secret keys or whatever you want.
+%p
+  The value of the variable can be visible in build log if explicitly asked to do so.
diff --git a/app/views/projects/variables/_form.html.haml b/app/views/projects/variables/_form.html.haml
new file mode 100644
index 00000000000..a5bae83e0ce
--- /dev/null
+++ b/app/views/projects/variables/_form.html.haml
@@ -0,0 +1,10 @@
+= form_for [@project.namespace.becomes(Namespace), @project, @variable] do |f|
+  = form_errors(@variable)
+
+  .form-group
+    = f.label :key, "Key", class: "label-light"
+    = f.text_field :key, class: "form-control", placeholder: "PROJECT_VARIABLE", required: true
+  .form-group
+    = f.label :value, "Value", class: "label-light"
+    = f.text_area :value, class: "form-control", placeholder: "PROJECT_VARIABLE", required: true
+  = f.submit btn_text, class: "btn btn-save"
diff --git a/app/views/projects/variables/_table.html.haml b/app/views/projects/variables/_table.html.haml
new file mode 100644
index 00000000000..6c43f822db4
--- /dev/null
+++ b/app/views/projects/variables/_table.html.haml
@@ -0,0 +1,25 @@
+.table-responsive.variables-table
+  %table.table
+    %colgroup
+      %col
+      %col
+      %col{ width: 100 }
+    %thead
+      %th Key
+      %th Value
+      %th
+    %tbody
+      - @project.variables.each do |variable|
+        - if variable.id?
+          %tr
+            %td= variable.key
+            %td= variable.value
+            %td
+              = link_to namespace_project_variable_path(@project.namespace, @project, variable), class: "btn btn-transparent btn-variable-edit" do
+                %span.sr-only
+                  Update
+                = icon("pencil")
+              = link_to namespace_project_variable_path(@project.namespace, @project, variable), class: "btn btn-transparent btn-variable-delete", method: :delete, data: { confirm: "Are you sure?" } do
+                %span.sr-only
+                  Remove
+                = icon("trash")
diff --git a/app/views/projects/variables/index.html.haml b/app/views/projects/variables/index.html.haml
new file mode 100644
index 00000000000..09bb54600af
--- /dev/null
+++ b/app/views/projects/variables/index.html.haml
@@ -0,0 +1,17 @@
+- page_title "Variables"
+
+.row.prepend-top-default.append-bottom-default
+  .col-lg-3
+    = render "content"
+  .col-lg-9
+    %h5.prepend-top-0
+      Add a variable
+    = render "form", btn_text: "Add new variable"
+    %hr
+    %h5.prepend-top-0
+      Your variables (#{@project.variables.size})
+    - if @project.variables.empty?
+      %p.settings-message.text-center.append-bottom-0
+        No variables found, add one with the form above.
+    - else
+      = render "table"
diff --git a/app/views/projects/variables/show.html.haml b/app/views/projects/variables/show.html.haml
index ca284b84d39..297a53ca98c 100644
--- a/app/views/projects/variables/show.html.haml
+++ b/app/views/projects/variables/show.html.haml
@@ -1,36 +1,9 @@
 - page_title "Variables"
-%h3.page-title
-  Secret Variables
 
-%p.light
-  These variables will be set to environment by the runner.
-  %br
-  So you can use them for passwords, secret keys or whatever you want.
-  %br
-  The value of the variable can be visible in build log if explicitly asked to do so.
-
-%hr
-
-
-= nested_form_for @project, url: url_for(controller: 'projects/variables', action: 'update'), html: { class: 'form-horizontal' }  do |f|
-  = form_errors(@project)
-
-  = f.fields_for :variables do |variable_form|
-    .form-group
-      = variable_form.label :key, 'Key', class: 'control-label'
-      .col-sm-10
-        = variable_form.text_field :key, class: 'form-control', placeholder: "PROJECT_VARIABLE"
-
-    .form-group
-      = variable_form.label :value, 'Value', class: 'control-label'
-      .col-sm-10
-        = variable_form.text_area :value, class: 'form-control', rows: 2, placeholder: ""
-
-        = variable_form.link_to_remove "Remove this variable", class: 'btn btn-danger pull-right prepend-top-10'
-    %hr
-  %p
-    .clearfix
-      = f.link_to_add "Add a variable", :variables, class: 'btn btn-success pull-right'
-
-  .form-actions
-    = f.submit 'Save changes', class: 'btn btn-save', return_to: request.original_url
+.row.prepend-top-default.append-bottom-default
+  .col-lg-3
+    = render "content"
+  .col-lg-9
+    %h5.prepend-top-0
+      Update variable
+    = render "form", btn_text: "Save variable"