Refactor homepage's work items and MRs widgets
The following discussions from !205029 (merged) should be addressed:
-
@pgascouvaillancourt started a discussion: thought: I initially resisted the urge to abstract these widgets' shared bits out to some
base_widgetcomponent. I didn't want to over engineer things as we were starting the homepage work.A few months in, I now feel like these widgets have grown complex enough that it'd be worth an abstraction layer to ensure they both are in sync. Maybe an idea for a follow-up refactor issue?
-
@pgascouvaillancourt started a discussion: thought: More refactoring thoughts. It looks like we actually have 4 widgets instead of the original 2. Wouldn't the layout be much easier to deal with if all 4 widgets were direct children of the
HomepageAppcomponent? This way, the parent component would be 100% responsible for managing the grid layout, and we wouldn't have to deal with nested grids.Combined with my previous suggestion, we could create some
UserCountLinkcomponent or something (we'll need a better name than that😅 ) which would expose some props/slots for the links, labels, error messages GraphQL queries, etc. The homepage would then render them all in a responsive grid layout, with the proper props.<div class="gl-grid gl-grid-cols-2 gl-gap-5 @lg/panel:gl-grid-cols-4"> <user-count-link :label="s__('HomePageWorkItemsWidget|Work items assigned to you')" /> <user-count-link :label="s__('HomePageWorkItemsWidget|Issues assigned to you')" /> <user-count-link :label="s__('HomePageMergeRequestsWidget|Merge requests waiting for your review')" /> <user-count-link :label="s__('HomePageMergeRequestsWidget|Merge requests assigned to you')" /> </div>WDYT?