Skip to content

Commit

Permalink
Merge pull request #2111 from kalikiana/yaml-store-ui
Browse files Browse the repository at this point in the history 
Expose saving of YAML templates and hide the legacy UI
  • Loading branch information
@kalikiana
kalikiana committed Aug 2, 2019
2 parents e584843 + ed680a4 commit e7b2f56
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 63 deletions.
24 changes: 17 additions & 7 deletions assets/javascripts/job_templates.js
View file
Expand Up @@ -403,7 +403,7 @@ function prepareTemplateEditor(data) {
form.find('.buttons').show ();
}

function submitTemplateEditor() {
function submitTemplateEditor(preview) {
var form = $('#editor-form');
form.find('.buttons').hide();
form.find('.progress-indication').show();
Expand All @@ -414,15 +414,17 @@ function submitTemplateEditor() {
type: 'POST',
dataType: 'json',
data: {
preview: 1,
preview: preview,
template: editor.doc.getValue(),
reference: form.data('reference'),
}
}).done(function(data) {
if (data.hasOwnProperty('id') && data.id != job_group_id) {
result.text('Error: Changing the group name here is not supported');
return true;
result.text(data.preview ? 'Preview of the YAML:' : 'YAML saved!');
if (!data.hasOwnProperty('preview')) {
// Once a valid YAML template was saved we no longer offer the legacy editor
$('#toggle-yaml-editor').hide();
$('#media-add').hide();
}
result.text('Preview of the YAML:');
if (data.hasOwnProperty('template')) {
var preview = CodeMirror(result[0], {
mode: 'yaml',
Expand All @@ -448,11 +450,19 @@ function submitTemplateEditor() {
else {
$('<p/>').text('Invalid server response: ' + data.statusText).appendTo(result);
}
if (data.responseJSON.template) {
var preview = CodeMirror($('<pre/>').appendTo(result)[0], {
mode: 'yaml',
lineNumbers: true,
lineWrapping: true,
readOnly: true,
value: data.responseJSON.template,
});
}
}).always(function(data) {
form.find('.buttons').show();
form.find('.progress-indication').hide();
});
return false;
}

function showSubmitResults(form, result) {
Expand Down
2 changes: 2 additions & 0 deletions lib/OpenQA/WebAPI/Controller/API/V1/JobTemplate.pm
View file
Expand Up @@ -408,7 +408,9 @@ sub update {

# Preview mode: Get the expected YAML and rollback the result
if ($self->param('preview')) {
$job_group->update({template => ''});
$json->{template} = $self->get_job_groups($group_id)->{$job_group->name};
$json->{preview} = int($self->param('preview'));
$self->schema->txn_rollback;
}
else {
Expand Down
56 changes: 34 additions & 22 deletions t/ui/13-admin.t
View file
Expand Up @@ -460,28 +460,6 @@ subtest 'job property editor' => sub() {
is($driver->find_element_by_id('editor-carry-over-bugrefs')->is_selected(), 0, 'bug carry over disabled');
is($driver->find_element_by_id('editor-description')->get_value(), 'Test group', 'description added');
};

subtest 'edit the yaml' => sub() {
$driver->refresh();
my $form = $driver->find_element_by_id('editor-form');
ok($form->is_hidden(), 'editor form is hidden');
$driver->find_element_by_id('toggle-yaml-editor')->click();
wait_for_ajax;
ok($form->is_displayed(), 'editor form is shown');
ok($form->child('.progress-indication')->is_hidden(), 'spinner is hidden');
my $yaml = $driver->execute_script('return editor.doc.getValue();');
ok($yaml =~ m/scenarios:/, 'YAML was fetched') or diag explain $yaml;
$driver->find_element_by_id('update-template')->click();
my $result = $form->child('.result');
wait_for_ajax;
ok($result->get_text() =~ m/Preview of the YAML/, 'preview shown') or diag explain $result->get_text();

# Make the YAML invalid
$driver->execute_script('editor.doc.setValue("invalid: true");');
$driver->find_element_by_id('update-template')->click();
wait_for_ajax;
ok($result->get_text() =~ m/There was a problem applying the changes/, 'error shown');
};
};

sub is_element_text {
Expand Down Expand Up @@ -571,6 +549,40 @@ subtest 'edit media' => sub() {
is_element_text(\@picks, [qw(64bit 64bit HURRA)], 'chosen tests present');
};

subtest 'edit the yaml' => sub() {
$driver->refresh();
my $form = $driver->find_element_by_id('editor-form');
ok($form->is_hidden(), 'editor form is hidden');
$driver->find_element_by_id('toggle-yaml-editor')->click();
wait_for_ajax;
ok($form->is_displayed(), 'editor form is shown');
ok($form->child('.progress-indication')->is_hidden(), 'spinner is hidden');
my $yaml = $driver->execute_script('return editor.doc.getValue();');
ok($yaml =~ m/scenarios:/, 'YAML was fetched') or diag explain $yaml;
# Preview
$driver->find_element_by_id('preview-template')->click();
my $result = $form->child('.result');
wait_for_ajax;
ok($result->get_text() =~ m/Preview of the YAML/, 'preview shown') or diag explain $result->get_text();

# Save
$driver->find_element_by_id('save-template')->click();
$result = $form->child('.result');
wait_for_ajax;
ok($result->get_text() =~ m/YAML saved!/, 'saving confirmed') or diag explain $result->get_text();

# Legacy UI is hidden and no longer available
ok($driver->find_element_by_id('toggle-yaml-editor')->is_hidden(), 'editor toggle hidden');
ok($driver->find_element_by_id('media')->is_hidden(), 'media editor hidden');
ok($driver->find_element_by_id('media-add')->is_hidden(), 'media add button hidden');

# Make the YAML invalid
$driver->execute_script('editor.doc.setValue("invalid: true");');
$driver->find_element_by_id('preview-template')->click();
wait_for_ajax;
ok($result->get_text() =~ m/There was a problem applying the changes/, 'error shown');
};

sub get_cell_contents {
my ($row) = @_;
return [map { $_->get_text() } $driver->find_elements($row . ' td')];
Expand Down
80 changes: 46 additions & 34 deletions templates/admin/job_template/index.html.ep
View file
Expand Up @@ -15,12 +15,20 @@
false
% }
;
setupJobTemplates("<%= url_for('apiv1_job_templates') %>", <%= $group->id %>);
% if ($group->template) {
toggleTemplateEditor();
% }
% else {
setupJobTemplates("<%= url_for('apiv1_job_templates') %>", <%= $group->id %>);
% }
$('#preview-template').click(function() { submitTemplateEditor(1); });
$('#save-template').click(function() { submitTemplateEditor(0); });
% end

<div class="row">
<div class="col-sm-12">
<form action="<%= url_for('admin_groups') %>" class="corner-buttons">
% if (!$group->template) {
<button type="button" id="toggle-yaml-editor" class="btn btn-default" onclick="toggleTemplateEditor();">
<span>
<i class="fas fa-edit"></i>
Expand All @@ -32,6 +40,7 @@
% }
</span>
</button>
% }
<button type="button" id="toggle-group-properties" class="btn btn-default" onclick="toggleEdit();">
<span>
<i class="fas fa-edit"></i>
Expand Down Expand Up @@ -60,39 +69,41 @@
<span id="job-group-name"><%= $group->name %></span>
</h2>
%= include 'layouts/info'
%= include 'admin/group/group_property_editor', group => $group, is_parent => 0
<div id="media">
<p id="loading"><i class="fa fa-spinner fa-spin"></i> Loading…</p>
% if (!$group->template) {
%= include 'admin/group/group_property_editor', group => $group, is_parent => 0
<div id="media">
<p id="loading"><i class="fa fa-spinner fa-spin"></i> Loading…</p>

<select id="machines-template" multiple="true"
% if (! is_admin ) {
disabled
% }
data-placeholder="None" style="display: none">
% for my $machine (@$machines) {
<option value="<%= $machine->name %>"
data-machine-id="<%= $machine->id %>" >
%= $machine->name
</option>
% }
</select>
<select id="machines-template" multiple="true"
% if (! is_admin ) {
disabled
% }
data-placeholder="None" style="display: none">
% for my $machine (@$machines) {
<option value="<%= $machine->name %>"
data-machine-id="<%= $machine->id %>" >
%= $machine->name
</option>
% }
</select>

<select id="tests-template"
% if (! is_admin ) {
disabled
% }
style="display: none">
<option value="">Select…</option>
% for my $test (@$tests) {
<option value="<%= $test->name %>" data-test-id="<%= $test->id %>">
%= $test->name
</option>
% }
</select>
<select id="tests-template"
% if (! is_admin ) {
disabled
% }
style="display: none">
<option value="">Select…</option>
% for my $test (@$tests) {
<option value="<%= $test->name %>" data-test-id="<%= $test->id %>">
%= $test->name
</option>
% }
</select>

</div>
<form action="#" id="editor-form" class="form-horizontal" style="display: none;" onsubmit="return submitTemplateEditor();"
data-put-url="<%= url_for('apiv1_job_templates_schedules' => (id => $group->id)) %>">
</div>
% }
<form action="#" id="editor-form" class="form-horizontal" style="display: none;"
data-put-url="<%= url_for('apiv1_job_templates_schedules' => (id => $group->id)) %>" data-reference="<%= $group->template %>">
<div class="form-group row">
<label for="editor-template" class="col-sm-4 control-label">
<div id="editor-yaml-guide">
Expand Down Expand Up @@ -143,7 +154,8 @@ scenarios:
<div class="col-sm-8">
<p class="buttons">
% if (is_admin) {
<button id="update-template" type="submit" class="btn btn-primary"><i class="fas fa-update"></i>Preview changes</button>
<button id="preview-template" type="button" class="btn btn-secondary"><i class="fas fa-preview"></i>Preview changes</button>
<button id="save-template" type="button" class="btn btn-primary"><i class="fas fa-save"></i>Save changes</button>
% }
</p>
<p class="progress-indication">
Expand All @@ -155,9 +167,9 @@ scenarios:
</div>
</form>

% if (is_admin) {
% if (!$group->template && is_admin) {
<p>
%= link_to url_for('job_group_new_media', groupid => $group->id) => begin
%= link_to url_for('job_group_new_media', groupid => $group->id), id => 'media-add', begin
<i class="fa fa-plus-square"></i> Test new medium as part of this group
% end
</p>
Expand Down

0 comments on commit e7b2f56

Please sign in to comment.