{typeof info === 'string'
diff --git a/react/src/dashboard/components/elements/forms/elements/FormPane.tsx b/react/src/dashboard/components/elements/forms/elements/FormPane.tsx
index a151da421..62258bbce 100644
--- a/react/src/dashboard/components/elements/forms/elements/FormPane.tsx
+++ b/react/src/dashboard/components/elements/forms/elements/FormPane.tsx
@@ -2,16 +2,18 @@ import React, { ReactNode } from 'react';
import classNames from 'classnames';
export default function FormPane({
+ dusk = null,
title,
large = false,
children,
}: {
+ dusk?: string;
title: string;
large?: boolean;
children: ReactNode | ReactNode[];
}) {
return (
-
+
diff --git a/react/src/dashboard/components/elements/forms/markdown-editor/MarkdownEditor.tsx b/react/src/dashboard/components/elements/forms/markdown-editor/MarkdownEditor.tsx
index 58350b199..1d770f1ef 100644
--- a/react/src/dashboard/components/elements/forms/markdown-editor/MarkdownEditor.tsx
+++ b/react/src/dashboard/components/elements/forms/markdown-editor/MarkdownEditor.tsx
@@ -239,8 +239,9 @@ export default function MarkdownEditor({
showLinkDialog(type, { url, text }).then(
(data) => {
+ const url = fixUrl(data.url);
context.invoke('editor.restoreRange');
- context.invoke('editor.createLink', { ...linkInfo, ...data });
+ context.invoke('editor.createLink', { ...linkInfo, ...data, url });
},
() => context.invoke('editor.restoreRange'),
);
@@ -282,6 +283,24 @@ export default function MarkdownEditor({
},
});
+ const fixUrl = function (url: string) {
+ // temp solution while it will be fixed in summernote as known issue
+ // https://github.com/summernote/summernote/issues/4746
+ const MAILTO_PATTERN = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+ const TEL_PATTERN = /^(\+?\d{1,3}[\s-]?)?(\d{1,4})[\s-]?(\d{1,4})[\s-]?(\d{1,4})$/;
+
+ // Remove accidental "://"
+ url = url.replace(/^mailto:\/*/i, 'mailto:').replace(/^tel:\/*/i, 'tel:');
+
+ if (MAILTO_PATTERN.test(url)) {
+ return 'mailto:' + url;
+ } else if (TEL_PATTERN.test(url)) {
+ return 'tel:' + url;
+ }
+
+ return url;
+ };
+
return button.render(); // return button as jquery object
};
},
diff --git a/react/src/dashboard/components/elements/key-value/KeyValueList.tsx b/react/src/dashboard/components/elements/key-value/KeyValueList.tsx
new file mode 100644
index 000000000..9cfcb7288
--- /dev/null
+++ b/react/src/dashboard/components/elements/key-value/KeyValueList.tsx
@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+import classNames from 'classnames';
+
+export default function KeyValueList({
+ size = 'md',
+ children,
+}: {
+ size?: 'md' | 'lg';
+ children: ReactNode | Array
;
+}) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/react/src/dashboard/components/elements/tables/elements/CardHeaderFilter.tsx b/react/src/dashboard/components/elements/tables/elements/CardHeaderFilter.tsx
index bdf5bcddc..5816aa67c 100644
--- a/react/src/dashboard/components/elements/tables/elements/CardHeaderFilter.tsx
+++ b/react/src/dashboard/components/elements/tables/elements/CardHeaderFilter.tsx
@@ -8,7 +8,7 @@ export default function CardHeaderFilter({
children,
}: {
filter: FilterScope;
- children: React.ReactElement | Array;
+ children: React.ReactNode | Array;
}) {
return (
diff --git a/react/src/dashboard/components/elements/tables/elements/CardHeaderFilterNext.tsx b/react/src/dashboard/components/elements/tables/elements/CardHeaderFilterNext.tsx
new file mode 100644
index 000000000..36d3f8d59
--- /dev/null
+++ b/react/src/dashboard/components/elements/tables/elements/CardHeaderFilterNext.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import FilterScope from '../../../../types/FilterScope';
+import FilterModel from '../../../../types/FilterModel';
+import CardHeaderFilter from './CardHeaderFilter';
+
+export default function CardHeaderFilterNext({
+ filter,
+ children,
+ searchDusk,
+}: {
+ filter: FilterScope
;
+ children: React.ReactNode | Array;
+ searchDusk?: string;
+}) {
+ return (
+
+ {filter.show && (
+
+ )}
+
+ {!filter.show && (
+
+
+ filter.update({ q: e.target.value })}
+ placeholder={'Zoeken'}
+ />
+
+
+ )}
+
+
{children}
+
+ className={classNames(
+ 'modal',
+ 'modal-animated',
+ state !== 'form' && 'modal-md',
+ modal.loading && 'modal-loading',
+ className,
+ )}>
+ {state === 'type' && (
+
+ )}
+
+ {state === 'form' && (
+