From d0e89da94c1709dfcd4bb884af499a331e945a6e Mon Sep 17 00:00:00 2001
From: soupette <cyril.lpz@gmail.com>
Date: Tue, 2 Feb 2021 15:39:28 +0100
Subject: [PATCH] Auto open the first section of conditions in RBAC

Signed-off-by: soupette <cyril.lpz@gmail.com>
---
 .../Roles/ConditionsSelect/MenuList/index.js  | 38 +++++++++++++------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/packages/strapi-admin/ee/admin/components/Roles/ConditionsSelect/MenuList/index.js b/packages/strapi-admin/ee/admin/components/Roles/ConditionsSelect/MenuList/index.js
index 86f4690db3..74cbe311c7 100644
--- a/packages/strapi-admin/ee/admin/components/Roles/ConditionsSelect/MenuList/index.js
+++ b/packages/strapi-admin/ee/admin/components/Roles/ConditionsSelect/MenuList/index.js
@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useState, useCallback } from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { components } from 'react-select';
 import { groupBy, intersectionWith } from 'lodash';
@@ -13,12 +13,26 @@ import UpperFirst from '../../../../../../admin/src/components/Roles/ConditionsS
 import { usePermissionsContext } from '../../../../../../admin/src/hooks';
 
 /* eslint-disable jsx-a11y/no-static-element-interactions */
+const createCollapsesObject = arrayOfCategories =>
+  arrayOfCategories.reduce((acc, current, index) => {
+    acc[current[0]] = index === 0;
+
+    return acc;
+  }, {});
 
 const MenuList = ({ selectProps, ...rest }) => {
   const Component = components.MenuList;
   const { isSuperAdmin } = usePermissionsContext();
-  const [collapses, setCollapses] = useState({});
-  const optionsGroupByCategory = groupBy(selectProps.options, 'category');
+
+  const arrayOfOptionsGroupedByCategory = useMemo(() => {
+    return Object.entries(groupBy(selectProps.options, 'category'));
+  }, [selectProps.options]);
+  const initCollapses = useMemo(() => createCollapsesObject(arrayOfOptionsGroupedByCategory), [
+    arrayOfOptionsGroupedByCategory,
+  ]);
+
+  const [collapses, setCollapses] = useState(initCollapses);
+
   const toggleCollapse = collapseName => {
     setCollapses(prevState => ({ ...prevState, [collapseName]: !collapses[collapseName] }));
   };
@@ -69,14 +83,16 @@ const MenuList = ({ selectProps, ...rest }) => {
   return (
     <Component {...rest}>
       <Ul>
-        {Object.entries(optionsGroupByCategory).map((category, index) => {
+        {arrayOfOptionsGroupedByCategory.map((category, index) => {
+          const [categoryName, conditions] = category;
+
           return (
             <li key={category[0]}>
               <div>
                 <Flex justifyContent="space-between">
                   <Label
                     htmlFor="overrideReactSelectBehavior"
-                    onClick={() => handleCategoryChange(category[1])}
+                    onClick={() => handleCategoryChange(conditions)}
                   >
                     <Flex>
                       <Checkbox
@@ -86,12 +102,12 @@ const MenuList = ({ selectProps, ...rest }) => {
                         value={hasAllCategoryAction(category)}
                         someChecked={hasSomeCategoryAction(category)}
                       />
-                      <UpperFirst content={category[0]} />
+                      <UpperFirst content={categoryName} />
                     </Flex>
                   </Label>
                   <div
                     style={{ flex: 1, textAlign: 'end', cursor: 'pointer' }}
-                    onClick={() => toggleCollapse(category[0])}
+                    onClick={() => toggleCollapse(categoryName)}
                   >
                     <FontAwesomeIcon
                       style={{
@@ -99,13 +115,13 @@ const MenuList = ({ selectProps, ...rest }) => {
                         fontSize: '11px',
                         color: '#919bae',
                       }}
-                      icon={collapses[category[0]] ? 'chevron-up' : 'chevron-down'}
+                      icon={collapses[categoryName] ? 'chevron-up' : 'chevron-down'}
                     />
                   </div>
                 </Flex>
               </div>
-              <SubUl tag="ul" isOpen={collapses[category[0]]}>
-                {category[1].map(action => {
+              <SubUl tag="ul" isOpen={collapses[categoryName]}>
+                {conditions.map(action => {
                   return (
                     <li key={action.id}>
                       <Flex>
@@ -130,7 +146,7 @@ const MenuList = ({ selectProps, ...rest }) => {
                   );
                 })}
               </SubUl>
-              {index + 1 < Object.entries(optionsGroupByCategory).length && (
+              {index + 1 < arrayOfOptionsGroupedByCategory.length && (
                 <div style={{ paddingTop: '17px' }} />
               )}
             </li>