Skip to content

Commit

Permalink
Move TopNavLinks to new Nav Bar Discover
Browse files Browse the repository at this point in the history
Signed-off-by: Suchit Sahoo <[email protected]>
  • Loading branch information
LDrago27 committed Jul 19, 2024
1 parent 6d6ffaa commit 33fc72f
Show file tree
Hide file tree
Showing 9 changed files with 151 additions and 57 deletions.
2 changes: 2 additions & 0 deletions src/core/public/application/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -539,6 +539,8 @@ export interface AppMountParameters<HistoryLocationState = unknown> {
* Optional datasource id to pass while mounting app
*/
dataSourceId?: string;

optionalRef?: Record<string, React.RefObject<HTMLDivElement>>;
}

/**
Expand Down
1 change: 1 addition & 0 deletions src/plugins/data/public/ui/search_bar/search_bar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ export interface SearchBarOwnProps {

onRefresh?: (payload: { dateRange: TimeRange }) => void;
indicateNoData?: boolean;
datePickkerRef?: any;
}

export type SearchBarProps = SearchBarOwnProps & SearchBarInjectedDeps;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,9 @@ $osdHeaderOffset: $euiHeaderHeightCompensation;
.headerIsExpanded .deLayout {
height: calc(100vh - #{$osdHeaderOffset * 2});
}

.mainPage {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
92 changes: 61 additions & 31 deletions src/plugins/data_explorer/public/components/app_container.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,15 @@
* SPDX-License-Identifier: Apache-2.0
*/

import React, { memo } from 'react';
import { EuiPage, EuiPageBody, EuiResizableContainer, useIsWithinBreakpoints } from '@elastic/eui';
import React, { memo, useRef } from 'react';
import {
EuiFlexGroup,
EuiFlexItem,
EuiPage,
EuiPageBody,
EuiResizableContainer,
useIsWithinBreakpoints,
} from '@elastic/eui';
import { Suspense } from 'react';
import { AppMountParameters } from '../../../../core/public';
import { Sidebar } from './sidebar';
Expand All @@ -17,6 +24,8 @@ export const AppContainer = React.memo(
({ view, params }: { view?: View; params: AppMountParameters }) => {
const isMobile = useIsWithinBreakpoints(['xs', 's', 'm']);
// TODO: Make this more robust.
const topLinkRef = useRef<HTMLDivElement>(null);
const datePickerRef = useRef<HTMLDivElement>(null);
if (!view) {
return <NoView />;
}
Expand All @@ -26,38 +35,59 @@ export const AppContainer = React.memo(
const MemoizedPanel = memo(Panel);
const MemoizedCanvas = memo(Canvas);

params.optionalRef = {
topLinkRef,
datePickerRef,
};

// Render the application DOM.
return (
<EuiPage className="deLayout" paddingSize="none">
{/* TODO: improve fallback state */}
<Suspense fallback={<div>Loading...</div>}>
<Context {...params}>
<EuiResizableContainer direction={isMobile ? 'vertical' : 'horizontal'}>
{(EuiResizablePanel, EuiResizableButton) => (
<>
<EuiResizablePanel
initialSize={20}
minSize="260px"
mode={['collapsible', { position: 'top' }]}
paddingSize="none"
>
<Sidebar>
<MemoizedPanel {...params} />
</Sidebar>
</EuiResizablePanel>
<EuiResizableButton />
<div className="mainPage">
<EuiFlexGroup direction="row">
<EuiFlexItem>
<div ref={topLinkRef} />
</EuiFlexItem>
<EuiFlexItem>
<div ref={datePickerRef} />
</EuiFlexItem>
</EuiFlexGroup>

<EuiPage className="deLayout" paddingSize="none" grow={false}>
{/* TODO: improve fallback state */}
<Suspense fallback={<div>Loading...</div>}>
<Context {...params}>
<EuiResizableContainer direction={isMobile ? 'vertical' : 'horizontal'}>
{(EuiResizablePanel, EuiResizableButton) => (
<>

Check warning on line 61 in src/plugins/data_explorer/public/components/app_container.tsx

View check run for this annotation

Codecov / codecov/patch

src/plugins/data_explorer/public/components/app_container.tsx#L61

Added line #L61 was not covered by tests
<EuiResizablePanel
initialSize={20}
minSize="260px"
mode={['collapsible', { position: 'top' }]}
paddingSize="none"
>
<Sidebar>
<MemoizedPanel {...params} />
</Sidebar>
</EuiResizablePanel>
<EuiResizableButton />

<EuiResizablePanel initialSize={80} minSize="65%" mode="main" paddingSize="none">
<EuiPageBody className="deLayout__canvas">
<MemoizedCanvas {...params} />
</EuiPageBody>
</EuiResizablePanel>
</>
)}
</EuiResizableContainer>
</Context>
</Suspense>
</EuiPage>
<EuiResizablePanel
initialSize={80}
minSize="65%"
mode="main"
paddingSize="none"
>
<EuiPageBody className="deLayout__canvas">
<MemoizedCanvas {...params} />
</EuiPageBody>
</EuiResizablePanel>
</>
)}
</EuiResizableContainer>
</Context>
</Suspense>
</EuiPage>
</div>
);
},
(prevProps, nextProps) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@ import { OpenSearchPanel } from './open_search_panel';
export const getTopNavLinks = (
services: DiscoverViewServices,
inspectorAdapters: Adapters,
savedSearch: SavedSearch
savedSearch: SavedSearch,
isEnhancementEnabled: boolean = false
) => {
const {
history,
Expand All @@ -44,7 +45,7 @@ export const getTopNavLinks = (
osdUrlStateStorage,
} = services;

const newSearch = {
const newSearch: TopNavMenuData = {
id: 'new',
label: i18n.translate('discover.localMenu.localMenu.newSearchTitle', {
defaultMessage: 'New',
Expand All @@ -61,6 +62,7 @@ export const getTopNavLinks = (
ariaLabel: i18n.translate('discover.topNav.discoverNewButtonLabel', {
defaultMessage: `New Search`,
}),
iconType: 'plusInCircle',
};

const saveSearch: TopNavMenuData = {
Expand Down Expand Up @@ -160,9 +162,10 @@ export const getTopNavLinks = (
);
showSaveModal(saveModal, core.i18n.Context);
},
iconType: 'save',
};

const openSearch = {
const openSearch: TopNavMenuData = {
id: 'open',
label: i18n.translate('discover.localMenu.openTitle', {
defaultMessage: 'Open',
Expand Down Expand Up @@ -190,6 +193,7 @@ export const getTopNavLinks = (
)
);
},
iconType: 'folderOpen',
};

const shareSearch: TopNavMenuData = {
Expand Down Expand Up @@ -225,9 +229,10 @@ export const getTopNavLinks = (
isDirty: !savedSearch.id || state.isDirty || false,
});
},
iconType: 'share',
};

const inspectSearch = {
const inspectSearch: TopNavMenuData = {
id: 'inspect',
label: i18n.translate('discover.localMenu.inspectTitle', {
defaultMessage: 'Inspect',
Expand All @@ -244,15 +249,28 @@ export const getTopNavLinks = (
title: savedSearch?.title,
});
},
iconType: 'inspect',
};

return [
const topNavLinksArray = [
newSearch,
...(capabilities.discover?.save ? [saveSearch] : []),
openSearch,
...(share ? [shareSearch] : []), // Show share option only if share plugin is available
inspectSearch,
];

if (!isEnhancementEnabled) {
return topNavLinksArray.map((topNavLink) => {
if (topNavLink) {
const { iconType, ...rest } = topNavLink; // Removing the Icon Type property to maintain consistency with older Nav Bar
return rest;
}
return topNavLink;
});
}

return topNavLinksArray;
};

// TODO: This does not seem to affect the share menu. need to look into it in future
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,9 @@
}
}
}

.topNav {
.hidden {
display: none;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import './discover_canvas.scss';
import { getNewDiscoverSetting, setNewDiscoverSetting } from '../../components/utils/local_storage';

// eslint-disable-next-line import/no-default-export
export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewProps) {
export default function DiscoverCanvas({ setHeaderActionMenu, history, optionalRef }: ViewProps) {
const panelRef = useRef<HTMLDivElement>(null);
const { data$, refetch$, indexPattern } = useDiscoverContext();
const {
Expand All @@ -40,6 +40,7 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
columns: stateColumns !== undefined ? stateColumns : buildColumns([]),
};
});
const isEnhancementsEnabled = uiSettings.get('query:enhancements:enabled');
const filteredColumns = filterColumns(
columns,
indexPattern,
Expand Down Expand Up @@ -165,12 +166,15 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
className="dscCanvas"
>
<TopNav
isEnhancementsEnabled={isEnhancementsEnabled}
opts={{
setHeaderActionMenu,
onQuerySubmit,
optionalRef,
}}
showSaveQuery={showSaveQuery}
/>

{fetchState.status === ResultStatus.NO_RESULTS && (
<DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@

import React, { useEffect, useMemo, useState } from 'react';
import { Query, TimeRange } from 'src/plugins/data/common';
import { createPortal } from 'react-dom';
import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { AppMountParameters } from '../../../../../../core/public';
import { connectStorageToQueryState, opensearchFilters } from '../../../../../data/public';
import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
Expand All @@ -15,16 +17,19 @@ import { getTopNavLinks } from '../../components/top_nav/get_top_nav_links';
import { getRootBreadcrumbs } from '../../helpers/breadcrumbs';
import { useDiscoverContext } from '../context';
import { useDispatch, setSavedQuery, useSelector } from '../../utils/state_management';
import './discover_canvas.scss';

export interface TopNavProps {
opts: {
setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
onQuerySubmit: (payload: { dateRange: TimeRange; query?: Query }, isUpdate?: boolean) => void;
optionalRef?: Record<string, React.RefObject<HTMLDivElement>>;
};
showSaveQuery: boolean;
isEnhancementsEnabled?: boolean;
}

export const TopNav = ({ opts, showSaveQuery }: TopNavProps) => {
export const TopNav = ({ opts, showSaveQuery, isEnhancementsEnabled }: TopNavProps) => {
const { services } = useOpenSearchDashboards<DiscoverViewServices>();
const { inspectorAdapters, savedSearch, indexPattern } = useDiscoverContext();
const [indexPatterns, setIndexPatterns] = useState<IndexPattern[] | undefined>(undefined);
Expand All @@ -43,7 +48,9 @@ export const TopNav = ({ opts, showSaveQuery }: TopNavProps) => {
osdUrlStateStorage,
} = services;

const topNavLinks = savedSearch ? getTopNavLinks(services, inspectorAdapters, savedSearch) : [];
const topNavLinks = savedSearch
? getTopNavLinks(services, inspectorAdapters, savedSearch, isEnhancementsEnabled)
: [];

connectStorageToQueryState(services.data.query, osdUrlStateStorage, {
filters: opensearchFilters.FilterStateStore.APP_STATE,
Expand Down Expand Up @@ -88,22 +95,43 @@ export const TopNav = ({ opts, showSaveQuery }: TopNavProps) => {
};

return (
<TopNavMenu
appName={PLUGIN_ID}
config={topNavLinks}
showSearchBar
showDatePicker={showDatePicker}
showSaveQuery={showSaveQuery}
useDefaultBehaviors
setMenuMountPoint={opts.setHeaderActionMenu}
indexPatterns={indexPattern ? [indexPattern] : indexPatterns}
// TODO after
// https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6833
// is ported to main, pass dataSource to TopNavMenu by picking
// commit 328e08e688c again.
onQuerySubmit={opts.onQuerySubmit}
savedQueryId={state.savedQuery}
onSavedQueryIdChange={updateSavedQueryId}
/>
<>
{isEnhancementsEnabled &&
!!opts?.optionalRef?.topLinkRef?.current &&
createPortal(
<EuiFlexGroup>
{topNavLinks.map((topNavLink) => (
<EuiFlexItem grow={false} key={topNavLink.id}>
<EuiButtonIcon
onClick={(event) => {
topNavLink.run(event.currentTarget);
}}
iconType={topNavLink.iconType}
aria-label={topNavLink.ariaLabel}
/>
</EuiFlexItem>
))}
</EuiFlexGroup>,
opts.optionalRef.topLinkRef.current
)}
<TopNavMenu
className={isEnhancementsEnabled ? 'topNav hidden' : ''}
appName={PLUGIN_ID}
config={topNavLinks}
showSearchBar
showDatePicker={showDatePicker}
showSaveQuery={showSaveQuery}
useDefaultBehaviors
setMenuMountPoint={opts.setHeaderActionMenu}
indexPatterns={indexPattern ? [indexPattern] : indexPatterns}
// TODO after
// https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6833
// is ported to main, pass dataSource to TopNavMenu by picking
// commit 328e08e688c again.
onQuerySubmit={opts.onQuerySubmit}
savedQueryId={state.savedQuery}
onSavedQueryIdChange={updateSavedQueryId}
/>
</>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@

import { EuiButtonProps } from '@elastic/eui';
import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
import { string } from 'mathjs';

export type TopNavMenuAction = (anchorElement: HTMLElement) => void;

Expand Down

0 comments on commit 33fc72f

Please sign in to comment.