jacobshandlingandJacob Shandling
5d9026b7e5
## 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](feedbb2d4c25ec2e304e1f18d409cee62f6752ed) 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>
Tooltips Notes
This tooltip component was created to allow any content to be shown as a tooltip. You can place any
JSX inside of the tipContent prop. Also, very important, the TooltipWrapper is designed ONLY
to wrap text so make sure to use static text or text returned from a function.
Use cases
- As its own component
- Within a form input element
Examples
As its own component (Basic)
<TooltipWrapper tipContent="After hovering, you will see this.">
The base text that contains the hover state
</TooltipWrapper>
As its own component (Advanced)
You can even make the tooltip more dynamic HTML:
<TooltipWrapper
tipContent={
<>
The "snapshot" key includes the query's results.
<br />
These will be unique to your query.
</>
}
>
The data sent to your configured log destination will look similar
to the following JSON:
</TooltipWrapper>
Within a form input element
Inside a form input element, you only need to specify a tooltip prop for the input. This can be
any JSX as mentioned before.
<InputField
label="Password"
error={errors.password}
name="password"
onChange={onInputChange("password")}
placeholder="Password"
value={password || ""}
type="password"
helpText= "Must include 12 characters, at least 1 number (e.g. 0 - 9), and at least 1 symbol (e.g. &*#)"
blockAutoComplete
tooltip={
<>
This password is temporary. This user will be asked to set a new password after logging in to the Fleet UI.<br /><br />
This user will not be asked to set a new password after logging in to fleetctl or the Fleet API.
</>
}
/>