From 1b6430ece4effdd0fd6bbab38051a1d5f7286287 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Loix?= Date: Wed, 16 Aug 2023 22:21:59 +0100 Subject: [PATCH] [Serverless] Chrome UI fixes (#164030) --- .../src/ui/project/header.tsx | 30 ++++++++++++------- .../dashboard_listing_page.test.tsx | 3 ++ .../listing_page/dashboard_listing_page.tsx | 8 +++-- .../public/components/search_bar.tsx | 2 +- 4 files changed, 30 insertions(+), 13 deletions(-) diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx index f9e076db4410e..239b8487e1a06 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx +++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx @@ -16,6 +16,8 @@ import { EuiIcon, EuiLoadingSpinner, htmlIdGenerator, + useEuiTheme, + EuiThemeComputed, } from '@elastic/eui'; import { css } from '@emotion/react'; import type { InternalApplicationStart } from '@kbn/core-application-browser-internal'; @@ -46,12 +48,12 @@ import { ScreenReaderRouteAnnouncements, SkipToMainContent } from '../header/scr import { AppMenuBar } from './app_menu'; import { ProjectNavigation } from './navigation'; -const headerCss = { +const getHeaderCss = ({ size }: EuiThemeComputed) => ({ logo: { container: css` display: inline-block; min-width: 56px; /* 56 = 40 + 8 + 8 */ - padding: 0 8px; + padding: 0 ${size.s}; cursor: pointer; `, logo: css` @@ -68,9 +70,12 @@ const headerCss = { toggleNavButton: css` border-right: 1px solid #d3dae6; margin-left: -1px; + padding-right: ${size.xs}; `, }, -}; +}); + +type HeaderCss = ReturnType; const headerStrings = { logo: { @@ -114,16 +119,17 @@ export interface Props { const LOCAL_STORAGE_IS_OPEN_KEY = 'PROJECT_NAVIGATION_OPEN' as const; const LOADING_DEBOUNCE_TIME = 80; -const Logo = ( - props: Pick -) => { +type LogoProps = Pick & { + logoCss: HeaderCss['logo']; +}; + +const Logo = (props: LogoProps) => { const loadingCount = useObservable( props.loadingCount$.pipe(debounceTime(LOADING_DEBOUNCE_TIME)), 0 ); const homeHref = useObservable(props.homeHref$, '/app/home'); - const { logo } = headerCss; let fullHref: string | undefined; if (homeHref) { @@ -141,18 +147,18 @@ const Logo = ( ); return ( - + {loadingCount === 0 ? ( ) : ( - + void }>(); const headerActionMenuMounter = useHeaderActionMenuMounter(observables.actionMenu$); const projectsUrl = useObservable(observables.projectsUrl$); + const { euiTheme } = useEuiTheme(); + const headerCss = getHeaderCss(euiTheme); + const { logo: logoCss } = headerCss; return ( <> @@ -228,6 +237,7 @@ export const ProjectHeader = ({ application={application} homeHref$={observables.homeHref$} loadingCount$={observables.loadingCount$} + logoCss={logoCss} /> diff --git a/src/plugins/dashboard/public/dashboard_app/listing_page/dashboard_listing_page.test.tsx b/src/plugins/dashboard/public/dashboard_app/listing_page/dashboard_listing_page.test.tsx index 6745028642560..2b22b957eeb08 100644 --- a/src/plugins/dashboard/public/dashboard_app/listing_page/dashboard_listing_page.test.tsx +++ b/src/plugins/dashboard/public/dashboard_app/listing_page/dashboard_listing_page.test.tsx @@ -25,11 +25,13 @@ jest.mock('../../dashboard_listing/dashboard_listing', () => { }); import { DashboardAppNoDataPage } from '../no_data/dashboard_app_no_data'; +const mockIsDashboardAppInNoDataState = jest.fn().mockResolvedValue(false); jest.mock('../no_data/dashboard_app_no_data', () => { const originalModule = jest.requireActual('../no_data/dashboard_app_no_data'); return { __esModule: true, ...originalModule, + isDashboardAppInNoDataState: () => mockIsDashboardAppInNoDataState(), DashboardAppNoDataPage: jest.fn().mockReturnValue(null), }; }); @@ -53,6 +55,7 @@ function mountWith({ props: incomingProps }: { props?: DashboardListingPageProps } test('renders analytics no data page when the user has no data view', async () => { + mockIsDashboardAppInNoDataState.mockResolvedValueOnce(true); pluginServices.getServices().data.dataViews.hasData.hasUserDataView = jest .fn() .mockResolvedValue(false); diff --git a/src/plugins/dashboard/public/dashboard_app/listing_page/dashboard_listing_page.tsx b/src/plugins/dashboard/public/dashboard_app/listing_page/dashboard_listing_page.tsx index 697a516e1fc6d..d4048dad7ab98 100644 --- a/src/plugins/dashboard/public/dashboard_app/listing_page/dashboard_listing_page.tsx +++ b/src/plugins/dashboard/public/dashboard_app/listing_page/dashboard_listing_page.tsx @@ -42,12 +42,12 @@ export const DashboardListingPage = ({ dashboardContentManagement: { findDashboards }, } = pluginServices.getServices(); - const [showNoDataPage, setShowNoDataPage] = useState(false); + const [showNoDataPage, setShowNoDataPage] = useState(); useEffect(() => { let isMounted = true; (async () => { const isInNoDataState = await isDashboardAppInNoDataState(); - if (isInNoDataState && isMounted) setShowNoDataPage(true); + setShowNoDataPage(isInNoDataState && isMounted); })(); return () => { isMounted = false; @@ -92,6 +92,10 @@ export const DashboardListingPage = ({ const titleFilter = title ? `${title}` : ''; + if (showNoDataPage === undefined) { + return null; + } + return ( <> {showNoDataPage && ( diff --git a/x-pack/plugins/global_search_bar/public/components/search_bar.tsx b/x-pack/plugins/global_search_bar/public/components/search_bar.tsx index 7571a656e5f68..f911b2bc18a4c 100644 --- a/x-pack/plugins/global_search_bar/public/components/search_bar.tsx +++ b/x-pack/plugins/global_search_bar/public/components/search_bar.tsx @@ -268,7 +268,7 @@ export const SearchBar: FC = (opts) => { if (chromeStyle === 'project' && !isVisible) { return ( -