chore: Fix sticky search section (#5334)

* Fix: Make search section sticky to prevent collision with main content

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>

* Fix: Implement holistic solution for sticky search section

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>

* Add Home page button above Resources in sidebar navigation

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>

* Add blue Home icon to match other sidebar icons

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>

* Add blue icons for Lineage and Permissions to match other sidebar icons

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>

* Revert Lineage icon to original design while keeping blue color

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>

* Revert lineage icon to use original graphApp icon

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>

* Update Home icon to have a house shape

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>

* Format Layout.tsx with yarn format

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>

* Delete ui/src/graphics/LineageIcon.tsx

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: franciscojavierarceo

ui/src/graphics/HomeIcon.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export const HomeIcon = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#006BB4"
+    >
+      <path d="M8.36 1.37l6.36 5.88-.71.71L13 7.02v6.99h-3v-5H6v5H3V7.02L1.99 7.96l-.71-.71 6.36-5.88a.5.5 0 0 1 .72 0z" />
+    </svg>
+  );
+};

ui/src/graphics/PermissionsIcon.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export const PermissionsIcon = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#006BB4"
+    >
+      <path d="M12.9 7.1H11V4.2c0-1.7-1.3-3-3-3s-3 1.3-3 3v2.9H3.1C2.5 7.1 2 7.6 2 8.2v5.7c0 .6.5 1.1 1.1 1.1h9.8c.6 0 1.1-.5 1.1-1.1V8.2c0-.6-.5-1.1-1.1-1.1zM6 4.2c0-.6.4-1 1-1s1 .4 1 1v2.9H6V4.2z" />
+    </svg>
+  );
+};

ui/src/pages/Layout.tsx

@@ -7,7 +7,6 @@ import {
   EuiErrorBoundary,
   EuiHorizontalRule,
   EuiSpacer,
-  EuiPageHeader,
   EuiFlexGroup,
   EuiFlexItem,
 } from "@elastic/eui";
@@ -155,27 +154,47 @@ const Layout = () => {
 
         <EuiPageBody>
           <EuiErrorBoundary>
-            {data && (
-              <EuiPageHeader
-                paddingSize="l"
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                height: "100vh",
+              }}
+            >
+              {data && (
+                <div
+                  style={{
+                    position: "sticky",
+                    top: 0,
+                    zIndex: 100,
+                    backgroundColor: "var(--euiPageBackgroundColor)",
+                    borderBottom: "1px solid #D3DAE6",
+                    boxShadow: "0px 1px 5px rgba(0, 0, 0, 0.05)",
+                    padding: "16px",
+                    width: "100%",
+                  }}
+                >
+                  <EuiFlexGroup justifyContent="center">
+                    <EuiFlexItem
+                      grow={false}
+                      style={{ width: "600px", maxWidth: "90%" }}
+                    >
+                      <RegistrySearch ref={searchRef} categories={categories} />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </div>
+              )}
+              <div
                 style={{
-                  position: "sticky",
-                  top: 0,
-                  zIndex: 100,
-                  borderBottom: "1px solid #D3DAE6",
+                  flexGrow: 1,
+                  overflow: "auto",
+                  padding: "16px",
+                  height: "calc(100vh - 70px)",
                 }}
               >
-                <EuiFlexGroup justifyContent="center">
-                  <EuiFlexItem
-                    grow={false}
-                    style={{ width: "600px", maxWidth: "90%" }}
-                  >
-                    <RegistrySearch ref={searchRef} categories={categories} />
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </EuiPageHeader>
-            )}
-            <Outlet />
+                <Outlet />
+              </div>
+            </div>
           </EuiErrorBoundary>
         </EuiPageBody>
       </EuiPage>

ui/src/pages/Sidebar.tsx

@@ -12,6 +12,8 @@ import { FeatureViewIcon } from "../graphics/FeatureViewIcon";
 import { FeatureServiceIcon } from "../graphics/FeatureServiceIcon";
 import { DatasetIcon } from "../graphics/DatasetIcon";
 import { FeatureIcon } from "../graphics/FeatureIcon";
+import { HomeIcon } from "../graphics/HomeIcon";
+import { PermissionsIcon } from "../graphics/PermissionsIcon";
 
 const SideNav = () => {
   const registryUrl = useContext(RegistryPathContext);
@@ -66,8 +68,9 @@ const SideNav = () => {
     {
       name: "Home",
       id: htmlIdGenerator("home")(),
-      isSelected: useMatchSubpath(`${baseUrl}`),
-      renderItem: () => <div />,
+      icon: <EuiIcon type={HomeIcon} />,
+      renderItem: (props) => <Link {...props} to={`${baseUrl}`} />,
+      isSelected: useMatchSubpath(`${baseUrl}$`),
     },
     {
       name: "Resources",
@@ -131,7 +134,7 @@ const SideNav = () => {
         {
           name: "Permissions",
           id: htmlIdGenerator("permissions")(),
-          icon: <EuiIcon type="lock" />,
+          icon: <EuiIcon type={PermissionsIcon} />,
           renderItem: (props) => (
             <Link {...props} to={`${baseUrl}/permissions`} />
           ),