Project variables UI

Closes #14091

5 files changed, 66 insertions, 34 deletions

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..1a733200098
--- /dev/null
+++ b/app/views/projects/variables/_table.html.haml
@@ -0,0 +1,24 @@
+.table-responsive
+  %table.table
+    %colgroup
+      %col
+      %col
+      %col{ width: 100 }
+    %thead
+      %th Key
+      %th Value
+      %th
+    %tbody
+      - @project.variables.each do |variable|
+        %tr
+          %td= variable.key
+          %td= variable.value
+          %td
+            = link_to namespace_project_variable_path(@project.namespace, @project, variable), class: "btn btn-transparent" do
+              %span.sr-only
+                Update
+              = icon("pencil")
+            = link_to namespace_project_variable_path(@project.namespace, @project, variable), class: "btn btn-transparent", 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..89ef79fb2e9
--- /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.profile-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"