General configuration link button

.storybook/decorators.tsx

@@ -8,13 +8,21 @@ import {fn} from 'storybook/test';
 import {BASE_URL, mswWorker} from '@/api-mocks';
 import FormLayout from '@/components/layout/FormLayout';
 import AdminSettingsProvider from '@/context/AdminSettingsProvider';
+import type {AdminSettings} from '@/context/context';
 import RouterErrorBoundary from '@/errors/RouterErrorBoundary';
 import {sessionExpiresAt} from '@/guard/session/session-expiry';
 import {formLoader} from '@/queryClient';
 
 export const withAdminSettingsProvider: Decorator = (Story, {parameters}) => (
   <AdminSettingsProvider
     apiBaseUrl={parameters?.adminSettings?.apiBaseUrl ?? BASE_URL}
+    djangoUrls={
+      parameters?.adminSettings?.djangoUrls ??
+      ({
+        generalConfiguration: 'http://localhost:8000/admin/config/globalconfiguration/',
+        adminLogin: 'http://localhost:8000/admin/classic-login/',
+      } satisfies AdminSettings['djangoUrls'])
+    }
     environmentInfo={{
       label: parameters?.adminSettings?.environmentInfo?.label ?? 'storybook-test',
       showBadge: parameters?.adminSettings?.environmentInfo?.showBadge ?? true,

i18n/compiled/en.json

@@ -91,6 +91,12 @@
       "value": "Your session has expired."
     }
   ],
+  "OhINq5": [
+    {
+      "type": 0,
+      "value": "View general configuration"
+    }
+  ],
   "Qroj81": [
     {
       "type": 0,

i18n/compiled/nl.json

@@ -91,6 +91,12 @@
       "value": "Je sessie is verlopen."
     }
   ],
+  "OhINq5": [
+    {
+      "type": 0,
+      "value": "Bekijk algemene instellingen"
+    }
+  ],
   "Qroj81": [
     {
       "type": 0,

i18n/messages/en.json

@@ -49,6 +49,11 @@
     "description": "Session expiry notice - expired",
     "originalDefault": "Your session has expired."
   },
+  "OhINq5": {
+    "defaultMessage": "View general configuration",
+    "description": "General configuration button text",
+    "originalDefault": "View general configuration"
+  },
   "Qroj81": {
     "defaultMessage": "Forms",
     "description": "Route breadcrumb label for forms overview",

i18n/messages/nl.json

@@ -50,6 +50,11 @@
     "description": "Session expiry notice - expired",
     "originalDefault": "Your session has expired."
   },
+  "OhINq5": {
+    "defaultMessage": "Bekijk algemene instellingen",
+    "description": "General configuration button text",
+    "originalDefault": "View general configuration"
+  },
   "Qroj81": {
     "defaultMessage": "Formulieren",
     "description": "Route breadcrumb label for forms overview",

src/AdminUI.tsx

@@ -17,19 +17,30 @@ interface AdminUIProps {
    * Configuration for the Open Forms API base URL.
    */
   apiBaseUrl: AdminSettings['apiBaseUrl'];
+  /**
+   * The configuration of the Open Forms Django URLs.
+   *
+   * These urls should be constructed using the python `reverse` function to ensure
+   * that the urls are correct for the current environment.
+   */
+  djangoUrls: AdminSettings['djangoUrls'];
 }
 
 /**
  * Main component to render the Open Forms Admin UI.
  */
-const AdminUI: React.FC<AdminUIProps> = ({environmentInfo, apiBaseUrl}) => {
+const AdminUI: React.FC<AdminUIProps> = ({environmentInfo, apiBaseUrl, djangoUrls}) => {
   const router = createBrowserRouter(routes, {
     basename: '/admin-ui',
   });
 
   return (
     <React.StrictMode>
-      <AdminSettingsProvider environmentInfo={environmentInfo} apiBaseUrl={apiBaseUrl}>
+      <AdminSettingsProvider
+        environmentInfo={environmentInfo}
+        apiBaseUrl={apiBaseUrl}
+        djangoUrls={djangoUrls}
+      >
         <RouterProvider router={router} />
       </AdminSettingsProvider>
     </React.StrictMode>

src/components/button/GeneralConfigurationButton.mdx

@@ -0,0 +1,13 @@
+import {Canvas, Meta} from '@storybook/addon-docs/blocks';
+
+import * as GeneralConfigurationButtonStories from './GeneralConfigurationButton.stories';
+
+<Meta of={GeneralConfigurationButtonStories} />
+
+# General Configuration Button
+
+The `GeneralConfigurationButton` component can be used to navigate to the general configuration page
+of the Open Forms admin. It implements a regular HTML Anchor element and uses the `AdminSettings`
+defined `djangoUrls.generalConfiguration` as the target URL.
+
+<Canvas of={GeneralConfigurationButtonStories.Default} />

src/components/button/GeneralConfigurationButton.stories.tsx

@@ -0,0 +1,35 @@
+import type {Meta, StoryObj} from '@storybook/react-vite';
+import {expect, within} from 'storybook/test';
+
+import GeneralConfigurationButton from './GeneralConfigurationButton';
+
+export default {
+  title: 'Internal API / Button / General Configuration Button',
+  component: GeneralConfigurationButton,
+} satisfies Meta<typeof GeneralConfigurationButton>;
+
+type Story = StoryObj<typeof GeneralConfigurationButton>;
+
+export const Default: Story = {
+  parameters: {
+    adminSettings: {
+      djangoUrls: {
+        generalConfiguration: 'http://localhost:8000/admin/config/globalconfiguration/',
+      },
+    },
+  },
+  play: ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    const generalConfigurationButton = canvas.getByRole('link', {
+      name: 'View general configuration',
+    });
+
+    // Expect the button to be shown and it uses djangoUrls.generalConfiguration url
+    expect(generalConfigurationButton).toBeVisible();
+    expect(generalConfigurationButton).toHaveAttribute(
+      'href',
+      'http://localhost:8000/admin/config/globalconfiguration/'
+    );
+  },
+};

src/components/button/GeneralConfigurationButton.tsx

@@ -0,0 +1,20 @@
+import {ButtonLink, Outline} from '@maykin-ui/admin-ui';
+import {FormattedMessage} from 'react-intl';
+
+import {useAdminSettings} from '@/hooks/useAdminSettings';
+
+const GeneralConfigurationButton = () => {
+  const {djangoUrls} = useAdminSettings();
+
+  return (
+    <ButtonLink variant="secondary" href={djangoUrls.generalConfiguration}>
+      <FormattedMessage
+        description="General configuration button text"
+        defaultMessage="View general configuration"
+      />
+      <Outline.ArrowRightIcon />
+    </ButtonLink>
+  );
+};
+
+export default GeneralConfigurationButton;

src/components/button/index.ts

@@ -0,0 +1 @@
+export {default as GeneralConfigurationButton} from './GeneralConfigurationButton';

src/context/AdminSettingsProvider.tsx

@@ -3,10 +3,11 @@ import type {AdminSettings} from './context';
 
 const AdminSettingsProvider: React.FC<React.PropsWithChildren<AdminSettings>> = ({
   apiBaseUrl,
+  djangoUrls,
   environmentInfo,
   children,
 }) => (
-  <AdminSettingsContext.Provider value={{environmentInfo, apiBaseUrl}}>
+  <AdminSettingsContext.Provider value={{environmentInfo, djangoUrls, apiBaseUrl}}>
     {children}
   </AdminSettingsContext.Provider>
 );

src/context/context.ts

@@ -18,11 +18,19 @@ export interface AdminSettings {
    * The base URL of the Open Forms API.
    */
   apiBaseUrl: string;
+  /**
+   * The configuration of the Open Forms Django URLs.
+   */
+  djangoUrls: {
+    generalConfiguration: string;
+    adminLogin: string;
+  };
 }
 
 const AdminSettingsContext = React.createContext<AdminSettings>({
   environmentInfo: {label: '', showBadge: true},
   apiBaseUrl: '',
+  djangoUrls: {generalConfiguration: '', adminLogin: ''},
 });
 
 AdminSettingsContext.displayName = 'AdminSettingsContext';

src/errors/NotAuthenticatedError.tsx

@@ -2,6 +2,9 @@ import {A, Banner, Body} from '@maykin-ui/admin-ui';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {useLocation} from 'react-router';
 
+import {useAdminSettings} from '@/hooks/useAdminSettings';
+import {getLoginUrl} from '@/utils/url';
+
 import ErrorMessage from './ErrorMessage';
 import type {NotAuthenticatedException} from './exceptions';
 
@@ -12,7 +15,8 @@ interface NotAuthenticatedErrorProps {
 const NotAuthenticatedError: React.FC<NotAuthenticatedErrorProps> = ({error}) => {
   const intl = useIntl();
   const location = useLocation();
-  const params = new URLSearchParams({next: location.pathname});
+  const {djangoUrls} = useAdminSettings();
+  const adminLoginUrl = getLoginUrl(djangoUrls, location.pathname);
 
   return (
     <>
@@ -31,7 +35,7 @@ const NotAuthenticatedError: React.FC<NotAuthenticatedErrorProps> = ({error}) =>
       <ErrorMessage error={error} />
 
       <Body>
-        <A href={`/admin/login/?${params}`}>
+        <A href={adminLoginUrl}>
           <FormattedMessage
             description="'Go to login page' link text"
             defaultMessage="Go to the login page"

src/guard/AuthenticationRequired.spec.tsx

@@ -21,7 +21,14 @@ import {sessionExpiresAt} from './session/session-expiry';
 vi.spyOn(redirect, 'toLogin').mockImplementation(vi.fn());
 
 const Wrapper: React.FC<React.PropsWithChildren> = ({children}) => (
-  <AdminSettingsProvider apiBaseUrl={BASE_URL} environmentInfo={{label: 'of-dev', showBadge: true}}>
+  <AdminSettingsProvider
+    apiBaseUrl={BASE_URL}
+    djangoUrls={{
+      generalConfiguration: 'http://localhost:8000/admin/config/globalconfiguration/',
+      adminLogin: 'http://localhost:8000/admin/classic-login/',
+    }}
+    environmentInfo={{label: 'of-dev', showBadge: true}}
+  >
     <IntlProvider locale="en">{children}</IntlProvider>
   </AdminSettingsProvider>
 );
@@ -212,7 +219,10 @@ test('User is not authenticated in application and not on server', async () => {
   // Expect the redirect.toLogin function and the mock api to have been called
   await waitFor(() => {
     // The `toLogin` function should be called with the expected redirect path.
-    expect(redirect.toLogin).toHaveBeenCalledWith('/required-auth');
+    expect(redirect.toLogin).toHaveBeenCalledWith(
+      {adminLogin: expect.anything(), generalConfiguration: expect.anything()},
+      '/required-auth'
+    );
 
     expect(spy).toHaveBeenCalled();
   });

src/guard/AuthenticationRequired.tsx

@@ -9,7 +9,7 @@ import SessionStatus from './session/SessionStatus';
 import {sessionExpiresAt} from './session/session-expiry';
 
 const AuthenticationRequired: React.FC<React.PropsWithChildren> = ({children}) => {
-  const {apiBaseUrl} = useAdminSettings();
+  const {apiBaseUrl, djangoUrls} = useAdminSettings();
   const location = useLocation();
   const [sessionExpiry] = sessionExpiresAt.useState();
   const {date, authFailure} = sessionExpiry;
@@ -21,11 +21,11 @@ const AuthenticationRequired: React.FC<React.PropsWithChildren> = ({children}) =
       apiCall(`${apiBaseUrl}accounts/me`).then(response => {
         // If the user is not authenticated, redirect to the login page.
         if (response.status === 401) {
-          redirect.toLogin(location.pathname);
+          redirect.toLogin(djangoUrls, location.pathname);
         }
       });
     }
-  }, [apiBaseUrl, authFailure, date, location.pathname]);
+  }, [apiBaseUrl, authFailure, date, djangoUrls, location.pathname]);
 
   return <SessionStatus>{children}</SessionStatus>;
 };

src/queryClient/form.spec.tsx

@@ -19,7 +19,14 @@ import {formLoader, getFormDetailsQueryKey, useFormMutation} from '@/queryClient
 import type {Form} from '@/types/form';
 
 const AppWrapper: React.FC<React.PropsWithChildren> = ({children}) => (
-  <AdminSettingsProvider apiBaseUrl={BASE_URL} environmentInfo={{label: 'of-dev', showBadge: true}}>
+  <AdminSettingsProvider
+    apiBaseUrl={BASE_URL}
+    djangoUrls={{
+      generalConfiguration: 'http://localhost:8000/admin/config/globalconfiguration/',
+      adminLogin: 'http://localhost:8000/admin/classic-login/',
+    }}
+    environmentInfo={{label: 'of-dev', showBadge: true}}
+  >
     <IntlProvider locale="en">{children}</IntlProvider>
   </AdminSettingsProvider>
 );

src/utils/redirect.ts

@@ -1,11 +1,9 @@
-// We wrap redirect functions inside an object because ES module named exports are
-// immutable and cannot be spied on in Vitest. Spying on object methods is supported
-// since they are configurable.
-// See: https://vitest.dev/guide/mocking.html#mocking-modules
+import type {AdminSettings} from '@/context/context';
+import {getLoginUrl} from '@/utils/url';
+
 export const redirect = {
   // Redirect to the default `/admin/login` screen
-  toLogin: (nextUrl: string) => {
-    const params = new URLSearchParams({next: nextUrl});
-    window.location.assign(`${window.location.origin}/admin/login/?${params}`);
+  toLogin: (djangoUrls: AdminSettings['djangoUrls'], nextUrl: string) => {
+    window.location.assign(getLoginUrl(djangoUrls, nextUrl));
   },
 };

src/utils/url.ts

@@ -0,0 +1,6 @@
+import type {AdminSettings} from '@/context/context';
+
+export const getLoginUrl = (djangoUrls: AdminSettings['djangoUrls'], nextUrl: string) => {
+  const params = new URLSearchParams({next: nextUrl});
+  return `${djangoUrls.adminLogin}?${params}`;
+};