feat(AppConfig): iterate how apps are managed

- auth clients are always shared, cannot be disabled
- custom connections are enabled by default, can be disabled
- any existing connections can be reconnected regardless of its AppConfig or AppAuthClient states

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

@@ -18,6 +18,7 @@ import { generateExternalLink } from 'helpers/translationValues';
 import { Form } from './style';
 import useAppAuth from 'hooks/useAppAuth';
 import { useQueryClient } from '@tanstack/react-query';
+import { useWhatChanged } from '@simbathesailor/use-what-changed';
 
 function AddAppConnection(props) {
   const { application, connectionId, onClose } = props;
@@ -64,7 +65,7 @@ function AddAppConnection(props) {
 
       asyncAuthenticate();
     },
-    [appAuthClientId, authenticate],
+    [appAuthClientId, authenticate, key, navigate],
   );
 
   const handleClientClick = (appAuthClientId) =>

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

@@ -34,10 +34,10 @@ function AdminApplicationCreateAuthClient(props) {
 
     if (!appConfigKey) {
       const { data: appConfigData } = await createAppConfig({
-        customConnectionAllowed: true,
-        shared: false,
+        useOnlyPredefinedAuthClients: false,
         disabled: false,
       });
+
       appConfigKey = appConfigData.key;
     }
 

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

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

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

@@ -15,17 +15,7 @@ function AppAuthClientsDialog(props) {
 
   const formatMessage = useFormatMessage();
 
-  React.useEffect(
-    function autoAuthenticateSingleClient() {
-      if (appAuthClients?.data.length === 1) {
-        onClientClick(appAuthClients.data[0].id);
-      }
-    },
-    [appAuthClients?.data],
-  );
-
-  if (!appAuthClients?.data.length || appAuthClients?.data.length === 1)
-    return <React.Fragment />;
+  if (!appAuthClients?.data.length) return <React.Fragment />;
 
   return (
     <Dialog onClose={onClose} open={true}>

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

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

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

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

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

@@ -95,7 +95,8 @@ function ChooseConnectionSubstep(props) {
 
     if (
       !appConfig?.data ||
-      (!appConfig.data?.disabled && appConfig.data?.customConnectionAllowed)
+      (!appConfig.data?.disabled === false &&
+        appConfig.data?.useOnlyPredefinedAuthClients === false)
     ) {
       options.push({
         label: formatMessage('chooseConnectionSubstep.addNewConnection'),
@@ -103,12 +104,10 @@ function ChooseConnectionSubstep(props) {
       });
     }
 
-    if (appConfig?.data?.connectionAllowed) {
-      options.push({
-        label: formatMessage('chooseConnectionSubstep.addNewSharedConnection'),
-        value: ADD_SHARED_CONNECTION_VALUE,
-      });
-    }
+    options.push({
+      label: formatMessage('chooseConnectionSubstep.addNewSharedConnection'),
+      value: ADD_SHARED_CONNECTION_VALUE,
+    });
 
     return options;
   }, [data, formatMessage, appConfig?.data]);

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

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