josh/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(web): use oauth client instead of app auth client

Browse Source
This commit is contained in:
Ali BARIN
2024-12-19 14:53:47 +00:00
parent 8c4b67e147
commit 8d5287d51e
23 changed files with 206 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/web/src/components/AddAppConnection/index.jsx
View File

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

28
packages/web/src/components/AdminApplicationCreateAuthClient/index.jsx → packages/web/src/components/AdminApplicationCreateOAuthClient/index.jsx
View File

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

12
packages/web/src/components/AdminApplicationAuthClientDialog/index.jsx → packages/web/src/components/AdminApplicationOAuthClientDialog/index.jsx
View File

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

0
packages/web/src/components/AdminApplicationAuthClientDialog/style.js → packages/web/src/components/AdminApplicationOAuthClientDialog/style.js
View File

34
packages/web/src/components/AdminApplicationAuthClients/index.jsx → packages/web/src/components/AdminApplicationOAuthClients/index.jsx
View File

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

46
packages/web/src/components/AdminApplicationUpdateAuthClient/index.jsx → packages/web/src/components/AdminApplicationUpdateOAuthClient/index.jsx
View File

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

2
packages/web/src/components/AppConnectionContextMenu/index.jsx
View File

@@ -70,7 +70,7 @@ function ContextMenu(props) {
to={URLS.APP_RECONNECT_CONNECTION( to={URLS.APP_RECONNECT_CONNECTION(
appKey, appKey,
connection.id, connection.id,
connection.appAuthClientId, connection.oauthClientId,
)} )}
onClick={createActionHandler({ type: 'reconnect' })} onClick={createActionHandler({ type: 'reconnect' })}
> >

32
packages/web/src/components/ChooseConnectionSubstep/index.jsx
View File

@@ -7,7 +7,7 @@ import TextField from '@mui/material/TextField';
import * as React from 'react'; import * as React from 'react';
import AddAppConnection from 'components/AddAppConnection'; 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 FlowSubstepTitle from 'components/FlowSubstepTitle';
import useAppConfig from 'hooks/useAppConfig.ee'; import useAppConfig from 'hooks/useAppConfig.ee';
import { EditorContext } from 'contexts/Editor'; import { EditorContext } from 'contexts/Editor';
@@ -22,7 +22,7 @@ import useStepConnection from 'hooks/useStepConnection';
import { useQueryClient } from '@tanstack/react-query'; import { useQueryClient } from '@tanstack/react-query';
import useAppConnections from 'hooks/useAppConnections'; import useAppConnections from 'hooks/useAppConnections';
import useTestConnection from 'hooks/useTestConnection'; import useTestConnection from 'hooks/useTestConnection';
import useAppAuthClients from 'hooks/useAppAuthClients'; import useOAuthClients from 'hooks/useOAuthClients';
const ADD_CONNECTION_VALUE = 'ADD_CONNECTION'; const ADD_CONNECTION_VALUE = 'ADD_CONNECTION';
const ADD_SHARED_CONNECTION_VALUE = 'ADD_SHARED_CONNECTION'; const ADD_SHARED_CONNECTION_VALUE = 'ADD_SHARED_CONNECTION';
@@ -54,7 +54,7 @@ function ChooseConnectionSubstep(props) {
const [showAddSharedConnectionDialog, setShowAddSharedConnectionDialog] = const [showAddSharedConnectionDialog, setShowAddSharedConnectionDialog] =
React.useState(false); React.useState(false);
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { data: appAuthClients } = useAppAuthClients(application.key); const { data: appOAuthClients } = useOAuthClients(application.key);
const { authenticate } = useAuthenticateApp({ const { authenticate } = useAuthenticateApp({
appKey: application.key, appKey: application.key,
@@ -100,9 +100,9 @@ function ChooseConnectionSubstep(props) {
value: ADD_CONNECTION_VALUE, value: ADD_CONNECTION_VALUE,
}; };
const addConnectionWithAuthClient = { const addConnectionWithOAuthClient = {
label: formatMessage( label: formatMessage(
'chooseConnectionSubstep.addConnectionWithAuthClient', 'chooseConnectionSubstep.addConnectionWithOAuthClient',
), ),
value: ADD_SHARED_CONNECTION_VALUE, value: ADD_SHARED_CONNECTION_VALUE,
}; };
@@ -115,33 +115,33 @@ function ChooseConnectionSubstep(props) {
// app is disabled. // app is disabled.
if (appConfig.data.disabled) return options; if (appConfig.data.disabled) return options;
// means only auth clients are allowed for connection creation and there is app auth client // means only OAuth clients are allowed for connection creation and there is OAuth client
if ( if (
appConfig.data.useOnlyPredefinedAuthClients === true && appConfig.data.useOnlyPredefinedAuthClients === true &&
appAuthClients.data.length > 0 appOAuthClients.data.length > 0
) { ) {
return options.concat([addConnectionWithAuthClient]); return options.concat([addConnectionWithOAuthClient]);
} }
// means there is no app auth client. so we don't show the `addConnectionWithAuthClient` // means there is no OAuth client. so we don't show the `addConnectionWithOAuthClient`
if ( if (
appConfig.data.useOnlyPredefinedAuthClients === true && appConfig.data.useOnlyPredefinedAuthClients === true &&
appAuthClients.data.length === 0 appOAuthClients.data.length === 0
) { ) {
return options; return options;
} }
if (appAuthClients.data.length === 0) { if (appOAuthClients.data.length === 0) {
return options.concat([addCustomConnection]); return options.concat([addCustomConnection]);
} }
return options.concat([addCustomConnection, addConnectionWithAuthClient]); return options.concat([addCustomConnection, addConnectionWithOAuthClient]);
}, [data, formatMessage, appConfig, appAuthClients]); }, [data, formatMessage, appConfig, appOAuthClients]);
const handleClientClick = async (appAuthClientId) => { const handleClientClick = async (oauthClientId) => {
try { try {
const response = await authenticate?.({ const response = await authenticate?.({
appAuthClientId, oauthClientId,
}); });
const connectionId = response?.createConnection.id; const connectionId = response?.createConnection.id;
@@ -292,7 +292,7 @@ function ChooseConnectionSubstep(props) {
)} )}
{application && showAddSharedConnectionDialog && ( {application && showAddSharedConnectionDialog && (
<AppAuthClientsDialog <AppOAuthClientsDialog
appKey={application.key} appKey={application.key}
onClose={() => setShowAddSharedConnectionDialog(false)} onClose={() => setShowAddSharedConnectionDialog(false)}
onClientClick={handleClientClick} onClientClick={handleClientClick}

22
packages/web/src/components/AppAuthClientsDialog/index.ee.jsx → packages/web/src/components/OAuthClientsDialog/index.ee.jsx
View File

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

20
packages/web/src/config/urls.js
View File

@@ -17,19 +17,19 @@ export const APP_CONNECTIONS = (appKey) => `/app/${appKey}/connections`;
export const APP_CONNECTIONS_PATTERN = '/app/:appKey/connections'; export const APP_CONNECTIONS_PATTERN = '/app/:appKey/connections';
export const APP_ADD_CONNECTION = (appKey, shared = false) => export const APP_ADD_CONNECTION = (appKey, shared = false) =>
`/app/${appKey}/connections/add?shared=${shared}`; `/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, appKey,
appAuthClientId, oauthClientId,
) => `/app/${appKey}/connections/add?appAuthClientId=${appAuthClientId}`; ) => `/app/${appKey}/connections/add?oauthClientId=${oauthClientId}`;
export const APP_ADD_CONNECTION_PATTERN = '/app/:appKey/connections/add'; export const APP_ADD_CONNECTION_PATTERN = '/app/:appKey/connections/add';
export const APP_RECONNECT_CONNECTION = ( export const APP_RECONNECT_CONNECTION = (
appKey, appKey,
connectionId, connectionId,
appAuthClientId, oauthClientId,
) => { ) => {
const path = `/app/${appKey}/connections/${connectionId}/reconnect`; const path = `/app/${appKey}/connections/${connectionId}/reconnect`;
if (appAuthClientId) { if (oauthClientId) {
return `${path}?appAuthClientId=${appAuthClientId}`; return `${path}?oauthClientId=${oauthClientId}`;
} }
return path; 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 = (appKey) => `${ADMIN_SETTINGS}/apps/${appKey}`;
export const ADMIN_APP_PATTERN = `${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_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_PATTERN = `${ADMIN_SETTINGS}/apps/:appKey/connections`;
export const ADMIN_APP_CONNECTIONS = (appKey) => export const ADMIN_APP_CONNECTIONS = (appKey) =>
`${ADMIN_SETTINGS}/apps/${appKey}/connections`; `${ADMIN_SETTINGS}/apps/${appKey}/connections`;
export const ADMIN_APP_SETTINGS = (appKey) => export const ADMIN_APP_SETTINGS = (appKey) =>
`${ADMIN_SETTINGS}/apps/${appKey}/settings`; `${ADMIN_SETTINGS}/apps/${appKey}/settings`;
export const ADMIN_APP_AUTH_CLIENTS = (appKey) => 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) => 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) => 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; export const DASHBOARD = FLOWS;
// External links and paths // External links and paths

19
packages/web/src/hooks/useAdminAppAuthClient.ee.js
View File

@@ -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;
}

11
packages/web/src/hooks/useAdminCreateAppAuthClient.ee.js → packages/web/src/hooks/useAdminCreateOAuthClient.ee.js
View File

@@ -1,20 +1,23 @@
import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useMutation, useQueryClient } from '@tanstack/react-query';
import api from 'helpers/api'; import api from 'helpers/api';
export default function useAdminCreateAppAuthClient(appKey) { export default function useAdminCreateOAuthClient(appKey) {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const query = useMutation({ const query = useMutation({
mutationFn: async (payload) => { 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; return data;
}, },
onSuccess: () => { onSuccess: () => {
queryClient.invalidateQueries({ queryClient.invalidateQueries({
queryKey: ['admin', 'apps', appKey, 'authClients'], queryKey: ['admin', 'apps', appKey, 'oauthClients'],
}); });
} },
}); });
return query; return query;

22
packages/web/src/hooks/useAdminOAuthClient.ee.js Normal file
View File

@@ -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;
}

6
packages/web/src/hooks/useAdminAppAuthClients.js → packages/web/src/hooks/useAdminOAuthClients.js
View File

@@ -1,11 +1,11 @@
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import api from 'helpers/api'; import api from 'helpers/api';
export default function useAdminAppAuthClients(appKey) { export default function useAdminOAuthClients(appKey) {
const query = useQuery({ const query = useQuery({
queryKey: ['admin', 'apps', appKey, 'authClients'], queryKey: ['admin', 'apps', appKey, 'oauthClients'],
queryFn: async ({ signal }) => { 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, signal,
}); });
return data; return data;

12
packages/web/src/hooks/useAdminUpdateAppAuthClient.ee.js → packages/web/src/hooks/useAdminUpdateOAuthClient.ee.js
View File

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

10
packages/web/src/hooks/useAuthenticateApp.ee.js
View File

@@ -31,7 +31,7 @@ function getSteps(auth, hasConnection, useShared) {
} }
export default function useAuthenticateApp(payload) { 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 { data: auth } = useAppAuth(appKey);
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { mutateAsync: createConnection } = useCreateConnection(appKey); const { mutateAsync: createConnection } = useCreateConnection(appKey);
@@ -55,7 +55,7 @@ export default function useAuthenticateApp(payload) {
const response = { const response = {
key: appKey, key: appKey,
appAuthClientId: appAuthClientId || payload.appAuthClientId, oauthClientId: oauthClientId || payload.oauthClientId,
connectionId, connectionId,
fields, fields,
}; };
@@ -133,7 +133,7 @@ export default function useAuthenticateApp(payload) {
}, [ }, [
steps, steps,
appKey, appKey,
appAuthClientId, oauthClientId,
connectionId, connectionId,
queryClient, queryClient,
createConnection, createConnection,
@@ -147,7 +147,7 @@ export default function useAuthenticateApp(payload) {
[ [
steps, steps,
appKey, appKey,
appAuthClientId, oauthClientId,
connectionId, connectionId,
queryClient, queryClient,
createConnection, createConnection,
@@ -156,7 +156,7 @@ export default function useAuthenticateApp(payload) {
resetConnection, resetConnection,
verifyConnection, verifyConnection,
], ],
'steps, appKey, appAuthClientId, connectionId, queryClient, createConnection, createConnectionAuthUrl, updateConnection, resetConnection, verifyConnection', 'steps, appKey, oauthClientId, connectionId, queryClient, createConnection, createConnectionAuthUrl, updateConnection, resetConnection, verifyConnection',
'', '',
'useAuthenticate', 'useAuthenticate',
); );

4
packages/web/src/hooks/useCreateConnection.js
View File

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

6
packages/web/src/hooks/useAppAuthClients.js → packages/web/src/hooks/useOAuthClients.js
View File

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

4
packages/web/src/hooks/useUpdateConnection.js
View File

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

28
packages/web/src/locales/en.json
View File

@@ -22,7 +22,7 @@
"app.connectionCount": "{count} connections", "app.connectionCount": "{count} connections",
"app.flowCount": "{count} flows", "app.flowCount": "{count} flows",
"app.addConnection": "Add connection", "app.addConnection": "Add connection",
"app.addConnectionWithAuthClient": "Add connection with auth client", "app.addConnectionWithOAuthClient": "Add connection with OAuth client",
"app.reconnectConnection": "Reconnect connection", "app.reconnectConnection": "Reconnect connection",
"app.createFlow": "Create flow", "app.createFlow": "Create flow",
"app.settings": "Settings", "app.settings": "Settings",
@@ -74,7 +74,7 @@
"filterConditions.orContinueIf": "OR continue if…", "filterConditions.orContinueIf": "OR continue if…",
"chooseConnectionSubstep.continue": "Continue", "chooseConnectionSubstep.continue": "Continue",
"chooseConnectionSubstep.addNewConnection": "Add new connection", "chooseConnectionSubstep.addNewConnection": "Add new connection",
"chooseConnectionSubstep.addConnectionWithAuthClient": "Add connection with auth client", "chooseConnectionSubstep.addConnectionWithOAuthClient": "Add connection with OAuth client",
"chooseConnectionSubstep.chooseConnection": "Choose connection", "chooseConnectionSubstep.chooseConnection": "Choose connection",
"flow.createdAt": "created {datetime}", "flow.createdAt": "created {datetime}",
"flow.updatedAt": "updated {datetime}", "flow.updatedAt": "updated {datetime}",
@@ -258,7 +258,7 @@
"permissionSettings.cancel": "Cancel", "permissionSettings.cancel": "Cancel",
"permissionSettings.apply": "Apply", "permissionSettings.apply": "Apply",
"permissionSettings.title": "Conditions", "permissionSettings.title": "Conditions",
"appAuthClientsDialog.title": "Choose your authentication client", "appOAuthClientsDialog.title": "Choose your authentication client",
"userInterfacePage.title": "User Interface", "userInterfacePage.title": "User Interface",
"userInterfacePage.successfullyUpdated": "User interface has been updated.", "userInterfacePage.successfullyUpdated": "User interface has been updated.",
"userInterfacePage.titleFieldLabel": "Title", "userInterfacePage.titleFieldLabel": "Title",
@@ -290,22 +290,22 @@
"roleMappingsForm.successfullySaved": "Role mappings have been saved.", "roleMappingsForm.successfullySaved": "Role mappings have been saved.",
"adminApps.title": "Apps", "adminApps.title": "Apps",
"adminApps.connections": "Connections", "adminApps.connections": "Connections",
"adminApps.authClients": "Auth clients", "adminApps.oauthClients": "OAuth clients",
"adminApps.settings": "Settings", "adminApps.settings": "Settings",
"adminAppsSettings.useOnlyPredefinedAuthClients": "Use only predefined auth clients", "adminAppsSettings.useOnlyPredefinedAuthClients": "Use only predefined OAuth clients",
"adminAppsSettings.shared": "Shared", "adminAppsSettings.shared": "Shared",
"adminAppsSettings.disabled": "Disabled", "adminAppsSettings.disabled": "Disabled",
"adminAppsSettings.save": "Save", "adminAppsSettings.save": "Save",
"adminAppsSettings.successfullySaved": "Settings have been saved.", "adminAppsSettings.successfullySaved": "Settings have been saved.",
"adminAppsAuthClients.noAuthClients": "You don't have any auth clients yet.", "adminAppsOAuthClients.noOauthClients": "You don't have any OAuth clients yet.",
"adminAppsAuthClients.statusActive": "Active", "adminAppsOAuthClients.statusActive": "Active",
"adminAppsAuthClients.statusInactive": "Inactive", "adminAppsOAuthClients.statusInactive": "Inactive",
"createAuthClient.button": "Create auth client", "createOAuthClient.button": "Create OAuth client",
"createAuthClient.title": "Create auth client", "createOAuthClient.title": "Create OAuth client",
"authClient.buttonSubmit": "Submit", "oauthClient.buttonSubmit": "Submit",
"authClient.inputName": "Name", "oauthClient.inputName": "Name",
"authClient.inputActive": "Active", "oauthClient.inputActive": "Active",
"updateAuthClient.title": "Update auth client", "updateOAuthClient.title": "Update OAuth client",
"notFoundPage.title": "We can't seem to find a page you're looking for.", "notFoundPage.title": "We can't seem to find a page you're looking for.",
"notFoundPage.button": "Back to home page" "notFoundPage.button": "Back to home page"
} }

28
packages/web/src/pages/AdminApplication/index.jsx
View File

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

24
packages/web/src/pages/Application/index.jsx
View File

@@ -30,7 +30,7 @@ import AppIcon from 'components/AppIcon';
import Container from 'components/Container'; import Container from 'components/Container';
import PageTitle from 'components/PageTitle'; import PageTitle from 'components/PageTitle';
import useApp from 'hooks/useApp'; import useApp from 'hooks/useApp';
import useAppAuthClients from 'hooks/useAppAuthClients'; import useOAuthClients from 'hooks/useOAuthClients';
import Can from 'components/Can'; import Can from 'components/Can';
import { AppPropType } from 'propTypes/propTypes'; import { AppPropType } from 'propTypes/propTypes';
@@ -63,7 +63,7 @@ export default function Application() {
const flowsPathMatch = useMatch({ path: URLS.APP_FLOWS_PATTERN, end: false }); const flowsPathMatch = useMatch({ path: URLS.APP_FLOWS_PATTERN, end: false });
const { appKey } = useParams(); const { appKey } = useParams();
const navigate = useNavigate(); const navigate = useNavigate();
const { data: appAuthClients } = useAppAuthClients(appKey); const { data: appOAuthClients } = useOAuthClients(appKey);
const { data, loading } = useApp(appKey); const { data, loading } = useApp(appKey);
const app = data?.data || {}; const app = data?.data || {};
@@ -86,14 +86,14 @@ export default function Application() {
appConfig?.data?.disabled === true, appConfig?.data?.disabled === true,
}; };
const addConnectionWithAuthClient = { const addConnectionWithOAuthClient = {
label: formatMessage('app.addConnectionWithAuthClient'), label: formatMessage('app.addConnectionWithOAuthClient'),
key: 'addConnectionWithAuthClient', key: 'addConnectionWithOAuthClient',
'data-test': 'add-connection-with-auth-client-button', 'data-test': 'add-connection-with-auth-client-button',
to: URLS.APP_ADD_CONNECTION(appKey, true), to: URLS.APP_ADD_CONNECTION(appKey, true),
disabled: disabled:
!currentUserAbility.can('create', 'Connection') || !currentUserAbility.can('create', 'Connection') ||
appAuthClients?.data?.length === 0 || appOAuthClients?.data?.length === 0 ||
appConfig?.data?.disabled === true, appConfig?.data?.disabled === true,
}; };
@@ -102,18 +102,18 @@ export default function Application() {
return [addCustomConnection]; return [addCustomConnection];
} }
// means only auth clients are allowed for connection creation // means only OAuth clients are allowed for connection creation
if (appConfig?.data?.useOnlyPredefinedAuthClients === true) { if (appConfig?.data?.useOnlyPredefinedAuthClients === true) {
return [addConnectionWithAuthClient]; return [addConnectionWithOAuthClient];
} }
// means there is no app auth client. so we don't show the `addConnectionWithAuthClient` // means there is no OAuth client. so we don't show the `addConnectionWithOAuthClient`
if (appAuthClients?.data?.length === 0) { if (appOAuthClients?.data?.length === 0) {
return [addCustomConnection]; return [addCustomConnection];
} }
return [addCustomConnection, addConnectionWithAuthClient]; return [addCustomConnection, addConnectionWithOAuthClient];
}, [appKey, appConfig, appAuthClients, currentUserAbility, formatMessage]); }, [appKey, appConfig, appOAuthClients, currentUserAbility, formatMessage]);
if (loading) return null; if (loading) return null;

4
packages/web/src/propTypes/propTypes.js
View File

@@ -211,7 +211,7 @@ export const ConnectionPropType = PropTypes.shape({
flowCount: PropTypes.number, flowCount: PropTypes.number,
appData: AppPropType, appData: AppPropType,
createdAt: PropTypes.number, createdAt: PropTypes.number,
appAuthClientId: PropTypes.string, oauthClientId: PropTypes.string,
}); });
AppPropType.connection = PropTypes.arrayOf(ConnectionPropType); AppPropType.connection = PropTypes.arrayOf(ConnectionPropType);
@@ -463,7 +463,7 @@ export const AppConfigPropType = PropTypes.shape({
disabled: PropTypes.bool, disabled: PropTypes.bool,
}); });
export const AppAuthClientPropType = PropTypes.shape({ export const OAuthClientPropType = PropTypes.shape({
id: PropTypes.string, id: PropTypes.string,
name: PropTypes.string, name: PropTypes.string,
appConfigKey: PropTypes.string, appConfigKey: PropTypes.string,