Updates to automations modal

fleetdm · Mar 14, 2024 · c389755 · c389755
1 parent ef58f54
commit c389755
Show file tree

Hide file tree

Showing 15 changed files with 109 additions and 224 deletions.
diff --git a/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx b/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 && (

diff --git a/...eviewPayloadModal/PreviewPayloadModal.tsx → ...ponents/ExamplePayload/ExamplePayload.tsx b/...eviewPayloadModal/PreviewPayloadModal.tsx → ...ponents/ExamplePayload/ExamplePayload.tsx
@@ -1,36 +1,28 @@
 import React, { useContext } from "react";
 import { syntaxHighlight } from "utilities/helpers";
 
-import Modal from "components/Modal";
-import Button from "components/buttons/Button";
 import CustomLink from "components/CustomLink";
 import { AppContext } from "context/app";
 import { IPolicyWebhookPreviewPayload } from "interfaces/policy";
 
-const baseClass = "preview-data-modal";
-
-interface IPreviewPayloadModalProps {
-  onCancel: () => void;
-}
+const baseClass = "example-payload";
 
 interface IHostPreview {
   id: number;
   display_name: string;
   url: string;
 }
 
-interface IPreviewPayload {
+interface IExamplePayload {
   timestamp: string;
   policy: IPolicyWebhookPreviewPayload;
   hosts: IHostPreview[];
 }
 
-const PreviewPayloadModal = ({
-  onCancel,
-}: IPreviewPayloadModalProps): JSX.Element => {
+const ExamplePayload = (): JSX.Element => {
   const { isFreeTier } = useContext(AppContext);
 
-  const json: IPreviewPayload = {
+  const json: IExamplePayload = {
     timestamp: "0000-00-00T00:00:00Z",
     policy: {
       id: 1,
@@ -63,35 +55,15 @@ const PreviewPayloadModal = ({
   }
 
   return (
-    <Modal
-      title="Example payload"
-      onExit={onCancel}
-      onEnter={onCancel}
-      className={baseClass}
-    >
-      <div className={`${baseClass}__preview-modal`}>
-        <p>
-          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}__payload-request-preview`}>
-          <pre>POST https://server.com/example</pre>
-        </div>
-        <div className={`${baseClass}__payload-webhook-preview`}>
-          <pre dangerouslySetInnerHTML={{ __html: syntaxHighlight(json) }} />
-        </div>
-        <div className="modal-cta-wrap">
-          <Button onClick={onCancel} variant="brand">
-            Done
-          </Button>
-        </div>
+    <div className={`${baseClass}__preview`}>
+      <div className={`${baseClass}__payload-request-preview`}>
+        <pre>POST https://server.com/example</pre>
+      </div>
+      <div className={`${baseClass}__payload-webhook-preview`}>
+        <pre dangerouslySetInnerHTML={{ __html: syntaxHighlight(json) }} />
       </div>
-    </Modal>
+    </div>
   );
 };
 
-export default PreviewPayloadModal;
+export default ExamplePayload;
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/ExamplePayload/_styles.scss b/frontend/pages/policies/ManagePoliciesPage/components/ExamplePayload/_styles.scss
@@ -0,0 +1,2 @@
+.example-payload {
+}
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/ExamplePayload/index.ts b/frontend/pages/policies/ManagePoliciesPage/components/ExamplePayload/index.ts
@@ -0,0 +1 @@
+export { default } from "./ExamplePayload";
diff --git a/...PreviewTicketModal/PreviewTicketModal.tsx → ...omponents/ExampleTicket/ExampleTicket.tsx b/...PreviewTicketModal/PreviewTicketModal.tsx → ...omponents/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}`}>
+      <div className={`${baseClass}__example`}>{screenshot}</div>
+    </Card>
   );
 };
 
-export default PreviewTicketModal;
+export default ExampleTicket;
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/ExampleTicket/_styles.scss b/frontend/pages/policies/ManagePoliciesPage/components/ExampleTicket/_styles.scss
@@ -0,0 +1,2 @@
+.example-ticket {
+}
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/ExampleTicket/index.ts b/frontend/pages/policies/ManagePoliciesPage/components/ExampleTicket/index.ts
@@ -0,0 +1 @@
+export { default } from "./ExampleTicket";
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/ManagePolicyAutomationsModal/index.ts b/frontend/pages/policies/ManagePoliciesPage/components/ManagePolicyAutomationsModal/index.ts