WEBAPP PORTION

1. Navigate to components/admin_console/system_roles/system_role/system_role_permissions.tsx

2. Notice the variable sectionsList which holds all the sections. The sections and subsections are what map out to Privileges in admin_console/user_management/system_roles/{role_id}. For example, here is the user management section and subsection mapping to what you see in system console.

3. Navigate your assigned section (in this tutorial, I’ll be dealing with the experimental section) and add the corresponding subsections. Experimental has 3 sub sections so I will be adding 3 objects in the subsections array for those subsections. The subsection naming convention follows section_name_subsection_name.

4. Now you would want to scroll to the bottom of the file and add the translations for these subsections. Located your section and add the corresponding translations for subsections. The naming convention is admin.permissions.sysconsole_section_{section_name}_{subsection_name}. These will help us generate the correct translations when we run make i18n-extract in our terminal.

5. Navigate to your REDUX repo and go to the file src/constants/permissions_sysconsole.ts . Add your section keys to the RESOURCE_KEYS variable in the format

SECTION: {
  SUB_SECTION_1: 'section.subsection1',
  SUB_SECTION_2: 'section.subsection2',
  ...
}

It should look something like this

Now locate your section in the ResourceToSysConsolePermissionsTable and break it down like the following. Note that each one of these sub-sections will have its own READ and WRITE permissions that we will later be implementing. Once you’ve broken it down as shown in the left photo, you can delete the section to permission mapping as seen on the left.

6. Now you probably notice RED lines underneath the new permissions and that’s because we haven’t written those permissions yet. That is what we will do next. While we are still in the REDUX navigate to src/constants/permissions.ts . Scroll down and locate your sections permissions. In my case, the permissions I was looking for are here

You can go ahead and delete these and implement the subsection permissions we referenced earlier. This is what it should look like after the breakdown. Take notice that the red lines seen earlier in permissions_sysconsole.ts have gone away.

7. We want to navigate back to our WEBAPP repo and go to components/admin_console/admin_definition.jsx . This file is what defines what we see in the system console. Find the section you are dealing with in the AdminDefinition variable.

8. We will be adding isHidden and isDisabled for each section, subsection, and contents of subsection. So I will start with the over-arching section (experimental section) and only add a isHidden function to it. This section should be hidden if we don’t have any READ permission to any of it’s subsection.

9. Now for every subsection, that particular subsection should be HIDDEN if we don’t have read permission to it. Otherwise, It’s contents should be disabled if we don’t have write permission to it. Notice how the Features sub-section is hidden if we don’t have READ permission and the contents within this subsection are disabled only if we don’t have WRITE permissions to that sub section.

Do this for all of the sub-sections for the section you are dealing with.