SharePoint Security Grid

Security Grid WebPart -- users across the top, lists , libraries, folders and files on the left. (this is from my personal site- few users)
User can select the Permission to test
User can select the users to display (defaults to all)
User can select the lists to display (defaults to all)
User can display email or logon name
The Configuration panel can be used to set default settings and present user with a predefined view!
Second tab of property pane .... used to configure lists

Inspiration

As Sharepoint sites grow, and members share lists, folders and items withe their colleguses, it's exceedingly difficult for a site owner to determine who has access to what within a site. A site owner needs to manually navigate through all lists,libraries files and folders, then click the share option from the menu, then....... This has been known to take HOURS!

What it does

The react security grid webpart lets the site owner easily who has access to what content on a site. It displays a grid showing the sites users on the x-axis and lists, libraries, folders, items on the y-axis. The grid displays an icon indicating if the user has access to the object. The user can drill down into libraries and folders by clicking on the library or folder name on the x-axis, just like in windows explorer. The user can change the permission being tested by clicking the Permission in the command bar and selecting a new Permission: This can save a site owner hours and hours of time. The webpart can be configured via the property pane to let user select the security level tested, the users and lists displayed, etc. Or it can be configured by an administrator to test a specific security level or show particular users or lists.

How I built it

The security grid webpart is built using typescript, react, spfx, pnp-js-core and office ui fabric. It retrieves all the lists, users security grumps from sharepoint using pnp-js-core and then renders a grid, showing who has access to what using office ui fabric.

Challenges I ran into

The relationship between the sharepoint securableobject, role assignment and user object is quite complex, even more so when accccessing it using rest. The pnp-js-core library made this much simpler. On the UI side, there was little documentation on how to rotate column headers to save space (see https://yetanothersharepointblog.wordpress.com/2017/11/17/displaying-rotated-column-headers-on-an-office-ui-fabric-details-list-within-an-spfx-webpart/)or to indent columns so that the files appear to be under the folders in office ui fabric. Thankfully whenever i posted an issue on the office-uifabric-react github site i received a quick reply.