RI-8277 Migrate rdi instance pipeline header to i18n

redisinsight/ui/src/i18n/locales/bg.json

@@ -571,6 +571,43 @@
   "rdi.home.pageTitle": "Redis Data Integration",
   "rdi.home.search.ariaLabel": "Търсене в списъка с RDI инстанции",
   "rdi.home.search.placeholder": "Търсене в списъка с крайни точки",
+  "rdi.instance.configMenu.downloadDeployed": "Изтегляне на внедрения конвейер",
+  "rdi.instance.configMenu.importZip": "Импортиране на конвейер от ZIP файл",
+  "rdi.instance.configMenu.saveZip": "Запазване на конвейера в ZIP файл",
+  "rdi.instance.deploy.button": "Внедряване",
+  "rdi.instance.deploy.confirmTitle": "Сигурни ли сте, че искате да внедрите конвейера?",
+  "rdi.instance.deploy.errorsWarning": "Вашият RDI конвейер съдържа грешки. Сигурни ли сте, че искате да продължите?",
+  "rdi.instance.deploy.flushText": "След внедряването обмислете изчистване на целевата Redis база данни и нулиране на конвейера, за да сте сигурни, че всички данни са обработени наново.",
+  "rdi.instance.deploy.overwriteText": "При внедряване тази локална конфигурация ще замени всеки съществуващ конвейер.",
+  "rdi.instance.deploy.resetInfo": "Конвейерът ще направи нов снапшот на данните и ще ги обработи, след което ще продължи да следи промените.",
+  "rdi.instance.deploy.resetLabel": "Нулиране",
+  "rdi.instance.reset.ariaLabel": "Бутон за нулиране на конвейера",
+  "rdi.instance.reset.button": "Нулиране",
+  "rdi.instance.reset.tooltipLine1": "Конвейерът ще направи нов снапшот на данните и ще ги обработи, след което ще продължи да следи промените.",
+  "rdi.instance.reset.tooltipLine2": "Преди да нулирате RDI конвейера, обмислете спиране на конвейера и изчистване на целевата Redis база данни.",
+  "rdi.instance.start.ariaLabel": "Стартиране на конвейера",
+  "rdi.instance.start.button": "Старт",
+  "rdi.instance.start.tooltip": "Стартирайте конвейера, за да възобновите обработката на нови постъпващи данни.",
+  "rdi.instance.status.creating": "Създаване",
+  "rdi.instance.status.deleting": "Изтриване",
+  "rdi.instance.status.error": "Грешка",
+  "rdi.instance.status.initialSync": "Първоначална синхронизация",
+  "rdi.instance.status.notReady": "Не е готов",
+  "rdi.instance.status.notRunning": "Не работи",
+  "rdi.instance.status.pending": "В изчакване",
+  "rdi.instance.status.ready": "Готов",
+  "rdi.instance.status.resetting": "Нулиране",
+  "rdi.instance.status.started": "Стартиран",
+  "rdi.instance.status.starting": "Стартиране",
+  "rdi.instance.status.stopped": "Спрян",
+  "rdi.instance.status.stopping": "Спиране",
+  "rdi.instance.status.streaming": "Стрийминг",
+  "rdi.instance.status.title": "Състояние на конвейера",
+  "rdi.instance.status.unknown": "Неизвестно",
+  "rdi.instance.status.updating": "Обновяване",
+  "rdi.instance.stop.ariaLabel": "Спиране на конвейера",
+  "rdi.instance.stop.button": "Стоп",
+  "rdi.instance.stop.tooltip": "Спрете конвейера, за да предотвратите обработката на нови постъпващи данни.",
   "rdi.statistics.empty.addButton": "Добавяне на конвейер",
   "rdi.statistics.empty.description": "Създайте първия си конвейер, за да започнете!",
   "rdi.statistics.empty.title": "Все още няма разгърнат конвейер",

redisinsight/ui/src/i18n/locales/en.json

@@ -571,6 +571,43 @@
   "rdi.home.pageTitle": "Redis Data Integration",
   "rdi.home.search.ariaLabel": "Search rdi instance list",
   "rdi.home.search.placeholder": "Endpoint List Search",
+  "rdi.instance.configMenu.downloadDeployed": "Download deployed pipeline",
+  "rdi.instance.configMenu.importZip": "Import pipeline from ZIP file",
+  "rdi.instance.configMenu.saveZip": "Save pipeline to ZIP file",
+  "rdi.instance.deploy.button": "Deploy",
+  "rdi.instance.deploy.confirmTitle": "Are you sure you want to deploy the pipeline?",
+  "rdi.instance.deploy.errorsWarning": "Your RDI pipeline contains errors. Are you sure you want to continue?",
+  "rdi.instance.deploy.flushText": "After deployment, consider flushing the target Redis database and resetting the pipeline to ensure that all data is reprocessed.",
+  "rdi.instance.deploy.overwriteText": "When deployed, this local configuration will overwrite any existing pipeline.",
+  "rdi.instance.deploy.resetInfo": "The pipeline will take a new snapshot of the data and process it, then continue tracking changes.",
+  "rdi.instance.deploy.resetLabel": "Reset",
+  "rdi.instance.reset.ariaLabel": "Reset pipeline button",
+  "rdi.instance.reset.button": "Reset",
+  "rdi.instance.reset.tooltipLine1": "The pipeline will take a new snapshot of the data and process it, then continue tracking changes.",
+  "rdi.instance.reset.tooltipLine2": "Before resetting the RDI pipeline, consider stopping the pipeline and flushing the target Redis database.",
+  "rdi.instance.start.ariaLabel": "Start running pipeline",
+  "rdi.instance.start.button": "Start",
+  "rdi.instance.start.tooltip": "Start the pipeline to resume processing new data arrivals.",
+  "rdi.instance.status.creating": "Creating",
+  "rdi.instance.status.deleting": "Deleting",
+  "rdi.instance.status.error": "Error",
+  "rdi.instance.status.initialSync": "Initial sync",
+  "rdi.instance.status.notReady": "Not-ready",
+  "rdi.instance.status.notRunning": "Not running",
+  "rdi.instance.status.pending": "Pending",
+  "rdi.instance.status.ready": "Ready",
+  "rdi.instance.status.resetting": "Resetting",
+  "rdi.instance.status.started": "Started",
+  "rdi.instance.status.starting": "Starting",
+  "rdi.instance.status.stopped": "Stopped",
+  "rdi.instance.status.stopping": "Stopping",
+  "rdi.instance.status.streaming": "Streaming",
+  "rdi.instance.status.title": "Pipeline status",
+  "rdi.instance.status.unknown": "Unknown",
+  "rdi.instance.status.updating": "Updating",
+  "rdi.instance.stop.ariaLabel": "Stop running pipeline",
+  "rdi.instance.stop.button": "Stop",
+  "rdi.instance.stop.tooltip": "Stop the pipeline to prevent processing of new data arrivals.",
   "rdi.statistics.empty.addButton": "Add Pipeline",
   "rdi.statistics.empty.description": "Create your first pipeline to get started!",
   "rdi.statistics.empty.title": "No pipeline deployed yet",

redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx

@@ -21,6 +21,7 @@ import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox'
 import { RiTooltip } from 'uiSrc/components/base'
 import { Modal } from 'uiSrc/components/base/display/modal'
 import { UploadWarningBanner } from 'uiSrc/components/upload-warning/styles'
+import { useTranslation } from 'uiSrc/i18n'
 
 export interface Props {
   loading?: boolean
@@ -29,6 +30,7 @@ export interface Props {
 }
 
 const DeployPipelineButton = ({ loading, disabled, onReset }: Props) => {
+  const { t } = useTranslation()
   const [resetPipeline, setResetPipeline] = useState(false)
 
   const { config, jobs, resetChecked, isPipelineValid } =
@@ -89,45 +91,39 @@ const DeployPipelineButton = ({ loading, disabled, onReset }: Props) => {
   return (
     <Modal
       id="deploy-pipeline-modal"
-      title="Are you sure you want to deploy the pipeline?"
+      title={t('rdi.instance.deploy.confirmTitle')}
       content={
         <Col gap="l">
           {!isPipelineValid && (
             <UploadWarningBanner
-              message="Your RDI pipeline contains errors. Are you sure you want to continue?"
+              message={t('rdi.instance.deploy.errorsWarning')}
               show
               showIcon
               variant="attention"
             />
           )}
           <FlexItem>
-            <Text>
-              When deployed, this local configuration will overwrite any
-              existing pipeline.
-            </Text>
-            <Text>
-              After deployment, consider flushing the target Redis database and
-              resetting the pipeline to ensure that all data is reprocessed.
-            </Text>
+            <Text>{t('rdi.instance.deploy.overwriteText')}</Text>
+            <Text>{t('rdi.instance.deploy.flushText')}</Text>
           </FlexItem>
           <Row align="center">
             <Checkbox
               id="resetPipeline"
               name="resetPipeline"
-              label="Reset"
+              label={t('rdi.instance.deploy.resetLabel')}
               labelSize="M"
               checked={resetPipeline}
               onChange={(e) => handleSelectReset(e.target.checked)}
               data-testid="reset-pipeline-checkbox"
             />
 
-            <RiTooltip content="The pipeline will take a new snapshot of the data and process it, then continue tracking changes.">
+            <RiTooltip content={t('rdi.instance.deploy.resetInfo')}>
               <Icon icon={InfoIcon} data-testid="reset-checkbox-info-icon" />
             </RiTooltip>
           </Row>
         </Col>
       }
-      primaryButtonText="Deploy"
+      primaryButtonText={t('rdi.instance.deploy.button')}
       onPrimaryButtonClick={handleDeployPipeline}
     >
       <PrimaryButton
@@ -136,7 +132,7 @@ const DeployPipelineButton = ({ loading, disabled, onReset }: Props) => {
         loading={loading}
         data-testid="deploy-rdi-pipeline"
       >
-        Deploy
+        {t('rdi.instance.deploy.button')}
       </PrimaryButton>
     </Modal>
   )

redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/reset-pipeline-button/ResetPipelineButton.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { RiTooltip } from 'uiSrc/components'
+import { useTranslation } from 'uiSrc/i18n'
 import styles from '../styles.module.scss'
 import { Button, TextButton } from '@redis-ui/components'
 import { ResetIcon } from '@redis-ui/icons'
@@ -16,35 +17,33 @@ const ResetPipelineButton = ({
   onClick,
   disabled,
   loading,
-}: PipelineButtonProps) => (
-  <RiTooltip
-    content={
-      !(disabled || loading) ? (
-        <>
-          <p>
-            The pipeline will take a new snapshot of the data and process it,
-            then continue tracking changes.
-          </p>
-          <Spacer size="m" />
-          <p>
-            Before resetting the RDI pipeline, consider stopping the pipeline
-            and flushing the target Redis database.
-          </p>
-        </>
-      ) : null
-    }
-    anchorClassName={disabled || loading ? styles.disabled : styles.tooltip}
-  >
-    <TextButton
-      aria-label="Reset pipeline button"
-      data-testid="reset-pipeline-btn"
-      onClick={onClick}
-      disabled={disabled}
+}: PipelineButtonProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <RiTooltip
+      content={
+        !(disabled || loading) ? (
+          <>
+            <p>{t('rdi.instance.reset.tooltipLine1')}</p>
+            <Spacer size="m" />
+            <p>{t('rdi.instance.reset.tooltipLine2')}</p>
+          </>
+        ) : null
+      }
+      anchorClassName={disabled || loading ? styles.disabled : styles.tooltip}
     >
-      <Button.Icon icon={ResetIcon} />
-      Reset
-    </TextButton>
-  </RiTooltip>
-)
+      <TextButton
+        aria-label={t('rdi.instance.reset.ariaLabel')}
+        data-testid="reset-pipeline-btn"
+        onClick={onClick}
+        disabled={disabled}
+      >
+        <Button.Icon icon={ResetIcon} />
+        {t('rdi.instance.reset.button')}
+      </TextButton>
+    </RiTooltip>
+  )
+}
 
 export default ResetPipelineButton

redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/start-pipeline-button/StartPipelineButton.tsx

@@ -3,29 +3,34 @@ import React from 'react'
 import { SecondaryButton } from 'uiSrc/components/base/forms/buttons'
 import { PlayFilledIcon } from 'uiSrc/components/base/icons'
 import { RiTooltip } from 'uiSrc/components'
+import { useTranslation } from 'uiSrc/i18n'
 import { PipelineButtonProps } from '../reset-pipeline-button/ResetPipelineButton'
 import styles from '../styles.module.scss'
 
 const StartPipelineButton = ({
   onClick,
   disabled,
   loading,
-}: PipelineButtonProps) => (
-  <RiTooltip
-    content="Start the pipeline to resume processing new data arrivals."
-    anchorClassName={disabled ? styles.disabled : styles.tooltip}
-  >
-    <SecondaryButton
-      aria-label="Start running pipeline"
-      icon={PlayFilledIcon}
-      data-testid="start-pipeline-btn"
-      disabled={disabled}
-      loading={loading}
-      onClick={onClick}
+}: PipelineButtonProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <RiTooltip
+      content={t('rdi.instance.start.tooltip')}
+      anchorClassName={disabled ? styles.disabled : styles.tooltip}
     >
-      Start
-    </SecondaryButton>
-  </RiTooltip>
-)
+      <SecondaryButton
+        aria-label={t('rdi.instance.start.ariaLabel')}
+        icon={PlayFilledIcon}
+        data-testid="start-pipeline-btn"
+        disabled={disabled}
+        loading={loading}
+        onClick={onClick}
+      >
+        {t('rdi.instance.start.button')}
+      </SecondaryButton>
+    </RiTooltip>
+  )
+}
 
 export default StartPipelineButton

redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/stop-pipeline-button/StopPipelineButton.tsx

@@ -3,29 +3,34 @@ import React from 'react'
 import { SecondaryButton } from 'uiSrc/components/base/forms/buttons'
 import { RiStopIcon } from 'uiSrc/components/base/icons'
 import { RiTooltip } from 'uiSrc/components'
+import { useTranslation } from 'uiSrc/i18n'
 import { PipelineButtonProps } from '../reset-pipeline-button/ResetPipelineButton'
 import styles from '../styles.module.scss'
 
 const StopPipelineButton = ({
   onClick,
   disabled,
   loading,
-}: PipelineButtonProps) => (
-  <RiTooltip
-    content="Stop the pipeline to prevent processing of new data arrivals."
-    anchorClassName={disabled ? styles.disabled : undefined}
-  >
-    <SecondaryButton
-      aria-label="Stop running pipeline"
-      loading={loading}
-      disabled={disabled}
-      icon={RiStopIcon}
-      data-testid="stop-pipeline-btn"
-      onClick={onClick}
+}: PipelineButtonProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <RiTooltip
+      content={t('rdi.instance.stop.tooltip')}
+      anchorClassName={disabled ? styles.disabled : undefined}
     >
-      Stop
-    </SecondaryButton>
-  </RiTooltip>
-)
+      <SecondaryButton
+        aria-label={t('rdi.instance.stop.ariaLabel')}
+        loading={loading}
+        disabled={disabled}
+        icon={RiStopIcon}
+        data-testid="stop-pipeline-btn"
+        onClick={onClick}
+      >
+        {t('rdi.instance.stop.button')}
+      </SecondaryButton>
+    </RiTooltip>
+  )
+}
 
 export default StopPipelineButton

redisinsight/ui/src/pages/rdi/instance/components/header/components/current-pipeline-status/CurrentPipelineStatus.tsx

@@ -7,6 +7,7 @@ import { Loader } from 'uiSrc/components/base/display'
 import { RiTooltip } from 'uiSrc/components'
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Text } from 'uiSrc/components/base/text'
+import { useTranslation } from 'uiSrc/i18n'
 import { getStatusToShowFromState, getStatusToShowFromStatus } from './utils'
 
 export interface Props {
@@ -22,6 +23,7 @@ const CurrentPipelineStatus = ({
   statusError,
   headerLoading,
 }: Props) => {
+  const { t } = useTranslation()
   const stateInfo = pipelineState
     ? getStatusToShowFromState(pipelineState)
     : getStatusToShowFromStatus(pipelineStatus)
@@ -31,7 +33,7 @@ const CurrentPipelineStatus = ({
     <Row align="center" gap="m">
       <FlexItem>
         <Title size="XS" color="primary">
-          Pipeline status
+          {t('rdi.instance.status.title')}
         </Title>
       </FlexItem>
       <FlexItem>