Switch old with new integrations page

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- UI Updates for the integrations page ([#2310](https://github.com/grafana/oncall/pull/2310))
+
 ## v1.2.46 (2023-06-22)
 
 ### Added

grafana-plugin/integration-tests/utils/integrations.ts

@@ -1,5 +1,5 @@
 import { Page } from '@playwright/test';
-import { clickButton, fillInInput, selectDropdownValue } from './forms';
+import { clickButton } from './forms';
 import { goToOnCallPage } from './navigation';
 
 const CREATE_INTEGRATION_MODAL_TEST_ID_SELECTOR = 'div[data-testid="create-integration-modal"]';
@@ -9,7 +9,7 @@ export const openCreateIntegrationModal = async (page: Page): Promise<void> => {
   await goToOnCallPage(page, 'integrations');
 
   // open the create integration modal
-  (await page.waitForSelector('text=New integration to receive alerts')).click();
+  (await page.waitForSelector('text=New integration')).click();
 
   // wait for it to pop up
   await page.waitForSelector(CREATE_INTEGRATION_MODAL_TEST_ID_SELECTOR);
@@ -18,32 +18,34 @@ export const openCreateIntegrationModal = async (page: Page): Promise<void> => {
 export const createIntegrationAndSendDemoAlert = async (
   page: Page,
   integrationName: string,
-  escalationChainName: string
+  _escalationChainName: string
 ): Promise<void> => {
   await openCreateIntegrationModal(page);
 
   // create a webhook integration
   (await page.waitForSelector(`${CREATE_INTEGRATION_MODAL_TEST_ID_SELECTOR} >> text=Webhook`)).click();
 
-  // wait for the integrations settings modal to open up... and then close it
-  await clickButton({ page, buttonText: 'Open Escalations Settings' });
+  // fill in the required inputs
+  (await page.waitForSelector('input[name="verbal_name"]', { state: 'attached' })).fill(integrationName);
+  (await page.waitForSelector('textarea[name="description_short"]', { state: 'attached' })).fill("Here goes your integration description");
 
-  // update the integration name
-  await (await page.waitForSelector('div[data-testid="integration-header"] >> h4 >> button')).click();
-  await fillInInput(page, 'div[data-testid="edit-integration-name-modal"] >> input', integrationName);
-  await clickButton({ page, buttonText: 'Update' });
+  const grafanaUpdateBtn = page.getByTestId("update-integration-button");
+  await grafanaUpdateBtn.click();
 
-  const integrationSettingsElement = page.getByTestId('integration-settings');
+  /*
+   * TODO: This is slightly more complicated now, change this in next iteration */
+  // const integrationSettingsElement = page.getByTestId('integration-settings');
 
-  // assign the escalation chain to the integration
-  await selectDropdownValue({
-    page,
-    selectType: 'grafanaSelect',
-    placeholderText: 'Select Escalation Chain',
-    value: escalationChainName,
-    startingLocator: integrationSettingsElement,
-  });
+  // // assign the escalation chain to the integration
+  // await selectDropdownValue({
+  //   page,
+  //   selectType: 'grafanaSelect',
+  //   placeholderText: 'Select Escalation Chain',
+  //   value: escalationChainName,
+  //   startingLocator: integrationSettingsElement,
+  // });
 
   // send demo alert
   await clickButton({ page, buttonText: 'Send demo alert', dataTestId: 'send-demo-alert' });
+  await clickButton({ page, buttonText: 'Send Alert', dataTestId: "submit-send-alert" })
 };

grafana-plugin/src/components/AlertTemplates/CommonAlertTemplatesForm.config.ts

@@ -1,4 +1,4 @@
-import { TemplateOptions } from 'pages/integration_2/Integration2.config';
+import { TemplateOptions } from 'pages/integration/Integration.config';
 
 export interface Template {
   name: string;

grafana-plugin/src/components/GForm/GForm.tsx

@@ -151,9 +151,11 @@ class GForm extends React.Component<GFormProps, {}> {
           return (
             <>
               {openFields.map(renderField)}
-              <Collapse isOpen={false} label="Notification settings" className={cx('collapse')}>
-                {collapsedfields.map(renderField)}
-              </Collapse>
+              {collapsedfields.length > 0 && (
+                <Collapse isOpen={false} label="Notification settings" className={cx('collapse')}>
+                  {collapsedfields.map(renderField)}
+                </Collapse>
+              )}
             </>
           );
         }}