Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Expose saving of YAML templates and hide the legacy UI #2111

Merged
merged 1 commit into from Aug 2, 2019
Merged

Expose saving of YAML templates and hide the legacy UI #2111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 17 additions & 7 deletions assets/javascripts/job_templates.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
Expand Up @@ -464,28 +464,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 @@ -575,6 +553,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
Open in desktop
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