This is an automated email from the ASF dual-hosted git repository.
nixon pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/atlas.git
The following commit(s) were added to refs/heads/master by this push:
new 4d027b4 ATLAS-3887 ATLAS-4242: UI : Fixed Consistency and
highlighting issues while switching between old and new UI.
4d027b4 is described below
commit 4d027b4bf1a0c6b4329422a75518f010c579133a
Author: prasad pawar <prasad.pa...@freestoneinfotech.com>
AuthorDate: Wed Apr 14 14:43:12 2021 +0530
ATLAS-3887 ATLAS-4242: UI : Fixed Consistency and highlighting issues while
switching between old and new UI.
Signed-off-by: nixonrodrigues <ni...@apache.org>
---
.../public/js/views/glossary/GlossaryLayoutView.js | 11 +++-
.../public/js/views/search/SearchLayoutView.js | 20 ++++++-
dashboardv2/public/js/views/tag/TagLayoutView.js | 5 +-
dashboardv3/public/js/router/Router.js | 35 ++++++++----
.../js/views/search/tree/GlossaryTreeLayoutView.js | 62 ++++++++++++++++++++--
5 files changed, 110 insertions(+), 23 deletions(-)
diff --git a/dashboardv2/public/js/views/glossary/GlossaryLayoutView.js
b/dashboardv2/public/js/views/glossary/GlossaryLayoutView.js
index 0de5c35..a13ad4a 100644
--- a/dashboardv2/public/js/views/glossary/GlossaryLayoutView.js
+++ b/dashboardv2/public/js/views/glossary/GlossaryLayoutView.js
@@ -216,7 +216,8 @@ define(['require',
}
if (Utils.getUrlState.isGlossaryTab()) {
var obj = this.query[this.viewType],
- $tree = this.ui[(this.viewType == "term" ? "termTree"
: "categoryTree")]
+ $tree = this.ui[(this.viewType == "term" ? "termTree"
: "categoryTree")];
+ obj["gId"] = that.value.gId; //this Property added,
Because when we toggle the GlossaryViewButton it does not adds the gId which is
required for selection.
if (obj.guid) {
var node = $tree.jstree(true).get_node(obj.guid);
if (node) {
@@ -826,11 +827,17 @@ define(['require',
obj["gId"] = selectedItem.guid;
}
this.query[this.viewType] = _.extend(obj,
_.omit(this.value, 'gId'), _.pick(this.glossary.selectedItem, 'model', 'type',
'gType', 'guid'), { "viewType": this.viewType, "isNodeNotFoundAtLoad":
this.query[this.viewType].isNodeNotFoundAtLoad });
+ //Below condition if for adding term Param to the URL for
selection Purpose while switching from Old UI to New UI on term selection.
+ if (selectedItem.type === "GlossaryTerm") {
+ obj['term'] = selectedItem.text + '@' +
selectedItem.glossaryName;
+ } else {
+ delete obj.term;
+ }
Utils.setUrl({
url: '#!/glossary/' + obj.guid,
mergeBrowserUrl: false,
trigger: true,
- urlParams: _.omit(obj, 'model', 'guid', 'type',
'isNodeNotFoundAtLoad'),
+ urlParams: _.omit(obj, 'model', 'type',
'isNodeNotFoundAtLoad'), //Guid has been removed from here because we need in
the URL for Highlighting issue.
updateTabState: true
});
}
diff --git a/dashboardv2/public/js/views/search/SearchLayoutView.js
b/dashboardv2/public/js/views/search/SearchLayoutView.js
index 1dbda7f..be46d7e 100644
--- a/dashboardv2/public/js/views/search/SearchLayoutView.js
+++ b/dashboardv2/public/js/views/search/SearchLayoutView.js
@@ -625,6 +625,8 @@ define(['require',
}
},
renderTermList: function() {
+ this.glossaryTermArray = null; //This Value is created to
store the result of search Term while basic search through term.
+ var that = this;
var getTypeAheadData = function(data, params) {
var dataList = data.entities,
foundOptions = [];
@@ -637,7 +639,7 @@ define(['require',
}
});
return foundOptions;
- }
+ };
this.ui.termLov.select2({
placeholder: "Search Term",
allowClear: true,
@@ -654,6 +656,7 @@ define(['require',
};
},
processResults: function(data, params) {
+ that.glossaryTermArray = getTypeAheadData(data,
params); //storing the search Results obj
return {
results: getTypeAheadData(data, params)
};
@@ -734,6 +737,18 @@ define(['require',
findSearchResult: function() {
this.triggerSearch(this.ui.searchInput.val());
},
+ //This below function returns the searched Term Guid.
+ getSearchedTermGuid: function() {
+ var searchedTerm = this.ui.termLov.select2('val'),
+ searchedTermGuid = null;
+ if (searchedTerm) {
+ this.glossaryTermArray.find(function(obj) {
+ if (searchedTerm === obj.id)
+ searchedTermGuid = obj.guid;
+ });
+ }
+ return searchedTermGuid;
+ },
triggerSearch: function(value) {
var params = {
searchType: this.type,
@@ -743,11 +758,12 @@ define(['require',
},
typeLovValue =
this.ui.typeLov.find(':selected').data('name'), // to get count of selected
element used data
tagLovValue =
this.ui.tagLov.find(':selected').data('name') || this.ui.tagLov.val(),
- termLovValue = this.ui.termLov.select2('val')
+ termLovValue = this.ui.termLov.select2('val');
params['type'] = typeLovValue || null;
if (!this.dsl) {
params['tag'] = tagLovValue || null;
params['term'] = termLovValue || null;
+ params['guid'] = this.getSearchedTermGuid(); //Adding Guid
in the URL for selection while switching.
var entityFilterObj =
this.searchTableFilters['entityFilters'],
tagFilterObj = this.searchTableFilters['tagFilters'];
params['includeDE'] = false;
diff --git a/dashboardv2/public/js/views/tag/TagLayoutView.js
b/dashboardv2/public/js/views/tag/TagLayoutView.js
index e2155f1..bde61b8 100644
--- a/dashboardv2/public/js/views/tag/TagLayoutView.js
+++ b/dashboardv2/public/js/views/tag/TagLayoutView.js
@@ -321,7 +321,7 @@ define(['require',
return '<li class="parent-node" data-id="tags">' +
'<div><div class="tools"><i class="fa
fa-ellipsis-h tagPopover"></i></div>' +
(hasChild ? '<i class="fa toggleArrow
fa-angle-right" data-id="expandArrow" data-name="' + name + '"></i>' : '') +
- '<a href="#!/tag/tagAttribute/' + name +
'?viewType=' + (isTree ? 'tree' : 'flat') + '&searchType=basic" data-name="' +
name + '">' + name + '</a></div>' +
+ '<a href="#!/tag/tagAttribute/' + name +
'?viewType=' + (isTree ? 'tree' : 'flat') + '&searchType=basic&tag=' + name +
'" data-name="' + name + '">' + name + '</a></div>' +
(isTree && hasChild ? '<ul class="child hide">' +
that.generateTree({ 'data': options.children, 'isTree': isTree }) + '</ul>' :
'') + '</li>';
};
if (isTree) {
@@ -410,7 +410,6 @@ define(['require',
});
});
modal.on('ok', function() {
- // modal.$el.find('button.ok').attr("disabled",
"true");
modal.$el.find('button.ok').showButtonLoader();
that.onCreateButton(view, modal);
});
@@ -531,7 +530,7 @@ define(['require',
});
}
that.collection.fullCollection.add(classificationDefs);
- that.setUrl('#!/tag/tagAttribute/' +
ref.ui.tagName.val(), true);
+ that.setUrl('#!/tag/tagAttribute/' +
ref.ui.tagName.val() + '?tag=' + ref.ui.tagName.val(), true);
Utils.notifySuccess({
content: "Classification " + that.name +
Messages.getAbbreviationMsg(false, 'addSuccessMessage')
});
diff --git a/dashboardv3/public/js/router/Router.js
b/dashboardv3/public/js/router/Router.js
index 3cacd78..1a19523 100644
--- a/dashboardv3/public/js/router/Router.js
+++ b/dashboardv3/public/js/router/Router.js
@@ -233,7 +233,7 @@ define([
},
renderGlossaryLayoutView: function(id) {
var that = this;
- require(["views/site/Header",
"views/glossary/GlossaryContainerLayoutView", "views/site/SideNavLayoutView"],
function(Header, GlossaryContainerLayoutView, SideNavLayoutView) {
+ require(["views/site/Header",
"views/glossary/GlossaryContainerLayoutView",
"views/search/SearchDefaultLayoutView", "views/site/SideNavLayoutView"],
function(Header, GlossaryContainerLayoutView, SearchDefaultLayoutView,
SideNavLayoutView) {
var paramObj = Utils.getUrlState.getQueryParams();
that.renderViewIfNotExists(that.getHeaderOptions(Header));
var options = _.extend({
@@ -254,16 +254,29 @@ define([
return new SideNavLayoutView(options);
}
});
- that.renderViewIfNotExists({
- view: App.rContent,
- viewName: "GlossaryContainerLayoutView",
- manualRender: function() {
- this.view.currentView.manualRender(options);
- },
- render: function() {
- return new GlossaryContainerLayoutView(options)
- }
- });
+ //Below condition is added for showing Detail Page for only
Term and Category,
+ //because we are showing default search Page on Glossary
Selection.
+ if (paramObj.gType !== "glossary") {
+ that.renderViewIfNotExists({
+ view: App.rContent,
+ viewName: "GlossaryContainerLayoutView",
+ manualRender: function() {
+ this.view.currentView.manualRender(options);
+ },
+ render: function() {
+ return new GlossaryContainerLayoutView(options)
+ }
+ });
+ } else {
+ options["value"] = "";
+ options["initialView"] = true;
+ that.renderViewIfNotExists(
+ that.getHeaderOptions(Header, {
+ fromDefaultSearch: true
+ })
+ );
+ App.rContent.show(new SearchDefaultLayoutView(options));
+ }
});
},
renderDefaultSearchLayoutView: function(opt) {
diff --git a/dashboardv3/public/js/views/search/tree/GlossaryTreeLayoutView.js
b/dashboardv3/public/js/views/search/tree/GlossaryTreeLayoutView.js
index 421855d..f61b1b1 100644
--- a/dashboardv3/public/js/views/search/tree/GlossaryTreeLayoutView.js
+++ b/dashboardv3/public/js/views/search/tree/GlossaryTreeLayoutView.js
@@ -96,6 +96,7 @@ define([
this.glossaryCollection.fullCollection, "reset add change",
function(skip) {
if (this.ui.termSearchTree.jstree(true)) {
+ that.glossaryTreeUpdate = true; //To Keep the
selection of Term after any new Glossary is Created.
this.ui.termSearchTree.jstree(true).refresh();
} else {
this.renderGlossaryTree();
@@ -117,7 +118,8 @@ define([
});
},
glossarySwitchBtnUpdate: function() {
- this.ui.showGlossaryType.attr("data-original-title",
(this.isTermView ? "Show Category" : "Show Term"));
+ var tooltipTitle = (this.isTermView ? "Show Category" : "Show
Term");
+ this.ui.showGlossaryType.attr({ "data-original-title":
tooltipTitle, "title": tooltipTitle });
this.ui.showGlossaryType.tooltip('hide');
this.ui.showGlossaryType.find("i").toggleClass("switch-button");
if (this.isTermView) {
@@ -155,6 +157,12 @@ define([
});
this.getViewType();
this.bindEvents();
+ //To stop the trigger Search event, if the node is selected in Old
UI and swicthed to New UI.
+ if (Utils.getUrlState.getQueryParams()) {
+ if(Utils.getUrlState.getQueryParams().gType === "term"){
+ this.glossaryTreeUpdate = true;
+ }
+ }
},
onRender: function() {
this.changeLoaderState(true);
@@ -226,6 +234,11 @@ define([
this.createTermAction();
},
onNodeSelect: function(options, showCategory) {
+ if (this.glossaryTreeUpdate && options.node.original.type ===
"GlossaryTerm") {
+ //To stop the trigger Search event,if the node is selected in
Old UI and swicthed to New UI.
+ this.glossaryTreeUpdate = false;
+ return;
+ }
var name, type, selectedNodeId, that = this,
glossaryType = options.node.original.gType;
if (glossaryType == "category") {
@@ -275,6 +288,27 @@ define([
if (that.searchVent) {
that.searchVent.trigger("Success:Category");
}
+ } else if (glossaryType = "glossary") { //This condition is added
to setUrl after click on Glossary for highlighting issue from New UI to Old UI.
+ that.glossaryTermId = null;
+ if (that.glossaryId != options.node.id) {
+ that.glossaryId = options.node.id;
+ var params = {
+ "gId": that.glossaryId,
+ "gType": options.node.original.gType,
+ "viewType": (this.isTermView) ? "term" : "category"
+ };
+ Utils.setUrl({
+ url: '#!/glossary/' + that.glossaryId,
+ urlParams: params,
+ mergeBrowserUrl: false,
+ trigger: false,
+ updateTabState: true
+ });
+ } else {
+ that.glossaryId = null;
+ that.ui.termSearchTree.jstree(true).deselect_all(true);
+ this.showDefaultPage();
+ }
} else {
that.glossaryTermId = null;
if (that.glossaryId != options.node.id) {
@@ -344,8 +378,10 @@ define([
var that = this,
collection = (options && options.collection) ||
this.glossaryCollection.fullCollection,
listOfParents = [],
- type = "term";
-
+ type = "term",
+ queryParams = Utils.getUrlState.getQueryParams(),
+ glossaryGuid = queryParams ? queryParams.gId : null,
+ gType = queryParams ? queryParams.gType : "term";
return this.glossaryCollection.fullCollection.map(function(model,
i) {
var obj = model.toJSON(),
parent = {
@@ -358,7 +394,10 @@ define([
type: obj.typeName ? obj.typeName : "GLOSSARY",
gType: "glossary",
children: [],
- state: { opened: true }
+ state: {
+ opened: true,
+ selected: (model.id === glossaryGuid && gType ===
"glossary") ? true : false
+ }
},
openGlossaryNodesState = function(treeDate) {
if (treeDate.length == 1) {
@@ -620,7 +659,7 @@ define([
gId = selectednode[0].original.parent &&
selectednode[0].original.parent.guid,
isGlossaryView = (type == 'GlossaryTerm' || type ==
'GlossaryCategory') ? false : true,
model = this.glossaryCollection.fullCollection.get(guid),
- termModel = this.glossaryCollection.fullCollection.get(gId);;
+ termModel = this.glossaryCollection.fullCollection.get(gId);
if (isGlossaryView) {
CommonViewFunction.createEditGlossaryCategoryTerm({
"model": model,
@@ -649,6 +688,10 @@ define([
viewType: that.isTermView ? 'term' : 'category',
searchType: "basic"
}
+ if (type === "GlossaryTerm") {
+ //Below condition is used to keep the selection or
Highlight after clicking on the viewEdit option on term.
+ params['term'] = selectednode[0].original.name + '@' +
selectednode[0].original.parent.name;
+ }
var serachUrl = '#!/glossary/' + guid;
this.triggerSearch(params, serachUrl);
if (!this.isTermView && this.options.categoryEvent) {
@@ -701,6 +744,10 @@ define([
).on("load_node.jstree", function(e, data)
{}).on("open_node.jstree", function(e, data) {}).on("select_node.jstree",
function(e, data) {
if (that.fromManualRender !== true) {
that.onNodeSelect(data);
+ if (that.glossaryId === data.node.original.id) {
+ //This condition is to reset the Glossary ID to
null after clicking on the Logo.
+ that.glossaryId = null;
+ }
} else {
that.fromManualRender = false;
}
@@ -726,6 +773,10 @@ define([
that.options.categoryEvent.trigger("Success:Category", true);
}
}
+ //Below condition is for switching the the Show Term/Show
Category toggle button on swicthing from Old to New UI.
+ if (that.isTermView === false) {
+ that.glossarySwitchBtnUpdate();
+ }
}).on("hover_node.jstree", function(nodes, str, res) {
var aTerm = that.$("#" + str.node.a_attr.id),
@@ -749,6 +800,7 @@ define([
refresh: function(options) {
this.glossaryTermId = null;
this.fetchGlossary();
+ this.glossaryTreeUpdate = true;
},
onClickImportGlossary: function() {
var that = this;
