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

2024-12-19 14:53:47 +00:00
parent 8c4b67e147
commit 8d5287d51e
23 changed files with 206 additions and 194 deletions
--- a/packages/web/src/components/AddAppConnection/index.jsx
+++ b/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, 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
--- a/packages/web/src/components/AdminApplicationCreateOAuthClient/index.jsx
+++ b/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,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;
--- a/packages/web/src/components/AdminApplicationOAuthClientDialog/index.jsx
+++ b/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;
--- a/packages/web/src/components/AdminApplicationOAuthClientDialog/style.js
+++ b/packages/web/src/components/AdminApplicationOAuthClientDialog/style.js
--- a/packages/web/src/components/AdminApplicationOAuthClients/index.jsx
+++ b/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;
--- a/packages/web/src/components/AdminApplicationUpdateOAuthClient/index.jsx
+++ b/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;
--- a/packages/web/src/components/AppConnectionContextMenu/index.jsx
+++ b/packages/web/src/components/AppConnectionContextMenu/index.jsx
@@ -70,7 +70,7 @@ function ContextMenu(props) {
            to={URLS.APP_RECONNECT_CONNECTION(
              appKey,
              connection.id,
-              connection.appAuthClientId,
+              connection.oauthClientId,
            )}
            onClick={createActionHandler({ type: 'reconnect' })}
          >
--- a/packages/web/src/components/ChooseConnectionSubstep/index.jsx
+++ b/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,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}
--- a/packages/web/src/components/AppAuthClientsDialog/index.ee.jsx
+++ b/packages/web/src/components/AppAuthClientsDialog/index.ee.jsx
@@ -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;