Add custom empty states to the credentials inventory

Problem to solve

In &4110 we're adding some new tabs to the credentials inventory view, some with custom empty states, this could result in a bunch of duplicate code. So it would be ideal if we could create a common method to show the custom empty state if one exists for each tab.

This was prompted by a discussion on !79645 (merged):

Click to expand

  • @rob.hunt started a discussion: (+1 comment)

    question: The issue has a defined empty state for when there are no project access tokens. However, we're just using the default empty state here.

    I think this is fine at the moment but it would be nice to update this to use the designed empty state. WDYT about having a follow-up to add custom empty states for each credential type?

    @aregnery I'd love to hear your thoughts on this too as I would assume we'd need to design custom empty states for each? Alternatively, we could use the same image for all and set the title and text underneath to be unique for each credential type.

    image

  • @aregnery replied:

    I think a follow-up makes sense to keep the change small @rob.hunt. Should the existing issue have its scope reduced, and create new ones for the different tabs? We'd also want to use the new illustration library option for empty-access-tokens.

    image

Proposal

If a custom empty state exists then render it, else show the default empty state.

Trigger tokens
Preview
illustrations_pipelines_pending.svg

No triggers have been created yet.

Triggers can force a specific branch or tag to get rebuilt with an API call. These tokens will impersonate their associated user including their access to projects and their project permissions.

Project access tokens
Preview
illustrations_empty-state_empty-deploy-keys-lg.svg

No project access tokens are active.

Project access tokens are scoped to a project and can be used to authenticate with the GitLab API.

Deploy tokens
Preview
illustrations_no-packages.svg

No deploy tokens have been created yet.

Deploy tokens allow access to packages, your repository, and registry images.

Deploy keys
Preview
illustrations_empty-state_empty-deploy-keys-lg.svg

Deploy keys allow read-only or read-write (if enabled) access to your repository

Deploy keys can be used for CI, staging or production servers. You can create a deploy key or add an existing one.

Confirm

Implementation plan

frontend weight of 2️⃣

  1. Create a common method to display the credentials inventory empty state for:
  2. If there is no custom empty state, then display a default one.
  3. Update specs.
Edited by Jiaan Louw