Skip to content

Geo Lists: Shared list item component

Zack Cuddyrequested to merge
538020_06-geo-shared-list-item into master

What does this MR do and why?

Part of Geo Shared UI: Migrate Replicables List view to... (#538020 - closed)
In preparation for Geo Replicables - Migrate GraphQL to Apollo fro... (#425584 - closed)
Broken off from Draft: Migrate `ee/geo_replicable` to `ee/geo_s... (!189965 - closed)
This change is behind the feature flag :geo_replicables_filtered_list_view

This change is part of the effort to move most the Geo List components to a shared location geo_shared/ to be used in different locations in the Geo UI in the future. Additionally, this will allow us to eventually abstract all the Vuex code into the app.vue so that it can be easily replaced with Apollo.

This change is focused on creating the core Geo List Item Component

The separation of concerns

The Geo List Item component is focused on strictly the rendering side of the list item to keep our list views consistent. Each list item is composed of 5 core components:

  1. Name/Link
  2. Status
  3. Time Ago
  4. Actions
  5. Extra Details

Then the wrapping parent component (ex. Geo Replicable Item) is in charge of its own data and formatting it to match the expectations of the shared list item component.

Screenshots or screen recordings

There should be no visible or functional changes

Before After
Before After

How to set up and validate locally

Setup Geo (optional)

Important: To properly test Geo you will need a separate GDK setup. Setup is straightforward but takes some time. Another option is to validate the code functionally and if needed schedule a call to sync and I can screen share my instance.

  1. Ensure no other GDKs are running. gdk stop/gdk kill
  2. Open an empty directory and install and run Geo with the one-line command found on the Easy installation instructions
  3. Access your primary and secondary Geo instances via 127.0.0.1:3000 and 127.0.0.1:3001.

Testing

  1. Access your primary GDK Geo Page (127.0.0.1:3000/admin/geo)
  2. Scroll down to the Replication Views
  3. Click on one of the links that have a progress bar next to it with data
  4. Ensure each list item renders and the actions work

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports