Replaced EuiText with EuiTitle for section headers in content areas (#…

…1182) (#1184) (cherry picked from commit 827799c) Signed-off-by: Kshitij Tandon <tandonks@amazon.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Sep 20, 2024 · cabb037 · cabb037
1 parent c1095f4
commit cabb037
Show file tree

Hide file tree

Showing 92 changed files with 479 additions and 578 deletions.
diff --git a/public/components/ChannelNotification/ChannelNotification.tsx b/public/components/ChannelNotification/ChannelNotification.tsx
@@ -57,7 +57,7 @@ const ChannelNotification = ({
             />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
+            <EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank" iconSide="right">
               Manage channels
             </EuiSmallButton>
           </EuiFlexItem>

diff --git a/public/components/ChannelNotification/__snapshots__/ChannelNotification.test.tsx.snap b/public/components/ChannelNotification/__snapshots__/ChannelNotification.test.tsx.snap
@@ -91,7 +91,7 @@ exports[`<ChannelNotification /> spec renders the component 1`] = `
           target="_blank"
         >
           <span
-            class="euiButtonContent euiButton__content"
+            class="euiButtonContent euiButtonContent--iconRight euiButton__content"
           >
             EuiIconMock
             <span

diff --git a/public/components/IndexDetail/IndexDetail.tsx b/public/components/IndexDetail/IndexDetail.tsx
@@ -457,10 +457,9 @@ const IndexDetail = (
             return (
               <>
                 <EuiPanel>
-                  <EuiText size="s">
-                    {" "}
-                    <h2>{title}</h2>{" "}
-                  </EuiText>
+                  <EuiTitle size="s">
+                    <h2>{title}</h2>
+                  </EuiTitle>
                   <EuiHorizontalRule margin="xs" />
                   {content}
                 </EuiPanel>
@@ -581,10 +580,9 @@ const IndexDetail = (
             return (
               <>
                 <EuiPanel>
-                  <EuiText size="s">
-                    {" "}
-                    <h2>Index settings</h2>{" "}
-                  </EuiText>
+                  <EuiTitle size="s">
+                    <h2>Index settings</h2>
+                  </EuiTitle>
                   <EuiHorizontalRule margin="xs" />
                   {content}
                 </EuiPanel>
@@ -628,12 +626,12 @@ const IndexDetail = (
 
             return (
               <EuiPanel>
-                <EuiText size="s">
+                <EuiTitle size="s">
                   <h2>
                     Index mapping
                     <OptionalLabel />
                   </h2>
-                </EuiText>
+                </EuiTitle>
                 <EuiCompressedFormRow
                   fullWidth
                   helpText={

diff --git a/public/components/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap b/public/components/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap
@@ -4,15 +4,11 @@ exports[`<IndexDetail /> spec renders the component 1`] = `
 <div
   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
 >
-  <div
-    class="euiText euiText--small"
+  <h2
+    class="euiTitle euiTitle--small"
   >
-     
-    <h2>
-      Define index
-    </h2>
-     
-  </div>
+    Define index
+  </h2>
   <hr
     class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
   />

diff --git a/public/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap b/public/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap
@@ -167,7 +167,7 @@ exports[`<ErrorNotification /> spec renders the component 1`] = `
                 target="_blank"
               >
                 <span
-                  class="euiButtonContent euiButton__content"
+                  class="euiButtonContent euiButtonContent--iconRight euiButton__content"
                 >
                   EuiIconMock
                   <span

diff --git a/public/containers/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap b/public/containers/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap
@@ -5,13 +5,11 @@ exports[`<IndexDetail /> spec render the component 1`] = `
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-      <h2>
-        Source index details
-      </h2>
-    </div>
+      Source index details
+    </h2>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />

diff --git a/public/containers/IndexDetail/index.tsx b/public/containers/IndexDetail/index.tsx
@@ -43,9 +43,9 @@ export default function IndexDetail(props: IIndexDetailProps) {
   }, [props.indices.join(","), setLoading, setItems, coreServices]);
   return (
     <EuiPanel>
-      <EuiText size="s">
+      <EuiTitle size="s">
         <h2>Source index details</h2>
-      </EuiText>
+      </EuiTitle>
       <EuiHorizontalRule margin="xs" />
       <EuiSpacer size="s" />
       {items && items.length ? (

diff --git a/public/containers/IndexForm/__snapshots__/IndexForm.test.tsx.snap b/public/containers/IndexForm/__snapshots__/IndexForm.test.tsx.snap
@@ -5,15 +5,11 @@ exports[`<IndexForm /> spec render page 1`] = `
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-       
-      <h2>
-        Define index
-      </h2>
-       
-    </div>
+      Define index
+    </h2>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
@@ -183,15 +179,11 @@ exports[`<IndexForm /> spec render page 1`] = `
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-       
-      <h2>
-        Index settings
-      </h2>
-       
-    </div>
+      Index settings
+    </h2>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
@@ -593,16 +585,14 @@ exports[`<IndexForm /> spec render page 1`] = `
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-      <h2>
-        Index mapping
-        <i>
-           – optional
-        </i>
-      </h2>
-    </div>
+      Index mapping
+      <i>
+         – optional
+      </i>
+    </h2>
     <div
       class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
       id="some_html_id-row"

diff --git a/public/containers/NotificationConfig/NotificationConfig.tsx b/public/containers/NotificationConfig/NotificationConfig.tsx
@@ -230,7 +230,11 @@ const NotificationConfig = (
                     />
                   </EuiFlexItem>
                   <EuiFlexItem>
-                    <EuiSmallButton onClick={() => window.open("/app/notifications-dashboards#/channels")} iconType="popout">
+                    <EuiSmallButton
+                      onClick={() => window.open("/app/notifications-dashboards#/channels")}
+                      iconType="popout"
+                      iconSide="right"
+                    >
                       Manage channels
                     </EuiSmallButton>
                   </EuiFlexItem>

diff --git a/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx b/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from "react";
-import { EuiSpacer, EuiCompressedComboBox, EuiCompressedFormRow, EuiText, EuiHorizontalRule, EuiPanel } from "@elastic/eui";
+import { EuiSpacer, EuiCompressedComboBox, EuiCompressedFormRow, EuiText, EuiHorizontalRule, EuiPanel, EuiTitle } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import { ManagedIndexService } from "../../../../services";
 import { ManagedIndexItem, State } from "../../../../../models/interfaces";
@@ -90,9 +90,9 @@ export default class ChangeManagedIndices extends Component<ChangeManagedIndices
 
     return (
       <EuiPanel>
-        <EuiText size="s">
+        <EuiTitle size="s">
           <h2>Choose managed indices</h2>
-        </EuiText>
+        </EuiTitle>
         <EuiHorizontalRule margin="xs" />
         <div>
           <EuiCompressedFormRow

diff --git a/...gePolicy/components/ChangeManagedIndices/__snapshots__/ChangeManagedIndices.test.tsx.snap b/...gePolicy/components/ChangeManagedIndices/__snapshots__/ChangeManagedIndices.test.tsx.snap
@@ -4,13 +4,11 @@ exports[`<ChangeManagedIndices /> spec renders the component 1`] = `
 <div
   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
 >
-  <div
-    class="euiText euiText--small"
+  <h2
+    class="euiTitle euiTitle--small"
   >
-    <h2>
-      Choose managed indices
-    </h2>
-  </div>
+    Choose managed indices
+  </h2>
   <hr
     class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
   />

diff --git a/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx b/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx
@@ -16,6 +16,7 @@ import {
   EuiIcon,
   EuiPanel,
   EuiHorizontalRule,
+  EuiTitle,
 } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import { IndexService } from "../../../../services";
@@ -111,9 +112,9 @@ export default class NewPolicy extends React.Component<NewPolicyProps, NewPolicy
     const radioOptions = [currentRadio, stateRadio];
     return (
       <EuiPanel>
-        <EuiText size="s">
+        <EuiTitle size="s">
           <h2>Choose new policy</h2>
-        </EuiText>
+        </EuiTitle>
         <EuiHorizontalRule margin="xs" />
         <div>
           <EuiText size="xs">

diff --git a/public/pages/ChangePolicy/components/NewPolicy/__snapshots__/NewPolicy.test.tsx.snap b/public/pages/ChangePolicy/components/NewPolicy/__snapshots__/NewPolicy.test.tsx.snap
@@ -4,13 +4,11 @@ exports[`<NewPolicy /> spec renders the component 1`] = `
 <div
   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
 >
-  <div
-    class="euiText euiText--small"
+  <h2
+    class="euiTitle euiTitle--small"
   >
-    <h2>
-      Choose new policy
-    </h2>
-  </div>
+    Choose new policy
+  </h2>
   <hr
     class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
   />

diff --git a/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap b/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap
@@ -17,13 +17,11 @@ exports[`<ChangePolicy /> spec renders the component 1`] = `
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-      <h2>
-        Choose managed indices
-      </h2>
-    </div>
+      Choose managed indices
+    </h2>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
@@ -206,13 +204,11 @@ exports[`<ChangePolicy /> spec renders the component 1`] = `
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-      <h2>
-        Choose new policy
-      </h2>
-    </div>
+      Choose new policy
+    </h2>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />

diff --git a/public/pages/CreateComposableTemplate/components/IndexSettings/IndexSettings.tsx b/public/pages/CreateComposableTemplate/components/IndexSettings/IndexSettings.tsx
@@ -32,11 +32,9 @@ export default function IndexSettings(props: SubDetailProps) {
     <ContentPanel
       color={noPanel ? "ghost" : undefined}
       title={
-        <EuiText size="s">
-          <EuiTitle>
-            <h2>Index settings</h2>
-          </EuiTitle>
-        </EuiText>
+        <EuiTitle size="s">
+          <h2>Index settings</h2>
+        </EuiTitle>
       }
       noExtraPadding
       actions={