Fix alignment of analytics dropdowns

Ensures the dropdown text is left aligned and
the arrow right aligned.

Brings parity to the responsive view of VSA
and productivity analytics

ee/app/assets/javascripts/analytics/cycle_analytics/components/base.vue

@@ -222,7 +222,6 @@ export default {
   },
   maxDateRange: DATE_RANGE_LIMIT,
   STAGE_ACTIONS,
-  commonFilterClasses: ['gl-display-flex gl-flex-direction-column gl-md-flex-direction-row'],
 };
 </script>
 <template>
@@ -242,36 +241,34 @@ export default {
           />
         </div>
         <div
-          :class="$options.commonFilterClasses"
-          class="gl-justify-content-space-between gl-align-items-center"
+          class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-justify-content-space-between"
         >
-          <groups-dropdown-filter
-            v-if="!hideGroupDropDown"
-            class="js-groups-dropdown-filter"
-            :query-params="$options.groupsQueryParams"
-            :default-group="selectedGroup"
-            @selected="onGroupSelect"
-          />
-          <projects-dropdown-filter
-            v-if="shouldDisplayFilters"
-            :key="selectedGroup.id"
-            class="js-projects-dropdown-filter gl-ml-0"
-            :group-id="selectedGroup.id"
-            :query-params="$options.projectsQueryParams"
-            :multi-select="$options.multiProjectSelect"
-            :default-projects="selectedProjects"
-            @selected="onProjectsSelect"
-          />
+          <div class="dropdown-container d-flex flex-column flex-lg-row">
+            <groups-dropdown-filter
+              v-if="!hideGroupDropDown"
+              class="js-groups-dropdown-filter"
+              :class="{ 'mr-lg-3': shouldDisplayFilters }"
+              :query-params="$options.groupsQueryParams"
+              :default-group="selectedGroup"
+              @selected="onGroupSelect"
+            />
+            <projects-dropdown-filter
+              v-if="shouldDisplayFilters"
+              :key="selectedGroup.id"
+              class="project-select"
+              :group-id="selectedGroup.id"
+              :query-params="$options.projectsQueryParams"
+              :multi-select="$options.multiProjectSelect"
+              :default-projects="selectedProjects"
+              @selected="onProjectsSelect"
+            />
+          </div>
           <filter-bar
             v-if="featureFlags.hasFilterBar"
-            class="js-filter-bar filtered-search-box gl-display-flex gl-mt-3 mt-md-0 mx-2"
+            class="js-filter-bar filtered-search-box gl-display-flex gl-mt-3 mt-md-0 gl-mr-3"
             :disabled="!hasProject"
           />
-          <div
-            v-if="shouldDisplayFilters"
-            :class="$options.commonFilterClasses"
-            class="gl-justify-content-end gl-white-space-nowrap"
-          >
+          <div v-if="shouldDisplayFilters" class="gl-justify-content-end gl-white-space-nowrap">
             <date-range
               :start-date="startDate"
               :end-date="endDate"

ee/app/assets/javascripts/analytics/shared/components/daterange.vue

@@ -78,7 +78,7 @@ export default {
 <template>
   <div
     v-if="show"
-    class="daterange-container d-flex flex-column flex-lg-row align-items-lg-center justify-content-lg-end"
+    class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row align-items-lg-center justify-content-lg-end"
   >
     <gl-daterange-picker
       v-model="dateRange"

ee/app/assets/javascripts/analytics/shared/components/groups_dropdown_filter.vue

@@ -116,7 +116,7 @@ export default {
 <template>
   <gl-dropdown ref="groupsDropdown" class="dropdown dropdown-groups" toggle-class="gl-shadow-none">
     <template #button-content>
-      <div class="gl-display-flex">
+      <div class="gl-display-flex gl-flex-fill-1">
         <gl-avatar
           v-if="selectedGroup.name"
           :src="selectedGroup.avatar_url"
@@ -128,8 +128,8 @@ export default {
           class="gl-display-inline-flex gl-vertical-align-middle gl-mr-2"
         />
         {{ selectedGroupName }}
-        <gl-icon class="gl-ml-2" name="chevron-down" />
       </div>
+      <gl-icon class="gl-ml-2" name="chevron-down" />
     </template>
     <gl-dropdown-header>{{ __('Groups') }}</gl-dropdown-header>
     <gl-search-box-by-type v-model.trim="searchTerm" class="gl-m-3" />

ee/app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue

@@ -140,7 +140,7 @@ export default {
     toggle-class="gl-shadow-none"
   >
     <template #button-content>
-      <div class="gl-display-flex">
+      <div class="gl-display-flex gl-flex-fill-1">
         <gl-avatar
           v-if="isOnlyOneProjectSelected"
           :src="selectedProjects[0].avatar_url"
@@ -152,8 +152,8 @@ export default {
           class="gl-display-inline-flex gl-vertical-align-middle gl-mr-2"
         />
         {{ selectedProjectsLabel }}
-        <gl-icon class="gl-ml-2" name="chevron-down" />
       </div>
+      <gl-icon class="gl-ml-2" name="chevron-down" />
     </template>
     <gl-dropdown-header>{{ __('Projects') }}</gl-dropdown-header>
     <gl-search-box-by-type v-model.trim="searchTerm" class="gl-m-3" />

ee/app/views/groups/analytics/productivity_analytics/show.html.haml

@@ -8,7 +8,7 @@
       = _('Productivity Analytics')
   .row-content-block.second-block.d-flex.flex-column.flex-lg-row.mt-3.py-2.px-3
     .js-group-project-select-container
-    .js-search-bar.filter-container.hide
+    .js-search-bar.filter-container.hide.gl-mr-0.mr-lg-3
       = render 'shared/issuable/search_bar', type: :productivity_analytics, placeholder: _('Filter results...')
     .js-timeframe-container{ data: { start_date: ProductivityAnalytics.start_date } }
   .js-productivity-analytics-app-container{ data: { endpoint: group_analytics_productivity_analytics_path(@group), empty_state_svg_path: image_path('illustrations/productivity-analytics-empty-state.svg'), no_access_svg_path: image_path('illustrations/analytics/no-access.svg') } }