Fixed deprecated imports of H/VGroup in favor of Stack (#4897)

# What this PR does Closes grafana/irm#10
grafana · Aug 27, 2024 · 0965c6a · 0965c6a
1 parent 3269c9b
commit 0965c6a
Show file tree

Hide file tree

Showing 170 changed files with 1,220 additions and 4,110 deletions.
diff --git a/.github/workflows/expensive-e2e-tests.yml b/.github/workflows/expensive-e2e-tests.yml
@@ -14,8 +14,8 @@ jobs:
  strategy:
  matrix:
  grafana_version:
- - 10.1.7
- - 10.3.3
+ - 10.3.0
+ - latest
  fail-fast: false
  # Run one version at a time to avoid the issue when SMS notification are bundled together for multiple versions
  # running at the same time (the affected test is in grafana-plugin/e2e-tests/alerts/sms.test.ts)

diff --git a/.github/workflows/linting-and-tests.yml b/.github/workflows/linting-and-tests.yml
@@ -242,11 +242,8 @@ jobs:
  strategy:
  matrix:
  grafana_version:
- - 10.1.7
- - 10.3.3
- # TODO: fix issues with running e2e tests against Grafana v10.2.x and latest
- # - 10.2.4
- # - latest
+ - 10.3.0
+ - latest
  fail-fast: false
  with:
  grafana_version: ${{ matrix.grafana_version }}

diff --git a/grafana-plugin/.eslintrc.js b/grafana-plugin/.eslintrc.js
@@ -12,7 +12,7 @@ module.exports = {
  {
  files: ['src/**/*.{ts,tsx}'],
  rules: {
- 'deprecation/deprecation': 'off',
+ 'deprecation/deprecation': 'warn',
  },
  parserOptions: {
  project: './tsconfig.json',

diff --git a/grafana-plugin/e2e-tests/integrations/maintenanceMode.test.ts b/grafana-plugin/e2e-tests/integrations/maintenanceMode.test.ts
@@ -24,7 +24,8 @@ test.describe('maintenance mode works', () => {
  await page.waitForTimeout(2000);
  const integrationSettingsPopupElement = page
  .getByTestId('integration-settings-context-menu-wrapper')
- .getByRole('img');
+ .locator('svg');
+
  await integrationSettingsPopupElement.click();
  /**
  * sometimes we need to click twice (e.g. adding the escalation chain route

diff --git a/grafana-plugin/e2e-tests/outgoingWebhooks/advancedWebhook.test.ts b/grafana-plugin/e2e-tests/outgoingWebhooks/advancedWebhook.test.ts
@@ -22,12 +22,14 @@ test('create advanced webhook and check it is displayed on the list correctly',
  // Enter webhook name
  await webhooksFormDivs.locator('[name=name]').fill(WEBHOOK_NAME);
 
- // Select team
- await page.getByLabel('New Outgoing Webhook').getByRole('img').nth(1).click(); // Open team dropdown
- await page.getByLabel('Select options menu').getByText('No team').click(); // Select "No team"
+ // Open team dropdown
+ await page.getByTestId('team-selector').locator('div').filter({ hasText: 'Choose (Optional)' }).nth(1).click();
+ // Set No Team
+ await page.getByLabel('Select options menu').getByText('No team').click();
 
  // Select trigger type
- await webhooksFormDivs.filter({ hasText: 'Trigger Type' }).getByRole('img').click();
+ await page.getByTestId('triggerType-selector').locator('div').nth(1).click();
+
  await page.getByLabel('Select options menu').getByText('Resolved', { exact: true }).click();
 
  // Select integration

diff --git a/grafana-plugin/e2e-tests/outgoingWebhooks/simpleWebhook.test.ts b/grafana-plugin/e2e-tests/outgoingWebhooks/simpleWebhook.test.ts
@@ -18,8 +18,12 @@ const createWebhook = async ({ page, webhookName, webhookUrl }) => {
 
  await page.keyboard.insertText(webhookUrl);
  await page.locator('[name=name]').fill(webhookName);
- await page.getByLabel('New Outgoing Webhook').getByRole('img').nth(1).click(); // Open team dropdown
+
+ // Open team dropdown
+ await page.getByTestId('team-selector').locator('div').filter({ hasText: 'Choose (Optional)' }).nth(1).click();
+ // Set No Team
  await page.getByLabel('Select options menu').getByText('No team').click();
+
  await clickButton({ page, buttonText: 'Create' });
 };
 

diff --git a/grafana-plugin/e2e-tests/pluginInitialization/configuration.test.ts b/grafana-plugin/e2e-tests/pluginInitialization/configuration.test.ts
@@ -16,6 +16,7 @@ test.describe('Plugin configuration', () => {
  adminRolePage: { page },
  }) => {
  await goToGrafanaPage(page, PLUGIN_CONFIG);
+ await page.waitForLoadState('networkidle');
  const correctURLAppliedByDefault = await page.getByTestId('oncall-api-url-input').inputValue();
 
  // show client-side validation errors
@@ -27,6 +28,7 @@ test.describe('Plugin configuration', () => {
 
  // apply back correct url and verify plugin connected again
  await urlInput.fill(correctURLAppliedByDefault);
+ await page.waitForTimeout(500);
  await page.getByTestId('connect-plugin').click();
  await page.waitForLoadState('networkidle');
  await page.getByText('Plugin is connected').waitFor();

diff --git a/grafana-plugin/e2e-tests/schedules/addOverride.test.ts b/grafana-plugin/e2e-tests/schedules/addOverride.test.ts
@@ -51,9 +51,13 @@ test('Fills in override time and reacts to timezone change', async ({ adminRoleP
  await expect(overrideEndEl.getByTestId('date-time-picker').getByRole('textbox')).toHaveValue('09:00');
 
  async function changeDatePickerTime(element: Locator, value: string) {
- await element.getByRole('img').click();
+ await element.getByTestId('date-time-picker').getByRole('textbox').click();
+
  // set minutes to {value}
- await page.locator('.rc-time-picker-panel').getByRole('button', { name: value }).first().click();
+ await page.getByRole('button', { name: value }).first().click();
+
+ // Old way
+ // await page.locator('.rc-time-picker-panel').getByRole('button', { name: value }).first().click();
  // set seconds to 00
  await page.getByRole('button', { name: '00' }).nth(1).click();
  }

diff --git a/grafana-plugin/e2e-tests/schedules/addRotation.test.ts b/grafana-plugin/e2e-tests/schedules/addRotation.test.ts
@@ -34,9 +34,15 @@ test('Fills in Rotation time and reacts to timezone change', async ({ adminRole
  await expect(endEl.getByTestId('date-time-picker').getByRole('textbox')).toHaveValue('09:00');
 
  async function changeDatePickerTime(element: Locator, value: string) {
- await element.getByRole('img').click();
+ await element.getByTestId('date-time-picker').getByRole('textbox').click();
+
  // set minutes to {value}
- await page.locator('.rc-time-picker-panel').getByRole('button', { name: value }).first().click();
+ await page.getByRole('button', { name: value }).first().click();
+ // await page.getByRole('button', { name: seconds }).nth(1).click();
+
+ // Old way
+ // await page.locator('.rc-time-picker-panel').getByRole('button', { name: value }).first().click();
+
  // set seconds to 00
  await page.getByRole('button', { name: '00' }).nth(1).click();
  }

diff --git a/grafana-plugin/e2e-tests/schedules/timezones.test.ts b/grafana-plugin/e2e-tests/schedules/timezones.test.ts
@@ -30,7 +30,7 @@ test('dates in schedule are correct according to selected current timezone', asy
  await expect(page.getByTestId('timezone-select')).toHaveText('GMT+3');
 
  // Change timezone to GMT
- await page.getByTestId('timezone-select').getByRole('img').click();
+ await page.getByTestId('timezone-select').locator('div').filter({ hasText: 'GMT+' }).nth(1).click();
  await page.getByText('GMT', { exact: true }).click();
 
  // Selected timezone and local time is correctly displayed

diff --git a/grafana-plugin/src/components/CardButton/CardButton.tsx b/grafana-plugin/src/components/CardButton/CardButton.tsx
@@ -1,10 +1,11 @@
 import React, { FC } from 'react';
 
 import { cx } from '@emotion/css';
-import { VerticalGroup, useStyles2 } from '@grafana/ui';
+import { Stack, useStyles2 } from '@grafana/ui';
 
 import { Block } from 'components/GBlock/Block';
 import { Text } from 'components/Text/Text';
+import { StackSize } from 'utils/consts';
 
 import { getCardButtonStyles } from './CardButton.styles';
 
@@ -30,10 +31,10 @@ export const CardButton: FC<CardButtonProps> = (props) => {
  >
  <div className={styles.icon}>{icon}</div>
  <div className={styles.meta}>
- <VerticalGroup spacing="xs">
+ <Stack gap={StackSize.xs}>
  <Text type="secondary">{description}</Text>
  <Text.Title level={1}>{title}</Text.Title>
- </VerticalGroup>
+ </Stack>
  </div>
  </Block>
  );

diff --git a/grafana-plugin/src/components/CheatSheet/CheatSheet.tsx b/grafana-plugin/src/components/CheatSheet/CheatSheet.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 
-import { HorizontalGroup, IconButton, VerticalGroup, useStyles2 } from '@grafana/ui';
+import { IconButton, Stack, useStyles2 } from '@grafana/ui';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { bem, getUtilStyles } from 'styles/utils.styles';
 
 import { Block } from 'components/GBlock/Block';
 import { Text } from 'components/Text/Text';
+import { StackSize } from 'utils/consts';
 import { openNotification } from 'utils/utils';
 
 import { CheatSheetInterface, CheatSheetItem } from './CheatSheet.config';
@@ -26,11 +27,11 @@ export const CheatSheet = (props: CheatSheetProps) => {
  return (
  <div className={styles.cheatsheetContainer}>
  <div className={styles.cheatsheetInnerContainer}>
- <VerticalGroup>
- <HorizontalGroup justify="space-between">
+ <Stack direction="column">
+ <Stack justifyContent="space-between">
  <Text strong>{cheatSheetName} cheatsheet</Text>
  <IconButton aria-label="Close" name="times" onClick={onClose} />
- </HorizontalGroup>
+ </Stack>
  <Text type="secondary">{cheatSheetData.description}</Text>
  <div className={utils.width100}>
  {cheatSheetData.fields?.map((field: CheatSheetItem) => {
@@ -41,7 +42,7 @@ export const CheatSheet = (props: CheatSheetProps) => {
  );
  })}
  </div>
- </VerticalGroup>
+ </Stack>
  </div>
  </div>
  );
@@ -60,7 +61,7 @@ const CheatSheetListItem = (props: CheatSheetListItemProps) => {
  {field.listItems?.map((item, key) => {
  return (
  <div key={key}>
- <VerticalGroup spacing="md">
+ <Stack direction="column" gap={StackSize.md}>
  {item.listItemName && (
  <li style={{ margin: '0 0 0 4px' }}>
  <Text>{item.listItemName}</Text>
@@ -69,18 +70,18 @@ const CheatSheetListItem = (props: CheatSheetListItemProps) => {
  {item.codeExample && (
  <div className={bem(styles.cheatsheetItem, 'small')}>
  <Block bordered fullWidth withBackground>
- <HorizontalGroup justify="space-between">
+ <Stack justifyContent="space-between">
  <Text type="link" className={styles.code}>
  {item.codeExample}
  </Text>
  <CopyToClipboard text={item.codeExample} onCopy={() => openNotification('Example copied')}>
  <IconButton aria-label="Copy" name="copy" />
  </CopyToClipboard>
- </HorizontalGroup>
+ </Stack>
  </Block>
  </div>
  )}
- </VerticalGroup>
+ </Stack>
  </div>
  );
  })}

diff --git a/grafana-plugin/src/components/CursorPagination/CursorPagination.tsx b/grafana-plugin/src/components/CursorPagination/CursorPagination.tsx
@@ -1,9 +1,10 @@
 import React, { FC, useCallback, useEffect, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { Button, HorizontalGroup, Icon, Select } from '@grafana/ui';
+import { Button, Icon, Select, Stack } from '@grafana/ui';
 
 import { Text } from 'components/Text/Text';
+import { StackSize } from 'utils/consts';
 
 interface CursorPaginationProps {
  current: string;
@@ -30,17 +31,17 @@ export const CursorPagination: FC<CursorPaginationProps> = (props) => {
  }, []);
 
  return (
- <HorizontalGroup spacing="md" justify="flex-end">
- <HorizontalGroup>
+ <Stack gap={StackSize.md} justifyContent="flex-end">
+ <Stack>
  <Text type="secondary">Items per list</Text>
  <Select
  isSearchable={false}
  options={itemsPerPageOptions}
  value={itemsPerPage}
  onChange={onChangeItemsPerPageCallback}
  />
- </HorizontalGroup>
- <HorizontalGroup>
+ </Stack>
+ <Stack>
  <Button
  aria-label="previous"
  size="sm"
@@ -66,7 +67,7 @@ export const CursorPagination: FC<CursorPaginationProps> = (props) => {
  >
  <Icon name="angle-right" />
  </Button>
- </HorizontalGroup>
- </HorizontalGroup>
+ </Stack>
+ </Stack>
  );
 };
diff --git a/grafana-plugin/src/components/FullPageError/FullPageError.tsx b/grafana-plugin/src/components/FullPageError/FullPageError.tsx
@@ -1,10 +1,11 @@
 import React, { FC } from 'react';
 
 import { css } from '@emotion/css';
-import { useStyles2, VerticalGroup } from '@grafana/ui';
+import { useStyles2, Stack } from '@grafana/ui';
 
 import errorSVG from 'assets/img/error.svg';
 import { Text } from 'components/Text/Text';
+import { StackSize } from 'utils/consts';
 
 interface FullPageErrorProps {
  children?: React.ReactNode;
@@ -21,12 +22,12 @@ export const FullPageError: FC<FullPageErrorProps> = ({
 
  return (
  <div className={styles.wrapper}>
- <VerticalGroup align="center" spacing="md">
+ <Stack direction="column" alignItems="center" gap={StackSize.md}>
  <img src={errorSVG} alt="" />
  <Text.Title level={3}>{title}</Text.Title>
  {subtitle && <Text type="secondary">{subtitle}</Text>}
  {children}
- </VerticalGroup>
+ </Stack>
  </div>
  );
 };