Fleet Calendar feature: Updates to manage automations modal

frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx

@@ -41,7 +41,7 @@ import TableDataError from "components/DataError";
 import MainContent from "components/MainContent";
 
 import PoliciesTable from "./components/PoliciesTable";
-import ManagePolicyAutomationsModal from "./components/ManagePolicyAutomationsModal";
+import OtherWorkflowsModal from "./components/OtherWorkflowsModal";
 import AddPolicyModal from "./components/AddPolicyModal";
 import DeletePolicyModal from "./components/DeletePolicyModal";
 
@@ -129,7 +129,6 @@ const ManagePolicyPage = ({
   const [showManageAutomationsModal, setShowManageAutomationsModal] = useState(
     false
   );
-  const [showPreviewPayloadModal, setShowPreviewPayloadModal] = useState(false);
   const [showAddPolicyModal, setShowAddPolicyModal] = useState(false);
   const [showDeletePolicyModal, setShowDeletePolicyModal] = useState(false);
 
@@ -477,10 +476,6 @@ const ManagePolicyPage = ({
   const toggleManageAutomationsModal = () =>
     setShowManageAutomationsModal(!showManageAutomationsModal);
 
-  const togglePreviewPayloadModal = useCallback(() => {
-    setShowPreviewPayloadModal(!showPreviewPayloadModal);
-  }, [setShowPreviewPayloadModal, showPreviewPayloadModal]);
-
   const toggleAddPolicyModal = () => setShowAddPolicyModal(!showAddPolicyModal);
 
   const toggleDeletePolicyModal = () =>
@@ -796,15 +791,13 @@ const ManagePolicyPage = ({
           </div>
         )}
         {config && automationsConfig && showManageAutomationsModal && (
-          <ManagePolicyAutomationsModal
+          <OtherWorkflowsModal
             automationsConfig={automationsConfig}
             availableIntegrations={config.integrations}
             availablePolicies={availablePoliciesForAutomation}
             isUpdatingAutomations={isUpdatingAutomations}
-            showPreviewPayloadModal={showPreviewPayloadModal}
             onExit={toggleManageAutomationsModal}
             handleSubmit={handleUpdateAutomations}
-            togglePreviewPayloadModal={togglePreviewPayloadModal}
           />
         )}
         {showAddPolicyModal && (

frontend/pages/policies/ManagePoliciesPage/components/ExamplePayload/ExamplePayload.tsx

@@ -0,0 +1,64 @@
+import React, { useContext } from "react";
+import { syntaxHighlight } from "utilities/helpers";
+
+import { AppContext } from "context/app";
+import { IPolicyWebhookPreviewPayload } from "interfaces/policy";
+
+const baseClass = "example-payload";
+
+interface IHostPreview {
+  id: number;
+  display_name: string;
+  url: string;
+}
+
+interface IExamplePayload {
+  timestamp: string;
+  policy: IPolicyWebhookPreviewPayload;
+  hosts: IHostPreview[];
+}
+
+const ExamplePayload = (): JSX.Element => {
+  const { isFreeTier } = useContext(AppContext);
+
+  const json: IExamplePayload = {
+    timestamp: "0000-00-00T00:00:00Z",
+    policy: {
+      id: 1,
+      name: "Is Gatekeeper enabled?",
+      query: "SELECT 1 FROM gatekeeper WHERE assessments_enabled = 1;",
+      description: "Checks if gatekeeper is enabled on macOS devices.",
+      author_id: 1,
+      author_name: "John",
+      author_email: "john@example.com",
+      resolution: "Turn on Gatekeeper feature in System Preferences.",
+      passing_host_count: 2000,
+      failing_host_count: 300,
+      critical: false,
+    },
+    hosts: [
+      {
+        id: 1,
+        display_name: "macbook-1",
+        url: "https://fleet.example.com/hosts/1",
+      },
+      {
+        id: 2,
+        display_name: "macbbook-2",
+        url: "https://fleet.example.com/hosts/2",
+      },
+    ],
+  };
+  if (isFreeTier) {
+    delete json.policy.critical;
+  }
+
+  return (
+    <div className={baseClass}>
+      <pre>POST https://server.com/example</pre>
+      <pre dangerouslySetInnerHTML={{ __html: syntaxHighlight(json) }} />
+    </div>
+  );
+};
+
+export default ExamplePayload;

frontend/pages/policies/ManagePoliciesPage/components/ExamplePayload/_styles.scss

@@ -0,0 +1,9 @@
+.example-payload {
+  display: flex;
+  flex-direction: column;
+  gap: $pad-large;
+
+  pre {
+    margin: 0;
+  }
+}

frontend/pages/policies/ManagePoliciesPage/components/ExamplePayload/index.ts

@@ -0,0 +1 @@
+export { default } from "./ExamplePayload";

frontend/pages/policies/ManagePoliciesPage/components/PreviewTicketModal/PreviewTicketModal.tsx → frontend/pages/policies/ManagePoliciesPage/components/ExampleTicket/ExampleTicket.tsx

@@ -1,28 +1,24 @@
 import React, { useContext } from "react";
 
 import { AppContext } from "context/app";
-import Modal from "components/Modal";
-import Button from "components/buttons/Button";
-import CustomLink from "components/CustomLink";
 
 import { IIntegrationType } from "interfaces/integration";
 
+import Card from "components/Card";
 import JiraPreview from "../../../../../../assets/images/jira-policy-automation-preview-400x419@2x.png";
 import ZendeskPreview from "../../../../../../assets/images/zendesk-policy-automation-preview-400x515@2x.png";
 import JiraPreviewPremium from "../../../../../../assets/images/jira-policy-automation-preview-premium-400x316@2x.png";
 import ZendeskPreviewPremium from "../../../../../../assets/images/zendesk-policy-automation-preview-premium-400x483@2x.png";
 
-const baseClass = "preview-ticket-modal";
+const baseClass = "example-ticket";
 
-interface IPreviewTicketModalProps {
+interface IExampleTicketProps {
   integrationType?: IIntegrationType;
-  onCancel: () => void;
 }
 
-const PreviewTicketModal = ({
+const ExampleTicket = ({
   integrationType,
-  onCancel,
-}: IPreviewTicketModalProps): JSX.Element => {
+}: IExampleTicketProps): JSX.Element => {
   const { isPremiumTier } = useContext(AppContext);
 
   const screenshot =
@@ -41,30 +37,10 @@ const PreviewTicketModal = ({
     );
 
   return (
-    <Modal
-      title="Example ticket"
-      onExit={onCancel}
-      className={baseClass}
-      width="large"
-    >
-      <div className={`${baseClass}`}>
-        <p className="automations-learn-more">
-          Want to learn more about how automations in Fleet work?{" "}
-          <CustomLink
-            url="https://fleetdm.com/docs/using-fleet/automations"
-            text=" Check out the Fleet documentation"
-            newTab
-          />
-        </p>
-        <div className={`${baseClass}__example`}>{screenshot}</div>
-        <div className="modal-cta-wrap">
-          <Button onClick={onCancel} variant="brand">
-            Done
-          </Button>
-        </div>
-      </div>
-    </Modal>
+    <Card className={baseClass} color="gray">
+      {screenshot}
+    </Card>
   );
 };
 
-export default PreviewTicketModal;
+export default ExampleTicket;

frontend/pages/policies/ManagePoliciesPage/components/ExampleTicket/_styles.scss

@@ -0,0 +1,10 @@
+.example-ticket {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+
+  &__screenshot {
+    max-width: 400px;
+  }
+}

frontend/pages/policies/ManagePoliciesPage/components/ExampleTicket/index.ts

@@ -0,0 +1 @@
+export { default } from "./ExampleTicket";