295 lines
9.7 KiB
TypeScript
295 lines
9.7 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState } from 'react'
|
|
import Modal from '@/app/components/base/modal'
|
|
import Button from '@/app/components/base/button'
|
|
import type { Item } from '@/app/components/base/select'
|
|
import { PortalSelect } from '@/app/components/base/select'
|
|
import type { GitHubRepoReleaseResponse } from '@/app/components/plugins/types'
|
|
import { InstallStep } from '../../types'
|
|
import Toast from '@/app/components/base/toast'
|
|
|
|
type InstallFromGitHubProps = {
|
|
onClose: () => void
|
|
}
|
|
|
|
type GitHubUrlInfo = {
|
|
isValid: boolean
|
|
owner?: string
|
|
repo?: string
|
|
}
|
|
|
|
type InstallState = {
|
|
step: InstallStep
|
|
repoUrl: string
|
|
selectedVersion: string
|
|
selectedPackage: string
|
|
releases: GitHubRepoReleaseResponse[]
|
|
}
|
|
|
|
const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
|
|
const [state, setState] = useState<InstallState>({
|
|
step: InstallStep.url,
|
|
repoUrl: '',
|
|
selectedVersion: '',
|
|
selectedPackage: '',
|
|
releases: [],
|
|
})
|
|
|
|
const versions: Item[] = state.releases.map(release => ({
|
|
value: release.tag_name,
|
|
name: release.tag_name,
|
|
}))
|
|
|
|
const packages: Item[] = state.selectedVersion
|
|
? (state.releases
|
|
.find(release => release.tag_name === state.selectedVersion)
|
|
?.assets
|
|
.map(asset => ({
|
|
value: asset.browser_download_url,
|
|
name: asset.name,
|
|
})) || [])
|
|
: []
|
|
|
|
const parseGitHubUrl = (url: string): GitHubUrlInfo => {
|
|
const githubUrlRegex = /^https:\/\/github\.com\/([^/]+)\/([^/]+)\/?$/
|
|
const match = url.match(githubUrlRegex)
|
|
|
|
if (match) {
|
|
return {
|
|
isValid: true,
|
|
owner: match[1],
|
|
repo: match[2],
|
|
}
|
|
}
|
|
|
|
return { isValid: false }
|
|
}
|
|
|
|
const handleInstall = async () => {
|
|
// try {
|
|
// const response = await installPackageFromGitHub({ repo: state.repoUrl, version: state.selectedVersion, package: state.selectedPackage })
|
|
// if (response.plugin_unique_identifier) {
|
|
// setState(prevState => ({...prevState, step: InstallStep.installed}))
|
|
// console.log('Package installed:')
|
|
// }
|
|
// else {
|
|
// console.error('Failed to install package:')
|
|
// }
|
|
// }
|
|
// catch (error) {
|
|
// console.error('Error installing package:')
|
|
// }
|
|
setState(prevState => ({ ...prevState, step: InstallStep.installed }))
|
|
}
|
|
|
|
const handleNext = async () => {
|
|
switch (state.step) {
|
|
case InstallStep.url: {
|
|
const { isValid, owner, repo } = parseGitHubUrl(state.repoUrl)
|
|
if (!isValid || !owner || !repo) {
|
|
Toast.notify({
|
|
type: 'error',
|
|
message: 'Invalid GitHub URL. Please enter a valid URL in the format: https://github.com/owner/repo',
|
|
})
|
|
break
|
|
}
|
|
try {
|
|
const res = await fetch(`https://api.github.com/repos/${owner}/${repo}/releases`)
|
|
if (!res.ok)
|
|
throw new Error('Failed to fetch releases')
|
|
const data = await res.json()
|
|
const formattedReleases = data.map((release: any) => ({
|
|
tag_name: release.tag_name,
|
|
assets: release.assets.map((asset: any) => ({
|
|
browser_download_url: asset.browser_download_url,
|
|
id: asset.id,
|
|
name: asset.name,
|
|
})),
|
|
}))
|
|
setState(prevState => ({ ...prevState, releases: formattedReleases, step: InstallStep.version }))
|
|
}
|
|
catch (error) {
|
|
Toast.notify({
|
|
type: 'error',
|
|
message: 'Failed to fetch repository release',
|
|
})
|
|
}
|
|
break
|
|
}
|
|
case InstallStep.version:
|
|
setState(prevState => ({ ...prevState, step: InstallStep.package }))
|
|
break
|
|
case InstallStep.package:
|
|
handleInstall()
|
|
break
|
|
}
|
|
}
|
|
|
|
const handleBack = () => {
|
|
setState((prevState) => {
|
|
switch (prevState.step) {
|
|
case InstallStep.version:
|
|
return { ...prevState, step: InstallStep.url }
|
|
case InstallStep.package:
|
|
return { ...prevState, step: InstallStep.version }
|
|
default:
|
|
return prevState
|
|
}
|
|
})
|
|
}
|
|
|
|
const isInputValid = () => {
|
|
switch (state.step) {
|
|
case InstallStep.url:
|
|
return !!state.repoUrl.trim()
|
|
case InstallStep.version:
|
|
return !!state.selectedVersion
|
|
case InstallStep.package:
|
|
return !!state.selectedPackage
|
|
default:
|
|
return true
|
|
}
|
|
}
|
|
|
|
const InfoRow = ({ label, value }: { label: string; value: string }) => (
|
|
<div className='flex items-center gap-3'>
|
|
<div className='flex-shrink-0 w-[72px] items-center gap-2'>
|
|
<div className='text-text-tertiary system-sm-medium truncate'>
|
|
{label}
|
|
</div>
|
|
</div>
|
|
<div className='flex-grow overflow-hidden'>
|
|
<div className='text-text-secondary text-ellipsis system-sm-medium'>
|
|
{value}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<Modal
|
|
isShow={true}
|
|
onClose={onClose}
|
|
className='flex min-w-[480px] p-0 flex-col items-start rounded-2xl border-[0.5px]
|
|
border-components-panel-border bg-components-panel-bg shadows-shadow-xl'
|
|
closable
|
|
>
|
|
<div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
|
|
<div className='flex flex-col items-start gap-1 flex-grow'>
|
|
<div className='self-stretch text-text-primary title-2xl-semi-bold'>
|
|
Install plugin from GitHub
|
|
</div>
|
|
<div className='self-stretch text-text-tertiary system-xs-regular'>
|
|
{state.step !== InstallStep.installed && 'Please make sure that you only install plugins from a trusted source.'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={`flex px-6 py-3 flex-col justify-center items-start self-stretch ${state.step === InstallStep.installed ? 'gap-2' : 'gap-4'}`}>
|
|
{state.step === InstallStep.url && (
|
|
<>
|
|
<label
|
|
htmlFor='repoUrl'
|
|
className='flex flex-col justify-center items-start self-stretch text-text-secondary'
|
|
>
|
|
<span className='system-sm-semibold'>GitHub repository</span>
|
|
</label>
|
|
<input
|
|
type='url'
|
|
id='repoUrl'
|
|
name='repoUrl'
|
|
value={state.repoUrl}
|
|
onChange={e => setState(prevState => ({ ...prevState, repoUrl: e.target.value }))} // TODO: needs to verify the url
|
|
className='flex items-center self-stretch rounded-lg border border-components-input-border-active
|
|
bg-components-input-bg-active shadows-shadow-xs p-2 gap-[2px] flex-grow overflow-hidden
|
|
text-components-input-text-filled text-ellipsis system-sm-regular'
|
|
placeholder='Please enter GitHub repo URL'
|
|
/>
|
|
</>
|
|
)}
|
|
{state.step === InstallStep.version && (
|
|
<>
|
|
<label
|
|
htmlFor='version'
|
|
className='flex flex-col justify-center items-start self-stretch text-text-secondary'
|
|
>
|
|
<span className='system-sm-semibold'>Select version</span>
|
|
</label>
|
|
<PortalSelect
|
|
value={state.selectedVersion}
|
|
onSelect={item => setState(prevState => ({ ...prevState, selectedVersion: item.value as string }))}
|
|
items={versions}
|
|
placeholder="Please select a version"
|
|
popupClassName='w-[432px] z-[1001]'
|
|
/>
|
|
</>
|
|
)}
|
|
{state.step === InstallStep.package && (
|
|
<>
|
|
<label
|
|
htmlFor='package'
|
|
className='flex flex-col justify-center items-start self-stretch text-text-secondary'
|
|
>
|
|
<span className='system-sm-semibold'>Select package</span>
|
|
</label>
|
|
<PortalSelect
|
|
value={state.selectedPackage}
|
|
onSelect={item => setState(prevState => ({ ...prevState, selectedPackage: item.value as string }))}
|
|
items={packages}
|
|
placeholder="Please select a package"
|
|
popupClassName='w-[432px] z-[1001]'
|
|
/>
|
|
</>
|
|
)}
|
|
{state.step === InstallStep.installed && (
|
|
<>
|
|
<div className='text-text-secondary system-md-regular'>The plugin has been installed successfully.</div>
|
|
<div className='flex w-full p-4 flex-col justify-center items-start gap-2 rounded-2xl bg-background-section-burn'>
|
|
{[
|
|
{ label: 'Repository', value: state.repoUrl },
|
|
{ label: 'Version', value: state.selectedVersion },
|
|
{ label: 'Package', value: state.selectedPackage },
|
|
].map(({ label, value }) => (
|
|
<InfoRow key={label} label={label} value={value} />
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
|
|
{state.step === InstallStep.installed
|
|
? (
|
|
<Button
|
|
variant='primary'
|
|
className='min-w-[72px]'
|
|
onClick={onClose}
|
|
>
|
|
Close
|
|
</Button>
|
|
)
|
|
: (
|
|
<>
|
|
<Button
|
|
variant='secondary'
|
|
className='min-w-[72px]'
|
|
onClick={state.step === InstallStep.url ? onClose : handleBack}
|
|
>
|
|
{state.step === InstallStep.url ? 'Cancel' : 'Back'}
|
|
</Button>
|
|
<Button
|
|
variant='primary'
|
|
className='min-w-[72px]'
|
|
onClick={handleNext}
|
|
disabled={!isInputValid()}
|
|
>
|
|
{state.step === InstallStep.package ? 'Install' : 'Next'}
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default InstallFromGitHub
|