[Home] Elastic home page redesign (#70571) (#76030)

Co-authored-by: Catherine Liu <catherine.liu@elastic.co>
Co-authored-by: Ryan Keairns <contactryank@gmail.com>
Co-authored-by: Catherine Liu <catherineqliu@outlook.com>
Co-authored-by: Michael Marcialis <michael.marcialis@elastic.co>

Co-authored-by: Ryan Keairns <contactryank@gmail.com>
Co-authored-by: Michael Marcialis <michael.marcialis@elastic.co>

Author: 3 people

src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap

@@ -125,7 +125,7 @@ export function Header({
     <>
       <LoadingIndicator loadingCount$={observables.loadingCount$} />
       <header className={className} data-test-subj="headerGlobalNav">
-        <EuiHeader position="fixed">
+        <EuiHeader position="fixed" id="headerGlobalNav">
           <EuiHeaderSection grow={false}>
             {navType === 'modern' ? (
               <EuiHeaderSectionItem border="right" className="header__toggleNavButtonSection">

src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap

@@ -3,5 +3,5 @@
 }
 
 .kbnGlobalBannerList__item + .kbnGlobalBannerList__item {
-  margin-top: $euiSize;
+  margin-top: $euiSizeS;
 }

src/core/public/chrome/ui/header/header.tsx

@@ -46,7 +46,7 @@ export const DEFAULT_APP_CATEGORIES = Object.freeze({
     order: 3000,
   },
   security: {
-    id: 'security',
+    id: 'securitySolution',
     label: i18n.translate('core.ui.securityNavList.label', {
       defaultMessage: 'Security',
     }),

src/core/public/overlays/banners/_banners_list.scss

@@ -4,5 +4,6 @@
   "server": true,
   "ui": true,
   "requiredPlugins": ["management"],
-  "requiredBundles": ["kibanaReact"]
+  "optionalPlugins": ["home"],
+  "requiredBundles": ["kibanaReact", "home"]
 }

src/core/utils/default_app_categories.ts

@@ -114,6 +114,21 @@ export class AdvancedSettingsComponent extends Component<
         filteredSettings: this.mapSettings(Query.execute(query, this.settings)),
       });
     });
+
+    // scrolls to setting provided in the URL hash
+    const { hash } = window.location;
+    if (hash !== '') {
+      setTimeout(() => {
+        const id = hash.replace('#', '');
+        const element = document.getElementById(id);
+        const globalNavOffset = document.getElementById('headerGlobalNav')?.offsetHeight || 0;
+
+        if (element) {
+          element.scrollIntoView();
+          window.scrollBy(0, -globalNavOffset); // offsets scroll by height of the global nav
+        }
+      }, 0);
+    }
   }
 
   componentWillUnmount() {