feat(connections): iterate add button availability

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

@@ -18,7 +18,6 @@ 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;

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

@@ -22,6 +22,7 @@ import useStepConnection from 'hooks/useStepConnection';
 import { useQueryClient } from '@tanstack/react-query';
 import useAppConnections from 'hooks/useAppConnections';
 import useTestConnection from 'hooks/useTestConnection';
+import useAppAuthClients from 'hooks/useAppAuthClients';
 
 const ADD_CONNECTION_VALUE = 'ADD_CONNECTION';
 const ADD_SHARED_CONNECTION_VALUE = 'ADD_SHARED_CONNECTION';
@@ -53,6 +54,7 @@ function ChooseConnectionSubstep(props) {
   const [showAddSharedConnectionDialog, setShowAddSharedConnectionDialog] =
     React.useState(false);
   const queryClient = useQueryClient();
+  const { data: appAuthClients } = useAppAuthClients(application.key);
 
   const { authenticate } = useAuthenticateApp({
     appKey: application.key,
@@ -93,24 +95,48 @@ function ChooseConnectionSubstep(props) {
       appWithConnections?.map((connection) => optionGenerator(connection)) ||
       [];
 
-    if (
+    const addCustomConnection = {
-      !appConfig?.data ||
+      label: formatMessage('chooseConnectionSubstep.addNewConnection'),
-      (!appConfig.data?.disabled === false &&
+      value: ADD_CONNECTION_VALUE,
-        appConfig.data?.useOnlyPredefinedAuthClients === false)
+    };
-    ) {
+
-      options.push({
+    const addConnectionWithAuthClient = {
-        label: formatMessage('chooseConnectionSubstep.addNewConnection'),
+      label: formatMessage(
-        value: ADD_CONNECTION_VALUE,
+        'chooseConnectionSubstep.addConnectionWithAuthClient',
-      });
+      ),
+      value: ADD_SHARED_CONNECTION_VALUE,
+    };
+
+    // means there is no app config. defaulting to custom connections only
+    if (!appConfig?.data) {
+      return options.concat([addCustomConnection]);
     }
 
-    options.push({
+    // app is disabled.
-      label: formatMessage('chooseConnectionSubstep.addNewSharedConnection'),
+    if (appConfig.data.disabled) return options;
-      value: ADD_SHARED_CONNECTION_VALUE,
-    });
 
-    return options;
+    // means only auth clients are allowed for connection creation and there is app auth client
-  }, [data, formatMessage, appConfig?.data]);
+    if (
+      appConfig.data.useOnlyPredefinedAuthClients === true &&
+      appAuthClients.data.length > 0
+    ) {
+      return options.concat([addConnectionWithAuthClient]);
+    }
+
+    // means there is no app auth client. so we don't show the `addConnectionWithAuthClient`
+    if (
+      appConfig.data.useOnlyPredefinedAuthClients === true &&
+      appAuthClients.data.length === 0
+    ) {
+      return options;
+    }
+
+    if (appAuthClients.data.length === 0) {
+      return options.concat([addCustomConnection]);
+    }
+
+    return options.concat([addCustomConnection, addConnectionWithAuthClient]);
+  }, [data, formatMessage, appConfig, appAuthClients]);
 
   const handleClientClick = async (appAuthClientId) => {
     try {
@@ -161,10 +187,7 @@ function ChooseConnectionSubstep(props) {
   const handleChange = React.useCallback(
     async (event, selectedOption) => {
       if (typeof selectedOption === 'object') {
-        // TODO: try to simplify type casting below.
+        const connectionId = selectedOption?.value;
-        const typedSelectedOption = selectedOption;
-        const option = typedSelectedOption;
-        const connectionId = option?.value;
 
         if (connectionId === ADD_CONNECTION_VALUE) {
           setShowAddConnectionDialog(true);

packages/web/src/index.jsx

@@ -1,6 +1,5 @@
 import { createRoot } from 'react-dom/client';
 import { Settings } from 'luxon';
-import { setUseWhatChange } from '@simbathesailor/use-what-changed';
 
 import ThemeProvider from 'components/ThemeProvider';
 import IntlProvider from 'components/IntlProvider';
@@ -15,8 +14,6 @@ import reportWebVitals from './reportWebVitals';
 // Sets the default locale to English for all luxon DateTime instances created afterwards.
 Settings.defaultLocale = 'en';
 
-setUseWhatChange(process.env.NODE_ENV === 'development');
-
 const container = document.getElementById('root');
 const root = createRoot(container);
 

packages/web/src/locales/en.json

@@ -74,7 +74,7 @@
   "filterConditions.orContinueIf": "OR continue if…",
   "chooseConnectionSubstep.continue": "Continue",
   "chooseConnectionSubstep.addNewConnection": "Add new connection",
-  "chooseConnectionSubstep.addNewSharedConnection": "Add new shared connection",
+  "chooseConnectionSubstep.addConnectionWithAuthClient": "Add connection with auth client",
   "chooseConnectionSubstep.chooseConnection": "Choose connection",
   "flow.createdAt": "created {datetime}",
   "flow.updatedAt": "updated {datetime}",

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

@@ -80,15 +80,21 @@ export default function Application() {
       key: 'addConnection',
       'data-test': 'add-connection-button',
       to: URLS.APP_ADD_CONNECTION(appKey, false),
-      disabled: !currentUserAbility.can('create', 'Connection'),
+      disabled:
+        !currentUserAbility.can('create', 'Connection') ||
+        appConfig?.data?.useOnlyPredefinedAuthClients === true ||
+        appConfig?.data?.disabled === true,
     };
 
     const addConnectionWithAuthClient = {
       label: formatMessage('app.addConnectionWithAuthClient'),
       key: 'addConnectionWithAuthClient',
-      'data-test': 'add-custom-connection-button',
+      'data-test': 'add-connection-with-auth-client-button',
       to: URLS.APP_ADD_CONNECTION(appKey, true),
-      disabled: !currentUserAbility.can('create', 'Connection'),
+      disabled:
+        !currentUserAbility.can('create', 'Connection') ||
+        appAuthClients?.data?.length === 0 ||
+        appConfig?.data?.disabled === true,
     };
 
     // means there is no app config. defaulting to custom connections only
@@ -96,16 +102,16 @@ export default function Application() {
       return [addCustomConnection];
     }
 
-    // means there is no app auth client. so we don't show the `addConnectionWithAuthClient`
-    if (appAuthClients?.data?.length === 0) {
-      return [addCustomConnection];
-    }
-
     // means only auth clients are allowed for connection creation
     if (appConfig?.data?.useOnlyPredefinedAuthClients === true) {
       return [addConnectionWithAuthClient];
     }
 
+    // means there is no app auth client. so we don't show the `addConnectionWithAuthClient`
+    if (appAuthClients?.data?.length === 0) {
+      return [addCustomConnection];
+    }
+
     return [addCustomConnection, addConnectionWithAuthClient];
   }, [appKey, appConfig, appAuthClients, currentUserAbility, formatMessage]);
 
@@ -159,9 +165,7 @@ export default function Application() {
                     <Can I="create" a="Connection" passThrough>
                       {(allowed) => (
                         <SplitButton
-                          disabled={
+                          disabled={!allowed}
-                            !allowed || appConfig?.data?.disabled === true
-                          }
                           options={connectionOptions}
                         />
                       )}