RI-7073 replace eui title

* Add Title.tsx

* "Refactor: Replace EuiTitle with a custom Title component

Author: pd-redis

redisinsight/ui/src/components/base/text/Title.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Typography } from '@redis-ui/components'
+
+export type TitleProps = React.ComponentProps<typeof Typography.Heading> & {}
+export type TitleSize = TitleProps['size']
+export const Title = (props: TitleProps) => <Typography.Heading {...props} />

redisinsight/ui/src/components/consents-settings/ConsentsNotifications/ConsentsNotifications.tsx

@@ -2,14 +2,15 @@ import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useFormik } from 'formik'
 import { has } from 'lodash'
-import { EuiForm, EuiTitle } from '@elastic/eui'
+import { EuiForm } from '@elastic/eui'
 
 import { compareConsents } from 'uiSrc/utils'
 import {
   updateUserConfigSettingsAction,
   userSettingsSelector,
 } from 'uiSrc/slices/user/user-settings'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { Title } from 'uiSrc/components/base/text/Title'
 import ConsentOption from '../ConsentOption'
 import { IConsent, ConsentCategories } from '../ConsentsSettings'
 
@@ -94,9 +95,7 @@ const ConsentsNotifications = () => {
       data-testid="consents-settings-form"
     >
       <div className={styles.consentsWrapper}>
-        <EuiTitle size="xs">
-          <h4>Notifications</h4>
-        </EuiTitle>
+        <Title size="XS">Notifications</Title>
         {notificationConsents.map((consent: IConsent) => (
           <ConsentOption
             consent={consent}

redisinsight/ui/src/components/consents-settings/ConsentsPrivacy/ConsentsPrivacy.tsx

@@ -2,14 +2,15 @@ import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useFormik } from 'formik'
 import { has } from 'lodash'
-import { EuiForm, EuiTitle } from '@elastic/eui'
+import { EuiForm } from '@elastic/eui'
 
 import { compareConsents } from 'uiSrc/utils'
 import {
   updateUserConfigSettingsAction,
   userSettingsSelector,
 } from 'uiSrc/slices/user/user-settings'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
+import { Title } from 'uiSrc/components/base/text/Title'
 import { Text } from 'uiSrc/components/base/text'
 import ConsentOption from '../ConsentOption'
 import { ConsentCategories, IConsent } from '../ConsentsSettings'
@@ -88,9 +89,7 @@ const ConsentsPrivacy = () => {
           To optimize your experience, Redis Insight uses third-party tools.
         </Text>
         <Spacer />
-        <EuiTitle size="xs">
-          <h4>Usage Data</h4>
-        </EuiTitle>
+        <Title size="XS">Usage Data</Title>
         {privacyConsents.map((consent: IConsent) => (
           <ConsentOption
             consent={consent}

redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx

@@ -2,7 +2,12 @@ import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { FormikErrors, useFormik } from 'formik'
 import { isEmpty, forEach } from 'lodash'
-import { EuiSwitch, EuiTitle, EuiToolTip, EuiForm, EuiLink } from '@elastic/eui'
+import {
+  EuiSwitch,
+  EuiToolTip,
+  EuiForm,
+  EuiLink,
+} from '@elastic/eui'
 import { EuiSwitchEvent } from '@elastic/eui/src/components/form/switch'
 import cx from 'classnames'
 
@@ -17,6 +22,7 @@ import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
 import { InfoIcon } from 'uiSrc/components/base/icons'
+import { Title } from 'uiSrc/components/base/text/Title'
 import { CallOut } from 'uiSrc/components/base/display/call-out/CallOut'
 import { Text } from 'uiSrc/components/base/text'
 import ConsentOption from './ConsentOption'
@@ -264,9 +270,9 @@ const ConsentsSettings = ({ onSubmitted }: Props) => {
         {!!privacyConsents.length && (
           <>
             <Spacer />
-            <EuiTitle size="m">
-              <h1 className={styles.title}>Privacy Settings</h1>
-            </EuiTitle>
+            <Title size="M" className={styles.title}>
+              Privacy Settings
+            </Title>
             <Spacer size="m" />
             <Text className={styles.smallText} size="s" color="subdued">
               To optimize your experience, Redis Insight uses third-party tools.
@@ -285,9 +291,9 @@ const ConsentsSettings = ({ onSubmitted }: Props) => {
         {!!notificationConsents.length && (
           <>
             <Spacer size="m" />
-            <EuiTitle size="m">
-              <h1 className={styles.title}>Notifications</h1>
-            </EuiTitle>
+            <Title size="M" className={styles.title}>
+              Notifications
+            </Title>
             <Spacer size="m" />
           </>
         )}

redisinsight/ui/src/components/consents-settings/ConsentsSettingsPopup/ConsentsSettingsPopup.tsx

@@ -5,7 +5,6 @@ import {
   EuiModalBody,
   EuiModalHeader,
   EuiIcon,
-  EuiTitle,
 } from '@elastic/eui'
 import { useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
@@ -20,6 +19,7 @@ import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import Logo from 'uiSrc/assets/img/logo.svg'
 
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { Title } from 'uiSrc/components/base/text/Title'
 import styles from '../styles.module.scss'
 
 const ConsentsSettingsPopup = () => {
@@ -58,11 +58,9 @@ const ConsentsSettingsPopup = () => {
         <EuiModalHeader className={styles.modalHeader}>
           <Row justify="between">
             <FlexItem>
-              <EuiTitle size="s">
-                <h3 className={styles.consentsPopupTitle}>
-                  EULA and Privacy Settings
-                </h3>
-              </EuiTitle>
+              <Title size="L" className={styles.consentsPopupTitle}>
+                EULA and Privacy Settings
+              </Title>
             </FlexItem>
             <FlexItem>
               <EuiIcon

redisinsight/ui/src/components/explore-guides/ExploreGuides.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EuiIcon, EuiTitle } from '@elastic/eui'
+import { EuiIcon } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory, useParams } from 'react-router-dom'
 import { guideLinksSelector } from 'uiSrc/slices/content/guide-links'
@@ -11,6 +11,7 @@ import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { openTutorialByPath } from 'uiSrc/slices/panels/sidePanels'
 import { findTutorialPath } from 'uiSrc/utils'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
+import { Title } from 'uiSrc/components/base/text/Title'
 import { Text } from 'uiSrc/components/base/text'
 import styles from './styles.module.scss'
 
@@ -40,9 +41,9 @@ const ExploreGuides = () => {
 
   return (
     <div data-testid="explore-guides">
-      <EuiTitle size="xs">
+      <Title size="XS">
         <span>Here&apos;s a good starting point</span>
-      </EuiTitle>
+      </Title>
       <Text>
         Explore the amazing world of Redis Stack with our interactive guides
       </Text>

redisinsight/ui/src/components/import-file-modal/ImportFileModal.tsx

@@ -7,7 +7,6 @@ import {
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
-  EuiTitle,
 } from '@elastic/eui'
 import cx from 'classnames'
 import React from 'react'
@@ -20,6 +19,7 @@ import {
   PrimaryButton,
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
+import { Title } from 'uiSrc/components/base/text/Title'
 import { ColorText, Text } from 'uiSrc/components/base/text'
 import styles from './styles.module.scss'
 
@@ -71,11 +71,11 @@ const ImportFileModal = <T,>({
     >
       <EuiModalHeader>
         <EuiModalHeaderTitle>
-          <EuiTitle size="xs" data-testid="import-file-modal-title">
+          <Title size="XS" data-testid="import-file-modal-title">
             <span>
               {!data && !error ? title : resultsTitle || 'Import Results'}
             </span>
-          </EuiTitle>
+          </Title>
         </EuiModalHeaderTitle>
       </EuiModalHeader>
 

redisinsight/ui/src/components/markdown/CodeButtonBlock/CodeButtonBlock.tsx

@@ -1,4 +1,4 @@
-import { EuiPopover, EuiTitle, EuiToolTip } from '@elastic/eui'
+import { EuiPopover, EuiToolTip } from '@elastic/eui'
 import cx from 'classnames'
 import React, { useEffect, useState } from 'react'
 import { monaco } from 'react-monaco-editor'
@@ -29,6 +29,7 @@ import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { EmptyButton } from 'uiSrc/components/base/forms/buttons'
 import { PlayIcon, CheckBoldIcon, CopyIcon } from 'uiSrc/components/base/icons'
+import { Title } from 'uiSrc/components/base/text/Title'
 import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module'
 
 import { RunConfirmationPopover } from './components'
@@ -159,13 +160,13 @@ const CodeButtonBlock = (props: Props) => {
       <Row>
         <FlexItem grow>
           {!!label && (
-            <EuiTitle
-              size="xxxs"
+            <Title
+              size="XS"
               className={styles.label}
               data-testid="code-button-block-label"
             >
-              <span>{truncateText(label, 86)}</span>
-            </EuiTitle>
+              {truncateText(label, 86)}
+            </Title>
           )}
         </FlexItem>
         <FlexItem className={styles.actions}>

redisinsight/ui/src/components/markdown/CodeButtonBlock/components/RunConfirmationPopover.tsx

@@ -1,4 +1,3 @@
-import { EuiTitle } from '@elastic/eui'
 import React, { useState } from 'react'
 import { useHistory, useParams } from 'react-router-dom'
 import { FeatureFlags, Pages } from 'uiSrc/constants'
@@ -12,6 +11,7 @@ import {
   PrimaryButton,
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
+import { Title } from 'uiSrc/components/base/text/Title'
 import { Text } from 'uiSrc/components/base/text'
 import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox'
 import styles from '../styles.module.scss'
@@ -49,9 +49,7 @@ const RunConfirmationPopover = ({ onApply }: Props) => {
 
   return (
     <>
-      <EuiTitle size="xxs">
-        <span>Run commands</span>
-      </EuiTitle>
+      <Title size="XS">Run commands</Title>
       <Spacer size="s" />
       <Text size="s">
         This tutorial will change data in your database, are you sure you want

redisinsight/ui/src/components/messages/database-not-opened/DatabaseNotOpened.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
-import { EuiTitle } from '@elastic/eui'
+
 import { ExternalLink, OAuthSsoHandlerDialog } from 'uiSrc/components'
 import { getUtmExternalLink } from 'uiSrc/utils/links'
 import { EXTERNAL_LINKS, UTM_CAMPAINGS } from 'uiSrc/constants/links'
 import TelescopeImg from 'uiSrc/assets/img/telescope-dark.svg'
 import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces'
 
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
+import { Title } from 'uiSrc/components/base/text/Title'
 import { Text } from 'uiSrc/components/base/text'
 import styles from './styles.module.scss'
 
@@ -21,9 +22,9 @@ const DatabaseNotOpened = (props: Props) => {
   return (
     <div className={styles.wrapper} data-testid="database-not-opened-popover">
       <div>
-        <EuiTitle size="xxs" className={styles.title}>
-          <h5>Open a database</h5>
-        </EuiTitle>
+        <Title size="S" className={styles.title}>
+          Open a database
+        </Title>
         <Spacer size="s" />
         <>
           <Text color="subdued" size="s">