Refactor RenderGroups

packages/volto/news/4993.feature

@@ -0,0 +1 @@
+Refactor ControlPanels/Groups RenderGroups from class components to functional component. @Tishasoumya-02

packages/volto/src/components/manage/Controlpanels/Groups/RenderGroups.jsx

@@ -1,134 +1,86 @@
-/**
- * Users controlpanel groups.
- * @module components/manage/Controlpanels/UsersControlpanelGroups
- */
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import { Dropdown, Table, Checkbox } from 'semantic-ui-react';
 import trashSVG from '@plone/volto/icons/delete.svg';
 import ploneSVG from '@plone/volto/icons/plone.svg';
 import { Icon } from '@plone/volto/components';
 import { canAssignRole } from '@plone/volto/helpers';
 
-/**
- * UsersControlpanelGroups class.
- * @class UsersControlpanelGroups
- * @extends Component
- */
-class RenderGroups extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    //single group
-    group: PropTypes.shape({
-      title: PropTypes.string,
-      description: PropTypes.string,
-      email: PropTypes.string,
-      groupname: PropTypes.string,
-      roles: PropTypes.arrayOf(PropTypes.string),
-    }).isRequired,
-
-    roles: PropTypes.arrayOf(
-      PropTypes.shape({
-        id: PropTypes.string,
-      }),
-    ).isRequired,
-    inheritedRole: PropTypes.array,
-    onDelete: PropTypes.func.isRequired,
-    isUserManager: PropTypes.bool.isRequired,
+const RenderGroups = (props) => {
+  const onChange = (event, { value }) => {
+    const [group, role] = value.split('.');
+    props.updateGroups(group, role);
   };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Sharing
-   */
-  constructor(props) {
-    super(props);
-    this.onChange = this.onChange.bind(this);
-  }
-
-  /**
-   * @param {*} event
-   * @param {*} { value }
-   * @memberof UsersControlpanelUser
-   */
-  onChange(event, { value }) {
-    const [group, role] = value.split('&role=');
-    this.props.updateGroups(group, role);
-  }
-
-  /**
-   *@param {*}
-   *@returns {Boolean}
-   *@memberof RenderGroups
-   */
-  isAuthGroup = (roleId) => {
-    return this.props.inheritedRole.includes(roleId);
+  const isAuthGroup = (roleId) => {
+    return props.inheritedRole.includes(roleId);
   };
-
-  canDeleteGroup() {
-    if (this.props.isUserManager) return true;
-    return !this.props.group.roles.includes('Manager');
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Table.Row key={this.props.group.title}>
-        <Table.Cell>{this.props.group.groupname}</Table.Cell>
-        {this.props.roles.map((role) => (
-          <Table.Cell key={role.id}>
-            {this.props.inheritedRole &&
-            this.props.inheritedRole.includes(role.id) &&
-            this.props.group.roles.includes('Authenticated') ? (
-              <Icon
-                name={ploneSVG}
-                size="20px"
-                color="#007EB1"
-                title={'plone-svg'}
-              />
-            ) : (
-              <Checkbox
-                checked={
-                  this.props.group.id === 'AuthenticatedUsers'
-                    ? this.isAuthGroup(role.id)
-                    : this.props.group.roles.includes(role.id)
-                }
-                onChange={this.onChange}
-                value={`${this.props.group.id}&role=${role.id}`}
-                disabled={!canAssignRole(this.props.isUserManager, role)}
-              />
-            )}
-          </Table.Cell>
-        ))}
-        <Table.Cell textAlign="right">
-          {this.canDeleteGroup() && (
-            <Dropdown icon="ellipsis horizontal">
-              <Dropdown.Menu className="left">
-                <Dropdown.Item
-                  onClick={this.props.onDelete}
-                  value={this.props.group['@id']}
-                >
-                  <Icon name={trashSVG} size="15px" />
-                  <FormattedMessage id="Delete" defaultMessage="Delete" />
-                </Dropdown.Item>
-              </Dropdown.Menu>
-            </Dropdown>
+  const canDeleteGroup = () => {
+    if (props.isUserManager) return true;
+    return !props.group.roles.includes('Manager');
+  };
+  return (
+    <Table.Row key={props.group.title}>
+      <Table.Cell>{props.group.groupname}</Table.Cell>
+      {props.roles.map((role) => (
+        <Table.Cell key={role.id}>
+          {props.inheritedRole &&
+          props.inheritedRole.includes(role.id) &&
+          props.group.roles.includes('Authenticated') ? (
+            <Icon
+              name={ploneSVG}
+              size="20px"
+              color="#007EB1"
+              title={'plone-svg'}
+            />
+          ) : (
+            <Checkbox
+              checked={
+                props.group.id === 'AuthenticatedUsers'
+                  ? isAuthGroup(role.id)
+                  : props.group.roles.includes(role.id)
+              }
+              onChange={onChange}
+              value={`${props.group.id}.${role.id}`}
+              disabled={!canAssignRole(props.isUserManager, role)}
+            />
           )}
         </Table.Cell>
-      </Table.Row>
-    );
-  }
-}
+      ))}
+      <Table.Cell textAlign="right">
+        {canDeleteGroup() && (
+          <Dropdown icon="ellipsis horizontal">
+            <Dropdown.Menu className="left">
+              <Dropdown.Item
+                onClick={props.onDelete}
+                value={props.group['@id']}
+              >
+                <Icon name={trashSVG} size="15px" />
+                <FormattedMessage id="Delete" defaultMessage="Delete" />
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+        )}
+      </Table.Cell>
+    </Table.Row>
+  );
+};
+
+RenderGroups.propTypes = {
+  //single group
+  group: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    email: PropTypes.string,
+    groupname: PropTypes.string,
+    roles: PropTypes.arrayOf(PropTypes.string),
+  }).isRequired,
 
-export default injectIntl(RenderGroups);
+  roles: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+    }),
+  ).isRequired,
+  inheritedRole: PropTypes.array,
+  onDelete: PropTypes.func.isRequired,
+};
+export default RenderGroups;

packages/volto/src/components/manage/Controlpanels/Groups/__snapshots__/RenderGroups.test.jsx.snap

@@ -26,7 +26,7 @@ exports[`UsersControlpanelGroups renders a UsersControlpanelGroups component 1`]
         readOnly={true}
         tabIndex={0}
         type="checkbox"
-        value="Administrators&role=Member"
+        value="Administrators.Member"
       />
       <label />
     </div>
@@ -48,7 +48,7 @@ exports[`UsersControlpanelGroups renders a UsersControlpanelGroups component 1`]
         readOnly={true}
         tabIndex={0}
         type="checkbox"
-        value="Administrators&role=Reader"
+        value="Administrators.Reader"
       />
       <label />
     </div>
@@ -70,7 +70,7 @@ exports[`UsersControlpanelGroups renders a UsersControlpanelGroups component 1`]
         readOnly={true}
         tabIndex={0}
         type="checkbox"
-        value="Administrators&role=Manager"
+        value="Administrators.Manager"
       />
       <label />
     </div>
@@ -155,7 +155,7 @@ exports[`UsersControlpanelGroups renders a UsersControlpanelGroups component wit
         readOnly={true}
         tabIndex={0}
         type="checkbox"
-        value="Administrators&role=Member"
+        value="Administrators.Member"
       />
       <label />
     </div>
@@ -177,7 +177,7 @@ exports[`UsersControlpanelGroups renders a UsersControlpanelGroups component wit
         readOnly={true}
         tabIndex={0}
         type="checkbox"
-        value="Administrators&role=Reader"
+        value="Administrators.Reader"
       />
       <label />
     </div>
@@ -199,7 +199,7 @@ exports[`UsersControlpanelGroups renders a UsersControlpanelGroups component wit
         readOnly={true}
         tabIndex={-1}
         type="checkbox"
-        value="Administrators&role=Manager"
+        value="Administrators.Manager"
       />
       <label />
     </div>