FIX (whitelist): Show hint about Postgresus whitelist in case of connection failure

Author: RostislavDugin

frontend/src/features/databases/ui/edit/EditDatabaseSpecificDataComponent.tsx

@@ -48,10 +48,12 @@ export const EditDatabaseSpecificDataComponent = ({
 
   const [isConnectionTested, setIsConnectionTested] = useState(false);
   const [isTestingConnection, setIsTestingConnection] = useState(false);
+  const [isConnectionFailed, setIsConnectionFailed] = useState(false);
 
   const testConnection = async () => {
     if (!editingDatabase) return;
     setIsTestingConnection(true);
+    setIsConnectionFailed(false);
 
     try {
       await databaseApi.testDatabaseConnectionDirect(editingDatabase);
@@ -61,6 +63,7 @@ export const EditDatabaseSpecificDataComponent = ({
         description: 'You can continue with the next step',
       });
     } catch (e) {
+      setIsConnectionFailed(true);
       alert((e as Error).message);
     }
 
@@ -89,6 +92,7 @@ export const EditDatabaseSpecificDataComponent = ({
     setIsSaving(false);
     setIsConnectionTested(false);
     setIsTestingConnection(false);
+    setIsConnectionFailed(false);
 
     setEditingDatabase({ ...database });
   }, [database]);
@@ -327,6 +331,13 @@ export const EditDatabaseSpecificDataComponent = ({
           </Button>
         )}
       </div>
+
+      {isConnectionFailed && (
+        <div className="mt-3 text-sm text-gray-500 dark:text-gray-400">
+          If your database uses IP whitelist, make sure Postgresus server IP is added to the allowed
+          list.
+        </div>
+      )}
     </div>
   );
 };

frontend/src/features/notifiers/ui/edit/notifiers/EditWebhookNotifierComponent.tsx

@@ -217,7 +217,7 @@ export function EditWebhookNotifierComponent({ notifier, setNotifier, setUnsaved
           )}
 
           {notifier?.webhookNotifier?.webhookMethod === WebhookMethod.POST && (
-            <div className="rounded bg-gray-100 p-2 px-3 font-mono text-sm break-all whitespace-pre-line dark:bg-gray-800">
+            <div className="rounded bg-gray-100 p-2 px-3 font-mono text-sm break-words whitespace-pre-wrap dark:bg-gray-800">
               <div className="font-semibold text-blue-600 dark:text-blue-400">
                 POST {notifier?.webhookNotifier?.webhookUrl}
               </div>
@@ -230,7 +230,7 @@ export function EditWebhookNotifierComponent({ notifier, setNotifier, setUnsaved
                   .map((h) => `\n${h.key}: ${h.value}`)
                   .join('')}
               </div>
-              <div className="mt-2 whitespace-pre">
+              <div className="mt-2 break-words whitespace-pre-wrap">
                 {notifier?.webhookNotifier?.bodyTemplate
                   ? notifier.webhookNotifier.bodyTemplate
                       .replace(
@@ -242,8 +242,8 @@ export function EditWebhookNotifierComponent({ notifier, setNotifier, setUnsaved
                         'Backup completed successfully in 1m 23s.\\nCompressed backup size: 256.00 MB',
                       )
                   : `{
-  "heading": "✅ Backup completed for database \\"my-database\\" (workspace \\"My workspace\\")",
-  "message": "Backup completed successfully in 1m 23s.\\nCompressed backup size: 256.00 MB"
+  "heading": "✅ Backup completed for database "my-database" (workspace "My workspace")",
+  "message": "Backup completed successfully in 1m 23s. Compressed backup size: 256.00 MB"
 }`}
               </div>
             </div>