chore: install package from GitHub
Yi
1 year ago
parent
b5be6bacef
commit
c503e8ebc9
@ -0,0 +1,68 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import Toast from '@/app/components/base/toast'
|
||||||
|
import { uploadGitHub } from '@/service/plugins'
|
||||||
|
|
||||||
|
export const useGitHubReleases = () => {
|
||||||
|
const fetchReleases = async (owner: string, repo: string, setReleases: (releases: any) => void) => {
|
||||||
|
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,
|
||||||
|
name: asset.name,
|
||||||
|
})),
|
||||||
|
}))
|
||||||
|
|
||||||
|
setReleases(formattedReleases)
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
Toast.notify({
|
||||||
|
type: 'error',
|
||||||
|
message: 'Failed to fetch repository releases',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { fetchReleases }
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useGitHubUpload = () => {
|
||||||
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
|
||||||
|
const handleUpload = async (
|
||||||
|
repoUrl: string,
|
||||||
|
selectedVersion: string,
|
||||||
|
selectedPackage: string,
|
||||||
|
onSuccess?: (GitHubPackage: { manifest: any; uniqueIdentifier: string }) => void,
|
||||||
|
) => {
|
||||||
|
setIsLoading(true)
|
||||||
|
setError(null)
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await uploadGitHub(repoUrl, selectedVersion, selectedPackage)
|
||||||
|
const GitHubPackage = {
|
||||||
|
manifest: response.manifest,
|
||||||
|
uniqueIdentifier: response.plugin_unique_identifier,
|
||||||
|
}
|
||||||
|
if (onSuccess) onSuccess(GitHubPackage)
|
||||||
|
return GitHubPackage
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
setError('Error installing package')
|
||||||
|
Toast.notify({
|
||||||
|
type: 'error',
|
||||||
|
message: 'Error installing package',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
setIsLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { handleUpload, isLoading, error }
|
||||||
|
}
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import Button from '@/app/components/base/button'
|
||||||
|
import type { PluginDeclaration } from '../../../types'
|
||||||
|
import Card from '../../../card'
|
||||||
|
import Badge, { BadgeState } from '@/app/components/base/badge/index'
|
||||||
|
import { pluginManifestToCardPluginProps } from '../../utils'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
|
||||||
|
type LoadedProps = {
|
||||||
|
isLoading: boolean
|
||||||
|
payload: PluginDeclaration
|
||||||
|
onBack: () => void
|
||||||
|
onInstall: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const i18nPrefix = 'plugin.installModal'
|
||||||
|
|
||||||
|
const Loaded: React.FC<LoadedProps> = ({ isLoading, payload, onBack, onInstall }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className='text-text-secondary system-md-regular'>
|
||||||
|
<p>{t(`${i18nPrefix}.readyToInstall`)}</p>
|
||||||
|
</div>
|
||||||
|
<div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
|
||||||
|
<Card
|
||||||
|
className='w-full'
|
||||||
|
payload={pluginManifestToCardPluginProps(payload)}
|
||||||
|
titleLeft={<Badge className='mx-1' size="s" state={BadgeState.Default}>{payload.version}</Badge>}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='flex justify-end items-center gap-2 self-stretch mt-4'>
|
||||||
|
<Button
|
||||||
|
variant='secondary'
|
||||||
|
className='min-w-[72px]'
|
||||||
|
onClick={onBack}
|
||||||
|
>
|
||||||
|
{t('plugin.installModal.back')}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant='primary'
|
||||||
|
className='min-w-[72px]'
|
||||||
|
onClick={onInstall}
|
||||||
|
disabled={isLoading}
|
||||||
|
>
|
||||||
|
{t('plugin.installModal.next')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Loaded
|
||||||
@ -1,53 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import type { Item } from '@/app/components/base/select'
|
|
||||||
import { PortalSelect } from '@/app/components/base/select'
|
|
||||||
import Button from '@/app/components/base/button'
|
|
||||||
import { useTranslation } from 'react-i18next'
|
|
||||||
|
|
||||||
type SetPackageProps = {
|
|
||||||
selectedPackage: string
|
|
||||||
packages: Item[]
|
|
||||||
onSelect: (item: Item) => void
|
|
||||||
onInstall: () => void
|
|
||||||
onBack: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const SetPackage: React.FC<SetPackageProps> = ({ selectedPackage, packages, onSelect, onInstall, onBack }) => {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<label
|
|
||||||
htmlFor='package'
|
|
||||||
className='flex flex-col justify-center items-start self-stretch text-text-secondary'
|
|
||||||
>
|
|
||||||
<span className='system-sm-semibold'>{t('plugin.installFromGitHub.selectPackage')}</span>
|
|
||||||
</label>
|
|
||||||
<PortalSelect
|
|
||||||
value={selectedPackage}
|
|
||||||
onSelect={onSelect}
|
|
||||||
items={packages}
|
|
||||||
placeholder={t('plugin.installFromGitHub.selectPackagePlaceholder') || ''}
|
|
||||||
popupClassName='w-[432px] z-[1001]'
|
|
||||||
/>
|
|
||||||
<div className='flex justify-end items-center gap-2 self-stretch mt-4'>
|
|
||||||
<Button
|
|
||||||
variant='secondary'
|
|
||||||
className='min-w-[72px]'
|
|
||||||
onClick={onBack}
|
|
||||||
>
|
|
||||||
{t('plugin.installModal.back')}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant='primary'
|
|
||||||
className='min-w-[72px]'
|
|
||||||
onClick={onInstall}
|
|
||||||
disabled={!selectedPackage}
|
|
||||||
>
|
|
||||||
{t('plugin.installModal.install')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SetPackage
|
|
||||||
Loading…
Reference in New Issue