From 47fa0280e39041a4fc45e19bb6f47494ef564ba4 Mon Sep 17 00:00:00 2001
From: Kshitij Tandon <tandonks@amazon.com>
Date: Thu, 29 Aug 2024 12:12:05 +0530
Subject: [PATCH] Fixed a few bugs and worked on comments

Signed-off-by: Kshitij Tandon <tandonks@amazon.com>
---
 .../DeleteAliasModal/DeleteAliasModal.tsx     | 26 ++++++---
 .../CreateIndexTemplate.test.tsx.snap         | 18 +++---
 .../TemplateDetail/TemplateDetail.tsx         | 56 ++++++++++++-------
 .../TemplateDetail.test.tsx.snap              | 16 ++----
 .../ManagedIndexEmptyPrompt.tsx               |  2 +-
 .../AssociatedComponentsModal.tsx             |  7 ++-
 .../containers/Templates/Templates.tsx        |  2 +-
 7 files changed, 73 insertions(+), 54 deletions(-)

diff --git a/public/pages/Aliases/containers/DeleteAliasModal/DeleteAliasModal.tsx b/public/pages/Aliases/containers/DeleteAliasModal/DeleteAliasModal.tsx
index bb1b11c91..b16af5878 100644
--- a/public/pages/Aliases/containers/DeleteAliasModal/DeleteAliasModal.tsx
+++ b/public/pages/Aliases/containers/DeleteAliasModal/DeleteAliasModal.tsx
@@ -69,27 +69,35 @@ export default function DeleteAliasModal(props: DeleteAliasModalProps) {
   return (
     <EuiModal onClose={onClose}>
       <EuiModalHeader>
-        <EuiModalHeaderTitle>Delete aliases</EuiModalHeaderTitle>
+        <EuiModalHeaderTitle>
+          <EuiText size="s">
+            <h2>Delete aliases</h2>
+          </EuiText>
+        </EuiModalHeaderTitle>
       </EuiModalHeader>
 
       <EuiModalBody>
         {hasSystemIndex ? (
           <>
-            <EuiCallOut color="warning">
+            <EuiCallOut color="warning" size="s">
               These aliases may contain critical system data. Deleting system aliases may break OpenSearch.
             </EuiCallOut>
             <EuiSpacer />
           </>
         ) : null}
         <div style={{ lineHeight: 1.5 }}>
-          <p>The following alias will be permanently deleted. This action cannot be undone.</p>
-          <ul style={{ listStyleType: "disc", listStylePosition: "inside" }}>
-            {selectedItems.map((item) => (
-              <li key={item.alias}>{item.alias}</li>
-            ))}
-          </ul>
+          <EuiText size="s">
+            <p>The following alias will be permanently deleted. This action cannot be undone.</p>
+          </EuiText>
+          <EuiText size="s">
+            <ul style={{ listStyleType: "disc", listStylePosition: "inside" }}>
+              {selectedItems.map((item) => (
+                <li key={item.alias}>{item.alias}</li>
+              ))}
+            </ul>
+          </EuiText>
           <EuiSpacer />
-          <EuiText color="subdued">
+          <EuiText color="subdued" size="s">
             To confirm your action, type <b style={{ color: "#000" }}>delete</b>.
           </EuiText>
           <EuiCompressedFieldText
diff --git a/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/__snapshots__/CreateIndexTemplate.test.tsx.snap b/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/__snapshots__/CreateIndexTemplate.test.tsx.snap
index 8289a8e96..cc7bea91e 100644
--- a/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/__snapshots__/CreateIndexTemplate.test.tsx.snap
+++ b/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/__snapshots__/CreateIndexTemplate.test.tsx.snap
@@ -153,7 +153,7 @@ exports[`<CreateIndexTemplate /> spec render template pages 1`] = `
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiTabs"
+      class="euiTabs euiTabs--small"
       role="tablist"
     >
       <button
@@ -197,17 +197,13 @@ exports[`<CreateIndexTemplate /> spec render template pages 1`] = `
         <div
           class="euiFlexItem"
         >
-          <h1
-            class="euiTitle euiTitle--small"
+          <div
+            class="euiText euiText--small"
           >
-            Preview template
-            <span
-              class="panel-header-count"
-            >
-               
-               
-            </span>
-          </h1>
+            <h2>
+              Preview template
+            </h2>
+          </div>
         </div>
       </div>
       <hr
diff --git a/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx b/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx
index fae9173bb..2af6e260c 100644
--- a/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx
+++ b/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx
@@ -46,6 +46,7 @@ import UnsavedChangesBottomBar from "../../../../components/UnsavedChangesBottom
 import { IndexForm } from "../../../../containers/IndexForm";
 import { TABS_ENUM, tabs } from "../../constant";
 import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+import { TopNavControlDescriptionData, TopNavControlLinkData } from "src/plugins/navigation/public";
 
 export interface TemplateDetailProps {
   templateName?: string;
@@ -200,15 +201,17 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
 
   const descriptionData = [
     {
-      renderComponent: (
-        <EuiText size="s" color="subdued">
-          Define an automated snapshot schedule and retention period with a snapshot policy.{" "}
-          <EuiLink external target="_blank" href={coreServices.docLinks.links.opensearch.indexTemplates.base}>
-            Learn more
-          </EuiLink>
-        </EuiText>
-      ),
-    },
+      description: "Define an automated snapshot schedule and retention period with a snapshot policy.",
+      links: {
+        label: "Learn more",
+        href: coreServices.docLinks.links.opensearch.indexTemplates.base,
+        iconType: "popout",
+        iconSide: "right",
+        controlType: "link",
+        target: "_blank",
+        flush: "both",
+      } as TopNavControlLinkData,
+    } as TopNavControlDescriptionData,
   ];
 
   const HeaderRight = [
@@ -234,7 +237,6 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
       renderComponent: (
         <EuiSmallButton
           fill
-          style={{ marginRight: 20 }}
           onClick={() => {
             const showValue: TemplateItemRemote = {
               ...values,
@@ -248,9 +250,13 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
                 width: 800,
               },
               "data-test-subj": "templateJSONDetailModal",
-              title: values.name,
+              title: (
+                <EuiText size="s">
+                  <h2>{values.name}</h2>
+                </EuiText>
+              ),
               content: (
-                <EuiCodeBlock language="json" isCopyable>
+                <EuiCodeBlock language="json" isCopyable fontSize="s">
                   {JSON.stringify(showValue, null, 2)}
                 </EuiCodeBlock>
               ),
@@ -306,7 +312,11 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
                         width: 800,
                       },
                       "data-test-subj": "templateJSONDetailModal",
-                      title: values.name,
+                      title: (
+                        <EuiText size="s">
+                          <h2>{values.name}</h2>
+                        </EuiText>
+                      ),
                       content: (
                         <EuiCodeBlock language="json" isCopyable>
                           {JSON.stringify(showValue, null, 2)}
@@ -359,7 +369,7 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
       ) : null}
       {isEdit ? (
         <>
-          <EuiTabs>
+          <EuiTabs size="s">
             {tabs.map((item) => (
               <EuiTab
                 onClick={() => {
@@ -390,11 +400,19 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
       ) : null}
       <ContentPanel
         title={
-          isEdit && selectedTabId === TABS_ENUM.SUMMARY
-            ? "Preview template"
-            : values._meta?.flow === FLOW_ENUM.COMPONENTS
-            ? "Override template definition"
-            : "Template definition"
+          isEdit && selectedTabId === TABS_ENUM.SUMMARY ? (
+            <EuiText size="s">
+              <h2>Preview template</h2>
+            </EuiText>
+          ) : values._meta?.flow === FLOW_ENUM.COMPONENTS ? (
+            <EuiText size="s">
+              <h2>Override template definition</h2>
+            </EuiText>
+          ) : (
+            <EuiText size="s">
+              <h2>Template definition</h2>
+            </EuiText>
+          )
         }
         subTitleText={
           (!isEdit || selectedTabId !== TABS_ENUM.SUMMARY) && values._meta?.flow === FLOW_ENUM.COMPONENTS
diff --git a/public/pages/CreateIndexTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap b/public/pages/CreateIndexTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap
index b67fed4f6..9c1eb6a79 100644
--- a/public/pages/CreateIndexTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap
+++ b/public/pages/CreateIndexTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap
@@ -497,17 +497,13 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
       <div
         class="euiFlexItem"
       >
-        <h1
-          class="euiTitle euiTitle--small"
+        <div
+          class="euiText euiText--small"
         >
-          Template definition
-          <span
-            class="panel-header-count"
-          >
-             
-             
-          </span>
-        </h1>
+          <h2>
+            Template definition
+          </h2>
+        </div>
       </div>
     </div>
     <hr
diff --git a/public/pages/ManagedIndices/components/ManagedIndexEmptyPrompt/ManagedIndexEmptyPrompt.tsx b/public/pages/ManagedIndices/components/ManagedIndexEmptyPrompt/ManagedIndexEmptyPrompt.tsx
index b3c07cf30..148c4aca7 100644
--- a/public/pages/ManagedIndices/components/ManagedIndexEmptyPrompt/ManagedIndexEmptyPrompt.tsx
+++ b/public/pages/ManagedIndices/components/ManagedIndexEmptyPrompt/ManagedIndexEmptyPrompt.tsx
@@ -59,7 +59,7 @@ const ManagedIndexEmptyPrompt: React.SFC<ManagedIndexEmptyPromptProps> = (props)
   <EuiEmptyPrompt
     style={{ maxWidth: "45em" }}
     body={
-      <EuiText>
+      <EuiText size="s">
         <p>{getMessagePrompt(props)}</p>
       </EuiText>
     }
diff --git a/public/pages/Templates/containers/AssociatedComponentsModal/AssociatedComponentsModal.tsx b/public/pages/Templates/containers/AssociatedComponentsModal/AssociatedComponentsModal.tsx
index db7ea2f26..93ca869c0 100644
--- a/public/pages/Templates/containers/AssociatedComponentsModal/AssociatedComponentsModal.tsx
+++ b/public/pages/Templates/containers/AssociatedComponentsModal/AssociatedComponentsModal.tsx
@@ -16,6 +16,7 @@ import {
   EuiLink,
   EuiTitle,
   EuiToolTip,
+  EuiText,
 } from "@elastic/eui";
 import { ROUTES } from "../../../../utils/constants";
 import { ReactChild } from "react";
@@ -43,9 +44,9 @@ export default function AssociatedComponentsModal(props: AssociatedComponentsMod
       {visible ? (
         <EuiFlyout onClose={() => setVisible(false)}>
           <EuiFlyoutHeader>
-            <EuiTitle>
+            <EuiText size="s">
               <h2>Associated component templates</h2>
-            </EuiTitle>
+            </EuiText>
           </EuiFlyoutHeader>
           <EuiFlyoutBody>
             <EuiInMemoryTable
@@ -55,7 +56,7 @@ export default function AssociatedComponentsModal(props: AssociatedComponentsMod
               }))}
               columns={[
                 {
-                  name: "component template",
+                  name: "Component template",
                   field: "name",
                   sortable: true,
                   render: (value: string, record) => (
diff --git a/public/pages/Templates/containers/Templates/Templates.tsx b/public/pages/Templates/containers/Templates/Templates.tsx
index 0d2cc7fa4..aa47248e0 100644
--- a/public/pages/Templates/containers/Templates/Templates.tsx
+++ b/public/pages/Templates/containers/Templates/Templates.tsx
@@ -333,7 +333,7 @@ class Templates extends MDSEnabledComponent<TemplatesProps, TemplatesState> {
             ) ? (
               <EuiEmptyPrompt
                 body={
-                  <EuiText>
+                  <EuiText size="s">
                     <p>You have no templates.</p>
                   </EuiText>
                 }