Skip to content

Add Empty state for the components details

What does this MR do and why?

If there are no components to display in the components tab of the CI/CD catalog, we want to display an empty state. This is behind a disabled FF ci_catalog_components_tab

Screenshots or screen recordings

Before After
Screenshot_2023-10-24_at_2.43.09_PM Screenshot_2023-10-25_at_9.31.10_AM

How to set up and validate locally

  1. Make sure you have an premium license for your GDK
  2. Login as an admin user
  3. Create a few projects that you will be able to convert to Ci resources. Create them under the admin namespace for ease of testing.
  4. Once you have done so, get the ID of the first new project you wanted to convert. Then in Rails console, run:
projects = Project.where("id > ?", your_first_project_id)
projects.each do |project|
  project.update!(description: 'description')  
  ::Ci::Catalog::Resource.new(project_id: project.id).save   
end  
  1. Navigate to /$namespace/$project/-/ci/catalog/resources/. Any project under the same namespace will do (in this case, anything under the admin namespace)
  2. Click on a resource
  3. Notice the components tab is not present
  4. Open your rails console and execute: Feature.enable(:ci_catalog_components_tab)
  5. Apply the following diff. This is because we are using mock data, so you will never see the empty state 😅 This will simulate getting an empty response:
diff --git a/app/assets/javascripts/ci/catalog/components/details/ci_resource_components.vue b/app/assets/javascripts/ci/catalog/components/details/ci_resource_components.vue
index 44daa349358..526e25e053b 100644
--- a/app/assets/javascripts/ci/catalog/components/details/ci_resource_components.vue
+++ b/app/assets/javascripts/ci/catalog/components/details/ci_resource_components.vue
@@ -30,7 +30,7 @@ export default {
         };
       },
       update(data) {
-        return data?.ciCatalogResource?.components?.nodes || [];
+        return [];
       },
       error() {
         createAlert({ message: this.$options.i18n.fetchError });
  1. Notice that you see the empty state!

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #429273 (closed)

Edited by Frédéric Caplette

Merge request reports