diff --git a/catalog/app/containers/Admin/UsersAndRoles/RoleSelect.tsx b/catalog/app/containers/Admin/UsersAndRoles/RoleSelect.tsx
new file mode 100644
index 00000000000..50a1bdd8278
--- /dev/null
+++ b/catalog/app/containers/Admin/UsersAndRoles/RoleSelect.tsx
@@ -0,0 +1,234 @@
+import cx from 'classnames'
+import * as FF from 'final-form'
+import * as R from 'ramda'
+import * as React from 'react'
+import * as RF from 'react-final-form'
+import * as M from '@material-ui/core'
+
+export interface Role {
+  id: string
+  name: string
+}
+
+export interface Value {
+  selected: readonly Role[]
+  active: Role | null
+}
+
+export const EMPTY_VALUE: Value = { selected: [], active: null }
+
+export const validate: FF.FieldValidator<Value> = (v) => {
+  if (!v.selected.length) return 'required'
+  if (!v.active) return 'active'
+}
+
+export const ROLE_NAME_ASC = R.ascend((r: Role) => r.name)
+
+const useRoleSelectStyles = M.makeStyles((t) => ({
+  grid: {
+    alignItems: 'center',
+    display: 'grid',
+    gap: t.spacing(1),
+    grid: 'auto-flow / 1fr auto 1fr',
+    marginTop: t.spacing(2),
+  },
+  list: ({ roles }: { roles: number }) => ({
+    height: `${46 * R.clamp(3, 4.5, roles)}px`,
+    overflowY: 'auto',
+  }),
+  listEmpty: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    paddingTop: t.spacing(3),
+  },
+  availableRole: {
+    paddingBottom: '5px',
+    paddingTop: '5px',
+  },
+  defaultRole: {
+    fontWeight: t.typography.fontWeightMedium,
+    '&::after': {
+      content: '"*"',
+    },
+  },
+}))
+
+interface RoleSelectProps extends RF.FieldRenderProps<Value> {
+  roles: readonly Role[]
+  defaultRole: Role | null
+}
+
+export function RoleSelect({
+  roles,
+  defaultRole,
+  input: { value, onChange },
+  meta,
+}: RoleSelectProps) {
+  const classes = useRoleSelectStyles({ roles: roles.length })
+
+  const error = meta.submitFailed && meta.error
+  const disabled = meta.submitting || meta.submitSucceeded
+
+  const { active, selected } = value ?? EMPTY_VALUE
+
+  const available = React.useMemo(
+    () => roles.filter((r) => !selected.find((r2) => r2.id === r.id)).sort(ROLE_NAME_ASC),
+    [roles, selected],
+  )
+
+  const add = (r: Role) =>
+    onChange({
+      selected: selected.concat(r).sort(ROLE_NAME_ASC),
+      active: active ?? r,
+    })
+
+  const remove = (r: Role) => {
+    const newSelected = selected.filter((r2) => r2.id !== r.id)
+    let newActive: Role | null
+    if (newSelected.length === 1) {
+      // select the only available role
+      newActive = newSelected[0]
+    } else if (newSelected.find((r2) => r2.id === active?.id)) {
+      // keep the active role if it's still available
+      newActive = active
+    } else {
+      newActive = null
+    }
+    onChange({ selected: newSelected, active: newActive })
+  }
+
+  const activate = (r: Role) => onChange({ selected, active: r })
+
+  const clear = () => onChange({ selected: [], active: null })
+
+  function roleNameDisplay(r: Role) {
+    if (r.id !== defaultRole?.id) return r.name
+    return (
+      <M.Tooltip title="Default role">
+        <span className={classes.defaultRole}>{r.name}</span>
+      </M.Tooltip>
+    )
+  }
+
+  return (
+    <M.FormControl error={!!error} margin="normal" fullWidth>
+      {error ? (
+        <M.Typography variant="body2" color="error">
+          {error === 'required' ? 'Assign at least one role' : 'Select an active role'}
+        </M.Typography>
+      ) : (
+        <M.Typography variant="body2" color="textSecondary">
+          User can assume any of the assigned roles
+        </M.Typography>
+      )}
+
+      <div className={classes.grid}>
+        <M.Card variant="outlined">
+          <M.ListItem component="div" ContainerComponent="div" dense divider>
+            <M.ListItemText
+              primary="Assigned roles"
+              secondary={`${selected.length} / ${roles.length} roles`}
+              primaryTypographyProps={{ color: error ? 'error' : undefined }}
+            />
+            <M.ListItemSecondaryAction>
+              <M.Tooltip title="Unassign all roles">
+                <M.IconButton
+                  onClick={clear}
+                  edge="end"
+                  size="small"
+                  disabled={disabled || selected.length === 0}
+                >
+                  <M.Icon>clear_all</M.Icon>
+                </M.IconButton>
+              </M.Tooltip>
+            </M.ListItemSecondaryAction>
+          </M.ListItem>
+          {selected.length ? (
+            <M.List dense disablePadding className={classes.list}>
+              {selected.map((r) => (
+                <M.ListItem
+                  key={r.id}
+                  selected={active?.id === r.id}
+                  disabled={disabled}
+                  button
+                  onClick={() => activate(r)}
+                >
+                  <M.Tooltip
+                    title={active?.id === r.id ? 'Active role' : 'Set active role'}
+                  >
+                    <M.Radio
+                      checked={active?.id === r.id}
+                      tabIndex={-1}
+                      edge="start"
+                      size="small"
+                      disableRipple
+                    />
+                  </M.Tooltip>
+                  <M.ListItemText primaryTypographyProps={{ noWrap: true }}>
+                    {roleNameDisplay(r)}
+                  </M.ListItemText>
+                  <M.ListItemSecondaryAction>
+                    <M.Tooltip title="Unassign role">
+                      <M.IconButton edge="end" size="small" onClick={() => remove(r)}>
+                        <M.Icon>close</M.Icon>
+                      </M.IconButton>
+                    </M.Tooltip>
+                  </M.ListItemSecondaryAction>
+                </M.ListItem>
+              ))}
+            </M.List>
+          ) : (
+            <div className={cx(classes.list, classes.listEmpty)}>
+              <M.Typography color={error ? 'error' : 'textSecondary'}>
+                No roles assigned
+              </M.Typography>
+              {!!defaultRole && (
+                <>
+                  <M.Box pt={2} />
+                  <M.Button
+                    variant="contained"
+                    color="primary"
+                    onClick={() => add(defaultRole)}
+                    disabled={disabled}
+                  >
+                    Assign default role
+                  </M.Button>
+                </>
+              )}
+            </div>
+          )}
+        </M.Card>
+
+        <M.Icon color="action">sync_alt</M.Icon>
+
+        <M.Card variant="outlined">
+          <M.ListItem component="div" ContainerComponent="div" dense divider>
+            <M.ListItemText
+              primary="Available roles"
+              secondary={`${roles.length - selected.length} / ${roles.length} roles`}
+            />
+          </M.ListItem>
+          {available.length ? (
+            <M.List dense disablePadding className={classes.list}>
+              {available.map((r) => (
+                <M.ListItem key={r.id} disabled={disabled} button onClick={() => add(r)}>
+                  <M.ListItemText
+                    className={classes.availableRole}
+                    primaryTypographyProps={{ noWrap: true }}
+                  >
+                    {roleNameDisplay(r)}
+                  </M.ListItemText>
+                </M.ListItem>
+              ))}
+            </M.List>
+          ) : (
+            <div className={cx(classes.list, classes.listEmpty)}>
+              <M.Typography color="textSecondary">All roles assigned</M.Typography>
+            </div>
+          )}
+        </M.Card>
+      </div>
+    </M.FormControl>
+  )
+}
diff --git a/catalog/app/containers/Admin/UsersAndRoles/Users.tsx b/catalog/app/containers/Admin/UsersAndRoles/Users.tsx
index fd6c0a04ab9..292f06e846b 100644
--- a/catalog/app/containers/Admin/UsersAndRoles/Users.tsx
+++ b/catalog/app/containers/Admin/UsersAndRoles/Users.tsx
@@ -19,6 +19,7 @@ import * as validators from 'utils/validators'
 
 import * as Form from '../Form'
 import * as Table from '../Table'
+import * as RoleSelect from './RoleSelect'
 
 import USERS_QUERY from './gql/Users.generated'
 import USER_CREATE_MUTATION from './gql/UserCreate.generated'
@@ -34,229 +35,6 @@ type Role = GQL.DataForDoc<typeof USERS_QUERY>['roles'][number]
 
 const DIALOG_PROPS: Dialogs.ExtraDialogProps = { maxWidth: 'xs', fullWidth: true }
 
-interface RoleSelectValue {
-  selected: readonly Role[]
-  active: Role | null
-}
-
-const ROLE_SELECT_VALUE_EMPTY: RoleSelectValue = { selected: [], active: null }
-
-const validateRoleSelect: FF.FieldValidator<RoleSelectValue> = (v) => {
-  if (!v.selected.length) return 'required'
-  if (!v.active) return 'active'
-}
-
-const ROLE_NAME_ASC = R.ascend((r: Role) => r.name)
-
-const useRoleSelectStyles = M.makeStyles((t) => ({
-  grid: {
-    alignItems: 'center',
-    display: 'grid',
-    gap: t.spacing(1),
-    grid: 'auto-flow / 1fr auto 1fr',
-    marginTop: t.spacing(2),
-  },
-  list: ({ roles }: { roles: number }) => ({
-    height: `${46 * R.clamp(3, 4.5, roles)}px`,
-    overflowY: 'auto',
-  }),
-  listEmpty: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    paddingTop: t.spacing(3),
-  },
-  availableRole: {
-    paddingBottom: '5px',
-    paddingTop: '5px',
-  },
-  defaultRole: {
-    fontWeight: t.typography.fontWeightMedium,
-    '&::after': {
-      content: '"*"',
-    },
-  },
-}))
-
-interface RoleSelectProps extends RF.FieldRenderProps<RoleSelectValue> {
-  roles: readonly Role[]
-  defaultRole: Role | null
-}
-
-function RoleSelect({
-  roles,
-  defaultRole,
-  input: { value, onChange },
-  meta,
-}: RoleSelectProps) {
-  const classes = useRoleSelectStyles({ roles: roles.length })
-
-  const error = meta.submitFailed && meta.error
-  const disabled = meta.submitting || meta.submitSucceeded
-
-  const { active, selected } = value ?? ROLE_SELECT_VALUE_EMPTY
-
-  const available = React.useMemo(
-    () => roles.filter((r) => !selected.find((r2) => r2.id === r.id)).sort(ROLE_NAME_ASC),
-    [roles, selected],
-  )
-
-  const add = (r: Role) =>
-    onChange({
-      selected: selected.concat(r).sort(ROLE_NAME_ASC),
-      active: active ?? r,
-    })
-
-  const remove = (r: Role) => {
-    const newSelected = selected.filter((r2) => r2.id !== r.id)
-    let newActive: Role | null
-    if (newSelected.length === 1) {
-      // select the only available role
-      newActive = newSelected[0]
-    } else if (newSelected.find((r2) => r2.id === active?.id)) {
-      // keep the active role if it's still available
-      newActive = active
-    } else {
-      newActive = null
-    }
-    onChange({ selected: newSelected, active: newActive })
-  }
-
-  const activate = (r: Role) => onChange({ selected, active: r })
-
-  const clear = () => onChange({ selected: [], active: null })
-
-  function roleNameDisplay(r: Role) {
-    if (r.id !== defaultRole?.id) return r.name
-    return (
-      <M.Tooltip title="Default role">
-        <span className={classes.defaultRole}>{r.name}</span>
-      </M.Tooltip>
-    )
-  }
-
-  return (
-    <M.FormControl error={!!error} margin="normal" fullWidth>
-      {error ? (
-        <M.Typography variant="body2" color="error">
-          {error === 'required' ? 'Assign at least one role' : 'Select an active role'}
-        </M.Typography>
-      ) : (
-        <M.Typography variant="body2" color="textSecondary">
-          User can assume any of the assigned roles
-        </M.Typography>
-      )}
-
-      <div className={classes.grid}>
-        <M.Card variant="outlined">
-          <M.ListItem component="div" ContainerComponent="div" dense divider>
-            <M.ListItemText
-              primary="Assigned roles"
-              secondary={`${selected.length} / ${roles.length} roles`}
-              primaryTypographyProps={{ color: error ? 'error' : undefined }}
-            />
-            <M.ListItemSecondaryAction>
-              <M.Tooltip title="Unassign all roles">
-                <M.IconButton
-                  onClick={clear}
-                  edge="end"
-                  size="small"
-                  disabled={disabled || selected.length === 0}
-                >
-                  <M.Icon>clear_all</M.Icon>
-                </M.IconButton>
-              </M.Tooltip>
-            </M.ListItemSecondaryAction>
-          </M.ListItem>
-          {selected.length ? (
-            <M.List dense disablePadding className={classes.list}>
-              {selected.map((r) => (
-                <M.ListItem
-                  key={r.id}
-                  selected={active?.id === r.id}
-                  disabled={disabled}
-                  button
-                  onClick={() => activate(r)}
-                >
-                  <M.Tooltip
-                    title={active?.id === r.id ? 'Active role' : 'Set active role'}
-                  >
-                    <M.Radio
-                      checked={active?.id === r.id}
-                      tabIndex={-1}
-                      edge="start"
-                      size="small"
-                      disableRipple
-                    />
-                  </M.Tooltip>
-                  <M.ListItemText primaryTypographyProps={{ noWrap: true }}>
-                    {roleNameDisplay(r)}
-                  </M.ListItemText>
-                  <M.ListItemSecondaryAction>
-                    <M.Tooltip title="Unassign role">
-                      <M.IconButton edge="end" size="small" onClick={() => remove(r)}>
-                        <M.Icon>close</M.Icon>
-                      </M.IconButton>
-                    </M.Tooltip>
-                  </M.ListItemSecondaryAction>
-                </M.ListItem>
-              ))}
-            </M.List>
-          ) : (
-            <div className={cx(classes.list, classes.listEmpty)}>
-              <M.Typography color={error ? 'error' : 'textSecondary'}>
-                No roles assigned
-              </M.Typography>
-              {!!defaultRole && (
-                <>
-                  <M.Box pt={2} />
-                  <M.Button
-                    variant="contained"
-                    color="primary"
-                    onClick={() => add(defaultRole)}
-                    disabled={disabled}
-                  >
-                    Assign default role
-                  </M.Button>
-                </>
-              )}
-            </div>
-          )}
-        </M.Card>
-
-        <M.Icon color="action">sync_alt</M.Icon>
-
-        <M.Card variant="outlined">
-          <M.ListItem component="div" ContainerComponent="div" dense divider>
-            <M.ListItemText
-              primary="Available roles"
-              secondary={`${roles.length - selected.length} / ${roles.length} roles`}
-            />
-          </M.ListItem>
-          {available.length ? (
-            <M.List dense disablePadding className={classes.list}>
-              {available.map((r) => (
-                <M.ListItem key={r.id} disabled={disabled} button onClick={() => add(r)}>
-                  <M.ListItemText
-                    className={classes.availableRole}
-                    primaryTypographyProps={{ noWrap: true }}
-                  >
-                    {roleNameDisplay(r)}
-                  </M.ListItemText>
-                </M.ListItem>
-              ))}
-            </M.List>
-          ) : (
-            <div className={cx(classes.list, classes.listEmpty)}>
-              <M.Typography color="textSecondary">All roles assigned</M.Typography>
-            </div>
-          )}
-        </M.Card>
-      </div>
-    </M.FormControl>
-  )
-}
-
 const useDialogFormStyles = M.makeStyles((t) => ({
   root: {
     marginTop: t.spacing(-3),
@@ -289,7 +67,7 @@ function Invite({ close, roles, defaultRole }: InviteProps) {
   interface FormValues {
     username: string
     email: string
-    roles: RoleSelectValue
+    roles: RoleSelect.Value
   }
 
   const onSubmit = React.useCallback(
@@ -419,9 +197,13 @@ function Invite({ close, roles, defaultRole }: InviteProps) {
               />
               <M.Box mt={2} />
               <M.Typography variant="h6">Assign roles</M.Typography>
-              <RF.Field<RoleSelectValue> name="roles" validate={validateRoleSelect}>
+              <RF.Field<RoleSelect.Value> name="roles" validate={RoleSelect.validate}>
                 {(props) => (
-                  <RoleSelect roles={roles} defaultRole={defaultRole} {...props} />
+                  <RoleSelect.RoleSelect
+                    roles={roles}
+                    defaultRole={defaultRole}
+                    {...props}
+                  />
                 )}
               </RF.Field>
               <Form.FormErrorAuto>
@@ -811,7 +593,7 @@ function EditRoles({ close, roles, defaultRole, user }: EditRolesProps) {
   const setRole = GQL.useMutation(USER_SET_ROLE_MUTATION)
 
   interface FormValues {
-    roles: RoleSelectValue
+    roles: RoleSelect.Value
   }
 
   const onSubmit = React.useCallback(
@@ -862,7 +644,7 @@ function EditRoles({ close, roles, defaultRole, user }: EditRolesProps) {
   )
 
   const selected = React.useMemo(
-    () => user.extraRoles.concat(user.role ?? []).sort(ROLE_NAME_ASC),
+    () => user.extraRoles.concat(user.role ?? []).sort(RoleSelect.ROLE_NAME_ASC),
     [user.extraRoles, user.role],
   )
 
@@ -886,9 +668,13 @@ function EditRoles({ close, roles, defaultRole, user }: EditRolesProps) {
           <M.DialogTitle>Assign roles to &quot;{user.name}&quot;</M.DialogTitle>
           <M.DialogContent>
             <DialogForm onSubmit={handleSubmit}>
-              <RF.Field<RoleSelectValue> name="roles" validate={validateRoleSelect}>
+              <RF.Field<RoleSelect.Value> name="roles" validate={RoleSelect.validate}>
                 {(props) => (
-                  <RoleSelect roles={roles} defaultRole={defaultRole} {...props} />
+                  <RoleSelect.RoleSelect
+                    roles={roles}
+                    defaultRole={defaultRole}
+                    {...props}
+                  />
                 )}
               </RF.Field>
               <Form.FormErrorAuto>