Geo Replicables - Add Filtering by Sync Status

What / Why

This is related to the Geo Replicables Functionality True Up: &8212 (closed)
This implements the Frontend for #411769 (closed)

Currently for Self Service Replicables we are unable to do any sort of Filtering by Status on the Geo Replicable views. Our legacy replicables support this behavior and thus we should in theory be able to provide this to our SSF ones as well. Once the Filtering by Status is supported via the GraphQL API we will want to add filtering components to the UI. We additionally may want to explore utilizing query parameters in the URL to support saving/bookmarking filtering combinations.

Screenshot of affected UI

Expected Filters (Legacy)	Current Filters (SSF)

Proposal

Following that filtering is supported in the GraphQL endpoint

1. Add filtering support to the GraphQL query builder: https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/geo_replicable/graphql/replicable_type_query_builder.js
2. Remove this condition on the filter bar: https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/geo_replicable/components/app.vue#L40
3. Break out the above removed condition to split Filter by Status and Filter by Keyword
4. Add GraphQL powered Filtering by Status in this component: https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/geo_replicable/components/geo_replicable_filter_bar.vue
   • Being careful not to break the existing RESTful filtering that happens on the legacy replicable Designs.