[CAL-3834] Unable to delete a broken CalDAV integration

[LucaDiba]

Issue Summary

A while ago I added a CalDAV to Cal.com. Then, I deleted the CalDAV server, so all the requests made to that URL fail. Unfortunately, Cal.com doesn't handle this error and this leads to a 504 timeout error to be thrown when /calendars calls connectedCalendars,integrations. Also, even after the error is thrown, the /calendars page still shows a loading interface even though the call to the API returned an error.

I'm currently unable to even delete the CalDAV since the calendars page doesn't work at all, and Cloudflare blocks the API calls to DELETE /v1/selected-calendars/... due to the externalId being an URL.

Steps to Reproduce

1. Create a CalDAV calendar
2. Add it to Cal.com
3. Stop the CalDAV server
4. Try to load the calendars page in Cal.com

Actual Results

• The calendars page shows an infinite loading interface.

Expected Results

• The calendars page shows the CalDAV even if the server doesn't respond, so that I'm able to delete the broken integration.

Technical details

• Using Cal.com.

Evidence

_CAL-3834

[dosubot[bot]]

Ciao @LucaDiba! Sono Dosu, un bot qui per aiutarti a risolvere bug, rispondere alle tue domande e diventare un contributore mentre aspettiamo un manutentore umano. Sono qui per aiutarti con il tuo problema!

To resolve the issue of deleting a broken CalDAV integration in Cal.com when the calendars page shows an infinite loading interface and Cloudflare blocks the API calls, you can use the provided API endpoint directly. Here is a step-by-step guide on how to do it:

Steps to Delete the Broken CalDAV Integration

1. Identify the externalId: Ensure you have the externalId of the CalDAV integration. This is typically the URL of the CalDAV server.

2. URL Encode the externalId: Since Cloudflare blocks the API calls due to the externalId being a URL, you need to URL encode the externalId to safely include it in the API request.

   const externalId = "your-external-id";
   const safeExternalId = encodeURIComponent(externalId);

3. Construct the API URL: Use the endpoint /v1/selected-calendars/{userId}_{integration}_{externalId} with the appropriate values for userId, integration, and the URL-encoded externalId.

4. Make a DELETE Request: Use a tool like curl or Postman to make a DELETE request to the constructed URL. Ensure you include your API key in the query parameters.

Here is an example using curl:

curl -X DELETE "https://your-calcom-instance.com/v1/selected-calendars/{userId}_{integration}_{safeExternalId}?apiKey=your_api_key"

Replace {userId}, {integration}, {safeExternalId}, and your_api_key with the actual values.

Example Code Snippet

Here is an example of how you can construct and execute the DELETE request programmatically:

const axios = require('axios');

const userId = 'your_user_id';
const integration = 'caldav';
const externalId = 'your-external-id';
const safeExternalId = encodeURIComponent(externalId);
const apiKey = 'your_api_key';

const url = `https://your-calcom-instance.com/v1/selected-calendars/${userId}_${integration}_${safeExternalId}?apiKey=${apiKey}`;

axios.delete(url)
  .then(response => {
    console.log('Integration deleted successfully:', response.data);
  })
  .catch(error => {
    console.error('Error deleting integration:', error.response ? error.response.data : error.message);
  });

By following these steps, you should be able to delete the broken CalDAV integration and resolve the issue with the infinite loading interface on the calendars page.

#### Details

**Sources** - [apps/api/v1/pages/api/selected-calendars/[id]/_delete.ts](https://github.com/calcom/cal.com/blob/main/apps/api/v1/pages/api/selected-calendars/[id]/_delete.ts) - [apps/api/v1/pages/api/destination-calendars/[id]/_delete.ts](https://github.com/calcom/cal.com/blob/main/apps/api/v1/pages/api/destination-calendars/[id]/_delete.ts) - [packages/features/apps/components/DisconnectIntegration.tsx](https://github.com/calcom/cal.com/blob/main/packages/features/apps/components/DisconnectIntegration.tsx) - [packages/lib/rateLimit.ts](https://github.com/calcom/cal.com/blob/main/packages/lib/rateLimit.ts) - [apps/api/v1/lib/helpers/rateLimitApiKey.ts](https://github.com/calcom/cal.com/blob/main/apps/api/v1/lib/helpers/rateLimitApiKey.ts) - [apps/api/v1/lib/validations/destination-calendar.ts](https://github.com/calcom/cal.com/blob/main/apps/api/v1/lib/validations/destination-calendar.ts) - [apps/api/v1/pages/api/destination-calendars/[id]/_patch.ts](https://github.com/calcom/cal.com/blob/main/apps/api/v1/pages/api/destination-calendars/[id]/_patch.ts) - [apps/api/v1/pages/api/selected-calendars/[id]/_get.ts](https://github.com/calcom/cal.com/blob/main/apps/api/v1/pages/api/selected-calendars/[id]/_get.ts) - [packages/features/users/components/CalendarCredentialBanner.tsx](https://github.com/calcom/cal.com/blob/main/packages/features/users/components/CalendarCredentialBanner.tsx) - [apps/api/v2/src/filters/sentry-exception.filter.ts](https://github.com/calcom/cal.com/blob/main/apps/api/v2/src/filters/sentry-exception.filter.ts) - [apps/api/v2/src/middleware/app.logger.middleware.ts](https://github.com/calcom/cal.com/blob/main/apps/api/v2/src/middleware/app.logger.middleware.ts) - [packages/prisma/docker-compose.yml](https://github.com/calcom/cal.com/blob/main/packages/prisma/docker-compose.yml) - [.env.example](https://github.com/calcom/cal.com/blob/main/.env.example) - [apps/api/v1/package.json](https://github.com/calcom/cal.com/blob/main/apps/api/v1/package.json) - [app.json](https://github.com/calcom/cal.com/blob/main/app.json) - [package.json](https://github.com/calcom/cal.com/blob/main/package.json)
**About Dosu** This response is meant to be useful and save you time. It is **not meant to be a precise solution**, but rather a starting point for your own research. Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.