Skip to content

Internal: Variables - permissions (client-side) [ED-19876]#31806

Merged
mike-elementor merged 15 commits intoelementor:mainfrom
mike-elementor:internal/ED-19876-permissions-fe
Jul 14, 2025
Merged

Internal: Variables - permissions (client-side) [ED-19876]#31806
mike-elementor merged 15 commits intoelementor:mainfrom
mike-elementor:internal/ED-19876-permissions-fe

Conversation

@mike-elementor
Copy link
Copy Markdown
Contributor

@mike-elementor mike-elementor commented Jul 10, 2025

PR Checklist

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • Other... Please describe:

Summary

This PR can be summarized in the following changelog entry:

Description

An explanation of what is done in this PR

Test instructions

This PR can be tested by following these steps:

Quality assurance

  • I have tested this code to the best of my abilities
  • I have added unittests to verify the code works as intended
  • Docs have been added / updated (for bug fixes / features)

Fixes #

✨ PR Description

Purpose: Add permissions-based access control to Variables feature with user capabilities validation on the client-side.
Main changes:

  • Implemented usePermissions hook to validate user capabilities before showing variable management UI
  • Added conditional rendering for edit/delete/add actions based on user permissions
  • Updated UI components with different messaging for users without full permissions
  • Added @elementor/editor-current-user dependency for capability checks

Generated by LinearB AI and added by gitStream.
AI-generated content may contain inaccuracies. Please verify before using. We'd love your feedback! 🚀

export const usePermissions = () => {
const { canUser: userCan } = useCurrentUserCapabilities();

const [ permissions ] = useState( () => {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mike-elementor do you need useState here

import { useCurrentUserCapabilities } from '@elementor/editor-current-user';

export const usePermissions = () => {
const { canUser: userCan } = useCurrentUserCapabilities();
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's super confusing. Can we align with what we're getting from useCurrentUserCapabilities()?

);
};

function CreateYourVariable( { title, onAdd }: Omit< Props, 'icon' > ) {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe?

Suggested change
function CreateYourVariable( { title, onAdd }: Omit< Props, 'icon' > ) {
function VariablesEmptyState( { title, onAdd }: Omit< Props, 'icon' > ) {

>
{ icon }

{ userPermissions.canAdd() ? (
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might be able to create a common structure for these components:

canAdd = userPermissions.canAdd();
<VariablesEmptyState title={ canAdd ? title : __( 'There are no variables', 'elementor' ) } captions={ canAdd ? __( 'Variables are saved attributes that you can apply anywhere on your site.', 'elementor' ) :  __( 'With your current role, you can only connect and detach variables.', 'elementor' ) } onAdd={ canAdd ? onAdd : undefined } />

function VariablesEmptyState( { title, captions, onAdd }: Omit< Props, 'icon' > ) {

This will convert it to a single common component (that can also be extracted to a different component)
WDYT?

}
const handleRestore = userPermissions.canRestore()
? () => {
if ( ! variable.key ) {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This check can move to line 44 as well (or vice-versa, move the permission check here 😄 )

};

const handlers: Handlers = {
onAdd: undefined,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's continue with the inline assigning as we did before (onAdd: userPermissions.canAdd() ? () => { props.setCurrentView( VIEW_ADD ) } : undefined)


const handlers: Handlers = {
onAdd: undefined,
onEdit: undefined,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above (inline assigning)

@mike-elementor mike-elementor marked this pull request as ready for review July 14, 2025 14:24
gitstream-cm[bot]

This comment was marked as resolved.

gitstream-cm[bot]

This comment was marked as resolved.

gitstream-cm[bot]

This comment was marked as resolved.

@mike-elementor mike-elementor merged commit a6a2685 into elementor:main Jul 14, 2025
30 checks passed
@mike-elementor mike-elementor deleted the internal/ED-19876-permissions-fe branch July 14, 2025 14:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants