Merge pull request #17135 from rmehta/tab-refresh

fix(ui): tab refresh was not implemented

frappe/public/js/frappe/form/form.js

@@ -575,7 +575,7 @@ frappe.ui.form.Form = class FrappeForm {
 
 		this.$wrapper.trigger('render_complete');
 
-		this.cscript.is_onload && this.set_first_tab_as_active();
+		this.layout.set_first_tab_as_active(switched || this.cscript.is_onload);
 
 		if(!this.hidden) {
 			this.layout.show_empty_form_message();
@@ -592,11 +592,6 @@ frappe.ui.form.Form = class FrappeForm {
 		this.setup_image_autocompletions_in_markdown();
 	}
 
-	set_first_tab_as_active() {
-		this.layout.tabs[0]
-			&& this.layout.tabs[0].set_active();
-	}
-
 	focus_on_first_input() {
 		let first = this.form_wrapper.find('.form-layout :input:visible:first');
 		if (!in_list(["Date", "Datetime"], first.attr("data-fieldtype"))) {

frappe/public/js/frappe/form/layout.js

@@ -294,7 +294,7 @@ frappe.ui.form.Layout = class Layout {
 		this.refresh_sections();
 
 		// refresh tabs
-		this.tabbed_layout && this.refresh_tabs();
+		this.is_tabbed_layout() && this.refresh_tabs();
 
 		if (this.frm) {
 			// collapse sections
@@ -328,21 +328,9 @@ frappe.ui.form.Layout = class Layout {
 	}
 
 	refresh_tabs() {
-		this.tabs.forEach(tab => {
-			if (!tab.wrapper.hasClass('hide') || !tab.parent.hasClass('hide')) {
-				tab.parent.removeClass('show hide');
-				tab.wrapper.removeClass('show hide');
-				if (
-					tab.wrapper.find(
-						".form-section:not(.hide-control, .empty-section), .form-dashboard-section:not(.hide-control, .empty-section)"
-					).length
-				) {
-					tab.toggle(true);
-				} else {
-					tab.toggle(false);
-				}
-			}
-		});
+		for (let tab of this.tabs) {
+			tab.refresh();
+		}
 
 		const visible_tabs = this.tabs.filter(tab => !tab.hidden);
 		if (visible_tabs && visible_tabs.length == 1) {
@@ -350,6 +338,13 @@ frappe.ui.form.Layout = class Layout {
 		}
 	}
 
+	set_first_tab_as_active(switched) {
+		if (this.tabs.length && (switched || !this.frm.active_tab)) {
+			// set first tab as active when opening for first time, or new doc
+			this.tabs[0].set_active();
+		}
+	}
+
 	refresh_fields(fields) {
 		let fieldnames = fields.map((field) => {
 			if (field.fieldname) return field.fieldname;

frappe/public/js/frappe/form/tab.js

@@ -36,10 +36,27 @@ export default class Tab {
 
 		// hide if explicitly hidden
 		let hide = this.df.hidden || this.df.hidden_due_to_dependency;
+
+		// hide if dashboard and not saved
+		if (!hide && this.df.show_dashboard && this.frm.is_new() && !this.fields_list.length) {
+			hide = true;
+		}
+
+		// hide if no read permission
 		if (!hide && this.frm && !this.frm.get_perm(this.df.permlevel || 0, "read")) {
 			hide = true;
 		}
 
+		if (!hide && !this.df.show_dashboard) {
+			// show only if there is at least one visibe section or control
+			hide = true;
+			if (this.wrapper.find(
+				".form-section:not(.hide-control, .empty-section), .form-dashboard-section:not(.hide-control, .empty-section)"
+			).length) {
+				hide = false;
+			}
+		}
+
 		this.toggle(!hide);
 	}
 
@@ -62,6 +79,7 @@ export default class Tab {
 	set_active() {
 		this.parent.find('.nav-link').tab('show');
 		this.wrapper.addClass('show');
+		this.frm.active_tab = this;
 	}
 
 	is_active() {

frappe/public/js/frappe/widgets/onboarding_widget.js

@@ -99,12 +99,7 @@ export default class OnboardingWidget extends Widget {
 		const toggle_content = () => {
 			this.step_body.empty();
 			this.step_footer.empty();
-
-			this.step_body.html(
-				step.description ?
-					frappe.markdown(step.description)
-					: `<h1>${step.title}</h1>`
-			);
+			set_description();
 
 			if (step.intro_video_url) {
 				$(`<button class="btn btn-primary btn-sm">${__('Watch Tutorial')}</button>`)
@@ -117,6 +112,21 @@ export default class OnboardingWidget extends Widget {
 			}
 		};
 
+		const set_description = () => {
+			let content = step.description ?
+				frappe.markdown(step.description) : `<h1>${step.title}</h1>`;
+
+			if (step.action === 'Create Entry') {
+				// add a secondary action to view list
+				content += `<p>
+					<a href='/app/${frappe.router.slug(step.reference_document)}'>
+						${ __('Show {0} List', [step.reference_document])}</a>
+				</p>`;
+			}
+
+			this.step_body.html(content);
+		};
+
 		const toggle_video = () => {
 			this.step_body.empty();
 			this.step_footer.empty();