feat(changedetection): add delete watch action

packages/backend/src/apps/changedetection/actions/create-watch/index.js

@@ -0,0 +1,29 @@
+import defineAction from '../../../../helpers/define-action.js';
+
+export default defineAction({
+  name: 'Create a watch',
+  key: 'createWatch',
+  description: 'Creates a new change detection watch for a specific website.',
+  arguments: [
+    {
+      label: 'URL',
+      key: 'url',
+      type: 'string',
+      required: true,
+      variables: true,
+      description: 'Url you want to monitor',
+    },
+  ],
+
+  async run($) {
+    const url = $.step.parameters.url;
+
+    const body = {
+      url,
+    };
+
+    const response = await $.http.post('/v1/watch', body);
+
+    $.setActionItem({ raw: response.data });
+  },
+});

packages/backend/src/apps/changedetection/actions/delete-watch/index.js

@@ -0,0 +1,29 @@
+import defineAction from '../../../../helpers/define-action.js';
+
+export default defineAction({
+  name: 'Delete a watch',
+  key: 'deleteWatch',
+  description: 'Deletes a change detection watch.',
+  arguments: [
+    {
+      label: 'Watch ID',
+      key: 'watchId',
+      type: 'string',
+      required: true,
+      variables: true,
+      description: 'Watch id you want to delete',
+    },
+  ],
+
+  async run($) {
+    const watchId = $.step.parameters.watchId;
+
+    await $.http.delete(`/v1/watch/${watchId}`);
+
+    $.setActionItem({
+      raw: {
+        result: 'successful',
+      },
+    });
+  },
+});

packages/backend/src/apps/changedetection/actions/index.js

@@ -0,0 +1,4 @@
+import createWatch from './create-watch/index.js';
+import deleteWatch from './delete-watch/index.js';
+
+export default [createWatch, deleteWatch];

packages/backend/src/apps/changedetection/auth/index.js

@@ -0,0 +1,44 @@
+import verifyCredentials from './verify-credentials.js';
+import isStillVerified from './is-still-verified.js';
+
+export default {
+  fields: [
+    {
+      key: 'screenName',
+      label: 'Screen Name',
+      type: 'string',
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description:
+        'Screen name of your connection to be used on Automatisch UI.',
+      clickToCopy: false,
+    },
+    {
+      key: 'instanceUrl',
+      label: 'Instance URL',
+      type: 'string',
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: null,
+      clickToCopy: false,
+    },
+    {
+      key: 'apiKey',
+      label: 'API Key',
+      type: 'string',
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: 'Changedetection API key of your account.',
+      clickToCopy: false,
+    },
+  ],
+
+  verifyCredentials,
+  isStillVerified,
+};

packages/backend/src/apps/changedetection/auth/is-still-verified.js

@@ -0,0 +1,8 @@
+import verifyCredentials from './verify-credentials.js';
+
+const isStillVerified = async ($) => {
+  await verifyCredentials($);
+  return true;
+};
+
+export default isStillVerified;

packages/backend/src/apps/changedetection/auth/verify-credentials.js

@@ -0,0 +1,10 @@
+const verifyCredentials = async ($) => {
+  await $.http.get('/v1/systeminfo');
+
+  await $.auth.set({
+    screenName: $.auth.data.screenName,
+    apiKey: $.auth.data.apiKey,
+  });
+};
+
+export default verifyCredentials;

packages/backend/src/apps/changedetection/common/add-auth-header.js

@@ -0,0 +1,9 @@
+const addAuthHeader = ($, requestConfig) => {
+  if ($.auth.data?.apiKey) {
+    requestConfig.headers['x-api-key'] = $.auth.data.apiKey;
+  }
+
+  return requestConfig;
+};
+
+export default addAuthHeader;

packages/backend/src/apps/changedetection/common/set-base-url.js

@@ -0,0 +1,10 @@
+const setBaseUrl = ($, requestConfig) => {
+  const instanceUrl = $.auth.data.instanceUrl;
+  if (instanceUrl) {
+    requestConfig.baseURL = `${instanceUrl}/api`;
+  }
+
+  return requestConfig;
+};
+
+export default setBaseUrl;

packages/backend/src/apps/changedetection/index.js

@@ -0,0 +1,19 @@
+import defineApp from '../../helpers/define-app.js';
+import addAuthHeader from './common/add-auth-header.js';
+import auth from './auth/index.js';
+import setBaseUrl from './common/set-base-url.js';
+import actions from './actions/index.js';
+
+export default defineApp({
+  name: 'Changedetection',
+  key: 'changedetection',
+  iconUrl: '{BASE_URL}/apps/changedetection/assets/favicon.svg',
+  authDocUrl: '{DOCS_URL}/apps/changedetection/connection',
+  supportsConnections: true,
+  baseUrl: 'https://changedetection.io',
+  apiBaseUrl: '',
+  primaryColor: '3056d3',
+  beforeRequest: [setBaseUrl, addAuthHeader],
+  auth,
+  actions,
+});

packages/docs/pages/.vitepress/config.js

@@ -41,6 +41,14 @@ export default defineConfig({
             { text: 'Connection', link: '/apps/carbone/connection' },
           ],
         },
+        {
+          text: 'Changedetection',
+          collapsible: true,
+          collapsed: true,
+          items: [
+            { text: 'Connection', link: '/apps/changedetection/connection' },
+          ],
+        },
         {
           text: 'Datastore',
           collapsible: true,

packages/docs/pages/apps/changedetection/actions.md

@@ -0,0 +1,14 @@
+---
+favicon: /favicons/changedetection.svg
+items:
+  - name: Create a watch
+    desc: Creates a new change detection watch for a specific website.
+  - name: Delete a watch
+    desc: Deletes a change detection watch.
+---
+
+<script setup>
+  import CustomListing from '../../components/CustomListing.vue'
+</script>
+
+<CustomListing />

packages/docs/pages/apps/changedetection/connection.md

@@ -0,0 +1,14 @@
+# Changedetection
+
+:::info
+This page explains the steps you need to follow to set up the Changedetection
+connection in Automatisch. If any of the steps are outdated, please let us know!
+:::
+
+1. Go to your Changedetection admin panel.
+2. Click on the **Settings** button.
+3. Click on the **API** tab.
+4. Copy **API key** from the page to the `API Key` field on Automatisch.
+5. Add your Instance URL in the **Instance URL** field on Automatisch.
+6. Write any screen name to be displayed in Automatisch.
+7. Now, you can start using the Changedetection connection with Automatisch.

packages/docs/pages/guide/available-apps.md

@@ -3,6 +3,7 @@
 The following integrations are currently supported by Automatisch.
 
 - [Carbone](/apps/carbone/actions)
+- [Changedetection](/apps/changedetection/actions)
 - [Datastore](/apps/datastore/actions)
 - [DeepL](/apps/deepl/actions)
 - [Delay](/apps/delay/actions)