-
Notifications
You must be signed in to change notification settings - Fork 1.7k
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.
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
[UI v2] feat: Consolidates components for automation(s) routes #16804
base: main
Are you sure you want to change the base?
Conversation
98932c2
to
f0c3eb2
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think reuse of components across these pages is a good thing, but I think there's a better way to do it than a displayType
prop.
const NavHeader = ({ displayType, data }: NavHeaderProps) => { | ||
if (displayType === "page") { | ||
return ( | ||
<div className="flex items-center gap-2"> | ||
<Breadcrumb> | ||
<BreadcrumbList> | ||
<BreadcrumbItem> | ||
<BreadcrumbLink | ||
to="/automations" | ||
className="text-xl font-semibold" | ||
> | ||
Automations | ||
</BreadcrumbLink> | ||
</BreadcrumbItem> | ||
<BreadcrumbSeparator /> | ||
<BreadcrumbItem className="text-xl font-semibold"> | ||
<BreadcrumbPage>{data.name}</BreadcrumbPage> | ||
</BreadcrumbItem> | ||
</BreadcrumbList> | ||
</Breadcrumb> | ||
</div> | ||
); | ||
} | ||
|
||
return ( | ||
<Breadcrumb> | ||
<BreadcrumbList> | ||
<BreadcrumbItem className="text-xl"> | ||
<BreadcrumbLink | ||
to="/automations/automation/$id" | ||
params={{ id: data.id }} | ||
className="text-lg" | ||
> | ||
{data.name} | ||
</BreadcrumbLink> | ||
</BreadcrumbItem> | ||
</BreadcrumbList> | ||
</Breadcrumb> | ||
); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think if a single prop controls rendering two mutually exclusive component hierarchies, that's a sign that this should be two separate components.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sounds good. Maybe I can just re-arrange some components.
I think the tricky part was having the different Breadcrumb headers for the 2 views
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok, ended up just building the pages but using re-usable components
ui-v2/src/components/automations/automation-details/automation-details.tsx
Outdated
Show resolved
Hide resolved
f0c3eb2
to
3ec4cc3
Compare
e5b52a3
to
ab57414
Compare
ab57414
to
caed5c4
Compare
AutomationDetails
component to serve for both/automations
and/automations/automation
routes.Next step is joining data between actions and its resources (currently randomly generated and mocked)
https://github.com/user-attachments/assets/4bc2eff1-dad7-441f-ada2-84d20cafa634
Screen.Recording.2025-01-21.at.2.12.12.PM.mov
Checklist
<link to issue>
"mint.json
.Relates to #15512