feat: Move webhooks configuration from environment variable to UI

2025-07-04 22:04:11 +02:00
parent f0680831c2
commit b22dba0d11
128 changed files with 2077 additions and 206 deletions
@@ -0,0 +1,96 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Accordion, Button, Form, Segment } from 'semantic-ui-react';
+import { useDidUpdate, useToggle } from '../../../lib/hooks';
+
+import { useForm } from '../../../hooks';
+import { isUrl } from '../../../utils/validator';
+import Item from './Item';
+import Editor from './Editor';
+
+const DEFAULT_DATA = {
+  name: '',
+  url: '',
+  accessToken: '',
+  events: [],
+  excludedEvents: [],
+};
+
+const Webhooks = React.memo(({ ids, onCreate }) => {
+  const [t] = useTranslation();
+
+  const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
+  const [focusNameFieldState, focusNameField] = useToggle();
+
+  const editorRef = useRef(null);
+
+  const handleCreateSubmit = useCallback(() => {
+    const cleanData = {
+      ...data,
+      name: data.name.trim(),
+      url: data.url.trim(),
+      accessToken: data.accessToken.trim() || null,
+      events: data.events.length === 0 ? null : data.events,
+      excludedEvents: data.excludedEvents.length === 0 ? null : data.excludedEvents,
+    };
+
+    if (!cleanData.name) {
+      editorRef.current.selectNameField();
+      return;
+    }
+
+    if (!cleanData.url || !isUrl(cleanData.url)) {
+      editorRef.current.selectUrlField();
+      return;
+    }
+
+    onCreate(cleanData);
+    setData(DEFAULT_DATA);
+    focusNameField();
+  }, [onCreate, data, setData, focusNameField]);
+
+  useEffect(() => {
+    if (editorRef.current) {
+      editorRef.current.focusNameField();
+    }
+  }, []);
+
+  useDidUpdate(() => {
+    if (editorRef.current) {
+      editorRef.current.focusNameField();
+    }
+  }, [focusNameFieldState]);
+
+  return (
+    <>
+      {ids.length > 0 && (
+        <Accordion styled fluid>
+          {ids.map((id) => (
+            <Item key={id} id={id} />
+          ))}
+        </Accordion>
+      )}
+      {ids.length < 10 && (
+        <Segment>
+          <Form onSubmit={handleCreateSubmit}>
+            <Editor ref={editorRef} data={data} onFieldChange={handleFieldChange} />
+            <Button positive>{t('action.addWebhook')}</Button>
+          </Form>
+        </Segment>
+      )}
+    </>
+  );
+});
+
+Webhooks.propTypes = {
+  ids: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  onCreate: PropTypes.func.isRequired,
+};
+
+export default Webhooks;