feat: integrate PermissionProvider and permission hooks

[rishiraj38]

Summary

This PR implements a generic, CASL-agnostic PermissionProvider in Sistent and integrates it into Meshery UI. By moving permission checks into Sistent's base components and checking them declaratively via props, we decouple Sistent from direct CASL dependency and eliminate hardcoded sessionStorage lookups from within Sistent.

---

Changes Made

Sistent Library (/sistent)

1. PermissionProvider (src/custom/PermissionProvider.tsx)
   • Added a new CASL-agnostic context/hook wrapper. It accepts a generic userHasPermission: (key: Key) => boolean callback and optional userContext information.
2. PermissionShield (src/custom/permissions.tsx)
   • Removed direct dependency on sessionStorage (e.g., sessionStorage.getItem('currentOrg')).
   • Now reads userName, orgName, and roleNames directly from PermissionProvider's userContext.
3. Base Components (Button, IconButton, MenuItem, ListItem, ListItemButton)
   • Updated components to accept permissionKey (from @meshery/schemas) and permissionAction: 'showShield' | 'disable' | 'hide'.
   • The components automatically evaluate permissions via the provider hook and apply the appropriate action if the user lacks the permission (e.g., automatically rendering the PermissionShield tooltip overlay).

Meshery UI (/meshery/ui)

1. _app.tsx
   • Mounted the PermissionProvider at the root, passing down a CASL adapter (ability.can) and feeding userContext from the Redux store/queries.
2. Navigator.tsx & navigatorComponents.tsx
   • Converted Navigator item configurations to pass the canonical Keys directly.
   • Removed custom CAN() imports and calls inside Navigator.tsx in favor of declarative permissionKey and permissionAction props on ListItemComponent.

---

Benefits

• Decoupled Architecture: Sistent and its base components are now completely unaware of CASL. Transitioning away from CASL in the future will require changing only one function inside _app.tsx.
• Cleaner Code: Eliminates redundant disabled={!CAN(...)} logic and wrapper elements on the caller's side.
• No Storage Leakage: Removed direct dependencies on sessionStorage inside the UI library.

[gemini-code-assist]

Code Review

This pull request integrates several base components (such as Button, IconButton, ListItem, ListItemButton, and MenuItem) with a new PermissionProvider to support customizable permission actions ('showShield', 'disable', or 'hide'). It also refactors PermissionShield to retrieve user, organization, and role context from the provider instead of sessionStorage. The review feedback suggests replacing unsafe type assertions (null as unknown as JSX.Element) with empty fragments (<></>) when hiding components, and conditionally rendering the "User" row in the PermissionShield tooltip to prevent empty rows when the username is undefined.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

Using null as unknown as JSX.Element is an unsafe type assertion. Since the component is typed to return JSX.Element, you can return an empty fragment <></> instead. This is fully type-safe, avoids any casting, and renders nothing in the DOM just like null.

Suggested change

	case 'hide':
	return null as unknown as JSX.Element;
	case 'hide':
	return <></>;

[gemini-code-assist]

Using null as unknown as JSX.Element is an unsafe type assertion. Since the component is typed to return JSX.Element, you can return an empty fragment <></> instead. This is fully type-safe, avoids any casting, and renders nothing in the DOM just like null.

Suggested change

	case 'hide':
	return null as unknown as JSX.Element;
	case 'hide':
	return <></>;

[gemini-code-assist]

If userContext.userName is undefined (for example, if only orgName is provided), this will render an empty "User" row in the tooltip. It is better to conditionally render the "User" row only when userContext.userName is present.

            {userContext.userName && (
              <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 1 }}>
                <Typography sx={{ fontSize: '0.68rem', color: '#9E9E9E', fontWeight: 500 }}>
                  User
                </Typography>
                <Typography
                  sx={{
                    fontSize: '0.72rem',
                    color: '#FFFFFF',
                    fontWeight: 600,
                    textAlign: 'right'
                  }}
                >
                  {userContext.userName}
                </Typography>
              </Box>
            )}

[banana-three-join]

  if (!permissionKey) {
    return <MuiListItem {...rest} ref={ref} />;
  }

  // User HAS permission → render normally
  if (hasPermission) {
    return <MuiListItem {...rest} ref={ref} />;
  }

These conditional evaluations are contradictory and should be avoided. A user without a permission key shouldn't have access to the same layouts and components as someone with a permission key. Instead, the components should be explicitly rendered in either a hidden, disabled or visible state.

On that note, I believe there isn't much that much of a difference between the disabled and show guard state so the disabled state should be removed.