Group visibility prevents viewing Code Owners in the MR widget

Summary

If a standalone group has been configured as a Code Owner for a project, the behaviour of displaying Code Owners is different when viewing a project's files:

versus when viewing the Code Owners in a merge request:

As shown above, the Code Owners for file3.py are not displayed in the merge request, but are visible if viewing the file directly. This occurs if the user viewing the MR has no visibility to the Code Owners group.

Steps to reproduce

1. Create groupa.
2. Create projecta under groupa. Full path: groupa/projecta.
3. Create groupb
4. Create users UserAD and UserAM, add them to groupa, with Developer and Maintainer permissions respectively.
5. Create users UserBD and UserBM, add them to groupb, with Developer and Maintainer permissions respectively.
6. Invite groupb to projecta. Review the below screenshot for an example of the project members view.
7. Create a CODEOWNERS file similar to what is provided below.
8. Create a directory: directory, along with two files: file2.py and file3.py.
9. Confirm that CODEOWNER approvals have been enabled in Settings > Repository > Protected Branches
10. As user UserAD, create a new branch and prepare a change to all the files/folders. Create an MR.
11. Note that the MR Code Owners approval will not display the Code Owners for file3.py, because UserAD has no visibility of groupb.
12. Navigate to file3.py directly in the Repository UI. Note that you can see the group members as Code Owners.

Example CODEOWNERS:

directory/ @groupa
file2.py @UserAM
file3.py @groupb

Example Project Members:

What is the current bug behavior?

There is inconsistency on when the Code Owners of a file are displayed. As discussed in this thread, we should be displaying the Code Owners in the MR widget, even if group permissions would otherwise hide the users.

What is the expected correct behavior?

Code Owners are displayed in the MR widget.

Possible fixes

From a quick analysis, it looks like the MR widget and Repository UI use two different methods of "pulling" Code Owners:

MR Widget

The MR Widget seems to check against approval rules, by getting the state of approval rules. Depending on the user's visibility of the group, their UI may think the rule is invalid, and using the API, the user sees this result:

"invalid_approvers_rules": [
        {
            "id": 89,
            "name": "file3.py",
            "rule_type": "code_owner"
        }
    ]

Code Owners Vue Component

We seem to make a GraphQL query using codeOwnersInfoQuery (seen here) which allows the user to get a list of Code Owners from the project. Using my above example, provided below is a GraphQL response:

{
  "data": {
    "project": {
      "name": "projecta",
      "repository": {
        "blobs": {
          "nodes": [
            {
              "id": "gid://gitlab/Blob/e69de29bb2d1d6434b8b29ae775ad8c2e48c5391",
              "codeOwners": [
                {
                  "id": "gid://gitlab/User/1",
                  "name": "Administrator",
                  "webPath": "/root"
                },
                {
                  "id": "gid://gitlab/User/26",
                  "name": "UserBM",
                  "webPath": "/UserBM"
                },
                {
                  "id": "gid://gitlab/User/27",
                  "name": "UserBD",
                  "webPath": "/UserBD"
                }
              ]
            }
          ]
        }
      }
    }
  }
}