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

@@ -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}>

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.
                

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",

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,