[FIX] web: fix new line in confirmation and alert dialog

Steps:
- Install studio.
- Open studio.
- Click on reset default view.

Issue:
- Confirmation dialog body display in single line instead in
multiple lines same thing happens in pos confirmation dialog
also in new friendly message task we need to display error
message in multiple line.

Cause:
- There is a style missing on body of that dialog to preserve
white spaces also need to use other tag then <t> to apply
proper style

Fix:
- Use <p> tag instead <t> tag and add a `text-prewrap` class
in bootstrap utility class and use this class in `<p>` to
preserve space.

task-3356114

closes odoo/odoo#125300

X-original-commit: 700d41d2f007124390b7cafca0a2e58a467e2b43
Related: odoo/enterprise#42842
Signed-off-by: Pierre Paridans (app) <app@odoo.com>

addons/web/static/src/core/confirmation_dialog/confirmation_dialog.xml

@@ -3,7 +3,7 @@
 
   <t t-name="web.ConfirmationDialog" owl="1">
     <Dialog size="'md'" title="props.title" modalRef="modalRef">
-      <t t-out="props.body" />
+      <p t-out="props.body" class="text-prewrap"/>
       <t t-set-slot="footer" owl="1">
         <button class="btn btn-primary" t-on-click="_confirm" t-esc="props.confirmLabel"/>
         <button t-if="props.cancel" class="btn btn-secondary" t-on-click="_cancel" t-esc="props.cancelLabel"/>
@@ -13,7 +13,7 @@
 
   <t t-name="web.AlertDialog" owl="1">
     <Dialog size="'sm'" title="props.title" contentClass="props.contentClass">
-      <t t-out="props.body" />
+      <p t-out="props.body" class="text-prewrap"/>
       <t t-set-slot="footer" owl="1">
         <button class="btn btn-primary" t-on-click="_confirm" t-esc="props.confirmLabel"/>
         <button t-if="props.cancel" class="btn btn-secondary" t-on-click="_cancel" t-esc="props.cancelLabel"/>

addons/web/static/src/core/errors/error_dialogs.xml

@@ -4,7 +4,7 @@
     <t t-name="web.WarningDialog" owl="1">
       <Dialog title="title" size="'md'" contentClass="'o_error_dialog'">
         <div role="alert">
-          <p t-esc="message" style="white-space: pre-wrap;"/>
+          <p t-esc="message" class="text-prewrap"/>
         </div>
         <t t-set-slot="footer">
           <button class="btn btn-primary o-default-button" t-on-click="props.close">Close</button>
@@ -15,7 +15,7 @@
     <t t-name="web.RedirectWarningDialog" owl="1">
       <Dialog title="title" size="'md'" contentClass="'o_error_dialog'">
         <div role="alert">
-          <p t-esc="message" style="white-space: pre-wrap;"/>
+          <p t-esc="message" class="text-prewrap"/>
         </div>
         <t t-set-slot="footer">
           <button class="btn btn-primary" t-on-click="onClick" t-esc="buttonText"/>
@@ -27,7 +27,7 @@
     <t t-name="web.Error504Dialog" owl="1">
       <Dialog title="this.constructor.title" size="'md'" contentClass="'o_error_dialog'">
         <div role="alert">
-            <p style="white-space: pre-wrap;">
+            <p class="text-prewrap">
             The operation was interrupted. This usually means that the current operation is taking too much time.
             </p>
         </div>
@@ -40,7 +40,7 @@
     <t t-name="web.SessionExpiredDialog" owl="1">
       <Dialog title="this.constructor.title" size="'md'" contentClass="'o_error_dialog'">
         <div role="alert">
-          <p style="white-space: pre-wrap;">
+          <p class="text-prewrap">
             Your Odoo session expired. The current page is about to be refreshed.
           </p>
         </div>
@@ -53,7 +53,7 @@
     <t t-name="web.ErrorDialog" owl="1">
       <Dialog title="this.constructor.title" size="'md'" contentClass="'o_error_dialog'">
          <div role="alert">
-          <p style="white-space: pre-wrap;">
+          <p class="text-prewrap">
             <p><b>An error occurred</b></p>
             <p>Please use the copy button to report the error to your support service.</p>
           </p>
@@ -79,7 +79,7 @@
     <t t-name="web.ScssErrorDialog" owl="1">
       <Dialog title="this.constructor.title" size="'md'" contentClass="'o_error_dialog'">
         <div role="alert">
-          <p>
+          <p class="text-prewrap">
             The style compilation failed, see the error below. This is an administrator or developer error that must be fixed for the entire database before continuing working.
           </p>
           <pre t-esc="props.message"/>

addons/web/static/src/scss/utilities_custom.scss

@@ -52,6 +52,15 @@ $utilities: map-merge(
                 values: join(map-get(map-get($utilities, "display"), "values"), contents),
             ),
         ),
+        "white-space": map-merge(
+            map-get($utilities, "white-space"),
+            (
+                values: map-merge(
+                    map-get(map-get($utilities, "white-space"), "values"),
+                    ("prewrap": pre-wrap),
+                ),
+            ),
+        ),
         "position": map-merge(
             map-get($utilities, "position"),
             (

addons/web/static/src/views/form/form_error_dialog/form_error_dialog.xml

@@ -5,7 +5,7 @@
         <Dialog header="false" size="'md'" contentClass="'o_error_dialog'">
             <div role="alert">
                 <h1 class="text-danger">Oh snap!</h1>
-                <p t-esc="message" style="white-space: pre-wrap;"/>
+                <p t-esc="message" class="text-prewrap"/>
             </div>
             <t t-set-slot="footer">
                 <button class="btn btn-primary" t-on-click="stay">Stay here</button>