Alerting: Adds visual component for feature toggles (#63621)

public/app/features/alerting/unified/components/AlertingPageWrapper.tsx

@@ -1,18 +1,40 @@
-import React from 'react';
+import Mousetrap from 'mousetrap';
+import React, { useEffect, useState } from 'react';
+import { Features, ToggleFeatures } from 'react-enable';
 
 import { NavModelItem } from '@grafana/data';
 import { Page } from 'app/core/components/Page/Page';
 
+import FEATURES from '../features';
+
 interface Props {
   pageId: string;
   isLoading?: boolean;
   pageNav?: NavModelItem;
 }
 
+const SHOW_TOGGLES_KEY_COMBO = 'ctrl+1';
+const combokeys = new Mousetrap(document.body);
+
 export const AlertingPageWrapper = ({ children, pageId, pageNav, isLoading }: React.PropsWithChildren<Props>) => {
+  const [showFeatureToggle, setShowFeatureToggles] = useState(false);
+
+  useEffect(() => {
+    combokeys.bind(SHOW_TOGGLES_KEY_COMBO, () => {
+      setShowFeatureToggles((show) => !show);
+    });
+
+    return () => {
+      combokeys.unbind(SHOW_TOGGLES_KEY_COMBO);
+    };
+  }, []);
+
   return (
-    <Page pageNav={pageNav} navId={pageId}>
-      <Page.Contents isLoading={isLoading}>{children}</Page.Contents>
-    </Page>
+    <Features features={FEATURES}>
+      <Page pageNav={pageNav} navId={pageId}>
+        <Page.Contents isLoading={isLoading}>{children}</Page.Contents>
+      </Page>
+      {showFeatureToggle ? <ToggleFeatures defaultOpen={true} /> : null}
+    </Features>
   );
 };

public/app/features/alerting/unified/features.ts

@@ -0,0 +1,10 @@
+import { FeatureDescription } from 'react-enable/dist/FeatureState';
+
+const FEATURES: FeatureDescription[] = [
+  {
+    name: 'notification-policies.v2.matching-instances',
+    defaultValue: false,
+  },
+];
+
+export default FEATURES;