fixed vv in plugin versions, updated confirmation dialog component to support alerts and replaced alerts in PluginContext with modal dialog

Author: oidebrett

ui/src/components/common/ConfirmationModal.js

@@ -12,34 +12,50 @@ import React from 'react';
  * @param {Function} props.onConfirm - Function to call when confirmed
  * @param {Function} props.onCancel - Function to call when cancelled
  * @param {boolean} props.show - Whether to show the modal
+ * @param {string} props.mode - Whether this is a confirmation or an alert
  * @returns {JSX.Element}
  */
 const ConfirmationModal = ({ 
   title, 
   message, 
   details, 
-  confirmText = "Confirm", 
-  cancelText = "Cancel", 
+  confirmText, 
+  cancelText, 
   onConfirm, 
   onCancel, 
-  show 
+  show,
+  mode = "confirm" // new prop, default to "confirm"
 }) => {
   if (!show) return null;
-  
+
+  // Use different button texts and visibility based on mode
+  const isAlert = mode === "alert";
+  const confirmButtonText = confirmText || (isAlert ? "OK" : "Confirm");
+  const cancelButtonText = cancelText || "Cancel";
+
   return (
     <div className="modal-overlay">
-      <div className="modal-content max-w-md"> {/* Standard width */}
+      <div className="modal-content max-w-md">
         <div className="modal-header">
-          <h3 className="modal-title text-red-600 dark:text-red-400">{title}</h3>
-          <button onClick={onCancel} className="modal-close-button">&times;</button>
+          <h3 className={`modal-title ${isAlert ? 'text-blue-600 dark:text-blue-400' : 'text-red-600 dark:text-red-400'}`}>
+            {title}
+          </h3>
+          {/* For alerts, closing the modal can just call onConfirm or onCancel or be hidden */}
+          <button onClick={isAlert ? onConfirm : onCancel} className="modal-close-button">&times;</button>
         </div>
         <div className="modal-body">
           <p className="text-sm text-gray-700 dark:text-gray-300 mb-2">{message}</p>
           {details && <p className="text-xs text-gray-500 dark:text-gray-400 mb-4">{details}</p>}
         </div>
         <div className="modal-footer">
-          <button onClick={onCancel} className="btn btn-secondary">{cancelText}</button>
-          <button onClick={onConfirm} className="btn btn-danger">{confirmText}</button>
+          {!isAlert && (
+            <button onClick={onCancel} className="btn btn-secondary">
+              {cancelButtonText}
+            </button>
+          )}
+          <button onClick={onConfirm} className={isAlert ? "btn btn-primary" : "btn btn-danger"}>
+            {confirmButtonText}
+          </button>
         </div>
       </div>
     </div>

ui/src/components/plugins/PluginCard.js

@@ -104,7 +104,7 @@ const PluginCard = ({ plugin }) => {
             <div className="flex-shrink-0 flex flex-col items-end space-y-1"> {/* Badge and Stars container */}
               {isActuallyInstalled && (
                 <span className="badge badge-success text-xs whitespace-nowrap py-0.5 px-1.5">
-                  Installed {plugin.installedVersion && `(v${plugin.installedVersion})`}
+                  Installed {plugin.installedVersion && `(${plugin.installedVersion})`}
                 </span>
               )}
               {plugin.stars !== undefined && ( // Show stars always if available, or conditionally if space is an issue

ui/src/components/plugins/PluginHub.js

@@ -1,7 +1,7 @@
 // ui/src/components/plugins/PluginHub.js
 import React, { useEffect, useState } from 'react';
 import { usePlugins } from '../../contexts/PluginContext';
-import { LoadingSpinner, ErrorMessage as GlobalErrorMessage } from '../common'; // Renamed to avoid conflict
+import { LoadingSpinner, ErrorMessage as GlobalErrorMessage, ConfirmationModal } from '../common'; // Renamed to avoid conflict
 import PluginCard from './PluginCard';
 
 const PluginHub = () => {
@@ -20,6 +20,11 @@ const PluginHub = () => {
   const [currentPath, setCurrentPath] = useState('');
   const [pathError, setPathError] = useState('');
   const [pathSaving, setPathSaving] = useState(false);
+  const [showWarningModal, setShowWarningModal] = useState(false);
+
+  const cancelWarning = () => {
+    setShowWarningModal(false);
+  };
 
   useEffect(() => {
     if (traefikConfigPath) {
@@ -40,8 +45,18 @@ const PluginHub = () => {
       // Error is set in context, this is for immediate feedback
       setPathError(error || 'Failed to update path. Check console.');
     } else {
-        alert('Path updated. This change is in-memory and will be lost on application restart unless persisted in the backend configuration (e.g., environment variable or config file).');
-    }
+        {/* Warning Confirmation Modal */}
+        <ConfirmationModal
+        show={showWarningModal}
+        title="Warning"
+        message={`Path updated. `}
+        details="This change is in-memory and will be lost on application restart unless persisted in the backend configuration (e.g., environment variable or config file)."
+        cancelText="Cancel"
+        onCancel={cancelWarning}
+        />
+//        alert('Path updated. This change is in-memory and will be lost on application restart unless persisted in the backend configuration (e.g., environment variable or config file).');
+
+      }
     setPathSaving(false);
   };
 

ui/src/contexts/PluginContext.js

@@ -2,6 +2,7 @@
 import React, { createContext, useState, useContext, useCallback, useEffect } from 'react';
 // Ensure GlobalErrorMessage is imported correctly if you use it elsewhere in this file.
 // For now, local error display via alert/setError should suffice for these new functions.
+import { ConfirmationModal } from '../components/common';
 
 const API_URL = '/api/plugins';
 
@@ -13,6 +14,7 @@ export const PluginProvider = ({ children }) => {
   const [error, setError] = useState(null);
   const [traefikConfigPath, setTraefikConfigPath] = useState('');
   const [fetchingPath, setFetchingPath] = useState(true);
+  const [alert, setAlert] = useState({ show: false, title: '', message: '' });
 
   const fetchPlugins = useCallback(async () => {
     setLoading(true);
@@ -48,7 +50,12 @@ export const PluginProvider = ({ children }) => {
         throw new Error(errData.message);
       }
       const result = await response.json();
-      alert(result.message || 'Plugin installation initiated successfully! Restart Traefik to apply.');
+      //alert(result.message || 'Plugin installation initiated successfully! Restart Traefik to apply.'); // Alert is now in the Confirmation Dialog component
+      setAlert({
+        show: true,
+        title: 'Success',
+        message: result.message || 'Plugin installation initiated successfully! Restart Traefik to apply.',
+      });
       fetchPlugins(); // Refresh plugin list to show installed status
       return true;
     } catch (err) {
@@ -75,7 +82,12 @@ export const PluginProvider = ({ children }) => {
         throw new Error(errData.message);
       }
       const result = await response.json();
-      alert(result.message || 'Plugin removal initiated successfully! Restart Traefik to apply.');
+      //alert(result.message || 'Plugin removal initiated successfully! Restart Traefik to apply.'); // Alert is now in the Confirmation Dialog component
+      setAlert({
+        show: true,
+        title: 'Success',
+        message: result.message || 'Plugin removal initiated successfully! Restart Traefik to apply.',
+      });
       fetchPlugins(); // Refresh plugin list
       return true;
     } catch (err) {
@@ -124,7 +136,12 @@ export const PluginProvider = ({ children }) => {
       }
       const data = await response.json();
       setTraefikConfigPath(data.path || '');
-      alert(data.message || 'Traefik config path updated successfully!');
+      //alert(data.message || 'Traefik config path updated successfully!'); // Alert is now in the Confirmation Dialog component
+      setAlert({
+        show: true,
+        title: 'Success',
+        message: data.message || 'Traefik config path updated successfully!',
+      });
       return true;
     } catch (err) {
       console.error('Failed to update Traefik config path:', err);
@@ -158,6 +175,16 @@ export const PluginProvider = ({ children }) => {
   return (
     <PluginContext.Provider value={value}>
       {children}
+
+      {/* Alert modal rendered here */}
+      <ConfirmationModal
+        show={alert.show}
+        mode="alert"
+        title={alert.title}
+        message={alert.message}
+        onConfirm={() => setAlert(prev => ({ ...prev, show: false }))}
+      />
+
     </PluginContext.Provider>
   );
 };