## For #26229 – Part 1

- This PR contains the core abstractions, routes, API updates, and types
for GitOps mode in the UI. Since this work will touch essentially every
part of the Fleet UI, it is ripe for merge conflicts. To mitigate such
conflicts, I'll be merging this work in a number of iterative PRs. ~To
effectively gate any of this work from showing until it is all merged to
`main`, [this commit](feedbb2d4c) hides
the settings section that allows enabling/disabling this setting,
effectively feature flagging the entire thing. In the last of these
iterative PRs, that commit will be reverted to engage the entire
feature. For testing purposes, reviewers can `git revert
feedbb2d4c25ec2e304e1f18d409cee62f6752ed` locally~ The new settings
section for this feature is feature flagged until all PRs are merged -
to show the setting section while testing, run `ALLOW_GITOPS_MODE=true
NODE_ENV=development yarn run webpack --progress --watch` in place of
`make generate-dev`
- Changes file will be added and feature flag removed in the last PR
- [x] Settings page with routing, form, API integration (hidden until
last PR)
- [x] Activities
- [x] Navbar indicator
- Apply GOM conditional UI to:
- [x] Manage enroll secret modal: .5
- Controls >
- [x] Scripts:
- Setup experience >
- [x] Install software > Select software modal
- [x] OS Settings >
- [x] Custom settings
- [x] Disk encryption
- [x] OS Updates
2/18/25, added to this PR:
- [x] Controls > Setup experience > Run script
- [x] Software >
- [x] Manage automations modal
- [x] Add software >
- [x] App Store (VPP)
- [x] Custom package
- [x] Queries
- [x] Manage
- [x] Automations modal
- [x] New
- [x] Edit
- [x] Policies
- [x] Manage
- [x] New
- [x] Edit
- Manage automations
- [x] Calendar events
- [x] Manual QA for all new/changed functionality
---------
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
## #22661

- Update `FlashMessage` behavior to, by default, hide itself when the
user performs any URL-changing navigation
- Add `persistOnPageChange` option to `renderFlash` API and associated
notification context and reducer logic, allowing override of this
behavior on a per-call basis
- Ensure proper order of evaluation of URL changes and render flash
action dispatches on the event loop
- Clean up legacy unused "undo"-related arguments and logic
- Allow the user to click in the same horizontal dimension as a flash
message
- Other misc. cleanup and refactoring
[Demo - messages hidden on page (any URL)
change](https://www.loom.com/share/1e884b6ba11c4b59bc74f51df3690131?sid=9b53e78b-6535-4541-b676-377760366cf4)
- [x] Changes file added for user-visible changes in `changes/`,
- [x] Manual QA for all new/changed functionality
---------
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
## #21468
- Memoize `app` and `table` context for improved stability
- Update policies page dependencies to reference now stable context
values
- Widespread updates to logic to enable No teams on the Manage polices
page, PolicyPage, and related pages and flows
_Outstanding bugs to address:_
- [x] When navigating from another page with "No team" to Policies, team
is reset to "All teams"
- [x] same after saving or editing a no-team policy_

- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality
---------
Co-authored-by: Lucas Rodriguez <lucas@fleetdm.com>
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
## Addresses #15325
- Define shared global styles for forms (`form` and `.form`s) and
`.form-field`s
- Sweep through the app, updating each form from being locally styled to
first prioritizing the global styles and only defining local styles
where needed for custom behavior
- Remove lots of unnecessary nesting of elements
- Other small bug fixes and improvements
### Samples, before (L) | after (R):
**Save query modal**

**Edit query form**

**Add hosts modal**

## QA Plan:
@xpkoala here's the same list from the issue, freshly de-checked for you
to use if it's helpful:
* Please check error states of each field
#### Specified by issue:
##### In "Save query" modal:
- [ ] Reduce space between checkboxes and their help text to 8px/0.5rem
for the following fields:
- [ ] Observers can run
- [ ] Discard data
- [ ] Update the following checkbox labels to have normal font weight
(not bold):
- [ ] Discard data
##### On "Edit query" page:
- [ ] Update the following checkbox labels to have normal font weight
(not bold):
- [ ] Observers can run
- [ ] Discard data
##### In "Add hosts" modal, for copy text fields:
- [ ] match typical form form field styles
- [ ] Adjust the positioning of the copy icon to keep it from being too
far down
##### Further locations to check
- [ ] ChangeEmailForm.jsx
- [ ] ChangePasswordForm.jsx
- [ ] ConfirmInviteForm.jsx
- [ ] ConfirmSSOInviteForm.jsx
- [ ] EnrollSecretModal.tsx
- [ ] ForgotPasswordForm.jsx
- [ ] LoginForm.tsx
- [ ] EditPackForm.tsx
- [ ] (New)PackForm.tsx
- [ ] AdminDetails.jsx
- [ ] ConfirmationPage.tsx
- [ ] FleetDetails.jsx
- [ ] OrgDetails.jsx
- [ ] ResetPasswordForm.tsx
- [ ] UserSettingsForm.jsx
- [ ] EditTeamModal.tsx
- [ ] IdpSection.tsx
- [ ] DeleteIntegrationModal.tsx
- [ ] IntegrationForm.tsx
- [ ] EndUserMigrationSection.tsx
- [ ] RequestCSRModal.tsx
- [ ] Advanced.tsx
- [ ] Agents.tsx
- [ ] FleetDesktop.tsx
- [ ] HostStatusWebhook.tsx front
- [ ] Info.tsx
- [ ] Smtp.tsx
- [ ] Sso.tsx
- [ ] Statistics.tsx
- [ ] WebAddress.tsx
- [ ] CreateTeamModal.tsx
- [ ] DeleteTeamModal.tsx
- [ ] EditTeamModal.tsx
- [ ] AgentOptionsPage.tsx
- updated the layout of this page to align with the rest of the forms in
the UI – can easily revert if it's not what we want
- [ ] AddMemberModal.tsx
- [ ] RemoveMemberModal.tsx
- [ ] UserForm.tsx
- Used by both `EditUserModal` and `CreateUserModal`
- A few different conditions that cause different rendering behavior
- [ ] DeleteHostModal.tsx
- [ ] TransferHostModal.tsx
- [ ] LabelForm.tsx
- [ ] MacOSTargetForm.tsx
- [ ] WindowsTargetForm.tsx
- [ ] BootstrapPackageListltem.ts
- [ ] EndUserAuthForm.tsx
- [ ] PackQueryEditorModal.tsx
- [ ] PolicyForm.tsx
- [ ] SaveNewPolicyModal.tsx
- [ ] ConfirmSaveChangesModal.tsx
- [ ] Query automations modal
- [ ] Policy automations modal - addresses #16010
- [ ] SoftwareAutomationsModal
## Checklist for submitter
- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality
---------
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
Co-authored-by: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
## Addresses #12636
### See issue for list work done


### Notes for review:
- Because other work is based on this branch, TODOs / fixes are noted
here until the team comes to a strategy for merging all of the work:
- Add missing space in the Performance impact column "Undetermined"
tooltip text
- I'm having trouble confirming that the inherited queries table is
working right with the mock hard-coded data, though I did see it working
correctly previously. There's an issue with the page reverting to "All
teams" when trying to show the inherited table, though it does show the
table before re-rendering.
- This work is organized clearly by commit, so that might be a
manageable way to go through this code.
- Since the updated API for this work is not yet complete, this work can
be manually tested by either:
- Using mock API infrastructure, or
- in `ManageQueriesPage.tsx`, comment out the two `useQuery` calls and
add appropriate mock data. You can then modify any fields of interest to
test their related UI functionality. For example, lines 119 -242 might
read:
```
// const {
// data: curTeamEnhancedQueries,
// error: curTeamQueriesError,
// isFetching: isFetchingCurTeamQueries,
// refetch: refetchCurTeamQueries,
// } = useQuery<IListQueriesResponse, Error, IEnhancedQuery[]>(
// [{ scope: "queries", teamId: teamIdForApi }],
// () => queriesAPI.loadAll(teamIdForApi),
// {
// refetchOnWindowFocus: false,
// enabled: isRouteOk,
// select: (data) => data.queries.map(enhanceQuery),
// }
// );
// // If a team is selected, fetch inherited global queries as well
// const {
// data: globalEnhancedQueries,
// error: globalQueriesError,
// isFetching: isFetchingGlobalQueries,
// refetch: refetchGlobalQueries,
// } = useQuery<IListQueriesResponse, Error, IEnhancedQuery[]>(
// [{ scope: "queries", teamId: -1 }],
// () => queriesAPI.loadAll(),
// {
// refetchOnWindowFocus: false,
// enabled: isRouteOk && isAnyTeamSelected,
// select: (data) => data.queries.map(enhanceQuery),
// }
// );
const [
curTeamEnhancedQueries,
curTeamQueriesError,
isFetchingCurTeamQueries,
refetchCurTeamQueries,
] = useMemo(() => {
return [
[
{
created_at: "2023-06-08T15:31:35Z",
updated_at: "2023-06-08T15:31:35Z",
id: 2,
name: "test",
description: "",
query: "SELECT * FROM osquery_info;",
team_id: 43,
platform: "darwin",
min_osquery_version: "",
automations_enabled: true,
logging: "snapshot",
saved: true,
// interval: 300,
interval: 0,
observer_can_run: false,
author_id: 1,
author_name: "Jacob",
author_email: "jacob@fleetdm.com",
packs: [],
stats: {
// system_time_p50: 1,
// system_time_p95: null,
// user_time_p50: 1,
// user_time_p95: null,
// total_executions: 1,
},
performance: "Undetermined",
platforms: ["darwin"],
},
] as IEnhancedQuery[],
undefined,
false,
() => {
console.log("got the new queries");
},
];
}, []);
const [
globalEnhancedQueries,
globalQueriesError,
isFetchingGlobalQueries,
refetchGlobalQueries,
] = useMemo(() => {
return [
[
{
created_at: "2023-06-08T15:31:35Z",
updated_at: "2023-06-08T15:31:35Z",
id: 200,
name: "test",
description: "",
query: "SELECT * FROM osquery_info;",
team_id: null,
platform: "darwin",
min_osquery_version: "",
automations_enabled: true,
logging: "snapshot",
saved: true,
// interval: 300,
interval: 0,
observer_can_run: false,
author_id: 1,
author_name: "Jacob",
author_email: "jacob@fleetdm.com",
packs: [],
stats: {
// system_time_p50: 1,
// system_time_p95: null,
// user_time_p50: 1,
// user_time_p95: null,
// total_executions: 1,
},
performance: "Undetermined",
platforms: ["darwin"],
},
] as IEnhancedQuery[],
undefined,
false,
() => {
console.log("got the new inherited queries");
},
];
}, []);
```
- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality
---------
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
## Addresses 2 of 2 [additional specs for premium to
sandbox](https://fleetdm.slack.com/archives/C01EZVBHFHU/p1682644171632189)
- Hides the Controls page in Sandbox mode
## Checklist for submitter
- [x] Manual QA for all new/changed functionality
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
## Addresses #10819
Exclude the "Manage users" menu option in sandbox mode.
- [x] Manual QA for all new/changed functionality
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
Related to #9571, this adds a new value to both responses which is
calculated when the Fleet server is started, and only set to `true` if
the server is properly configured for MDM.
This helps the UI to determine wether or not we should show certain UI
elements that we only want to show to servers with MDM enabled.
## Make sure authorized users can only a) see and b) access the Controls
page if MDM is enabled
- [x] Manual QA for all new/changed functionality
---------
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>