chore(): add eslint-plugin-react-google-translate to posthog app

.eslintrc.js

@@ -50,6 +50,7 @@ module.exports = {
         'simple-import-sort',
         'import',
         'unused-imports',
+        'react-google-translate',
     ],
     rules: {
         'react-hooks/rules-of-hooks': 'error',
@@ -273,6 +274,8 @@ module.exports = {
             },
         ],
         'no-else-return': 'warn',
+        'react-google-translate/no-conditional-text-nodes-with-siblings': 'warn',
+        'react-google-translate/no-return-text-nodes': 'warn',
     },
     overrides: [
         {

frontend/src/scenes/feature-flags/FeatureFlag.tsx

@@ -545,7 +545,8 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element {
                                                                 : null
                                                         }
                                                     >
-                                                        {featureFlag.deleted ? 'Restore' : 'Delete'} feature flag
+                                                        <span>{featureFlag.deleted ? 'Restore' : 'Delete'}</span>{' '}
+                                                        <span>feature flag</span>
                                                     </LemonButton>
                                                 </>
                                             }
@@ -938,7 +939,7 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
                                 <code>true</code>
                             </strong>
                         )}{' '}
-                        if they match one or more release condition groups.
+                        <span>if they match one or more release condition groups.</span>
                     </div>
                 </div>
             )}

frontend/src/scenes/feature-flags/FeatureFlagReleaseConditions.tsx

@@ -203,21 +203,26 @@ export function FeatureFlagReleaseConditions({
                                             (val, idx) => (
                                                 <LemonSnack key={idx}>
                                                     {val}
-                                                    {isPropertyFilterWithOperator(property) &&
-                                                    ['is_date_before', 'is_date_after'].includes(property.operator) &&
-                                                    dateStringToComponents(String(val)) // check it's a relative date
-                                                        ? ` ( ${dateFilterToText(
-                                                              String(val),
-                                                              undefined,
-                                                              '',
-                                                              [],
-                                                              false,
-                                                              String(val).slice(-1) === 'h'
-                                                                  ? 'MMMM D, YYYY HH:mm:ss'
-                                                                  : 'MMMM D, YYYY',
-                                                              true
-                                                          )} )`
-                                                        : ''}
+                                                    <span>
+                                                        {isPropertyFilterWithOperator(property) &&
+                                                        ['is_date_before', 'is_date_after'].includes(
+                                                            property.operator
+                                                        ) &&
+                                                        dateStringToComponents(String(val)) // check it's a relative date
+                                                            ? ` ( ${dateFilterToText(
+                                                                  String(val),
+                                                                  undefined,
+                                                                  '',
+                                                                  [],
+                                                                  false,
+                                                                  String(val).slice(-1) === 'h'
+                                                                      ? 'MMMM D, YYYY HH:mm:ss'
+                                                                      : 'MMMM D, YYYY',
+                                                                  true
+                                                              )}{' '}
+                                                            )`
+                                                            : ''}
+                                                    </span>
                                                 </LemonSnack>
                                             )
                                         )
@@ -279,8 +284,10 @@ export function FeatureFlagReleaseConditions({
                         >
                             <div className="text-sm ">
                                 Rolled out to{' '}
-                                <b>{group.rollout_percentage != null ? group.rollout_percentage : 100}%</b> of{' '}
-                                <b>{aggregationTargetName}</b> in this set.{' '}
+                                {group.rollout_percentage != null ? <b>{group.rollout_percentage}</b> : <b>100</b>}
+                                <b>%</b>
+                                <span> of </span>
+                                <b>{aggregationTargetName}</b> <span>in this set.</span>
                             </div>
                         </LemonTag>
                     ) : (
@@ -344,7 +351,7 @@ export function FeatureFlagReleaseConditions({
                                     }
                                     return ''
                                 })()}{' '}
-                                of total {aggregationTargetName}.
+                                <span>of total {aggregationTargetName}.</span>
                             </div>
                         </div>
                     )}

package.json

@@ -281,6 +281,7 @@
         "eslint-plugin-jest": "^28.6.0",
         "eslint-plugin-posthog": "link:./eslint-rules",
         "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-google-translate": "^0.0.114",
         "eslint-plugin-react-hooks": "^4.6.2",
         "eslint-plugin-simple-import-sort": "^10.0.0",
         "eslint-plugin-storybook": "^0.6.15",