Fix: Navigate to design page on settings save

KaotoIO · Jan 2, 2025 · abb9a3d · abb9a3d
1 parent 6ca0112
commit abb9a3d
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 21 deletions.
diff --git a/packages/ui-tests/stories/settings/SettingsForm.stories.tsx b/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>;
 

diff --git a/packages/ui/src/assets/settingsSchema.json b/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",

diff --git a/packages/ui/src/components/Settings/SettingsForm.test.tsx b/packages/ui/src/components/Settings/SettingsForm.test.tsx
@@ -2,6 +2,7 @@ import { act, fireEvent, render } 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;
@@ -14,23 +15,27 @@ describe('SettingsForm', () => {
 
   it('should render', () => {
     const wrapper = render(
-      <ReloadContext.Provider value={{ reloadPage, lastRender: 0 }}>
-        <SettingsProvider adapter={settingsAdapter}>
-          <SettingsForm />
-        </SettingsProvider>
-      </ReloadContext.Provider>,
+      <MemoryRouter>
+        <ReloadContext.Provider value={{ reloadPage, lastRender: 0 }}>
+          <SettingsProvider adapter={settingsAdapter}>
+            <SettingsForm />
+          </SettingsProvider>
+        </ReloadContext.Provider>
+      </MemoryRouter>,
     );
 
     expect(wrapper.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>,
+      <MemoryRouter>
+        <ReloadContext.Provider value={{ reloadPage, lastRender: 0 }}>
+          <SettingsProvider adapter={settingsAdapter}>
+            <SettingsForm />
+          </SettingsProvider>
+        </ReloadContext.Provider>
+      </MemoryRouter>,
     );
 
     act(() => {
@@ -48,11 +53,13 @@ describe('SettingsForm', () => {
 
   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>,
+      <MemoryRouter>
+        <ReloadContext.Provider value={{ reloadPage, lastRender: 0 }}>
+          <SettingsProvider adapter={settingsAdapter}>
+            <SettingsForm />
+          </SettingsProvider>
+        </ReloadContext.Provider>
+      </MemoryRouter>,
     );
 
     act(() => {
@@ -65,11 +72,13 @@ describe('SettingsForm', () => {
 
   it('should reload the page upon clicking save', () => {
     const wrapper = render(
-      <ReloadContext.Provider value={{ reloadPage, lastRender: 0 }}>
-        <SettingsProvider adapter={settingsAdapter}>
-          <SettingsForm />
-        </SettingsProvider>
-      </ReloadContext.Provider>,
+      <MemoryRouter>
+        <ReloadContext.Provider value={{ reloadPage, lastRender: 0 }}>
+          <SettingsProvider adapter={settingsAdapter}>
+            <SettingsForm />
+          </SettingsProvider>
+        </ReloadContext.Provider>
+      </MemoryRouter>,
     );
 
     act(() => {

diff --git a/packages/ui/src/components/Settings/SettingsForm.tsx b/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 (