Add embed mode options in the Share UI

elastic · Feb 25, 2020 · bbca5a7 · bbca5a7
1 parent 3333413
commit bbca5a7
Show file tree

Hide file tree

Showing 12 changed files with 767 additions and 51 deletions.
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
@@ -4,13 +4,17 @@
 >
   <!-- Local nav. -->
   <kbn-top-nav
-    ng-show="isVisible"
+    ng-show="showTopNav()"
     app-name="'dashboard'"
     config="topNavMenu"
 
-    show-search-bar="isVisible"
-    show-filter-bar="showFilterBar()"
+    show-top-nav-menu="showTopNavMenu()"
+    show-search-bar="showSearchBar()"
+    show-query-bar="showQueryBar()"
+    show-query-input="showQueryInput()"
     show-save-query="showSaveQuery"
+    show-date-picker="showDatePicker()"
+    show-filter-bar="showFilterBar()"
 
     query="model.query"
     saved-query="savedQuery"
@@ -29,25 +33,6 @@
     on-refresh-change="onRefreshChange">
   </kbn-top-nav>
 
-  <!--
-  The top nav is hidden in embed mode but the filter bar must still be present so
-  we show the filter bar on its own here if the chrome is not visible.
--->
-  <kbn-top-nav
-    ng-if="showFilterBar() && !isVisible"
-
-    app-name="'dashboard'"
-    show-search-bar="true"
-    show-filter-bar="true"
-    show-save-query="false"
-    show-date-picker="false"
-
-    filters="model.filters"
-    index-patterns="indexPatterns"
-    on-filters-updated="onFiltersUpdated"
-  >
-  </kbn-top-nav>
-
   <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
   <div id="dashboardViewport"></div>
 

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
@@ -76,6 +76,12 @@ export interface DashboardAppScope extends ng.IScope {
   onSavedQueryUpdated: (savedQuery: SavedQuery) => void;
   onClearSavedQuery: () => void;
   topNavMenu: any;
+  showTopNav: () => boolean;
+  showTopNavMenu: () => boolean;
+  showSearchBar: () => boolean;
+  showQueryBar: () => boolean;
+  showQueryInput: () => boolean;
+  showDatePicker: () => boolean;
   showFilterBar: () => boolean;
   showAddPanel: any;
   showSaveQuery: boolean;

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
@@ -26,6 +26,8 @@ import angular from 'angular';
 import { Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { History } from 'history';
+import { parse } from 'url';
+
 import { SavedObjectSaveOpts } from 'src/plugins/saved_objects/public';
 import { DashboardEmptyScreen, DashboardEmptyScreenProps } from './dashboard_empty_screen';
 
@@ -713,8 +715,44 @@ export class DashboardAppController {
         });
     }
 
+    const hasUrlParam = (param: string): boolean =>
+      param in parse(location.hash.slice(1), true).query;
+
+    const displayIfUrlParam = (param: string): boolean =>
+      hasUrlParam(param) && !dashboardStateManager.getFullScreenMode();
+
+    const topNavUpdate = (): void => {
+      $scope.topNavMenu = $scope.showTopNavMenu()
+        ? getTopNavConfig(
+            dashboardStateManager.getViewMode(),
+            navActions,
+            dashboardConfig.getHideWriteControls()
+          )
+        : null;
+    };
+
+    $scope.$watch(
+      (): boolean => $scope.showTopNavMenu(),
+      (): void => topNavUpdate()
+    );
+
+    $scope.showTopNav = () => $scope.isVisible || $scope.showSearchBar();
+
+    $scope.showTopNavMenu = () => $scope.isVisible || displayIfUrlParam('show-top-nav-menu');
+
+    $scope.showSearchBar = () =>
+      $scope.isVisible || $scope.showQueryBar() || $scope.showFilterBar();
+
+    $scope.showQueryBar = () =>
+      $scope.isVisible || $scope.showQueryInput() || $scope.showDatePicker();
+
+    $scope.showQueryInput = () => $scope.isVisible || displayIfUrlParam('show-query-input');
+
+    $scope.showDatePicker = () => $scope.isVisible || displayIfUrlParam('show-date-picker');
+
     $scope.showFilterBar = () =>
-      $scope.model.filters.length > 0 || !dashboardStateManager.getFullScreenMode();
+      ($scope.model.filters.length > 0 || !dashboardStateManager.getFullScreenMode()) &&
+      !hasUrlParam('hide-filter-bar');
 
     $scope.showAddPanel = () => {
       dashboardStateManager.setFullScreenMode(false);
@@ -888,14 +926,8 @@ export class DashboardAppController {
       });
     });
 
-    dashboardStateManager.registerChangeListener(() => {
-      // view mode could have changed, so trigger top nav update
-      $scope.topNavMenu = getTopNavConfig(
-        dashboardStateManager.getViewMode(),
-        navActions,
-        dashboardConfig.getHideWriteControls()
-      );
-    });
+    // view mode could have changed, so trigger top nav update
+    dashboardStateManager.registerChangeListener(topNavUpdate);
 
     $scope.$on('$destroy', () => {
       updateSubscription.unsubscribe();

diff --git a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js
@@ -99,12 +99,13 @@ export const createTopNavHelper = ({ TopNavMenu }) => reactDirective => {
 
     // All modifiers default to true.
     // Set to false to hide subcomponents.
+    'showTopNavMenu',
     'showSearchBar',
-    'showFilterBar',
     'showQueryBar',
     'showQueryInput',
-    'showDatePicker',
     'showSaveQuery',
+    'showDatePicker',
+    'showFilterBar',
 
     'appName',
     'screenTitle',

diff --git a/src/plugins/dashboard_embeddable_container/public/plugin.tsx b/src/plugins/dashboard_embeddable_container/public/plugin.tsx
@@ -70,6 +70,7 @@ export class DashboardEmbeddableContainerPublicPlugin
     };
 
     const ExitFullScreenButton: React.FC<ExitFullScreenButtonProps> = props => {
+      // TODO: Only call useHideChrome if chrome is visible
       useHideChrome();
       return <ExitFullScreenButtonUi {...props} />;
     };

diff --git a/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss b/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
@@ -3,6 +3,10 @@
   padding: 0px $euiSizeS $euiSizeS $euiSizeS;
 }
 
+.globalQueryBar:first-child {
+  padding-top: $euiSizeS;
+}
+
 .globalQueryBar:not(:empty) {
   padding-bottom: $euiSizeS;
 }

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
@@ -348,7 +348,7 @@ function QueryBarTopRowUI(props: Props) {
       className={classes}
       responsive={!!props.showDatePicker}
       gutterSize="s"
-      justifyContent="flexEnd"
+      justifyContent="flexStart"
     >
       {renderQueryInput()}
       {renderSharingMetaFields()}

diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.test.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.test.tsx
@@ -29,6 +29,7 @@ const dataShim = {
 };
 
 describe('TopNavMenu', () => {
+  const WRAPPER_SELECTOR = '.kbnTopNavMenu__wrapper';
   const TOP_NAV_ITEM_SELECTOR = 'TopNavMenuItem';
   const SEARCH_BAR_SELECTOR = 'SearchBar';
   const menuItems: TopNavMenuData[] = [
@@ -55,6 +56,13 @@ describe('TopNavMenu', () => {
     expect(component.find(SEARCH_BAR_SELECTOR).length).toBe(0);
   });
 
+  it('Should not render the wrapper when showTopNavMenu and showSearchBar are both false', () => {
+    const component = shallowWithIntl(
+      <TopNavMenu appName={'test'} showTopNavMenu={false} showSearchBar={false} />
+    );
+    expect(component.find(WRAPPER_SELECTOR).length).toBe(0);
+  });
+
   it('Should render 1 menu item', () => {
     const component = shallowWithIntl(<TopNavMenu appName={'test'} config={[menuItems[0]]} />);
     expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(1);
@@ -67,6 +75,15 @@ describe('TopNavMenu', () => {
     expect(component.find(SEARCH_BAR_SELECTOR).length).toBe(0);
   });
 
+  it('Should not render menu items when showTopNavMenu is false', () => {
+    const component = shallowWithIntl(
+      <TopNavMenu appName={'test'} showTopNavMenu={false} config={menuItems} />
+    );
+    expect(component.find(WRAPPER_SELECTOR).length).toBe(0);
+    expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(0);
+    expect(component.find(SEARCH_BAR_SELECTOR).length).toBe(0);
+  });
+
   it('Should render search bar', () => {
     const component = shallowWithIntl(
       <TopNavMenu appName={'test'} showSearchBar={true} data={dataShim as any} />

diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { I18nProvider } from '@kbn/i18n/react';
@@ -28,6 +28,7 @@ import { StatefulSearchBarProps, DataPublicPluginStart } from '../../../data/pub
 
 export type TopNavMenuProps = StatefulSearchBarProps & {
   config?: TopNavMenuData[];
+  showTopNavMenu?: boolean;
   showSearchBar?: boolean;
   data?: DataPublicPluginStart;
 };
@@ -41,8 +42,13 @@ export type TopNavMenuProps = StatefulSearchBarProps & {
  *
  **/
 
-export function TopNavMenu(props: TopNavMenuProps) {
-  const { config, showSearchBar, ...searchBarProps } = props;
+export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
+  const { config, showTopNavMenu, showSearchBar, ...searchBarProps } = props;
+
+  if (!showTopNavMenu && (!showSearchBar || !props.data)) {
+    return null;
+  }
+
   function renderItems() {
     if (!config) return;
     return config.map((menuItem: TopNavMenuData, i: number) => {
@@ -54,6 +60,21 @@ export function TopNavMenu(props: TopNavMenuProps) {
     });
   }
 
+  function renderMenu() {
+    if (!showTopNavMenu) return;
+    return (
+      <EuiFlexGroup
+        data-test-subj="top-nav"
+        justifyContent="flexStart"
+        gutterSize="none"
+        className="kbnTopNavMenu"
+        responsive={false}
+      >
+        {renderItems()}
+      </EuiFlexGroup>
+    );
+  }
+
   function renderSearchBar() {
     // Validate presense of all required fields
     if (!showSearchBar || !props.data) return;
@@ -64,15 +85,7 @@ export function TopNavMenu(props: TopNavMenuProps) {
   function renderLayout() {
     return (
       <span className="kbnTopNavMenu__wrapper">
-        <EuiFlexGroup
-          data-test-subj="top-nav"
-          justifyContent="flexStart"
-          gutterSize="none"
-          className="kbnTopNavMenu"
-          responsive={false}
-        >
-          {renderItems()}
-        </EuiFlexGroup>
+        {renderMenu()}
         {renderSearchBar()}
       </span>
     );
@@ -82,6 +95,7 @@ export function TopNavMenu(props: TopNavMenuProps) {
 }
 
 TopNavMenu.defaultProps = {
+  showTopNavMenu: true,
   showSearchBar: false,
   showQueryBar: true,
   showQueryInput: true,