Alerting: Show a warning when contact point has not receivers in it (#93318)

Show a warning when contact point has not receivers in it

public/app/features/alerting/unified/components/contact-points/ContactPoint.tsx

@@ -49,6 +49,13 @@ export const ContactPoint = ({ disabled = false, contactPoint }: ContactPointPro
             })
           }
         />
+        {receivers.length === 0 && (
+          <div className={styles.noIntegrationsContainer}>
+            <MetaText color="warning" icon="exclamation-circle">
+              <Trans i18nKey="alerting.contact-points.no-integrations">No integrations configured</Trans>
+            </MetaText>
+          </div>
+        )}
         {showFullMetadata ? (
           <div>
             {receivers.map((receiver, index) => {
@@ -286,4 +293,8 @@ const getStyles = (theme: GrafanaTheme2) => ({
     borderBottomLeftRadius: `${theme.shape.radius.default}`,
     borderBottomRightRadius: `${theme.shape.radius.default}`,
   }),
+  noIntegrationsContainer: css({
+    paddingTop: `${theme.spacing(1.5)}`,
+    paddingLeft: `${theme.spacing(1.5)}`,
+  }),
 });

public/app/features/alerting/unified/components/contact-points/ContactPoints.test.tsx

@@ -19,7 +19,8 @@ import setupMimirFlavoredServer, { MIMIR_DATASOURCE_UID } from './__mocks__/mimi
 import setupVanillaAlertmanagerFlavoredServer, {
   VANILLA_ALERTMANAGER_DATASOURCE_UID,
 } from './__mocks__/vanillaAlertmanagerServer';
-import { ContactPointWithMetadata, RouteReference } from './utils';
+import { RECEIVER_META_KEY } from './constants';
+import { ContactPointWithMetadata, ReceiverConfigWithMetadata, RouteReference } from './utils';
 
 /**
  * There are lots of ways in which we test our pages and components. Here's my opinionated approach to testing them.
@@ -197,6 +198,30 @@ describe('contact points', () => {
       expect(editAction).toHaveAttribute('aria-disabled', 'true');
     });
 
+    it('should show warning when no receivers are configured', async () => {
+      renderWithProvider(<ContactPoint contactPoint={basicContactPoint} />);
+
+      expect(screen.getByText(/No integrations configured/i)).toBeInTheDocument();
+    });
+
+    it('should not show warning when at least one receiver is configured', async () => {
+      const receiver: ReceiverConfigWithMetadata = {
+        name: 'email',
+        provenance: undefined,
+        type: 'email',
+        disableResolveMessage: false,
+        settings: { addresses: 'test1@test.com,test2@test.com,test3@test.com,test4@test.com' },
+        [RECEIVER_META_KEY]: {
+          name: 'Email',
+          description: 'The email receiver',
+        },
+      };
+      renderWithProvider(
+        <ContactPoint contactPoint={{ ...basicContactPoint, grafana_managed_receiver_configs: [receiver] }} />
+      );
+      expect(screen.queryByText(/No integrations configured/i)).not.toBeInTheDocument();
+    });
+
     it('should disable buttons when provisioned', async () => {
       const { user } = renderWithProvider(<ContactPoint contactPoint={{ ...basicContactPoint, provisioned: true }} />);
 

public/locales/en-US/grafana.json

@@ -112,6 +112,7 @@
       "last-delivery-attempt": "Last delivery attempt",
       "last-delivery-failed": "Last delivery attempt failed",
       "no-delivery-attempts": "No delivery attempts",
+      "no-integrations": "No integrations configured",
       "only-firing": "Delivering <1>only firing</1> notifications",
       "telegram": {
         "parse-mode-warning-body": "If you use a <1>parse_mode</1> option other than <3>None</3>, truncation may result in an invalid message, causing the notification to fail. For longer messages, we recommend using an alternative contact method.",

public/locales/pseudo-LOCALE/grafana.json

@@ -112,6 +112,7 @@
       "last-delivery-attempt": "Ŀäşŧ đęľįvęřy äŧŧęmpŧ",
       "last-delivery-failed": "Ŀäşŧ đęľįvęřy äŧŧęmpŧ ƒäįľęđ",
       "no-delivery-attempts": "Ńő đęľįvęřy äŧŧęmpŧş",
+      "no-integrations": "Ńő įʼnŧęģřäŧįőʼnş čőʼnƒįģūřęđ",
       "only-firing": "Đęľįvęřįʼnģ <1>őʼnľy ƒįřįʼnģ</1> ʼnőŧįƒįčäŧįőʼnş",
       "telegram": {
         "parse-mode-warning-body": "Ĩƒ yőū ūşę ä <1>päřşę_mőđę</1> őpŧįőʼn őŧĥęř ŧĥäʼn <3>Ńőʼnę</3>, ŧřūʼnčäŧįőʼn mäy řęşūľŧ įʼn äʼn įʼnväľįđ męşşäģę, čäūşįʼnģ ŧĥę ʼnőŧįƒįčäŧįőʼn ŧő ƒäįľ. Főř ľőʼnģęř męşşäģęş, ŵę řęčőmmęʼnđ ūşįʼnģ äʼn äľŧęřʼnäŧįvę čőʼnŧäčŧ męŧĥőđ.",