Proof of concept of save modal, need work on uploader refactor

frontend/components/FileDetails/FileDetails.tsx

@@ -0,0 +1 @@
+// TODO: Move to a separate file

frontend/components/FileDetails/_styles.scss

@@ -0,0 +1 @@
+// TODO

frontend/components/FileDetails/index.ts

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

frontend/components/FileUploader/_styles.scss

@@ -1,92 +0,0 @@
-.file-uploader {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  border-radius: $border-radius-medium;
-  background-color: $ui-fleet-blue-10;
-  border: 1px solid $ui-fleet-black-10;
-  padding: $pad-xlarge $pad-large;
-  font-size: $x-small;
-  text-align: center;
-  gap: $pad-small;
-
-  // when the file preview is showing, we want the padding to be
-  // slightly smaller on the top and bottom.
-  &__file-preview {
-    padding: $pad-medium $pad-large;
-  }
-
-  &__file {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-
-    &-info {
-      display: flex;
-      gap: $pad-medium;
-      align-items: center;
-      width: 100%;
-      text-align: left;
-    }
-
-    &-name {
-      font-size: $x-small;
-      font-weight: $bold;
-    }
-
-    &-platform {
-      font-size: $xx-small;
-      color: $ui-fleet-black-75;
-    }
-
-    &-edit {
-      display: flex;
-      align-items: center; // Center the button vertically
-      margin-right: -$pad-medium; // Adjust for button padding
-    }
-
-    label {
-      display: flex;
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-
-  &__graphics {
-    display: flex;
-    align-items: center;
-    gap: $pad-medium;
-  }
-  &__message {
-    margin: 0;
-    color: $ui-fleet-black-75;
-  }
-
-  &__additional-info {
-    margin: 0;
-    color: $ui-fleet-black-50;
-  }
-
-  input {
-    display: none;
-  }
-
-  &__upload-button {
-    // we handle the padding in the label so the entire button is clickable
-    padding: 0;
-
-    label {
-      padding: $pad-small $pad-medium;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: $pad-small;
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-}

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/ConfirmSaveChangesModal/ConfirmSaveChangesModal.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+
+import Button from "components/buttons/Button";
+import Modal from "components/Modal";
+
+const baseClass = "save-changes-modal";
+
+export interface IConfirmSaveChangesModalProps {
+  onSaveChanges: (evt: React.MouseEvent<HTMLButtonElement>) => void;
+  softwarePackageName?: string;
+  onClose: () => void;
+}
+
+const ConfirmSaveChangesModal = ({
+  onSaveChanges,
+  softwarePackageName,
+  onClose,
+}: IConfirmSaveChangesModalProps) => {
+  const warningText = (
+    <>
+      The changes you are making will cancel any pending installs and uninstalls
+      {softwarePackageName ? (
+        <>
+          {" "}
+          for <b> {softwarePackageName}</b>
+        </>
+      ) : (
+        ""
+      )}
+      .
+    </>
+  );
+  return (
+    <Modal title="Save changes?" onExit={onClose}>
+      <form className={`${baseClass}__form`}>
+        <p>{warningText}</p>
+        <p>You cannot undo this action.</p>
+        <div className="modal-cta-wrap">
+          <Button
+            type="button"
+            onClick={onSaveChanges}
+            variant="brand"
+            className="save-loading"
+            // isLoading={isUpdating} TODO
+          >
+            Save
+          </Button>
+          <Button onClick={onClose} variant="inverse">
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  );
+};
+
+export default ConfirmSaveChangesModal;

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/ConfirmSaveChangesModal/index.ts

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

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditSoftwareModal/EditSoftwareModal.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useState } from "react";
 import { InjectedRouter } from "react-router";
+import classnames from "classnames";
 
 import { getErrorReason } from "interfaces/errors";
 
@@ -38,6 +39,8 @@ interface IEditSoftwareModalProps {
   selfService?: boolean;
   onExit: () => void;
   setAddedSoftwareToken: (token: string) => void;
+  showConfirmSaveChangesModal: boolean;
+  toggleConfirmSaveChangesModal: () => void;
 }
 
 const EditSoftwareModal = ({
@@ -52,7 +55,14 @@ const EditSoftwareModal = ({
   selfService,
   onExit,
   setAddedSoftwareToken,
+  showConfirmSaveChangesModal,
+  toggleConfirmSaveChangesModal,
 }: IEditSoftwareModalProps) => {
+  // Add class to hide modal based on showConfirmSaveChangesModal,
+  const editSoftwareModalClasses = classnames(baseClass, {
+    [`${baseClass}--hidden`]: !!showConfirmSaveChangesModal,
+  });
+
   const { renderFlash } = useContext(NotificationContext);
   const [isUpdatingSoftware, setIsUpdatingSoftware] = useState(false);
 
@@ -121,7 +131,11 @@ const EditSoftwareModal = ({
   };
 
   return (
-    <Modal className={baseClass} title="Edit software" onExit={onExit}>
+    <Modal
+      className={editSoftwareModalClasses}
+      title="Edit software"
+      onExit={onExit}
+    >
       <AddPackageForm
         isEditingSoftware
         isUploading={isUpdatingSoftware}
@@ -133,6 +147,7 @@ const EditSoftwareModal = ({
         defaultPostInstallScript={postInstallScript}
         defaultUninstallScript={uninstallScript}
         defaultSelfService={selfService}
+        toggleSaveChangesForEditModal={toggleConfirmSaveChangesModal}
       />
     </Modal>
   );

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditSoftwareModal/_styles.scss

@@ -10,4 +10,8 @@
     flex-direction: column;
     gap: $pad-medium;
   }
+
+  &--hidden {
+    display: none;
+  }
 }

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwarePackageCard/SoftwarePackageCard.tsx

@@ -33,9 +33,10 @@ import DeleteSoftwareModal from "../DeleteSoftwareModal";
 import EditSoftwareModal from "../EditSoftwareModal";
 import {
   APP_STORE_APP_DROPDOWN_OPTIONS,
-  SOFTWARE_PACAKGE_DROPDOWN_OPTIONS,
+  SOFTWARE_PACKAGE_DROPDOWN_OPTIONS,
   downloadFile,
 } from "./helpers";
+import ConfirmSaveChangesModal from "../ConfirmSaveChangesModal";
 
 const baseClass = "software-package-card";
 
@@ -232,7 +233,7 @@ const ActionsDropdown = ({
         searchable={false}
         options={
           isSoftwarePackage
-            ? SOFTWARE_PACAKGE_DROPDOWN_OPTIONS
+            ? SOFTWARE_PACKAGE_DROPDOWN_OPTIONS
             : APP_STORE_APP_DROPDOWN_OPTIONS
         }
       />
@@ -282,8 +283,18 @@ const SoftwarePackageCard = ({
   const { renderFlash } = useContext(NotificationContext);
 
   const [showEditSoftwareModal, setShowEditSoftwareModal] = useState(false);
+  const [
+    showConfirmSaveChangesModal,
+    setShowConfirmSaveChangesModal,
+  ] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
 
+  const toggleConfirmSaveChangesModal = () => {
+    debugger;
+    // open and closes save changes modal
+    setShowConfirmSaveChangesModal(!showConfirmSaveChangesModal);
+  };
+
   const onEditSoftwareClick = () => {
     setShowEditSoftwareModal(true);
   };
@@ -410,6 +421,15 @@ const SoftwarePackageCard = ({
           onExit={() => setShowEditSoftwareModal(false)}
           router={router}
           setAddedSoftwareToken={noop}
+          showConfirmSaveChangesModal={showConfirmSaveChangesModal}
+          toggleConfirmSaveChangesModal={toggleConfirmSaveChangesModal}
+        />
+      )}
+      {showConfirmSaveChangesModal && (
+        <ConfirmSaveChangesModal
+          onClose={toggleConfirmSaveChangesModal}
+          softwarePackageName={softwarePackage?.name}
+          onSaveChanges={noop} // TODO
         />
       )}
       {showDeleteModal && (

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwarePackageCard/helpers.ts

@@ -1,4 +1,4 @@
-export const SOFTWARE_PACAKGE_DROPDOWN_OPTIONS = [
+export const SOFTWARE_PACKAGE_DROPDOWN_OPTIONS = [
   {
     label: "Download",
     value: "download",

frontend/pages/SoftwarePage/components/AddPackageForm/AddPackageForm.tsx

@@ -3,6 +3,7 @@ import React, { useContext, useState } from "react";
 
 import { NotificationContext } from "context/notification";
 import { getFileDetails } from "utilities/file/fileUtils";
+import deepDifference from "utilities/deep_difference";
 import getDefaultInstallScript from "utilities/software_install_scripts";
 import getDefaultUninstallScript from "utilities/software_uninstall_scripts";
 
@@ -56,6 +57,7 @@ interface IAddPackageFormProps {
   defaultPostInstallScript?: string;
   defaultUninstallScript?: string;
   defaultSelfService?: boolean;
+  toggleSaveChangesForEditModal?: () => void;
 }
 
 const ACCEPTED_EXTENSIONS = ".pkg,.msi,.exe,.deb";
@@ -71,17 +73,21 @@ const AddPackageForm = ({
   defaultPostInstallScript,
   defaultUninstallScript,
   defaultSelfService,
+  toggleSaveChangesForEditModal,
 }: IAddPackageFormProps) => {
   const { renderFlash } = useContext(NotificationContext);
 
-  const [formData, setFormData] = useState<IAddPackageFormData>({
+  const initialFormData = {
     software: defaultSoftware || null,
     installScript: defaultInstallScript || "",
     preInstallQuery: defaultPreInstallQuery || undefined,
     postInstallScript: defaultPostInstallScript || undefined,
     uninstallScript: defaultUninstallScript || undefined,
     selfService: defaultSelfService || false,
-  });
+  };
+  const [formData, setFormData] = useState<IAddPackageFormData>(
+    initialFormData
+  );
   const [formValidation, setFormValidation] = useState<IFormValidation>({
     isValid: false,
     software: { isValid: false },
@@ -119,8 +125,22 @@ const AddPackageForm = ({
   };
 
   const onFormSubmit = (evt: React.FormEvent<HTMLFormElement>) => {
-    evt.preventDefault();
-    onSubmit(formData);
+    // When editing software, we prompt a save changes modal for all changes except to self-service
+    const updates = deepDifference(initialFormData, formData);
+    const onlySelfServiceUpdated =
+      Object.keys(updates).length === 1 && "selfService" in updates;
+
+    const promptSaveChangesForEditModal =
+      isEditingSoftware && !onlySelfServiceUpdated;
+
+    if (promptSaveChangesForEditModal && !!toggleSaveChangesForEditModal) {
+      evt.preventDefault();
+      toggleSaveChangesForEditModal();
+    } else {
+      evt.preventDefault();
+
+      onSubmit(formData);
+    }
   };
 
   const onChangeInstallScript = (value: string) => {
@@ -216,4 +236,5 @@ const AddPackageForm = ({
   );
 };
 
-export default AddPackageForm;
+// Allows form not to re-render as long as it's props don't change
+export default React.memo(AddPackageForm);

frontend/services/entities/software.ts

@@ -254,10 +254,11 @@ export default {
       formData.append("pre_install_query", data.preInstallQuery);
     data.postInstallScript &&
       formData.append("post_install_script", data.postInstallScript);
+    // TODO: uninstall script once uninstall is merged
     teamId && formData.append("team_id", teamId.toString());
 
     return sendRequest(
-      "POST",
+      "PATCH",
       SOFTWARE_TITLE(softwareId),
       formData,
       undefined,