From 1d7bc35974205e82cc58a5db647ba5398bfb381c Mon Sep 17 00:00:00 2001
From: Shorpo R <github@shorpo.com>
Date: Mon, 4 Dec 2023 20:18:59 -0700
Subject: [PATCH] feat: Enable metric alerts on dev

---
 packages/app/src/Alert.tsx         | 42 +++++++++++++++---------------
 packages/app/src/EditChartForm.tsx |  6 ++++-
 packages/app/src/TeamPage.tsx      |  2 ++
 packages/app/src/config.ts         |  3 +++
 4 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/packages/app/src/Alert.tsx b/packages/app/src/Alert.tsx
index 0224739ba..7ec91067e 100644
--- a/packages/app/src/Alert.tsx
+++ b/packages/app/src/Alert.tsx
@@ -55,28 +55,28 @@ export const SlackChannelForm = ({
 
   return (
     <>
-      {hasSlackWebhooks && (
-        <div className="mt-3">
-          <Form.Label className="text-muted">Slack Webhook</Form.Label>
-          <Form.Select
-            className="bg-black border-0 mb-1 px-3"
-            required
-            id="webhookId"
-            size="sm"
-            {...webhookSelectProps}
-          >
-            {/* Ensure user selects a slack webhook before submitting form */}
-            <option value="" disabled>
-              Select a Slack Webhook
+      <div className="mt-3">
+        <Form.Label className="text-muted">Slack Webhook</Form.Label>
+        <Form.Select
+          className="bg-black border-0 mb-1 px-3"
+          required
+          id="webhookId"
+          size="sm"
+          {...webhookSelectProps}
+        >
+          {/* Ensure user selects a slack webhook before submitting form */}
+          <option value="" disabled selected>
+            {hasSlackWebhooks
+              ? 'Select a Slack Webhook'
+              : 'No Slack Webhooks available'}
+          </option>
+          {slackWebhooks?.data.map((sw: any) => (
+            <option key={sw._id} value={sw._id}>
+              {sw.name}
             </option>
-            {slackWebhooks.data.map((sw: any) => (
-              <option key={sw._id} value={sw._id}>
-                {sw.name}
-              </option>
-            ))}
-          </Form.Select>
-        </div>
-      )}
+          ))}
+        </Form.Select>
+      </div>
 
       <div className="mb-2">
         <a
diff --git a/packages/app/src/EditChartForm.tsx b/packages/app/src/EditChartForm.tsx
index 97b7067fe..53055bc92 100644
--- a/packages/app/src/EditChartForm.tsx
+++ b/packages/app/src/EditChartForm.tsx
@@ -21,6 +21,7 @@ import EditChartFormAlerts from './EditChartFormAlerts';
 import HDXNumberChart from './HDXNumberChart';
 import HDXTableChart from './HDXTableChart';
 import { intervalToGranularity } from './Alert';
+import { METRIC_ALERTS_ENABLED } from './config';
 
 export type Chart = {
   id: string;
@@ -867,6 +868,9 @@ export const EditLineChartForm = ({
     return null;
   }
 
+  const isChartAlertsFeatureEnabled =
+    editedChart.series[0].table === 'logs' || METRIC_ALERTS_ENABLED;
+
   return (
     <form
       onSubmit={e => {
@@ -970,7 +974,7 @@ export const EditLineChartForm = ({
         }}
       />
 
-      {editedChart.series[0].table === 'logs' && (
+      {isChartAlertsFeatureEnabled && (
         <div className="mt-4 border-top border-bottom border-grey p-2 py-3">
           {isLocalDashboard ? (
             <span className="text-gray-600 fs-8">
diff --git a/packages/app/src/TeamPage.tsx b/packages/app/src/TeamPage.tsx
index 10a4af1bb..5da3363f7 100644
--- a/packages/app/src/TeamPage.tsx
+++ b/packages/app/src/TeamPage.tsx
@@ -341,6 +341,7 @@ export default function TeamPage() {
                         name="name"
                         placeholder="My Slack Webhook"
                         className="border-0 mb-4 px-3"
+                        required
                       />
                       <Form.Label className="text-start text-muted fs-7 mb-2 mt-2">
                         Webhook URL
@@ -351,6 +352,7 @@ export default function TeamPage() {
                         name="url"
                         placeholder="https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX"
                         className="border-0 mb-4 px-3"
+                        required
                       />
                       <Button
                         variant="brand-primary"
diff --git a/packages/app/src/config.ts b/packages/app/src/config.ts
index ac51fafb2..b718a6e1e 100644
--- a/packages/app/src/config.ts
+++ b/packages/app/src/config.ts
@@ -9,3 +9,6 @@ export const HDX_COLLECTOR_URL =
   'http://localhost:4318';
 
 export const IS_OSS = process.env.NEXT_PUBLIC_IS_OSS ?? 'true' === 'true';
+
+// Features in development
+export const METRIC_ALERTS_ENABLED = process.env.NODE_ENV === 'development';