Merge pull request #406

refactor(renovate): Upgrade i18next

* refactor(renovate): update i18next

* refactor(renovate): remove deprecated string casts

* fix(renovate): fix alt text

Author: vanch3d

hivemq-edge/src/frontend/package.json

@@ -67,7 +67,7 @@
     "elkjs": "^0.9.1",
     "form-data": "^4.0.0",
     "framer-motion": "^10.12.21",
-    "i18next": "^22.4.15",
+    "i18next": "^23.11.3",
     "luxon": "^3.3.0",
     "mermaid": "^10.8.0",
     "monaco-editor": "^0.47.0",
@@ -77,7 +77,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.9",
     "react-hotkeys-hook": "^4.5.0",
-    "react-i18next": "^12.3.0",
+    "react-i18next": "^14.1.1",
     "react-icons": "^5.0.1",
     "react-router-dom": "^6.11.2",
     "reactflow": "^11.10.2",

hivemq-edge/src/frontend/pnpm-lock.yaml

@@ -40,7 +40,7 @@ export const ColorPicker = forwardRef<ColorPickerProps, 'div'>(
             isDisabled={isDisabled}
             data-testid="colorPicker-trigger"
             data-color-scheme={selectedColorScheme}
-            aria-label={t('ColorPicker.trigger', { scheme: selectedColorScheme }) as string}
+            aria-label={t('ColorPicker.trigger', { scheme: selectedColorScheme })}
             bg={`${selectedColorScheme}.500`}
             _hover={{ bg: `${selectedColorScheme}.500` }}
             _active={{ bg: `${selectedColorScheme}.700` }}
@@ -85,7 +85,7 @@ export const ColorPicker = forwardRef<ColorPickerProps, 'div'>(
                       key={`color-picker-${color}-${index}`}
                       data-testid={`colorPicker-selector-${index}`}
                       data-color-scheme={color}
-                      aria-label={t('ColorPicker.option', { scheme: color }) as string}
+                      aria-label={t('ColorPicker.option', { scheme: color })}
                       onClick={() => {
                         setSelectedColorScheme(color)
                         onChange(color)

hivemq-edge/src/frontend/src/components/Chakra/ColorPicker.tsx

@@ -55,7 +55,7 @@ const DateTimeRangeSelector: FC<DateTimeRangeSelectorProps> = ({ min, max, setFi
       noOptionsMessage={() => t('DateTimeRangeSelector.noOptionsMessage')}
       placeholder={t('DateTimeRangeSelector.placeholder')}
       formatCreateLabel={(e) => t('DateTimeRangeSelector.formatCreateLabel', { date: e })}
-      aria-label={t('DateTimeRangeSelector.ariaLabel') as string}
+      aria-label={t('DateTimeRangeSelector.ariaLabel')}
       isClearable={true}
       isMulti={false}
       components={{

hivemq-edge/src/frontend/src/components/DateTime/DateTimeRangeSelector.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'
 const TopicIcon: FC<IconProps> = (props) => {
   const { t } = useTranslation('components')
 
-  return <Icon as={SiMqtt} boxSize={4} aria-label={t('topic.iconLabel') as string} {...props} />
+  return <Icon as={SiMqtt} boxSize={4} aria-label={t('topic.iconLabel')} {...props} />
 }
 
 export default TopicIcon

hivemq-edge/src/frontend/src/components/Icons/TopicIcon.tsx

@@ -76,8 +76,8 @@ const AbstractTopicCreatableSelect = <T extends boolean>({
 
   return (
     <CreatableSelect<TopicOption, T, GroupBase<TopicOption>>
-      aria-label={t('topicCreate.label') as string}
-      placeholder={t('topicCreate.placeholder') as string}
+      aria-label={t('topicCreate.label')}
+      placeholder={t('topicCreate.placeholder')}
       noOptionsMessage={() => t('topicCreate.options.noOptionsMessage')}
       formatCreateLabel={(e) => t('topicCreate.options.createLabel', { topic: e })}
       isLoading={isLoading}

hivemq-edge/src/frontend/src/components/MQTT/TopicCreatableSelect.tsx

@@ -67,10 +67,10 @@ export const Filter = <T,>({
         // value={{ value: columnFilterValue, label: columnFilterValue }}
         onChange={(item) => setFilterValue(item?.value)}
         options={sortedUniqueValues.map((value: string) => ({ value: value, label: value, group: 'DDD' }))}
-        placeholder={t('components:pagination.filter.placeholder', { size: getFacetedUniqueValues().size }) as string}
+        placeholder={t('components:pagination.filter.placeholder', { size: getFacetedUniqueValues().size })}
         noOptionsMessage={() => t('components:pagination.filter.noOptions')}
         formatCreateLabel={(e) => t('components:pagination.filter.create', { topic: e })}
-        aria-label={t('components:pagination.filter.label') as string}
+        aria-label={t('components:pagination.filter.label')}
         isClearable={true}
         isMulti={false}
         components={{

hivemq-edge/src/frontend/src/components/PaginatedTable/components/Filter.tsx

@@ -33,7 +33,7 @@ const PaginationButton: FC<IconButtonProps> = (props) => (
 const PaginationBar = <T,>({ table, pageSizes }: PaginationProps<T>) => {
   const { t } = useTranslation()
   return (
-    <HStack as="nav" aria-label={t('components:pagination.ariaLabel') as string} gap={8} mt={4}>
+    <HStack as="nav" aria-label={t('components:pagination.ariaLabel')} gap={8} mt={4}>
       <ButtonGroup isAttached variant="ghost">
         <PaginationButton
           icon={<LuSkipBack />}

hivemq-edge/src/frontend/src/components/PaginatedTable/components/PaginationBar.tsx

@@ -28,7 +28,7 @@ const PasswordInput: FC<InputProps> = ({ register, options, ...rest }) => {
           h="1.75rem"
           size="sm"
           onClick={handleClick}
-          aria-label={show ? (t('login.password.hide') as string) : (t('login.password.show') as string)}
+          aria-label={show ? t('login.password.hide') : t('login.password.show')}
         >
           {show ? <BiHide /> : <BiShow />}
         </Button>

hivemq-edge/src/frontend/src/components/PasswordInput.tsx

@@ -17,8 +17,8 @@ const DataHubPage: FC = () => {
 
   return (
     <PageContainer
-      title={t('page.title') as string}
-      subtitle={t('page.description') as string}
+      title={t('page.title')}
+      subtitle={t('page.description')}
       cta={
         isMainPage &&
         hasDataHub && (