feat(notification/telegram): control UI visibility by notification-en…

…dpoint-telegram flag
influxdata · Jul 29, 2020 · 04b188a · 04b188a
1 parent eab0ff3
commit 04b188a
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git a/ui/src/notifications/endpoints/components/EndpointCards.tsx b/ui/src/notifications/endpoints/components/EndpointCards.tsx
@@ -8,6 +8,7 @@ import FilterList from 'src/shared/components/FilterList'
 
 // Types
 import {NotificationEndpoint} from 'src/types'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 interface Props {
   endpoints: NotificationEndpoint[]
@@ -51,13 +52,17 @@ const EmptyEndpointList: FC<{searchTerm: string}> = ({searchTerm}) => {
       </EmptyState>
     )
   }
+  const conditionalEndpoints: Array<string> = []
+  if (isFlagEnabled('notification-endpoint-telegram')) {
+    conditionalEndpoints.push('Telegram')
+  }
 
   return (
     <EmptyState size={ComponentSize.Small} className="alert-column--empty">
       <EmptyState.Text>
-        Want to send notifications to Slack,
+        Want to send notifications to Slack, PagerDuty,
         <br />
-        PagerDuty, Telegram or an HTTP server?
+        {conditionalEndpoints.join(', ')}or an HTTP server?
         <br />
         <br />
         Try creating a <b>Notification Endpoint</b>

diff --git a/ui/src/notifications/endpoints/components/EndpointTypeDropdown.tsx b/ui/src/notifications/endpoints/components/EndpointTypeDropdown.tsx
@@ -10,11 +10,13 @@ import {extractBlockedEndpoints} from 'src/cloud/utils/limits'
 
 // Types
 import {NotificationEndpointType, AppState} from 'src/types'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 interface EndpointType {
   id: NotificationEndpointType
   type: NotificationEndpointType
   name: string
+  flag?: string // feature flag that enable/disable endpoint type
 }
 
 interface StateProps {
@@ -32,7 +34,12 @@ const types: EndpointType[] = [
   {name: 'HTTP', type: 'http', id: 'http'},
   {name: 'Slack', type: 'slack', id: 'slack'},
   {name: 'Pagerduty', type: 'pagerduty', id: 'pagerduty'},
-  {name: 'Telegram', type: 'telegram', id: 'telegram'},
+  {
+    name: 'Telegram',
+    type: 'telegram',
+    id: 'telegram',
+    flag: 'notification-endpoint-telegram',
+  },
 ]
 
 const EndpointTypeDropdown: FC<Props> = ({
@@ -41,7 +48,10 @@ const EndpointTypeDropdown: FC<Props> = ({
   blockedEndpoints,
 }) => {
   const items = types
-    .filter(({type}) => !blockedEndpoints.includes(type))
+    .filter(
+      ({type, flag}) =>
+        !blockedEndpoints.includes(type) && (!flag || isFlagEnabled(flag))
+    )
     .map(({id, type, name}) => (
       <Dropdown.Item
         key={id}

diff --git a/ui/src/notifications/endpoints/components/EndpointsColumn.tsx b/ui/src/notifications/endpoints/components/EndpointsColumn.tsx
@@ -11,6 +11,7 @@ import {AppState, NotificationEndpoint, ResourceType} from 'src/types'
 
 // Utils
 import {getAll} from 'src/resources/selectors'
+import { isFlagEnabled } from 'src/shared/utils/featureFlag'
 
 interface StateProps {
   endpoints: NotificationEndpoint[]
@@ -24,13 +25,18 @@ const EndpointsColumn: FC<Props> = ({history, match, endpoints}) => {
     history.push(newRuleRoute)
   }
 
+  const conditionalEndpoints: Array<string> = []
+  if (isFlagEnabled('notification-endpoint-telegram')) {
+    conditionalEndpoints.push('Telegram')
+  }
+
   const tooltipContents = (
     <>
       A <strong>Notification Endpoint</strong> stores the information to connect
       <br />
       to a third party service that can receive notifications
       <br />
-      like Slack, PagerDuty, Telegram, or an HTTP server
+      like Slack, PagerDuty, {conditionalEndpoints.join(', ')}or an HTTP server
       <br />
       <br />
       <a

diff --git a/ui/src/shared/selectors/flags.ts b/ui/src/shared/selectors/flags.ts
@@ -16,6 +16,7 @@ export const OSS_FLAGS = {
   'notebook-panel--spotify': false,
   'notebook-panel--test-flux': false,
   disableDefaultTableSort: false,
+  'notification-endpoint-telegram': false,
 }
 
 export const CLOUD_FLAGS = {
@@ -33,6 +34,7 @@ export const CLOUD_FLAGS = {
   'notebook-panel--spotify': false,
   'notebook-panel--test-flux': false,
   disableDefaultTableSort: false,
+  'notification-endpoint-telegram': false,
 }
 
 export const activeFlags = (state: AppState): FlagMap => {