import Head from 'next/head' import { useState, useEffect } from 'react' import { saveAs } from 'file-saver'; import CreatableSelect from 'react-select/creatable'; export default function AddApp() { function friendlyUrl(url) { // make the url lowercase var encodedUrl = url.toString().toLowerCase(); // replace & with and encodedUrl = encodedUrl.split(/\&+/).join("-and-") // remove invalid characters encodedUrl = encodedUrl.split(/[^a-z0-9]/).join("-"); // remove duplicates encodedUrl = encodedUrl.split(/-+/).join("-"); // trim leading & trailing characters encodedUrl = encodedUrl.trim('-'); return encodedUrl; } const downloadZip = () => { var JSZip = require("jszip"); const zip = new JSZip() const folder = zip.folder(application.friendly_name) folder.file('app.json', JSON.stringify(application, null, 2)) if (icon) { folder.file(application.image_src, icon.file) } zip.generateAsync({ type: "blob" }) .then(function (content) { // Force down of the Zip file saveAs(content, friendlyUrl(application.friendly_name) + '.zip'); }); } const [icon, setIcon] = useState(null) const [ext, setExt] = useState('png') const [application, setApplication] = useState({ friendly_name: null, image_src: null, description: null, name: null, cores: 2, memory: 2768, gpu_count: 0, cpu_allocation_method: "Inherit", docker_registry: "https://index.docker.io/v1/", volume_mappings: "{}", run_config: "{}", exec_config: "{}", categories: [], require_gpu: false, enabled: true, restrict_to_network: false, restrict_network_names: "[]", allow_network_selection: false, notes: null, image_type: 'Container', }) const displayApplication = () => { return { ...application, categories: JSON.stringify(application.categories) } } const customStyles = { control: (base, state) => ({ ...base, background: "#f1f5f9", borderRadius: '0.5rem', borderColor: "#94a3b8" }), multiValue: (styles, { data }) => { return { ...styles, backgroundColor: '#dde6f1', }; } } useEffect(() => { if (application && application.friendly_name) { const updateapp = { ...application } updateapp.image_src = friendlyUrl(updateapp.friendly_name) + '.' + ext setApplication(updateapp) } }, [ext]) const updateCategories = (items) => { const updateapp = { ...application } updateapp.categories = items.map(cat => cat.value) setApplication(updateapp) } const handleChange = (event) => { const updateapp = { ...application } updateapp[event.target.name] = event.target.value if (event.target.name === 'icon') { delete updateapp.icon setIcon({ value: event.target.value, file: event.target.files[0] }) setExt(event.target.value.substr(event.target.value.lastIndexOf('.') + 1)) // return } if (updateapp.friendly_name) { updateapp.image_src = friendlyUrl(updateapp.friendly_name) + '.' + ext } setApplication(updateapp) } const options = [ { value: 'Browser', label: 'Browser' }, { value: 'Communication', label: 'Communication' }, { value: 'Desktop', label: 'Desktop' }, { value: 'Development', label: 'Development' }, { value: 'Games', label: 'Games' }, { value: 'Multimedia', label: 'Multimedia' }, { value: 'Office', label: 'Office' }, { value: 'Privacy', label: 'Privacy' }, { value: 'Productivity', label: 'Productivity' }, { value: 'Remote Access', label: 'Remote Access' } ] return (
Kasm Apps

Add Application

This will help you generate the JSON file you need to upload to the App directory.

Select the image to use, image will be renamed when it's downloaded.

This is the name that will show for users

You can select from the available option or create new ones.

A short description about the application

The docker image to use, i.e. kasmweb/filezilla:develop

{JSON.stringify(displayApplication(), null, 2)}
) } function App({ app, icon }) { const [showDescription, setShowDescription] = useState(false); let srcBlob = null if (icon) { const blob = new Blob([icon.file]) srcBlob = URL.createObjectURL(blob); app.image_src = srcBlob } const installButton = () => { return } const editButton = () => { return
Edit
} const official = () => { return } const appExists = false return (
setShowDescription(true)} className={"h-[100px] p-4 relative overflow-hidden cursor-pointer"}> {app.friendly_name}
{app.friendly_name || 'Friendly Name'}
{app.author || 'Unknown'} {official()}
{app.categories.map(cat => ( {cat} ))}
{appExists && appExists.enabled === true && appExists.available === false && (
Installing
)}
{app.friendly_name}
{app.description}
{editButton()} {installButton()}
) }