Merge branch 'main' into AUT-1379

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

@@ -9,7 +9,7 @@ import * as React from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import { AppPropType } from 'propTypes/propTypes';
-import AppAuthClientsDialog from 'components/AppAuthClientsDialog/index.ee';
+import AppOAuthClientsDialog from 'components/OAuthClientsDialog/index.ee';
 import InputCreator from 'components/InputCreator';
 import * as URLS from 'config/urls';
 import useAuthenticateApp from 'hooks/useAuthenticateApp.ee';
@@ -31,12 +31,12 @@ function AddAppConnection(props) {
   const [inProgress, setInProgress] = React.useState(false);
   const hasConnection = Boolean(connectionId);
   const useShared = searchParams.get('shared') === 'true';
-  const appAuthClientId = searchParams.get('appAuthClientId') || undefined;
+  const oauthClientId = searchParams.get('oauthClientId') || undefined;
   const { authenticate } = useAuthenticateApp({
     appKey: key,
     connectionId,
-    appAuthClientId,
-    useShared: !!appAuthClientId,
+    oauthClientId,
+    useShared: !!oauthClientId,
   });
   const queryClient = useQueryClient();
 
@@ -52,8 +52,8 @@ function AddAppConnection(props) {
   }, []);
 
   React.useEffect(
-    function initiateSharedAuthenticationForGivenAuthClient() {
-      if (!appAuthClientId) return;
+    function initiateSharedAuthenticationForGivenOAuthClient() {
+      if (!oauthClientId) return;
 
       if (!authenticate) return;
 
@@ -64,13 +64,13 @@ function AddAppConnection(props) {
 
       asyncAuthenticate();
     },
-    [appAuthClientId, authenticate],
+    [oauthClientId, authenticate, key, navigate],
   );
 
-  const handleClientClick = (appAuthClientId) =>
-    navigate(URLS.APP_ADD_CONNECTION_WITH_AUTH_CLIENT_ID(key, appAuthClientId));
+  const handleClientClick = (oauthClientId) =>
+    navigate(URLS.APP_ADD_CONNECTION_WITH_OAUTH_CLIENT_ID(key, oauthClientId));
 
-  const handleAuthClientsDialogClose = () =>
+  const handleOAuthClientsDialogClose = () =>
     navigate(URLS.APP_CONNECTIONS(key));
 
   const submitHandler = React.useCallback(
@@ -104,14 +104,14 @@ function AddAppConnection(props) {
 
   if (useShared)
     return (
-      <AppAuthClientsDialog
+      <AppOAuthClientsDialog
         appKey={key}
-        onClose={handleAuthClientsDialogClose}
+        onClose={handleOAuthClientsDialogClose}
         onClientClick={handleClientClick}
       />
     );
 
-  if (appAuthClientId) return <React.Fragment />;
+  if (oauthClientId) return <React.Fragment />;
 
   return (
     <Dialog

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

@@ -5,11 +5,11 @@ import { AppPropType } from 'propTypes/propTypes';
 import useAdminCreateAppConfig from 'hooks/useAdminCreateAppConfig';
 import useAppConfig from 'hooks/useAppConfig.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
-import useAdminCreateAppAuthClient from 'hooks/useAdminCreateAppAuthClient.ee';
-import AdminApplicationAuthClientDialog from 'components/AdminApplicationAuthClientDialog';
+import useAdminCreateOAuthClient from 'hooks/useAdminCreateOAuthClient.ee';
+import AdminApplicationOAuthClientDialog from 'components/AdminApplicationOAuthClientDialog';
 import useAppAuth from 'hooks/useAppAuth';
 
-function AdminApplicationCreateAuthClient(props) {
+function AdminApplicationCreateOAuthClient(props) {
   const { appKey, onClose } = props;
   const { data: auth } = useAppAuth(appKey);
   const formatMessage = useFormatMessage();
@@ -24,26 +24,26 @@ function AdminApplicationCreateAuthClient(props) {
   } = useAdminCreateAppConfig(props.appKey);
 
   const {
-    mutateAsync: createAppAuthClient,
-    isPending: isCreateAppAuthClientPending,
-    error: createAppAuthClientError,
-  } = useAdminCreateAppAuthClient(appKey);
+    mutateAsync: createOAuthClient,
+    isPending: isCreateOAuthClientPending,
+    error: createOAuthClientError,
+  } = useAdminCreateOAuthClient(appKey);
 
   const submitHandler = async (values) => {
     let appConfigKey = appConfig?.data?.key;
 
     if (!appConfigKey) {
       const { data: appConfigData } = await createAppConfig({
-        customConnectionAllowed: true,
-        shared: false,
+        useOnlyPredefinedAuthClients: false,
         disabled: false,
       });
+
       appConfigKey = appConfigData.key;
     }
 
     const { name, active, ...formattedAuthDefaults } = values;
 
-    await createAppAuthClient({
+    await createOAuthClient({
       appKey,
       name,
       active,
@@ -81,23 +81,23 @@ function AdminApplicationCreateAuthClient(props) {
   );
 
   return (
-    <AdminApplicationAuthClientDialog
+    <AdminApplicationOAuthClientDialog
       onClose={onClose}
-      error={createAppConfigError || createAppAuthClientError}
-      title={formatMessage('createAuthClient.title')}
+      error={createAppConfigError || createOAuthClientError}
+      title={formatMessage('createOAuthClient.title')}
       loading={isAppConfigLoading}
       submitHandler={submitHandler}
       authFields={auth?.data?.fields}
-      submitting={isCreateAppConfigPending || isCreateAppAuthClientPending}
+      submitting={isCreateAppConfigPending || isCreateOAuthClientPending}
       defaultValues={defaultValues}
     />
   );
 }
 
-AdminApplicationCreateAuthClient.propTypes = {
+AdminApplicationCreateOAuthClient.propTypes = {
   appKey: PropTypes.string.isRequired,
   application: AppPropType.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default AdminApplicationCreateAuthClient;
+export default AdminApplicationCreateOAuthClient;

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

@@ -15,7 +15,7 @@ import Switch from 'components/Switch';
 import TextField from 'components/TextField';
 import { Form } from './style';
 
-function AdminApplicationAuthClientDialog(props) {
+function AdminApplicationOAuthClientDialog(props) {
   const {
     error,
     onClose,
@@ -52,12 +52,12 @@ function AdminApplicationAuthClientDialog(props) {
                 <>
                   <Switch
                     name="active"
-                    label={formatMessage('authClient.inputActive')}
+                    label={formatMessage('oauthClient.inputActive')}
                   />
                   <TextField
                     required={true}
                     name="name"
-                    label={formatMessage('authClient.inputName')}
+                    label={formatMessage('oauthClient.inputName')}
                     fullWidth
                   />
                   {authFields?.map((field) => (
@@ -72,7 +72,7 @@ function AdminApplicationAuthClientDialog(props) {
                     loading={submitting}
                     disabled={disabled || !isDirty}
                   >
-                    {formatMessage('authClient.buttonSubmit')}
+                    {formatMessage('oauthClient.buttonSubmit')}
                   </LoadingButton>
                 </>
               )}
@@ -84,7 +84,7 @@ function AdminApplicationAuthClientDialog(props) {
   );
 }
 
-AdminApplicationAuthClientDialog.propTypes = {
+AdminApplicationOAuthClientDialog.propTypes = {
   error: PropTypes.shape({
     message: PropTypes.string,
   }),
@@ -98,4 +98,4 @@ AdminApplicationAuthClientDialog.propTypes = {
   disabled: PropTypes.bool,
 };
 
-export default AdminApplicationAuthClientDialog;
+export default AdminApplicationOAuthClientDialog;

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

@@ -8,29 +8,30 @@ import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
 import Chip from '@mui/material/Chip';
 import Button from '@mui/material/Button';
+
+import NoResultFound from 'components/NoResultFound';
 import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
-import useAdminAppAuthClients from 'hooks/useAdminAppAuthClients';
-import NoResultFound from 'components/NoResultFound';
+import useAdminOAuthClients from 'hooks/useAdminOAuthClients';
 
-function AdminApplicationAuthClients(props) {
+function AdminApplicationOAuthClients(props) {
   const { appKey } = props;
   const formatMessage = useFormatMessage();
-  const { data: appAuthClients, isLoading } = useAdminAppAuthClients(appKey);
+  const { data: appOAuthClients, isLoading } = useAdminOAuthClients(appKey);
 
   if (isLoading)
     return <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />;
 
-  if (!appAuthClients?.data.length) {
+  if (!appOAuthClients?.data.length) {
     return (
       <NoResultFound
         to={URLS.ADMIN_APP_AUTH_CLIENTS_CREATE(appKey)}
-        text={formatMessage('adminAppsAuthClients.noAuthClients')}
+        text={formatMessage('adminAppsOAuthClients.noOauthClients')}
       />
     );
   }
 
-  const sortedAuthClients = appAuthClients.data.slice().sort((a, b) => {
+  const sortedOAuthClients = appOAuthClients.data.slice().sort((a, b) => {
     if (a.id < b.id) {
       return -1;
     }
@@ -42,7 +43,7 @@ function AdminApplicationAuthClients(props) {
 
   return (
     <div>
-      {sortedAuthClients.map((client) => (
+      {sortedOAuthClients.map((client) => (
         <Card sx={{ mb: 1 }} key={client.id} data-test="auth-client">
           <CardActionArea
             component={Link}
@@ -59,8 +60,8 @@ function AdminApplicationAuthClients(props) {
                   variant={client?.active ? 'filled' : 'outlined'}
                   label={formatMessage(
                     client?.active
-                      ? 'adminAppsAuthClients.statusActive'
-                      : 'adminAppsAuthClients.statusInactive',
+                      ? 'adminAppsOAuthClients.statusActive'
+                      : 'adminAppsOAuthClients.statusInactive',
                   )}
                 />
               </Stack>
@@ -70,8 +71,13 @@ function AdminApplicationAuthClients(props) {
       ))}
       <Stack justifyContent="flex-end" direction="row">
         <Link to={URLS.ADMIN_APP_AUTH_CLIENTS_CREATE(appKey)}>
-          <Button variant="contained" sx={{ mt: 2 }} component="div" data-test="create-auth-client-button">
-            {formatMessage('createAuthClient.button')}
+          <Button
+            variant="contained"
+            sx={{ mt: 2 }}
+            component="div"
+            data-test="create-auth-client-button"
+          >
+            {formatMessage('createOAuthClient.button')}
           </Button>
         </Link>
       </Stack>
@@ -79,8 +85,8 @@ function AdminApplicationAuthClients(props) {
   );
 }
 
-AdminApplicationAuthClients.propTypes = {
+AdminApplicationOAuthClients.propTypes = {
   appKey: PropTypes.string.isRequired,
 };
 
-export default AdminApplicationAuthClients;
+export default AdminApplicationOAuthClients;

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

@@ -46,9 +46,8 @@ function AdminApplicationSettings(props) {
 
   const defaultValues = useMemo(
     () => ({
-      customConnectionAllowed:
-        appConfig?.data?.customConnectionAllowed || false,
-      shared: appConfig?.data?.shared || false,
+      useOnlyPredefinedAuthClients:
+        appConfig?.data?.useOnlyPredefinedAuthClients || false,
       disabled: appConfig?.data?.disabled || false,
     }),
     [appConfig?.data],
@@ -62,21 +61,17 @@ function AdminApplicationSettings(props) {
         <Paper sx={{ p: 2, mt: 4 }}>
           <Stack spacing={2} direction="column">
             <Switch
-              name="customConnectionAllowed"
-              label={formatMessage('adminAppsSettings.customConnectionAllowed')}
-              FormControlLabelProps={{
-                labelPlacement: 'start',
-              }}
-            />
-            <Divider />
-            <Switch
-              name="shared"
-              label={formatMessage('adminAppsSettings.shared')}
+              name="useOnlyPredefinedAuthClients"
+              label={formatMessage(
+                'adminAppsSettings.useOnlyPredefinedAuthClients',
+              )}
               FormControlLabelProps={{
                 labelPlacement: 'start',
               }}
             />
+
             <Divider />
+
             <Switch
               name="disabled"
               label={formatMessage('adminAppsSettings.disabled')}
@@ -86,6 +81,7 @@ function AdminApplicationSettings(props) {
             />
             <Divider />
           </Stack>
+
           <Stack>
             <LoadingButton
               data-test="submit-button"

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

@@ -4,26 +4,26 @@ import { useParams } from 'react-router-dom';
 
 import { AppPropType } from 'propTypes/propTypes';
 import useFormatMessage from 'hooks/useFormatMessage';
-import AdminApplicationAuthClientDialog from 'components/AdminApplicationAuthClientDialog';
-import useAdminAppAuthClient from 'hooks/useAdminAppAuthClient.ee';
-import useAdminUpdateAppAuthClient from 'hooks/useAdminUpdateAppAuthClient.ee';
+import AdminApplicationOAuthClientDialog from 'components/AdminApplicationOAuthClientDialog';
+import useAdminOAuthClient from 'hooks/useAdminOAuthClient.ee';
+import useAdminUpdateOAuthClient from 'hooks/useAdminUpdateOAuthClient.ee';
 import useAppAuth from 'hooks/useAppAuth';
 
-function AdminApplicationUpdateAuthClient(props) {
+function AdminApplicationUpdateOAuthClient(props) {
   const { application, onClose } = props;
   const formatMessage = useFormatMessage();
   const { clientId } = useParams();
 
-  const { data: adminAppAuthClient, isLoading: isAdminAuthClientLoading } =
-    useAdminAppAuthClient(application.key, clientId);
+  const { data: adminOAuthClient, isLoading: isAdminOAuthClientLoading } =
+    useAdminOAuthClient(application.key, clientId);
 
   const { data: auth } = useAppAuth(application.key);
 
   const {
-    mutateAsync: updateAppAuthClient,
-    isPending: isUpdateAppAuthClientPending,
-    error: updateAppAuthClientError,
-  } = useAdminUpdateAppAuthClient(application.key, clientId);
+    mutateAsync: updateOAuthClient,
+    isPending: isUpdateOAuthClientPending,
+    error: updateOAuthClientError,
+  } = useAdminUpdateOAuthClient(application.key, clientId);
 
   const authFields = auth?.data?.fields?.map((field) => ({
     ...field,
@@ -31,13 +31,13 @@ function AdminApplicationUpdateAuthClient(props) {
   }));
 
   const submitHandler = async (values) => {
-    if (!adminAppAuthClient) {
+    if (!adminOAuthClient) {
       return;
     }
 
     const { name, active, ...formattedAuthDefaults } = values;
 
-    await updateAppAuthClient({
+    await updateOAuthClient({
       name,
       active,
       formattedAuthDefaults,
@@ -64,31 +64,31 @@ function AdminApplicationUpdateAuthClient(props) {
 
   const defaultValues = useMemo(
     () => ({
-      name: adminAppAuthClient?.data?.name || '',
-      active: adminAppAuthClient?.data?.active || false,
+      name: adminOAuthClient?.data?.name || '',
+      active: adminOAuthClient?.data?.active || false,
       ...getAuthFieldsDefaultValues(),
     }),
-    [adminAppAuthClient, getAuthFieldsDefaultValues],
+    [adminOAuthClient, getAuthFieldsDefaultValues],
   );
 
   return (
-    <AdminApplicationAuthClientDialog
+    <AdminApplicationOAuthClientDialog
       onClose={onClose}
-      error={updateAppAuthClientError}
-      title={formatMessage('updateAuthClient.title')}
-      loading={isAdminAuthClientLoading}
+      error={updateOAuthClientError}
+      title={formatMessage('updateOAuthClient.title')}
+      loading={isAdminOAuthClientLoading}
       submitHandler={submitHandler}
       authFields={authFields}
-      submitting={isUpdateAppAuthClientPending}
+      submitting={isUpdateOAuthClientPending}
       defaultValues={defaultValues}
-      disabled={!adminAppAuthClient}
+      disabled={!adminOAuthClient}
     />
   );
 }
 
-AdminApplicationUpdateAuthClient.propTypes = {
+AdminApplicationUpdateOAuthClient.propTypes = {
   application: AppPropType.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default AdminApplicationUpdateAuthClient;
+export default AdminApplicationUpdateOAuthClient;

packages/web/src/components/AppAuthClientsDialog/index.ee.jsx

@@ -1,53 +0,0 @@
-import PropTypes from 'prop-types';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemText from '@mui/material/ListItemText';
-import * as React from 'react';
-import useAppAuthClients from 'hooks/useAppAuthClients';
-import useFormatMessage from 'hooks/useFormatMessage';
-
-function AppAuthClientsDialog(props) {
-  const { appKey, onClientClick, onClose } = props;
-  const { data: appAuthClients } = useAppAuthClients(appKey);
-
-  const formatMessage = useFormatMessage();
-
-  React.useEffect(
-    function autoAuthenticateSingleClient() {
-      if (appAuthClients?.data.length === 1) {
-        onClientClick(appAuthClients.data[0].id);
-      }
-    },
-    [appAuthClients?.data],
-  );
-
-  if (!appAuthClients?.data.length || appAuthClients?.data.length === 1)
-    return <React.Fragment />;
-
-  return (
-    <Dialog onClose={onClose} open={true}>
-      <DialogTitle>{formatMessage('appAuthClientsDialog.title')}</DialogTitle>
-
-      <List sx={{ pt: 0 }}>
-        {appAuthClients.data.map((appAuthClient) => (
-          <ListItem disableGutters key={appAuthClient.id}>
-            <ListItemButton onClick={() => onClientClick(appAuthClient.id)}>
-              <ListItemText primary={appAuthClient.name} />
-            </ListItemButton>
-          </ListItem>
-        ))}
-      </List>
-    </Dialog>
-  );
-}
-
-AppAuthClientsDialog.propTypes = {
-  appKey: PropTypes.string.isRequired,
-  onClientClick: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
-};
-
-export default AppAuthClientsDialog;

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

@@ -11,14 +11,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import Can from 'components/Can';
 
 function ContextMenu(props) {
-  const {
-    appKey,
-    connection,
-    onClose,
-    onMenuItemClick,
-    anchorEl,
-    disableReconnection,
-  } = props;
+  const { appKey, connection, onClose, onMenuItemClick, anchorEl } = props;
   const formatMessage = useFormatMessage();
   const queryClient = useQueryClient();
 
@@ -73,11 +66,11 @@ function ContextMenu(props) {
         {(allowed) => (
           <MenuItem
             component={Link}
-            disabled={!allowed || disableReconnection}
+            disabled={!allowed}
             to={URLS.APP_RECONNECT_CONNECTION(
               appKey,
               connection.id,
-              connection.appAuthClientId,
+              connection.oauthClientId,
             )}
             onClick={createActionHandler({ type: 'reconnect' })}
           >
@@ -109,7 +102,6 @@ ContextMenu.propTypes = {
     PropTypes.func,
     PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   ]),
-  disableReconnection: PropTypes.bool.isRequired,
 };
 
 export default ContextMenu;

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

@@ -30,8 +30,7 @@ const countTranslation = (value) => (
 function AppConnectionRow(props) {
   const formatMessage = useFormatMessage();
   const enqueueSnackbar = useEnqueueSnackbar();
-  const { id, key, formattedData, verified, createdAt, reconnectable } =
-    props.connection;
+  const { id, key, formattedData, verified, createdAt } = props.connection;
   const [verificationVisible, setVerificationVisible] = React.useState(false);
   const contextButtonRef = React.useRef(null);
   const [anchorEl, setAnchorEl] = React.useState(null);
@@ -174,7 +173,6 @@ function AppConnectionRow(props) {
         <ConnectionContextMenu
           appKey={key}
           connection={props.connection}
-          disableReconnection={!reconnectable}
           onClose={handleClose}
           onMenuItemClick={onContextMenuAction}
           anchorEl={anchorEl}

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

@@ -91,15 +91,15 @@ function ChooseAppAndEventSubstep(props) {
   const onEventChange = React.useCallback(
     (event, selectedOption) => {
       if (typeof selectedOption === 'object') {
-        // TODO: try to simplify type casting below.
-        const typedSelectedOption = selectedOption;
-        const option = typedSelectedOption;
-        const eventKey = option?.value;
+        const eventKey = selectedOption?.value;
+        const eventLabel = selectedOption?.label;
+
         if (step.key !== eventKey) {
           onChange({
             step: {
               ...step,
               key: eventKey,
+              keyLabel: eventLabel,
             },
           });
         }
@@ -111,10 +111,8 @@ function ChooseAppAndEventSubstep(props) {
   const onAppChange = React.useCallback(
     (event, selectedOption) => {
       if (typeof selectedOption === 'object') {
-        // TODO: try to simplify type casting below.
-        const typedSelectedOption = selectedOption;
-        const option = typedSelectedOption;
-        const appKey = option?.value;
+        const appKey = selectedOption?.value;
+
         if (step.appKey !== appKey) {
           onChange({
             step: {

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

@@ -7,7 +7,7 @@ import TextField from '@mui/material/TextField';
 import * as React from 'react';
 
 import AddAppConnection from 'components/AddAppConnection';
-import AppAuthClientsDialog from 'components/AppAuthClientsDialog/index.ee';
+import AppOAuthClientsDialog from 'components/OAuthClientsDialog/index.ee';
 import FlowSubstepTitle from 'components/FlowSubstepTitle';
 import useAppConfig from 'hooks/useAppConfig.ee';
 import { EditorContext } from 'contexts/Editor';
@@ -22,6 +22,7 @@ import useStepConnection from 'hooks/useStepConnection';
 import { useQueryClient } from '@tanstack/react-query';
 import useAppConnections from 'hooks/useAppConnections';
 import useTestConnection from 'hooks/useTestConnection';
+import useOAuthClients from 'hooks/useOAuthClients';
 
 const ADD_CONNECTION_VALUE = 'ADD_CONNECTION';
 const ADD_SHARED_CONNECTION_VALUE = 'ADD_SHARED_CONNECTION';
@@ -53,6 +54,7 @@ function ChooseConnectionSubstep(props) {
   const [showAddSharedConnectionDialog, setShowAddSharedConnectionDialog] =
     React.useState(false);
   const queryClient = useQueryClient();
+  const { data: appOAuthClients } = useOAuthClients(application.key);
 
   const { authenticate } = useAuthenticateApp({
     appKey: application.key,
@@ -93,30 +95,53 @@ function ChooseConnectionSubstep(props) {
       appWithConnections?.map((connection) => optionGenerator(connection)) ||
       [];
 
+    const addCustomConnection = {
+      label: formatMessage('chooseConnectionSubstep.addNewConnection'),
+      value: ADD_CONNECTION_VALUE,
+    };
+
+    const addConnectionWithOAuthClient = {
+      label: formatMessage(
+        'chooseConnectionSubstep.addConnectionWithOAuthClient',
+      ),
+      value: ADD_SHARED_CONNECTION_VALUE,
+    };
+
+    // means there is no app config. defaulting to custom connections only
+    if (!appConfig?.data) {
+      return options.concat([addCustomConnection]);
+    }
+
+    // app is disabled.
+    if (appConfig.data.disabled) return options;
+
+    // means only OAuth clients are allowed for connection creation and there is OAuth client
     if (
-      !appConfig?.data ||
-      (!appConfig.data?.disabled && appConfig.data?.customConnectionAllowed)
+      appConfig.data.useOnlyPredefinedAuthClients === true &&
+      appOAuthClients.data.length > 0
     ) {
-      options.push({
-        label: formatMessage('chooseConnectionSubstep.addNewConnection'),
-        value: ADD_CONNECTION_VALUE,
-      });
+      return options.concat([addConnectionWithOAuthClient]);
     }
 
-    if (appConfig?.data?.connectionAllowed) {
-      options.push({
-        label: formatMessage('chooseConnectionSubstep.addNewSharedConnection'),
-        value: ADD_SHARED_CONNECTION_VALUE,
-      });
+    // means there is no OAuth client. so we don't show the `addConnectionWithOAuthClient`
+    if (
+      appConfig.data.useOnlyPredefinedAuthClients === true &&
+      appOAuthClients.data.length === 0
+    ) {
+      return options;
     }
 
-    return options;
-  }, [data, formatMessage, appConfig?.data]);
+    if (appOAuthClients.data.length === 0) {
+      return options.concat([addCustomConnection]);
+    }
 
-  const handleClientClick = async (appAuthClientId) => {
+    return options.concat([addCustomConnection, addConnectionWithOAuthClient]);
+  }, [data, formatMessage, appConfig, appOAuthClients]);
+
+  const handleClientClick = async (oauthClientId) => {
     try {
       const response = await authenticate?.({
-        appAuthClientId,
+        oauthClientId,
       });
       const connectionId = response?.createConnection.id;
 
@@ -162,10 +187,7 @@ function ChooseConnectionSubstep(props) {
   const handleChange = React.useCallback(
     async (event, selectedOption) => {
       if (typeof selectedOption === 'object') {
-        // TODO: try to simplify type casting below.
-        const typedSelectedOption = selectedOption;
-        const option = typedSelectedOption;
-        const connectionId = option?.value;
+        const connectionId = selectedOption?.value;
 
         if (connectionId === ADD_CONNECTION_VALUE) {
           setShowAddConnectionDialog(true);
@@ -270,7 +292,7 @@ function ChooseConnectionSubstep(props) {
       )}
 
       {application && showAddSharedConnectionDialog && (
-        <AppAuthClientsDialog
+        <AppOAuthClientsDialog
           appKey={application.key}
           onClose={() => setShowAddSharedConnectionDialog(false)}
           onClientClick={handleClientClick}

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

@@ -1,10 +1,19 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import MuiContainer from '@mui/material/Container';
 
-export default function Container(props) {
-  return <MuiContainer {...props} />;
+export default function Container({ maxWidth = 'lg', ...props }) {
+  return <MuiContainer maxWidth={maxWidth} {...props} />;
 }
 
-Container.defaultProps = {
-  maxWidth: 'lg',
+Container.propTypes = {
+  maxWidth: PropTypes.oneOf([
+    'xs',
+    'sm',
+    'md',
+    'lg',
+    'xl',
+    false,
+    PropTypes.string,
+  ]),
 };

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

@@ -7,37 +7,68 @@ import { Box, TextField } from './style';
 const noop = () => null;
 
 function EditableTypography(props) {
-  const { children, onConfirm = noop, sx, ...typographyProps } = props;
+  const {
+    children,
+    onConfirm = noop,
+    sx,
+    iconColor = 'inherit',
+    disabled = false,
+    prefixValue = '',
+    ...typographyProps
+  } = props;
+
   const [editing, setEditing] = React.useState(false);
+
   const handleClick = React.useCallback(() => {
+    if (disabled) return;
+
     setEditing((editing) => !editing);
-  }, []);
+  }, [disabled]);
+
   const handleTextFieldClick = React.useCallback((event) => {
     event.stopPropagation();
   }, []);
+
   const handleTextFieldKeyDown = React.useCallback(
     async (event) => {
       const target = event.target;
-      if (event.key === 'Enter') {
+      const eventKey = event.key;
+
+      if (eventKey === 'Enter') {
         if (target.value !== children) {
           await onConfirm(target.value);
         }
+
+        setEditing(false);
+      }
+
+      if (eventKey === 'Escape') {
         setEditing(false);
       }
     },
-    [children],
+    [children, onConfirm],
   );
+
   const handleTextFieldBlur = React.useCallback(
     async (event) => {
       const value = event.target.value;
+
       if (value !== children) {
         await onConfirm(value);
       }
+
       setEditing(false);
     },
     [onConfirm, children],
   );
-  let component = <Typography {...typographyProps}>{children}</Typography>;
+
+  let component = (
+    <Typography {...typographyProps}>
+      {prefixValue}
+      {children}
+    </Typography>
+  );
+
   if (editing) {
     component = (
       <TextField
@@ -51,18 +82,24 @@ function EditableTypography(props) {
       />
     );
   }
-  return (
-    <Box sx={sx} onClick={handleClick} editing={editing}>
-      <EditIcon sx={{ mr: 1 }} />
 
+  return (
+    <Box sx={sx} onClick={handleClick} editing={editing} disabled={disabled}>
       {component}
+
+      {!disabled && editing === false && (
+        <EditIcon fontSize="small" color={iconColor} sx={{ ml: 1 }} />
+      )}
     </Box>
   );
 }
 
 EditableTypography.propTypes = {
   children: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  iconColor: PropTypes.oneOf(['action', 'inherit']),
   onConfirm: PropTypes.func,
+  prefixValue: PropTypes.string,
   sx: PropTypes.object,
 };
 

packages/web/src/components/EditableTypography/style.js

@@ -2,17 +2,22 @@ import { styled } from '@mui/material/styles';
 import MuiBox from '@mui/material/Box';
 import MuiTextField from '@mui/material/TextField';
 import { inputClasses } from '@mui/material/Input';
-const boxShouldForwardProp = (prop) => !['editing'].includes(prop);
+
+const boxShouldForwardProp = (prop) => !['editing', 'disabled'].includes(prop);
+
 export const Box = styled(MuiBox, {
   shouldForwardProp: boxShouldForwardProp,
 })`
   display: flex;
   flex: 1;
-  width: 300px;
+  min-width: 300px;
+  max-width: 90%;
   height: 33px;
   align-items: center;
+  ${({ disabled }) => !disabled && 'cursor: pointer;'}
   ${({ editing }) => editing && 'border-bottom: 1px dashed #000;'}
 `;
+
 export const TextField = styled(MuiTextField)({
   width: '100%',
   [`.${inputClasses.root}:before, .${inputClasses.root}:after, .${inputClasses.root}:hover`]:

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

@@ -27,6 +27,10 @@ function Editor(props) {
         connectionId: step.connection?.id,
       };
 
+      if (step.name || step.keyLabel) {
+        payload.name = step.name || step.keyLabel;
+      }
+
       if (step.appKey) {
         payload.appKey = step.appKey;
       }

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

@@ -6,29 +6,36 @@ import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
 import IconButton from '@mui/material/IconButton';
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+import DownloadIcon from '@mui/icons-material/Download';
 import Snackbar from '@mui/material/Snackbar';
 import { ReactFlowProvider } from 'reactflow';
 
 import { EditorProvider } from 'contexts/Editor';
-import EditableTypography from 'components/EditableTypography';
-import Container from 'components/Container';
-import Editor from 'components/Editor';
-import Can from 'components/Can';
-import useFormatMessage from 'hooks/useFormatMessage';
-import * as URLS from 'config/urls';
 import { TopBar } from './style';
+import * as URLS from 'config/urls';
+import Can from 'components/Can';
+import Container from 'components/Container';
+import EditableTypography from 'components/EditableTypography';
+import Editor from 'components/Editor';
+import EditorNew from 'components/EditorNew/EditorNew';
 import useFlow from 'hooks/useFlow';
+import useFormatMessage from 'hooks/useFormatMessage';
 import useUpdateFlow from 'hooks/useUpdateFlow';
 import useUpdateFlowStatus from 'hooks/useUpdateFlowStatus';
-import EditorNew from 'components/EditorNew/EditorNew';
+import useExportFlow from 'hooks/useExportFlow';
+import useDownloadJsonAsFile from 'hooks/useDownloadJsonAsFile';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 
 const useNewFlowEditor = process.env.REACT_APP_USE_NEW_FLOW_EDITOR === 'true';
 
 export default function EditorLayout() {
   const { flowId } = useParams();
   const formatMessage = useFormatMessage();
+  const enqueueSnackbar = useEnqueueSnackbar();
   const { mutateAsync: updateFlow } = useUpdateFlow(flowId);
   const { mutateAsync: updateFlowStatus } = useUpdateFlowStatus(flowId);
+  const { mutateAsync: exportFlow } = useExportFlow(flowId);
+  const downloadJsonAsFile = useDownloadJsonAsFile();
   const { data, isLoading: isFlowLoading } = useFlow(flowId);
   const flow = data?.data;
 
@@ -38,6 +45,19 @@ export default function EditorLayout() {
     });
   };
 
+  const onExportFlow = async (name) => {
+    const flowExport = await exportFlow();
+
+    downloadJsonAsFile({
+      contents: flowExport.data,
+      name: flowExport.data.name,
+    });
+
+    enqueueSnackbar(formatMessage('flowEditor.flowSuccessfullyExported'), {
+      variant: 'success',
+    });
+  };
+
   return (
     <>
       <TopBar
@@ -72,6 +92,7 @@ export default function EditorLayout() {
               variant="body1"
               onConfirm={onFlowNameUpdate}
               noWrap
+              iconColor="action"
               sx={{ display: 'flex', flex: 1, maxWidth: '50vw', ml: 2 }}
             >
               {flow?.name}
@@ -79,7 +100,23 @@ export default function EditorLayout() {
           )}
         </Box>
 
-        <Box pr={1}>
+        <Box pr={1} display="flex" gap={1}>
+          <Can I="read" a="Flow" passThrough>
+            {(allowed) => (
+              <Button
+                disabled={!allowed || !flow}
+                variant="outlined"
+                color="info"
+                size="small"
+                onClick={onExportFlow}
+                data-test="export-flow-button"
+                startIcon={<DownloadIcon />}
+              >
+                {formatMessage('flowEditor.export')}
+              </Button>
+            )}
+          </Can>
+
           <Can I="publish" a="Flow" passThrough>
             {(allowed) => (
               <Button

packages/web/src/components/EditorNew/EditorNew.jsx

@@ -90,6 +90,10 @@ const EditorNew = ({ flow }) => {
         connectionId: step.connection?.id,
       };
 
+      if (step.name || step.keyLabel) {
+        payload.name = step.name || step.keyLabel;
+      }
+
       if (step.appKey) {
         payload.appKey = step.appKey;
       }

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

@@ -9,6 +9,7 @@ import Tab from '@mui/material/Tab';
 import Typography from '@mui/material/Typography';
 import Tooltip from '@mui/material/Tooltip';
 import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
 
 import TabPanel from 'components/TabPanel';
 import SearchableJSONViewer from 'components/SearchableJSONViewer';
@@ -100,6 +101,10 @@ function ExecutionStep(props) {
 
   const hasError = !!executionStep.errorDetails;
 
+  const stepTypeName = isTrigger
+    ? formatMessage('flowStep.triggerType')
+    : formatMessage('flowStep.actionType');
+
   return (
     <Wrapper elevation={1} data-test="execution-step">
       <Header>
@@ -119,13 +124,20 @@ function ExecutionStep(props) {
             <ExecutionStepId id={executionStep.step.id} />
 
             <Box flex="1" gridArea="step">
-              <Typography variant="caption">
-                {isTrigger && formatMessage('flowStep.triggerType')}
-                {isAction && formatMessage('flowStep.actionType')}
+              <Typography
+                component={Stack}
+                direction="row"
+                variant="stepApp"
+                alignItems="center"
+                gap={0.5}
+              >
+                <Chip label={stepTypeName} variant="stepType" size="small" />
+
+                {app?.name}
               </Typography>
 
               <Typography variant="body2">
-                {step.position}. {app?.name}
+                {step.position}. {step.name}
               </Typography>
             </Box>
 

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

@@ -12,6 +12,8 @@ import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useDuplicateFlow from 'hooks/useDuplicateFlow';
 import useDeleteFlow from 'hooks/useDeleteFlow';
+import useExportFlow from 'hooks/useExportFlow';
+import useDownloadJsonAsFile from 'hooks/useDownloadJsonAsFile';
 
 function ContextMenu(props) {
   const { flowId, onClose, anchorEl, onDuplicateFlow, onDeleteFlow, appKey } =
@@ -20,7 +22,9 @@ function ContextMenu(props) {
   const formatMessage = useFormatMessage();
   const queryClient = useQueryClient();
   const { mutateAsync: duplicateFlow } = useDuplicateFlow(flowId);
-  const { mutateAsync: deleteFlow } = useDeleteFlow();
+  const { mutateAsync: deleteFlow } = useDeleteFlow(flowId);
+  const { mutateAsync: exportFlow } = useExportFlow(flowId);
+  const downloadJsonAsFile = useDownloadJsonAsFile();
 
   const onFlowDuplicate = React.useCallback(async () => {
     await duplicateFlow();
@@ -51,7 +55,7 @@ function ContextMenu(props) {
   ]);
 
   const onFlowDelete = React.useCallback(async () => {
-    await deleteFlow(flowId);
+    await deleteFlow();
 
     if (appKey) {
       await queryClient.invalidateQueries({
@@ -65,7 +69,30 @@ function ContextMenu(props) {
 
     onDeleteFlow?.();
     onClose();
-  }, [flowId, onClose, deleteFlow, queryClient, onDeleteFlow]);
+  }, [
+    deleteFlow,
+    appKey,
+    enqueueSnackbar,
+    formatMessage,
+    onDeleteFlow,
+    onClose,
+    queryClient,
+  ]);
+
+  const onFlowExport = React.useCallback(async () => {
+    const flowExport = await exportFlow();
+
+    downloadJsonAsFile({
+      contents: flowExport.data,
+      name: flowExport.data.name,
+    });
+
+    enqueueSnackbar(formatMessage('flow.successfullyExported'), {
+      variant: 'success',
+    });
+
+    onClose();
+  }, [exportFlow, downloadJsonAsFile, enqueueSnackbar, formatMessage, onClose]);
 
   return (
     <Menu
@@ -90,6 +117,14 @@ function ContextMenu(props) {
         )}
       </Can>
 
+      <Can I="read" a="Flow" passThrough>
+        {(allowed) => (
+          <MenuItem disabled={!allowed} onClick={onFlowExport}>
+            {formatMessage('flow.export')}
+          </MenuItem>
+        )}
+      </Can>
+
       <Can I="delete" a="Flow" passThrough>
         {(allowed) => (
           <MenuItem disabled={!allowed} onClick={onFlowDelete}>

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

@@ -3,6 +3,7 @@ import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
 import Button from '@mui/material/Button';
 import Collapse from '@mui/material/Collapse';
 import List from '@mui/material/List';
@@ -18,6 +19,7 @@ import { isEqual } from 'lodash';
 import { EditorContext } from 'contexts/Editor';
 import { StepExecutionsProvider } from 'contexts/StepExecutions';
 import TestSubstep from 'components/TestSubstep';
+import EditableTypography from 'components/EditableTypography';
 import FlowSubstep from 'components/FlowSubstep';
 import ChooseAppAndEventSubstep from 'components/ChooseAppAndEventSubstep';
 import ChooseConnectionSubstep from 'components/ChooseConnectionSubstep';
@@ -106,10 +108,9 @@ function generateValidationSchema(substeps) {
 }
 
 function FlowStep(props) {
-  const { collapsed, onChange, onContinue, flowId } = props;
+  const { collapsed, onChange, onContinue, flowId, step } = props;
   const editorContext = React.useContext(EditorContext);
   const contextButtonRef = React.useRef(null);
-  const step = props.step;
   const [anchorEl, setAnchorEl] = React.useState(null);
   const isTrigger = step.type === 'trigger';
   const isAction = step.type === 'action';
@@ -117,6 +118,10 @@ function FlowStep(props) {
   const [currentSubstep, setCurrentSubstep] = React.useState(0);
   const useAppsOptions = {};
 
+  const stepTypeName = isTrigger
+    ? formatMessage('flowStep.triggerType')
+    : formatMessage('flowStep.actionType');
+
   if (isTrigger) {
     useAppsOptions.onlyWithTriggers = true;
   }
@@ -183,6 +188,13 @@ function FlowStep(props) {
     }
   };
 
+  const handleStepNameChange = async (name) => {
+    await onChange({
+      ...step,
+      name,
+    });
+  };
+
   const stepValidationSchema = React.useMemo(
     () => generateValidationSchema(substeps),
     [substeps],
@@ -226,7 +238,7 @@ function FlowStep(props) {
       data-test="flow-step"
     >
       <Header collapsed={collapsed}>
-        <Stack direction="row" alignItems="center" gap={2}>
+        <Stack direction="row" alignItems="center" gap={3}>
           <AppIconWrapper>
             <AppIcon
               url={app?.iconUrl}
@@ -239,17 +251,30 @@ function FlowStep(props) {
             </AppIconStatusIconWrapper>
           </AppIconWrapper>
 
-          <div>
-            <Typography variant="caption">
-              {isTrigger
-                ? formatMessage('flowStep.triggerType')
-                : formatMessage('flowStep.actionType')}
+          <Stack direction="column" gap={0.5} sx={{ width: '100%' }}>
+            <Typography
+              component={Stack}
+              direction="row"
+              variant="stepApp"
+              alignItems="center"
+              gap={0.5}
+            >
+              <Chip label={stepTypeName} variant="stepType" size="small" />
+
+              {app?.name}
             </Typography>
 
-            <Typography variant="body2">
-              {step.position}. {app?.name}
-            </Typography>
-          </div>
+            <EditableTypography
+              iconPosition="end"
+              iconSize="small"
+              variant="body2"
+              onConfirm={handleStepNameChange}
+              prefixValue={`${step.position}. `}
+              disabled={editorContext.readOnly || collapsed}
+            >
+              {step.name}
+            </EditableTypography>
+          </Stack>
 
           <Box display="flex" flex={1} justifyContent="end">
             {/* as there are no other actions besides "delete step", we hide the context menu. */}

packages/web/src/components/FlowSubstepTitle/style.jsx

@@ -1,9 +1,11 @@
 import { styled } from '@mui/material/styles';
 import MuiListItemButton from '@mui/material/ListItemButton';
 import MuiTypography from '@mui/material/Typography';
+
 export const ListItemButton = styled(MuiListItemButton)`
   justify-content: space-between;
 `;
+
 export const Typography = styled(MuiTypography)`
   display: flex;
   align-items: center;

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
+import useFormatMessage from 'hooks/useFormatMessage';
 
 const noop = () => null;
 
@@ -18,6 +19,8 @@ function Form(props) {
     ...formProps
   } = props;
 
+  const formatMessage = useFormatMessage();
+
   const methods = useForm({
     defaultValues,
     reValidateMode,
@@ -25,6 +28,8 @@ function Form(props) {
     mode,
   });
 
+  const { setError } = methods;
+
   const form = useWatch({ control: methods.control });
   const prevDefaultValues = React.useRef(defaultValues);
 
@@ -44,9 +49,53 @@ function Form(props) {
     }
   }, [defaultValues]);
 
+  const handleErrors = React.useCallback(
+    function (errors) {
+      if (!errors) return;
+
+      let shouldSetGenericGeneralError = true;
+      const fieldNames = Object.keys(defaultValues);
+
+      Object.entries(errors).forEach(([fieldName, fieldErrors]) => {
+        if (fieldNames.includes(fieldName) && Array.isArray(fieldErrors)) {
+          shouldSetGenericGeneralError = false;
+          setError(fieldName, {
+            type: 'fieldRequestError',
+            message: fieldErrors.join(', '),
+          });
+        }
+      });
+
+      // in case of general errors
+      if (Array.isArray(errors.general)) {
+        for (const error of errors.general) {
+          shouldSetGenericGeneralError = false;
+          setError('root.general', { type: 'requestError', message: error });
+        }
+      }
+
+      if (shouldSetGenericGeneralError) {
+        setError('root.general', {
+          type: 'requestError',
+          message: formatMessage('form.genericError'),
+        });
+      }
+    },
+    [defaultValues, formatMessage, setError],
+  );
+
   return (
     <FormProvider {...methods}>
-      <form onSubmit={methods.handleSubmit(onSubmit)} {...formProps}>
+      <form
+        onSubmit={methods.handleSubmit(async (data, event) => {
+          try {
+            return await onSubmit?.(data);
+          } catch (errors) {
+            handleErrors(errors);
+          }
+        })}
+        {...formProps}
+      >
         {render ? render(methods) : children}
       </form>
     </FormProvider>

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

@@ -2,11 +2,10 @@ import * as React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
-import { Alert } from '@mui/material';
+import Alert from '@mui/material/Alert';
 import LoadingButton from '@mui/lab/LoadingButton';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { enqueueSnackbar } from 'notistack';
 import { useQueryClient } from '@tanstack/react-query';
 import Link from '@mui/material/Link';
 
@@ -16,21 +15,41 @@ import * as URLS from 'config/urls';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
 
-const validationSchema = yup.object().shape({
-  fullName: yup.string().trim().required('installationForm.mandatoryInput'),
-  email: yup
-    .string()
-    .trim()
-    .email('installationForm.validateEmail')
-    .required('installationForm.mandatoryInput'),
-  password: yup.string().required('installationForm.mandatoryInput'),
-  confirmPassword: yup
-    .string()
-    .required('installationForm.mandatoryInput')
-    .oneOf([yup.ref('password')], 'installationForm.passwordsMustMatch'),
-});
+const getValidationSchema = (formatMessage) => {
+  const getMandatoryInputMessage = (inputNameId) =>
+    formatMessage('installationForm.mandatoryInput', {
+      inputName: formatMessage(inputNameId),
+    });
 
-const initialValues = {
+  return yup.object().shape({
+    fullName: yup
+      .string()
+      .trim()
+      .required(
+        getMandatoryInputMessage('installationForm.fullNameFieldLabel'),
+      ),
+    email: yup
+      .string()
+      .trim()
+      .required(getMandatoryInputMessage('installationForm.emailFieldLabel'))
+      .email(formatMessage('installationForm.validateEmail')),
+    password: yup
+      .string()
+      .required(getMandatoryInputMessage('installationForm.passwordFieldLabel'))
+      .min(6, formatMessage('installationForm.passwordMinLength')),
+    confirmPassword: yup
+      .string()
+      .required(
+        getMandatoryInputMessage('installationForm.confirmPasswordFieldLabel'),
+      )
+      .oneOf(
+        [yup.ref('password')],
+        formatMessage('installationForm.passwordsMustMatch'),
+      ),
+  });
+};
+
+const defaultValues = {
   fullName: '',
   email: '',
   password: '',
@@ -39,7 +58,7 @@ const initialValues = {
 
 function InstallationForm() {
   const formatMessage = useFormatMessage();
-  const install = useInstallation();
+  const { mutateAsync: install, isSuccess, isPending } = useInstallation();
   const queryClient = useQueryClient();
 
   const handleOnRedirect = () => {
@@ -48,21 +67,16 @@ function InstallationForm() {
     });
   };
 
-  const handleSubmit = async (values) => {
-    const { fullName, email, password } = values;
+  const handleSubmit = async ({ fullName, email, password }) => {
     try {
-      await install.mutateAsync({
+      await install({
         fullName,
         email,
         password,
       });
     } catch (error) {
-      enqueueSnackbar(
-        error?.message || formatMessage('installationForm.error'),
-        {
-          variant: 'error',
-        },
-      );
+      const errors = error?.response?.data?.errors;
+      throw errors || error;
     }
   };
 
@@ -82,11 +96,13 @@ function InstallationForm() {
         {formatMessage('installationForm.title')}
       </Typography>
       <Form
-        defaultValues={initialValues}
+        automaticValidation={false}
+        noValidate
+        defaultValues={defaultValues}
         onSubmit={handleSubmit}
-        resolver={yupResolver(validationSchema)}
+        resolver={yupResolver(getValidationSchema(formatMessage))}
         mode="onChange"
-        render={({ formState: { errors, touchedFields } }) => (
+        render={({ formState: { errors } }) => (
           <>
             <TextField
               label={formatMessage('installationForm.fullNameFieldLabel')}
@@ -95,19 +111,12 @@ function InstallationForm() {
               margin="dense"
               autoComplete="fullName"
               data-test="fullName-text-field"
-              error={touchedFields.fullName && !!errors?.fullName}
-              helperText={
-                touchedFields.fullName && errors?.fullName?.message
-                  ? formatMessage(errors?.fullName?.message, {
-                      inputName: formatMessage(
-                        'installationForm.fullNameFieldLabel',
-                      ),
-                    })
-                  : ''
-              }
+              error={!!errors?.fullName}
+              helperText={errors?.fullName?.message}
               required
-              readOnly={install.isSuccess}
+              readOnly={isSuccess}
             />
+
             <TextField
               label={formatMessage('installationForm.emailFieldLabel')}
               name="email"
@@ -115,19 +124,12 @@ function InstallationForm() {
               margin="dense"
               autoComplete="email"
               data-test="email-text-field"
-              error={touchedFields.email && !!errors?.email}
-              helperText={
-                touchedFields.email && errors?.email?.message
-                  ? formatMessage(errors?.email?.message, {
-                      inputName: formatMessage(
-                        'installationForm.emailFieldLabel',
-                      ),
-                    })
-                  : ''
-              }
+              error={!!errors?.email}
+              helperText={errors?.email?.message}
               required
-              readOnly={install.isSuccess}
+              readOnly={isSuccess}
             />
+
             <TextField
               label={formatMessage('installationForm.passwordFieldLabel')}
               name="password"
@@ -135,19 +137,12 @@ function InstallationForm() {
               margin="dense"
               type="password"
               data-test="password-text-field"
-              error={touchedFields.password && !!errors?.password}
-              helperText={
-                touchedFields.password && errors?.password?.message
-                  ? formatMessage(errors?.password?.message, {
-                      inputName: formatMessage(
-                        'installationForm.passwordFieldLabel',
-                      ),
-                    })
-                  : ''
-              }
+              error={!!errors?.password}
+              helperText={errors?.password?.message}
               required
-              readOnly={install.isSuccess}
+              readOnly={isSuccess}
             />
+
             <TextField
               label={formatMessage(
                 'installationForm.confirmPasswordFieldLabel',
@@ -157,52 +152,53 @@ function InstallationForm() {
               margin="dense"
               type="password"
               data-test="repeat-password-text-field"
-              error={touchedFields.confirmPassword && !!errors?.confirmPassword}
-              helperText={
-                touchedFields.confirmPassword &&
-                errors?.confirmPassword?.message
-                  ? formatMessage(errors?.confirmPassword?.message, {
-                      inputName: formatMessage(
-                        'installationForm.confirmPasswordFieldLabel',
-                      ),
-                    })
-                  : ''
-              }
+              error={!!errors?.confirmPassword}
+              helperText={errors?.confirmPassword?.message}
               required
-              readOnly={install.isSuccess}
+              readOnly={isSuccess}
             />
 
+            {errors?.root?.general && (
+              <Alert data-test="error-alert" severity="error" sx={{ mt: 2 }}>
+                {errors.root.general.message}
+              </Alert>
+            )}
+
+            {isSuccess && (
+              <Alert
+                data-test="success-alert"
+                severity="success"
+                sx={{ mt: 2 }}
+              >
+                {formatMessage('installationForm.success', {
+                  link: (str) => (
+                    <Link
+                      component={RouterLink}
+                      to={URLS.LOGIN}
+                      onClick={handleOnRedirect}
+                      replace
+                    >
+                      {str}
+                    </Link>
+                  ),
+                })}
+              </Alert>
+            )}
             <LoadingButton
               type="submit"
               variant="contained"
               color="primary"
-              sx={{ boxShadow: 2, mt: 3 }}
-              loading={install.isPending}
-              disabled={install.isSuccess}
+              sx={{ boxShadow: 2, mt: 2 }}
+              loading={isPending}
+              disabled={isSuccess}
               fullWidth
-              data-test="signUp-button"
+              data-test="installation-button"
             >
               {formatMessage('installationForm.submit')}
             </LoadingButton>
           </>
         )}
       />
-      {install.isSuccess && (
-        <Alert data-test="success-alert" severity="success" sx={{ mt: 3 }}>
-          {formatMessage('installationForm.success', {
-            link: (str) => (
-              <Link
-                component={RouterLink}
-                to={URLS.LOGIN}
-                onClick={handleOnRedirect}
-                replace
-              >
-                {str}
-              </Link>
-            ),
-          })}
-        </Alert>
-      )}
     </Paper>
   );
 }

packages/web/src/components/OAuthClientsDialog/index.ee.jsx

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import * as React from 'react';
+import useOAuthClients from 'hooks/useOAuthClients';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+function AppOAuthClientsDialog(props) {
+  const { appKey, onClientClick, onClose } = props;
+  const { data: appOAuthClients } = useOAuthClients(appKey);
+
+  const formatMessage = useFormatMessage();
+
+  if (!appOAuthClients?.data.length) return <React.Fragment />;
+
+  return (
+    <Dialog onClose={onClose} open={true}>
+      <DialogTitle>{formatMessage('appOAuthClientsDialog.title')}</DialogTitle>
+
+      <List sx={{ pt: 0 }}>
+        {appOAuthClients.data.map((oauthClient) => (
+          <ListItem disableGutters key={oauthClient.id}>
+            <ListItemButton onClick={() => onClientClick(oauthClient.id)}>
+              <ListItemText primary={oauthClient.name} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </Dialog>
+  );
+}
+
+AppOAuthClientsDialog.propTypes = {
+  appKey: PropTypes.string.isRequired,
+  onClientClick: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default AppOAuthClientsDialog;

packages/web/src/components/PermissionCatalogField/PermissionCatalogFieldLoader/index.jsx

@@ -39,14 +39,14 @@ const PermissionCatalogFieldLoader = () => {
               {[...Array(5)].map((action, index) => (
                 <TableCell key={index} align="center">
                   <Typography variant="subtitle2">
-                    <ControlledCheckbox name="value" />
+                    <ControlledCheckbox name="value" disabled />
                   </Typography>
                 </TableCell>
               ))}
 
               <TableCell>
                 <Stack direction="row" gap={1} justifyContent="right">
-                  <IconButton color="info" size="small">
+                  <IconButton color="info" size="small" disabled>
                     <SettingsIcon />
                   </IconButton>
                 </Stack>

packages/web/src/components/PermissionCatalogField/index.ee.jsx

@@ -21,13 +21,15 @@ const PermissionCatalogField = ({
   name = 'permissions',
   disabled = false,
   syncIsCreator = false,
+  loading = false,
 }) => {
   const { data, isLoading: isPermissionCatalogLoading } =
     usePermissionCatalog();
   const permissionCatalog = data?.data;
   const [dialogName, setDialogName] = React.useState();
 
-  if (isPermissionCatalogLoading) return <PermissionCatalogFieldLoader />;
+  if (isPermissionCatalogLoading || loading)
+    return <PermissionCatalogFieldLoader />;
 
   return (
     <TableContainer component={Paper}>
@@ -118,6 +120,7 @@ PermissionCatalogField.propTypes = {
   name: PropTypes.string,
   disabled: PropTypes.bool,
   syncIsCreator: PropTypes.bool,
+  loading: PropTypes.bool,
 };
 
 export default PermissionCatalogField;

packages/web/src/components/SignUpForm/index.ee.jsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import LoadingButton from '@mui/lab/LoadingButton';
+import Alert from '@mui/material/Alert';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 
@@ -12,24 +13,41 @@ import Form from 'components/Form';
 import TextField from 'components/TextField';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCreateAccessToken from 'hooks/useCreateAccessToken';
-import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import useRegisterUser from 'hooks/useRegisterUser';
 
-const validationSchema = yup.object().shape({
-  fullName: yup.string().trim().required('signupForm.mandatoryInput'),
-  email: yup
-    .string()
-    .trim()
-    .email('signupForm.validateEmail')
-    .required('signupForm.mandatoryInput'),
-  password: yup.string().required('signupForm.mandatoryInput'),
-  confirmPassword: yup
-    .string()
-    .required('signupForm.mandatoryInput')
-    .oneOf([yup.ref('password')], 'signupForm.passwordsMustMatch'),
-});
+const getValidationSchema = (formatMessage) => {
+  const getMandatoryInputMessage = (inputNameId) =>
+    formatMessage('signupForm.mandatoryInput', {
+      inputName: formatMessage(inputNameId),
+    });
 
-const initialValues = {
+  return yup.object().shape({
+    fullName: yup
+      .string()
+      .trim()
+      .required(getMandatoryInputMessage('signupForm.fullNameFieldLabel')),
+    email: yup
+      .string()
+      .trim()
+      .required(getMandatoryInputMessage('signupForm.emailFieldLabel'))
+      .email(formatMessage('signupForm.validateEmail')),
+    password: yup
+      .string()
+      .required(getMandatoryInputMessage('signupForm.passwordFieldLabel'))
+      .min(6, formatMessage('signupForm.passwordMinLength')),
+    confirmPassword: yup
+      .string()
+      .required(
+        getMandatoryInputMessage('signupForm.confirmPasswordFieldLabel'),
+      )
+      .oneOf(
+        [yup.ref('password')],
+        formatMessage('signupForm.passwordsMustMatch'),
+      ),
+  });
+};
+
+const defaultValues = {
   fullName: '',
   email: '',
   password: '',
@@ -40,7 +58,6 @@ function SignUpForm() {
   const navigate = useNavigate();
   const authentication = useAuthentication();
   const formatMessage = useFormatMessage();
-  const enqueueSnackbar = useEnqueueSnackbar();
   const { mutateAsync: registerUser, isPending: isRegisterUserPending } =
     useRegisterUser();
   const { mutateAsync: createAccessToken, isPending: loginLoading } =
@@ -67,27 +84,8 @@ function SignUpForm() {
       const { token } = data;
       authentication.updateToken(token);
     } catch (error) {
-      const errors = error?.response?.data?.errors
-        ? Object.values(error.response.data.errors)
-        : [];
-
-      if (errors.length) {
-        for (const [error] of errors) {
-          enqueueSnackbar(error, {
-            variant: 'error',
-            SnackbarProps: {
-              'data-test': 'snackbar-sign-up-error',
-            },
-          });
-        }
-      } else {
-        enqueueSnackbar(error?.message || formatMessage('signupForm.error'), {
-          variant: 'error',
-          SnackbarProps: {
-            'data-test': 'snackbar-sign-up-error',
-          },
-        });
-      }
+      const errors = error?.response?.data?.errors;
+      throw errors || error;
     }
   };
 
@@ -108,11 +106,13 @@ function SignUpForm() {
       </Typography>
 
       <Form
-        defaultValues={initialValues}
+        automaticValidation={false}
+        noValidate
+        defaultValues={defaultValues}
         onSubmit={handleSubmit}
-        resolver={yupResolver(validationSchema)}
+        resolver={yupResolver(getValidationSchema(formatMessage))}
         mode="onChange"
-        render={({ formState: { errors, touchedFields } }) => (
+        render={({ formState: { errors } }) => (
           <>
             <TextField
               label={formatMessage('signupForm.fullNameFieldLabel')}
@@ -121,14 +121,9 @@ function SignUpForm() {
               margin="dense"
               autoComplete="fullName"
               data-test="fullName-text-field"
-              error={touchedFields.fullName && !!errors?.fullName}
-              helperText={
-                touchedFields.fullName && errors?.fullName?.message
-                  ? formatMessage(errors?.fullName?.message, {
-                      inputName: formatMessage('signupForm.fullNameFieldLabel'),
-                    })
-                  : ''
-              }
+              error={!!errors?.fullName}
+              helperText={errors?.fullName?.message}
+              required
             />
 
             <TextField
@@ -138,14 +133,9 @@ function SignUpForm() {
               margin="dense"
               autoComplete="email"
               data-test="email-text-field"
-              error={touchedFields.email && !!errors?.email}
-              helperText={
-                touchedFields.email && errors?.email?.message
-                  ? formatMessage(errors?.email?.message, {
-                      inputName: formatMessage('signupForm.emailFieldLabel'),
-                    })
-                  : ''
-              }
+              error={!!errors?.email}
+              helperText={errors?.email?.message}
+              required
             />
 
             <TextField
@@ -154,14 +144,9 @@ function SignUpForm() {
               fullWidth
               margin="dense"
               type="password"
-              error={touchedFields.password && !!errors?.password}
-              helperText={
-                touchedFields.password && errors?.password?.message
-                  ? formatMessage(errors?.password?.message, {
-                      inputName: formatMessage('signupForm.passwordFieldLabel'),
-                    })
-                  : ''
-              }
+              error={!!errors?.password}
+              helperText={errors?.password?.message}
+              required
             />
 
             <TextField
@@ -170,19 +155,21 @@ function SignUpForm() {
               fullWidth
               margin="dense"
               type="password"
-              error={touchedFields.confirmPassword && !!errors?.confirmPassword}
-              helperText={
-                touchedFields.confirmPassword &&
-                errors?.confirmPassword?.message
-                  ? formatMessage(errors?.confirmPassword?.message, {
-                      inputName: formatMessage(
-                        'signupForm.confirmPasswordFieldLabel',
-                      ),
-                    })
-                  : ''
-              }
+              error={!!errors?.confirmPassword}
+              helperText={errors?.confirmPassword?.message}
+              required
             />
 
+            {errors?.root?.general && (
+              <Alert
+                data-test="alert-sign-up-error"
+                severity="error"
+                sx={{ mt: 2 }}
+              >
+                {errors.root.general.message}
+              </Alert>
+            )}
+
             <LoadingButton
               type="submit"
               variant="contained"

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

@@ -67,17 +67,12 @@ export default function SplitButton(props) {
           }}
           open={open}
           anchorEl={anchorRef.current}
+          placement="bottom-end"
           transition
           disablePortal
         >
-          {({ TransitionProps, placement }) => (
-            <Grow
-              {...TransitionProps}
-              style={{
-                transformOrigin:
-                  placement === 'bottom' ? 'center top' : 'center bottom',
-              }}
-            >
+          {({ TransitionProps }) => (
+            <Grow {...TransitionProps}>
               <Paper>
                 <ClickAwayListener onClickAway={handleClose}>
                   <MenuList autoFocusItem>

packages/web/src/config/urls.js

@@ -17,19 +17,19 @@ export const APP_CONNECTIONS = (appKey) => `/app/${appKey}/connections`;
 export const APP_CONNECTIONS_PATTERN = '/app/:appKey/connections';
 export const APP_ADD_CONNECTION = (appKey, shared = false) =>
   `/app/${appKey}/connections/add?shared=${shared}`;
-export const APP_ADD_CONNECTION_WITH_AUTH_CLIENT_ID = (
+export const APP_ADD_CONNECTION_WITH_OAUTH_CLIENT_ID = (
   appKey,
-  appAuthClientId,
-) => `/app/${appKey}/connections/add?appAuthClientId=${appAuthClientId}`;
+  oauthClientId,
+) => `/app/${appKey}/connections/add?oauthClientId=${oauthClientId}`;
 export const APP_ADD_CONNECTION_PATTERN = '/app/:appKey/connections/add';
 export const APP_RECONNECT_CONNECTION = (
   appKey,
   connectionId,
-  appAuthClientId,
+  oauthClientId,
 ) => {
   const path = `/app/${appKey}/connections/${connectionId}/reconnect`;
-  if (appAuthClientId) {
-    return `${path}?appAuthClientId=${appAuthClientId}`;
+  if (oauthClientId) {
+    return `${path}?oauthClientId=${oauthClientId}`;
   }
   return path;
 };
@@ -71,18 +71,18 @@ export const ADMIN_APPS = `${ADMIN_SETTINGS}/apps`;
 export const ADMIN_APP = (appKey) => `${ADMIN_SETTINGS}/apps/${appKey}`;
 export const ADMIN_APP_PATTERN = `${ADMIN_SETTINGS}/apps/:appKey`;
 export const ADMIN_APP_SETTINGS_PATTERN = `${ADMIN_SETTINGS}/apps/:appKey/settings`;
-export const ADMIN_APP_AUTH_CLIENTS_PATTERN = `${ADMIN_SETTINGS}/apps/:appKey/auth-clients`;
+export const ADMIN_APP_AUTH_CLIENTS_PATTERN = `${ADMIN_SETTINGS}/apps/:appKey/oauth-clients`;
 export const ADMIN_APP_CONNECTIONS_PATTERN = `${ADMIN_SETTINGS}/apps/:appKey/connections`;
 export const ADMIN_APP_CONNECTIONS = (appKey) =>
   `${ADMIN_SETTINGS}/apps/${appKey}/connections`;
 export const ADMIN_APP_SETTINGS = (appKey) =>
   `${ADMIN_SETTINGS}/apps/${appKey}/settings`;
 export const ADMIN_APP_AUTH_CLIENTS = (appKey) =>
-  `${ADMIN_SETTINGS}/apps/${appKey}/auth-clients`;
+  `${ADMIN_SETTINGS}/apps/${appKey}/oauth-clients`;
 export const ADMIN_APP_AUTH_CLIENT = (appKey, id) =>
-  `${ADMIN_SETTINGS}/apps/${appKey}/auth-clients/${id}`;
+  `${ADMIN_SETTINGS}/apps/${appKey}/oauth-clients/${id}`;
 export const ADMIN_APP_AUTH_CLIENTS_CREATE = (appKey) =>
-  `${ADMIN_SETTINGS}/apps/${appKey}/auth-clients/create`;
+  `${ADMIN_SETTINGS}/apps/${appKey}/oauth-clients/create`;
 export const DASHBOARD = FLOWS;
 
 // External links and paths

packages/web/src/hooks/useAdminAppAuthClient.ee.js

@@ -1,19 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-
-import api from 'helpers/api';
-
-export default function useAdminAppAuthClient(appKey, id) {
-  const query = useQuery({
-    queryKey: ['admin', 'apps', appKey, 'authClients', id],
-    queryFn: async ({ signal }) => {
-      const { data } = await api.get(`/v1/admin/apps/${appKey}/auth-clients/${id}`, {
-        signal,
-      });
-
-      return data;
-    },
-    enabled: !!appKey && !!id,
-  });
-
-  return query;
-}

packages/web/src/hooks/useAdminCreateOAuthClient.ee.js

@@ -1,20 +1,23 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import api from 'helpers/api';
 
-export default function useAdminCreateAppAuthClient(appKey) {
+export default function useAdminCreateOAuthClient(appKey) {
   const queryClient = useQueryClient();
 
   const query = useMutation({
     mutationFn: async (payload) => {
-      const { data } = await api.post(`/v1/admin/apps/${appKey}/auth-clients`, payload);
+      const { data } = await api.post(
+        `/v1/admin/apps/${appKey}/oauth-clients`,
+        payload,
+      );
 
       return data;
     },
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: ['admin', 'apps', appKey, 'authClients'],
+        queryKey: ['admin', 'apps', appKey, 'oauthClients'],
       });
-    }
+    },
   });
 
   return query;

packages/web/src/hooks/useAdminOAuthClient.ee.js

@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useAdminOAuthClient(appKey, id) {
+  const query = useQuery({
+    queryKey: ['admin', 'apps', appKey, 'oauthClients', id],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get(
+        `/v1/admin/apps/${appKey}/oauth-clients/${id}`,
+        {
+          signal,
+        },
+      );
+
+      return data;
+    },
+    enabled: !!appKey && !!id,
+  });
+
+  return query;
+}

packages/web/src/hooks/useAdminOAuthClients.js

@@ -1,11 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
 import api from 'helpers/api';
 
-export default function useAdminAppAuthClients(appKey) {
+export default function useAdminOAuthClients(appKey) {
   const query = useQuery({
-    queryKey: ['admin', 'apps', appKey, 'authClients'],
+    queryKey: ['admin', 'apps', appKey, 'oauthClients'],
     queryFn: async ({ signal }) => {
-      const { data } = await api.get(`/v1/admin/apps/${appKey}/auth-clients`, {
+      const { data } = await api.get(`/v1/admin/apps/${appKey}/oauth-clients`, {
         signal,
       });
       return data;

packages/web/src/hooks/useAdminUpdateOAuthClient.ee.js

@@ -1,13 +1,13 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import api from 'helpers/api';
 
-export default function useAdminUpdateAppAuthClient(appKey, id) {
+export default function useAdminUpdateOAuthClient(appKey, id) {
   const queryClient = useQueryClient();
 
-  const query = useMutation({
+  const mutation = useMutation({
     mutationFn: async (payload) => {
       const { data } = await api.patch(
-        `/v1/admin/apps/${appKey}/auth-clients/${id}`,
+        `/v1/admin/apps/${appKey}/oauth-clients/${id}`,
         payload,
       );
 
@@ -15,14 +15,14 @@ export default function useAdminUpdateAppAuthClient(appKey, id) {
     },
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: ['admin', 'apps', appKey, 'authClients', id],
+        queryKey: ['admin', 'apps', appKey, 'oauthClients', id],
       });
 
       queryClient.invalidateQueries({
-        queryKey: ['admin', 'apps', appKey, 'authClients'],
+        queryKey: ['admin', 'apps', appKey, 'oauthClients'],
       });
     },
   });
 
-  return query;
+  return mutation;
 }

packages/web/src/hooks/useAuthenticateApp.ee.js

@@ -30,18 +30,20 @@ function getSteps(auth, hasConnection, useShared) {
 }
 
 export default function useAuthenticateApp(payload) {
-  const { appKey, appAuthClientId, connectionId, useShared = false } = payload;
+  const { appKey, oauthClientId, connectionId, useShared = false } = payload;
   const { data: auth } = useAppAuth(appKey);
   const queryClient = useQueryClient();
   const { mutateAsync: createConnection } = useCreateConnection(appKey);
   const { mutateAsync: createConnectionAuthUrl } = useCreateConnectionAuthUrl();
   const { mutateAsync: updateConnection } = useUpdateConnection();
   const { mutateAsync: resetConnection } = useResetConnection();
+  const { mutateAsync: verifyConnection } = useVerifyConnection();
   const [authenticationInProgress, setAuthenticationInProgress] =
     React.useState(false);
   const formatMessage = useFormatMessage();
-  const steps = getSteps(auth?.data, !!connectionId, useShared);
-  const { mutateAsync: verifyConnection } = useVerifyConnection();
+  const steps = React.useMemo(() => {
+    return getSteps(auth?.data, !!connectionId, useShared);
+  }, [auth, connectionId, useShared]);
 
   const authenticate = React.useMemo(() => {
     if (!steps?.length) return;
@@ -52,12 +54,11 @@ export default function useAuthenticateApp(payload) {
 
       const response = {
         key: appKey,
-        appAuthClientId: appAuthClientId || payload.appAuthClientId,
+        oauthClientId: oauthClientId || payload.oauthClientId,
         connectionId,
         fields,
       };
       let stepIndex = 0;
-
       while (stepIndex < steps?.length) {
         const step = steps[stepIndex];
         const variables = computeAuthStepVariables(step.arguments, response);
@@ -105,10 +106,10 @@ export default function useAuthenticateApp(payload) {
             response[step.name] = stepResponse;
           }
         } catch (err) {
-          console.log(err);
+          console.error(err);
           setAuthenticationInProgress(false);
 
-          queryClient.invalidateQueries({
+          await queryClient.invalidateQueries({
             queryKey: ['apps', appKey, 'connections'],
           });
 
@@ -126,13 +127,14 @@ export default function useAuthenticateApp(payload) {
 
       return response;
     };
+    // keep formatMessage out of it as it causes infinite loop.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     steps,
     appKey,
-    appAuthClientId,
+    oauthClientId,
     connectionId,
     queryClient,
-    formatMessage,
     createConnection,
     createConnectionAuthUrl,
     updateConnection,

packages/web/src/hooks/useAutomatischInfo.js

@@ -9,7 +9,7 @@ export default function useAutomatischInfo() {
      **/
     staleTime: Infinity,
     queryKey: ['automatisch', 'info'],
-    queryFn: async (payload, signal) => {
+    queryFn: async ({ signal }) => {
       const { data } = await api.get('/v1/automatisch/info', { signal });
 
       return data;

packages/web/src/hooks/useCreateConnection.js

@@ -3,10 +3,10 @@ import { useMutation } from '@tanstack/react-query';
 import api from 'helpers/api';
 
 export default function useCreateConnection(appKey) {
-  const query = useMutation({
-    mutationFn: async ({ appAuthClientId, formattedData }) => {
+  const mutation = useMutation({
+    mutationFn: async ({ oauthClientId, formattedData }) => {
       const { data } = await api.post(`/v1/apps/${appKey}/connections`, {
-        appAuthClientId,
+        oauthClientId,
         formattedData,
       });
 
@@ -14,5 +14,5 @@ export default function useCreateConnection(appKey) {
     },
   });
 
-  return query;
+  return mutation;
 }

packages/web/src/hooks/useDeleteFlow.js

@@ -2,11 +2,11 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import api from 'helpers/api';
 
-export default function useDeleteFlow() {
+export default function useDeleteFlow(flowId) {
   const queryClient = useQueryClient();
 
   const query = useMutation({
-    mutationFn: async (flowId) => {
+    mutationFn: async () => {
       const { data } = await api.delete(`/v1/flows/${flowId}`);
 
       return data;

packages/web/src/hooks/useDownloadJsonAsFile.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import slugify from 'slugify';
+
+export default function useDownloadJsonAsFile() {
+  const handleDownloadJsonAsFile = React.useCallback(
+    function handleDownloadJsonAsFile({ contents, name }) {
+      const stringifiedContents = JSON.stringify(contents, null, 2);
+
+      const slugifiedName = slugify(name, {
+        lower: true,
+        strict: true,
+        replacement: '-',
+      });
+
+      const fileBlob = new Blob([stringifiedContents], {
+        type: 'application/json',
+      });
+
+      const fileObjectUrl = URL.createObjectURL(fileBlob);
+
+      const temporaryDownloadLink = document.createElement('a');
+      temporaryDownloadLink.href = fileObjectUrl;
+      temporaryDownloadLink.download = slugifiedName;
+
+      temporaryDownloadLink.click();
+    },
+    [],
+  );
+
+  return handleDownloadJsonAsFile;
+}

packages/web/src/hooks/useExportFlow.js

@@ -0,0 +1,15 @@
+import { useMutation } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useExportFlow(flowId) {
+  const mutation = useMutation({
+    mutationFn: async () => {
+      const { data } = await api.post(`/v1/flows/${flowId}/export`);
+
+      return data;
+    },
+  });
+
+  return mutation;
+}

packages/web/src/hooks/useFormatMessage.js

@@ -1,5 +1,13 @@
+import * as React from 'react';
 import { useIntl } from 'react-intl';
+
 export default function useFormatMessage() {
   const { formatMessage } = useIntl();
-  return (id, values = {}) => formatMessage({ id }, values);
+
+  const customFormatMessage = React.useCallback(
+    (id, values = {}) => formatMessage({ id }, values),
+    [formatMessage],
+  );
+
+  return customFormatMessage;
 }

packages/web/src/hooks/useLicense.js

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useLicense() {
+  const query = useQuery({
+    queryKey: ['automatisch', 'license'],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get('/v1/automatisch/license', { signal });
+
+      return data;
+    },
+  });
+
+  return query;
+}

packages/web/src/hooks/useOAuthClients.js

@@ -1,11 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
 import api from 'helpers/api';
 
-export default function useAppAuthClients(appKey) {
+export default function useOAuthClients(appKey) {
   const query = useQuery({
-    queryKey: ['apps', appKey, 'auth-clients'],
+    queryKey: ['apps', appKey, 'oauth-clients'],
     queryFn: async ({ signal }) => {
-      const { data } = await api.get(`/v1/apps/${appKey}/auth-clients`, {
+      const { data } = await api.get(`/v1/apps/${appKey}/oauth-clients`, {
         signal,
       });
       return data;

packages/web/src/hooks/useUpdateConnection.js

@@ -4,10 +4,10 @@ import api from 'helpers/api';
 
 export default function useUpdateConnection() {
   const query = useMutation({
-    mutationFn: async ({ connectionId, formattedData, appAuthClientId }) => {
+    mutationFn: async ({ connectionId, formattedData, oauthClientId }) => {
       const { data } = await api.patch(`/v1/connections/${connectionId}`, {
         formattedData,
-        appAuthClientId,
+        oauthClientId,
       });
 
       return data;

packages/web/src/hooks/useUpdateStep.js

@@ -6,19 +6,20 @@ export default function useUpdateStep() {
   const queryClient = useQueryClient();
 
   const query = useMutation({
-    mutationFn: async ({ id, appKey, key, connectionId, parameters }) => {
+    mutationFn: async ({ id, appKey, key, connectionId, name, parameters }) => {
       const { data } = await api.patch(`/v1/steps/${id}`, {
         appKey,
         key,
         connectionId,
+        name,
         parameters,
       });
 
       return data;
     },
 
-    onSuccess: () => {
-      queryClient.invalidateQueries({
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
         queryKey: ['flows'],
       });
     },

packages/web/src/locales/en.json

@@ -22,7 +22,7 @@
   "app.connectionCount": "{count} connections",
   "app.flowCount": "{count} flows",
   "app.addConnection": "Add connection",
-  "app.addCustomConnection": "Add custom connection",
+  "app.addConnectionWithOAuthClient": "Add connection with OAuth client",
   "app.reconnectConnection": "Reconnect connection",
   "app.createFlow": "Create flow",
   "app.settings": "Settings",
@@ -56,9 +56,11 @@
   "flow.draft": "Draft",
   "flow.successfullyDeleted": "The flow and associated executions have been deleted.",
   "flow.successfullyDuplicated": "The flow has been successfully duplicated.",
+  "flow.successfullyExported": "The flow export has been successfully generated.",
   "flowEditor.publish": "PUBLISH",
   "flowEditor.unpublish": "UNPUBLISH",
   "flowEditor.publishedFlowCannotBeUpdated": "To edit this flow, you must first unpublish it.",
+  "flowEditor.export": "EXPORT",
   "flowEditor.noTestDataTitle": "We couldn't find matching data",
   "flowEditor.noTestDataMessage": "Create a sample in the associated service and test the step again.",
   "flowEditor.testAndContinue": "Test & Continue",
@@ -70,17 +72,19 @@
   "flowEditor.triggerEvent": "Trigger event",
   "flowEditor.actionEvent": "Action event",
   "flowEditor.instantTriggerType": "Instant",
+  "flowEditor.flowSuccessfullyExported": "The flow export has been successfully generated.",
   "filterConditions.onlyContinueIf": "Only continue if…",
   "filterConditions.orContinueIf": "OR continue if…",
   "chooseConnectionSubstep.continue": "Continue",
   "chooseConnectionSubstep.addNewConnection": "Add new connection",
-  "chooseConnectionSubstep.addNewSharedConnection": "Add new shared connection",
+  "chooseConnectionSubstep.addConnectionWithOAuthClient": "Add connection with OAuth client",
   "chooseConnectionSubstep.chooseConnection": "Choose connection",
   "flow.createdAt": "created {datetime}",
   "flow.updatedAt": "updated {datetime}",
   "flow.view": "View",
   "flow.duplicate": "Duplicate",
   "flow.delete": "Delete",
+  "flow.export": "Export",
   "flowStep.triggerType": "Trigger",
   "flowStep.actionType": "Action",
   "flows.create": "Create flow",
@@ -130,6 +134,7 @@
   "webhookUrlInfo.description": "You'll need to configure your application with this webhook URL.",
   "webhookUrlInfo.helperText": "We've generated a custom webhook URL for you to send requests to. <link>Learn more about webhooks</link>.",
   "webhookUrlInfo.copy": "Copy",
+  "form.genericError": "Something went wrong. Please try again.",
   "installationForm.title": "Installation",
   "installationForm.fullNameFieldLabel": "Full name",
   "installationForm.emailFieldLabel": "Email",
@@ -138,9 +143,9 @@
   "installationForm.submit": "Create admin",
   "installationForm.validateEmail": "Email must be valid.",
   "installationForm.passwordsMustMatch": "Passwords must match.",
+  "installationForm.passwordMinLength": "Password must be at least 6 characters long.",
   "installationForm.mandatoryInput": "{inputName} is required.",
   "installationForm.success": "The admin account has been created, and thus, the installation has been completed. You can now log in <link>here</link>.",
-  "installationForm.error": "Something went wrong. Please try again.",
   "signupForm.title": "Sign up",
   "signupForm.fullNameFieldLabel": "Full name",
   "signupForm.emailFieldLabel": "Email",
@@ -149,8 +154,8 @@
   "signupForm.submit": "Sign up",
   "signupForm.validateEmail": "Email must be valid.",
   "signupForm.passwordsMustMatch": "Passwords must match.",
+  "signupForm.passwordMinLength": "Password must be at least 6 characters long.",
   "signupForm.mandatoryInput": "{inputName} is required.",
-  "signupForm.error": "Something went wrong. Please try again.",
   "loginForm.title": "Login",
   "loginForm.emailFieldLabel": "Email",
   "loginForm.passwordFieldLabel": "Password",
@@ -225,10 +230,11 @@
   "userForm.email": "Email",
   "userForm.role": "Role",
   "userForm.password": "Password",
+  "userForm.mandatoryInput": "{inputName} is required.",
+  "userForm.validateEmail": "Email must be valid.",
   "createUser.submit": "Create",
   "createUser.successfullyCreated": "The user has been created.",
   "createUser.invitationEmailInfo": "Invitation email will be sent if SMTP credentials are valid. Otherwise, you can share the invitation link manually: <link></link>",
-  "createUser.error": "Error while creating the user.",
   "editUserPage.title": "Edit user",
   "editUser.status": "Status",
   "editUser.submit": "Update",
@@ -250,8 +256,10 @@
   "createRolePage.title": "Create role",
   "roleForm.name": "Name",
   "roleForm.description": "Description",
+  "roleForm.mandatoryInput": "{inputName} is required.",
   "createRole.submit": "Create",
   "createRole.successfullyCreated": "The role has been created.",
+  "createRole.permissionsError": "Permissions are invalid.",
   "editRole.submit": "Update",
   "editRole.successfullyUpdated": "The role has been updated.",
   "roleList.name": "Name",
@@ -259,7 +267,7 @@
   "permissionSettings.cancel": "Cancel",
   "permissionSettings.apply": "Apply",
   "permissionSettings.title": "Conditions",
-  "appAuthClientsDialog.title": "Choose your authentication client",
+  "appOAuthClientsDialog.title": "Choose your authentication client",
   "userInterfacePage.title": "User Interface",
   "userInterfacePage.successfullyUpdated": "User interface has been updated.",
   "userInterfacePage.titleFieldLabel": "Title",
@@ -291,22 +299,22 @@
   "roleMappingsForm.successfullySaved": "Role mappings have been saved.",
   "adminApps.title": "Apps",
   "adminApps.connections": "Connections",
-  "adminApps.authClients": "Auth clients",
+  "adminApps.oauthClients": "OAuth clients",
   "adminApps.settings": "Settings",
-  "adminAppsSettings.customConnectionAllowed": "Allow custom connection",
+  "adminAppsSettings.useOnlyPredefinedAuthClients": "Use only predefined OAuth clients",
   "adminAppsSettings.shared": "Shared",
   "adminAppsSettings.disabled": "Disabled",
   "adminAppsSettings.save": "Save",
   "adminAppsSettings.successfullySaved": "Settings have been saved.",
-  "adminAppsAuthClients.noAuthClients": "You don't have any auth clients yet.",
-  "adminAppsAuthClients.statusActive": "Active",
-  "adminAppsAuthClients.statusInactive": "Inactive",
-  "createAuthClient.button": "Create auth client",
-  "createAuthClient.title": "Create auth client",
-  "authClient.buttonSubmit": "Submit",
-  "authClient.inputName": "Name",
-  "authClient.inputActive": "Active",
-  "updateAuthClient.title": "Update auth client",
+  "adminAppsOAuthClients.noOauthClients": "You don't have any OAuth clients yet.",
+  "adminAppsOAuthClients.statusActive": "Active",
+  "adminAppsOAuthClients.statusInactive": "Inactive",
+  "createOAuthClient.button": "Create OAuth client",
+  "createOAuthClient.title": "Create OAuth client",
+  "oauthClient.buttonSubmit": "Submit",
+  "oauthClient.inputName": "Name",
+  "oauthClient.inputActive": "Active",
+  "updateOAuthClient.title": "Update OAuth client",
   "notFoundPage.title": "We can't seem to find a page you're looking for.",
   "notFoundPage.button": "Back to home page"
 }

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

@@ -21,9 +21,9 @@ import AppIcon from 'components/AppIcon';
 import Container from 'components/Container';
 import PageTitle from 'components/PageTitle';
 import AdminApplicationSettings from 'components/AdminApplicationSettings';
-import AdminApplicationAuthClients from 'components/AdminApplicationAuthClients';
-import AdminApplicationCreateAuthClient from 'components/AdminApplicationCreateAuthClient';
-import AdminApplicationUpdateAuthClient from 'components/AdminApplicationUpdateAuthClient';
+import AdminApplicationOAuthClients from 'components/AdminApplicationOAuthClients';
+import AdminApplicationCreateOAuthClient from 'components/AdminApplicationCreateOAuthClient';
+import AdminApplicationUpdateOAuthClient from 'components/AdminApplicationUpdateOAuthClient';
 import useApp from 'hooks/useApp';
 
 export default function AdminApplication() {
@@ -39,7 +39,7 @@ export default function AdminApplication() {
     path: URLS.ADMIN_APP_SETTINGS_PATTERN,
     end: false,
   });
-  const authClientsPathMatch = useMatch({
+  const oauthClientsPathMatch = useMatch({
     path: URLS.ADMIN_APP_AUTH_CLIENTS_PATTERN,
     end: false,
   });
@@ -49,7 +49,7 @@ export default function AdminApplication() {
 
   const app = data?.data || {};
 
-  const goToAuthClientsPage = () => navigate('auth-clients');
+  const goToAuthClientsPage = () => navigate('oauth-clients');
 
   if (loading) return null;
 
@@ -77,7 +77,7 @@ export default function AdminApplication() {
                   value={
                     settingsPathMatch?.pattern?.path ||
                     connectionsPathMatch?.pattern?.path ||
-                    authClientsPathMatch?.pattern?.path
+                    oauthClientsPathMatch?.pattern?.path
                   }
                 >
                   <Tab
@@ -87,18 +87,12 @@ export default function AdminApplication() {
                     component={Link}
                   />
                   <Tab
-                    label={formatMessage('adminApps.authClients')}
+                    data-test="oauth-clients-tab"
+                    label={formatMessage('adminApps.oauthClients')}
                     to={URLS.ADMIN_APP_AUTH_CLIENTS(appKey)}
                     value={URLS.ADMIN_APP_AUTH_CLIENTS_PATTERN}
                     component={Link}
                   />
-                  <Tab
-                    label={formatMessage('adminApps.connections')}
-                    to={URLS.ADMIN_APP_CONNECTIONS(appKey)}
-                    value={URLS.ADMIN_APP_CONNECTIONS_PATTERN}
-                    disabled={!app.supportsConnections}
-                    component={Link}
-                  />
                 </Tabs>
               </Box>
 
@@ -108,12 +102,8 @@ export default function AdminApplication() {
                   element={<AdminApplicationSettings appKey={appKey} />}
                 />
                 <Route
-                  path={`/auth-clients/*`}
-                  element={<AdminApplicationAuthClients appKey={appKey} />}
-                />
-                <Route
-                  path={`/connections/*`}
-                  element={<div>App connections</div>}
+                  path={`/oauth-clients/*`}
+                  element={<AdminApplicationOAuthClients appKey={appKey} />}
                 />
                 <Route
                   path="/"
@@ -128,9 +118,9 @@ export default function AdminApplication() {
       </Container>
       <Routes>
         <Route
-          path="/auth-clients/create"
+          path="/oauth-clients/create"
           element={
-            <AdminApplicationCreateAuthClient
+            <AdminApplicationCreateOAuthClient
               application={app}
               onClose={goToAuthClientsPage}
               appKey={appKey}
@@ -138,9 +128,9 @@ export default function AdminApplication() {
           }
         />
         <Route
-          path="/auth-clients/:clientId"
+          path="/oauth-clients/:clientId"
           element={
-            <AdminApplicationUpdateAuthClient
+            <AdminApplicationUpdateOAuthClient
               application={app}
               onClose={goToAuthClientsPage}
             />

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

@@ -6,7 +6,6 @@ import {
   Navigate,
   Routes,
   useParams,
-  useSearchParams,
   useMatch,
   useNavigate,
 } from 'react-router-dom';
@@ -31,6 +30,7 @@ import AppIcon from 'components/AppIcon';
 import Container from 'components/Container';
 import PageTitle from 'components/PageTitle';
 import useApp from 'hooks/useApp';
+import useOAuthClients from 'hooks/useOAuthClients';
 import Can from 'components/Can';
 import { AppPropType } from 'propTypes/propTypes';
 
@@ -61,47 +61,59 @@ export default function Application() {
     end: false,
   });
   const flowsPathMatch = useMatch({ path: URLS.APP_FLOWS_PATTERN, end: false });
-  const [searchParams] = useSearchParams();
   const { appKey } = useParams();
   const navigate = useNavigate();
+  const { data: appOAuthClients } = useOAuthClients(appKey);
 
   const { data, loading } = useApp(appKey);
   const app = data?.data || {};
 
   const { data: appConfig } = useAppConfig(appKey);
-  const connectionId = searchParams.get('connectionId') || undefined;
 
   const currentUserAbility = useCurrentUserAbility();
 
   const goToApplicationPage = () => navigate('connections');
 
   const connectionOptions = React.useMemo(() => {
-    const shouldHaveCustomConnection =
-      appConfig?.data?.connectionAllowed &&
-      appConfig?.data?.customConnectionAllowed;
+    const addCustomConnection = {
+      label: formatMessage('app.addConnection'),
+      key: 'addConnection',
+      'data-test': 'add-connection-button',
+      to: URLS.APP_ADD_CONNECTION(appKey, false),
+      disabled:
+        !currentUserAbility.can('create', 'Connection') ||
+        appConfig?.data?.useOnlyPredefinedAuthClients === true ||
+        appConfig?.data?.disabled === true,
+    };
 
-    const options = [
-      {
-        label: formatMessage('app.addConnection'),
-        key: 'addConnection',
-        'data-test': 'add-connection-button',
-        to: URLS.APP_ADD_CONNECTION(appKey, appConfig?.data?.connectionAllowed),
-        disabled: !currentUserAbility.can('create', 'Connection'),
-      },
-    ];
+    const addConnectionWithOAuthClient = {
+      label: formatMessage('app.addConnectionWithOAuthClient'),
+      key: 'addConnectionWithOAuthClient',
+      'data-test': 'add-connection-with-auth-client-button',
+      to: URLS.APP_ADD_CONNECTION(appKey, true),
+      disabled:
+        !currentUserAbility.can('create', 'Connection') ||
+        appOAuthClients?.data?.length === 0 ||
+        appConfig?.data?.disabled === true,
+    };
 
-    if (shouldHaveCustomConnection) {
-      options.push({
-        label: formatMessage('app.addCustomConnection'),
-        key: 'addCustomConnection',
-        'data-test': 'add-custom-connection-button',
-        to: URLS.APP_ADD_CONNECTION(appKey),
-        disabled: !currentUserAbility.can('create', 'Connection'),
-      });
+    // means there is no app config. defaulting to custom connections only
+    if (!appConfig?.data) {
+      return [addCustomConnection];
     }
 
-    return options;
-  }, [appKey, appConfig?.data, currentUserAbility, formatMessage]);
+    // means only OAuth clients are allowed for connection creation
+    if (appConfig?.data?.useOnlyPredefinedAuthClients === true) {
+      return [addConnectionWithOAuthClient];
+    }
+
+    // means there is no OAuth client. so we don't show the `addConnectionWithOAuthClient`
+    if (appOAuthClients?.data?.length === 0) {
+      return [addCustomConnection];
+    }
+
+    return [addCustomConnection, addConnectionWithOAuthClient];
+  }, [appKey, appConfig, appOAuthClients, currentUserAbility, formatMessage]);
 
   if (loading) return null;
 
@@ -153,14 +165,7 @@ export default function Application() {
                     <Can I="create" a="Connection" passThrough>
                       {(allowed) => (
                         <SplitButton
-                          disabled={
-                            !allowed ||
-                            (appConfig?.data &&
-                              !appConfig?.data?.disabled &&
-                              !appConfig?.data?.connectionAllowed &&
-                              !appConfig?.data?.customConnectionAllowed) ||
-                            connectionOptions.every(({ disabled }) => disabled)
-                          }
+                          disabled={!allowed}
                           options={connectionOptions}
                         />
                       )}

packages/web/src/pages/CreateRole/index.ee.jsx

@@ -1,10 +1,14 @@
 import LoadingButton from '@mui/lab/LoadingButton';
 import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
 import PermissionCatalogField from 'components/PermissionCatalogField/index.ee';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
 
 import Container from 'components/Container';
 import Form from 'components/Form';
@@ -19,13 +23,49 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import useAdminCreateRole from 'hooks/useAdminCreateRole';
 import usePermissionCatalog from 'hooks/usePermissionCatalog.ee';
 
+const getValidationSchema = (formatMessage) => {
+  const getMandatoryFieldMessage = (fieldTranslationId) =>
+    formatMessage('roleForm.mandatoryInput', {
+      inputName: formatMessage(fieldTranslationId),
+    });
+
+  return yup.object().shape({
+    name: yup
+      .string()
+      .trim()
+      .required(getMandatoryFieldMessage('roleForm.name')),
+    description: yup.string().trim(),
+  });
+};
+
+const getPermissionsErrorMessage = (error) => {
+  const errors = error?.response?.data?.errors;
+
+  if (errors) {
+    const permissionsErrors = Object.keys(errors)
+      .filter((key) => key.startsWith('permissions'))
+      .reduce((obj, key) => {
+        obj[key] = errors[key];
+        return obj;
+      }, {});
+
+    if (Object.keys(permissionsErrors).length > 0) {
+      return JSON.stringify(permissionsErrors, null, 2);
+    }
+  }
+
+  return null;
+};
+
 export default function CreateRole() {
   const navigate = useNavigate();
   const formatMessage = useFormatMessage();
   const enqueueSnackbar = useEnqueueSnackbar();
   const { mutateAsync: createRole, isPending: isCreateRolePending } =
     useAdminCreateRole();
-  const { data: permissionCatalogData } = usePermissionCatalog();
+  const { data: permissionCatalogData, isLoading: isPermissionCatalogLoading } =
+    usePermissionCatalog();
+  const [permissionError, setPermissionError] = React.useState(null);
 
   const defaultValues = React.useMemo(
     () => ({
@@ -43,6 +83,7 @@ export default function CreateRole() {
 
   const handleRoleCreation = async (roleData) => {
     try {
+      setPermissionError(null);
       const permissions = getPermissions(roleData.computedPermissions);
 
       await createRole({
@@ -60,16 +101,13 @@ export default function CreateRole() {
 
       navigate(URLS.ROLES);
     } catch (error) {
-      const errors = Object.values(error.response.data.errors);
-
-      for (const [errorMessage] of errors) {
-        enqueueSnackbar(errorMessage, {
-          variant: 'error',
-          SnackbarProps: {
-            'data-test': 'snackbar-error',
-          },
-        });
+      const permissionError = getPermissionsErrorMessage(error);
+      if (permissionError) {
+        setPermissionError(permissionError);
       }
+
+      const errors = error?.response?.data?.errors;
+      throw errors || error;
     }
   };
 
@@ -83,37 +121,67 @@ export default function CreateRole() {
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
-          <Form onSubmit={handleRoleCreation} defaultValues={defaultValues}>
-            <Stack direction="column" gap={2}>
-              <TextField
-                required={true}
-                name="name"
-                label={formatMessage('roleForm.name')}
-                fullWidth
-                data-test="name-input"
-              />
+          <Form
+            onSubmit={handleRoleCreation}
+            defaultValues={defaultValues}
+            noValidate
+            resolver={yupResolver(getValidationSchema(formatMessage))}
+            automaticValidation={false}
+            render={({ formState: { errors } }) => (
+              <Stack direction="column" gap={2}>
+                <TextField
+                  required={true}
+                  name="name"
+                  label={formatMessage('roleForm.name')}
+                  fullWidth
+                  data-test="name-input"
+                  error={!!errors?.name}
+                  helperText={errors?.name?.message}
+                  disabled={isPermissionCatalogLoading}
+                />
 
-              <TextField
-                name="description"
-                label={formatMessage('roleForm.description')}
-                fullWidth
-                data-test="description-input"
-              />
+                <TextField
+                  name="description"
+                  label={formatMessage('roleForm.description')}
+                  fullWidth
+                  data-test="description-input"
+                  error={!!errors?.description}
+                  helperText={errors?.description?.message}
+                  disabled={isPermissionCatalogLoading}
+                />
 
-              <PermissionCatalogField name="computedPermissions" />
+                <PermissionCatalogField name="computedPermissions" />
 
-              <LoadingButton
-                type="submit"
-                variant="contained"
-                color="primary"
-                sx={{ boxShadow: 2 }}
-                loading={isCreateRolePending}
-                data-test="create-button"
-              >
-                {formatMessage('createRole.submit')}
-              </LoadingButton>
-            </Stack>
-          </Form>
+                {permissionError && (
+                  <Alert severity="error" data-test="create-role-error-alert">
+                    <AlertTitle>
+                      {formatMessage('createRole.permissionsError')}
+                    </AlertTitle>
+                    <pre>
+                      <code>{permissionError}</code>
+                    </pre>
+                  </Alert>
+                )}
+
+                {errors?.root?.general && !permissionError && (
+                  <Alert severity="error" data-test="create-role-error-alert">
+                    {errors?.root?.general?.message}
+                  </Alert>
+                )}
+
+                <LoadingButton
+                  type="submit"
+                  variant="contained"
+                  color="primary"
+                  sx={{ boxShadow: 2 }}
+                  loading={isCreateRolePending}
+                  data-test="create-button"
+                >
+                  {formatMessage('createRole.submit')}
+                </LoadingButton>
+              </Stack>
+            )}
+          />
         </Grid>
       </Grid>
     </Container>

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

@@ -3,9 +3,10 @@ import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
 import Alert from '@mui/material/Alert';
 import MuiTextField from '@mui/material/TextField';
-import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { useQueryClient } from '@tanstack/react-query';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
 
 import Can from 'components/Can';
 import Container from 'components/Container';
@@ -16,50 +17,70 @@ import TextField from 'components/TextField';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useRoles from 'hooks/useRoles.ee';
 import useAdminCreateUser from 'hooks/useAdminCreateUser';
+import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
 
 function generateRoleOptions(roles) {
   return roles?.map(({ name: label, id: value }) => ({ label, value }));
 }
 
+const getValidationSchema = (formatMessage, canUpdateRole) => {
+  const getMandatoryFieldMessage = (fieldTranslationId) =>
+    formatMessage('userForm.mandatoryInput', {
+      inputName: formatMessage(fieldTranslationId),
+    });
+
+  return yup.object().shape({
+    fullName: yup
+      .string()
+      .trim()
+      .required(getMandatoryFieldMessage('userForm.fullName')),
+    email: yup
+      .string()
+      .trim()
+      .email(formatMessage('userForm.validateEmail'))
+      .required(getMandatoryFieldMessage('userForm.email')),
+    ...(canUpdateRole
+      ? {
+          roleId: yup
+            .string()
+            .required(getMandatoryFieldMessage('userForm.role')),
+        }
+      : {}),
+  });
+};
+
+const defaultValues = {
+  fullName: '',
+  email: '',
+  roleId: '',
+};
+
 export default function CreateUser() {
   const formatMessage = useFormatMessage();
   const {
     mutateAsync: createUser,
     isPending: isCreateUserPending,
     data: createdUser,
+    isSuccess: createUserSuccess,
   } = useAdminCreateUser();
   const { data: rolesData, loading: isRolesLoading } = useRoles();
   const roles = rolesData?.data;
-  const enqueueSnackbar = useEnqueueSnackbar();
   const queryClient = useQueryClient();
+  const currentUserAbility = useCurrentUserAbility();
+  const canUpdateRole = currentUserAbility.can('update', 'Role');
 
   const handleUserCreation = async (userData) => {
     try {
       await createUser({
         fullName: userData.fullName,
         email: userData.email,
-        roleId: userData.role?.id,
+        roleId: userData.roleId,
       });
 
       queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
-
-      enqueueSnackbar(formatMessage('createUser.successfullyCreated'), {
-        variant: 'success',
-        persist: true,
-        SnackbarProps: {
-          'data-test': 'snackbar-create-user-success',
-        },
-      });
     } catch (error) {
-      enqueueSnackbar(formatMessage('createUser.error'), {
-        variant: 'error',
-        persist: true,
-        SnackbarProps: {
-          'data-test': 'snackbar-error',
-        },
-      });
-
-      throw new Error('Failed while creating!');
+      const errors = error?.response?.data?.errors;
+      throw errors || error;
     }
   };
 
@@ -73,74 +94,111 @@ export default function CreateUser() {
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
-          <Form onSubmit={handleUserCreation}>
-            <Stack direction="column" gap={2}>
-              <TextField
-                required={true}
-                name="fullName"
-                label={formatMessage('userForm.fullName')}
-                data-test="full-name-input"
-                fullWidth
-              />
-
-              <TextField
-                required={true}
-                name="email"
-                label={formatMessage('userForm.email')}
-                data-test="email-input"
-                fullWidth
-              />
-
-              <Can I="update" a="Role">
-                <ControlledAutocomplete
-                  name="role.id"
+          <Form
+            noValidate
+            onSubmit={handleUserCreation}
+            mode="onSubmit"
+            defaultValues={defaultValues}
+            resolver={yupResolver(
+              getValidationSchema(formatMessage, canUpdateRole),
+            )}
+            automaticValidation={false}
+            render={({ formState: { errors } }) => (
+              <Stack direction="column" gap={2}>
+                <TextField
+                  required={true}
+                  name="fullName"
+                  label={formatMessage('userForm.fullName')}
+                  data-test="full-name-input"
                   fullWidth
-                  disablePortal
-                  disableClearable={true}
-                  options={generateRoleOptions(roles)}
-                  renderInput={(params) => (
-                    <MuiTextField
-                      {...params}
-                      required
-                      label={formatMessage('userForm.role')}
-                    />
-                  )}
-                  loading={isRolesLoading}
+                  error={!!errors?.fullName}
+                  helperText={errors?.fullName?.message}
                 />
-              </Can>
 
-              <LoadingButton
-                type="submit"
-                variant="contained"
-                color="primary"
-                sx={{ boxShadow: 2 }}
-                loading={isCreateUserPending}
-                data-test="create-button"
-              >
-                {formatMessage('createUser.submit')}
-              </LoadingButton>
+                <TextField
+                  required={true}
+                  name="email"
+                  label={formatMessage('userForm.email')}
+                  data-test="email-input"
+                  fullWidth
+                  error={!!errors?.email}
+                  helperText={errors?.email?.message}
+                />
 
-              {createdUser && (
-                <Alert
-                  severity="info"
+                <Can I="update" a="Role">
+                  <ControlledAutocomplete
+                    name="roleId"
+                    fullWidth
+                    disablePortal
+                    disableClearable={true}
+                    options={generateRoleOptions(roles)}
+                    renderInput={(params) => (
+                      <MuiTextField
+                        {...params}
+                        required
+                        label={formatMessage('userForm.role')}
+                        error={!!errors?.roleId}
+                        helperText={errors?.roleId?.message}
+                      />
+                    )}
+                    loading={isRolesLoading}
+                    showHelperText={false}
+                  />
+                </Can>
+
+                {errors?.root?.general && (
+                  <Alert data-test="create-user-error-alert" severity="error">
+                    {errors?.root?.general?.message}
+                  </Alert>
+                )}
+
+                {createUserSuccess && (
+                  <Alert
+                    severity="success"
+                    data-test="create-user-success-alert"
+                  >
+                    {formatMessage('createUser.successfullyCreated')}
+                  </Alert>
+                )}
+
+                {createdUser && (
+                  <Alert
+                    severity="info"
+                    color="primary"
+                    data-test="invitation-email-info-alert"
+                    sx={{
+                      a: {
+                        wordBreak: 'break-all',
+                      },
+                    }}
+                  >
+                    {formatMessage('createUser.invitationEmailInfo', {
+                      link: () => (
+                        <a
+                          href={createdUser.data.acceptInvitationUrl}
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          {createdUser.data.acceptInvitationUrl}
+                        </a>
+                      ),
+                    })}
+                  </Alert>
+                )}
+
+                <LoadingButton
+                  type="submit"
+                  variant="contained"
                   color="primary"
-                  data-test="invitation-email-info-alert"
+                  sx={{ boxShadow: 2 }}
+                  loading={isCreateUserPending}
+                  data-test="create-button"
                 >
-                  {formatMessage('createUser.invitationEmailInfo', {
-                    link: () => (
-                      <a
-                        href={createdUser.data.acceptInvitationUrl}
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        {createdUser.data.acceptInvitationUrl}
-                      </a>
-                    ),
-                  })}
-                </Alert>
-              )}
-            </Stack>
-          </Form>
+                  {formatMessage('createUser.submit')}
+                </LoadingButton>
+              </Stack>
+            )}
+          />
         </Grid>
       </Grid>
     </Container>

packages/web/src/pages/EditRole/index.ee.jsx

@@ -1,6 +1,5 @@
 import LoadingButton from '@mui/lab/LoadingButton';
 import Grid from '@mui/material/Grid';
-import Skeleton from '@mui/material/Skeleton';
 import Stack from '@mui/material/Stack';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
@@ -30,7 +29,8 @@ export default function EditRole() {
   const { data: roleData, isLoading: isRoleLoading } = useRole({ roleId });
   const { mutateAsync: updateRole, isPending: isUpdateRolePending } =
     useAdminUpdateRole(roleId);
-  const { data: permissionCatalogData } = usePermissionCatalog();
+  const { data: permissionCatalogData, isLoading: isPermissionCatalogLoading } =
+    usePermissionCatalog();
   const role = roleData?.data;
   const permissionCatalog = permissionCatalogData?.data;
   const enqueueSnackbar = useEnqueueSnackbar();
@@ -84,36 +84,30 @@ export default function EditRole() {
         <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
           <Form defaultValues={defaultValues} onSubmit={handleRoleUpdate}>
             <Stack direction="column" gap={2}>
-              {isRoleLoading && (
-                <>
-                  <Skeleton variant="rounded" height={55} />
-                  <Skeleton variant="rounded" height={55} />
-                </>
-              )}
-              {!isRoleLoading && role && (
-                <>
-                  <TextField
-                    disabled={role.isAdmin}
-                    required={true}
-                    name="name"
-                    label={formatMessage('roleForm.name')}
-                    data-test="name-input"
-                    fullWidth
-                  />
-
-                  <TextField
-                    disabled={role.isAdmin}
-                    name="description"
-                    label={formatMessage('roleForm.description')}
-                    data-test="description-input"
-                    fullWidth
-                  />
-                </>
-              )}
+              <TextField
+                disabled={
+                  role?.isAdmin || isRoleLoading || isPermissionCatalogLoading
+                }
+                required={true}
+                name="name"
+                label={formatMessage('roleForm.name')}
+                data-test="name-input"
+                fullWidth
+              />
+              <TextField
+                disabled={
+                  role?.isAdmin || isRoleLoading || isPermissionCatalogLoading
+                }
+                name="description"
+                label={formatMessage('roleForm.description')}
+                data-test="description-input"
+                fullWidth
+              />
               <PermissionCatalogField
                 name="computedPermissions"
                 disabled={role?.isAdmin}
                 syncIsCreator
+                loading={isRoleLoading}
               />
               <LoadingButton
                 type="submit"

packages/web/src/propTypes/propTypes.js

@@ -123,8 +123,6 @@ export const RawTriggerPropType = PropTypes.shape({
   showWebhookUrl: PropTypes.bool,
   pollInterval: PropTypes.number,
   description: PropTypes.string,
-  useSingletonWebhook: PropTypes.bool,
-  singletonWebhookRefValueParameter: PropTypes.string,
   getInterval: PropTypes.func,
   run: PropTypes.func,
   testRun: PropTypes.func,
@@ -140,8 +138,6 @@ export const TriggerPropType = PropTypes.shape({
   showWebhookUrl: PropTypes.bool,
   pollInterval: PropTypes.number,
   description: PropTypes.string,
-  useSingletonWebhook: PropTypes.bool,
-  singletonWebhookRefValueParameter: PropTypes.string,
   getInterval: PropTypes.func,
   run: PropTypes.func,
   testRun: PropTypes.func,
@@ -211,8 +207,7 @@ export const ConnectionPropType = PropTypes.shape({
   flowCount: PropTypes.number,
   appData: AppPropType,
   createdAt: PropTypes.number,
-  reconnectable: PropTypes.bool,
-  appAuthClientId: PropTypes.string,
+  oauthClientId: PropTypes.string,
 });
 
 AppPropType.connection = PropTypes.arrayOf(ConnectionPropType);
@@ -459,13 +454,12 @@ export const SamlAuthProviderRolePropType = PropTypes.shape({
 export const AppConfigPropType = PropTypes.shape({
   id: PropTypes.string,
   key: PropTypes.string,
-  customConnectionAllowed: PropTypes.bool,
-  connectionAllowed: PropTypes.bool,
+  useOnlyPredefinedAuthClients: PropTypes.bool,
   shared: PropTypes.bool,
   disabled: PropTypes.bool,
 });
 
-export const AppAuthClientPropType = PropTypes.shape({
+export const OAuthClientPropType = PropTypes.shape({
   id: PropTypes.string,
   name: PropTypes.string,
   appConfigKey: PropTypes.string,

packages/web/src/styles/theme.js

@@ -158,6 +158,10 @@ export const defaultTheme = createTheme({
         fontSize: referenceTheme.typography.pxToRem(16),
       },
     },
+    stepApp: {
+      fontSize: referenceTheme.typography.pxToRem(12),
+      color: '#5C5C5C',
+    },
   },
   components: {
     MuiAppBar: {
@@ -211,6 +215,23 @@ export const defaultTheme = createTheme({
         }),
       },
     },
+    MuiChip: {
+      variants: [
+        {
+          props: { variant: 'stepType' },
+          style: ({ theme }) => ({
+            color: '#001F52',
+            fontSize: theme.typography.pxToRem(12),
+            border: '1px solid',
+            borderColor: alpha(theme.palette.primary.main, 0.3),
+            bgcolor: alpha(
+              theme.palette.primary.main,
+              theme.palette.action.selectedOpacity,
+            ),
+          }),
+        },
+      ],
+    },
     MuiContainer: {
       defaultProps: {
         maxWidth: 'xl',
@@ -294,6 +315,7 @@ export const defaultTheme = createTheme({
     },
   },
 });
+
 export const mationTheme = createTheme(
   deepmerge(defaultTheme, {
     palette: {
@@ -315,4 +337,5 @@ export const mationTheme = createTheme(
     },
   }),
 );
+
 export default defaultTheme;