Skip to content

Commit 1fd77ea

Browse files
odeimaizmergify[bot]
odeimaiz
and
mergify[bot]
authored
🎨 [Frontend] More Plus Menu (#7545)
Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
1 parent ed1c032 commit 1fd77ea

File tree

15 files changed

+231
-127
lines changed

15 files changed

+231
-127
lines changed

‎services/static-webserver/client/source/class/osparc/MaintenanceTracker.js

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -129,27 +129,28 @@ qx.Class.define("osparc.MaintenanceTracker", {
129129
}
130130
},
131131

132+
__messageToRibbon: function(closable) {
133+
this.__removeRibbonMessage();
134+
const text = this.__getText();
135+
const notification = new osparc.notification.RibbonNotification(text, "maintenance", closable);
136+
osparc.notification.RibbonNotifications.getInstance().addNotification(notification);
137+
this.__lastRibbonMessage = notification;
138+
},
139+
132140
__scheduleRibbonMessage: function() {
133141
const now = new Date();
134142
const diffClosable = this.getStart().getTime() - now.getTime() - this.self().CLOSABLE_WARN_IN_ADVANCE;
135143
const diffPermanent = this.getStart().getTime() - now.getTime() - this.self().PERMANENT_WARN_IN_ADVANCE;
136144

137-
const messageToRibbon = closable => {
138-
this.__removeRibbonMessage();
139-
const text = this.__getText();
140-
const notification = new osparc.notification.RibbonNotification(text, "maintenance", closable);
141-
osparc.notification.RibbonNotifications.getInstance().addNotification(notification);
142-
this.__lastRibbonMessage = notification;
143-
};
144145
if (diffClosable < 0) {
145-
messageToRibbon(true);
146+
this.__messageToRibbon(true);
146147
} else {
147-
setTimeout(() => messageToRibbon(true), diffClosable);
148+
setTimeout(() => this.__messageToRibbon(true), diffClosable);
148149
}
149150
if (diffPermanent < 0) {
150-
messageToRibbon(false);
151+
this.__messageToRibbon(false);
151152
} else {
152-
setTimeout(() => messageToRibbon(false), diffPermanent);
153+
setTimeout(() => this.__messageToRibbon(false), diffPermanent);
153154
}
154155
},
155156

‎services/static-webserver/client/source/class/osparc/admin/Maintenance.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,11 @@ qx.Class.define("osparc.admin.Maintenance", {
5353
const respLabel = new qx.ui.basic.Label(this.tr("Start and End dates go in UTC time zone"));
5454
vBox.add(respLabel);
5555

56+
const displayMaintenanceBtn = new qx.ui.form.Button(this.tr("Display Maintenance message"));
57+
// eslint-disable-next-line no-underscore-dangle
58+
displayMaintenanceBtn.addListener("execute", () => osparc.MaintenanceTracker.getInstance().__messageToRibbon(true));
59+
vBox.add(displayMaintenanceBtn);
60+
5661
const invitationRespViewer = new osparc.ui.basic.JsonTreeWidget(data, "maintenance-data");
5762
const container = new qx.ui.container.Scroll();
5863
container.add(invitationRespViewer);

‎services/static-webserver/client/source/class/osparc/dashboard/Dashboard.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,6 @@ qx.Class.define("osparc.dashboard.Dashboard", {
147147
buttonId: "dataTabBtn",
148148
label: this.tr("DATA"),
149149
icon: "@FontAwesome5Solid/folder/"+tabIconSize,
150-
initVisibility: osparc.product.Utils.isProduct("osparc") ? "visible" : "excluded",
151150
buildLayout: this.__createDataBrowser
152151
});
153152
}
@@ -201,6 +200,7 @@ qx.Class.define("osparc.dashboard.Dashboard", {
201200
const groupsStore = osparc.store.Groups.getInstance();
202201
preResourcePromises.push(groupsStore.fetchGroupsAndMembers());
203202
preResourcePromises.push(osparc.store.Services.getServicesLatest(false));
203+
preResourcePromises.push(osparc.store.Templates.getInstance().fetchAllTemplates());
204204
Promise.all(preResourcePromises)
205205
.then(() => {
206206
[

‎services/static-webserver/client/source/class/osparc/dashboard/NewPlusMenu.js

Lines changed: 76 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -77,12 +77,14 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
7777
});
7878

7979
this.__categoryHeaders = [];
80+
this.__itemIdx = 0;
8081

8182
this.__addItems();
8283
},
8384

8485
events: {
8586
"createFolder": "qx.event.type.Data",
87+
"changeTab": "qx.event.type.Data",
8688
"newEmptyStudyClicked": "qx.event.type.Data",
8789
"newStudyFromTemplateClicked": "qx.event.type.Data",
8890
"newStudyFromServiceClicked": "qx.event.type.Data",
@@ -137,13 +139,15 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
137139

138140
members: {
139141
__categoryHeaders: null,
142+
__itemIdx: null,
140143

141144
_createChildControlImpl: function(id) {
142145
let control;
143146
switch (id) {
144147
case "new-folder":
148+
this.addSeparator();
145149
control = this.self().createMenuButton(
146-
osparc.dashboard.CardBase.NEW_ICON + "16",
150+
"@FontAwesome5Solid/folder/16",
147151
this.tr("New Folder"),
148152
);
149153
osparc.utils.Utils.setIdToWidget(control, "newFolderButton");
@@ -154,35 +158,69 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
154158
return control || this.base(arguments, id);
155159
},
156160

157-
__addItems: async function() {
161+
__addItems: function() {
162+
this.__addUIConfigItems();
163+
if (osparc.store.StaticInfo.getInstance().isDevFeaturesEnabled()) {
164+
this.__addOtherTabsAccess();
165+
}
158166
this.getChildControl("new-folder");
159-
this.addSeparator();
160-
await this.__addNewStudyItems();
161167
},
162168

163-
__addNewStudyItems: async function() {
169+
__addUIConfigItems: function() {
164170
const plusButtonConfig = osparc.store.Products.getInstance().getPlusButtonUiConfig();
165171
if (plusButtonConfig) {
166-
await osparc.data.Resources.get("templates")
167-
.then(templates => {
168-
if (plusButtonConfig["categories"]) {
169-
this.__addCategories(plusButtonConfig["categories"]);
170-
}
171-
plusButtonConfig["resources"].forEach(buttonConfig => {
172-
if (buttonConfig["showDisabled"]) {
173-
this.__addDisabledButton(buttonConfig);
174-
} else if (buttonConfig["resourceType"] === "study") {
175-
this.__addEmptyStudyButton(buttonConfig);
176-
} else if (buttonConfig["resourceType"] === "template") {
177-
this.__addFromTemplateButton(buttonConfig, templates);
178-
} else if (buttonConfig["resourceType"] === "service") {
179-
this.__addFromServiceButton(buttonConfig);
180-
}
181-
});
182-
});
172+
const templates = osparc.store.Templates.getInstance().getTemplates()
173+
if (plusButtonConfig["categories"]) {
174+
this.__addCategories(plusButtonConfig["categories"]);
175+
}
176+
plusButtonConfig["resources"].forEach(buttonConfig => {
177+
if (buttonConfig["showDisabled"]) {
178+
this.__addDisabledButton(buttonConfig);
179+
} else if (buttonConfig["resourceType"] === "study") {
180+
this.__addEmptyStudyButton(buttonConfig);
181+
} else if (buttonConfig["resourceType"] === "template") {
182+
this.__addFromTemplateButton(buttonConfig, templates);
183+
} else if (buttonConfig["resourceType"] === "service") {
184+
this.__addFromServiceButton(buttonConfig);
185+
}
186+
});
183187
}
184188
},
185189

190+
__addOtherTabsAccess: function() {
191+
const moreMenuButton = this.self().createMenuButton("@FontAwesome5Solid/star/16", this.tr("More"));
192+
this.addAt(moreMenuButton, this.__itemIdx);
193+
this.__itemIdx++;
194+
195+
const moreMenu = new qx.ui.menu.Menu().set({
196+
appearance: "menu-wider",
197+
});
198+
199+
const permissions = osparc.data.Permissions.getInstance();
200+
if (permissions.canDo("dashboard.templates.read")) {
201+
const templatesButton = this.self().createMenuButton("@FontAwesome5Solid/copy/16", this.tr("Tutorials..."));
202+
templatesButton.addListener("execute", () => this.fireDataEvent("changeTab", "templatesTab"), this);
203+
moreMenu.add(templatesButton);
204+
205+
const hypertoolsButton = this.self().createMenuButton("@FontAwesome5Solid/copy/16", this.tr("Hypertools..."));
206+
hypertoolsButton.addListener("execute", () => this.fireDataEvent("changeTab", "hypertoolsTab"), this);
207+
const hypertools = osparc.store.Templates.getInstance().getTemplatesByType(osparc.data.model.StudyUI.HYPERTOOL_TYPE);
208+
if (hypertools.length) {
209+
moreMenu.add(hypertoolsButton);
210+
}
211+
}
212+
213+
if (permissions.canDo("dashboard.services.read")) {
214+
const servicesButton = this.self().createMenuButton("@FontAwesome5Solid/cog/16", this.tr("Services..."));
215+
servicesButton.addListener("execute", () => this.fireDataEvent("changeTab", "servicesTab"), this);
216+
moreMenu.add(servicesButton);
217+
}
218+
219+
moreMenuButton.setVisibility(moreMenu.getChildren().length ? "visible" : "excluded");
220+
221+
moreMenuButton.setMenu(moreMenu);
222+
},
223+
186224
__getLastIdxFromCategory: function(categoryId) {
187225
for (let i=this.getChildren().length-1; i>=0; i--) {
188226
const child = this.getChildren()[i];
@@ -206,14 +244,8 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
206244
});
207245
},
208246

209-
__addIcon: function(menuButton, resourceInfo, resourceMetadata) {
210-
let source = null;
211-
if (resourceInfo && resourceInfo["icon"]) {
212-
source = resourceInfo["icon"];
213-
} else {
214-
source = osparc.utils.Utils.getIconFromResource(resourceMetadata);
215-
}
216-
247+
__addIcon: function(menuButton, icon, resourceMetadata) {
248+
const source = icon ? icon : osparc.utils.Utils.getIconFromResource(resourceMetadata);
217249
if (source) {
218250
const thumbnail = new osparc.ui.basic.Thumbnail(source, 24, 24).set({
219251
minHeight: 24,
@@ -237,7 +269,8 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
237269
menuButton["categoryId"] = category;
238270
this.addAt(menuButton, idx+1);
239271
} else {
240-
this.add(menuButton);
272+
this.addAt(menuButton, this.__itemIdx);
273+
this.__itemIdx++;
241274
}
242275
},
243276

@@ -246,21 +279,25 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
246279
osparc.utils.Utils.setIdToWidget(menuButton, buttonConfig["idToWidget"]);
247280
menuButton.setEnabled(false);
248281

249-
this.__addIcon(menuButton, buttonConfig);
282+
this.__addIcon(menuButton, buttonConfig["icon"]);
250283
this.__addFromResourceButton(menuButton, buttonConfig["category"]);
251284
},
252285

253-
__addEmptyStudyButton: function(buttonConfig) {
254-
const menuButton = this.self().createMenuButton(null, buttonConfig["title"]);
255-
osparc.utils.Utils.setIdToWidget(menuButton, buttonConfig["idToWidget"]);
286+
__addEmptyStudyButton: function(buttonConfig = {}) {
287+
if (this.__emptyPipelineButton) {
288+
return;
289+
}
290+
291+
const menuButton = this.__emptyPipelineButton = this.self().createMenuButton(null, buttonConfig["title"] || "Empty Pipeline");
292+
osparc.utils.Utils.setIdToWidget(menuButton, buttonConfig["idToWidget"] || "emptyStudyBtn");
256293

257294
menuButton.addListener("tap", () => {
258295
this.fireDataEvent("newEmptyStudyClicked", {
259-
newStudyLabel: buttonConfig["newStudyLabel"],
296+
newStudyLabel: buttonConfig["newStudyLabel"] || "Empty Pipeline",
260297
});
261298
});
262299

263-
this.__addIcon(menuButton, buttonConfig);
300+
this.__addIcon(menuButton, buttonConfig["icon"] || "osparc/icons/diagram.png");
264301
this.__addFromResourceButton(menuButton, buttonConfig["category"]);
265302
},
266303

@@ -279,7 +316,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
279316
newStudyLabel: buttonConfig["newStudyLabel"],
280317
});
281318
});
282-
this.__addIcon(menuButton, buttonConfig, templateMetadata);
319+
this.__addIcon(menuButton, buttonConfig["icon"], templateMetadata);
283320
this.__addFromResourceButton(menuButton, buttonConfig["category"]);
284321
}
285322
},
@@ -327,7 +364,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
327364
return;
328365
}
329366
menuButton.setEnabled(true);
330-
this.__addIcon(menuButton, buttonConfig, latestMetadata);
367+
this.__addIcon(menuButton, buttonConfig["icon"], latestMetadata);
331368
this.__addFromResourceButton(menuButton, buttonConfig["category"]);
332369
addListenerToButton(menuButton, latestMetadata);
333370
} else if ("myMostUsed" in buttonConfig) {

‎services/static-webserver/client/source/class/osparc/dashboard/NewStudies.js

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -36,18 +36,14 @@ qx.Class.define("osparc.dashboard.NewStudies", {
3636
});
3737
this._add(this.__flatList);
3838

39-
osparc.data.Resources.get("templates")
40-
.then(templates => {
41-
const displayTemplates = newButtonsInfo.filter(newButtonInfo => {
42-
if (newButtonInfo.showDisabled) {
43-
return true;
44-
}
45-
return templates.find(t => t.name === newButtonInfo.expectedTemplateLabel);
46-
});
47-
this.__newStudies = displayTemplates;
48-
})
49-
.catch(console.error)
50-
.finally(() => this.fireEvent("templatesLoaded"));
39+
const templates = osparc.store.Templates.getInstance().getTemplates()
40+
this.__newStudies = newButtonsInfo.filter(newButtonInfo => {
41+
if (newButtonInfo.showDisabled) {
42+
return true;
43+
}
44+
return templates.find(t => t.name === newButtonInfo.expectedTemplateLabel);
45+
});
46+
this.fireEvent("templatesLoaded");
5147
},
5248

5349
properties: {

‎services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -836,6 +836,8 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
836836
this.__createFolder(data);
837837
}, this);
838838

839+
newPlusButtonMenu.addListener("changeTab", e => this.fireDataEvent("changeTab", e.getData()));
840+
839841
newPlusButtonMenu.addListener("newEmptyStudyClicked", e => {
840842
const {
841843
newStudyLabel,
@@ -971,29 +973,27 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
971973
newPlansBtn.setEnabled(true);
972974

973975
newPlansBtn.addListener("tap", () => {
974-
osparc.data.Resources.get("templates")
975-
.then(templates => {
976-
if (templates) {
977-
const newStudies = new osparc.dashboard.NewStudies(newStudiesConfig);
978-
newStudies.addListener("templatesLoaded", () => {
979-
newStudies.setGroupBy("category");
980-
const winTitle = this.tr("New Plan");
981-
const win = osparc.ui.window.Window.popUpInWindow(newStudies, winTitle, osparc.dashboard.NewStudies.WIDTH+40, 300).set({
982-
clickAwayClose: false,
983-
resizable: true
984-
});
985-
newStudies.addListener("newStudyClicked", e => {
986-
win.close();
987-
const templateInfo = e.getData();
988-
const templateData = templates.find(t => t.name === templateInfo.expectedTemplateLabel);
989-
if (templateData) {
990-
this.__newPlanBtnClicked(templateData, templateInfo.newStudyLabel);
991-
}
992-
});
993-
osparc.utils.Utils.setIdToWidget(win, "newStudiesWindow");
994-
});
995-
}
976+
const templates = osparc.store.Templates.getInstance().getTemplates();
977+
if (templates) {
978+
const newStudies = new osparc.dashboard.NewStudies(newStudiesConfig);
979+
newStudies.addListener("templatesLoaded", () => {
980+
newStudies.setGroupBy("category");
981+
const winTitle = this.tr("New Plan");
982+
const win = osparc.ui.window.Window.popUpInWindow(newStudies, winTitle, osparc.dashboard.NewStudies.WIDTH+40, 300).set({
983+
clickAwayClose: false,
984+
resizable: true
985+
});
986+
newStudies.addListener("newStudyClicked", e => {
987+
win.close();
988+
const templateInfo = e.getData();
989+
const templateData = templates.find(t => t.name === templateInfo.expectedTemplateLabel);
990+
if (templateData) {
991+
this.__newPlanBtnClicked(templateData, templateInfo.newStudyLabel);
992+
}
993+
});
994+
osparc.utils.Utils.setIdToWidget(win, "newStudiesWindow");
996995
});
996+
}
997997
});
998998
}
999999
},

0 commit comments

Comments
 (0)