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 { 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, key, navigate],
[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

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 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,10 +24,10 @@ 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;
@@ -43,7 +43,7 @@ function AdminApplicationCreateAuthClient(props) {
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;

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 { 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;

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

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

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

@@ -70,7 +70,7 @@ function ContextMenu(props) {
to={URLS.APP_RECONNECT_CONNECTION(
appKey,
connection.id,
connection.appAuthClientId,
connection.oauthClientId,
)}
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 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,7 +22,7 @@ import useStepConnection from 'hooks/useStepConnection';
import { useQueryClient } from '@tanstack/react-query';
import useAppConnections from 'hooks/useAppConnections';
import useTestConnection from 'hooks/useTestConnection';
import useAppAuthClients from 'hooks/useAppAuthClients';
import useOAuthClients from 'hooks/useOAuthClients';
const ADD_CONNECTION_VALUE = 'ADD_CONNECTION';
const ADD_SHARED_CONNECTION_VALUE = 'ADD_SHARED_CONNECTION';
@@ -54,7 +54,7 @@ function ChooseConnectionSubstep(props) {
const [showAddSharedConnectionDialog, setShowAddSharedConnectionDialog] =
React.useState(false);
const queryClient = useQueryClient();
const { data: appAuthClients } = useAppAuthClients(application.key);
const { data: appOAuthClients } = useOAuthClients(application.key);
const { authenticate } = useAuthenticateApp({
appKey: application.key,
@@ -100,9 +100,9 @@ function ChooseConnectionSubstep(props) {
value: ADD_CONNECTION_VALUE,
};
const addConnectionWithAuthClient = {
const addConnectionWithOAuthClient = {
label: formatMessage(
'chooseConnectionSubstep.addConnectionWithAuthClient',
'chooseConnectionSubstep.addConnectionWithOAuthClient',
),
value: ADD_SHARED_CONNECTION_VALUE,
};
@@ -115,33 +115,33 @@ function ChooseConnectionSubstep(props) {
// app is disabled.
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 (
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 (
appConfig.data.useOnlyPredefinedAuthClients === true &&
appAuthClients.data.length === 0
appOAuthClients.data.length === 0
) {
return options;
}
if (appAuthClients.data.length === 0) {
if (appOAuthClients.data.length === 0) {
return options.concat([addCustomConnection]);
}
return options.concat([addCustomConnection, addConnectionWithAuthClient]);
}, [data, formatMessage, appConfig, appAuthClients]);
return options.concat([addCustomConnection, addConnectionWithOAuthClient]);
}, [data, formatMessage, appConfig, appOAuthClients]);
const handleClientClick = async (appAuthClientId) => {
const handleClientClick = async (oauthClientId) => {
try {
const response = await authenticate?.({
appAuthClientId,
oauthClientId,
});
const connectionId = response?.createConnection.id;
@@ -292,7 +292,7 @@ function ChooseConnectionSubstep(props) {
)}
{application && showAddSharedConnectionDialog && (
<AppAuthClientsDialog
<AppOAuthClientsDialog
appKey={application.key}
onClose={() => setShowAddSharedConnectionDialog(false)}
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 ListItemText from '@mui/material/ListItemText';
import * as React from 'react';
import useAppAuthClients from 'hooks/useAppAuthClients';
import useOAuthClients from 'hooks/useOAuthClients';
import useFormatMessage from 'hooks/useFormatMessage';
function AppAuthClientsDialog(props) {
function AppOAuthClientsDialog(props) {
const { appKey, onClientClick, onClose } = props;
const { data: appAuthClients } = useAppAuthClients(appKey);
const { data: appOAuthClients } = useOAuthClients(appKey);
const formatMessage = useFormatMessage();
if (!appAuthClients?.data.length) return <React.Fragment />;
if (!appOAuthClients?.data.length) return <React.Fragment />;
return (
<Dialog onClose={onClose} open={true}>
<DialogTitle>{formatMessage('appAuthClientsDialog.title')}</DialogTitle>
<DialogTitle>{formatMessage('appOAuthClientsDialog.title')}</DialogTitle>
<List sx={{ pt: 0 }}>
{appAuthClients.data.map((appAuthClient) => (
<ListItem disableGutters key={appAuthClient.id}>
<ListItemButton onClick={() => onClientClick(appAuthClient.id)}>
<ListItemText primary={appAuthClient.name} />
{appOAuthClients.data.map((oauthClient) => (
<ListItem disableGutters key={oauthClient.id}>
<ListItemButton onClick={() => onClientClick(oauthClient.id)}>
<ListItemText primary={oauthClient.name} />
</ListItemButton>
</ListItem>
))}
@@ -34,10 +34,10 @@ function AppAuthClientsDialog(props) {
);
}
AppAuthClientsDialog.propTypes = {
AppOAuthClientsDialog.propTypes = {
appKey: PropTypes.string.isRequired,
onClientClick: 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_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

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

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

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

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

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

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

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

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

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

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

@@ -22,7 +22,7 @@
"app.connectionCount": "{count} connections",
"app.flowCount": "{count} flows",
"app.addConnection": "Add connection",
"app.addConnectionWithAuthClient": "Add connection with auth client",
"app.addConnectionWithOAuthClient": "Add connection with OAuth client",
"app.reconnectConnection": "Reconnect connection",
"app.createFlow": "Create flow",
"app.settings": "Settings",
@@ -74,7 +74,7 @@
"filterConditions.orContinueIf": "OR continue if…",
"chooseConnectionSubstep.continue": "Continue",
"chooseConnectionSubstep.addNewConnection": "Add new connection",
"chooseConnectionSubstep.addConnectionWithAuthClient": "Add connection with auth client",
"chooseConnectionSubstep.addConnectionWithOAuthClient": "Add connection with OAuth client",
"chooseConnectionSubstep.chooseConnection": "Choose connection",
"flow.createdAt": "created {datetime}",
"flow.updatedAt": "updated {datetime}",
@@ -258,7 +258,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",
@@ -290,22 +290,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.useOnlyPredefinedAuthClients": "Use only predefined auth clients",
"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"
}

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 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,8 +87,8 @@ export default function AdminApplication() {
component={Link}
/>
<Tab
data-test="auth-clients-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}
@@ -102,8 +102,8 @@ export default function AdminApplication() {
element={<AdminApplicationSettings appKey={appKey} />}
/>
<Route
path={`/auth-clients/*`}
element={<AdminApplicationAuthClients appKey={appKey} />}
path={`/oauth-clients/*`}
element={<AdminApplicationOAuthClients appKey={appKey} />}
/>
<Route
path="/"
@@ -118,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}
@@ -128,9 +128,9 @@ export default function AdminApplication() {
}
/>
<Route
path="/auth-clients/:clientId"
path="/oauth-clients/:clientId"
element={
<AdminApplicationUpdateAuthClient
<AdminApplicationUpdateOAuthClient
application={app}
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 PageTitle from 'components/PageTitle';
import useApp from 'hooks/useApp';
import useAppAuthClients from 'hooks/useAppAuthClients';
import useOAuthClients from 'hooks/useOAuthClients';
import Can from 'components/Can';
import { AppPropType } from 'propTypes/propTypes';
@@ -63,7 +63,7 @@ export default function Application() {
const flowsPathMatch = useMatch({ path: URLS.APP_FLOWS_PATTERN, end: false });
const { appKey } = useParams();
const navigate = useNavigate();
const { data: appAuthClients } = useAppAuthClients(appKey);
const { data: appOAuthClients } = useOAuthClients(appKey);
const { data, loading } = useApp(appKey);
const app = data?.data || {};
@@ -86,14 +86,14 @@ export default function Application() {
appConfig?.data?.disabled === true,
};
const addConnectionWithAuthClient = {
label: formatMessage('app.addConnectionWithAuthClient'),
key: 'addConnectionWithAuthClient',
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') ||
appAuthClients?.data?.length === 0 ||
appOAuthClients?.data?.length === 0 ||
appConfig?.data?.disabled === true,
};
@@ -102,18 +102,18 @@ export default function Application() {
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) {
return [addConnectionWithAuthClient];
return [addConnectionWithOAuthClient];
}
// means there is no app auth client. so we don't show the `addConnectionWithAuthClient`
if (appAuthClients?.data?.length === 0) {
// means there is no OAuth client. so we don't show the `addConnectionWithOAuthClient`
if (appOAuthClients?.data?.length === 0) {
return [addCustomConnection];
}
return [addCustomConnection, addConnectionWithAuthClient];
}, [appKey, appConfig, appAuthClients, currentUserAbility, formatMessage]);
return [addCustomConnection, addConnectionWithOAuthClient];
}, [appKey, appConfig, appOAuthClients, currentUserAbility, formatMessage]);
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,
appData: AppPropType,
createdAt: PropTypes.number,
appAuthClientId: PropTypes.string,
oauthClientId: PropTypes.string,
});
AppPropType.connection = PropTypes.arrayOf(ConnectionPropType);
@@ -463,7 +463,7 @@ export const AppConfigPropType = PropTypes.shape({
disabled: PropTypes.bool,
});
export const AppAuthClientPropType = PropTypes.shape({
export const OAuthClientPropType = PropTypes.shape({
id: PropTypes.string,
name: PropTypes.string,
appConfigKey: PropTypes.string,