Anyone having issues with custom JS recently?

[Brandon_Brown]

We use custom JS to hide the +App button from teachers in a course. We also use similar code to prevent adding users to courses in the UI. Up until recently everything had been working properly. We had several people reach out and we confirmed our code is no longer working as expected. It seems that Instructure may have changed the class naming convention and now are using a lookup table with hashed values? Previously the element looked similar to this: 

class="AddExternalToolButton"

Now, the same element looks like this: 

class="fOyUs_bGBk fOyUs_fKyb fOyUs_cuDs fOyUs_cBHs fOyUs_eWbJ fOyUs_fmDy fOyUs_eeJl fOyUs_cBtr fOyUs_fuTR fOyUs_cnfU fQfxa_bGBk"

I'm not seeing anything in the release notes, change log, api documentation, etc. Just wondering if anyone else has come across unexpected behavior with their JS code? 

[dtod]

This is generated by React.js, which they announced they were moving to a year or so ago, and it's a pain to work with. The other thing you'll run into is single page application kinds of functionality where the page is built from memory on the fly, so document.ready doesn't work anymore. You have to use a mutation observer.

You have to use other kinds of selectors and jquery is still around (for now, I suppose).

[JamesSekcienski]

This unfortunately is one of the things we have to deal with when it comes to custom code.  I've seen in past InstructureCon videos that the developers warn that custom code can break with updates and it is own responsibility to test our customizations as new releases come out.  They also suggest testing on Beta server before new releases so you have a chance to catch issues before it gets to production.

As a side note, both of the customizations you mentioned sound like things that would be better managed through Permissions. The Teacher role can be set so that they don't have the right to Manage LTIs (add, edit, delete).  This would eliminate the need to hide the Add button for that.  You can also make it so they don't have the right to Manage Users.  This would take away their ability to add users in the UI.  It is always better to use Permissions to restrict access to features when possible because then it also carries over to API access.  If you only hide the items in the UI, but they still have the Permission, then they could potentially use the API to circumvent what you are trying to prevent.  Also, depending on how you are hiding it, there may be easy ways for users to restore what you are hiding.

[dtod]

"This would eliminate the need to hide the Add button for that"

Unfortunately this is not true. Permissions do not hide the Add button. Also (and I've complained about this) a course import can create external tools even if the importer does not have permissions to add them.

[JamesSekcienski]

@dtod 

Are you sure the permissions were sufficient for you to hide the Add button in the Course Settings for Apps?  We have our Teacher role set to not have permission to Manage LTIs and the Add button doesn't show for them.  We don't have any custom JavaScript/CSS to hide it either.  The only apps they are able to add are those that are on our approved apps list for the Edu App Center.

As for the import issue, that is concerning and seems like something that is a bug rather than something that should be a feature request.  I have voted in support of your idea though and hopefully they will fix that considering it is allowing users to bypass Permissions and add potentially unapproved apps.

[dtod]

Yes, I'm sure. I just retested. At least from the App Center. This is also an issue for account admins who do not have the manage LTI permission. See image for a teacher without that permission. 

[JamesSekcienski]

@dtod 

Ok, I see what you are referring to now.  Have you set up an organization on the Edu App Center yet?  There you can make an allow list for the apps.  Then, you can use the token from your organization account in Edu App Center to restrict the apps that users can install from that in Canvas.  Then, Canvas will only show apps there that you have set as allowed for users to install on their own.

• How do I create and manage organizations in the Edu App Center? 
• How do I manage an allow list in the Edu App Center? 
• How do I manage an Edu App Center allow list in Canvas? 

The Add button that I thought you were referring to is the one that appears if you have permission when you click View App Configurations.