Add filter to Policies and Roles tables, refactor filter

catalog/app/containers/Admin/Buckets/Buckets.tsx

@@ -29,7 +29,6 @@ import { useTracker } from 'utils/tracking'
 import * as Types from 'utils/types'
 import * as validators from 'utils/validators'
 
-import Filter from '../Filter'
 import * as Form from '../Form'
 import * as Table from '../Table'
 
@@ -1266,23 +1265,25 @@ const columns = [
   },
 ]
 
+type BucketRow = Pick<
+  Model.GQLTypes.BucketConfig,
+  'name' | 'title' | 'description' | 'lastIndexed' | 'iconUrl'
+>
+
 interface CRUDProps {
   bucketName?: string
 }
 
 function CRUD({ bucketName }: CRUDProps) {
   const { bucketConfigs: rows } = GQL.useQueryS(BUCKET_CONFIGS_QUERY)
-  const [filter, setFilter] = React.useState('')
-  const filtered = React.useMemo(
-    () =>
-      filter
-        ? rows.filter(({ name, title }) =>
-            (name + title).toLowerCase().includes(filter.toLowerCase()),
-          )
-        : rows,
-    [filter, rows],
-  )
-  const ordering = Table.useOrdering({ rows: filtered, column: columns[0] })
+  const filtering = Table.useFiltering<BucketRow>({
+    rows,
+    filterBy: ({ name, title }) => name + title,
+  })
+  const ordering = Table.useOrdering<BucketRow>({
+    rows: filtering.filtered,
+    column: columns[0],
+  })
   const pagination = Pagination.use(ordering.ordered, {
     // @ts-expect-error
     getItemId: R.prop('name'),
@@ -1293,6 +1294,7 @@ function CRUD({ bucketName }: CRUDProps) {
   const history = RRDom.useHistory()
 
   const toolbarActions = [
+    <Table.Filter {...filtering} key="toolbar-filter" />,
     {
       title: 'Add bucket',
       icon: <M.Icon>add</M.Icon>,
@@ -1345,10 +1347,7 @@ function CRUD({ bucketName }: CRUDProps) {
         {editingBucket && <Edit bucket={editingBucket} close={onBucketClose} />}
       </M.Dialog>
 
-      <Table.Toolbar heading="Buckets" actions={toolbarActions}>
-        {/* @ts-expect-error */}
-        <Filter value={filter} onChange={setFilter} />
-      </Table.Toolbar>
+      <Table.Toolbar heading="Buckets" actions={toolbarActions} />
       <Table.Wrapper>
         <M.Table size="small">
           <Table.Head columns={columns} ordering={ordering} withInlineActions />

catalog/app/containers/Admin/RolesAndPolicies/AssociatedRoles.tsx

@@ -1,9 +1,12 @@
 import * as React from 'react'
+import * as R from 'ramda'
 import * as RF from 'react-final-form'
 import * as M from '@material-ui/core'
 
 import * as GQL from 'utils/GraphQL'
 
+import * as Table from '../Table'
+import Filter from './Filter'
 import { MAX_POLICIES_PER_ROLE } from './shared'
 
 import ROLES_QUERY from './gql/Roles.generated'
@@ -45,12 +48,26 @@ function RoleSelectionDialog({
     [setSelected],
   )
 
+  const filtering = Table.useFiltering<ManagedRole>({
+    rows: roles,
+    filterBy: ({ name }: ManagedRole) => name,
+  })
+  const ordered = React.useMemo(
+    () => R.sortBy(({ name }: ManagedRole) => name, filtering.filtered),
+    [filtering.filtered],
+  )
+
   return (
     <M.Dialog maxWidth="xs" open={open} onClose={onClose} onExited={handleExited}>
       <M.DialogTitle>Attach policy to roles</M.DialogTitle>
+      {roles.length && (
+        <M.Box ml={3} mr={1.5}>
+          <Filter {...filtering} />
+        </M.Box>
+      )}
       <M.DialogContent dividers>
-        {roles.length ? (
-          roles.map((role) => (
+        {ordered.length ? (
+          ordered.map((role) => (
             <M.FormControlLabel
               key={role.id}
               style={{ display: 'flex', marginRight: 0 }}
@@ -73,7 +90,11 @@ function RoleSelectionDialog({
             />
           ))
         ) : (
-          <M.Typography>No more roles to attach this policy to</M.Typography>
+          <M.Typography>
+            {filtering.value
+              ? 'No roles found, try resetting filter'
+              : 'No more roles to attach this policy to'}
+          </M.Typography>
         )}
       </M.DialogContent>
       <M.DialogActions>

catalog/app/containers/Admin/RolesAndPolicies/AttachedPolicies.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react'
+import * as R from 'ramda'
 import * as RF from 'react-final-form'
 import * as M from '@material-ui/core'
 
 import * as GQL from 'utils/GraphQL'
 import StyledLink from 'utils/StyledLink'
 
+import * as Table from '../Table'
+import Filter from './Filter'
 import { MAX_POLICIES_PER_ROLE } from './shared'
 
 import POLICIES_QUERY from './gql/Policies.generated'
@@ -38,34 +41,52 @@ function PolicySelectionDialog({
     [setSelected, onClose],
   )
 
+  const filtering = Table.useFiltering<Policy>({
+    rows: policies,
+    filterBy: ({ title }: Policy) => title,
+  })
+  const ordered = React.useMemo(
+    () => R.sortBy(({ title }: Policy) => title, filtering.filtered),
+    [filtering.filtered],
+  )
+
   return (
     <M.Dialog maxWidth="xs" open={open} onClose={onClose} onExited={handleExited}>
       <M.DialogTitle>Attach a policy</M.DialogTitle>
-      <M.List dense>
-        {policies.length ? (
-          policies.map((policy) => (
-            <M.ListItem button key={policy.id} onClick={() => select(policy)}>
-              <M.ListItemText>
-                {policy.title}
-                <M.Box component="span" color="text.secondary">
-                  {' '}
-                  (
-                  {policy.managed ? (
-                    <>{policy.permissions.length} buckets</>
-                  ) : (
-                    <>unmanaged</>
-                  )}
-                  )
-                </M.Box>
-              </M.ListItemText>
-            </M.ListItem>
-          ))
-        ) : (
-          <M.DialogContent dividers>
-            <M.Typography>No more policies to attach</M.Typography>
-          </M.DialogContent>
-        )}
-      </M.List>
+      {policies.length && (
+        <M.Box ml={3} mr={1.5}>
+          <Filter {...filtering} />
+        </M.Box>
+      )}
+      <M.DialogContent dividers>
+        <M.List dense>
+          {ordered.length ? (
+            ordered.map((policy) => (
+              <M.ListItem button key={policy.id} onClick={() => select(policy)}>
+                <M.ListItemText>
+                  {policy.title}
+                  <M.Box component="span" color="text.secondary">
+                    {' '}
+                    (
+                    {policy.managed ? (
+                      <>{policy.permissions.length} buckets</>
+                    ) : (
+                      <>unmanaged</>
+                    )}
+                    )
+                  </M.Box>
+                </M.ListItemText>
+              </M.ListItem>
+            ))
+          ) : (
+            <M.Typography>
+              {filtering.value
+                ? 'No policies found, try resetting filter'
+                : 'No more policies to attach'}
+            </M.Typography>
+          )}
+        </M.List>
+      </M.DialogContent>
       <M.DialogActions>
         <M.Button autoFocus onClick={onClose} color="primary">
           Cancel

catalog/app/containers/Admin/RolesAndPolicies/BucketsPermissions.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import * as R from 'ramda'
 import * as RF from 'react-final-form'
 import * as M from '@material-ui/core'
 
@@ -7,6 +8,9 @@ import * as Model from 'model'
 import * as GQL from 'utils/GraphQL'
 import StyledLink from 'utils/StyledLink'
 
+import * as Table from '../Table'
+import Filter from './Filter'
+
 import BUCKETS_QUERY from './gql/Buckets.generated'
 import { BucketPermissionSelectionFragment as BucketPermission } from './gql/BucketPermissionSelection.generated'
 
@@ -39,33 +43,51 @@ function BucketAddDialog({ open, onClose, buckets, addBucket }: BucketAddDialogP
     [onClose, select],
   )
 
+  const filtering = Table.useFiltering<Bucket>({
+    rows: buckets,
+    filterBy: ({ name, title }: Bucket) => name + title,
+  })
+  const ordered = React.useMemo(
+    () => R.sortBy(({ name }: Bucket) => name, filtering.filtered),
+    [filtering.filtered],
+  )
+
   return (
     <M.Dialog maxWidth="xs" open={open} onClose={onClose} onExited={handleExited}>
       <M.DialogTitle>Add a bucket</M.DialogTitle>
-      {buckets.length ? (
-        <M.List>
-          {buckets.map((bucket) => (
-            <M.ListItem key={bucket.name} button onClick={() => handleAdd(bucket)}>
-              <M.ListItemAvatar style={{ minWidth: 44 }}>
-                <M.Avatar
-                  style={{ width: 32, height: 32 }}
-                  src={bucket.iconUrl || defaultBucketIcon}
-                />
-              </M.ListItemAvatar>
-              <M.ListItemText>
-                s3://{bucket.name}{' '}
-                <M.Box component="span" color="text.secondary" ml={0.5}>
-                  {bucket.title}
-                </M.Box>
-              </M.ListItemText>
-            </M.ListItem>
-          ))}
-        </M.List>
-      ) : (
-        <M.DialogContent>
-          <M.Typography>No more buckets to add</M.Typography>
-        </M.DialogContent>
+      {buckets.length && (
+        <M.Box ml={3} mr={1.5}>
+          <Filter {...filtering} />
+        </M.Box>
       )}
+      <M.DialogContent dividers>
+        {ordered.length ? (
+          <M.List>
+            {ordered.map((bucket) => (
+              <M.ListItem key={bucket.name} button onClick={() => handleAdd(bucket)}>
+                <M.ListItemAvatar style={{ minWidth: 44 }}>
+                  <M.Avatar
+                    style={{ width: 32, height: 32 }}
+                    src={bucket.iconUrl || defaultBucketIcon}
+                  />
+                </M.ListItemAvatar>
+                <M.ListItemText>
+                  s3://{bucket.name}{' '}
+                  <M.Box component="span" color="text.secondary" ml={0.5}>
+                    {bucket.title}
+                  </M.Box>
+                </M.ListItemText>
+              </M.ListItem>
+            ))}
+          </M.List>
+        ) : (
+          <M.Typography>
+            {filtering.value
+              ? 'No buckets found, try resetting filter'
+              : 'No more buckets to add'}
+          </M.Typography>
+        )}
+      </M.DialogContent>
       <M.DialogActions>
         <M.Button autoFocus onClick={onClose} color="primary">
           Cancel

catalog/app/containers/Admin/RolesAndPolicies/Filter.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+interface FilterProps {
+  value: string
+  onChange: (v: string) => void
+}
+
+export default function Filter({ value, onChange }: FilterProps) {
+  return (
+    <M.InputBase
+      endAdornment={
+        value && (
+          <M.IconButton onClick={() => onChange('')}>
+            <M.Icon fontSize="small">clear</M.Icon>
+          </M.IconButton>
+        )
+      }
+      fullWidth
+      onChange={(event) => onChange(event.target.value)}
+      placeholder="Filter"
+      startAdornment={<M.Icon fontSize="small">search</M.Icon>}
+      value={value}
+    />
+  )
+}

catalog/app/containers/Admin/RolesAndPolicies/Policies.tsx

@@ -649,10 +649,18 @@ interface DialogsOpenProps {
 export default function Policies() {
   const { policies: rows } = GQL.useQueryS(POLICIES_QUERY)
 
-  const ordering = Table.useOrdering({ rows, column: columns[0] })
+  const filtering = Table.useFiltering<Policy>({
+    rows,
+    filterBy: ({ title }) => title,
+  })
+  const ordering = Table.useOrdering<Policy>({
+    rows: filtering.filtered,
+    column: columns[0],
+  })
   const dialogs = Dialogs.use()
 
   const toolbarActions = [
+    <Table.Filter {...filtering} key="toolbar-filter" />,
     {
       title: 'Create',
       icon: <M.Icon>add</M.Icon>,
@@ -664,11 +672,11 @@ export default function Policies() {
 
   const inlineActions = (policy: Policy) => [
     policy.arn
-      ? {
+      ? ({
           title: 'Open AWS Console',
           icon: <M.Icon>launch</M.Icon>,
           href: getArnLink(policy.arn),
-        }
+        } as Table.Action)
       : null,
     {
       title: 'Edit',
@@ -712,7 +720,6 @@ export default function Policies() {
                   ))}
                   <M.TableCell align="right" padding="none">
                     <Table.InlineActions actions={inlineActions(i)}>
-                      {/* @ts-expect-error */}
                       <SettingsMenu policy={i} openDialog={dialogs.open} />
                     </Table.InlineActions>
                   </M.TableCell>