refactor: update provisioners page to match the new design #17232
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the provisioners page to align with the new design, removing legacy components and reorganizing query logic and UI components. Key changes include:
- Removal of outdated page views and Storybook stories.
- Introduction of new components (ProvisionerVersion, ProvisionerRow, ProvisionerKey, etc.) with updated styling and improved layout.
- Updates to data queries to filter out offline provisioners and adjust error handling.
Reviewed Changes
Copilot reviewed 21 out of 21 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| OrganizationProvisionersPageView.tsx | Replaces the legacy provisioners view with a new table-based layout and updated error handling. |
| OrganizationProvisionersPage.tsx | Updates the query to use provisionerDaemons and filter out offline provisioners. |
| ProvisionerVersion.tsx, ProvisionerRow.tsx, ProvisionerKey.tsx | New components to present provisioner details, version status, and key info in line with the new design. |
| JobRow.tsx, JobStatusIndicator.tsx, ProvisionerTags.tsx | Adjustments in job and tag presentation components consistent with the new styling conventions. |
| Storybook files | Updated or added stories to reflect the new component implementations and behaviors. |
Comments suppressed due to low confidence (1)
site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx:96
- The error message references 'provisioner jobs' even though the page is about provisioners, which may confuse users. Consider updating the error message to 'Error loading the provisioners' or similar.
<EmptyState message="Error loading the provisioner jobs" cta={...} />
| <header className="flex flex-row items-baseline justify-between"> | ||
| <div className="flex flex-col gap-2"> | ||
| <h1 className="text-3xl m-0">Provisioners</h1> | ||
| <p className="text-sm text-content-secondary m-0"> | ||
| Coder server runs provisioner daemons which execute terraform during | ||
| workspace and template builds.{" "} | ||
| <Link href={docs("/admin/provisioners")}>View docs</Link> | ||
| </p> | ||
| </div> | ||
| </header> |
There was a problem hiding this comment.
Not sure if I'll have time to do a full review for a while, but is there a reason this isn't using SettingsHeader?
There was a problem hiding this comment.
Not really, I will use it!
| <> | ||
| <TableRow> | ||
| <TableCell> | ||
| <button |
There was a problem hiding this comment.
native html button, no component?
There was a problem hiding this comment.
I used the native because I wanted a button "without any styles" but I think I can do that easily in another way or creating a "unstyled" variant for those cases and keep the styles for focus.
Demo
Screen.Recording.2025-04-02.at.17.14.05.mov
Closes #17221