feat: frontend-rename-feature-health-sample-to-webhook ⚠️ (#6330)

Author: Zaimwa9

docs/docs/managing-flags/feature-health-metrics.md

@@ -17,7 +17,7 @@ Feature health enables you to monitor observability metrics within Flagsmith, sp
 
 1. Go to your **Project Settings** in Flagsmith.
 2. Navigate to the **Feature Health** section.
-3. Choose your desired provider from the **Provider Name** drop-down menu (e.g., Grafana/Prometheus Alertmanager or Sample).
+3. Choose your desired provider from the **Provider Name** drop-down menu (e.g., Grafana/Prometheus Alertmanager or Webhook).
 4. Click **Create** and copy the webhook URL.
 
 ---
@@ -28,20 +28,20 @@ Feature health enables you to monitor observability metrics within Flagsmith, sp
 
 [Learn more](/third-party-integrations/observability-and-monitoring/grafana) about configuring Grafana / Prometheus Alertmanager feature health provider.
 
-### Sample Provider
+### Webhook Provider
 
-We provide a Sample Provider for your custom integrations. To create a Sample Feature Health webhook:
+We provide a Webhook Provider for your custom integrations. To create a Webhook Feature Health webhook:
 
 1. Go to Project Settings > Feature Health.
-2. Select "Sample" from the Provider Name drop-down menu.
+2. Select "Webhook" from the Provider Name drop-down menu.
 3. Click Create and copy the webhook URL.
 
 You can use the webhook in your custom integration. Refer to the payload schema below:
 
 ```json
 {
   "$schema": "http://json-schema.org/draft-07/schema#",
-  "title": "SampleEvent",
+  "title": "WebhookEvent",
   "type": "object",
   "properties": {
     "environment": {

frontend/web/components/feature-health/components/FeatureHealthProviderDocumentationNote.tsx

@@ -17,9 +17,9 @@ const FeatureHealthProviderDocumentationNote: React.FC<
       </div>
       <div>
         <span>
-          Sample provider:{' '}
-          <a href='https://docs.flagsmith.com/advanced-use/feature-health#sample-provider'>
-            https://docs.flagsmith.com/advanced-use/feature-health#sample-provider
+          Webhook provider:{' '}
+          <a href='https://docs.flagsmith.com/advanced-use/feature-health#webhook-provider'>
+            https://docs.flagsmith.com/advanced-use/feature-health#webhook-provider
           </a>
         </span>
       </div>

frontend/web/components/feature-health/feature-health.types.ts

@@ -0,0 +1,4 @@
+export enum FeatureHealthProviderName {
+  WEBHOOK = 'Webhook',
+  GRAFANA = 'Grafana',
+}

frontend/web/components/pages/project-settings/ProjectSettingsPage.tsx

@@ -8,7 +8,7 @@ import { useRouteContext } from 'components/providers/RouteContext'
 import Constants from 'common/constants'
 import Utils from 'common/utils/utils'
 import ProjectUsage from 'components/ProjectUsage'
-import EditHealthProvider from 'components/EditHealthProvider'
+import EditHealthProvider from './tabs/EditHealthProvider'
 import FeatureExport from 'components/import-export/FeatureExport'
 import { GeneralTab } from './tabs/general-tab'
 import { SDKSettingsTab } from './tabs/SDKSettingsTab'

frontend/web/components/EditHealthProvider.tsx renamed to frontend/web/components/pages/project-settings/tabs/EditHealthProvider.tsx

@@ -1,9 +1,9 @@
 import React, { FC, useEffect } from 'react'
 import { HealthProvider } from 'common/types/responses'
-import PanelSearch from './PanelSearch'
-import Button from './base/forms/Button'
+import PanelSearch from 'components/PanelSearch'
+import Button from 'components/base/forms/Button'
 
-import Icon from './Icon'
+import Icon from 'components/Icon'
 
 import Utils from 'common/utils/utils'
 import {
@@ -12,8 +12,9 @@ import {
   useGetHealthProvidersQuery,
 } from 'common/services/useHealthProvider'
 import { components } from 'react-select'
-import InteractiveDemo from './InteractiveDemo'
-import FeatureHealthProviderDocumentationNote from './feature-health/components/FeatureHealthProviderDocumentationNote'
+import InteractiveDemo from 'components/InteractiveDemo'
+import FeatureHealthProviderDocumentationNote from 'components/feature-health/components/FeatureHealthProviderDocumentationNote'
+import { FeatureHealthProviderName } from 'components/feature-health/feature-health.types'
 
 type EditHealthProviderType = {
   projectId: number
@@ -34,7 +35,10 @@ const CreateHealthProviderForm = ({ projectId }: { projectId: number }) => {
   const [createProvider, { error, isError, isLoading, isSuccess }] =
     useCreateHealthProviderMutation()
 
-  const providers = [{ name: 'Sample' }, { name: 'Grafana' }]
+  const providers = [
+    { name: FeatureHealthProviderName.WEBHOOK },
+    { name: FeatureHealthProviderName.GRAFANA },
+  ]
 
   const providerOptions = providers.map((provider) => ({
     label: provider.name,

public/webhooks/feature-health-sample-provider.json renamed to public/webhooks/feature-health-webhook-provider.json

@@ -1,6 +1,6 @@
 {
     "$schema": "http://json-schema.org/draft-07/schema#",
-    "title": "SampleEvent",
+    "title": "WebhookEvent",
     "type": "object",
     "properties": {
         "environment": {