fleet/frontend/pages/ManageControlsPage/Scripts/components/ScriptUploadModal/ScriptUploadModal.tsx

import React, { useContext, useState } from "react";
import { NotificationContext } from "context/notification";
import scriptAPI from "services/entities/scripts";

import Button from "components/buttons/Button";
import Modal from "components/Modal";
import { getErrorMessage } from "./helpers";
import ScriptUploader from "../ScriptUploader";

const baseClass = "script-upload-modal";

interface IScriptUploadModal {
  onExit: () => void;
  onSubmit: () => void;
  currentTeamId: number;
}

const ScriptUploadModal = ({
  onSubmit,
  onExit,
  currentTeamId,
}: IScriptUploadModal) => {
  const { renderFlash } = useContext(NotificationContext);
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [showLoading, setShowLoading] = useState(false);

  const onUploadFile = async () => {
    if (!selectedFile) {
      return;
    }
    setShowLoading(true);
    try {
      await scriptAPI.uploadScript(selectedFile, currentTeamId);
      renderFlash("success", "Successfully uploaded.");
      onSubmit();
    } catch (e) {
      renderFlash("error", getErrorMessage(e));
    } finally {
      setShowLoading(false);
    }
  };

  const additionalInfo = (() => {
    if (!selectedFile) {
      return undefined;
    }
    if (selectedFile.name.match(/\.sh$/)) {
      return 'On macOS and Linux, script will run according to the interpreter specified in the first line: "#!/bin/sh", "#!/bin/zsh", or "#!/bin/bash"';
    }
    if (selectedFile.name.match(/\.py$/)) {
      return 'On macOS and Linux, Python scripts must start with a python shebang in the first line (for example, "#!/usr/bin/env python3" or "#!/usr/bin/python3").';
    }
    return undefined;
  })();

  return (
    <Modal
      title="Add script"
      onExit={onExit}
      onEnter={onSubmit}
      className={baseClass}
    >
      <div className={`${baseClass}__content`}>
        <ScriptUploader
          onFileSelected={(file) => setSelectedFile(file)}
          selectedFile={selectedFile}
          forModal
        />
      </div>
      {additionalInfo && (
        <p className={`${baseClass}__additional-info`}>{additionalInfo}</p>
      )}
      <div className="modal-cta-wrap">
        <Button
          onClick={onUploadFile}
          disabled={!selectedFile || showLoading}
          isLoading={showLoading}
        >
          Add script
        </Button>
      </div>
    </Modal>
  );
};

export default ScriptUploadModal;