[Feature] Add targeted documentation links to responders, certificate template, and content security policies pages.

Author: azasypkin

src/pages/workspace/utils/certificates/certificates_self_signed_certificates.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import type { Criteria, Pagination, PropertySort } from '@elastic/eui';
 import {
   EuiButton,
+  EuiButtonEmpty,
   EuiCallOut,
   EuiConfirmModal,
   EuiEmptyPrompt,
@@ -77,6 +78,17 @@ export default function CertificatesSelfSignedCertificates() {
     </EuiButton>
   );
 
+  const docsButton = (
+    <EuiButtonEmpty
+      iconType={'documentation'}
+      title="Learn how to create and use certificate templates"
+      target={'_blank'}
+      href={'/docs/guides/digital_certificates'}
+    >
+      Learn how to
+    </EuiButtonEmpty>
+  );
+
   useEffect(() => {
     if (!uiState.synced || !uiState.user) {
       return;
@@ -197,6 +209,8 @@ export default function CertificatesSelfSignedCertificates() {
               <div>
                 <p>Go ahead and create your first self-signed certificate template.</p>
                 {createButton}
+                <EuiSpacer size={'s'} />
+                {docsButton}
               </div>
             }
           />

src/pages/workspace/utils/web_security/csp/web_security_csp_policies.tsx

@@ -3,12 +3,14 @@ import { useCallback, useEffect, useState } from 'react';
 import type { Criteria, Pagination, PropertySort } from '@elastic/eui';
 import {
   EuiButton,
+  EuiButtonEmpty,
   EuiConfirmModal,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
   EuiInMemoryTable,
+  EuiSpacer,
   EuiText,
   EuiToolTip,
 } from '@elastic/eui';
@@ -97,6 +99,17 @@ export default function WebSecurityContentSecurityPolicies() {
     </EuiButton>
   );
 
+  const docsButton = (
+    <EuiButtonEmpty
+      iconType={'documentation'}
+      title="Learn how to create and use content security policies"
+      target={'_blank'}
+      href={'/docs/guides/web_security/csp'}
+    >
+      Learn how to
+    </EuiButtonEmpty>
+  );
+
   useEffect(() => {
     if (!uiState.synced || !uiState.user) {
       return;
@@ -165,6 +178,8 @@ export default function WebSecurityContentSecurityPolicies() {
               <div>
                 <p>Go ahead and create your first policy.</p>
                 {createButton}
+                <EuiSpacer size={'s'} />
+                {docsButton}
               </div>
             }
           />

src/pages/workspace/utils/webhooks/webhooks_responders.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from 'react';
 import type { Criteria, Pagination, PropertySort } from '@elastic/eui';
 import {
   EuiButton,
+  EuiButtonEmpty,
   EuiButtonIcon,
   EuiConfirmModal,
   EuiEmptyPrompt,
@@ -13,6 +14,7 @@ import {
   EuiInMemoryTable,
   EuiLink,
   EuiScreenReaderOnly,
+  EuiSpacer,
   EuiText,
   EuiToolTip,
 } from '@elastic/eui';
@@ -60,6 +62,17 @@ export default function WebhooksResponders() {
     </EuiButton>
   );
 
+  const docsButton = (
+    <EuiButtonEmpty
+      iconType={'documentation'}
+      title="Learn how to create and use responders"
+      target={'_blank'}
+      href={'/docs/guides/webhooks'}
+    >
+      Learn how to
+    </EuiButtonEmpty>
+  );
+
   useEffect(() => {
     if (!uiState.synced || !uiState.user) {
       return;
@@ -166,6 +179,8 @@ export default function WebhooksResponders() {
               <div>
                 <p>Go ahead and create your first HTTP responder.</p>
                 {createButton}
+                <EuiSpacer size={'s'} />
+                {docsButton}
               </div>
             }
           />