Commit graph

64 commits

Author SHA1 Message Date
jacobshandling
831e06e8d7
UI: User menu- restore 2 dividers, remove border radius (#29376)
## For #27609 

<img width="179" alt="Screenshot 2025-05-21 at 4 53 45 PM"
src="https://github.com/user-attachments/assets/acfb15c1-a743-4a3a-9e6b-c2a7c9521f5b"
/>

This PR implements [the desired
UI](https://github.com/fleetdm/fleet/issues/27609#issuecomment-2885250756)
for the user menu

- ~[ ] Changes file added for user-visible changes in `changes/`~ [added
in previous
PR](https://github.com/fleetdm/fleet/pull/29066/files#diff-a072b167801f952e1d37dc5fdb98a4c292f95832b4d9c5e4eff40161ca3a40eaR1)
- [x] Manual QA for all new/changed functionality

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2025-05-22 10:19:38 -07:00
jacobshandling
28ea0f0589
UI: User menu style fix (#29066)
## For #27609 

<img width="180" alt="Screenshot 2025-05-12 at 4 00 52 PM"
src="https://github.com/user-attachments/assets/1aabd897-ecae-45f0-9b53-c81677a47d55"
/>

- [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>
2025-05-13 11:49:48 -07:00
RachelElysia
769154b821
Fleet UI: Fix several team ids that were dropping in certain flows (#26590) 2025-02-27 10:53:34 -05:00
jacobshandling
5d9026b7e5
UI - GitOps Mode: Core abstractions, first batch of applications (#26401)
## For #26229 – Part 1


![ezgif-6bbe6d60c12ed4](https://github.com/user-attachments/assets/37a04b64-abd7-4605-b4ac-9542836ff562)

- 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>
2025-02-20 08:41:07 -08:00
RachelElysia
c4a556618f
Fleet UI: Updates to dropdown selected states (#25635) 2025-01-22 10:22:59 -05:00
RachelElysia
d6b80c9c7b
FE: Update User menu to use react select 5 (#24281) 2024-12-20 10:39:06 -05:00
RachelElysia
2a756088f1
Fleet UI: Accessibility button actions, tabbing (#22916) 2024-10-25 11:02:52 -04:00
jacobshandling
d3ccb51755
UI - Improve UX of Flash messages (#22836)
## #22661 


![ezgif-6-71e48912ae](https://github.com/user-attachments/assets/01144620-0eba-48f0-9254-cc4795fde9fd)

- 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>
2024-10-22 10:52:20 -07:00
RachelElysia
97ef401bea
Fleet UI: Checkbox and accessibility styling, tab through select targets (#22943) 2024-10-17 10:01:23 -04:00
RachelElysia
49575da17c
Fleet Desktop: Remove hover state on logo (#22899) 2024-10-14 12:30:13 -04:00
jacobshandling
549e9c87cc
UI - Enable "No team" for Policies (#21885)
## #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_


![ezgif-4-7675c92400](https://github.com/user-attachments/assets/205cf6e4-750e-4f87-9a6b-33b6b1edb7b3)


- [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>
2024-09-16 12:40:52 -04:00
RachelElysia
695801bff6
Fleet UI: Navigate between no teams tabs (#20969) 2024-08-02 09:42:49 -04:00
RachelElysia
20d6a1bc19
Fleet UI: Rename user settings/profile page to account page (#17032) 2024-02-22 10:31:16 -05:00
RachelElysia
42cfce3ee1
Fleet UI: Replace references of team members for users (#16515) 2024-02-05 14:11:01 -05:00
RachelElysia
6e7174c22f
Frontend: UI Vulnerabilities feature (#16322)
Co-authored-by: Gabriel Hernandez <ghernandez345@gmail.com>
2024-01-25 13:03:44 -05:00
RachelElysia
87036988ba
Fleet UI: Clicking on active nav resets all filters except team ID (#16198) 2024-01-18 13:04:52 -05:00
Jacob Shandling
67c45d5417
UI – refactor forms and form fields (#16159)
## 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**
![Screenshot 2024-01-17 at 11 49
14 AM](https://github.com/fleetdm/fleet/assets/61553566/14f209fb-31db-41ef-8e63-e0d8994698c1)

**Edit query form**
![Screenshot 2024-01-17 at 11 50
35 AM](https://github.com/fleetdm/fleet/assets/61553566/b07e70ea-3095-4e4f-be73-95a3c499839b)

**Add hosts modal**
![Screenshot 2024-01-17 at 11 51
48 AM](https://github.com/fleetdm/fleet/assets/61553566/4ef1f410-a823-41d1-b2f6-ea8eb5231f93)


## 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>
2024-01-18 10:48:44 -05:00
RachelElysia
18673e8bc6
Fleet UI: Clicking an active nav link will navigate/reset to default page (#16081) 2024-01-16 09:25:01 -05:00
Gabriel Hernandez
5bdb74c717
fix site nav software item to link to software/titles (#15734)
relates to #15717

Fixes software navigation link to always navigate to /software/titles
page.
2023-12-18 16:52:58 -06:00
Gabriel Hernandez
9d65a2dc8c
Implement UI for new software pages (#15579) 2023-12-12 15:03:33 -06:00
RachelElysia
e9a11c429a
Fleet UI: Link improvements (Back links and dashboard tiles right clickable, fix queries link on nav bar) (#13361) 2023-08-23 08:56:32 -04:00
RachelElysia
78d070d0b2
Fleet UI: [bug fix] Selected organization tab styling (#13269) 2023-08-11 09:32:02 -04:00
RachelElysia
fafea94dba
Fleet UI: Dropdown arrows updated, on hover button icon color, etc (#13129) 2023-08-07 09:25:32 -04:00
Jacob Shandling
c69bba6d0e Merge branch '7765-frontend' into 7765-combined-schedules-and-queries 2023-07-27 13:35:07 -07:00
Jacob Shandling
1daf6f02c6 Revert "Merge front-end changes into 7765 Master Dev branch (#12905)"
This reverts commit 7bff7447b0.
2023-07-27 13:32:24 -07:00
RachelElysia
fe7cd295a4
Fleet integration tests: Remove schedule tab from frontend integration tests (#12925) 2023-07-24 11:00:16 -04:00
Juan Fernandez
7bff7447b0
Merge front-end changes into 7765 Master Dev branch (#12905)
Front-end changes for combined schedules and queries.
2023-07-24 09:47:05 -04:00
Jacob Shandling
7b967de6c1 Correct topnav team_id behavior 2023-07-18 11:15:54 -07:00
RachelElysia
e919f32e68
Frontend: Testing main nav bar and settings nav bar moved from E2E layer to integration layer (#12682) 2023-07-17 09:01:54 -04:00
Jacob Shandling
7ff4b77fb9
UI: Merge scheduling functionality into queries page (#12713)
## Addresses #12636 

### See issue for list work done
![Screenshot 2023-07-12 at 6 47 04
PM](https://github.com/fleetdm/fleet/assets/61553566/47e3e5b2-0195-4f54-a377-8e5c03313acf)


![Frame-12-07-2023-06-43-32](https://github.com/fleetdm/fleet/assets/61553566/f72f2d41-609f-4409-8595-5f3e4f06d9bb)


### 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>
2023-07-13 12:11:11 -07:00
Luke Heath
162b709eb2
Adjust bold weight (#11905) 2023-05-23 16:24:01 -05:00
gillespi314
62e8e9e36a
Fix unreleased bugs related to policies page URL params (#11873) 2023-05-23 10:46:19 -05:00
Jacob Shandling
c646817bc2
UI, Premium to Sandbox addendum 2: Hide Controls page (#11428)
## 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>
2023-04-28 13:13:57 -07:00
Jacob Shandling
59eb2a5566
UI: Exclude 'Manage users' menu item in sandbox mode (#11403)
## 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>
2023-04-27 15:25:00 -07:00
RachelElysia
83bca0819e
Fleet UI: Responsive nav bar sizing (#11135) 2023-04-11 13:13:28 -04:00
RachelElysia
9b01715ca1
Fleet UI: Fix logo view in nav and settings page across 3 browsers (#11104) 2023-04-10 11:54:40 -05:00
Jacob Shandling
40c540a1cc
UI: org logo bug fix (#11018) 2023-04-06 15:12:41 -05:00
Jacob Shandling
ce77a3e879
UI: Fix issue where org logo may be uncentered on DUP (#10976)
## Addresses #10790

Adjusted markup of the org logo on the device user page to match those
on the host details page, and have them reference the same styles for
consistency (which fixes this bug)

**Before:**
![Screenshot 2023-04-04 at 3 56 03
PM](https://user-images.githubusercontent.com/61553566/229940383-6ba976f3-b9b6-469c-891a-b295aa728d74.png)
**After:**

![DUP-after-logo-fix](https://user-images.githubusercontent.com/61553566/229940417-d468d995-4bec-48f9-8d1a-999bf37eb206.png)

## Checklist for submitter

If some of the following don't apply, delete the relevant line.

- [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>
2023-04-05 11:47:28 -07:00
gillespi314
d3bbed34ec
Fix unreleased UI bugs in login page, top nav, and default team (#10928) 2023-04-03 10:13:57 -05:00
gillespi314
a7fb9039b2
Update UI to handle "No team" filters (#10706) 2023-03-31 12:40:14 -05:00
Roberto Dip
98845f03a6
remove feature flags to enable MDM (#10746)
https://github.com/fleetdm/fleet/issues/10025
2023-03-27 16:30:29 -03:00
Luke Heath
e4ee9c0c4f
Add div wrapper around logo to increase click area (#10117) 2023-02-27 10:52:28 -06:00
Luke Heath
1f6985e597
Add context to some primary nav items (#10106) 2023-02-24 17:41:24 -06:00
Luke Heath
59fd2a6192
Fix top nav underline positioning and size (#9790) 2023-02-10 12:51:15 -06:00
Luke Heath
157cb8346d
Tweak new masthead styles (#9682) 2023-02-03 18:48:05 -06:00
Jacob Shandling
ae8c2a40c9
Fixed nav style bugs (#9646) 2023-02-02 17:46:41 -06:00
Luke Heath
48978169a9
Finalize new default avatar images (#9604) 2023-02-01 13:06:06 -06:00
Roberto Dip
e06b00df11
Add readonly MDM.EnabledAndConfigured to app config and device responses (#9575)
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.
2023-02-01 14:47:52 -03:00
Jacob Shandling
180f7691ce
UI: Only render & allow Controls page if MDM is enabled (and user is authorized) (#9568)
## 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>
2023-01-30 15:31:42 -08:00
Luke Heath
d3565dc032
Finalized new masthead styling (#9536) 2023-01-30 13:37:51 -06:00