From 6fb31a44624bb1f69f93e55cd3701c6c9b037dc2 Mon Sep 17 00:00:00 2001
From: minnakt <47064971+minnakt@users.noreply.github.com>
Date: Fri, 30 Aug 2024 09:46:10 -0400
Subject: [PATCH] DEVPROD-1062: Enable jsx-sort-props rule in Spruce (#349)

---
 apps/parsley/.eslintrc.cjs                    |   1 -
 apps/spruce/src/App.tsx                       |   4 +-
 .../spruce/src/components/Accordion/index.tsx |   8 +-
 .../Banners/SlackNotificationBanner.tsx       |  12 +-
 .../src/components/Breadcrumbs/index.tsx      |   6 +-
 apps/spruce/src/components/ButtonDropdown.tsx |  14 +-
 .../src/components/Buttons/PlusButton.tsx     |   2 +-
 .../src/components/Checkbox/CheckboxGroup.tsx |   8 +-
 .../src/components/CodeChanges/index.tsx      |  10 +-
 .../src/components/CodeChangesTable/index.tsx |   6 +-
 .../CommitChartLabel.test.tsx                 |   8 +-
 .../src/components/CommitChartLabel/index.tsx |   6 +-
 .../ConditionalWrapper.test.tsx               |   2 +-
 apps/spruce/src/components/Content/Layout.tsx |   4 +-
 apps/spruce/src/components/Content/index.tsx  |  82 +++----
 .../spruce/src/components/DayPicker/index.tsx |   2 +-
 .../src/components/Dropdown/Dropdown.test.tsx |   2 +-
 apps/spruce/src/components/Dropdown/index.tsx |   2 +-
 .../EditableTagField.stories.tsx              |   2 +-
 .../EditableTagField.test.tsx                 |  10 +-
 .../components/EditableTagField/TagRow.tsx    |  18 +-
 .../src/components/EditableTagField/index.tsx |  14 +-
 .../ErrorHandling/ErrorFallback.tsx           |   2 +-
 apps/spruce/src/components/Feedback/index.tsx |   6 +-
 .../FilterBadges/FilterBadges.stories.tsx     |  10 +-
 .../FilterBadges/FilterBadges.test.tsx        |  16 +-
 .../components/FilterBadges/SeeMoreModal.tsx  |   6 +-
 .../src/components/FilterBadges/index.tsx     |   8 +-
 .../useFilterBadgeQueryParams.test.tsx        |   2 +-
 .../components/FilterInputControls/index.tsx  |   4 +-
 .../GroupedTaskStatusBadge.stories.tsx        |   6 +-
 .../GroupedTaskStatusBadge.test.tsx           |  10 +-
 .../GroupedTaskStatusBadge/index.tsx          |  16 +-
 .../Header/NavDropdown/NavDropdown.test.tsx   |   8 +-
 .../components/Header/NavDropdown/index.tsx   |   6 +-
 apps/spruce/src/components/Header/Navbar.tsx  |  14 +-
 .../HistoryTable/Cell/Cell.test.tsx           |  16 +-
 .../components/HistoryTable/Cell/index.tsx    |   8 +-
 .../HistoryTable/ColumnPaginationButtons.tsx  |   8 +-
 .../HistoryTable/HistoryTable.stories.tsx     |   2 +-
 .../components/HistoryTable/HistoryTable.tsx  |  18 +-
 .../HistoryTableIcon.stories.tsx              |   6 +-
 .../HistoryTableIcon.test.tsx                 |   4 +-
 .../HistoryTable/HistoryTableIcon/index.tsx   |   8 +-
 .../FoldedCommit/FoldedCommit.test.tsx        |   8 +-
 .../BaseRow/FoldedCommit/index.tsx            |   8 +-
 .../HistoryTableRow/BaseRow/index.tsx         |   6 +-
 .../HistoryTableTestSearch.stories.tsx        |   2 +-
 .../HistoryTableTestSearch.tsx                |  10 +-
 .../LoadingSection/LoadingRow/index.tsx       |   2 +-
 .../src/components/HostStatusBadge/index.tsx  |   2 +-
 .../src/components/Hosts/HostPopover.tsx      |  12 +-
 .../src/components/Hosts/Reprovision.tsx      |   4 +-
 .../src/components/Hosts/RestartJasper.tsx    |   4 +-
 .../components/Hosts/UpdateStatusModal.tsx    |  18 +-
 .../src/components/Icon/icons/index.tsx       |  74 +++---
 .../src/components/IconTooltip/index.tsx      |   2 +-
 .../src/components/LinkToReconfigurePage.tsx  |   4 +-
 .../Loading/PatchAndTaskFullPageLoad.tsx      |   6 +-
 apps/spruce/src/components/MetadataCard.tsx   |   4 +-
 .../src/components/Notifications/index.tsx    |  10 +-
 .../PageSizeSelector.stories.tsx              |   2 +-
 .../PageSizeSelector.test.tsx                 |   2 +-
 .../src/components/PageSizeSelector/index.tsx |   6 +-
 .../components/Pagination/Pagination.test.tsx |  24 +-
 .../src/components/Pagination/index.tsx       |  12 +-
 .../PatchActionButtons/AddNotification.tsx    |   4 +-
 .../PatchActionButtons/EnqueuePatch.tsx       |   4 +-
 .../PatchActionButtons/RestartPatch.tsx       |  10 +-
 .../ScheduleTasks/index.tsx                   |   2 +-
 .../ScheduleUndispatchedBaseTasks.tsx         |   2 +-
 .../PatchActionButtons/UnscheduleTasks.tsx    |   2 +-
 .../ListArea/PatchCard/DropdownMenu.tsx       |  18 +-
 .../PatchesPage/ListArea/PatchCard/index.tsx  |  18 +-
 .../components/PatchesPage/ListArea/index.tsx |   4 +-
 .../PatchesPage/RequesterSelector.tsx         |  10 +-
 .../components/PatchesPage/StatusSelector.tsx |   4 +-
 .../src/components/PatchesPage/index.tsx      |  14 +-
 .../PerfPlugin/TrendChartsPlugin.tsx          |   2 +-
 .../components/Popconfirm/Popconfirm.test.tsx |   8 +-
 .../src/components/Popconfirm/index.tsx       |  12 +-
 .../components/ProjectSelect/FavoriteStar.tsx |   2 +-
 .../ProjectSelect/ProjectOptionGroup.tsx      |   8 +-
 .../ProjectSelect/ProjectSelect.stories.tsx   |   4 +-
 .../ProjectSelect/ProjectSelect.test.tsx      |  18 +-
 .../src/components/ProjectSelect/index.tsx    |  24 +-
 .../components/ScheduleTasksModal/index.tsx   |  32 +--
 .../SearchableDropdown.stories.tsx            |  28 +--
 .../SearchableDropdown.test.tsx               |   4 +-
 .../components/SearchableDropdown/index.tsx   |  34 +--
 .../SetPriority/SetPriority.test.tsx          |   2 +-
 .../src/components/SetPriority/index.tsx      |   2 +-
 .../components/Settings/EventLog/EventLog.tsx |   2 +-
 .../src/components/Settings/Form.test.tsx     |   2 +-
 .../Settings/NavigationWarningModal.tsx       |   2 +-
 .../components/Spawn/MountVolumeSelect.tsx    |  10 +-
 .../src/components/Spawn/getFormSchema.tsx    |   2 +-
 .../spawnHostModal/Widgets/DistroDropdown.tsx |  24 +-
 .../ArrayFieldTemplates/index.tsx             |  17 +-
 .../ObjectFieldTemplates.test.tsx             |  22 +-
 .../ObjectFieldTemplates/index.tsx            |  14 +-
 .../SpruceForm/FieldTemplates/index.tsx       |   8 +-
 .../SpruceForm/SpruceForm.stories.tsx         |  10 +-
 .../components/SpruceForm/SpruceForm.test.tsx |  30 +--
 .../SpruceForm/Widgets/DateTimePicker.tsx     |  26 +--
 .../SpruceForm/Widgets/LeafyGreenWidgets.tsx  |  68 +++---
 .../SpruceForm/Widgets/MultiSelect.tsx        |  12 +-
 .../src/components/SpruceForm/index.tsx       |  26 +--
 .../components/Table/BaseTable.stories.tsx    |   4 +-
 .../spruce/src/components/Table/BaseTable.tsx |  30 +--
 apps/spruce/src/components/Table/Filters.tsx  |  40 ++--
 .../components/Table/TableControl/index.tsx   |  14 +-
 .../TablePopover/TableFilterPopover.tsx       |  14 +-
 .../TablePopover/TableSearchPopover.tsx       |  20 +-
 .../TaskStatusBadge/TaskStatusBadge.test.tsx  |   4 +-
 .../src/components/TaskStatusBadge/index.tsx  |   6 +-
 .../components/TaskStatusFilters/index.tsx    |  12 +-
 .../TaskStatusIcon/TaskStatusIcon.stories.tsx |   2 +-
 .../src/components/TaskStatusIcon/index.tsx   |  18 +-
 .../components/TaskStatusIconLegend/index.tsx |  11 +-
 .../src/components/TasksTable/Columns.tsx     |   8 +-
 .../src/components/TasksTable/index.tsx       |  28 +--
 .../TestStatusBadge.stories.tsx               |   2 +-
 .../src/components/TestStatusBadge/index.tsx  |   2 +-
 .../TextInputWithValidation.test.tsx          |  20 +-
 .../TextInputWithValidation/index.tsx         |  20 +-
 .../src/components/TimePicker/index.tsx       |   2 +-
 .../TreeSelect/TreeSelect.stories.tsx         |   2 +-
 .../src/components/TreeSelect/TreeSelect.tsx  |  22 +-
 .../TupleSelect/TupleSelect.stories.tsx       |   2 +-
 .../TupleSelect/TupleSelect.test.tsx          |   6 +-
 .../src/components/TupleSelect/index.tsx      |  19 +-
 ...upleSelectWithRegexConditional.stories.tsx |   2 +-
 .../TupleSelectWithRegexConditional.test.tsx  |  10 +-
 .../TupleSelectWithRegexConditional/index.tsx |  12 +-
 .../BuildVariantAccordion.tsx                 |  12 +-
 .../TaskStatusCheckbox.tsx                    |   8 +-
 .../TaskStatusCheckboxContainer.tsx           |  12 +-
 .../VersionRestartModal.tsx                   |  28 +--
 .../VersionRestartModal/VersionTasks.tsx      |   8 +-
 .../components/WelcomeModal/CarouselCard.tsx  |   8 +-
 .../components/WelcomeModal/CarouselDots.tsx  |   2 +-
 .../WelcomeModal/WelcomeModal.stories.tsx     |   6 +-
 .../components/WelcomeModal/WelcomeModal.tsx  |  16 +-
 apps/spruce/src/components/styles/Link.tsx    |   2 +-
 .../useBreadcrumbRoot.test.tsx                |   4 +-
 .../useUpsertQueryParams.test.tsx             |   6 +-
 apps/spruce/src/pages/CommitQueue.tsx         |  30 +--
 apps/spruce/src/pages/Login.tsx               |  12 +-
 apps/spruce/src/pages/ProjectPatches.tsx      |  10 +-
 apps/spruce/src/pages/Task.tsx                |  18 +-
 apps/spruce/src/pages/UserPatches.tsx         |   2 +-
 apps/spruce/src/pages/Version.tsx             |   2 +-
 .../commitqueue/CommitQueueCard.test.tsx      |   4 +-
 .../src/pages/commitqueue/CommitQueueCard.tsx |   2 +-
 .../pages/commitqueue/ConfirmPatchButton.tsx  |   6 +-
 .../BuildVariantCard.test.tsx                 |   8 +-
 .../VariantGroupedTaskStatusBadges/index.tsx  |   4 +-
 .../WaterfallTaskStatusIcon.test.tsx          |   8 +-
 .../WaterfallTaskStatusIcon/index.tsx         |  12 +-
 .../ActiveCommits/BuildVariantCard/index.tsx  |  20 +-
 .../CommitBarChart/CommitBarChart.stories.tsx |   6 +-
 .../CommitBarChart/CommitBarChart.test.tsx    |  12 +-
 .../CommitBarChart/CommitChartTooltip.tsx     |  16 +-
 .../ActiveCommits/CommitBarChart/index.tsx    |   6 +-
 .../src/pages/commits/ActiveCommits/index.tsx |  14 +-
 .../pages/commits/CommitChart/ChartToggle.tsx |   4 +-
 .../src/pages/commits/CommitChart/index.tsx   |  14 +-
 .../commits/CommitTypeSelector/index.tsx      |   6 +-
 .../src/pages/commits/CommitsWrapper.tsx      |  14 +-
 .../InactiveCommits/InactiveCommits.test.tsx  |   2 +-
 .../pages/commits/InactiveCommits/index.tsx   |  14 +-
 .../src/pages/commits/PaginationButtons.tsx   |   8 +-
 .../pages/commits/ProjectHealth.stories.tsx   |   6 +-
 .../spruce/src/pages/commits/RenderCommit.tsx |   8 +-
 .../spruce/src/pages/commits/StatusSelect.tsx |   6 +-
 .../src/pages/commits/WaterfallMenu/index.tsx |   2 +-
 apps/spruce/src/pages/commits/index.tsx       |  30 +--
 .../BuildVariantCard.tsx                      |   2 +-
 .../ConfigureBuildVariants/index.tsx          |  12 +-
 .../ConfigureTasks/ConfigureTasks.test.tsx    | 210 +++++++++---------
 .../DisabledVariantTasksList/index.tsx        |   4 +-
 .../ConfigureTasks/index.tsx                  |  42 ++--
 .../configurePatchCore/ParametersContent.tsx  |   4 +-
 .../configurePatchCore/index.tsx              |  16 +-
 .../src/pages/container/EventsTable/index.tsx |   4 +-
 apps/spruce/src/pages/container/index.tsx     |   8 +-
 .../distroSettings/DeleteDistro/index.tsx     |   4 +-
 .../pages/distroSettings/HeaderButtons.tsx    |   4 +-
 .../src/pages/distroSettings/SaveModal.tsx    |   2 +-
 apps/spruce/src/pages/distroSettings/Tabs.tsx |  14 +-
 .../spruce/src/pages/distroSettings/index.tsx |  10 +-
 .../tabs/EventLogTab/EventLogTab.tsx          |   2 +-
 .../tabs/ProviderTab/UnsavedModal.tsx         |   2 +-
 apps/spruce/src/pages/host/HostCard.tsx       |   2 +-
 .../spruce/src/pages/host/HostEventString.tsx |  38 ++--
 apps/spruce/src/pages/host/HostTable.tsx      |   8 +-
 apps/spruce/src/pages/host/index.tsx          |  40 ++--
 apps/spruce/src/pages/hosts/HostsTable.tsx    |   6 +-
 apps/spruce/src/pages/hosts/index.tsx         |  20 +-
 .../src/pages/image/DistrosTable/index.tsx    |   6 +-
 .../image/ImageEventLog/ImageEventLog.tsx     |   4 +-
 .../ImageEventLog/ImageEventLogTable.tsx      |   4 +-
 .../src/pages/image/ImageSelect/index.tsx     |   8 +-
 .../src/pages/image/PackagesTable/index.tsx   |   6 +-
 apps/spruce/src/pages/image/Tabs.tsx          |   6 +-
 apps/spruce/src/pages/image/index.tsx         |   6 +-
 .../image/tabs/BuildInformationTab/index.tsx  |   6 +-
 .../image/tabs/EventLogTab/EventLogTab.tsx    |   4 +-
 .../spruce/src/pages/jobLogs/JobLogsTable.tsx |  10 +-
 apps/spruce/src/pages/jobLogs/Metadata.tsx    |   2 +-
 apps/spruce/src/pages/jobLogs/index.tsx       |  28 +--
 .../src/pages/preferences/PreferencesTabs.tsx |  14 +-
 apps/spruce/src/pages/preferences/index.tsx   |  12 +-
 .../preferences/preferencesTabs/NewUITab.tsx  |   8 +-
 .../preferencesTabs/NotificationsTab.tsx      |   8 +-
 .../preferencesTabs/ProfileTab.tsx            |  42 ++--
 .../preferencesTabs/PublicKeysTab.tsx         |   2 +-
 .../cliTab/AuthenticationCard.tsx             |   2 +-
 .../preferencesTabs/cliTab/DownloadCard.tsx   |  18 +-
 .../cliTab/NodeList.stories.tsx               |   2 +-
 .../preferencesTabs/cliTab/NodeList.tsx       |   2 +-
 .../notificationTab/ClearSubscriptions.tsx    |  12 +-
 .../notificationTab/NotificationField.tsx     |   2 +-
 .../notificationTab/UserSubscriptions.tsx     |  12 +-
 .../publicKeysTab/EditModal.tsx               |  16 +-
 .../publicKeysTab/PublicKeysTable.tsx         |   4 +-
 .../CreateDuplicateProjectButton.tsx          |   6 +-
 .../projectSettings/CreateProjectModal.tsx    |   2 +-
 .../DefaultSectionToRepoModal.tsx             |   2 +-
 .../pages/projectSettings/HeaderButtons.tsx   |   6 +-
 .../spruce/src/pages/projectSettings/Tabs.tsx |  42 ++--
 .../createDuplicateModalSchema.tsx            |   2 +-
 .../src/pages/projectSettings/index.tsx       |  12 +-
 .../tabs/EventLogTab/EventLogTab.test.tsx     |   2 +-
 .../Fields/DeactivateStepbackTaskField.tsx    |   4 +-
 .../GeneralTab/Fields/DeleteProjectField.tsx  |   6 +-
 .../Fields/RepoConfigField.test.tsx           |   4 +-
 .../GeneralTab/Fields/RepoConfigField.tsx     |   8 +-
 .../GeneralTab/Fields/RepotrackerField.tsx    |   2 +-
 .../tabs/GeneralTab/GeneralTab.tsx            |   2 +-
 .../GithubAppSettingsTab/AppSettingsTab.tsx   |   2 +-
 .../GithubTriggerAliasField.tsx               |   4 +-
 .../FieldTemplates.tsx                        |   6 +-
 .../PermissionGroupsTab.tsx                   |   2 +-
 .../getFormSchema.tsx                         |   2 +-
 .../VariablesTab/PromoteVariablesModal.tsx    |   4 +-
 .../tabs/VariablesTab/VariablesTab.tsx        |   4 +-
 apps/spruce/src/pages/spawn/SpawnVolume.tsx   |   2 +-
 apps/spruce/src/pages/spawn/index.tsx         |  12 +-
 .../spawn/spawnHost/EditSpawnHostButton.tsx   |   6 +-
 .../spawnHost/EditSpawnHostModal.test.tsx     |  20 +-
 .../spawn/spawnHost/EditSpawnHostModal.tsx    |  12 +-
 .../spawnHost/PauseSleepScheduleModal.tsx     |   2 +-
 .../spawn/spawnHost/SpawnHostActionButton.tsx |   8 +-
 .../pages/spawn/spawnHost/SpawnHostButton.tsx |   6 +-
 .../pages/spawn/spawnHost/SpawnHostTable.tsx  |   2 +-
 .../spawnHost/SpawnHostTableActions.test.tsx  |  12 +-
 .../spawn/spawnHost/SpawnHostTableActions.tsx |   6 +-
 .../spawnHostButton/SpawnHostModal.tsx        |  12 +-
 .../spawn/spawnVolume/SpawnVolumeButton.tsx   |   8 +-
 .../spawnVolume/SpawnVolumeModal.test.tsx     |  10 +-
 .../spawn/spawnVolume/SpawnVolumeModal.tsx    |  12 +-
 .../spawn/spawnVolume/SpawnVolumeTable.tsx    |   2 +-
 .../DeleteVolumeButton.tsx                    |   4 +-
 .../spawnVolumeTableActions/EditButton.tsx    |   4 +-
 .../EditVolumeModal.tsx                       |  14 +-
 .../spawnVolumeTableActions/MigrateButton.tsx |   2 +-
 .../MigrateVolumeModal.tsx                    |  14 +-
 .../spawnVolumeTableActions/MountButton.tsx   |   4 +-
 .../MountVolumeModal.tsx                      |  10 +-
 .../spawnVolumeTableActions/UnmountButton.tsx |  24 +-
 apps/spruce/src/pages/task/ActionButtons.tsx  |  28 +--
 apps/spruce/src/pages/task/TaskTabs.tsx       |  40 ++--
 .../executionDropdown/ExecutionSelector.tsx   |   4 +-
 .../task/metadata/ETATimer/ETATimer.test.tsx  |   6 +-
 .../pages/task/metadata/Metadata.stories.tsx  |  10 +-
 .../src/pages/task/metadata/Metadata.test.tsx |  12 +-
 apps/spruce/src/pages/task/metadata/index.tsx |  38 ++--
 .../taskTabs/ExecutionTasksTable.stories.tsx  |   8 +-
 .../task/taskTabs/ExecutionTasksTable.tsx     |   2 +-
 .../FileTable/GroupedFileTable/index.tsx      |  18 +-
 .../pages/task/taskTabs/FileTable/index.tsx   |   4 +-
 apps/spruce/src/pages/task/taskTabs/Logs.tsx  |  12 +-
 .../src/pages/task/taskTabs/TestsTable.tsx    |  16 +-
 .../AddIssueModal/AddIssueModal.test.tsx      |  12 +-
 .../AddIssueModal/index.tsx                   |  20 +-
 .../AnnotationNote.tsx                        |  20 +-
 .../AnnotationTicketRow.stories.tsx           |   2 +-
 .../AnnotationTicketRow/index.tsx             |   4 +-
 .../AnnotationTicketRowWithActions/index.tsx  |   8 +-
 .../AnnotationTicketsList.test.tsx            |  10 +-
 .../AnnotationTicketsList/index.tsx           |   8 +-
 .../BuildBaron.test.tsx                       |  24 +-
 .../buildBaronAndAnnotations/BuildBaron.tsx   |   6 +-
 .../BuildBaronContent.tsx                     |  22 +-
 .../CreatedTicketsTable/BBCreatedTickets.tsx  |   2 +-
 .../CustomCreatedTickets.tsx                  |   4 +-
 .../FileTicketButton.tsx                      |   2 +-
 .../Issues/AnnotationTickets.tsx              |  20 +-
 .../Issues/Issues.tsx                         |  10 +-
 .../Issues/SuspectedIssues.tsx                |  10 +-
 .../JiraTicketList/JiraTicketRow/index.tsx    |   2 +-
 .../JiraTicketList/index.tsx                  |   2 +-
 .../src/pages/task/taskTabs/logs/LogTypes.tsx |   2 +-
 .../task/taskTabs/testsTable/LogsColumn.tsx   |  18 +-
 .../testsTable/getColumnsTemplate.tsx         |   2 +-
 .../logsColumn/TaskHistoryTestsButton.tsx     |   6 +-
 .../taskHistory/BuildVariantSelector.tsx      |  12 +-
 .../pages/taskHistory/ColumnHeaders/index.tsx |  10 +-
 .../TaskHistoryRow/TaskHistoryRow.test.tsx    |  12 +-
 .../taskHistory/TaskHistoryRow/index.tsx      |  14 +-
 apps/spruce/src/pages/taskHistory/index.tsx   |  12 +-
 .../src/pages/taskQueue/DistroOption.tsx      |   2 +-
 .../pages/taskQueue/TaskQueueTable/index.tsx  |  14 +-
 apps/spruce/src/pages/taskQueue/index.tsx     |  36 +--
 .../pages/variantHistory/ColumnHeaders.tsx    |   4 +-
 .../src/pages/variantHistory/TaskSelector.tsx |   6 +-
 .../variantHistory/VariantHistoryRow.test.tsx |  12 +-
 .../variantHistory/VariantHistoryRow.tsx      |  12 +-
 .../spruce/src/pages/variantHistory/index.tsx |  16 +-
 .../src/pages/version/ActionButtons.tsx       |  20 +-
 .../VariantTaskGroup.test.tsx                 |   4 +-
 .../VariantTaskGroup/index.tsx                |  28 +--
 .../src/pages/version/DownstreamTasks.tsx     |   8 +-
 .../spruce/src/pages/version/EnqueueModal.tsx |  14 +-
 apps/spruce/src/pages/version/Metadata.tsx    |   4 +-
 .../pages/version/NameChangeModal/index.tsx   |  10 +-
 .../pages/version/ParametersModal/index.tsx   |   2 +-
 .../spruce/src/pages/version/TaskDuration.tsx |  18 +-
 apps/spruce/src/pages/version/Tasks.tsx       |  10 +-
 apps/spruce/src/pages/version/VersionTabs.tsx |  22 +-
 .../DownstreamProjectAccordion.tsx            |  14 +-
 .../TaskDurationTable.stories.tsx             |   4 +-
 .../taskDuration/TaskDurationTable.test.tsx   |   4 +-
 .../taskDuration/TaskDurationTable.tsx        |   8 +-
 .../pages/version/tasks/PatchTasksTable.tsx   |  26 +--
 apps/spruce/src/utils/string/jiraLinkify.tsx  |   4 +-
 packages/eslint-config/index.js               |   2 +
 339 files changed, 1870 insertions(+), 1866 deletions(-)

diff --git a/apps/parsley/.eslintrc.cjs b/apps/parsley/.eslintrc.cjs
index dafb0b2b6..2477fe870 100644
--- a/apps/parsley/.eslintrc.cjs
+++ b/apps/parsley/.eslintrc.cjs
@@ -8,7 +8,6 @@ module.exports = {
   plugins: ["sort-keys-plus"],
   root: true,
   rules: {
-    "react/jsx-sort-props": WARN, // Sort props alphabetically
     "sort-imports": [
       ERROR,
       {
diff --git a/apps/spruce/src/App.tsx b/apps/spruce/src/App.tsx
index b85ec32f0..00e943ccf 100644
--- a/apps/spruce/src/App.tsx
+++ b/apps/spruce/src/App.tsx
@@ -18,15 +18,15 @@ const browserRouter = createBrowserRouter(
   createRoutesFromElements(
     <>
       {(isDevelopmentBuild() || isLocal()) && (
-        <Route path={routes.login} element={<Login />} />
+        <Route element={<Login />} path={routes.login} />
       )}
       <Route
-        path="/*"
         element={
           <GQLWrapper>
             <Content />
           </GQLWrapper>
         }
+        path="/*"
       />
     </>,
   ),
diff --git a/apps/spruce/src/components/Accordion/index.tsx b/apps/spruce/src/components/Accordion/index.tsx
index 1b60bcbba..563abdd8c 100644
--- a/apps/spruce/src/components/Accordion/index.tsx
+++ b/apps/spruce/src/components/Accordion/index.tsx
@@ -48,10 +48,10 @@ export const Accordion: React.FC<AccordionProps> = ({
     <div className={className} data-cy={dataCy}>
       {toggleFromBottom && (
         <AnimatedAccordion
-          hide={!isAccordionDisplayed}
-          disableAnimation={disableAnimation}
           aria-expanded={isAccordionDisplayed}
           data-cy="accordion-collapse-container"
+          disableAnimation={disableAnimation}
+          hide={!isAccordionDisplayed}
         >
           {children}
         </AnimatedAccordion>
@@ -71,10 +71,10 @@ export const Accordion: React.FC<AccordionProps> = ({
       )}
       {!toggleFromBottom && (
         <AnimatedAccordion
-          hide={!isAccordionDisplayed}
-          disableAnimation={disableAnimation}
           aria-expanded={isAccordionDisplayed}
           data-cy="accordion-collapse-container"
+          disableAnimation={disableAnimation}
+          hide={!isAccordionDisplayed}
         >
           <ContentsContainer indent={showCaret && useIndent}>
             {children}
diff --git a/apps/spruce/src/components/Banners/SlackNotificationBanner.tsx b/apps/spruce/src/components/Banners/SlackNotificationBanner.tsx
index a549573ae..52db93172 100644
--- a/apps/spruce/src/components/Banners/SlackNotificationBanner.tsx
+++ b/apps/spruce/src/components/Banners/SlackNotificationBanner.tsx
@@ -88,16 +88,16 @@ export const SlackNotificationBanner = () => {
 
   return shouldShowSlackBanner ? (
     <Banner
-      variant="info"
       data-cy="slack-notification-banner"
       dismissible
       onClose={hideBanner}
+      variant="info"
     >
       You can receive a Slack notification when your patch is ready.{" "}
       <Popconfirm
+        confirmDisabled={!slackUsername || loadingUpdateUserSettings}
         confirmText="Save"
         onConfirm={() => saveNotificationSettings()}
-        confirmDisabled={!slackUsername || loadingUpdateUserSettings}
         trigger={
           <SubscribeButton data-cy="subscribe-to-notifications">
             Subscribe
@@ -105,13 +105,13 @@ export const SlackNotificationBanner = () => {
         }
       >
         <TextInput
-          label="Slack Username"
+          autoFocus
           data-cy="slack-username-input"
-          // @ts-expect-error: FIXME. This comment was added by an automated script.
-          value={slackUsername}
+          label="Slack Username"
           onChange={(e) => setSlackUsername(e.target.value)}
           onKeyPress={(e) => e.key === "Enter" && saveNotificationSettings()}
-          autoFocus
+          // @ts-expect-error: FIXME. This comment was added by an automated script.
+          value={slackUsername}
         />
       </Popconfirm>
     </Banner>
diff --git a/apps/spruce/src/components/Breadcrumbs/index.tsx b/apps/spruce/src/components/Breadcrumbs/index.tsx
index 4b5ded2ea..2bc706ade 100644
--- a/apps/spruce/src/components/Breadcrumbs/index.tsx
+++ b/apps/spruce/src/components/Breadcrumbs/index.tsx
@@ -26,8 +26,8 @@ const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ breadcrumbs }) => (
         {breadcrumbs.length - 1 !== index && (
           <PaddedIcon
             data-cy="breadcrumb-chevron"
-            glyph="ChevronRight"
             fill={gray.dark2}
+            glyph="ChevronRight"
             size="small"
           />
         )}
@@ -49,12 +49,12 @@ const BreadcrumbFragment: React.FC<BreadcrumbFragmentProps> = ({
     <Tooltip
       align="top"
       data-cy="breadcrumb-tooltip"
-      justify="middle"
       enabled={shouldTrimMessage}
+      justify="middle"
       trigger={
         to ? (
           <div data-cy={dataCy}>
-            <StyledRouterLink to={to} onClick={onClick}>
+            <StyledRouterLink onClick={onClick} to={to}>
               {message}
             </StyledRouterLink>
           </div>
diff --git a/apps/spruce/src/components/ButtonDropdown.tsx b/apps/spruce/src/components/ButtonDropdown.tsx
index c279607ff..f612b9e15 100644
--- a/apps/spruce/src/components/ButtonDropdown.tsx
+++ b/apps/spruce/src/components/ButtonDropdown.tsx
@@ -23,22 +23,22 @@ export const ButtonDropdown: React.FC<Props> = ({
   size = "small",
 }) => (
   <Menu
+    adjustOnMutation
+    data-cy="card-dropdown"
+    open={open}
+    popoverZIndex={zIndex.popover}
+    // @ts-expect-error: FIXME. This comment was added by an automated script.
+    setOpen={setOpen}
     trigger={
       <LoadingButton
-        size={size}
         data-cy={dataCy}
         disabled={disabled}
         loading={loading}
+        size={size}
       >
         <Icon glyph="Ellipsis" />
       </LoadingButton>
     }
-    data-cy="card-dropdown"
-    popoverZIndex={zIndex.popover}
-    adjustOnMutation
-    open={open}
-    // @ts-expect-error: FIXME. This comment was added by an automated script.
-    setOpen={setOpen}
   >
     {dropdownItems}
   </Menu>
diff --git a/apps/spruce/src/components/Buttons/PlusButton.tsx b/apps/spruce/src/components/Buttons/PlusButton.tsx
index 0fefe37f4..795aaf625 100644
--- a/apps/spruce/src/components/Buttons/PlusButton.tsx
+++ b/apps/spruce/src/components/Buttons/PlusButton.tsx
@@ -9,8 +9,8 @@ export const PlusButton: ExtendableBox<
 > = forwardRef(({ leftGlyph, ...rest }: ButtonProps, ref) => (
   <LeafyGreenButton
     ref={ref}
-    leftGlyph={<Icon glyph="Plus" />}
     as="button"
+    leftGlyph={<Icon glyph="Plus" />}
     {...rest}
   />
 ));
diff --git a/apps/spruce/src/components/Checkbox/CheckboxGroup.tsx b/apps/spruce/src/components/Checkbox/CheckboxGroup.tsx
index bf41b936a..f87d21fbd 100644
--- a/apps/spruce/src/components/Checkbox/CheckboxGroup.tsx
+++ b/apps/spruce/src/components/Checkbox/CheckboxGroup.tsx
@@ -18,12 +18,12 @@ export const CheckboxGroup: React.FC<CheckboxesProps> = ({
     {data.map(({ key, title, value: checkboxValue }) => (
       <StyledCheckbox
         key={key}
-        className="cy-checkbox"
-        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e, key)}
-        label={title}
-        checked={value.includes(checkboxValue)}
         bold={false}
+        checked={value.includes(checkboxValue)}
+        className="cy-checkbox"
         data-cy={title}
+        label={title}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e, key)}
       />
     ))}
   </CheckboxesWrapper>
diff --git a/apps/spruce/src/components/CodeChanges/index.tsx b/apps/spruce/src/components/CodeChanges/index.tsx
index 896a0e441..306063f9e 100644
--- a/apps/spruce/src/components/CodeChanges/index.tsx
+++ b/apps/spruce/src/components/CodeChanges/index.tsx
@@ -36,7 +36,7 @@ export const CodeChanges: React.FC<CodeChangesProps> = ({ patchId }) => {
   const { moduleCodeChanges } = data?.patch ?? {};
 
   if (loading) {
-    return <Skeleton active title paragraph={{ rows: 8 }} />;
+    return <Skeleton active paragraph={{ rows: 8 }} title />;
   }
   if (error) {
     return <div id="patch-error">{error.message}</div>;
@@ -93,19 +93,19 @@ export const CodeChanges: React.FC<CodeChangesProps> = ({ patchId }) => {
               <Title>Changes on {branchName}: </Title>
               <StyledButton
                 data-cy="html-diff-btn"
-                size="small"
-                title="Open diff as html file"
                 href={htmlLink}
+                size="small"
                 target="_blank"
+                title="Open diff as html file"
               >
                 HTML
               </StyledButton>
               <StyledButton
                 data-cy="raw-diff-btn"
-                size="small"
-                title="Open diff as raw file"
                 href={rawLink}
+                size="small"
                 target="_blank"
+                title="Open diff as raw file"
               >
                 Raw
               </StyledButton>
diff --git a/apps/spruce/src/components/CodeChangesTable/index.tsx b/apps/spruce/src/components/CodeChangesTable/index.tsx
index 65747f52e..408a8a18c 100644
--- a/apps/spruce/src/components/CodeChangesTable/index.tsx
+++ b/apps/spruce/src/components/CodeChangesTable/index.tsx
@@ -24,8 +24,8 @@ export const CodeChangesTable: React.FC<CodeChangesTableProps> = ({
     <BaseTable
       data-cy="code-changes-table"
       data-cy-row="code-changes-table-row"
-      table={table}
       shouldAlternateRowColor
+      table={table}
     />
   );
 };
@@ -57,12 +57,12 @@ const columns = [
     accessorKey: "additions",
     header: "Additions",
     // @ts-expect-error: FIXME. This comment was added by an automated script.
-    cell: ({ getValue }) => <FileDiffText value={getValue()} type="+" />,
+    cell: ({ getValue }) => <FileDiffText type="+" value={getValue()} />,
   },
   {
     accessorKey: "deletions",
     header: "Deletions",
     // @ts-expect-error: FIXME. This comment was added by an automated script.
-    cell: ({ getValue }) => <FileDiffText value={getValue()} type="-" />,
+    cell: ({ getValue }) => <FileDiffText type="-" value={getValue()} />,
   },
 ];
diff --git a/apps/spruce/src/components/CommitChartLabel/CommitChartLabel.test.tsx b/apps/spruce/src/components/CommitChartLabel/CommitChartLabel.test.tsx
index cd72e7b0f..74a226872 100644
--- a/apps/spruce/src/components/CommitChartLabel/CommitChartLabel.test.tsx
+++ b/apps/spruce/src/components/CommitChartLabel/CommitChartLabel.test.tsx
@@ -8,15 +8,15 @@ import CommitChartLabel from ".";
 const RenderCommitChartLabel = ({ version }) => (
   <MockedProvider mocks={[getSpruceConfigMock]}>
     <CommitChartLabel
-      versionId={version.id}
-      githash={shortenGithash(version.revision)}
-      createTime={version.createTime}
       author={version.author}
-      message={version.message}
+      createTime={version.createTime}
+      githash={shortenGithash(version.revision)}
       gitTags={[
         { tag: "v1.2.3", pusher: "release-bot" },
         { tag: "v1.2.3-rc0", pusher: "release-bot" },
       ]}
+      message={version.message}
+      versionId={version.id}
     />
   </MockedProvider>
 );
diff --git a/apps/spruce/src/components/CommitChartLabel/index.tsx b/apps/spruce/src/components/CommitChartLabel/index.tsx
index 0e27a21c0..354e60020 100644
--- a/apps/spruce/src/components/CommitChartLabel/index.tsx
+++ b/apps/spruce/src/components/CommitChartLabel/index.tsx
@@ -59,9 +59,9 @@ const CommitChartLabel: React.FC<Props> = ({
       <LabelText>
         <InlineCode
           as={Link}
+          data-cy="githash-link"
           onClick={onClickGithash}
           to={getVersionRoute(versionId)}
-          data-cy="githash-link"
         >
           {shortenGithash(githash)}
         </InlineCode>{" "}
@@ -102,9 +102,9 @@ const CommitChartLabel: React.FC<Props> = ({
       </LabelText>
       {shortenMessage && (
         <ExpandedText
-          popoverZIndex={zIndex.tooltip}
-          message={message}
           data-cy="long-commit-message-tooltip"
+          message={message}
+          popoverZIndex={zIndex.tooltip}
         />
       )}
       {gitTags && (
diff --git a/apps/spruce/src/components/ConditionalWrapper/ConditionalWrapper.test.tsx b/apps/spruce/src/components/ConditionalWrapper/ConditionalWrapper.test.tsx
index 5fe4d0488..d82e20ace 100644
--- a/apps/spruce/src/components/ConditionalWrapper/ConditionalWrapper.test.tsx
+++ b/apps/spruce/src/components/ConditionalWrapper/ConditionalWrapper.test.tsx
@@ -36,9 +36,9 @@ describe("conditionalWrapper", () => {
   it("should render the element surrounded by the secondary wrapper when the conditional is false and a secondary wrapper is supplied", () => {
     render(
       <ConditionalWrapper
+        altWrapper={(children) => <Wrapper2>{children}</Wrapper2>}
         condition={false}
         wrapper={(children) => <Wrapper1>{children}</Wrapper1>}
-        altWrapper={(children) => <Wrapper2>{children}</Wrapper2>}
       >
         <span>Some Element</span>
       </ConditionalWrapper>,
diff --git a/apps/spruce/src/components/Content/Layout.tsx b/apps/spruce/src/components/Content/Layout.tsx
index 6e870453e..7e61721d7 100644
--- a/apps/spruce/src/components/Content/Layout.tsx
+++ b/apps/spruce/src/components/Content/Layout.tsx
@@ -49,9 +49,9 @@ export const Layout: React.FC = () => {
       <Outlet />
       {!shouldDisableForTest && !hasUsedSpruceBefore && (
         <WelcomeModal
-          title="Welcome to the New Evergreen UI!"
-          param="hasUsedSpruceBefore"
           carouselCards={newSpruceUser}
+          param="hasUsedSpruceBefore"
+          title="Welcome to the New Evergreen UI!"
         />
       )}
       <FloatingContent>
diff --git a/apps/spruce/src/components/Content/index.tsx b/apps/spruce/src/components/Content/index.tsx
index 9683d043d..eeeb71384 100644
--- a/apps/spruce/src/components/Content/index.tsx
+++ b/apps/spruce/src/components/Content/index.tsx
@@ -34,77 +34,77 @@ import { Layout } from "./Layout";
 export const Content: React.FC = () => (
   <Routes>
     <Route element={<Layout />}>
-      <Route path="/" element={<Navigate to={routes.myPatches} />} />
-      <Route path={routes.commits} element={<Commits />}>
-        <Route path={`:${slugs.projectIdentifier}`} element={null} />
+      <Route element={<Navigate to={routes.myPatches} />} path="/" />
+      <Route element={<Commits />} path={routes.commits}>
+        <Route element={null} path={`:${slugs.projectIdentifier}`} />
       </Route>
-      <Route path={routes.container} element={<Container />} />
+      <Route element={<Container />} path={routes.container} />
       <Route
-        path={redirectRoutes.waterfall}
         element={<WaterfallCommitsRedirect />}
+        path={redirectRoutes.waterfall}
       />
-      <Route path={routes.configurePatch} element={<ConfigurePatch />}>
-        <Route path={`:${slugs.tab}`} element={null} />
+      <Route element={<ConfigurePatch />} path={routes.configurePatch}>
+        <Route element={null} path={`:${slugs.tab}`} />
       </Route>
-      <Route path={`${routes.distroSettings}/*`} element={<Distro />}>
-        <Route path={`:${slugs.tab}`} element={null} />
+      <Route element={<Distro />} path={`${routes.distroSettings}/*`}>
+        <Route element={null} path={`:${slugs.tab}`} />
       </Route>
       <Route
-        path={redirectRoutes.distroSettings}
         element={<DistroSettingsRedirect />}
+        path={redirectRoutes.distroSettings}
       />
-      <Route path={routes.host} element={<Host />} />
-      <Route path={routes.hosts} element={<Hosts />} />
+      <Route element={<Host />} path={routes.host} />
+      <Route element={<Hosts />} path={routes.hosts} />
       {showImageVisibilityPage && (
-        <Route path={`${routes.image}/*`} element={<Image />}>
-          <Route path={`:${slugs.tab}`} element={null} />
+        <Route element={<Image />} path={`${routes.image}/*`}>
+          <Route element={null} path={`:${slugs.tab}`} />
         </Route>
       )}
-      <Route path={routes.jobLogs} element={null}>
-        <Route path={`:${slugs.buildId}`} element={<JobLogs isLogkeeper />}>
-          <Route path={`:${slugs.groupId}`} element={null} />
+      <Route element={null} path={routes.jobLogs}>
+        <Route element={<JobLogs isLogkeeper />} path={`:${slugs.buildId}`}>
+          <Route element={null} path={`:${slugs.groupId}`} />
         </Route>
         <Route
-          path={`:${slugs.taskId}/:${slugs.execution}/:${slugs.groupId}`}
           element={<JobLogs isLogkeeper={false} />}
+          path={`:${slugs.taskId}/:${slugs.execution}/:${slugs.groupId}`}
         />
       </Route>
-      <Route path={routes.myPatches} element={<MyPatches />} />
-      <Route path={redirectRoutes.patch} element={<PatchRedirect />}>
-        <Route path={`:${slugs.tab}`} element={null} />
+      <Route element={<MyPatches />} path={routes.myPatches} />
+      <Route element={<PatchRedirect />} path={redirectRoutes.patch}>
+        <Route element={null} path={`:${slugs.tab}`} />
       </Route>
-      <Route path={`${routes.preferences}/*`} element={<Preferences />}>
-        <Route path={`:${slugs.tab}`} element={null} />
+      <Route element={<Preferences />} path={`${routes.preferences}/*`}>
+        <Route element={null} path={`:${slugs.tab}`} />
       </Route>
-      <Route path={routes.projectPatches} element={<ProjectPatches />} />
-      <Route path={`${routes.projectSettings}/*`} element={<ProjectSettings />}>
-        <Route path={`:${slugs.tab}`} element={null} />
+      <Route element={<ProjectPatches />} path={routes.projectPatches} />
+      <Route element={<ProjectSettings />} path={`${routes.projectSettings}/*`}>
+        <Route element={null} path={`:${slugs.tab}`} />
       </Route>
       <Route
-        path={redirectRoutes.projectSettings}
         element={<ProjectSettingsRedirect />}
+        path={redirectRoutes.projectSettings}
       />
-      <Route path={`${routes.spawn}/*`} element={<Spawn />}>
-        <Route path={`:${slugs.tab}`} element={null} />
+      <Route element={<Spawn />} path={`${routes.spawn}/*`}>
+        <Route element={null} path={`:${slugs.tab}`} />
       </Route>
-      <Route path={routes.commitQueue} element={<CommitQueue />} />
-      <Route path={routes.task} element={<Task />}>
-        <Route path={`:${slugs.tab}`} element={null} />
+      <Route element={<CommitQueue />} path={routes.commitQueue} />
+      <Route element={<Task />} path={routes.task}>
+        <Route element={null} path={`:${slugs.tab}`} />
       </Route>
-      <Route path={routes.taskHistory} element={<TaskHistory />} />
-      <Route path={routes.taskQueue} element={<TaskQueue />}>
-        <Route path={`:${slugs.distroId}`} element={null} />
+      <Route element={<TaskHistory />} path={routes.taskHistory} />
+      <Route element={<TaskQueue />} path={routes.taskQueue}>
+        <Route element={null} path={`:${slugs.distroId}`} />
       </Route>
-      <Route path={routes.userPatches} element={<UserPatches />} />
+      <Route element={<UserPatches />} path={routes.userPatches} />
       <Route
-        path={redirectRoutes.userPatches}
         element={<UserPatchesRedirect />}
+        path={redirectRoutes.userPatches}
       />
-      <Route path={routes.variantHistory} element={<VariantHistory />} />
-      <Route path={routes.version} element={<VersionPage />}>
-        <Route path={`:${slugs.tab}`} element={null} />
+      <Route element={<VariantHistory />} path={routes.variantHistory} />
+      <Route element={<VersionPage />} path={routes.version}>
+        <Route element={null} path={`:${slugs.tab}`} />
       </Route>
-      <Route path="*" element={<PageDoesNotExist />} />
+      <Route element={<PageDoesNotExist />} path="*" />
     </Route>
   </Routes>
 );
diff --git a/apps/spruce/src/components/DayPicker/index.tsx b/apps/spruce/src/components/DayPicker/index.tsx
index 1ec9fac0f..cc54528b0 100644
--- a/apps/spruce/src/components/DayPicker/index.tsx
+++ b/apps/spruce/src/components/DayPicker/index.tsx
@@ -43,10 +43,10 @@ export const DayPicker: React.FC<{
     <Container data-cy="daypicker">
       {days.map((day, i) => (
         <Day
+          key={day}
           day={day}
           disabled={disabled}
           handleClick={() => handleClick(i)}
-          key={day}
           selected={selectedDays[i]}
         />
       ))}
diff --git a/apps/spruce/src/components/Dropdown/Dropdown.test.tsx b/apps/spruce/src/components/Dropdown/Dropdown.test.tsx
index e0258f356..80eb0d204 100644
--- a/apps/spruce/src/components/Dropdown/Dropdown.test.tsx
+++ b/apps/spruce/src/components/Dropdown/Dropdown.test.tsx
@@ -49,7 +49,7 @@ describe("dropdown", () => {
   it("renders a custom button contents when custom buttonRenderer is passed in", () => {
     const customButtonRenderer = () => <div>Custom Button</div>;
     render(
-      <Dropdown buttonText="Some Button" buttonRenderer={customButtonRenderer}>
+      <Dropdown buttonRenderer={customButtonRenderer} buttonText="Some Button">
         {children()}
       </Dropdown>,
     );
diff --git a/apps/spruce/src/components/Dropdown/index.tsx b/apps/spruce/src/components/Dropdown/index.tsx
index 753e4ba2e..e08b8865b 100644
--- a/apps/spruce/src/components/Dropdown/index.tsx
+++ b/apps/spruce/src/components/Dropdown/index.tsx
@@ -48,9 +48,9 @@ const Dropdown: React.FC<DropdownProps> = ({
     <Container id={id}>
       <StyledButton
         ref={menuButtonRef}
-        onClick={() => setIsOpen(!isOpen)}
         data-cy={dataCy}
         disabled={disabled}
+        onClick={() => setIsOpen(!isOpen)}
         rightGlyph={<Icon glyph={isOpen ? "ChevronUp" : "ChevronDown"} />}
       >
         <ButtonContent>
diff --git a/apps/spruce/src/components/EditableTagField/EditableTagField.stories.tsx b/apps/spruce/src/components/EditableTagField/EditableTagField.stories.tsx
index c64c1385d..9ecad75b3 100644
--- a/apps/spruce/src/components/EditableTagField/EditableTagField.stories.tsx
+++ b/apps/spruce/src/components/EditableTagField/EditableTagField.stories.tsx
@@ -9,9 +9,9 @@ export default {
 export const Default: CustomStoryObj<typeof EditableTagField> = {
   render: () => (
     <EditableTagField
+      buttonText="Add Tag"
       inputTags={instanceTags}
       onChange={action("Change Tag")}
-      buttonText="Add Tag"
     />
   ),
 };
diff --git a/apps/spruce/src/components/EditableTagField/EditableTagField.test.tsx b/apps/spruce/src/components/EditableTagField/EditableTagField.test.tsx
index a1917eda4..535858c18 100644
--- a/apps/spruce/src/components/EditableTagField/EditableTagField.test.tsx
+++ b/apps/spruce/src/components/EditableTagField/EditableTagField.test.tsx
@@ -27,9 +27,9 @@ describe("editableTagField", () => {
 
     render(
       <EditableTagField
+        buttonText="Add Tag"
         inputTags={editableTags}
         onChange={updateData}
-        buttonText="Add Tag"
       />,
     );
 
@@ -47,9 +47,9 @@ describe("editableTagField", () => {
     const user = userEvent.setup();
     render(
       <EditableTagField
+        buttonText="Add Tag"
         inputTags={editableTags}
         onChange={updateData}
-        buttonText="Add Tag"
       />,
     );
 
@@ -84,9 +84,9 @@ describe("editableTagField", () => {
     const user = userEvent.setup();
     render(
       <EditableTagField
+        buttonText="Add Tag"
         inputTags={editableTags}
         onChange={updateData}
-        buttonText="Add Tag"
       />,
     );
 
@@ -109,9 +109,9 @@ describe("editableTagField", () => {
     const user = userEvent.setup();
     render(
       <EditableTagField
+        buttonText="Add Tag"
         inputTags={editableTags}
         onChange={updateData}
-        buttonText="Add Tag"
       />,
     );
 
@@ -146,9 +146,9 @@ describe("editableTagField", () => {
     const user = userEvent.setup();
     render(
       <EditableTagField
+        buttonText="Add Tag"
         inputTags={editableTags}
         onChange={updateData}
-        buttonText="Add Tag"
       />,
     );
 
diff --git a/apps/spruce/src/components/EditableTagField/TagRow.tsx b/apps/spruce/src/components/EditableTagField/TagRow.tsx
index 19730fdf1..69192761c 100644
--- a/apps/spruce/src/components/EditableTagField/TagRow.tsx
+++ b/apps/spruce/src/components/EditableTagField/TagRow.tsx
@@ -38,26 +38,26 @@ export const TagRow: React.FC<TagRowProps> = ({
         <FlexContainer data-cy="user-tag-row">
           <FlexColumnContainer>
             <TextArea
-              label="Key"
+              data-cy="user-tag-key-field"
               id={`tag_key_${tagId}`}
-              value={key}
+              label="Key"
               onChange={(e) =>
                 // @ts-expect-error: FIXME. This comment was added by an automated script.
                 dispatch({ type: "updateTag", key: e.target.value })
               }
-              data-cy="user-tag-key-field"
+              value={key}
             />
           </FlexColumnContainer>
           <FlexColumnContainer>
             <TextArea
-              label="Value"
+              data-cy="user-tag-value-field"
               id={`tag_value_${tagId}`}
-              value={value}
+              label="Value"
               onChange={(e) =>
                 // @ts-expect-error: FIXME. This comment was added by an automated script.
                 dispatch({ type: "updateTag", value: e.target.value })
               }
-              data-cy="user-tag-value-field"
+              value={value}
             />
           </FlexColumnContainer>
           {canSave ? (
@@ -70,8 +70,8 @@ export const TagRow: React.FC<TagRowProps> = ({
               }
             >
               <Icon
-                glyph="Checkmark"
                 data-cy="user-tag-edit-icon"
+                glyph="Checkmark"
                 onClick={() => {
                   // @ts-expect-error: FIXME. This comment was added by an automated script.
                   dispatch({
@@ -89,6 +89,7 @@ export const TagRow: React.FC<TagRowProps> = ({
           ) : (
             <IconButton aria-label="Delete Tag">
               <Icon
+                data-cy="user-tag-trash-icon"
                 glyph="Trash"
                 onClick={
                   isNewTag
@@ -97,7 +98,6 @@ export const TagRow: React.FC<TagRowProps> = ({
                     : // @ts-expect-error: FIXME. This comment was added by an automated script.
                       () => onDelete(tag.key)
                 }
-                data-cy="user-tag-trash-icon"
               />
             </IconButton>
           )}
@@ -106,9 +106,9 @@ export const TagRow: React.FC<TagRowProps> = ({
       {!shouldShowNewTag && (
         <ButtonContainer>
           <PlusButton
+            data-cy="add-tag-button"
             // @ts-expect-error: FIXME. This comment was added by an automated script.
             onClick={() => dispatch({ type: "newTag" })}
-            data-cy="add-tag-button"
           >
             {buttonText}
           </PlusButton>
diff --git a/apps/spruce/src/components/EditableTagField/index.tsx b/apps/spruce/src/components/EditableTagField/index.tsx
index 99a817ad2..04525ba8a 100644
--- a/apps/spruce/src/components/EditableTagField/index.tsx
+++ b/apps/spruce/src/components/EditableTagField/index.tsx
@@ -62,21 +62,21 @@ export const EditableTagField: React.FC<EditableTagFieldProps> = ({
     <FlexColumnContainer id={id}>
       {visibleTags.map((tag) => (
         <TagRow
-          tag={tag}
-          onDelete={deleteHandler}
           key={tag.key}
+          buttonText={buttonText}
+          isValidKey={validateKey}
+          onDelete={deleteHandler}
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           onUpdateTag={updateTagHandler}
-          isValidKey={validateKey}
-          buttonText={buttonText}
+          tag={tag}
         />
       ))}
       <TagRow
-        // @ts-expect-error: FIXME. This comment was added by an automated script.
-        onUpdateTag={updateTagHandler}
+        buttonText={buttonText}
         isNewTag
         isValidKey={validateKey}
-        buttonText={buttonText}
+        // @ts-expect-error: FIXME. This comment was added by an automated script.
+        onUpdateTag={updateTagHandler}
       />
     </FlexColumnContainer>
   );
diff --git a/apps/spruce/src/components/ErrorHandling/ErrorFallback.tsx b/apps/spruce/src/components/ErrorHandling/ErrorFallback.tsx
index d02e15cd7..ce0312e4d 100644
--- a/apps/spruce/src/components/ErrorHandling/ErrorFallback.tsx
+++ b/apps/spruce/src/components/ErrorHandling/ErrorFallback.tsx
@@ -17,7 +17,7 @@ const ErrorFallback = () => (
       </StyledSubtitle>
       <StyledLink href={getSpruceURL()}>Back To Home</StyledLink>
     </Text>
-    <img src={errorPage} alt="Error Background" />
+    <img alt="Error Background" src={errorPage} />
   </Center>
 );
 
diff --git a/apps/spruce/src/components/Feedback/index.tsx b/apps/spruce/src/components/Feedback/index.tsx
index 4c7da1d4c..1e4b4a25c 100644
--- a/apps/spruce/src/components/Feedback/index.tsx
+++ b/apps/spruce/src/components/Feedback/index.tsx
@@ -26,17 +26,17 @@ export const Feedback: React.FC = () => {
       justify="end"
       trigger={
         <IconButton aria-label="Show Feedback form">
-          <Icon glyph="Megaphone" color={green.dark1} />
+          <Icon color={green.dark1} glyph="Megaphone" />
         </IconButton>
       }
       triggerEvent="click"
     >
       Feedback for the Evergreen team?{" "}
-      <StyledLink target="_blank" href={jiraImprovementUrl}>
+      <StyledLink href={jiraImprovementUrl} target="_blank">
         Suggest an improvement
       </StyledLink>{" "}
       or{" "}
-      <StyledLink target="_blank" href={jiraBugUrl}>
+      <StyledLink href={jiraBugUrl} target="_blank">
         report a bug
       </StyledLink>
       .
diff --git a/apps/spruce/src/components/FilterBadges/FilterBadges.stories.tsx b/apps/spruce/src/components/FilterBadges/FilterBadges.stories.tsx
index 63937922e..e9bf1d84d 100644
--- a/apps/spruce/src/components/FilterBadges/FilterBadges.stories.tsx
+++ b/apps/spruce/src/components/FilterBadges/FilterBadges.stories.tsx
@@ -39,8 +39,8 @@ const BadgeContainer = () => {
     <div>
       <FilterBadges
         badges={badges}
-        onRemove={removeBadge}
         onClearAll={onClearAll}
+        onRemove={removeBadge}
       />
       <BadgeInput onAdd={addBadge} />
     </div>
@@ -65,16 +65,16 @@ const BadgeInput = ({
   return (
     <div>
       <TextInput
-        placeholder="key"
         label="key"
-        value={badgeKey}
         onChange={(e) => setBadgeKey(e.target.value)}
+        placeholder="key"
+        value={badgeKey}
       />
       <TextInput
-        placeholder="value"
         label="value"
-        value={badgeValue}
         onChange={(e) => setBadgeValue(e.target.value)}
+        placeholder="value"
+        value={badgeValue}
       />
       <StyledButton onClick={handleAdd}>Add</StyledButton>
     </div>
diff --git a/apps/spruce/src/components/FilterBadges/FilterBadges.test.tsx b/apps/spruce/src/components/FilterBadges/FilterBadges.test.tsx
index 5e7237ab6..80ca0fd27 100644
--- a/apps/spruce/src/components/FilterBadges/FilterBadges.test.tsx
+++ b/apps/spruce/src/components/FilterBadges/FilterBadges.test.tsx
@@ -6,7 +6,7 @@ describe("filterBadges", () => {
     const onRemove = vi.fn();
     const onClearAll = vi.fn();
     render(
-      <FilterBadges badges={[]} onRemove={onRemove} onClearAll={onClearAll} />,
+      <FilterBadges badges={[]} onClearAll={onClearAll} onRemove={onRemove} />,
     );
     expect(screen.queryAllByDataCy("filter-badge")).toHaveLength(0);
   });
@@ -15,8 +15,8 @@ describe("filterBadges", () => {
     render(
       <FilterBadges
         badges={[{ key: "test", value: "value" }]}
-        onRemove={vi.fn()}
         onClearAll={vi.fn()}
+        onRemove={vi.fn()}
       />,
     );
     expect(screen.queryAllByDataCy("filter-badge")).toHaveLength(1);
@@ -30,8 +30,8 @@ describe("filterBadges", () => {
           { key: "test", value: "value" },
           { key: "test2", value: "value2" },
         ]}
-        onRemove={vi.fn()}
         onClearAll={vi.fn()}
+        onRemove={vi.fn()}
       />,
     );
     expect(screen.queryAllByDataCy("filter-badge")).toHaveLength(2);
@@ -54,8 +54,8 @@ describe("filterBadges", () => {
           { key: "test9", value: "value9" },
           { key: "test10", value: "value10" },
         ]}
-        onRemove={vi.fn()}
         onClearAll={vi.fn()}
+        onRemove={vi.fn()}
       />,
     );
     expect(screen.queryAllByDataCy("filter-badge")).toHaveLength(8);
@@ -80,8 +80,8 @@ describe("filterBadges", () => {
           { key: "test9", value: "value9" },
           { key: "test10", value: "value10" },
         ]}
-        onRemove={vi.fn()}
         onClearAll={vi.fn()}
+        onRemove={vi.fn()}
       />,
     );
     // @ts-expect-error: FIXME. This comment was added by an automated script.
@@ -119,8 +119,8 @@ describe("filterBadges", () => {
           { key: "test9", value: "value9" },
           { key: "test10", value: "value10" },
         ]}
-        onRemove={vi.fn()}
         onClearAll={onClearAll}
+        onRemove={vi.fn()}
       />,
     );
     await user.click(screen.getByRole("button", { name: "CLEAR ALL FILTERS" }));
@@ -144,8 +144,8 @@ describe("filterBadges", () => {
           { key: "test9", value: "value9" },
           { key: "test10", value: "value10" },
         ]}
-        onRemove={onRemove}
         onClearAll={vi.fn()}
+        onRemove={onRemove}
       />,
     );
     const closeBadge = screen.queryAllByDataCy("close-badge")[0];
@@ -160,8 +160,8 @@ describe("filterBadges", () => {
     render(
       <FilterBadges
         badges={[{ key: "some", value: longName }]}
-        onRemove={vi.fn()}
         onClearAll={vi.fn()}
+        onRemove={vi.fn()}
       />,
     );
     const truncatedBadge = screen.queryByDataCy("filter-badge");
diff --git a/apps/spruce/src/components/FilterBadges/SeeMoreModal.tsx b/apps/spruce/src/components/FilterBadges/SeeMoreModal.tsx
index c2a06f1db..74937ee56 100644
--- a/apps/spruce/src/components/FilterBadges/SeeMoreModal.tsx
+++ b/apps/spruce/src/components/FilterBadges/SeeMoreModal.tsx
@@ -26,11 +26,11 @@ export const SeeMoreModal: React.FC<SeeMoreModalProps> = ({
         see {notVisibleCount} more
       </Link>
       <DisplayModal
+        data-cy="see-more-modal"
         open={open}
         setOpen={setOpen}
         size="large"
         title="Applied Filters"
-        data-cy="see-more-modal"
       >
         <BadgeContainer>
           {badges.map((b) => (
@@ -42,9 +42,9 @@ export const SeeMoreModal: React.FC<SeeMoreModalProps> = ({
           ))}
         </BadgeContainer>
         <Button
-          variant={Variant.Default}
-          size={Size.XSmall}
           onClick={onClearAll}
+          size={Size.XSmall}
+          variant={Variant.Default}
         >
           CLEAR ALL FILTERS
         </Button>
diff --git a/apps/spruce/src/components/FilterBadges/index.tsx b/apps/spruce/src/components/FilterBadges/index.tsx
index 1cf1649ae..f560d4f64 100644
--- a/apps/spruce/src/components/FilterBadges/index.tsx
+++ b/apps/spruce/src/components/FilterBadges/index.tsx
@@ -38,16 +38,16 @@ const FilterBadges: React.FC<FilterBadgesProps> = ({
         <SeeMoreModal
           badges={badges}
           notVisibleCount={notVisibleCount}
-          onRemoveBadge={handleOnRemove}
           onClearAll={handleClearAll}
+          onRemoveBadge={handleOnRemove}
         />
       )}
       {badges.length > 0 && (
         <Button
-          variant={Variant.Default}
-          size={Size.XSmall}
-          onClick={handleClearAll}
           data-cy="clear-all-filters"
+          onClick={handleClearAll}
+          size={Size.XSmall}
+          variant={Variant.Default}
         >
           CLEAR ALL FILTERS
         </Button>
diff --git a/apps/spruce/src/components/FilterBadges/useFilterBadgeQueryParams.test.tsx b/apps/spruce/src/components/FilterBadges/useFilterBadgeQueryParams.test.tsx
index 6057acd1a..f7b6aadf5 100644
--- a/apps/spruce/src/components/FilterBadges/useFilterBadgeQueryParams.test.tsx
+++ b/apps/spruce/src/components/FilterBadges/useFilterBadgeQueryParams.test.tsx
@@ -14,8 +14,8 @@ const Content = () => {
   return (
     <FilterBadges
       badges={badges}
-      onRemove={handleOnRemove}
       onClearAll={handleClearAll}
+      onRemove={handleOnRemove}
     />
   );
 };
diff --git a/apps/spruce/src/components/FilterInputControls/index.tsx b/apps/spruce/src/components/FilterInputControls/index.tsx
index e4cf77915..48a6be27a 100644
--- a/apps/spruce/src/components/FilterInputControls/index.tsx
+++ b/apps/spruce/src/components/FilterInputControls/index.tsx
@@ -15,15 +15,15 @@ export const FilterInputControls: React.FC<Props> = ({
 }) => (
   <ButtonsWrapper data-cy="filter-input-controls">
     <ButtonWrapper>
-      <Button data-cy="reset-button" size="small" onClick={onClickReset}>
+      <Button data-cy="reset-button" onClick={onClickReset} size="small">
         Reset
       </Button>
     </ButtonWrapper>
     <Button
       data-cy="filter-button"
+      onClick={onClickSubmit}
       size="small"
       variant="primary"
-      onClick={onClickSubmit}
     >
       {submitButtonCopy}
     </Button>
diff --git a/apps/spruce/src/components/GroupedTaskStatusBadge/GroupedTaskStatusBadge.stories.tsx b/apps/spruce/src/components/GroupedTaskStatusBadge/GroupedTaskStatusBadge.stories.tsx
index c9ca2d3e6..685f23920 100644
--- a/apps/spruce/src/components/GroupedTaskStatusBadge/GroupedTaskStatusBadge.stories.tsx
+++ b/apps/spruce/src/components/GroupedTaskStatusBadge/GroupedTaskStatusBadge.stories.tsx
@@ -14,11 +14,11 @@ export const Default: CustomStoryObj<typeof GroupedTaskStatusBadge> = {
     <Container>
       {groupedTaskStats.map((item) => (
         <GroupedTaskStatusBadge
-          href="/test"
-          status={item.status}
-          count={item.count}
           key={item.status}
+          count={item.count}
+          href="/test"
           onClick={action(`Click status ${item.status}`)}
+          status={item.status}
           statusCounts={statusCounts}
         />
       ))}
diff --git a/apps/spruce/src/components/GroupedTaskStatusBadge/GroupedTaskStatusBadge.test.tsx b/apps/spruce/src/components/GroupedTaskStatusBadge/GroupedTaskStatusBadge.test.tsx
index 31f03082e..82cd63fd9 100644
--- a/apps/spruce/src/components/GroupedTaskStatusBadge/GroupedTaskStatusBadge.test.tsx
+++ b/apps/spruce/src/components/GroupedTaskStatusBadge/GroupedTaskStatusBadge.test.tsx
@@ -17,9 +17,9 @@ describe("groupedTaskStatusBadgeIcon", () => {
     render(
       <GroupedTaskStatusBadge
         count={400}
-        status={TaskStatus.SystemFailureUmbrella}
-        onClick={onClick}
         href={`/version/${versionId}`}
+        onClick={onClick}
+        status={TaskStatus.SystemFailureUmbrella}
       />,
       {
         path: "/version/:versionId/:tab",
@@ -37,8 +37,8 @@ describe("groupedTaskStatusBadgeIcon", () => {
     render(
       <GroupedTaskStatusBadge
         count={400}
-        status={TaskStatus.SystemFailureUmbrella}
         href={`/version/${versionId}`}
+        status={TaskStatus.SystemFailureUmbrella}
       />,
     );
     expect(screen.getByText("System Failed")).toBeInTheDocument();
@@ -49,10 +49,10 @@ describe("groupedTaskStatusBadgeIcon", () => {
     render(
       <GroupedTaskStatusBadge
         count={400}
-        status={TaskStatus.SystemFailureUmbrella}
         href={getVersionRoute(versionId, {
           statuses: [TaskStatus.SystemFailed],
         })}
+        status={TaskStatus.SystemFailureUmbrella}
       />,
     );
     expect(screen.queryByDataCy("grouped-task-status-badge")).toHaveAttribute(
@@ -71,8 +71,8 @@ describe("groupedTaskStatusBadgeIcon", () => {
     render(
       <GroupedTaskStatusBadge
         count={400}
-        status={TaskStatus.SystemFailureUmbrella}
         href={`/version/${versionId}`}
+        status={TaskStatus.SystemFailureUmbrella}
         statusCounts={statusCounts}
       />,
     );
diff --git a/apps/spruce/src/components/GroupedTaskStatusBadge/index.tsx b/apps/spruce/src/components/GroupedTaskStatusBadge/index.tsx
index 5171145a8..93f625520 100644
--- a/apps/spruce/src/components/GroupedTaskStatusBadge/index.tsx
+++ b/apps/spruce/src/components/GroupedTaskStatusBadge/index.tsx
@@ -28,24 +28,24 @@ export const GroupedTaskStatusBadge: React.FC<GroupedTaskStatusBadgeProps> = ({
 
   return (
     <Tooltip
-      enabled={!!statusCounts}
       align="top"
+      darkMode
+      enabled={!!statusCounts}
       justify="middle"
       popoverZIndex={zIndex.tooltip}
-      darkMode
       trigger={
         <div>
           <Link
-            to={href}
-            onClick={() => onClick()}
-            data-cy="grouped-task-status-badge"
             aria-selected={isActive}
+            data-cy="grouped-task-status-badge"
+            onClick={() => onClick()}
+            to={href}
           >
             <BadgeContainer
-              fill={fill}
               border={border}
-              text={text}
+              fill={fill}
               isActive={isActive}
+              text={text}
             >
               <Number>{count}</Number>
               <Status>{taskStatusToCopy[status]}</Status>
@@ -59,7 +59,7 @@ export const GroupedTaskStatusBadge: React.FC<GroupedTaskStatusBadgeProps> = ({
         {statusCounts &&
           Object.entries(statusCounts).map(([taskStatus, taskCount]) => (
             <Row key={taskStatus}>
-              <TaskStatusIcon status={taskStatus} size={16} />
+              <TaskStatusIcon size={16} status={taskStatus} />
               <span>
                 <Count>{taskCount}</Count>{" "}
                 {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
diff --git a/apps/spruce/src/components/Header/NavDropdown/NavDropdown.test.tsx b/apps/spruce/src/components/Header/NavDropdown/NavDropdown.test.tsx
index 6f03c6178..7bc42767d 100644
--- a/apps/spruce/src/components/Header/NavDropdown/NavDropdown.test.tsx
+++ b/apps/spruce/src/components/Header/NavDropdown/NavDropdown.test.tsx
@@ -15,20 +15,20 @@ const menuItems = [
 ];
 describe("navDropdown", () => {
   it("renders the dropdown", () => {
-    render(<NavDropdown title="Dropdown" menuItems={menuItems} />);
+    render(<NavDropdown menuItems={menuItems} title="Dropdown" />);
 
     expect(screen.getByText("Dropdown")).toBeInTheDocument();
   });
   it("opening the dropdown renders all of the buttons", async () => {
     const user = userEvent.setup();
-    render(<NavDropdown title="Dropdown" menuItems={menuItems} />);
+    render(<NavDropdown menuItems={menuItems} title="Dropdown" />);
     await user.click(screen.getByText("Dropdown"));
     expect(screen.getByText("Item 1")).toBeInTheDocument();
     expect(screen.getByText("Item 2")).toBeInTheDocument();
   });
   it("should link to both router and non-router links", async () => {
     const user = userEvent.setup();
-    render(<NavDropdown title="Dropdown" menuItems={menuItems} />);
+    render(<NavDropdown menuItems={menuItems} title="Dropdown" />);
     await user.click(screen.getByText("Dropdown"));
     expect(screen.getByText("Item 1")).toBeInTheDocument();
     expect(screen.getByText("Item 1").closest("a")).toHaveAttribute(
@@ -45,7 +45,6 @@ describe("navDropdown", () => {
     const mockCallback = vi.fn();
     render(
       <NavDropdown
-        title="Dropdown"
         menuItems={[
           {
             "data-cy": "item-1",
@@ -54,6 +53,7 @@ describe("navDropdown", () => {
             onClick: mockCallback,
           },
         ]}
+        title="Dropdown"
       />,
     );
     await user.click(screen.getByText("Dropdown"));
diff --git a/apps/spruce/src/components/Header/NavDropdown/index.tsx b/apps/spruce/src/components/Header/NavDropdown/index.tsx
index f992023b6..3d60ff5d1 100644
--- a/apps/spruce/src/components/Header/NavDropdown/index.tsx
+++ b/apps/spruce/src/components/Header/NavDropdown/index.tsx
@@ -39,7 +39,7 @@ const NavDropdownItem: React.FC<NavDropdownItemType> = ({
     </MenuItem>
   ) : (
     // @ts-expect-error: FIXME. This comment was added by an automated script.
-    <MenuItem as="a" data-cy={itemDataCy} onClick={closeMenu} href={href}>
+    <MenuItem as="a" data-cy={itemDataCy} href={href} onClick={closeMenu}>
       {text}
     </MenuItem>
   );
@@ -60,10 +60,10 @@ export const NavDropdown: React.FC<NavDropdownProps> = ({
 
   return (
     <Menu
+      justify="start"
       open={openMenu}
-      setOpen={setOpenMenu}
       popoverZIndex={zIndex.popover}
-      justify="start"
+      setOpen={setOpenMenu}
       trigger={
         <NavDropdownTitle data-cy={dataCy}>
           {title}
diff --git a/apps/spruce/src/components/Header/Navbar.tsx b/apps/spruce/src/components/Header/Navbar.tsx
index 5bd564121..5463c7399 100644
--- a/apps/spruce/src/components/Header/Navbar.tsx
+++ b/apps/spruce/src/components/Header/Navbar.tsx
@@ -68,31 +68,31 @@ export const Navbar: React.FC = () => {
     <StyledNav>
       <NavActionContainer>
         <LogoLink
-          to={routes.myPatches}
           onClick={() => sendEvent({ name: "Clicked logo link" })}
+          to={routes.myPatches}
         >
           <SpruceSummerTreeIcon
-            src={SpruceSummerTree}
             alt="Evergreen tree on an island with a beach ball"
+            src={SpruceSummerTree}
           />
         </LogoLink>
         <PrimaryLink
           data-cy="project-health-link"
-          to={getCommitsRoute(projectIdentifier)}
           onClick={() => sendEvent({ name: "Clicked waterfall link" })}
+          to={getCommitsRoute(projectIdentifier)}
         >
           Project Health
         </PrimaryLink>
         <PrimaryLink
+          onClick={() => sendEvent({ name: "Clicked my patches link" })}
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           to={getUserPatchesRoute(userId)}
-          onClick={() => sendEvent({ name: "Clicked my patches link" })}
         >
           My Patches
         </PrimaryLink>
         <PrimaryLink
-          to={routes.spawnHost}
           onClick={() => sendEvent({ name: "Clicked my hosts link" })}
+          to={routes.spawnHost}
         >
           My Hosts
         </PrimaryLink>
@@ -102,8 +102,8 @@ export const Navbar: React.FC = () => {
       <NavActionContainer>
         {legacyURL && (
           <SecondaryLink
-            href={legacyURL}
             data-cy="legacy-ui-link"
+            href={legacyURL}
             onClick={() => sendEvent({ name: "Clicked legacy UI link" })}
           >
             Switch to Legacy UI
@@ -111,8 +111,8 @@ export const Navbar: React.FC = () => {
         )}
         <PrimaryAWithIcon
           href={wikiUrl}
-          target="_blank"
           onClick={() => sendEvent({ name: "Clicked EVG wiki link" })}
+          target="_blank"
         >
           <Icon glyph="QuestionMarkWithCircle" />
           Documentation
diff --git a/apps/spruce/src/components/HistoryTable/Cell/Cell.test.tsx b/apps/spruce/src/components/HistoryTable/Cell/Cell.test.tsx
index 419aaf408..fd7c7edd1 100644
--- a/apps/spruce/src/components/HistoryTable/Cell/Cell.test.tsx
+++ b/apps/spruce/src/components/HistoryTable/Cell/Cell.test.tsx
@@ -6,11 +6,11 @@ describe("taskCell", () => {
   it("should render a task cell corresponding to a passed in status", () => {
     const { rerender } = render(
       <TaskCell
+        loading={false}
         task={{
           id: "some-task-id",
           status: TaskStatus.Succeeded,
         }}
-        loading={false}
       />,
     );
 
@@ -19,11 +19,11 @@ describe("taskCell", () => {
 
     rerender(
       <TaskCell
+        loading={false}
         task={{
           id: "some-task-id",
           status: TaskStatus.Failed,
         }}
-        loading={false}
       />,
     );
     expect(screen.getByLabelText("Failure Icon")).toBeInTheDocument();
@@ -33,11 +33,11 @@ describe("taskCell", () => {
   it("should link to the task page", () => {
     render(
       <TaskCell
+        loading={false}
         task={{
           id: "some-task-id",
           status: TaskStatus.Succeeded,
         }}
-        loading={false}
       />,
     );
     expect(screen.queryByRole("link")).toHaveAttribute(
@@ -49,12 +49,12 @@ describe("taskCell", () => {
   it("should be transparent when it is inactive", () => {
     render(
       <TaskCell
+        inactive
+        loading={false}
         task={{
           id: "some-task-id",
           status: TaskStatus.Succeeded,
         }}
-        inactive
-        loading={false}
       />,
     );
     expect(screen.queryByDataCy("task-cell")).toHaveStyle("opacity: 0.4");
@@ -63,11 +63,11 @@ describe("taskCell", () => {
   it("should render a label when one is passed in", () => {
     render(
       <TaskCell
+        label="some-label"
         task={{
           id: "some-task-id",
           status: TaskStatus.Failed,
         }}
-        label="some-label"
       />,
     );
     expect(screen.getByText("some-label")).toBeInTheDocument();
@@ -77,12 +77,12 @@ describe("taskCell", () => {
     const user = userEvent.setup();
     render(
       <TaskCell
+        failingTests={["some-test"]}
+        loading={false}
         task={{
           id: "some-task-id",
           status: TaskStatus.Failed,
         }}
-        failingTests={["some-test"]}
-        loading={false}
       />,
     );
     // @ts-expect-error: FIXME. This comment was added by an automated script.
diff --git a/apps/spruce/src/components/HistoryTable/Cell/index.tsx b/apps/spruce/src/components/HistoryTable/Cell/index.tsx
index d6e7a72df..c967b8229 100644
--- a/apps/spruce/src/components/HistoryTable/Cell/index.tsx
+++ b/apps/spruce/src/components/HistoryTable/Cell/index.tsx
@@ -34,7 +34,7 @@ const TaskCell: React.FC<TaskCellProps> = ({
   onClick = () => {},
   task,
 }) => (
-  <Cell inactive={inactive} aria-disabled={inactive} data-cy="task-cell">
+  <Cell aria-disabled={inactive} data-cy="task-cell" inactive={inactive}>
     <Link
       onClick={() => {
         onClick({ taskStatus: task.status });
@@ -42,11 +42,11 @@ const TaskCell: React.FC<TaskCellProps> = ({
       to={getTaskRoute(task.id)}
     >
       <HistoryTableIcon
-        inactive={inactive}
-        status={task.status as TaskStatus}
         failingTests={failingTests}
+        inactive={inactive}
         label={label}
         loadingTestResults={loading}
+        status={task.status as TaskStatus}
       />
     </Link>
   </Cell>
@@ -64,7 +64,7 @@ interface LoadingCellProps {
 const LoadingCell: React.FC<LoadingCellProps> = ({ isHeader = false }) =>
   isHeader ? (
     <HeaderCell data-cy="loading-header-cell">
-      <Skeleton active title paragraph={false} />
+      <Skeleton active paragraph={false} title />
     </HeaderCell>
   ) : (
     <Cell data-cy="loading-cell">
diff --git a/apps/spruce/src/components/HistoryTable/ColumnPaginationButtons.tsx b/apps/spruce/src/components/HistoryTable/ColumnPaginationButtons.tsx
index 30827fc5e..c877388fe 100644
--- a/apps/spruce/src/components/HistoryTable/ColumnPaginationButtons.tsx
+++ b/apps/spruce/src/components/HistoryTable/ColumnPaginationButtons.tsx
@@ -39,19 +39,19 @@ const ColumnPaginationButtons: React.FC<ColumnPaginationButtonProps> = ({
   return (
     <Container>
       <StyledButton
-        disabled={!hasPreviousPage}
-        onClick={handleOnClickPrev}
         data-cy="prev-page-button"
+        disabled={!hasPreviousPage}
         leftGlyph={<Icon glyph="ChevronLeft" />}
+        onClick={handleOnClickPrev}
       />
       <Disclaimer>
         {currentPage + 1} / {pageCount}
       </Disclaimer>
       <StyledButton
-        disabled={!hasNextPage}
-        onClick={handleOnClickNext}
         data-cy="next-page-button"
+        disabled={!hasNextPage}
         leftGlyph={<Icon glyph="ChevronRight" />}
+        onClick={handleOnClickNext}
       />
     </Container>
   );
diff --git a/apps/spruce/src/components/HistoryTable/HistoryTable.stories.tsx b/apps/spruce/src/components/HistoryTable/HistoryTable.stories.tsx
index f4f69e397..b4203be77 100644
--- a/apps/spruce/src/components/HistoryTable/HistoryTable.stories.tsx
+++ b/apps/spruce/src/components/HistoryTable/HistoryTable.stories.tsx
@@ -64,7 +64,7 @@ const HistoryTableWrapper: React.FC<HistoryTableWrapperProps> = ({ type }) => {
 
   return (
     <div style={{ height: 600, width: "100%", border: "red 1px solid" }}>
-      <HistoryTable loadMoreItems={loadMore} loading={isLoading}>
+      <HistoryTable loading={isLoading} loadMoreItems={loadMore}>
         {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
         {type === "task" ? TaskHistoryRow : VariantHistoryRow}
       </HistoryTable>
diff --git a/apps/spruce/src/components/HistoryTable/HistoryTable.tsx b/apps/spruce/src/components/HistoryTable/HistoryTable.tsx
index 4e4eca781..edc343eeb 100644
--- a/apps/spruce/src/components/HistoryTable/HistoryTable.tsx
+++ b/apps/spruce/src/components/HistoryTable/HistoryTable.tsx
@@ -88,26 +88,26 @@ const HistoryTable: React.FC<HistoryTableProps> = ({
     <div ref={ref} style={{ height: "100%" }}>
       <Virtuoso
         ref={listRef}
-        totalCount={processedCommitCount}
-        data={processedCommits}
-        itemContent={(index, data) => <Component index={index} data={data} />}
-        endReached={() => {
-          if (!loading) {
-            loadMoreItems();
-          }
-        }}
         components={{
           Footer: () =>
             loading ? (
               <LoadingSection
-                numVisibleCols={visibleColumns.length}
                 numLoadingRows={10}
+                numVisibleCols={visibleColumns.length}
               />
             ) : (
               // @ts-expect-error: FIXME. This comment was added by an automated script.
               <EndOfHistoryRow>{finalRowCopy}</EndOfHistoryRow>
             ),
         }}
+        data={processedCommits}
+        endReached={() => {
+          if (!loading) {
+            loadMoreItems();
+          }
+        }}
+        itemContent={(index, data) => <Component data={data} index={index} />}
+        totalCount={processedCommitCount}
       />
     </div>
   );
diff --git a/apps/spruce/src/components/HistoryTable/HistoryTableIcon/HistoryTableIcon.stories.tsx b/apps/spruce/src/components/HistoryTable/HistoryTableIcon/HistoryTableIcon.stories.tsx
index 36db8123c..320098f15 100644
--- a/apps/spruce/src/components/HistoryTable/HistoryTableIcon/HistoryTableIcon.stories.tsx
+++ b/apps/spruce/src/components/HistoryTable/HistoryTableIcon/HistoryTableIcon.stories.tsx
@@ -15,11 +15,11 @@ export const ActiveIcons: CustomStoryObj<typeof HistoryTableIcon> = {
       {data.map(({ label, status }) => (
         <HistoryTableIcon
           key={`${status}_history_table`}
-          status={status}
-          label={label}
           failingTests={label ? failingTests : undefined}
           inactive={false}
+          label={label}
           onClick={action(`clicked ${status}`)}
+          status={status}
         />
       ))}
     </Container>
@@ -32,8 +32,8 @@ export const InactiveIcons: CustomStoryObj<typeof HistoryTableIcon> = {
       {data.map(({ status }) => (
         <HistoryTableIcon
           key={`${status}_history_table_inactive`}
-          status={status}
           inactive
+          status={status}
         />
       ))}
     </Container>
diff --git a/apps/spruce/src/components/HistoryTable/HistoryTableIcon/HistoryTableIcon.test.tsx b/apps/spruce/src/components/HistoryTable/HistoryTableIcon/HistoryTableIcon.test.tsx
index 256f14510..f38dc44dd 100644
--- a/apps/spruce/src/components/HistoryTable/HistoryTableIcon/HistoryTableIcon.test.tsx
+++ b/apps/spruce/src/components/HistoryTable/HistoryTableIcon/HistoryTableIcon.test.tsx
@@ -7,7 +7,7 @@ describe("historyTableIcon", () => {
     const user = userEvent.setup();
     const onClick = vi.fn();
     render(
-      <HistoryTableIcon status={TaskStatus.Succeeded} onClick={onClick} />,
+      <HistoryTableIcon onClick={onClick} status={TaskStatus.Succeeded} />,
     );
     const icon = screen.queryByDataCy("history-table-icon");
     expect(icon).toBeInTheDocument();
@@ -30,8 +30,8 @@ describe("historyTableIcon", () => {
     const user = userEvent.setup();
     render(
       <HistoryTableIcon
-        status={TaskStatus.Succeeded}
         failingTests={failingTests}
+        status={TaskStatus.Succeeded}
       />,
     );
     const icon = screen.queryByDataCy("history-table-icon");
diff --git a/apps/spruce/src/components/HistoryTable/HistoryTableIcon/index.tsx b/apps/spruce/src/components/HistoryTable/HistoryTableIcon/index.tsx
index f4f181ea7..5cae4d939 100644
--- a/apps/spruce/src/components/HistoryTable/HistoryTableIcon/index.tsx
+++ b/apps/spruce/src/components/HistoryTable/HistoryTableIcon/index.tsx
@@ -25,18 +25,18 @@ export const HistoryTableIcon: React.FC<HistoryTableIconProps> = ({
 }) => (
   <Tooltip
     align="right"
-    justify="middle"
     enabled={!inactive && failingTests.length > 0}
+    justify="middle"
     popoverZIndex={zIndex.tooltip}
     trigger={
       <Container
-        onClick={() => onClick()}
+        aria-disabled={inactive}
         data-cy="history-table-icon"
         data-status={status}
-        aria-disabled={inactive}
+        onClick={() => onClick()}
       >
         <IconContainer>
-          <TaskStatusIcon status={status} size={30} />
+          <TaskStatusIcon size={30} status={status} />
         </IconContainer>
         {!inactive && <Body>{label}</Body>}
       </Container>
diff --git a/apps/spruce/src/components/HistoryTable/HistoryTableRow/BaseRow/FoldedCommit/FoldedCommit.test.tsx b/apps/spruce/src/components/HistoryTable/HistoryTableRow/BaseRow/FoldedCommit/FoldedCommit.test.tsx
index 54bcaf361..1a5e23fa1 100644
--- a/apps/spruce/src/components/HistoryTable/HistoryTableRow/BaseRow/FoldedCommit/FoldedCommit.test.tsx
+++ b/apps/spruce/src/components/HistoryTable/HistoryTableRow/BaseRow/FoldedCommit/FoldedCommit.test.tsx
@@ -16,10 +16,10 @@ describe("foldedCommit", () => {
     render(
       <MockedProvider mocks={[getSpruceConfigMock]}>
         <FoldedCommit
-          index={0}
           data={foldedCommitData}
-          onToggleFoldedCommit={onToggleFoldedCommit}
+          index={0}
           numVisibleCols={5}
+          onToggleFoldedCommit={onToggleFoldedCommit}
           selected={false}
         />
       </MockedProvider>,
@@ -40,10 +40,10 @@ describe("foldedCommit", () => {
     render(
       <MockedProvider mocks={[getSpruceConfigMock]}>
         <FoldedCommit
-          index={0}
           data={data}
-          onToggleFoldedCommit={onToggleFoldedCommit}
+          index={0}
           numVisibleCols={5}
+          onToggleFoldedCommit={onToggleFoldedCommit}
           selected={false}
         />
       </MockedProvider>,
diff --git a/apps/spruce/src/components/HistoryTable/HistoryTableRow/BaseRow/FoldedCommit/index.tsx b/apps/spruce/src/components/HistoryTable/HistoryTableRow/BaseRow/FoldedCommit/index.tsx
index 81700ad8b..de0ccd5eb 100644
--- a/apps/spruce/src/components/HistoryTable/HistoryTableRow/BaseRow/FoldedCommit/index.tsx
+++ b/apps/spruce/src/components/HistoryTable/HistoryTableRow/BaseRow/FoldedCommit/index.tsx
@@ -66,15 +66,15 @@ const FoldedCommit: React.FC<FoldedCommitProps> = ({
   return (
     <Column selected={selected}>
       <StyledAccordion
+        defaultOpen={defaultOpen}
         disableAnimation
-        title={`Expand ${numCommits} inactive`}
-        toggledTitle={`Collapse ${numCommits} inactive`}
-        titleTag={AccordionTitle}
         onToggle={({ isVisible }) => {
           onToggleFoldedCommit({ expanded: isVisible, index, numCommits });
         }}
+        title={`Expand ${numCommits} inactive`}
+        titleTag={AccordionTitle}
+        toggledTitle={`Collapse ${numCommits} inactive`}
         useIndent={false}
-        defaultOpen={defaultOpen}
       >
         {commits}
       </StyledAccordion>
diff --git a/apps/spruce/src/components/HistoryTable/HistoryTableRow/BaseRow/index.tsx b/apps/spruce/src/components/HistoryTable/HistoryTableRow/BaseRow/index.tsx
index 6c85ef0f0..d79fb63d2 100644
--- a/apps/spruce/src/components/HistoryTable/HistoryTableRow/BaseRow/index.tsx
+++ b/apps/spruce/src/components/HistoryTable/HistoryTableRow/BaseRow/index.tsx
@@ -63,8 +63,8 @@ const BaseRow: React.FC<RowProps> = ({
             <CommitChartLabel
               author={author}
               createTime={createTime}
-              gitTags={gitTags}
               githash={revision}
+              gitTags={gitTags}
               message={message}
               onClickGithash={onClickGithash}
               onClickJiraTicket={onClickJiraTicket}
@@ -80,9 +80,8 @@ const BaseRow: React.FC<RowProps> = ({
     case rowType.FOLDED_COMMITS:
       return (
         <FoldedCommit
-          index={index}
           data={data}
-          selected={selected}
+          index={index}
           numVisibleCols={numVisibleCols || columnLimit}
           onClickGithash={onClickFoldedGithash}
           onClickJiraTicket={onClickFoldedJiraTicket}
@@ -90,6 +89,7 @@ const BaseRow: React.FC<RowProps> = ({
             onToggleFoldedCommit({ isVisible: expanded });
             toggleRowExpansion(rowIndex, expanded);
           }}
+          selected={selected}
         />
       );
     default:
diff --git a/apps/spruce/src/components/HistoryTable/HistoryTableTestSearch/HistoryTableTestSearch.stories.tsx b/apps/spruce/src/components/HistoryTable/HistoryTableTestSearch/HistoryTableTestSearch.stories.tsx
index c7a3a20e9..2c860a0af 100644
--- a/apps/spruce/src/components/HistoryTable/HistoryTableTestSearch/HistoryTableTestSearch.stories.tsx
+++ b/apps/spruce/src/components/HistoryTable/HistoryTableTestSearch/HistoryTableTestSearch.stories.tsx
@@ -26,8 +26,8 @@ const TestSearch = () => {
       <div style={{ paddingTop: size.s }}>
         <FilterBadges
           badges={badges}
-          onRemove={handleOnRemove}
           onClearAll={handleClearAll}
+          onRemove={handleOnRemove}
         />
       </div>
     </div>
diff --git a/apps/spruce/src/components/HistoryTable/HistoryTableTestSearch/HistoryTableTestSearch.tsx b/apps/spruce/src/components/HistoryTable/HistoryTableTestSearch/HistoryTableTestSearch.tsx
index 1be815ca8..83136afe0 100644
--- a/apps/spruce/src/components/HistoryTable/HistoryTableTestSearch/HistoryTableTestSearch.tsx
+++ b/apps/spruce/src/components/HistoryTable/HistoryTableTestSearch/HistoryTableTestSearch.tsx
@@ -23,14 +23,14 @@ export const HistoryTableTestSearch: React.FC<HistoryTableTestSearchProps> = ({
   return (
     <ContentWrapper>
       <TextInput
-        type="search"
-        label="Filter by Failed Tests"
         aria-label="history-table-test-search-input"
-        placeholder="Search test name regex"
-        validatorErrorMessage="Invalid regular expression"
+        clearOnSubmit
+        label="Filter by Failed Tests"
         onSubmit={handleOnSubmit}
+        placeholder="Search test name regex"
+        type="search"
         validator={validateRegexp}
-        clearOnSubmit
+        validatorErrorMessage="Invalid regular expression"
       />
     </ContentWrapper>
   );
diff --git a/apps/spruce/src/components/HistoryTable/LoadingSection/LoadingRow/index.tsx b/apps/spruce/src/components/HistoryTable/LoadingSection/LoadingRow/index.tsx
index 9e2361623..133b98d9f 100644
--- a/apps/spruce/src/components/HistoryTable/LoadingSection/LoadingRow/index.tsx
+++ b/apps/spruce/src/components/HistoryTable/LoadingSection/LoadingRow/index.tsx
@@ -8,7 +8,7 @@ interface LoadingRowProps {
 const LoadingRow: React.FC<LoadingRowProps> = ({ numVisibleCols }) => (
   <Container>
     <LabelCellContainer>
-      <Skeleton active title={false} paragraph={{ rows: 3 }} />
+      <Skeleton active paragraph={{ rows: 3 }} title={false} />
     </LabelCellContainer>
     {Array.from(Array(numVisibleCols)).map((_, index) => (
       // Disabling key index rules since there is nothing unique about these rows
diff --git a/apps/spruce/src/components/HostStatusBadge/index.tsx b/apps/spruce/src/components/HostStatusBadge/index.tsx
index 1ebbd0aba..f43661085 100644
--- a/apps/spruce/src/components/HostStatusBadge/index.tsx
+++ b/apps/spruce/src/components/HostStatusBadge/index.tsx
@@ -18,7 +18,7 @@ const HostStatusBadge: React.FC<Props> = ({ status }) => (
       {hostStatusToCopy[status]}
     </Badge>
     {status === HostStatus.Terminated && (
-      <IconTooltip fill={red.base} glyph="InfoWithCircle" css={iconMargin}>
+      <IconTooltip css={iconMargin} fill={red.base} glyph="InfoWithCircle">
         Terminated hosts will disappear in 5 minutes. See Event Log for more
         details.
       </IconTooltip>
diff --git a/apps/spruce/src/components/Hosts/HostPopover.tsx b/apps/spruce/src/components/Hosts/HostPopover.tsx
index 5d463a49a..ee6f6cf94 100644
--- a/apps/spruce/src/components/Hosts/HostPopover.tsx
+++ b/apps/spruce/src/components/Hosts/HostPopover.tsx
@@ -34,18 +34,18 @@ export const HostPopover: React.FC<Props> = ({
     <>
       <ButtonWrapper ref={buttonRef}>
         <Button
-          onClick={() => setActive((curr) => !curr)}
           data-cy={dataCy}
           disabled={disabled}
+          onClick={() => setActive((curr) => !curr)}
         >
           {buttonText}
         </Button>
       </ButtonWrapper>
       <Popover
-        align="bottom"
-        justify="middle"
         active={active}
+        align="bottom"
         data-cy={`${dataCy}-popover`}
+        justify="middle"
         popoverZIndex={zIndex.popover}
       >
         <PopoverContainer ref={popoverRef}>
@@ -54,22 +54,22 @@ export const HostPopover: React.FC<Props> = ({
           <ButtonContainer>
             <ButtonSpacer>
               <Button
-                size="xsmall"
                 disabled={loading}
                 onClick={() => setActive(false)}
+                size="xsmall"
               >
                 No
               </Button>
             </ButtonSpacer>
             <ButtonSpacer>
               <Button
-                variant="primary"
-                size="xsmall"
                 disabled={loading}
                 onClick={() => {
                   onClick();
                   setActive(false);
                 }}
+                size="xsmall"
+                variant="primary"
               >
                 Yes
               </Button>
diff --git a/apps/spruce/src/components/Hosts/Reprovision.tsx b/apps/spruce/src/components/Hosts/Reprovision.tsx
index c319e6b4b..2013357b9 100644
--- a/apps/spruce/src/components/Hosts/Reprovision.tsx
+++ b/apps/spruce/src/components/Hosts/Reprovision.tsx
@@ -64,8 +64,8 @@ export const Reprovision: React.FC<Props> = ({
         <Tooltip
           align="top"
           justify="middle"
-          triggerEvent="hover"
           trigger={children}
+          triggerEvent="hover"
         >
           {reprovisionTooltipMessage}
         </Tooltip>
@@ -77,9 +77,9 @@ export const Reprovision: React.FC<Props> = ({
           buttonText="Reprovision"
           data-cy="reprovision-button"
           disabled={selectedHostIds.length === 0 || !canReprovision}
-          titleText={titleText}
           loading={loadingReprovision}
           onClick={onClickReprovisionConfirm}
+          titleText={titleText}
         />
       </div>
     </ConditionalWrapper>
diff --git a/apps/spruce/src/components/Hosts/RestartJasper.tsx b/apps/spruce/src/components/Hosts/RestartJasper.tsx
index 81effb96a..c5ca38849 100644
--- a/apps/spruce/src/components/Hosts/RestartJasper.tsx
+++ b/apps/spruce/src/components/Hosts/RestartJasper.tsx
@@ -64,8 +64,8 @@ export const RestartJasper: React.FC<Props> = ({
         <Tooltip
           align="top"
           justify="middle"
-          triggerEvent="hover"
           trigger={children}
+          triggerEvent="hover"
         >
           {jasperTooltipMessage}
         </Tooltip>
@@ -77,9 +77,9 @@ export const RestartJasper: React.FC<Props> = ({
           buttonText="Restart Jasper"
           data-cy="restart-jasper-button"
           disabled={selectedHostIds.length === 0 || !canRestartJasper}
-          titleText={titleText}
           loading={loadingRestartJasper}
           onClick={onClickRestartJasperConfirm}
+          titleText={titleText}
         />
       </div>
     </ConditionalWrapper>
diff --git a/apps/spruce/src/components/Hosts/UpdateStatusModal.tsx b/apps/spruce/src/components/Hosts/UpdateStatusModal.tsx
index fda467a37..6dd35e9ff 100644
--- a/apps/spruce/src/components/Hosts/UpdateStatusModal.tsx
+++ b/apps/spruce/src/components/Hosts/UpdateStatusModal.tsx
@@ -85,34 +85,34 @@ export const UpdateStatusModal: React.FC<Props> = ({
 
   return (
     <ConfirmationModal
+      buttonText="Update"
       data-cy={dataCy}
-      open={visible}
       onCancel={onClickCancel}
       onConfirm={onClickUpdate}
-      title="Update Host Status"
-      buttonText="Update"
+      open={visible}
       submitDisabled={!status || loadingUpdateHostStatus}
+      title="Update Host Status"
     >
       <StyledSelect
-        label="Host Status"
         data-cy="host-status-select"
-        value={status}
+        label="Host Status"
         onChange={(s) => {
           setHostStatus(s as UpdateHostStatus);
         }}
+        value={status}
       >
         {hostStatuses.map(({ key, title, value }) => (
-          <Option key={key} value={value} data-cy={`${value}-option`}>
+          <Option key={key} data-cy={`${value}-option`} value={value}>
             {title}
           </Option>
         ))}
       </StyledSelect>
       <TextArea
-        label="Add Notes"
         data-cy="host-status-notes"
-        value={notes}
-        rows={6}
+        label="Add Notes"
         onChange={(e) => setNotesValue(e.target.value)}
+        rows={6}
+        value={notes}
       />
     </ConfirmationModal>
   );
diff --git a/apps/spruce/src/components/Icon/icons/index.tsx b/apps/spruce/src/components/Icon/icons/index.tsx
index 975d89e81..5e7c6c7b5 100644
--- a/apps/spruce/src/components/Icon/icons/index.tsx
+++ b/apps/spruce/src/components/Icon/icons/index.tsx
@@ -15,13 +15,13 @@ export const EvergreenLogo: React.ComponentType<LeafygreenIconProps> = ({
   size = 16,
 }) => (
   <svg
+    aria-label="Evergreen Icon"
     className={className}
-    width={size}
+    fill="none"
     height={size}
     viewBox="0 0 258 258"
-    fill="none"
+    width={size}
     xmlns="http://www.w3.org/2000/svg"
-    aria-label="Evergreen Icon"
   >
     <path
       d="M144.206 213.445H114.693C110.693 213.445 107.449 216.688 107.449 220.689V250.201C107.449 254.202 110.693 257.445 114.693 257.445H144.206C148.206 257.445 151.449 254.202 151.449 250.201V220.689C151.449 216.688 148.206 213.445 144.206 213.445Z"
@@ -48,12 +48,12 @@ export const KnownFailureIcon: React.ComponentType<LeafygreenIconProps> = ({
   size = 16,
 }) => (
   <svg
+    aria-label="Known failure Icon"
     className={className}
-    width={size}
+    fill="none"
     height={size}
     viewBox="0 0 21 21"
-    fill="none"
-    aria-label="Known failure Icon"
+    width={size}
   >
     <path
       d="M9.38138 6.37605L10.0001 6.99477L10.6188 6.37605L15.5686 1.42631C16.0079 0.986967 16.7202 0.986967 17.1596 1.42631L18.5738 2.84052C19.0131 3.27986 19.0131 3.99217 18.5738 4.43151L13.624 9.38126L13.0053 9.99998L13.624 10.6187L18.5738 15.5684C19.0131 16.0078 19.0131 16.7201 18.5738 17.1594L17.1596 18.5736C16.7202 19.013 16.0079 19.013 15.5686 18.5736L10.6188 13.6239L10.0001 13.0052L9.38138 13.6239L4.43163 18.5736C3.99229 19.013 3.27998 19.013 2.84064 18.5736L1.42643 17.1594C0.98709 16.7201 0.987089 16.0078 1.42643 15.5684L6.37618 10.6187L6.99489 9.99998L6.37618 9.38126L1.42643 4.43151C0.987089 3.99217 0.987089 3.27986 1.42643 2.84052L2.84064 1.42631C3.27998 0.986967 3.99229 0.986967 4.43163 1.42631L9.38138 6.37605Z"
@@ -69,12 +69,12 @@ export const FailureIcon: React.ComponentType<LeafygreenIconProps> = ({
   size = 16,
 }) => (
   <svg
+    aria-label="Failure Icon"
     className={className}
+    fill="currentColor"
     height={size}
-    width={size}
     viewBox="0 0 21 21"
-    fill="currentColor"
-    aria-label="Failure Icon"
+    width={size}
   >
     <path
       d="M17.7783.807588c-.7811-.7810482-2.0474-.7810486-2.8285 0L10.0001 5.75734 5.05035.807588c-.78105-.7810484-2.04738-.7810482-2.82843 0L.80771 2.2218c-.7810481.78105-.7810485 2.04738 0 2.82843l4.94975 4.94975L.80771 14.9497c-.7810474.7811-.7810481 2.0474 0 2.8285l1.41421 1.4142c.78105.781 2.04738.781 2.82843 0l4.94975-4.9498 4.9497 4.9498c.7811.781 2.0474.781 2.8285 0l1.4142-1.4142c.781-.7811.781-2.0474 0-2.8285l-4.9498-4.94972 4.9498-4.94975c.781-.78105.781-2.04738 0-2.82843L17.7783.807588Z"
@@ -89,12 +89,12 @@ export const SetupFailure: React.ComponentType<LeafygreenIconProps> = ({
   size = 16,
 }) => (
   <svg
+    aria-label="Setup failure Icon"
     className={className}
-    width={size}
+    fill="currentColor"
     height={size}
     viewBox="0 0 28 28"
-    fill="currentColor"
-    aria-label="Setup failure Icon"
+    width={size}
   >
     <path
       d="M26.2 22L17.34 13.16C17.2842 13.1067 17.2182 13.0651 17.1461 13.0377C17.074 13.0102 16.9971 12.9974 16.92 13C16.8425 12.9935 16.7645 13.0046 16.6918 13.0323C16.6191 13.06 16.5536 13.1036 16.5 13.16L16 13.58L13.54 16.12L13.12 16.54V16.68C13.0438 16.7807 13.0025 16.9036 13.0025 17.03C13.0025 17.1563 13.0438 17.2792 13.12 17.38L22 26.24C22.267 26.5405 22.592 26.7838 22.9555 26.9554C23.319 27.127 23.7134 27.2233 24.1151 27.2385C24.5168 27.2537 24.9173 27.1875 25.2927 27.0438C25.6681 26.9001 26.0106 26.682 26.2995 26.4025C26.5884 26.1231 26.8178 25.7881 26.9739 25.4176C27.1299 25.0472 27.2095 24.6491 27.2076 24.2471C27.2058 23.8451 27.1227 23.4477 26.9633 23.0787C26.8039 22.7097 26.5714 22.3768 26.28 22.1L26.2 22Z"
@@ -121,13 +121,13 @@ export const SystemFailure: React.ComponentType<LeafygreenIconProps> = ({
   size = 16,
 }) => (
   <svg
+    aria-label="System failure Icon"
     className={className}
-    width={size}
+    fill="none"
     height={size}
     viewBox="0 0 32 32"
-    fill="none"
+    width={size}
     xmlns="http://www.w3.org/2000/svg"
-    aria-label="System failure Icon"
   >
     <path
       d="M15.76 21.56C15.5979 21.3931 15.4507 21.2124 15.32 21.02C14.6892 21.0018 14.0664 20.8732 13.48 20.64C12.788 20.4092 12.1507 20.039 11.6073 19.5524C11.0639 19.0657 10.626 18.4729 10.3205 17.8105C10.0151 17.1481 9.84857 16.4301 9.83129 15.7009C9.81401 14.9716 9.94632 14.2466 10.2201 13.5705C10.4938 12.8943 10.9032 12.2814 11.4229 11.7696C11.9426 11.2578 12.5617 10.8579 13.242 10.5945C13.9222 10.3312 14.6492 10.21 15.3781 10.2385C16.107 10.2669 16.8223 10.4444 17.48 10.76C18.3347 11.1097 19.0822 11.6783 19.6474 12.4085C20.2126 13.1388 20.5757 14.0049 20.7 14.92C21.0518 15.0981 21.3753 15.3272 21.66 15.6L23.42 17.36L25.2 15.6C25.7376 15.0545 26.441 14.7028 27.2 14.6H27.44C27.44 14.36 27.44 14.1 27.44 13.86L28.42 13.14C28.6835 12.9457 28.8741 12.6686 28.9611 12.353C29.0481 12.0375 29.0266 11.7018 28.9 11.4L28.1 9.19998C27.9715 8.89766 27.7473 8.64587 27.4619 8.48328C27.1765 8.32069 26.8456 8.2563 26.52 8.29998L25.32 8.49998C24.5936 7.49779 23.7166 6.614 22.72 5.87998L22.9 4.67998C22.9425 4.35717 22.8773 4.02936 22.7146 3.74733C22.5519 3.4653 22.3007 3.2448 22 3.11998L19.82 2.19998C19.5074 2.06026 19.1564 2.03168 18.8253 2.11899C18.4943 2.20631 18.203 2.40427 18 2.67998L17.28 3.67998C16.0615 3.47998 14.8185 3.47998 13.6 3.67998L12.86 2.69998C12.6691 2.43812 12.3955 2.24828 12.0834 2.16118C11.7713 2.07408 11.4389 2.09479 11.14 2.21998L8.94 3.11998C8.64088 3.24534 8.39202 3.46672 8.23268 3.74919C8.07333 4.03166 8.01258 4.35915 8.06 4.67998L8.32 5.99998C7.32815 6.73171 6.45173 7.60814 5.72 8.59998L4.5 8.41998C4.17953 8.37604 3.8535 8.43829 3.57177 8.59721C3.29004 8.75614 3.06813 9.00298 2.94 9.29998L2 11.4C1.87336 11.7018 1.85184 12.0375 1.93889 12.353C2.02594 12.6686 2.21651 12.9457 2.48 13.14L3.46 13.86C3.27079 15.0794 3.27079 16.3206 3.46 17.54L2.48 18.28C2.21813 18.4709 2.0283 18.7445 1.94119 19.0566C1.85409 19.3687 1.87481 19.7011 2 20L2.9 22.2C3.02617 22.5029 3.25068 22.7544 3.53733 22.9141C3.82399 23.0737 4.15606 23.1322 4.48 23.08L5.68 22.9C6.41173 23.8918 7.28815 24.7683 8.28 25.5L8.1 26.72C8.06091 27.0424 8.12752 27.3688 8.28982 27.6501C8.45211 27.9314 8.70132 28.1524 9 28.28L11.18 29.18C11.4819 29.3066 11.8175 29.3281 12.1331 29.2411C12.4486 29.154 12.7258 28.9635 12.92 28.7L13.64 27.72C14.0046 27.7731 14.3718 27.8065 14.74 27.82C14.7002 27.323 14.767 26.8232 14.936 26.3541C15.105 25.885 15.3723 25.4574 15.72 25.1L17.5 23.34L15.76 21.56Z"
@@ -143,12 +143,12 @@ export const SystemFailure: React.ComponentType<LeafygreenIconProps> = ({
 // @ts-expect-error: FIXME. This comment was added by an automated script.
 export const TimedOut = ({ className, fill, size = 16 }) => (
   <svg
+    aria-label="Timed out Icon"
     className={className}
-    width={size}
+    fill="none"
     height={size}
     viewBox="0 0 30 29"
-    fill="none"
-    aria-label="Timed out Icon"
+    width={size}
   >
     <path
       d="M25.68 23L28.7 19.98C28.8149 19.8682 28.9062 19.7345 28.9686 19.5867C29.031 19.439 29.0631 19.2803 29.0631 19.12C29.0631 18.9597 29.031 18.8009 28.9686 18.6532C28.9062 18.5055 28.8149 18.3718 28.7 18.26L27.84 17.4L27.42 17.12H27.28C27.0724 17.0668 26.8546 17.0684 26.6478 17.1245C26.441 17.1805 26.2523 17.2892 26.1 17.44L23 20.44L20.06 17.42C19.9482 17.3051 19.8145 17.2138 19.6667 17.1514C19.519 17.089 19.3603 17.0569 19.2 17.0569C19.0397 17.0569 18.8809 17.089 18.7332 17.1514C18.5855 17.2138 18.4518 17.3051 18.34 17.42L17.48 18.28C17.3651 18.3918 17.2738 18.5255 17.2114 18.6732C17.149 18.8209 17.1169 18.9797 17.1169 19.14C17.1169 19.3003 17.149 19.459 17.2114 19.6067C17.2738 19.7545 17.3651 19.8882 17.48 20L20.5 23L17.48 26.04C17.3392 26.1821 17.2361 26.3572 17.1803 26.5493C17.1244 26.7415 17.1174 26.9445 17.16 27.14V27.3L17.42 27.76L18.28 28.64C18.511 28.8624 18.8193 28.9867 19.14 28.9867C19.4607 28.9867 19.7689 28.8624 20 28.64L23 25.62L26.02 28.64C26.2544 28.8637 26.566 28.9886 26.89 28.9886C27.214 28.9886 27.5256 28.8637 27.76 28.64L28.62 27.76C28.7349 27.6482 28.8262 27.5145 28.8886 27.3667C28.951 27.219 28.9831 27.0603 28.9831 26.9C28.9831 26.7397 28.951 26.5809 28.8886 26.4332C28.8262 26.2855 28.7349 26.1518 28.62 26.04L25.68 23Z"
@@ -167,12 +167,12 @@ export const WillNotRun: React.ComponentType<LeafygreenIconProps> = ({
   size = 16,
 }) => (
   <svg
+    aria-label="Will not run Icon"
     className={className}
-    width={size}
+    fill="none"
     height={size}
     viewBox="0 0 30 28"
-    fill="none"
-    aria-label="Will not run Icon"
+    width={size}
   >
     <path
       d="M7.64 6.54C8.16669 6.48503 8.66672 6.28078 9.08126 5.95127C9.49581 5.62176 9.80762 5.18071 9.98 4.68V2.82C9.80863 2.31684 9.49758 1.87286 9.08321 1.53995C8.66884 1.20703 8.16826 0.998944 7.64 0.940002C7.39405 0.939988 7.15054 0.988753 6.92356 1.08348C6.69658 1.1782 6.49064 1.31699 6.31766 1.49184C6.14468 1.66668 6.00809 1.87409 5.9158 2.10207C5.82351 2.33005 5.77736 2.57407 5.78 2.82V4.68C5.77732 4.925 5.8236 5.16807 5.91613 5.39495C6.00866 5.62182 6.14556 5.82794 6.31881 6.00119C6.49207 6.17444 6.69818 6.31135 6.92505 6.40387C7.15193 6.4964 7.395 6.54268 7.64 6.54Z"
@@ -199,17 +199,17 @@ export const Loading: React.ComponentType<LeafygreenIconProps> = ({
   size = 16,
 }) => (
   <svg
-    width={size}
-    height={size}
     className={className}
+    height={size}
     viewBox="0 0 38 38"
+    width={size}
     xmlns="http://www.w3.org/2000/svg"
   >
     <defs>
-      <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
-        <stop stopColor={fill} stopOpacity="0" offset="0%" />
-        <stop stopColor={fill} stopOpacity=".631" offset="63.146%" />
-        <stop stopColor={fill} offset="100%" />
+      <linearGradient id="a" x1="8.042%" x2="65.682%" y1="0%" y2="23.865%">
+        <stop offset="0%" stopColor={fill} stopOpacity="0" />
+        <stop offset="63.146%" stopColor={fill} stopOpacity=".631" />
+        <stop offset="100%" stopColor={fill} />
       </linearGradient>
     </defs>
     <g fill="none" fillRule="evenodd">
@@ -222,21 +222,21 @@ export const Loading: React.ComponentType<LeafygreenIconProps> = ({
         >
           <animateTransform
             attributeName="transform"
-            type="rotate"
-            from="0 18 18"
-            to="360 18 18"
             dur="0.9s"
+            from="0 18 18"
             repeatCount="indefinite"
+            to="360 18 18"
+            type="rotate"
           />
         </path>
-        <circle fill={fill} cx="36" cy="18" r="1">
+        <circle cx="36" cy="18" fill={fill} r="1">
           <animateTransform
             attributeName="transform"
-            type="rotate"
-            from="0 18 18"
-            to="360 18 18"
             dur="0.9s"
+            from="0 18 18"
             repeatCount="indefinite"
+            to="360 18 18"
+            type="rotate"
           />
         </circle>
       </g>
@@ -252,18 +252,18 @@ export const Ignored: React.ComponentType<LeafygreenIconProps> = ({
 }) => (
   <svg
     aria-label="Ignored Icon"
-    data-cy={dataCy}
     className={className}
+    data-cy={dataCy}
     fill="currentColor"
     height={size}
     width={size}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
+      clipRule="evenodd"
+      d="M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12ZM5 7a1 1 0 0 0 0 2h6a1 1 0 1 0 0-2H5Z"
       fill={fill}
       fillRule="evenodd"
-      d="M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12ZM5 7a1 1 0 0 0 0 2h6a1 1 0 1 0 0-2H5Z"
-      clipRule="evenodd"
     />
   </svg>
 );
diff --git a/apps/spruce/src/components/IconTooltip/index.tsx b/apps/spruce/src/components/IconTooltip/index.tsx
index 8f017094a..69947a389 100644
--- a/apps/spruce/src/components/IconTooltip/index.tsx
+++ b/apps/spruce/src/components/IconTooltip/index.tsx
@@ -17,13 +17,13 @@ const IconTooltip: React.FC<IconTooltipProps> = ({
   <StyledTooltip
     align="top"
     justify="middle"
-    triggerEvent="hover"
     popoverZIndex={zIndex.tooltip}
     trigger={
       <IconWrapper data-cy={dataCy}>
         <Icon {...rest} />
       </IconWrapper>
     }
+    triggerEvent="hover"
   >
     {children}
   </StyledTooltip>
diff --git a/apps/spruce/src/components/LinkToReconfigurePage.tsx b/apps/spruce/src/components/LinkToReconfigurePage.tsx
index 84bb504c9..4e2539a24 100644
--- a/apps/spruce/src/components/LinkToReconfigurePage.tsx
+++ b/apps/spruce/src/components/LinkToReconfigurePage.tsx
@@ -14,15 +14,15 @@ export const LinkToReconfigurePage: React.FC<{
 
   return (
     <DropdownItem
+      as={Link}
       data-cy="reconfigure-link"
       disabled={disabled}
-      as={Link}
-      to={getPatchRoute(patchId, { configure: true })}
       onClick={() => {
         if (!disabled) {
           sendEvent({ name: "Clicked patch reconfigure link" });
         }
       }}
+      to={getPatchRoute(patchId, { configure: true })}
     >
       Reconfigure tasks/variants
     </DropdownItem>
diff --git a/apps/spruce/src/components/Loading/PatchAndTaskFullPageLoad.tsx b/apps/spruce/src/components/Loading/PatchAndTaskFullPageLoad.tsx
index 373610532..875ffc04c 100644
--- a/apps/spruce/src/components/Loading/PatchAndTaskFullPageLoad.tsx
+++ b/apps/spruce/src/components/Loading/PatchAndTaskFullPageLoad.tsx
@@ -13,15 +13,15 @@ export const PatchAndTaskFullPageLoad: React.FC = () => (
     <PageLayout hasSider>
       <PageSider>
         <SiderCard>
-          <Skeleton active title={false} paragraph={{ rows: 4 }} />
+          <Skeleton active paragraph={{ rows: 4 }} title={false} />
         </SiderCard>
         <SiderCard>
-          <Skeleton active title={false} paragraph={{ rows: 4 }} />
+          <Skeleton active paragraph={{ rows: 4 }} title={false} />
         </SiderCard>
       </PageSider>
       <PageLayout>
         <PageContent>
-          <Skeleton active title paragraph={{ rows: 8 }} />
+          <Skeleton active paragraph={{ rows: 8 }} title />
         </PageContent>
       </PageLayout>
     </PageLayout>
diff --git a/apps/spruce/src/components/MetadataCard.tsx b/apps/spruce/src/components/MetadataCard.tsx
index b3876b1ad..4bac2bbcc 100644
--- a/apps/spruce/src/components/MetadataCard.tsx
+++ b/apps/spruce/src/components/MetadataCard.tsx
@@ -21,7 +21,7 @@ export const MetadataCard: React.FC<Props> = ({
 }) => (
   <SiderCard {...rest}>
     {loading && !error && (
-      <Skeleton active title={false} paragraph={{ rows: 4 }} />
+      <Skeleton active paragraph={{ rows: 4 }} title={false} />
     )}
     {error && !loading && (
       <ErrorWrapper data-cy="metadata-card-error">{error.message}</ErrorWrapper>
@@ -50,7 +50,7 @@ export const MetadataItem: React.FC<ItemProps> = ({
   children,
   "data-cy": dataCy,
 }) => (
-  <Item data-cy={dataCy} as={as}>
+  <Item as={as} data-cy={dataCy}>
     {children}
   </Item>
 );
diff --git a/apps/spruce/src/components/Notifications/index.tsx b/apps/spruce/src/components/Notifications/index.tsx
index 01374c3bc..91222dd9c 100644
--- a/apps/spruce/src/components/Notifications/index.tsx
+++ b/apps/spruce/src/components/Notifications/index.tsx
@@ -122,17 +122,15 @@ export const NotificationModal: React.FC<NotificationModalProps> = ({
 
   return (
     <ConfirmationModal
+      buttonText="Save"
       data-cy={dataCy}
-      open={visible}
       onCancel={onCancel}
-      title="Add Subscription"
       onConfirm={onClickSave}
+      open={visible}
       submitDisabled={hasError}
-      buttonText="Save"
+      title="Add Subscription"
     >
       <SpruceForm
-        schema={schema}
-        uiSchema={uiSchema}
         formData={formState}
         onChange={({ errors, formData }) => {
           // Update event cookie when it changes.
@@ -142,6 +140,8 @@ export const NotificationModal: React.FC<NotificationModalProps> = ({
           setFormState(formData);
           setHasError(errors.length !== 0);
         }}
+        schema={schema}
+        uiSchema={uiSchema}
       />
     </ConfirmationModal>
   );
diff --git a/apps/spruce/src/components/PageSizeSelector/PageSizeSelector.stories.tsx b/apps/spruce/src/components/PageSizeSelector/PageSizeSelector.stories.tsx
index 15adc9e71..e0ba63834 100644
--- a/apps/spruce/src/components/PageSizeSelector/PageSizeSelector.stories.tsx
+++ b/apps/spruce/src/components/PageSizeSelector/PageSizeSelector.stories.tsx
@@ -13,5 +13,5 @@ export const Default: CustomStoryObj<typeof PageSizeSelector> = {
 
 const PageSize = () => {
   const [pageSize, setPageSize] = useState(10);
-  return <PageSizeSelector value={pageSize} onChange={setPageSize} />;
+  return <PageSizeSelector onChange={setPageSize} value={pageSize} />;
 };
diff --git a/apps/spruce/src/components/PageSizeSelector/PageSizeSelector.test.tsx b/apps/spruce/src/components/PageSizeSelector/PageSizeSelector.test.tsx
index d0e92e9aa..fc5e38d01 100644
--- a/apps/spruce/src/components/PageSizeSelector/PageSizeSelector.test.tsx
+++ b/apps/spruce/src/components/PageSizeSelector/PageSizeSelector.test.tsx
@@ -8,8 +8,8 @@ describe("pageSizeSelector", () => {
     render(
       <PageSizeSelector
         data-cy="page-size-selector"
-        value={10}
         onChange={onChange}
+        value={10}
       />,
     );
     await user.click(screen.getByRole("button", { name: "10 / page" }));
diff --git a/apps/spruce/src/components/PageSizeSelector/index.tsx b/apps/spruce/src/components/PageSizeSelector/index.tsx
index f9284a51c..b77f7079f 100644
--- a/apps/spruce/src/components/PageSizeSelector/index.tsx
+++ b/apps/spruce/src/components/PageSizeSelector/index.tsx
@@ -18,12 +18,12 @@ interface Props {
  */
 const PageSizeSelector: React.FC<Props> = ({ onChange, value, ...rest }) => (
   <StyledSelect
+    allowDeselect={false}
     aria-labelledby="page-size-select"
-    size="small"
-    value={value.toString()}
     onChange={(pageSize: string) => onChange(parseInt(pageSize, 10))}
-    allowDeselect={false}
     popoverZIndex={zIndex.popover}
+    size="small"
+    value={value.toString()}
     {...rest}
   >
     {PAGE_SIZES.map((limit) => (
diff --git a/apps/spruce/src/components/Pagination/Pagination.test.tsx b/apps/spruce/src/components/Pagination/Pagination.test.tsx
index 914ac3b2c..970cbac58 100644
--- a/apps/spruce/src/components/Pagination/Pagination.test.tsx
+++ b/apps/spruce/src/components/Pagination/Pagination.test.tsx
@@ -4,19 +4,19 @@ import Pagination from ".";
 describe("pagination", () => {
   it("should render the correct page count given total results and page size", () => {
     const { rerender } = renderWithRouterMatch(
-      <Pagination currentPage={0} totalResults={10} pageSize={5} />,
+      <Pagination currentPage={0} pageSize={5} totalResults={10} />,
     );
     expect(screen.getByText("1 / 2")).toBeInTheDocument();
-    rerender(<Pagination currentPage={0} totalResults={10} pageSize={10} />);
+    rerender(<Pagination currentPage={0} pageSize={10} totalResults={10} />);
     expect(screen.getByText("1 / 1")).toBeInTheDocument();
-    rerender(<Pagination currentPage={0} totalResults={100} pageSize={10} />);
+    rerender(<Pagination currentPage={0} pageSize={10} totalResults={100} />);
     expect(screen.getByText("1 / 10")).toBeInTheDocument();
-    rerender(<Pagination currentPage={0} totalResults={0} pageSize={10} />);
+    rerender(<Pagination currentPage={0} pageSize={10} totalResults={0} />);
     expect(screen.getByText("0 / 0")).toBeInTheDocument();
   });
   it("shold disable the previous page if on the first page", () => {
     const { router } = renderWithRouterMatch(
-      <Pagination currentPage={0} totalResults={10} pageSize={5} />,
+      <Pagination currentPage={0} pageSize={5} totalResults={10} />,
     );
     expect(router.state.location.search).toBe("");
     expect(screen.queryByDataCy("prev-page-button")).toHaveAttribute(
@@ -26,7 +26,7 @@ describe("pagination", () => {
   });
   it("should disable the next page if on the last page", () => {
     const { router } = renderWithRouterMatch(
-      <Pagination currentPage={1} totalResults={10} pageSize={5} />,
+      <Pagination currentPage={1} pageSize={5} totalResults={10} />,
     );
     expect(router.state.location.search).toBe("");
     expect(screen.queryByDataCy("next-page-button")).toHaveAttribute(
@@ -37,7 +37,7 @@ describe("pagination", () => {
   it("paginating forward should update the url with the new page number by default", async () => {
     const user = userEvent.setup();
     const { router } = renderWithRouterMatch(
-      <Pagination currentPage={0} totalResults={10} pageSize={5} />,
+      <Pagination currentPage={0} pageSize={5} totalResults={10} />,
     );
 
     expect(router.state.location.search).toBe("");
@@ -47,7 +47,7 @@ describe("pagination", () => {
   it("paginating backward should update the url with the new page number by default", async () => {
     const user = userEvent.setup();
     const { router } = renderWithRouterMatch(
-      <Pagination currentPage={1} totalResults={10} pageSize={5} />,
+      <Pagination currentPage={1} pageSize={5} totalResults={10} />,
     );
 
     expect(router.state.location.search).toBe("");
@@ -61,9 +61,9 @@ describe("pagination", () => {
     renderWithRouterMatch(
       <Pagination
         currentPage={0}
-        totalResults={10}
-        pageSize={5}
         onChange={onChange}
+        pageSize={5}
+        totalResults={10}
       />,
     );
     await user.click(screen.getByDataCy("next-page-button"));
@@ -71,7 +71,7 @@ describe("pagination", () => {
   });
   it("should disable pagination if there  is only one page", () => {
     renderWithRouterMatch(
-      <Pagination currentPage={0} totalResults={5} pageSize={5} />,
+      <Pagination currentPage={0} pageSize={5} totalResults={5} />,
     );
     expect(screen.queryByDataCy("prev-page-button")).toHaveAttribute(
       "aria-disabled",
@@ -84,7 +84,7 @@ describe("pagination", () => {
   });
   it("should disable pagination if there are no pages", () => {
     renderWithRouterMatch(
-      <Pagination currentPage={0} totalResults={5} pageSize={5} />,
+      <Pagination currentPage={0} pageSize={5} totalResults={5} />,
     );
     expect(screen.queryByDataCy("prev-page-button")).toHaveAttribute(
       "aria-disabled",
diff --git a/apps/spruce/src/components/Pagination/index.tsx b/apps/spruce/src/components/Pagination/index.tsx
index cdca618cb..3a5b152dd 100644
--- a/apps/spruce/src/components/Pagination/index.tsx
+++ b/apps/spruce/src/components/Pagination/index.tsx
@@ -42,11 +42,11 @@ const Pagination: React.FC<Props> = ({
   return (
     <Container data-cy="pagination">
       <StyledButton
-        disabled={currentPage === 0}
-        size="small"
         data-cy="prev-page-button"
-        onClick={handlePrevClick}
+        disabled={currentPage === 0}
         leftGlyph={<Icon glyph="ChevronLeft" size="small" />}
+        onClick={handlePrevClick}
+        size="small"
       />
       <PageLabel>
         <Disclaimer>
@@ -54,11 +54,11 @@ const Pagination: React.FC<Props> = ({
         </Disclaimer>
       </PageLabel>
       <StyledButton
-        disabled={numPages === 0 || currentPage === numPages - 1}
         data-cy="next-page-button"
-        size="small"
-        onClick={handleNextClick}
+        disabled={numPages === 0 || currentPage === numPages - 1}
         leftGlyph={<Icon glyph="ChevronRight" size="small" />}
+        onClick={handleNextClick}
+        size="small"
       />
     </Container>
   );
diff --git a/apps/spruce/src/components/PatchActionButtons/AddNotification.tsx b/apps/spruce/src/components/PatchActionButtons/AddNotification.tsx
index 86199a80d..5b62fd481 100644
--- a/apps/spruce/src/components/PatchActionButtons/AddNotification.tsx
+++ b/apps/spruce/src/components/PatchActionButtons/AddNotification.tsx
@@ -15,18 +15,18 @@ export const AddNotification: React.FC<Props> = ({ patchId }) => {
   return (
     <>
       <Button
-        size="small"
         data-cy="notify-patch"
         onClick={() => {
           sendEvent({ name: "Viewed notification modal" });
           setIsVisibleModal(true);
         }}
+        size="small"
       >
         Notify me
       </Button>
       <PatchNotificationModal
-        visible={isVisibleModal}
         onCancel={() => setIsVisibleModal(false)}
+        visible={isVisibleModal}
       />
     </>
   );
diff --git a/apps/spruce/src/components/PatchActionButtons/EnqueuePatch.tsx b/apps/spruce/src/components/PatchActionButtons/EnqueuePatch.tsx
index d44cab4ee..f08d96487 100644
--- a/apps/spruce/src/components/PatchActionButtons/EnqueuePatch.tsx
+++ b/apps/spruce/src/components/PatchActionButtons/EnqueuePatch.tsx
@@ -33,11 +33,11 @@ export const EnqueuePatch: React.FC<EnqueuePatchProps> = ({
         Add to commit queue
       </DropdownItem>
       <EnqueuePatchModal
-        patchId={patchId}
         commitMessage={commitMessage}
-        visible={isVisible}
         onFinished={() => setIsVisible(false)}
+        patchId={patchId}
         refetchQueries={refetchQueries}
+        visible={isVisible}
       />
     </>
   );
diff --git a/apps/spruce/src/components/PatchActionButtons/RestartPatch.tsx b/apps/spruce/src/components/PatchActionButtons/RestartPatch.tsx
index 218dd05d9..8c69aaaf3 100644
--- a/apps/spruce/src/components/PatchActionButtons/RestartPatch.tsx
+++ b/apps/spruce/src/components/PatchActionButtons/RestartPatch.tsx
@@ -29,30 +29,30 @@ export const RestartPatch: React.FC<RestartPatchProps> = ({
     <>
       {isButton ? (
         <Button
-          size="small"
           data-cy="restart-version"
           disabled={disabled}
           onClick={onClick}
+          size="small"
         >
           Restart
         </Button>
       ) : (
         <DropdownItem
-          disabled={disabled}
           data-cy="restart-version"
+          disabled={disabled}
           onClick={onClick}
         >
           Restart
         </DropdownItem>
       )}
       <VersionRestartModal
-        versionId={patchId}
-        visible={isVisible}
+        onCancel={() => setIsVisible(false)}
         onOk={() => {
           setIsVisible(false);
         }}
-        onCancel={() => setIsVisible(false)}
         refetchQueries={refetchQueries}
+        versionId={patchId}
+        visible={isVisible}
       />
     </>
   );
diff --git a/apps/spruce/src/components/PatchActionButtons/ScheduleTasks/index.tsx b/apps/spruce/src/components/PatchActionButtons/ScheduleTasks/index.tsx
index 529ff0ee8..7c3dd1ec5 100644
--- a/apps/spruce/src/components/PatchActionButtons/ScheduleTasks/index.tsx
+++ b/apps/spruce/src/components/PatchActionButtons/ScheduleTasks/index.tsx
@@ -25,7 +25,7 @@ export const ScheduleTasks: React.FC<ScheduleTasksProps> = ({
   };
 
   const modalOpenerComp = isButton ? (
-    <Button size="small" disabled={disabled} {...props}>
+    <Button disabled={disabled} size="small" {...props}>
       Schedule
     </Button>
   ) : (
diff --git a/apps/spruce/src/components/PatchActionButtons/ScheduleUndispatchedBaseTasks.tsx b/apps/spruce/src/components/PatchActionButtons/ScheduleUndispatchedBaseTasks.tsx
index 6d6aeec98..4d2739aca 100644
--- a/apps/spruce/src/components/PatchActionButtons/ScheduleUndispatchedBaseTasks.tsx
+++ b/apps/spruce/src/components/PatchActionButtons/ScheduleUndispatchedBaseTasks.tsx
@@ -54,8 +54,8 @@ export const ScheduleUndispatchedBaseTasks: React.FC<Props> = ({
       <Popconfirm
         align="left"
         data-cy="schedule-undispatched-base-popconfirm"
-        open={open}
         onConfirm={onConfirm}
+        open={open}
         refEl={menuItemRef}
         setOpen={setOpen}
       >
diff --git a/apps/spruce/src/components/PatchActionButtons/UnscheduleTasks.tsx b/apps/spruce/src/components/PatchActionButtons/UnscheduleTasks.tsx
index 0f3e8e3f9..f0fc6909e 100644
--- a/apps/spruce/src/components/PatchActionButtons/UnscheduleTasks.tsx
+++ b/apps/spruce/src/components/PatchActionButtons/UnscheduleTasks.tsx
@@ -75,10 +75,10 @@ export const UnscheduleTasks: React.FC<props> = ({
       >
         <Body weight="medium">Unschedule all tasks?</Body>
         <Checkbox
+          checked={abort}
           data-cy="abort-checkbox"
           label="Abort tasks that have already started"
           onChange={() => setAbort(!abort)}
-          checked={abort}
         />
       </Popconfirm>
     </>
diff --git a/apps/spruce/src/components/PatchesPage/ListArea/PatchCard/DropdownMenu.tsx b/apps/spruce/src/components/PatchesPage/ListArea/PatchCard/DropdownMenu.tsx
index 594106022..8dcd2912c 100644
--- a/apps/spruce/src/components/PatchesPage/ListArea/PatchCard/DropdownMenu.tsx
+++ b/apps/spruce/src/components/PatchesPage/ListArea/PatchCard/DropdownMenu.tsx
@@ -30,36 +30,36 @@ export const DropdownMenu: React.FC<Props> = ({
   const dropdownItems = [
     <LinkToReconfigurePage
       key="reconfigure"
-      patchId={patchId}
       disabled={isPatchOnCommitQueue}
       hasVersion={hasVersion}
+      patchId={patchId}
     />,
-    <ScheduleTasks key="schedule" versionId={patchId} disabled={!hasVersion} />,
+    <ScheduleTasks key="schedule" disabled={!hasVersion} versionId={patchId} />,
     <UnscheduleTasks
       key="unschedule"
-      versionId={patchId}
-      refetchQueries={refetchQueries}
       disabled={!hasVersion}
+      refetchQueries={refetchQueries}
+      versionId={patchId}
     />,
     <RestartPatch
-      visibilityControl={restartModalVisibilityControl}
       key="restart"
+      disabled={!hasVersion}
       patchId={patchId}
       refetchQueries={refetchQueries}
-      disabled={!hasVersion}
+      visibilityControl={restartModalVisibilityControl}
     />,
     <EnqueuePatch
-      visibilityControl={enqueueModalVisibilityControl}
       key="enqueue"
-      patchId={patchId}
       commitMessage={patchDescription}
       disabled={!canEnqueueToCommitQueue || !hasVersion}
+      patchId={patchId}
       refetchQueries={refetchQueries}
+      visibilityControl={enqueueModalVisibilityControl}
     />,
     <SetPatchVisibility
       key="hide"
-      patchId={patchId}
       isPatchHidden={isPatchHidden}
+      patchId={patchId}
       refetchQueries={["UserPatches", "ProjectPatches"]}
     />,
   ];
diff --git a/apps/spruce/src/components/PatchesPage/ListArea/PatchCard/index.tsx b/apps/spruce/src/components/PatchesPage/ListArea/PatchCard/index.tsx
index ea2e7595c..873e496c5 100644
--- a/apps/spruce/src/components/PatchesPage/ListArea/PatchCard/index.tsx
+++ b/apps/spruce/src/components/PatchesPage/ListArea/PatchCard/index.tsx
@@ -69,8 +69,8 @@ const PatchCard: React.FC<PatchCardProps> = ({
       authorDisplayName
     ) : (
       <StyledRouterLink
-        to={getUserPatchesRoute(author)}
         data-cy="user-patches-link"
+        to={getUserPatchesRoute(author)}
       >
         <strong>{authorDisplayName}</strong>
       </StyledRouterLink>
@@ -78,8 +78,8 @@ const PatchCard: React.FC<PatchCardProps> = ({
   } else {
     patchProject = projectIdentifier ? (
       <StyledRouterLink
-        to={getProjectPatchesRoute(projectIdentifier)}
         data-cy="project-patches-link"
+        to={getProjectPatchesRoute(projectIdentifier)}
       >
         <strong>{projectIdentifier}</strong>
       </StyledRouterLink>
@@ -90,14 +90,14 @@ const PatchCard: React.FC<PatchCardProps> = ({
 
   const badges = stats?.map(({ count, statusCounts, umbrellaStatus }) => (
     <GroupedTaskStatusBadge
-      status={umbrellaStatus}
+      key={`${versionId}_${umbrellaStatus}`}
       count={count}
-      statusCounts={statusCounts}
       // @ts-expect-error: FIXME. This comment was added by an automated script.
       href={getVersionRoute(versionId, {
         statuses: mapUmbrellaStatusToQueryParam[umbrellaStatus],
       })}
-      key={`${versionId}_${umbrellaStatus}`}
+      status={umbrellaStatus}
+      statusCounts={statusCounts}
     />
   ));
   return (
@@ -105,8 +105,8 @@ const PatchCard: React.FC<PatchCardProps> = ({
       <Left>
         <DescriptionLink
           data-cy="patch-card-patch-link"
-          to={getVersionRoute(id)}
           onClick={() => analytics.sendEvent({ name: "Clicked patch link" })}
+          to={getVersionRoute(id)}
         >
           {description || "no description"}
         </DescriptionLink>
@@ -130,12 +130,12 @@ const PatchCard: React.FC<PatchCardProps> = ({
       <Right>
         {hidden && <Badge data-cy="hidden-badge">Hidden</Badge>}
         <DropdownMenu
-          patchId={id}
           canEnqueueToCommitQueue={canEnqueueToCommitQueue}
-          isPatchOnCommitQueue={isPatchOnCommitQueue}
+          hasVersion={!!versionId}
           isPatchHidden={hidden}
+          isPatchOnCommitQueue={isPatchOnCommitQueue}
           patchDescription={description}
-          hasVersion={!!versionId}
+          patchId={id}
         />
       </Right>
     </CardWrapper>
diff --git a/apps/spruce/src/components/PatchesPage/ListArea/index.tsx b/apps/spruce/src/components/PatchesPage/ListArea/index.tsx
index 4413c988f..c839236c0 100644
--- a/apps/spruce/src/components/PatchesPage/ListArea/index.tsx
+++ b/apps/spruce/src/components/PatchesPage/ListArea/index.tsx
@@ -19,9 +19,9 @@ const ListArea: React.FC<ListAreaProps> = ({ loading, pageType, patches }) => {
         {patches.map((p) => (
           <PatchCard
             key={p.id}
+            isPatchOnCommitQueue={p.commitQueuePosition !== null}
             pageType={pageType}
             patch={p}
-            isPatchOnCommitQueue={p.commitQueuePosition !== null}
           />
         ))}
       </>
@@ -29,8 +29,8 @@ const ListArea: React.FC<ListAreaProps> = ({ loading, pageType, patches }) => {
   }
   return (
     <BasicEmptyState
-      title="No patches found"
       description="Create a patch to see it here."
+      title="No patches found"
     />
   );
 };
diff --git a/apps/spruce/src/components/PatchesPage/RequesterSelector.tsx b/apps/spruce/src/components/PatchesPage/RequesterSelector.tsx
index 79d7e8069..82840d3c5 100644
--- a/apps/spruce/src/components/PatchesPage/RequesterSelector.tsx
+++ b/apps/spruce/src/components/PatchesPage/RequesterSelector.tsx
@@ -10,20 +10,20 @@ export const RequesterSelector: React.FC = () => {
 
   return (
     <Combobox
-      label=""
       data-cy="requester-selector"
-      placeholder="Patch submission"
-      value={statusVal}
+      label=""
       multiselect
       onChange={statusValOnChange}
       overflow="scroll-x"
+      placeholder="Patch submission"
+      value={statusVal}
     >
       {options.map(({ displayName, key, value }) => (
         <ComboboxOption
           key={key}
-          value={value}
-          displayName={displayName}
           data-cy={`${value}-option`}
+          displayName={displayName}
+          value={value}
         />
       ))}
     </Combobox>
diff --git a/apps/spruce/src/components/PatchesPage/StatusSelector.tsx b/apps/spruce/src/components/PatchesPage/StatusSelector.tsx
index 8869c5598..f471a3f48 100644
--- a/apps/spruce/src/components/PatchesPage/StatusSelector.tsx
+++ b/apps/spruce/src/components/PatchesPage/StatusSelector.tsx
@@ -14,19 +14,19 @@ export const StatusSelector: React.FC = () => {
 
   return (
     <Dropdown
-      data-cy="my-patch-status-select"
       buttonText={`Patch Status: ${
         statusVal.length
           ? // @ts-expect-error: FIXME. This comment was added by an automated script.
             statusVal.map((v) => statusValToCopy[v]).join(", ")
           : noFilterMessage
       }`}
+      data-cy="my-patch-status-select"
     >
       <TreeSelect
+        hasStyling={false}
         onChange={statusValOnChange}
         state={statusVal}
         tData={treeData}
-        hasStyling={false}
       />
     </Dropdown>
   );
diff --git a/apps/spruce/src/components/PatchesPage/index.tsx b/apps/spruce/src/components/PatchesPage/index.tsx
index f15131035..3d7fd671b 100644
--- a/apps/spruce/src/components/PatchesPage/index.tsx
+++ b/apps/spruce/src/components/PatchesPage/index.tsx
@@ -81,37 +81,37 @@ export const PatchesPage: React.FC<Props> = ({
       <FiltersWrapperSpaceBetween>
         <TextInputWithValidation
           aria-label="Search patch descriptions"
-          placeholder="Patch description regex"
-          onChange={(value) => setAndSubmitInputValue(value)}
           data-cy="patch-description-input"
+          onChange={(value) => setAndSubmitInputValue(value)}
+          placeholder="Patch description regex"
           validator={validateRegexp}
           validatorErrorMessage="Invalid regex"
         />
         <StatusSelector />
         {filterComp}
         <HiddenCheckbox
+          checked={includeHiddenCheckboxChecked}
           data-cy="include-hidden-checkbox"
-          onChange={includeHiddenCheckboxOnChange}
           label="Include hidden"
-          checked={includeHiddenCheckboxChecked}
+          onChange={includeHiddenCheckboxOnChange}
         />
       </FiltersWrapperSpaceBetween>
       <PaginationRow>
         <Pagination
           currentPage={page}
-          totalResults={patches?.filteredPatchCount ?? 0}
           pageSize={limit}
+          totalResults={patches?.filteredPatchCount ?? 0}
         />
         <PageSizeSelector
           data-cy="my-patches-page-size-selector"
-          value={limit}
           onChange={handlePageSizeChange}
+          value={limit}
         />
       </PaginationRow>
       <ListArea
-        patches={patches?.patches || []}
         loading={loading}
         pageType={pageType}
+        patches={patches?.patches || []}
       />
     </PageWrapper>
   );
diff --git a/apps/spruce/src/components/PerfPlugin/TrendChartsPlugin.tsx b/apps/spruce/src/components/PerfPlugin/TrendChartsPlugin.tsx
index fe0379a77..211e00470 100644
--- a/apps/spruce/src/components/PerfPlugin/TrendChartsPlugin.tsx
+++ b/apps/spruce/src/components/PerfPlugin/TrendChartsPlugin.tsx
@@ -9,9 +9,9 @@ interface Props {
 
 const TrendChartsPlugin: React.FC<Props> = ({ taskId }) => (
   <StyledIframe
+    allow="clipboard-read; clipboard-write"
     src={`${getSignalProcessingUrl()}/task/${taskId}/performanceData`}
     title="Task Performance Data"
-    allow="clipboard-read; clipboard-write"
   />
 );
 
diff --git a/apps/spruce/src/components/Popconfirm/Popconfirm.test.tsx b/apps/spruce/src/components/Popconfirm/Popconfirm.test.tsx
index d14ffa004..814a088bc 100644
--- a/apps/spruce/src/components/Popconfirm/Popconfirm.test.tsx
+++ b/apps/spruce/src/components/Popconfirm/Popconfirm.test.tsx
@@ -4,7 +4,7 @@ import Popconfirm from ".";
 describe("controlled popconfirm", () => {
   it("properly shows content inside the popconfirm", () => {
     render(
-      <Popconfirm open confirmText="OK" setOpen={vi.fn()}>
+      <Popconfirm confirmText="OK" open setOpen={vi.fn()}>
         <div>hello</div>
       </Popconfirm>,
     );
@@ -18,7 +18,7 @@ describe("controlled popconfirm", () => {
     const onConfirm = vi.fn();
     const setOpen = vi.fn();
     render(
-      <Popconfirm open onConfirm={onConfirm} setOpen={setOpen}>
+      <Popconfirm onConfirm={onConfirm} open setOpen={setOpen}>
         <div>hello</div>
       </Popconfirm>,
     );
@@ -33,7 +33,7 @@ describe("controlled popconfirm", () => {
     const onClose = vi.fn();
     const setOpen = vi.fn();
     render(
-      <Popconfirm open onClose={onClose} setOpen={setOpen}>
+      <Popconfirm onClose={onClose} open setOpen={setOpen}>
         <div>hello</div>
       </Popconfirm>,
     );
@@ -45,7 +45,7 @@ describe("controlled popconfirm", () => {
 
   it("disables the confirm button when confirmDisabled is true", () => {
     render(
-      <Popconfirm open confirmDisabled onClose={vi.fn()} setOpen={vi.fn()}>
+      <Popconfirm confirmDisabled onClose={vi.fn()} open setOpen={vi.fn()}>
         <div>hello</div>
       </Popconfirm>,
     );
diff --git a/apps/spruce/src/components/Popconfirm/index.tsx b/apps/spruce/src/components/Popconfirm/index.tsx
index 793ca325f..ed567e043 100644
--- a/apps/spruce/src/components/Popconfirm/index.tsx
+++ b/apps/spruce/src/components/Popconfirm/index.tsx
@@ -38,34 +38,34 @@ const Popconfirm: React.FC<PopconfirmProps> = ({
 
   return (
     <Tooltip
-      popoverZIndex={zIndex.popover}
-      triggerEvent="click"
-      open={open}
       onClose={onClose}
+      open={open}
+      popoverZIndex={zIndex.popover}
       refEl={refEl}
       setOpen={setOpen}
+      triggerEvent="click"
       {...props}
     >
       <ContentWrapper ref={popoverRef}>
         {children}
         <ButtonWrapper>
           <Button
-            size="small"
             onClick={() => {
               onClose();
               setOpen(false);
             }}
+            size="small"
           >
             Cancel
           </Button>
           <Button
             disabled={confirmDisabled}
-            size="small"
-            variant="primary"
             onClick={(e) => {
               onConfirm(e);
               setOpen(false);
             }}
+            size="small"
+            variant="primary"
           >
             {confirmText}
           </Button>
diff --git a/apps/spruce/src/components/ProjectSelect/FavoriteStar.tsx b/apps/spruce/src/components/ProjectSelect/FavoriteStar.tsx
index 82108f00d..979242619 100644
--- a/apps/spruce/src/components/ProjectSelect/FavoriteStar.tsx
+++ b/apps/spruce/src/components/ProjectSelect/FavoriteStar.tsx
@@ -64,7 +64,7 @@ export const FavoriteStar: React.FC<FavoriteStarProps> = ({
       data-cy={dataCy}
       onClick={onClick}
     >
-      <Icon glyph="Favorite" fill={isFavorite ? green.dark2 : gray.light2} />
+      <Icon fill={isFavorite ? green.dark2 : gray.light2} glyph="Favorite" />
     </IconButton>
   );
 };
diff --git a/apps/spruce/src/components/ProjectSelect/ProjectOptionGroup.tsx b/apps/spruce/src/components/ProjectSelect/ProjectOptionGroup.tsx
index 1ddb84968..eefc67b6a 100644
--- a/apps/spruce/src/components/ProjectSelect/ProjectOptionGroup.tsx
+++ b/apps/spruce/src/components/ProjectSelect/ProjectOptionGroup.tsx
@@ -19,13 +19,13 @@ const ProjectOption: React.FC<OptionProps> = ({
   onClick,
   projectIdentifier,
 }) => (
-  <ProjectContainer role="button" onClick={() => onClick(projectIdentifier)}>
+  <ProjectContainer onClick={() => onClick(projectIdentifier)} role="button">
     <Body data-cy="project-display-name">
       {displayName || projectIdentifier}
     </Body>
     <FavoriteStar
-      projectIdentifier={projectIdentifier}
       isFavorite={isFavorite}
+      projectIdentifier={projectIdentifier}
     />
   </ProjectContainer>
 );
@@ -53,9 +53,9 @@ export const ProjectOptionGroup: React.FC<OptionGroupProps> = ({
     {canClickOnRepoGroup ? (
       <Overline
         css={hoverStyles}
-        role="button"
         // @ts-expect-error: FIXME. This comment was added by an automated script.
         onClick={() => onClick(repoIdentifier)}
+        role="button"
       >
         {name}
       </Overline>
@@ -66,8 +66,8 @@ export const ProjectOptionGroup: React.FC<OptionGroupProps> = ({
     <ListContainer>
       {projects?.map((project) => (
         <ProjectOption
-          onClick={onClick}
           key={project.identifier}
+          onClick={onClick}
           projectIdentifier={project.identifier}
           {...project}
         />
diff --git a/apps/spruce/src/components/ProjectSelect/ProjectSelect.stories.tsx b/apps/spruce/src/components/ProjectSelect/ProjectSelect.stories.tsx
index 20ff5dbe5..fbb88ae8f 100644
--- a/apps/spruce/src/components/ProjectSelect/ProjectSelect.stories.tsx
+++ b/apps/spruce/src/components/ProjectSelect/ProjectSelect.stories.tsx
@@ -18,8 +18,8 @@ export default {
 export const Default: CustomStoryObj<typeof ProjectSelect> = {
   render: () => (
     <ProjectSelect
-      selectedProjectIdentifier="evergreen"
       getRoute={getCommitsRoute}
+      selectedProjectIdentifier="evergreen"
     />
   ),
 };
@@ -27,9 +27,9 @@ export const Default: CustomStoryObj<typeof ProjectSelect> = {
 export const WithClickableHeader: CustomStoryObj<typeof ProjectSelect> = {
   render: () => (
     <ProjectSelect
-      selectedProjectIdentifier="evergreen"
       getRoute={getCommitsRoute}
       isProjectSettingsPage
+      selectedProjectIdentifier="evergreen"
     />
   ),
 };
diff --git a/apps/spruce/src/components/ProjectSelect/ProjectSelect.test.tsx b/apps/spruce/src/components/ProjectSelect/ProjectSelect.test.tsx
index f48655fdc..efc482059 100644
--- a/apps/spruce/src/components/ProjectSelect/ProjectSelect.test.tsx
+++ b/apps/spruce/src/components/ProjectSelect/ProjectSelect.test.tsx
@@ -23,8 +23,8 @@ describe("projectSelect", () => {
       const { Component } = RenderFakeToastContext(
         <MockedProvider mocks={getProjectsMock}>
           <ProjectSelect
-            selectedProjectIdentifier="evergreen"
             getRoute={getCommitsRoute}
+            selectedProjectIdentifier="evergreen"
           />
         </MockedProvider>,
       );
@@ -39,8 +39,8 @@ describe("projectSelect", () => {
       const { Component } = RenderFakeToastContext(
         <MockedProvider mocks={getProjectsMock}>
           <ProjectSelect
-            selectedProjectIdentifier="evergreen"
             getRoute={getCommitsRoute}
+            selectedProjectIdentifier="evergreen"
           />
         </MockedProvider>,
       );
@@ -70,8 +70,8 @@ describe("projectSelect", () => {
       const { Component } = RenderFakeToastContext(
         <MockedProvider mocks={getProjectsMock}>
           <ProjectSelect
-            selectedProjectIdentifier="evergreen"
             getRoute={getCommitsRoute}
+            selectedProjectIdentifier="evergreen"
           />
         </MockedProvider>,
       );
@@ -106,9 +106,9 @@ describe("projectSelect", () => {
       const { Component } = RenderFakeToastContext(
         <MockedProvider mocks={getViewableProjectsMock}>
           <ProjectSelect
-            selectedProjectIdentifier="evergreen"
             getRoute={getProjectSettingsRoute}
             isProjectSettingsPage
+            selectedProjectIdentifier="evergreen"
           />
         </MockedProvider>,
       );
@@ -123,9 +123,9 @@ describe("projectSelect", () => {
       const { Component } = RenderFakeToastContext(
         <MockedProvider mocks={getViewableProjectsMock}>
           <ProjectSelect
-            selectedProjectIdentifier="evergreen"
             getRoute={getProjectSettingsRoute}
             isProjectSettingsPage
+            selectedProjectIdentifier="evergreen"
           />
         </MockedProvider>,
       );
@@ -155,9 +155,9 @@ describe("projectSelect", () => {
       const { Component } = RenderFakeToastContext(
         <MockedProvider mocks={getViewableProjectsMock}>
           <ProjectSelect
-            selectedProjectIdentifier="evergreen"
             getRoute={getProjectSettingsRoute}
             isProjectSettingsPage
+            selectedProjectIdentifier="evergreen"
           />
         </MockedProvider>,
       );
@@ -191,9 +191,9 @@ describe("projectSelect", () => {
       const { Component } = RenderFakeToastContext(
         <MockedProvider mocks={getViewableProjectsMock}>
           <ProjectSelect
-            selectedProjectIdentifier="evergreen"
             getRoute={getProjectSettingsRoute}
             isProjectSettingsPage
+            selectedProjectIdentifier="evergreen"
           />
         </MockedProvider>,
       );
@@ -215,9 +215,9 @@ describe("projectSelect", () => {
       const { Component } = RenderFakeToastContext(
         <MockedProvider mocks={getViewableProjectsMock}>
           <ProjectSelect
-            selectedProjectIdentifier="evergreen"
             getRoute={getProjectSettingsRoute}
             isProjectSettingsPage
+            selectedProjectIdentifier="evergreen"
           />
         </MockedProvider>,
       );
@@ -243,9 +243,9 @@ describe("projectSelect", () => {
       const { Component } = RenderFakeToastContext(
         <MockedProvider mocks={noDisabledProjectsMock}>
           <ProjectSelect
-            selectedProjectIdentifier="spruce"
             getRoute={getProjectSettingsRoute}
             isProjectSettingsPage
+            selectedProjectIdentifier="spruce"
           />
         </MockedProvider>,
       );
diff --git a/apps/spruce/src/components/ProjectSelect/index.tsx b/apps/spruce/src/components/ProjectSelect/index.tsx
index bc8d83d9e..53d9d2775 100644
--- a/apps/spruce/src/components/ProjectSelect/index.tsx
+++ b/apps/spruce/src/components/ProjectSelect/index.tsx
@@ -99,14 +99,9 @@ export const ProjectSelect: React.FC<ProjectSelectProps> = ({
   return (
     <SearchableDropdown
       className={className}
+      data-cy="project-select"
+      disabled={loading}
       label={showLabel ? "Project" : null}
-      // @ts-expect-error: FIXME. This comment was added by an automated script.
-      value={
-        selectedProject?.displayName ||
-        selectedProject?.identifier ||
-        selectedProjectIdentifier
-      }
-      options={allProjects}
       onChange={(projectIdentifier: any) => {
         onSubmit(projectIdentifier);
         navigate(getRoute(projectIdentifier));
@@ -114,18 +109,23 @@ export const ProjectSelect: React.FC<ProjectSelectProps> = ({
       optionRenderer={(projectGroup, onClick) => (
         <ProjectOptionGroup
           key={projectGroup.groupDisplayName}
-          projects={projectGroup.projects}
+          // @ts-expect-error: FIXME. This comment was added by an automated script.
+          canClickOnRepoGroup={isProjectSettingsPage && projectGroup?.repo?.id}
           name={projectGroup.groupDisplayName}
           onClick={onClick}
+          projects={projectGroup.projects}
           repoIdentifier={projectGroup?.repo?.id}
-          // @ts-expect-error: FIXME. This comment was added by an automated script.
-          canClickOnRepoGroup={isProjectSettingsPage && projectGroup?.repo?.id}
         />
       )}
+      options={allProjects}
       searchFunc={handleSearch}
-      disabled={loading}
+      // @ts-expect-error: FIXME. This comment was added by an automated script.
+      value={
+        selectedProject?.displayName ||
+        selectedProject?.identifier ||
+        selectedProjectIdentifier
+      }
       valuePlaceholder="Select a project"
-      data-cy="project-select"
     />
   );
 };
diff --git a/apps/spruce/src/components/ScheduleTasksModal/index.tsx b/apps/spruce/src/components/ScheduleTasksModal/index.tsx
index ea26a665e..6e84c71a3 100644
--- a/apps/spruce/src/components/ScheduleTasksModal/index.tsx
+++ b/apps/spruce/src/components/ScheduleTasksModal/index.tsx
@@ -72,19 +72,19 @@ export const ScheduleTasksModal: React.FC<ScheduleTasksModalProps> = ({
 
   return (
     <ConfirmationModal
+      buttonText="Schedule"
       data-cy="schedule-tasks-modal"
-      open={open}
       onCancel={closeModal}
-      title="Schedule Tasks"
-      buttonText="Schedule"
-      submitDisabled={
-        loadingTaskData || loadingScheduleTasksMutation || !selectedTasks.size
-      }
       onConfirm={() => {
         scheduleTasks({
           variables: { taskIds: Array.from(selectedTasks), versionId },
         });
       }}
+      open={open}
+      submitDisabled={
+        loadingTaskData || loadingScheduleTasksMutation || !selectedTasks.size
+      }
+      title="Schedule Tasks"
     >
       <ContentWrapper>
         {loadingTaskData ? (
@@ -93,14 +93,14 @@ export const ScheduleTasksModal: React.FC<ScheduleTasksModalProps> = ({
           <>
             {sortedBuildVariantGroups.length ? (
               <Checkbox
-                data-cy="select-all-tasks"
-                name="select-all-tasks"
-                label="Select all tasks"
                 bold
                 checked={selectedTasks.size === allTasks.length}
+                data-cy="select-all-tasks"
                 indeterminate={
                   selectedTasks.size > 0 && selectedTasks.size < allTasks.length
                 }
+                label="Select all tasks"
+                name="select-all-tasks"
                 onClick={() => {
                   dispatch({
                     type: "toggleSelectAll",
@@ -119,14 +119,15 @@ export const ScheduleTasksModal: React.FC<ScheduleTasksModalProps> = ({
                 return (
                   <Wrapper key={buildVariant}>
                     <Accordion
+                      data-cy="build-variant-accordion"
                       title={
                         <Checkbox
-                          data-cy={`${buildVariant}-variant-checkbox`}
-                          name={buildVariant}
-                          label={buildVariantDisplayName}
                           bold
                           checked={allTasksSelected}
+                          data-cy={`${buildVariant}-variant-checkbox`}
                           indeterminate={!allTasksSelected && someTasksSelected}
+                          label={buildVariantDisplayName}
+                          name={buildVariant}
                           onClick={() => {
                             dispatch({
                               type: "toggleBuildVariant",
@@ -135,20 +136,19 @@ export const ScheduleTasksModal: React.FC<ScheduleTasksModalProps> = ({
                           }}
                         />
                       }
-                      data-cy="build-variant-accordion"
                     >
                       {tasks.map(({ displayName, id }) => (
                         <Checkbox
                           key={id}
+                          bold={false}
+                          checked={selectedTasks.has(id)}
                           data-cy={`${buildVariant}-${displayName}-task-checkbox`}
-                          name={id}
                           label={
                             <span data-cy="task-checkbox-label">
                               {displayName}
                             </span>
                           }
-                          bold={false}
-                          checked={selectedTasks.has(id)}
+                          name={id}
                           onClick={() => {
                             dispatch({ type: "toggleTask", taskId: id });
                           }}
diff --git a/apps/spruce/src/components/SearchableDropdown/SearchableDropdown.stories.tsx b/apps/spruce/src/components/SearchableDropdown/SearchableDropdown.stories.tsx
index b3f7e3f57..0988bcac6 100644
--- a/apps/spruce/src/components/SearchableDropdown/SearchableDropdown.stories.tsx
+++ b/apps/spruce/src/components/SearchableDropdown/SearchableDropdown.stories.tsx
@@ -21,6 +21,19 @@ export const CustomOption: CustomStoryObj<
 > = {
   render: (args) => (
     <Dropdown
+      allowMultiSelect
+      label="Custom option select"
+      // @ts-expect-error: FIXME. This comment was added by an automated script.
+      optionRenderer={(option, onClick, isChecked) => (
+        <button
+          key={option.value}
+          onClick={() => onClick(option.value)}
+          type="button"
+        >
+          {isChecked(option.value) && `✔️`}
+          {option.label}
+        </button>
+      )}
       options={[
         {
           label: "Option 1",
@@ -35,19 +48,6 @@ export const CustomOption: CustomStoryObj<
           value: "3",
         },
       ]}
-      // @ts-expect-error: FIXME. This comment was added by an automated script.
-      optionRenderer={(option, onClick, isChecked) => (
-        <button
-          onClick={() => onClick(option.value)}
-          type="button"
-          key={option.value}
-        >
-          {isChecked(option.value) && `✔️`}
-          {option.label}
-        </button>
-      )}
-      allowMultiSelect
-      label="Custom option select"
       {...args}
     />
   ),
@@ -56,5 +56,5 @@ export const CustomOption: CustomStoryObj<
 // @ts-expect-error: FIXME. This comment was added by an automated script.
 const Dropdown = (props) => {
   const [value, setValue] = useState([]);
-  return <SearchableDropdown {...props} value={value} onChange={setValue} />;
+  return <SearchableDropdown {...props} onChange={setValue} value={value} />;
 };
diff --git a/apps/spruce/src/components/SearchableDropdown/SearchableDropdown.test.tsx b/apps/spruce/src/components/SearchableDropdown/SearchableDropdown.test.tsx
index 7198d56a6..f64d201e0 100644
--- a/apps/spruce/src/components/SearchableDropdown/SearchableDropdown.test.tsx
+++ b/apps/spruce/src/components/SearchableDropdown/SearchableDropdown.test.tsx
@@ -357,9 +357,9 @@ describe("searchableDropdown", () => {
           ],
           optionRenderer: (option: any, onClick) => (
             <button
-              type="button"
               key={option.value}
               onClick={() => onClick(option.value)}
+              type="button"
             >
               {option.label}
             </button>
@@ -393,9 +393,9 @@ describe("searchableDropdown", () => {
           ],
           optionRenderer: (option: any, onClick) => (
             <button
-              type="button"
               key={option.value}
               onClick={() => onClick(option.value)}
+              type="button"
             >
               {option.label}
             </button>
diff --git a/apps/spruce/src/components/SearchableDropdown/index.tsx b/apps/spruce/src/components/SearchableDropdown/index.tsx
index 5f781fe1a..05b310aa7 100644
--- a/apps/spruce/src/components/SearchableDropdown/index.tsx
+++ b/apps/spruce/src/components/SearchableDropdown/index.tsx
@@ -96,10 +96,10 @@ const SearchableDropdown = <T extends {}>({
     : (v: T) => (
         <SearchableDropdownOption
           key={`searchable_dropdown_option_${v}`}
-          value={v}
-          onClick={() => onClick(v)}
           isChecked={isChecked(v)}
+          onClick={() => onClick(v)}
           showCheckmark={allowMultiSelect}
+          value={v}
         />
       );
 
@@ -155,26 +155,26 @@ const SearchableDropdown = <T extends {}>({
       {label && <Label htmlFor={`searchable-dropdown-${label}`}>{label}</Label>}
       <Wrapper>
         <Dropdown
-          id={`searchable-dropdown-${label}`}
-          data-cy={dataCy}
-          disabled={disabled}
-          buttonText={buttonText}
+          ref={DropdownRef}
+          aria-disabled={disabled}
           buttonRenderer={
             buttonRenderer ? () => buttonRenderer(value) : undefined
           }
+          buttonText={buttonText}
+          data-cy={dataCy}
+          disabled={disabled}
+          id={`searchable-dropdown-${label}`}
           onClose={resetSearch}
-          ref={DropdownRef}
-          aria-disabled={disabled}
         >
           <TextInputWithGlyph
+            aria-label="Search for options"
+            autoFocus
             data-cy={`${dataCy}-search-input`}
-            placeholder={searchPlaceholder}
-            value={search}
-            onChange={handleSearch}
             icon={<Icon glyph="MagnifyingGlass" />}
-            aria-label="Search for options"
+            onChange={handleSearch}
+            placeholder={searchPlaceholder}
             type="search"
-            autoFocus
+            value={search}
           />
           <ScrollableList>
             {(visibleOptions as T[])?.map((o) => option(o))}
@@ -198,19 +198,19 @@ export const SearchableDropdownOption = <T extends {}>({
   value,
 }: PropsWithChildren<SearchableDropdownOptionProps<T>>) => (
   <Option
-    onClick={() => onClick(value)}
     key={`select_${value}`}
     data-cy="searchable-dropdown-option"
+    onClick={() => onClick(value)}
   >
     {showCheckmark && (
       <CheckmarkContainer data-cy="checkmark">
         <CheckmarkIcon
+          // @ts-expect-error: FIXME. This comment was added by an automated script.
+          checked={isChecked}
+          fill={blue.base}
           glyph="Checkmark"
           height={12}
           width={12}
-          fill={blue.base}
-          // @ts-expect-error: FIXME. This comment was added by an automated script.
-          checked={isChecked}
         />
       </CheckmarkContainer>
     )}
diff --git a/apps/spruce/src/components/SetPriority/SetPriority.test.tsx b/apps/spruce/src/components/SetPriority/SetPriority.test.tsx
index 48012ec03..ba8a816c7 100644
--- a/apps/spruce/src/components/SetPriority/SetPriority.test.tsx
+++ b/apps/spruce/src/components/SetPriority/SetPriority.test.tsx
@@ -99,7 +99,7 @@ describe("setPriority", () => {
       const user = userEvent.setup();
       const { Component } = RenderFakeToastContext(
         <MockedProvider mocks={[setTaskPriority]}>
-          <SetPriority taskId="task_id" initialPriority={10} />
+          <SetPriority initialPriority={10} taskId="task_id" />
         </MockedProvider>,
       );
       renderWithRouterMatch(<Component />);
diff --git a/apps/spruce/src/components/SetPriority/index.tsx b/apps/spruce/src/components/SetPriority/index.tsx
index e15417ad2..5ec480bb1 100644
--- a/apps/spruce/src/components/SetPriority/index.tsx
+++ b/apps/spruce/src/components/SetPriority/index.tsx
@@ -119,8 +119,8 @@ const SetPriority: React.FC<SetPriorityProps> = ({
       </div>
       <Popconfirm
         align="left"
-        data-cy={`set-${dataCy}-priority-popconfirm`}
         confirmText="Set"
+        data-cy={`set-${dataCy}-priority-popconfirm`}
         onConfirm={onConfirm}
         open={open}
         refEl={menuItemRef}
diff --git a/apps/spruce/src/components/Settings/EventLog/EventLog.tsx b/apps/spruce/src/components/Settings/EventLog/EventLog.tsx
index bac0e2cc5..0db73729f 100644
--- a/apps/spruce/src/components/Settings/EventLog/EventLog.tsx
+++ b/apps/spruce/src/components/Settings/EventLog/EventLog.tsx
@@ -31,7 +31,7 @@ export const EventLog: React.FC<EventLogProps> = ({
         const { after, before, timestamp, user } = event;
         return (
           <EventLogCard key={`event_log_${timestamp}`} data-cy="event-log-card">
-            <Header user={user} timestamp={timestamp} />
+            <Header timestamp={timestamp} user={user} />
             {eventRenderer ? (
               eventRenderer(event)
             ) : (
diff --git a/apps/spruce/src/components/Settings/Form.test.tsx b/apps/spruce/src/components/Settings/Form.test.tsx
index e9c45fad6..c70795593 100644
--- a/apps/spruce/src/components/Settings/Form.test.tsx
+++ b/apps/spruce/src/components/Settings/Form.test.tsx
@@ -65,7 +65,7 @@ describe("context-based form", () => {
   });
 
   it("disables the entire form when specified", () => {
-    render(<Component tab="bar" disabled />, {
+    render(<Component disabled tab="bar" />, {
       wrapper: TestProvider,
     });
     expect(screen.getByLabelText("Name")).toHaveAttribute(
diff --git a/apps/spruce/src/components/Settings/NavigationWarningModal.tsx b/apps/spruce/src/components/Settings/NavigationWarningModal.tsx
index ba7dcc701..8dc1e82f9 100644
--- a/apps/spruce/src/components/Settings/NavigationWarningModal.tsx
+++ b/apps/spruce/src/components/Settings/NavigationWarningModal.tsx
@@ -25,9 +25,9 @@ export const NavigationWarningModal: React.FC<NavigationModalProps> = ({
       <ConfirmationModal
         buttonText="Leave"
         data-cy="navigation-warning-modal"
-        open
         onCancel={() => blocker.reset?.()}
         onConfirm={() => blocker.proceed?.()}
+        open
         title="You have unsaved changes that will be discarded. Are you sure you want to leave?"
         variant="danger"
       >
diff --git a/apps/spruce/src/components/Spawn/MountVolumeSelect.tsx b/apps/spruce/src/components/Spawn/MountVolumeSelect.tsx
index 6e33c0971..93f0483e0 100644
--- a/apps/spruce/src/components/Spawn/MountVolumeSelect.tsx
+++ b/apps/spruce/src/components/Spawn/MountVolumeSelect.tsx
@@ -78,20 +78,20 @@ export const MountVolumeSelect = ({
     <ModalContent>
       <InputLabel htmlFor="hostDropdown">{label || "Host Name"}</InputLabel>
       <Select
-        id="hostDropdown"
         aria-labelledby="host-select"
         data-cy="host-select"
-        value={selectedHostId}
-        style={{ width: 200 }}
+        id="hostDropdown"
         onChange={onChange}
+        style={{ width: 200 }}
+        value={selectedHostId}
       >
         {!autofill && (
-          <Option value="" key="clear" data-cy="clear-option">
+          <Option key="clear" data-cy="clear-option" value="">
             {" "}
           </Option>
         )}
         {hostOptions.map(({ displayName, id }) => (
-          <Option value={id} key={id} data-cy={`${id}-option`}>
+          <Option key={id} data-cy={`${id}-option`} value={id}>
             {displayName}
           </Option>
         ))}
diff --git a/apps/spruce/src/components/Spawn/getFormSchema.tsx b/apps/spruce/src/components/Spawn/getFormSchema.tsx
index c7d0ec6bc..7cbad6c29 100644
--- a/apps/spruce/src/components/Spawn/getFormSchema.tsx
+++ b/apps/spruce/src/components/Spawn/getFormSchema.tsx
@@ -229,8 +229,8 @@ const getHostUptimeSchema = ({
           Any schedule configured above will not take effect unless you opt in
           to the beta.{" "}
           <StyledLink
-            href={hostUptimeDocumentationUrl}
             hideExternalIcon={false}
+            href={hostUptimeDocumentationUrl}
           >
             Learn more about host sleep schedules
           </StyledLink>
diff --git a/apps/spruce/src/components/Spawn/spawnHostModal/Widgets/DistroDropdown.tsx b/apps/spruce/src/components/Spawn/spawnHostModal/Widgets/DistroDropdown.tsx
index 9b3a1f21d..f0ce7145b 100644
--- a/apps/spruce/src/components/Spawn/spawnHostModal/Widgets/DistroDropdown.tsx
+++ b/apps/spruce/src/components/Spawn/spawnHostModal/Widgets/DistroDropdown.tsx
@@ -37,11 +37,17 @@ export const DistroDropdown: React.FC<DistroEnum & EnumSpruceWidgetProps> = ({
   return (
     <StyledElementWrapper css={elementWrapperCSS}>
       <SearchableDropdown
-        valuePlaceholder={value || "Select a distro"}
-        label={ariaLabelledBy ? undefined : label}
-        value={value}
         data-cy={dataCy}
+        label={ariaLabelledBy ? undefined : label}
         onChange={onChange}
+        optionRenderer={({ distros, title }, onClick) => (
+          <DropdownOption
+            key={title}
+            distros={distros}
+            onClick={onClick}
+            title={title}
+          />
+        )}
         options={searchableOptions}
         searchFunc={(items: DistroGroup[], match: string) =>
           items.map((e) => ({
@@ -51,14 +57,8 @@ export const DistroDropdown: React.FC<DistroEnum & EnumSpruceWidgetProps> = ({
             ),
           }))
         }
-        optionRenderer={({ distros, title }, onClick) => (
-          <DropdownOption
-            key={title}
-            onClick={onClick}
-            title={title}
-            distros={distros}
-          />
-        )}
+        value={value}
+        valuePlaceholder={value || "Select a distro"}
       />
     </StyledElementWrapper>
   );
@@ -104,9 +104,9 @@ const DropdownOption: React.FC<{
       <ListContainer>
         {distros.map((d) => (
           <Option
-            onClick={() => onClick(d)}
             key={d}
             data-cy={`distro-option-${d}`}
+            onClick={() => onClick(d)}
           >
             {d}
           </Option>
diff --git a/apps/spruce/src/components/SpruceForm/FieldTemplates/ArrayFieldTemplates/index.tsx b/apps/spruce/src/components/SpruceForm/FieldTemplates/ArrayFieldTemplates/index.tsx
index f6444264f..b5242d80f 100644
--- a/apps/spruce/src/components/SpruceForm/FieldTemplates/ArrayFieldTemplates/index.tsx
+++ b/apps/spruce/src/components/SpruceForm/FieldTemplates/ArrayFieldTemplates/index.tsx
@@ -42,17 +42,18 @@ const ArrayItem: React.FC<
   const isDisabled = disabled || readonly;
   const deleteButton = (
     <Button
-      onClick={onDropIndexClick(index)}
+      data-cy="delete-item-button"
       disabled={isDisabled}
       leftGlyph={<Icon glyph="Trash" />}
-      data-cy="delete-item-button"
+      onClick={onDropIndexClick(index)}
       size="small"
     />
   );
   return useExpandableCard ? (
     <StyledExpandableCard
-      defaultOpen={!isDisabled}
       data-cy="expandable-card"
+      defaultOpen={!isDisabled}
+      // Override LeafyGreen's string typing for title so we can include buttons. (LG-2193)
       title={
         <>
           <TitleWrapper data-cy="expandable-card-title">{title}</TitleWrapper>
@@ -69,15 +70,15 @@ const ArrayItem: React.FC<
           {hasMoveUp && (
             <Button
               data-cy="array-up-button"
-              onClick={onReorderClick(index, index - 1)}
               leftGlyph={<Icon glyph="ArrowUp" />}
+              onClick={onReorderClick(index, index - 1)}
             />
           )}
           {hasMoveDown && (
             <Button
               data-cy="array-down-button"
-              onClick={onReorderClick(index, index + 1)}
               leftGlyph={<Icon glyph="ArrowDown" />}
+              onClick={onReorderClick(index, index + 1)}
             />
           )}
         </OrderControls>
@@ -183,7 +184,7 @@ export const ArrayFieldTemplate: React.FC<ArrayFieldTemplateProps> = ({
         <TitleField id={`${id}__title`} required={required} title={title} />
       )}
       {descriptionNode || (
-        <DescriptionField id={`${id}__description`} description={description} />
+        <DescriptionField description={description} id={`${id}__description`} />
       )}
       {buttonAtBeginning && (
         <AddButtonContainer>
@@ -192,10 +193,10 @@ export const ArrayFieldTemplate: React.FC<ArrayFieldTemplateProps> = ({
         </AddButtonContainer>
       )}
       <ArrayContainer
-        id={id}
+        data-cy={arrayDataCy}
         fullWidth={fullWidth || useExpandableCard}
         hasChildren={!!items?.length}
-        data-cy={arrayDataCy}
+        id={id}
       >
         {items.length === 0 && placeholder && (
           <Placeholder>{placeholder}</Placeholder>
diff --git a/apps/spruce/src/components/SpruceForm/FieldTemplates/ObjectFieldTemplates/ObjectFieldTemplates.test.tsx b/apps/spruce/src/components/SpruceForm/FieldTemplates/ObjectFieldTemplates/ObjectFieldTemplates.test.tsx
index face6aae9..0c3c24e30 100644
--- a/apps/spruce/src/components/SpruceForm/FieldTemplates/ObjectFieldTemplates/ObjectFieldTemplates.test.tsx
+++ b/apps/spruce/src/components/SpruceForm/FieldTemplates/ObjectFieldTemplates/ObjectFieldTemplates.test.tsx
@@ -37,9 +37,9 @@ describe("objectFieldTemplates", () => {
       const onChange = vi.fn();
       render(
         <SpruceForm
-          schema={ObjectSchema}
           formData={{}}
           onChange={onChange}
+          schema={ObjectSchema}
           uiSchema={uiSchema}
         />,
       );
@@ -48,9 +48,9 @@ describe("objectFieldTemplates", () => {
     it("renders all fields", () => {
       render(
         <SpruceForm
-          schema={ObjectSchema}
           formData={{}}
           onChange={vi.fn()}
+          schema={ObjectSchema}
           uiSchema={uiSchema}
         />,
       );
@@ -67,9 +67,9 @@ describe("objectFieldTemplates", () => {
       const user = userEvent.setup();
       render(
         <SpruceForm
-          schema={ObjectSchema}
           formData={{}}
           onChange={onChange}
+          schema={ObjectSchema}
           uiSchema={uiSchema}
         />,
       );
@@ -94,9 +94,9 @@ describe("objectFieldTemplates", () => {
     it("applies data-cy attributes", () => {
       render(
         <SpruceForm
-          schema={ObjectSchema}
           formData={{}}
           onChange={vi.fn()}
+          schema={ObjectSchema}
           uiSchema={uiSchema}
         />,
       );
@@ -105,9 +105,9 @@ describe("objectFieldTemplates", () => {
     it("renders all fields in a card", () => {
       render(
         <SpruceForm
-          schema={ObjectSchema}
           formData={{}}
           onChange={vi.fn()}
+          schema={ObjectSchema}
           uiSchema={uiSchema}
         />,
       );
@@ -123,9 +123,9 @@ describe("objectFieldTemplates", () => {
       const user = userEvent.setup();
       render(
         <SpruceForm
-          schema={ObjectSchema}
           formData={{}}
           onChange={onChange}
+          schema={ObjectSchema}
           uiSchema={uiSchema}
         />,
       );
@@ -149,9 +149,9 @@ describe("objectFieldTemplates", () => {
     it("applies data-cy attributes", () => {
       render(
         <SpruceForm
-          schema={ObjectSchema}
           formData={{}}
           onChange={vi.fn()}
+          schema={ObjectSchema}
           uiSchema={uiSchema}
         />,
       );
@@ -160,9 +160,9 @@ describe("objectFieldTemplates", () => {
     it("renders all fields in an accordion", () => {
       render(
         <SpruceForm
-          schema={ObjectSchema}
           formData={{}}
           onChange={vi.fn()}
+          schema={ObjectSchema}
           uiSchema={uiSchema}
         />,
       );
@@ -178,9 +178,9 @@ describe("objectFieldTemplates", () => {
       const user = userEvent.setup();
       render(
         <SpruceForm
-          schema={ObjectSchema}
           formData={{}}
           onChange={onChange}
+          schema={ObjectSchema}
           uiSchema={uiSchema}
         />,
       );
@@ -192,9 +192,9 @@ describe("objectFieldTemplates", () => {
     it("accordion is expanded by default", () => {
       render(
         <SpruceForm
-          schema={ObjectSchema}
           formData={{}}
           onChange={vi.fn()}
+          schema={ObjectSchema}
           uiSchema={uiSchema}
         />,
       );
@@ -205,9 +205,9 @@ describe("objectFieldTemplates", () => {
     it("accordion is collapsed by default if defaultOpen is false", () => {
       render(
         <SpruceForm
-          schema={ObjectSchema}
           formData={{}}
           onChange={vi.fn()}
+          schema={ObjectSchema}
           uiSchema={{
             ...uiSchema,
             person: { ...uiSchema.person, "ui:defaultOpen": false },
diff --git a/apps/spruce/src/components/SpruceForm/FieldTemplates/ObjectFieldTemplates/index.tsx b/apps/spruce/src/components/SpruceForm/FieldTemplates/ObjectFieldTemplates/index.tsx
index 4c7a6ac23..b65277fa7 100644
--- a/apps/spruce/src/components/SpruceForm/FieldTemplates/ObjectFieldTemplates/index.tsx
+++ b/apps/spruce/src/components/SpruceForm/FieldTemplates/ObjectFieldTemplates/index.tsx
@@ -28,25 +28,25 @@ export const ObjectFieldTemplate = ({
         <TitleContainer>
           <TitleField
             id={`${idSchema.$id}__title`}
-            title={title || uiSchema["ui:title"]}
             required={required}
+            title={title || uiSchema["ui:title"]}
           />
           {tooltipTitle && <InfoSprinkle>{tooltipTitle}</InfoSprinkle>}
         </TitleContainer>
       )}
       {description && (
         <DescriptionField
-          id={`${idSchema.$id}__description`}
           description={description}
+          id={`${idSchema.$id}__description`}
         />
       )}
       {!!errors.length && (
-        <StyledBanner variant="danger" data-cy="error-banner">
+        <StyledBanner data-cy="error-banner" variant="danger">
           {errors.join(", ")}
         </StyledBanner>
       )}
       {!!warnings.length && (
-        <StyledBanner variant="warning" data-cy="warning-banner">
+        <StyledBanner data-cy="warning-banner" variant="warning">
           {warnings.join(", ")}
         </StyledBanner>
       )}
@@ -90,17 +90,17 @@ export const CardFieldTemplate: React.FC<ObjectFieldTemplateProps> = ({
   const description = uiDescription || schema.description;
   return (
     <SpruceFormContainer
-      title={uiTitle || title}
-      id={`${idSchema.$id}__title`}
       data-cy={dataCy}
       description={
         description && (
           <DescriptionField
-            id={`${idSchema.$id}__description`}
             description={description}
+            id={`${idSchema.$id}__description`}
           />
         )
       }
+      id={`${idSchema.$id}__title`}
+      title={uiTitle || title}
     >
       {properties.map((prop) => prop.content)}
     </SpruceFormContainer>
diff --git a/apps/spruce/src/components/SpruceForm/FieldTemplates/index.tsx b/apps/spruce/src/components/SpruceForm/FieldTemplates/index.tsx
index 8deda506f..d574aaa70 100644
--- a/apps/spruce/src/components/SpruceForm/FieldTemplates/index.tsx
+++ b/apps/spruce/src/components/SpruceForm/FieldTemplates/index.tsx
@@ -40,20 +40,20 @@ export const DefaultFieldTemplate: React.FC<FieldTemplateProps> = ({
         {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
         {isNullType && <>{descriptionNode || description}</>}
         {isNullType && !!errors.length && (
-          <StyledBanner variant="danger" data-cy="error-banner">
+          <StyledBanner data-cy="error-banner" variant="danger">
             {errors.join(", ")}
           </StyledBanner>
         )}
         {isNullType && !!warnings.length && (
-          <StyledBanner variant="warning" data-cy="warning-banner">
+          <StyledBanner data-cy="warning-banner" variant="warning">
             {warnings.join(", ")}
           </StyledBanner>
         )}
         <DefaultFieldContainer
-          id={`${sectionId} ${id}`}
-          className={classNames}
           border={border}
+          className={classNames}
           data-cy={fieldDataCy}
+          id={`${sectionId} ${id}`}
         >
           {children}
         </DefaultFieldContainer>
diff --git a/apps/spruce/src/components/SpruceForm/SpruceForm.stories.tsx b/apps/spruce/src/components/SpruceForm/SpruceForm.stories.tsx
index e7e6d8bfc..74afe8133 100644
--- a/apps/spruce/src/components/SpruceForm/SpruceForm.stories.tsx
+++ b/apps/spruce/src/components/SpruceForm/SpruceForm.stories.tsx
@@ -11,9 +11,9 @@ export default {
 export const Example1: CustomStoryObj<typeof SpruceForm> = {
   render: () => (
     <BaseForm
-      title="Distro Projects"
       data={example1Def.formData}
       schema={example1Def.schema}
+      title="Distro Projects"
       uiSchema={example1Def.uiSchema}
     />
   ),
@@ -22,9 +22,9 @@ export const Example1: CustomStoryObj<typeof SpruceForm> = {
 export const Example2: CustomStoryObj<typeof SpruceForm> = {
   render: () => (
     <BaseForm
-      title="Admin Options"
       data={example2Def.formData}
       schema={example2Def.schema}
+      title="Admin Options"
       uiSchema={example2Def.uiSchema}
     />
   ),
@@ -33,9 +33,9 @@ export const Example2: CustomStoryObj<typeof SpruceForm> = {
 export const Example3: CustomStoryObj<typeof SpruceForm> = {
   render: () => (
     <BaseForm
-      title="UI Options"
       data={example3Def.formData}
       schema={example3Def.schema}
+      title="UI Options"
       uiSchema={example3Def.uiSchema}
     />
   ),
@@ -53,10 +53,10 @@ const BaseForm = ({ data, schema, title, uiSchema }) => {
   return (
     <SpruceFormContainer title={title}>
       <SpruceForm
+        formData={formState}
+        onChange={onChange}
         schema={schema}
         uiSchema={uiSchema}
-        onChange={onChange}
-        formData={formState}
       />
     </SpruceFormContainer>
   );
diff --git a/apps/spruce/src/components/SpruceForm/SpruceForm.test.tsx b/apps/spruce/src/components/SpruceForm/SpruceForm.test.tsx
index a8f25ddcc..64793bc8a 100644
--- a/apps/spruce/src/components/SpruceForm/SpruceForm.test.tsx
+++ b/apps/spruce/src/components/SpruceForm/SpruceForm.test.tsx
@@ -6,9 +6,9 @@ describe("spruce form", () => {
     render(
       <SpruceFormContainer title="Just a test">
         <SpruceForm
-          schema={basicForm.schema}
           formData={basicForm.formData}
           onChange={vi.fn()}
+          schema={basicForm.schema}
           uiSchema={basicForm.uiSchema}
         />
       </SpruceFormContainer>,
@@ -32,9 +32,9 @@ describe("spruce form", () => {
     render(
       <SpruceFormContainer title="Just a test">
         <SpruceForm
-          schema={basicForm.schema}
           formData={basicForm.formData}
           onChange={onChange}
+          schema={basicForm.schema}
           uiSchema={basicForm.uiSchema}
         />
       </SpruceFormContainer>,
@@ -75,9 +75,9 @@ describe("spruce form", () => {
           render(
             <SpruceFormContainer title="Test for Text Input">
               <SpruceForm
-                schema={schema}
                 formData={formData}
                 onChange={onChange}
+                schema={schema}
                 uiSchema={uiSchema}
                 validate={validate}
               />
@@ -108,9 +108,9 @@ describe("spruce form", () => {
           render(
             <SpruceFormContainer title="Test for Text Input">
               <SpruceForm
-                schema={schema}
                 formData={formData}
                 onChange={onChange}
+                schema={schema}
                 uiSchema={uiSchema}
               />
             </SpruceFormContainer>,
@@ -137,9 +137,9 @@ describe("spruce form", () => {
           render(
             <SpruceFormContainer title="Test for Text Input">
               <SpruceForm
-                schema={schema}
                 formData={formData}
                 onChange={onChange}
+                schema={schema}
                 uiSchema={uiSchema}
               />
             </SpruceFormContainer>,
@@ -173,9 +173,9 @@ describe("spruce form", () => {
           render(
             <SpruceFormContainer title="Test for Text Area">
               <SpruceForm
-                schema={schema}
                 formData={formData}
                 onChange={onChange}
+                schema={schema}
                 uiSchema={uiSchema}
                 validate={validate}
               />
@@ -206,9 +206,9 @@ describe("spruce form", () => {
           render(
             <SpruceFormContainer title="Test for Text Area">
               <SpruceForm
-                schema={schema}
                 formData={formData}
                 onChange={onChange}
+                schema={schema}
                 uiSchema={uiSchema}
               />
             </SpruceFormContainer>,
@@ -235,9 +235,9 @@ describe("spruce form", () => {
           render(
             <SpruceFormContainer title="Test for Text Area">
               <SpruceForm
-                schema={schema}
                 formData={formData}
                 onChange={onChange}
+                schema={schema}
                 uiSchema={uiSchema}
               />
             </SpruceFormContainer>,
@@ -259,9 +259,9 @@ describe("spruce form", () => {
         const { formData, schema, uiSchema } = select;
         render(
           <SpruceForm
-            schema={schema}
             formData={formData}
             onChange={vi.fn()}
+            schema={schema}
             uiSchema={uiSchema}
           />,
         );
@@ -275,9 +275,9 @@ describe("spruce form", () => {
         const { formData, schema, uiSchema } = select;
         render(
           <SpruceForm
-            schema={schema}
             formData={formData}
             onChange={vi.fn()}
+            schema={schema}
             uiSchema={uiSchema}
           />,
         );
@@ -293,9 +293,9 @@ describe("spruce form", () => {
         const { formData, schema, uiSchema } = select;
         render(
           <SpruceForm
-            schema={schema}
             formData={formData}
             onChange={vi.fn()}
+            schema={schema}
             uiSchema={uiSchema}
           />,
         );
@@ -313,9 +313,9 @@ describe("spruce form", () => {
         const { formData, schema, uiSchema } = select;
         render(
           <SpruceForm
-            schema={schema}
             formData={formData}
             onChange={vi.fn()}
+            schema={schema}
             uiSchema={uiSchema}
           />,
         );
@@ -337,9 +337,9 @@ describe("spruce form", () => {
         const { formData, schema, uiSchema } = radioGroup;
         render(
           <SpruceForm
-            schema={schema}
             formData={formData}
             onChange={vi.fn()}
+            schema={schema}
             uiSchema={uiSchema}
           />,
         );
@@ -351,9 +351,9 @@ describe("spruce form", () => {
         const { formData, schema, uiSchema } = radioGroup;
         render(
           <SpruceForm
-            schema={schema}
             formData={formData}
             onChange={vi.fn()}
+            schema={schema}
             uiSchema={uiSchema}
           />,
         );
@@ -364,9 +364,9 @@ describe("spruce form", () => {
         const { formData, schema, uiSchema } = radioGroup;
         render(
           <SpruceForm
-            schema={schema}
             formData={formData}
             onChange={vi.fn()}
+            schema={schema}
             uiSchema={uiSchema}
           />,
         );
diff --git a/apps/spruce/src/components/SpruceForm/Widgets/DateTimePicker.tsx b/apps/spruce/src/components/SpruceForm/Widgets/DateTimePicker.tsx
index 964cd883a..04835124f 100644
--- a/apps/spruce/src/components/SpruceForm/Widgets/DateTimePicker.tsx
+++ b/apps/spruce/src/components/SpruceForm/Widgets/DateTimePicker.tsx
@@ -55,24 +55,24 @@ export const DateTimePicker: React.FC<
       {description && <Description>{description}</Description>}
       <DateTimeContainer>
         <DatePicker
+          allowClear={false}
+          data-cy="date-picker"
+          disabled={isDisabled}
+          disabledDate={disabledDate}
           // @ts-expect-error
           getPopupContainer={getPopupContainer}
-          data-cy="date-picker"
           onChange={handleChange}
           value={currentDateTime}
+        />
+        <AntdTimePicker
           allowClear={false}
+          data-cy="time-picker"
           disabled={isDisabled}
           disabledDate={disabledDate}
-        />
-        <AntdTimePicker
           // @ts-expect-error
           getPopupContainer={getPopupContainer}
-          data-cy="time-picker"
           onChange={handleChange}
           value={currentDateTime}
-          allowClear={false}
-          disabled={isDisabled}
-          disabledDate={disabledDate}
         />
       </DateTimeContainer>
     </ElementWrapper>
@@ -110,20 +110,20 @@ export const TimePicker: React.FC<
       )}
       {description && <Description>{description}</Description>}
       <AntdTimePicker
+        allowClear={false}
+        data-cy="time-picker"
+        disabled={isDisabled}
+        format={format}
         // @ts-expect-error
         getPopupContainer={getPopupContainer}
         id={id}
-        data-cy="time-picker"
-        format={format}
+        inputReadOnly
         needConfirm
         onChange={handleChange}
-        value={currentDateTime}
-        allowClear={false}
-        disabled={isDisabled}
         showNow={false}
         // Disable typing into timepicker due to Antd bug:
         // https://github.com/ant-design/ant-design/issues/45564
-        inputReadOnly
+        value={currentDateTime}
       />
     </ElementWrapper>
   );
diff --git a/apps/spruce/src/components/SpruceForm/Widgets/LeafyGreenWidgets.tsx b/apps/spruce/src/components/SpruceForm/Widgets/LeafyGreenWidgets.tsx
index c1eb4b463..cb568fbc8 100644
--- a/apps/spruce/src/components/SpruceForm/Widgets/LeafyGreenWidgets.tsx
+++ b/apps/spruce/src/components/SpruceForm/Widgets/LeafyGreenWidgets.tsx
@@ -60,21 +60,21 @@ export const LeafyGreenTextInput: React.FC<
     state: hasError ? TextInputState.Error : TextInputState.None,
   };
   return (
-    <ElementWrapper limitMaxWidth css={elementWrapperCSS}>
+    <ElementWrapper css={elementWrapperCSS} limitMaxWidth>
       <StyledTextInput
-        type={inputType}
-        data-cy={dataCy}
-        value={value === null || value === undefined ? "" : `${value}`}
+        aria-label={ariaLabel}
         aria-labelledby={ariaLabelledBy}
-        label={label}
-        placeholder={placeholder || undefined}
+        data-cy={dataCy}
         description={description}
-        optional={optional}
         disabled={disabled || readonly}
+        label={label}
         onChange={({ target }) =>
           target.value === "" ? onChange(emptyValue) : onChange(target.value)
         }
-        aria-label={ariaLabel}
+        optional={optional}
+        placeholder={placeholder || undefined}
+        type={inputType}
+        value={value === null || value === undefined ? "" : `${value}`}
         {...inputProps}
       />
       {!!warnings?.length && (
@@ -126,8 +126,8 @@ export const LeafyGreenCheckBox: React.FC<SpruceWidgetProps> = ({
             {customLabel || label}
             {tooltipDescription && (
               <Tooltip
-                popoverZIndex={zIndex.tooltip}
                 justify="middle"
+                popoverZIndex={zIndex.tooltip}
                 trigger={
                   <IconContainer>
                     <Icon glyph="InfoWithCircle" size="small" />
@@ -225,29 +225,29 @@ export const LeafyGreenSelect: React.FC<
     ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : { label };
 
   return (
-    <ElementWrapper limitMaxWidth css={elementWrapperCSS}>
+    <ElementWrapper css={elementWrapperCSS} limitMaxWidth>
       <Select
         allowDeselect={allowDeselect !== false}
         description={description}
         disabled={isDisabled}
         value={value}
         {...labelProps}
-        onChange={onChange}
-        placeholder={placeholder}
-        id={dataCy}
-        name={dataCy}
         data-cy={dataCy}
-        state={hasError && !disabled ? "error" : "none"}
         errorMessage={hasError ? rawErrors?.join(", ") : ""}
+        id={dataCy}
+        name={dataCy}
+        onChange={onChange}
+        placeholder={placeholder}
         popoverZIndex={zIndex.dropdown}
         size={sizeVariant as SelectSize}
+        state={hasError && !disabled ? "error" : "none"}
       >
         {enumOptions.map((o) => {
           // LG Select doesn't handle disabled options well. So we need to ensure the selected option is not disabled
           const optionDisabled =
             (value !== o.value && enumDisabled?.includes(o.value)) ?? false;
           return (
-            <Option key={o.value} value={o.value} disabled={optionDisabled}>
+            <Option key={o.value} disabled={optionDisabled} value={o.value}>
               {o.label}
             </Option>
           );
@@ -291,9 +291,9 @@ export const LeafyGreenRadio: React.FC<EnumSpruceWidgetProps> = ({
           return (
             <Radio
               key={o.value}
-              value={o.value}
-              disabled={disabled || optionDisabled}
               description={description}
+              disabled={disabled || optionDisabled}
+              value={o.value}
             >
               {o.label}
             </Radio>
@@ -331,37 +331,37 @@ export const LeafyGreenRadioBox: React.FC<
     <ElementWrapper css={elementWrapperCSS}>
       {showLabel !== false && (
         <LabelContainer>
-          <Label htmlFor={id} disabled={disabled}>
+          <Label disabled={disabled} htmlFor={id}>
             {label}
           </Label>
           {description && <Description>{description}</Description>}
         </LabelContainer>
       )}
       {!!errors && (
-        <StyledBanner variant="danger" data-cy="error-banner">
+        <StyledBanner data-cy="error-banner" variant="danger">
           {errors.join(", ")}
         </StyledBanner>
       )}
       {!!warnings && (
-        <StyledBanner variant="warning" data-cy="warning-banner">
+        <StyledBanner data-cy="warning-banner" variant="warning">
           {warnings.join(", ")}
         </StyledBanner>
       )}
       <RadioBoxGroup
+        data-cy={dataCy}
         id={id}
         name={label}
-        value={valueMap.indexOf(value)}
         // @ts-expect-error: FIXME. This comment was added by an automated script.
         onChange={(e) => onChange(valueMap[e.target.value])}
-        data-cy={dataCy}
+        value={valueMap.indexOf(value)}
       >
         {enumOptions.map((o) => {
           const optionDisabled = enumDisabled?.includes(o.value) ?? false;
           return (
             <StyledRadioBox
               key={valueMap.indexOf(o.value)}
-              value={valueMap.indexOf(o.value)}
               disabled={disabled || optionDisabled}
+              value={valueMap.indexOf(o.value)}
             >
               {o.label}
             </StyledRadioBox>
@@ -422,19 +422,19 @@ export const LeafyGreenTextArea: React.FC<SpruceWidgetProps> = ({
       <TextArea
         // @ts-expect-error: FIXME. This comment was added by an automated script.
         ref={el}
-        placeholder={placeholder || undefined}
         data-cy={dataCy}
-        label={label}
         description={description}
         disabled={disabled || readonly}
-        value={value}
+        // @ts-expect-error: FIXME. This comment was added by an automated script.
+        errorMessage={hasError ? errors.join(", ") : null}
+        label={label}
         onChange={({ target }) =>
           target.value === "" ? onChange(emptyValue) : onChange(target.value)
         }
-        // @ts-expect-error: FIXME. This comment was added by an automated script.
-        errorMessage={hasError ? errors.join(", ") : null}
+        placeholder={placeholder || undefined}
         rows={rows}
         state={hasError ? "error" : "none"}
+        value={value}
       />
     </ElementWrapper>
   );
@@ -462,20 +462,20 @@ export const LeafyGreenSegmentedControl: React.FC<EnumSpruceWidgetProps> = ({
   return (
     <ElementWrapper css={elementWrapperCSS}>
       <StyledSegmentedControl
+        aria-controls={ariaControls?.join(" ")}
         data-cy={dataCy}
         label={label}
-        value={value}
         onChange={onChange}
-        aria-controls={ariaControls?.join(" ")}
         size={sizeVariant as SegmentedControlProps["size"]}
+        value={value}
       >
         {enumOptions.map((o) => {
           const optionDisabled = enumDisabled?.includes(o.value) ?? false;
           return (
             <SegmentedControlOption
               key={o.value}
-              value={o.value}
               disabled={isDisabled || optionDisabled}
+              value={o.value}
             >
               {o.label}
             </SegmentedControlOption>
@@ -505,14 +505,14 @@ export const LeafyGreenDatePicker: React.FC<
   const isDisabled = disabled || readonly;
 
   return (
-    <ElementWrapper limitMaxWidth css={elementWrapperCSS}>
+    <ElementWrapper css={elementWrapperCSS} limitMaxWidth>
       <DatePicker
         data-cy="date-picker"
         description={description}
         disabled={isDisabled}
         label={label}
-        min={disableBefore}
         max={disableAfter}
+        min={disableBefore}
         onDateChange={(v) => onChange(v?.toUTCString())}
         value={new Date(value)}
       />
diff --git a/apps/spruce/src/components/SpruceForm/Widgets/MultiSelect.tsx b/apps/spruce/src/components/SpruceForm/Widgets/MultiSelect.tsx
index 149f00803..eb5b51021 100644
--- a/apps/spruce/src/components/SpruceForm/Widgets/MultiSelect.tsx
+++ b/apps/spruce/src/components/SpruceForm/Widgets/MultiSelect.tsx
@@ -38,22 +38,22 @@ export const MultiSelect: React.FC<EnumSpruceWidgetProps> = ({
   const selectedOptions = [...value, ...(includeAll ? [ALL_VALUE] : [])];
 
   return (
-    <ElementWrapper limitMaxWidth css={elementWrapperCSS}>
+    <ElementWrapper css={elementWrapperCSS} limitMaxWidth>
       <Container>
         <Label htmlFor={`${label}-multiselect`}>{label}</Label>
         <Dropdown
-          disabled={disabled}
-          id={`${label}-multiselect`}
-          data-cy={dataCy}
           buttonText={`${label}: ${
             value.length ? value.join(", ") : "No options selected."
           }`}
+          data-cy={dataCy}
+          disabled={disabled}
+          id={`${label}-multiselect`}
         >
           <TreeSelect
+            hasStyling={false}
             onChange={handleChange}
-            tData={dropdownOptions}
             state={selectedOptions}
-            hasStyling={false}
+            tData={dropdownOptions}
           />
         </Dropdown>
         {rawErrors?.length > 0 && <Error>{rawErrors?.join(", ")}</Error>}
diff --git a/apps/spruce/src/components/SpruceForm/index.tsx b/apps/spruce/src/components/SpruceForm/index.tsx
index 15a8efb32..87ebb3e0e 100644
--- a/apps/spruce/src/components/SpruceForm/index.tsx
+++ b/apps/spruce/src/components/SpruceForm/index.tsx
@@ -23,25 +23,25 @@ export const SpruceForm: React.FC<SpruceFormProps> = ({
   validate,
 }) => (
   <Form
-    fields={{ ...baseFields, ...fields }}
-    schema={schema}
-    onChange={onChange}
-    // @ts-expect-error: FIXME. This comment was added by an automated script.
-    widgets={widgets}
-    uiSchema={uiSchema}
-    formData={formData}
-    tagName={tagName}
     ArrayFieldTemplate={ArrayFieldTemplate}
+    // @ts-expect-error: FIXME. This comment was added by an automated script.
+    customFormats={customFormats(customFormatFields?.jiraHost)}
+    disabled={disabled}
+    fields={{ ...baseFields, ...fields }}
     FieldTemplate={DefaultFieldTemplate}
+    formData={formData}
+    liveValidate
+    noHtml5Validate
     ObjectFieldTemplate={ObjectFieldTemplate}
-    transformErrors={transformErrors}
+    onChange={onChange}
+    schema={schema}
     showErrorList={false}
+    tagName={tagName}
+    transformErrors={transformErrors}
+    uiSchema={uiSchema}
     validate={validate}
-    disabled={disabled}
     // @ts-expect-error: FIXME. This comment was added by an automated script.
-    customFormats={customFormats(customFormatFields?.jiraHost)}
-    liveValidate
-    noHtml5Validate
+    widgets={widgets}
   >
     {/*  Need to pass in an empty fragment child to remove default submit button */}
     {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
diff --git a/apps/spruce/src/components/Table/BaseTable.stories.tsx b/apps/spruce/src/components/Table/BaseTable.stories.tsx
index 700ee890c..387504f49 100644
--- a/apps/spruce/src/components/Table/BaseTable.stories.tsx
+++ b/apps/spruce/src/components/Table/BaseTable.stories.tsx
@@ -47,9 +47,9 @@ export const VirtualTable: CustomStoryObj<typeof BaseTable> = {
   render: (args) => (
     <TemplateComponent
       {...args}
+      className={virtualScrollingContainerHeight}
       data={makeDefaultRows(10000)}
       useVirtualScrolling
-      className={virtualScrollingContainerHeight}
     />
   ),
   args: {
@@ -147,7 +147,7 @@ const TemplateComponent: React.FC<
     useVirtualScrolling,
   });
 
-  return <BaseTable {...rest} table={table} ref={tableContainerRef} />;
+  return <BaseTable {...rest} ref={tableContainerRef} table={table} />;
 };
 
 interface CellProps {
diff --git a/apps/spruce/src/components/Table/BaseTable.tsx b/apps/spruce/src/components/Table/BaseTable.tsx
index 0e9992480..65052a9fe 100644
--- a/apps/spruce/src/components/Table/BaseTable.tsx
+++ b/apps/spruce/src/components/Table/BaseTable.tsx
@@ -88,7 +88,7 @@ export const BaseTable = forwardRef(
     const hasVirtualRows = virtualRows && virtualRows.length > 0;
     return (
       <>
-        <StyledTable data-cy={dataCyTable} table={table} ref={ref} {...args}>
+        <StyledTable ref={ref} data-cy={dataCyTable} table={table} {...args}>
           <TableHead isSticky={hasVirtualRows}>
             {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
             {table.getHeaderGroups().map((headerGroup) => (
@@ -164,22 +164,22 @@ export const BaseTable = forwardRef(
                   const row = rows[vr.index];
                   return (
                     <RenderableRow
-                      row={row}
                       key={row.id}
-                      virtualRow={vr}
-                      isSelected={selectedRowIndexes.includes(row.index)}
                       dataCyRow={dataCyRow}
+                      isSelected={selectedRowIndexes.includes(row.index)}
+                      row={row}
+                      virtualRow={vr}
                     />
                   );
                 })
               : rows.map((row) => (
                   <RenderableRow
-                    row={row}
                     key={row.id}
+                    dataCyRow={dataCyRow}
+                    isSelected={selectedRowIndexes.includes(row.index)}
+                    row={row}
                     // @ts-expect-error: FIXME. This comment was added by an automated script.
                     virtualRow={null}
-                    isSelected={selectedRowIndexes.includes(row.index)}
-                    dataCyRow={dataCyRow}
                   />
                 ))}
           </TableBody>
@@ -191,17 +191,17 @@ export const BaseTable = forwardRef(
           ))}
         {usePagination && table && (
           <StyledPagination
+            currentPage={table.getState().pagination.pageIndex + 1}
             itemsPerPage={table.getState().pagination.pageSize}
-            onItemsPerPageOptionChange={(value: string) => {
-              table.setPageSize(Number(value));
-            }}
             numTotalItems={numTotalItems}
-            currentPage={table.getState().pagination.pageIndex + 1}
+            onBackArrowClick={() => table.previousPage()}
             onCurrentPageOptionChange={(value: string) => {
               table.setPageIndex(Number(value) - 1);
             }}
-            onBackArrowClick={() => table.previousPage()}
             onForwardArrowClick={() => table.nextPage()}
+            onItemsPerPageOptionChange={(value: string) => {
+              table.setPageSize(Number(value));
+            }}
           />
         )}
       </>
@@ -223,8 +223,6 @@ const RenderableRow = <T extends LGRowData>({
   isSelected?: boolean;
 }) => (
   <Row
-    row={row}
-    data-cy={dataCyRow}
     className={css`
       &[aria-hidden="false"] td > div {
         max-height: unset;
@@ -235,7 +233,9 @@ const RenderableRow = <T extends LGRowData>({
         font-weight:bold;
         `}
     `}
+    data-cy={dataCyRow}
     data-selected={isSelected}
+    row={row}
     virtualRow={virtualRow}
   >
     {row.getVisibleCells().map((cell) => (
@@ -248,12 +248,12 @@ const RenderableRow = <T extends LGRowData>({
       row.subRows.map((subRow) => (
         <Row
           key={subRow.id}
-          row={subRow}
           className={css`
             &[aria-hidden="false"] td > div[data-state="entered"] {
               max-height: unset;
             }
           `}
+          row={subRow}
           virtualRow={virtualRow}
         >
           {subRow.getVisibleCells().map((cell) => (
diff --git a/apps/spruce/src/components/Table/Filters.tsx b/apps/spruce/src/components/Table/Filters.tsx
index f88d949ca..1708068a5 100644
--- a/apps/spruce/src/components/Table/Filters.tsx
+++ b/apps/spruce/src/components/Table/Filters.tsx
@@ -49,15 +49,15 @@ export const InputFilter = ({
   return (
     <FilterWrapper data-cy={`${dataCy}-wrapper`}>
       <TextInput
-        description="Press enter to filter."
-        type="search"
+        ref={inputEl}
         aria-label="Search Table"
         data-cy={`${dataCy}-input-filter`}
-        placeholder={placeholder}
-        value={value}
+        description="Press enter to filter."
         onChange={onChange}
         onKeyPress={(e) => e.key === "Enter" && onFilter()}
-        ref={inputEl}
+        placeholder={placeholder}
+        type="search"
+        value={value}
       />
     </FilterWrapper>
   );
@@ -72,23 +72,23 @@ export const getColumnSearchFilterProps = ({
 }: InputFilterProps) => ({
   filterDropdown: ({ confirm, visible }: FilterDropdownProps) => (
     <InputFilter
-      visible={visible}
-      placeholder={placeholder}
-      value={value}
+      data-cy={dataCy}
       onChange={onChange}
       onFilter={() => {
         onFilter();
         confirm({ closeDropdown: true });
       }}
-      data-cy={dataCy}
+      placeholder={placeholder}
+      value={value}
+      visible={visible}
     />
   ),
   filterIcon: () => (
     <StyledFilterWrapper>
       <Icon
-        glyph="MagnifyingGlass"
-        fill={value.length > 0 ? blue.light1 : defaultColor}
         data-cy={dataCy}
+        fill={value.length > 0 ? blue.light1 : defaultColor}
+        glyph="MagnifyingGlass"
       />
     </StyledFilterWrapper>
   ),
@@ -103,17 +103,17 @@ export const getColumnTreeSelectFilterProps = ({
   filterDropdown: () => (
     <TreeSelect
       data-cy={dataCy}
+      onChange={onChange}
       state={state}
       tData={tData}
-      onChange={onChange}
     />
   ),
   filterIcon: () => (
     <StyledFilterWrapper>
       <Icon
-        glyph="Filter"
-        fill={state.length > 0 ? blue.light1 : defaultColor}
         data-cy={dataCy}
+        fill={state.length > 0 ? blue.light1 : defaultColor}
+        glyph="Filter"
       />
     </StyledFilterWrapper>
   ),
@@ -133,7 +133,7 @@ export const CheckboxFilter = ({
   value,
 }: CheckboxFilterProps) => (
   <FilterWrapper data-cy={`${dataCy}-wrapper`}>
-    <CheckboxGroup value={value} data={statuses} onChange={onChange} />
+    <CheckboxGroup data={statuses} onChange={onChange} value={value} />
   </FilterWrapper>
 );
 
@@ -145,21 +145,21 @@ export const getColumnCheckboxFilterProps = ({
 }: CheckboxFilterProps) => ({
   filterDropdown: ({ confirm }: FilterDropdownProps) => (
     <CheckboxFilter
-      statuses={statuses}
-      value={value}
+      dataCy={dataCy}
       onChange={(e, key) => {
         onChange(e, key);
         confirm({ closeDropdown: true });
       }}
-      dataCy={dataCy}
+      statuses={statuses}
+      value={value}
     />
   ),
   filterIcon: () => (
     <StyledFilterWrapper>
       <Icon
-        glyph="Filter"
-        fill={value.length > 0 ? blue.light1 : defaultColor}
         data-cy={dataCy}
+        fill={value.length > 0 ? blue.light1 : defaultColor}
+        glyph="Filter"
       />
     </StyledFilterWrapper>
   ),
diff --git a/apps/spruce/src/components/Table/TableControl/index.tsx b/apps/spruce/src/components/Table/TableControl/index.tsx
index 4e4dea839..dfc28c1d7 100644
--- a/apps/spruce/src/components/Table/TableControl/index.tsx
+++ b/apps/spruce/src/components/Table/TableControl/index.tsx
@@ -42,15 +42,15 @@ const TableControl: React.FC<Props> = ({
     <TableControlOuterRow>
       <FlexContainer>
         <ResultCountLabel
-          dataCyNumerator="filtered-count"
           dataCyDenominator="total-count"
+          dataCyNumerator="filtered-count"
+          denominator={totalCount}
           label={label}
           numerator={filteredCount}
-          denominator={totalCount}
         />
         <PaddedButton
-          onClick={onClearAll}
           data-cy="clear-all-filters"
+          onClick={onClearAll}
           size="small"
         >
           Clear all filters
@@ -58,16 +58,16 @@ const TableControl: React.FC<Props> = ({
       </FlexContainer>
       <TableControlInnerRow>
         <Pagination
-          data-cy="tasks-table-pagination"
           currentPage={page}
-          totalResults={filteredCount}
-          pageSize={limit}
+          data-cy="tasks-table-pagination"
           onChange={onPageChange}
+          pageSize={limit}
+          totalResults={filteredCount}
         />
         <PageSizeSelector
           data-cy="tasks-table-page-size-selector"
-          value={limit}
           onChange={handlePageSizeChange}
+          value={limit}
         />
       </TableControlInnerRow>
     </TableControlOuterRow>
diff --git a/apps/spruce/src/components/TablePopover/TableFilterPopover.tsx b/apps/spruce/src/components/TablePopover/TableFilterPopover.tsx
index 8d8bd18d4..46e720040 100644
--- a/apps/spruce/src/components/TablePopover/TableFilterPopover.tsx
+++ b/apps/spruce/src/components/TablePopover/TableFilterPopover.tsx
@@ -40,21 +40,21 @@ export const TableFilterPopover: React.FC<TableFilterPopoverProps> = ({
   return (
     <FilterWrapper>
       <IconButton
-        onClick={() => setActive(!active)}
+        ref={buttonRef}
         active={active}
-        data-cy={dataCy}
         aria-label="Table Filter Popover Icon"
-        ref={buttonRef}
+        data-cy={dataCy}
+        onClick={() => setActive(!active)}
       >
-        <Icon glyph="Filter" small="xsmall" color={iconColor} />
+        <Icon color={iconColor} glyph="Filter" small="xsmall" />
       </IconButton>
-      <Popover align="bottom" justify="middle" active={active}>
+      <Popover active={active} align="bottom" justify="middle">
         <PopoverContainer ref={popoverRef} data-cy={`${dataCy}-wrapper`}>
           <TreeSelect
             hasStyling={false}
-            tData={options}
-            state={value}
             onChange={onChange}
+            state={value}
+            tData={options}
           />
         </PopoverContainer>
       </Popover>
diff --git a/apps/spruce/src/components/TablePopover/TableSearchPopover.tsx b/apps/spruce/src/components/TablePopover/TableSearchPopover.tsx
index f9e2283b4..8c9e4a6d5 100644
--- a/apps/spruce/src/components/TablePopover/TableSearchPopover.tsx
+++ b/apps/spruce/src/components/TablePopover/TableSearchPopover.tsx
@@ -47,26 +47,26 @@ export const TableSearchPopover: React.FC<TableSearchPopoverProps> = ({
   return (
     <SearchWrapper>
       <IconButton
-        onClick={() => setActive(!active)}
+        ref={buttonRef}
         active={active}
-        data-cy={dataCy}
         aria-label="Table Search Popover Icon"
-        ref={buttonRef}
+        data-cy={dataCy}
+        onClick={() => setActive(!active)}
       >
-        <Icon glyph="MagnifyingGlass" small="xsmall" color={iconColor} />
+        <Icon color={iconColor} glyph="MagnifyingGlass" small="xsmall" />
       </IconButton>
-      <Popover align="bottom" justify="middle" active={active}>
+      <Popover active={active} align="bottom" justify="middle">
         <PopoverContainer ref={popoverRef} data-cy={`${dataCy}-wrapper`}>
           <TextInput
-            description="Press enter to filter."
-            placeholder={placeholder}
-            type="search"
             aria-label="Search Table"
+            autoFocus
             data-cy={`${dataCy}-input-filter`}
-            value={input}
+            description="Press enter to filter."
             onChange={(e) => setInput(e.target.value)}
             onKeyPress={(e) => e.key === "Enter" && onEnter()}
-            autoFocus
+            placeholder={placeholder}
+            type="search"
+            value={input}
           />
         </PopoverContainer>
       </Popover>
diff --git a/apps/spruce/src/components/TaskStatusBadge/TaskStatusBadge.test.tsx b/apps/spruce/src/components/TaskStatusBadge/TaskStatusBadge.test.tsx
index e39a5e3a9..641b8b012 100644
--- a/apps/spruce/src/components/TaskStatusBadge/TaskStatusBadge.test.tsx
+++ b/apps/spruce/src/components/TaskStatusBadge/TaskStatusBadge.test.tsx
@@ -14,7 +14,7 @@ describe("taskStatusBadge", () => {
   });
   it("should render a link if a task id is passed", () => {
     renderWithRouterMatch(
-      <TaskStatusBadge status="success" id="123" execution={0} />,
+      <TaskStatusBadge execution={0} id="123" status="success" />,
     );
     expect(screen.getByDataCy("task-status-badge")).toBeInTheDocument();
     expect(screen.getByRole("link")).toBeInTheDocument();
@@ -25,7 +25,7 @@ describe("taskStatusBadge", () => {
   });
   it("should render a link to the annotations tab if the status is known issue", () => {
     renderWithRouterMatch(
-      <TaskStatusBadge status={TaskStatus.KnownIssue} id="123" execution={0} />,
+      <TaskStatusBadge execution={0} id="123" status={TaskStatus.KnownIssue} />,
     );
     expect(screen.getByDataCy("task-status-badge")).toBeInTheDocument();
     expect(screen.getByRole("link")).toBeInTheDocument();
diff --git a/apps/spruce/src/components/TaskStatusBadge/index.tsx b/apps/spruce/src/components/TaskStatusBadge/index.tsx
index 46df8eea6..c28eb6b95 100644
--- a/apps/spruce/src/components/TaskStatusBadge/index.tsx
+++ b/apps/spruce/src/components/TaskStatusBadge/index.tsx
@@ -76,11 +76,11 @@ const TaskStatusBadge: React.FC<TaskStatusBadgeProps> = ({
         )}
       >
         <StyledBadge
-          data-cy="task-status-badge"
           key={status}
+          css={badgeWidthMaxContent}
+          data-cy="task-status-badge"
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           variant={mapTaskStatusToBadgeVariant[status]}
-          css={badgeWidthMaxContent}
         >
           {displayStatus}
         </StyledBadge>
@@ -90,8 +90,8 @@ const TaskStatusBadge: React.FC<TaskStatusBadgeProps> = ({
 
   return (
     <StyledBadge
-      data-cy="task-status-badge"
       key={status}
+      data-cy="task-status-badge"
       {...customBadgeColors(status)}
     >
       {displayStatus}
diff --git a/apps/spruce/src/components/TaskStatusFilters/index.tsx b/apps/spruce/src/components/TaskStatusFilters/index.tsx
index c6dc29fd4..7675c80ea 100644
--- a/apps/spruce/src/components/TaskStatusFilters/index.tsx
+++ b/apps/spruce/src/components/TaskStatusFilters/index.tsx
@@ -25,35 +25,35 @@ export const TaskStatusFilters: React.FC<Props> = ({
     <Container>
       <SelectorWrapper>
         <Dropdown
-          data-cy="task-status-filter"
           buttonText={`Task Status: ${
             selectedStatuses.length
               ? selectedStatuses.join(", ")
               : noFilterMessage
           }`}
+          data-cy="task-status-filter"
         >
           <TreeSelect
+            hasStyling={false}
+            onChange={onChangeStatusFilter}
             state={selectedStatuses}
             tData={currentStatuses}
-            onChange={onChangeStatusFilter}
-            hasStyling={false}
           />
         </Dropdown>
       </SelectorWrapper>
       <SelectorWrapper>
         <Dropdown
-          data-cy="base-task-status-filter"
           buttonText={`Base Task Status: ${
             selectedBaseStatuses.length
               ? selectedBaseStatuses.join(", ")
               : noFilterMessage
           }`}
+          data-cy="base-task-status-filter"
         >
           <TreeSelect
+            hasStyling={false}
+            onChange={onChangeBaseStatusFilter}
             state={selectedBaseStatuses}
             tData={baseStatuses}
-            onChange={onChangeBaseStatusFilter}
-            hasStyling={false}
           />
         </Dropdown>
       </SelectorWrapper>
diff --git a/apps/spruce/src/components/TaskStatusIcon/TaskStatusIcon.stories.tsx b/apps/spruce/src/components/TaskStatusIcon/TaskStatusIcon.stories.tsx
index b10c2deec..a62523349 100644
--- a/apps/spruce/src/components/TaskStatusIcon/TaskStatusIcon.stories.tsx
+++ b/apps/spruce/src/components/TaskStatusIcon/TaskStatusIcon.stories.tsx
@@ -28,7 +28,7 @@ export const Default: CustomStoryObj<TaskStatusIconProps> = {
         {taskStatuses.map((status) => (
           <IconContainer key={status}>
             {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
-            <TaskStatusIcon status={TaskStatus[status]} size={s} />
+            <TaskStatusIcon size={s} status={TaskStatus[status]} />
             <span>{status}</span>
           </IconContainer>
         ))}
diff --git a/apps/spruce/src/components/TaskStatusIcon/index.tsx b/apps/spruce/src/components/TaskStatusIcon/index.tsx
index 6350c1eb3..41de9f5f2 100644
--- a/apps/spruce/src/components/TaskStatusIcon/index.tsx
+++ b/apps/spruce/src/components/TaskStatusIcon/index.tsx
@@ -20,42 +20,42 @@ export const TaskStatusIcon: React.FC<TaskStatusIconProps> = ({
   switch (status) {
     case TaskStatus.Succeeded:
       return (
-        <Icon glyph="Checkmark" fill={green.dark1} size={size} {...rest} />
+        <Icon fill={green.dark1} glyph="Checkmark" size={size} {...rest} />
       );
     case TaskStatus.Failed:
-      return <Icon glyph="FailureIcon" fill={red.base} size={size} {...rest} />;
+      return <Icon fill={red.base} glyph="FailureIcon" size={size} {...rest} />;
     case TaskStatus.KnownIssue:
       return (
-        <Icon glyph="KnownFailureIcon" fill={red.base} size={size} {...rest} />
+        <Icon fill={red.base} glyph="KnownFailureIcon" size={size} {...rest} />
       );
     case TaskStatus.Dispatched:
     case TaskStatus.Started:
-      return <Icon glyph="Refresh" fill={yellow.dark2} size={size} {...rest} />;
+      return <Icon fill={yellow.dark2} glyph="Refresh" size={size} {...rest} />;
     case TaskStatus.SetupFailed:
       return (
-        <Icon glyph="SetupFailure" fill={purple.dark2} size={size} {...rest} />
+        <Icon fill={purple.dark2} glyph="SetupFailure" size={size} {...rest} />
       );
     case TaskStatus.SystemUnresponsive:
     case TaskStatus.SystemTimedOut:
     case TaskStatus.SystemFailed:
       return (
-        <Icon glyph="SystemFailure" fill={purple.dark2} size={size} {...rest} />
+        <Icon fill={purple.dark2} glyph="SystemFailure" size={size} {...rest} />
       );
     case TaskStatus.TestTimedOut:
     case TaskStatus.TaskTimedOut:
-      return <Icon glyph="TimedOut" fill={red.base} size={size} {...rest} />;
+      return <Icon fill={red.base} glyph="TimedOut" size={size} {...rest} />;
     case TaskStatus.Aborted:
     case TaskStatus.Blocked:
     case TaskStatus.Unscheduled:
     case TaskStatus.Inactive:
     case TaskStatus.Undispatched:
       return (
-        <Icon glyph="WillNotRun" fill={gray.dark1} size={size} {...rest} />
+        <Icon fill={gray.dark1} glyph="WillNotRun" size={size} {...rest} />
       );
     case TaskStatus.WillRun:
     case TaskStatus.Pending:
     case TaskStatus.Unstarted:
-      return <Icon glyph="Calendar" fill={gray.dark3} size={size} {...rest} />;
+      return <Icon fill={gray.dark3} glyph="Calendar" size={size} {...rest} />;
     default:
       reportError(
         new Error(`Status '${status}' is not a valid task status`),
diff --git a/apps/spruce/src/components/TaskStatusIconLegend/index.tsx b/apps/spruce/src/components/TaskStatusIconLegend/index.tsx
index 5c354b81b..a918b15db 100644
--- a/apps/spruce/src/components/TaskStatusIconLegend/index.tsx
+++ b/apps/spruce/src/components/TaskStatusIconLegend/index.tsx
@@ -33,6 +33,7 @@ export const TaskStatusIconLegend: React.FC = () => {
   return (
     <div>
       <IconButton
+        aria-label="Task Status Icon Legend"
         onClick={() => {
           setIsActive(!isActive);
           sendEvent({
@@ -40,22 +41,23 @@ export const TaskStatusIconLegend: React.FC = () => {
             open: true,
           });
         }}
-        aria-label="Task Status Icon Legend"
       >
         <StyledIcon glyph="QuestionMarkWithCircle" />
       </IconButton>
       <Popover
+        active={isActive}
         align="top"
         justify="end"
-        active={isActive}
-        usePortal
-        // In some cases, the z-index of the popover needs to be higher than the rest of the app due to some components having a higher z-index.
+        // In some cases, the z-index of the popover needs to be higher than the rest
+        // of the app due to some components having a higher z-index.
         popoverZIndex={zIndex.tooltip}
+        usePortal
       >
         <StyledPopoverContainer>
           <TitleContainer>
             <Overline>Icon Legend</Overline>
             <IconButton
+              aria-label="Close Task Status Icon Legend"
               onClick={() => {
                 sendEvent({
                   name: "Toggled task icon legend",
@@ -63,7 +65,6 @@ export const TaskStatusIconLegend: React.FC = () => {
                 });
                 setIsActive(false);
               }}
-              aria-label="Close Task Status Icon Legend"
             >
               <Icon glyph="X" />
             </IconButton>
diff --git a/apps/spruce/src/components/TasksTable/Columns.tsx b/apps/spruce/src/components/TasksTable/Columns.tsx
index ccc56bbf1..e83d011c6 100644
--- a/apps/spruce/src/components/TasksTable/Columns.tsx
+++ b/apps/spruce/src/components/TasksTable/Columns.tsx
@@ -72,7 +72,7 @@ export const getColumnsTemplate = ({
           popoverZIndex={zIndex.tooltip}
           trigger={
             <span>
-              <TaskStatusBadge status={status} id={id} execution={execution} />
+              <TaskStatusBadge execution={execution} id={id} status={status} />
             </span>
           }
         >
@@ -81,7 +81,7 @@ export const getColumnsTemplate = ({
         </Tooltip>
       ) : (
         getValue() && (
-          <TaskStatusBadge status={status} id={id} execution={execution} />
+          <TaskStatusBadge execution={execution} id={id} status={status} />
         )
       );
     },
@@ -106,9 +106,9 @@ export const getColumnsTemplate = ({
     }) =>
       getValue() && (
         <TaskStatusBadge
-          status={getValue() as string}
-          id={baseTask?.id}
           execution={baseTask?.execution}
+          id={baseTask?.id}
+          status={getValue() as string}
         />
       ),
     meta: {
diff --git a/apps/spruce/src/components/TasksTable/index.tsx b/apps/spruce/src/components/TasksTable/index.tsx
index a9e734ccd..c509cd60e 100644
--- a/apps/spruce/src/components/TasksTable/index.tsx
+++ b/apps/spruce/src/components/TasksTable/index.tsx
@@ -59,11 +59,7 @@ const TasksTable: React.FC<TasksTableProps> = ({
   variantInputProps,
 }) => (
   <Table
-    data-cy="tasks-table"
-    rowKey={rowKey}
-    pagination={false}
-    loading={loading}
-    data-loading={loading}
+    childrenColumnName="executionTasksFull"
     columns={
       sorts
         ? getColumnDefsWithSort({
@@ -88,17 +84,21 @@ const TasksTable: React.FC<TasksTableProps> = ({
             variantInputProps,
           })
     }
-    getPopupContainer={(trigger: HTMLElement) => trigger}
+    data-cy="tasks-table"
+    data-loading={loading}
     // @ts-expect-error: FIXME. This comment was added by an automated script.
     dataSource={tasks}
-    // @ts-expect-error: FIXME. This comment was added by an automated script.
-    onChange={tableChangeHandler}
-    childrenColumnName="executionTasksFull"
     expandable={{
       onExpand: (expanded) => {
         onExpand(expanded);
       },
     }}
+    getPopupContainer={(trigger: HTMLElement) => trigger}
+    loading={loading}
+    // @ts-expect-error: FIXME. This comment was added by an automated script.
+    onChange={tableChangeHandler}
+    pagination={false}
+    rowKey={rowKey}
   />
 );
 
@@ -176,7 +176,7 @@ const getColumnDefs = ({
           popoverZIndex={zIndex.tooltip}
           trigger={
             <span>
-              <TaskStatusBadge status={status} id={id} execution={execution} />
+              <TaskStatusBadge execution={execution} id={id} status={status} />
             </span>
           }
         >
@@ -185,7 +185,7 @@ const getColumnDefs = ({
         </Tooltip>
       ) : (
         status && (
-          <TaskStatusBadge status={status} id={id} execution={execution} />
+          <TaskStatusBadge execution={execution} id={id} status={status} />
         )
       ),
     ...(statusSelectorProps && {
@@ -212,11 +212,11 @@ const getColumnDefs = ({
     render: (status: string, { baseTask }) =>
       status && (
         <TaskStatusBadge
-          status={status}
-          // @ts-expect-error: FIXME. This comment was added by an automated script.
-          id={baseTask.id}
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           execution={baseTask.execution}
+          // @ts-expect-error: FIXME. This comment was added by an automated script.
+          id={baseTask.id}
+          status={status}
         />
       ),
     ...(baseStatusSelectorProps && {
diff --git a/apps/spruce/src/components/TestStatusBadge/TestStatusBadge.stories.tsx b/apps/spruce/src/components/TestStatusBadge/TestStatusBadge.stories.tsx
index 1a11c1aad..4b70e4d28 100644
--- a/apps/spruce/src/components/TestStatusBadge/TestStatusBadge.stories.tsx
+++ b/apps/spruce/src/components/TestStatusBadge/TestStatusBadge.stories.tsx
@@ -12,7 +12,7 @@ export const Default: CustomStoryObj<typeof TestStatusBadge> = {
   render: (args) => (
     <Container>
       {Object.values(TestStatus).map((status) => (
-        <TestStatusBadge {...args} status={status} key={status} />
+        <TestStatusBadge {...args} key={status} status={status} />
       ))}
     </Container>
   ),
diff --git a/apps/spruce/src/components/TestStatusBadge/index.tsx b/apps/spruce/src/components/TestStatusBadge/index.tsx
index b58b58143..f7e126c90 100644
--- a/apps/spruce/src/components/TestStatusBadge/index.tsx
+++ b/apps/spruce/src/components/TestStatusBadge/index.tsx
@@ -8,9 +8,9 @@ interface TestStatusBadgeProps {
 
 const TestStatusBadge: React.FC<TestStatusBadgeProps> = ({ status }) => (
   <Badge
+    key={status}
     // @ts-expect-error: FIXME. This comment was added by an automated script.
     variant={statusToBadgeColor[status?.toLowerCase()] || Variant.LightGray}
-    key={status}
   >
     {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
     {statusCopy[status?.toLowerCase()] || status}
diff --git a/apps/spruce/src/components/TextInputWithValidation/TextInputWithValidation.test.tsx b/apps/spruce/src/components/TextInputWithValidation/TextInputWithValidation.test.tsx
index 65e7ed5d8..1e91d21a9 100644
--- a/apps/spruce/src/components/TextInputWithValidation/TextInputWithValidation.test.tsx
+++ b/apps/spruce/src/components/TextInputWithValidation/TextInputWithValidation.test.tsx
@@ -7,9 +7,9 @@ describe("textInputWithValidation", () => {
     const onSubmit = vi.fn();
     render(
       <TextInputWithValidation
-        onSubmit={onSubmit}
-        label="textinput"
         aria-label="textinput"
+        label="textinput"
+        onSubmit={onSubmit}
         validator={(v) => v.length > 5}
       />,
     );
@@ -24,9 +24,9 @@ describe("textInputWithValidation", () => {
     const onSubmit = vi.fn();
     render(
       <TextInputWithValidation
-        onSubmit={onSubmit}
-        label="textinput"
         aria-label="textinput"
+        label="textinput"
+        onSubmit={onSubmit}
       />,
     );
     const input = screen.getByRole("textbox", { name: "textinput" });
@@ -39,9 +39,9 @@ describe("textInputWithValidation", () => {
     const onChange = vi.fn();
     render(
       <TextInputWithValidation
-        onChange={onChange}
-        label="textinput"
         aria-label="textinput"
+        label="textinput"
+        onChange={onChange}
         validator={(v) => v.length >= 5}
       />,
     );
@@ -57,12 +57,12 @@ describe("textInputWithValidation", () => {
     const onSubmit = vi.fn();
     render(
       <TextInputWithValidation
-        onChange={onChange}
-        label="textinput"
         aria-label="textinput"
-        validator={(v) => v.length >= 5}
-        onSubmit={onSubmit}
         clearOnSubmit
+        label="textinput"
+        onChange={onChange}
+        onSubmit={onSubmit}
+        validator={(v) => v.length >= 5}
       />,
     );
     const input = screen.getByRole("textbox", { name: "textinput" });
diff --git a/apps/spruce/src/components/TextInputWithValidation/index.tsx b/apps/spruce/src/components/TextInputWithValidation/index.tsx
index 8f3a90993..47f565ee7 100644
--- a/apps/spruce/src/components/TextInputWithValidation/index.tsx
+++ b/apps/spruce/src/components/TextInputWithValidation/index.tsx
@@ -67,32 +67,32 @@ const TextInputWithValidation: React.FC<TextInputWithValidationProps> =
     return (
       // @ts-expect-error: FIXME. This comment was added by an automated script.
       <TextInputWithGlyph
-        value={input}
-        onChange={(e) => handleOnChange(e.target.value)}
-        onKeyPress={(e: React.KeyboardEvent<HTMLInputElement>) =>
-          e.key === "Enter" && handleOnSubmit()
-        }
-        label={label}
-        aria-label={ariaLabel}
         ref={ref}
+        aria-label={ariaLabel}
         icon={
           isValid ? (
             <IconButton
-              onClick={handleOnSubmit}
               aria-label="Select plus button"
+              onClick={handleOnSubmit}
             >
               <Icon glyph="Plus" />
             </IconButton>
           ) : (
             <IconTooltip
-              glyph="Warning"
-              fill={yellow.base}
               aria-label="validation error"
+              fill={yellow.base}
+              glyph="Warning"
             >
               {validatorErrorMessage}
             </IconTooltip>
           )
         }
+        label={label}
+        onChange={(e) => handleOnChange(e.target.value)}
+        onKeyPress={(e: React.KeyboardEvent<HTMLInputElement>) =>
+          e.key === "Enter" && handleOnSubmit()
+        }
+        value={input}
         {...rest}
       />
     );
diff --git a/apps/spruce/src/components/TimePicker/index.tsx b/apps/spruce/src/components/TimePicker/index.tsx
index 986700923..c21377b2b 100644
--- a/apps/spruce/src/components/TimePicker/index.tsx
+++ b/apps/spruce/src/components/TimePicker/index.tsx
@@ -6,7 +6,7 @@ export interface TimePickerProps
   extends Omit<PickerTimeProps<Date>, "picker"> {}
 
 const TimePicker = forwardRef<any, TimePickerProps>((props, ref) => (
-  <DatePicker {...props} picker="time" mode={undefined} ref={ref} />
+  <DatePicker {...props} ref={ref} mode={undefined} picker="time" />
 ));
 
 TimePicker.displayName = "TimePicker";
diff --git a/apps/spruce/src/components/TreeSelect/TreeSelect.stories.tsx b/apps/spruce/src/components/TreeSelect/TreeSelect.stories.tsx
index d9bba143b..de34a7b23 100644
--- a/apps/spruce/src/components/TreeSelect/TreeSelect.stories.tsx
+++ b/apps/spruce/src/components/TreeSelect/TreeSelect.stories.tsx
@@ -23,7 +23,7 @@ const BaseTreeSelect = (props: TreeSelectProps) => {
   const [value, setValue] = useState([]);
   return (
     // @ts-expect-error: FIXME. This comment was added by an automated script.
-    <TreeSelect tData={treeData} state={value} onChange={setValue} {...props} />
+    <TreeSelect onChange={setValue} state={value} tData={treeData} {...props} />
   );
 };
 
diff --git a/apps/spruce/src/components/TreeSelect/TreeSelect.tsx b/apps/spruce/src/components/TreeSelect/TreeSelect.tsx
index cbb74ae89..f657a74c0 100644
--- a/apps/spruce/src/components/TreeSelect/TreeSelect.tsx
+++ b/apps/spruce/src/components/TreeSelect/TreeSelect.tsx
@@ -85,8 +85,8 @@ export const TreeSelect: React.FC<TreeSelectProps> = ({
       )}
     >
       <CheckboxContainer
-        hasStyling={hasStyling}
         data-cy={dataCy || "tree-select-options"}
+        hasStyling={hasStyling}
       >
         {renderCheckboxes({
           state: filteredState,
@@ -142,14 +142,14 @@ const renderCheckboxesHelper = ({
   const onChangeFn = (): void =>
     handleOnChange({ state, value: data.value, onChange, tData });
   rows.push(
-    <CheckboxWrapper key={data.key} level={0} isAll={data.value === ALL_VALUE}>
+    <CheckboxWrapper key={data.key} isAll={data.value === ALL_VALUE} level={0}>
       <Checkbox
-        className="cy-checkbox"
-        onChange={onChangeFn}
-        label={data.title}
-        checked={state.includes(data.value)}
         bold={false}
+        checked={state.includes(data.value)}
+        className="cy-checkbox"
         data-cy="checkbox"
+        label={data.title}
+        onChange={onChangeFn}
       />
     </CheckboxWrapper>,
   );
@@ -161,16 +161,16 @@ const renderCheckboxesHelper = ({
       rows.push(
         <CheckboxWrapper
           key={`${data.key}-${child.key}`}
-          level={1}
           isAll={child.value === ALL_VALUE}
+          level={1}
         >
           <Checkbox
-            className="cy-checkbox"
-            onChange={onChangeChildFn}
-            label={child.title}
-            checked={state.includes(child.value)}
             bold={false}
+            checked={state.includes(child.value)}
+            className="cy-checkbox"
             data-cy="checkbox"
+            label={child.title}
+            onChange={onChangeChildFn}
           />
         </CheckboxWrapper>,
       );
diff --git a/apps/spruce/src/components/TupleSelect/TupleSelect.stories.tsx b/apps/spruce/src/components/TupleSelect/TupleSelect.stories.tsx
index a137e6246..48515c222 100644
--- a/apps/spruce/src/components/TupleSelect/TupleSelect.stories.tsx
+++ b/apps/spruce/src/components/TupleSelect/TupleSelect.stories.tsx
@@ -12,8 +12,8 @@ export const Default: CustomStoryObj<typeof TupleSelect> = {
   render: () => (
     <>
       <TupleSelect
-        options={options}
         onSubmit={action("submit")}
+        options={options}
         validator={(v) => v !== "bad"}
         validatorErrorMessage="Invalid Input"
       />
diff --git a/apps/spruce/src/components/TupleSelect/TupleSelect.test.tsx b/apps/spruce/src/components/TupleSelect/TupleSelect.test.tsx
index 45fc2023f..6286a5587 100644
--- a/apps/spruce/src/components/TupleSelect/TupleSelect.test.tsx
+++ b/apps/spruce/src/components/TupleSelect/TupleSelect.test.tsx
@@ -21,8 +21,8 @@ describe("tupleSelect", () => {
     const validatorErrorMessage = "Invalid Input";
     render(
       <TupleSelect
-        options={options}
         onSubmit={onSubmit}
+        options={options}
         validator={validator}
         validatorErrorMessage={validatorErrorMessage}
       />,
@@ -42,8 +42,8 @@ describe("tupleSelect", () => {
     const validatorErrorMessage = "Invalid Input";
     render(
       <TupleSelect
-        options={options}
         onSubmit={onSubmit}
+        options={options}
         validator={validator}
         validatorErrorMessage={validatorErrorMessage}
       />,
@@ -65,8 +65,8 @@ describe("tupleSelect", () => {
     const validatorErrorMessage = "Invalid Input";
     render(
       <TupleSelect
-        options={options}
         onSubmit={onSubmit}
+        options={options}
         validator={validator}
         validatorErrorMessage={validatorErrorMessage}
       />,
diff --git a/apps/spruce/src/components/TupleSelect/index.tsx b/apps/spruce/src/components/TupleSelect/index.tsx
index 09ab8b519..ea57412dd 100644
--- a/apps/spruce/src/components/TupleSelect/index.tsx
+++ b/apps/spruce/src/components/TupleSelect/index.tsx
@@ -41,33 +41,34 @@ const TupleSelect: React.FC<TupleSelectProps> = ({
       </Label>
       <InputGroup>
         <GroupedSelect
-          value={selected}
-          onChange={(v) => setSelected(v)}
-          data-cy="tuple-select-dropdown"
-          aria-labelledby="Tuple Select"
           allowDeselect={false}
+          aria-labelledby="Tuple Select"
+          data-cy="tuple-select-dropdown"
+          onChange={(v) => setSelected(v)}
+          value={selected}
         >
           {options.map((o) => (
             <Option
               key={o.value}
-              value={o.value}
               data-cy={`tuple-select-option-${o.value}`}
+              value={o.value}
             >
               {o.displayName}
             </Option>
           ))}
         </GroupedSelect>
         <GroupedTextInput
-          id="filter-input"
           aria-label={selectedOption.displayName}
           aria-labelledby={selectedOption.displayName}
+          clearOnSubmit
           data-cy="tuple-select-input"
-          type="text" // Chrome will overlay a clear "x" button on the input if type is not set to 'search'
+          id="filter-input"
+          onSubmit={handleOnSubmit}
           placeholder={selectedOption.placeHolderText}
+          // Chrome will overlay a clear "x" button on the input if type is not set to 'search'
+          type="text"
           validator={validator}
           validatorErrorMessage={validatorErrorMessage}
-          onSubmit={handleOnSubmit}
-          clearOnSubmit
         />
       </InputGroup>
     </Container>
diff --git a/apps/spruce/src/components/TupleSelectWithRegexConditional/TupleSelectWithRegexConditional.stories.tsx b/apps/spruce/src/components/TupleSelectWithRegexConditional/TupleSelectWithRegexConditional.stories.tsx
index 414aed5b8..82eeaa32a 100644
--- a/apps/spruce/src/components/TupleSelectWithRegexConditional/TupleSelectWithRegexConditional.stories.tsx
+++ b/apps/spruce/src/components/TupleSelectWithRegexConditional/TupleSelectWithRegexConditional.stories.tsx
@@ -15,8 +15,8 @@ export const WithConditional: CustomStoryObj<
   render: () => (
     <>
       <TupleSelectWithRegexConditional
-        options={options}
         onSubmit={action("submit")}
+        options={options}
         validator={(v) => v !== "bad"}
         validatorErrorMessage="Invalid Input"
       />
diff --git a/apps/spruce/src/components/TupleSelectWithRegexConditional/TupleSelectWithRegexConditional.test.tsx b/apps/spruce/src/components/TupleSelectWithRegexConditional/TupleSelectWithRegexConditional.test.tsx
index 36fb09968..807a37fa8 100644
--- a/apps/spruce/src/components/TupleSelectWithRegexConditional/TupleSelectWithRegexConditional.test.tsx
+++ b/apps/spruce/src/components/TupleSelectWithRegexConditional/TupleSelectWithRegexConditional.test.tsx
@@ -21,8 +21,8 @@ describe("tupleSelectWithRegexConditional", () => {
     const validatorErrorMessage = "Invalid Input";
     render(
       <TupleSelectWithRegexConditionalStories
-        options={options}
         onSubmit={onSubmit}
+        options={options}
         validator={validator}
         validatorErrorMessage={validatorErrorMessage}
       />,
@@ -41,8 +41,8 @@ describe("tupleSelectWithRegexConditional", () => {
     const validatorErrorMessage = "Invalid Input";
     render(
       <TupleSelectWithRegexConditionalStories
-        options={options}
         onSubmit={onSubmit}
+        options={options}
         validator={validator}
         validatorErrorMessage={validatorErrorMessage}
       />,
@@ -64,8 +64,8 @@ describe("tupleSelectWithRegexConditional", () => {
     const validatorErrorMessage = "Invalid Input";
     render(
       <TupleSelectWithRegexConditionalStories
-        options={options}
         onSubmit={onSubmit}
+        options={options}
         validator={validator}
         validatorErrorMessage={validatorErrorMessage}
       />,
@@ -94,8 +94,8 @@ describe("tupleSelectWithRegexConditional", () => {
     const validatorErrorMessage = "Invalid Input";
     render(
       <TupleSelectWithRegexConditionalStories
-        options={options}
         onSubmit={onSubmit}
+        options={options}
         validator={validator}
         validatorErrorMessage={validatorErrorMessage}
       />,
@@ -121,8 +121,8 @@ describe("tupleSelectWithRegexConditional", () => {
     const validatorErrorMessage = "Invalid Input";
     render(
       <TupleSelectWithRegexConditionalStories
-        options={options}
         onSubmit={onSubmit}
+        options={options}
         validator={validator}
         validatorErrorMessage={validatorErrorMessage}
       />,
diff --git a/apps/spruce/src/components/TupleSelectWithRegexConditional/index.tsx b/apps/spruce/src/components/TupleSelectWithRegexConditional/index.tsx
index ac9453a82..06e1b578e 100644
--- a/apps/spruce/src/components/TupleSelectWithRegexConditional/index.tsx
+++ b/apps/spruce/src/components/TupleSelectWithRegexConditional/index.tsx
@@ -37,27 +37,27 @@ const TupleSelectWithRegexConditional: React.FC<
   return (
     <TupleSelect
       {...rest}
-      onSubmit={handleOnSubmit}
       aria-label="tuple-select-with-regex"
-      validator={isRegex ? validator : () => true}
       label={
         <>
           Add New Filter
           <PaddedSegmentedControl
-            size="xsmall"
+            aria-controls="tuple-select-with-regex"
             onChange={setType}
+            size="xsmall"
             value={type}
-            aria-controls="tuple-select-with-regex"
           >
-            <SegmentedControlOption value="regex" data-cy="tuple-select-regex">
+            <SegmentedControlOption data-cy="tuple-select-regex" value="regex">
               REGEX
             </SegmentedControlOption>
-            <SegmentedControlOption value="exact" data-cy="tuple-select-exact">
+            <SegmentedControlOption data-cy="tuple-select-exact" value="exact">
               EXACT
             </SegmentedControlOption>
           </PaddedSegmentedControl>
         </>
       }
+      onSubmit={handleOnSubmit}
+      validator={isRegex ? validator : () => true}
     />
   );
 };
diff --git a/apps/spruce/src/components/VersionRestartModal/BuildVariantAccordion.tsx b/apps/spruce/src/components/VersionRestartModal/BuildVariantAccordion.tsx
index 9312d5663..260205c0d 100644
--- a/apps/spruce/src/components/VersionRestartModal/BuildVariantAccordion.tsx
+++ b/apps/spruce/src/components/VersionRestartModal/BuildVariantAccordion.tsx
@@ -34,14 +34,14 @@ export const BuildVariantAccordion: React.FC<BuildVariantAccordionProps> = ({
   const variantTitle = (
     <>
       <Checkbox
+        bold
+        checked={matchingTasks === taskLength}
         data-cy="variant-checkbox-select-all"
+        indeterminate={matchingTasks > 0 && matchingTasks !== taskLength}
+        label={displayName}
         onChange={() =>
           toggleSelectedTask({ [versionId]: tasks.map((task) => task.id) })
         }
-        label={displayName}
-        checked={matchingTasks === taskLength}
-        indeterminate={matchingTasks > 0 && matchingTasks !== taskLength}
-        bold
       />
       <BadgeWrapper>
         <Badge data-cy="task-status-badge">
@@ -54,10 +54,10 @@ export const BuildVariantAccordion: React.FC<BuildVariantAccordionProps> = ({
     <Wrapper data-cy="variant-accordion">
       <Accordion title={variantTitle} titleTag={FlexContainer}>
         <TaskStatusCheckboxContainer
-          versionId={versionId}
-          tasks={tasks}
           selectedTasks={selectedTasks}
+          tasks={tasks}
           toggleSelectedTask={toggleSelectedTask}
+          versionId={versionId}
         />
       </Accordion>
     </Wrapper>
diff --git a/apps/spruce/src/components/VersionRestartModal/TaskStatusCheckbox.tsx b/apps/spruce/src/components/VersionRestartModal/TaskStatusCheckbox.tsx
index ea17fe410..ccb270b97 100644
--- a/apps/spruce/src/components/VersionRestartModal/TaskStatusCheckbox.tsx
+++ b/apps/spruce/src/components/VersionRestartModal/TaskStatusCheckbox.tsx
@@ -22,9 +22,9 @@ const CheckboxComponent: React.FC<TaskStatusCheckboxProps> = ({
   taskId,
 }) => (
   <Checkbox
-    onClick={onClick}
+    bold={false}
+    checked={checked}
     data-cy="task-status-checkbox"
-    name={taskId}
     label={
       <StateItemWrapper>
         <TaskStatusIcon status={status} />
@@ -32,8 +32,8 @@ const CheckboxComponent: React.FC<TaskStatusCheckboxProps> = ({
         <div>{displayName}</div>
       </StateItemWrapper>
     }
-    checked={checked}
-    bold={false}
+    name={taskId}
+    onClick={onClick}
   />
 );
 
diff --git a/apps/spruce/src/components/VersionRestartModal/TaskStatusCheckboxContainer.tsx b/apps/spruce/src/components/VersionRestartModal/TaskStatusCheckboxContainer.tsx
index d3099edb3..0fdc74ca4 100644
--- a/apps/spruce/src/components/VersionRestartModal/TaskStatusCheckboxContainer.tsx
+++ b/apps/spruce/src/components/VersionRestartModal/TaskStatusCheckboxContainer.tsx
@@ -22,28 +22,28 @@ export const TaskStatusCheckboxContainer: React.FC<
 
   return (
     <Virtuoso
-      style={{ height: listHeight, width: "100%" }}
-      totalCount={tasks.length}
       data={tasks}
       itemContent={(_idx, task) => {
         const { baseStatus, displayName, id: taskId, status } = task;
         const checked = !!selectedTasks[taskId];
         return (
           <TaskStatusCheckbox
+            key={taskId}
+            baseStatus={baseStatus}
+            checked={checked}
+            displayName={displayName}
             onClick={() => {
               if (selectedTasks[taskId] !== undefined) {
                 toggleSelectedTask({ [versionId]: taskId });
               }
             }}
-            checked={checked}
-            displayName={displayName}
-            key={taskId}
             status={status}
-            baseStatus={baseStatus}
             taskId={taskId}
           />
         );
       }}
+      style={{ height: listHeight, width: "100%" }}
+      totalCount={tasks.length}
     />
   );
 };
diff --git a/apps/spruce/src/components/VersionRestartModal/VersionRestartModal.tsx b/apps/spruce/src/components/VersionRestartModal/VersionRestartModal.tsx
index 1fb41cc00..3897c5ec6 100644
--- a/apps/spruce/src/components/VersionRestartModal/VersionRestartModal.tsx
+++ b/apps/spruce/src/components/VersionRestartModal/VersionRestartModal.tsx
@@ -112,13 +112,13 @@ const VersionRestartModal: React.FC<VersionRestartModalProps> = ({
 
   return (
     <ConfirmationModal
-      title="Modify Version"
-      open={visible}
-      onConfirm={handlePatchRestart}
-      onCancel={onCancel}
       buttonText="Restart"
-      submitDisabled={selectedTotal === 0 || mutationLoading}
       data-cy="version-restart-modal"
+      onCancel={onCancel}
+      onConfirm={handlePatchRestart}
+      open={visible}
+      submitDisabled={selectedTotal === 0 || mutationLoading}
+      title="Modify Version"
     >
       {loading ? (
         <Skeleton active />
@@ -126,7 +126,7 @@ const VersionRestartModal: React.FC<VersionRestartModalProps> = ({
         <>
           <VersionTasks
             // @ts-expect-error: FIXME. This comment was added by an automated script.
-            version={version}
+            baseStatusFilterTerm={baseStatusFilterTerm[version?.id]}
             selectedTasks={selectedTasks}
             // @ts-expect-error: FIXME. This comment was added by an automated script.
             setBaseStatusFilterTerm={setVersionBaseStatus(version?.id)}
@@ -134,15 +134,15 @@ const VersionRestartModal: React.FC<VersionRestartModalProps> = ({
             setVersionStatusFilterTerm={setVersionStatus(version?.id)}
             toggleSelectedTask={toggleSelectedTask}
             // @ts-expect-error: FIXME. This comment was added by an automated script.
-            baseStatusFilterTerm={baseStatusFilterTerm[version?.id]}
+            version={version}
             // @ts-expect-error: FIXME. This comment was added by an automated script.
             versionStatusFilterTerm={versionStatusFilterTerm[version?.id]}
           />
           {childVersions && (
             <div data-cy="select-downstream">
               <ConfirmationMessage
-                weight="medium"
                 data-cy="confirmation-message"
+                weight="medium"
               >
                 Downstream Tasks
               </ConfirmationMessage>
@@ -153,12 +153,12 @@ const VersionRestartModal: React.FC<VersionRestartModalProps> = ({
                 >
                   <TitleContainer>
                     <VersionTasks
-                      version={v}
+                      baseStatusFilterTerm={baseStatusFilterTerm[v.id]}
                       selectedTasks={selectedTasks}
                       setBaseStatusFilterTerm={setVersionBaseStatus(v?.id)}
                       setVersionStatusFilterTerm={setVersionStatus(v?.id)}
                       toggleSelectedTask={toggleSelectedTask}
-                      baseStatusFilterTerm={baseStatusFilterTerm[v.id]}
+                      version={v}
                       versionStatusFilterTerm={versionStatusFilterTerm[v.id]}
                     />
                   </TitleContainer>
@@ -167,16 +167,16 @@ const VersionRestartModal: React.FC<VersionRestartModalProps> = ({
               <br />
             </div>
           )}
-          <ConfirmationMessage weight="medium" data-cy="confirmation-message">
+          <ConfirmationMessage data-cy="confirmation-message" weight="medium">
             Are you sure you want to restart the {selectedTotal} selected tasks?
           </ConfirmationMessage>
           <Checkbox
+            bold={false}
+            checked={shouldAbortInProgressTasks}
+            label="Abort in progress tasks"
             onChange={() =>
               setShouldAbortInProgressTasks(!shouldAbortInProgressTasks)
             }
-            label="Abort in progress tasks"
-            checked={shouldAbortInProgressTasks}
-            bold={false}
           />
         </>
       )}
diff --git a/apps/spruce/src/components/VersionRestartModal/VersionTasks.tsx b/apps/spruce/src/components/VersionRestartModal/VersionTasks.tsx
index 3cc0d6b28..6cec2c0ab 100644
--- a/apps/spruce/src/components/VersionRestartModal/VersionTasks.tsx
+++ b/apps/spruce/src/components/VersionRestartModal/VersionTasks.tsx
@@ -34,22 +34,22 @@ const VersionTasks: React.FC<VersionTasksProps> = ({
       <TaskStatusFilters
         onChangeBaseStatusFilter={setBaseStatusFilterTerm}
         onChangeStatusFilter={setVersionStatusFilterTerm}
-        versionId={versionId}
         selectedBaseStatuses={baseStatusFilterTerm || []}
         selectedStatuses={versionStatusFilterTerm || []}
+        versionId={versionId}
       />
       <ContentWrapper>
         {[...buildVariants]
           .sort((a, b) => a.displayName.localeCompare(b.displayName))
           .map((patchBuildVariant) => (
             <BuildVariantAccordion
-              versionId={versionId}
               key={`accordion_${patchBuildVariant.variant}`}
-              // @ts-expect-error: FIXME. This comment was added by an automated script.
-              tasks={patchBuildVariant.tasks}
               displayName={patchBuildVariant.displayName}
               selectedTasks={tasks}
+              // @ts-expect-error: FIXME. This comment was added by an automated script.
+              tasks={patchBuildVariant.tasks}
               toggleSelectedTask={toggleSelectedTask}
+              versionId={versionId}
             />
           ))}
         <Divider />
diff --git a/apps/spruce/src/components/WelcomeModal/CarouselCard.tsx b/apps/spruce/src/components/WelcomeModal/CarouselCard.tsx
index ec3ac27a4..f79bc8348 100644
--- a/apps/spruce/src/components/WelcomeModal/CarouselCard.tsx
+++ b/apps/spruce/src/components/WelcomeModal/CarouselCard.tsx
@@ -38,18 +38,18 @@ const CarouselCard: React.FC<CarouselCardProps> = ({ card, visible }) => {
       <Body>{description}</Body>
       {img && (
         <ImgContainer
-          src={`/static/img/${img}`}
           alt={alt}
           data-cy="carousel-image"
+          src={`/static/img/${img}`}
         />
       )}
       {video && (
         <VideoContainer
-          loop
-          controls
-          src={`/static/img/${video}`}
           ref={videoRef}
+          controls
           data-cy="carousel-video"
+          loop
+          src={`/static/img/${video}`}
         />
       )}
     </CardContainer>
diff --git a/apps/spruce/src/components/WelcomeModal/CarouselDots.tsx b/apps/spruce/src/components/WelcomeModal/CarouselDots.tsx
index 784eb6f8d..e507eefd5 100644
--- a/apps/spruce/src/components/WelcomeModal/CarouselDots.tsx
+++ b/apps/spruce/src/components/WelcomeModal/CarouselDots.tsx
@@ -20,8 +20,8 @@ const CarouselDots: React.FC<CarouselDotProps> = ({
     {cards.map((card, index) => (
       <Dot
         key={`dot_${card.description}`}
-        data-cy={`carousel-dot-${index}`}
         active={activeSlide === index}
+        data-cy={`carousel-dot-${index}`}
         onClick={() => onClick(index)}
         role="button"
       />
diff --git a/apps/spruce/src/components/WelcomeModal/WelcomeModal.stories.tsx b/apps/spruce/src/components/WelcomeModal/WelcomeModal.stories.tsx
index 080dbb90e..0e3d417b9 100644
--- a/apps/spruce/src/components/WelcomeModal/WelcomeModal.stories.tsx
+++ b/apps/spruce/src/components/WelcomeModal/WelcomeModal.stories.tsx
@@ -18,9 +18,9 @@ export default {
 export const NewSpruceUser: CustomStoryObj<typeof WelcomeModal> = {
   render: () => (
     <WelcomeModal
-      title="Welcome to the New Evergreen UI!"
-      param="hasUsedSpruceBefore"
       carouselCards={newSpruceUser}
+      param="hasUsedSpruceBefore"
+      title="Welcome to the New Evergreen UI!"
     />
   ),
 };
@@ -28,8 +28,8 @@ export const NewSpruceUser: CustomStoryObj<typeof WelcomeModal> = {
 export const NewMainlineCommitsUser: CustomStoryObj<typeof WelcomeModal> = {
   render: () => (
     <WelcomeModal
-      param="hasUsedMainlineCommitsBefore"
       carouselCards={newMainlineCommitsUser}
+      param="hasUsedMainlineCommitsBefore"
     />
   ),
 };
diff --git a/apps/spruce/src/components/WelcomeModal/WelcomeModal.tsx b/apps/spruce/src/components/WelcomeModal/WelcomeModal.tsx
index 6a095dcd8..ec4698205 100644
--- a/apps/spruce/src/components/WelcomeModal/WelcomeModal.tsx
+++ b/apps/spruce/src/components/WelcomeModal/WelcomeModal.tsx
@@ -71,22 +71,22 @@ const WelcomeModal: React.FC<WelcomeModalProps> = ({
     <ClassNames>
       {({ css }) => (
         <Modal
-          setOpen={handleClosed}
-          open={visible}
-          data-cy="welcome-modal"
           className={css`
             z-index: ${zIndex.max_do_not_use};
           `}
+          data-cy="welcome-modal"
+          open={visible}
+          setOpen={handleClosed}
           size="large"
         >
           {title && <CardTitle>{title}</CardTitle>}
           <Carousel
-            dots={false}
             ref={slider}
-            lazyLoad="ondemand"
+            afterChange={(index) => setActiveSlide(index)}
+            dots={false}
             draggable
             infinite={false}
-            afterChange={(index) => setActiveSlide(index)}
+            lazyLoad="ondemand"
           >
             {carouselCards.map((card, index) => (
               <CarouselCard
@@ -112,9 +112,9 @@ const WelcomeModal: React.FC<WelcomeModalProps> = ({
                 </StyledLink>
               )}
               <Button
-                variant={Variant.Primary}
-                onClick={handleClosed}
                 data-cy="close-welcome-modal"
+                onClick={handleClosed}
+                variant={Variant.Primary}
               >
                 Close
               </Button>
diff --git a/apps/spruce/src/components/styles/Link.tsx b/apps/spruce/src/components/styles/Link.tsx
index 814cf4aa5..b70411642 100644
--- a/apps/spruce/src/components/styles/Link.tsx
+++ b/apps/spruce/src/components/styles/Link.tsx
@@ -6,13 +6,13 @@ import { Link } from "react-router-dom";
 // @ts-expect-error: FIXME. This comment was added by an automated script.
 export const StyledLink = (props) => (
   <LGLink
-    hideExternalIcon
     css={css`
       // Override LeafyGreen's font-weight declaration for Link
       font-weight: inherit;
       font-size: inherit;
       line-height: inherit;
     `}
+    hideExternalIcon
     {...props}
   />
 );
diff --git a/apps/spruce/src/hooks/useBreadcrumbRoot/useBreadcrumbRoot.test.tsx b/apps/spruce/src/hooks/useBreadcrumbRoot/useBreadcrumbRoot.test.tsx
index 8df253dca..d4db56218 100644
--- a/apps/spruce/src/hooks/useBreadcrumbRoot/useBreadcrumbRoot.test.tsx
+++ b/apps/spruce/src/hooks/useBreadcrumbRoot/useBreadcrumbRoot.test.tsx
@@ -17,14 +17,14 @@ const cache = new InMemoryCache({
 
 // @ts-expect-error: FIXME. This comment was added by an automated script.
 const SameUserProvider = ({ children }) => (
-  <MockedProvider mocks={[getUserMock, sameUserMock]} cache={cache}>
+  <MockedProvider cache={cache} mocks={[getUserMock, sameUserMock]}>
     {children}
   </MockedProvider>
 );
 
 // @ts-expect-error: FIXME. This comment was added by an automated script.
 const OtherUserProvider = ({ children }) => (
-  <MockedProvider mocks={[getUserMock, otherUserMock]} cache={cache}>
+  <MockedProvider cache={cache} mocks={[getUserMock, otherUserMock]}>
     {children}
   </MockedProvider>
 );
diff --git a/apps/spruce/src/hooks/useUpsertQueryParams/useUpsertQueryParams.test.tsx b/apps/spruce/src/hooks/useUpsertQueryParams/useUpsertQueryParams.test.tsx
index 530d612fa..de67c1345 100644
--- a/apps/spruce/src/hooks/useUpsertQueryParams/useUpsertQueryParams.test.tsx
+++ b/apps/spruce/src/hooks/useUpsertQueryParams/useUpsertQueryParams.test.tsx
@@ -10,20 +10,20 @@ const Content = () => {
     <>
       <input
         data-cy="category"
+        onChange={(e) => setCategory(e.target.value)}
         type="text"
         value={category}
-        onChange={(e) => setCategory(e.target.value)}
       />
       <input
         data-cy="value"
+        onChange={(e) => setValue(e.target.value)}
         type="text"
         value={value}
-        onChange={(e) => setValue(e.target.value)}
       />
       <button
         data-cy="submit"
-        type="button"
         onClick={() => onSubmit({ category, value })}
+        type="button"
       >
         Submit
       </button>
diff --git a/apps/spruce/src/pages/CommitQueue.tsx b/apps/spruce/src/pages/CommitQueue.tsx
index 26d6281c6..3d7b07524 100644
--- a/apps/spruce/src/pages/CommitQueue.tsx
+++ b/apps/spruce/src/pages/CommitQueue.tsx
@@ -45,23 +45,23 @@ export const CommitQueue: React.FC = () => {
       <PageHeader>
         <Column>
           <PageTitle
-            pageTitle={`Commit Queue - ${projectIdentifier}`}
-            title="Commit Queue"
             badge={
               <Badge variant="darkgray">
                 {buildBadgeString(queue ? queue.length : 0)}
               </Badge>
             }
             loading={loading}
+            pageTitle={`Commit Queue - ${projectIdentifier}`}
             size="large"
+            title="Commit Queue"
           />
         </Column>
         <ProjectSelectWrapper>
           <ProjectSelect
-            // @ts-expect-error: FIXME. This comment was added by an automated script.
-            selectedProjectIdentifier={projectIdentifier}
             data-cy="commit-queue-project-select"
             getRoute={getCommitQueueRoute}
+            // @ts-expect-error: FIXME. This comment was added by an automated script.
+            selectedProjectIdentifier={projectIdentifier}
           />
         </ProjectSelectWrapper>
       </PageHeader>
@@ -75,28 +75,28 @@ export const CommitQueue: React.FC = () => {
           <CommitQueueCard
             key={issue}
             // @ts-expect-error: FIXME. This comment was added by an automated script.
-            issue={issue}
-            index={formatZeroIndexForDisplay(i)}
-            // @ts-expect-error: FIXME. This comment was added by an automated script.
-            title={patch?.description}
+            activated={patch?.activated}
             // @ts-expect-error: FIXME. This comment was added by an automated script.
             author={patch?.author}
             // @ts-expect-error: FIXME. This comment was added by an automated script.
-            patchId={patch?.id}
+            commitQueueId={commitQueue.projectId}
             // @ts-expect-error: FIXME. This comment was added by an automated script.
-            versionId={patch?.versionFull?.id}
+            commitTime={enqueueTime}
+            index={formatZeroIndexForDisplay(i)}
             // @ts-expect-error: FIXME. This comment was added by an automated script.
-            repo={commitQueue?.repo}
+            issue={issue}
+            // @ts-expect-error: FIXME. This comment was added by an automated script.
+            moduleCodeChanges={patch?.moduleCodeChanges}
             // @ts-expect-error: FIXME. This comment was added by an automated script.
             owner={commitQueue?.owner}
             // @ts-expect-error: FIXME. This comment was added by an automated script.
-            commitTime={enqueueTime}
+            patchId={patch?.id}
             // @ts-expect-error: FIXME. This comment was added by an automated script.
-            moduleCodeChanges={patch?.moduleCodeChanges}
+            repo={commitQueue?.repo}
             // @ts-expect-error: FIXME. This comment was added by an automated script.
-            commitQueueId={commitQueue.projectId}
+            title={patch?.description}
             // @ts-expect-error: FIXME. This comment was added by an automated script.
-            activated={patch?.activated}
+            versionId={patch?.versionFull?.id}
           />
         ))
       ) : (
diff --git a/apps/spruce/src/pages/Login.tsx b/apps/spruce/src/pages/Login.tsx
index 2727b5198..450bf1d10 100644
--- a/apps/spruce/src/pages/Login.tsx
+++ b/apps/spruce/src/pages/Login.tsx
@@ -47,19 +47,19 @@ export const Login: React.FC = () => {
     <Wrapper>
       <label htmlFor="username">Username</label>
       <input
-        type="text"
-        name="username"
         id="username"
-        value={username}
+        name="username"
         onChange={inputChangeHandler(setUsername)}
+        type="text"
+        value={username}
       />
       <label htmlFor="password">Password</label>
       <input
-        type="password"
-        name="password"
         id="password"
-        value={password}
+        name="password"
         onChange={inputChangeHandler(setPassword)}
+        type="password"
+        value={password}
       />
       <button id="login-submit" onClick={loginHandler} type="submit">
         Login
diff --git a/apps/spruce/src/pages/ProjectPatches.tsx b/apps/spruce/src/pages/ProjectPatches.tsx
index dd09a0fdf..7cde92222 100644
--- a/apps/spruce/src/pages/ProjectPatches.tsx
+++ b/apps/spruce/src/pages/ProjectPatches.tsx
@@ -81,21 +81,21 @@ export const ProjectPatches = () => {
           <>
             <ProjectSelect
               getRoute={getProjectPatchesRoute}
-              // @ts-expect-error: FIXME. This comment was added by an automated script.
-              selectedProjectIdentifier={projectIdentifier}
-              showLabel={false}
               onSubmit={(p) => {
                 analytics.sendEvent({
                   name: "Changed project",
                   "project.identifier": p,
                 });
               }}
+              // @ts-expect-error: FIXME. This comment was added by an automated script.
+              selectedProjectIdentifier={projectIdentifier}
+              showLabel={false}
             />
             <GitHubMergeQueueCheckbox
+              checked={isGitHubMergeQueueCheckboxChecked}
               data-cy="github-merge-queue-checkbox"
-              onChange={gitHubMergeQueueCheckboxOnChange}
               label="Only show GitHub Merge Queue patches"
-              checked={isGitHubMergeQueueCheckboxChecked}
+              onChange={gitHubMergeQueueCheckboxOnChange}
             />
           </>
         }
diff --git a/apps/spruce/src/pages/Task.tsx b/apps/spruce/src/pages/Task.tsx
index fd88e2d7d..de5d3821b 100644
--- a/apps/spruce/src/pages/Task.tsx
+++ b/apps/spruce/src/pages/Task.tsx
@@ -90,10 +90,6 @@ export const Task = () => {
         />
       )}
       <PageTitle
-        pageTitle={`Task${displayName ? ` - ${displayName}` : ""}`}
-        loading={loading}
-        // @ts-expect-error: FIXME. This comment was added by an automated script.
-        title={displayName}
         badge={
           <StyledBadgeWrapper>
             {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
@@ -110,15 +106,19 @@ export const Task = () => {
             task={task}
           />
         }
+        loading={loading}
+        pageTitle={`Task${displayName ? ` - ${displayName}` : ""}`}
+        // @ts-expect-error: FIXME. This comment was added by an automated script.
+        title={displayName}
       />
       <PageLayout hasSider>
         <PageSider>
           {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
           {latestExecution > 0 && (
             <ExecutionSelect
+              currentExecution={selectedExecution}
               // @ts-expect-error: FIXME. This comment was added by an automated script.
               id={taskId}
-              currentExecution={selectedExecution}
               // @ts-expect-error: FIXME. This comment was added by an automated script.
               latestExecution={latestExecution}
               updateExecution={(n: number) => {
@@ -131,16 +131,16 @@ export const Task = () => {
           )}
           <Metadata
             // @ts-expect-error: FIXME. This comment was added by an automated script.
-            taskId={taskId}
-            task={task}
+            error={error}
             loading={loading}
+            task={task}
             // @ts-expect-error: FIXME. This comment was added by an automated script.
-            error={error}
+            taskId={taskId}
           />
         </PageSider>
         <LogWrapper>
           <PageContent>
-            {task && <TaskTabs task={task} isDisplayTask={isDisplayTask} />}
+            {task && <TaskTabs isDisplayTask={isDisplayTask} task={task} />}
           </PageContent>
         </LogWrapper>
       </PageLayout>
diff --git a/apps/spruce/src/pages/UserPatches.tsx b/apps/spruce/src/pages/UserPatches.tsx
index 3dbb0134b..2a3bdf93e 100644
--- a/apps/spruce/src/pages/UserPatches.tsx
+++ b/apps/spruce/src/pages/UserPatches.tsx
@@ -46,8 +46,8 @@ export const UserPatches = () => {
   return (
     <PatchesPage
       filterComp={<RequesterSelector />}
-      pageTitle={pageTitle || "User Patches"}
       loading={loading && !data?.user.patches}
+      pageTitle={pageTitle || "User Patches"}
       pageType="user"
       patches={data?.user.patches}
     />
diff --git a/apps/spruce/src/pages/Version.tsx b/apps/spruce/src/pages/Version.tsx
index 76db47951..c27ea3948 100644
--- a/apps/spruce/src/pages/Version.tsx
+++ b/apps/spruce/src/pages/Version.tsx
@@ -216,7 +216,7 @@ export const VersionPage: React.FC = () => {
       >
         {isPatch && (
           // @ts-expect-error: FIXME. This comment was added by an automated script.
-          <NameChangeModal patchId={versionId} originalPatchName={message} />
+          <NameChangeModal originalPatchName={message} patchId={versionId} />
         )}
       </PageTitle>
       <PageLayout hasSider>
diff --git a/apps/spruce/src/pages/commitqueue/CommitQueueCard.test.tsx b/apps/spruce/src/pages/commitqueue/CommitQueueCard.test.tsx
index 673bef1c5..93a9b54d1 100644
--- a/apps/spruce/src/pages/commitqueue/CommitQueueCard.test.tsx
+++ b/apps/spruce/src/pages/commitqueue/CommitQueueCard.test.tsx
@@ -170,11 +170,11 @@ describe("commit queue entry title", () => {
           {...baseProps}
           activated
           issue="1000"
+          // @ts-expect-error: FIXME. This comment was added by an automated script.
+          patchId={undefined}
           title={titleWithoutPullRequestURL}
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           versionId={undefined}
-          // @ts-expect-error: FIXME. This comment was added by an automated script.
-          patchId={undefined}
         />,
       );
       render(
diff --git a/apps/spruce/src/pages/commitqueue/CommitQueueCard.tsx b/apps/spruce/src/pages/commitqueue/CommitQueueCard.tsx
index c27b9330b..cdeb65ee8 100644
--- a/apps/spruce/src/pages/commitqueue/CommitQueueCard.tsx
+++ b/apps/spruce/src/pages/commitqueue/CommitQueueCard.tsx
@@ -161,9 +161,9 @@ export const CommitQueueCard: React.FC<Props> = ({
         )}
         <CommitQueueCardActions>
           <ConfirmPatchButton
+            commitTitle={title}
             disabled={loading}
             onConfirm={handleEnroll}
-            commitTitle={title}
           />
         </CommitQueueCardActions>
       </CommitQueueCardGrid>
diff --git a/apps/spruce/src/pages/commitqueue/ConfirmPatchButton.tsx b/apps/spruce/src/pages/commitqueue/ConfirmPatchButton.tsx
index 0410a8b33..f77d7e567 100644
--- a/apps/spruce/src/pages/commitqueue/ConfirmPatchButton.tsx
+++ b/apps/spruce/src/pages/commitqueue/ConfirmPatchButton.tsx
@@ -25,15 +25,15 @@ export const ConfirmPatchButton: React.FC<ConfirmPatchButtonProps> = ({
         Remove Patch From Queue
       </StyledButton>
       <ConfirmationModal
+        buttonText="Remove"
         data-cy="commit-queue-confirmation-modal"
-        open={open}
+        onCancel={() => setOpen(false)}
         onConfirm={() => {
           onConfirm();
           setOpen(false);
         }}
-        onCancel={() => setOpen(false)}
+        open={open}
         title="Are you sure you want to remove this patch from the commit queue?"
-        buttonText="Remove"
         variant={Variant.Danger}
       >
         {commitTitle}
diff --git a/apps/spruce/src/pages/commits/ActiveCommits/BuildVariantCard/BuildVariantCard.test.tsx b/apps/spruce/src/pages/commits/ActiveCommits/BuildVariantCard/BuildVariantCard.test.tsx
index 2fa953e30..9ca9dddf7 100644
--- a/apps/spruce/src/pages/commits/ActiveCommits/BuildVariantCard/BuildVariantCard.test.tsx
+++ b/apps/spruce/src/pages/commits/ActiveCommits/BuildVariantCard/BuildVariantCard.test.tsx
@@ -36,13 +36,13 @@ describe("buildVariantCard", () => {
     render(
       <MockedProvider>
         <BuildVariantCard
-          variant="ubuntu-2204"
-          height={100}
           buildVariantDisplayName="Ubuntu 22.04"
-          projectIdentifier="testing"
-          versionId="abc"
+          height={100}
           order={1}
+          projectIdentifier="testing"
           tasks={tasks}
+          variant="ubuntu-2204"
+          versionId="abc"
         />
       </MockedProvider>,
     );
diff --git a/apps/spruce/src/pages/commits/ActiveCommits/BuildVariantCard/VariantGroupedTaskStatusBadges/index.tsx b/apps/spruce/src/pages/commits/ActiveCommits/BuildVariantCard/VariantGroupedTaskStatusBadges/index.tsx
index f2d3a2bc0..dec0924cf 100644
--- a/apps/spruce/src/pages/commits/ActiveCommits/BuildVariantCard/VariantGroupedTaskStatusBadges/index.tsx
+++ b/apps/spruce/src/pages/commits/ActiveCommits/BuildVariantCard/VariantGroupedTaskStatusBadges/index.tsx
@@ -35,13 +35,13 @@ const VariantGroupedTaskStatusBadges: React.FC<Props> = ({
           <GroupedTaskStatusBadge
             key={`${versionId}_${variant}_${umbrellaStatus}`}
             count={count}
-            onClick={onClick(Object.keys(groupedStatusCounts))}
             href={getVersionRoute(versionId, {
               variant: applyStrictRegex(variant),
               statuses: mapUmbrellaStatusToQueryParam[umbrellaStatus],
             })}
-            statusCounts={groupedStatusCounts}
+            onClick={onClick(Object.keys(groupedStatusCounts))}
             status={umbrellaStatus}
+            statusCounts={groupedStatusCounts}
           />
         ),
       )}
diff --git a/apps/spruce/src/pages/commits/ActiveCommits/BuildVariantCard/WaterfallTaskStatusIcon/WaterfallTaskStatusIcon.test.tsx b/apps/spruce/src/pages/commits/ActiveCommits/BuildVariantCard/WaterfallTaskStatusIcon/WaterfallTaskStatusIcon.test.tsx
index 7d8999593..53cd474f4 100644
--- a/apps/spruce/src/pages/commits/ActiveCommits/BuildVariantCard/WaterfallTaskStatusIcon/WaterfallTaskStatusIcon.test.tsx
+++ b/apps/spruce/src/pages/commits/ActiveCommits/BuildVariantCard/WaterfallTaskStatusIcon/WaterfallTaskStatusIcon.test.tsx
@@ -36,8 +36,8 @@ const Content = ({
   <MockedProvider mocks={[getTooltipQueryMock]}>
     <WaterfallTaskStatusIcon
       {...props}
-      status={status}
       hasCedarResults={hasCedarResults}
+      status={status}
     />
   </MockedProvider>
 );
@@ -48,7 +48,7 @@ describe("waterfallTaskStatusIcon", () => {
 
   it("tooltip should contain task name, duration, list of failing test names and additonal test count", async () => {
     const user = userEvent.setup();
-    render(<Content status="failed" hasCedarResults />);
+    render(<Content hasCedarResults status="failed" />);
     // @ts-expect-error: FIXME. This comment was added by an automated script.
     await user.hover(screen.queryByDataCy("waterfall-task-status-icon"));
     await waitFor(() => {
@@ -72,7 +72,7 @@ describe("waterfallTaskStatusIcon", () => {
   });
 
   it("icon should link to task page", async () => {
-    render(<Content status="failed" hasCedarResults />);
+    render(<Content hasCedarResults status="failed" />);
     await waitFor(() => {
       expect(
         screen.getByDataCy("waterfall-task-status-icon"),
@@ -94,7 +94,7 @@ describe("waterfallTaskStatusIcon", () => {
     );
     vi.mocked(removeGlobalHighlightStyle).mockImplementationOnce(() => {});
 
-    render(<Content status="failed" hasCedarResults />);
+    render(<Content hasCedarResults status="failed" />);
     // @ts-expect-error: FIXME. This comment was added by an automated script.
     await user.hover(screen.queryByDataCy("waterfall-task-status-icon"));
     await waitFor(() => {
diff --git a/apps/spruce/src/pages/commits/ActiveCommits/BuildVariantCard/WaterfallTaskStatusIcon/index.tsx b/apps/spruce/src/pages/commits/ActiveCommits/BuildVariantCard/WaterfallTaskStatusIcon/index.tsx
index a6e2fd1f9..d521e1b38 100644
--- a/apps/spruce/src/pages/commits/ActiveCommits/BuildVariantCard/WaterfallTaskStatusIcon/index.tsx
+++ b/apps/spruce/src/pages/commits/ActiveCommits/BuildVariantCard/WaterfallTaskStatusIcon/index.tsx
@@ -85,23 +85,23 @@ export const WaterfallTaskStatusIcon: React.FC<
   return (
     <Tooltip
       align="top"
+      enabled={enabled}
       justify="middle"
       popoverZIndex={zIndex.tooltip}
-      enabled={enabled}
       trigger={
         <Link
-          onMouseEnter={() => setEnabled(true)}
-          onMouseLeave={() => setEnabled(false)}
           key={`task_${taskId}`}
           aria-label={`${status} icon`}
-          to={getTaskRoute(taskId)}
+          data-cy="waterfall-task-status-icon"
           onClick={() => {
             sendEvent({ name: "Clicked task status icon", status });
           }}
-          data-cy="waterfall-task-status-icon"
+          onMouseEnter={() => setEnabled(true)}
+          onMouseLeave={() => setEnabled(false)}
+          to={getTaskRoute(taskId)}
         >
           <TaskStatusWrapper data-task-icon={identifier}>
-            <TaskStatusIcon status={status} size={16} />
+            <TaskStatusIcon size={16} status={status} />
           </TaskStatusWrapper>
         </Link>
       }
diff --git a/apps/spruce/src/pages/commits/ActiveCommits/BuildVariantCard/index.tsx b/apps/spruce/src/pages/commits/ActiveCommits/BuildVariantCard/index.tsx
index c263ccf23..4c71fd2c0 100644
--- a/apps/spruce/src/pages/commits/ActiveCommits/BuildVariantCard/index.tsx
+++ b/apps/spruce/src/pages/commits/ActiveCommits/BuildVariantCard/index.tsx
@@ -48,15 +48,15 @@ export const BuildVariantCard: React.FC<Props> = ({
     <>
       {groupedVariantStats && (
         <VariantGroupedTaskStatusBadges
-          statusCounts={groupedVariantStats.statusCounts}
-          versionId={versionId}
-          variant={variant}
           onClick={(statuses) => () => {
             sendEvent({
               name: "Clicked grouped task status badge",
               statuses,
             });
           }}
+          statusCounts={groupedVariantStats.statusCounts}
+          variant={variant}
+          versionId={versionId}
         />
       )}
       {tasks && <RenderTaskIcons tasks={tasks} variant={variant} />}
@@ -66,14 +66,14 @@ export const BuildVariantCard: React.FC<Props> = ({
     <Container>
       <Label
         data-cy="variant-header"
-        to={getVariantHistoryRoute(projectIdentifier, variant, {
-          selectedCommit: order,
-        })}
         onClick={() => {
           sendEvent({
             name: "Clicked variant label",
           });
         }}
+        to={getVariantHistoryRoute(projectIdentifier, variant, {
+          selectedCommit: order,
+        })}
       >
         {buildVariantDisplayName}
       </Label>
@@ -99,12 +99,12 @@ const RenderTaskIcons: React.FC<RenderTaskIconsProps> = ({ tasks, variant }) =>
       {tasks.map(({ displayName, hasCedarResults, id, status, timeTaken }) => (
         <WaterfallTaskStatusIcon
           key={id}
-          taskId={id}
-          status={status}
           displayName={displayName}
-          timeTaken={timeTaken}
-          identifier={`${variant}-${displayName}`}
           hasCedarResults={hasCedarResults}
+          identifier={`${variant}-${displayName}`}
+          status={status}
+          taskId={id}
+          timeTaken={timeTaken}
         />
       ))}
     </IconContainer>
diff --git a/apps/spruce/src/pages/commits/ActiveCommits/CommitBarChart/CommitBarChart.stories.tsx b/apps/spruce/src/pages/commits/ActiveCommits/CommitBarChart/CommitBarChart.stories.tsx
index 9c649ddeb..b1a9cdea9 100644
--- a/apps/spruce/src/pages/commits/ActiveCommits/CommitBarChart/CommitBarChart.stories.tsx
+++ b/apps/spruce/src/pages/commits/ActiveCommits/CommitBarChart/CommitBarChart.stories.tsx
@@ -19,11 +19,11 @@ export const Default: StoryObj<typeof CommitBarChart> = {
       {versions.map((item) => (
         <CommitBarChart
           key={item.version.id}
-          groupedTaskStats={groupedTaskData[item.version.id].stats}
-          total={groupedTaskData[item.version.id].total}
-          max={max}
           chartType={chartType}
           eta={item.version?.taskStatusStats?.eta}
+          groupedTaskStats={groupedTaskData[item.version.id].stats}
+          max={max}
+          total={groupedTaskData[item.version.id].total}
         />
       ))}
     </FlexRowContainer>
diff --git a/apps/spruce/src/pages/commits/ActiveCommits/CommitBarChart/CommitBarChart.test.tsx b/apps/spruce/src/pages/commits/ActiveCommits/CommitBarChart/CommitBarChart.test.tsx
index d714a994b..3a17dadf3 100644
--- a/apps/spruce/src/pages/commits/ActiveCommits/CommitBarChart/CommitBarChart.test.tsx
+++ b/apps/spruce/src/pages/commits/ActiveCommits/CommitBarChart/CommitBarChart.test.tsx
@@ -16,10 +16,10 @@ describe("commitChart", () => {
     render(
       <CommitBarChart
         key={versions[0].version.id}
+        chartType={ChartTypes.Absolute}
         groupedTaskStats={groupedTaskData[versions[0].version.id].stats}
-        total={groupedTaskData[versions[0].version.id].total}
         max={max}
-        chartType={ChartTypes.Absolute}
+        total={groupedTaskData[versions[0].version.id].total}
       />,
     );
     expect(screen.queryAllByDataCy("commit-chart-bar")).toHaveLength(4);
@@ -30,10 +30,10 @@ describe("commitChart", () => {
     render(
       <CommitBarChart
         key={versions[0].version.id}
+        chartType={ChartTypes.Absolute}
         groupedTaskStats={groupedTaskData[versions[0].version.id].stats}
-        total={groupedTaskData[versions[0].version.id].total}
         max={max}
-        chartType={ChartTypes.Absolute}
+        total={groupedTaskData[versions[0].version.id].total}
       />,
     );
 
@@ -50,10 +50,10 @@ describe("commitChart", () => {
     render(
       <CommitBarChart
         key={versions[0].version.id}
+        chartType={ChartTypes.Absolute}
         groupedTaskStats={groupedTaskData[versions[0].version.id].stats}
-        total={groupedTaskData[versions[0].version.id].total}
         max={max}
-        chartType={ChartTypes.Absolute}
+        total={groupedTaskData[versions[0].version.id].total}
       />,
     );
 
diff --git a/apps/spruce/src/pages/commits/ActiveCommits/CommitBarChart/CommitChartTooltip.tsx b/apps/spruce/src/pages/commits/ActiveCommits/CommitBarChart/CommitChartTooltip.tsx
index 4be8af044..c0b56e589 100644
--- a/apps/spruce/src/pages/commits/ActiveCommits/CommitBarChart/CommitChartTooltip.tsx
+++ b/apps/spruce/src/pages/commits/ActiveCommits/CommitBarChart/CommitChartTooltip.tsx
@@ -26,27 +26,27 @@ export const CommitChartTooltip: React.FC<Props> = ({
   const zeroCountStatus = getStatusesWithZeroCount(groupedTaskStats);
   return (
     <Tooltip
-      usePortal={false}
       align="right"
       justify="middle"
       popoverZIndex={zIndex.popover}
       trigger={trigger}
       triggerEvent="hover"
+      usePortal={false}
     >
-      <TooltipContainer data-cy="commit-chart-tooltip" css={sharedCss}>
+      <TooltipContainer css={sharedCss} data-cy="commit-chart-tooltip">
         {groupedTaskStats.map(({ color, count, statuses, umbrellaStatus }) => (
           <FlexColumnContainer key={color} data-cy="current-status-count">
             <TotalCount
-              status={umbrellaStatus}
+              active
+              color={color}
+              count={count}
               // @ts-expect-error: FIXME. This comment was added by an automated script.
               eta={
                 umbrellaStatus === TaskStatus.RunningUmbrella && eta
                   ? eta
                   : null
               }
-              color={color}
-              count={count}
-              active
+              status={umbrellaStatus}
             />
             {umbrellaStatus === TaskStatus.Failed && (
               <SubStatusText css={sharedCss}>{`(${statuses.join(
@@ -58,11 +58,11 @@ export const CommitChartTooltip: React.FC<Props> = ({
         {zeroCountStatus.map((umbrellaStatus) => (
           <TotalCount
             key={umbrellaStatus}
-            status={umbrellaStatus}
+            active={false}
             // @ts-expect-error: FIXME. This comment was added by an automated script.
             color={mapTaskToBarchartColor[umbrellaStatus]}
             count={0}
-            active={false}
+            status={umbrellaStatus}
           />
         ))}
       </TooltipContainer>
diff --git a/apps/spruce/src/pages/commits/ActiveCommits/CommitBarChart/index.tsx b/apps/spruce/src/pages/commits/ActiveCommits/CommitBarChart/index.tsx
index 4ac73b752..655a679e6 100644
--- a/apps/spruce/src/pages/commits/ActiveCommits/CommitBarChart/index.tsx
+++ b/apps/spruce/src/pages/commits/ActiveCommits/CommitBarChart/index.tsx
@@ -21,16 +21,16 @@ export const CommitBarChart: React.FC<Props> = ({
   total,
 }) => (
   <CommitChartTooltip
-    groupedTaskStats={groupedTaskStats}
     eta={eta}
+    groupedTaskStats={groupedTaskStats}
     trigger={
       <ChartContainer data-cy="commit-chart-container" data-type={chartType}>
         {groupedTaskStats.map(({ color, count }) => (
           <Bar
-            data-cy="commit-chart-bar"
             key={color}
-            height={calculateBarHeight(count, max, total, chartType)}
             color={color}
+            data-cy="commit-chart-bar"
+            height={calculateBarHeight(count, max, total, chartType)}
           />
         ))}
       </ChartContainer>
diff --git a/apps/spruce/src/pages/commits/ActiveCommits/index.tsx b/apps/spruce/src/pages/commits/ActiveCommits/index.tsx
index 2fad50eb7..04d985436 100644
--- a/apps/spruce/src/pages/commits/ActiveCommits/index.tsx
+++ b/apps/spruce/src/pages/commits/ActiveCommits/index.tsx
@@ -20,11 +20,10 @@ export const ActiveCommitLabel: React.FC<ActiveCommitLabelProps> = ({
   });
   return (
     <CommitChartLabel
-      versionId={version.id}
+      author={version.author}
+      createTime={version.createTime}
       githash={shortenGithash(version.revision)}
       gitTags={version.gitTags}
-      createTime={version.createTime}
-      author={version.author}
       message={version.message}
       onClickGithash={() => {
         sendEvent({
@@ -48,6 +47,7 @@ export const ActiveCommitLabel: React.FC<ActiveCommitLabelProps> = ({
         });
       }}
       upstreamProject={version.upstreamProject}
+      versionId={version.id}
     />
   );
 };
@@ -89,16 +89,16 @@ export const BuildVariantContainer: React.FC<BuildVariantContainerProps> = ({
       return (
         <BuildVariantCard
           key={`${id}_${variant}`}
-          height={height}
-          variant={variant}
           buildVariantDisplayName={displayName}
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           groupedVariantStats={variantStats}
-          versionId={id}
+          height={height}
+          order={order}
           projectIdentifier={projectIdentifier}
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           tasks={buildVariant?.tasks}
-          order={order}
+          variant={variant}
+          versionId={id}
         />
       );
     });
diff --git a/apps/spruce/src/pages/commits/CommitChart/ChartToggle.tsx b/apps/spruce/src/pages/commits/CommitChart/ChartToggle.tsx
index d6d721b5a..47ea8b948 100644
--- a/apps/spruce/src/pages/commits/CommitChart/ChartToggle.tsx
+++ b/apps/spruce/src/pages/commits/CommitChart/ChartToggle.tsx
@@ -30,15 +30,15 @@ export const ChartToggle: React.FC<{
   };
   return (
     <StyledAccordion
-      title="View options"
       defaultOpen={defaultOpenAccordion}
       onToggle={onToggleAccordion}
+      title="View options"
     >
       <ToggleWrapper>
         <StyledRadioGroup
+          name="chart-select"
           onChange={onChange}
           value={currentChartType}
-          name="chart-select"
         >
           <Radio
             data-cy="cy-chart-absolute-radio"
diff --git a/apps/spruce/src/pages/commits/CommitChart/index.tsx b/apps/spruce/src/pages/commits/CommitChart/index.tsx
index b2aee8ee5..38f115849 100644
--- a/apps/spruce/src/pages/commits/CommitChart/index.tsx
+++ b/apps/spruce/src/pages/commits/CommitChart/index.tsx
@@ -73,10 +73,10 @@ export const CommitChart: React.FC<Props> = ({ hasTaskFilter, versions }) => {
   ) : (
     <>
       <Accordion
-        title="Project Health"
-        useIndent={false}
         defaultOpen={chartOpen}
         onToggle={() => onChangeChartOpen(!chartOpen)}
+        title="Project Health"
+        useIndent={false}
       >
         <ChartWrapper>
           <FlexRowContainer>
@@ -87,14 +87,14 @@ export const CommitChart: React.FC<Props> = ({ hasTaskFilter, versions }) => {
                 width={getCommitWidth(commit)}
               >
                 <RenderCommitsChart
+                  chartType={chartType}
+                  commit={commit}
+                  // @ts-expect-error: FIXME. This comment was added by an automated script.
+                  groupedResult={versionToGroupedTaskStatsMap}
                   // @ts-expect-error: FIXME. This comment was added by an automated script.
                   hasTaskFilter={hasTaskFilter}
-                  commit={commit}
-                  chartType={chartType}
                   // @ts-expect-error: FIXME. This comment was added by an automated script.
                   max={max}
-                  // @ts-expect-error: FIXME. This comment was added by an automated script.
-                  groupedResult={versionToGroupedTaskStatsMap}
                 />
               </CommitWrapper>
             ))}
@@ -105,8 +105,8 @@ export const CommitChart: React.FC<Props> = ({ hasTaskFilter, versions }) => {
           <AbsoluteContainer>
             <ChartToggle
               currentChartType={chartType}
-              onChangeChartType={onChangeChartType}
               defaultOpenAccordion={defaultOpenAccordion}
+              onChangeChartType={onChangeChartType}
               onToggleAccordion={onToggleAccordion}
             />
           </AbsoluteContainer>
diff --git a/apps/spruce/src/pages/commits/CommitTypeSelector/index.tsx b/apps/spruce/src/pages/commits/CommitTypeSelector/index.tsx
index d23ff8e00..c6b31aec5 100644
--- a/apps/spruce/src/pages/commits/CommitTypeSelector/index.tsx
+++ b/apps/spruce/src/pages/commits/CommitTypeSelector/index.tsx
@@ -53,16 +53,16 @@ const CommitTypeSelector = () => {
     <Container>
       <Label htmlFor="requester-select">Requesters</Label>
       <Dropdown
-        data-cy="requester-select"
         buttonText={`Requesters: ${
           requesters.length ? requesters.join(", ") : noFilterMessage
         }`}
+        data-cy="requester-select"
       >
         <TreeSelect
+          hasStyling={false}
           onChange={onChange}
-          tData={TreeData}
           state={requesters}
-          hasStyling={false}
+          tData={TreeData}
         />
       </Dropdown>
     </Container>
diff --git a/apps/spruce/src/pages/commits/CommitsWrapper.tsx b/apps/spruce/src/pages/commits/CommitsWrapper.tsx
index fa9a15345..c84d8e925 100644
--- a/apps/spruce/src/pages/commits/CommitsWrapper.tsx
+++ b/apps/spruce/src/pages/commits/CommitsWrapper.tsx
@@ -39,7 +39,7 @@ export const CommitsWrapper: React.FC<CommitsWrapperProps> = ({
   }, [versions]);
 
   if (isLoading) {
-    return <StyledSkeleton active title={false} paragraph={{ rows: 6 }} />;
+    return <StyledSkeleton active paragraph={{ rows: 6 }} title={false} />;
   }
   if (!versions) {
     return <CommitChart />;
@@ -47,18 +47,18 @@ export const CommitsWrapper: React.FC<CommitsWrapperProps> = ({
   if (versions) {
     return (
       <ChartContainer>
-        <CommitChart versions={versions} hasTaskFilter={hasTaskFilter} />
+        <CommitChart hasTaskFilter={hasTaskFilter} versions={versions} />
         <StickyContainer>
           <FlexRowContainer>
             {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
             {versions.map((commit) => (
               <CommitWrapper
                 key={getCommitKey(commit)}
-                width={getCommitWidth(commit)}
-                // @ts-expect-error: FIXME. This comment was added by an automated script.
-                selected={isCommitSelected(commit, revision)}
                 // @ts-expect-error: FIXME. This comment was added by an automated script.
                 data-selected={isCommitSelected(commit, revision)}
+                // @ts-expect-error: FIXME. This comment was added by an automated script.
+                selected={isCommitSelected(commit, revision)}
+                width={getCommitWidth(commit)}
               >
                 <RenderCommitsLabel commit={commit} hasFilters={hasFilters} />
               </CommitWrapper>
@@ -70,14 +70,14 @@ export const CommitsWrapper: React.FC<CommitsWrapperProps> = ({
           {versions.map((commit) => (
             <CommitWrapper
               key={getCommitKey(commit)}
-              width={getCommitWidth(commit)}
               // @ts-expect-error: FIXME. This comment was added by an automated script.
               selected={isCommitSelected(commit, revision)}
+              width={getCommitWidth(commit)}
             >
               <RenderCommitsBuildVariants
-                commit={commit}
                 // @ts-expect-error: FIXME. This comment was added by an automated script.
                 buildVariantDict={buildVariantDict}
+                commit={commit}
               />
             </CommitWrapper>
           ))}
diff --git a/apps/spruce/src/pages/commits/InactiveCommits/InactiveCommits.test.tsx b/apps/spruce/src/pages/commits/InactiveCommits/InactiveCommits.test.tsx
index b3d040752..a4b003ce9 100644
--- a/apps/spruce/src/pages/commits/InactiveCommits/InactiveCommits.test.tsx
+++ b/apps/spruce/src/pages/commits/InactiveCommits/InactiveCommits.test.tsx
@@ -105,7 +105,7 @@ describe("inactiveCommitButton", () => {
   });
 
   it("should show unmatching label when there are filters applied", () => {
-    render(<RenderInactiveCommitButton versions={versions} hasFilters />);
+    render(<RenderInactiveCommitButton hasFilters versions={versions} />);
     expect(screen.queryByDataCy("inactive-commits-button")).toHaveTextContent(
       "6Unmatching",
     );
diff --git a/apps/spruce/src/pages/commits/InactiveCommits/index.tsx b/apps/spruce/src/pages/commits/InactiveCommits/index.tsx
index 5c625eefd..e1452ab42 100644
--- a/apps/spruce/src/pages/commits/InactiveCommits/index.tsx
+++ b/apps/spruce/src/pages/commits/InactiveCommits/index.tsx
@@ -47,7 +47,7 @@ export const InactiveCommitButton: React.FC<InactiveCommitsProps> = ({
       ...rolledUpVersions
         .slice(0, 1)
         // @ts-expect-error: FIXME. This comment was added by an automated script.
-        .map((v) => <CommitCopy v={v} isTooltip key={v.id} />),
+        .map((v) => <CommitCopy key={v.id} isTooltip v={v} />),
       <HiddenCommitsWrapper
         key="hidden_commits"
         data-cy="hidden-commits"
@@ -64,12 +64,12 @@ export const InactiveCommitButton: React.FC<InactiveCommitsProps> = ({
       ...rolledUpVersions
         .slice(-2)
         // @ts-expect-error: FIXME. This comment was added by an automated script.
-        .map((v) => <CommitCopy v={v} isTooltip key={v.id} />),
+        .map((v) => <CommitCopy key={v.id} isTooltip v={v} />),
     ];
   } else {
     // @ts-expect-error: FIXME. This comment was added by an automated script.
     returnedCommits = rolledUpVersions.map((v) => (
-      <CommitCopy v={v} isTooltip key={v.id} />
+      <CommitCopy key={v.id} isTooltip v={v} />
     ));
   }
 
@@ -83,13 +83,14 @@ export const InactiveCommitButton: React.FC<InactiveCommitsProps> = ({
       >
         {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
         {rolledUpVersions?.map((v) => (
-          <CommitCopy v={v} isTooltip={false} key={v.id} />
+          <CommitCopy key={v.id} isTooltip={false} v={v} />
         ))}
       </DisplayModal>
       <StyledTooltip
-        usePortal={false}
         align="bottom"
+        data-cy="inactive-commits-tooltip"
         justify="middle"
+        popoverZIndex={zIndex.tooltip}
         trigger={
           <ButtonContainer
             onClick={() => {
@@ -106,8 +107,7 @@ export const InactiveCommitButton: React.FC<InactiveCommitsProps> = ({
           </ButtonContainer>
         }
         triggerEvent="click"
-        popoverZIndex={zIndex.tooltip}
-        data-cy="inactive-commits-tooltip"
+        usePortal={false}
       >
         <TooltipTitleText>
           {versionCount} {tooltipType}
diff --git a/apps/spruce/src/pages/commits/PaginationButtons.tsx b/apps/spruce/src/pages/commits/PaginationButtons.tsx
index c1d688003..d596669a8 100644
--- a/apps/spruce/src/pages/commits/PaginationButtons.tsx
+++ b/apps/spruce/src/pages/commits/PaginationButtons.tsx
@@ -39,20 +39,20 @@ export const PaginationButtons: React.FC<PaginationButtonsProps> = ({
   return (
     <Container>
       <StyledButton
+        data-cy="prev-page-button"
         disabled={
           prevPageOrderNumber === null || prevPageOrderNumber === undefined
         }
-        onClick={onPrevClick}
         leftGlyph={<Icon glyph="ChevronLeft" />}
-        data-cy="prev-page-button"
+        onClick={onPrevClick}
       />
       <StyledButton
+        data-cy="next-page-button"
         disabled={
           nextPageOrderNumber === null || nextPageOrderNumber === undefined
         }
-        onClick={onNextClick}
         leftGlyph={<Icon glyph="ChevronRight" />}
-        data-cy="next-page-button"
+        onClick={onNextClick}
       />
     </Container>
   );
diff --git a/apps/spruce/src/pages/commits/ProjectHealth.stories.tsx b/apps/spruce/src/pages/commits/ProjectHealth.stories.tsx
index 31d025eeb..0665f3d5d 100644
--- a/apps/spruce/src/pages/commits/ProjectHealth.stories.tsx
+++ b/apps/spruce/src/pages/commits/ProjectHealth.stories.tsx
@@ -64,10 +64,10 @@ const RenderCommitsWrapper = ({
   return (
     <div style={{ height: "500px" }}>
       <CommitsWrapper
-        versions={updatedVersions}
-        isLoading={isLoading}
-        hasTaskFilter={hasTaskFilter}
         hasFilters={hasFilters}
+        hasTaskFilter={hasTaskFilter}
+        isLoading={isLoading}
+        versions={updatedVersions}
       />
     </div>
   );
diff --git a/apps/spruce/src/pages/commits/RenderCommit.tsx b/apps/spruce/src/pages/commits/RenderCommit.tsx
index ebc217c1e..c6a6620c1 100644
--- a/apps/spruce/src/pages/commits/RenderCommit.tsx
+++ b/apps/spruce/src/pages/commits/RenderCommit.tsx
@@ -27,10 +27,10 @@ const RenderCommitsChart: React.FC<RenderCommitsChartProps> = ({
     return (
       <CommitBarChart
         chartType={chartType}
-        total={groupedResult[version.id].total}
-        groupedTaskStats={groupedResult[version.id].stats}
         eta={version.taskStatusStats?.eta}
+        groupedTaskStats={groupedResult[version.id].stats}
         max={max}
+        total={groupedResult[version.id].total}
       />
     );
   }
@@ -56,8 +56,8 @@ const RenderCommitsLabel: React.FC<RenderCommitsLabelProps> = ({
   if (rolledUpVersions) {
     return (
       <InactiveCommitButton
-        rolledUpVersions={rolledUpVersions}
         hasFilters={hasFilters}
+        rolledUpVersions={rolledUpVersions}
       />
     );
   }
@@ -76,8 +76,8 @@ export const RenderCommitsBuildVariants: React.FC<
   if (version) {
     return (
       <BuildVariantContainer
-        version={version}
         buildVariantDict={buildVariantDict}
+        version={version}
       />
     );
   }
diff --git a/apps/spruce/src/pages/commits/StatusSelect.tsx b/apps/spruce/src/pages/commits/StatusSelect.tsx
index d2fdd5913..5adc7373d 100644
--- a/apps/spruce/src/pages/commits/StatusSelect.tsx
+++ b/apps/spruce/src/pages/commits/StatusSelect.tsx
@@ -24,16 +24,16 @@ export const StatusSelect = () => {
     <Container>
       <Label htmlFor="project-task-status-select">Status</Label>
       <Dropdown
-        data-cy="project-task-status-select"
         buttonText={`Task Status: ${
           inputValue.length ? inputValue.join(", ") : noFilterMessage
         }`}
+        data-cy="project-task-status-select"
       >
         <TreeSelect
+          hasStyling={false}
           onChange={setAndSubmitInputValue}
-          tData={taskStatusesFilterTreeData}
           state={inputValue}
-          hasStyling={false}
+          tData={taskStatusesFilterTreeData}
         />
       </Dropdown>
     </Container>
diff --git a/apps/spruce/src/pages/commits/WaterfallMenu/index.tsx b/apps/spruce/src/pages/commits/WaterfallMenu/index.tsx
index 8b31987f3..0d6d817aa 100644
--- a/apps/spruce/src/pages/commits/WaterfallMenu/index.tsx
+++ b/apps/spruce/src/pages/commits/WaterfallMenu/index.tsx
@@ -15,9 +15,9 @@ export const WaterfallMenu: React.FC = () => {
     <ButtonDropdown
       data-cy="waterfall-menu"
       dropdownItems={dropdownItems}
-      size="default"
       open={menuOpen}
       setOpen={setMenuOpen}
+      size="default"
     />
   );
 };
diff --git a/apps/spruce/src/pages/commits/index.tsx b/apps/spruce/src/pages/commits/index.tsx
index 3983f8c43..b3c652610 100644
--- a/apps/spruce/src/pages/commits/index.tsx
+++ b/apps/spruce/src/pages/commits/index.tsx
@@ -201,8 +201,8 @@ const Commits = () => {
         <HeaderWrapper>
           <ElementWrapper width="35">
             <TupleSelectWithRegexConditional
-              options={tupleSelectOptions}
               onSubmit={onSubmitTupleSelect}
+              options={tupleSelectOptions}
               validator={validateRegexp}
               validatorErrorMessage="Invalid Regular Expression"
             />
@@ -215,8 +215,6 @@ const Commits = () => {
           </ElementWrapper>
           <ElementWrapper width="25">
             <ProjectSelect
-              // @ts-expect-error: FIXME. This comment was added by an automated script.
-              selectedProjectIdentifier={projectIdentifier}
               getRoute={getCommitsRoute}
               onSubmit={(p: string) => {
                 sendEvent({
@@ -224,52 +222,54 @@ const Commits = () => {
                   project: p,
                 });
               }}
+              // @ts-expect-error: FIXME. This comment was added by an automated script.
+              selectedProjectIdentifier={projectIdentifier}
             />
           </ElementWrapper>
           <WaterfallMenu />
         </HeaderWrapper>
         <BadgeWrapper>
           <FilterBadges
-            onRemove={(b) => {
-              sendEvent({ name: "Deleted a badge" });
-              handleOnRemove(b);
-            }}
+            badges={badges}
             onClearAll={() => {
               sendEvent({ name: "Deleted all badges" });
               handleClearAll();
             }}
-            badges={badges}
+            onRemove={(b) => {
+              sendEvent({ name: "Deleted a badge" });
+              handleOnRemove(b);
+            }}
           />
         </BadgeWrapper>
         <PaginationWrapper>
           {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
           <ViewToggle identifier={projectIdentifier} />
           <PaginationButtons
-            // @ts-expect-error: FIXME. This comment was added by an automated script.
-            prevPageOrderNumber={prevPageOrderNumber}
             // @ts-expect-error: FIXME. This comment was added by an automated script.
             nextPageOrderNumber={nextPageOrderNumber}
+            // @ts-expect-error: FIXME. This comment was added by an automated script.
+            prevPageOrderNumber={prevPageOrderNumber}
           />
         </PaginationWrapper>
         <div ref={ref}>
           <CommitsWrapper
-            versions={versions}
-            revision={revision}
+            hasFilters={hasFilters}
+            hasTaskFilter={hasTasks}
             isLoading={
               (loading && !versions) ||
               !projectIdentifier ||
               isRedirecting ||
               isResizing
             }
-            hasTaskFilter={hasTasks}
-            hasFilters={hasFilters}
+            revision={revision}
+            versions={versions}
           />
         </div>
       </PageContainer>
       {!shouldDisableForTest && !hasUsedMainlineCommitsBefore && (
         <WelcomeModal
-          param="hasUsedMainlineCommitsBefore"
           carouselCards={newMainlineCommitsUser}
+          param="hasUsedMainlineCommitsBefore"
         />
       )}
     </PageWrapper>
diff --git a/apps/spruce/src/pages/configurePatch/configurePatchCore/ConfigureBuildVariants/BuildVariantCard.tsx b/apps/spruce/src/pages/configurePatch/configurePatchCore/ConfigureBuildVariants/BuildVariantCard.tsx
index 6a5b214cc..76333330a 100644
--- a/apps/spruce/src/pages/configurePatch/configurePatchCore/ConfigureBuildVariants/BuildVariantCard.tsx
+++ b/apps/spruce/src/pages/configurePatch/configurePatchCore/ConfigureBuildVariants/BuildVariantCard.tsx
@@ -39,9 +39,9 @@ const BuildVariantCard: React.FC<BuildVariantCardProps> = ({
         const isSelected = selectedMenuItems.includes(name);
         return (
           <BuildVariant
+            key={name}
             data-cy={dataCy}
             data-selected={isSelected}
-            key={name}
             isSelected={isSelected}
             onClick={onClick(name)}
           >
diff --git a/apps/spruce/src/pages/configurePatch/configurePatchCore/ConfigureBuildVariants/index.tsx b/apps/spruce/src/pages/configurePatch/configurePatchCore/ConfigureBuildVariants/index.tsx
index 07590347a..7a8ff2c3b 100644
--- a/apps/spruce/src/pages/configurePatch/configurePatchCore/ConfigureBuildVariants/index.tsx
+++ b/apps/spruce/src/pages/configurePatch/configurePatchCore/ConfigureBuildVariants/index.tsx
@@ -91,21 +91,21 @@ export const ConfigureBuildVariants: React.FC<Props> = ({
     <DisableWrapper data-cy="build-variant-select-wrapper" disabled={disabled}>
       <UserSelectWrapper isHotKeyPressed={state.numButtonsPressed !== 0}>
         <BuildVariantCard
-          onClick={getClickVariantHandler}
+          data-cy="build-variant-list-item"
           menuItems={variants}
-          title="Select Build Variants and Tasks"
+          onClick={getClickVariantHandler}
           selectedMenuItems={selectedBuildVariants}
-          data-cy="build-variant-list-item"
+          title="Select Build Variants and Tasks"
         />
         {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
         {aliases?.length > 0 && (
           <BuildVariantCard
-            onClick={getClickVariantHandler}
+            data-cy="trigger-alias-list-item"
             // @ts-expect-error: FIXME. This comment was added by an automated script.
             menuItems={aliases}
-            title="Select Downstream Tasks"
+            onClick={getClickVariantHandler}
             selectedMenuItems={selectedBuildVariants}
-            data-cy="trigger-alias-list-item"
+            title="Select Downstream Tasks"
           />
         )}
       </UserSelectWrapper>
diff --git a/apps/spruce/src/pages/configurePatch/configurePatchCore/ConfigureTasks/ConfigureTasks.test.tsx b/apps/spruce/src/pages/configurePatch/configurePatchCore/ConfigureTasks/ConfigureTasks.test.tsx
index 2a6c236a9..2eb718514 100644
--- a/apps/spruce/src/pages/configurePatch/configurePatchCore/ConfigureTasks/ConfigureTasks.test.tsx
+++ b/apps/spruce/src/pages/configurePatch/configurePatchCore/ConfigureTasks/ConfigureTasks.test.tsx
@@ -8,18 +8,18 @@ describe("configureTasks", () => {
       const setSelectedBuildVariantTasks = vi.fn();
       render(
         <ConfigureTasks
+          activated={false}
+          aliasCount={0}
+          childPatches={[]}
+          selectableAliases={[]}
+          selectedAliases={{}}
           selectedBuildVariants={selectedBuildVariants}
           selectedBuildVariantTasks={{
             ubuntu2004: { compile: false, test: false },
           }}
+          setSelectedAliases={() => {}}
           setSelectedBuildVariantTasks={setSelectedBuildVariantTasks}
-          selectableAliases={[]}
-          selectedAliases={{}}
           totalSelectedTaskCount={0}
-          aliasCount={0}
-          childPatches={[]}
-          activated={false}
-          setSelectedAliases={() => {}}
         />,
       );
       expect(screen.queryAllByDataCy("task-checkbox")).toHaveLength(2);
@@ -31,19 +31,19 @@ describe("configureTasks", () => {
       const setSelectedBuildVariantTasks = vi.fn();
       render(
         <ConfigureTasks
+          activated={false}
+          aliasCount={0}
+          childPatches={[]}
+          selectableAliases={[]}
+          selectedAliases={{}}
           selectedBuildVariants={selectedBuildVariants}
           selectedBuildVariantTasks={{
             ubuntu2004: { compile: false, test: false },
             ubuntu1804: { e2e: false, lint: false },
           }}
+          setSelectedAliases={() => {}}
           setSelectedBuildVariantTasks={setSelectedBuildVariantTasks}
-          selectableAliases={[]}
-          selectedAliases={{}}
           totalSelectedTaskCount={0}
-          aliasCount={0}
-          childPatches={[]}
-          activated={false}
-          setSelectedAliases={() => {}}
         />,
       );
       expect(screen.queryAllByDataCy("task-checkbox")).toHaveLength(4);
@@ -57,19 +57,19 @@ describe("configureTasks", () => {
       const setSelectedBuildVariantTasks = vi.fn();
       render(
         <ConfigureTasks
+          activated={false}
+          aliasCount={0}
+          childPatches={[]}
+          selectableAliases={[]}
+          selectedAliases={{}}
           selectedBuildVariants={selectedBuildVariants}
           selectedBuildVariantTasks={{
             ubuntu2004: { compile: true, test: true },
             ubuntu1804: { compile: true, lint: true },
           }}
-          totalSelectedTaskCount={3}
-          aliasCount={0}
-          setSelectedBuildVariantTasks={setSelectedBuildVariantTasks}
-          selectableAliases={[]}
-          selectedAliases={{}}
-          childPatches={[]}
-          activated={false}
           setSelectedAliases={() => {}}
+          setSelectedBuildVariantTasks={setSelectedBuildVariantTasks}
+          totalSelectedTaskCount={3}
         />,
       );
       expect(screen.queryAllByDataCy("task-checkbox")).toHaveLength(3);
@@ -82,19 +82,19 @@ describe("configureTasks", () => {
       const setSelectedBuildVariantTasks = vi.fn();
       render(
         <ConfigureTasks
+          activated={false}
+          aliasCount={0}
+          childPatches={[]}
+          selectableAliases={[]}
+          selectedAliases={{}}
           selectedBuildVariants={selectedBuildVariants}
           selectedBuildVariantTasks={{
             ubuntu2004: { compile: false, test: false },
             ubuntu1804: { compile: true, lint: false },
           }}
+          setSelectedAliases={() => {}}
           setSelectedBuildVariantTasks={setSelectedBuildVariantTasks}
-          selectableAliases={[]}
-          selectedAliases={{}}
           totalSelectedTaskCount={1}
-          aliasCount={0}
-          childPatches={[]}
-          activated={false}
-          setSelectedAliases={() => {}}
         />,
       );
       const checkbox = screen.getByLabelText("compile");
@@ -107,18 +107,18 @@ describe("configureTasks", () => {
       const setSelectedBuildVariantTasks = vi.fn();
       render(
         <ConfigureTasks
+          activated={false}
+          aliasCount={0}
+          childPatches={[]}
+          selectableAliases={[]}
+          selectedAliases={{}}
           selectedBuildVariants={selectedBuildVariants}
           selectedBuildVariantTasks={{
             ubuntu2004: { compile: false, test: false },
           }}
+          setSelectedAliases={() => {}}
           setSelectedBuildVariantTasks={setSelectedBuildVariantTasks}
-          selectableAliases={[]}
-          selectedAliases={{}}
           totalSelectedTaskCount={0}
-          aliasCount={0}
-          childPatches={[]}
-          activated={false}
-          setSelectedAliases={() => {}}
         />,
       );
       const checkbox = screen.getByLabelText("compile");
@@ -136,19 +136,19 @@ describe("configureTasks", () => {
       const setSelectedBuildVariantTasks = vi.fn();
       render(
         <ConfigureTasks
+          activated={false}
+          aliasCount={0}
+          childPatches={[]}
+          selectableAliases={[]}
+          selectedAliases={{}}
           selectedBuildVariants={selectedBuildVariants}
           selectedBuildVariantTasks={{
             ubuntu2004: { compile: false, test: false },
             ubuntu1804: { compile: false, lint: false },
           }}
+          setSelectedAliases={() => {}}
           setSelectedBuildVariantTasks={setSelectedBuildVariantTasks}
-          selectableAliases={[]}
-          selectedAliases={{}}
           totalSelectedTaskCount={0}
-          aliasCount={0}
-          childPatches={[]}
-          activated={false}
-          setSelectedAliases={() => {}}
         />,
       );
       const checkbox = screen.getByLabelText(
@@ -169,19 +169,19 @@ describe("configureTasks", () => {
       const setSelectedBuildVariantTasks = vi.fn();
       render(
         <ConfigureTasks
+          activated={false}
+          aliasCount={0}
+          childPatches={[]}
+          selectableAliases={[]}
+          selectedAliases={{}}
           selectedBuildVariants={selectedBuildVariants}
           selectedBuildVariantTasks={{
             ubuntu2004: { compile: false, test: false },
             ubuntu1804: { compile: false, lint: false },
           }}
+          setSelectedAliases={() => {}}
           setSelectedBuildVariantTasks={setSelectedBuildVariantTasks}
-          selectableAliases={[]}
-          selectedAliases={{}}
           totalSelectedTaskCount={0}
-          aliasCount={0}
-          childPatches={[]}
-          activated={false}
-          setSelectedAliases={() => {}}
         />,
       );
       const checkbox = screen.getByLabelText("compile");
@@ -200,19 +200,19 @@ describe("configureTasks", () => {
       const setSelectedBuildVariantTasks = vi.fn();
       render(
         <ConfigureTasks
+          activated={false}
+          aliasCount={0}
+          childPatches={[]}
+          selectableAliases={[]}
+          selectedAliases={{}}
           selectedBuildVariants={selectedBuildVariants}
           selectedBuildVariantTasks={{
             ubuntu2004: { compile: false, test: false },
             ubuntu1804: { compile: false, lint: false },
           }}
+          setSelectedAliases={() => {}}
           setSelectedBuildVariantTasks={setSelectedBuildVariantTasks}
-          selectableAliases={[]}
-          selectedAliases={{}}
           totalSelectedTaskCount={0}
-          aliasCount={0}
-          childPatches={[]}
-          activated={false}
-          setSelectedAliases={() => {}}
         />,
       );
       const checkbox = screen.getByLabelText(
@@ -233,19 +233,19 @@ describe("configureTasks", () => {
       const selectedBuildVariants = ["ubuntu2004", "ubuntu1804"];
       render(
         <ConfigureTasks
+          activated={false}
+          aliasCount={0}
+          childPatches={[]}
+          selectableAliases={[]}
+          selectedAliases={{}}
           selectedBuildVariants={selectedBuildVariants}
           selectedBuildVariantTasks={{
             ubuntu2004: { compile: false, test: false },
             ubuntu1804: { compile: false, lint: false },
           }}
+          setSelectedAliases={() => {}}
           setSelectedBuildVariantTasks={() => {}}
-          selectableAliases={[]}
-          selectedAliases={{}}
           totalSelectedTaskCount={0}
-          aliasCount={0}
-          childPatches={[]}
-          activated={false}
-          setSelectedAliases={() => {}}
         />,
       );
       await user.type(screen.getByDataCy("task-filter-input"), "compile");
@@ -261,12 +261,9 @@ describe("configureTasks", () => {
       const setSelectedAliases = vi.fn();
       render(
         <ConfigureTasks
-          selectedBuildVariants={selectedBuildVariants}
-          selectedBuildVariantTasks={{
-            ubuntu2004: { compile: false, test: false },
-            ubuntu1804: { compile: true, lint: false },
-          }}
-          setSelectedBuildVariantTasks={setSelectedBuildVariantTasks}
+          activated={false}
+          aliasCount={0}
+          childPatches={[]}
           selectableAliases={[
             {
               alias: "parsley",
@@ -281,11 +278,14 @@ describe("configureTasks", () => {
             },
           ]}
           selectedAliases={{}}
-          totalSelectedTaskCount={3}
-          aliasCount={0}
-          childPatches={[]}
-          activated={false}
+          selectedBuildVariants={selectedBuildVariants}
+          selectedBuildVariantTasks={{
+            ubuntu2004: { compile: false, test: false },
+            ubuntu1804: { compile: true, lint: false },
+          }}
           setSelectedAliases={setSelectedAliases}
+          setSelectedBuildVariantTasks={setSelectedBuildVariantTasks}
+          totalSelectedTaskCount={3}
         />,
       );
       expect(screen.getByText("ubuntu2204-large")).toBeInTheDocument();
@@ -298,12 +298,9 @@ describe("configureTasks", () => {
       const setSelectedAliases = vi.fn();
       render(
         <ConfigureTasks
-          selectedBuildVariants={selectedBuildVariants}
-          selectedBuildVariantTasks={{
-            ubuntu2004: { compile: false, test: false },
-            ubuntu1804: { compile: true, lint: false },
-          }}
-          setSelectedBuildVariantTasks={setSelectedBuildVariantTasks}
+          activated={false}
+          aliasCount={0}
+          childPatches={[]}
           selectableAliases={[
             {
               alias: "parsley",
@@ -318,11 +315,14 @@ describe("configureTasks", () => {
             },
           ]}
           selectedAliases={{}}
-          totalSelectedTaskCount={1}
-          aliasCount={0}
-          childPatches={[]}
-          activated={false}
+          selectedBuildVariants={selectedBuildVariants}
+          selectedBuildVariantTasks={{
+            ubuntu2004: { compile: false, test: false },
+            ubuntu1804: { compile: true, lint: false },
+          }}
           setSelectedAliases={setSelectedAliases}
+          setSelectedBuildVariantTasks={setSelectedBuildVariantTasks}
+          totalSelectedTaskCount={1}
         />,
       );
       expect(screen.getByText("ubuntu2204-large")).toBeInTheDocument();
@@ -336,12 +336,9 @@ describe("configureTasks", () => {
       const setSelectedAliases = vi.fn();
       render(
         <ConfigureTasks
-          selectedBuildVariants={selectedBuildVariants}
-          selectedBuildVariantTasks={{
-            ubuntu2004: { compile: false, test: false },
-            ubuntu1804: { compile: true, lint: false },
-          }}
-          setSelectedBuildVariantTasks={setSelectedBuildVariantTasks}
+          activated={false}
+          aliasCount={1}
+          childPatches={[]}
           selectableAliases={[
             {
               alias: "parsley",
@@ -356,11 +353,14 @@ describe("configureTasks", () => {
             },
           ]}
           selectedAliases={{ parsley: true }}
-          totalSelectedTaskCount={1}
-          aliasCount={1}
-          childPatches={[]}
-          activated={false}
+          selectedBuildVariants={selectedBuildVariants}
+          selectedBuildVariantTasks={{
+            ubuntu2004: { compile: false, test: false },
+            ubuntu1804: { compile: true, lint: false },
+          }}
           setSelectedAliases={setSelectedAliases}
+          setSelectedBuildVariantTasks={setSelectedBuildVariantTasks}
+          totalSelectedTaskCount={1}
         />,
       );
       expect(screen.getByText("ubuntu2204-large")).toBeInTheDocument();
@@ -374,12 +374,9 @@ describe("configureTasks", () => {
       const setSelectedAliases = vi.fn();
       render(
         <ConfigureTasks
-          selectedBuildVariants={selectedBuildVariants}
-          selectedBuildVariantTasks={{
-            ubuntu2004: { compile: false, test: false },
-            ubuntu1804: { compile: false, lint: false },
-          }}
-          setSelectedBuildVariantTasks={setSelectedBuildVariantTasks}
+          activated={false}
+          aliasCount={1}
+          childPatches={[]}
           selectableAliases={[
             {
               alias: "parsley",
@@ -394,11 +391,14 @@ describe("configureTasks", () => {
             },
           ]}
           selectedAliases={{ parsley: true }}
-          totalSelectedTaskCount={0}
-          aliasCount={1}
-          childPatches={[]}
-          activated={false}
+          selectedBuildVariants={selectedBuildVariants}
+          selectedBuildVariantTasks={{
+            ubuntu2004: { compile: false, test: false },
+            ubuntu1804: { compile: false, lint: false },
+          }}
           setSelectedAliases={setSelectedAliases}
+          setSelectedBuildVariantTasks={setSelectedBuildVariantTasks}
+          totalSelectedTaskCount={0}
         />,
       );
       expect(screen.getByLabelText("compile")).toBeInTheDocument();
@@ -412,12 +412,9 @@ describe("configureTasks", () => {
       const setSelectedAliases = vi.fn();
       render(
         <ConfigureTasks
-          selectedBuildVariants={selectedBuildVariants}
-          selectedBuildVariantTasks={{
-            ubuntu2004: { compile: false, test: false },
-            ubuntu1804: { compile: false, lint: false },
-          }}
-          setSelectedBuildVariantTasks={setSelectedBuildVariantTasks}
+          activated={false}
+          aliasCount={0}
+          childPatches={[]}
           selectableAliases={[
             {
               alias: "parsley",
@@ -434,11 +431,14 @@ describe("configureTasks", () => {
           selectedAliases={{
             parsley: false,
           }}
-          totalSelectedTaskCount={0}
-          aliasCount={0}
-          childPatches={[]}
-          activated={false}
+          selectedBuildVariants={selectedBuildVariants}
+          selectedBuildVariantTasks={{
+            ubuntu2004: { compile: false, test: false },
+            ubuntu1804: { compile: false, lint: false },
+          }}
           setSelectedAliases={setSelectedAliases}
+          setSelectedBuildVariantTasks={setSelectedBuildVariantTasks}
+          totalSelectedTaskCount={0}
         />,
       );
       expect(screen.getByLabelText("Add alias to patch")).toBeInTheDocument();
diff --git a/apps/spruce/src/pages/configurePatch/configurePatchCore/ConfigureTasks/DisabledVariantTasksList/index.tsx b/apps/spruce/src/pages/configurePatch/configurePatchCore/ConfigureTasks/DisabledVariantTasksList/index.tsx
index 635aa8e49..18b4f2781 100644
--- a/apps/spruce/src/pages/configurePatch/configurePatchCore/ConfigureTasks/DisabledVariantTasksList/index.tsx
+++ b/apps/spruce/src/pages/configurePatch/configurePatchCore/ConfigureTasks/DisabledVariantTasksList/index.tsx
@@ -22,11 +22,11 @@ const DisabledVariantTasksList: React.FC<DisabledVariantTasksListProps> = ({
         <TaskLayoutGrid>
           {tasks.map((taskName) => (
             <Checkbox
-              data-cy={dataCy}
               key={`${name}-${taskName}`}
-              label={taskName}
               checked={status === CheckboxState.Checked}
+              data-cy={dataCy}
               disabled
+              label={taskName}
             />
           ))}
         </TaskLayoutGrid>
diff --git a/apps/spruce/src/pages/configurePatch/configurePatchCore/ConfigureTasks/index.tsx b/apps/spruce/src/pages/configurePatch/configurePatchCore/ConfigureTasks/index.tsx
index 210fad3f1..788e2385c 100644
--- a/apps/spruce/src/pages/configurePatch/configurePatchCore/ConfigureTasks/index.tsx
+++ b/apps/spruce/src/pages/configurePatch/configurePatchCore/ConfigureTasks/index.tsx
@@ -192,29 +192,33 @@ const ConfigureTasks: React.FC<Props> = ({
     <TabContentWrapper>
       <Actions>
         <StyledTextInput
+          ref={searchRef}
           aria-labelledby="search-tasks"
+          data-cy="task-filter-input"
           onChange={(v) => setSearch(v)}
           placeholder="Search tasks regex"
-          ref={searchRef}
-          data-cy="task-filter-input"
           validator={validateRegexp}
         />
         <InlineCheckbox
+          checked={selectAllCheckboxState === CheckboxState.Checked}
           data-cy="select-all-checkbox"
+          disabled={
+            (activated && Object.entries(currentAliases).length > 0) ||
+            shouldShowChildPatchTasks
+          }
           indeterminate={selectAllCheckboxState === CheckboxState.Indeterminate}
-          onChange={onClickSelectAll}
           label={
             <LabelContainer>
               {selectAllCheckboxCopy}
               {shouldShowChildPatchTasks && (
                 <Tooltip
                   justify="middle"
-                  triggerEvent="hover"
                   trigger={
                     <IconContainer>
                       <Icon glyph="InfoWithCircle" />
                     </IconContainer>
                   }
+                  triggerEvent="hover"
                 >
                   Aliases specified via CLI cannot be edited.
                 </Tooltip>
@@ -222,12 +226,12 @@ const ConfigureTasks: React.FC<Props> = ({
               {variantHasActivatedTasks && (
                 <Tooltip
                   justify="middle"
-                  triggerEvent="hover"
                   trigger={
                     <IconContainer>
                       <Icon glyph="InfoWithCircle" />
                     </IconContainer>
                   }
+                  triggerEvent="hover"
                 >
                   Some Tasks in{" "}
                   {pluralize("this", selectedBuildVariants.length)}{" "}
@@ -237,11 +241,7 @@ const ConfigureTasks: React.FC<Props> = ({
               )}
             </LabelContainer>
           }
-          checked={selectAllCheckboxState === CheckboxState.Checked}
-          disabled={
-            (activated && Object.entries(currentAliases).length > 0) ||
-            shouldShowChildPatchTasks
-          }
+          onChange={onClickSelectAll}
         />
       </Actions>
 
@@ -253,12 +253,12 @@ const ConfigureTasks: React.FC<Props> = ({
       <TaskLayoutGrid data-cy="configurePatch-tasks">
         {sortedVisibleTasks.map(([name, state]) => (
           <Checkbox
-            data-cy="task-checkbox"
             key={name}
-            onChange={onClickCheckbox(name)}
-            label={name}
-            indeterminate={isTaskCheckboxIndeterminate(state)}
             checked={isTaskCheckboxChecked(state)}
+            data-cy="task-checkbox"
+            indeterminate={isTaskCheckboxIndeterminate(state)}
+            label={name}
+            onChange={onClickCheckbox(name)}
           />
         ))}
       </TaskLayoutGrid>
@@ -269,23 +269,23 @@ const ConfigureTasks: React.FC<Props> = ({
           <TaskLayoutGrid>
             {Object.entries(currentAliases).map(([name, status]) => (
               <Checkbox
-                data-cy="alias-checkbox"
                 key={name}
-                onChange={onClickCheckbox(name)}
-                label={name}
-                indeterminate={status === CheckboxState.Indeterminate}
                 checked={status === CheckboxState.Checked}
+                data-cy="alias-checkbox"
                 disabled={activated}
+                indeterminate={status === CheckboxState.Indeterminate}
+                label={name}
+                onChange={onClickCheckbox(name)}
               />
             ))}
             {/* Represent child patches invoked from CLI as read-only */}
             {currentChildPatches.map(({ alias }) => (
               <Checkbox
-                data-cy="child-patch-checkbox"
                 key={alias}
-                label={alias}
-                disabled
                 checked
+                data-cy="child-patch-checkbox"
+                disabled
+                label={alias}
               />
             ))}
           </TaskLayoutGrid>
diff --git a/apps/spruce/src/pages/configurePatch/configurePatchCore/ParametersContent.tsx b/apps/spruce/src/pages/configurePatch/configurePatchCore/ParametersContent.tsx
index 3a1e67c75..bd57c4b0f 100644
--- a/apps/spruce/src/pages/configurePatch/configurePatchCore/ParametersContent.tsx
+++ b/apps/spruce/src/pages/configurePatch/configurePatchCore/ParametersContent.tsx
@@ -26,8 +26,8 @@ export const ParametersContent: React.FC<Props> = ({
           <ExistingParamsContainer>
             {patchParameters?.map((param) => (
               <StyledBadge
-                data-cy={`badge-${param.key}`}
                 key={`param_${param.key}`}
+                data-cy={`badge-${param.key}`}
               >
                 {param.key}: {param.value}
               </StyledBadge>
@@ -37,9 +37,9 @@ export const ParametersContent: React.FC<Props> = ({
       </>
     ) : (
       <EditableTagField
+        buttonText="Add parameter"
         inputTags={patchParameters}
         onChange={setPatchParams}
-        buttonText="Add parameter"
       />
     )}
   </ParamsContainer>
diff --git a/apps/spruce/src/pages/configurePatch/configurePatchCore/index.tsx b/apps/spruce/src/pages/configurePatch/configurePatchCore/index.tsx
index 9438a698b..98f023883 100644
--- a/apps/spruce/src/pages/configurePatch/configurePatchCore/index.tsx
+++ b/apps/spruce/src/pages/configurePatch/configurePatchCore/index.tsx
@@ -158,10 +158,10 @@ const ConfigurePatchCore: React.FC<ConfigurePatchCoreProps> = ({ patch }) => {
     <>
       <FlexRow>
         <StyledInput
-          label="Patch Name"
           data-cy="patch-name-input"
-          value={description}
+          label="Patch Name"
           onChange={(e) => setDescription(e.target.value)}
+          value={description}
         />
         <ButtonWrapper>
           {activated && (
@@ -205,7 +205,6 @@ const ConfigurePatchCore: React.FC<ConfigurePatchCoreProps> = ({ patch }) => {
             </MetadataItem>
           </MetadataCard>
           <ConfigureBuildVariants
-            variants={getVariantEntries(variants, selectedBuildVariantTasks)}
             aliases={[
               ...getPatchTriggerAliasEntries(
                 selectableAliases,
@@ -213,31 +212,32 @@ const ConfigurePatchCore: React.FC<ConfigurePatchCoreProps> = ({ patch }) => {
               ),
               ...getChildPatchEntries(childPatchesWithAliases),
             ]}
+            disabled={disableBuildVariantSelect}
             selectedBuildVariants={selectedBuildVariants}
             setSelectedBuildVariants={setSelectedBuildVariants}
-            disabled={disableBuildVariantSelect}
+            variants={getVariantEntries(variants, selectedBuildVariantTasks)}
           />
         </PageSider>
         <PageLayout>
           <PageContent>
             <StyledTabs
+              aria-label="Configure Patch Tabs"
               selected={selectedTab}
               setSelected={setSelectedTab}
-              aria-label="Configure Patch Tabs"
             >
               <Tab data-cy="tasks-tab" name="Configure">
                 <ConfigureTasks
                   activated={activated}
-                  childPatches={childPatchesWithAliases}
-                  totalSelectedTaskCount={totalSelectedTaskCount}
+                  activatedVariants={variantsTasks}
                   aliasCount={aliasCount}
+                  childPatches={childPatchesWithAliases}
                   selectableAliases={selectableAliases}
                   selectedAliases={selectedAliases}
                   selectedBuildVariants={selectedBuildVariants}
                   selectedBuildVariantTasks={selectedBuildVariantTasks}
                   setSelectedAliases={setSelectedAliases}
                   setSelectedBuildVariantTasks={setSelectedBuildVariantTasks}
-                  activatedVariants={variantsTasks}
+                  totalSelectedTaskCount={totalSelectedTaskCount}
                 />
               </Tab>
               <Tab data-cy="changes-tab" name="Changes">
diff --git a/apps/spruce/src/pages/container/EventsTable/index.tsx b/apps/spruce/src/pages/container/EventsTable/index.tsx
index 1052da07b..870b0f4ab 100644
--- a/apps/spruce/src/pages/container/EventsTable/index.tsx
+++ b/apps/spruce/src/pages/container/EventsTable/index.tsx
@@ -89,13 +89,13 @@ const EventsTable: React.FC<{}> = () => {
         <TableControlInnerRow>
           <Pagination
             currentPage={page}
-            totalResults={count ?? 0}
             pageSize={limit}
+            totalResults={count ?? 0}
           />
           <PageSizeSelector
             data-cy="pod-events-page-size-selector"
-            value={limit}
             onChange={setLimit}
+            value={limit}
           />
         </TableControlInnerRow>
       </TableTitle>
diff --git a/apps/spruce/src/pages/container/index.tsx b/apps/spruce/src/pages/container/index.tsx
index cd09f6c3d..4e3cb1c25 100644
--- a/apps/spruce/src/pages/container/index.tsx
+++ b/apps/spruce/src/pages/container/index.tsx
@@ -33,16 +33,16 @@ const Container = () => {
   return (
     <PageWrapper data-cy="host-page">
       <PageTitle
-        title={`Container: ${id}`}
+        badge={<PodStatusBadge status={status as PodStatus} />}
+        loading={loading}
         pageTitle={`Container: ${id}`}
         size="large"
-        loading={loading}
-        badge={<PodStatusBadge status={status as PodStatus} />}
+        title={`Container: ${id}`}
       />
       <PageLayout hasSider>
         <PageSider width={350}>
           {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
-          <Metadata loading={loading} pod={pod} error={error} />
+          <Metadata error={error} loading={loading} pod={pod} />
         </PageSider>
         <PageLayout>
           <PageContent>
diff --git a/apps/spruce/src/pages/distroSettings/DeleteDistro/index.tsx b/apps/spruce/src/pages/distroSettings/DeleteDistro/index.tsx
index 6d73f66ad..aa114514f 100644
--- a/apps/spruce/src/pages/distroSettings/DeleteDistro/index.tsx
+++ b/apps/spruce/src/pages/distroSettings/DeleteDistro/index.tsx
@@ -99,11 +99,11 @@ export const DeleteDistro: React.FC = () => {
         enabled={!isAdmin}
         trigger={
           <Button
+            data-cy={id}
+            disabled={!isAdmin}
             id={id}
             onClick={() => setOpen(true)}
             variant="danger"
-            data-cy={id}
-            disabled={!isAdmin}
           >
             Delete distro
           </Button>
diff --git a/apps/spruce/src/pages/distroSettings/HeaderButtons.tsx b/apps/spruce/src/pages/distroSettings/HeaderButtons.tsx
index 2a0b63c96..9391841ad 100644
--- a/apps/spruce/src/pages/distroSettings/HeaderButtons.tsx
+++ b/apps/spruce/src/pages/distroSettings/HeaderButtons.tsx
@@ -28,9 +28,9 @@ export const HeaderButtons: React.FC<Props> = ({ distro, tab }) => {
       </Button>
       <SaveModal
         distro={distro}
-        open={modalOpen}
-        onConfirm={() => setModalOpen(false)}
         onCancel={() => setModalOpen(false)}
+        onConfirm={() => setModalOpen(false)}
+        open={modalOpen}
         tab={tab}
       />
     </>
diff --git a/apps/spruce/src/pages/distroSettings/SaveModal.tsx b/apps/spruce/src/pages/distroSettings/SaveModal.tsx
index 5b8d38f46..b7d72805a 100644
--- a/apps/spruce/src/pages/distroSettings/SaveModal.tsx
+++ b/apps/spruce/src/pages/distroSettings/SaveModal.tsx
@@ -89,7 +89,6 @@ export const SaveModal: React.FC<SaveModalProps> = ({
     <ConfirmationModal
       buttonText="Save"
       data-cy="save-modal"
-      open={open}
       onCancel={() => {
         onCancel?.();
       }}
@@ -97,6 +96,7 @@ export const SaveModal: React.FC<SaveModalProps> = ({
         onConfirm?.();
         handleSave();
       }}
+      open={open}
       title="Save page"
     >
       {banner}
diff --git a/apps/spruce/src/pages/distroSettings/Tabs.tsx b/apps/spruce/src/pages/distroSettings/Tabs.tsx
index ee466a850..4f27376d6 100644
--- a/apps/spruce/src/pages/distroSettings/Tabs.tsx
+++ b/apps/spruce/src/pages/distroSettings/Tabs.tsx
@@ -39,14 +39,13 @@ export const DistroSettingsTabs: React.FC<Props> = ({ distro }) => {
     <Container>
       <NavigationModal />
       {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
-      <Header tab={tab} distro={distro} />
+      <Header distro={distro} tab={tab} />
       <Routes>
         <Route
+          element={<Navigate replace to={DistroSettingsTabRoutes.General} />}
           path="*"
-          element={<Navigate to={DistroSettingsTabRoutes.General} replace />}
         />
         <Route
-          path={DistroSettingsTabRoutes.General}
           element={
             <GeneralTab
               distroData={tabData[DistroSettingsTabRoutes.General]}
@@ -54,18 +53,18 @@ export const DistroSettingsTabs: React.FC<Props> = ({ distro }) => {
               minimumHosts={distro.hostAllocatorSettings.minimumHosts}
             />
           }
+          path={DistroSettingsTabRoutes.General}
         />
         <Route
-          path={DistroSettingsTabRoutes.Provider}
           element={
             <ProviderTab
               distro={distro}
               distroData={tabData[DistroSettingsTabRoutes.Provider]}
             />
           }
+          path={DistroSettingsTabRoutes.Provider}
         />
         <Route
-          path={DistroSettingsTabRoutes.Task}
           element={
             <TaskTab
               distroData={tabData[DistroSettingsTabRoutes.Task]}
@@ -73,9 +72,9 @@ export const DistroSettingsTabs: React.FC<Props> = ({ distro }) => {
               provider={distro.provider}
             />
           }
+          path={DistroSettingsTabRoutes.Task}
         />
         <Route
-          path={DistroSettingsTabRoutes.Host}
           element={
             <HostTab
               distroData={tabData[DistroSettingsTabRoutes.Host]}
@@ -83,12 +82,13 @@ export const DistroSettingsTabs: React.FC<Props> = ({ distro }) => {
               provider={distro.provider}
             />
           }
+          path={DistroSettingsTabRoutes.Host}
         />
         <Route
-          path={DistroSettingsTabRoutes.Project}
           element={
             <ProjectTab distroData={tabData[DistroSettingsTabRoutes.Project]} />
           }
+          path={DistroSettingsTabRoutes.Project}
         />
         <Route
           element={<EventLogTab />}
diff --git a/apps/spruce/src/pages/distroSettings/index.tsx b/apps/spruce/src/pages/distroSettings/index.tsx
index 0fddf1972..c88442d1a 100644
--- a/apps/spruce/src/pages/distroSettings/index.tsx
+++ b/apps/spruce/src/pages/distroSettings/index.tsx
@@ -73,12 +73,12 @@ const DistroSettings: React.FC = () => {
         <SideNavGroup>
           {Object.values(DistroSettingsTabRoutes).map((tab) => (
             <SideNavItem
+              key={tab}
               active={tab === currentTab}
               as={Link}
-              key={tab}
+              data-cy={`navitem-${tab}`}
               // @ts-expect-error: FIXME. This comment was added by an automated script.
               to={getDistroSettingsRoute(distroId, tab)}
-              data-cy={`navitem-${tab}`}
             >
               {getTabTitle(tab).title}
             </SideNavItem>
@@ -86,30 +86,30 @@ const DistroSettings: React.FC = () => {
         </SideNavGroup>
         <SideNavGroup glyph={<Icon glyph="Link" />} header="Links">
           <SideNavItemLink
+            data-cy="navitem-task-queue-link"
             // @ts-expect-error: FIXME. This comment was added by an automated script.
             to={getTaskQueueRoute(distroId)}
-            data-cy="navitem-task-queue-link"
           >
             Task Queue
           </SideNavItemLink>
           {showImageVisibilityPage && (
             <SideNavItemLink
+              data-cy="navitem-image-build-information-link"
               to={getImageRoute(
                 data?.distro?.imageId ?? "",
                 ImageTabRoutes.BuildInformation,
               )}
-              data-cy="navitem-image-build-information-link"
             >
               Image Build Information
             </SideNavItemLink>
           )}
           {showImageVisibilityPage && (
             <SideNavItemLink
+              data-cy="navitem-image-event-log-link"
               to={getImageRoute(
                 data?.distro?.imageId ?? "",
                 ImageTabRoutes.EventLog,
               )}
-              data-cy="navitem-image-event-log-link"
             >
               Image Event Log
             </SideNavItemLink>
diff --git a/apps/spruce/src/pages/distroSettings/tabs/EventLogTab/EventLogTab.tsx b/apps/spruce/src/pages/distroSettings/tabs/EventLogTab/EventLogTab.tsx
index 73a776f7f..8d4606c21 100644
--- a/apps/spruce/src/pages/distroSettings/tabs/EventLogTab/EventLogTab.tsx
+++ b/apps/spruce/src/pages/distroSettings/tabs/EventLogTab/EventLogTab.tsx
@@ -22,7 +22,6 @@ export const EventLogTab: React.FC<TabProps> = ({ limit }) => {
   return (
     <EventLog
       allEventsFetched={allEventsFetched}
-      events={events}
       eventRenderer={({ after, before, data }) =>
         after && before ? (
           <EventDiffTable after={after} before={before} />
@@ -30,6 +29,7 @@ export const EventLogTab: React.FC<TabProps> = ({ limit }) => {
           <LegacyEventEntry data={data} />
         )
       }
+      events={events}
       handleFetchMore={() => {
         fetchMore({
           variables: {
diff --git a/apps/spruce/src/pages/distroSettings/tabs/ProviderTab/UnsavedModal.tsx b/apps/spruce/src/pages/distroSettings/tabs/ProviderTab/UnsavedModal.tsx
index c21ceb4d1..0819897a7 100644
--- a/apps/spruce/src/pages/distroSettings/tabs/ProviderTab/UnsavedModal.tsx
+++ b/apps/spruce/src/pages/distroSettings/tabs/ProviderTab/UnsavedModal.tsx
@@ -31,9 +31,9 @@ export const UnsavedModal: React.FC<UnsavedModalProps> = ({
           </StyledBanner>
         }
         distro={distro}
-        open
         onCancel={() => blocker.reset?.()}
         onConfirm={() => blocker.proceed?.()}
+        open
         tab={WritableDistroSettingsTabs.Provider}
       />
     )
diff --git a/apps/spruce/src/pages/host/HostCard.tsx b/apps/spruce/src/pages/host/HostCard.tsx
index 5581ac8a0..db1f5cc94 100644
--- a/apps/spruce/src/pages/host/HostCard.tsx
+++ b/apps/spruce/src/pages/host/HostCard.tsx
@@ -22,7 +22,7 @@ export const HostCard: React.FC<Props> = ({
   metaData,
 }) => (
   <SiderCard metaData={metaData}>
-    {loading && <Skeleton active title={false} paragraph={{ rows: 4 }} />}
+    {loading && <Skeleton active paragraph={{ rows: 4 }} title={false} />}
     {error && (
       <ErrorWrapper data-cy="metadata-card-error">{error.message}</ErrorWrapper>
     )}
diff --git a/apps/spruce/src/pages/host/HostEventString.tsx b/apps/spruce/src/pages/host/HostEventString.tsx
index ee9079bb5..48321a747 100644
--- a/apps/spruce/src/pages/host/HostEventString.tsx
+++ b/apps/spruce/src/pages/host/HostEventString.tsx
@@ -34,9 +34,9 @@ interface TaskLinkProps {
 const TaskLink: React.FC<TaskLinkProps> = ({ "data-cy": dataCy, taskId }) => (
   <ShortenedRouterLink
     data-cy={dataCy}
+    responsiveBreakpoint={1200}
     title={taskId}
     to={getTaskRoute(taskId)}
-    responsiveBreakpoint={1200}
   >
     {taskId}
   </ShortenedRouterLink>
@@ -59,7 +59,7 @@ export const HostEventString: React.FC<HostEventStringProps> = ({
         <div data-cy="created">
           Host creation {data.successful ? succeededString : failedString}
           {data.logs && (
-            <HostEventLog title="Additional details" logs={data.logs} isCode />
+            <HostEventLog isCode logs={data.logs} title="Additional details" />
           )}
         </div>
       );
@@ -76,7 +76,7 @@ export const HostEventString: React.FC<HostEventStringProps> = ({
         <div data-cy="started">
           Host start attempt {data.successful ? succeededString : failedString}
           {data.logs && (
-            <HostEventLog title="Additional details" logs={data.logs} isCode />
+            <HostEventLog isCode logs={data.logs} title="Additional details" />
           )}
         </div>
       );
@@ -85,7 +85,7 @@ export const HostEventString: React.FC<HostEventStringProps> = ({
         <div data-cy="stopped">
           Host stop attempt {data.successful ? succeededString : failedString}
           {data.logs && (
-            <HostEventLog title="Additional details" logs={data.logs} isCode />
+            <HostEventLog isCode logs={data.logs} title="Additional details" />
           )}
         </div>
       );
@@ -94,7 +94,7 @@ export const HostEventString: React.FC<HostEventStringProps> = ({
         <div data-cy="modified">
           Host modify attempt {data.successful ? succeededString : failedString}
           {data.logs && (
-            <HostEventLog title="Additional details" logs={data.logs} isCode />
+            <HostEventLog isCode logs={data.logs} title="Additional details" />
           )}
         </div>
       );
@@ -143,7 +143,7 @@ export const HostEventString: React.FC<HostEventStringProps> = ({
         <div data-cy="host-jasper-restart-error">
           Host encountered error when restarting Jasper service
           {data.logs && (
-            <HostEventLog title="Provisioning logs" logs={data.logs} isCode />
+            <HostEventLog isCode logs={data.logs} title="Provisioning logs" />
           )}
         </div>
       );
@@ -168,7 +168,7 @@ export const HostEventString: React.FC<HostEventStringProps> = ({
         <div data-cy="host-converting-provisioning-error">
           Host encountered error when converting reprovisioning
           {data.logs && (
-            <HostEventLog title="Provisioning logs" logs={data.logs} isCode />
+            <HostEventLog isCode logs={data.logs} title="Provisioning logs" />
           )}
         </div>
       );
@@ -179,9 +179,9 @@ export const HostEventString: React.FC<HostEventStringProps> = ({
           {data.user ? "by" : ""} <b>{data.user}</b>{" "}
           {data.logs && (
             <HostEventLog
-              title="Additional details"
-              logs={data.logs}
               isCode={false}
+              logs={data.logs}
+              title="Additional details"
             />
           )}
         </div>
@@ -197,7 +197,7 @@ export const HostEventString: React.FC<HostEventStringProps> = ({
         <div data-cy="host-script-executed">
           Executed script on host
           {data.logs && (
-            <HostEventLog title="Script logs" logs={data.logs} isCode />
+            <HostEventLog isCode logs={data.logs} title="Script logs" />
           )}
         </div>
       );
@@ -206,7 +206,7 @@ export const HostEventString: React.FC<HostEventStringProps> = ({
         <div data-cy="host-script-execute-failed">
           Failed to execute script on host
           {data.logs && (
-            <HostEventLog title="Script logs" logs={data.logs} isCode />
+            <HostEventLog isCode logs={data.logs} title="Script logs" />
           )}
         </div>
       );
@@ -220,7 +220,7 @@ export const HostEventString: React.FC<HostEventStringProps> = ({
       return (
         <div data-cy="host-running-task-set">
           Assigned to run task{" "}
-          <TaskLink taskId={data.taskId} data-cy="host-running-task-set-link" />
+          <TaskLink data-cy="host-running-task-set-link" taskId={data.taskId} />
         </div>
       );
     case HostEvent.HostRunningTaskCleared:
@@ -228,8 +228,8 @@ export const HostEventString: React.FC<HostEventStringProps> = ({
         <div data-cy="host-running-task-cleared">
           Current running task cleared (was:{" "}
           <TaskLink
-            taskId={data.taskId}
             data-cy="host-running-task-cleared-link"
+            taskId={data.taskId}
           />
         </div>
       );
@@ -245,7 +245,7 @@ export const HostEventString: React.FC<HostEventStringProps> = ({
         <div data-cy="host-provision-failed">
           Provisioning failed{" "}
           {data.logs && (
-            <HostEventLog title="Provisioning logs" logs={data.logs} isCode />
+            <HostEventLog isCode logs={data.logs} title="Provisioning logs" />
           )}
         </div>
       );
@@ -255,7 +255,7 @@ export const HostEventString: React.FC<HostEventStringProps> = ({
           Teardown script {data.successful ? "ran successfully" : <b>failed</b>}{" "}
           in {stringifyNanoseconds(data.duration, true, true)}
           {data.logs && (
-            <HostEventLog title="Teardown logs" logs={data.logs} isCode />
+            <HostEventLog isCode logs={data.logs} title="Teardown logs" />
           )}
         </div>
       );
@@ -263,7 +263,7 @@ export const HostEventString: React.FC<HostEventStringProps> = ({
       return (
         <div data-cy="host-task-finished">
           Task{" "}
-          <TaskLink taskId={data.taskId} data-cy="host-task-finished-link" />{" "}
+          <TaskLink data-cy="host-task-finished-link" taskId={data.taskId} />{" "}
           completed with status:
           <b> {data.taskStatus}</b>
         </div>
@@ -282,9 +282,9 @@ export const HostEventString: React.FC<HostEventStringProps> = ({
           Home volume failed to migrate to new host.
           {data.logs && (
             <HostEventLog
-              title="Volume migration logs"
-              logs={data.logs}
               isCode
+              logs={data.logs}
+              title="Volume migration logs"
             />
           )}
         </span>
@@ -294,7 +294,7 @@ export const HostEventString: React.FC<HostEventStringProps> = ({
         <span data-cy="host-creation-failed">
           Host creation failed.
           {data.logs && (
-            <HostEventLog title="Host creation logs" logs={data.logs} isCode />
+            <HostEventLog isCode logs={data.logs} title="Host creation logs" />
           )}
         </span>
       );
diff --git a/apps/spruce/src/pages/host/HostTable.tsx b/apps/spruce/src/pages/host/HostTable.tsx
index 83ad12922..303605780 100644
--- a/apps/spruce/src/pages/host/HostTable.tsx
+++ b/apps/spruce/src/pages/host/HostTable.tsx
@@ -54,8 +54,8 @@ export const HostTable: React.FC<{
         accessorKey: "eventType",
         cell: ({ getValue, row }) => (
           <HostEventString
-            eventType={getValue() as string}
             data={row.original.data}
+            eventType={getValue() as string}
           />
         ),
       },
@@ -80,15 +80,15 @@ export const HostTable: React.FC<{
         <StyledSubtitle>Recent Events</StyledSubtitle>
         <PaginationWrapper>
           <Pagination
-            data-cy="host-event-table-pagination"
             currentPage={page}
-            totalResults={eventsCount}
+            data-cy="host-event-table-pagination"
             pageSize={limit}
+            totalResults={eventsCount}
           />
           <PageSizeSelector
             data-cy="host-event-table-page-size-selector"
-            value={limit}
             onChange={handlePageSizeChange}
+            value={limit}
           />
         </PaginationWrapper>
       </TableTitle>
diff --git a/apps/spruce/src/pages/host/index.tsx b/apps/spruce/src/pages/host/index.tsx
index bca9f4741..cb9eb186f 100644
--- a/apps/spruce/src/pages/host/index.tsx
+++ b/apps/spruce/src/pages/host/index.tsx
@@ -81,11 +81,7 @@ const Host: React.FC = () => {
       {host && (
         <>
           <PageTitle
-            pageTitle={`Host${hostId ? ` - ${hostId}` : ""}`}
-            title={`Host: ${hostId}`}
             badge={<HostStatusBadge status={status} />}
-            loading={hostMetaDataLoading}
-            size="large"
             buttons={
               <div>
                 <ButtonsWrapper>
@@ -99,39 +95,43 @@ const Host: React.FC = () => {
                   </ButtonSpacer>
                   <ButtonSpacer>
                     <RestartJasper
-                      // @ts-expect-error: FIXME. This comment was added by an automated script.
-                      selectedHostIds={[hostId]}
+                      canRestartJasper={canRestartJasperOrReprovision}
                       hostUrl={hostUrl}
                       isSingleHost
-                      canRestartJasper={canRestartJasperOrReprovision}
                       jasperTooltipMessage="Jasper cannot be restarted for this host"
+                      // @ts-expect-error: FIXME. This comment was added by an automated script.
+                      selectedHostIds={[hostId]}
                     />
                   </ButtonSpacer>
                   <ButtonSpacer>
                     <Reprovision
-                      // @ts-expect-error: FIXME. This comment was added by an automated script.
-                      selectedHostIds={[hostId]}
+                      canReprovision={canRestartJasperOrReprovision}
                       hostUrl={hostUrl}
                       isSingleHost
-                      canReprovision={canRestartJasperOrReprovision}
                       reprovisionTooltipMessage="This host cannot be reprovisioned"
+                      // @ts-expect-error: FIXME. This comment was added by an automated script.
+                      selectedHostIds={[hostId]}
                     />
                   </ButtonSpacer>
                 </ButtonsWrapper>
               </div>
             }
+            loading={hostMetaDataLoading}
+            pageTitle={`Host${hostId ? ` - ${hostId}` : ""}`}
+            size="large"
+            title={`Host: ${hostId}`}
           />
 
           <PageLayout hasSider>
             <PageSider width={350}>
               <Metadata
-                loading={hostMetaDataLoading}
-                host={host}
                 // @ts-expect-error: FIXME. This comment was added by an automated script.
                 error={error}
+                host={host}
+                loading={hostMetaDataLoading}
               />
               {sshAddress && (
-                <Code language="shell" data-cy="ssh-command">
+                <Code data-cy="ssh-command" language="shell">
                   {sshCommand}
                 </Code>
               )}
@@ -139,15 +139,15 @@ const Host: React.FC = () => {
             <PageLayout>
               <PageContent>
                 <HostTable
-                  loading={hostEventLoading}
-                  // @ts-expect-error: FIXME. This comment was added by an automated script.
-                  eventData={hostEventData}
                   // @ts-expect-error: FIXME. This comment was added by an automated script.
                   error={error}
-                  page={page}
-                  limit={limit}
+                  // @ts-expect-error: FIXME. This comment was added by an automated script.
+                  eventData={hostEventData}
                   // @ts-expect-error: FIXME. This comment was added by an automated script.
                   eventsCount={eventsCount}
+                  limit={limit}
+                  loading={hostEventLoading}
+                  page={page}
                 />
               </PageContent>
             </PageLayout>
@@ -155,12 +155,12 @@ const Host: React.FC = () => {
         </>
       )}
       <UpdateStatusModal
+        closeModal={() => setIsUpdateStatusModalVisible(false)}
         data-cy="update-host-status-modal"
         // @ts-expect-error: FIXME. This comment was added by an automated script.
         hostIds={[hostId]}
-        visible={isUpdateStatusModalVisible}
-        closeModal={() => setIsUpdateStatusModalVisible(false)}
         isHostPage
+        visible={isUpdateStatusModalVisible}
       />
     </PageWrapper>
   );
diff --git a/apps/spruce/src/pages/hosts/HostsTable.tsx b/apps/spruce/src/pages/hosts/HostsTable.tsx
index 17cddb168..e4fcca258 100644
--- a/apps/spruce/src/pages/hosts/HostsTable.tsx
+++ b/apps/spruce/src/pages/hosts/HostsTable.tsx
@@ -6,6 +6,7 @@ import {
   RowSorting,
   SortingState,
   useLeafyGreenTable,
+  LeafyGreenTable,
 } from "@leafygreen-ui/table";
 import { formatDistanceToNow } from "date-fns";
 import { useHostsTableAnalytics } from "analytics";
@@ -63,7 +64,6 @@ export const HostsTable: React.FC<Props> = ({
     sendAnalyticsEvents: () => sendEvent({ name: "Sorted hosts table" }),
   });
 
-  // @ts-expect-error: FIXME. This comment was added by an automated script.
   const setFilters = (f: ColumnFiltersState) =>
     // @ts-expect-error: FIXME. This comment was added by an automated script.
     getDefaultFiltering(table).onColumnFiltersChange(f);
@@ -90,8 +90,8 @@ export const HostsTable: React.FC<Props> = ({
   };
 
   const tableContainerRef = useRef<HTMLDivElement>(null);
-  // @ts-expect-error: FIXME. This comment was added by an automated script.
-  const table = useLeafyGreenTable<Host>({
+
+  const table: LeafyGreenTable<Host> = useLeafyGreenTable<Host>({
     columns,
     containerRef: tableContainerRef,
     data: hosts ?? [],
diff --git a/apps/spruce/src/pages/hosts/index.tsx b/apps/spruce/src/pages/hosts/index.tsx
index 58a42f135..f3dc0b00d 100644
--- a/apps/spruce/src/pages/hosts/index.tsx
+++ b/apps/spruce/src/pages/hosts/index.tsx
@@ -127,7 +127,7 @@ const Hosts: React.FC = () => {
             } of ${totalHostsCount}`}
           </Disclaimer>
           <HostsSelectionWrapper>
-            <Badge variant={Variant.Blue} data-cy="hosts-selection-badge">
+            <Badge data-cy="hosts-selection-badge" variant={Variant.Blue}>
               {selectedHostIds.length} Selected
             </Badge>
             <ButtonWrapper>
@@ -141,49 +141,49 @@ const Hosts: React.FC = () => {
             </ButtonWrapper>
             <ButtonWrapper>
               <RestartJasper
-                selectedHostIds={selectedHostIds}
                 canRestartJasper={canRestartJasper}
                 jasperTooltipMessage={restartJasperError}
+                selectedHostIds={selectedHostIds}
               />
             </ButtonWrapper>
             <ButtonWrapper>
               <Reprovision
-                selectedHostIds={selectedHostIds}
                 canReprovision={canReprovision}
                 reprovisionTooltipMessage={reprovisionError}
+                selectedHostIds={selectedHostIds}
               />
             </ButtonWrapper>
           </HostsSelectionWrapper>
         </SubtitleDataWrapper>
         <TableControlInnerRow>
           <Pagination
-            data-cy="hosts-table-pagination"
             currentPage={page}
-            totalResults={hasFilters ? filteredHostCount : totalHostsCount}
+            data-cy="hosts-table-pagination"
             pageSize={limit}
+            totalResults={hasFilters ? filteredHostCount : totalHostsCount}
           />
           <PageSizeSelector
             data-cy="hosts-table-page-size-selector"
-            value={limit}
             onChange={handlePageSizeChange}
+            value={limit}
           />
         </TableControlInnerRow>
       </TableControlOuterRow>
       <HostsTable
+        hosts={hostItems}
         initialFilters={initialFilters}
         initialSorting={initialSorting}
-        hosts={hostItems}
-        loading={loading && hostItems.length === 0}
         limit={limit}
+        loading={loading && hostItems.length === 0}
         // @ts-expect-error: FIXME. This comment was added by an automated script.
         setSelectedHosts={setSelectedHosts}
       />
       <UpdateStatusModal
+        closeModal={() => setIsUpdateStatusModalVisible(false)}
         data-cy="update-host-status-modal"
         hostIds={selectedHostIds}
-        visible={isUpdateStatusModalVisible}
-        closeModal={() => setIsUpdateStatusModalVisible(false)}
         isHostPage={false}
+        visible={isUpdateStatusModalVisible}
       />
     </PageWrapper>
   );
diff --git a/apps/spruce/src/pages/image/DistrosTable/index.tsx b/apps/spruce/src/pages/image/DistrosTable/index.tsx
index c19373a4d..e208226c7 100644
--- a/apps/spruce/src/pages/image/DistrosTable/index.tsx
+++ b/apps/spruce/src/pages/image/DistrosTable/index.tsx
@@ -89,8 +89,8 @@ const columns: LGColumnDef<Distro>[] = [
           trigger={
             <IconButton aria-label="Information about instance type">
               <Icon
-                glyph="InfoWithCircle"
                 data-cy="instance-type-information"
+                glyph="InfoWithCircle"
               />
             </IconButton>
           }
@@ -98,9 +98,9 @@ const columns: LGColumnDef<Distro>[] = [
         >
           Amazon instance type definitions can be found{" "}
           <StyledLink
-            target="_blank"
-            href={amazonEC2InstanceTypeDocumentationUrl}
             hideExternalIcon={false}
+            href={amazonEC2InstanceTypeDocumentationUrl}
+            target="_blank"
           >
             here
           </StyledLink>
diff --git a/apps/spruce/src/pages/image/ImageEventLog/ImageEventLog.tsx b/apps/spruce/src/pages/image/ImageEventLog/ImageEventLog.tsx
index 1ca5a66e1..4931bda8c 100644
--- a/apps/spruce/src/pages/image/ImageEventLog/ImageEventLog.tsx
+++ b/apps/spruce/src/pages/image/ImageEventLog/ImageEventLog.tsx
@@ -35,10 +35,10 @@ export const ImageEventLog: React.FC<ImageEventLogProps> = ({
       <SearchContainer>
         <SearchInput
           aria-labelledby="event-log-global-search"
-          value={globalSearch}
+          data-cy="event-log-global-search"
           onChange={handleGlobalSearchChange}
           placeholder="Global search by name"
-          data-cy="event-log-global-search"
+          value={globalSearch}
         />
       </SearchContainer>
       {events.map((event) => {
diff --git a/apps/spruce/src/pages/image/ImageEventLog/ImageEventLogTable.tsx b/apps/spruce/src/pages/image/ImageEventLog/ImageEventLogTable.tsx
index 658eca825..bac4ceb8e 100644
--- a/apps/spruce/src/pages/image/ImageEventLog/ImageEventLogTable.tsx
+++ b/apps/spruce/src/pages/image/ImageEventLog/ImageEventLogTable.tsx
@@ -92,13 +92,13 @@ export const ImageEventLogTable: React.FC<ImageEventLogTableProps> = ({
   return (
     <BaseTable
       data-cy-row="image-event-log-table-row"
-      shouldAlternateRowColor
-      table={table}
       emptyComponent={
         <DefaultEmptyMessage data-cy="image-event-log-empty-message">
           {emptyMessage}
         </DefaultEmptyMessage>
       }
+      shouldAlternateRowColor
+      table={table}
     />
   );
 };
diff --git a/apps/spruce/src/pages/image/ImageSelect/index.tsx b/apps/spruce/src/pages/image/ImageSelect/index.tsx
index 624b2668e..d7ab0d156 100644
--- a/apps/spruce/src/pages/image/ImageSelect/index.tsx
+++ b/apps/spruce/src/pages/image/ImageSelect/index.tsx
@@ -32,15 +32,15 @@ export const ImageSelect: React.FC<ImageSelectProps> = ({ selectedImage }) => {
       <Combobox
         clearable={false}
         data-cy="images-select"
-        label="Images"
-        placeholder="Select an image"
-        popoverZIndex={zIndex.popover}
-        portalClassName="images-select-options"
         disabled={loading}
+        label="Images"
         // @ts-expect-error: onChange expects type string | null
         onChange={(imageId: string) => {
           navigate(getImageRoute(imageId));
         }}
+        placeholder="Select an image"
+        popoverZIndex={zIndex.popover}
+        portalClassName="images-select-options"
         value={selectedImage}
       >
         {images?.map((image) => (
diff --git a/apps/spruce/src/pages/image/PackagesTable/index.tsx b/apps/spruce/src/pages/image/PackagesTable/index.tsx
index cc7eabb7f..ab0647e5c 100644
--- a/apps/spruce/src/pages/image/PackagesTable/index.tsx
+++ b/apps/spruce/src/pages/image/PackagesTable/index.tsx
@@ -84,12 +84,12 @@ export const PackagesTable: React.FC<PackagesTableProps> = ({ imageId }) => {
   return (
     <BaseTable
       data-cy-row="packages-table-row"
-      table={table}
-      shouldAlternateRowColor
       loading={loading}
       loadingRows={pagination.pageSize}
-      usePagination
       numTotalItems={numPackages}
+      shouldAlternateRowColor
+      table={table}
+      usePagination
     />
   );
 };
diff --git a/apps/spruce/src/pages/image/Tabs.tsx b/apps/spruce/src/pages/image/Tabs.tsx
index 9d12e0356..735f4cbbc 100644
--- a/apps/spruce/src/pages/image/Tabs.tsx
+++ b/apps/spruce/src/pages/image/Tabs.tsx
@@ -21,16 +21,16 @@ export const ImageTabs: React.FC<ImageTabsProps> = ({
       <Header imageId={imageId} tab={currentTab} />
       <Routes>
         <Route
+          element={<Navigate replace to={ImageTabRoutes.BuildInformation} />}
           path="*"
-          element={<Navigate to={ImageTabRoutes.BuildInformation} replace />}
         />
         <Route
-          path={ImageTabRoutes.BuildInformation}
           element={<BuildInformationTab imageId={imageId} />}
+          path={ImageTabRoutes.BuildInformation}
         />
         <Route
-          path={ImageTabRoutes.EventLog}
           element={<EventLogTab imageId={imageId} />}
+          path={ImageTabRoutes.EventLog}
         />
       </Routes>
     </Container>
diff --git a/apps/spruce/src/pages/image/index.tsx b/apps/spruce/src/pages/image/index.tsx
index ad21e2746..ffc7fd142 100644
--- a/apps/spruce/src/pages/image/index.tsx
+++ b/apps/spruce/src/pages/image/index.tsx
@@ -45,11 +45,11 @@ const Image: React.FC = () => {
         <SideNavGroup>
           {Object.values(ImageTabRoutes).map((tab) => (
             <SideNavItem
+              key={tab}
               active={tab === currentTab}
               as={Link}
-              key={tab}
-              to={getImageRoute(selectedImage, tab)}
               data-cy={`navitem-${tab}`}
+              to={getImageRoute(selectedImage, tab)}
             >
               {getTabTitle(tab).title}
             </SideNavItem>
@@ -57,7 +57,7 @@ const Image: React.FC = () => {
         </SideNavGroup>
       </SideNav>
       <PageWrapper>
-        <ImageTabs imageId={selectedImage} currentTab={currentTab} />
+        <ImageTabs currentTab={currentTab} imageId={selectedImage} />
       </PageWrapper>
     </>
   );
diff --git a/apps/spruce/src/pages/image/tabs/BuildInformationTab/index.tsx b/apps/spruce/src/pages/image/tabs/BuildInformationTab/index.tsx
index 4c5a68814..d4cb1d0de 100644
--- a/apps/spruce/src/pages/image/tabs/BuildInformationTab/index.tsx
+++ b/apps/spruce/src/pages/image/tabs/BuildInformationTab/index.tsx
@@ -15,13 +15,13 @@ export const BuildInformationTab: React.FC<BuildInformationTabProps> = ({
     <SpruceFormContainer title="General">
       <GeneralTable imageId={imageId} />
     </SpruceFormContainer>
-    <SpruceFormContainer title="Distros" data-cy="distros-card">
+    <SpruceFormContainer data-cy="distros-card" title="Distros">
       <DistrosTable imageId={imageId} />
     </SpruceFormContainer>
-    <SpruceFormContainer title="Packages" data-cy="packages-card">
+    <SpruceFormContainer data-cy="packages-card" title="Packages">
       <PackagesTable imageId={imageId} />
     </SpruceFormContainer>
-    <SpruceFormContainer title="Toolchains" data-cy="toolchains-card">
+    <SpruceFormContainer data-cy="toolchains-card" title="Toolchains">
       <ToolchainsTable imageId={imageId} />
     </SpruceFormContainer>
   </>
diff --git a/apps/spruce/src/pages/image/tabs/EventLogTab/EventLogTab.tsx b/apps/spruce/src/pages/image/tabs/EventLogTab/EventLogTab.tsx
index 1c880b69d..0396ae764 100755
--- a/apps/spruce/src/pages/image/tabs/EventLogTab/EventLogTab.tsx
+++ b/apps/spruce/src/pages/image/tabs/EventLogTab/EventLogTab.tsx
@@ -27,11 +27,11 @@ export const EventLogTab: React.FC<EventLogTabProps> = ({ imageId }) => {
         <StyledBody data-cy="header-text">
           With the exception of static hosts, AMI changes correspond to changes
           in the{" "}
-          <StyledLink target="_blank" href={buildHostConfigurationRepoURL}>
+          <StyledLink href={buildHostConfigurationRepoURL} target="_blank">
             buildhost-configuration
           </StyledLink>{" "}
           and{" "}
-          <StyledLink target="_blank" href={buildHostPostConfigRepoURL}>
+          <StyledLink href={buildHostPostConfigRepoURL} target="_blank">
             buildhost-post-config
           </StyledLink>{" "}
           repos.
diff --git a/apps/spruce/src/pages/jobLogs/JobLogsTable.tsx b/apps/spruce/src/pages/jobLogs/JobLogsTable.tsx
index 43f19aecf..52fad025b 100644
--- a/apps/spruce/src/pages/jobLogs/JobLogsTable.tsx
+++ b/apps/spruce/src/pages/jobLogs/JobLogsTable.tsx
@@ -36,6 +36,7 @@ export const JobLogsTable: React.FC<JobLogsTableProps> = ({
         accessorKey: "name",
         cell: ({ getValue, row }) => (
           <Link
+            hideExternalIcon
             // @ts-expect-error: FIXME. This comment was added by an automated script.
             href={getParsleyLogkeeperTestLogURL(buildId, row.original.id)}
             onClick={() => {
@@ -44,7 +45,6 @@ export const JobLogsTable: React.FC<JobLogsTableProps> = ({
                 "build.id": buildId,
               });
             }}
-            hideExternalIcon
           >
             {getValue() as string}
           </Link>
@@ -63,13 +63,13 @@ export const JobLogsTable: React.FC<JobLogsTableProps> = ({
         accessorKey: "testFile",
         cell: ({ getValue, row }) => (
           <Link
+            hideExternalIcon
             href={row.original?.logs?.urlParsley}
             onClick={() => {
               sendEvent({
                 name: "Clicked Parsley test log link",
               });
             }}
-            hideExternalIcon
           >
             {getValue() as string}
           </Link>
@@ -97,12 +97,12 @@ export const JobLogsTable: React.FC<JobLogsTableProps> = ({
   });
   return (
     <BaseTable
-      table={table}
-      shouldAlternateRowColor
-      loading={loading}
       emptyComponent={
         <TablePlaceholder message="No logs found for this job." />
       }
+      loading={loading}
+      shouldAlternateRowColor
+      table={table}
     />
   );
 };
diff --git a/apps/spruce/src/pages/jobLogs/Metadata.tsx b/apps/spruce/src/pages/jobLogs/Metadata.tsx
index d37f93bf5..58e228c78 100644
--- a/apps/spruce/src/pages/jobLogs/Metadata.tsx
+++ b/apps/spruce/src/pages/jobLogs/Metadata.tsx
@@ -36,7 +36,6 @@ export const Metadata: React.FC<{
         <StyledLink
           data-cy="complete-test-logs-link"
           href={metadata.completeLogsURL}
-          target="_blank"
           onClick={() => {
             sendEvent({
               name: "Clicked complete logs link",
@@ -46,6 +45,7 @@ export const Metadata: React.FC<{
               "group.id": metadata.groupID,
             });
           }}
+          target="_blank"
         >
           Complete logs for all tests
         </StyledLink>
diff --git a/apps/spruce/src/pages/jobLogs/index.tsx b/apps/spruce/src/pages/jobLogs/index.tsx
index 4e5a9240c..b36f2e30a 100644
--- a/apps/spruce/src/pages/jobLogs/index.tsx
+++ b/apps/spruce/src/pages/jobLogs/index.tsx
@@ -44,42 +44,42 @@ const JobLogs: React.FC<JobLogsProps> = ({ isLogkeeper }) => {
   return (
     <PageWrapper>
       <PageTitle
-        pageTitle={`Job Logs - ${title}`}
-        title="Job Logs"
-        loading={loading}
-        size="large"
         // @ts-expect-error: FIXME. This comment was added by an automated script.
         badge={null}
-        subtitle={
-          <SubtitleContainer>
-            <H3>{metadata.displayName}</H3>
-            {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
-            <TaskStatusBadge status={metadata.taskStatus} />
-          </SubtitleContainer>
-        }
         buttons={
           <Button
+            data-cy="task-link"
             href={getTaskRoute(metadata.taskId, {
               execution: metadata.execution,
             })}
-            data-cy="task-link"
           >
             Task page
           </Button>
         }
+        loading={loading}
+        pageTitle={`Job Logs - ${title}`}
+        size="large"
+        subtitle={
+          <SubtitleContainer>
+            <H3>{metadata.displayName}</H3>
+            {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
+            <TaskStatusBadge status={metadata.taskStatus} />
+          </SubtitleContainer>
+        }
+        title="Job Logs"
       />
 
       <StyledPageLayout hasSider>
         <PageSider>
-          <Metadata metadata={metadata} loading={loading} />
+          <Metadata loading={loading} metadata={metadata} />
         </PageSider>
         <PageLayout>
           <PageContent>
             <JobLogsTable
               buildId={buildIdFromParams}
-              tests={resultsToRender}
               isLogkeeper={isLogkeeper}
               loading={loading}
+              tests={resultsToRender}
             />
           </PageContent>
         </PageLayout>
diff --git a/apps/spruce/src/pages/preferences/PreferencesTabs.tsx b/apps/spruce/src/pages/preferences/PreferencesTabs.tsx
index 3e9d0a709..c958d05be 100644
--- a/apps/spruce/src/pages/preferences/PreferencesTabs.tsx
+++ b/apps/spruce/src/pages/preferences/PreferencesTabs.tsx
@@ -29,53 +29,53 @@ export const PreferencesTabs: React.FC = () => {
       </TitleContainer>
       <Routes>
         <Route
-          path={PreferencesTabRoutes.Profile}
           element={
             <Container>
               <ProfileTab />
             </Container>
           }
+          path={PreferencesTabRoutes.Profile}
         />
         <Route
-          path={PreferencesTabRoutes.Notifications}
           element={
             <WideContainer>
               <NotificationsTab />
             </WideContainer>
           }
+          path={PreferencesTabRoutes.Notifications}
         />
         <Route
-          path={PreferencesTabRoutes.CLI}
           element={
             <Container>
               <CliTab />
             </Container>
           }
+          path={PreferencesTabRoutes.CLI}
         />
         <Route
-          path={PreferencesTabRoutes.NewUI}
           element={
             <Container>
               <NewUITab />
             </Container>
           }
+          path={PreferencesTabRoutes.NewUI}
         />
         <Route
-          path={PreferencesTabRoutes.PublicKeys}
           element={
             <Container>
               <PublicKeysTab />
             </Container>
           }
+          path={PreferencesTabRoutes.PublicKeys}
         />
         <Route
-          path="*"
           element={
             <Navigate
-              to={getPreferencesRoute(PreferencesTabRoutes.Profile)}
               replace
+              to={getPreferencesRoute(PreferencesTabRoutes.Profile)}
             />
           }
+          path="*"
         />
       </Routes>
     </>
diff --git a/apps/spruce/src/pages/preferences/index.tsx b/apps/spruce/src/pages/preferences/index.tsx
index 2210173a1..13a535ece 100644
--- a/apps/spruce/src/pages/preferences/index.tsx
+++ b/apps/spruce/src/pages/preferences/index.tsx
@@ -25,10 +25,9 @@ const Preferences: React.FC = () => {
   return (
     <>
       <SideNav aria-label="Preferences">
-        <SideNavGroup header="Preferences" glyph={<Icon glyph="Settings" />}>
+        <SideNavGroup glyph={<Icon glyph="Settings" />} header="Preferences">
           <SideNavItem
             active={tab === PreferencesTabRoutes.Profile}
-            to={getPreferencesRoute(PreferencesTabRoutes.Profile)}
             as={Link}
             data-cy="profile-nav-tab"
             onClick={() =>
@@ -37,12 +36,12 @@ const Preferences: React.FC = () => {
                 tab: PreferencesTabRoutes.Profile,
               })
             }
+            to={getPreferencesRoute(PreferencesTabRoutes.Profile)}
           >
             Profile
           </SideNavItem>
           <SideNavItem
             active={tab === PreferencesTabRoutes.Notifications}
-            to={getPreferencesRoute(PreferencesTabRoutes.Notifications)}
             as={Link}
             data-cy="notifications-nav-tab"
             onClick={() =>
@@ -51,12 +50,12 @@ const Preferences: React.FC = () => {
                 tab: PreferencesTabRoutes.Notifications,
               })
             }
+            to={getPreferencesRoute(PreferencesTabRoutes.Notifications)}
           >
             Notifications
           </SideNavItem>
           <SideNavItem
             active={tab === PreferencesTabRoutes.CLI}
-            to={getPreferencesRoute(PreferencesTabRoutes.CLI)}
             as={Link}
             data-cy="cli-nav-tab"
             onClick={() =>
@@ -65,12 +64,12 @@ const Preferences: React.FC = () => {
                 tab: PreferencesTabRoutes.CLI,
               })
             }
+            to={getPreferencesRoute(PreferencesTabRoutes.CLI)}
           >
             CLI & API
           </SideNavItem>
           <SideNavItem
             active={tab === PreferencesTabRoutes.PublicKeys}
-            to={getPreferencesRoute(PreferencesTabRoutes.PublicKeys)}
             as={Link}
             data-cy="publickeys-nav-tab"
             onClick={() =>
@@ -79,12 +78,12 @@ const Preferences: React.FC = () => {
                 tab: PreferencesTabRoutes.PublicKeys,
               })
             }
+            to={getPreferencesRoute(PreferencesTabRoutes.PublicKeys)}
           >
             Public Keys
           </SideNavItem>
           <SideNavItem
             active={tab === PreferencesTabRoutes.NewUI}
-            to={getPreferencesRoute(PreferencesTabRoutes.NewUI)}
             as={Link}
             data-cy="newui-nav-tab"
             onClick={() =>
@@ -93,6 +92,7 @@ const Preferences: React.FC = () => {
                 tab: PreferencesTabRoutes.NewUI,
               })
             }
+            to={getPreferencesRoute(PreferencesTabRoutes.NewUI)}
           >
             New UI
           </SideNavItem>
diff --git a/apps/spruce/src/pages/preferences/preferencesTabs/NewUITab.tsx b/apps/spruce/src/pages/preferences/preferencesTabs/NewUITab.tsx
index 1470fb4ae..500447873 100644
--- a/apps/spruce/src/pages/preferences/preferencesTabs/NewUITab.tsx
+++ b/apps/spruce/src/pages/preferences/preferencesTabs/NewUITab.tsx
@@ -68,12 +68,12 @@ export const NewUITab: React.FC = () => {
     <SettingsCard>
       <PreferenceItem>
         <Toggle
+          aria-label="Toggle new evergreen ui"
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           checked={spruceV1}
           disabled={updateLoading}
-          onChange={handleOnChangeNewUI}
-          aria-label="Toggle new evergreen ui"
           id="prefer-spruce"
+          onChange={handleOnChangeNewUI}
           size="small"
         />
         <Label htmlFor="prefer-spruce">
@@ -83,10 +83,10 @@ export const NewUITab: React.FC = () => {
       </PreferenceItem>
       <PreferenceItem>
         <Toggle
-          checked={Cookies.get(DISABLE_QUERY_POLLING) !== "true"}
-          onChange={handleOnChangePolling}
           aria-label="Toggle background polling"
+          checked={Cookies.get(DISABLE_QUERY_POLLING) !== "true"}
           id="polling"
+          onChange={handleOnChangePolling}
           size="small"
         />
         <Label htmlFor="polling">
diff --git a/apps/spruce/src/pages/preferences/preferencesTabs/NotificationsTab.tsx b/apps/spruce/src/pages/preferences/preferencesTabs/NotificationsTab.tsx
index 8008194c7..6b2fbb202 100644
--- a/apps/spruce/src/pages/preferences/preferencesTabs/NotificationsTab.tsx
+++ b/apps/spruce/src/pages/preferences/preferencesTabs/NotificationsTab.tsx
@@ -89,19 +89,19 @@ export const NotificationsTab: React.FC = () => {
     <>
       <SettingsCard>
         <StyledTextInput
+          data-cy="slack-username-field"
           label="Slack Username"
           onChange={handleFieldUpdate(setSlackUsernameField)}
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           value={slackUsernameField}
-          data-cy="slack-username-field"
         />
         <StyledTextInput
+          data-cy="slack-member-id-field"
+          description="Click on the three dots next to 'set a status' in your Slack profile, and then 'Copy member ID'."
           label="Slack Member ID"
           onChange={handleFieldUpdate(setSlackMemberIdField)}
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           value={slackMemberIdField}
-          description="Click on the three dots next to 'set a status' in your Slack profile, and then 'Copy member ID'."
-          data-cy="slack-member-id-field"
         />
         <NotificationField
           notifications={newPayload}
@@ -110,9 +110,9 @@ export const NotificationsTab: React.FC = () => {
         />
         <Button
           data-cy="save-profile-changes-button"
-          variant={Variant.Primary}
           disabled={!hasFieldUpdates || updateLoading}
           onClick={handleSave}
+          variant={Variant.Primary}
         >
           Save changes
         </Button>
diff --git a/apps/spruce/src/pages/preferences/preferencesTabs/ProfileTab.tsx b/apps/spruce/src/pages/preferences/preferencesTabs/ProfileTab.tsx
index 36dc0cd8b..90bba524c 100644
--- a/apps/spruce/src/pages/preferences/preferencesTabs/ProfileTab.tsx
+++ b/apps/spruce/src/pages/preferences/preferencesTabs/ProfileTab.tsx
@@ -112,30 +112,11 @@ export const ProfileTab: React.FC = () => {
     <SettingsCard>
       <ContentWrapper>
         <SpruceForm
+          formData={formState}
           onChange={({ errors, formData }) => {
             setHasErrors(errors.length > 0);
             setFormState(formData);
           }}
-          formData={formState}
-          uiSchema={{
-            timezone: {
-              "ui:placeholder": "Select a timezone",
-            },
-            region: {
-              "ui:placeholder": "Select an AWS region",
-            },
-            githubUser: {
-              lastKnownAs: {
-                "ui:placeholder": "Enter your GitHub username",
-              },
-            },
-            dateFormat: {
-              "ui:placeholder": "Select a date format",
-            },
-            timeFormat: {
-              "ui:widget": "radio",
-            },
-          }}
           schema={{
             properties: {
               githubUser: {
@@ -196,12 +177,31 @@ export const ProfileTab: React.FC = () => {
               },
             },
           }}
+          uiSchema={{
+            timezone: {
+              "ui:placeholder": "Select a timezone",
+            },
+            region: {
+              "ui:placeholder": "Select an AWS region",
+            },
+            githubUser: {
+              lastKnownAs: {
+                "ui:placeholder": "Enter your GitHub username",
+              },
+            },
+            dateFormat: {
+              "ui:placeholder": "Select a date format",
+            },
+            timeFormat: {
+              "ui:widget": "radio",
+            },
+          }}
         />
         <Button
           data-cy="save-profile-changes-button"
-          variant={Variant.Primary}
           disabled={!hasErrors || updateLoading}
           onClick={handleSubmit}
+          variant={Variant.Primary}
         >
           Save changes
         </Button>
diff --git a/apps/spruce/src/pages/preferences/preferencesTabs/PublicKeysTab.tsx b/apps/spruce/src/pages/preferences/preferencesTabs/PublicKeysTab.tsx
index 129b9e251..36810ae0d 100644
--- a/apps/spruce/src/pages/preferences/preferencesTabs/PublicKeysTab.tsx
+++ b/apps/spruce/src/pages/preferences/preferencesTabs/PublicKeysTab.tsx
@@ -19,7 +19,6 @@ export const PublicKeysTab: React.FC = () => {
   return (
     <div>
       <PlusButton
-        size="small"
         data-cy="add-key-button"
         onClick={() => {
           setEditModalProps({
@@ -28,6 +27,7 @@ export const PublicKeysTab: React.FC = () => {
             initialPublicKey: null,
           });
         }}
+        size="small"
       >
         Add key
       </PlusButton>
diff --git a/apps/spruce/src/pages/preferences/preferencesTabs/cliTab/AuthenticationCard.tsx b/apps/spruce/src/pages/preferences/preferencesTabs/cliTab/AuthenticationCard.tsx
index 2d68e0a5d..d10818ee7 100644
--- a/apps/spruce/src/pages/preferences/preferencesTabs/cliTab/AuthenticationCard.tsx
+++ b/apps/spruce/src/pages/preferences/preferencesTabs/cliTab/AuthenticationCard.tsx
@@ -60,7 +60,7 @@ ui_server_host: "${config?.ui_server_host}"
         <Code language="yaml">{authCode}</Code>
       </CodeContainer>
       <ButtonGroup>
-        <Button variant={Variant.Primary} onClick={downloadFile}>
+        <Button onClick={downloadFile} variant={Variant.Primary}>
           Download file
         </Button>
         <Button onClick={resetKey}>Reset key</Button>
diff --git a/apps/spruce/src/pages/preferences/preferencesTabs/cliTab/DownloadCard.tsx b/apps/spruce/src/pages/preferences/preferencesTabs/cliTab/DownloadCard.tsx
index a170028ef..c0fb791e9 100644
--- a/apps/spruce/src/pages/preferences/preferencesTabs/cliTab/DownloadCard.tsx
+++ b/apps/spruce/src/pages/preferences/preferencesTabs/cliTab/DownloadCard.tsx
@@ -59,13 +59,13 @@ export const DownloadCard = () => {
         {topBinaries.map((binary) => (
           <CliDownloadBox
             key={`downloadBox_${binary.url}`}
+            // @ts-expect-error: FIXME. This comment was added by an automated script.
+            description={descriptions[binary.displayName]}
+            link={binary.url}
             title={
               // @ts-expect-error: FIXME. This comment was added by an automated script.
               prettyDisplayNameTop[binary.displayName] || binary.displayName
             }
-            link={binary.url}
-            // @ts-expect-error: FIXME. This comment was added by an automated script.
-            description={descriptions[binary.displayName]}
           />
         ))}
       </CardGroup>
@@ -92,16 +92,16 @@ const CliDownloadBox: React.FC<CliDownloadBoxProps> = ({
       <CliDownloadTitle>{title}</CliDownloadTitle>
       {description && <Disclaimer>{description}</Disclaimer>}
       <CliDownloadButton
+        as="a"
+        disabled={!link}
+        // @ts-expect-error: FIXME. This comment was added by an automated script.
+        href={link}
         onClick={() => {
           sendEvent({
             name: "Clicked CLI download link",
             "download.name": title,
           });
         }}
-        // @ts-expect-error: FIXME. This comment was added by an automated script.
-        href={link}
-        disabled={!link}
-        as="a"
         size="small"
       >
         Download
@@ -121,14 +121,14 @@ const ExpandableLinkContents: React.FC<ExpandableLinkContentsProps> = ({
     <LinkContainer>
       {clientBinaries.map((binary) => (
         <StyledLink
+          key={`link_${binary.url}`}
+          href={binary.url}
           onClick={() => {
             sendEvent({
               name: "Clicked CLI download link",
               "download.name": binary.displayName || "",
             });
           }}
-          key={`link_${binary.url}`}
-          href={binary.url}
         >
           {binary.displayName}
         </StyledLink>
diff --git a/apps/spruce/src/pages/preferences/preferencesTabs/cliTab/NodeList.stories.tsx b/apps/spruce/src/pages/preferences/preferencesTabs/cliTab/NodeList.stories.tsx
index 634340553..2566954df 100644
--- a/apps/spruce/src/pages/preferences/preferencesTabs/cliTab/NodeList.stories.tsx
+++ b/apps/spruce/src/pages/preferences/preferencesTabs/cliTab/NodeList.stories.tsx
@@ -10,9 +10,9 @@ export default {
 export const NodeElement: CustomStoryObj<typeof Node> = {
   render: () => (
     <Node
-      title="Download the Command-Line Client."
       child={<Child />}
       stepNumber={1}
+      title="Download the Command-Line Client."
     />
   ),
 };
diff --git a/apps/spruce/src/pages/preferences/preferencesTabs/cliTab/NodeList.tsx b/apps/spruce/src/pages/preferences/preferencesTabs/cliTab/NodeList.tsx
index b682fd065..78bc22a0d 100644
--- a/apps/spruce/src/pages/preferences/preferencesTabs/cliTab/NodeList.tsx
+++ b/apps/spruce/src/pages/preferences/preferencesTabs/cliTab/NodeList.tsx
@@ -13,9 +13,9 @@ export const NodeList: React.FC<NodeListProps> = ({ list }) => (
     {list.map((node, index) => (
       <Node
         key={formatZeroIndexForDisplay(index)}
-        title={node.title}
         child={node.child}
         stepNumber={formatZeroIndexForDisplay(index)}
+        title={node.title}
       />
     ))}
   </NodeContainer>
diff --git a/apps/spruce/src/pages/preferences/preferencesTabs/notificationTab/ClearSubscriptions.tsx b/apps/spruce/src/pages/preferences/preferencesTabs/notificationTab/ClearSubscriptions.tsx
index b710240c6..f41c75baf 100644
--- a/apps/spruce/src/pages/preferences/preferencesTabs/notificationTab/ClearSubscriptions.tsx
+++ b/apps/spruce/src/pages/preferences/preferencesTabs/notificationTab/ClearSubscriptions.tsx
@@ -42,24 +42,24 @@ export const ClearSubscriptions: React.FC = () => {
     <>
       <Button
         data-cy="clear-subscriptions-button"
-        variant={Variant.Danger}
         onClick={() => setShowModal(true)}
+        variant={Variant.Danger}
       >
         Clear all previous subscriptions
       </Button>
       <ConfirmationModal
-        open={showModal}
-        title="Clear All Subscriptions"
+        buttonText="Clear All"
+        onCancel={() => setShowModal(false)}
         onConfirm={() => {
           clearMySubscriptions();
           sendEvent({
             name: "Deleted subscriptions",
           });
         }}
-        onCancel={() => setShowModal(false)}
-        variant="danger"
-        buttonText="Clear All"
+        open={showModal}
         submitDisabled={loading}
+        title="Clear All Subscriptions"
+        variant="danger"
       >
         Are you sure you want to clear all subscriptions you have made on
         individual version, task, and project pages?
diff --git a/apps/spruce/src/pages/preferences/preferencesTabs/notificationTab/NotificationField.tsx b/apps/spruce/src/pages/preferences/preferencesTabs/notificationTab/NotificationField.tsx
index 7b113f22f..99ac53994 100644
--- a/apps/spruce/src/pages/preferences/preferencesTabs/notificationTab/NotificationField.tsx
+++ b/apps/spruce/src/pages/preferences/preferencesTabs/notificationTab/NotificationField.tsx
@@ -29,7 +29,6 @@ export const NotificationField: React.FC<NotificationFieldProps> = ({
           {notificationFields[notification]}
         </NotificationEvent>
         <StyledRadioGroup
-          row={index}
           onChange={(e) => {
             // @ts-expect-error: FIXME. This comment was added by an automated script.
             setNotificationStatus({
@@ -37,6 +36,7 @@ export const NotificationField: React.FC<NotificationFieldProps> = ({
               [notification]: e.target.value,
             });
           }}
+          row={index}
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           value={notificationStatus[notification]}
         >
diff --git a/apps/spruce/src/pages/preferences/preferencesTabs/notificationTab/UserSubscriptions.tsx b/apps/spruce/src/pages/preferences/preferencesTabs/notificationTab/UserSubscriptions.tsx
index 16ace2942..9d6f97790 100644
--- a/apps/spruce/src/pages/preferences/preferencesTabs/notificationTab/UserSubscriptions.tsx
+++ b/apps/spruce/src/pages/preferences/preferencesTabs/notificationTab/UserSubscriptions.tsx
@@ -228,24 +228,24 @@ const SubscriptionsTable: React.FC<{
         </Button>
         <PaginationWrapper>
           <Pagination
+            currentPage={table.getState().pagination.pageIndex + 1}
             itemsPerPage={table.getState().pagination.pageSize}
-            onItemsPerPageOptionChange={(value: string) => {
-              table.setPageSize(Number(value));
-            }}
             numTotalItems={subscriptions.length}
-            currentPage={table.getState().pagination.pageIndex + 1}
+            onBackArrowClick={() => table.previousPage()}
             onCurrentPageOptionChange={(value: string) => {
               table.setPageIndex(Number(value) - 1);
             }}
-            onBackArrowClick={() => table.previousPage()}
             onForwardArrowClick={() => table.nextPage()}
+            onItemsPerPageOptionChange={(value: string) => {
+              table.setPageSize(Number(value));
+            }}
           />
         </PaginationWrapper>
       </InteractiveWrapper>
       <BaseTable
         data-cy-row="subscription-row"
-        table={table}
         shouldAlternateRowColor
+        table={table}
       />
       <TableFooter>
         <ClearSubscriptions />
diff --git a/apps/spruce/src/pages/preferences/preferencesTabs/publicKeysTab/EditModal.tsx b/apps/spruce/src/pages/preferences/preferencesTabs/publicKeysTab/EditModal.tsx
index 689e221dc..7fccd3d2c 100644
--- a/apps/spruce/src/pages/preferences/preferencesTabs/publicKeysTab/EditModal.tsx
+++ b/apps/spruce/src/pages/preferences/preferencesTabs/publicKeysTab/EditModal.tsx
@@ -123,32 +123,32 @@ export const EditModal: React.FC<EditModalProps> = ({
 
   return (
     <ConfirmationModal
+      buttonText="Save"
       data-cy="key-edit-modal"
-      open={visible}
       onCancel={closeModal}
       onConfirm={onClickSave}
+      open={visible}
       submitDisabled={errors.length > 0}
-      buttonText="Save"
       title={replaceKeyName ? "Update Public Key" : "Add Public Key"}
     >
       <StyledInput
-        label="Key Name"
-        id={KEY_NAME_ID}
         data-cy={KEY_NAME_ID}
-        value={keyName}
+        id={KEY_NAME_ID}
+        label="Key Name"
         onChange={(e) => {
           setKeyName(e.target.value);
         }}
         spellCheck={false}
+        value={keyName}
       />
       <TextArea
-        label="Public Key"
-        id={KEY_VALUE_ID}
         data-cy={KEY_VALUE_ID}
-        value={keyValue}
+        id={KEY_VALUE_ID}
+        label="Public Key"
         onChange={(e) => setKeyValue(e.target.value)}
         rows={8}
         spellCheck={false}
+        value={keyValue}
       />
       <ErrorContainer>
         {visible &&
diff --git a/apps/spruce/src/pages/preferences/preferencesTabs/publicKeysTab/PublicKeysTable.tsx b/apps/spruce/src/pages/preferences/preferencesTabs/publicKeysTab/PublicKeysTable.tsx
index c84221582..31d267643 100644
--- a/apps/spruce/src/pages/preferences/preferencesTabs/publicKeysTab/PublicKeysTable.tsx
+++ b/apps/spruce/src/pages/preferences/preferencesTabs/publicKeysTab/PublicKeysTable.tsx
@@ -73,7 +73,6 @@ export const PublicKeysTable: React.FC<PublicKeysTableProps> = ({
           return (
             <ButtonContainer>
               <Button
-                size="small"
                 data-cy="edit-btn"
                 leftGlyph={<Icon glyph="Edit" />}
                 onClick={() => {
@@ -82,6 +81,7 @@ export const PublicKeysTable: React.FC<PublicKeysTableProps> = ({
                     visible: true,
                   });
                 }}
+                size="small"
               />
               <Popconfirm
                 align="right"
@@ -91,9 +91,9 @@ export const PublicKeysTable: React.FC<PublicKeysTableProps> = ({
                 }}
                 trigger={
                   <Button
-                    size="small"
                     data-cy="delete-btn"
                     disabled={loadingRemovePublicKey}
+                    size="small"
                   >
                     <Icon glyph="Trash" />
                   </Button>
diff --git a/apps/spruce/src/pages/projectSettings/CreateDuplicateProjectButton.tsx b/apps/spruce/src/pages/projectSettings/CreateDuplicateProjectButton.tsx
index 585c1b7d9..aad9c432b 100644
--- a/apps/spruce/src/pages/projectSettings/CreateDuplicateProjectButton.tsx
+++ b/apps/spruce/src/pages/projectSettings/CreateDuplicateProjectButton.tsx
@@ -14,8 +14,8 @@ import { ProjectType } from "./tabs/utils";
 
 const NewProjectButton = (
   <PlusButton
-    size={Size.Small}
     data-cy="new-project-button"
+    size={Size.Small}
     variant={Variant.Primary}
   >
     New Project
@@ -68,11 +68,11 @@ export const CreateDuplicateProjectButton: React.FC<Props> = ({
         })
       ) : (
         <Menu
+          data-cy="new-project-menu"
           open={menuOpen}
-          setOpen={setMenuOpen}
           popoverZIndex={zIndex.popover}
+          setOpen={setMenuOpen}
           trigger={NewProjectButton}
-          data-cy="new-project-menu"
         >
           <MenuItem
             data-cy="create-project-button"
diff --git a/apps/spruce/src/pages/projectSettings/CreateProjectModal.tsx b/apps/spruce/src/pages/projectSettings/CreateProjectModal.tsx
index b8644823e..39c4bc7fc 100644
--- a/apps/spruce/src/pages/projectSettings/CreateProjectModal.tsx
+++ b/apps/spruce/src/pages/projectSettings/CreateProjectModal.tsx
@@ -133,7 +133,7 @@ export const CreateProjectModal: React.FC<Props> = ({
           uiSchema={form.uiSchema}
         />
       ) : (
-        <Skeleton paragraph={{ rows: 11 }} data-cy="loading-skeleton" />
+        <Skeleton data-cy="loading-skeleton" paragraph={{ rows: 11 }} />
       )}
     </ConfirmationModal>
   );
diff --git a/apps/spruce/src/pages/projectSettings/DefaultSectionToRepoModal.tsx b/apps/spruce/src/pages/projectSettings/DefaultSectionToRepoModal.tsx
index 8f0ed03a4..22b240925 100644
--- a/apps/spruce/src/pages/projectSettings/DefaultSectionToRepoModal.tsx
+++ b/apps/spruce/src/pages/projectSettings/DefaultSectionToRepoModal.tsx
@@ -58,9 +58,9 @@ export const DefaultSectionToRepoModal = ({
         handleClose();
       }}
       open={open}
-      variant="danger"
       requiredInputText="confirm"
       title="Are you sure you want to default all settings in this section to the repo settings?"
+      variant="danger"
     >
       <>
         <Body weight="medium">
diff --git a/apps/spruce/src/pages/projectSettings/HeaderButtons.tsx b/apps/spruce/src/pages/projectSettings/HeaderButtons.tsx
index 8299a7314..8594625de 100644
--- a/apps/spruce/src/pages/projectSettings/HeaderButtons.tsx
+++ b/apps/spruce/src/pages/projectSettings/HeaderButtons.tsx
@@ -141,17 +141,17 @@ export const HeaderButtons: React.FC<Props> = ({ id, projectType, tab }) => {
     <ButtonRow>
       <Button
         data-cy="save-settings-button"
-        variant="primary"
-        onClick={onClick}
         disabled={hasError || !hasChanges}
+        onClick={onClick}
+        variant="primary"
       >
         Save changes on page
       </Button>
       {projectType === ProjectType.AttachedProject && canDefaultToRepo && (
         <>
           <Button
-            onClick={() => setDefaultModalOpen(true)}
             data-cy="default-to-repo-button"
+            onClick={() => setDefaultModalOpen(true)}
             title="Clicking this button will open a confirmation modal with more information."
           >
             Default to repo on page
diff --git a/apps/spruce/src/pages/projectSettings/Tabs.tsx b/apps/spruce/src/pages/projectSettings/Tabs.tsx
index e704cde2a..a5f87f3b8 100644
--- a/apps/spruce/src/pages/projectSettings/Tabs.tsx
+++ b/apps/spruce/src/pages/projectSettings/Tabs.tsx
@@ -91,20 +91,19 @@ export const ProjectSettingsTabs: React.FC<Props> = ({
       />
       <Routes>
         <Route
-          path={ProjectSettingsTabRoutes.General}
           element={
             <GeneralTab
-              projectId={projectId}
               projectData={
                 tabData[ProjectSettingsTabRoutes.General].projectData
               }
+              projectId={projectId}
               projectType={projectType}
               repoData={tabData[ProjectSettingsTabRoutes.General].repoData}
             />
           }
+          path={ProjectSettingsTabRoutes.General}
         />
         <Route
-          path={ProjectSettingsTabRoutes.Access}
           element={
             <AccessTab
               projectData={tabData[ProjectSettingsTabRoutes.Access].projectData}
@@ -112,9 +111,9 @@ export const ProjectSettingsTabs: React.FC<Props> = ({
               repoData={tabData[ProjectSettingsTabRoutes.Access].repoData}
             />
           }
+          path={ProjectSettingsTabRoutes.Access}
         />
         <Route
-          path={ProjectSettingsTabRoutes.Variables}
           element={
             <VariablesTab
               // @ts-expect-error: FIXME. This comment was added by an automated script.
@@ -126,9 +125,9 @@ export const ProjectSettingsTabs: React.FC<Props> = ({
               repoData={tabData[ProjectSettingsTabRoutes.Variables].repoData}
             />
           }
+          path={ProjectSettingsTabRoutes.Variables}
         />
         <Route
-          path={ProjectSettingsTabRoutes.GithubCommitQueue}
           element={
             <GithubCommitQueueTab
               // @ts-expect-error: FIXME. This comment was added by an automated script.
@@ -154,9 +153,9 @@ export const ProjectSettingsTabs: React.FC<Props> = ({
               }
             />
           }
+          path={ProjectSettingsTabRoutes.GithubCommitQueue}
         />
         <Route
-          path={ProjectSettingsTabRoutes.Plugins}
           element={
             <PluginsTab
               projectData={
@@ -166,9 +165,9 @@ export const ProjectSettingsTabs: React.FC<Props> = ({
               repoData={tabData[ProjectSettingsTabRoutes.Plugins].repoData}
             />
           }
+          path={ProjectSettingsTabRoutes.Plugins}
         />
         <Route
-          path={ProjectSettingsTabRoutes.Notifications}
           element={
             <NotificationsTab
               id={projectId || repoData?.projectRef?.id}
@@ -181,9 +180,9 @@ export const ProjectSettingsTabs: React.FC<Props> = ({
               }
             />
           }
+          path={ProjectSettingsTabRoutes.Notifications}
         />
         <Route
-          path={ProjectSettingsTabRoutes.PatchAliases}
           element={
             <PatchAliasesTab
               projectData={
@@ -193,9 +192,9 @@ export const ProjectSettingsTabs: React.FC<Props> = ({
               repoData={tabData[ProjectSettingsTabRoutes.PatchAliases].repoData}
             />
           }
+          path={ProjectSettingsTabRoutes.PatchAliases}
         />
         <Route
-          path={ProjectSettingsTabRoutes.VirtualWorkstation}
           element={
             <VirtualWorkstationTab
               // @ts-expect-error: FIXME. This comment was added by an automated script.
@@ -209,9 +208,9 @@ export const ProjectSettingsTabs: React.FC<Props> = ({
               }
             />
           }
+          path={ProjectSettingsTabRoutes.VirtualWorkstation}
         />
         <Route
-          path={ProjectSettingsTabRoutes.Containers}
           element={
             <ContainersTab
               // @ts-expect-error: FIXME. This comment was added by an automated script.
@@ -223,9 +222,9 @@ export const ProjectSettingsTabs: React.FC<Props> = ({
               repoData={tabData[ProjectSettingsTabRoutes.Containers].repoData}
             />
           }
+          path={ProjectSettingsTabRoutes.Containers}
         />
         <Route
-          path={ProjectSettingsTabRoutes.ViewsAndFilters}
           element={
             <ViewsAndFiltersTab
               // @ts-expect-error: FIXME. This comment was added by an automated script.
@@ -239,9 +238,9 @@ export const ProjectSettingsTabs: React.FC<Props> = ({
               }
             />
           }
+          path={ProjectSettingsTabRoutes.ViewsAndFilters}
         />
         <Route
-          path={ProjectSettingsTabRoutes.ProjectTriggers}
           element={
             <ProjectTriggersTab
               projectData={
@@ -253,9 +252,9 @@ export const ProjectSettingsTabs: React.FC<Props> = ({
               }
             />
           }
+          path={ProjectSettingsTabRoutes.ProjectTriggers}
         />
         <Route
-          path={ProjectSettingsTabRoutes.PeriodicBuilds}
           element={
             <PeriodicBuildsTab
               projectData={
@@ -267,27 +266,27 @@ export const ProjectSettingsTabs: React.FC<Props> = ({
               }
             />
           }
+          path={ProjectSettingsTabRoutes.PeriodicBuilds}
         />
         <Route
-          path={ProjectSettingsTabRoutes.GithubAppSettings}
           element={
             <AppSettingsTab
-              projectData={
-                tabData[ProjectSettingsTabRoutes.GithubAppSettings].projectData
-              }
               githubPermissionGroups={
                 projectData?.projectRef?.githubDynamicTokenPermissionGroups ??
                 []
               }
               // @ts-expect-error: FIXME. This comment was added by an automated script.
               identifier={identifier}
+              projectData={
+                tabData[ProjectSettingsTabRoutes.GithubAppSettings].projectData
+              }
               // @ts-expect-error: FIXME. This comment was added by an automated script.
               projectId={projectId}
             />
           }
+          path={ProjectSettingsTabRoutes.GithubAppSettings}
         />
         <Route
-          path={ProjectSettingsTabRoutes.GithubPermissionGroups}
           element={
             <PermissionGroupsTab
               // @ts-expect-error: FIXME. This comment was added by an automated script.
@@ -298,20 +297,21 @@ export const ProjectSettingsTabs: React.FC<Props> = ({
               }
             />
           }
+          path={ProjectSettingsTabRoutes.GithubPermissionGroups}
         />
         <Route
-          path={ProjectSettingsTabRoutes.EventLog}
           element={
             <EventLogTab
-              projectType={projectType}
               key={identifier}
               limit={45}
+              projectType={projectType}
             />
           }
+          path={ProjectSettingsTabRoutes.EventLog}
         />
         <Route
+          element={<Navigate replace to={ProjectSettingsTabRoutes.General} />}
           path="*"
-          element={<Navigate to={ProjectSettingsTabRoutes.General} replace />}
         />
       </Routes>
     </Container>
diff --git a/apps/spruce/src/pages/projectSettings/createDuplicateModalSchema.tsx b/apps/spruce/src/pages/projectSettings/createDuplicateModalSchema.tsx
index 4259f1200..7cae37380 100644
--- a/apps/spruce/src/pages/projectSettings/createDuplicateModalSchema.tsx
+++ b/apps/spruce/src/pages/projectSettings/createDuplicateModalSchema.tsx
@@ -27,9 +27,9 @@ const enablePerformanceTooling = {
 
 const PerformanceToolingBanner: Field = () => (
   <Banner
-    variant="warning"
     data-cy="performance-tooling-banner"
     style={{ marginBottom: "20px" }}
+    variant="warning"
   >
     Please confirm these preferences before creating your project. You will not
     be able to configure the project for performance tooling at a later date.
diff --git a/apps/spruce/src/pages/projectSettings/index.tsx b/apps/spruce/src/pages/projectSettings/index.tsx
index 6b5c0b553..b0243a6cc 100644
--- a/apps/spruce/src/pages/projectSettings/index.tsx
+++ b/apps/spruce/src/pages/projectSettings/index.tsx
@@ -176,21 +176,21 @@ const ProjectSettings: React.FC = () => {
       <SideNav aria-label="Project Settings" widthOverride={250}>
         <ButtonsContainer>
           <StyledProjectSelect
-            // @ts-expect-error: FIXME. This comment was added by an automated script.
-            selectedProjectIdentifier={projectLabel}
             getRoute={getProjectSettingsRoute}
             isProjectSettingsPage
+            // @ts-expect-error: FIXME. This comment was added by an automated script.
+            selectedProjectIdentifier={projectLabel}
           />
           {projectType === ProjectType.AttachedProject && repoId && (
             <StyledRouterLink
               arrowAppearance="persist"
+              data-cy="attached-repo-link"
               to={getProjectSettingsRoute(
                 repoId,
                 tab && projectOnlyTabs.has(tab)
                   ? ProjectSettingsTabRoutes.General
                   : tab,
               )}
-              data-cy="attached-repo-link"
             >
               <strong>Go to repo settings</strong>
             </StyledRouterLink>
@@ -277,12 +277,12 @@ const ProjectSettings: React.FC = () => {
         </SideNavGroup>
       </SideNav>
       <PageWrapper
-        data-cy="project-settings-page"
+        ref={pageWrapperRef}
         css={css`
           padding-top: 0;
           margin-top: ${size.m};
         `}
-        ref={pageWrapperRef}
+        data-cy="project-settings-page"
       >
         {hasLoaded ? (
           <ProjectSettingsTabs
@@ -308,8 +308,8 @@ const ProjectSettingsNavItem: React.FC<{
   <SideNavItem
     active={tab === currentTab}
     as={Link}
-    to={getProjectSettingsRoute(projectIdentifier, tab)}
     data-cy={`navitem-${tab}`}
+    to={getProjectSettingsRoute(projectIdentifier, tab)}
   >
     {title || getTabTitle(tab).title}
   </SideNavItem>
diff --git a/apps/spruce/src/pages/projectSettings/tabs/EventLogTab/EventLogTab.test.tsx b/apps/spruce/src/pages/projectSettings/tabs/EventLogTab/EventLogTab.test.tsx
index d83916b5e..e4ece8b23 100644
--- a/apps/spruce/src/pages/projectSettings/tabs/EventLogTab/EventLogTab.test.tsx
+++ b/apps/spruce/src/pages/projectSettings/tabs/EventLogTab/EventLogTab.test.tsx
@@ -42,7 +42,7 @@ describe("loading events", () => {
     const { Component } = RenderFakeToastContext(
       // @ts-expect-error: FIXME. This comment was added by an automated script.
       <Wrapper mocks={[mock(limit)]}>
-        <EventLogTab projectType={ProjectType.AttachedProject} limit={limit} />
+        <EventLogTab limit={limit} projectType={ProjectType.AttachedProject} />
       </Wrapper>,
     );
     render(<Component />, {
diff --git a/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/Fields/DeactivateStepbackTaskField.tsx b/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/Fields/DeactivateStepbackTaskField.tsx
index 88c3a59cb..b963caacd 100644
--- a/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/Fields/DeactivateStepbackTaskField.tsx
+++ b/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/Fields/DeactivateStepbackTaskField.tsx
@@ -55,12 +55,12 @@ const Modal: React.FC<ModalProps> = ({ closeModal, open, projectId }) => {
   return (
     <ConfirmationModal
       buttonText="Confirm"
+      data-cy="deactivate-stepback-modal"
       onCancel={closeModal}
       onConfirm={onConfirm}
       open={open}
       submitDisabled={hasError || loading}
       title="Deactivate Scheduled Stepback Task"
-      data-cy="deactivate-stepback-modal"
     >
       <p>
         Specify a stepback task to deactivate. To deactivate stepback more
@@ -104,10 +104,10 @@ export const DeactivateStepbackTaskField: Field = ({ uiSchema }) => {
         </Description>
         <div>
           <Button
+            data-cy={id}
             id={id}
             onClick={() => setOpen(true)}
             size="small"
-            data-cy={id}
           >
             Deactivate
           </Button>
diff --git a/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/Fields/DeleteProjectField.tsx b/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/Fields/DeleteProjectField.tsx
index 01aec2aa5..e0a912da3 100644
--- a/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/Fields/DeleteProjectField.tsx
+++ b/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/Fields/DeleteProjectField.tsx
@@ -50,13 +50,13 @@ const Modal: React.FC<ModalProps> = ({ closeModal, open, projectId }) => {
   return (
     <ConfirmationModal
       buttonText="Delete"
-      variant="danger"
+      data-cy="delete-project-modal"
       onCancel={closeModal}
       onConfirm={onConfirm}
       open={open}
       submitDisabled={loading}
       title={`Delete “${identifier}”?`}
-      data-cy="delete-project-modal"
+      variant="danger"
     >
       <p>This action cannot be undone. Please proceed with caution.</p>
     </ConfirmationModal>
@@ -82,8 +82,8 @@ export const DeleteProjectField: Field = ({ uiSchema }) => {
         after deletion.
       </Description>
       <StyledButton
-        onClick={() => setOpen(true)}
         data-cy="delete-project-button"
+        onClick={() => setOpen(true)}
         variant="danger"
       >
         Delete project
diff --git a/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/Fields/RepoConfigField.test.tsx b/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/Fields/RepoConfigField.test.tsx
index 555e575ad..1e6181a53 100644
--- a/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/Fields/RepoConfigField.test.tsx
+++ b/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/Fields/RepoConfigField.test.tsx
@@ -115,8 +115,8 @@ describe("repoConfigField", () => {
     const user = userEvent.setup();
     const { Component } = RenderFakeToastContext(
       <Field
-        projectType={ProjectType.Project}
         formData={{ owner: "newOwner", repo: defaultFormData.repo }}
+        projectType={ProjectType.Project}
       />,
     );
     render(<Component />);
@@ -141,8 +141,8 @@ describe("repoConfigField", () => {
     const user = userEvent.setup();
     const { Component } = RenderFakeToastContext(
       <Field
-        projectType={ProjectType.Project}
         formData={{ owner: defaultFormData.owner, repo: "newRepo" }}
+        projectType={ProjectType.Project}
       />,
     );
     render(<Component />);
diff --git a/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/Fields/RepoConfigField.tsx b/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/Fields/RepoConfigField.tsx
index cbc654fac..b99ed85c1 100644
--- a/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/Fields/RepoConfigField.tsx
+++ b/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/Fields/RepoConfigField.tsx
@@ -55,9 +55,9 @@ export const RepoConfigField: Field = ({
             {isAttachedProject && !!githubOrgs.length && (
               <>
                 <Button
+                  data-cy="move-repo-button"
                   onClick={() => setMoveModalOpen(true)}
                   size="small"
-                  data-cy="move-repo-button"
                 >
                   Move to New Repo
                 </Button>
@@ -77,19 +77,19 @@ export const RepoConfigField: Field = ({
               enabled={ownerOrRepoHasChanges}
               justify="middle"
               popoverZIndex={zIndex.popover}
-              triggerEvent="hover"
               trigger={
                 <Button
-                  size="small"
-                  onClick={() => setAttachModalOpen(true)}
                   data-cy="attach-repo-button"
                   disabled={ownerOrRepoHasChanges}
+                  onClick={() => setAttachModalOpen(true)}
+                  size="small"
                 >
                   {isAttachedProject
                     ? "Detach from Current Repo"
                     : "Attach to Current Repo"}
                 </Button>
               }
+              triggerEvent="hover"
             >
               Project must be saved with new owner/repo before it can be
               attached.
diff --git a/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/Fields/RepotrackerField.tsx b/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/Fields/RepotrackerField.tsx
index ea09df1d4..bdf597fb8 100644
--- a/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/Fields/RepotrackerField.tsx
+++ b/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/Fields/RepotrackerField.tsx
@@ -79,9 +79,9 @@ export const RepotrackerField: Field = ({ uiSchema }) => {
       )}
       <ElementWrapper>
         <Button
+          data-cy="force-repotracker-run-button"
           onClick={() => setOpen(true)}
           size="small"
-          data-cy="force-repotracker-run-button"
         >
           Force Repotracker Run
         </Button>
diff --git a/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/GeneralTab.tsx b/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/GeneralTab.tsx
index ede740239..389260ac9 100644
--- a/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/GeneralTab.tsx
+++ b/apps/spruce/src/pages/projectSettings/tabs/GeneralTab/GeneralTab.tsx
@@ -60,9 +60,9 @@ export const GeneralTab: React.FC<TabProps> = ({
 
   return (
     <BaseTab
+      formSchema={formSchema}
       // @ts-expect-error: FIXME. This comment was added by an automated script.
       initialFormState={initialFormState}
-      formSchema={formSchema}
       tab={tab}
       validate={validate(projectType)}
     />
diff --git a/apps/spruce/src/pages/projectSettings/tabs/GithubAppSettingsTab/AppSettingsTab.tsx b/apps/spruce/src/pages/projectSettings/tabs/GithubAppSettingsTab/AppSettingsTab.tsx
index 8406877fa..eb4137102 100644
--- a/apps/spruce/src/pages/projectSettings/tabs/GithubAppSettingsTab/AppSettingsTab.tsx
+++ b/apps/spruce/src/pages/projectSettings/tabs/GithubAppSettingsTab/AppSettingsTab.tsx
@@ -31,8 +31,8 @@ export const AppSettingsTab: React.FC<TabProps> = ({
 
   return (
     <BaseTab
-      initialFormState={initialFormState}
       formSchema={formSchema}
+      initialFormState={initialFormState}
       tab={tab}
       validate={validate}
     />
diff --git a/apps/spruce/src/pages/projectSettings/tabs/GithubCommitQueueTab/GithubTriggerAliasField.tsx b/apps/spruce/src/pages/projectSettings/tabs/GithubCommitQueueTab/GithubTriggerAliasField.tsx
index 236a282f6..daa0fbb9c 100644
--- a/apps/spruce/src/pages/projectSettings/tabs/GithubCommitQueueTab/GithubTriggerAliasField.tsx
+++ b/apps/spruce/src/pages/projectSettings/tabs/GithubCommitQueueTab/GithubTriggerAliasField.tsx
@@ -62,9 +62,9 @@ export const GithubTriggerAliasField: Field = ({ formData }) => {
   return (
     <InlineDefinition
       align="right"
-      justify="start"
-      definition={hoverContent}
       data-cy="pta-tooltip"
+      definition={hoverContent}
+      justify="start"
     >
       <span data-cy="pta-item">{alias}</span>
     </InlineDefinition>
diff --git a/apps/spruce/src/pages/projectSettings/tabs/GithubPermissionGroupsTab/FieldTemplates.tsx b/apps/spruce/src/pages/projectSettings/tabs/GithubPermissionGroupsTab/FieldTemplates.tsx
index e7c5e46d1..913aa4764 100644
--- a/apps/spruce/src/pages/projectSettings/tabs/GithubPermissionGroupsTab/FieldTemplates.tsx
+++ b/apps/spruce/src/pages/projectSettings/tabs/GithubPermissionGroupsTab/FieldTemplates.tsx
@@ -29,12 +29,12 @@ export const ArrayFieldTemplate: React.FC<
     <>
       <BaseTable
         data-cy="github-permissions-table"
-        table={table}
         emptyComponent={
           <Body style={{ marginLeft: tableColumnOffset }}>
             No permission groups added yet.
           </Body>
         }
+        table={table}
       />
       <ButtonWrapper>
         <PlusButton
@@ -74,9 +74,9 @@ const columns: LGColumnDef<ArrayItem>[] = [
     header: "Action",
     cell: ({ row }) => (
       <Button
-        onClick={row.original.onDropIndexClick(row.index)}
-        leftGlyph={<Icon glyph="Trash" />}
         data-cy="delete-permission-button"
+        leftGlyph={<Icon glyph="Trash" />}
+        onClick={row.original.onDropIndexClick(row.index)}
         size="small"
       />
     ),
diff --git a/apps/spruce/src/pages/projectSettings/tabs/GithubPermissionGroupsTab/PermissionGroupsTab.tsx b/apps/spruce/src/pages/projectSettings/tabs/GithubPermissionGroupsTab/PermissionGroupsTab.tsx
index ddd99f43e..345ff8e42 100644
--- a/apps/spruce/src/pages/projectSettings/tabs/GithubPermissionGroupsTab/PermissionGroupsTab.tsx
+++ b/apps/spruce/src/pages/projectSettings/tabs/GithubPermissionGroupsTab/PermissionGroupsTab.tsx
@@ -18,8 +18,8 @@ export const PermissionGroupsTab: React.FC<TabProps> = ({
 
   return (
     <BaseTab
-      initialFormState={initialFormState}
       formSchema={formSchema}
+      initialFormState={initialFormState}
       tab={tab}
       validate={validate}
     />
diff --git a/apps/spruce/src/pages/projectSettings/tabs/GithubPermissionGroupsTab/getFormSchema.tsx b/apps/spruce/src/pages/projectSettings/tabs/GithubPermissionGroupsTab/getFormSchema.tsx
index b7089fb74..0457effc4 100644
--- a/apps/spruce/src/pages/projectSettings/tabs/GithubPermissionGroupsTab/getFormSchema.tsx
+++ b/apps/spruce/src/pages/projectSettings/tabs/GithubPermissionGroupsTab/getFormSchema.tsx
@@ -103,8 +103,8 @@ export const getFormSchema = ({
             have the permissions that are defined on this page.
           </StyledDescription>
           <StyledLink
-            href={githubPermissionsDocumentationUrl}
             hideExternalIcon={false}
+            href={githubPermissionsDocumentationUrl}
           >
             Learn more about GitHub permissions
           </StyledLink>
diff --git a/apps/spruce/src/pages/projectSettings/tabs/VariablesTab/PromoteVariablesModal.tsx b/apps/spruce/src/pages/projectSettings/tabs/VariablesTab/PromoteVariablesModal.tsx
index daec5deb6..d6976b4b5 100644
--- a/apps/spruce/src/pages/projectSettings/tabs/VariablesTab/PromoteVariablesModal.tsx
+++ b/apps/spruce/src/pages/projectSettings/tabs/VariablesTab/PromoteVariablesModal.tsx
@@ -117,15 +117,15 @@ export const PromoteVariablesModal: React.FC<Props> = ({
       </SelectAllContainer>
       {variables.map(({ inRepo, name }) => (
         <Checkbox
-          data-cy="promote-var-checkbox"
           key={name}
+          checked={selected.has(name)}
+          data-cy="promote-var-checkbox"
           label={
             <>
               {name}
               {inRepo && <DuplicateVarTooltip />}
             </>
           }
-          checked={selected.has(name)}
           onClick={handleClickCheckbox(name)}
         />
       ))}
diff --git a/apps/spruce/src/pages/projectSettings/tabs/VariablesTab/VariablesTab.tsx b/apps/spruce/src/pages/projectSettings/tabs/VariablesTab/VariablesTab.tsx
index 9b208c472..e70a60aa7 100644
--- a/apps/spruce/src/pages/projectSettings/tabs/VariablesTab/VariablesTab.tsx
+++ b/apps/spruce/src/pages/projectSettings/tabs/VariablesTab/VariablesTab.tsx
@@ -64,9 +64,9 @@ export const VariablesTab: React.FC<TabProps> = ({
     <>
       {modalOpen && (
         <PromoteVariablesModal
-          projectId={identifier}
-          open={modalOpen}
           handleClose={() => setModalOpen(false)}
+          open={modalOpen}
+          projectId={identifier}
           variables={formData.vars.map(({ varName }) => ({
             name: varName,
             inRepo:
diff --git a/apps/spruce/src/pages/spawn/SpawnVolume.tsx b/apps/spruce/src/pages/spawn/SpawnVolume.tsx
index 46586a2bf..d6d6fe4bd 100644
--- a/apps/spruce/src/pages/spawn/SpawnVolume.tsx
+++ b/apps/spruce/src/pages/spawn/SpawnVolume.tsx
@@ -69,9 +69,9 @@ export const SpawnVolume = () => {
         </BadgeWrapper>
       </TitleContainer>
       <SpawnVolumeButton
+        maxSpawnableLimit={maxSpawnableLimit}
         // @ts-expect-error: FIXME. This comment was added by an automated script.
         volumeLimit={volumeLimit}
-        maxSpawnableLimit={maxSpawnableLimit}
       />
       {volumes.length ? (
         <SpawnVolumeTable volumes={volumes} />
diff --git a/apps/spruce/src/pages/spawn/index.tsx b/apps/spruce/src/pages/spawn/index.tsx
index cc01a70b7..a702f6031 100644
--- a/apps/spruce/src/pages/spawn/index.tsx
+++ b/apps/spruce/src/pages/spawn/index.tsx
@@ -20,7 +20,6 @@ const Spawn: React.FC = () => {
         <SideNavGroup header="Hosts & Volumes">
           <SideNavItem
             active={tab === SpawnTab.Host}
-            to={routes.spawnHost}
             as={Link}
             data-cy="host-nav-tab"
             onClick={() =>
@@ -29,12 +28,12 @@ const Spawn: React.FC = () => {
                 tab: SpawnTab.Host,
               })
             }
+            to={routes.spawnHost}
           >
             Hosts
           </SideNavItem>
           <SideNavItem
             active={tab === SpawnTab.Volume}
-            to={routes.spawnVolume}
             as={Link}
             data-cy="volume-nav-tab"
             onClick={() =>
@@ -43,6 +42,7 @@ const Spawn: React.FC = () => {
                 tab: SpawnTab.Volume,
               })
             }
+            to={routes.spawnVolume}
           >
             Volumes
           </SideNavItem>
@@ -50,13 +50,13 @@ const Spawn: React.FC = () => {
       </SideNav>
       <PageWrapper>
         <Routes>
-          <Route path={SpawnTab.Host} element={<SpawnHost />} />
-          <Route path={SpawnTab.Volume} element={<SpawnVolume />} />
+          <Route element={<SpawnHost />} path={SpawnTab.Host} />
+          <Route element={<SpawnVolume />} path={SpawnTab.Volume} />
           <Route
-            path="*"
             element={
-              <Navigate to={`${routes.spawn}/${SpawnTab.Host}`} replace />
+              <Navigate replace to={`${routes.spawn}/${SpawnTab.Host}`} />
             }
+            path="*"
           />
         </Routes>
       </PageWrapper>
diff --git a/apps/spruce/src/pages/spawn/spawnHost/EditSpawnHostButton.tsx b/apps/spruce/src/pages/spawn/spawnHost/EditSpawnHostButton.tsx
index 5591a5503..75c48a062 100644
--- a/apps/spruce/src/pages/spawn/spawnHost/EditSpawnHostButton.tsx
+++ b/apps/spruce/src/pages/spawn/spawnHost/EditSpawnHostButton.tsx
@@ -29,10 +29,8 @@ export const EditSpawnHostButton: React.FC<EditSpawnHostButtonProps> = ({
           align="top"
           enabled={!canEditSpawnHost}
           justify="middle"
-          triggerEvent="hover"
           trigger={
             <Button
-              size={Size.XSmall}
               data-cy="edit-host-button"
               disabled={!canEditSpawnHost}
               onClick={(e) => {
@@ -44,19 +42,21 @@ export const EditSpawnHostButton: React.FC<EditSpawnHostButtonProps> = ({
                   "host.status": host.status,
                 });
               }}
+              size={Size.XSmall}
             >
               Edit
             </Button>
           }
+          triggerEvent="hover"
         >
           {`Can only edit a spawn host when the status is ${HostStatus.Stopped} or ${HostStatus.Running}`}
         </Tooltip>
       </span>
       <EditSpawnHostModal
         key={host.id}
+        host={host}
         onCancel={() => setOpenModal(false)}
         visible={openModal}
-        host={host}
       />
     </>
   );
diff --git a/apps/spruce/src/pages/spawn/spawnHost/EditSpawnHostModal.test.tsx b/apps/spruce/src/pages/spawn/spawnHost/EditSpawnHostModal.test.tsx
index a620b68b8..3121a657a 100644
--- a/apps/spruce/src/pages/spawn/spawnHost/EditSpawnHostModal.test.tsx
+++ b/apps/spruce/src/pages/spawn/spawnHost/EditSpawnHostModal.test.tsx
@@ -34,7 +34,7 @@ describe("editSpawnHostModal", () => {
 
   it("renders modal", () => {
     const { Component } = RenderFakeToastContext(
-      <EditSpawnHostModal host={baseSpawnHost} visible onCancel={() => {}} />,
+      <EditSpawnHostModal host={baseSpawnHost} onCancel={() => {}} visible />,
     );
     render(
       <MockedProvider mocks={baseMocks}>
@@ -46,7 +46,7 @@ describe("editSpawnHostModal", () => {
 
   it("disables save button when no changes have been made", () => {
     const { Component } = RenderFakeToastContext(
-      <EditSpawnHostModal host={baseSpawnHost} visible onCancel={() => {}} />,
+      <EditSpawnHostModal host={baseSpawnHost} onCancel={() => {}} visible />,
     );
     render(
       <MockedProvider mocks={baseMocks}>
@@ -63,7 +63,7 @@ describe("editSpawnHostModal", () => {
   describe("when default sleep schedule is enabled", () => {
     it("has default sleep schedule checkbox checked", () => {
       const { Component } = RenderFakeToastContext(
-        <EditSpawnHostModal host={baseSpawnHost} visible onCancel={() => {}} />,
+        <EditSpawnHostModal host={baseSpawnHost} onCancel={() => {}} visible />,
       );
       render(
         <MockedProvider mocks={baseMocks}>
@@ -80,7 +80,7 @@ describe("editSpawnHostModal", () => {
 
     it("has all daypicker elements disabled", () => {
       const { Component } = RenderFakeToastContext(
-        <EditSpawnHostModal host={baseSpawnHost} visible onCancel={() => {}} />,
+        <EditSpawnHostModal host={baseSpawnHost} onCancel={() => {}} visible />,
       );
       render(
         <MockedProvider mocks={baseMocks}>
@@ -97,7 +97,7 @@ describe("editSpawnHostModal", () => {
 
     it("has default days selected", () => {
       const { Component } = RenderFakeToastContext(
-        <EditSpawnHostModal host={baseSpawnHost} visible onCancel={() => {}} />,
+        <EditSpawnHostModal host={baseSpawnHost} onCancel={() => {}} visible />,
       );
       render(
         <MockedProvider mocks={baseMocks}>
@@ -127,7 +127,7 @@ describe("editSpawnHostModal", () => {
 
     it("has timepicker elements disabled", () => {
       const { Component } = RenderFakeToastContext(
-        <EditSpawnHostModal host={baseSpawnHost} visible onCancel={() => {}} />,
+        <EditSpawnHostModal host={baseSpawnHost} onCancel={() => {}} visible />,
       );
       render(
         <MockedProvider mocks={baseMocks}>
@@ -150,7 +150,7 @@ describe("editSpawnHostModal", () => {
     it("shows the updated hour count when changing the schedule", async () => {
       const user = userEvent.setup();
       const { Component } = RenderFakeToastContext(
-        <EditSpawnHostModal host={baseSpawnHost} visible onCancel={() => {}} />,
+        <EditSpawnHostModal host={baseSpawnHost} onCancel={() => {}} visible />,
       );
       render(
         <MockedProvider mocks={baseMocks}>
@@ -181,7 +181,7 @@ describe("editSpawnHostModal", () => {
     it("shows a warning when user has configured a schedule over the recommended limit", async () => {
       const user = userEvent.setup();
       const { Component } = RenderFakeToastContext(
-        <EditSpawnHostModal host={baseSpawnHost} visible onCancel={() => {}} />,
+        <EditSpawnHostModal host={baseSpawnHost} onCancel={() => {}} visible />,
       );
       render(
         <MockedProvider mocks={baseMocks}>
@@ -207,7 +207,7 @@ describe("editSpawnHostModal", () => {
     it("shows an error and disables save when user has configured a schedule over the hard limit", async () => {
       const user = userEvent.setup();
       const { Component } = RenderFakeToastContext(
-        <EditSpawnHostModal host={baseSpawnHost} visible onCancel={() => {}} />,
+        <EditSpawnHostModal host={baseSpawnHost} onCancel={() => {}} visible />,
       );
       render(
         <MockedProvider mocks={baseMocks}>
@@ -251,8 +251,8 @@ describe("editSpawnHostModal", () => {
       const { Component } = RenderFakeToastContext(
         <EditSpawnHostModal
           host={tempExemptSpawnHost}
-          visible
           onCancel={() => {}}
+          visible
         />,
       );
       render(
diff --git a/apps/spruce/src/pages/spawn/spawnHost/EditSpawnHostModal.tsx b/apps/spruce/src/pages/spawn/spawnHost/EditSpawnHostModal.tsx
index ac792a131..4aa07d044 100644
--- a/apps/spruce/src/pages/spawn/spawnHost/EditSpawnHostModal.tsx
+++ b/apps/spruce/src/pages/spawn/spawnHost/EditSpawnHostModal.tsx
@@ -180,26 +180,26 @@ export const EditSpawnHostModal: React.FC<EditSpawnHostModalProps> = ({
 
   return (
     <ConfirmationModal
-      title="Edit Host Details"
-      open={visible}
+      buttonText={loadingSpawnHost ? "Saving" : "Save"}
       data-cy="edit-spawn-host-modal"
-      submitDisabled={!hasChanges || hasError || loadingSpawnHost}
       onCancel={() => {
         onCancel();
         // @ts-expect-error: FIXME. This comment was added by an automated script.
         setFormState(initialFormState);
       }}
       onConfirm={onSubmit}
-      buttonText={loadingSpawnHost ? "Saving" : "Save"}
+      open={visible}
+      submitDisabled={!hasChanges || hasError || loadingSpawnHost}
+      title="Edit Host Details"
     >
       <SpruceForm
-        schema={schema}
-        uiSchema={uiSchema}
         formData={formState}
         onChange={({ errors, formData }) => {
           setFormState(formData);
           setHasError(errors.length > 0);
         }}
+        schema={schema}
+        uiSchema={uiSchema}
         // @ts-expect-error rjsf v4 has insufficient typing for its validator
         validate={validator(!!host?.sleepSchedule?.permanentlyExempt)}
       />
diff --git a/apps/spruce/src/pages/spawn/spawnHost/PauseSleepScheduleModal.tsx b/apps/spruce/src/pages/spawn/spawnHost/PauseSleepScheduleModal.tsx
index 5d7b1836e..0d4a824b6 100644
--- a/apps/spruce/src/pages/spawn/spawnHost/PauseSleepScheduleModal.tsx
+++ b/apps/spruce/src/pages/spawn/spawnHost/PauseSleepScheduleModal.tsx
@@ -31,12 +31,12 @@ export const PauseSleepScheduleModal: React.FC<{
     <ConfirmationModal
       buttonText={pauseButtonText}
       data-cy="pause-sleep-schedule-modal"
-      open={open}
       onCancel={() => setOpen(false)}
       onConfirm={() => {
         handleConfirm(shouldKeepOff);
         setOpen(false);
       }}
+      open={open}
       setOpen={setOpen}
       title="Configure Host Pause"
     >
diff --git a/apps/spruce/src/pages/spawn/spawnHost/SpawnHostActionButton.tsx b/apps/spruce/src/pages/spawn/spawnHost/SpawnHostActionButton.tsx
index ed624d367..84b4389a9 100644
--- a/apps/spruce/src/pages/spawn/spawnHost/SpawnHostActionButton.tsx
+++ b/apps/spruce/src/pages/spawn/spawnHost/SpawnHostActionButton.tsx
@@ -117,8 +117,8 @@ export const SpawnHostActionButton: React.FC<{ host: MyHost }> = ({ host }) => {
             data-cy="pause-unexpirable-host-button"
             disabled={loading || host.status === HostStatus.Stopping}
             leftGlyph={<Icon glyph={glyph} />}
-            size={Size.XSmall}
             onClick={() => setSleepModalOpen((o) => !o)}
+            size={Size.XSmall}
           />
           <PauseSleepScheduleModal
             handleConfirm={(shouldKeepOff) =>
@@ -135,8 +135,8 @@ export const SpawnHostActionButton: React.FC<{ host: MyHost }> = ({ host }) => {
           <Button
             disabled={loading || host.status === HostStatus.Stopping}
             leftGlyph={<Icon glyph={glyph} />}
-            size={Size.XSmall}
             onClick={() => handleClick(action)}
+            size={Size.XSmall}
           />
         )
       )}
@@ -145,11 +145,11 @@ export const SpawnHostActionButton: React.FC<{ host: MyHost }> = ({ host }) => {
         onConfirm={() => handleClick(SpawnHostStatusActions.Terminate)}
         trigger={
           <Button
-            size={Size.XSmall}
             disabled={!canTerminate}
             onClick={(e) => {
               e.stopPropagation();
             }}
+            size={Size.XSmall}
           >
             <Icon glyph="Trash" />
           </Button>
@@ -158,12 +158,12 @@ export const SpawnHostActionButton: React.FC<{ host: MyHost }> = ({ host }) => {
         Delete host “{host.displayName || host.id}”?
         {checkboxLabel && (
           <Checkbox
+            checked={checkboxAcknowledged}
             label={checkboxLabel}
             onChange={(e) => {
               e.nativeEvent.stopPropagation();
               setCheckboxAcknowledged(!checkboxAcknowledged);
             }}
-            checked={checkboxAcknowledged}
           />
         )}
       </Popconfirm>
diff --git a/apps/spruce/src/pages/spawn/spawnHost/SpawnHostButton.tsx b/apps/spruce/src/pages/spawn/spawnHost/SpawnHostButton.tsx
index c1e64d9a7..afd09b4ea 100644
--- a/apps/spruce/src/pages/spawn/spawnHost/SpawnHostButton.tsx
+++ b/apps/spruce/src/pages/spawn/spawnHost/SpawnHostButton.tsx
@@ -38,11 +38,12 @@ export const SpawnHostButton: React.FC = () => {
     <PaddedContainer>
       <Tooltip
         align="top"
+        enabled={reachedMaxNumHosts}
         justify="middle"
-        triggerEvent="hover"
         popoverZIndex={zIndex.tooltip}
         trigger={
           <PlusButton
+            data-cy="spawn-host-button"
             disabled={reachedMaxNumHosts}
             onClick={() => {
               setOpenModal(true);
@@ -50,12 +51,11 @@ export const SpawnHostButton: React.FC = () => {
                 name: "Viewed spawn host modal",
               });
             }}
-            data-cy="spawn-host-button"
           >
             Spawn a host
           </PlusButton>
         }
-        enabled={reachedMaxNumHosts}
+        triggerEvent="hover"
       >
         {`You have reached the maximum number of hosts (${maxHosts}). Delete some hosts to spawn more.`}
       </Tooltip>
diff --git a/apps/spruce/src/pages/spawn/spawnHost/SpawnHostTable.tsx b/apps/spruce/src/pages/spawn/spawnHost/SpawnHostTable.tsx
index f8577cb96..34eaabb2b 100644
--- a/apps/spruce/src/pages/spawn/spawnHost/SpawnHostTable.tsx
+++ b/apps/spruce/src/pages/spawn/spawnHost/SpawnHostTable.tsx
@@ -52,7 +52,7 @@ export const SpawnHostTable: React.FC<SpawnHostTableProps> = ({ hosts }) => {
     },
   });
 
-  return <BaseTable table={table} shouldAlternateRowColor />;
+  return <BaseTable shouldAlternateRowColor table={table} />;
 };
 
 const columns = [
diff --git a/apps/spruce/src/pages/spawn/spawnHost/SpawnHostTableActions.test.tsx b/apps/spruce/src/pages/spawn/spawnHost/SpawnHostTableActions.test.tsx
index 3e80a7679..24b769725 100644
--- a/apps/spruce/src/pages/spawn/spawnHost/SpawnHostTableActions.test.tsx
+++ b/apps/spruce/src/pages/spawn/spawnHost/SpawnHostTableActions.test.tsx
@@ -47,9 +47,9 @@ describe("copySSHCommandButton", () => {
     render(
       <MockedProvider mocks={[getUserMock]}>
         <CopySSHCommandButton
-          user={testUser}
-          hostUrl={hostUrl}
           hostStatus={HostStatus.Running}
+          hostUrl={hostUrl}
+          user={testUser}
         />
       </MockedProvider>,
     );
@@ -88,9 +88,9 @@ describe("copySSHCommandButton", () => {
     render(
       <MockedProvider mocks={[getUserMock]}>
         <CopySSHCommandButton
-          user={testUser}
-          hostUrl=""
           hostStatus={HostStatus.Starting}
+          hostUrl=""
+          user={testUser}
         />
       </MockedProvider>,
     );
@@ -112,9 +112,9 @@ describe("copySSHCommandButton", () => {
     render(
       <MockedProvider mocks={[getUserMock]}>
         <CopySSHCommandButton
-          user={testUser}
-          hostUrl={hostUrl}
           hostStatus={HostStatus.Terminated}
+          hostUrl={hostUrl}
+          user={testUser}
         />
       </MockedProvider>,
     );
diff --git a/apps/spruce/src/pages/spawn/spawnHost/SpawnHostTableActions.tsx b/apps/spruce/src/pages/spawn/spawnHost/SpawnHostTableActions.tsx
index 4493c6714..8dfdf2f29 100644
--- a/apps/spruce/src/pages/spawn/spawnHost/SpawnHostTableActions.tsx
+++ b/apps/spruce/src/pages/spawn/spawnHost/SpawnHostTableActions.tsx
@@ -18,10 +18,10 @@ export const SpawnHostTableActions: React.FC<{ host: MyHost }> = ({ host }) => (
   <FlexContainer>
     <SpawnHostActionButton host={host} />
     <CopySSHCommandButton
+      hostStatus={host.status}
+      hostUrl={host.persistentDnsName || host.hostUrl}
       // @ts-expect-error: FIXME. This comment was added by an automated script.
       user={host.user}
-      hostUrl={host.persistentDnsName || host.hostUrl}
-      hostStatus={host.status}
     />
     <EditSpawnHostButton host={host} />
   </FlexContainer>
@@ -52,8 +52,8 @@ export const CopySSHCommandButton: React.FC<{
     >
       <Tooltip
         align="top"
-        justify="middle"
         data-cy="copy-ssh-tooltip"
+        justify="middle"
         trigger={
           <Button
             data-cy="copy-ssh-button"
diff --git a/apps/spruce/src/pages/spawn/spawnHost/spawnHostButton/SpawnHostModal.tsx b/apps/spruce/src/pages/spawn/spawnHost/spawnHostButton/SpawnHostModal.tsx
index 1b94f0f12..c9d664775 100644
--- a/apps/spruce/src/pages/spawn/spawnHost/spawnHostButton/SpawnHostModal.tsx
+++ b/apps/spruce/src/pages/spawn/spawnHost/spawnHostButton/SpawnHostModal.tsx
@@ -151,24 +151,24 @@ export const SpawnHostModal: React.FC<SpawnHostModalProps> = ({
 
   return (
     <ConfirmationModal
-      title="Spawn New Host"
-      open={open}
+      buttonText={loadingSpawnHost ? "Spawning" : "Spawn a host"}
       data-cy="spawn-host-modal"
-      submitDisabled={hasError || loadingSpawnHost}
       onCancel={() => {
         setOpen(false);
       }}
       onConfirm={spawnHost}
-      buttonText={loadingSpawnHost ? "Spawning" : "Spawn a host"}
+      open={open}
+      submitDisabled={hasError || loadingSpawnHost}
+      title="Spawn New Host"
     >
       <SpruceForm
-        schema={schema}
-        uiSchema={uiSchema}
         formData={formState}
         onChange={({ errors, formData }) => {
           setFormState(formData);
           setHasError(errors.length > 0);
         }}
+        schema={schema}
+        uiSchema={uiSchema}
         // @ts-expect-error rjsf v4 has insufficient typing for its validator
         validate={validator(!!spawnHost?.sleepSchedule?.permanentlyExempt)}
       />
diff --git a/apps/spruce/src/pages/spawn/spawnVolume/SpawnVolumeButton.tsx b/apps/spruce/src/pages/spawn/spawnVolume/SpawnVolumeButton.tsx
index b63a93450..a36427ec7 100644
--- a/apps/spruce/src/pages/spawn/spawnVolume/SpawnVolumeButton.tsx
+++ b/apps/spruce/src/pages/spawn/spawnVolume/SpawnVolumeButton.tsx
@@ -26,8 +26,8 @@ export const SpawnVolumeButton: React.FC<SpawnVolumeButtonProps> = ({
     <PaddedContainer>
       <Tooltip
         align="top"
+        enabled={reachedMaxVolumeSize}
         justify="middle"
-        triggerEvent="hover"
         popoverZIndex={zIndex.tooltip}
         trigger={
           <PlusButton
@@ -43,16 +43,16 @@ export const SpawnVolumeButton: React.FC<SpawnVolumeButtonProps> = ({
             Spawn a volume
           </PlusButton>
         }
-        enabled={reachedMaxVolumeSize}
+        triggerEvent="hover"
       >
         {`You have reached the max volume limit (${volumeLimit} GiB). Delete some volumes to spawn more.`}
       </Tooltip>
       <Info>Limit {volumeLimit} GiB per User</Info>
       {openModal && (
         <SpawnVolumeModal
-          visible={openModal}
-          onCancel={() => setOpenModal(false)}
           maxSpawnableLimit={maxSpawnableLimit}
+          onCancel={() => setOpenModal(false)}
+          visible={openModal}
         />
       )}
     </PaddedContainer>
diff --git a/apps/spruce/src/pages/spawn/spawnVolume/SpawnVolumeModal.test.tsx b/apps/spruce/src/pages/spawn/spawnVolume/SpawnVolumeModal.test.tsx
index bfa288bc9..de37426f0 100644
--- a/apps/spruce/src/pages/spawn/spawnVolume/SpawnVolumeModal.test.tsx
+++ b/apps/spruce/src/pages/spawn/spawnVolume/SpawnVolumeModal.test.tsx
@@ -32,9 +32,9 @@ describe("spawnVolumeModal", () => {
   it("does not render the Spawn Volume Modal when the visible prop is false", () => {
     const { Component } = RenderFakeToastContext(
       <SpawnVolumeModal
-        visible={false}
-        onCancel={() => {}}
         maxSpawnableLimit={1000}
+        onCancel={() => {}}
+        visible={false}
       />,
     );
     render(
@@ -47,7 +47,7 @@ describe("spawnVolumeModal", () => {
 
   it("form contains default values on initial render", async () => {
     const { Component } = RenderFakeToastContext(
-      <SpawnVolumeModal visible onCancel={() => {}} maxSpawnableLimit={1000} />,
+      <SpawnVolumeModal maxSpawnableLimit={1000} onCancel={() => {}} visible />,
     );
     render(
       <MockedProvider mocks={baseMocks}>
@@ -92,7 +92,7 @@ describe("spawnVolumeModal", () => {
       result: { data: { spawnVolume: true } },
     };
     const { Component, dispatchToast } = RenderFakeToastContext(
-      <SpawnVolumeModal visible onCancel={() => {}} maxSpawnableLimit={1000} />,
+      <SpawnVolumeModal maxSpawnableLimit={1000} onCancel={() => {}} visible />,
     );
     render(
       <MockedProvider mocks={[...baseMocks, spawnVolumeMutation]}>
@@ -135,7 +135,7 @@ describe("spawnVolumeModal", () => {
       result: { data: { spawnVolume: true } },
     };
     const { Component, dispatchToast } = RenderFakeToastContext(
-      <SpawnVolumeModal visible onCancel={() => {}} maxSpawnableLimit={1000} />,
+      <SpawnVolumeModal maxSpawnableLimit={1000} onCancel={() => {}} visible />,
     );
     render(
       <MockedProvider mocks={[...baseMocks, spawnVolumeMutation]}>
diff --git a/apps/spruce/src/pages/spawn/spawnVolume/SpawnVolumeModal.tsx b/apps/spruce/src/pages/spawn/spawnVolume/SpawnVolumeModal.tsx
index ce012209f..43a5231b2 100644
--- a/apps/spruce/src/pages/spawn/spawnVolume/SpawnVolumeModal.tsx
+++ b/apps/spruce/src/pages/spawn/spawnVolume/SpawnVolumeModal.tsx
@@ -101,22 +101,22 @@ export const SpawnVolumeModal: React.FC<SpawnVolumeModalProps> = ({
 
   return (
     <ConfirmationModal
-      title="Spawn New Volume"
-      open={visible}
-      onCancel={onCancel}
       buttonText={loadingSpawnVolume ? "Spawning volume" : "Spawn"}
+      data-cy="spawn-volume-modal"
+      onCancel={onCancel}
       onConfirm={spawnVolume}
+      open={visible}
       submitDisabled={loadingSpawnVolume || !canSubmit}
-      data-cy="spawn-volume-modal"
+      title="Spawn New Volume"
     >
       <SpruceForm
-        schema={schema}
-        uiSchema={uiSchema}
         formData={formState}
         onChange={({ errors, formData }) => {
           setFormState(formData);
           setCanSubmit(errors.length === 0);
         }}
+        schema={schema}
+        uiSchema={uiSchema}
       />
     </ConfirmationModal>
   );
diff --git a/apps/spruce/src/pages/spawn/spawnVolume/SpawnVolumeTable.tsx b/apps/spruce/src/pages/spawn/spawnVolume/SpawnVolumeTable.tsx
index 74a729a68..816cec33d 100644
--- a/apps/spruce/src/pages/spawn/spawnVolume/SpawnVolumeTable.tsx
+++ b/apps/spruce/src/pages/spawn/spawnVolume/SpawnVolumeTable.tsx
@@ -56,7 +56,7 @@ export const SpawnVolumeTable: React.FC<SpawnVolumeTableProps> = ({
     },
   });
 
-  return <BaseTable table={table} shouldAlternateRowColor />;
+  return <BaseTable shouldAlternateRowColor table={table} />;
 };
 
 const getHostDisplayName = (v: TableVolume) =>
diff --git a/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/DeleteVolumeButton.tsx b/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/DeleteVolumeButton.tsx
index 23012e091..4a784bee7 100644
--- a/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/DeleteVolumeButton.tsx
+++ b/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/DeleteVolumeButton.tsx
@@ -51,12 +51,12 @@ export const DeleteVolumeButton: React.FC<Props> = ({ volume }) => {
       }}
       trigger={
         <Button
-          size={Size.XSmall}
           data-cy={`trash-${volume.displayName || volume.id}`}
           disabled={loadingRemoveVolume || volume.migrating}
           onClick={(e) => {
             e.stopPropagation();
           }}
+          size={Size.XSmall}
         >
           <Icon glyph="Trash" />
         </Button>
@@ -65,13 +65,13 @@ export const DeleteVolumeButton: React.FC<Props> = ({ volume }) => {
       Delete volume “{volumeName}”?
       {volume.hostID && (
         <Checkbox
+          checked={checkboxAcknowledged}
           data-cy="abort-checkbox"
           label="I understand this volume is currently mounted to a host."
           onChange={(e) => {
             e.nativeEvent.stopPropagation();
             setCheckboxAcknowledged(!checkboxAcknowledged);
           }}
-          checked={checkboxAcknowledged}
         />
       )}
     </Popconfirm>
diff --git a/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/EditButton.tsx b/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/EditButton.tsx
index 73ddfa2f2..da82f931f 100644
--- a/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/EditButton.tsx
+++ b/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/EditButton.tsx
@@ -13,20 +13,20 @@ export const EditButton: React.FC<Props> = ({ volume }) => {
   return (
     <>
       <Button
-        size={Size.XSmall}
         data-cy={`edit-btn-${volume.displayName || volume.id}`}
         disabled={volume.migrating}
         onClick={(e) => {
           e.stopPropagation();
           setOpenModal(true);
         }}
+        size={Size.XSmall}
       >
         Edit
       </Button>
       {openModal && (
         <EditVolumeModal
-          visible={openModal}
           onCancel={() => setOpenModal(false)}
+          visible={openModal}
           volume={volume}
         />
       )}
diff --git a/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/EditVolumeModal.tsx b/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/EditVolumeModal.tsx
index 587ce667d..b9d88ed2f 100644
--- a/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/EditVolumeModal.tsx
+++ b/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/EditVolumeModal.tsx
@@ -91,23 +91,23 @@ export const EditVolumeModal: React.FC<Props> = ({
 
   return (
     <ConfirmationModal
-      title="Edit Volume"
-      open={visible}
-      onCancel={onCancel}
-      submitDisabled={loading || !hasChanges || !!formErrors.length}
       buttonText={loading ? "Saving" : "Save"}
-      onConfirm={updateVolume}
       data-cy="update-volume-modal"
+      onCancel={onCancel}
+      onConfirm={updateVolume}
+      open={visible}
+      submitDisabled={loading || !hasChanges || !!formErrors.length}
+      title="Edit Volume"
     >
       <SpruceForm
-        schema={schema}
-        uiSchema={uiSchema}
         formData={formState}
         onChange={({ errors, formData }) => {
           setFormState(formData);
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           setFormErrors(errors);
         }}
+        schema={schema}
+        uiSchema={uiSchema}
       />
     </ConfirmationModal>
   );
diff --git a/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/MigrateButton.tsx b/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/MigrateButton.tsx
index a1c49bbcb..6a81adc63 100644
--- a/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/MigrateButton.tsx
+++ b/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/MigrateButton.tsx
@@ -14,13 +14,13 @@ export const MigrateButton: React.FC<Props> = ({ volume }) => {
     <>
       <Button
         ref={triggerRef}
-        size={Size.XSmall}
         data-cy={`migrate-btn-${volume.displayName || volume.id}`}
         disabled={volume.migrating}
         onClick={(e) => {
           e.stopPropagation();
           setOpenModal(true);
         }}
+        size={Size.XSmall}
       >
         Migrate
       </Button>
diff --git a/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/MigrateVolumeModal.tsx b/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/MigrateVolumeModal.tsx
index 03c1d5910..c517586a5 100644
--- a/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/MigrateVolumeModal.tsx
+++ b/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/MigrateVolumeModal.tsx
@@ -159,13 +159,13 @@ export const MigrateVolumeModal: React.FC<MigrateVolumeModalProps> = ({
 
   return (
     <ConfirmationModal
-      title={title}
-      open={open}
-      submitDisabled={hasError || loadingMigration || volume.migrating}
-      onConfirm={onConfirm}
-      data-cy="migrate-modal"
       buttonText={buttonText}
+      data-cy="migrate-modal"
       onCancel={onCancel}
+      onConfirm={onConfirm}
+      open={open}
+      submitDisabled={hasError || loadingMigration || volume.migrating}
+      title={title}
     >
       <Body>
         Migrate this home volume to a new host. Upon successful migration, the
@@ -173,13 +173,13 @@ export const MigrateVolumeModal: React.FC<MigrateVolumeModalProps> = ({
       </Body>
       {onPageOne && (
         <SpruceForm
-          schema={schema}
-          uiSchema={uiSchema}
           formData={form}
           onChange={({ errors, formData }) => {
             dispatch({ type: "setForm", payload: formData });
             dispatch({ type: "setHasError", payload: errors.length > 0 });
           }}
+          schema={schema}
+          uiSchema={uiSchema}
         />
       )}
     </ConfirmationModal>
diff --git a/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/MountButton.tsx b/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/MountButton.tsx
index fec540562..1ec1095cf 100644
--- a/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/MountButton.tsx
+++ b/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/MountButton.tsx
@@ -13,19 +13,19 @@ export const MountButton: React.FC<Props> = ({ volume }) => {
   return (
     <>
       <Button
-        size={Size.XSmall}
         data-cy={`attach-btn-${volume.displayName || volume.id}`}
         disabled={volume.migrating}
         onClick={(e) => {
           e.stopPropagation();
           setOpenModal(true);
         }}
+        size={Size.XSmall}
       >
         Mount
       </Button>
       <MountVolumeModal
-        visible={openModal}
         onCancel={() => setOpenModal(false)}
+        visible={openModal}
         volume={volume}
       />
     </>
diff --git a/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/MountVolumeModal.tsx b/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/MountVolumeModal.tsx
index 1b7349998..7310fb17b 100644
--- a/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/MountVolumeModal.tsx
+++ b/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/MountVolumeModal.tsx
@@ -42,8 +42,8 @@ export const MountVolumeModal: React.FC<Props> = ({
   const [selectedHostId, setSelectedHostId] = useState("");
   return (
     <ConfirmationModal
-      title="Attach Volume to Host"
-      open={visible}
+      buttonText="Mount"
+      data-cy="mount-volume-modal"
       onCancel={onCancel}
       onConfirm={() => {
         spawnAnalytics.sendEvent({
@@ -61,16 +61,16 @@ export const MountVolumeModal: React.FC<Props> = ({
         });
         onCancel();
       }}
+      open={visible}
       submitDisabled={!selectedHostId || loadingAttachVolume}
-      buttonText="Mount"
-      data-cy="mount-volume-modal"
+      title="Attach Volume to Host"
     >
       <ModalContent>
         <MountVolumeSelect
+          autofill
           onChange={setSelectedHostId}
           selectedHostId={selectedHostId}
           targetAvailabilityZone={targetAvailabilityZone}
-          autofill
         />
         <StyledDisclaimer>
           {`Only shows running hosts in zone ${targetAvailabilityZone}.`}
diff --git a/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/UnmountButton.tsx b/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/UnmountButton.tsx
index 65cb08215..72249be02 100644
--- a/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/UnmountButton.tsx
+++ b/apps/spruce/src/pages/spawn/spawnVolume/spawnVolumeTableActions/UnmountButton.tsx
@@ -51,17 +51,6 @@ export const UnmountButton: React.FC<Props> = ({ volume }) => {
 
   return (
     <ConditionalWrapper
-      condition={isHomeVolume}
-      wrapper={(children) => (
-        <Tooltip
-          align="top"
-          justify="middle"
-          trigger={children}
-          triggerEvent="hover"
-        >
-          Cannot unmount home volume
-        </Tooltip>
-      )}
       altWrapper={(children) => (
         <Popconfirm
           align="left"
@@ -77,14 +66,25 @@ export const UnmountButton: React.FC<Props> = ({ volume }) => {
           Detach this volume {volumeName} from host {hostName}?
         </Popconfirm>
       )}
+      condition={isHomeVolume}
+      wrapper={(children) => (
+        <Tooltip
+          align="top"
+          justify="middle"
+          trigger={children}
+          triggerEvent="hover"
+        >
+          Cannot unmount home volume
+        </Tooltip>
+      )}
     >
       <Button
-        size={Size.XSmall}
         data-cy={`detach-btn-${volume.displayName || volume.id}`}
         disabled={loadingDetachVolume || isHomeVolume || volume.migrating}
         onClick={(e) => {
           e.stopPropagation();
         }}
+        size={Size.XSmall}
       >
         Unmount
       </Button>
diff --git a/apps/spruce/src/pages/task/ActionButtons.tsx b/apps/spruce/src/pages/task/ActionButtons.tsx
index aa9e46478..a43da07cb 100644
--- a/apps/spruce/src/pages/task/ActionButtons.tsx
+++ b/apps/spruce/src/pages/task/ActionButtons.tsx
@@ -200,8 +200,8 @@ export const ActionButtons: React.FC<Props> = ({
   const dropdownItems = [
     <DropdownItem
       key="unschedule"
-      disabled={disabled || !canUnschedule}
       data-cy="unschedule-task"
+      disabled={disabled || !canUnschedule}
       onClick={() => {
         unscheduleTask();
         taskAnalytics.sendEvent({ name: "Clicked unschedule task button" });
@@ -241,9 +241,9 @@ export const ActionButtons: React.FC<Props> = ({
     // @ts-expect-error: FIXME. This comment was added by an automated script.
     <SetPriority
       key="set-task-priority"
-      taskId={taskId}
       disabled={disabled || !canSetPriority}
       initialPriority={initialPriority}
+      taskId={taskId}
     />,
     <DropdownItem
       key="override-dependencies"
@@ -265,29 +265,29 @@ export const ActionButtons: React.FC<Props> = ({
           <>
             <RelevantCommits task={task} />
             <Button
-              size="small"
-              data-cy="task-history"
               key="task-history"
+              as={HistoryLink}
+              data-cy="task-history"
+              disabled={displayName === mergeTaskName}
               onClick={() => {
                 taskAnalytics.sendEvent({ name: "Clicked see history link" });
               }}
-              as={HistoryLink}
-              disabled={displayName === mergeTaskName}
+              size="small"
             >
               See history
             </Button>
           </>
         )}
         <LoadingButton
-          size="small"
-          data-cy="schedule-task"
           key="schedule"
+          data-cy="schedule-task"
           disabled={disabled || !canSchedule || isPatchOnCommitQueue}
           loading={loadingScheduleTask}
           onClick={() => {
             scheduleTask();
             taskAnalytics.sendEvent({ name: "Clicked schedule task button" });
           }}
+          size="small"
         >
           Schedule
         </LoadingButton>
@@ -295,10 +295,10 @@ export const ActionButtons: React.FC<Props> = ({
           <Menu
             trigger={
               <LoadingButton
-                size="small"
                 data-cy="restart-task"
                 disabled={disabled || !canRestart || isPatchOnCommitQueue}
                 loading={loadingRestartTask}
+                size="small"
               >
                 Restart
               </LoadingButton>
@@ -333,9 +333,8 @@ export const ActionButtons: React.FC<Props> = ({
           </Menu>
         ) : (
           <LoadingButton
-            size="small"
-            data-cy="restart-task"
             key="restart"
+            data-cy="restart-task"
             disabled={disabled || !canRestart || isPatchOnCommitQueue}
             loading={loadingRestartTask}
             onClick={() => {
@@ -346,19 +345,20 @@ export const ActionButtons: React.FC<Props> = ({
                 "task.is.display_task": false,
               });
             }}
+            size="small"
           >
             Restart
           </LoadingButton>
         )}
         <Button
-          size="small"
-          data-cy="notify-task"
           key="notifications"
+          data-cy="notify-task"
           disabled={disabled}
           onClick={() => {
             taskAnalytics.sendEvent({ name: "Viewed notification modal" });
             setIsVisibleModal(true);
           }}
+          size="small"
         >
           Notify me
         </Button>
@@ -371,8 +371,8 @@ export const ActionButtons: React.FC<Props> = ({
         />
       </PageButtonRow>
       <TaskNotificationModal
-        visible={isVisibleModal}
         onCancel={() => setIsVisibleModal(false)}
+        visible={isVisibleModal}
       />
     </>
   );
diff --git a/apps/spruce/src/pages/task/TaskTabs.tsx b/apps/spruce/src/pages/task/TaskTabs.tsx
index c4e5e3f73..1478a2b60 100644
--- a/apps/spruce/src/pages/task/TaskTabs.tsx
+++ b/apps/spruce/src/pages/task/TaskTabs.tsx
@@ -61,38 +61,38 @@ export const TaskTabs: React.FC<TaskTabProps> = ({ isDisplayTask, task }) => {
 
   const tabMap = {
     [TaskTab.Logs]: (
-      <Tab name="Logs" data-cy="task-logs-tab" key="task-logs-tab">
+      <Tab key="task-logs-tab" data-cy="task-logs-tab" name="Logs">
         {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
-        <Logs taskId={id} execution={execution} logLinks={logLinks} />
+        <Logs execution={execution} logLinks={logLinks} taskId={id} />
       </Tab>
     ),
     [TaskTab.Tests]: (
       <Tab
+        key="task-tests-tab"
+        data-cy="task-tests-tab"
         name={
           <span>
             {failedTestCount ? (
               <TabLabelWithBadge
-                tabLabel="Tests"
-                badgeVariant="red"
                 badgeText={failedTestCount}
+                badgeVariant="red"
                 dataCyBadge="tests-tab-badge"
+                tabLabel="Tests"
               />
             ) : (
               "Tests"
             )}
           </span>
         }
-        data-cy="task-tests-tab"
-        key="task-tests-tab"
       >
         <TestsTable task={task} />
       </Tab>
     ),
     [TaskTab.ExecutionTasks]: (
       <Tab
-        name="Execution Tasks"
-        data-cy="task-execution-tab"
         key="execution-tasks-tab"
+        data-cy="task-execution-tab"
+        name="Execution Tasks"
       >
         <ExecutionTasksTable
           // @ts-expect-error: FIXME. This comment was added by an automated script.
@@ -105,50 +105,50 @@ export const TaskTabs: React.FC<TaskTabProps> = ({ isDisplayTask, task }) => {
     ),
     [TaskTab.Files]: (
       <Tab
+        key="task-files-tab"
+        data-cy="task-files-tab"
         name={
           <span>
             {fileCount !== undefined ? (
               <TabLabelWithBadge
-                tabLabel="Files"
-                badgeVariant="lightgray"
                 badgeText={fileCount}
+                badgeVariant="lightgray"
                 dataCyBadge="files-tab-badge"
+                tabLabel="Files"
               />
             ) : (
               "Files"
             )}
           </span>
         }
-        data-cy="task-files-tab"
-        key="task-files-tab"
       >
         {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
-        <FileTable taskId={id} execution={execution} />
+        <FileTable execution={execution} taskId={id} />
       </Tab>
     ),
     [TaskTab.Annotations]: (
       <Tab
-        name="Failure Details"
-        data-cy="task-build-baron-tab"
         key="task-build-baron-tab"
+        data-cy="task-build-baron-tab"
+        name="Failure Details"
       >
         <BuildBaron
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           annotation={annotation}
           // @ts-expect-error: FIXME. This comment was added by an automated script.
-          taskId={id}
-          // @ts-expect-error: FIXME. This comment was added by an automated script.
           execution={execution}
           // @ts-expect-error: FIXME. This comment was added by an automated script.
+          taskId={id}
+          // @ts-expect-error: FIXME. This comment was added by an automated script.
           userCanModify={canModifyAnnotation}
         />
       </Tab>
     ),
     [TaskTab.TrendCharts]: (
       <Tab
-        name="Trend Charts"
-        data-cy="trend-charts-tab"
         key="trend-charts-tab"
+        data-cy="trend-charts-tab"
+        name="Trend Charts"
       >
         {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
         <TrendChartsPlugin taskId={id} />
@@ -223,9 +223,9 @@ export const TaskTabs: React.FC<TaskTabProps> = ({ isDisplayTask, task }) => {
 
   return (
     <StyledTabs
+      aria-label="Task Page Tabs"
       selected={selectedTab}
       setSelected={setSelectedTab}
-      aria-label="Task Page Tabs"
     >
       {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
       {activeTabs.map((tab: string) => tabMap[tab])}
diff --git a/apps/spruce/src/pages/task/executionDropdown/ExecutionSelector.tsx b/apps/spruce/src/pages/task/executionDropdown/ExecutionSelector.tsx
index f4b8798b7..74c63767c 100644
--- a/apps/spruce/src/pages/task/executionDropdown/ExecutionSelector.tsx
+++ b/apps/spruce/src/pages/task/executionDropdown/ExecutionSelector.tsx
@@ -37,10 +37,10 @@ export const ExecutionSelect: React.FC<ExecutionSelectProps> = ({
   const getDateCopy = useDateFormat();
   return (
     <StyledSelect
+      key={currentExecution}
       aria-disabled={executionsLoading}
       data-cy="execution-select"
       disabled={executionsLoading}
-      key={currentExecution}
       // @ts-expect-error: FIXME. This comment was added by an automated script.
       onChange={(selected: number | null) => {
         // @ts-expect-error: FIXME. This comment was added by an automated script.
@@ -62,8 +62,8 @@ export const ExecutionSelect: React.FC<ExecutionSelectProps> = ({
 
         return (
           <Option
-            data-cy={`execution-${singleExecution.execution}`}
             key={singleExecution.execution}
+            data-cy={`execution-${singleExecution.execution}`}
             value={singleExecution.execution}
           >
             <ExecutionInfo>
diff --git a/apps/spruce/src/pages/task/metadata/ETATimer/ETATimer.test.tsx b/apps/spruce/src/pages/task/metadata/ETATimer/ETATimer.test.tsx
index 1215fde29..2cae949c2 100644
--- a/apps/spruce/src/pages/task/metadata/ETATimer/ETATimer.test.tsx
+++ b/apps/spruce/src/pages/task/metadata/ETATimer/ETATimer.test.tsx
@@ -15,7 +15,7 @@ describe("etaTimer", () => {
     const startTime = new Date();
     const expectedDuration = 10000;
     render(
-      <ETATimer startTime={startTime} expectedDuration={expectedDuration} />,
+      <ETATimer expectedDuration={expectedDuration} startTime={startTime} />,
     );
     expect(screen.getByText("10s")).toBeInTheDocument();
     act(() => {
@@ -35,7 +35,7 @@ describe("etaTimer", () => {
     const startTime = new Date();
     const expectedDuration = 1000;
     render(
-      <ETATimer startTime={startTime} expectedDuration={expectedDuration} />,
+      <ETATimer expectedDuration={expectedDuration} startTime={startTime} />,
     );
     expect(screen.getByText("1s")).toBeInTheDocument();
     act(() => {
@@ -48,7 +48,7 @@ describe("etaTimer", () => {
     expect(vi.getTimerCount()).toBe(0);
   });
   it("if the eta has been exceeded, it does not render", () => {
-    render(<ETATimer startTime={new Date()} expectedDuration={0} />);
+    render(<ETATimer expectedDuration={0} startTime={new Date()} />);
     expect(screen.queryByTestId("task-metadata-eta")).not.toBeInTheDocument();
   });
 });
diff --git a/apps/spruce/src/pages/task/metadata/Metadata.stories.tsx b/apps/spruce/src/pages/task/metadata/Metadata.stories.tsx
index 3c5c50670..0945e7ce1 100644
--- a/apps/spruce/src/pages/task/metadata/Metadata.stories.tsx
+++ b/apps/spruce/src/pages/task/metadata/Metadata.stories.tsx
@@ -14,9 +14,9 @@ export const Default: CustomStoryObj<typeof Metadata> = {
     <Container>
       <Metadata
         {...args}
+        error={null}
         task={taskQuery.task}
         taskId={taskQuery.task.id}
-        error={null}
       />
     </Container>
   ),
@@ -27,6 +27,7 @@ export const WithDependencies: CustomStoryObj<typeof Metadata> = {
     <Container>
       <Metadata
         {...args}
+        error={null}
         task={{
           ...taskQuery.task,
           dependsOn: [
@@ -61,7 +62,6 @@ export const WithDependencies: CustomStoryObj<typeof Metadata> = {
           ],
         }}
         taskId={taskQuery.task.id}
-        error={null}
       />
     </Container>
   ),
@@ -74,13 +74,13 @@ export const WithAbortMessage: CustomStoryObj<
     <Container>
       <Metadata
         {...args}
+        error={null}
         task={{
           ...taskQuery.task,
           aborted: true,
           abortInfo: abortInfoMap[abortInfoSelection],
         }}
         taskId={taskQuery.task.id}
-        error={null}
       />
     </Container>
   ),
@@ -105,6 +105,7 @@ export const OOMTracker: CustomStoryObj<typeof Metadata> = {
     <Container>
       <Metadata
         {...args}
+        error={null}
         task={{
           ...taskQuery.task,
           details: {
@@ -120,7 +121,6 @@ export const OOMTracker: CustomStoryObj<typeof Metadata> = {
           },
         }}
         taskId={taskQuery.task.id}
-        error={null}
       />
     </Container>
   ),
@@ -131,6 +131,7 @@ export const ContainerizedTask: CustomStoryObj<typeof Metadata> = {
     <Container>
       <Metadata
         {...args}
+        error={null}
         task={{
           ...taskQuery.task,
           hostId: null,
@@ -142,7 +143,6 @@ export const ContainerizedTask: CustomStoryObj<typeof Metadata> = {
           spawnHostLink: null,
         }}
         taskId={taskQuery.task.id}
-        error={null}
       />
     </Container>
   ),
diff --git a/apps/spruce/src/pages/task/metadata/Metadata.test.tsx b/apps/spruce/src/pages/task/metadata/Metadata.test.tsx
index 54995b9d2..33e5b5be1 100644
--- a/apps/spruce/src/pages/task/metadata/Metadata.test.tsx
+++ b/apps/spruce/src/pages/task/metadata/Metadata.test.tsx
@@ -22,10 +22,10 @@ describe("metadata", () => {
   it("renders the metadata card with a pending status", () => {
     render(
       <Metadata
-        taskId={taskId}
+        error={null}
         loading={false}
         task={taskAboutToStart.task}
-        error={null}
+        taskId={taskId}
       />,
       {
         route: `/task/${taskId}`,
@@ -43,10 +43,10 @@ describe("metadata", () => {
   it("renders the metadata card with a started status", () => {
     render(
       <Metadata
-        taskId={taskId}
+        error={null}
         loading={false}
         task={taskStarted.task}
-        error={null}
+        taskId={taskId}
       />,
       {
         route: `/task/${taskId}`,
@@ -65,10 +65,10 @@ describe("metadata", () => {
     const user = userEvent.setup();
     render(
       <Metadata
-        taskId={taskId}
+        error={null}
         loading={false}
         task={taskSucceeded.task}
-        error={null}
+        taskId={taskId}
       />,
       {
         route: `/task/${taskId}`,
diff --git a/apps/spruce/src/pages/task/metadata/index.tsx b/apps/spruce/src/pages/task/metadata/index.tsx
index bbf3c2e12..3323f0c07 100644
--- a/apps/spruce/src/pages/task/metadata/index.tsx
+++ b/apps/spruce/src/pages/task/metadata/index.tsx
@@ -115,16 +115,16 @@ export const Metadata: React.FC<Props> = ({ error, loading, task, taskId }) => {
             <MetadataLabel>Build Variant:</MetadataLabel>{" "}
             <StyledRouterLink
               data-cy="build-variant-link"
-              to={getVersionRoute(versionID, {
-                page: 0,
-                variant: applyStrictRegex(buildVariant),
-              })}
               onClick={() =>
                 taskAnalytics.sendEvent({
                   name: "Clicked metadata link",
                   "link.type": "build variant link",
                 })
               }
+              to={getVersionRoute(versionID, {
+                page: 0,
+                variant: applyStrictRegex(buildVariant),
+              })}
             >
               {buildVariantDisplayName || buildVariant}
             </StyledRouterLink>
@@ -135,13 +135,13 @@ export const Metadata: React.FC<Props> = ({ error, loading, task, taskId }) => {
             <MetadataLabel>Project:</MetadataLabel>{" "}
             <StyledRouterLink
               data-cy="project-link"
-              to={getProjectPatchesRoute(projectIdentifier)}
               onClick={() =>
                 taskAnalytics.sendEvent({
                   name: "Clicked metadata link",
                   "link.type": "project link",
                 })
               }
+              to={getProjectPatchesRoute(projectIdentifier)}
             >
               {projectIdentifier}
             </StyledRouterLink>
@@ -175,7 +175,7 @@ export const Metadata: React.FC<Props> = ({ error, loading, task, taskId }) => {
           </MetadataItem>
         ) : null}
         {status === TaskStatus.Started && startTime && expectedDuration ? (
-          <ETATimer startTime={startTime} expectedDuration={expectedDuration} />
+          <ETATimer expectedDuration={expectedDuration} startTime={startTime} />
         ) : null}
         {status === TaskStatus.Started && startTime && (
           <RuntimeTimer startTime={startTime} />
@@ -248,15 +248,15 @@ export const Metadata: React.FC<Props> = ({ error, loading, task, taskId }) => {
           <MetadataItem>
             <MetadataLabel>Display Task:</MetadataLabel>{" "}
             <StyledRouterLink
-              to={getTaskRoute(displayTask.id, {
-                execution: displayTask.execution,
-              })}
               onClick={() =>
                 taskAnalytics.sendEvent({
                   name: "Clicked metadata link",
                   "link.type": "display task link",
                 })
               }
+              to={getTaskRoute(displayTask.id, {
+                execution: displayTask.execution,
+              })}
             >
               {displayTask.displayName}
             </StyledRouterLink>
@@ -315,6 +315,7 @@ export const Metadata: React.FC<Props> = ({ error, loading, task, taskId }) => {
             <HoneycombLinkContainer>
               <StyledLink
                 data-cy="task-trace-link"
+                hideExternalIcon={false}
                 href={getHoneycombTraceUrl(taskTrace, startTime, finishTime)}
                 onClick={() => {
                   taskAnalytics.sendEvent({
@@ -322,12 +323,12 @@ export const Metadata: React.FC<Props> = ({ error, loading, task, taskId }) => {
                     "link.type": "honeycomb trace link",
                   });
                 }}
-                hideExternalIcon={false}
               >
                 Honeycomb Trace
               </StyledLink>
               <StyledLink
                 data-cy="task-metrics-link"
+                hideExternalIcon={false}
                 href={getHoneycombSystemMetricsUrl(
                   taskId,
                   // @ts-expect-error: FIXME. This comment was added by an automated script.
@@ -341,7 +342,6 @@ export const Metadata: React.FC<Props> = ({ error, loading, task, taskId }) => {
                     "link.type": "honeycomb metrics link",
                   });
                 }}
-                hideExternalIcon={false}
               >
                 Honeycomb System Metrics
               </StyledLink>
@@ -414,17 +414,17 @@ export const Metadata: React.FC<Props> = ({ error, loading, task, taskId }) => {
             <MetadataItem>
               <StyledRouterLink
                 data-cy="task-spawn-host-link"
-                to={getSpawnHostRoute({
-                  distroId,
-                  spawnHost: true,
-                  taskId,
-                })}
                 onClick={() =>
                   taskAnalytics.sendEvent({
                     name: "Clicked metadata link",
                     "link.type": "spawn host link",
                   })
                 }
+                to={getSpawnHostRoute({
+                  distroId,
+                  spawnHost: true,
+                  taskId,
+                })}
               >
                 Spawn host
               </StyledRouterLink>
@@ -439,9 +439,9 @@ export const Metadata: React.FC<Props> = ({ error, loading, task, taskId }) => {
           {dependsOn.map((dep) => (
             <DependsOn
               key={`dependOnPill_${dep.taskId}`}
-              name={dep.name}
               buildVariant={dep.buildVariant}
               metStatus={dep.metStatus}
+              name={dep.name}
               requiredStatus={dep.requiredStatus}
               taskId={dep.taskId}
             />
@@ -485,10 +485,10 @@ const DetailsDescription = ({
           {truncatedText}{" "}
           <ExpandedText
             align="right"
+            data-cy="task-metadata-description-tooltip"
             justify="end"
-            popoverZIndex={zIndex.tooltip}
             message={description}
-            data-cy="task-metadata-description-tooltip"
+            popoverZIndex={zIndex.tooltip}
           />
         </>
       ) : (
diff --git a/apps/spruce/src/pages/task/taskTabs/ExecutionTasksTable.stories.tsx b/apps/spruce/src/pages/task/taskTabs/ExecutionTasksTable.stories.tsx
index 474695794..1cc321f0a 100644
--- a/apps/spruce/src/pages/task/taskTabs/ExecutionTasksTable.stories.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/ExecutionTasksTable.stories.tsx
@@ -9,9 +9,9 @@ export default {
 export const SingleExecution: CustomStoryObj<typeof ExecutionTasksTable> = {
   render: () => (
     <ExecutionTasksTable
-      isPatch
-      executionTasksFull={singleExecution}
       execution={5}
+      executionTasksFull={singleExecution}
+      isPatch
     />
   ),
 };
@@ -19,9 +19,9 @@ export const SingleExecution: CustomStoryObj<typeof ExecutionTasksTable> = {
 export const MultipleExecutions: CustomStoryObj<typeof ExecutionTasksTable> = {
   render: () => (
     <ExecutionTasksTable
-      isPatch
-      executionTasksFull={multipleExecutions}
       execution={14}
+      executionTasksFull={multipleExecutions}
+      isPatch
     />
   ),
 };
diff --git a/apps/spruce/src/pages/task/taskTabs/ExecutionTasksTable.tsx b/apps/spruce/src/pages/task/taskTabs/ExecutionTasksTable.tsx
index 12d073ce9..5117122c4 100644
--- a/apps/spruce/src/pages/task/taskTabs/ExecutionTasksTable.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/ExecutionTasksTable.tsx
@@ -112,8 +112,8 @@ export const ExecutionTasksTable: React.FC<Props> = ({
       data-cy="execution-tasks-table"
       data-cy-row="execution-tasks-table-row"
       emptyComponent={<TablePlaceholder message="No execution tasks found." />}
-      table={table}
       shouldAlternateRowColor
+      table={table}
     />
   );
 };
diff --git a/apps/spruce/src/pages/task/taskTabs/FileTable/GroupedFileTable/index.tsx b/apps/spruce/src/pages/task/taskTabs/FileTable/GroupedFileTable/index.tsx
index fb2f3f768..2f25dfc65 100644
--- a/apps/spruce/src/pages/task/taskTabs/FileTable/GroupedFileTable/index.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/FileTable/GroupedFileTable/index.tsx
@@ -26,9 +26,8 @@ const columns = (
       return (
         <CellContainer>
           <StyledLink
-            href={value.row.original.link}
             data-cy="file-link"
-            target="_blank"
+            href={value.row.original.link}
             onClick={() => {
               taskAnalytics.sendEvent({
                 name: "Clicked task file link",
@@ -36,30 +35,31 @@ const columns = (
                 "file.name": fileName,
               });
             }}
+            target="_blank"
           >
             {fileName}
           </StyledLink>
           <Tooltip
+            align="top"
+            enabled={value.row.original.urlParsley === null}
+            justify="middle"
             trigger={
               <Button
-                href={value.row.original.urlParsley}
                 data-cy="parsley-link"
-                target="_blank"
                 disabled={value.row.original.urlParsley === null}
-                size="small"
+                href={value.row.original.urlParsley}
                 onClick={() => {
                   taskAnalytics.sendEvent({
                     name: "Clicked task file Parsley link",
                     "file.name": fileName,
                   });
                 }}
+                size="small"
+                target="_blank"
               >
                 Parsley
               </Button>
             }
-            enabled={value.row.original.urlParsley === null}
-            align="top"
-            justify="middle"
           >
             Only plain text files can be opened in Parsley.
           </Tooltip>
@@ -97,7 +97,7 @@ const GroupedFileTable: React.FC<GroupedFileTableProps> = ({
   return (
     <Container>
       {taskName && <Subtitle>{taskName}</Subtitle>}
-      <BaseTable table={table} shouldAlternateRowColor />
+      <BaseTable shouldAlternateRowColor table={table} />
     </Container>
   );
 };
diff --git a/apps/spruce/src/pages/task/taskTabs/FileTable/index.tsx b/apps/spruce/src/pages/task/taskTabs/FileTable/index.tsx
index ca92646a4..33a69ef6e 100644
--- a/apps/spruce/src/pages/task/taskTabs/FileTable/index.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/FileTable/index.tsx
@@ -47,9 +47,9 @@ const FileTable: React.FC<FileTableProps> = ({ execution, taskId }) => {
     <>
       <StyledSearchInput
         aria-label="Search file names"
-        placeholder="File name regex"
-        onChange={(v) => setSearch(v)}
         data-cy="file-search-input"
+        onChange={(v) => setSearch(v)}
+        placeholder="File name regex"
         validator={validateRegexp}
         validatorErrorMessage="Invalid regex"
       />
diff --git a/apps/spruce/src/pages/task/taskTabs/Logs.tsx b/apps/spruce/src/pages/task/taskTabs/Logs.tsx
index a73947bb8..9f3663380 100644
--- a/apps/spruce/src/pages/task/taskTabs/Logs.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/Logs.tsx
@@ -101,11 +101,9 @@ export const Logs: React.FC<Props> = ({ execution, logLinks, taskId }) => {
           <ButtonContainer>
             {parsleyLink && (
               <Button
-                title="High-powered log viewer"
                 data-cy="parsley-log-btn"
                 disabled={noLogs}
                 href={parsleyLink}
-                target="_blank"
                 onClick={() =>
                   sendEvent({
                     name: "Clicked log link",
@@ -113,17 +111,17 @@ export const Logs: React.FC<Props> = ({ execution, logLinks, taskId }) => {
                     "log.viewer": "parsley",
                   })
                 }
+                target="_blank"
+                title="High-powered log viewer"
               >
                 Parsley
               </Button>
             )}
             {htmlLink && (
               <Button
-                title="Plain, colorized log viewer"
                 data-cy="html-log-btn"
                 disabled={noLogs}
                 href={htmlLink}
-                target="_blank"
                 onClick={() =>
                   sendEvent({
                     name: "Clicked log link",
@@ -131,17 +129,17 @@ export const Logs: React.FC<Props> = ({ execution, logLinks, taskId }) => {
                     "log.viewer": "html",
                   })
                 }
+                target="_blank"
+                title="Plain, colorized log viewer"
               >
                 HTML
               </Button>
             )}
             {rawLink && (
               <Button
-                title="Plain text log viewer"
                 data-cy="raw-log-btn"
                 disabled={noLogs}
                 href={rawLink}
-                target="_blank"
                 onClick={() =>
                   sendEvent({
                     name: "Clicked log link",
@@ -149,6 +147,8 @@ export const Logs: React.FC<Props> = ({ execution, logLinks, taskId }) => {
                     "log.viewer": "raw",
                   })
                 }
+                target="_blank"
+                title="Plain text log viewer"
               >
                 Raw
               </Button>
diff --git a/apps/spruce/src/pages/task/taskTabs/TestsTable.tsx b/apps/spruce/src/pages/task/taskTabs/TestsTable.tsx
index 0743844a4..c762de84d 100644
--- a/apps/spruce/src/pages/task/taskTabs/TestsTable.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/TestsTable.tsx
@@ -3,6 +3,7 @@ import { useQuery } from "@apollo/client";
 import {
   ColumnFiltering,
   ColumnFiltersState,
+  LeafyGreenTable,
   RowSorting,
   SortingState,
   useLeafyGreenTable,
@@ -133,7 +134,6 @@ export const TestsTable: React.FC<TestsTableProps> = ({ task }) => {
     // @ts-expect-error: FIXME. This comment was added by an automated script.
     getDefaultSorting(table).onSortingChange(s);
 
-  // @ts-expect-error: FIXME. This comment was added by an automated script.
   const setFilters = (f: ColumnFiltersState) =>
     // @ts-expect-error: FIXME. This comment was added by an automated script.
     getDefaultFiltering(table).onColumnFiltersChange(f);
@@ -141,8 +141,8 @@ export const TestsTable: React.FC<TestsTableProps> = ({ task }) => {
   const columns = useMemo(() => getColumnsTemplate({ task }), [task]);
 
   const tableContainerRef = useRef<HTMLDivElement>(null);
-  // @ts-expect-error: FIXME. This comment was added by an automated script.
-  const table = useLeafyGreenTable<TestResult>({
+
+  const table: LeafyGreenTable<TestResult> = useLeafyGreenTable<TestResult>({
     columns,
     containerRef: tableContainerRef,
     data: testResults ?? [],
@@ -183,17 +183,17 @@ export const TestsTable: React.FC<TestsTableProps> = ({ task }) => {
         <TableControl
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           filteredCount={filteredTestCount}
-          // @ts-expect-error: FIXME. This comment was added by an automated script.
-          totalCount={totalTestCount}
+          label="tests"
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           limit={limitNum}
-          // @ts-expect-error: FIXME. This comment was added by an automated script.
-          page={pageNum}
-          label="tests"
           onClear={clearQueryParams}
           onPageSizeChange={() => {
             sendEvent({ name: "Changed page size" });
           }}
+          // @ts-expect-error: FIXME. This comment was added by an automated script.
+          page={pageNum}
+          // @ts-expect-error: FIXME. This comment was added by an automated script.
+          totalCount={totalTestCount}
         />
       }
       // @ts-expect-error: FIXME. This comment was added by an automated script.
diff --git a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AddIssueModal/AddIssueModal.test.tsx b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AddIssueModal/AddIssueModal.test.tsx
index cda9ece9d..ed4e9941f 100644
--- a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AddIssueModal/AddIssueModal.test.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AddIssueModal/AddIssueModal.test.tsx
@@ -24,10 +24,10 @@ const AddIssueModal = (
 ) => (
   <MockedProvider mocks={[getSpruceConfigMock, addAnnotationMock]}>
     <AddIssueModalToTest
-      taskId="1"
+      data-cy="add-issue-modal"
       execution={0}
+      taskId="1"
       visible
-      data-cy="add-issue-modal"
       {...props}
     />
   </MockedProvider>
@@ -41,8 +41,8 @@ describe("addIssueModal", () => {
     const { Component } = RenderFakeToastContext(
       <AddIssueModal
         closeModal={vi.fn()}
-        setSelectedRowKey={vi.fn()}
         isIssue
+        setSelectedRowKey={vi.fn()}
       />,
     );
     render(<Component />);
@@ -64,8 +64,8 @@ describe("addIssueModal", () => {
     const { Component } = RenderFakeToastContext(
       <AddIssueModal
         closeModal={vi.fn()}
-        setSelectedRowKey={vi.fn()}
         isIssue
+        setSelectedRowKey={vi.fn()}
       />,
     );
     render(<Component />);
@@ -92,8 +92,8 @@ describe("addIssueModal", () => {
     const { Component } = RenderFakeToastContext(
       <AddIssueModal
         closeModal={vi.fn()}
-        setSelectedRowKey={vi.fn()}
         isIssue
+        setSelectedRowKey={vi.fn()}
       />,
     );
     render(<Component />);
@@ -136,8 +136,8 @@ describe("addIssueModal", () => {
     const { Component, dispatchToast } = RenderFakeToastContext(
       <AddIssueModal
         closeModal={vi.fn()}
-        setSelectedRowKey={setSelectedRowKey}
         isIssue
+        setSelectedRowKey={setSelectedRowKey}
       />,
     );
     render(<Component />);
diff --git a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AddIssueModal/index.tsx b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AddIssueModal/index.tsx
index 909c999d4..09413c6d2 100644
--- a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AddIssueModal/index.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AddIssueModal/index.tsx
@@ -93,27 +93,27 @@ export const AddIssueModal: React.FC<Props> = ({
   return (
     <ConfirmationModal
       {...rest}
-      open={visible}
+      buttonText={`Add ${issueString}`}
+      data-cy="add-issue-modal"
       onCancel={handleCancel}
-      title={title}
       onConfirm={handleSubmit}
-      buttonText={`Add ${issueString}`}
+      open={visible}
       submitDisabled={!canSubmit}
-      data-cy="add-issue-modal"
+      title={title}
     >
       {jiraHost && (
         <SpruceForm
-          onSubmit={handleSubmit}
-          schema={addIssueModalSchema.schema}
-          uiSchema={addIssueModalSchema.uiSchema}
+          customFormatFields={{
+            jiraHost,
+          }}
           formData={formState}
           onChange={({ errors, formData }) => {
             setFormState(formData);
             setCanSubmit(errors.length === 0);
           }}
-          customFormatFields={{
-            jiraHost,
-          }}
+          onSubmit={handleSubmit}
+          schema={addIssueModalSchema.schema}
+          uiSchema={addIssueModalSchema.uiSchema}
         />
       )}
     </ConfirmationModal>
diff --git a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationNote.tsx b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationNote.tsx
index 2739dbb20..2a43fcc43 100644
--- a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationNote.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationNote.tsx
@@ -65,34 +65,34 @@ const AnnotationNote: React.FC<Props> = ({
     <>
       <TextArea
         aria-labelledby="annotation-note-input"
-        rows={4}
-        id="noteInput"
-        value={newMessage}
-        onChange={(e) => setMessage(e.target.value)}
-        disabled={!userCanModify}
-        label="Note"
         description={
           note &&
           `Updated: ${getDateCopy(note.source.time, { dateOnly: true })}
           Last Edited By: ${note.source.author}
           `
         }
+        disabled={!userCanModify}
+        id="noteInput"
+        label="Note"
+        onChange={(e) => setMessage(e.target.value)}
+        rows={4}
+        value={newMessage}
       />
       <Tooltip
+        enabled={!userCanModify}
         trigger={
           <ButtonWrapper>
             <Button
               data-cy="edit-annotation-button"
-              variant={Variant.Primary}
-              size={Size.XSmall}
-              onClick={saveAnnotationNote}
               disabled={originalMessage === newMessage || !userCanModify}
+              onClick={saveAnnotationNote}
+              size={Size.XSmall}
+              variant={Variant.Primary}
             >
               Save Note
             </Button>
           </ButtonWrapper>
         }
-        enabled={!userCanModify}
       >
         You are not authorized to edit failure details
       </Tooltip>
diff --git a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/AnnotationTicketRow.stories.tsx b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/AnnotationTicketRow.stories.tsx
index d78a9af14..4681ef2c6 100644
--- a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/AnnotationTicketRow.stories.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/AnnotationTicketRow.stories.tsx
@@ -9,7 +9,6 @@ export const Default: CustomStoryObj<typeof AnnotationTicketRow> = {
   render: (args) => (
     <AnnotationTicketRow
       issueKey="EVG-123"
-      url="https://www.google.com"
       jiraTicket={{
         key: "key",
         fields: {
@@ -24,6 +23,7 @@ export const Default: CustomStoryObj<typeof AnnotationTicketRow> = {
           assignedTeam: "evg-ui",
         },
       }}
+      url="https://www.google.com"
       {...args}
     />
   ),
diff --git a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/index.tsx b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/index.tsx
index 2436bf200..5fb14fb07 100644
--- a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/index.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRow/index.tsx
@@ -40,15 +40,15 @@ const AnnotationTicketRow: React.FC<AnnotationTicketRowProps> = ({
 
   const jiraLink = (
     <JiraSummaryLink
-      href={url}
-      target="_blank"
       data-cy={issueKey}
+      href={url}
       onClick={() =>
         annotationAnalytics.sendEvent({
           name: "Clicked annotation link",
           target: "Jira ticket link",
         })
       }
+      target="_blank"
     >
       {issueKey}
       {summary && `: ${summary}`}
diff --git a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRowWithActions/index.tsx b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRowWithActions/index.tsx
index 1d57fd23c..6a1ffc705 100644
--- a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRowWithActions/index.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketRowWithActions/index.tsx
@@ -47,7 +47,7 @@ const AnnotationTicketRowWithActions = forwardRef<
   ) => {
     const { confidenceScore, issueKey, loading, url } = rest;
     return (
-      <Container selected={selected} ref={ref}>
+      <Container ref={ref} selected={selected}>
         <AnnotationTicketRow {...rest} />
         {!loading && (
           <ButtonContainer>
@@ -73,10 +73,10 @@ const AnnotationTicketRowWithActions = forwardRef<
               ),
               children: (
                 <Button
-                  size={Size.Small}
                   data-cy={`move-btn-${issueKey}`}
                   disabled={!userCanModify}
                   leftGlyph={<Icon glyph={isIssue ? "ArrowDown" : "ArrowUp"} />}
+                  size={Size.Small}
                 >
                   Move to {isIssue ? "suspected issues" : "issues"}
                 </Button>
@@ -103,10 +103,10 @@ const AnnotationTicketRowWithActions = forwardRef<
               ),
               children: (
                 <Button
-                  size="small"
                   data-cy={`${issueKey}-delete-btn`}
-                  leftGlyph={<Icon glyph="Trash" />}
                   disabled={!userCanModify}
+                  leftGlyph={<Icon glyph="Trash" />}
+                  size="small"
                 />
               ),
             })}
diff --git a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketsList.test.tsx b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketsList.test.tsx
index 131980827..987cb6fe0 100644
--- a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketsList.test.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/AnnotationTicketsList.test.tsx
@@ -25,19 +25,19 @@ describe("annotationTicketsList", () => {
     const { Component } = RenderFakeToastContext(
       <MockedProvider mocks={ticketsTableMocks}>
         <AnnotationTicketsList
+          execution={execution}
+          isIssue
           jiraIssues={[
             {
               issueKey: "EVG-1234567",
               url: "https://fake-url/EVG-1234567",
             },
           ]}
-          isIssue
-          taskId={taskId}
-          execution={execution}
-          userCanModify={false}
+          loading
           selectedRowKey=""
           setSelectedRowKey={() => {}}
-          loading
+          taskId={taskId}
+          userCanModify={false}
         />
       </MockedProvider>,
     );
diff --git a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/index.tsx b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/index.tsx
index 85a5e867f..b3a2d3729 100644
--- a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/index.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsList/index.tsx
@@ -115,15 +115,15 @@ const AnnotationTicketsList: React.FC<AnnotationTicketsListProps> = ({
       {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
       {jiraIssues.map((issue) => (
         <AnnotationTicketRowWithActions
+          key={issue.issueKey}
+          ref={issue.issueKey === selectedRowKey ? rowRef : null}
           isIssue={isIssue}
           issueString={issueString}
+          loading={loading}
           onMove={handleMove}
           onRemove={handleRemove}
-          userCanModify={userCanModify}
-          loading={loading}
-          key={issue.issueKey}
-          ref={issue.issueKey === selectedRowKey ? rowRef : null}
           selected={issue.issueKey === selectedRowKey}
+          userCanModify={userCanModify}
           {...issue}
         />
       ))}
diff --git a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/BuildBaron.test.tsx b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/BuildBaron.test.tsx
index 3c4f5b783..c37d1fdda 100644
--- a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/BuildBaron.test.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/BuildBaron.test.tsx
@@ -40,15 +40,15 @@ describe("buildBaronContent", () => {
 
   it("the BuildBaron component renders without crashing.", () => {
     const { Component } = RenderFakeToastContext(
-      <MockedProvider mocks={buildBaronMocks} addTypename={false}>
+      <MockedProvider addTypename={false} mocks={buildBaronMocks}>
         <BuildBaronContent
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           annotation={null}
-          taskId={taskId}
-          execution={execution}
-          userCanModify
           bbData={buildBaronQuery.buildBaron}
+          execution={execution}
           loading={false}
+          taskId={taskId}
+          userCanModify
         />
       </MockedProvider>,
     );
@@ -64,15 +64,15 @@ describe("buildBaronContent", () => {
   it("clicking on file a new ticket dispatches a toast", async () => {
     const user = userEvent.setup();
     const { Component, dispatchToast } = RenderFakeToastContext(
-      <MockedProvider mocks={buildBaronMocks} addTypename={false}>
+      <MockedProvider addTypename={false} mocks={buildBaronMocks}>
         <BuildBaronContent
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           annotation={null}
-          taskId={taskId}
+          bbData={buildBaronQuery.buildBaron}
           execution={execution}
-          userCanModify
           loading={false}
-          bbData={buildBaronQuery.buildBaron}
+          taskId={taskId}
+          userCanModify
         />
       </MockedProvider>,
     );
@@ -91,15 +91,15 @@ describe("buildBaronContent", () => {
 
   it("the correct JiraTicket rows are rendered in the component", () => {
     const { Component } = RenderFakeToastContext(
-      <MockedProvider mocks={buildBaronMocks} addTypename={false}>
+      <MockedProvider addTypename={false} mocks={buildBaronMocks}>
         <BuildBaronContent
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           annotation={null}
-          taskId={taskId}
-          execution={execution}
-          userCanModify
           bbData={buildBaronQuery.buildBaron}
+          execution={execution}
           loading={false}
+          taskId={taskId}
+          userCanModify
         />
       </MockedProvider>,
     );
diff --git a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/BuildBaron.tsx b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/BuildBaron.tsx
index 3b52b27a6..0a316e6e8 100644
--- a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/BuildBaron.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/BuildBaron.tsx
@@ -29,15 +29,15 @@ const BuildBaron: React.FC<Props> = ({
   );
   return (
     <>
-      {loading && <Skeleton active title={false} paragraph={{ rows: 4 }} />}
+      {loading && <Skeleton active paragraph={{ rows: 4 }} title={false} />}
       {(data || annotation) && (
         <BuildBaronContent
+          annotation={annotation}
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           bbData={data?.buildBaron}
-          taskId={taskId}
           execution={execution}
           loading={loading}
-          annotation={annotation}
+          taskId={taskId}
           userCanModify={userCanModify}
         />
       )}
diff --git a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/BuildBaronContent.tsx b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/BuildBaronContent.tsx
index 1cb45016d..56d30af7b 100644
--- a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/BuildBaronContent.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/BuildBaronContent.tsx
@@ -67,45 +67,45 @@ const BuildBaronContent: React.FC<BuildBaronCoreProps> = ({
 
   return (
     <Wrapper data-cy="bb-content">
-      {loading && <Skeleton active title={false} paragraph={{ rows: 4 }} />}
+      {loading && <Skeleton active paragraph={{ rows: 4 }} title={false} />}
       {canCreateTickets ? (
         <CustomCreatedTickets
-          taskId={taskId}
           execution={execution}
+          taskId={taskId}
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           tickets={customTickets}
         />
       ) : (
         <BBCreatedTickets
-          taskId={taskId}
-          execution={execution}
           buildBaronConfigured={bbData?.buildBaronConfigured}
+          execution={execution}
+          taskId={taskId}
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           tickets={bbTickets}
         />
       )}
       <AnnotationNote
+        execution={execution}
         // @ts-expect-error: FIXME. This comment was added by an automated script.
         note={annotation?.note}
         taskId={taskId}
-        execution={execution}
         userCanModify={userCanModify}
       />
       <Issues
-        taskId={taskId}
+        annotation={annotation}
         execution={execution}
-        userCanModify={userCanModify}
         selectedRowKey={selectedRowKey}
         setSelectedRowKey={setSelectedRowKey}
-        annotation={annotation}
+        taskId={taskId}
+        userCanModify={userCanModify}
       />
       <SuspectedIssues
-        taskId={taskId}
+        annotation={annotation}
         execution={execution}
-        userCanModify={userCanModify}
         selectedRowKey={selectedRowKey}
         setSelectedRowKey={setSelectedRowKey}
-        annotation={annotation}
+        taskId={taskId}
+        userCanModify={userCanModify}
       />
       {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
       {bbData?.searchReturnInfo?.issues.length > 0 && (
diff --git a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/BBCreatedTickets.tsx b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/BBCreatedTickets.tsx
index 7121f812c..5b7e08497 100644
--- a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/BBCreatedTickets.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/BBCreatedTickets.tsx
@@ -20,7 +20,7 @@ const BBCreatedTickets: React.FC<CreatedTicketsProps> = ({
     {buildBaronConfigured && (
       <>
         <TicketsTitle>Create a New Ticket</TicketsTitle>
-        <FileTicketButton taskId={taskId} execution={execution} />
+        <FileTicketButton execution={execution} taskId={taskId} />
       </>
     )}
     {tickets?.length > 0 && (
diff --git a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTickets.tsx b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTickets.tsx
index 73880c982..c991c8481 100644
--- a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTickets.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTickets.tsx
@@ -18,20 +18,20 @@ const CustomCreatedTickets: React.FC<CustomCreatedTicketProps> = ({
 }) => (
   <>
     <TicketsTitle>Create a New Ticket</TicketsTitle>
-    <FileTicketButton taskId={taskId} execution={execution} />
+    <FileTicketButton execution={execution} taskId={taskId} />
     {!!tickets?.length && (
       <>
         <TicketsTitle margin>Tickets Created From This Task</TicketsTitle>
         <TicketContainer>
           {tickets.map(({ confidenceScore, issueKey, jiraTicket, url }) => (
             <AnnotationTicketRow
+              key={issueKey}
               // @ts-expect-error: FIXME. This comment was added by an automated script.
               confidenceScore={confidenceScore}
               // @ts-expect-error: FIXME. This comment was added by an automated script.
               issueKey={issueKey}
               // @ts-expect-error: FIXME. This comment was added by an automated script.
               jiraTicket={jiraTicket}
-              key={issueKey}
               // @ts-expect-error: FIXME. This comment was added by an automated script.
               url={url}
             />
diff --git a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/FileTicketButton.tsx b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/FileTicketButton.tsx
index 7ed6f31e3..588efb995 100644
--- a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/FileTicketButton.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/FileTicketButton.tsx
@@ -55,8 +55,8 @@ const FileTicketButton: React.FC<FileTicketProps> = ({ execution, taskId }) => {
           <ButtonWrapper>
             <Button
               data-cy="file-ticket-button"
-              variant={Variant.Primary}
               size={Size.XSmall}
+              variant={Variant.Primary}
             >
               {buttonText}
             </Button>
diff --git a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/AnnotationTickets.tsx b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/AnnotationTickets.tsx
index 8d8aa2834..197bd9beb 100644
--- a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/AnnotationTickets.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/AnnotationTickets.tsx
@@ -41,41 +41,41 @@ const AnnotationTickets: React.FC<AnnotationTicketsProps> = ({
     <>
       <TicketsTitle>{title}</TicketsTitle>
       <Tooltip
+        enabled={!userCanModify}
         trigger={
           <StyledButton
-            onClick={handleAdd}
             data-cy={
               isIssue ? "add-issue-button" : "add-suspected-issue-button"
             }
             disabled={!userCanModify}
+            onClick={handleAdd}
           >
             {buttonText}
           </StyledButton>
         }
-        enabled={!userCanModify}
       >
         You are not authorized to edit failure details
       </Tooltip>
       {tickets.length > 0 && (
         <AnnotationTicketsList
-          jiraIssues={tickets}
-          taskId={taskId}
           execution={execution}
           isIssue={isIssue}
-          userCanModify={userCanModify}
+          jiraIssues={tickets}
+          loading={loading}
           selectedRowKey={selectedRowKey}
           setSelectedRowKey={setSelectedRowKey}
-          loading={loading}
+          taskId={taskId}
+          userCanModify={userCanModify}
         />
       )}
       <AddIssueModal
-        data-cy="addIssueModal"
-        visible={isAddAnnotationModalVisible}
         closeModal={() => setIsAddAnnotationModalVisible(false)}
-        setSelectedRowKey={setSelectedRowKey}
-        taskId={taskId}
+        data-cy="addIssueModal"
         execution={execution}
         isIssue={isIssue}
+        setSelectedRowKey={setSelectedRowKey}
+        taskId={taskId}
+        visible={isAddAnnotationModalVisible}
       />
     </>
   );
diff --git a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/Issues.tsx b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/Issues.tsx
index 5a05f52ba..6300368ae 100644
--- a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/Issues.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/Issues.tsx
@@ -40,14 +40,14 @@ const Issues: React.FC<IssuesProps> = ({
   );
   return (
     <AnnotationTickets
-      tickets={data?.task?.annotation?.issues || annotation?.issues || []}
-      taskId={taskId}
       execution={execution}
-      userCanModify={userCanModify}
+      isIssue
+      loading={loading}
       selectedRowKey={selectedRowKey}
       setSelectedRowKey={setSelectedRowKey}
-      loading={loading}
-      isIssue
+      taskId={taskId}
+      tickets={data?.task?.annotation?.issues || annotation?.issues || []}
+      userCanModify={userCanModify}
     />
   );
 };
diff --git a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/SuspectedIssues.tsx b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/SuspectedIssues.tsx
index 5a570cd5d..adb51c7b6 100644
--- a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/SuspectedIssues.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/SuspectedIssues.tsx
@@ -42,14 +42,14 @@ const SuspectedIssues: React.FC<SuspectedIssuesProps> = ({
   const suspectedIssues = data?.task?.annotation?.suspectedIssues;
   return (
     <AnnotationTickets
-      tickets={suspectedIssues || annotation?.suspectedIssues || []}
-      taskId={taskId}
       execution={execution}
-      userCanModify={userCanModify}
+      isIssue={false}
+      loading={loading}
       selectedRowKey={selectedRowKey}
       setSelectedRowKey={setSelectedRowKey}
-      loading={loading}
-      isIssue={false}
+      taskId={taskId}
+      tickets={suspectedIssues || annotation?.suspectedIssues || []}
+      userCanModify={userCanModify}
     />
   );
 };
diff --git a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/JiraTicketList/JiraTicketRow/index.tsx b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/JiraTicketList/JiraTicketRow/index.tsx
index d4c4f4bae..e7dfaf4d7 100644
--- a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/JiraTicketList/JiraTicketRow/index.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/JiraTicketList/JiraTicketRow/index.tsx
@@ -24,8 +24,8 @@ const JiraTicketRow: React.FC<JiraTicketRowProps> = ({ fields, jiraKey }) => {
   return (
     <Container data-cy="jira-ticket-row">
       <JiraSummaryLink
-        href={url}
         data-cy={jiraKey}
+        href={url}
         onClick={() =>
           annotationAnalytics.sendEvent({
             name: "Clicked Jira ticket summary link",
diff --git a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/JiraTicketList/index.tsx b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/JiraTicketList/index.tsx
index 77a3347b4..340571d20 100644
--- a/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/JiraTicketList/index.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/buildBaronAndAnnotations/JiraTicketList/index.tsx
@@ -8,7 +8,7 @@ const JiraTicketList: React.FC<{
 }> = ({ jiraIssues }) => (
   <>
     {jiraIssues.map(({ fields, key }) => (
-      <JiraTicketRow jiraKey={key} fields={fields} key={key} />
+      <JiraTicketRow key={key} fields={fields} jiraKey={key} />
     ))}
   </>
 );
diff --git a/apps/spruce/src/pages/task/taskTabs/logs/LogTypes.tsx b/apps/spruce/src/pages/task/taskTabs/logs/LogTypes.tsx
index 3c00b9c28..00ae14ff2 100644
--- a/apps/spruce/src/pages/task/taskTabs/logs/LogTypes.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/logs/LogTypes.tsx
@@ -244,7 +244,7 @@ const useRenderBody: React.FC<{
   }, [setNoLogs, noLogs]);
 
   if (loading) {
-    return <Skeleton active title={false} paragraph={{ rows: 8 }} />;
+    return <Skeleton active paragraph={{ rows: 8 }} title={false} />;
   }
   if (noLogs) {
     return <div data-cy="cy-no-logs">No logs found</div>;
diff --git a/apps/spruce/src/pages/task/taskTabs/testsTable/LogsColumn.tsx b/apps/spruce/src/pages/task/taskTabs/testsTable/LogsColumn.tsx
index e59908879..962de307b 100644
--- a/apps/spruce/src/pages/task/taskTabs/testsTable/LogsColumn.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/testsTable/LogsColumn.tsx
@@ -31,10 +31,7 @@ export const LogsColumn: React.FC<Props> = ({ task, testResult }) => {
     <ButtonWrapper>
       {urlParsley && (
         <Button
-          title="High-powered log viewer"
           data-cy="test-table-parsley-btn"
-          size="xsmall"
-          target="_blank"
           href={urlParsley}
           onClick={() =>
             sendEvent({
@@ -43,16 +40,16 @@ export const LogsColumn: React.FC<Props> = ({ task, testResult }) => {
               "test.status": status,
             })
           }
+          size="xsmall"
+          target="_blank"
+          title="High-powered log viewer"
         >
           Parsley
         </Button>
       )}
       {urlHTML && (
         <Button
-          title="Plain, colorized log viewer"
           data-cy="test-table-html-btn"
-          size="xsmall"
-          target="_blank"
           href={urlHTML}
           onClick={() =>
             sendEvent({
@@ -61,16 +58,16 @@ export const LogsColumn: React.FC<Props> = ({ task, testResult }) => {
               "test.status": status,
             })
           }
+          size="xsmall"
+          target="_blank"
+          title="Plain, colorized log viewer"
         >
           HTML
         </Button>
       )}
       {urlRaw && (
         <Button
-          title="Plain text log viewer"
           data-cy="test-table-raw-btn"
-          size="xsmall"
-          target="_blank"
           href={urlRaw}
           onClick={() =>
             sendEvent({
@@ -79,6 +76,9 @@ export const LogsColumn: React.FC<Props> = ({ task, testResult }) => {
               "test.status": status,
             })
           }
+          size="xsmall"
+          target="_blank"
+          title="Plain text log viewer"
         >
           Raw
         </Button>
diff --git a/apps/spruce/src/pages/task/taskTabs/testsTable/getColumnsTemplate.tsx b/apps/spruce/src/pages/task/taskTabs/testsTable/getColumnsTemplate.tsx
index 7a8b76865..a8b7d8bca 100644
--- a/apps/spruce/src/pages/task/taskTabs/testsTable/getColumnsTemplate.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/testsTable/getColumnsTemplate.tsx
@@ -78,7 +78,7 @@ export const getColumnsTemplate = ({ task }: GetColumnsTemplateParams) => [
     header: "Logs",
     sorter: false,
     // @ts-expect-error: FIXME. This comment was added by an automated script.
-    cell: ({ row }) => <LogsColumn testResult={row.original} task={task} />,
+    cell: ({ row }) => <LogsColumn task={task} testResult={row.original} />,
     meta: {
       width: "20%",
     },
diff --git a/apps/spruce/src/pages/task/taskTabs/testsTable/logsColumn/TaskHistoryTestsButton.tsx b/apps/spruce/src/pages/task/taskTabs/testsTable/logsColumn/TaskHistoryTestsButton.tsx
index b4379cafd..c867cfbda 100644
--- a/apps/spruce/src/pages/task/taskTabs/testsTable/logsColumn/TaskHistoryTestsButton.tsx
+++ b/apps/spruce/src/pages/task/taskTabs/testsTable/logsColumn/TaskHistoryTestsButton.tsx
@@ -10,11 +10,11 @@ export const TaskHistoryTestsButton: React.FC<Props> = ({ onClick, to }) => {
   const Link = useLGButtonRouterLink(to);
   return (
     <Button
-      size="xsmall"
-      data-cy="task-history-tests-btn"
       key="task-history"
-      onClick={onClick}
       as={Link}
+      data-cy="task-history-tests-btn"
+      onClick={onClick}
+      size="xsmall"
     >
       History
     </Button>
diff --git a/apps/spruce/src/pages/taskHistory/BuildVariantSelector.tsx b/apps/spruce/src/pages/taskHistory/BuildVariantSelector.tsx
index 1b25f3601..0da396163 100644
--- a/apps/spruce/src/pages/taskHistory/BuildVariantSelector.tsx
+++ b/apps/spruce/src/pages/taskHistory/BuildVariantSelector.tsx
@@ -74,21 +74,21 @@ const BuildVariantSelector: React.FC<BuildVariantSelectorProps> = ({
     <Container>
       <Combobox
         data-cy="build-variant-selector"
+        disabled={loading}
+        filteredOptions={filteredOptions}
         label="Build Variant"
-        placeholder="Select build variants"
-        value={visibleColumns}
         multiselect
         onChange={onChange}
-        disabled={loading}
-        overflow="scroll-x"
         onFilter={onFilter}
-        filteredOptions={filteredOptions}
+        overflow="scroll-x"
+        placeholder="Select build variants"
+        value={visibleColumns}
       >
         {buildVariantsForTaskName?.map((option) => (
           <ComboboxOption
             key={`searchable_dropdown_option_${option.buildVariant}`}
-            value={option.buildVariant}
             displayName={option.displayName}
+            value={option.buildVariant}
           />
         ))}
       </Combobox>
diff --git a/apps/spruce/src/pages/taskHistory/ColumnHeaders/index.tsx b/apps/spruce/src/pages/taskHistory/ColumnHeaders/index.tsx
index f1c10087d..122d87eab 100644
--- a/apps/spruce/src/pages/taskHistory/ColumnHeaders/index.tsx
+++ b/apps/spruce/src/pages/taskHistory/ColumnHeaders/index.tsx
@@ -72,17 +72,17 @@ const ColumnHeaders: React.FC<ColumnHeadersProps> = ({
         return (
           <ColumnHeaderCell
             key={`header_cell_${cell.displayName}`}
+            fullDisplayName={cell.displayName}
             link={getVariantHistoryRoute(projectIdentifier, cell.buildVariant)}
-            trimmedDisplayName={trimStringFromMiddle(
-              cell.displayName,
-              maxLength,
-            )}
             onClick={() => {
               sendEvent({
                 name: "Clicked column header",
               });
             }}
-            fullDisplayName={cell.displayName}
+            trimmedDisplayName={trimStringFromMiddle(
+              cell.displayName,
+              maxLength,
+            )}
           />
         );
       })}
diff --git a/apps/spruce/src/pages/taskHistory/TaskHistoryRow/TaskHistoryRow.test.tsx b/apps/spruce/src/pages/taskHistory/TaskHistoryRow/TaskHistoryRow.test.tsx
index c6e91bfe7..7ba763afe 100644
--- a/apps/spruce/src/pages/taskHistory/TaskHistoryRow/TaskHistoryRow.test.tsx
+++ b/apps/spruce/src/pages/taskHistory/TaskHistoryRow/TaskHistoryRow.test.tsx
@@ -52,7 +52,7 @@ const wrapper: React.FC<wrapperProps> = ({ children, mocks = [], state }) => (
 
 describe("taskHistoryRow", () => {
   it("renders a row when there is data", () => {
-    render(<TaskHistoryRow index={0} data={taskRow} />, {
+    render(<TaskHistoryRow data={taskRow} index={0} />, {
       route: "/task-history/mci/test-thirdparty",
       path: "/task-history/:projectId/:taskName",
       wrapper: ({ children }) =>
@@ -79,7 +79,7 @@ describe("taskHistoryRow", () => {
   });
 
   it("amount of cells rendered should correspond to the amount of visibleColumns", () => {
-    render(<TaskHistoryRow index={0} data={taskRow} />, {
+    render(<TaskHistoryRow data={taskRow} index={0} />, {
       route: "/task-history/mci/test-thirdparty",
       path: "/task-history/:projectId/:taskName",
       wrapper: ({ children }) =>
@@ -97,7 +97,7 @@ describe("taskHistoryRow", () => {
   });
 
   it("renders a blank cell when there isn't a matching variant for that column", () => {
-    render(<TaskHistoryRow index={0} data={taskRow} />, {
+    render(<TaskHistoryRow data={taskRow} index={0} />, {
       route: "/task-history/mci/test-thirdparty",
       path: "/task-history/:projectId/:taskName",
       wrapper: ({ children }) =>
@@ -117,7 +117,7 @@ describe("taskHistoryRow", () => {
 
   it("should show failing tests when you hover over a failing task cell and there are no filters applied", async () => {
     const user = userEvent.setup();
-    render(<TaskHistoryRow index={0} data={taskRow} />, {
+    render(<TaskHistoryRow data={taskRow} index={0} />, {
       route: "/task-history/mci/test-thirdparty",
       path: "/task-history/:projectId/:taskName",
       wrapper: ({ children }) =>
@@ -155,7 +155,7 @@ describe("taskHistoryRow", () => {
 
   it("should show a matching test label when looking at a task cell with filters applied", async () => {
     const user = userEvent.setup();
-    render(<TaskHistoryRow index={0} data={taskRow} />, {
+    render(<TaskHistoryRow data={taskRow} index={0} />, {
       route: "/task-history/mci/test-thirdparty",
       path: "/task-history/:projectId/:taskName",
       wrapper: ({ children }) =>
@@ -198,7 +198,7 @@ describe("taskHistoryRow", () => {
   });
 
   it("should disable a task cell when there are test filters applied and it does not match the task filters", () => {
-    render(<TaskHistoryRow index={0} data={taskRow} />, {
+    render(<TaskHistoryRow data={taskRow} index={0} />, {
       route: "/task-history/mci/test-thirdparty",
       path: "/task-history/:projectId/:taskName",
       wrapper: ({ children }) =>
diff --git a/apps/spruce/src/pages/taskHistory/TaskHistoryRow/index.tsx b/apps/spruce/src/pages/taskHistory/TaskHistoryRow/index.tsx
index 5a8db15bd..3a2639dd8 100644
--- a/apps/spruce/src/pages/taskHistory/TaskHistoryRow/index.tsx
+++ b/apps/spruce/src/pages/taskHistory/TaskHistoryRow/index.tsx
@@ -77,13 +77,13 @@ const TaskHistoryRow: React.FC<Props> = ({ data, index }) => {
 
   return (
     <BaseRow
+      columns={orderedColumns}
       data={data}
+      eventHandlers={eventHandlers}
       index={index}
-      columns={orderedColumns}
       numVisibleCols={visibleColumns.length}
       // @ts-expect-error: FIXME. This comment was added by an automated script.
       selected={data?.selected}
-      eventHandlers={eventHandlers}
     />
   );
 };
@@ -109,18 +109,18 @@ const generateColumns = (
         );
         return (
           <TaskCell
+            key={c}
+            failingTests={failingTests}
+            inactive={inactive}
+            label={label}
+            loading={loading}
             onClick={({ taskStatus }) => {
               sendEvent({
                 name: "Clicked task cell",
                 "task.status": taskStatus,
               });
             }}
-            inactive={inactive}
-            key={c}
             task={t}
-            failingTests={failingTests}
-            label={label}
-            loading={loading}
           />
         );
       }
diff --git a/apps/spruce/src/pages/taskHistory/index.tsx b/apps/spruce/src/pages/taskHistory/index.tsx
index add8b3252..ce709725f 100644
--- a/apps/spruce/src/pages/taskHistory/index.tsx
+++ b/apps/spruce/src/pages/taskHistory/index.tsx
@@ -147,14 +147,14 @@ const TaskHistoryContents: React.FC = () => {
           <BadgeWrapper>
             <FilterBadges
               badges={badges}
-              onRemove={(b) => {
-                sendEvent({ name: "Deleted a badge" });
-                handleOnRemove(b);
-              }}
               onClearAll={() => {
                 sendEvent({ name: "Deleted all badges" });
                 handleClearAll();
               }}
+              onRemove={(b) => {
+                sendEvent({ name: "Deleted a badge" });
+                handleOnRemove(b);
+              }}
             />
           </BadgeWrapper>
           <ColumnPaginationButtons
@@ -175,9 +175,9 @@ const TaskHistoryContents: React.FC = () => {
           />
           <TableWrapper>
             <HistoryTable
-              loadMoreItems={handleLoadMore}
-              loading={loading}
               finalRowCopy="End of task history"
+              loading={loading}
+              loadMoreItems={handleLoadMore}
             >
               {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
               {TaskHistoryRow}
diff --git a/apps/spruce/src/pages/taskQueue/DistroOption.tsx b/apps/spruce/src/pages/taskQueue/DistroOption.tsx
index 15a43ae1a..15b54c2fe 100644
--- a/apps/spruce/src/pages/taskQueue/DistroOption.tsx
+++ b/apps/spruce/src/pages/taskQueue/DistroOption.tsx
@@ -21,7 +21,7 @@ export const DistroOption: React.FC<DistroOptionProps> = ({
 }) => {
   const { hostCount, id, taskCount } = option;
   return (
-    <Link to={getTaskQueueRoute(id)} onClick={() => onClick(option)}>
+    <Link onClick={() => onClick(option)} to={getTaskQueueRoute(id)}>
       <OptionWrapper>
         <StyledBadge>{pluralize("task", taskCount, true)}</StyledBadge>
         <StyledBadge>{pluralize("host", hostCount, true)}</StyledBadge>
diff --git a/apps/spruce/src/pages/taskQueue/TaskQueueTable/index.tsx b/apps/spruce/src/pages/taskQueue/TaskQueueTable/index.tsx
index 8690d45a5..411190282 100644
--- a/apps/spruce/src/pages/taskQueue/TaskQueueTable/index.tsx
+++ b/apps/spruce/src/pages/taskQueue/TaskQueueTable/index.tsx
@@ -64,12 +64,12 @@ const TaskQueueTable: React.FC<TaskQueueTableProps> = ({
 
   return (
     <StyledBaseTable
+      ref={tableContainerRef}
       data-cy="task-queue-table"
-      table={table}
-      shouldAlternateRowColor
       emptyComponent={<TablePlaceholder message="No tasks found in queue." />}
-      ref={tableContainerRef}
       selectedRowIndexes={selectedRowIndexes}
+      shouldAlternateRowColor
+      table={table}
     />
   );
 };
@@ -104,8 +104,8 @@ const taskQueueTableColumns = (
           <TaskCell>
             <StyledRouterLink
               data-cy="current-task-link"
-              to={getTaskRoute(id)}
               onClick={() => sendEvent({ name: "Clicked task link" })}
+              to={getTaskRoute(id)}
             >
               {displayName}
             </StyledRouterLink>
@@ -128,8 +128,8 @@ const taskQueueTableColumns = (
           value.row.original.projectIdentifier || value.row.original.project;
         return (
           <StyledRouterLink
-            to={getProjectPatchesRoute(project)}
             onClick={() => sendEvent({ name: "Clicked project link" })}
+            to={getProjectPatchesRoute(project)}
           >
             {project}
           </StyledRouterLink>
@@ -141,8 +141,8 @@ const taskQueueTableColumns = (
       accessorKey: "version",
       cell: (value) => (
         <StyledRouterLink
-          to={getVersionRoute(value.row.original.version)}
           onClick={() => sendEvent({ name: "Clicked version link" })}
+          to={getVersionRoute(value.row.original.version)}
         >
           <WordBreak>{value.row.original.version}</WordBreak>
         </StyledRouterLink>
@@ -159,8 +159,8 @@ const taskQueueTableColumns = (
       accessorKey: "activatedBy",
       cell: (value) => (
         <StyledRouterLink
-          to={getUserPatchesRoute(value.row.original.activatedBy)}
           onClick={() => sendEvent({ name: "Clicked activated by link" })}
+          to={getUserPatchesRoute(value.row.original.activatedBy)}
         >
           <WordBreak>{value.row.original.activatedBy}</WordBreak>
         </StyledRouterLink>
diff --git a/apps/spruce/src/pages/taskQueue/index.tsx b/apps/spruce/src/pages/taskQueue/index.tsx
index e0aecd5c0..84aa5b484 100644
--- a/apps/spruce/src/pages/taskQueue/index.tsx
+++ b/apps/spruce/src/pages/taskQueue/index.tsx
@@ -87,23 +87,6 @@ const TaskQueue = () => {
       <StyledH2>Task Queue</StyledH2>
       <SearchableDropdownWrapper>
         <SearchableDropdown
-          data-cy="distro-dropdown"
-          label="Distro"
-          disabled={selectedDistro === undefined}
-          options={distrosData?.taskQueueDistros}
-          searchFunc={handleSearch}
-          valuePlaceholder="Select a distro"
-          optionRenderer={(option, onClick) => (
-            <DistroOption
-              option={option}
-              key={`distro-select-search-option-${option.id}`}
-              onClick={onClick}
-            />
-          )}
-          // @ts-expect-error: FIXME. This comment was added by an automated script.
-          onChange={onChangeDistroSelection}
-          // @ts-expect-error: FIXME. This comment was added by an automated script.
-          value={selectedDistro}
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           buttonRenderer={(option: TaskQueueDistro) => (
             <DistroLabel>
@@ -116,6 +99,23 @@ const TaskQueue = () => {
               <DistroName> {option?.id} </DistroName>
             </DistroLabel>
           )}
+          data-cy="distro-dropdown"
+          disabled={selectedDistro === undefined}
+          label="Distro"
+          // @ts-expect-error: FIXME. This comment was added by an automated script.
+          onChange={onChangeDistroSelection}
+          optionRenderer={(option, onClick) => (
+            <DistroOption
+              key={`distro-select-search-option-${option.id}`}
+              onClick={onClick}
+              option={option}
+            />
+          )}
+          options={distrosData?.taskQueueDistros}
+          searchFunc={handleSearch}
+          // @ts-expect-error: FIXME. This comment was added by an automated script.
+          value={selectedDistro}
+          valuePlaceholder="Select a distro"
         />
       </SearchableDropdownWrapper>
       {
@@ -133,9 +133,9 @@ const TaskQueue = () => {
       }
       {!loadingTaskQueueItems && (
         <TaskQueueTable
+          taskId={taskId}
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           taskQueue={taskQueueItemsData?.distroTaskQueue}
-          taskId={taskId}
         />
       )}
     </StyledPageWrapper>
diff --git a/apps/spruce/src/pages/variantHistory/ColumnHeaders.tsx b/apps/spruce/src/pages/variantHistory/ColumnHeaders.tsx
index e5c222d45..b9670379a 100644
--- a/apps/spruce/src/pages/variantHistory/ColumnHeaders.tsx
+++ b/apps/spruce/src/pages/variantHistory/ColumnHeaders.tsx
@@ -70,14 +70,14 @@ const ColumnHeaders: React.FC<ColumnHeadersProps> = ({
         return (
           <ColumnHeaderCell
             key={`header_cell_${vc}`}
-            link={getTaskHistoryRoute(projectIdentifier, vc)}
-            trimmedDisplayName={trimStringFromMiddle(vc, maxLength)}
             fullDisplayName={vc}
+            link={getTaskHistoryRoute(projectIdentifier, vc)}
             onClick={() => {
               sendEvent({
                 name: "Clicked column header",
               });
             }}
+            trimmedDisplayName={trimStringFromMiddle(vc, maxLength)}
           />
         );
       })}
diff --git a/apps/spruce/src/pages/variantHistory/TaskSelector.tsx b/apps/spruce/src/pages/variantHistory/TaskSelector.tsx
index 6d106fb84..64848d74a 100644
--- a/apps/spruce/src/pages/variantHistory/TaskSelector.tsx
+++ b/apps/spruce/src/pages/variantHistory/TaskSelector.tsx
@@ -50,13 +50,13 @@ const TaskSelector: React.FC<TaskSelectorProps> = ({
     <Container>
       <Combobox
         data-cy="task-selector"
+        disabled={loading}
         label="Tasks"
-        placeholder="Select tasks"
-        value={visibleColumns}
         multiselect
         onChange={onChange}
-        disabled={loading}
         overflow="scroll-x"
+        placeholder="Select tasks"
+        value={visibleColumns}
       >
         {taskNamesForBuildVariant?.map((taskName) => (
           <ComboboxOption key={taskName} value={taskName} />
diff --git a/apps/spruce/src/pages/variantHistory/VariantHistoryRow.test.tsx b/apps/spruce/src/pages/variantHistory/VariantHistoryRow.test.tsx
index 1b0ce6aee..7fb34fdf6 100644
--- a/apps/spruce/src/pages/variantHistory/VariantHistoryRow.test.tsx
+++ b/apps/spruce/src/pages/variantHistory/VariantHistoryRow.test.tsx
@@ -53,7 +53,7 @@ const wrapper: React.FC<wrapperProps> = ({ children, mocks = [], state }) => (
 
 describe("variantHistoryRow", () => {
   it("renders a row when there is data", () => {
-    render(<VariantHistoryRow index={0} data={taskRow} />, {
+    render(<VariantHistoryRow data={taskRow} index={0} />, {
       route: "/variant-history/mci/ubuntu1604",
       path: "/variant-history/:projectId/:variantName",
       wrapper: ({ children }) =>
@@ -80,7 +80,7 @@ describe("variantHistoryRow", () => {
   });
 
   it("amount of cells rendered corresponds to the amount of visibleColumns", () => {
-    render(<VariantHistoryRow index={0} data={taskRow} />, {
+    render(<VariantHistoryRow data={taskRow} index={0} />, {
       route: "/variant-history/mci/ubuntu1604",
       path: "/variant-history/:projectId/:variantName",
       wrapper: ({ children }) =>
@@ -102,7 +102,7 @@ describe("variantHistoryRow", () => {
   });
 
   it("renders a blank cell when there isn't a matching variant for that column", () => {
-    render(<VariantHistoryRow index={0} data={taskRow} />, {
+    render(<VariantHistoryRow data={taskRow} index={0} />, {
       route: "/variant-history/mci/ubuntu1604",
       path: "/variant-history/:projectId/:variantName",
       wrapper: ({ children }) =>
@@ -122,7 +122,7 @@ describe("variantHistoryRow", () => {
 
   it("should show failing tests when you hover over a failing task cell and there are no filters applied", async () => {
     const user = userEvent.setup();
-    render(<VariantHistoryRow index={0} data={taskRow} />, {
+    render(<VariantHistoryRow data={taskRow} index={0} />, {
       route: "/variant-history/mci/ubuntu1604",
       path: "/variant-history/:projectId/:variantName",
       wrapper: ({ children }) =>
@@ -158,7 +158,7 @@ describe("variantHistoryRow", () => {
 
   it("should show a matching test label when looking at a task cell with filters applied", async () => {
     const user = userEvent.setup();
-    render(<VariantHistoryRow index={0} data={taskRow} />, {
+    render(<VariantHistoryRow data={taskRow} index={0} />, {
       route: "/variant-history/mci/ubuntu1604",
       path: "/variant-history/:projectId/:variantName",
       wrapper: ({ children }) =>
@@ -201,7 +201,7 @@ describe("variantHistoryRow", () => {
   });
 
   it("should disable a task cell when there are test filters applied and it does not match the task filters", () => {
-    render(<VariantHistoryRow index={0} data={taskRow} />, {
+    render(<VariantHistoryRow data={taskRow} index={0} />, {
       route: "/variant-history/mci/ubuntu1604",
       path: "/variant-history/:projectId/:variantName",
       wrapper: ({ children }) =>
diff --git a/apps/spruce/src/pages/variantHistory/VariantHistoryRow.tsx b/apps/spruce/src/pages/variantHistory/VariantHistoryRow.tsx
index 1ad7d6a08..270a131d8 100644
--- a/apps/spruce/src/pages/variantHistory/VariantHistoryRow.tsx
+++ b/apps/spruce/src/pages/variantHistory/VariantHistoryRow.tsx
@@ -84,13 +84,13 @@ const VariantHistoryRow: React.FC<Props> = ({ data, index }) => {
 
   return (
     <BaseRow
+      columns={orderedColumns}
       data={data}
+      eventHandlers={eventHandlers}
       index={index}
-      columns={orderedColumns}
       numVisibleCols={visibleColumns.length}
       // @ts-expect-error: FIXME. This comment was added by an automated script.
       selected={data?.selected}
-      eventHandlers={eventHandlers}
     />
   );
 };
@@ -112,18 +112,18 @@ const generateColumns = (
         const { failingTests, inactive, label } = getTaskMetadata(t.id);
         return (
           <TaskCell
+            key={c}
+            failingTests={failingTests}
+            inactive={inactive}
+            label={label}
             onClick={({ taskStatus }) => {
               sendEvent({
                 name: "Clicked task cell",
                 "task.status": taskStatus,
               });
             }}
-            inactive={inactive}
-            key={c}
             // @ts-expect-error: FIXME. This comment was added by an automated script.
             task={t}
-            failingTests={failingTests}
-            label={label}
           />
         );
       }
diff --git a/apps/spruce/src/pages/variantHistory/index.tsx b/apps/spruce/src/pages/variantHistory/index.tsx
index 42f597bdf..b779debc8 100644
--- a/apps/spruce/src/pages/variantHistory/index.tsx
+++ b/apps/spruce/src/pages/variantHistory/index.tsx
@@ -134,10 +134,10 @@ const VariantHistoryContents: React.FC = () => {
               }}
             />
             <TaskSelector
-              // @ts-expect-error: FIXME. This comment was added by an automated script.
-              projectIdentifier={projectIdentifier}
               // @ts-expect-error: FIXME. This comment was added by an automated script.
               buildVariant={variantName}
+              // @ts-expect-error: FIXME. This comment was added by an automated script.
+              projectIdentifier={projectIdentifier}
             />
           </PageHeaderContent>
         </PageHeader>
@@ -145,14 +145,14 @@ const VariantHistoryContents: React.FC = () => {
           <BadgeWrapper>
             <FilterBadges
               badges={badges}
-              onRemove={(b) => {
-                sendEvent({ name: "Deleted a badge" });
-                handleOnRemove(b);
-              }}
               onClearAll={() => {
                 sendEvent({ name: "Deleted all badges" });
                 handleClearAll();
               }}
+              onRemove={(b) => {
+                sendEvent({ name: "Deleted a badge" });
+                handleOnRemove(b);
+              }}
             />
           </BadgeWrapper>
           <ColumnPaginationButtons
@@ -173,9 +173,9 @@ const VariantHistoryContents: React.FC = () => {
           />
           <TableWrapper>
             <HistoryTable
-              loadMoreItems={handleLoadMore}
-              loading={loading}
               finalRowCopy="End of variant history"
+              loading={loading}
+              loadMoreItems={handleLoadMore}
             >
               {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
               {VariantHistoryRow}
diff --git a/apps/spruce/src/pages/version/ActionButtons.tsx b/apps/spruce/src/pages/version/ActionButtons.tsx
index cf1004df6..5cd80394a 100644
--- a/apps/spruce/src/pages/version/ActionButtons.tsx
+++ b/apps/spruce/src/pages/version/ActionButtons.tsx
@@ -32,36 +32,36 @@ export const ActionButtons: React.FC<ActionButtonProps> = ({
   const dropdownItems = [
     <LinkToReconfigurePage
       key="reconfigure"
-      patchId={versionId}
       disabled={!canReconfigure}
+      patchId={versionId}
     />,
-    <UnscheduleTasks versionId={versionId} key="unschedule-tasks" />,
+    <UnscheduleTasks key="unschedule-tasks" versionId={versionId} />,
     <DisableTasks key="disable-tasks" versionId={versionId} />,
     <ScheduleUndispatchedBaseTasks
       key="schedule-undispatched-base-tasks"
-      versionId={versionId}
       disabled={!isPatch}
+      versionId={versionId}
     />,
-    <SetPriority versionId={versionId} key="priority" />,
+    <SetPriority key="priority" versionId={versionId} />,
     <EnqueuePatch
-      patchId={versionId}
-      commitMessage={patchDescription}
       key="enqueue"
+      commitMessage={patchDescription}
       disabled={!canEnqueueToCommitQueue}
+      patchId={versionId}
     />,
   ];
 
   return (
     <PageButtonRow>
       <ScheduleTasks
-        versionId={versionId}
-        isButton
         disabled={isPatchOnCommitQueue}
+        isButton
+        versionId={versionId}
       />
       <RestartPatch
-        patchId={versionId}
-        isButton
         disabled={isPatchOnCommitQueue}
+        isButton
+        patchId={versionId}
         refetchQueries={["VersionTasks"]}
       />
       <AddNotification patchId={versionId} />
diff --git a/apps/spruce/src/pages/version/BuildVariantCard/VariantTaskGroup/VariantTaskGroup.test.tsx b/apps/spruce/src/pages/version/BuildVariantCard/VariantTaskGroup/VariantTaskGroup.test.tsx
index ef560951d..ab3241b1b 100644
--- a/apps/spruce/src/pages/version/BuildVariantCard/VariantTaskGroup/VariantTaskGroup.test.tsx
+++ b/apps/spruce/src/pages/version/BuildVariantCard/VariantTaskGroup/VariantTaskGroup.test.tsx
@@ -10,13 +10,13 @@ import VariantTaskGroup from ".";
 const Wrapper = ({ children }) => <MockedProvider>{children}</MockedProvider>;
 const Component = () => (
   <VariantTaskGroup
-    variant="some_variant"
-    versionId="1"
     displayName="Some Variant"
     statusCounts={[
       { count: 1, status: TaskStatus.Succeeded },
       { count: 2, status: TaskStatus.Failed },
     ]}
+    variant="some_variant"
+    versionId="1"
   />
 );
 describe("variantTaskGroup", () => {
diff --git a/apps/spruce/src/pages/version/BuildVariantCard/VariantTaskGroup/index.tsx b/apps/spruce/src/pages/version/BuildVariantCard/VariantTaskGroup/index.tsx
index 6c0f19bfd..867214821 100644
--- a/apps/spruce/src/pages/version/BuildVariantCard/VariantTaskGroup/index.tsx
+++ b/apps/spruce/src/pages/version/BuildVariantCard/VariantTaskGroup/index.tsx
@@ -55,16 +55,16 @@ const VariantTaskGroup: React.FC<VariantTaskGroupProps> = ({
     <div data-cy="patch-build-variant">
       <StyledRouterLink
         css={wordBreakCss}
-        to={getVersionRoute(versionId, {
-          ...versionRouteParams,
-          variant: isVariantSelected ? undefined : applyStrictRegex(variant),
-        })}
+        data-cy="build-variant-display-name"
         onClick={() =>
           sendEvent({
             name: "Filtered by build variant group",
           })
         }
-        data-cy="build-variant-display-name"
+        to={getVersionRoute(versionId, {
+          ...versionRouteParams,
+          variant: isVariantSelected ? undefined : applyStrictRegex(variant),
+        })}
       >
         {displayName}
       </StyledRouterLink>
@@ -91,15 +91,6 @@ const VariantTaskGroup: React.FC<VariantTaskGroupProps> = ({
               <GroupedTaskStatusBadge
                 key={`${versionId}_${variant}_${umbrellaStatus}`}
                 count={count}
-                onClick={() => {
-                  sendEvent({
-                    name: "Filtered by build variant and task status group",
-                    taskSquareStatuses: Object.keys(groupedStatusCounts),
-                  });
-                }}
-                status={umbrellaStatus}
-                statusCounts={groupedStatusCounts}
-                // If the badge is active it should reset the page.
                 href={getVersionRoute(
                   versionId,
                   shouldLinkToVariant
@@ -111,6 +102,15 @@ const VariantTaskGroup: React.FC<VariantTaskGroupProps> = ({
                     : { ...versionRouteParams },
                 )}
                 isActive={isBadgeActive}
+                onClick={() => {
+                  sendEvent({
+                    name: "Filtered by build variant and task status group",
+                    taskSquareStatuses: Object.keys(groupedStatusCounts),
+                  });
+                }}
+                // If the badge is active it should reset the page.
+                status={umbrellaStatus}
+                statusCounts={groupedStatusCounts}
               />
             );
           },
diff --git a/apps/spruce/src/pages/version/DownstreamTasks.tsx b/apps/spruce/src/pages/version/DownstreamTasks.tsx
index 6ce4bbadd..072fe2196 100644
--- a/apps/spruce/src/pages/version/DownstreamTasks.tsx
+++ b/apps/spruce/src/pages/version/DownstreamTasks.tsx
@@ -29,13 +29,13 @@ export const DownstreamTasks: React.FC<DownstreamTasksProps> = ({
       }) => (
         <DownstreamProjectAccordion
           key={`downstream_project_${id}`}
-          projectName={projectIdentifier}
-          status={versionFull?.status ?? status}
+          baseVersionID={versionFull?.baseVersion?.id}
           childPatchId={id}
-          taskCount={taskCount}
           githash={githash}
-          baseVersionID={versionFull?.baseVersion?.id}
           parameters={parameters}
+          projectName={projectIdentifier}
+          status={versionFull?.status ?? status}
+          taskCount={taskCount}
         />
       ),
     )}
diff --git a/apps/spruce/src/pages/version/EnqueueModal.tsx b/apps/spruce/src/pages/version/EnqueueModal.tsx
index 13b6cbb54..0958bcede 100644
--- a/apps/spruce/src/pages/version/EnqueueModal.tsx
+++ b/apps/spruce/src/pages/version/EnqueueModal.tsx
@@ -75,13 +75,13 @@ export const EnqueuePatchModal: React.FC<EnqueueProps> = ({
 
   return (
     <ConfirmationModal
-      title="Enqueue Patch"
-      open={visible}
-      onConfirm={onConfirm}
-      onCancel={onFinished}
       buttonText="Enqueue"
-      submitDisabled={commitMessageValue.length === 0 || loadingEnqueuePatch}
       data-cy="enqueue-modal"
+      onCancel={onFinished}
+      onConfirm={onConfirm}
+      open={visible}
+      submitDisabled={commitMessageValue.length === 0 || loadingEnqueuePatch}
+      title="Enqueue Patch"
     >
       {preserveCommits ? (
         <Description>
@@ -91,11 +91,11 @@ export const EnqueuePatchModal: React.FC<EnqueueProps> = ({
         </Description>
       ) : (
         <StyledTextArea
+          description="Warning: submitting a patch to the commit queue will squash the commits."
           id={COMMIT_MESSAGE_ID}
           label="Commit Message"
-          description="Warning: submitting a patch to the commit queue will squash the commits."
-          value={commitMessageValue}
           onChange={(e) => setCommitMessageValue(e.target.value)}
+          value={commitMessageValue}
         />
       )}
     </ConfirmationModal>
diff --git a/apps/spruce/src/pages/version/Metadata.tsx b/apps/spruce/src/pages/version/Metadata.tsx
index 8add4ed91..4eb77767a 100644
--- a/apps/spruce/src/pages/version/Metadata.tsx
+++ b/apps/spruce/src/pages/version/Metadata.tsx
@@ -72,10 +72,10 @@ export const Metadata: React.FC<Props> = ({ loading, version }) => {
         <MetadataLabel>Project:</MetadataLabel>{" "}
         {projectIdentifier ? (
           <StyledRouterLink
-            to={getProjectPatchesRoute(projectIdentifier)}
             onClick={() =>
               sendEvent({ name: "Clicked metadata project patches link" })
             }
+            to={getProjectPatchesRoute(projectIdentifier)}
           >
             {projectIdentifier}
           </StyledRouterLink>
@@ -118,8 +118,8 @@ export const Metadata: React.FC<Props> = ({ loading, version }) => {
       <MetadataItem>
         <MetadataLabel>Submitted by:</MetadataLabel>{" "}
         <StyledRouterLink
-          to={getUserPatchesRoute(getAuthorUsername(authorEmail))}
           data-cy="user-patches-link"
+          to={getUserPatchesRoute(getAuthorUsername(authorEmail))}
         >
           {author}
         </StyledRouterLink>
diff --git a/apps/spruce/src/pages/version/NameChangeModal/index.tsx b/apps/spruce/src/pages/version/NameChangeModal/index.tsx
index ceb76dfbf..2ba2740e7 100644
--- a/apps/spruce/src/pages/version/NameChangeModal/index.tsx
+++ b/apps/spruce/src/pages/version/NameChangeModal/index.tsx
@@ -46,9 +46,9 @@ export const NameChangeModal: React.FC<NameChangeModalProps> = ({
   return (
     <>
       <StyledIconButton
-        onClick={() => setIsOpen(true)}
-        data-cy="name-change-modal-trigger"
         aria-label="name-change-modal-trigger"
+        data-cy="name-change-modal-trigger"
+        onClick={() => setIsOpen(true)}
       >
         <Icon glyph="Edit" />
       </StyledIconButton>
@@ -62,19 +62,19 @@ export const NameChangeModal: React.FC<NameChangeModalProps> = ({
           });
         }}
         open={isOpen}
-        title="Update Patch Name"
         submitDisabled={
           newPatchName === originalPatchName || hasFormError || loading
         }
+        title="Update Patch Name"
       >
         <SpruceForm
-          schema={schema}
-          uiSchema={uiSchema}
           formData={formState}
           onChange={({ errors, formData }) => {
             setHasFormError(!!errors.length);
             setFormState(formData);
           }}
+          schema={schema}
+          uiSchema={uiSchema}
         />
       </ConfirmationModal>
     </>
diff --git a/apps/spruce/src/pages/version/ParametersModal/index.tsx b/apps/spruce/src/pages/version/ParametersModal/index.tsx
index 80ea8baae..3c299abe9 100644
--- a/apps/spruce/src/pages/version/ParametersModal/index.tsx
+++ b/apps/spruce/src/pages/version/ParametersModal/index.tsx
@@ -43,7 +43,7 @@ export const ParametersModal: React.FC<ParametersProps> = ({ parameters }) => {
         title="Patch Parameters"
       >
         <OverflowContainer>
-          <BaseTable table={table} shouldAlternateRowColor />
+          <BaseTable shouldAlternateRowColor table={table} />
         </OverflowContainer>
       </DisplayModal>
     </>
diff --git a/apps/spruce/src/pages/version/TaskDuration.tsx b/apps/spruce/src/pages/version/TaskDuration.tsx
index 8b31ebe90..4dec8bc8e 100644
--- a/apps/spruce/src/pages/version/TaskDuration.tsx
+++ b/apps/spruce/src/pages/version/TaskDuration.tsx
@@ -87,12 +87,9 @@ const TaskDuration: React.FC<Props> = ({ taskCount }) => {
     <>
       <TableControl
         filteredCount={count}
-        totalCount={taskCount}
+        label="tasks"
         // @ts-expect-error: FIXME. This comment was added by an automated script.
         limit={limit}
-        // @ts-expect-error: FIXME. This comment was added by an automated script.
-        page={page}
-        label="tasks"
         onClear={clearQueryParams}
         onPageSizeChange={(l) => {
           versionAnalytics.sendEvent({
@@ -100,23 +97,23 @@ const TaskDuration: React.FC<Props> = ({ taskCount }) => {
             "page.size": l,
           });
         }}
+        // @ts-expect-error: FIXME. This comment was added by an automated script.
+        page={page}
+        totalCount={taskCount}
       />
       <TaskDurationTable
-        tasks={tasksData}
         loading={loading}
         // @ts-expect-error: FIXME. This comment was added by an automated script.
         numLoadingRows={limit}
+        tasks={tasksData}
       />
       {shouldShowBottomTableControl && (
         <TableControlWrapper>
           <TableControl
             filteredCount={count}
-            totalCount={taskCount}
-            // @ts-expect-error: FIXME. This comment was added by an automated script.
-            limit={limit}
             label="tasks"
             // @ts-expect-error: FIXME. This comment was added by an automated script.
-            page={page}
+            limit={limit}
             onClear={clearQueryParams}
             onPageSizeChange={(l) => {
               versionAnalytics.sendEvent({
@@ -124,6 +121,9 @@ const TaskDuration: React.FC<Props> = ({ taskCount }) => {
                 "page.size": l,
               });
             }}
+            // @ts-expect-error: FIXME. This comment was added by an automated script.
+            page={page}
+            totalCount={taskCount}
           />
         </TableControlWrapper>
       )}
diff --git a/apps/spruce/src/pages/version/Tasks.tsx b/apps/spruce/src/pages/version/Tasks.tsx
index 44867547a..80083d982 100644
--- a/apps/spruce/src/pages/version/Tasks.tsx
+++ b/apps/spruce/src/pages/version/Tasks.tsx
@@ -90,12 +90,9 @@ export const Tasks: React.FC<Props> = ({ taskCount }) => {
       controls={
         <TableControl
           filteredCount={count}
-          totalCount={taskCount}
+          label="tasks"
           // @ts-expect-error: FIXME. This comment was added by an automated script.
           limit={limit}
-          // @ts-expect-error: FIXME. This comment was added by an automated script.
-          page={page}
-          label="tasks"
           onClear={clearQueryParams}
           onPageSizeChange={(l) => {
             versionAnalytics.sendEvent({
@@ -103,6 +100,9 @@ export const Tasks: React.FC<Props> = ({ taskCount }) => {
               "page.size": l,
             });
           }}
+          // @ts-expect-error: FIXME. This comment was added by an automated script.
+          page={page}
+          totalCount={taskCount}
         />
       }
       shouldShowBottomTableControl={tasksData.length > 10}
@@ -110,10 +110,10 @@ export const Tasks: React.FC<Props> = ({ taskCount }) => {
       <PatchTasksTable
         // @ts-expect-error: FIXME. This comment was added by an automated script.
         isPatch={isPatch}
+        loading={tasksData.length === 0 && loading}
         // @ts-expect-error: FIXME. This comment was added by an automated script.
         sorts={sorts}
         tasks={tasksData}
-        loading={tasksData.length === 0 && loading}
       />
     </TableWrapper>
   );
diff --git a/apps/spruce/src/pages/version/VersionTabs.tsx b/apps/spruce/src/pages/version/VersionTabs.tsx
index 565b5e605..146d5eed3 100644
--- a/apps/spruce/src/pages/version/VersionTabs.tsx
+++ b/apps/spruce/src/pages/version/VersionTabs.tsx
@@ -79,40 +79,40 @@ const tabMap = ({
   versionId: string;
 }) => ({
   [PatchTab.Tasks]: (
-    <Tab name="Tasks" id="task-tab" data-cy="task-tab" key="tasks-tab">
+    <Tab key="tasks-tab" data-cy="task-tab" id="task-tab" name="Tasks">
       <Tasks taskCount={taskCount} />
     </Tab>
   ),
   [PatchTab.TaskDuration]: (
     <Tab
-      name="Task Duration"
-      id="duration-tab"
-      data-cy="duration-tab"
       key="duration-tab"
+      data-cy="duration-tab"
+      id="duration-tab"
+      name="Task Duration"
     >
       <TaskDuration taskCount={taskCount} />
     </Tab>
   ),
   [PatchTab.Changes]: (
     <Tab
-      name="Changes"
-      id="changes-tab"
-      data-cy="changes-tab"
       key="changes-tab"
+      data-cy="changes-tab"
+      id="changes-tab"
+      name="Changes"
     >
       <CodeChanges patchId={versionId} />
     </Tab>
   ),
   [PatchTab.Downstream]: (
     <Tab
+      key="downstream-tab"
+      data-cy="downstream-tab"
+      id="downstream-tab"
       name={getDownstreamTabName(
         numFailedChildPatches,
         numStartedChildPatches,
         numSuccessChildPatches,
       )}
-      id="downstream-tab"
-      data-cy="downstream-tab"
-      key="downstream-tab"
     >
       <DownstreamTasks childPatches={childPatches} />
     </Tab>
@@ -214,9 +214,9 @@ export const VersionTabs: React.FC<Props> = ({
   });
   return (
     <StyledTabs
+      aria-label="Patch Tabs"
       selected={selectedTab}
       setSelected={selectNewTab}
-      aria-label="Patch Tabs"
     >
       {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
       {activeTabs.map((t: string) => allTabs[t])}
diff --git a/apps/spruce/src/pages/version/downstreamTasks/DownstreamProjectAccordion.tsx b/apps/spruce/src/pages/version/downstreamTasks/DownstreamProjectAccordion.tsx
index 94cfc73e6..4f37bcb32 100644
--- a/apps/spruce/src/pages/version/downstreamTasks/DownstreamProjectAccordion.tsx
+++ b/apps/spruce/src/pages/version/downstreamTasks/DownstreamProjectAccordion.tsx
@@ -105,6 +105,13 @@ export const DownstreamProjectAccordion: React.FC<
     <Wrapper data-cy="project-accordion">
       <Accordion
         defaultOpen={status === PatchStatus.Failed}
+        subtitle={
+          <DownstreamMetadata
+            baseVersionID={baseVersionID}
+            githash={githash}
+            parameters={parameters}
+          />
+        }
         title={
           <>
             <ProjectTitleWrapper>
@@ -114,13 +121,6 @@ export const DownstreamProjectAccordion: React.FC<
           </>
         }
         titleTag={FlexContainer}
-        subtitle={
-          <DownstreamMetadata
-            baseVersionID={baseVersionID}
-            githash={githash}
-            parameters={parameters}
-          />
-        }
       >
         <AccordionContents>
           <DownstreamTasksTable
diff --git a/apps/spruce/src/pages/version/taskDuration/TaskDurationTable.stories.tsx b/apps/spruce/src/pages/version/taskDuration/TaskDurationTable.stories.tsx
index 173292e81..eeae9939e 100644
--- a/apps/spruce/src/pages/version/taskDuration/TaskDurationTable.stories.tsx
+++ b/apps/spruce/src/pages/version/taskDuration/TaskDurationTable.stories.tsx
@@ -8,9 +8,9 @@ export default {
 export const Default: CustomStoryObj<typeof TaskDurationTable> = {
   render: () => (
     <TaskDurationTable
-      tasks={props.tasks}
       loading={false}
       numLoadingRows={10}
+      tasks={props.tasks}
     />
   ),
 };
@@ -18,9 +18,9 @@ export const Default: CustomStoryObj<typeof TaskDurationTable> = {
 export const LongContent: CustomStoryObj<typeof TaskDurationTable> = {
   render: () => (
     <TaskDurationTable
-      tasks={props.tasksLong}
       loading={false}
       numLoadingRows={10}
+      tasks={props.tasksLong}
     />
   ),
 };
diff --git a/apps/spruce/src/pages/version/taskDuration/TaskDurationTable.test.tsx b/apps/spruce/src/pages/version/taskDuration/TaskDurationTable.test.tsx
index 5ac2542eb..b85bc722b 100644
--- a/apps/spruce/src/pages/version/taskDuration/TaskDurationTable.test.tsx
+++ b/apps/spruce/src/pages/version/taskDuration/TaskDurationTable.test.tsx
@@ -12,7 +12,7 @@ describe("taskDurationTable", () => {
   it("renders all rows", () => {
     render(
       <MockedProvider>
-        <TaskDurationTable tasks={tasks} loading={false} numLoadingRows={10} />
+        <TaskDurationTable loading={false} numLoadingRows={10} tasks={tasks} />
       </MockedProvider>,
     );
     expect(screen.queryAllByDataCy("task-duration-table-row")).toHaveLength(2);
@@ -22,7 +22,7 @@ describe("taskDurationTable", () => {
     const user = userEvent.setup();
     render(
       <MockedProvider>
-        <TaskDurationTable tasks={tasks} loading={false} numLoadingRows={10} />
+        <TaskDurationTable loading={false} numLoadingRows={10} tasks={tasks} />
       </MockedProvider>,
     );
     expect(
diff --git a/apps/spruce/src/pages/version/taskDuration/TaskDurationTable.tsx b/apps/spruce/src/pages/version/taskDuration/TaskDurationTable.tsx
index d95cd9edb..3a6f6affa 100644
--- a/apps/spruce/src/pages/version/taskDuration/TaskDurationTable.tsx
+++ b/apps/spruce/src/pages/version/taskDuration/TaskDurationTable.tsx
@@ -113,9 +113,9 @@ export const TaskDurationTable: React.FC<Props> = ({
           },
         }) => (
           <TaskLink
+            execution={execution}
             taskId={id}
             taskName={getValue() as string}
-            execution={execution}
           />
         ),
         meta: {
@@ -166,8 +166,8 @@ export const TaskDurationTable: React.FC<Props> = ({
           },
         }) => (
           <TaskDurationCell
-            status={status}
             maxTimeTaken={column.getFacetedMinMaxValues()?.[1] ?? 0}
+            status={status}
             timeTaken={getValue() as number}
           />
         ),
@@ -220,9 +220,9 @@ export const TaskDurationTable: React.FC<Props> = ({
       data-cy-row="task-duration-table-row"
       emptyComponent={<TablePlaceholder message="No tasks found." />}
       loading={loading}
-      table={table}
-      shouldAlternateRowColor
       loadingRows={numLoadingRows}
+      shouldAlternateRowColor
+      table={table}
     />
   );
 };
diff --git a/apps/spruce/src/pages/version/tasks/PatchTasksTable.tsx b/apps/spruce/src/pages/version/tasks/PatchTasksTable.tsx
index 86c75289c..589f59b44 100644
--- a/apps/spruce/src/pages/version/tasks/PatchTasksTable.tsx
+++ b/apps/spruce/src/pages/version/tasks/PatchTasksTable.tsx
@@ -93,19 +93,9 @@ export const PatchTasksTable: React.FC<Props> = ({
 
   return (
     <TasksTable
+      baseStatusSelectorProps={baseStatusSelectorProps}
       isPatch={isPatch}
-      sorts={sorts}
-      // @ts-expect-error: FIXME. This comment was added by an automated script.
-      tableChangeHandler={tableChangeHandler}
-      // @ts-expect-error: FIXME. This comment was added by an automated script.
-      tasks={tasks}
       loading={loading}
-      onExpand={(expanded) => {
-        sendEvent({
-          name: "Toggled display task expansion",
-          expanded,
-        });
-      }}
       onClickTaskLink={(taskId) =>
         sendEvent({
           name: "Clicked task table task link",
@@ -118,10 +108,20 @@ export const PatchTasksTable: React.FC<Props> = ({
           "sort.by": sortField,
         })
       }
+      onExpand={(expanded) => {
+        sendEvent({
+          name: "Toggled display task expansion",
+          expanded,
+        });
+      }}
+      sorts={sorts}
+      statusSelectorProps={statusSelectorProps}
+      // @ts-expect-error: FIXME. This comment was added by an automated script.
+      tableChangeHandler={tableChangeHandler}
       taskNameInputProps={taskNameInputProps}
+      // @ts-expect-error: FIXME. This comment was added by an automated script.
+      tasks={tasks}
       variantInputProps={variantInputProps}
-      baseStatusSelectorProps={baseStatusSelectorProps}
-      statusSelectorProps={statusSelectorProps}
     />
   );
 };
diff --git a/apps/spruce/src/utils/string/jiraLinkify.tsx b/apps/spruce/src/utils/string/jiraLinkify.tsx
index 30fb32118..037f27525 100644
--- a/apps/spruce/src/utils/string/jiraLinkify.tsx
+++ b/apps/spruce/src/utils/string/jiraLinkify.tsx
@@ -10,10 +10,10 @@ export const jiraLinkify = (
 ) =>
   reactStringReplace(unlinkified, /([A-Z]{1,10}-\d{1,6})/g, (match, i) => (
     <StyledLink
-      data-cy="jira-link"
-      onClick={onClick}
       key={`${match}${i}`}
+      data-cy="jira-link"
       href={getJiraTicketUrl(jiraHost, match)}
+      onClick={onClick}
     >
       {match}
     </StyledLink>
diff --git a/packages/eslint-config/index.js b/packages/eslint-config/index.js
index 784648e27..f56b011c9 100644
--- a/packages/eslint-config/index.js
+++ b/packages/eslint-config/index.js
@@ -73,6 +73,8 @@ module.exports = {
           errorIfStrict,
           { caseSensitive: true },
         ],
+        
+        "react/jsx-sort-props": ERROR, // Sort props alphabetically.
       },
     },
     // For test files