Rename integrations table tabs (#3501)

# What this PR does
Rename "Connections" tab to "Monitoring Systems" and "Direct Paging" to
"Manual Direct Paging" on Integrations page

## Which issue(s) this PR fixes
https://github.com/grafana/oncall-private/issues/2302

## Checklist

- [x] Unit, integration, and e2e (if applicable) tests updated
- [x] Documentation added (or `pr:no public docs` PR label added if not
required)
- [x] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not
required)

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Disallow creating and deleting direct paging integrations by @vadimkerr ([#3475](https://github.com/grafana/oncall/pull/3475))
+- Renamed "Connections" tab to "Monitoring Systems" and "Direct Paging" to "Manual Direct Paging" on Integrations page
 
 ## v1.3.70 (2023-12-01)
 
@@ -63,9 +64,9 @@ Minor bugfixes + dependency updates :)
 ### Added
 
 - Add ability to use Grafana Service Account Tokens for OnCall API (This is only enabled for resolution_notes
-endpoint currently) @mderynck ([#3189](https://github.com/grafana/oncall/pull/3189))
+  endpoint currently) @mderynck ([#3189](https://github.com/grafana/oncall/pull/3189))
 - Add ability for webhook presets to mask sensitive headers @mderynck
-([#3189](https://github.com/grafana/oncall/pull/3189))
+  ([#3189](https://github.com/grafana/oncall/pull/3189))
 
 ### Changed
 
@@ -74,7 +75,7 @@ endpoint currently) @mderynck ([#3189](https://github.com/grafana/oncall/pull/31
 ### Fixed
 
 - Fixed issue that blocked saving webhooks with presets if the preset is controlling the URL @mderynck
-([#3189](https://github.com/grafana/oncall/pull/3189))
+  ([#3189](https://github.com/grafana/oncall/pull/3189))
 - User filter doesn't display current value on Alert Groups page ([1714](https://github.com/grafana/oncall/issues/1714))
 - Remove displaying rotation modal for Terraform/API based schedules
 - Filters polishing ([3183](https://github.com/grafana/oncall/issues/3183))

grafana-plugin/e2e-tests/integrations/integrationsTable.test.ts

@@ -2,7 +2,9 @@ import { test } from '../fixtures';
 import { generateRandomValue } from '../utils/forms';
 import { createIntegration, searchIntegrationAndAssertItsPresence } from '../utils/integrations';
 
-test('Integrations table shows data in Connections and Direct Paging tabs', async ({ adminRolePage: { page } }) => {
+test('Integrations table shows data in Monitoring Systems and Direct Paging tabs', async ({
+  adminRolePage: { page },
+}) => {
   const ID = generateRandomValue();
   const WEBHOOK_INTEGRATION_NAME = `Webhook-${ID}`;
   const ALERTMANAGER_INTEGRATION_NAME = `Alertmanager-${ID}`;
@@ -22,7 +24,7 @@ test('Integrations table shows data in Connections and Direct Paging tabs', asyn
   await page.getByRole('tab', { name: 'Tab Integrations' }).click();
 
   // Create 1 Direct Paging integration if it doesn't exist
-  await page.getByRole('tab', { name: 'Tab Direct Paging' }).click();
+  await page.getByRole('tab', { name: 'Tab Manual Direct Paging' }).click();
   const integrationsTable = page.getByTestId('integrations-table');
   await page.waitForTimeout(2000);
   const isDirectPagingAlreadyCreated = (await integrationsTable.getByText('Direct paging').count()) >= 1;
@@ -37,7 +39,7 @@ test('Integrations table shows data in Connections and Direct Paging tabs', asyn
   }
   await page.getByRole('tab', { name: 'Tab Integrations' }).click();
 
-  // By default Connections tab is opened and newly created integrations are visible except Direct Paging one
+  // By default Monitoring Systems tab is opened and newly created integrations are visible except Direct Paging one
   await searchIntegrationAndAssertItsPresence({ page, integrationsTable, integrationName: WEBHOOK_INTEGRATION_NAME });
   await searchIntegrationAndAssertItsPresence({
     page,
@@ -52,7 +54,7 @@ test('Integrations table shows data in Connections and Direct Paging tabs', asyn
   });
 
   // Then after switching to Direct Paging tab only Direct Paging integration is visible
-  await page.getByRole('tab', { name: 'Tab Direct Paging' }).click();
+  await page.getByRole('tab', { name: 'Tab Manual Direct Paging' }).click();
   await searchIntegrationAndAssertItsPresence({
     page,
     integrationsTable,

grafana-plugin/src/pages/integrations/Integrations.tsx

@@ -58,7 +58,7 @@ import { PAGE, TEXT_ELLIPSIS_CLASS } from 'utils/consts';
 import styles from './Integrations.module.scss';
 
 enum TabType {
-  Connections = 'connections',
+  MonitoringSystems = 'monitoring-systems',
   DirectPaging = 'direct-paging',
 }
 
@@ -66,11 +66,11 @@ const TAB_QUERY_PARAM_KEY = 'tab';
 
 const TABS = [
   {
-    label: 'Connections',
-    value: TabType.Connections,
+    label: 'Monitoring Systems',
+    value: TabType.MonitoringSystems,
   },
   {
-    label: 'Direct Paging',
+    label: 'Manual Direct Paging',
     value: TabType.DirectPaging,
   },
 ];
@@ -106,7 +106,7 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
       integrationsFilters: { searchTerm: '', integration_ne: ['direct_paging'] },
       errorData: initErrorDataState(),
       confirmationModal: undefined,
-      activeTab: props.query[TAB_QUERY_PARAM_KEY] || TabType.Connections,
+      activeTab: props.query[TAB_QUERY_PARAM_KEY] || TabType.MonitoringSystems,
     };
   }
 
@@ -204,8 +204,8 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
     const { alertReceiveChannelStore } = store;
 
     const { count, results, page_size } = alertReceiveChannelStore.getPaginatedSearchResult();
-    const isDirectPagingSelectedOnConnectionsTab =
-      activeTab === TabType.Connections && integrationsFilters.integration?.includes('direct_paging');
+    const isDirectPagingSelectedOnMonitoringSystemsTab =
+      activeTab === TabType.MonitoringSystems && integrationsFilters.integration?.includes('direct_paging');
 
     return (
       <>
@@ -253,7 +253,7 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
                   skipFilterOptionFn: ({ name }) => name === 'integration',
                 })}
               />
-              {isDirectPagingSelectedOnConnectionsTab && (
+              {isDirectPagingSelectedOnMonitoringSystemsTab && (
                 <Alert
                   className={cx('goToDirectPagingAlert')}
                   severity="info"
@@ -556,7 +556,7 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
       alertReceiveChannelStore,
       filtersStore: { applyLabelFilter },
     } = this.props.store;
-    const isConnectionsTab = this.state.activeTab === TabType.Connections;
+    const isMonitoringSystemsTab = this.state.activeTab === TabType.MonitoringSystems;
 
     const columns = [
       {
@@ -578,7 +578,7 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
         key: 'datasource',
         render: (item: AlertReceiveChannel) => this.renderDatasource(item, alertReceiveChannelStore),
       },
-      ...(isConnectionsTab
+      ...(isMonitoringSystemsTab
         ? [
             {
               width: '10%',
@@ -595,7 +595,7 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
           ]
         : []),
       {
-        width: isConnectionsTab ? '15%' : '30%',
+        width: isMonitoringSystemsTab ? '15%' : '30%',
         title: 'Team',
         render: (item: AlertReceiveChannel) => this.renderTeam(item, grafanaTeamStore.items),
       },

grafana-plugin/src/plugin.json

@@ -57,7 +57,7 @@
     {
       "type": "page",
       "name": "Integrations",
-      "path": "/a/grafana-oncall-app/integrations?tab=connections",
+      "path": "/a/grafana-oncall-app/integrations?tab=monitoring-systems",
       "role": "Viewer",
       "action": "grafana-oncall-app.integrations:read",
       "addToNav": true