<!-- This template is a great use for issues that are feature::additions or technical tasks for larger issues.--> ### Problem Data is not currently readable in all viewports within the admin area runners table. The columns quickly collapse and data becomes overlapped. Not all of the data shown in the columns are equally important, but are treated that way. We want to add more data to the table (like an `owner` and `creator` of runners), and that is not possible in the current table format. This acts as an additional follow-on to https://gitlab.com/gitlab-org/gitlab/-/issues/340324/. The goal is to use the outcomes of https://gitlab.com/gitlab-org/gitlab/-/issues/340029 to apply new list view design standards to the runner tables. **JTBD:** `When I am managing the execution of many CI jobs, I want an overall understanding of the job execution agents connected to my organization, so I can make effective decisions.` ### User experience goal The goal of this additional redesign is to improve consistency throughout our table/list views and increase the flexibility of adding more data to the table, as well as improving the readability of that data. ### Proposal These changes should be developed behind a frontend-only feature flag. We should enable this for gitlab.com first and gather feedback. We can then make any iterations necessary before enabling for all users. ✨ [Designs in design management](https://gitlab.com/gitlab-org/gitlab/-/issues/343133/designs/New-table-design.png) 🎨 [Figma](https://www.figma.com/file/BR7uFYXKi098NhwjnaR0cu/Fleet-Management?node-id=1445%3A196543) <!-- Use this section to explain the feature and how it will work. It can be helpful to add technical details, design proposals, and links to related epics or issues. --> <!-- Consider adding related issues and epics to this issue. You can also reference the Feature Proposal Template (https://gitlab.com/gitlab-org/gitlab/-/blob/master/.gitlab/issue_templates/Feature%20proposal%20-%20detailed.md) for additional details to consider adding to this issue. Additionally, as a data oriented organization, when your feature exits planning breakdown, consider adding the `What does success look like, and how can we measure that?` section. --> ### UX Definition of Done 1️⃣ **VALIDATION TRACK** **Problem Validation Phase** - [x] Problem is well understood and has been validated - [x] JTBD is well understood and has been validated - [x] PM has communicated the opportunity canvas to stable counterparts and group stakeholders, including the Product Designer and Product Design Manager **Design Phase** - [x] Document the JTBD and UX goal in the issue/epic description - [x] Explore multiple different approaches as a team - [x] Discuss the technical implications with Engineering - [x] Identify any potential cross-team dependencies and include the DRIs in the discussions - [x] **‼️ Blocker to getting this into ~"workflow::ready for development"** Identify a small set of options to [validate](https://gitlab.com/gitlab-org/ux-research/-/issues/1940) - [x] Document the user story(ies) for the MVC - [x] Consider edge cases for each user story - [x] Create prototypes or mockups for each user story - [x] [Pajamas component lifecyle](https://design.gitlab.com/get-started/lifecycle) - [x] Identify component design or pattern update/creation - [x] Discuss the technical implications with Engineering - [x] Pajamas issue is created (within the scope of the MVC) - [x] Update issues/epic descriptions - [x] The appropriate [labels](https://about.gitlab.com/handbook/engineering/ux/ux-department-workflow/#how-we-use-labels) were applied - [x] If changes involve copy, add the ~"Technical Writing" and ~"UI text" labels - [x] Proposed solution(s) identified and documented in the issue/epic description **Solution Validation Phase** - [x] Validate the solution to increase confidence in the proposed solution - [x] Document the solution validation learnings - [x] Product Designer has communicated the solution validation learnings to stable counterparts and group stakeholders, including the Product Design Manager - [x] Update the MVC proposal with relevant insights from the solution validation - [x] Discuss the technical implications with Engineering - [ ] Update issue/epic description to contain or link to the findings 2️⃣ **BUILD TRACK** [**Plan Phase**](https://about.gitlab.com/handbook/product-development-flow/#build-phase-1-plan) - [ ] Proposal is ready to be broken down and prioritized by PM for development **Develop & Test Phase** - [ ] Product Designer reviewed MRs that include user-facing changes, as per the [Code Review Guidelines](https://docs.gitlab.com/ee/development/code_review.html) - [ ] UX Debt issues have been identified and assigned to a milestone