Frontend (Tanu-Key): Empty state UI

Summary

Create an empty state for the Secrets Manager that provides a clear call to action and includes brief feature text to help users get started.

Implementation plan

In secrets_table.vue, when this.secretsCount === 0 && !this.$apollo.queries.secrets.loading:

• show a GlEmptyState (instead of the <gl-card>) with the slots/props:
  • title:
    • Use secrets to secure your sensitive information or
    • Secure your sensitive information
    • (see discussion for decision or ask during review)
  • description:
    • A secret is a sensitive credential that should be kept confidential. or
    • Use the Secrets Manager to store your sensitive credentials, and then safely use them in your processes. (see discussion for decision or ask during review)
    • We can leave out the "Learn more" link for now because we don't know where it should go yet (we'll cover this later in #470663)
  • actions: one <gl-button :to="$options.NEW_ROUTE_NAME"> with the label Add secret or New secret
    • there's a discussion about the name of this button in the Figma
    • #477584 will separately take care of hiding this button if the user doesn't have permission to create secrets
  • svgPath: use the empty-secrets-md illustration

In secrets_table_spec.js, add a test to check for the presence of the empty state when the conditions are met.

Other notes

• The empty state could be a separate component to keep things tidy
• Here's an example empty state with a <gl-button>: app/assets/javascripts/alert_management/components/alert_management_empty_state.vue

Links/References

Design SSOT: Figma link