refactor modals to their own files

web/src/components/modals/ConfirmDeploymentModal.tsx

@@ -0,0 +1,90 @@
+import { Version } from "@types";
+import Modal from "react-modal";
+
+const ConfirmDeploymentModal = ({
+  displayConfirmDeploymentModal,
+  hideConfirmDeploymentModal,
+  confirmType,
+  versionToDeploy,
+  outletContext,
+  finalizeDeployment,
+  isPastVersion,
+  finalizeRedeployment,
+}: {
+  displayConfirmDeploymentModal: boolean;
+  hideConfirmDeploymentModal: () => void;
+  confirmType: string;
+  versionToDeploy: {
+    versionLabel?: string;
+    sequence: number;
+  };
+  outletContext: {
+    app: {
+      autoDeploy: string;
+    };
+  };
+  finalizeDeployment: (continueWithFailedPreflights: boolean) => void;
+  isPastVersion: Version;
+  finalizeRedeployment: () => void;
+}) => {
+  return (
+    <Modal
+      isOpen={displayConfirmDeploymentModal}
+      onRequestClose={() => hideConfirmDeploymentModal()}
+      contentLabel="Confirm deployment"
+      ariaHideApp={false}
+      className="Modal DefaultSize"
+    >
+      <div className="Modal-body">
+        <p className="u-fontSize--largest u-fontWeight--bold u-textColor--primary u-lineHeight--normal u-marginBottom--10">
+          {confirmType === "rollback"
+            ? "Rollback to"
+            : confirmType === "redeploy"
+            ? "Redeploy"
+            : "Deploy"}{" "}
+          {versionToDeploy?.versionLabel} (Sequence {versionToDeploy?.sequence}
+          )?
+        </p>
+        {isPastVersion && outletContext.app?.autoDeploy !== "disabled" ? (
+          <div className="info-box">
+            <span className="u-fontSize--small u-textColor--info u-lineHeight--normal u-fontWeight--medium">
+              You have automatic deploys enabled.{" "}
+              {confirmType === "rollback"
+                ? "Rolling back to"
+                : confirmType === "redeploy"
+                ? "Redeploying"
+                : "Deploying"}{" "}
+              this version will disable automatic deploys. You can turn it back
+              on after this version finishes deployment.
+            </span>
+          </div>
+        ) : null}
+        <div className="flex u-paddingTop--10">
+          <button
+            className="btn secondary blue"
+            onClick={() => hideConfirmDeploymentModal()}
+          >
+            Cancel
+          </button>
+          <button
+            className="u-marginLeft--10 btn primary"
+            onClick={
+              confirmType === "redeploy"
+                ? finalizeRedeployment
+                : () => finalizeDeployment(false)
+            }
+          >
+            Yes,{" "}
+            {confirmType === "rollback"
+              ? "rollback"
+              : confirmType === "redeploy"
+              ? "redeploy"
+              : "deploy"}
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ConfirmDeploymentModal;

web/src/components/modals/DiffErrorModal.tsx

@@ -0,0 +1,55 @@
+import Modal from "react-modal";
+
+const DiffErrorModal = ({
+  showDiffErrModal,
+  toggleDiffErrModal,
+  releaseWithErr,
+}: {
+  showDiffErrModal: boolean;
+  toggleDiffErrModal: () => void;
+  releaseWithErr: {
+    title?: string;
+    sequence?: number;
+    diffSummaryError?: string;
+  };
+}) => {
+  return (
+    <Modal
+      isOpen={showDiffErrModal}
+      onRequestClose={() => toggleDiffErrModal()}
+      contentLabel="Unable to Get Diff"
+      ariaHideApp={false}
+      className="Modal MediumSize"
+    >
+      <div className="Modal-body">
+        <p className="u-fontSize--largest u-fontWeight--bold u-textColor--primary u-lineHeight--normal u-marginBottom--10">
+          Unable to generate a file diff for release
+        </p>
+        {releaseWithErr && (
+          <>
+            <p className="u-fontSize--normal u-textColor--bodyCopy u-lineHeight--normal u-marginBottom--20">
+              The release with the{" "}
+              <span className="u-fontWeight--bold">
+                Upstream {releaseWithErr.title}, Sequence{" "}
+                {releaseWithErr.sequence}
+              </span>{" "}
+              was unable to generate a files diff because the following error:
+            </p>
+            <div className="error-block-wrapper u-marginBottom--30 flex flex1">
+              <span className="u-textColor--error">
+                {releaseWithErr.diffSummaryError}
+              </span>
+            </div>
+          </>
+        )}
+        <div className="flex u-marginBottom--10">
+          <button className="btn primary" onClick={() => toggleDiffErrModal()}>
+            Ok, got it!
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default DiffErrorModal;

web/src/components/modals/DisplayKotsUpdateModal.tsx

@@ -0,0 +1,49 @@
+import Modal from "react-modal";
+import Loader from "../shared/Loader";
+
+const DisplayKotsUpdateModal = ({
+  displayKotsUpdateModal,
+  onRequestClose,
+  renderKotsUpgradeStatus,
+  kotsUpdateStatus,
+  shortKotsUpdateMessage,
+  kotsUpdateMessage,
+}: {
+  displayKotsUpdateModal: boolean;
+  onRequestClose: () => void;
+  renderKotsUpgradeStatus: boolean;
+  kotsUpdateStatus: string;
+  shortKotsUpdateMessage: string;
+  kotsUpdateMessage: string;
+}) => {
+  return (
+    <Modal
+      isOpen={displayKotsUpdateModal}
+      onRequestClose={onRequestClose}
+      contentLabel="Upgrade is in progress"
+      ariaHideApp={false}
+      className="Modal DefaultSize"
+    >
+      <div className="Modal-body u-textAlign--center">
+        <div className="flex-column justifyContent--center alignItems--center">
+          <p className="u-fontSize--large u-textColor--primary u-lineHeight--bold u-marginBottom--10">
+            Upgrading...
+          </p>
+          <Loader className="flex alignItems--center" size="32" />
+          {renderKotsUpgradeStatus ? (
+            <p className="u-fontSize--normal u-textColor--primary u-lineHeight--normal u-marginBottom--10">
+              {kotsUpdateStatus}
+            </p>
+          ) : null}
+          {kotsUpdateMessage ? (
+            <p className="u-fontSize--normal u-textColor--primary u-lineHeight--normal u-marginBottom--10">
+              {shortKotsUpdateMessage}
+            </p>
+          ) : null}
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default DisplayKotsUpdateModal;

web/src/components/modals/NoChangesModal.tsx

@@ -0,0 +1,52 @@
+import Modal from "react-modal";
+
+const NoChangesModal = ({
+  showNoChangesModal,
+  toggleNoChangesModal,
+  releaseWithNoChanges,
+}: {
+  showNoChangesModal: boolean;
+  toggleNoChangesModal: () => void;
+  releaseWithNoChanges: {
+    versionLabel?: string;
+    sequence?: number;
+  };
+}) => {
+  return (
+    <Modal
+      isOpen={showNoChangesModal}
+      onRequestClose={() => toggleNoChangesModal()}
+      contentLabel="No Changes"
+      ariaHideApp={false}
+      className="Modal DefaultSize"
+    >
+      <div className="Modal-body">
+        <p className="u-fontSize--largest u-fontWeight--bold u-textColor--primary u-lineHeight--normal u-marginBottom--10">
+          No changes to show
+        </p>
+        <p className="u-fontSize--normal u-textColor--bodyCopy u-lineHeight--normal u-marginBottom--20">
+          The{" "}
+          {releaseWithNoChanges && (
+            <span className="u-fontWeight--bold">
+              Upstream {releaseWithNoChanges.versionLabel}, Sequence{" "}
+              {releaseWithNoChanges.sequence}{" "}
+            </span>
+          )}
+          release was unable to generate a diff because the changes made do not
+          affect any manifests that will be deployed. Only changes affecting the
+          application manifest will be included in a diff.
+        </p>
+        <div className="flex u-paddingTop--10">
+          <button
+            className="btn primary"
+            onClick={() => toggleNoChangesModal()}
+          >
+            Ok, got it!
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default NoChangesModal;

web/src/components/modals/ReleaseNotesModal.tsx

@@ -0,0 +1,33 @@
+import Modal from "react-modal";
+import MarkdownRenderer from "@src/components/shared/MarkdownRenderer";
+
+const ReleaseNotesModal = ({
+  releaseNotes,
+  hideReleaseNotes,
+}: {
+  releaseNotes: Object | null;
+  hideReleaseNotes: () => void;
+}) => {
+  return (
+    <Modal
+      isOpen={!!releaseNotes}
+      onRequestClose={hideReleaseNotes}
+      contentLabel="Release Notes"
+      ariaHideApp={false}
+      className="Modal MediumSize"
+    >
+      <div className="flex-column">
+        <MarkdownRenderer className="is-kotsadm" id="markdown-wrapper">
+          {releaseNotes || ""}
+        </MarkdownRenderer>
+      </div>
+      <div className="flex u-marginTop--10 u-marginLeft--10 u-marginBottom--10">
+        <button className="btn primary" onClick={hideReleaseNotes}>
+          Close
+        </button>
+      </div>
+    </Modal>
+  );
+};
+
+export default ReleaseNotesModal;

web/src/components/modals/UpgradeServiceModal.tsx

@@ -0,0 +1,54 @@
+import Icon from "@components/Icon";
+import Loader from "@components/shared/Loader";
+import Modal from "react-modal";
+
+const UpgradeServiceModal = ({
+  shouldShowUpgradeServiceModal,
+  onRequestClose,
+  isStartingUpgradeService,
+  upgradeServiceStatus,
+  appSlug,
+  iframeRef,
+}) => {
+  return (
+    <Modal
+      isOpen={shouldShowUpgradeServiceModal}
+      onRequestClose={onRequestClose}
+      contentLabel="KOTS Upgrade Service Modal"
+      ariaHideApp={false}
+      className="Modal UpgradeServiceModal"
+      shouldCloseOnOverlayClick={false}
+    >
+      <div className="tw-h-full tw-flex">
+        <button
+          style={{
+            border: "none",
+            background: "none",
+            cursor: "pointer",
+          }}
+          className="tw-pt-4 tw-top-0 tw-right-6 tw-absolute tw-overflow-auto"
+        >
+          <Icon icon="close" onClick={onRequestClose} size={15} />
+        </button>
+        {isStartingUpgradeService ? (
+          <div className="flex-column flex1 alignItems--center justifyContent--center tw-mt-4 tw-gap-4">
+            <span className="u-fontWeight--bold">{upgradeServiceStatus}</span>
+            <Loader size="60" />
+          </div>
+        ) : (
+          <iframe
+            src={`/upgrade-service/app/${appSlug}`}
+            title="KOTS Upgrade Service"
+            width="100%"
+            height="100%"
+            allowFullScreen={true}
+            id="upgrade-service-iframe"
+            ref={iframeRef}
+          />
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default UpgradeServiceModal;