Skip to content
This repository has been archived by the owner on Jan 28, 2020. It is now read-only.

Commit

Permalink
Delete vocabulary in taxonomy panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@amir-qayyum-khan
George Schneeloch authored and amir-qayyum-khan committed Sep 10, 2015
1 parent f543729 commit 9758f6c
Show file tree
Hide file tree
Showing 7 changed files with 321 additions and 34 deletions.
186 changes: 158 additions & 28 deletions ui/jstests/test_manage_taxonomies.jsx
View file
Expand Up @@ -181,6 +181,10 @@ define(['QUnit', 'jquery', 'manage_taxonomies', 'react',
dataType: 'json',
type: "GET"
});
TestUtils.initMockjax({
url: "/api/v1/repositories/repo/vocabularies/difficulty/",
type: "DELETE"
});
},
afterEach: function() {
TestUtils.cleanup();
Expand Down Expand Up @@ -219,10 +223,18 @@ define(['QUnit', 'jquery', 'manage_taxonomies', 'react',
assert.ok(VocabularyComponent, "class object not found");
var done = assert.async();

var showConfirmationDialog = function (options) {
options.confirmationHandler(true);
};

var addTermCalled = 0;
var deleteVocabularyCalled = 0;
var addTerm = function() {
addTermCalled += 1;
};
var deleteVocabulary = function() {
deleteVocabularyCalled += 1;
};
var reportMessage = function() {};
var afterMount = function(component) {
var node = React.findDOMNode(component);
Expand All @@ -244,30 +256,43 @@ define(['QUnit', 'jquery', 'manage_taxonomies', 'react',
'li'
);
assert.equal(itemList.length, 3);
//test enter text in input text
var inputNode = React.addons.TestUtils.
findRenderedDOMComponentWithTag(
component,
'input'
);
React.addons.TestUtils.Simulate.change(
inputNode,
{target: {value: 'test12'}}

var actionButtons = React.addons.TestUtils.
scryRenderedDOMComponentsWithClass(
component,
'delete-vocabulary'
);
component.forceUpdate(function() {
node = React.findDOMNode(component);
var textbox = $(node).find("input")[0];
assert.equal(
'test12',
component.state.newTermLabel
);
React.addons.TestUtils.Simulate.keyUp(textbox, {key: "x"});
assert.equal(addTermCalled, 0);
var deleteVocabularyButton = actionButtons[0];
React.addons.TestUtils.Simulate.click(deleteVocabularyButton);
component.forceUpdate(function () {
waitForAjax(1, function () {
assert.equal(deleteVocabularyCalled, 1);
//test enter text in input text
var inputNode = React.addons.TestUtils.
findRenderedDOMComponentWithTag(
component,
'input'
);
React.addons.TestUtils.Simulate.change(
inputNode,
{target: {value: 'test12'}}
);
component.forceUpdate(function () {
node = React.findDOMNode(component);
var textbox = $(node).find("input")[0];
assert.equal(
'test12',
component.state.newTermLabel
);
React.addons.TestUtils.Simulate.keyUp(textbox, {key: "x"});
assert.equal(addTermCalled, 0);

React.addons.TestUtils.Simulate.keyUp(textbox, {key: "Enter"});
waitForAjax(1, function() {
assert.equal(addTermCalled, 1);
done();
React.addons.TestUtils.Simulate.keyUp(textbox, {key: "Enter"});
waitForAjax(1, function () {
assert.equal(addTermCalled, 1);
done();
});
});
});
});
};
Expand All @@ -277,6 +302,8 @@ define(['QUnit', 'jquery', 'manage_taxonomies', 'react',
vocabulary={vocabulary}
terms={vocabulary.terms}
reportMessage={reportMessage}
deleteVocabulary={deleteVocabulary}
renderConfirmationDialog={showConfirmationDialog}
addTerm={addTerm}
repoSlug="repo"
ref={afterMount}
Expand Down Expand Up @@ -702,12 +729,14 @@ define(['QUnit', 'jquery', 'manage_taxonomies', 'react',
);
React.addons.TestUtils.Simulate.submit(formNode);
waitForAjax(1, function() {
// Error is caused by a 400 status code
assert.deepEqual(
component.state.message,
{error: "There was a problem adding the Vocabulary."}
);
done();
component.forceUpdate(function() {
// Error is caused by a 400 status code
assert.deepEqual(
component.state.message,
{error: "There was a problem adding the Vocabulary."}
);
done();
});
});
};
React.addons.TestUtils.
Expand Down Expand Up @@ -862,6 +891,7 @@ define(['QUnit', 'jquery', 'manage_taxonomies', 'react',
<TaxonomyComponent
vocabularies={vocabularies}
repoSlug="repo"
renderConfirmationDialog={function() {}}
ref={afterMount}
/>
);
Expand Down Expand Up @@ -966,6 +996,106 @@ define(['QUnit', 'jquery', 'manage_taxonomies', 'react',
<TaxonomyComponent
vocabularies={vocabularies}
repoSlug="repo"
renderConfirmationDialog={function() {}}
ref={afterMount}
/>
);
}
);

QUnit.test('Assert that delete vocabulary works in TaxonomyComponent',
function(assert) {
assert.ok(TaxonomyComponent, "class object not found");
var done = assert.async();
var userSelectedConfirm = 0;
var showConfirmationDialog = function (options) {
options.confirmationHandler(true);
userSelectedConfirm += 1;
};

var afterMount = function(component) {
waitForAjax(2, function() {
assert.equal(
component.state.vocabularies.length,
1
);
var actionButtons = React.addons.TestUtils.
scryRenderedDOMComponentsWithClass(
component,
'delete-vocabulary'
);
var deleteVocabularyButton = actionButtons[0];
React.addons.TestUtils.Simulate.click(deleteVocabularyButton);
component.forceUpdate(function() {
waitForAjax(1, function() {
assert.equal(userSelectedConfirm, 1);
assert.equal(
component.state.vocabularies.length,
0
);
done();
});
});
});
};
React.addons.TestUtils.renderIntoDocument
(
<TaxonomyComponent
repoSlug="repo"
renderConfirmationDialog={showConfirmationDialog}
ref={afterMount}
/>
);
}
);

QUnit.test('Assert that delete vocabulary ajax call' +
' fail in TaxonomyComponent',
function(assert) {
assert.ok(TaxonomyComponent, "class object not found");
var done = assert.async();
var userSelectedConfirm = 0;
var showConfirmationDialog = function (options) {
options.confirmationHandler(true);
userSelectedConfirm += 1;
};

TestUtils.replaceMockjax({
url: "/api/v1/repositories/repo/vocabularies/" + vocabulary.slug + "/",
type: "DELETE",
status: 400
});

var afterMount = function(component) {
waitForAjax(2, function() {
assert.equal(
component.state.vocabularies.length,
1
);
var actionButtons = React.addons.TestUtils.
scryRenderedDOMComponentsWithClass(
component,
'delete-vocabulary'
);
var deleteVocabularyButton = actionButtons[0];
React.addons.TestUtils.Simulate.click(deleteVocabularyButton);
waitForAjax(1, function() {
component.forceUpdate(function() {
assert.equal(userSelectedConfirm, 1);
assert.equal(
component.state.vocabularies.length,
1
);
done();
});
});
});
};
React.addons.TestUtils.renderIntoDocument
(
<TaxonomyComponent
repoSlug="repo"
renderConfirmationDialog={showConfirmationDialog}
ref={afterMount}
/>
);
Expand Down
23 changes: 23 additions & 0 deletions ui/static/ui/css/mit-lore.css
View file
Expand Up @@ -554,3 +554,26 @@ input.repo-page-status {
top: 27%;
transform: translateY(-27%);
}

.modal-dialog {
position: absolute;
right: 0;
left: 0;
margin-top: 0;
margin-bottom: 0;
}

.modal.fade .modal-dialog {
transition: top 0.4s ease-out;
transform: translate(0, -50%);
top: 0;
}

.modal.in .modal-dialog {
transform: translate(0, -50%);
top: 50%;
}

.modal-dialog p {
font-size: medium;
}
13 changes: 12 additions & 1 deletion ui/static/ui/js/listing.js
View file
Expand Up @@ -330,9 +330,20 @@ define('listing',
window.location = "?" + URI().search(urlMap).query();
};

var showConfirmationDialog = function(options) {
var container = $("#confirmation-container")[0];
Utils.showConfirmationDialog(
options,
container
);
};

Pagination.loader(pageNum, numPages, updatePage,
$("#lore-pagination")[0]);
ManageTaxonomies.loader(repoSlug, $('#taxonomy-component')[0]);
ManageTaxonomies.loader(
repoSlug,
$('#taxonomy-component')[0],
showConfirmationDialog);
};

return {
Expand Down
2 changes: 1 addition & 1 deletion ui/static/ui/js/listing_resources.jsx
View file
Expand Up @@ -247,7 +247,7 @@ define('listing_resources', ['react', 'jquery', 'lodash', 'utils'],
</span>
<span className="meta-item mi-col-3">
<i className="fa fa-graduation-cap">
</i> {resource.xa_avg_grade}
</i> {resource.xa_avg_grade.toFixed(1)}
</span>
<span className="meta-item mi-col-4">
<a href={resource.preview_url} target="_blank">Preview</a>
Expand Down
48 changes: 45 additions & 3 deletions ui/static/ui/js/manage_taxonomies.jsx
View file
Expand Up @@ -32,7 +32,9 @@ define('manage_taxonomies', ['react', 'lodash', 'jquery', 'utils', 'bootstrap'],
<span className="utility-features">
<a href="#">
<i className="fa fa-pencil"></i>
</a> <a href="#">
</a>
<a data-toggle="modal" data-target="#confirm-delete"
onClick={this.onDeleteHandler} className="delete-vocabulary">
<i className="fa fa-remove"></i>
</a>
</span> <a className="accordion-toggle vocab-title"
Expand Down Expand Up @@ -68,6 +70,35 @@ define('manage_taxonomies', ['react', 'lodash', 'jquery', 'utils', 'bootstrap'],
</div>
</div>;
},
onDeleteHandler: function() {
var options = {
actionButtonName: "Delete",
actionButtonClass: "btn btn-danger btn-ok",
title: "Confirm Delete",
message: "Are you sure you want to delete vocabulary '" +
this.props.vocabulary.name + "'?",
confirmationHandler: this.confirmedDeleteResponse
};
this.props.renderConfirmationDialog(options);
},
confirmedDeleteResponse: function(success) {
var method = "DELETE";
var thiz = this;
if (success) {
var vocab = this.props.vocabulary;
var API_ROOT_VOCAB_URL = '/api/v1/repositories/' + this.props.repoSlug +
'/vocabularies/' + vocab.slug + '/';
$.ajax({
type: method,
url: API_ROOT_VOCAB_URL
}).fail(function () {
var message = "Unable to delete vocabulary '" + vocab.name + "'";
thiz.props.reportMessage({error: message});
}).then(function () {
thiz.props.deleteVocabulary(vocab.slug);
});
}
},
onKeyUp: function(e) {
if (e.key === "Enter") {
this.handleAddTermClick();
Expand Down Expand Up @@ -115,11 +146,13 @@ define('manage_taxonomies', ['react', 'lodash', 'jquery', 'utils', 'bootstrap'],
var items = _.map(this.props.vocabularies, function (obj) {
return <VocabularyComponent
vocabulary={obj.vocabulary}
deleteVocabulary={thiz.props.deleteVocabulary}
terms={obj.terms}
key={obj.vocabulary.slug}
repoSlug={repoSlug}
reportMessage={thiz.reportMessage}
addTerm={thiz.props.addTerm}
renderConfirmationDialog={thiz.props.renderConfirmationDialog}
/>;
});
return <div className="panel-group lore-panel-group">
Expand Down Expand Up @@ -338,13 +371,21 @@ define('manage_taxonomies', ['react', 'lodash', 'jquery', 'utils', 'bootstrap'],
});
this.setState({vocabularies: vocabularies});
},
deleteVocabulary: function(vocabSlug) {
var vocabularies = _.filter(this.state.vocabularies, function(tuple) {
return tuple.vocabulary.slug !== vocabSlug;
});
this.setState({vocabularies: vocabularies});
},
render: function() {
return (
<div className="tab-content drawer-tab-content">
<div className="tab-pane active" id="tab-taxonomies">
<AddTermsComponent
vocabularies={this.state.vocabularies}
repoSlug={this.props.repoSlug}
renderConfirmationDialog={this.props.renderConfirmationDialog}
deleteVocabulary={this.deleteVocabulary}
addTerm={this.addTerm} />
</div>
<div className="tab-pane drawer-tab-content" id="tab-vocab">
Expand Down Expand Up @@ -388,9 +429,10 @@ define('manage_taxonomies', ['react', 'lodash', 'jquery', 'utils', 'bootstrap'],
'AddTermsComponent': AddTermsComponent,
'AddVocabulary': AddVocabulary,
'TaxonomyComponent': TaxonomyComponent,
'loader': function (repoSlug, container) {
'loader': function (repoSlug, container, showConfirmationDialog) {
React.render(
<TaxonomyComponent repoSlug={repoSlug}/>,
<TaxonomyComponent repoSlug={repoSlug}
renderConfirmationDialog={showConfirmationDialog}/>,
container
);
}
Expand Down

0 comments on commit 9758f6c

Please sign in to comment.