From cbff34b17b8c1589187823830312c2713361732b Mon Sep 17 00:00:00 2001
From: Ryan Liang <jiallian@amazon.com>
Date: Tue, 21 Nov 2023 13:37:47 -0800
Subject: [PATCH] Refactor const into util and change the window size

Signed-off-by: Ryan Liang <jiallian@amazon.com>
---
 public/apps/login/login-page.tsx    | 20 +++++---------------
 public/utils/terms-of-use-utils.tsx | 18 ++++++++++++++++--
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/public/apps/login/login-page.tsx b/public/apps/login/login-page.tsx
index d51bbbb04..e8e207cda 100644
--- a/public/apps/login/login-page.tsx
+++ b/public/apps/login/login-page.tsx
@@ -42,7 +42,7 @@ import {
   OPENID_AUTH_LOGIN_WITH_FRAGMENT,
   SAML_AUTH_LOGIN_WITH_FRAGMENT,
 } from '../../../common';
-import { termsOfUseText } from '../../utils/terms-of-use-utils';
+import { termsParagraphs } from '../../utils/terms-of-use-utils';
 
 interface LoginPageDeps {
   http: CoreStart['http'];
@@ -162,25 +162,15 @@ export function LoginPage(props: LoginPageDeps) {
   const renderTermsModal = () => {
     if (!isTermsModalVisible) return null;
 
-    const termsParagraphs = termsOfUseText
-      .trim()
-      .split('\n\n')
-      .map((paragraph, index, array) => (
-        <p
-          key={`terms-paragraph-${index}`}
-          style={{ lineHeight: '1.2', marginBottom: index === array.length - 1 ? '0' : '20px' }}
-        >
-          {paragraph.trim()}
-        </p>
-      ));
-
     return (
       <EuiOverlayMask>
-        <EuiModal onClose={closeTermsModal} maxWidth={650}>
+        <EuiModal onClose={closeTermsModal} maxWidth={600}>
           <EuiModalHeader>
             <EuiModalHeaderTitle>Terms of Use</EuiModalHeaderTitle>
           </EuiModalHeader>
-          <EuiModalBody>{termsParagraphs}</EuiModalBody>
+          <EuiModalBody style={{ maxHeight: '250px', overflowY: 'auto' }}>
+            {termsParagraphs}
+          </EuiModalBody>
           <EuiModalFooter>
             <EuiButton onClick={closeTermsModal}>Close</EuiButton>
           </EuiModalFooter>
diff --git a/public/utils/terms-of-use-utils.tsx b/public/utils/terms-of-use-utils.tsx
index 6e771d0af..612380d29 100644
--- a/public/utils/terms-of-use-utils.tsx
+++ b/public/utils/terms-of-use-utils.tsx
@@ -13,12 +13,14 @@
  *   permissions and limitations under the License.
  */
 
-export const termsOfUseText: string = `
+import React from 'react';
+
+const termsOfUseText: string = `
 These terms apply to your access and use of the OpenSearch Playground. The OpenSearch Playground provides an interactive OpenSearch Dashboards experience, 
 which may include capabilities and functionality that are not yet launched as part of the OpenSearch software. The OpenSearch Playground is made available 
 to you for evaluation and feedback purposes only. We recommend that no sensitive or personal data should be provided by the user. Use of the OpenSearch 
 Playground is subject to the Privacy Notice and, in addition, OpenSearch will own and may use and evaluate all content provided by the user in the 
-OpenSearch Playground for its own purposes. 
+OpenSearch Playground. 
 \n
 OpenSearch Playground may incorporate one or more machine learning models. Output generated by a machine learning model is probabilistic, and generative AI 
 may produce inaccurate or inappropriate content. The OpenSearch Playground relies on synthetic datasets and you should not rely on factual assertions output 
@@ -27,3 +29,15 @@ proceedings, access to critical benefits like housing or government benefits, op
 lending/credit, and providing legal, financial, or medical advice). Machine learning models provided in the OpenSearch Playground cannot dynamically retrieve 
 information, and outputs may not account for events or changes to underlying facts occurring after a machine learning model is trained. 
 `;
+
+export const termsParagraphs = termsOfUseText
+  .trim()
+  .split('\n\n')
+  .map((paragraph, index, array) => (
+    <p
+      key={`terms-paragraph-${index}`}
+      style={{ lineHeight: '1.3', marginBottom: index === array.length - 1 ? '0' : '20px' }}
+    >
+      {paragraph.trim()}
+    </p>
+  ));