Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI – Calendar events modal #17717

Merged
merged 23 commits into from
Mar 20, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
finalize placeholder, preview, and example
  • Loading branch information
Jacob Shandling committed Mar 20, 2024
commit 026ddb5a39b86035edf87715d7be99e85bae0a95
1,184 changes: 1,184 additions & 0 deletions frontend/components/graphics/CalendarEventPreview.tsx

Large diffs are not rendered by default.

529 changes: 0 additions & 529 deletions frontend/components/graphics/CalendarIntegrationNotConfigured.tsx

This file was deleted.

4 changes: 2 additions & 2 deletions frontend/components/graphics/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import EmptyTeams from "./EmptyTeams";
import EmptyPacks from "./EmptyPacks";
import EmptySchedule from "./EmptySchedule";
import CollectingResults from "./CollectingResults";
import CalIntegrationNotConfigured from "./CalendarIntegrationNotConfigured";
import CalendarEventPreview from "./CalendarEventPreview";

export const GRAPHIC_MAP = {
// Empty state graphics
Expand All @@ -42,7 +42,7 @@ export const GRAPHIC_MAP = {
"file-pem": FilePem,
// Other graphics
"collecting-results": CollectingResults,
"calendar-integration-not-configured": CalIntegrationNotConfigured,
"calendar-event-preview": CalendarEventPreview,
};

export type GraphicNames = keyof typeof GRAPHIC_MAP;
Original file line number Diff line number Diff line change
Expand Up @@ -945,9 +945,8 @@ const ManagePolicyPage = ({
updatePolicyEnabledCalendarEvents={
updatePolicyEnabledCalendarEvents
}
// TODO - remove dummy prop values
// configured={isCalEventsConfigured}
configured
configured={isCalEventsConfigured}
// configured={false}
enabled={
teamConfig?.integrations.google_calendar
?.enable_calendar_events ?? false
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ const CalendarEventsModal = ({
);

const togglePreviewCalendarEvent = () => {
// TODO
setShowPreviewCalendarEvent(!showPreviewCalendarEvent);
};

const renderExamplePayload = () => {
Expand Down Expand Up @@ -176,21 +176,40 @@ const CalendarEventsModal = ({
);
};
const renderPreviewCalendarEventModal = () => {
// TODO
return <></>;
return (
<Modal
title="Calendar event preview"
width="large"
onExit={togglePreviewCalendarEvent}
className="calendar-event-preview"
>
<>
<p>A similar event will appear in the end user&apos;s calendar:</p>
<Graphic name="calendar-event-preview" />
<div className="modal-cta-wrap">
<Button onClick={togglePreviewCalendarEvent} variant="brand">
Done
</Button>
</div>
</>
</Modal>
);
};

const renderPlaceholderModal = () => {
return (
<>
<div className="placeholder">
<a href="https://www.fleetdm.com/learn-more-about/calendar-events">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Open in new tab.

<Graphic name="calendar-integration-not-configured" />
<Graphic name="calendar-event-preview" />
</a>
To create calendar events for end users if their hosts fail policies,
you must first connect Fleet to your Google Workspace service account.
<br />
This can be configured in{" "}
<b>Settings &gt; Integrations &gt; Calendars.</b>
<div>
To create calendar events for end users if their hosts fail policies,
you must first connect Fleet to your Google Workspace service account.
</div>
<div>
This can be configured in{" "}
<b>Settings &gt; Integrations &gt; Calendars.</b>
</div>
<CustomLink
url="https://www.fleetdm.com/learn-more-about/calendar-events"
text="Learn more"
Expand All @@ -201,7 +220,7 @@ const CalendarEventsModal = ({
Done
</Button>
</div>
</>
</div>
);
};

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,22 @@
.calendar-events-modal {
.placeholder {
display: flex;
flex-direction: column;
gap: 24px;
line-height: 150%;
.modal-cta-wrap {
margin-top: 0;
}
}

pre {
box-sizing: border-box;
margin: 0;
}
}

.calendar-event-preview {
p {
margin: 24px 0;
}
}