fix: hide grpc option in check cards when feature flag off

src/components/ChooseCheckGroup.test.tsx

@@ -29,15 +29,16 @@ async function renderChooseCheckGroup({ checkLimit = 10, scriptedLimit = 10 } =
 
   return res;
 }
-it('shows check type options with scripted feature off', async () => {
+it('shows check type options correctly with feature flags off', async () => {
   await renderChooseCheckGroup();
 
   expect(screen.getByText('API Endpoint')).toBeInTheDocument();
   expect(screen.getByText('Multi Step')).toBeInTheDocument();
   expect(screen.queryByText('Scripted')).not.toBeInTheDocument();
+  expect(screen.queryByText('Browser')).not.toBeInTheDocument();
 });
 
-it('shows check type options with scripted feature on', async () => {
+it('shows the scripted card with correct feature flag on', async () => {
   jest.replaceProperty(config, 'featureToggles', {
     // @ts-expect-error
     [FeatureName.ScriptedChecks]: true,
@@ -47,6 +48,31 @@ it('shows check type options with scripted feature on', async () => {
   expect(screen.getByText('Scripted')).toBeInTheDocument();
 });
 
+it('shows the browser card with correct feature flag on', async () => {
+  jest.replaceProperty(config, 'featureToggles', {
+    // @ts-expect-error
+    [FeatureName.BrowserChecks]: true,
+  });
+
+  await renderChooseCheckGroup();
+  expect(screen.getByText('Browser')).toBeInTheDocument();
+});
+
+it(`doesn't show gRPC option by default`, async () => {
+  await renderChooseCheckGroup();
+  expect(screen.queryByText('gRPC')).not.toBeInTheDocument();
+});
+
+it('shows gRPC option when feature is enabled', async () => {
+  jest.replaceProperty(config, 'featureToggles', {
+    // @ts-expect-error
+    [FeatureName.GRPCChecks]: true,
+  });
+
+  await renderChooseCheckGroup();
+  expect(screen.getByText('gRPC')).toBeInTheDocument();
+});
+
 it('shows error alert when check limit is reached', async () => {
   await renderChooseCheckGroup({ checkLimit: 1 });
   const limitError = await screen.findByText(/You have reached the limit of checks you can create./);

src/hooks/useCheckTypeGroupOptions.tsx

@@ -1,15 +1,17 @@
-import { ReactNode } from 'react';
+import { ReactNode, useContext } from 'react';
 import { IconName } from '@grafana/data';
 
-import { CheckType, CheckTypeGroup, ROUTES } from 'types';
+import { CheckType, CheckTypeGroup, FeatureName, ROUTES } from 'types';
+import { FeatureFlagContext } from 'contexts/FeatureFlagContext';
 import { getRoute } from 'components/Routing.utils';
 
-import { CHECK_TYPE_OPTIONS, useCheckTypeOptions } from './useCheckTypeOptions';
+import { CHECK_TYPE_OPTIONS } from './useCheckTypeOptions';
 
 export type ProtocolOption = {
   label: string;
   tooltip?: ReactNode;
   href?: string;
+  featureToggle?: FeatureName | undefined;
 };
 
 export interface CheckTypeGroupOption {
@@ -29,6 +31,7 @@ export const CHECK_TYPE_GROUP_OPTIONS: CheckTypeGroupOption[] = [
     protocols: CHECK_TYPE_OPTIONS.filter((option) => option.group === CheckTypeGroup.ApiTest).map((option) => ({
       label: option.label,
       href: `${getRoute(ROUTES.NewCheck)}/${CheckTypeGroup.ApiTest}?checkType=${option.value}`,
+      featureToggle: option.featureToggle,
     })),
   },
   {
@@ -49,10 +52,10 @@ export const CHECK_TYPE_GROUP_OPTIONS: CheckTypeGroupOption[] = [
     value: CheckTypeGroup.Scripted,
     icon: `k6`,
     protocols: [
-      { label: `HTTP` },
+      { label: `HTTP`, featureToggle: FeatureName.ScriptedChecks },
       // todo: we don't support these yet
       // { label: `gRPC` },
-      { label: `WebSockets` },
+      { label: `WebSockets`, featureToggle: FeatureName.ScriptedChecks },
       // todo: we don't support these yet
       // {
       //   label: `+More`,
@@ -79,21 +82,23 @@ export const CHECK_TYPE_GROUP_OPTIONS: CheckTypeGroupOption[] = [
     protocols: [
       {
         label: `HTTP`,
+        featureToggle: FeatureName.BrowserChecks,
       },
     ],
   },
 ];
 
 export function useCheckTypeGroupOptions() {
-  const groups = useCheckTypeOptions().reduce<CheckTypeGroup[]>((acc, option) => {
-    const group = option.group;
+  const { isFeatureEnabled } = useContext(FeatureFlagContext);
 
-    if (acc.includes(group)) {
-      return acc;
-    }
+  return CHECK_TYPE_GROUP_OPTIONS.map((option) => {
+    const protocols = option.protocols.filter((protocol) =>
+      protocol.featureToggle ? isFeatureEnabled(protocol.featureToggle) : true
+    );
 
-    return [...acc, group];
-  }, []);
-
-  return CHECK_TYPE_GROUP_OPTIONS.filter((option) => groups.includes(option.value));
+    return {
+      ...option,
+      protocols,
+    };
+  }).filter((option) => option.protocols.length > 0);
 }