feat(webapp): Show integration issues in their settings

packages/server/lib/controllers/config.controller.ts

@@ -31,6 +31,7 @@ export interface Integration {
     creationDate: Date | undefined;
     connectionConfigParams?: string[];
     credentialParams?: string[];
+    missing_fields_count: number;
 }
 
 export interface ListIntegration {
@@ -131,7 +132,8 @@ class ConfigController {
                         provider: config.provider,
                         scripts: activeFlows.length,
                         connection_count: Number(config.connection_count),
-                        creationDate: config.created_at
+                        creationDate: config.created_at,
+                        missing_fields_count: config.missing_fields.length
                     };
 
                     // Used by legacy connection create

packages/webapp/src/components/ErrorCircle.tsx

@@ -2,10 +2,11 @@ import { IconExclamationMark, IconLock, IconRefresh } from '@tabler/icons-react'
 import type React from 'react';
 
 export type ErrorCircleIcon = '!' | 'sync' | 'auth';
-export const ErrorCircle: React.FC<{ icon?: ErrorCircleIcon }> = ({ icon = '!' }) => {
+export type ErrorCircleVariant = 'error' | 'warning';
+export const ErrorCircle: React.FC<{ icon?: ErrorCircleIcon; variant?: ErrorCircleVariant }> = ({ icon = '!', variant = 'error' }) => {
     return (
         <span className="mx-1 cursor-auto flex h-4 w-4 rounded-full ring-red-base/[.35] ring-4">
-            <span className="flex items-center rounded-full bg-red-base h-4 w-4">
+            <span className={`flex items-center rounded-full ${variant === 'warning' ? 'bg-yellow-base' : 'bg-red-base'} h-4 w-4`}>
                 {icon === '!' && <IconExclamationMark className="ml-[2px] h-3 w-3 text-pure-black" />}
                 {icon === 'sync' && <IconRefresh className="ml-[2px] h-3 w-3 text-pure-black" />}
                 {icon === 'auth' && <IconLock className="ml-[2px] h-3 w-3 text-pure-black" />}

packages/webapp/src/pages/Integrations/List.tsx

@@ -8,6 +8,8 @@ import IntegrationLogo from '../../components/ui/IntegrationLogo';
 
 import { useStore } from '../../store';
 import { useListIntegration } from '../../hooks/useIntegration';
+import { ErrorCircle } from '../../components/ErrorCircle';
+import { SimpleTooltip } from '../../components/SimpleTooltip';
 import { Helmet } from 'react-helmet';
 import { ErrorPageComponent } from '../../components/ErrorComponent';
 
@@ -61,7 +63,7 @@ export default function IntegrationList() {
                                 <div className="w-1/3">Connections</div>
                                 <div className="w-24">Active Scripts</div>
                             </div>
-                            {integrations?.map(({ uniqueKey, provider, connection_count, scripts }) => (
+                            {integrations?.map(({ uniqueKey, provider, connection_count, scripts, missing_fields_count }) => (
                                 <div
                                     key={`tr-${uniqueKey}`}
                                     className={`flex gap-4 ${
@@ -76,6 +78,11 @@ export default function IntegrationList() {
                                             <IntegrationLogo provider={provider} height={7} width={7} />
                                         </div>
                                         <p className="truncate">{uniqueKey}</p>
+                                        {missing_fields_count > 0 && (
+                                            <SimpleTooltip tooltipContent="Missing configuration">
+                                                <ErrorCircle icon="!" variant="warning" />
+                                            </SimpleTooltip>
+                                        )}
                                     </div>
                                     <div className="flex items-center w-1/3">
                                         <p className="">{connection_count}</p>

packages/webapp/src/pages/Integrations/providerConfigKey/Settings/Show.tsx

@@ -1,11 +1,11 @@
 import type { GetIntegration } from '@nangohq/types';
 import { SettingsGeneral } from './components/General';
-import { SettingsOAuth } from './components/OAuth';
+import { SettingsOAuth, settingsMissingOAuth } from './components/OAuth';
 import { useStore } from '../../../../store';
 import { useEnvironment } from '../../../../hooks/useEnvironment';
 import type { EnvironmentAndAccount } from '@nangohq/server';
-import { SettingsApp } from './components/App';
-import { SettingsCustom } from './components/Custom';
+import { SettingsApp, settingsMissingApp } from './components/App';
+import { SettingsCustom, settingsMissingCustom } from './components/Custom';
 import { SettingsDefault } from './components/Default';
 
 export const SettingsSwitch: React.FC<{ data: GetIntegration['Success']['data']; environment: EnvironmentAndAccount['environment'] }> = ({
@@ -41,6 +41,32 @@ export const SettingsSwitch: React.FC<{ data: GetIntegration['Success']['data'];
     }
 };
 
+const missingFieldsMessage = (data: GetIntegration['Success']['data']): string | null => {
+    switch (data.template.auth_mode) {
+        case 'OAUTH1':
+        case 'OAUTH2':
+        case 'TBA':
+            return settingsMissingOAuth(data.integration.missing_fields);
+
+        case 'APP':
+            return settingsMissingApp(data.integration.missing_fields);
+
+        case 'CUSTOM':
+            return settingsMissingCustom(data.integration.missing_fields);
+
+        case 'BASIC':
+        case 'API_KEY':
+        case 'APP_STORE':
+        case 'TABLEAU':
+        case 'NONE':
+        case 'OAUTH2_CC':
+            return null;
+
+        default:
+            return null;
+    }
+};
+
 export const SettingsShow: React.FC<{ data: GetIntegration['Success']['data'] }> = ({ data }) => {
     const env = useStore((state) => state.env);
     const { environmentAndAccount, loading } = useEnvironment(env);
@@ -51,7 +77,7 @@ export const SettingsShow: React.FC<{ data: GetIntegration['Success']['data'] }>
 
     return (
         <div>
-            <SettingsGeneral data={data} environment={environmentAndAccount.environment} />
+            <SettingsGeneral data={data} environment={environmentAndAccount.environment} missingFieldsMessage={missingFieldsMessage(data)} />
             <SettingsSwitch data={data} environment={environmentAndAccount.environment} />
         </div>
     );

packages/webapp/src/pages/Integrations/providerConfigKey/Settings/components/App.tsx

@@ -105,3 +105,20 @@ export const SettingsApp: React.FC<{ data: GetIntegration['Success']['data']; en
         </div>
     );
 };
+
+export const settingsMissingApp = (missingFields: string[]): string => {
+    return missingFields
+        .map((field) => {
+            switch (field) {
+                case 'oauth_client_id':
+                    return 'App ID';
+                case 'oauth_client_secret':
+                    return 'App Private Key';
+                case 'app_link':
+                    return 'App Public Link';
+                default:
+                    return field;
+            }
+        })
+        .join(', ');
+};

packages/webapp/src/pages/Integrations/providerConfigKey/Settings/components/Custom.tsx

@@ -136,3 +136,24 @@ export const SettingsCustom: React.FC<{ data: GetIntegration['Success']['data'];
         </div>
     );
 };
+
+export const settingsMissingCustom = (missingFields: string[]): string => {
+    return missingFields
+        .map((field) => {
+            switch (field) {
+                case 'oauth_client_id':
+                    return 'Client ID';
+                case 'oauth_client_secret':
+                    return 'Client Secret';
+                case 'app_link':
+                    return 'App Public Link';
+                case 'app_id':
+                    return 'App ID';
+                case 'private_key':
+                    return 'App Private Key';
+                default:
+                    return field;
+            }
+        })
+        .join(', ');
+};

packages/webapp/src/pages/Integrations/providerConfigKey/Settings/components/General.tsx

@@ -13,11 +13,13 @@ import { InfoBloc } from '../../../../../components/InfoBloc';
 import { CopyButton } from '../../../../../components/ui/button/CopyButton';
 import SecretInput from '../../../../../components/ui/input/SecretInput';
 import type { EnvironmentAndAccount } from '@nangohq/server';
+import { Info } from '../../../../../components/Info';
 
-export const SettingsGeneral: React.FC<{ data: GetIntegration['Success']['data']; environment: EnvironmentAndAccount['environment'] }> = ({
-    data: { integration, meta, template },
-    environment
-}) => {
+export const SettingsGeneral: React.FC<{
+    data: GetIntegration['Success']['data'];
+    environment: EnvironmentAndAccount['environment'];
+    missingFieldsMessage: string | null;
+}> = ({ data: { integration, meta, template }, environment, missingFieldsMessage }) => {
     const { toast } = useToast();
     const navigate = useNavigate();
 
@@ -59,6 +61,10 @@ export const SettingsGeneral: React.FC<{ data: GetIntegration['Success']['data']
 
     return (
         <div className="flex flex-col gap-8">
+            {missingFieldsMessage && (
+                <Info variant="warning">This integration cannot create connections until the following fields are configured: {missingFieldsMessage}</Info>
+            )}
+
             <div className="grid grid-cols-2 gap-10">
                 <InfoBloc title="API Provider">{integration?.provider}</InfoBloc>
                 <InfoBloc title="Integration ID">

packages/webapp/src/pages/Integrations/providerConfigKey/Settings/components/OAuth.tsx

@@ -94,3 +94,18 @@ export const SettingsOAuth: React.FC<{ data: GetIntegration['Success']['data'];
         </div>
     );
 };
+
+export const settingsMissingOAuth = (missingFields: string[]): string => {
+    return missingFields
+        .map((field) => {
+            switch (field) {
+                case 'oauth_client_id':
+                    return 'Client ID';
+                case 'oauth_client_secret':
+                    return 'Client Secret';
+                default:
+                    return field;
+            }
+        })
+        .join(', ');
+};

packages/webapp/src/pages/Integrations/providerConfigKey/Show.tsx

@@ -194,7 +194,10 @@ export const ShowIntegration: React.FC = () => {
                     <Button variant={tab === 'home' ? 'active' : 'zombie'}>Endpoints</Button>
                 </Link>
                 <Link to="./settings">
-                    <Button variant={tab === 'settings' ? 'active' : 'zombie'}>Settings</Button>
+                    <Button variant={tab === 'settings' ? 'active' : 'zombie'}>
+                        Settings
+                        {data.integration.missing_fields.length > 0 && <span className="ml-2 bg-yellow-base h-1.5 w-1.5 rounded-full inline-block"></span>}
+                    </Button>
                 </Link>
             </nav>
             <Routes>