fix safari scroll (#1663)

# What this PR does

Fix  scroll in Safari

## Which issue(s) this PR fixes

https://github.com/grafana/oncall/issues/415

## Checklist

- [ ] Unit, integration, and e2e (if applicable) tests updated
- [ ] 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)

---------

Co-authored-by: Joey Orlando <joseph.t.orlando@gmail.com>
Co-authored-by: Joey Orlando <joey.orlando@grafana.com>

.github/workflows/linting-and-tests.yml

@@ -373,16 +373,14 @@ jobs:
         uses: actions/cache@v3
         with:
           path: "~/.cache/ms-playwright"
-          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
+          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}-chromium-firefox-webkit
 
       - name: Install Playwright binaries/dependencies
         if: steps.playwright-cache.outputs.cache-hit != 'true'
-        # if more browsers are added, will need to modify the "npx playwright install" command
         # https://stackoverflow.com/questions/65900299/install-single-dependency-from-package-json-with-yarn
         run: |
           yarn add "@playwright/test@${{ env.PLAYWRIGHT_VERSION }}"
-          npx playwright install --with-deps chromium firefox
-          npx playwright install-deps
+          npx playwright install --with-deps chromium firefox webkit
 
       - name: Await k8s pods and other resources up
         uses: jupyterhub/action-k8s-await-workloads@v1

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fix team search when filtering resources by @vadimkerr ([#1680](https://github.com/grafana/oncall/pull/1680))
+- Fix issue when trying to scroll in Safari ([#415](https://github.com/grafana/oncall/issues/415))
 
 ## v1.2.6 (2023-03-30)
 

grafana-plugin/integration-tests/alerts/onCallSchedule.test.ts

@@ -6,6 +6,9 @@ import { createIntegrationAndSendDemoAlert } from '../utils/integrations';
 import { createOnCallSchedule } from '../utils/schedule';
 
 test('we can create an oncall schedule + receive an alert', async ({ page }) => {
+  // this test does a lot of stuff, lets give it adequate time to do its thing
+  test.slow();
+
   const escalationChainName = generateRandomValue();
   const integrationName = generateRandomValue();
   const onCallScheduleName = generateRandomValue();

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

@@ -39,7 +39,7 @@ export const clickButton = async ({
   dataTestId,
 }: ClickButtonArgs): Promise<void> => {
   const baseLocator = dataTestId ? `button[data-testid="${dataTestId}"]` : 'button';
-  const button = (startingLocator || page).locator(`${baseLocator} >> text=${buttonText}`);
+  const button = (startingLocator || page).locator(`${baseLocator}:not([disabled]) >> text=${buttonText}`);
 
   await button.waitFor({ state: 'visible' });
   await button.click();

grafana-plugin/playwright.config.ts

@@ -14,7 +14,6 @@ const config: PlaywrightTestConfig = {
   testDir: './integration-tests',
   globalSetup: './integration-tests/globalSetup.ts',
   /* Maximum time one test can run for. */
-  // TODO: set this back to 60 when GSelect component is refactored
   timeout: 90 * 1000,
   expect: {
     /**
@@ -28,10 +27,7 @@ const config: PlaywrightTestConfig = {
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
-  retries: process.env.CI ? 1 : 0,
-  // TODO: when GSelect component is refactored, run using 3 workers
-  // locally use one worker, on CI use 3
-  // workers: process.env.CI ? 3 : 1,
+  retries: process.env.CI ? 3 : 0,
   workers: 1,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
@@ -64,14 +60,12 @@ const config: PlaywrightTestConfig = {
         ...devices['Desktop Firefox'],
       },
     },
-
-    // TODO: enable tests on Safari once the scroll bug when creating an integration is patched
-    // {
-    //   name: 'webkit',
-    //   use: {
-    //     ...devices['Desktop Safari'],
-    //   },
-    // },
+    {
+      name: 'webkit',
+      use: {
+        ...devices['Desktop Safari'],
+      },
+    },
 
     /* Test against mobile viewports. */
     // {

grafana-plugin/src/img/grafanaGlobalStyles.css

@@ -1,6 +1,7 @@
 /* Navigation/Layout */
 
-.drawer-content {
+.drawer-content,
+.rc-drawer-content {
   overflow: auto !important; /* fix https://github.com/grafana/oncall/issues/415 */
 }
 

grafana-plugin/src/pages/escalation-chains/EscalationChains.tsx

@@ -286,12 +286,7 @@ class EscalationChainsPage extends React.Component<EscalationChainsPageProps, Es
     return (
       <>
         <Block withBackground className={cx('header')}>
-          <Text
-            size="large"
-            editable
-            onTextChange={this.handleEscalationChainNameChange}
-            data-testid="escalation-chain-name"
-          >
+          <Text size="large" onTextChange={this.handleEscalationChainNameChange} data-testid="escalation-chain-name">
             {escalationChain.name}
           </Text>
           <div className={cx('buttons')}>