{renderGraphics()}
- {message}
- {additionalInfo && ( -{additionalInfo}
+ {isFileSelected && filePreview ? ( + filePreview + ) : ( + <> +{renderGraphics()}
+ {message}
+ {additionalInfo && ( +{additionalInfo}
+ )} + + + )} - - { - onFileUpload(e.target.files); - e.target.value = ""; - }} - />
+ {canManageAutomations && (
+
+ )}
+ {canAddSoftware && (
+
+ )}
+
+ );
+ };
+
const renderHeaderDescription = () => {
return (
@@ -358,15 +392,7 @@ const SoftwarePage = ({ children, router, location }: ISoftwarePageProps) => {
{renderTitle()}
- {canManageAutomations && isSoftwareConfigLoaded && (
-
- )}
+ {renderPageActions()}
{renderHeaderDescription()}
@@ -386,6 +412,12 @@ const SoftwarePage = ({ children, router, location }: ISoftwarePageProps) => {
recentVulnerabilityMaxAge={recentVulnerabilityMaxAge}
/>
)}
+ {showAddSoftwareModal && (
+
);
diff --git a/frontend/pages/SoftwarePage/_styles.scss b/frontend/pages/SoftwarePage/_styles.scss
index cfdd0b9c51..2740a08de4 100644
--- a/frontend/pages/SoftwarePage/_styles.scss
+++ b/frontend/pages/SoftwarePage/_styles.scss
@@ -25,6 +25,12 @@
}
}
+ &__action-buttons {
+ display: flex;
+ align-items: center;
+ gap: $pad-medium;
+ }
+
&__text {
margin-right: $pad-large;
}
diff --git a/frontend/pages/SoftwarePage/components/AddSoftwareAdvancedOptions/AddSoftwareAdvancedOptions.tsx b/frontend/pages/SoftwarePage/components/AddSoftwareAdvancedOptions/AddSoftwareAdvancedOptions.tsx
new file mode 100644
index 0000000000..96de54fd33
--- /dev/null
+++ b/frontend/pages/SoftwarePage/components/AddSoftwareAdvancedOptions/AddSoftwareAdvancedOptions.tsx
@@ -0,0 +1,110 @@
+import React, { useState } from "react";
+
+import Editor from "components/Editor";
+import CustomLink from "components/CustomLink";
+import FleetAce from "components/FleetAce";
+import RevealButton from "components/buttons/RevealButton";
+import Checkbox from "components/forms/fields/Checkbox";
+
+const baseClass = "add-software-advanced-options";
+
+interface IAddSoftwareAdvancedOptionsProps {
+ errors: { preInstallCondition?: string; postInstallScript?: string };
+ showPreInstallCondition: boolean;
+ showPostInstallScript: boolean;
+ preInstallCondition?: string;
+ postInstallScript?: string;
+ onTogglePreInstallCondition: (value: boolean) => void;
+ onTogglePostInstallScript: (value: boolean) => void;
+ onChangePreInstallCondition: (value?: string) => void;
+ onChangePostInstallScript: (value?: string) => void;
+}
+
+const AddSoftwareAdvancedOptions = ({
+ errors,
+ showPreInstallCondition,
+ showPostInstallScript,
+ preInstallCondition,
+ postInstallScript,
+ onTogglePreInstallCondition,
+ onTogglePostInstallScript,
+ onChangePreInstallCondition,
+ onChangePostInstallScript,
+}: IAddSoftwareAdvancedOptionsProps) => {
+ const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
+
+ const onChangePreInstallCheckbox = () => {
+ onTogglePreInstallCondition(!showPreInstallCondition);
+ };
+
+ const onChangePostInstallCheckbox = () => {
+ onTogglePostInstallScript(!showPostInstallScript);
+ };
+
+ return (
+
+ setShowAdvancedOptions(!showAdvancedOptions)}
+ />
+ {showAdvancedOptions && (
+
+ );
+};
+
+export default AddSoftwareAdvancedOptions;
diff --git a/frontend/pages/SoftwarePage/components/AddSoftwareAdvancedOptions/_styles.scss b/frontend/pages/SoftwarePage/components/AddSoftwareAdvancedOptions/_styles.scss
new file mode 100644
index 0000000000..58f1f85892
--- /dev/null
+++ b/frontend/pages/SoftwarePage/components/AddSoftwareAdvancedOptions/_styles.scss
@@ -0,0 +1,17 @@
+.add-software-advanced-options {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: $pad-large;
+
+ &__input-fields {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: $pad-medium;
+ }
+
+ &__table-link {
+ font-size: $xx-small;
+ }
+}
diff --git a/frontend/pages/SoftwarePage/components/AddSoftwareAdvancedOptions/index.ts b/frontend/pages/SoftwarePage/components/AddSoftwareAdvancedOptions/index.ts
new file mode 100644
index 0000000000..264fa61b11
--- /dev/null
+++ b/frontend/pages/SoftwarePage/components/AddSoftwareAdvancedOptions/index.ts
@@ -0,0 +1 @@
+export { default } from "./AddSoftwareAdvancedOptions";
diff --git a/frontend/pages/SoftwarePage/components/AddSoftwareForm/AddSoftwareForm.tsx b/frontend/pages/SoftwarePage/components/AddSoftwareForm/AddSoftwareForm.tsx
new file mode 100644
index 0000000000..5c619e9687
--- /dev/null
+++ b/frontend/pages/SoftwarePage/components/AddSoftwareForm/AddSoftwareForm.tsx
@@ -0,0 +1,220 @@
+import React, { useState } from "react";
+
+// @ts-ignore
+import InputField from "components/forms/fields/InputField";
+import Spinner from "components/Spinner";
+import Button from "components/buttons/Button";
+import FileUploader from "components/FileUploader";
+import Graphic from "components/Graphic";
+
+import AddSoftwareAdvancedOptions from "../AddSoftwareAdvancedOptions";
+
+import {
+ generateFormValidation,
+ getFileDetails,
+ getInstallScript,
+} from "./helpers";
+
+const baseClass = "add-software-form";
+
+const UploadingSoftware = () => {
+ return (
+
+
+ Pre-install condition
+
+ {showPreInstallCondition && (
+
+ Software will be installed only if the{" "}
+
+ Post-install script
+
+ {showPostInstallScript && (
+ <>
+
+ )}
+
+
+ );
+};
+
+// TODO: if we reuse this one more time, we should consider moving this
+// into FileUploader as a default preview. Currently we have this in
+// AddProfileModal.tsx and here.
+const FileDetails = ({
+ details: { name, platform },
+}: {
+ details: {
+ name: string;
+ platform: string;
+ };
+}) => (
+ Uploading. It may take few minutes to finish.
+
+ ![]()
+
+);
+
+export interface IAddSoftwareFormData {
+ software: File | null;
+ installScript: string;
+ preInstallCondition?: string;
+ postInstallScript?: string;
+}
+
+export interface IFormValidation {
+ isValid: boolean;
+ software: { isValid: boolean };
+ preInstallCondition?: { isValid: boolean; message?: string };
+ postInstallScript?: { isValid: boolean; message?: string };
+}
+
+interface IAddSoftwareFormProps {
+ isUploading: boolean;
+ onCancel: () => void;
+ onSubmit: (formData: IAddSoftwareFormData) => void;
+}
+
+const AddSoftwareForm = ({
+ isUploading,
+ onCancel,
+ onSubmit,
+}: IAddSoftwareFormProps) => {
+ console.log("rerender");
+ const [showPreInstallCondition, setShowPreInstallCondition] = useState(false);
+ const [showPostInstallScript, setShowPostInstallScript] = useState(false);
+ const [formData, setFormData] = useState
+
+ {name}
+
+ {platform}
+
+
+ {isUploading ? (
+
+ );
+};
+
+export default AddSoftwareForm;
diff --git a/frontend/pages/SoftwarePage/components/AddSoftwareForm/_styles.scss b/frontend/pages/SoftwarePage/components/AddSoftwareForm/_styles.scss
new file mode 100644
index 0000000000..d955a1df9c
--- /dev/null
+++ b/frontend/pages/SoftwarePage/components/AddSoftwareForm/_styles.scss
@@ -0,0 +1,43 @@
+.add-software-form {
+
+ &__uploading-message {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ gap: $pad-large;
+
+ p {
+ margin: 0
+ }
+ }
+
+ &__form {
+ display: flex;
+ flex-direction: column;
+ gap: $pad-large;
+ }
+
+ &__file-uploader {
+ box-sizing: border-box;
+ }
+
+ &__selected-file {
+ display: flex;
+ gap: $pad-medium;
+ align-items: center;
+ width: 100%;
+ text-align: left;
+
+ &--details {
+ &--name {
+ font-size: $x-small;
+ font-weight: $bold;
+ }
+
+ &--platform {
+ font-size: $xx-small;
+ color: $ui-fleet-black-75;
+ }
+ }
+ }
+}
diff --git a/frontend/pages/SoftwarePage/components/AddSoftwareForm/helpers.ts b/frontend/pages/SoftwarePage/components/AddSoftwareForm/helpers.ts
new file mode 100644
index 0000000000..3464a83153
--- /dev/null
+++ b/frontend/pages/SoftwarePage/components/AddSoftwareForm/helpers.ts
@@ -0,0 +1,168 @@
+import validator from "validator";
+
+// @ts-ignore
+import validateQuery from "components/forms/validators/validate_query";
+import { getPlatformDisplayName } from "utilities/file/fileUtils";
+
+import { IAddSoftwareFormData, IFormValidation } from "./AddSoftwareForm";
+
+type IAddSoftwareFormValidatorKey = Exclude<
+ keyof IAddSoftwareFormData,
+ "installScript"
+>;
+
+type IMessageFunc = (formData: IAddSoftwareFormData) => string;
+type IValidationMessage = string | IMessageFunc;
+
+interface IValidation {
+ name: string;
+ isValid: (
+ formData: IAddSoftwareFormData,
+ enabledPreInstallCondition?: boolean,
+ enabledPostInstallScript?: boolean
+ ) => boolean;
+ message?: IValidationMessage;
+}
+
+/** configuration defines validations for each filed in the form. It defines rules
+ * to determine if a field is valid, and rules for generating an error message.
+ */
+const FORM_VALIDATION_CONFIG: Record<
+ IAddSoftwareFormValidatorKey,
+ { validations: IValidation[] }
+> = {
+ software: {
+ validations: [
+ {
+ name: "required",
+ isValid: (formData) => formData.software !== null,
+ },
+ ],
+ },
+ preInstallCondition: {
+ validations: [
+ {
+ name: "required",
+ isValid: (
+ formData: IAddSoftwareFormData,
+ enabledPreInstallCondition
+ ) => {
+ if (!enabledPreInstallCondition) {
+ return true;
+ }
+ return (
+ formData.preInstallCondition !== undefined &&
+ !validator.isEmpty(formData.preInstallCondition)
+ );
+ },
+ message: (formData) => {
+ // we dont want an error message until the user has interacted with
+ // the field. This is why we check for undefined here.
+ if (formData.preInstallCondition === undefined) {
+ return "";
+ }
+ return "Pre-install condition is required when enabled.";
+ },
+ },
+ {
+ name: "invalidQuery",
+ isValid: (formData, enabledPreInstallCondition) => {
+ if (!enabledPreInstallCondition) {
+ return true;
+ }
+ return (
+ formData.preInstallCondition !== undefined &&
+ validateQuery(formData.preInstallCondition).valid
+ );
+ },
+ message: (formData) =>
+ validateQuery(formData.preInstallCondition).error,
+ },
+ ],
+ },
+ postInstallScript: {
+ validations: [
+ {
+ name: "required",
+ message: (formData) => {
+ // we dont want an error message until the user has interacted with
+ // the field. This is why we check for undefined here.
+ if (formData.postInstallScript === undefined) {
+ return "";
+ }
+ return "Post-install script is required when enabled.";
+ },
+ isValid: (formData, _, enabledPostInstallScript) => {
+ if (!enabledPostInstallScript) {
+ return true;
+ }
+ return (
+ formData.postInstallScript !== undefined &&
+ !validator.isEmpty(formData.postInstallScript)
+ );
+ },
+ },
+ ],
+ },
+};
+
+const getErrorMessage = (
+ formData: IAddSoftwareFormData,
+ message?: IValidationMessage
+) => {
+ if (message === undefined || typeof message === "string") {
+ return message;
+ }
+ return message(formData);
+};
+
+export const generateFormValidation = (
+ formData: IAddSoftwareFormData,
+ showingPreInstallCondition: boolean,
+ showingPostInstallScript: boolean
+) => {
+ const formValidation: IFormValidation = {
+ isValid: true,
+ software: {
+ isValid: false,
+ },
+ };
+
+ Object.keys(FORM_VALIDATION_CONFIG).forEach((key) => {
+ const objKey = key as keyof typeof FORM_VALIDATION_CONFIG;
+ const failedValidation = FORM_VALIDATION_CONFIG[objKey].validations.find(
+ (validation) =>
+ !validation.isValid(
+ formData,
+ showingPreInstallCondition,
+ showingPostInstallScript
+ )
+ );
+
+ if (!failedValidation) {
+ formValidation[objKey] = {
+ isValid: true,
+ };
+ } else {
+ formValidation.isValid = false;
+ formValidation[objKey] = {
+ isValid: false,
+ message: getErrorMessage(formData, failedValidation.message),
+ };
+ }
+ });
+
+ return formValidation;
+};
+
+export const getFileDetails = (file: File) => {
+ return {
+ name: file.name,
+ platform: getPlatformDisplayName(file),
+ };
+};
+
+export const getInstallScript = (file: File) => {
+ // TODO: get this dynamically
+ return `sudo installer -pkg ${file.name} -target /`;
+};
diff --git a/frontend/pages/SoftwarePage/components/AddSoftwareForm/index.ts b/frontend/pages/SoftwarePage/components/AddSoftwareForm/index.ts
new file mode 100644
index 0000000000..d3ea76d47d
--- /dev/null
+++ b/frontend/pages/SoftwarePage/components/AddSoftwareForm/index.ts
@@ -0,0 +1 @@
+export { default } from "./AddSoftwareForm";
diff --git a/frontend/pages/SoftwarePage/components/AddSoftwareModal/AddSoftwareModal.tsx b/frontend/pages/SoftwarePage/components/AddSoftwareModal/AddSoftwareModal.tsx
new file mode 100644
index 0000000000..e2233964d6
--- /dev/null
+++ b/frontend/pages/SoftwarePage/components/AddSoftwareModal/AddSoftwareModal.tsx
@@ -0,0 +1,109 @@
+import React, { useContext, useEffect, useState } from "react";
+
+import { APP_CONTEXT_ALL_TEAMS_ID } from "interfaces/team";
+import { getErrorReason } from "interfaces/errors";
+import softwareAPI from "services/entities/software";
+import { NotificationContext } from "context/notification";
+
+import Modal from "components/Modal";
+import Button from "components/buttons/Button";
+
+import AddSoftwareForm from "../AddSoftwareForm";
+import { IAddSoftwareFormData } from "../AddSoftwareForm/AddSoftwareForm";
+
+// 2 minutes
+const UPLOAD_TIMEOUT = 120000;
+
+const baseClass = "add-software-modal";
+
+interface IAllTeamsMessageProps {
+ onExit: () => void;
+}
+
+const AllTeamsMessage = ({ onExit }: IAllTeamsMessageProps) => {
+ return (
+ <>
+ + Please select a team first. Software can't be added when{" "} + All teams is selected. +
+
+
+
+
+ );
+};
+
+interface IAddSoftwareModalProps {
+ teamId: number;
+ onExit: () => void;
+}
+
+const AddSoftwareModal = ({ teamId, onExit }: IAddSoftwareModalProps) => {
+ const { renderFlash } = useContext(NotificationContext);
+ const [isUploading, setIsUploading] = useState(false);
+
+ useEffect(() => {
+ let timeout: NodeJS.Timeout;
+
+ const beforeUnloadHandler = (e: BeforeUnloadEvent) => {
+ e.preventDefault();
+ // Included for legacy support, e.g. Chrome/Edge < 119
+ e.returnValue = true;
+ };
+
+ // set up event listener to prevent user from leaving page while uploading
+ if (isUploading) {
+ addEventListener("beforeunload", beforeUnloadHandler);
+ timeout = setTimeout(() => {
+ removeEventListener("beforeunload", beforeUnloadHandler);
+ }, UPLOAD_TIMEOUT);
+ } else {
+ removeEventListener("beforeunload", beforeUnloadHandler);
+ }
+
+ // clean up event listener and timeout on component unmount
+ return () => {
+ removeEventListener("beforeunload", beforeUnloadHandler);
+ clearTimeout(timeout);
+ };
+ }, [isUploading]);
+
+ const onAddSoftware = async (formData: IAddSoftwareFormData) => {
+ setIsUploading(true);
+
+ try {
+ await softwareAPI.addSoftwarePackage(formData, teamId);
+ renderFlash("success", "Software added successfully!"); // TODO: change message
+ } catch (e) {
+ renderFlash("error", getErrorReason(e));
+ }
+
+ setIsUploading(false);
+ };
+
+ return (
+