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_widget component. 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 HomepageApp component? 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 UserCountLink component 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?

Edited by 🤖 GitLab Bot 🤖