feat: added filter to other resources (#2980)

* feat: added filter to other resources

* chore: clean up

* fix: assigned string type to resourceName

* chore: clean up

* chore: clean up

Author: blegesse-w

src/authorizations/components/redesigned/AllAccordionBody.tsx

@@ -24,63 +24,85 @@ interface OwnProps {
 export const AllAccordionBody: FC<OwnProps> = props => {
   const {resourceName, disabled, permissions} = props
 
-  const handleReadToggle = () => {
-    const {onToggleAll, resourceName} = props
+  const handleReadToggle = resourceName => {
+    const {onToggleAll} = props
     onToggleAll(resourceName, 'read')
   }
-  const handleWriteToggle = () => {
-    const {onToggleAll, resourceName} = props
+  const handleWriteToggle = resourceName => {
+    const {onToggleAll} = props
     onToggleAll(resourceName, 'write')
   }
 
   const handleFlexboxClick = (event: MouseEvent) => {
     event.stopPropagation()
   }
 
+  const readToggleStyle = {marginRight: '10px'}
+  const writeToggleStyle = {marginRight: '0px'}
+
+  const AllResourceAccordionBody = (permission?, resourceName?) => (
+    <FlexBox
+      margin={ComponentSize.Small}
+      justifyContent={JustifyContent.SpaceBetween}
+      direction={FlexDirection.Row}
+      stretchToFitWidth={true}
+      alignItems={AlignItems.Center}
+    >
+      <FlexBox.Child basis={40} grow={8}>
+        <InputLabel size={ComponentSize.Small}>{`All ${
+          resourceName ? resourceName : props.resourceName
+        }`}</InputLabel>
+      </FlexBox.Child>
+      <FlexBox.Child grow={1} onClick={handleFlexboxClick}>
+        <Toggle
+          id={resourceName ? resourceName : props.resourceName}
+          type={InputToggleType.Checkbox}
+          onChange={handleReadToggle}
+          size={ComponentSize.ExtraSmall}
+          checked={permission ? permission.perm.read : permissions.read}
+          value={permission ? permission.name : props.resourceName}
+          style={readToggleStyle}
+          tabIndex={0}
+          disabled={disabled}
+        ></Toggle>
+      </FlexBox.Child>
+      <FlexBox.Child grow={1} onClick={handleFlexboxClick}>
+        <Toggle
+          id={resourceName ? resourceName + 1 : props.resourceName + 1}
+          type={InputToggleType.Checkbox}
+          onChange={handleWriteToggle}
+          size={ComponentSize.ExtraSmall}
+          checked={permission ? permission.perm.write : permissions.write}
+          value={permission ? permission.name : props.resourceName}
+          style={writeToggleStyle}
+          tabIndex={0}
+          disabled={disabled}
+        ></Toggle>
+      </FlexBox.Child>
+    </FlexBox>
+  )
+
   return (
     <>
-      <Accordion.AccordionBodyItem className="resource-accordion-body">
-        <FlexBox
-          margin={ComponentSize.Small}
-          justifyContent={JustifyContent.SpaceBetween}
-          direction={FlexDirection.Row}
-          stretchToFitWidth={true}
-          alignItems={AlignItems.Center}
-          style={{textAlign: 'start'}}
-        >
-          <FlexBox.Child basis={40} grow={8}>
-            <InputLabel
-              size={ComponentSize.Small}
-            >{`All ${resourceName}`}</InputLabel>
-          </FlexBox.Child>
-          <FlexBox.Child grow={1} onClick={handleFlexboxClick}>
-            <Toggle
-              id={resourceName}
-              type={InputToggleType.Checkbox}
-              onChange={handleReadToggle}
-              size={ComponentSize.ExtraSmall}
-              checked={permissions.read}
-              value={permissions.read.toString()}
-              style={{marginRight: '10px'}}
-              tabIndex={0}
-              disabled={disabled}
-            ></Toggle>
-          </FlexBox.Child>
-          <FlexBox.Child grow={1} onClick={handleFlexboxClick}>
-            <Toggle
-              id={resourceName + 1}
-              type={InputToggleType.Checkbox}
-              onChange={handleWriteToggle}
-              size={ComponentSize.ExtraSmall}
-              checked={permissions.write}
-              value={permissions.write.toString()}
-              style={{marginRight: '0px'}}
-              tabIndex={0}
-              disabled={disabled}
-            ></Toggle>
-          </FlexBox.Child>
-        </FlexBox>
-      </Accordion.AccordionBodyItem>
+      {resourceName === 'All Resources' ? (
+        Object.keys(permissions).map(key => {
+          const names = permissions[key].name
+          const resourceName = names.charAt(0).toUpperCase() + names.slice(1)
+
+          return (
+            <Accordion.AccordionBodyItem
+              key={key}
+              className="resource-accordion-body"
+            >
+              {AllResourceAccordionBody(permissions[key], resourceName)}
+            </Accordion.AccordionBodyItem>
+          )
+        })
+      ) : (
+        <Accordion.AccordionBodyItem className="resource-accordion-body">
+          {AllResourceAccordionBody()}
+        </Accordion.AccordionBodyItem>
+      )}
     </>
   )
 }

src/authorizations/components/redesigned/ResourceAccordion.tsx

@@ -67,26 +67,39 @@ class ResourceAccordion extends Component<OwnProps> {
             disabled={false}
           />
           {!permissions.otherResources.read && !permissions.otherResources.write
-            ? resources[1].map(resource => {
-                const resourceName =
-                  resource.charAt(0).toUpperCase() + resource.slice(1)
-
-                return (
-                  <AllAccordionBody
-                    key={resource}
-                    resourceName={resourceName}
-                    permissions={permissions[resource]}
-                    onToggleAll={onToggleAll}
-                    disabled={false}
-                  />
-                )
-              })
+            ? this.otherResourcesAccordionBody()
             : null}
         </Accordion>
       </>
     )
   }
 
+  otherResourcesAccordionBody = () => {
+    const {onToggleAll, resources, permissions} = this.props
+    const resourcePermissions = []
+
+    resources[1].forEach(resource => {
+      resourcePermissions.push({name: resource, perm: permissions[resource]})
+    })
+
+    return (
+      <Filter
+        list={resourcePermissions}
+        searchTerm={this.props.searchTerm}
+        searchKeys={['name']}
+      >
+        {filteredNames => (
+          <AllAccordionBody
+            resourceName="All Resources"
+            permissions={filteredNames}
+            onToggleAll={onToggleAll}
+            disabled={false}
+          />
+        )}
+      </Filter>
+    )
+  }
+
   getAccordionBody = (resourceName, resource) => {
     const {permissions, onIndividualToggle} = this.props
     const permissionNames = []
@@ -96,6 +109,7 @@ class ResourceAccordion extends Component<OwnProps> {
       )) {
         permissionNames.push(value)
       }
+
       return (
         <Filter
           list={permissionNames}