[Feature] Add ability to filter by name and state in the federal admin panel

[tbolt]

As a Federal Admin I want the ability to filter by state and status and to search by name or email in the federal admin panel so I can have an easier time managing roles.

Mockups or link to Figma https://www.figma.com/file/6eVvo7JjvXiovGTR4BoVgK/CMS-eAPD-2021?node-id=5386%3A33951

Acceptance criteria

Given	When	Then
A federal admin	viewing the fed admin dashboard table	they can filter the table by status and state and search by name or email

This task is done when…

• [ ] ability to filter by status
• [ ] ability to filter by state
• [ ] ability to search by name or email

[jeromeleecms]

Let's try and scope this to name for now - will revisit once this is assigned.

[tbolt]

Update 11/24- After spending two days working to get this in place we decided the amount of effort to get this fully integrated would be too large at this time. We're moving this ticket back to the backlog for the time being. Some notes below on the technical hurdles we will need to resolve in future work.

Development notes- There were a few obstacles that made it difficult to implement this

1. The initial component we created, ManageUserTable, was intended to support a list of affiliations and work across the 3 tabs (Requests, Active, Inactive) showing the same columns of data aside from the actions. We then changed it to have different columns of data depending on which tab is active. Not ideal but adding some conditional logic here seemed like the right move at the time. If given time for refactoring, I would suggest that they are split out into one Table/Component per tab.

When we implemented the Fed Admin panel we assumed that we could re-use the ManageUserTable. However, since the fed admin can see all affiliations we needed to support sub-rows. You can see the fed admin mockup to see how the subrows were supposed to look/work. Ultimately we forked this component and created ManageAllUsersTable. This worked OK but handling the sub-rows was difficult given the data model

2. The data model returned when getting a states affiliations is an array of objects. Where 1 object = 1 affiliation like:

   {
   "id": 123,
   "stateId": "md",
   "status": "approved",
   "role": "eAPD State Staff",
   "primaryPhone": "4105555555",
   "displayName": "State Admin",
   "email": "test@test.com"
   }
   ]

This was updated to support the fed admin panel by returning a new data model when hitting /states/fd/affiliations. The new model added additional affiliations to the original object. Example:

{
    "id": 123,
    "stateId": "ak",
    "status": "approved",
    "role": "eAPD State Staff",
    "displayName": "State Admin",
    "primaryPhone": "5555555555",
    "email": "tforkner+stateadmin@fearless.tech",
    "affiliations": [
      {
        "role": "eAPD State Staff",
        "stateId": "ak",
        "status": "approved",
        "id": 123
      },
      {
        "role": "eAPD State Staff",
        "stateId": "md",
        "status": "approved",
        "id": 456
    }
  ]
},

This wasn't an easy model to work with. Ideally the model would be one object per row. We were able to handle having these sub rows.

3. React-table does seem to be able to handle subRows however I encountered the following issues:
   • GlobalFilter ignores the subrows
   • The subrows disappear when doing a search/filter that doesn't return a result
   • The subrows disappeared occasionally when sorting
   • The select filter wasn't picking up on subrow values

Checkout the branch tbolt/3305-fed-admin-filters for the work that was done thus far. While there may be workarounds for some or all of the issues mentioned in #3 we decided to table this work for now.

What I would recommend for a future refactor:

• Split out the tabs to each have their own component and don't share a common table component (see the StateAdminLetters component as an example)
• Update the data model to be a flat list of objects and remove the nested affiliations
• Update the table design to list affiliations without subrows (which will be easy given the above data model change)