fix: bring back install plugin manually function (#448)

This commit is contained in:
Louis 2023-10-25 15:50:39 +07:00 committed by GitHub
parent 3865c802e6
commit 1765d944e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 87 additions and 55 deletions

View File

@ -19,6 +19,7 @@ const PluginCatalog = () => {
const [pluginCatalog, setPluginCatalog] = useState<any[]>([])
const [isLoading, setIsLoading] = useState<boolean>(false)
const experimentRef = useRef(null)
const fileInputRef = useRef<HTMLInputElement | null>(null)
/**
* Loads the plugin catalog module from a CDN and sets it as the plugin catalog state.
@ -63,8 +64,7 @@ const PluginCatalog = () => {
*/
const install = async (e: any) => {
e.preventDefault()
//@ts-ignore
const pluginFile = new FormData(e.target).get('plugin-file').path
const pluginFile = e.target.files?.[0].path
// Send the filename of the to be installed plugin
// to the main process for installation
@ -116,18 +116,22 @@ const PluginCatalog = () => {
* Its to be used to display the plugin file name of the selected file.
* @param event - The change event object.
*/
// const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
// const file = event.target.files?.[0]
// if (file) {
// setFileName(file.name)
// } else {
// setFileName('')
// }
// }
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0]
if (file) {
install(event)
}
}
return (
<div className="block w-full">
{pluginCatalog?.map((item, i) => {
{(pluginCatalog ?? [])
.concat(
activePlugins?.filter(
(e) => !(pluginCatalog ?? []).some((p) => p.name === e.name)
) ?? []
)
.map((item, i) => {
const isActivePlugin = activePlugins.some((x) => x.name === item.name)
const updateVersionPlugins = Number(
activePlugins
@ -175,6 +179,34 @@ const PluginCatalog = () => {
</div>
)
})}
{/* Manual Installation */}
<div className="flex w-full items-start justify-between border-b border-gray-200 py-4 first:pt-0 last:border-none dark:border-gray-800">
<div className="w-4/5 flex-shrink-0 space-y-1.5">
<div className="flex gap-x-2">
<h6 className="text-sm font-semibold capitalize">
Manual Installation
</h6>
</div>
<p className="whitespace-pre-wrap leading-relaxed text-gray-600 dark:text-gray-400">
Select a plugin file to install (.tgz)
</p>
</div>
<div>
<input
type="file"
style={{ display: 'none' }}
ref={fileInputRef}
onChange={handleFileChange}
/>
<Button
size="sm"
themes="outline"
onClick={() => fileInputRef.current?.click()}
>
Select
</Button>
</div>
</div>
{isLoading && (
<div className="fixed inset-0 z-50 flex h-full items-center justify-center gap-y-4 rounded-lg bg-gray-950/90 text-gray-400 dark:backdrop-blur-sm">
<div className="space-y-16">

View File

@ -39,12 +39,12 @@ const PreferencePlugins = (props: Props) => {
<span className="">Setting:</span>
<span className="">{e.preferenceName}</span>
</div>
<span className="text-muted-foreground mt-1">
<span className="mt-1 text-muted-foreground">
{e.preferenceDescription}
</span>
<div className="mt-2 flex flex-row items-center space-x-4">
<input
className="bg-background/80 ring-border placeholder:text-muted-foreground focus:ring-accent/50 block w-full rounded-md border-0 py-1.5 text-xs shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:leading-6"
className="block w-full rounded-md border-0 bg-background/80 py-1.5 text-xs shadow-sm ring-1 ring-inset ring-border placeholder:text-muted-foreground focus:ring-2 focus:ring-inset focus:ring-accent/50 sm:leading-6"
defaultValue={
preferenceValues.filter(
(v: any) => v.key === e.preferenceKey