add hook + test

frontend/packages/ux-editor/src/components/config/editModal/EditBooleanValue.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Switch } from '@digdir/designsystemet-react';
 import type { IGenericEditComponent } from '../componentConfig';
-import { useText } from '../../../hooks';
+import { useText, useComponentPropertyLabel, useComponentPropertyHelpText } from '../../../hooks';
 import { FormField } from '../../FormField';
-import { useComponentPropertyLabel } from '../../../hooks/useComponentPropertyLabel';
 
 export interface EditBooleanValueProps extends IGenericEditComponent {
   propertyKey: string;
@@ -20,6 +19,7 @@ export const EditBooleanValue = ({
 }: EditBooleanValueProps) => {
   const t = useText();
   const componentPropertyLabel = useComponentPropertyLabel();
+  const componentPropertyHelpText = useComponentPropertyHelpText();
 
   const handleChange = () => {
     handleComponentChange({
@@ -44,7 +44,7 @@ export const EditBooleanValue = ({
       helpText={
         isValueExpression(component[propertyKey])
           ? t('ux_editor.component_properties.config_is_expression_message')
-          : helpText
+          : helpText || componentPropertyHelpText(propertyKey)
       }
       renderField={({ fieldProps }) => {
         return (

frontend/packages/ux-editor/src/hooks/index.ts

@@ -12,3 +12,4 @@ export { useValidateComponent } from './useValidateComponent';
 export { useComponentPropertyLabel } from './useComponentPropertyLabel';
 export { useAppContext } from './useAppContext';
 export { useGetLayoutSetByName } from './useGetLayoutSetByName';
+export { useComponentPropertyHelpText } from './useComponentPropertyHelpText';

frontend/packages/ux-editor/src/hooks/useComponentPropertyHelpText.test.ts

@@ -0,0 +1,37 @@
+import { renderHook } from '@testing-library/react';
+import { useComponentPropertyHelpText } from './useComponentPropertyHelpText';
+import { textMock } from '@studio/testing/mocks/i18nMock';
+import type { KeyValuePairs } from 'app-shared/types/KeyValuePairs';
+
+const somePropertyName = 'undefinedKey';
+
+const customTextMockToHandleUndefined = (
+  keys: string | string[],
+  variables?: KeyValuePairs<string>,
+) => {
+  const key = Array.isArray(keys) ? keys[0] : keys;
+  if (key === `ux_editor.component_properties_help_text.${somePropertyName}`) return key;
+  return variables
+    ? '[mockedText(' + key + ', ' + JSON.stringify(variables) + ')]'
+    : '[mockedText(' + key + ')]';
+};
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: customTextMockToHandleUndefined,
+  }),
+}));
+
+describe('useComponentPropertyHelpText', () => {
+  it('Returns a function that returns the help text', () => {
+    const result = renderHook(() => useComponentPropertyHelpText()).result.current;
+    const propertyHelpText = result('test');
+    expect(propertyHelpText).toEqual(textMock('ux_editor.component_properties_help_text.test'));
+  });
+
+  it('Returns a function that returns undefined if there was no text key for the help text', () => {
+    const result = renderHook(() => useComponentPropertyHelpText()).result.current;
+    const propertyHelpText = result(somePropertyName);
+    expect(propertyHelpText).toEqual(undefined);
+  });
+});

frontend/packages/ux-editor/src/hooks/useComponentPropertyHelpText.ts

@@ -0,0 +1,16 @@
+import { useTranslation } from 'react-i18next';
+import { useCallback } from 'react';
+
+export const useComponentPropertyHelpText = () => {
+  const { t } = useTranslation();
+
+  return useCallback(
+    (propertyKey: string): string | undefined => {
+      const translationKey: string = `ux_editor.component_properties_help_text.${propertyKey}`;
+      const translation = t(translationKey);
+      console.log(translation, translationKey);
+      return translation !== translationKey ? translation : undefined;
+    },
+    [t],
+  );
+};