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

web/screens/Settings/CorePlugins/PluginsCatalog.tsx

@@ -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 = e.target.files?.[0].path
-    const pluginFile = new FormData(e.target).get('plugin-file').path
 
     // Send the filename of the to be installed plugin
     // to the main process for installation
@@ -116,65 +116,97 @@ 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 handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-  //   const file = event.target.files?.[0]
+    const file = event.target.files?.[0]
-  //   if (file) {
+    if (file) {
-  //     setFileName(file.name)
+      install(event)
-  //   } else {
+    }
-  //     setFileName('')
+  }
-  //   }
-  // }
 
   return (
     <div className="block w-full">
-      {pluginCatalog?.map((item, i) => {
+      {(pluginCatalog ?? [])
-        const isActivePlugin = activePlugins.some((x) => x.name === item.name)
+        .concat(
-        const updateVersionPlugins = Number(
+          activePlugins?.filter(
-          activePlugins
+            (e) => !(pluginCatalog ?? []).some((p) => p.name === e.name)
-            .filter((p) => p.name === item.name)[0]
+          ) ?? []
-            ?.version.replaceAll('.', '')
         )
-        return (
+        .map((item, i) => {
-          <div
+          const isActivePlugin = activePlugins.some((x) => x.name === item.name)
-            key={i}
+          const updateVersionPlugins = Number(
-            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"
+            activePlugins
-          >
+              .filter((p) => p.name === item.name)[0]
-            <div className="w-4/5 flex-shrink-0 space-y-1.5">
+              ?.version.replaceAll('.', '')
-              <div className="flex gap-x-2">
+          )
-                <h6 className="text-sm font-semibold capitalize">
+          return (
-                  {formatPluginsName(item.name)}
+            <div
-                </h6>
+              key={i}
-                <p className="whitespace-pre-wrap font-semibold leading-relaxed text-gray-600 dark:text-gray-400">
+              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"
-                  v{item.version}
+            >
+              <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">
+                    {formatPluginsName(item.name)}
+                  </h6>
+                  <p className="whitespace-pre-wrap font-semibold leading-relaxed text-gray-600 dark:text-gray-400">
+                    v{item.version}
+                  </p>
+                </div>
+                <p className="whitespace-pre-wrap leading-relaxed text-gray-600 dark:text-gray-400">
+                  {item.description}
                 </p>
+                {isActivePlugin &&
+                  item.version.replaceAll('.', '') < updateVersionPlugins && (
+                    <Button
+                      size="sm"
+                      themes="outline"
+                      onClick={() => downloadTarball(item.name)}
+                    >
+                      Update
+                    </Button>
+                  )}
               </div>
-              <p className="whitespace-pre-wrap leading-relaxed text-gray-600 dark:text-gray-400">
+              <Switch
-                {item.description}
+                checked={isActivePlugin}
-              </p>
+                onCheckedChange={(e) => {
-              {isActivePlugin &&
+                  if (e === true) {
-                item.version.replaceAll('.', '') < updateVersionPlugins && (
+                    downloadTarball(item.name)
-                  <Button
+                  } else {
-                    size="sm"
+                    uninstall(item.name)
-                    themes="outline"
+                  }
-                    onClick={() => downloadTarball(item.name)}
+                }}
-                  >
+              />
-                    Update
-                  </Button>
-                )}
             </div>
-            <Switch
+          )
-              checked={isActivePlugin}
+        })}
-              onCheckedChange={(e) => {
+      {/* Manual Installation */}
-                if (e === true) {
+      <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">
-                  downloadTarball(item.name)
+        <div className="w-4/5 flex-shrink-0 space-y-1.5">
-                } else {
+          <div className="flex gap-x-2">
-                  uninstall(item.name)
+            <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">

web/screens/Settings/CorePlugins/PreferencePlugins/index.tsx

@@ -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