Old UI title changes

Signed-off-by: Sandeep Kumawat <[email protected]>
skumawat2025 · Sep 2, 2024 · 12bffec · 12bffec
1 parent b366886
commit 12bffec
Show file tree

Hide file tree

Showing 16 changed files with 60 additions and 46 deletions.
diff --git a/public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx b/public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent, Component, useContext } from "react";
-import { EuiSpacer, EuiTitle, EuiFlexGroup, EuiFlexItem, EuiComboBoxOptionOption } from "@elastic/eui";
+import { EuiSpacer, EuiTitle, EuiFlexGroup, EuiFlexItem, EuiComboBoxOptionOption, EuiText } from "@elastic/eui";
 import { RouteComponentProps } from "react-router-dom";
 import { RollupService } from "../../../../services";
 import ConfigureRollup from "../../components/ConfigureRollup";
@@ -46,9 +46,9 @@ export default class CreateRollup extends Component<CreateRollupProps> {
       ? () => {
           return (
             <>
-              <EuiTitle size="l">
+              <EuiText size="s">
                 <h1>Set up indices</h1>
-              </EuiTitle>
+              </EuiText>
               <EuiSpacer />
             </>
           );

diff --git a/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx b/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx
@@ -699,7 +699,7 @@ export class CreateRollupForm extends Component<CreateRollupFormProps, CreateRol
           submitError={submitError}
           useNewUX={useNewUX}
         />
-        <EuiFlexGroup alignItems="center" justifyContent="flexEnd" gutterSize="s">
+        <EuiFlexGroup alignItems="center" justifyContent="flexEnd" style={useNewUX ? undefined : { padding: "5px 50px" }} gutterSize="s">
           <EuiFlexItem grow={false}>
             <EuiSmallButtonEmpty onClick={this.onCancel} data-test-subj="createRollupCancelButton">
               Cancel

diff --git a/...ges/CreateRollup/containers/CreateRollupForm/__snapshots__/CreateRollupForm.test.tsx.snap b/...ges/CreateRollup/containers/CreateRollupForm/__snapshots__/CreateRollupForm.test.tsx.snap
@@ -151,11 +151,13 @@ exports[`<CreateRollupForm /> spec renders the component 1`] = `
         <div
           class="euiFlexItem"
         >
-          <h1
-            class="euiTitle euiTitle--large"
+          <div
+            class="euiText euiText--small"
           >
-            Set up indices
-          </h1>
+            <h1>
+              Set up indices
+            </h1>
+          </div>
           <div
             class="euiSpacer euiSpacer--l"
           />
@@ -530,6 +532,7 @@ exports[`<CreateRollupForm /> spec renders the component 1`] = `
     </div>
     <div
       class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+      style="padding: 5px 50px;"
     >
       <div
         class="euiFlexItem euiFlexItem--flexGrowZero"

diff --git a/public/pages/CreateRollup/containers/CreateRollupStep2/CreateRollupStep2.tsx b/public/pages/CreateRollup/containers/CreateRollupStep2/CreateRollupStep2.tsx
@@ -61,9 +61,9 @@ export default class CreateRollupStep2 extends Component<CreateRollupStep2Props>
       ? () => {
           return (
             <>
-              <EuiTitle size="l">
+              <EuiText size="s">
                 <h1>Define aggregations and metrics</h1>
-              </EuiTitle>
+              </EuiText>
               <EuiSpacer />
             </>
           );

diff --git a/public/pages/CreateRollup/containers/CreateRollupStep3/CreateRollupStep3.tsx b/public/pages/CreateRollup/containers/CreateRollupStep3/CreateRollupStep3.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent, Component } from "react";
-import { EuiSpacer, EuiTitle, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiSpacer, EuiTitle, EuiFlexGroup, EuiFlexItem, EuiText } from "@elastic/eui";
 import { RouteComponentProps } from "react-router-dom";
 import { RollupService } from "../../../../services";
 import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
@@ -145,9 +145,9 @@ export default class CreateRollupStep3 extends Component<CreateRollupProps, Crea
       ? () => {
           return (
             <>
-              <EuiTitle size="l">
+              <EuiText size="s">
                 <h1>Specify schedule</h1>
-              </EuiTitle>
+              </EuiText>
               <EuiSpacer />
             </>
           );

diff --git a/public/pages/CreateRollup/containers/CreateRollupStep4/CreateRollupStep4.tsx b/public/pages/CreateRollup/containers/CreateRollupStep4/CreateRollupStep4.tsx
@@ -67,9 +67,9 @@ export default class CreateRollupStep4 extends Component<CreateRollupProps> {
       ? () => {
           return (
             <>
-              <EuiTitle size="l">
+              <EuiText size="s">
                 <h1>Review and create</h1>
-              </EuiTitle>
+              </EuiText>
               <EuiSpacer />
             </>
           );

diff --git a/public/pages/EditRollup/containers/EditRollup.tsx b/public/pages/EditRollup/containers/EditRollup.tsx
@@ -7,7 +7,7 @@ import React, { ChangeEvent, Component, useContext } from "react";
 import { RouteComponentProps } from "react-router-dom";
 import moment from "moment";
 import queryString from "query-string";
-import { EuiFlexItem, EuiFlexGroup, EuiSmallButton, EuiTitle, EuiSpacer, EuiSmallButtonEmpty } from "@elastic/eui";
+import { EuiFlexItem, EuiFlexGroup, EuiSmallButton, EuiTitle, EuiSpacer, EuiSmallButtonEmpty, EuiText } from "@elastic/eui";
 import ConfigureRollup from "../../CreateRollup/components/ConfigureRollup";
 import Schedule from "../../CreateRollup/components/Schedule";
 import { getErrorMessage } from "../../../utils/helpers";
@@ -298,9 +298,9 @@ export class EditRollup extends Component<EditRollupProps, EditRollupState> {
       ? () => {
           return (
             <>
-              <EuiTitle size="l">
+              <EuiText size="s">
                 <h1>Edit rollup job</h1>
-              </EuiTitle>
+              </EuiText>
               <EuiSpacer />
             </>
           );

diff --git a/public/pages/EditRollup/containers/__snapshots__/EditRollup.test.tsx.snap b/public/pages/EditRollup/containers/__snapshots__/EditRollup.test.tsx.snap
@@ -4,11 +4,13 @@ exports[`<EditRollup /> spec renders the component 1`] = `
 <div
   style="padding: 25px 50px;"
 >
-  <h1
-    class="euiTitle euiTitle--large"
+  <div
+    class="euiText euiText--small"
   >
-    Edit rollup job
-  </h1>
+    <h1>
+      Edit rollup job
+    </h1>
+  </div>
   <div
     class="euiSpacer euiSpacer--l"
   />

diff --git a/public/pages/ForceMerge/container/ForceMerge/ForceMerge.tsx b/public/pages/ForceMerge/container/ForceMerge/ForceMerge.tsx
@@ -200,9 +200,9 @@ export default function ForceMergeWrapper(props: Omit<ForceMergeProps, "services
       {useNewUX && <HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />}
       {!useNewUX && (
         <>
-          <EuiTitle size="l">
+          <EuiText size="s">
             <h1>Force merge</h1>
-          </EuiTitle>
+          </EuiText>
           <CustomFormRow
             fullWidth
             helpText="Manually merge shards of indexes or backing indexes of data streams. You can also use force merge to clear up deleted documents within indexes."

diff --git a/public/pages/ForceMerge/container/ForceMerge/__snapshots__/ForceMerge.test.tsx.snap b/public/pages/ForceMerge/container/ForceMerge/__snapshots__/ForceMerge.test.tsx.snap
@@ -4,11 +4,13 @@ exports[`<ForceMerge /> spec renders the component 1`] = `
 <div
   style="padding: 0px 50px;"
 >
-  <h1
-    class="euiTitle euiTitle--large"
+  <div
+    class="euiText euiText--small"
   >
-    Force merge
-  </h1>
+    <h1>
+      Force merge
+    </h1>
+  </div>
   <div
     class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
     id="some_html_id-row"

diff --git a/public/pages/Notifications/containers/Notifications/Notifications.tsx b/public/pages/Notifications/containers/Notifications/Notifications.tsx
@@ -206,9 +206,9 @@ const Notifications = (props: NotificationsProps) => {
         <>
           <EuiFlexGroup justifyContent="spaceBetween">
             <EuiFlexItem>
-              <EuiTitle size="l">
+              <EuiText size="s">
                 <h1>Notification settings</h1>
-              </EuiTitle>
+              </EuiText>
               <CustomFormRow
                 fullWidth
                 helpText={

diff --git a/...ic/pages/Notifications/containers/Notifications/__snapshots__/Notifications.test.tsx.snap b/...ic/pages/Notifications/containers/Notifications/__snapshots__/Notifications.test.tsx.snap
@@ -8,11 +8,13 @@ exports[`<Notifications /> spec View without permission 1`] = `
     <div
       class="euiFlexItem"
     >
-      <h1
-        class="euiTitle euiTitle--large"
+      <div
+        class="euiText euiText--small"
       >
-        Notification settings
-      </h1>
+        <h1>
+          Notification settings
+        </h1>
+      </div>
       <div
         class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
@@ -96,11 +98,13 @@ exports[`<Notifications /> spec renders 1`] = `
     <div
       class="euiFlexItem"
     >
-      <h1
-        class="euiTitle euiTitle--large"
+      <div
+        class="euiText euiText--small"
       >
-        Notification settings
-      </h1>
+        <h1>
+          Notification settings
+        </h1>
+      </div>
       <div
         class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"

diff --git a/public/pages/Rollover/containers/Rollover/Rollover.tsx b/public/pages/Rollover/containers/Rollover/Rollover.tsx
@@ -251,9 +251,9 @@ export default function Rollover(props: RolloverProps) {
       {useNewUX && <HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />}
       {!useNewUX && (
         <>
-          <EuiTitle>
+          <EuiText size="s">
             <h1>Roll over</h1>
-          </EuiTitle>
+          </EuiText>
           <CustomFormRow
             helpText="Rollover creates a new writing index for a data stream or index alias."
             style={{

diff --git a/public/pages/Rollover/containers/Rollover/__snapshots__/Rollover.test.tsx.snap b/public/pages/Rollover/containers/Rollover/__snapshots__/Rollover.test.tsx.snap
@@ -4,11 +4,13 @@ exports[`container <Rollover /> spec render the component 1`] = `
 <div
   style="padding: 0px 50px;"
 >
-  <h1
-    class="euiTitle euiTitle--medium"
+  <div
+    class="euiText euiText--small"
   >
-    Roll over
-  </h1>
+    <h1>
+      Roll over
+    </h1>
+  </div>
   <div
     class="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"

diff --git a/public/pages/Rollups/containers/Rollups/Rollups.tsx b/public/pages/Rollups/containers/Rollups/Rollups.tsx
@@ -567,11 +567,11 @@ export class Rollups extends MDSEnabledComponent<RollupsProps, RollupsState> {
                   anchorPosition="downLeft"
                   data-test-subj="actionPopover"
                 >
-                  <EuiContextMenuPanel items={actionItems} />
+                  <EuiContextMenuPanel items={actionItems} size="s" />
                 </EuiPopover>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiSmallButton onClick={this.onClickCreate} fill={true} data-test-subj="createRollupButton">
+                <EuiSmallButton iconType="plus" onClick={this.onClickCreate} fill={true} data-test-subj="createRollupButton">
                   Create rollup job
                 </EuiSmallButton>
               </EuiFlexItem>

diff --git a/public/pages/Rollups/containers/Rollups/__snapshots__/Rollups.test.tsx.snap b/public/pages/Rollups/containers/Rollups/__snapshots__/Rollups.test.tsx.snap
@@ -132,6 +132,7 @@ exports[`<Rollups /> spec renders the component 1`] = `
               <span
                 class="euiButtonContent euiButton__content"
               >
+                EuiIconMock
                 <span
                   class="euiButton__text"
                 >