Merge branch '428153-duo_chat_beta' into 'master'

Introduced the switch to Beta for Duo Chat

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



Merged-by: Phil Hughes <me@iamphill.com>
Approved-by: Phil Hughes <me@iamphill.com>
Approved-by: Tomas Vik <tvik@gitlab.com>
Reviewed-by: Phil Hughes <me@iamphill.com>
Co-authored-by: Denys Mishunov <dmishunov@gitlab.com>

ee/app/assets/javascripts/ai/tanuki_bot/components/app.vue

@@ -12,6 +12,7 @@ import aiResponseSubscription from 'ee/graphql_shared/subscriptions/ai_completio
 import getAiMessages from 'ee/ai/graphql/get_ai_messages.query.graphql';
 import chatMutation from 'ee/ai/graphql/chat.mutation.graphql';
 import Tracking from '~/tracking';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { i18n, GENIE_CHAT_RESET_MESSAGE } from 'ee/ai/constants';
 import { TANUKI_BOT_TRACKING_EVENT_NAME } from '../constants';
 
@@ -37,7 +38,7 @@ export default {
   components: {
     GlDuoChat,
   },
-  mixins: [Tracking.mixin()],
+  mixins: [Tracking.mixin(), glFeatureFlagsMixin()],
   provide() {
     return {
       renderMarkdown,
@@ -174,6 +175,7 @@ export default {
       :is-loading="loading"
       :predefined-prompts="$options.i18n.predefinedPrompts"
       :experiment-help-page-url="$options.experimentHelpPagePath"
+      :badge-type="glFeatures.duoChatBeta ? 'beta' : 'experiment'"
       :badge-help-page-url="$options.experimentHelpPagePath"
       :tool-name="toolName"
       @send-chat-prompt="onSendChatPrompt"

ee/config/feature_flags/development/duo_chat_beta.yml

+---
+name: duo_chat_beta
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/136059
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/430071
+milestone: '16.6'
+type: development
+group: group::ai framework
+default_enabled: false

ee/lib/ee/gitlab/gon_helper.rb

@@ -27,6 +27,8 @@ def add_gon_variables
           gon.payment_form_url                 = ::Gitlab::Routing.url_helpers.subscription_portal_payment_form_url
           gon.payment_validation_form_id       = ::Gitlab::SubscriptionPortal::PAYMENT_VALIDATION_FORM_ID
         end
+
+        push_frontend_feature_flag(:duo_chat_beta)
       end
 
       # Exposes if a licensed feature is available.

ee/spec/frontend/ai/tanuki_bot/components/app_spec.js

@@ -44,10 +44,11 @@ describe('GitLab Duo Chat', () => {
   const chatMutationHandlerMock = jest.fn().mockResolvedValue(MOCK_TANUKI_BOT_MUTATATION_RES);
   const queryHandlerMock = jest.fn().mockResolvedValue(MOCK_CHAT_CACHED_MESSAGES_RES);
 
-  const createComponent = (
+  const createComponent = ({
     initialState = {},
     propsData = { userId: MOCK_USER_ID, resourceId: MOCK_RESOURCE_ID },
-  ) => {
+    glFeatures = { duoChatBeta: false },
+  } = {}) => {
     const store = new Vuex.Store({
       actions: actionSpies,
       state: {
@@ -65,6 +66,9 @@ describe('GitLab Duo Chat', () => {
       store,
       apolloProvider,
       propsData,
+      provide: {
+        glFeatures,
+      },
     });
   };
 
@@ -95,6 +99,18 @@ describe('GitLab Duo Chat', () => {
     it('renders the DuoChat component', () => {
       expect(findGlDuoChat().exists()).toBe(true);
     });
+
+    it.each`
+      isFlagEnabled | expectedPropValue
+      ${true}       | ${'beta'}
+      ${false}      | ${'experiment'}
+    `(
+      'sets correct `badge-type` prop on the chat compnent when feature flag is $isFlagEnabled',
+      ({ isFlagEnabled, expectedPropValue }) => {
+        createComponent({ glFeatures: { duoChatBeta: isFlagEnabled } });
+        expect(findGlDuoChat().props('badgeType')).toBe(expectedPropValue);
+      },
+    );
   });
 
   describe('events handling', () => {
@@ -138,7 +154,7 @@ describe('GitLab Duo Chat', () => {
         `(
           'calls correct GraphQL mutation with fallback to userId when input is submitted and feature flag is $isFlagEnabled',
           async ({ expectedMutation } = {}) => {
-            createComponent({}, { userId: MOCK_USER_ID, resourceId });
+            createComponent({ propsData: { userId: MOCK_USER_ID, resourceId } });
             findGlDuoChat().vm.$emit('send-chat-prompt', MOCK_USER_MESSAGE.msg);
 
             await nextTick();
@@ -154,7 +170,10 @@ describe('GitLab Duo Chat', () => {
         it('once response arrives via GraphQL subscription with userId fallback calls addDuoChatMessage', () => {
           subscriptionHandlerMock.mockClear();
 
-          createComponent({ loading: true }, { userId: MOCK_USER_ID, resourceId });
+          createComponent({
+            initialState: { loading: true },
+            propsData: { userId: MOCK_USER_ID, resourceId },
+          });
 
           expect(subscriptionHandlerMock).toHaveBeenNthCalledWith(1, {
             userId: MOCK_USER_ID,