Merge branch...

Merge branch '428949-frontend-make-catalog-resource-id-become-the-fullpath-of-a-resource' into 'master' 

Make Catalog resource ID become the fullpath of a resource

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/137447



Merged-by: Avielle Wolfe <awolfe@gitlab.com>
Approved-by: Avielle Wolfe <awolfe@gitlab.com>
Approved-by: Jose Ivan Vargas <jvargas@gitlab.com>
Reviewed-by: Avielle Wolfe <awolfe@gitlab.com>
Co-authored-by: Frédéric Caplette <fcaplette@gitlab.com>

app/assets/javascripts/ci/catalog/components/details/ci_resource_components.vue

@@ -12,7 +12,7 @@ export default {
     GlTableLite,
   },
   props: {
-    resourceId: {
+    resourcePath: {
       type: String,
       required: true,
     },
@@ -27,7 +27,7 @@ export default {
       query: getCiCatalogResourceComponents,
       variables() {
         return {
-          id: this.resourceId,
+          fullPath: this.resourcePath,
         };
       },
       update(data) {

app/assets/javascripts/ci/catalog/components/details/ci_resource_details.vue

@@ -14,7 +14,7 @@ export default {
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
-    resourceId: {
+    resourcePath: {
       type: String,
       required: true,
     },
@@ -31,10 +31,10 @@ export default {
 <template>
   <gl-tabs>
     <gl-tab :title="$options.i18n.tabs.readme" lazy>
-      <ci-resource-readme :resource-id="resourceId" />
+      <ci-resource-readme :resource-path="resourcePath" />
     </gl-tab>
     <gl-tab v-if="glFeatures.ciCatalogComponentsTab" :title="$options.i18n.tabs.components" lazy>
-      <ci-resource-components :resource-id="resourceId"
+      <ci-resource-components :resource-path="resourcePath"
     /></gl-tab>
   </gl-tabs>
 </template>

app/assets/javascripts/ci/catalog/components/details/ci_resource_readme.vue

@@ -11,7 +11,7 @@ export default {
   },
   directives: { SafeHtml },
   props: {
-    resourceId: {
+    resourcePath: {
       type: String,
       required: true,
     },
@@ -26,7 +26,7 @@ export default {
       query: getCiCatalogResourceReadme,
       variables() {
         return {
-          id: this.resourceId,
+          fullPath: this.resourcePath,
         };
       },
       update(data) {

app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue

@@ -34,11 +34,17 @@ export default {
     authorProfileUrl() {
       return this.latestVersion.author.webUrl;
     },
-    detailsPageHref() {
+    resourceId() {
+      return cleanLeadingSeparator(this.resource.webPath);
+    },
+    detailsPageResolved() {
       return this.$router.resolve({
         name: CI_RESOURCE_DETAILS_PAGE_NAME,
-        params: { id: this.entityId },
-      }).href;
+        params: { id: this.resourceId },
+      });
+    },
+    detailsPageHref() {
+      return decodeURIComponent(this.detailsPageResolved.href);
     },
     entityId() {
       return getIdFromGraphQLId(this.resource.id);
@@ -79,10 +85,8 @@ export default {
       // open a new tab.
       e.preventDefault();
 
-      this.$router.push({
-        name: CI_RESOURCE_DETAILS_PAGE_NAME,
-        params: { id: this.entityId },
-      });
+      // Push to the decoded URL to avoid all the / being encoded
+      this.$router.push({ path: decodeURIComponent(this.resourceId) });
     },
   },
 };

app/assets/javascripts/ci/catalog/components/pages/ci_resource_details_page.vue

@@ -2,8 +2,7 @@
 import { GlEmptyState } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { createAlert } from '~/alert';
-import { convertToGraphQLId } from '~/graphql_shared/utils';
-import { CI_CATALOG_RESOURCE_TYPE } from '../../graphql/settings';
+import { cleanLeadingSeparator } from '~/lib/utils/url_utility';
 import getCatalogCiResourceDetails from '../../graphql/queries/get_ci_catalog_resource_details.query.graphql';
 import getCatalogCiResourceSharedData from '../../graphql/queries/get_ci_catalog_resource_shared_data.query.graphql';
 import CiResourceDetails from '../details/ci_resource_details.vue';
@@ -28,7 +27,7 @@ export default {
       query: getCatalogCiResourceSharedData,
       variables() {
         return {
-          id: this.graphQLId,
+          fullPath: this.cleanFullPath,
         };
       },
       update(data) {
@@ -43,7 +42,7 @@ export default {
       query: getCatalogCiResourceDetails,
       variables() {
         return {
-          id: this.graphQLId,
+          fullPath: this.cleanFullPath,
         };
       },
       update(data) {
@@ -56,8 +55,8 @@ export default {
     },
   },
   computed: {
-    graphQLId() {
-      return convertToGraphQLId(CI_CATALOG_RESOURCE_TYPE, this.$route.params.id);
+    cleanFullPath() {
+      return cleanLeadingSeparator(this.$route.params.id);
     },
     isLoadingDetails() {
       return this.$apollo.queries.resourceAdditionalDetails.loading;
@@ -103,7 +102,7 @@ export default {
         :pipeline-status="pipelineStatus"
         :resource="resourceSharedData"
       />
-      <ci-resource-details :resource-id="graphQLId" />
+      <ci-resource-details :resource-path="cleanFullPath" />
     </div>
   </div>
 </template>

app/assets/javascripts/ci/catalog/graphql/fragments/catalog_resource.fragment.graphql

 fragment CatalogResourceFields on CiCatalogResource {
   id
+  webPath
   icon
   name
   description
@@ -15,5 +16,4 @@ fragment CatalogResourceFields on CiCatalogResource {
       webUrl
     }
   }
-  webPath
 }

app/assets/javascripts/ci/catalog/graphql/queries/get_ci_catalog_resource_components.query.graphql

-query getCiCatalogResourceComponents($id: CiCatalogResourceID!) {
-  ciCatalogResource(id: $id) {
+query getCiCatalogResourceComponents($fullPath: ID!) {
+  ciCatalogResource(fullPath: $fullPath) {
     id
+    webPath
     components @client {
       nodes {
         id

app/assets/javascripts/ci/catalog/graphql/queries/get_ci_catalog_resource_details.query.graphql

-query getCiCatalogResourceDetails($id: CiCatalogResourceID!) {
-  ciCatalogResource(id: $id) {
+query getCiCatalogResourceDetails($fullPath: ID!) {
+  ciCatalogResource(fullPath: $fullPath) {
     id
+    webPath
     openIssuesCount
     openMergeRequestsCount
     versions(first: 1) {

app/assets/javascripts/ci/catalog/graphql/queries/get_ci_catalog_resource_readme.query.graphql

-query getCiCatalogResourceReadme($id: CiCatalogResourceID!) {
-  ciCatalogResource(id: $id) {
+query getCiCatalogResourceReadme($fullPath: ID!) {
+  ciCatalogResource(fullPath: $fullPath) {
     id
+    webPath
     readmeHtml
   }
 }

app/assets/javascripts/ci/catalog/graphql/queries/get_ci_catalog_resource_shared_data.query.graphql

 #import "../fragments/catalog_resource.fragment.graphql"
 
-query getCiCatalogResourceSharedData($id: CiCatalogResourceID!) {
-  ciCatalogResource(id: $id) {
+query getCiCatalogResourceSharedData($fullPath: ID!) {
+  ciCatalogResource(fullPath: $fullPath) {
     ...CatalogResourceFields
   }
 }

app/assets/javascripts/ci/catalog/graphql/settings.js

@@ -11,7 +11,8 @@ export const cacheConfig = {
           ciCatalogResource(_, { args, toReference }) {
             return toReference({
               __typename: 'CiCatalogResource',
-              id: args.id,
+              // Webpath is the fullpath with a leading slash
+              webPath: `/${args.fullPath}`,
             });
           },
           ciCatalogResources: {
@@ -19,6 +20,9 @@ export const cacheConfig = {
           },
         },
       },
+      CiCatalogResource: {
+        keyFields: ['webPath'],
+      },
     },
   },
 };

app/assets/javascripts/ci/catalog/index.js

@@ -27,6 +27,9 @@ export const initCatalog = (selector = '#js-ci-cd-catalog') => {
     name: 'GlobalCatalog',
     router: createRouter(ciCatalogPath, CiResourcesPage),
     apolloProvider,
+    provide: {
+      ciCatalogPath,
+    },
     render(h) {
       return h(GlobalCatalog);
     },

app/assets/javascripts/ci/catalog/router/routes.js

@@ -4,6 +4,6 @@ import { CI_RESOURCES_PAGE_NAME, CI_RESOURCE_DETAILS_PAGE_NAME } from './constan
 export const createRoutes = (listComponent) => {
   return [
     { name: CI_RESOURCES_PAGE_NAME, path: '', component: listComponent },
-    { name: CI_RESOURCE_DETAILS_PAGE_NAME, path: '/:id', component: CiResourceDetailsPage },
+    { name: CI_RESOURCE_DETAILS_PAGE_NAME, path: '/:id+', component: CiResourceDetailsPage },
   ];
 };

app/controllers/explore/catalog_controller.rb

@@ -23,7 +23,7 @@ def check_resource_access
     end
 
     def catalog_resource
-      ::Ci::Catalog::Listing.new(current_user).find_resource(id: params[:id])
+      ::Ci::Catalog::Listing.new(current_user).find_resource(full_path: params[:full_path])
     end
   end
 end

app/models/ci/catalog/listing.rb

@@ -30,8 +30,8 @@ def resources(namespace: nil, sort: nil, search: nil, scope: :all)
         end
       end
 
-      def find_resource(id:)
-        resource = Ci::Catalog::Resource.find_by_id(id)
+      def find_resource(id: nil, full_path: nil)
+        resource = id ? Ci::Catalog::Resource.find_by_id(id) : Project.find_by_full_path(full_path)&.catalog_resource
 
         return unless resource.present?
         return unless resource.published?

app/models/ci/catalog/resource.rb

@@ -31,12 +31,16 @@ class Resource < ::ApplicationRecord
       scope :order_by_latest_released_at_desc, -> { reorder(arel_table[:latest_released_at].desc.nulls_last) }
       scope :order_by_latest_released_at_asc, -> { reorder(arel_table[:latest_released_at].asc.nulls_last) }
 
-      delegate :avatar_path, :star_count, to: :project
+      delegate :avatar_path, :star_count, :full_path, to: :project
 
       enum state: { draft: 0, published: 1 }
 
       before_create :sync_with_project
 
+      def to_param
+        full_path
+      end
+
       def unpublish!
         update!(state: :draft)
       end

config/routes/explore.rb

@@ -11,7 +11,10 @@
   end
 
   resources :groups, only: [:index]
-  resources :catalog, only: [:index, :show], constraints: { id: /\d+/ }
+  scope :catalog do
+    get '/' => 'catalog#index', as: :catalog_index
+    get '/*full_path' => 'catalog#show', as: :catalog
+  end
   resources :snippets, only: [:index]
   root to: 'projects#index'
 end

spec/features/explore/catalog/catalog_spec.rb

@@ -114,11 +114,11 @@
     let_it_be(:project) { create(:project, :repository, namespace: namespace) }
 
     before do
-      visit explore_catalog_path(id: new_ci_resource["id"])
+      visit explore_catalog_path(new_ci_resource)
     end
 
     context 'when the resource is published' do
-      let_it_be(:new_ci_resource) { create(:ci_catalog_resource, :published, project: project) }
+      let(:new_ci_resource) { create(:ci_catalog_resource, :published, project: project) }
 
       it 'navigates to the details page' do
         expect(page).to have_content('Go to the project')
@@ -126,7 +126,7 @@
     end
 
     context 'when the resource is not published' do
-      let_it_be(:new_ci_resource) { create(:ci_catalog_resource, project: project, state: :draft) }
+      let(:new_ci_resource) { create(:ci_catalog_resource, project: project, state: :draft) }
 
       it 'returns a 404' do
         expect(page).to have_title('Not Found')

spec/frontend/ci/catalog/components/details/ci_resource_components_spec.js

@@ -19,9 +19,9 @@ describe('CiResourceComponents', () => {
 
   const components = mockComponents.data.ciCatalogResource.components.nodes;
 
-  const resourceId = 'gid://gitlab/Ci::Catalog::Resource/1';
+  const resourcePath = 'twitter/project-1';
 
-  const defaultProps = { resourceId };
+  const defaultProps = { resourcePath };
 
   const createComponent = async () => {
     const handlers = [[getCiCatalogcomponentComponents, mockComponentsResponse]];

spec/frontend/ci/catalog/components/details/ci_resource_details_spec.js

@@ -8,7 +8,7 @@ describe('CiResourceDetails', () => {
   let wrapper;
 
   const defaultProps = {
-    resourceId: 'gid://gitlab/Ci::Catalog::Resource/1',
+    resourcePath: 'twitter/project-1',
   };
   const defaultProvide = {
     glFeatures: { ciCatalogComponentsTab: true },