Skip to content
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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

devinvillarosa
Copy link
Contributor

@devinvillarosa devinvillarosa commented Jan 21, 2025

  1. Consolidates 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

  • This pull request references any related issue by including "closes <link to issue>"
    • If no issue exists and your change is not a small fix, please create an issue first.
  • If this pull request adds new functionality, it includes unit tests that cover the changes
  • If this pull request removes docs files, it includes redirect settings in mint.json.
  • If this pull request adds functions or classes, it includes helpful docstrings.

Relates to #15512

@github-actions github-actions bot added the ui-replatform Related to the React UI rewrite label Jan 21, 2025
@devinvillarosa devinvillarosa force-pushed the start-automations-list branch 2 times, most recently from 98932c2 to f0c3eb2 Compare January 21, 2025 22:18
@devinvillarosa devinvillarosa marked this pull request as ready for review January 21, 2025 22:19
Copy link
Member

@desertaxle desertaxle left a 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.

Comment on lines 147 to 186
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>
);
};
Copy link
Member

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.

Copy link
Contributor Author

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

Copy link
Contributor Author

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

@devinvillarosa devinvillarosa force-pushed the start-automations-list branch 2 times, most recently from e5b52a3 to ab57414 Compare January 22, 2025 18:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ui-replatform Related to the React UI rewrite
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants