Update cube query generation UI

Match new designs. Show experiment badge. Secondary button styling.

Changelog: changed
EE: true

ee/app/assets/javascripts/analytics/analytics_dashboards/components/analytics_visualization_designer.vue

@@ -332,7 +332,7 @@ export default {
         <gl-form-group
           :label="s__('Analytics|Visualization title')"
           label-for="title"
-          class="gl-w-full gl-sm-w-30p gl-min-w-20"
+          class="gl-w-full gl-md-max-w-70p gl-lg-w-30p gl-min-w-20"
           data-testid="visualization-title-form-group"
           :invalid-feedback="titleValidationError"
           :state="!titleValidationError"
@@ -354,7 +354,7 @@ export default {
         </gl-form-group>
         <gl-form-group
           :label="s__('Analytics|Visualization type')"
-          class="gl-w-full gl-sm-w-30p gl-min-w-20 gl-m-0"
+          class="gl-w-full gl-md-max-w-70p gl-lg-w-30p gl-min-w-20 gl-m-0"
           data-testid="visualization-type-form-group"
           :invalid-feedback="typeValidationError"
           :state="!typeValidationError"

ee/app/assets/javascripts/analytics/analytics_dashboards/components/visualization_designer/ai_cube_query_generator.vue

 <script>
-import { GlButton, GlFormGroup, GlFormTextarea, GlIcon } from '@gitlab/ui';
+import { GlButton, GlExperimentBadge, GlFormGroup, GlFormTextarea, GlIcon } from '@gitlab/ui';
 import { v4 as uuidv4 } from 'uuid';
 
 import { fetchPolicies } from '~/lib/graphql';
@@ -13,6 +13,7 @@ export default {
   name: 'AiCubeQueryGenerator',
   components: {
     GlButton,
+    GlExperimentBadge,
     GlFormGroup,
     GlIcon,
     GlFormTextarea,
@@ -31,6 +32,11 @@ export default {
       skipSubscription: true,
     };
   },
+  computed: {
+    submitButtonIcon() {
+      return this.submitting ? undefined : 'tanuki-ai';
+    },
+  },
   methods: {
     async generateAiQuery() {
       if (this.submitting) return;
@@ -118,22 +124,34 @@ export default {
 <template>
   <gl-form-group>
     <template #label>
-      {{ s__('Analytics|Create with GitLab Duo') }}
-      <gl-icon name="tanuki-ai" class="gl-text-purple-600 gl-ml-1" />
+      <gl-icon name="tanuki-ai" class="gl-mr-1" />
+      {{ s__('Analytics|Create with GitLab Duo (optional)') }}
+      <gl-experiment-badge />
     </template>
+    <p class="gl-mb-3">
+      {{
+        s__(
+          'Analytics|GitLab Duo may be used to help generate your visualization. You can prompt Duo with your desired data, as well as any dimensions or additional groupings of that data. You may also edit the result as needed.',
+        )
+      }}
+    </p>
     <gl-form-textarea
       v-model="prompt"
-      :placeholder="s__('Analytics|Count of page views grouped weekly')"
+      :placeholder="s__('Analytics|Example: Number of users over time, grouped weekly')"
       :submit-on-enter="true"
+      class="gl-w-full gl-md-max-w-70p gl-lg-w-30p gl-min-w-20"
       data-testid="generate-cube-query-prompt-input"
       @submit="generateAiQuery"
     />
     <gl-button
       :loading="submitting"
+      category="secondary"
+      variant="confirm"
+      :icon="submitButtonIcon"
       class="gl-mt-3"
       data-testid="generate-cube-query-submit-button"
       @click="generateAiQuery"
-      >{{ s__('Analytics|Generate visualization') }}</gl-button
+      >{{ s__('Analytics|Generate with Duo') }}</gl-button
     >
   </gl-form-group>
 </template>

ee/spec/frontend/analytics/analytics_dashboards/components/visualization_designer/ai_cube_query_generator_spec.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { v4 as uuidv4 } from 'uuid';
+import { GlExperimentBadge } from '@gitlab/ui';
 
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 import generateCubeQueryMutation from 'ee/analytics/analytics_dashboards/graphql/mutations/generate_cube_query.mutation.graphql';
 import aiResponseSubscription from 'ee/graphql_shared/subscriptions/ai_completion_response.subscription.graphql';
@@ -25,9 +26,10 @@ describe('AiCubeQueryGenerator', () => {
     wrapper.findByTestId('generate-cube-query-prompt-input');
   const findGenerateCubeQuerySubmitButton = () =>
     wrapper.findByTestId('generate-cube-query-submit-button');
+  const findExperimentBadge = () => wrapper.findComponent(GlExperimentBadge);
 
-  const createWrapper = () => {
-    wrapper = shallowMountExtended(AiCubeQueryGenerator, {
+  const createWrapper = (mountFn = shallowMountExtended) => {
+    wrapper = mountFn(AiCubeQueryGenerator, {
       provide: {
         namespaceId: 'gid://gitlab/Namespace/1',
       },
@@ -41,7 +43,6 @@ describe('AiCubeQueryGenerator', () => {
   beforeEach(() => {
     window.gon = { current_user_id: 1 };
     uuidv4.mockImplementation(() => 'mock-uuid');
-    createWrapper();
   });
 
   afterEach(() => {
@@ -49,7 +50,14 @@ describe('AiCubeQueryGenerator', () => {
     aiResponseSubscriptionHandlerMock.mockReset();
   });
 
+  it('renders an experiment badge', () => {
+    createWrapper(mountExtended);
+
+    expect(findExperimentBadge().exists()).toBe(true);
+  });
+
   it('does not send a request when no prompt has been entered', async () => {
+    createWrapper();
     findGenerateCubeQuerySubmitButton().vm.$emit('click');
 
     await waitForPromises();
@@ -61,6 +69,8 @@ describe('AiCubeQueryGenerator', () => {
     const generatedQuery = TEST_VISUALIZATION().data.query;
 
     beforeEach(() => {
+      createWrapper();
+
       generateCubeQueryMutationHandlerMock.mockResolvedValue({
         data: { aiAction: { errors: [], __typename: 'AiActionPayload' } },
       });
@@ -97,6 +107,7 @@ describe('AiCubeQueryGenerator', () => {
 
     it('shows a loading indicator', () => {
       expect(findGenerateCubeQuerySubmitButton().props('loading')).toBe(true);
+      expect(findGenerateCubeQuerySubmitButton().props('icon')).toBe('');
     });
 
     describe('when aiCompletionResponse subscription returns a value', () => {
@@ -104,6 +115,7 @@ describe('AiCubeQueryGenerator', () => {
 
       it('stops loading', () => {
         expect(findGenerateCubeQuerySubmitButton().props('loading')).toBe(false);
+        expect(findGenerateCubeQuerySubmitButton().props('icon')).toBe('tanuki-ai');
       });
 
       it('emits generated query', () => {

locale/gitlab.pot

@@ -5542,13 +5542,10 @@ msgstr ""
 msgid "Analytics|Continue editing"
 msgstr ""
-msgid "Analytics|Count of page views grouped weekly"
-msgstr ""
-
 msgid "Analytics|Create dashboard %{dashboardSlug}"
 msgstr ""
-msgid "Analytics|Create with GitLab Duo"
+msgid "Analytics|Create with GitLab Duo (optional)"
 msgstr ""
 msgid "Analytics|Create your dashboard"
@@ -5629,13 +5626,19 @@ msgstr ""
 msgid "Analytics|Event Props"
 msgstr ""
+msgid "Analytics|Example: Number of users over time, grouped weekly"
+msgstr ""
+
 msgid "Analytics|Exclude anonymous users"
 msgstr ""
 msgid "Analytics|Failed to fetch data"
 msgstr ""
-msgid "Analytics|Generate visualization"
+msgid "Analytics|Generate with Duo"
+msgstr ""
+
+msgid "Analytics|GitLab Duo may be used to help generate your visualization. You can prompt Duo with your desired data, as well as any dimensions or additional groupings of that data. You may also edit the result as needed."
 msgstr ""
 msgid "Analytics|Host"