Add prop for date picker content alignment

elastic · Mar 4, 2020 · 0632065 · 0632065
1 parent 28544b9
commit 0632065
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 1 deletion.
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.html
@@ -16,6 +16,7 @@
     show-date-picker="showDatePicker()"
     show-filter-bar="showFilterBar()"
 
+    justify-content="justifyContent"
     query="model.query"
     saved-query="savedQuery"
     screen-title="screenTitle"

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.tsx b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.tsx
@@ -20,6 +20,7 @@
 import moment from 'moment';
 import { Subscription } from 'rxjs';
 import { History } from 'history';
+import { FlexGroupJustifyContent } from '@elastic/eui/src/components/flex/flex_group';
 
 import { IInjector } from '../legacy_imports';
 
@@ -83,6 +84,7 @@ export interface DashboardAppScope extends ng.IScope {
   showQueryInput: () => boolean;
   showDatePicker: () => boolean;
   showFilterBar: () => boolean;
+  justifyContent: FlexGroupJustifyContent;
   showAddPanel: any;
   showSaveQuery: boolean;
   kbnTopNav: any;

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app_controller.tsx
@@ -768,6 +768,8 @@ export class DashboardAppController {
       ($scope.model.filters.length > 0 || !dashboardStateManager.getFullScreenMode()) &&
       !Boolean($routeParams['hide-filter-bar']);
 
+    $scope.justifyContent = Boolean($routeParams.embed) ? 'flexStart' : 'flexEnd';
+
     $scope.showAddPanel = () => {
       dashboardStateManager.setFullScreenMode(false);
       /*

diff --git a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx
@@ -31,6 +31,7 @@ import {
   EuiFieldText,
   prettyDuration,
 } from '@elastic/eui';
+import { FlexGroupJustifyContent } from '@elastic/eui/src/components/flex/flex_group';
 // @ts-ignore
 import { EuiSuperUpdateButton, OnRefreshProps } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -56,6 +57,7 @@ interface Props {
   showDatePicker?: boolean;
   dateRangeFrom?: string;
   dateRangeTo?: string;
+  justifyContent?: FlexGroupJustifyContent;
   isRefreshPaused?: boolean;
   refreshInterval?: number;
   showAutoRefreshOnly?: boolean;
@@ -347,7 +349,7 @@ export function QueryBarTopRow(props: Props) {
       className={classes}
       responsive={!!props.showDatePicker}
       gutterSize="s"
-      justifyContent="flexStart"
+      justifyContent={props.justifyContent || 'flexEnd'}
     >
       {renderQueryInput()}
       {renderSharingMetaFields()}

diff --git a/src/plugins/data/public/ui/search_bar/search_bar.tsx b/src/plugins/data/public/ui/search_bar/search_bar.tsx
@@ -23,6 +23,7 @@ import classNames from 'classnames';
 import React, { Component } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 import { get, isEqual } from 'lodash';
+import { FlexGroupJustifyContent } from '@elastic/eui/src/components/flex/flex_group';
 
 import { withKibana, KibanaReactContextValue } from '../../../../kibana_react/public';
 import {
@@ -54,6 +55,7 @@ export interface SearchBarOwnProps {
   customSubmitButton?: React.ReactNode;
   screenTitle?: string;
   dataTestSubj?: string;
+  justifyContent?: FlexGroupJustifyContent;
   // Togglers
   showQueryBar?: boolean;
   showQueryInput?: boolean;
@@ -408,6 +410,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
             this.props.customSubmitButton ? this.props.customSubmitButton : undefined
           }
           dataTestSubj={this.props.dataTestSubj}
+          justifyContent={this.props.justifyContent}
         />
       );
     }

diff --git a/src/plugins/kibana_legacy/public/angular/kbn_top_nav.js b/src/plugins/kibana_legacy/public/angular/kbn_top_nav.js
@@ -110,6 +110,7 @@ export const createTopNavHelper = ({ TopNavMenu }) => reactDirective => {
     'refreshInterval',
     'disableAutoFocus',
     'showAutoRefreshOnly',
+    'justifyContent',
 
     // temporary flag to use the stateful components
     'useDefaultBehaviors',