Skip to content

Commit

Permalink
Add new Page Header in Vis Builder
Browse files Browse the repository at this point in the history
Signed-off-by: Suchit Sahoo <[email protected]>
  • Loading branch information
LDrago27 committed Aug 20, 2024
1 parent feafcf8 commit 79ff126
Show file tree
Hide file tree
Showing 11 changed files with 309 additions and 125 deletions.
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;

Check warning on line 47 in src/plugins/dashboard/public/application/components/dashboard_listing/dashboard_listing.tsx

View check run for this annotation

Codecov / codecov/patch

src/plugins/dashboard/public/application/components/dashboard_listing/dashboard_listing.tsx#L45-L47

Added lines #L45 - L47 were not covered by tests

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()} />;

Check warning on line 208 in src/plugins/dashboard/public/application/components/dashboard_listing/dashboard_listing.tsx

View check run for this annotation

Codecov / codecov/patch

src/plugins/dashboard/public/application/components/dashboard_listing/dashboard_listing.tsx#L208

Added line #L208 was not covered by tests

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}
/>
</>
);
};
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');

Check warning on line 33 in src/plugins/vis_builder/public/application/app.tsx

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/app.tsx#L32-L33

Added lines #L32 - L33 were not covered by tests

useEffect(() => {

Check warning on line 35 in src/plugins/vis_builder/public/application/app.tsx

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/app.tsx#L35

Added line #L35 was not covered by tests
if (showActionsInGroup) setHeaderVariant?.(HeaderVariant.APPLICATION);

return () => {
setHeaderVariant?.();

Check warning on line 39 in src/plugins/vis_builder/public/application/app.tsx

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/app.tsx#L38-L39

Added lines #L38 - L39 were not covered by tests
};
}, [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');

Check warning on line 50 in src/plugins/vis_builder/public/application/components/top_nav.tsx

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/top_nav.tsx#L50

Added line #L50 was not covered by tests

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(

Check warning on line 72 in src/plugins/vis_builder/public/application/components/top_nav.tsx

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/top_nav.tsx#L72

Added line #L72 was not covered by tests
{
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 79ff126

Please sign in to comment.