From fcfc52a80cb5bce6ad6954d53ef6f1d2a42c4557 Mon Sep 17 00:00:00 2001
From: Srinath Narayanan <srnara@microsoft.com>
Date: Fri, 6 May 2022 00:01:06 +0530
Subject: [PATCH] Added support for multi line descriptions in self serve
 framework (#1266)

* Added support for multi line descriptions

* test snapshot change

* addresse pr comments
---
 src/Explorer/Controls/SmartUi/SmartUiComponent.tsx     |  2 +-
 .../__snapshots__/SmartUiComponent.test.tsx.snap       | 10 ++++++++++
 src/Localization/en/SelfServeExample.json              |  2 +-
 src/SelfServe/Example/SelfServeExample.tsx             |  9 +++++++++
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx b/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx
index be6b6fdb1..fdd8ac3b1 100644
--- a/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx
+++ b/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx
@@ -181,7 +181,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     const descriptionElement = (
       <Stack>
         {labelElement}
-        <Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId}>
+        <Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId} style={{ whiteSpace: "pre-line" }}>
           {this.props.getTranslation(description.textTKey)}{" "}
           {description.link && (
             <Link target="_blank" href={description.link.href}>
diff --git a/src/Explorer/Controls/SmartUi/__snapshots__/SmartUiComponent.test.tsx.snap b/src/Explorer/Controls/SmartUi/__snapshots__/SmartUiComponent.test.tsx.snap
index 5dec11a42..95895aad0 100644
--- a/src/Explorer/Controls/SmartUi/__snapshots__/SmartUiComponent.test.tsx.snap
+++ b/src/Explorer/Controls/SmartUi/__snapshots__/SmartUiComponent.test.tsx.snap
@@ -27,6 +27,11 @@ exports[`SmartUiComponent disable all inputs 1`] = `
             <Text
               aria-labelledby="description-label"
               id="description-text-display"
+              style={
+                Object {
+                  "whiteSpace": "pre-line",
+                }
+              }
             >
               this is an example description text.
                
@@ -341,6 +346,11 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
             <Text
               aria-labelledby="description-label"
               id="description-text-display"
+              style={
+                Object {
+                  "whiteSpace": "pre-line",
+                }
+              }
             >
               this is an example description text.
                
diff --git a/src/Localization/en/SelfServeExample.json b/src/Localization/en/SelfServeExample.json
index 2d28615c7..384c50de8 100644
--- a/src/Localization/en/SelfServeExample.json
+++ b/src/Localization/en/SelfServeExample.json
@@ -7,7 +7,7 @@
     "RegionsAndAccountNameValidationError": "Regions and account name should not be empty.",
     "DbThroughputValidationError": "Please update throughput for database.",
     "DescriptionLabel": "Description",
-    "DescriptionText": "This class sets collection and database throughput.",
+    "DescriptionText": "This class sets collection and database throughput.\nTo know more -",
     "DecriptionLinkText": "Click here for more information",
     "Regions": "Regions",
     "RegionsPlaceholder": "Select a region",
diff --git a/src/SelfServe/Example/SelfServeExample.tsx b/src/SelfServe/Example/SelfServeExample.tsx
index 004ff993d..4a1841d28 100644
--- a/src/SelfServe/Example/SelfServeExample.tsx
+++ b/src/SelfServe/Example/SelfServeExample.tsx
@@ -179,6 +179,15 @@ export default class SelfServeExample extends SelfServeBaseClass {
   })
   description: string;
 
+  @Values({
+    description: {
+      textTKey: `This UI can be used to dynamically change the throughput.
+This is an alternative to updating the throughput from the 'scale & settings' tab.`,
+      type: DescriptionType.Text,
+    },
+  })
+  multiLineDescription: string;
+
   @Values({
     labelTKey: "Current Region",
     isDynamicDescription: true,