feat: add filter to EditTokenOverlay (#3328)

Author: blegesse-w

src/authorizations/components/redesigned/EditResourceAccordion.tsx

@@ -8,11 +8,16 @@ import {ResourceAccordionHeader} from 'src/authorizations/components/redesigned/
 import {IndividualAccordionBody} from 'src/authorizations/components/redesigned/IndividualAccordionBody'
 import {AllAccordionBody} from './AllAccordionBody'
 import {formatResources} from 'src/authorizations/utils/permissions'
+import FilterList from 'src/shared/components/FilterList'
 
+// Types
+import {Resource} from 'src/client'
 interface Props {
   permissions: any
+  searchTerm: string
 }
 
+const Filter = FilterList<Resource>()
 export class EditResourceAccordion extends Component<Props> {
   public render() {
     const {permissions} = this.props
@@ -48,44 +53,83 @@ export class EditResourceAccordion extends Component<Props> {
         {!isEmpty(allResourceNames[1]) && (
           <Accordion key="Other Resources" expanded={true}>
             <ResourceAccordionHeader resourceName="Other Resources" />
-            {allResourceNames[1].map(resource => {
-              const resourceName =
-                resource.charAt(0).toUpperCase() + resource.slice(1)
-
-              return (
-                <AllAccordionBody
-                  key={resource}
-                  resourceName={resourceName}
-                  permissions={permissions[resource]}
-                  disabled={true}
-                />
-              )
-            })}
+            {this.getOtherResourceAccordionBody(allResourceNames)}
           </Accordion>
         )}
       </>
     )
   }
 
+  getOtherResourceAccordionBody = allResourceNames => {
+    const {permissions, searchTerm} = this.props
+    const resourcePermissions = []
+    allResourceNames[1].forEach(resource => {
+      resourcePermissions.push({name: resource, perm: permissions[resource]})
+    })
+    return (
+      <Filter
+        list={resourcePermissions}
+        searchTerm={searchTerm}
+        searchKeys={['name']}
+      >
+        {filteredNames => (
+          <AllAccordionBody
+            resourceName="All Resources"
+            permissions={filteredNames}
+            disabled={true}
+          />
+        )}
+      </Filter>
+    )
+  }
+
   getAccordionBody = (resourceName, resource) => {
-    const {permissions} = this.props
+    const {permissions, searchTerm} = this.props
+    const permissionNames = []
+
     if (resourceName === 'Telegrafs') {
+      for (const [, value] of Object.entries(
+        permissions[resource].sublevelPermissions
+      )) {
+        permissionNames.push(value)
+      }
       return (
-        <IndividualAccordionBody
-          resourceName={resource}
-          permissions={permissions[resource].sublevelPermissions}
-          title="Individual Telegraf Configuration Names"
-          disabled={true}
-        />
+        <Filter
+          list={permissionNames}
+          searchTerm={searchTerm}
+          searchKeys={['name']}
+        >
+          {filteredNames => (
+            <IndividualAccordionBody
+              resourceName={resource}
+              permissions={filteredNames}
+              title="Individual Telegraf Configuration Names"
+              disabled={true}
+            />
+          )}
+        </Filter>
       )
     } else if (resourceName === 'Buckets') {
+      for (const [, value] of Object.entries(
+        permissions[resource].sublevelPermissions
+      )) {
+        permissionNames.push(value)
+      }
       return (
-        <IndividualAccordionBody
-          resourceName={resource}
-          permissions={permissions[resource].sublevelPermissions}
-          title="Individual Bucket Names"
-          disabled={true}
-        />
+        <Filter
+          list={permissionNames}
+          searchTerm={searchTerm}
+          searchKeys={['name']}
+        >
+          {filteredNames => (
+            <IndividualAccordionBody
+              resourceName={resource}
+              permissions={filteredNames}
+              title="Individual Bucket Names"
+              disabled={true}
+            />
+          )}
+        </Filter>
       )
     }
   }

src/authorizations/components/redesigned/EditTokenOverlay.tsx

@@ -21,6 +21,7 @@ import {
   Page,
 } from '@influxdata/clockface'
 import {EditResourceAccordion} from 'src/authorizations/components/redesigned/EditResourceAccordion'
+import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
 
 // Types
 import {Authorization} from 'src/types'
@@ -56,6 +57,7 @@ const EditTokenOverlay: FC<Props> = props => {
   )
   const [label, setlabel] = useState(props.auth.status)
   const [permissions, setPermissions] = useState([])
+  const [searchTerm, setSearchTerm] = useState('')
 
   useEffect(() => {
     if (_.isEmpty(permissions)) {
@@ -100,6 +102,10 @@ const EditTokenOverlay: FC<Props> = props => {
     setStatus(ComponentStatus.Default)
   }
 
+  const handleChangeSearchTerm = (searchTerm: string): void => {
+    setSearchTerm(searchTerm)
+  }
+
   const handleDismiss = () => props.onDismissOverlay()
 
   const changeToggle = () => {
@@ -160,6 +166,11 @@ const EditTokenOverlay: FC<Props> = props => {
             </FlexBox>
           </Form>
           <FlexBox.Child className="main-flexbox-child">
+            <SearchWidget
+              searchTerm={searchTerm}
+              placeholderText="Filter Access Permissions..."
+              onSearch={handleChangeSearchTerm}
+            />
             <FlexBox
               margin={ComponentSize.Large}
               justifyContent={JustifyContent.SpaceBetween}
@@ -192,6 +203,7 @@ const EditTokenOverlay: FC<Props> = props => {
             </FlexBox>
             <EditResourceAccordion
               permissions={formatPermissionsObj(permissions)}
+              searchTerm={searchTerm}
             />
           </FlexBox.Child>
           <Page.ControlBarCenter>