Merge branch 'master' into feat/playwright

frontend/packages/shared/src/components/GiteaHeader/VersionControlButtons/VersionControlButtons.tsx

@@ -105,6 +105,10 @@ export const VersionControlButtons = ({ hasPushRight, org, app }: IVersionContro
 
   const shareChanges = async (currentTarget: any) => {
     setSyncModalAnchorEl(currentTarget);
+    setModalState({
+      ...initialModalState,
+      isLoading: true,
+    });
     const { data: repoStatusResult } = await refetchRepoStatus();
     if (!hasLocalChanges(repoStatusResult)) {
       setModalState({

frontend/packages/text-editor/src/TextEntry.test.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { act, screen } from '@testing-library/react';
+import { TextEntry, TextEntryProps } from './TextEntry';
+import { renderWithMockStore } from '../../ux-editor/src/testing/mocks';
+import userEvent from '@testing-library/user-event';
+import { textMock } from '../../../testing/mocks/i18nMock';
+
+const mockUpsertTextResource = jest.fn();
+const textEntryValue = '';
+const APP_NAME = 'appName';
+const textId = APP_NAME;
+
+describe('TextEntry', () => {
+  afterEach(jest.clearAllMocks);
+
+  it('should render the TextEntry component', () => {
+    render();
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+  });
+
+  it("should not call upsertTextResource when textEntryValue is '' ", async () => {
+    const user = userEvent.setup();
+    render();
+    const inputText1 = screen.getByRole('textbox', { name: 'nb translation' });
+    await act(() => user.clear(inputText1));
+    expect(mockUpsertTextResource).toHaveBeenCalledTimes(0);
+  });
+
+  it("should return nothing when textEntryValue is '' ", async () => {
+    const user = userEvent.setup();
+    render();
+    const inputText2 = screen.getByRole('textbox', { name: 'nb translation' });
+    await act(() => user.clear(inputText2));
+    expect(textEntryValue).toEqual('');
+  });
+
+  it('should toggle validation error message when textEntryValue changes from empty to has value', async () => {
+    const user = userEvent.setup();
+    render();
+    const inputText3 = screen.getByRole('textbox', { name: 'nb translation' });
+    await act(() => user.clear(inputText3));
+    expect(textId).toEqual(APP_NAME);
+    expect(screen.getByText(textMock('validation_errors.required'))).toBeInTheDocument();
+    await act(() => user.type(inputText3, 'Hello'));
+    expect(screen.queryByText(textMock('validation_errors.required'))).not.toBeInTheDocument();
+  });
+
+  it('shouls not display validation error message when textId equal to APP_NAME but textEntryValue is not empty', async () => {
+    const user = userEvent.setup();
+    render();
+    const inputText4 = screen.getByRole('textbox', { name: 'nb translation' });
+    await act(() => user.type(inputText4, 'Hello'));
+    expect(textId).toEqual(APP_NAME);
+    expect(screen.queryByText(textMock('validation_errors.required'))).not.toBeInTheDocument();
+  });
+});
+
+const render = async (props: Partial<TextEntryProps> = {}) => {
+  const allProps: TextEntryProps = {
+    textId: 'appName',
+    lang: 'nb',
+    translation: 'Hello',
+    upsertTextResource: mockUpsertTextResource,
+    className: 'text-entry',
+    ...props,
+  };
+
+  return renderWithMockStore()(<TextEntry {...allProps} />);
+};

frontend/packages/text-editor/src/TextEntry.tsx

@@ -1,8 +1,11 @@
 import React, { useState } from 'react';
 import { TextTableRowEntry, UpsertTextResourceMutation } from './types';
-import { LegacyTextArea } from '@digdir/design-system-react';
+import { Textarea } from '@digdir/design-system-react';
 import { Variables } from './Variables';
 import { useAutoSizeTextArea } from './hooks/useAutoSizeTextArea';
+import { APP_NAME } from 'app-shared/constants';
+import { FormField } from '../../shared/src/components/FormField/FormField';
+import { useTranslation } from 'react-i18next';
 
 export interface TextEntryProps extends TextTableRowEntry {
   textId: string;
@@ -19,25 +22,41 @@ export const TextEntry = ({
 }: TextEntryProps) => {
   const [textEntryValue, setTextEntryValue] = useState(translation);
   const textareaRef = useAutoSizeTextArea(textEntryValue);
+  const { t } = useTranslation();
 
   const variables = [];
 
   const handleTextEntryChange = (e: React.ChangeEvent<HTMLTextAreaElement>) =>
     setTextEntryValue(e.currentTarget.value);
 
-  const handleTextEntryBlur = () =>
+  const handleTextEntryBlur = () => {
+    if (textEntryValue === '') return;
     upsertTextResource({ language: lang, translation: textEntryValue, textId });
+  };
 
   return (
     <div className={className}>
-      <LegacyTextArea
-        aria-label={lang + ' translation'}
-        value={textEntryValue}
-        onBlur={handleTextEntryBlur}
-        onChange={handleTextEntryChange}
-        ref={textareaRef}
-        resize={'vertical'}
-      />
+      <FormField
+        value={textId}
+        customValidationRules={() => {
+          if (textId === APP_NAME && textEntryValue === '') return 'TextSouldNotBeEmpty';
+          return '';
+        }}
+        customValidationMessages={(errorCode: string) => {
+          if (errorCode === 'TextSouldNotBeEmpty') return t('validation_errors.required');
+        }}
+        renderField={({ fieldProps }) => (
+          <Textarea
+            {...fieldProps}
+            aria-label={lang + ' translation'}
+            value={textEntryValue}
+            onBlur={handleTextEntryBlur}
+            onChange={handleTextEntryChange}
+            ref={textareaRef}
+            size='small'
+          />
+        )}
+      ></FormField>
       <Variables variables={variables} />
     </div>
   );

frontend/packages/text-editor/src/TextRow.module.css

@@ -19,6 +19,6 @@
 }
 
 .textEntryComponent textArea {
-  margin: 10px 0 10px 0;
+  margin: 10px 0px 0px 0;
   min-width: 340px;
 }

frontend/packages/text-editor/src/TextRow.test.tsx

@@ -105,7 +105,7 @@ describe('TextRow', () => {
         },
       ],
     });
-    const textFields = await screen.findAllByTestId('InputWrapper');
+    const textFields = await screen.findAllByRole('textbox');
     expect(textFields.length).toBe(3);
   });