Skip to content

chore: Fix sticky search section #5334

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
franciscojavierarceo merged 10 commits into from
May 7, 2025
Merged

chore: Fix sticky search section #5334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b862abe
Fix: Make search section sticky to prevent collision with main content
devin-ai-integration[bot] May 6, 2025
65b2ecc
Fix: Implement holistic solution for sticky search section
devin-ai-integration[bot] May 6, 2025
c086506
Add Home page button above Resources in sidebar navigation
devin-ai-integration[bot] May 7, 2025
6805f4f
Add blue Home icon to match other sidebar icons
devin-ai-integration[bot] May 7, 2025
0555696
Add blue icons for Lineage and Permissions to match other sidebar icons
devin-ai-integration[bot] May 7, 2025
4bf4976
Revert Lineage icon to original design while keeping blue color
devin-ai-integration[bot] May 7, 2025
9aae900
Revert lineage icon to use original graphApp icon
devin-ai-integration[bot] May 7, 2025
9ff0a78
Update Home icon to have a house shape
devin-ai-integration[bot] May 7, 2025
1f21f88
Format Layout.tsx with yarn format
devin-ai-integration[bot] May 7, 2025
f1fb64f
Delete ui/src/graphics/LineageIcon.tsx
franciscojavierarceo May 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions ui/src/graphics/HomeIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};
15 changes: 15 additions & 0 deletions ui/src/graphics/PermissionsIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};
57 changes: 38 additions & 19 deletions ui/src/pages/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
EuiErrorBoundary,
EuiHorizontalRule,
EuiSpacer,
EuiPageHeader,
EuiFlexGroup,
EuiFlexItem,
} from "@elastic/eui";
Expand Down Expand Up @@ -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>
Expand Down
9 changes: 6 additions & 3 deletions ui/src/pages/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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`} />
),
Expand Down