diff --git a/packages/web/src/components/AddAppConnection/index.jsx b/packages/web/src/components/AddAppConnection/index.jsx index 9147ff50..a074b035 100644 --- a/packages/web/src/components/AddAppConnection/index.jsx +++ b/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; diff --git a/packages/web/src/components/ChooseConnectionSubstep/index.jsx b/packages/web/src/components/ChooseConnectionSubstep/index.jsx index 816619d7..0c6ef5c8 100644 --- a/packages/web/src/components/ChooseConnectionSubstep/index.jsx +++ b/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 ( - !appConfig?.data || - (!appConfig.data?.disabled === false && - appConfig.data?.useOnlyPredefinedAuthClients === false) - ) { - options.push({ - label: formatMessage('chooseConnectionSubstep.addNewConnection'), - value: ADD_CONNECTION_VALUE, - }); + const addCustomConnection = { + label: formatMessage('chooseConnectionSubstep.addNewConnection'), + value: ADD_CONNECTION_VALUE, + }; + + const addConnectionWithAuthClient = { + label: formatMessage( + '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({ - label: formatMessage('chooseConnectionSubstep.addNewSharedConnection'), - value: ADD_SHARED_CONNECTION_VALUE, - }); + // app is disabled. + if (appConfig.data.disabled) return options; - return options; - }, [data, formatMessage, appConfig?.data]); + // means only auth clients are allowed for connection creation and there is app auth client + 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 typedSelectedOption = selectedOption; - const option = typedSelectedOption; - const connectionId = option?.value; + const connectionId = selectedOption?.value; if (connectionId === ADD_CONNECTION_VALUE) { setShowAddConnectionDialog(true); diff --git a/packages/web/src/index.jsx b/packages/web/src/index.jsx index 916baf28..8c03da02 100644 --- a/packages/web/src/index.jsx +++ b/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); diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index d7786d9e..40073d61 100644 --- a/packages/web/src/locales/en.json +++ b/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}", diff --git a/packages/web/src/pages/Application/index.jsx b/packages/web/src/pages/Application/index.jsx index 1afd7605..73528b3e 100644 --- a/packages/web/src/pages/Application/index.jsx +++ b/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() { {(allowed) => ( )}