[Page layouts] Some light fixes (#103197) (#103885)

* [Solution Toolbar] Fixing button border on non-text color versions * [Alerts] Removed extra wrappers and use EuiPageHeader * [Logstash] Basic conversion to template * [Reporting] Adding bottomBorder to page header * [ML] Fix display of main navigation tabs * [Stack Management] Fix side nav not updating when going back to landing page * [Tags] Add spacing after page header * [License Management] Full width on file uploader * [Page Template] Fixed `emptyState` default template for pages with side nav * [Infra] Removing some page header displays in empty states * [Enterprise Search] Fix some error layouts * [Index Patterns] Quick fix for empty state * snaps * [Page Template] Remove forced padding when `centeredBody` * small hack for tab padding for ml * scroll ML page to fix test * fix test method type signature Co-authored-by: Dave Snider <dave.snider@gmail.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Michail Yasonik <michail.yasonik@elastic.co> Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Michail Yasonik <michail.yasonik@elastic.co>
elastic · Jun 30, 2021 · 5a4a08d · 5a4a08d
1 parent e467354
commit 5a4a08d
Show file tree

Hide file tree

Showing 29 changed files with 2,440 additions and 2,627 deletions.
diff --git a/...public/components/index_pattern_table/empty_state/__snapshots__/empty_state.test.tsx.snap b/...public/components/index_pattern_table/empty_state/__snapshots__/empty_state.test.tsx.snap
diff --git a/...ndex_pattern_management/public/components/index_pattern_table/empty_state/empty_state.tsx b/...ndex_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>

diff --git a/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap b/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap
diff --git a/src/plugins/kibana_react/public/page_template/page_template.tsx b/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={{

diff --git a/src/plugins/management/public/components/landing/landing.tsx b/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

diff --git a/src/plugins/management/public/components/management_app/management_router.tsx b/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}
             />
           )}
         />

diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/button.scss b/src/plugins/presentation_util/public/components/solution_toolbar/items/button.scss
@@ -4,4 +4,11 @@
 
   // Lighten the border color for all states
   border-color: $euiBorderColor !important; // sass-lint:disable-line no-important
+
+  @include kbnThemeStyle('v8') {
+    &[class*='--text'] {
+      border-width: $euiBorderWidthThin;
+      border-style: solid;
+    }
+  }
 }
diff --git a/test/functional/services/common/test_subjects.ts b/test/functional/services/common/test_subjects.ts
@@ -312,9 +312,12 @@ export class TestSubjects extends FtrService {
     return testSubjSelector(selector);
   }
 
-  public async scrollIntoView(selector: string) {
+  public async scrollIntoView(
+    selector: string,
+    offset?: number | { topOffset?: number; bottomOffset?: number }
+  ) {
     const element = await this.find(selector);
-    await element.scrollIntoViewIfNecessary();
+    await element.scrollIntoViewIfNecessary(offset);
   }
 
   // isChecked always returns false when run on an euiSwitch, because they use the aria-checked attribute

diff --git a/...se_search/public/applications/app_search/components/error_connecting/error_connecting.tsx b/...se_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>
     </>
   );
 };
diff --git a/...ch/public/applications/enterprise_search/components/error_connecting/error_connecting.tsx b/...ch/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>
 );
diff --git a/.../enterprise_search/public/applications/workplace_search/views/error_state/error_state.tsx b/.../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>
+    </>
   );
 };
diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page_content.tsx b/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}

diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page_content.tsx b/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}