Merge pull request #430 from transformerlab/fix/show_plugin_install_error

If Plugin install fails, show a message

Author: dadmobile

src/renderer/components/MainAppPanel.tsx

@@ -472,7 +472,12 @@ export default function MainAppPanel({
         />
         <Route
           path="/plugins"
-          element={<Plugins experimentInfo={experimentInfo} />}
+          element={
+            <Plugins
+              experimentInfo={experimentInfo}
+              setLogsDrawerOpen={setLogsDrawerOpen}
+            />
+          }
         />
         <Route
           path="/plugins/:pluginName"

src/renderer/components/Plugins/LocalPlugins.tsx

@@ -18,7 +18,10 @@ import NewPluginModal from './NewPluginModal';
 
 const fetcher = (url) => fetch(url).then((res) => res.json());
 
-export default function LocalPlugins({ experimentInfo }) {
+export default function LocalPlugins({
+  experimentInfo,
+  setLogsDrawerOpen = null,
+}) {
   const [newPluginModalOpen, setNewPluginModalOpen] = useState(false);
 
   const { data, error, isLoading, mutate } = useSWR(
@@ -77,6 +80,7 @@ export default function LocalPlugins({ experimentInfo }) {
                 download={undefined}
                 experimentInfo={experimentInfo}
                 machineType={device}
+                setLogsDrawerOpen={setLogsDrawerOpen}
               />
             </Grid>
           ))}

src/renderer/components/Plugins/PluginCard.tsx

@@ -83,6 +83,7 @@ export default function PluginCard({
   parentMutate,
   experimentInfo = {},
   machineType,
+  setLogsDrawerOpen = null,
 }) {
   const [installing, setInstalling] = useState(null);
 
@@ -239,7 +240,24 @@ export default function PluginCard({
                   experimentInfo?.id,
                   plugin.uniqueId,
                 ),
-              );
+              ).then(async (response) => {
+                if (response.ok) {
+                  const responseBody = await response.json();
+                  console.log('Response Body:', responseBody);
+                  if (responseBody?.status == 'error') {
+                    alert(
+                      `Failed to install plugin:\n${responseBody?.message}`,
+                    );
+                    if (setLogsDrawerOpen) {
+                      setLogsDrawerOpen(true);
+                    }
+                  }
+                } else {
+                  alert(
+                    'Error: The API did not return a response. Plugin installation failed.',
+                  );
+                }
+              });
               setInstalling(null);
               parentMutate();
             }}

src/renderer/components/Plugins/PluginGallery.tsx

@@ -22,7 +22,10 @@ import PluginCard from './PluginCard';
 
 const fetcher = (url) => fetch(url).then((res) => res.json());
 
-export default function PluginGallery({ experimentInfo }) {
+export default function PluginGallery({
+  experimentInfo,
+  setLogsDrawerOpen = null,
+}) {
   const { data, error, isLoading, mutate } = useSWR(
     chatAPI.Endpoints.Plugins.Gallery(),
     fetcher,
@@ -187,6 +190,7 @@ export default function PluginGallery({ experimentInfo }) {
                       experimentInfo={experimentInfo}
                       parentMutate={mutate}
                       machineType={device}
+                      setLogsDrawerOpen={setLogsDrawerOpen}
                     />
                   </Grid>
                 ))}
@@ -220,6 +224,7 @@ export default function PluginGallery({ experimentInfo }) {
                           experimentInfo={experimentInfo}
                           parentMutate={mutate}
                           machineType={device}
+                          setLogsDrawerOpen={setLogsDrawerOpen}
                         />
                       </Box>
                     </Grid>

src/renderer/components/Plugins/Plugins.tsx

@@ -18,7 +18,7 @@ import PluginGallery from './PluginGallery';
 import LocalPlugins from './LocalPlugins';
 import OneTimePopup from '../Shared/OneTimePopup';
 
-export default function Plugins({ experimentInfo }) {
+export default function Plugins({ experimentInfo, setLogsDrawerOpen = null }) {
   const { data: outdatedPlugins, mutate: outdatePluginsMutate } =
     usePluginStatus(experimentInfo);
   const [installing, setInstalling] = useState(null);
@@ -114,7 +114,10 @@ export default function Plugins({ experimentInfo }) {
           <Sheet
             sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}
           >
-            <LocalPlugins experimentInfo={experimentInfo} />
+            <LocalPlugins
+              experimentInfo={experimentInfo}
+              setLogsDrawerOpen={setLogsDrawerOpen}
+            />
           </Sheet>
         </TabPanel>
         <TabPanel
@@ -128,7 +131,10 @@ export default function Plugins({ experimentInfo }) {
           <Sheet
             sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}
           >
-            <PluginGallery experimentInfo={experimentInfo} />
+            <PluginGallery
+              experimentInfo={experimentInfo}
+              setLogsDrawerOpen={setLogsDrawerOpen}
+            />
           </Sheet>
         </TabPanel>
       </Tabs>