fix: webhooks help links (#907)

* fix: webhooks help links * fix: update links --------- Co-authored-by: mortadarefd <m.mortada@refdapp.com>
kubeshop · Oct 30, 2023 · b5c469b · b5c469b
1 parent 8233b07
commit b5c469b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git a/packages/web/src/components/pages/Webhooks/WebhookDetails/ActionTab/CustomPayload.tsx b/packages/web/src/components/pages/Webhooks/WebhookDetails/ActionTab/CustomPayload.tsx
@@ -2,7 +2,7 @@ import React, {FC, Suspense} from 'react';
 
 import {Form} from 'antd';
 
-import {MonacoEditor} from '@atoms';
+import {ExternalLink, MonacoEditor} from '@atoms';
 
 import {notificationCall} from '@molecules';
 import DefinitionSkeleton from '@molecules/Definition/DefinitionSkeleton';
@@ -13,6 +13,8 @@ import {Permissions, usePermission} from '@permissions/base';
 
 import {useUpdateWebhookMutation} from '@services/webhooks';
 
+import {externalLinks} from '@src/utils/externalLinks';
+
 import {useWebhooksPick} from '@store/webhooks';
 
 import {displayDefaultNotificationFlow} from '@utils/notification';
@@ -44,6 +46,14 @@ const CustomPayload: FC = () => {
       initialValues={{payloadTemplate: current!.payloadTemplate || ''}}
       disabled={!mayEdit}
       onConfirm={onFinish}
+      footer={
+        <>
+          Learn more about{' '}
+          <ExternalLink href={`${externalLinks.notificationsAndWebhooks}/#webhook-payload`} target="_blank">
+            webhooks custom payload.
+          </ExternalLink>
+        </>
+      }
     >
       <Suspense fallback={<DefinitionSkeleton />}>
         <Form.Item name="payloadTemplate">

diff --git a/packages/web/src/components/pages/Webhooks/WebhookDetails/ActionTab/Headers.tsx b/packages/web/src/components/pages/Webhooks/WebhookDetails/ActionTab/Headers.tsx
@@ -3,6 +3,8 @@ import {FC} from 'react';
 import {DeleteOutlined} from '@ant-design/icons';
 import {Form, Input} from 'antd';
 
+import ExternalLink from '@atoms/ExternalLink';
+
 import {Button, FormIconWrapper, FormItem, FormRow, FullWidthSpace} from '@custom-antd';
 
 import {notificationCall} from '@molecules';
@@ -13,6 +15,8 @@ import {Permissions, usePermission} from '@permissions/base';
 
 import {useUpdateWebhookMutation} from '@services/webhooks';
 
+import {externalLinks} from '@src/utils/externalLinks';
+
 import {useWebhooksPick} from '@store/webhooks';
 
 import {requiredNoText} from '@utils/form';
@@ -48,6 +52,14 @@ const Headers: FC = () => {
       initialValues={{headers: decomposeHeaders(current!.headers ?? {})}}
       disabled={!mayEdit}
       onConfirm={onFinish}
+      footer={
+        <>
+          Learn more about{' '}
+          <ExternalLink href={`${externalLinks.notificationsAndWebhooks}/#uri-and-http-headers`} target="_blank">
+            Webhook http headers.
+          </ExternalLink>
+        </>
+      }
     >
       <Form.List name="headers">
         {(fields, {add, remove}) => (

diff --git a/packages/web/src/components/pages/Webhooks/WebhookDetails/ConditionTab/Condition.tsx b/packages/web/src/components/pages/Webhooks/WebhookDetails/ConditionTab/Condition.tsx
@@ -2,7 +2,7 @@ import {FC, useMemo} from 'react';
 
 import {Form} from 'antd';
 
-import {CreatableMultiSelect} from '@atoms';
+import {CreatableMultiSelect, ExternalLink} from '@atoms';
 
 import {FormItem} from '@custom-antd';
 
@@ -16,6 +16,8 @@ import {Permissions, usePermission} from '@permissions/base';
 
 import {useUpdateWebhookMutation} from '@services/webhooks';
 
+import {externalLinks} from '@src/utils/externalLinks';
+
 import {useWebhooksPick} from '@store/webhooks';
 
 import {requiredNoText} from '@utils/form';
@@ -68,6 +70,14 @@ const Condition: FC = () => {
       initialValues={{events: initialEvents, labels: initialLabels}}
       disabled={!mayEdit}
       onConfirm={onFinish}
+      footer={
+        <>
+          Learn more about{' '}
+          <ExternalLink href={`${externalLinks.notificationsAndWebhooks}/#resource-selector-labels`} target="_blank">
+            Webhook condition.
+          </ExternalLink>
+        </>
+      }
     >
       <FormItem
         name="labels"