Repository: novuhq/novu
File: apps/dashboard/src/components/integrations/components/configuration-group.tsx (TypeScript)

Code before:
export function ConfigurationGroup({
  integrationId,
  group,
  control,
  isReadOnly,
  provider,
  formData,
  onAutoConfigureSuccess,
}: {
  integrationId?: string;
  group: ConfigConfigurationGroup;
  control: Control<IntegrationFormData>;
  isReadOnly?: boolean;
  provider?: IProviderConfig;
  formData?: IntegrationFormData;
  onAutoConfigureSuccess?: (integration: IIntegration) => void;
}) {
  const { currentEnvironment } = useEnvironment();
  const { groupType, configurations, enabler } = group;
  const { mutateAsync: autoConfigureIntegration } = useAutoConfigureIntegration();
  // biome-ignore lint/style/noNonNullAssertion: <explanation> x
  const inboundWebhookUrl = generateInboundWebhookUrl(currentEnvironment?._id!, integrationId);

  // Track the previous enabled state to detect toggle changes
  const prevIsEnabledRef = useRef<boolean | null>(null);

  // Auto-configure request state
  const [autoConfigureState, setAutoConfigureState] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
  const [autoConfigureMessage, setAutoConfigureMessage] = useState<string>('');

  // Find the enabler configuration (toggle field)
  const enablerConfig = enabler ? configurations.find((config) => config.key === enabler) : null;
  const nonEnablerConfigs = configurations.filter((config) => config.key !== enabler);

  // Always call useWatch to avoid conditional hook call
  const toggleFieldName = enablerConfig
    ? (`configurations.${String(enablerConfig.key)}` as const)
    : ('configurations.__dummy__' as const);

  const watchedValue = useWatch({
    control,
    name: toggleFieldName,
  });

  const isEnabled = Boolean(watchedValue && watchedValue !== 'false');

  // Check if required configurations are missing
  const hasRequiredConfigurations = nonEnablerConfigs.every((config) => {
    const configValue = formData?.configurations?.[config.key];
    return configValue && configValue.trim() !== '';
  });

Review comment (suggestion):
```suggestion
          <span className="text-xs text-green-600">Auto-configured a new webhook on your SendGrid account.</span>
```

Code after:
}

function AutoConfigureStatus({ state, message }: { state: 'idle' | 'loading' | 'success' | 'error'; message: string }) {
  if (state === 'idle') {
    return null;
  }

  return (
    <div className="flex h-4 items-center justify-start rounded-full bg-background -ml-[5px]">
      {state === 'loading' && (
        <div className="flex items-center gap-2">
          <LoadingIndicator size="sm" className="size-2.5" />
          <span className="text-xs text-neutral-600">Enabling tracking…</span>
        </div>
      )}
      {state === 'success' && (
        <div className="flex items-center gap-2">
          <Tooltip>
            <TooltipTrigger>
              <RiCheckLine className="size-3 text-green-600" />
            </TooltipTrigger>
            <TooltipContent>
              <p>{message}</p>
            </TooltipContent>
          </Tooltip>
          <span className="text-xs text-green-600">Auto-configured</span>
        </div>
      )}
      {state === 'error' && (
        <div className="flex items-center gap-2">
          <Tooltip>
            <TooltipTrigger>
              <RiCloseLine className="size-3 text-red-600" />
            </TooltipTrigger>
            <TooltipContent>
              <p>{message}</p>
            </TooltipContent>
          </Tooltip>
          <span className="text-xs text-red-600">Manual setup required</span>
        </div>
      )}
    </div>
  );
}

export function ConfigurationGroup({
  integrationId,
  group,
  control,
  isReadOnly,
  provider,