From 51a290e9e58c7eeff188f96c74a3a5e43f6d7650 Mon Sep 17 00:00:00 2001
From: Kshitij Tandon <tandonks@amazon.com>
Date: Thu, 29 Aug 2024 15:14:55 +0530
Subject: [PATCH] Worked on review

Signed-off-by: Kshitij Tandon <tandonks@amazon.com>
---
 .../containers/IndexDetail/IndexDetail.tsx    | 12 ++++---
 .../NotificationModal/NotificationModal.tsx   | 31 ++++++++++++++++---
 .../Indices/containers/Indices/Indices.tsx    |  9 +++---
 .../TransformEmptyPrompt.tsx                  |  4 +--
 .../Transforms/TransformSettings.tsx          |  3 +-
 .../containers/Transforms/Transforms.tsx      |  2 +-
 .../__snapshots__/Transforms.test.tsx.snap    |  2 +-
 7 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx b/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx
index d2b582d1b..bfaeee2bf 100644
--- a/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx
+++ b/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx
@@ -212,7 +212,6 @@ export default function IndexDetail(props: IndexDetailModalProps) {
                 <h2>Index alias</h2>
               </EuiText>
               <EuiHorizontalRule margin="xs" />
-              <EuiSpacer size="s" />
               <IndexFormWrapper {...indexFormReadonlyCommonProps} key={IndicesUpdateMode.alias} mode={IndicesUpdateMode.alias} />
             </EuiPanel>
           </>
@@ -270,7 +269,7 @@ export default function IndexDetail(props: IndexDetailModalProps) {
           </EuiText>
           <EuiHorizontalRule margin="xs" />
           <EuiDescriptionList compressed>
-            <EuiSpacer />
+            <EuiSpacer size="s" />
             <div>
               {OVERVIEW_DISPLAY_INFO.map((item) => {
                 let valueContent = null;
@@ -282,11 +281,16 @@ export default function IndexDetail(props: IndexDetailModalProps) {
                 }
                 return (
                   <div
-                    style={{ display: "inline-block", width: "33%", verticalAlign: "top", marginBottom: "20px", padding: "0 1%" }}
+                    style={{ display: "inline-block", width: "33%", verticalAlign: "top", marginBottom: "20px" }}
                     key={item.label}
                     data-test-subj={`indexDetailOverviewItem-${item.label}`}
                   >
-                    <EuiDescriptionListTitle>{item.label}</EuiDescriptionListTitle>
+                    <EuiDescriptionListTitle>
+                      <EuiText size="s">
+                        {" "}
+                        <h4>{item.label}</h4>{" "}
+                      </EuiText>
+                    </EuiDescriptionListTitle>
                     <EuiDescriptionListDescription style={{ wordBreak: item.label === "Index name" ? "break-word" : undefined }}>
                       {valueContent}
                     </EuiDescriptionListDescription>
diff --git a/public/pages/Indices/components/NotificationModal/NotificationModal.tsx b/public/pages/Indices/components/NotificationModal/NotificationModal.tsx
index 7bab02f0a..48512ec72 100644
--- a/public/pages/Indices/components/NotificationModal/NotificationModal.tsx
+++ b/public/pages/Indices/components/NotificationModal/NotificationModal.tsx
@@ -13,6 +13,7 @@ import {
   EuiPanel,
   EuiEmptyPrompt,
   EuiSmallButton,
+  EuiText,
 } from "@elastic/eui";
 import { ServicesContext } from "../../../../services";
 import { BrowserServices } from "../../../../models/interfaces";
@@ -182,7 +183,12 @@ const Notifications = ({ onClose, visible }: NotificationsProps) => {
   return (
     <EuiModal onClose={onClose} maxWidth={false}>
       <EuiModalHeader>
-        <EuiModalHeaderTitle>Notification settings</EuiModalHeaderTitle>
+        <EuiModalHeaderTitle>
+          <EuiText size="s">
+            {" "}
+            <h2>Notification settings</h2>{" "}
+          </EuiText>
+        </EuiModalHeaderTitle>
         <EuiFlexItem grow={false}>
           <EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
             Manage channels
@@ -196,8 +202,18 @@ const Notifications = ({ onClose, visible }: NotificationsProps) => {
               <EuiEmptyPrompt
                 iconType="alert"
                 iconColor="danger"
-                title={<h2>Error loading Notification settings</h2>}
-                body={<p>You do not have permissions to view Notification settings. Contact your administrator to request permissions.</p>}
+                title={
+                  <EuiText size="s">
+                    {" "}
+                    <h2>Error loading Notification settings</h2>{" "}
+                  </EuiText>
+                }
+                body={
+                  <EuiText size="s">
+                    {" "}
+                    <p>You do not have permissions to view Notification settings. Contact your administrator to request permissions.</p>
+                  </EuiText>
+                }
               />
             </EuiPanel>
           ) : (
@@ -253,7 +269,14 @@ const Notifications = ({ onClose, visible }: NotificationsProps) => {
                 });
                 return (
                   <CustomFormRow
-                    label={<div className="ISM-notifications-first-letter-uppercase">{record.title}</div>}
+                    label={
+                      <div className="ISM-notifications-first-letter-uppercase">
+                        <EuiText size="s">
+                          {" "}
+                          <h3>{record.title}</h3>{" "}
+                        </EuiText>
+                      </div>
+                    }
                     helpText={ActionTypeMapDescription[getKeyByValue(ActionTypeMapTitle, record.title) as ActionType]}
                     direction="hoz"
                     key={record.action_name}
diff --git a/public/pages/Indices/containers/Indices/Indices.tsx b/public/pages/Indices/containers/Indices/Indices.tsx
index 436886880..87084e037 100644
--- a/public/pages/Indices/containers/Indices/Indices.tsx
+++ b/public/pages/Indices/containers/Indices/Indices.tsx
@@ -20,7 +20,7 @@ import {
   ArgsWithError,
   ArgsWithQuery,
   Query,
-  EuiTitle,
+  EuiPanel,
 } from "@elastic/eui";
 import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
 import IndexControls from "../../components/IndexControls";
@@ -41,8 +41,7 @@ import "./index.scss";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
 import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
 import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
-import { TopNavControlButtonData, TopNavControlIconData, TopNavControlTextData } from "src/plugins/navigation/public";
-import { EuiSpacer } from "@opensearch-project/oui";
+import { TopNavControlButtonData } from "src/plugins/navigation/public";
 import NotificationModal from "../../components/NotificationModal";
 
 interface IndicesProps extends RouteComponentProps, DataSourceMenuProperties {
@@ -316,7 +315,7 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
           ]}
         />
         <div id="test" style={{ padding: "0px" }}>
-          <ContentPanel>
+          <EuiPanel>
             <IndexControls
               search={search}
               onSearchChange={this.onSearchChange}
@@ -344,7 +343,7 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
               selection={selection}
               sorting={sorting}
             />
-          </ContentPanel>
+          </EuiPanel>
         </div>
         {this.state.isNotificationModalVisible && (
           <NotificationModal onClose={this.onCloseNotification} visible={this.state.isNotificationModalVisible} />
diff --git a/public/pages/Transforms/components/TransformEmptyPrompt/TransformEmptyPrompt.tsx b/public/pages/Transforms/components/TransformEmptyPrompt/TransformEmptyPrompt.tsx
index 98b5cbbf1..4f751535b 100644
--- a/public/pages/Transforms/components/TransformEmptyPrompt/TransformEmptyPrompt.tsx
+++ b/public/pages/Transforms/components/TransformEmptyPrompt/TransformEmptyPrompt.tsx
@@ -43,7 +43,7 @@ const getActions: React.SFC<TransformEmptyPromptProps> = ({ filterIsApplied, loa
   }
 
   return (
-    <EuiSmallButton href={`${PLUGIN_NAME}#${ROUTES.CREATE_TRANSFORM}`} data-test-subj="emptyPromptCreateTransformButton">
+    <EuiSmallButton href={`${PLUGIN_NAME}#${ROUTES.CREATE_TRANSFORM}`} data-test-subj="emptyPromptCreateTransformButton" iconType="plus">
       Create transform
     </EuiSmallButton>
   );
@@ -53,7 +53,7 @@ const TransformEmptyPrompt: React.SFC<TransformEmptyPromptProps> = (props) => (
   <EuiEmptyPrompt
     style={{ maxWidth: "45em" }}
     body={
-      <EuiText>
+      <EuiText size="s">
         <p>{getMessagePrompt(props)}</p>
       </EuiText>
     }
diff --git a/public/pages/Transforms/containers/Transforms/TransformSettings.tsx b/public/pages/Transforms/containers/Transforms/TransformSettings.tsx
index effe9a844..46f134076 100644
--- a/public/pages/Transforms/containers/Transforms/TransformSettings.tsx
+++ b/public/pages/Transforms/containers/Transforms/TransformSettings.tsx
@@ -101,7 +101,7 @@ export default class TransformSettings extends Component<TransformSettingsProps,
           </EuiFlexGrid>
           <EuiSpacer size="m" />
         </div>
-        <div style={{ padding: "10px" }}>
+        <div>
           <EuiAccordion
             id={htmlIdGenerator()()}
             buttonContent={
@@ -119,7 +119,6 @@ export default class TransformSettings extends Component<TransformSettingsProps,
               <EuiText>
                 <h5>Preview result based on sample data</h5>
               </EuiText>
-              <EuiSpacer size={"s"} />
               <PreviewTransforms
                 onRemoveTransformation={() => {}}
                 previewTransform={this.state.previewTransform}
diff --git a/public/pages/Transforms/containers/Transforms/Transforms.tsx b/public/pages/Transforms/containers/Transforms/Transforms.tsx
index 62fd63a83..c417447b2 100644
--- a/public/pages/Transforms/containers/Transforms/Transforms.tsx
+++ b/public/pages/Transforms/containers/Transforms/Transforms.tsx
@@ -271,7 +271,7 @@ export class Transforms extends MDSEnabledComponent<TransformProps, TransformSta
             } as TopNavControlButtonData,
           ]}
         />
-        <EuiPanel style={{ paddingLeft: "10px", paddingRight: "10px", paddingTop: "10px" }}>
+        <EuiPanel>
           <div>
             <EuiFlexGroup gutterSize="s">
               <EuiFlexItem>
diff --git a/public/pages/Transforms/containers/Transforms/__snapshots__/Transforms.test.tsx.snap b/public/pages/Transforms/containers/Transforms/__snapshots__/Transforms.test.tsx.snap
index c33fb832c..12c975a56 100644
--- a/public/pages/Transforms/containers/Transforms/__snapshots__/Transforms.test.tsx.snap
+++ b/public/pages/Transforms/containers/Transforms/__snapshots__/Transforms.test.tsx.snap
@@ -474,7 +474,7 @@ exports[`<Transforms /> spec renders the component 1`] = `
                             class="euiText euiText--medium"
                           >
                             <div
-                              class="euiText euiText--medium"
+                              class="euiText euiText--small"
                             >
                               <p>
                                 Loading transform jobs...