Function SaveProjectModal

packages/components/src/save_project_modal.tsx:52–163

(props: SaveProjectModalProps)

}

export function SaveProjectModal(props: SaveProjectModalProps) {
  const { isOpen, onClose, onComplete, newOwner, projectLoader, clonedFrom } = props
  const [projectID, setProjectID] = useState('')
  const [projectTitle, setProjectTitle] = useState('')
  const [validID, setValidID] = useState(true)
  const [projectType, setProjectType] = useState(null as RunType | null)

  const featureFlags = loadFeatureFlags()

  useEffect(() => {
    if (clonedFrom && projectLoader) {
      const generate = async () => {
        const [name, title] = await projectLoader.generateValidProjectId(newOwner, clonedFrom.name, clonedFrom.title)
        setProjectID(name)
        setProjectTitle(title)
      }
      generate()
    } else {
      setProjectID('')
      setProjectTitle('')
    }
  }, [clonedFrom, projectLoader])

  useEffect(() => {
    if (projectID === '') {
      return
    }

    projectLoader.isValidProjectId(newOwner, projectID).then((isValid) => {
      setValidID(isValid)
    })
  }, [projectID])

  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setProjectTitle(e.target.value)
    setProjectID(convertToURL(e.target.value))
  }

  let errorMessage = ''
  if (!validID && projectID !== '') {
    errorMessage = 'This project ID is already taken'
  }

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    if (projectTitle !== '' && validID) {
      if (props.clonedFrom) {
        const proj = props.clonedFrom
        props.projectLoader.cloneProject(newOwner, projectID, projectTitle, proj).then((newProj) => {
          onComplete(newOwner, projectID)
        })
      } else {
        props.projectLoader
          .newProject(newOwner, projectID, projectTitle, 'PYTHON_CLI', projectType || RunType.COMMAND_LINE)
          .then(() => {
            onComplete(newOwner, projectID)
          })
      }