Skip to content

Commit

Permalink
Add Application Page Header for Visualize Pages (#7712)
Browse files Browse the repository at this point in the history
* Add Application Header for Visualize

Signed-off-by: Suchit Sahoo <[email protected]>

* Fix Application Header Layout for Discover

Signed-off-by: Suchit Sahoo <[email protected]>

* Changeset file for PR #7712 created/updated

* Add new Page Header in Vis Builder

Signed-off-by: Suchit Sahoo <[email protected]>

---------

Signed-off-by: Suchit Sahoo <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
  • Loading branch information
LDrago27 and opensearch-changeset-bot[bot] authored Aug 20, 2024
1 parent 9d3ca79 commit b3234dd
Show file tree
Hide file tree
Showing 15 changed files with 771 additions and 331 deletions.
2 changes: 2 additions & 0 deletions changelogs/fragments/7712.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
feat:
- Add New Page Header to Visualize ([#7712](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7712))
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,17 @@ export const DashboardListing = () => {
dashboardProviders,
data: { query },
osdUrlStateStorage,
navigation,
},
} = useOpenSearchDashboards<DashboardServices>();

const location = useLocation();
const queryParameters = useMemo(() => new URLSearchParams(location.search), [location]);
const initialFiltersFromURL = queryParameters.get('filter');
const [initialFilter, setInitialFilter] = useState<string | null>(initialFiltersFromURL);
const showUpdatedUx = uiSettings?.get('home:useNewHomePage');
const { HeaderControl } = navigation.ui;
const { setAppRightControls } = application;

useEffect(() => {
// syncs `_g` portion of url with query services
Expand Down Expand Up @@ -201,31 +205,40 @@ export const DashboardListing = () => {
);
});

const createButton = <CreateButton dashboardProviders={dashboardProviders()} />;

return (
<TableListView
headingId="dashboardListingHeading"
createItem={hideWriteControls ? undefined : createItem}
createButton={
hideWriteControls ? undefined : <CreateButton dashboardProviders={dashboardProviders()} />
}
findItems={find}
deleteItems={hideWriteControls ? undefined : deleteItems}
editItem={hideWriteControls ? undefined : editItem}
tableColumns={tableColumns}
listingLimit={listingLimit}
initialFilter={initialFilter ?? ''}
initialPageSize={initialPageSize}
noItemsFragment={noItemsFragment}
entityName={i18n.translate('dashboard.listing.table.entityName', {
defaultMessage: 'dashboard',
})}
entityNamePlural={i18n.translate('dashboard.listing.table.entityNamePlural', {
defaultMessage: 'dashboards',
})}
tableListTitle={i18n.translate('dashboard.listing.dashboardsTitle', {
defaultMessage: 'Dashboards',
})}
toastNotifications={notifications.toasts}
/>
<>
{showUpdatedUx && !hideWriteControls && (
<HeaderControl
setMountPoint={setAppRightControls}
controls={[{ renderComponent: createButton }]}
/>
)}
<TableListView
headingId="dashboardListingHeading"
createItem={hideWriteControls ? undefined : createItem}
createButton={hideWriteControls ? undefined : createButton}
findItems={find}
deleteItems={hideWriteControls ? undefined : deleteItems}
editItem={hideWriteControls ? undefined : editItem}
tableColumns={tableColumns}
listingLimit={listingLimit}
initialFilter={initialFilter ?? ''}
initialPageSize={initialPageSize}
noItemsFragment={noItemsFragment}
entityName={i18n.translate('dashboard.listing.table.entityName', {
defaultMessage: 'dashboard',
})}
entityNamePlural={i18n.translate('dashboard.listing.table.entityNamePlural', {
defaultMessage: 'dashboards',
})}
tableListTitle={i18n.translate('dashboard.listing.dashboardsTitle', {
defaultMessage: 'Dashboards',
})}
toastNotifications={notifications.toasts}
showUpdatedUx={showUpdatedUx}
/>
</>
);
};
12 changes: 7 additions & 5 deletions src/plugins/data_explorer/public/components/app_container.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export const AppContainer = React.memo(
const opensearchDashboards = useOpenSearchDashboards<IDataPluginServices>();
const { uiSettings } = opensearchDashboards.services;
const isEnhancementsEnabled = uiSettings?.get(QUERY_ENHANCEMENT_ENABLED_SETTING);
const showActionsInGroup = uiSettings?.get('home:useNewHomePage');

const topLinkRef = useRef<HTMLDivElement>(null);
const datePickerRef = useRef<HTMLDivElement>(null);
Expand All @@ -47,21 +48,22 @@ export const AppContainer = React.memo(
topLinkRef,
datePickerRef,
};

// Render the application DOM.
return (
<div className="mainPage">
{isEnhancementsEnabled && (
<EuiFlexGroup
direction="row"
className="mainPage navBar"
className={`mainPage ${showActionsInGroup ? '' : 'navBar'}"`}
gutterSize="none"
alignItems="center"
justifyContent="spaceBetween"
>
<EuiFlexItem grow={false}>
<div ref={topLinkRef} />
</EuiFlexItem>
{!showActionsInGroup && (
<EuiFlexItem grow={false}>
<div ref={topLinkRef} />
</EuiFlexItem>
)}
<EuiFlexItem grow={false}>
<div ref={datePickerRef} />
</EuiFlexItem>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ export const TopNav = ({ opts, showSaveQuery, isEnhancementsEnabled }: TopNavPro
<>
{isEnhancementsEnabled &&
!!opts?.optionalRef?.topLinkRef?.current &&
!showActionsInGroup &&
createPortal(
<EuiFlexGroup gutterSize="m">
{topNavLinks.map((topNavLink) => (
Expand All @@ -145,7 +146,6 @@ export const TopNav = ({ opts, showSaveQuery, isEnhancementsEnabled }: TopNavPro
opts.optionalRef.topLinkRef.current
)}
<TopNavMenu
className={isEnhancementsEnabled ? 'topNav hidden' : ''}
appName={PLUGIN_ID}
config={topNavLinks}
showSearchBar={TopNavMenuItemRenderType.IN_PLACE}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ export interface TableListViewProps {
headingId?: string;
restrictWidth?: boolean;
paddingSize?: EuiPageProps['paddingSize'];
showUpdatedUx?: boolean;
}

export interface TableListViewState {
Expand Down Expand Up @@ -525,15 +526,17 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
<div>
{this.state.showDeleteModal && this.renderConfirmDeleteModal()}

<EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd" data-test-subj="top-nav">
<EuiFlexItem grow={false}>
<EuiText size="s">
<h1 id={this.props.headingId}>{this.props.tableListTitle}</h1>
</EuiText>
</EuiFlexItem>

{this.props.createButton || defaultCreateButton}
</EuiFlexGroup>
{!this.props.showUpdatedUx && (
<EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd" data-test-subj="top-nav">
<EuiFlexItem grow={false}>
<EuiText size="s">
<h1 id={this.props.headingId}>{this.props.tableListTitle}</h1>
</EuiText>
</EuiFlexItem>

{this.props.createButton || defaultCreateButton}
</EuiFlexGroup>
)}

<EuiSpacer size="m" />

Expand Down
13 changes: 13 additions & 0 deletions src/plugins/vis_builder/public/application/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { RightNav } from './components/right_nav';
import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
import { VisBuilderServices } from '../types';
import { syncQueryStateWithUrl } from '../../../data/public';
import { HeaderVariant } from '../../../../core/public/index';

import './app.scss';

Expand All @@ -23,9 +24,21 @@ export const VisBuilderApp = () => {
services: {
data: { query },
osdUrlStateStorage,
chrome,
uiSettings,
},
} = useOpenSearchDashboards<VisBuilderServices>();
const { pathname } = useLocation();
const { setHeaderVariant } = chrome;
const showActionsInGroup = uiSettings.get('home:useNewHomePage');

useEffect(() => {
if (showActionsInGroup) setHeaderVariant?.(HeaderVariant.APPLICATION);

return () => {
setHeaderVariant?.();
};
}, [setHeaderVariant, showActionsInGroup]);

useEffect(() => {
// syncs `_g` portion of url with query services
Expand Down
47 changes: 43 additions & 4 deletions src/plugins/vis_builder/public/application/components/top_nav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { isEqual } from 'lodash';
import { useParams } from 'react-router-dom';
import { useUnmount } from 'react-use';
import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
import { getTopNavConfig } from '../utils/get_top_nav_config';
import { getLegacyTopNavConfig, getNavActions, getTopNavConfig } from '../utils/get_top_nav_config';
import { VisBuilderServices } from '../../types';

import './top_nav.scss';
Expand All @@ -18,7 +18,7 @@ import { setSavedQuery } from '../utils/state_management/visualization_slice';
import { setEditorState } from '../utils/state_management/metadata_slice';
import { useCanSave } from '../utils/use/use_can_save';
import { saveStateToSavedObject } from '../../saved_visualizations/transforms';
import { TopNavMenuData } from '../../../../navigation/public';
import { TopNavMenuData, TopNavMenuItemRenderType } from '../../../../navigation/public';
import { opensearchFilters, connectStorageToQueryState } from '../../../../data/public';
import { RootState } from '../../../../data_explorer/public';

Expand All @@ -41,11 +41,13 @@ export const TopNav = () => {
navigation: {
ui: { TopNavMenu },
},
uiSettings,
appName,
capabilities,
} = services;
const rootState = useTypedSelector((state: RootState) => state);
const dispatch = useTypedDispatch();
const showActionsInGroup = uiSettings.get('home:useNewHomePage');

useDeepEffect(() => {
dispatch(setEditorState({ state: 'dirty' }));
Expand All @@ -67,7 +69,7 @@ export const TopNav = () => {
const getConfig = () => {
if (!savedVisBuilderVis || !indexPattern) return;

return getTopNavConfig(
const navActions = getNavActions(
{
visualizationIdFromUrl,
savedVisBuilderVis: saveStateToSavedObject(savedVisBuilderVis, rootState, indexPattern),
Expand All @@ -77,6 +79,38 @@ export const TopNav = () => {
},
services
);

return showActionsInGroup
? getTopNavConfig(
{
visualizationIdFromUrl,
savedVisBuilderVis: saveStateToSavedObject(
savedVisBuilderVis,
rootState,
indexPattern
),
saveDisabledReason,
dispatch,
originatingApp,
},
services,
navActions
)
: getLegacyTopNavConfig(
{
visualizationIdFromUrl,
savedVisBuilderVis: saveStateToSavedObject(
savedVisBuilderVis,
rootState,
indexPattern
),
saveDisabledReason,
dispatch,
originatingApp,
},
services,
navActions
);
};

setConfig(getConfig());
Expand All @@ -89,6 +123,7 @@ export const TopNav = () => {
dispatch,
indexPattern,
originatingApp,
showActionsInGroup,
]);

// reset validity before component destroyed
Expand All @@ -109,11 +144,15 @@ export const TopNav = () => {
setMenuMountPoint={setHeaderActionMenu}
indexPatterns={indexPattern ? [indexPattern] : []}
showDatePicker={!!indexPattern?.timeFieldName ?? true}
showSearchBar
showSearchBar={TopNavMenuItemRenderType.IN_PORTAL}
showSaveQuery={showSaveQuery}
useDefaultBehaviors
savedQueryId={rootState.visualization.savedQuery}
onSavedQueryIdChange={updateSavedQueryId}
groupActions={showActionsInGroup}
screenTitle={
savedVisBuilderVis?.title.length ? savedVisBuilderVis?.title : 'New visualization'
}
/>
</div>
);
Expand Down
Loading

0 comments on commit b3234dd

Please sign in to comment.