feat(webhooks): limit a number of responder requests according to the…

… user subscription

src/hooks/index.ts

@@ -1,3 +1,4 @@
 export { useLocalStorage } from './use_local_storage';
 export { usePageMeta } from './use_page_meta';
 export { useAppContext } from './use_app_context';
+export { useRangeTicks } from './use_range_ticks';

src/hooks/use_range_ticks.ts

@@ -0,0 +1,7 @@
+import { useIsWithinMaxBreakpoint } from '@elastic/eui';
+
+export function useRangeTicks() {
+  const isWithinMaxBreakpoint = useIsWithinMaxBreakpoint('xs');
+  // Determines the maximum value for the range to show ticks.
+  return isWithinMaxBreakpoint ? 10 : 15;
+}

src/model/ui_state.ts

@@ -23,7 +23,13 @@ export interface SubscriptionState {
   /**
    * The subscription-dependent features available to the user.
    */
-  features?: { admin?: boolean };
+  features?: {
+    admin?: boolean;
+    certificates: { privateKeyAlgorithms?: string[] };
+    webhooks: { responderRequests: number };
+    webScraping: { trackerRevisions: number; trackerSchedules?: string[] };
+    webSecurity: { importPolicyFromUrl: boolean };
+  };
   /**
    * The URL to the subscription management page.
    */

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

@@ -10,13 +10,15 @@ import {
   EuiForm,
   EuiFormRow,
   EuiLink,
+  EuiRange,
   EuiSelect,
   EuiSwitch,
   EuiTextArea,
 } from '@elastic/eui';
 import axios from 'axios';
 
 import type { Responder } from './responder';
+import { useRangeTicks } from '../../../../hooks';
 import type { AsyncData } from '../../../../model';
 import { getApiRequestConfig, getApiUrl, getErrorMessage, isClientError } from '../../../../model';
 import { EditorFlyout } from '../../components/editor_flyout';
@@ -35,7 +37,8 @@ const isHeaderValid = (header: string) => {
 };
 
 export function ResponderEditFlyout({ onClose, responder }: ResponderEditFlyoutProps) {
-  const { addToast } = useWorkspaceContext();
+  const { addToast, uiState } = useWorkspaceContext();
+  const maxTicks = useRangeTicks();
 
   const httpMethods = useMemo(() => HTTP_METHODS.map((method) => ({ value: method, text: method })), []);
 
@@ -51,9 +54,6 @@ export function ResponderEditFlyout({ onClose, responder }: ResponderEditFlyoutP
   const isPathValid = path.startsWith('/') && (path.length === 1 || !path.endsWith('/'));
 
   const [requestsToTrack, setRequestsToTrack] = useState<number>(responder?.settings.requestsToTrack ?? 0);
-  const onRequestsToTrackChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    setRequestsToTrack(+e.target.value);
-  }, []);
 
   const [statusCode, setStatusCode] = useState<number>(responder?.settings.statusCode ?? 200);
   const onStatusCodeChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
@@ -180,6 +180,8 @@ export function ResponderEditFlyout({ onClose, responder }: ResponderEditFlyoutP
     );
   }, [name, method, path, isEnabled, requestsToTrack, statusCode, body, headers, script, responder, updatingStatus]);
 
+  const maxResponderRequests = uiState.subscription?.features?.webhooks.responderRequests ?? 0;
+  const tickInterval = Math.ceil(maxResponderRequests / maxTicks);
   return (
     <EditorFlyout
       title={`${responder ? 'Edit' : 'Add'} responder`}
@@ -196,13 +198,16 @@ export function ResponderEditFlyout({ onClose, responder }: ResponderEditFlyoutP
             <EuiFieldText value={name} required type={'text'} onChange={onNameChange} />
           </EuiFormRow>
           <EuiFormRow label="Tracking" helpText="Responder will track only specified number of incoming requests">
-            <EuiFieldNumber
-              fullWidth
+            <EuiRange
               min={0}
-              max={100}
-              step={1}
+              max={maxResponderRequests}
               value={requestsToTrack}
-              onChange={onRequestsToTrackChange}
+              fullWidth
+              onChange={(e) => setRequestsToTrack(+e.currentTarget.value)}
+              showRange
+              showTicks
+              tickInterval={tickInterval > 1 ? Math.ceil(tickInterval / 5) * 5 : tickInterval}
+              showValue={maxResponderRequests > maxTicks}
             />
           </EuiFormRow>
           <EuiFormRow