Replaced EuiText with EuiTitle for section headers in content areas

Signed-off-by: Kshitij Tandon <tandonks@amazon.com>
opensearch-project · Sep 19, 2024 · a5668d0 · a5668d0
1 parent 8d4e01f
commit a5668d0
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={