Discharge7443/fleet
1
0
Fork 0
Code Issues Pull Requests Actions 21 Packages Projects Releases Wiki Activity

Update Google Calendar event bodies and relevant previews in the Fleet UI (#28715)

Browse Source 
## For #27458 

- Update Calendar events modal:
  - not-configured preview image
  - preview modal
- Update Google calendar event body

### In Google Calendar:
<img width="453" alt="Screenshot 2025-04-29 at 3 48 38 PM"
src="https://github.com/user-attachments/assets/6f7a7486-ab8d-448c-8e12-3ab9ac32b5ac"
/>

### In Fleet UI:
<img width="736" alt="Screenshot 2025-04-30 at 4 03 28 PM"
src="https://github.com/user-attachments/assets/5850f062-3ae9-4523-9c02-e2c52c3586c0"
/>


<img width="736" alt="Screenshot 2025-04-30 at 4 04 57 PM"
src="https://github.com/user-attachments/assets/6f6104a1-b3e7-4d40-8af0-5c264f93f2dc"
/>


- [x] Changes file added for user-visible changes in `changes/`, 
- [x] A detailed QA plan exists on the associated ticket (if it isn't
there, work with the product group's QA engineer to add it)
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
This commit is contained in:
jacobshandling
2025-05-01 13:12:53 -07:00
committed by GitHub
co-authored by Jacob Shandling
parent bef1506bde
commit 1f1ef3f8ef
8 changed files with 50 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/images/calendar-graphic.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 135 KiB

changes/27458-update-calendar-events
+1
View File
@@ -0,0 +1 @@
* Update Google Calendar event bodies and relevant previews in the Fleet UI
frontend/pages/policies/ManagePoliciesPage/components/CalendarEventPreviewModal/CalendarEventPreviewModal.tsx
+32 -5
View File
@@ -1,5 +1,7 @@
import React, { useContext } from "react";
import { TRANSPARENCY_LINK } from "utilities/constants";
import { AppContext } from "context/app";
import Modal from "components/Modal";
import Button from "components/buttons/Button";
@@ -76,12 +78,37 @@ const CalendarEventPreviewModal = ({
: policy.description}
</div>
<br /> <br />
<strong>What we&apos;ll do</strong>
<strong>Maintenance required</strong>
<br />
<div className={`${baseClass}__preview-info__text__user-text`}>
{showGenericPreview
? "During this maintenance window, you can expect updates to be applied automatically. Your device may be unavailable during this time."
: policy.resolution}
{showGenericPreview ? (
<ul>
<li>
Click the{" "}
<a
href={TRANSPARENCY_LINK}
rel="noreferrer"
target="_blank"
>
Fleet
</a>{" "}
icon in your computer&apos;s menu and select{" "}
<b>My device</b>
</li>
<li>
Navigate to the <b>Policies</b> tab
</li>
<li>
Follow instructions to resolve any policies marked{" "}
{`"No"`}
</li>
<li>
Click <b>Refetch</b>
</li>
</ul>
) : (
policy.resolution
)}
</div>
</div>
</div>
@@ -103,7 +130,7 @@ const CalendarEventPreviewModal = ({
) : (
<>
<strong>Why it matters</strong> and{" "}
<strong>What we&apos;ll do</strong> are populated by the
<strong>Maintenance required</strong> are populated by the
policy&apos;s <strong>Description</strong> and{" "}
<strong>Resolution</strong> respectively.
</>
frontend/pages/policies/ManagePoliciesPage/components/CalendarEventPreviewModal/_styles.scss
+10 -1
View File
@@ -61,7 +61,16 @@
align-self: stretch;
&__text__user-text {
white-space: pre-wrap;
ul {
padding-left: 20px;
margin-top: $pad-xxsmall;
}
a {
color: $core-fleet-black;
font-weight: normal;
text-decoration: underline;
}
white-space: pre-wrap;
}
}
frontend/pages/policies/ManagePoliciesPage/components/CalendarEventsModal/CalendarEventsModal.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ import Modal from "components/Modal";
import Icon from "components/Icon";
import { IPaginatedListHandle } from "components/PaginatedList";
import CalendarEventPreviewModal from "../CalendarEventPreviewModal";
import CalendarPreview from "../../../../../../assets/images/calendar-preview-720x436@2x.png";
import CalendarPreview from "../../../../../../assets/images/calendar-graphic.png";
import PoliciesPaginatedList, {
IFormPolicy,
} from "../PoliciesPaginatedList/PoliciesPaginatedList";
frontend/utilities/constants.tsx
+1
View File
@@ -62,6 +62,7 @@ export const GITHUB_NEW_ISSUE_LINK =
/** website links */
export const FLEET_WEBSITE_URL = "https://fleetdm.com";
export const TRANSPARENCY_LINK = `${FLEET_WEBSITE_URL}/better`;
export const SUPPORT_LINK = `${FLEET_WEBSITE_URL}/support`;
export const CONTACT_FLEET_LINK = `${FLEET_WEBSITE_URL}/contact`;
export const LEARN_MORE_ABOUT_BASE_LINK = `${FLEET_WEBSITE_URL}/learn-more-about`;
server/fleet/calendar.go
+4 -1
View File
@@ -13,7 +13,10 @@ const (
CalendarBodyStaticHeader = "reserved this time to make some changes to your work computer"
CalendarEventConflictText = "because there was no remaining availability "
CalendarDefaultDescription = "needs to make sure your device meets the organization's requirements."
CalendarDefaultResolution = "During this maintenance window, you can expect updates to be applied automatically. Your device may be unavailable during this time."
CalendarDefaultResolution = (`• Click the <a href="https://fleetdm.com/better" rel="noreferrer" target="_blank" >Fleet</a> icon in your computer&apos;s menu and<br />&nbsp;&nbsp;&nbsp;select <b>My device</b>
• Navigate to the <b>Policies</b> tab
• Follow instructions to resolve any policies marked "No"
• Click <b>Refetch</b>`)
)
type DayEndedError struct {
server/service/calendar/calendar.go
+1 -1
View File
@@ -83,7 +83,7 @@ Please leave your device on and connected to power.
<b>Why it matters</b>
%s
<b>What we'll do</b>
<b>Maintenance required</b>
%s
`, orgName, fleet.CalendarBodyStaticHeader, conflictStr, host.HostDisplayName, description, resolution), tag
}