Merge pull request #1129 from securityscorecard/ajkl2533@i18n-change-…

…ns-separator fix(i18n): change namespace separator
securityscorecard · Sep 18, 2024 · a47c81f · a47c81f
2 parents d587791 + ac708a0
commit a47c81f
Show file tree

Hide file tree

Showing 12 changed files with 28 additions and 22 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -39,6 +39,7 @@ i18n.use(initReactI18next).init({
   },
   defaultNS:'sscds',
   keySeparator: false,
+  nsSeparator: '|',
   lng: 'en-US',
   fallbackLng: 'en-US',
   interpolation: {

diff --git a/docs/localization.mdx b/docs/localization.mdx
@@ -49,12 +49,15 @@ i18n.use(initReactI18next).init({
   },
   lng: 'en',
   fallbackLng: 'en',
+  nsSeparator: '|',
   interpolation: {
     escapeValue: false,
   },
 });
 ```
 
+The Design System localization expects to use `|` as the namespace separator to prevent accidental clash with the existing keys containing the `:` character.
+
 By following these steps, your application will be set up to use the localized versions of our components. The components will automatically use the translations provided under the `sscds` namespace, allowing for seamless integration of multiple languages in your user interface.
 
 ## Available languages

diff --git a/jest.setup.ts b/jest.setup.ts
@@ -13,6 +13,7 @@ i18n.use(initReactI18next).init({
   },
   defaultNS: 'sscds',
   keySeparator: false,
+  nsSeparator: '|',
   lng: 'en-US',
   fallbackLng: 'en-US',
   interpolation: {

diff --git a/src/components/Filters/BottomBar/BottomBar.tsx b/src/components/Filters/BottomBar/BottomBar.tsx
@@ -29,36 +29,36 @@ const BottomBar = ({
           variant="ghost"
           onClick={onAdd}
         >
-          {t('sscds:filters.addRule')}
+          {t('sscds|filters.addRule')}
         </Button>
         <Button size="sm" variant="ghost" onClick={onClearAll}>
-          {t('sscds:filters.clearRules')}
+          {t('sscds|filters.clearRules')}
         </Button>
       </Inline>
       <Inline align="center" gap="sm">
         {hasUnappliedFilters && hasApplyButton && (
           <Paragraph as="div" margin="none" size="md" variant="secondary">
-            {t('sscds:filters.unappliedFilters')}
+            {t('sscds|filters.unappliedFilters')}
           </Paragraph>
         )}
         {canCancel && hasApplyButton ? (
           <Button size="sm" variant="subtle" onClick={onCancel}>
-            {t('sscds:filters.cancel')}
+            {t('sscds|filters.cancel')}
           </Button>
         ) : hasCloseButton ? (
           <Button size="sm" variant="subtle" onClick={onClose}>
-            {t('sscds:filters.close')}
+            {t('sscds|filters.close')}
           </Button>
         ) : null}
         {hasApplyButton && (
           <Button
             isDisabled={isApplyDisabled}
             isLoading={canCancel}
-            loadingText={t('sscds:loading')}
+            loadingText={t('sscds|loading')}
             size="sm"
             onClick={onSubmit}
           >
-            {t('sscds:filters.apply')}
+            {t('sscds|filters.apply')}
           </Button>
         )}
       </Inline>

diff --git a/src/components/Filters/FilterRow/FilterRow.tsx b/src/components/Filters/FilterRow/FilterRow.tsx
@@ -209,8 +209,8 @@ const FilterRow = ({
     conditionValue,
   );
   const operatorOptions = [
-    { value: 'and', label: t('sscds:filters.andOperator') },
-    { value: 'or', label: t('sscds:filters.orOperator') },
+    { value: 'and', label: t('sscds|filters.andOperator') },
+    { value: 'or', label: t('sscds|filters.orOperator') },
   ];
   const operatorOption = getOperatorOptions(operatorValue, operatorOptions);
 
@@ -284,13 +284,13 @@ const FilterRow = ({
         {!isOperatorFieldEnabled ? (
           <DisabledOperator>
             {/* First row starts by Where operator */}
-            {index === 0 ? t('sscds:filters.whereOperator') : defaultOperator}
+            {index === 0 ? t('sscds|filters.whereOperator') : defaultOperator}
           </DisabledOperator>
         ) : index !== 1 ? (
           <DisabledOperator>
             {/* First row starts by Where operator */}
             {index === 0
-              ? t('sscds:filters.whereOperator')
+              ? t('sscds|filters.whereOperator')
               : operatorOption.label}
           </DisabledOperator>
         ) : (

diff --git a/src/components/Filters/StateButton/StateButton.tsx b/src/components/Filters/StateButton/StateButton.tsx
@@ -62,7 +62,7 @@ const StateButton = ({
     useStateButtonIcon(isApplied);
   return (
     <RemoveButton
-      aria-label={t('sscds:filters.removeRule')}
+      aria-label={t('sscds|filters.removeRule')}
       onClick={onClick(index)}
       onMouseOut={handleMouseOut}
       onMouseOver={handleMouseOver}
@@ -79,7 +79,7 @@ const StateButton = ({
       )}
       <Popup>
         <ElementLabel color="inverse" size="sm" style={{ lineHeight: '1rem' }}>
-          {t('sscds:filters.removeRule')}
+          {t('sscds|filters.removeRule')}
         </ElementLabel>
       </Popup>
     </RemoveButton>

diff --git a/src/components/Filters/components/Count/Count.tsx b/src/components/Filters/components/Count/Count.tsx
@@ -18,8 +18,8 @@ const Count = ({
 }: NumberProps) => {
   const { t } = useSafeTranslation();
   const resolvedPlaceholder =
-    placeholder ?? t('sscds:filters.count.placeholder');
-  const resolvedErrorMessage = errorMessage ?? t('sscds:filters.count.error');
+    placeholder ?? t('sscds|filters.count.placeholder');
+  const resolvedErrorMessage = errorMessage ?? t('sscds|filters.count.error');
 
   const handleKeyPress = (event) => {
     if (!/[0-9]/.test(event.key)) {

diff --git a/src/components/Filters/components/Input/Input.tsx b/src/components/Filters/components/Input/Input.tsx
@@ -20,7 +20,7 @@ const Input = ({
 }: InputProps) => {
   const { t } = useSafeTranslation();
   const resolvedPlaceholder =
-    placeholder ?? t('sscds:filters.input.placeholder');
+    placeholder ?? t('sscds|filters.input.placeholder');
   const handleOnValidate = (event) => {
     const { target } = event;
     const hasError = onValidate(target) && isNonEmptyString(target.value);

diff --git a/src/components/Filters/components/Integer/Integer.tsx b/src/components/Filters/components/Integer/Integer.tsx
@@ -18,8 +18,8 @@ const Integer = ({
 }: NumberProps) => {
   const { t } = useSafeTranslation();
   const resolvedPlaceholder =
-    placeholder ?? t('sscds:filters.integer.placeholder');
-  const resolvedErrorMessage = errorMessage ?? t('sscds:filters.integer.error');
+    placeholder ?? t('sscds|filters.integer.placeholder');
+  const resolvedErrorMessage = errorMessage ?? t('sscds|filters.integer.error');
   const handleKeyPress = (event) => {
     if (!/-|[0-9]/.test(event.key)) {
       event.preventDefault();

diff --git a/src/components/Filters/components/Number/Number.tsx b/src/components/Filters/components/Number/Number.tsx
@@ -18,8 +18,8 @@ const Number = ({
 }: NumberProps) => {
   const { t } = useSafeTranslation();
   const resolvedPlaceholder =
-    placeholder ?? t('sscds:filters.number.placeholder');
-  const resolvedErrorMessage = errorMessage ?? t('sscds:filters.number.error');
+    placeholder ?? t('sscds|filters.number.placeholder');
+  const resolvedErrorMessage = errorMessage ?? t('sscds|filters.number.error');
   const handleOnChange = (event) => {
     onChange(event);
     const hasError =

diff --git a/src/components/Filters/components/TagsInput/TagsInput.tsx b/src/components/Filters/components/TagsInput/TagsInput.tsx
@@ -19,7 +19,7 @@ const TagsInput = ({
 }: TagsInputProps) => {
   const { t } = useSafeTranslation();
   const resolvedPlaceholder =
-    placeholder ?? t('sscds:filters.tagsInput.placeholder');
+    placeholder ?? t('sscds|filters.tagsInput.placeholder');
   const handleOnValidate = (event) => {
     const { target } = event;
     const hasError = onValidate(target) && isNonEmptyString(target.value);

diff --git a/src/types/definitions/i18next.d.ts b/src/types/definitions/i18next.d.ts
@@ -3,7 +3,8 @@ import en from '../../locales/en-US';
 
 declare module 'i18next' {
   interface CustomTypeOptions {
-    defaultNS: 'sscds';
+    defaultNS: ['sscds'];
+    nsSeparator: '|';
     resources: {
       sscds: typeof en;
     };