[Page layouts] Some light fixes

src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/empty_state.tsx

@@ -24,6 +24,7 @@ import {
  EuiCard,
  EuiLink,
  EuiText,
+ EuiFlexGroup,
 } from '@elastic/eui';
 import { useHistory } from 'react-router-dom';
 import { reactRouterNavigate } from '../../../../../../plugins/kibana_react/public';
@@ -143,8 +144,8 @@ export const EmptyState = ({
  </EuiFlexGrid>
  <EuiSpacer size="xxl" />
  <div className="inpEmptyState__footer">
- <EuiFlexGrid columns={3}>
- <EuiFlexItem className="inpEmptyState__footerFlexItem">
+ <EuiFlexGroup>
+ <EuiFlexItem grow={1} className="inpEmptyState__footerFlexItem">
  <EuiDescriptionList
  listItems={[
  {
@@ -166,7 +167,7 @@ export const EmptyState = ({
  ]}
  />
  </EuiFlexItem>
- <EuiFlexItem className="inpEmptyState__footerFlexItem">
+ <EuiFlexItem grow={2} className="inpEmptyState__footerFlexItem">
  <EuiDescriptionList
  listItems={[
  {
@@ -189,7 +190,7 @@ export const EmptyState = ({
  ]}
  />
  </EuiFlexItem>
- </EuiFlexGrid>
+ </EuiFlexGroup>
  </div>
  </EuiPageContentBody>
  </EuiPageContent>

src/plugins/kibana_react/public/page_template/page_template.tsx

@@ -62,11 +62,13 @@ export const KibanaPageTemplate: FunctionComponent<KibanaPageTemplateProps> = ({
  pageSideBar = <KibanaPageTemplateSolutionNav {...solutionNav} />;
  }
 
+ const emptyStateDefaultTemplate = pageSideBar ? 'centeredContent' : 'centeredBody';
+
  /**
  * An easy way to create the right content for empty pages
  */
  if (isEmptyState && pageHeader && !children) {
- template = template ?? 'centeredBody';
+ template = template ?? emptyStateDefaultTemplate;
  const { iconType, pageTitle, description, rightSideItems } = pageHeader;
  pageHeader = undefined;
  children = (
@@ -81,14 +83,13 @@ export const KibanaPageTemplate: FunctionComponent<KibanaPageTemplateProps> = ({
  } else if (isEmptyState && pageHeader && children) {
  template = template ?? 'centeredContent';
  } else if (isEmptyState && !pageHeader) {
- template = template ?? 'centeredBody';
+ template = template ?? emptyStateDefaultTemplate;
  }
 
  return (
  <EuiPageTemplate
  template={template}
  restrictWidth={restrictWidth}
- paddingSize={template === 'centeredBody' ? 'none' : 'l'}
  pageHeader={pageHeader}
  pageSideBar={pageSideBar}
  pageSideBarProps={{

src/plugins/management/public/components/landing/landing.tsx

@@ -6,18 +6,27 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiEmptyPrompt, EuiHorizontalRule, EuiPageContent } from '@elastic/eui';
 
 interface ManagementLandingPageProps {
  version: string;
+ onAppMounted: (id: string) => void;
  setBreadcrumbs: () => void;
 }
 
-export const ManagementLandingPage = ({ version, setBreadcrumbs }: ManagementLandingPageProps) => {
+export const ManagementLandingPage = ({
+ version,
+ setBreadcrumbs,
+ onAppMounted,
+}: ManagementLandingPageProps) => {
  setBreadcrumbs();
 
+ useEffect(() => {
+ onAppMounted('');
+ }, [onAppMounted]);
+
  return (
  <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
  <EuiEmptyPrompt

src/plugins/management/public/components/management_app/management_router.tsx

@@ -49,6 +49,7 @@ export const ManagementRouter = memo(
  <ManagementLandingPage
  version={dependencies.kibanaVersion}
  setBreadcrumbs={setBreadcrumbs}
+ onAppMounted={onAppMounted}
  />
  )}
  />

src/plugins/presentation_util/public/components/solution_toolbar/items/button.scss

@@ -6,7 +6,9 @@
  border-color: $euiBorderColor !important; // sass-lint:disable-line no-important
 
  @include kbnThemeStyle('v8') {
- border-width: $euiBorderWidthThin;
- border-style: solid;
+ &[class*='--text'] {
+ border-width: $euiBorderWidthThin;
+ border-style: solid;
+ }
  }
 }

x-pack/plugins/enterprise_search/public/applications/app_search/components/error_connecting/error_connecting.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-import { EuiPage, EuiPageContent } from '@elastic/eui';
+import { KibanaPageTemplate } from '../../../../../../../../src/plugins/kibana_react/public';
 
 import { ErrorStatePrompt } from '../../../shared/error_state';
 import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
@@ -19,11 +19,9 @@ export const ErrorConnecting: React.FC = () => {
  <SetPageChrome />
  <SendTelemetry action="error" metric="cannot_connect" />
 
- <EuiPage restrictWidth>
- <EuiPageContent hasBorder>
- <ErrorStatePrompt />
- </EuiPageContent>
- </EuiPage>
+ <KibanaPageTemplate isEmptyState>
+ <ErrorStatePrompt />
+ </KibanaPageTemplate>
  </>
  );
 };

x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/error_connecting/error_connecting.tsx

@@ -7,16 +7,15 @@
 
 import React from 'react';
 
-import { EuiPage, EuiPageContent } from '@elastic/eui';
+import { KibanaPageTemplate } from '../../../../../../../../src/plugins/kibana_react/public';
 
 import { ErrorStatePrompt } from '../../../shared/error_state';
 import { SendEnterpriseSearchTelemetry as SendTelemetry } from '../../../shared/telemetry';
 
 export const ErrorConnecting: React.FC = () => (
- <EuiPage restrictWidth>
+ <KibanaPageTemplate isEmptyState>
  <SendTelemetry action="error" metric="cannot_connect" />
- <EuiPageContent>
- <ErrorStatePrompt />
- </EuiPageContent>
- </EuiPage>
+
+ <ErrorStatePrompt />
+ </KibanaPageTemplate>
 );

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/error_state/error_state.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 
-import { EuiPage, EuiPageBody, EuiPageContent } from '@elastic/eui';
+import { KibanaPageTemplate } from '../../../../../../../../src/plugins/kibana_react/public';
 
 import { WORKPLACE_SEARCH_PLUGIN } from '../../../../../common/constants';
 import { ErrorStatePrompt } from '../../../shared/error_state';
@@ -19,16 +19,14 @@ import { ViewContentHeader } from '../../components/shared/view_content_header';
 
 export const ErrorState: React.FC = () => {
  return (
- <EuiPage restrictWidth>
+ <>
  <SetPageChrome />
  <SendTelemetry action="error" metric="cannot_connect" />
 
- <EuiPageBody>
+ <KibanaPageTemplate isEmptyState>
  <ViewContentHeader title={WORKPLACE_SEARCH_PLUGIN.NAME} />
- <EuiPageContent>
- <ErrorStatePrompt />
- </EuiPageContent>
- </EuiPageBody>
- </EuiPage>
+ <ErrorStatePrompt />
+ </KibanaPageTemplate>
+ </>
  );
 };

x-pack/plugins/infra/public/pages/logs/log_entry_categories/page_content.tsx

@@ -116,9 +116,13 @@ const CategoriesPageTemplate: React.FC<LazyObservabilityPageTemplateProps> = ({
  return (
  <LogsPageTemplate
  data-test-subj="logsLogEntryCategoriesPage"
- pageHeader={{
- pageTitle: logCategoriesTitle,
- }}
+ pageHeader={
+ rest.isEmptyState
+ ? undefined
+ : {
+ pageTitle: logCategoriesTitle,
+ }
+ }
  {...rest}
  >
  {children}

x-pack/plugins/infra/public/pages/logs/log_entry_rate/page_content.tsx

@@ -158,9 +158,13 @@ const AnomaliesPageTemplate: React.FC<LazyObservabilityPageTemplateProps> = ({
  return (
  <LogsPageTemplate
  data-test-subj="logsLogEntryRatePage"
- pageHeader={{
- pageTitle: anomaliesTitle,
- }}
+ pageHeader={
+ rest.isEmptyState
+ ? undefined
+ : {
+ pageTitle: anomaliesTitle,
+ }
+ }
  {...rest}
  >
  {children}