Rework Duo panel trial and access-denied empty states

What does this MR do and why?

This MR reworks two empty states in the GitLab Duo chat panel. Both are shown when a namespace has no GitLab Duo access yet:

  • The start-trial state, shown to users who can start a trial (typically group Owners).
  • The access-denied state, shown to everyone else.

Implementation notes:

  • The "Get things done" card is a new shared component, duo_workflow_examples_card.vue, used by both states.
  • DuoChatPanel::StartTrialComponent emits a new buy_credits_path data attribute. chat_panel_config.js passes it through as a prop to the blocked-state view and then to the start-trial state.
  • Two new internal event labels, click_duo_agentic_not_available_empty_state_buy_credits and click_duo_agentic_not_available_empty_state_learn_more_credits, with event definitions added under ee/config/events/.
  • The access-denied component dropped its containerType prop, since the new copy always says "group".

This is a net improvement, not an experiment, and ships without a feature flag. The design is in Figma; the issue holds the link.

Changelog: changed, EE only.

References

Screenshots or screen recordings

Panel captured on GDK in SaaS mode, 400 px wide.

State Before After
Group Owner who can buy credits (start-trial state) owner_before owner_credits_after
Owner without a purchase path, e.g. personal namespace project (start-trial state) same as above owner_no_credits_after
Developer in the group (access-denied state) developer_before developer_after

How to set up and validate locally

  1. Run GDK in SaaS mode: export GITLAB_SIMULATE_SAAS=1 before starting or restarting rails-web.
  2. Create a group on the Free plan with no GitLab Duo add-on or trial. Add one user as Owner and another as Developer.
  3. Sign in as the Owner, open any page inside the group, and open the GitLab Duo panel from the right side of the top bar. You should see the start-trial state with the trial card, the credits card, and the "Get things done" card. The "Buy credits" button should point at the Customers Portal purchase-credits URL for the group.
  4. Sign in as the Developer and repeat. You should see the access-denied state with the new heading and description, and only the "Get things done" card.
  5. Optional: as the Owner, open a project in your personal namespace. You should see the start-trial state without the credits card and with the shorter description.
  6. Optional: run the specs:
    • yarn jest ee/spec/frontend/ai/duo_agentic_chat/components ee/spec/frontend/ai/utils/chat_panel_config_spec.js
    • bin/rspec ee/spec/components/duo_chat_panel/start_trial_component_spec.rb

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Roy Liu

Merge request reports

Loading
Loading