Hide Help Menu item based on custom role or sub-account

[MikeBrinkman]

I created a new sub-account for a new program we're staring. I have also created a duplicate of the student role for these students. There are a couple of menu items on the Help menu that I would like hidden from the students in just this sub-account. How would I go about hiding the menu items from these students? The duplicate role does not show up as an option when I am editing the permissions, and when I go into the sub-account, there isn't an option to edit the help menu.

[Chris_Hofer]

Hi @MikeBrinkman ...

You are correct that there aren't any options within a sub-account to edit the items within the "Help" button.  In fact, you can't even make a custom global menu for sub-accounts ... from what I've been able to gather from looking at my own account.  That's why they call it a "global navigation" menu...because the buttons in that menu apply to everyone...not just a select set of people.

Hope this helps...even though it's not the answer you might be looking for.

[MikeBrinkman]

Thanks, Chris! Knowing that helps.

I also tried to write some Javascript code to see if there was a way to hide it from a user based on the role. Even though I gave the user the role "Test Student", their role in ENV.current_user_roles still shows as student, so that's not going to work either.

[dtod · Accepted solution]

Would this in the sub-account theme do the job? Part of the problem is that the Help menu is built on the fly using React so you have to monitor it.

function hideHelpItem(){
	if ( ENV.current_user_is_student ){
		console.log('adding dom monitor');
		$("body").on('DOMSubtreeModified', "#help_tray", function() {
			console.log('hiding help item');
			$('#help_tray a:contains("Thing you want to hide")').hide();
		});	
	}
}

$(document).ready(function () {
	hideHelpItem();
});

[dtod]

You might have to do some interesting things with the jquery selector. I think my code as is will only hide the link, not the list item. For that you'd need something like:

$('#help_tray ul li:has(a:contains("Thing you want to hide"))');

Note that has: is supported in jquery, but not as a pure CSS selector -- I toyed with a straight CSS solution, but without has: it's not really possible. The random nature of React element IDs makes life quite challenging.

[MikeBrinkman]

Thanks, for the suggestion! Combining your two posts, I was able to use

 $('#help_tray ul li:contains("Get Help Email")').hide();

which worked perfectly!

If InstructureCon ever goes back to human space, I owe you a beer. 😄

[dtod]

Cool, yes. I realized that myself too.

[MikeBrinkman]

As an FYI, this actually caused Firefox to crash:

$('#help_tray ul li:has(a:contains("Thing you want to hide"))');

[dtod]

For some bizarre reason, I had a request today from one of our colleges for just this functionality, so I had to fully work through the nuts and bolts of it. Much more painful than it needed to be probably.

The thing is that React builds the menu on the fly, so you have to detect those changes. I have a generic function that does this and it calls a slew of functions that do interesting things. Some of those used to live in the document.ready but React breaks that.

A change I made was in the selector. I didn't need to use "has:"

function hideHelpItems(){
	// this is a nested array in case I want to do more later
	// each item is a help menu item that I only want to appear in certain sub-accounts
	// but has been added in the global help menu
	var helpItems = [
		['LFCC','Submit an ITO Help Request']
		];

	helpItems.forEach(hideItem);
	
	function hideItem(item){
		console.log(item);
		college = item[0];
		text = item[1];
		console.log(ENV.primaryAccount);
		var target = $('#help_tray ul li:contains("' + text + '")');
		// I set ENV.primaryAccount in the sub-account javascript
		if (ENV.primaryAccount !== college && !target.is(":hidden")){
			console.log('hiding ' + text);
			target.hide();	
		};
	}
}

function myTestCallback(mutations) {
	// you can have a list of functions here that are called when the page is built by React
	hideHelpItems();
}

// this is really a generic mutation function now
// and various callbacks can be done in myTestCallback
function docMonitorTest(){
	// create an instance of `MutationObserver` named `observer`, 
	// passing it the callback function

	var observer = new MutationObserver(myTestCallback);

	// because react has the whole dom in memory, document is the only reliable thing to monitor
	observer.observe(document, {subtree: true, childList: true});
}

$(document).ready(function () {
	docMonitorTest();
});