[ENG-4030] fix(InstallIntegration): polish API error/remedy display and callout spacing

src/components/Configure/content/ConfigureInstallationBase.tsx

@@ -192,7 +192,7 @@ export function ConfigureInstallationBase({
         }}
       >
         {errorMsg && (
-          <FormErrorBox>
+          <FormErrorBox style={{ marginBottom: "1rem" }}>
             {typeof errorMsg === "string" ? errorMsg : "Installation Failed."}
           </FormErrorBox>
         )}

src/components/Configure/content/fields/ReadFields.tsx

@@ -11,7 +11,13 @@ export function ReadFields() {
   useClearOldFieldMappings();
 
   return (
-    <>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem",
+      }}
+    >
       <ReEnableReadObject />
       <ReadObjectMapping />
       <RequiredFields />
@@ -20,6 +26,6 @@ export function ReadFields() {
       <ValueMappings />
       <OptionalFields />
       <DisableReadObject />
-    </>
+    </div>
   );
 }

src/components/FormErrorBox.tsx

@@ -7,11 +7,73 @@ const defaultStyle = {
   padding: ".5rem 1rem",
 };
 
+/** Separates detail and remedy in serialized error strings from handleServerError. */
+const REMEDY_DELIMITER = "\x1e";
+
+function parseErrorMessage(message: string): { detail: string; remedy?: string } {
+  const delimiterIndex = message.indexOf(REMEDY_DELIMITER);
+  if (delimiterIndex === -1) {
+    return { detail: message };
+  }
+
+  return {
+    detail: message.slice(0, delimiterIndex),
+    remedy: message.slice(delimiterIndex + REMEDY_DELIMITER.length),
+  };
+}
+
+function ErrorMessageContent({ message }: { message: string }) {
+  const { detail, remedy } = parseErrorMessage(message);
+
+  return (
+    <>
+      <p style={{ margin: 0, lineHeight: 1.5, whiteSpace: "pre-line" }}>
+        {detail}
+      </p>
+      {remedy && (
+        <div
+          style={{
+            marginTop: "0.75rem",
+            paddingTop: "0.75rem",
+            borderTop:
+              "1px solid var(--amp-colors-status-critical-dark, rgba(0, 0, 0, 0.15))",
+          }}
+        >
+          <span
+            style={{
+              display: "block",
+              fontSize: "0.75rem",
+              fontWeight: 600,
+              textTransform: "uppercase",
+              letterSpacing: "0.025em",
+              marginBottom: "0.25rem",
+              opacity: 0.85,
+            }}
+          >
+            How to fix
+          </span>
+          <p style={{ margin: 0, lineHeight: 1.5, whiteSpace: "pre-line" }}>
+            {remedy}
+          </p>
+        </div>
+      )}
+    </>
+  );
+}
+
 type FormErrorBoxProps = {
   children: React.ReactNode;
   style?: React.CSSProperties;
 };
 
 export function FormErrorBox({ children, style }: FormErrorBoxProps) {
-  return <Box style={{ ...defaultStyle, ...style }}>{children}</Box>;
+  return (
+    <Box style={{ ...defaultStyle, ...style }}>
+      {typeof children === "string" ? (
+        <ErrorMessageContent message={children} />
+      ) : (
+        children
+      )}
+    </Box>
+  );
 }

src/utils/handleServerError.ts

@@ -1,5 +1,8 @@
 import { ResponseError } from "@generated/api/src";
 
+/** Separates detail and remedy in error strings passed to setError. */
+const REMEDY_DELIMITER = "\x1e";
+
 /**
  * handles server error generated by sdk (Response Error) and calls setError callback if provided
  * @param error could be unknown error or ResponseError
@@ -37,7 +40,9 @@ export const handleServerError = async (
         }
       }
 
-      const combinedErrorMessage = `${errorMsg} ${errorBody?.remedy ? `\n\n[Remedy] ${errorBody.remedy}` : ""}`;
+      const combinedErrorMessage = errorBody?.remedy
+        ? `${errorMsg?.trimEnd() ?? ""}${REMEDY_DELIMITER}${errorBody.remedy}`
+        : (errorMsg ?? "");
       if (setError) setError(combinedErrorMessage);
     } catch (e) {
       console.error("Error parsing error response body:", e); // the response body could already be parsed