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.

Image Added

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

Image Added

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

Image Added

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.

Image Added

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.