Frontend: Make Catalog resource ID become the fullpath of a resource

Description

We want to change the CI resources urls to not use an actual numbered ID, but the full path of the ci resource, so from explore/catalog/1 to explore/catalog/gitlab-org/sast.

However there are some unknown, because this is not a pure rails app. Although this would make the route valid, we still need to fetch resources through a graphql ID. So if a user navigates to explore/catalog/gitlab-org/sast, how would the client know which resource to fetch?

Proposal

I think that the simple answer is that the graphql query to get resources should support getting either the numbered ID or the fullpath of a resource.

Then when a user lands on /gitlab-org/sast, the client will execute the following graphql query:

query getCiCatalogResourceDetails($fullPath # This should be the `/gitlab-org/sast` value`) {
  ciCatalogResource(fullPath: $fullPath) {
    ...allDetailsFields 

Historic context

!133885 (comment 1610097249)

From @fabiopitino

As per feedback from Kamil it would be better to use a human-readable ID like the resource path (project path): explore/catalog/gitlab-org/sast

Answer from @f_caplette

There is some unknowns for me here as to how the frontend will map to the API because we do use vue-router and this means doing some additional work there as well. [...] tie in the full path routes with the Frontend graphql fetching.

Implementation Table

Group Issue Link
backend Backend: Make ciCatalogResource accept a fullpa... (#429100 - closed)
backend Backend: Support fetching versioned README for ... (#429279 - closed)
frontend 👈 You are here
Edited by Leaminn Ma