Visualization designer - Move type selector to inline

Problem to solve

As part of Improve layout of the filtered search visualiza... (#463790 - closed) we want to move the visualization type selector to be inline with the filtered search query builder.

Design

Implementation plan

frontend

• Update analytics_visualization_designer.vue so that the type selector is inline with the query builder.
• Update the specs.

Click to see patch

diff --git a/ee/app/assets/javascripts/analytics/analytics_dashboards/components/analytics_visualization_designer.vue b/ee/app/assets/javascripts/analytics/analytics_dashboards/components/analytics_visualization_designer.vue
index 846746d6c31a..771c2327bf52 100644
--- a/ee/app/assets/javascripts/analytics/analytics_dashboards/components/analytics_visualization_designer.vue
+++ b/ee/app/assets/javascripts/analytics/analytics_dashboards/components/analytics_visualization_designer.vue
@@ -320,7 +320,7 @@ export default {
         </gl-sprintf>
       </p>
     </header>
-    <section class="gl-display-flex gl-mb-6">
+    <section class="gl-display-flex">
       <div class="gl-display-flex flex-fill gl-flex-direction-column">
         <gl-form-group
           :label="s__('Analytics|Visualization title')"
@@ -345,18 +345,6 @@ export default {
             @input="validateTitle"
           />
         </gl-form-group>
-        <gl-form-group
-          :label="s__('Analytics|Visualization type')"
-          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"
-        >
-          <visualization-type-selector
-            ref="typeSelector"
-            v-model="selectedVisualizationType"
-            data-testid="visualization-type-dropdown"
-            @input="onVisualizationTypeChange"
-          />
-        </gl-form-group>
       </div>
     </section>
     <ai-cube-query-generator
@@ -380,15 +368,28 @@ export default {
         @vizStateChange="onVizStateChange"
       >
         <template #builder="{ availableMeasures, availableDimensions, availableTimeDimensions }">
-          <visualization-filtered-search
-            :query="queryState.query"
-            :available-measures="availableMeasures"
-            :available-dimensions="availableDimensions"
-            :available-time-dimensions="availableTimeDimensions"
-            data-testid="visualization-filtered-search"
-            @input="onFilterChange"
-            @submit="onFilterChange"
-          />
+          <div class="gl-display-flex gl-w-full gl-gap-3 gl-mt-4 gl-pb-3 gl-flex-direction-column gl-md-flex-direction-row gl-border-b">
+            <gl-form-group
+              class="gl-w-full gl-max-w-20 gl-min-w-20 gl-min-w gl-sm-w-full! gl-m-0"
+              data-testid="visualization-type-form-group"
+            >
+              <visualization-type-selector
+                ref="typeSelector"
+                v-model="selectedVisualizationType"
+                data-testid="visualization-type-dropdown"
+                @input="onVisualizationTypeChange"
+              />
+            </gl-form-group>
+            <visualization-filtered-search
+              :query="queryState.query"
+              :available-measures="availableMeasures"
+              :available-dimensions="availableDimensions"
+              :available-time-dimensions="availableTimeDimensions"
+              data-testid="visualization-filtered-search"
+              @input="onFilterChange"
+              @submit="onFilterChange"
+            />
+          </div>
         </template>
 
         <template #default="{ resultSet, isQueryPresent, loading }">
diff --git a/ee/app/assets/javascripts/analytics/analytics_dashboards/components/visualization_designer/filters/visualization_filtered_search.vue b/ee/app/assets/javascripts/analytics/analytics_dashboards/components/visualization_designer/filters/visualization_filtered_search.vue
index 3a77cc6a2716..f8ad77e05062 100644
--- a/ee/app/assets/javascripts/analytics/analytics_dashboards/components/visualization_designer/filters/visualization_filtered_search.vue
+++ b/ee/app/assets/javascripts/analytics/analytics_dashboards/components/visualization_designer/filters/visualization_filtered_search.vue
@@ -180,7 +180,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-w-full gl-py-5 gl-border-b">
+  <div class="gl-w-full gl-py-3">
     <gl-filtered-search
       :value="value"
       :available-tokens="availableTokens"

inline_type.patch

changed milestone to %17.3

added featureenhancement frontend groupproduct analytics typefeature workflowready for development labels

marked this issue as related to #463790 (closed)

added devopsmonitor sectionanalytics labels

set weight to 1

mentioned in epic &14522

added to epic &14522

mentioned in issue gitlab-org/quality/triage-reports#18803 (closed)

mentioned in issue gitlab-org/quality/triage-reports#18916 (closed)

assigned to @jiaan

added workflowin dev label and removed workflowready for development label

mentioned in merge request !161314 (merged)

added workflowin review label and removed workflowin dev label

added workflowverification label and removed workflowin review label

Verified on staging.

closed

The workflow label was automatically updated to workflowcomplete because you closed the issue while in workflowverification.

If this is not the correct label, please update.

To avoid this message, update the workflow label as you close the issue. This message was generated automatically. You're welcome to improve it.

added workflowcomplete label and removed workflowverification label