Story

As a user of RHDH, I want the labels and tooltips of Floating Action Buttons (FABs) to support localization so that users can see them in their preferred language.

Background

Currently, FAB items added via configuration (app-config.yaml) define label and toolTip as plain text strings. These are not localized.

To support localization:

• Introduce a new field labelKey and toolTipKey.
• When translationKey is provided, translation should be resolved using translateWithFallback.
• Fallback behavior:
  • If translationKey is provided and translation exists → show translated text.
  • If translationKey is provided but translation is missing → fall back to the label value.
  • If no labelKey is provided → display the label as-is.

Example config

...rest of config:
  icon: github
  labelKey: fab.github.label
  label: 'GitHub'
  toolTip: 'GitHub'
  toolTipKey : 'GitHub'
  to: https://github.com/redhat-developer/rhdh
  showLabel: true

Translation logic:

export const translateWithFallback = (
  t: TranslationFunction<typeof globalHeaderTranslationRef.T>,
  translationKey?: string,
  fallbackText?: string,
): string => {
  if (!translationKey) {
    return fallbackText || '';
  }
  const translation = t(translationKey as keyof typeof t, {});
  return translation !== translationKey ? translation : fallbackText || '';
};

Acceptance Criteria

• FAB config supports labelKey and toolTipKey in addition to label.
• FAB items show translated text when translation key exists.
• Fallback behavior works as expected:
  • Key present + translation found → show translated text.
  • Key present + missing translation → show fallback label.
  • No key provided → show original label.