Fix: Navigate to design page on settings save

packages/ui-tests/stories/settings/SettingsForm.stories.tsx

@@ -1,9 +1,18 @@
 import { SettingsForm } from '@kaoto/kaoto';
 import { SettingsProvider, ReloadContext, DefaultSettingsAdapter } from '@kaoto/kaoto/testing';
 import { Meta, StoryFn } from '@storybook/react';
+import { reactRouterOutlet, reactRouterParameters, withRouter } from 'storybook-addon-remix-react-router';
 
 export default {
   title: 'Settings/SettingsForm',
+  decorators: [withRouter],
+  parameters: {
+    reactRouter: reactRouterParameters({
+      routing: reactRouterOutlet({
+        path: '*',
+      }),
+    }),
+  },
   component: SettingsForm,
 } as Meta<typeof SettingsForm>;
 

packages/ui/src/assets/settingsSchema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/draft-04/schema#",
+  "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "additionalProperties": false,
   "description": "JSON Schema for Kaoto configuration",

packages/ui/src/components/Settings/SettingsForm.test.tsx

@@ -1,79 +1,59 @@
-import { act, fireEvent, render } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import { AbstractSettingsAdapter, DefaultSettingsAdapter } from '../../models/settings';
 import { ReloadContext, SettingsProvider } from '../../providers';
 import { SettingsForm } from './SettingsForm';
+import { MemoryRouter } from 'react-router-dom';
 
 describe('SettingsForm', () => {
   let reloadPage: jest.Mock;
   let settingsAdapter: AbstractSettingsAdapter;
 
+  const wrapper = ({ children }: { children: React.ReactNode }) => {
+    return (
+      <MemoryRouter>
+        <ReloadContext.Provider value={{ reloadPage, lastRender: 0 }}>
+          <SettingsProvider adapter={settingsAdapter}>{children}</SettingsProvider>
+        </ReloadContext.Provider>
+      </MemoryRouter>
+    );
+  };
+
   beforeEach(() => {
     reloadPage = jest.fn();
     settingsAdapter = new DefaultSettingsAdapter();
+    render(<SettingsForm />, { wrapper });
   });
 
   it('should render', () => {
-    const wrapper = render(
-      <ReloadContext.Provider value={{ reloadPage, lastRender: 0 }}>
-        <SettingsProvider adapter={settingsAdapter}>
-          <SettingsForm />
-        </SettingsProvider>
-      </ReloadContext.Provider>,
-    );
-
-    expect(wrapper.getByTestId('settings-form')).toMatchSnapshot();
+    expect(screen.getByTestId('settings-form')).toMatchSnapshot();
   });
 
   it('should update settings upon clicking save', () => {
-    const wrapper = render(
-      <ReloadContext.Provider value={{ reloadPage, lastRender: 0 }}>
-        <SettingsProvider adapter={settingsAdapter}>
-          <SettingsForm />
-        </SettingsProvider>
-      </ReloadContext.Provider>,
-    );
-
     act(() => {
-      const input = wrapper.getByLabelText('Camel Catalog URL');
+      const input = screen.getByLabelText('Camel Catalog URL');
       fireEvent.change(input, { target: { value: 'http://localhost:8080' } });
     });
 
     act(() => {
-      const button = wrapper.getByTestId('settings-form-save-btn');
+      const button = screen.getByTestId('settings-form-save-btn');
       fireEvent.click(button);
     });
 
     expect(settingsAdapter.getSettings().catalogUrl).toBe('http://localhost:8080');
   });
 
-  it('should not update settings if the save button was clicked', () => {
-    const wrapper = render(
-      <ReloadContext.Provider value={{ reloadPage, lastRender: 0 }}>
-        <SettingsProvider adapter={settingsAdapter}>
-          <SettingsForm />
-        </SettingsProvider>
-      </ReloadContext.Provider>,
-    );
-
+  it('should not update settings if the save button was not clicked', () => {
     act(() => {
-      const input = wrapper.getByLabelText('Camel Catalog URL');
+      const input = screen.getByLabelText('Camel Catalog URL');
       fireEvent.change(input, { target: { value: 'http://localhost:8080' } });
     });
 
     expect(settingsAdapter.getSettings().catalogUrl).not.toBe('http://localhost:8080');
   });
 
   it('should reload the page upon clicking save', () => {
-    const wrapper = render(
-      <ReloadContext.Provider value={{ reloadPage, lastRender: 0 }}>
-        <SettingsProvider adapter={settingsAdapter}>
-          <SettingsForm />
-        </SettingsProvider>
-      </ReloadContext.Provider>,
-    );
-
     act(() => {
-      const button = wrapper.getByTestId('settings-form-save-btn');
+      const button = screen.getByTestId('settings-form-save-btn');
       fireEvent.click(button);
     });
 

packages/ui/src/components/Settings/SettingsForm.tsx

@@ -7,9 +7,12 @@ import { SettingsModel } from '../../models/settings';
 import { SchemaBridgeProvider } from '../../providers/schema-bridge.provider';
 import { SettingsContext } from '../../providers/settings.provider';
 import { CustomAutoForm } from '../Form/CustomAutoForm';
+import { useNavigate } from 'react-router-dom';
+import { Links } from '../../router/links.models';
 
 export const SettingsForm: FunctionComponent = () => {
   const settingsAdapter = useContext(SettingsContext);
+  const navigate = useNavigate();
   const { lastRender, reloadPage } = useReloadContext();
   const [settings, setSettings] = useState(settingsAdapter.getSettings());
 
@@ -20,6 +23,7 @@ export const SettingsForm: FunctionComponent = () => {
   const onSave = useCallback(() => {
     settingsAdapter.saveSettings(settings);
     reloadPage();
+    navigate(Links.Home);
   }, [reloadPage, settings, settingsAdapter]);
 
   return (