feat(formatter/text): stringify json transformer

packages/backend/src/apps/formatter/actions/text/index.js

@@ -16,6 +16,7 @@ import trimWhitespace from './transformers/trim-whitespace.js';
 import useDefaultValue from './transformers/use-default-value.js';
 import parseStringifiedJson from './transformers/parse-stringified-json.js';
 import createUuid from './transformers/create-uuid.js';
+import stringifyJson from './transformers/stringify-json.js';
 
 const transformers = {
   base64ToString,
@@ -34,6 +35,7 @@ const transformers = {
   useDefaultValue,
   parseStringifiedJson,
   createUuid,
+  stringifyJson,
 };
 
 export default defineAction({
@@ -63,6 +65,7 @@ export default defineAction({
         { label: 'Extract Number', value: 'extractNumber' },
         { label: 'Lowercase', value: 'lowercase' },
         { label: 'Parse stringified JSON', value: 'parseStringifiedJson' },
+        { label: 'Stringify JSON', value: 'stringifyJson' },
         { label: 'Pluralize', value: 'pluralize' },
         { label: 'Replace', value: 'replace' },
         { label: 'String to Base64', value: 'stringToBase64' },

packages/backend/src/apps/formatter/actions/text/transformers/stringify-json.js

@@ -0,0 +1,7 @@
+const stringifyJson = ($) => {
+  const input = $.step.parameters.input;
+
+  return JSON.stringify(input);
+};
+
+export default stringifyJson;

packages/backend/src/apps/formatter/dynamic-fields/list-transform-options/index.js

@@ -13,6 +13,7 @@ import encodeUri from './text/encode-uri.js';
 import trimWhitespace from './text/trim-whitespace.js';
 import useDefaultValue from './text/use-default-value.js';
 import parseStringifiedJson from './text/parse-stringified-json.js';
+import stringifyJson from './text/stringify-json.js';
 import performMathOperation from './numbers/perform-math-operation.js';
 import randomNumber from './numbers/random-number.js';
 import formatNumber from './numbers/format-number.js';
@@ -40,6 +41,7 @@ const options = {
   formatPhoneNumber,
   formatDateTime,
   parseStringifiedJson,
+  stringifyJson,
 };
 
 export default {

packages/backend/src/apps/formatter/dynamic-fields/list-transform-options/text/parse-stringified-json.js

@@ -1,4 +1,4 @@
-const useDefaultValue = [
+const parseStringifiedJson = [
   {
     label: 'Input',
     key: 'input',
@@ -9,4 +9,4 @@ const useDefaultValue = [
   },
 ];
 
-export default useDefaultValue;
+export default parseStringifiedJson;

packages/backend/src/apps/formatter/dynamic-fields/list-transform-options/text/stringify-json.js

@@ -0,0 +1,12 @@
+const stringifyJson = [
+  {
+    label: 'Input',
+    key: 'input',
+    type: 'string',
+    required: true,
+    description: 'JSON to stringify.',
+    variables: true,
+  },
+];
+
+export default stringifyJson;

packages/backend/src/db/migrations/20240822111546_add_prevent_users_from_updating_their_profiles_user_management_in_config.js

@@ -1,12 +0,0 @@
-export async function up(knex) {
-  await knex('config').insert({
-    key: 'userManagement.preventUsersFromUpdatingTheirProfile',
-    value: {
-      data: false
-    }
-  });
-};
-
-export async function down(knex) {
-  await knex('config').where({ key: 'userManagement.preventUsersFromUpdatingTheirProfile' }).delete();
-};

packages/backend/src/helpers/compute-parameters.js

@@ -2,137 +2,67 @@ import get from 'lodash.get';
 
 const variableRegExp = /({{step\.[\da-zA-Z-]+(?:\.[^.}{]+)+}})/g;
 
-function getParameterEntries(parameters) {
-  return Object.entries(parameters);
-}
+export default function computeParameters(parameters, executionSteps) {
+  const entries = Object.entries(parameters);
+  return entries.reduce((result, [key, value]) => {
+    if (typeof value === 'string') {
+      const parts = value.split(variableRegExp);
 
-function computeParameterEntries(parameterEntries, executionSteps) {
-  const defaultComputedParameters = {};
-  return parameterEntries.reduce((result, [key, value]) => {
-    const parameterComputedValue = computeParameter(value, executionSteps);
+      const computedValue = parts
+        .map((part) => {
+          const isVariable = part.match(variableRegExp);
+
+          if (isVariable) {
+            const stepIdAndKeyPath = part.replace(/{{step.|}}/g, '');
+            const [stepId, ...keyPaths] = stepIdAndKeyPath.split('.');
+            const keyPath = keyPaths.join('.');
+            const executionStep = executionSteps.find((executionStep) => {
+              return executionStep.stepId === stepId;
+            });
+            const data = executionStep?.dataOut;
+            const dataValue = get(data, keyPath);
+
+            // Covers both arrays and objects
+            if (typeof dataValue === 'object') {
+              return JSON.stringify(dataValue);
+            }
+
+            return dataValue;
+          }
+
+          return part;
+        }).join('');
+
+      // challenge the input to see if it is stringifies object or array
+      try {
+        const parsedValue = JSON.parse(computedValue);
+
+        if (typeof parsedValue === 'number') {
+          throw new Error('Use original unparsed value.');
+        }
+
+        return {
+          ...result,
+          [key]: parsedValue,
+        };
+      } catch (error) {
+        return {
+          ...result,
+          [key]: computedValue,
+        };
+      }
+    }
+
+    if (Array.isArray(value)) {
+      return {
+        ...result,
+        [key]: value.map((item) => computeParameters(item, executionSteps)),
+      };
+    }
 
     return {
       ...result,
-      [key]: parameterComputedValue,
-    }
-  }, defaultComputedParameters);
-}
-
-function computeParameter(value, executionSteps) {
-  if (typeof value === 'string') {
-    const computedStringParameter = computeStringParameter(value, executionSteps);
-    return computedStringParameter;
-  }
-
-  if (Array.isArray(value)) {
-    const computedArrayParameter = computeArrayParameter(value, executionSteps);
-    return computedArrayParameter;
-  }
-
-  return value;
-}
-
-function splitByVariable(stringValue) {
-  const parts = stringValue.split(variableRegExp);
-
-  return parts;
-}
-
-function isVariable(stringValue) {
-  return stringValue.match(variableRegExp);
-}
-
-function splitVariableByStepIdAndKeyPath(variableValue) {
-  const stepIdAndKeyPath = variableValue.replace(/{{step.|}}/g, '');
-  const [stepId, ...keyPaths] = stepIdAndKeyPath.split('.');
-  const keyPath = keyPaths.join('.');
-
-  return {
-    stepId,
-    keyPath
-  }
-}
-
-function getVariableStepId(variableValue) {
-  const { stepId } = splitVariableByStepIdAndKeyPath(variableValue);
-
-  return stepId;
-}
-
-function getVariableKeyPath(variableValue) {
-  const { keyPath } = splitVariableByStepIdAndKeyPath(variableValue);
-
-  return keyPath
-}
-
-function getVariableExecutionStep(variableValue, executionSteps) {
-  const stepId = getVariableStepId(variableValue);
-
-  const executionStep = executionSteps.find((executionStep) => {
-    return executionStep.stepId === stepId;
-  });
-
-  return executionStep;
-}
-
-function computeVariable(variable, executionSteps) {
-  const keyPath = getVariableKeyPath(variable);
-  const executionStep = getVariableExecutionStep(variable, executionSteps);
-  const data = executionStep?.dataOut;
-  const computedVariable = get(data, keyPath);
-
-  /**
-   * Inline both arrays and objects. Otherwise, variables resolving to
-   * them would be resolved as `[object Object]` or lose their shape.
-   */
-  if (typeof computedVariable === 'object') {
-    return JSON.stringify(computedVariable);
-  }
-
-  return computedVariable;
-}
-
-function autoParseComputedVariable(computedVariable) {
-  // challenge the input to see if it is stringified object or array
-  try {
-    const parsedValue = JSON.parse(computedVariable);
-
-    if (typeof parsedValue === 'number') {
-      throw new Error('Use original unparsed value.');
-    }
-
-    return parsedValue;
-  } catch (error) {
-    return computedVariable;
-  }
-}
-
-function computeStringParameter(stringValue, executionSteps) {
-  const parts = splitByVariable(stringValue);
-
-  const computedValue = parts
-    .map((part) => {
-      const variable = isVariable(part);
-
-      if (variable) {
-        return computeVariable(part, executionSteps);
-      }
-
-      return part;
-    })
-    .join('');
-
-  const autoParsedValue = autoParseComputedVariable(computedValue);
-
-  return autoParsedValue;
-}
-
-function computeArrayParameter(arrayValue, executionSteps) {
-  return arrayValue.map((item) => computeParameters(item, executionSteps));
-}
-
-export default function computeParameters(parameters, executionSteps) {
-  const parameterEntries = getParameterEntries(parameters);
-
-  return computeParameterEntries(parameterEntries, executionSteps);
+      [key]: value,
+    };
+  }, {});
 }

packages/e2e-tests/fixtures/flow-editor-page.js

@@ -1,6 +1,4 @@
 const { AuthenticatedPage } = require('./authenticated-page');
-const { expect } = require('@playwright/test');
-const axios = require('axios');
 
 export class FlowEditorPage extends AuthenticatedPage {
   screenshotPath = '/flow-editor';
@@ -11,74 +9,17 @@ export class FlowEditorPage extends AuthenticatedPage {
   constructor(page) {
     super(page);
 
-    this.page = page;
     this.appAutocomplete = this.page.getByTestId('choose-app-autocomplete');
     this.eventAutocomplete = this.page.getByTestId('choose-event-autocomplete');
     this.continueButton = this.page.getByTestId('flow-substep-continue-button');
-    this.testAndContinueButton = this.page.getByText('Test & Continue');
     this.connectionAutocomplete = this.page.getByTestId(
       'choose-connection-autocomplete'
     );
-    this.testOutput = this.page.getByTestId('flow-test-substep-output');
-    this.hasNoOutput = this.page.getByTestId('flow-test-substep-no-output');
+    this.testOuput = this.page.getByTestId('flow-test-substep-output');
     this.unpublishFlowButton = this.page.getByTestId('unpublish-flow-button');
     this.publishFlowButton = this.page.getByTestId('publish-flow-button');
     this.infoSnackbar = this.page.getByTestId('flow-cannot-edit-info-snackbar');
     this.trigger = this.page.getByLabel('Trigger on weekends?');
     this.stepCircularLoader = this.page.getByTestId('step-circular-loader');
-    this.flowName = this.page.getByTestId('editableTypography');
-    this.flowNameInput = this.page
-      .getByTestId('editableTypographyInput')
-      .locator('input');
-  }
-
-  async createWebhookTrigger(workSynchronously) {
-    await this.appAutocomplete.click();
-    await this.page.getByRole('option', { name: 'Webhook' }).click();
-
-    await expect(this.eventAutocomplete).toBeVisible();
-    await this.eventAutocomplete.click();
-    await this.page.getByRole('option', { name: 'Catch raw webhook' }).click();
-    await this.continueButton.click();
-    await this.page
-      .getByTestId('parameters.workSynchronously-autocomplete')
-      .click();
-    await this.page
-      .getByRole('option', { name: workSynchronously ? 'Yes' : 'No' })
-      .click();
-    await this.continueButton.click();
-
-    const webhookUrl = this.page.locator('input[name="webhookUrl"]');
-    if (workSynchronously) {
-      await expect(webhookUrl).toHaveValue(/sync/);
-    } else {
-      await expect(webhookUrl).not.toHaveValue(/sync/);
-    }
-
-    const triggerResponse = await axios.get(await webhookUrl.inputValue());
-    await expect(triggerResponse.status).toBe(204);
-
-    await expect(this.testOutput).not.toBeVisible();
-    await this.testAndContinueButton.click();
-    await expect(this.testOutput).toBeVisible();
-    await expect(this.hasNoOutput).not.toBeVisible();
-    await this.continueButton.click();
-
-    return await webhookUrl.inputValue();
-  }
-
-  async chooseAppAndEvent(appName, eventName) {
-    await this.appAutocomplete.click();
-    await this.page.getByRole('option', { name: appName }).click();
-    await expect(this.eventAutocomplete).toBeVisible();
-    await this.eventAutocomplete.click();
-    await this.page.getByRole('option', { name: eventName }).click();
-    await this.continueButton.click();
-  }
-
-  async testAndContinue() {
-    await this.continueButton.last().click();
-    await expect(this.testOutput).toBeVisible();
-    await this.continueButton.click();
   }
 }

packages/e2e-tests/tests/app-integrations/webhook.spec.js

@@ -1,82 +0,0 @@
-const { test, expect } = require('../../fixtures/index');
-const axios = require('axios');
-
-test.describe('Webhook flow', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.getByTestId('create-flow-button').click();
-    await page.waitForURL(
-      /\/editor\/[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/
-    );
-    await expect(page.getByTestId('flow-step')).toHaveCount(2);
-  });
-
-  test('Create a new flow with a sync Webhook step then a Webhook step', async ({
-    flowEditorPage,
-    page,
-  }) => {
-    await flowEditorPage.flowName.click();
-    await flowEditorPage.flowNameInput.fill('syncWebhook');
-    const syncWebhookUrl = await flowEditorPage.createWebhookTrigger(true);
-
-    await flowEditorPage.chooseAppAndEvent('Webhook', 'Respond with');
-
-    await expect(flowEditorPage.continueButton.last()).not.toBeEnabled();
-
-    await page
-      .getByTestId('parameters.statusCode-power-input')
-      .locator('[contenteditable]')
-      .fill('200');
-    await flowEditorPage.clickAway();
-    await expect(flowEditorPage.continueButton.last()).not.toBeEnabled();
-
-    await page
-      .getByTestId('parameters.body-power-input')
-      .locator('[contenteditable]')
-      .fill('response from webhook');
-    await flowEditorPage.clickAway();
-    await expect(flowEditorPage.continueButton).toBeEnabled();
-    await flowEditorPage.continueButton.click();
-
-    await flowEditorPage.testAndContinue();
-    await flowEditorPage.publishFlowButton.click();
-
-    const response = await axios.get(syncWebhookUrl);
-    await expect(response.status).toBe(200);
-    await expect(response.data).toBe('response from webhook');
-  });
-
-  test('Create a new flow with an async Webhook step then a Webhook step', async ({
-    flowEditorPage,
-    page,
-  }) => {
-    await flowEditorPage.flowName.click();
-    await flowEditorPage.flowNameInput.fill('asyncWebhook');
-    const asyncWebhookUrl = await flowEditorPage.createWebhookTrigger(false);
-
-    await flowEditorPage.chooseAppAndEvent('Webhook', 'Respond with');
-
-    await expect(flowEditorPage.continueButton.last()).not.toBeEnabled();
-
-    await page
-      .getByTestId('parameters.statusCode-power-input')
-      .locator('[contenteditable]')
-      .fill('200');
-    await flowEditorPage.clickAway();
-    await expect(flowEditorPage.continueButton.last()).not.toBeEnabled();
-
-    await page
-      .getByTestId('parameters.body-power-input')
-      .locator('[contenteditable]')
-      .fill('response from webhook');
-    await flowEditorPage.clickAway();
-    await expect(flowEditorPage.continueButton).toBeEnabled();
-    await flowEditorPage.continueButton.click();
-
-    await flowEditorPage.testAndContinue();
-    await flowEditorPage.publishFlowButton.click();
-
-    const response = await axios.get(asyncWebhookUrl);
-    await expect(response.status).toBe(204);
-    await expect(response.data).toBe('');
-  });
-});

packages/e2e-tests/tests/flow-editor/create-flow.spec.js

@@ -2,6 +2,7 @@ const { test, expect } = require('../../fixtures/index');
 
 test('Ensure creating a new flow works', async ({ page }) => {
   await page.getByTestId('create-flow-button').click();
+  await expect(page).toHaveURL(/\/editor\/create/);
   await expect(page).toHaveURL(
     /\/editor\/[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/
   );
@@ -68,9 +69,9 @@ test(
 
       await test.step('test trigger', async () => {
         await test.step('show sample output', async () => {
-          await expect(flowEditorPage.testOutput).not.toBeVisible();
+          await expect(flowEditorPage.testOuput).not.toBeVisible();
           await flowEditorPage.continueButton.click();
-          await expect(flowEditorPage.testOutput).toBeVisible();
+          await expect(flowEditorPage.testOuput).toBeVisible();
           await flowEditorPage.screenshot({
             path: 'Scheduler trigger test output.png',
           });
@@ -142,12 +143,12 @@ test(
     
       await test.step('test trigger substep', async () => {
         await test.step('show sample output', async () => {
-          await expect(flowEditorPage.testOutput).not.toBeVisible();
+          await expect(flowEditorPage.testOuput).not.toBeVisible();
           await page
             .getByTestId('flow-substep-continue-button')
             .first()
             .click();
-          await expect(flowEditorPage.testOutput).toBeVisible();
+          await expect(flowEditorPage.testOuput).toBeVisible();
           await flowEditorPage.screenshot({
             path: 'Ntfy action test output.png',
           });

packages/web/src/components/AddAppConnection/index.jsx

@@ -7,7 +7,6 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import * as React from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { useQueryClient } from '@tanstack/react-query';
 
 import { AppPropType } from 'propTypes/propTypes';
 import AppAuthClientsDialog from 'components/AppAuthClientsDialog/index.ee';
@@ -18,6 +17,7 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import { generateExternalLink } from 'helpers/translationValues';
 import { Form } from './style';
 import useAppAuth from 'hooks/useAppAuth';
+import { useQueryClient } from '@tanstack/react-query';
 
 function AddAppConnection(props) {
   const { application, connectionId, onClose } = props;

packages/web/src/components/EditableTypography/index.jsx

@@ -41,7 +41,6 @@ function EditableTypography(props) {
   if (editing) {
     component = (
       <TextField
-        data-test="editableTypographyInput"
         onClick={handleTextFieldClick}
         onKeyDown={handleTextFieldKeyDown}
         onBlur={handleTextFieldBlur}

packages/web/src/components/EditorLayout/index.jsx

@@ -101,7 +101,6 @@ export default function EditorLayout() {
 
           {!isFlowLoading && (
             <EditableTypography
-              data-test="editableTypography"
               variant="body1"
               onConfirm={onFlowNameUpdate}
               noWrap

packages/web/src/components/LoginForm/index.jsx

@@ -12,7 +12,6 @@ import TextField from 'components/TextField';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCreateAccessToken from 'hooks/useCreateAccessToken';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
-import usePreventUsersFromUpdatingTheirProfile from 'hooks/usePreventUsersFromUpdatingTheirProfile';
 
 function LoginForm() {
   const isCloud = useCloud();
@@ -20,7 +19,6 @@ function LoginForm() {
   const formatMessage = useFormatMessage();
   const enqueueSnackbar = useEnqueueSnackbar();
   const authentication = useAuthentication();
-  const preventUsersFromUpdatingTheirProfile = usePreventUsersFromUpdatingTheirProfile();
   const { mutateAsync: createAccessToken, isPending: loading } =
     useCreateAccessToken();
 
@@ -86,7 +84,7 @@ function LoginForm() {
           sx={{ mb: 1 }}
         />
 
-        {isCloud && !preventUsersFromUpdatingTheirProfile && (
+        {isCloud && (
           <Link
             component={RouterLink}
             to={URLS.FORGOT_PASSWORD}

packages/web/src/components/PowerInput/data.js

@@ -25,40 +25,25 @@ const process = ({ data, parentKey, index, parentLabel = '' }) => {
         sampleValue: JSON.stringify(sampleValue),
       };
 
-      const arrayItems = sampleValue.flatMap((item, index) => {
-        const itemItself = {
-          label: `${label}.${index}`,
-          value: `${value}.${index}`,
-          sampleValue: JSON.stringify(item),
-        };
-
-        const itemEntries = process({
+      const arrayItems =  sampleValue.flatMap((item, index) =>
+        process({
           data: item,
           parentKey: value,
           index,
           parentLabel: label,
-        });
+        }),
+      );
 
-        return [itemItself].concat(itemEntries);
-      });
-
-      return [arrayItself].concat(arrayItems);
+      // TODO: remove spreading
+      return [arrayItself, ...arrayItems];
     }
 
     if (typeof sampleValue === 'object' && sampleValue !== null) {
-      const objectItself = {
-        label,
-        value,
-        sampleValue: JSON.stringify(sampleValue),
-      };
-
-      const objectEntries = process({
+      return process({
         data: sampleValue,
         parentKey: value,
         parentLabel: label,
       });
-
-      return [objectItself].concat(objectEntries);
     }
 
     return [

packages/web/src/components/Switch/index.jsx

@@ -40,10 +40,6 @@ function Switch(props) {
         <FormControlLabel
           className={className}
           {...FormControlLabelProps}
-          componentsProps={{
-            typography: {
-              display: 'flex',
-          }}}
           control={
             <MuiSwitch
               {...switchProps}

packages/web/src/components/TestSubstep/index.jsx

@@ -118,7 +118,7 @@ function TestSubstep(props) {
           )}
 
           {hasNoOutput && (
-            <Alert data-test="flow-test-substep-no-output" severity="warning" sx={{ mb: 1, width: '100%' }}>
+            <Alert severity="warning" sx={{ mb: 1, width: '100%' }}>
               <AlertTitle sx={{ fontWeight: 700 }}>
                 {formatMessage('flowEditor.noTestDataTitle')}
               </AlertTitle>

packages/web/src/hooks/usePreventUsersFromUpdatingTheirProfile.js

@@ -1,13 +0,0 @@
-import useAutomatischConfig from 'hooks/useAutomatischConfig';
-
-export default function usePreventUsersFromUpdatingTheirProfile() {
-  const { data, isSuccess } =
-    useAutomatischConfig();
-  const automatischConfig = data?.data;
-
-  const preventUsersFromUpdatingTheirProfile = isSuccess ? automatischConfig['userManagement.preventUsersFromUpdatingTheirProfile'] : false;
-
-  console.log('preventUsersFromUpdatingTheirProfile', preventUsersFromUpdatingTheirProfile, automatischConfig)
-
-  return preventUsersFromUpdatingTheirProfile;
-}

packages/web/src/locales/en.json

@@ -259,26 +259,20 @@
   "userInterfacePage.primaryLightColorFieldLabel": "Primary light color",
   "userInterfacePage.svgDataFieldLabel": "Logo SVG code",
   "userInterfacePage.submit": "Update",
-  "authenticationPage.title": "Authentication",
-  "authenticationConfig.title": "User management",
-  "authenticationConfig.userManagementPreventUsersFromUpdatingTheirProfile": "Prevent users from updating their profile",
-  "authenticationConfig.userManagementPreventUsersFromUpdatingTheirProfileTooltip": "This will prevent users from updating their full name, email and password. This is useful when you want to manage users from your own identity provider.",
-  "authenticationConfig.save": "Save",
-  "authenticationConfig.successfullySaved": "The configuration has been saved.",
-  "samlAuthenticationPage.title": "Single Sign-On with SAML",
-  "samlAuthenticationForm.active": "Active",
-  "samlAuthenticationForm.name": "Name",
-  "samlAuthenticationForm.certificate": "Certificate",
-  "samlAuthenticationForm.signatureAlgorithm": "Signature algorithm",
-  "samlAuthenticationForm.issuer": "Issuer",
-  "samlAuthenticationForm.entryPoint": "Entry point",
-  "samlAuthenticationForm.firstnameAttributeName": "Firstname attribute name",
-  "samlAuthenticationForm.surnameAttributeName": "Surname attribute name",
-  "samlAuthenticationForm.emailAttributeName": "Email attribute name",
-  "samlAuthenticationForm.roleAttributeName": "Role attribute name",
-  "samlAuthenticationForm.defaultRole": "Default role",
-  "samlAuthenticationForm.successfullySaved": "The provider has been saved.",
-  "samlAuthenticationForm.save": "Save",
+  "authenticationPage.title": "Single Sign-On with SAML",
+  "authenticationForm.active": "Active",
+  "authenticationForm.name": "Name",
+  "authenticationForm.certificate": "Certificate",
+  "authenticationForm.signatureAlgorithm": "Signature algorithm",
+  "authenticationForm.issuer": "Issuer",
+  "authenticationForm.entryPoint": "Entry point",
+  "authenticationForm.firstnameAttributeName": "Firstname attribute name",
+  "authenticationForm.surnameAttributeName": "Surname attribute name",
+  "authenticationForm.emailAttributeName": "Email attribute name",
+  "authenticationForm.roleAttributeName": "Role attribute name",
+  "authenticationForm.defaultRole": "Default role",
+  "authenticationForm.successfullySaved": "The provider has been saved.",
+  "authenticationForm.save": "Save",
   "roleMappingsForm.title": "Role mappings",
   "roleMappingsForm.remoteRoleName": "Remote role name",
   "roleMappingsForm.role": "Role",

packages/web/src/pages/Authentication/AuthenticationConfig.jsx

@@ -1,98 +0,0 @@
-import { useMutation } from '@apollo/client';
-import LoadingButton from '@mui/lab/LoadingButton';
-import Stack from '@mui/material/Stack';
-import Switch from 'components/Switch';
-import Typography from '@mui/material/Typography';
-import Tooltip from '@mui/material/Tooltip';
-import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-
-import Form from 'components/Form';
-import useFormatMessage from 'hooks/useFormatMessage';
-import useAutomatischConfig from 'hooks/useAutomatischConfig';
-import { UPDATE_CONFIG } from 'graphql/mutations/update-config.ee';
-import { useQueryClient } from '@tanstack/react-query';
-
-function AuthenticationConfig() {
-  const formatMessage = useFormatMessage();
-  const enqueueSnackbar = useEnqueueSnackbar();
-  const queryClient = useQueryClient();
-  const { data, isLoading: isAutomatischConfigLoading } =
-    useAutomatischConfig();
-  const automatischConfig = data?.data;
-
-  const [
-    updateConfig,
-    { loading: updateConfigLoading },
-  ] = useMutation(UPDATE_CONFIG);
-
-  const handleSubmit = async (values) => {
-    try {
-      await updateConfig({
-        variables: {
-          input: {
-            'userManagement.preventUsersFromUpdatingTheirProfile': values.userManagement.preventUsersFromUpdatingTheirProfile,
-          },
-        },
-      });
-
-      await queryClient.invalidateQueries({
-        queryKey: ['automatisch', 'config'],
-      });
-
-      enqueueSnackbar(formatMessage('authenticationConfig.successfullySaved'), {
-        variant: 'success',
-        SnackbarProps: {
-          'data-test': 'snackbar-update-role-mappings-success',
-        },
-      });
-    } catch (error) {
-      throw new Error('Failed while saving!');
-    }
-  };
-
-  if (isAutomatischConfigLoading) {
-    return null;
-  }
-
-  return (
-    <>
-      <Typography variant="h4">
-        {formatMessage('authenticationConfig.title')}
-      </Typography>
-
-      <Form defaultValues={automatischConfig} onSubmit={handleSubmit}>
-        <Stack direction="column" spacing={2}>
-          <Switch
-            name="userManagement.preventUsersFromUpdatingTheirProfile"
-            label={<>
-              {formatMessage('authenticationConfig.userManagementPreventUsersFromUpdatingTheirProfile')}
-
-              <Tooltip
-                title={formatMessage('authenticationConfig.userManagementPreventUsersFromUpdatingTheirProfileTooltip')}
-                sx={{ ml: 1 }}
-              >
-                <InfoOutlinedIcon />
-              </Tooltip>
-            </>}
-          />
-
-          <LoadingButton
-            type="submit"
-            variant="contained"
-            color="primary"
-            sx={{ boxShadow: 2 }}
-            loading={updateConfigLoading}
-          >
-            {formatMessage('authenticationConfig.save')}
-          </LoadingButton>
-        </Stack>
-      </Form>
-    </>
-  );
-}
-
-AuthenticationConfig.propTypes = {
-};
-
-export default AuthenticationConfig;

packages/web/src/pages/Authentication/RoleMappings.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { useMutation } from '@apollo/client';
 import LoadingButton from '@mui/lab/LoadingButton';
+import Divider from '@mui/material/Divider';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
@@ -84,6 +85,7 @@ function RoleMappings({ provider, providerLoading }) {
 
   return (
     <>
+      <Divider sx={{ pt: 2 }} />
       <Typography variant="h3">
         {formatMessage('roleMappingsForm.title')}
       </Typography>

packages/web/src/pages/Authentication/SamlConfiguration.jsx

@@ -75,7 +75,7 @@ function SamlConfiguration({ provider, providerLoading }) {
         },
       });
 
-      enqueueSnackbar(formatMessage('samlAuthenticationForm.successfullySaved'), {
+      enqueueSnackbar(formatMessage('authenticationForm.successfullySaved'), {
         variant: 'success',
         SnackbarProps: {
           'data-test': 'snackbar-save-saml-provider-success',
@@ -98,18 +98,18 @@ function SamlConfiguration({ provider, providerLoading }) {
       <Stack direction="column" gap={2}>
         <Switch
           name="active"
-          label={formatMessage('samlAuthenticationForm.active')}
+          label={formatMessage('authenticationForm.active')}
         />
         <TextField
           required={true}
           name="name"
-          label={formatMessage('samlAuthenticationForm.name')}
+          label={formatMessage('authenticationForm.name')}
           fullWidth
         />
         <TextField
           required={true}
           name="certificate"
-          label={formatMessage('samlAuthenticationForm.certificate')}
+          label={formatMessage('authenticationForm.certificate')}
           fullWidth
           multiline
         />
@@ -126,44 +126,44 @@ function SamlConfiguration({ provider, providerLoading }) {
           renderInput={(params) => (
             <MuiTextField
               {...params}
-              label={formatMessage('samlAuthenticationForm.signatureAlgorithm')}
+              label={formatMessage('authenticationForm.signatureAlgorithm')}
             />
           )}
         />
         <TextField
           required={true}
           name="issuer"
-          label={formatMessage('samlAuthenticationForm.issuer')}
+          label={formatMessage('authenticationForm.issuer')}
           fullWidth
         />
         <TextField
           required={true}
           name="entryPoint"
-          label={formatMessage('samlAuthenticationForm.entryPoint')}
+          label={formatMessage('authenticationForm.entryPoint')}
           fullWidth
         />
         <TextField
           required={true}
           name="firstnameAttributeName"
-          label={formatMessage('samlAuthenticationForm.firstnameAttributeName')}
+          label={formatMessage('authenticationForm.firstnameAttributeName')}
           fullWidth
         />
         <TextField
           required={true}
           name="surnameAttributeName"
-          label={formatMessage('samlAuthenticationForm.surnameAttributeName')}
+          label={formatMessage('authenticationForm.surnameAttributeName')}
           fullWidth
         />
         <TextField
           required={true}
           name="emailAttributeName"
-          label={formatMessage('samlAuthenticationForm.emailAttributeName')}
+          label={formatMessage('authenticationForm.emailAttributeName')}
           fullWidth
         />
         <TextField
           required={true}
           name="roleAttributeName"
-          label={formatMessage('samlAuthenticationForm.roleAttributeName')}
+          label={formatMessage('authenticationForm.roleAttributeName')}
           fullWidth
         />
         <ControlledAutocomplete
@@ -175,7 +175,7 @@ function SamlConfiguration({ provider, providerLoading }) {
           renderInput={(params) => (
             <MuiTextField
               {...params}
-              label={formatMessage('samlAuthenticationForm.defaultRole')}
+              label={formatMessage('authenticationForm.defaultRole')}
             />
           )}
           loading={isRolesLoading}
@@ -187,7 +187,7 @@ function SamlConfiguration({ provider, providerLoading }) {
           sx={{ boxShadow: 2 }}
           loading={loading}
         >
-          {formatMessage('samlAuthenticationForm.save')}
+          {formatMessage('authenticationForm.save')}
         </LoadingButton>
       </Stack>
     </Form>

packages/web/src/pages/Authentication/index.jsx

@@ -2,14 +2,11 @@ import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
 import PageTitle from 'components/PageTitle';
 import Container from 'components/Container';
-import Divider from '@mui/material/Divider';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useSamlAuthProvider from 'hooks/useSamlAuthProvider';
-import AuthenticationConfig from './AuthenticationConfig';
 import SamlConfiguration from './SamlConfiguration';
 import RoleMappings from './RoleMappings';
 import useAdminSamlAuthProviders from 'hooks/useAdminSamlAuthProviders.ee';
-
 function AuthenticationPage() {
   const formatMessage = useFormatMessage();
 
@@ -19,37 +16,20 @@ function AuthenticationPage() {
   const { data, isLoading: isProviderLoading } = useSamlAuthProvider({
     samlAuthProviderId,
   });
-
   const provider = data?.data;
 
   return (
     <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
       <Grid container item xs={12} sm={10} md={9}>
-        <Grid container item xs={12}>
+        <Grid container item xs={12} sx={{ mb: [2, 5] }}>
           <PageTitle>{formatMessage('authenticationPage.title')}</PageTitle>
         </Grid>
-
-        <Grid item xs={12} sx={{ pt: 5, pb: 5 }}>
-          <Stack spacing={5}>
-            <AuthenticationConfig />
-
-            <Divider />
-          </Stack>
-        </Grid>
-
-        <Grid container item xs={12}>
-          <PageTitle variant="h4">{formatMessage('samlAuthenticationPage.title')}</PageTitle>
-        </Grid>
-
         <Grid item xs={12} sx={{ pt: 5, pb: 5 }}>
           <Stack spacing={5}>
             <SamlConfiguration
               provider={provider}
               providerLoading={isProviderLoading}
             />
-
-            <Divider />
-
             <RoleMappings
               provider={provider}
               providerLoading={isProviderLoading}

packages/web/src/pages/Login/index.jsx

@@ -10,7 +10,6 @@ export default function Login() {
       <Container maxWidth="sm">
         <Stack direction="column" gap={2}>
           <LoginForm />
-
           <SsoProviders />
         </Stack>
       </Container>

packages/web/src/routes.jsx

@@ -29,14 +29,12 @@ import adminSettingsRoutes from './adminSettingsRoutes';
 import Notifications from 'pages/Notifications';
 import useAutomatischConfig from 'hooks/useAutomatischConfig';
 import useAuthentication from 'hooks/useAuthentication';
-import usePreventUsersFromUpdatingTheirProfile from 'hooks/usePreventUsersFromUpdatingTheirProfile';
 import useAutomatischInfo from 'hooks/useAutomatischInfo';
 import Installation from 'pages/Installation';
 
 function Routes() {
   const { data: automatischInfo, isSuccess } = useAutomatischInfo();
   const { data: configData } = useAutomatischConfig();
-  const preventUsersFromUpdatingTheirProfile = usePreventUsersFromUpdatingTheirProfile();
   const { isAuthenticated } = useAuthentication();
   const config = configData?.data;
 
@@ -136,14 +134,14 @@ function Routes() {
         }
       />
 
-      {preventUsersFromUpdatingTheirProfile === false && <Route
+      <Route
         path={URLS.FORGOT_PASSWORD}
         element={
           <PublicLayout>
             <ForgotPassword />
           </PublicLayout>
         }
-      />}
+      />
 
       <Route
         path={URLS.RESET_PASSWORD}

packages/web/src/styles/theme.js

@@ -95,11 +95,11 @@ export const defaultTheme = createTheme({
       },
     },
     h4: {
-      fontSize: referenceTheme.typography.pxToRem(28),
+      fontSize: referenceTheme.typography.pxToRem(32),
       lineHeight: 1.3,
       fontWeight: 700,
       [referenceTheme.breakpoints.down('sm')]: {
-        fontSize: referenceTheme.typography.pxToRem(22),
+        fontSize: referenceTheme.typography.pxToRem(16),
       },
     },
     h5: {