Skip to content

MARS-1181-Add-breadcrumb-component-to-Entities-view #243

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
henryjburg merged 3 commits into from
Jun 16, 2026
Merged

MARS-1181-Add-breadcrumb-component-to-Entities-view #243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d6568f0
MARS-1181 Add `Breadcrumb` components
henryjburg Jun 16, 2026
7fae0b6
MARS-1181 Fix weird `Linky` behavior
henryjburg Jun 16, 2026
d2f4005
MARS-1181 Fix issue with `Linky` tests
henryjburg Jun 16, 2026
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
5 changes: 2 additions & 3 deletions client/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import React, { ReactElement } from "react";

// Styling to be applied across the application
import "./styles/styles.scss";

import "@fontsource/roboto";

// Chakra provider component
Expand Down Expand Up @@ -57,8 +56,8 @@ import ForgotPassword from "@pages/account/ForgotPassword";
import ResetPassword from "@pages/account/ResetPassword";

// Providers
import { WorkspaceProvider } from "./hooks/useWorkspace";
import { FeaturesProvider } from "./hooks/useFeatures";
import { WorkspaceProvider } from "@hooks/useWorkspace";
import { FeaturesProvider } from "@hooks/useFeatures";

// Theme extension
import { theme } from "./styles/theme";
Expand Down
4 changes: 2 additions & 2 deletions client/src/components/Linky/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,7 @@ const Linky = (props: LinkyProps) => {
rounded={"md"}
overflow={"hidden"}
cursor={"pointer"}
onClick={() => setShowNavigator(!showNavigator)}
onClick={onClickHandler}
flexShrink={0}
_hover={{
borderColor: "blue.300",
Expand Down Expand Up @@ -311,7 +311,7 @@ const Linky = (props: LinkyProps) => {
</HoverCard.Trigger>
<Portal>
<HoverCard.Positioner>
<HoverCard.Content p={"3"} gap={"2"} w={"xs"}>
<HoverCard.Content p={"3"} gap={"2"} w={"xs"} zIndex={"max"}>
<HoverCard.Arrow>
<HoverCard.ArrowTip />
</HoverCard.Arrow>
Expand Down
73 changes: 43 additions & 30 deletions client/src/pages/view/Entity.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ import {
EmptyState,
Timeline,
Collapsible,
Spacer,
Textarea,
Breadcrumb,
} from "@chakra-ui/react";
import ActorTag from "@components/ActorTag";
import { Content } from "@components/Container";
Expand Down Expand Up @@ -1215,44 +1215,59 @@ const Entity = () => {
)}

<Flex gap={"2"} p={"1"} direction={"row"} justify={"space-between"} align={"center"} wrap={"wrap"}>
<Flex direction={"row"} gap={"2"} align={"center"} p={"0"} m={"0"}>
<Flex
id={"entityNameTag"}
align={"center"}
gap={"1"}
p={"1"}
border={"2px solid"}
borderColor={GLOBAL_STYLES.entity.color.icon}
bg={"purple.50"}
rounded={"md"}
>
<Icon name={"entity"} size={"sm"} color={GLOBAL_STYLES.entity.color.icon} />
<Tooltip content={displayEntityData.name}>
<Heading fontWeight={"semibold"} size={"sm"}>
{_.truncate(displayEntityData.name, { length: 30 })}
</Heading>
</Tooltip>
</Flex>

{displayEntityArchived && (
{/* Breadcrumbs */}
<Flex align={"center"} gap={"2"} ml={"0.5"}>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item
onClick={() => navigate("/")}
_hover={{
cursor: "pointer",
textDecoration: "underline",
}}
>
Dashboard
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item
gap={"1"}
onClick={() => navigate("/entities")}
_hover={{
cursor: "pointer",
textDecoration: "underline",
}}
>
<Icon size={"xs"} name={"entity"} color={GLOBAL_STYLES.entity.color.icon} />
Entities
</Breadcrumb.Item>
<Breadcrumb.Separator />
</Breadcrumb.List>
</Breadcrumb.Root>

<Flex direction={"row"} gap={"2"} align={"center"} p={"0"} m={"0"}>
<Flex
id={"entityArchiveTag"}
id={"entityNameTag"}
align={"center"}
gap={"1"}
p={"1"}
border={"2px solid"}
borderColor={"gray.500"}
bg={GLOBAL_STYLES.card.bg}
borderColor={displayEntityArchived ? "gray.500" : GLOBAL_STYLES.entity.color.icon}
bg={displayEntityArchived ? GLOBAL_STYLES.card.bg : "purple.50"}
rounded={"md"}
>
<Icon name={"archive"} size={"sm"} color={"gray.500"} />
<Tooltip content={"This Entity has been archived"}>
<Icon
name={"entity"}
size={"sm"}
color={displayEntityArchived ? "gray.500" : GLOBAL_STYLES.entity.color.icon}
/>
<Tooltip content={`${displayEntityArchived ? "Archived: " : ""}${displayEntityData.name}`} showArrow>
<Heading fontWeight={"semibold"} size={"sm"}>
Archived
{_.truncate(displayEntityData.name, { length: 30 })}
</Heading>
</Tooltip>
{displayEntityArchived && <Icon name={"archive"} size={"sm"} color={"gray.500"} />}
</Flex>
)}
</Flex>
</Flex>

{/* Buttons */}
Expand Down Expand Up @@ -1974,8 +1989,6 @@ const Entity = () => {
<TimestampTag timestamp={entity.created} description={"Created"} />
</Flex>

<Spacer />

{/* Visibility */}
<Flex direction={"column"} gap={"2"}>
<Text
Expand Down
68 changes: 43 additions & 25 deletions client/src/pages/view/Project.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
Timeline,
Collapsible,
Textarea,
Breadcrumb,
} from "@chakra-ui/react";
import ActorTag from "@components/ActorTag";
import Collaborators from "@components/Collaborators";
Expand Down Expand Up @@ -682,42 +683,59 @@ const Project = () => {
)}

<Flex gap={"2"} p={"1"} direction={"row"} justify={"space-between"} align={"center"} wrap={"wrap"}>
<Flex direction={"row"} gap={"2"} align={"center"} p={"0"} m={"0"}>
<Flex
id={"projectNameTag"}
align={"center"}
gap={"1"}
p={"1"}
border={"2px solid"}
borderColor={GLOBAL_STYLES.project.color.icon}
rounded={"md"}
bg={"blue.50"}
>
<Icon name={"project"} size={"sm"} color={GLOBAL_STYLES.project.color.icon} />
<Heading fontWeight={"semibold"} size={"sm"}>
{displayProjectData.name}
</Heading>
</Flex>

{displayProjectArchived && (
{/* Breadcrumbs */}
<Flex align={"center"} gap={"2"} ml={"0.5"}>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item
onClick={() => navigate("/")}
_hover={{
cursor: "pointer",
textDecoration: "underline",
}}
>
Dashboard
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item
gap={"1"}
onClick={() => navigate("/projects")}
_hover={{
cursor: "pointer",
textDecoration: "underline",
}}
>
<Icon size={"xs"} name={"project"} color={GLOBAL_STYLES.project.color.icon} />
Projects
</Breadcrumb.Item>
<Breadcrumb.Separator />
</Breadcrumb.List>
</Breadcrumb.Root>

<Flex direction={"row"} gap={"2"} align={"center"} p={"0"} m={"0"}>
<Flex
id={"projectArchiveTag"}
id={"projectNameTag"}
align={"center"}
gap={"1"}
p={"1"}
border={"2px solid"}
borderColor={"gray.500"}
bg={GLOBAL_STYLES.card.bg}
borderColor={displayProjectArchived ? "gray.500" : GLOBAL_STYLES.project.color.icon}
bg={displayProjectArchived ? GLOBAL_STYLES.card.bg : "blue.50"}
rounded={"md"}
>
<Icon name={"archive"} size={"sm"} color={"gray.500"} />
<Tooltip content={"This Project has been archived"}>
<Icon
name={"project"}
size={"sm"}
color={displayProjectArchived ? "gray.500" : GLOBAL_STYLES.project.color.icon}
/>
<Tooltip content={`${displayProjectArchived ? "Archived: " : ""}${displayProjectData.name}`} showArrow>
<Heading fontWeight={"semibold"} size={"sm"}>
Archived
{_.truncate(displayProjectData.name, { length: 30 })}
</Heading>
</Tooltip>
{displayProjectArchived && <Icon name={"archive"} size={"sm"} color={"gray.500"} />}
</Flex>
)}
</Flex>
</Flex>

{/* Buttons */}
Expand Down
67 changes: 43 additions & 24 deletions client/src/pages/view/Template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React, { useEffect, useMemo, useState } from "react";

// Existing and custom components
import {
Breadcrumb,
Button,
CloseButton,
Collapsible,
Expand Down Expand Up @@ -555,41 +556,59 @@ const Template = () => {
)}

<Flex gap={"2"} p={"1"} direction={"row"} justify={"space-between"} align={"center"} wrap={"wrap"}>
<Flex direction={"row"} gap={"2"} align={"center"} p={"0"} m={"0"}>
<Flex
align={"center"}
gap={"1"}
p={"1"}
border={"2px solid"}
borderColor={GLOBAL_STYLES.template.color.icon}
bg={"teal.50"}
rounded={"md"}
>
<Icon name={"template"} size={"sm"} color={GLOBAL_STYLES.template.color.icon} />
<Heading fontWeight={"semibold"} size={"sm"}>
{displayTemplateName}
</Heading>
</Flex>

{displayTemplateArchived && (
{/* Breadcrumbs */}
<Flex align={"center"} gap={"2"} ml={"0.5"}>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item
onClick={() => navigate("/")}
_hover={{
cursor: "pointer",
textDecoration: "underline",
}}
>
Dashboard
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item
gap={"1"}
onClick={() => navigate("/templates")}
_hover={{
cursor: "pointer",
textDecoration: "underline",
}}
>
<Icon size={"xs"} name={"template"} color={GLOBAL_STYLES.template.color.icon} />
Templates
</Breadcrumb.Item>
<Breadcrumb.Separator />
</Breadcrumb.List>
</Breadcrumb.Root>

<Flex direction={"row"} gap={"2"} align={"center"} p={"0"} m={"0"}>
<Flex
id={"templateArchiveTag"}
id={"templateNameTag"}
align={"center"}
gap={"1"}
p={"1"}
border={"2px solid"}
borderColor={"gray.500"}
bg={GLOBAL_STYLES.card.bg}
borderColor={displayTemplateArchived ? "gray.500" : GLOBAL_STYLES.template.color.icon}
bg={displayTemplateArchived ? GLOBAL_STYLES.card.bg : "teal.50"}
rounded={"md"}
>
<Icon name={"archive"} size={"sm"} color={"gray.500"} />
<Tooltip content={"This Template has been archived"}>
<Icon
name={"template"}
size={"sm"}
color={displayTemplateArchived ? "gray.500" : GLOBAL_STYLES.template.color.icon}
/>
<Tooltip content={`${displayTemplateArchived ? "Archived: " : ""}${displayTemplateName}`} showArrow>
<Heading fontWeight={"semibold"} size={"sm"}>
Archived
{_.truncate(displayTemplateName, { length: 30 })}
</Heading>
</Tooltip>
{displayTemplateArchived && <Icon name={"archive"} size={"sm"} color={"gray.500"} />}
</Flex>
)}
</Flex>
</Flex>

{/* Buttons */}
Expand Down
14 changes: 0 additions & 14 deletions client/test/components/Linky.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,20 +171,6 @@ describe("Linky Component", () => {
});

describe("Navigation", () => {
it("opens hover card on click when data is loaded", async () => {
renderLinky();

await waitFor(() => {
expect(screen.getAllByText("Test Entity")[0]).toBeTruthy();
});

fireEvent.click(screen.getAllByText("Test Entity")[0]);

await waitFor(() => {
expect(screen.getByRole("button", { name: /view/i })).toBeTruthy();
});
});

it("does not navigate when deleted", async () => {
const deletedMock = {
...mockEntityQuery,
Expand Down
Loading