Merge branch 'v3' into PMM-13537-public-address-removal-fix

.github/workflows/ui-tests.yml

@@ -55,9 +55,20 @@ jobs:
           repository: percona/pmm-ui-tests
           path: ./pmm-ui-tests
 
-      - name: Checkout UI tests in main branch
+      - name: Checkout UI tests in ${{ github.base_ref }} branch
         uses: percona-platform/checkout@v2
         if: ${{ steps.branch_checkout.outcome != 'success' }}
+        continue-on-error: true
+        id: target_branch_checkout
+        with:
+          token: ${{ secrets.ROBOT_TOKEN }}
+          ref: ${{ github.base_ref }}
+          repository: percona/pmm-ui-tests
+          path: ./pmm-ui-tests
+
+      - name: Checkout UI tests in main branch
+        uses: percona-platform/checkout@v2
+        if: ${{ steps.branch_checkout.outcome != 'success' && steps.target_branch_checkout.outcome != 'success'  }}
         with:
           token: ${{ secrets.ROBOT_TOKEN }}
           ref: main

docker-compose.yml

@@ -17,7 +17,7 @@ services:
       - 443:8443
     environment:
       - PMM_DEBUG=1
-      - PERCONA_PORTAL_URL=https://portal-dev.percona.com
+      - PMM_DEV_PORTAL_URL=https://portal-dev.percona.com
       - PMM_DEV_PERCONA_PLATFORM_ADDRESS=https://check-dev.percona.com:443
       - PMM_DEV_PERCONA_PLATFORM_PUBLIC_KEY=RWTkF7Snv08FCboTne4djQfN5qbrLfAjb8SY3/wwEP+X5nUrkxCEvUDJ
 

pkg/api/system.go

@@ -11,7 +11,7 @@ import (
 
 func GetPerconaSaasHost(c *contextmodel.ReqContext) response.Response {
 	saasHost := "https://portal.percona.com"
-	envHost, ok := os.LookupEnv("PERCONA_PORTAL_URL")
+	envHost, ok := os.LookupEnv("PMM_DEV_PORTAL_URL")
 
 	if ok {
 		saasHost = envHost

public/app/core/components/AppChrome/AppChromeMenu.tsx

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { useDialog } from '@react-aria/dialog';
 import { FocusScope } from '@react-aria/focus';
 import { OverlayContainer, useOverlay } from '@react-aria/overlays';
+import { useTour } from '@reactour/tour';
 import React, { useRef } from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
 
@@ -30,11 +31,15 @@ export function AppChromeMenu({}: Props) {
   const isOpen = state.megaMenuOpen && !state.megaMenuDocked;
   const onClose = () => chrome.setMegaMenuOpen(false);
 
+  // @PERCONA
+  const { isOpen: isTourOpen } = useTour();
+
   const { overlayProps, underlayProps } = useOverlay(
     {
-      isDismissable: true,
+      isDismissable: !isTourOpen,
       isOpen: true,
       onClose,
+      isKeyboardDismissDisabled: !!isTourOpen,
       shouldCloseOnInteractOutside: (element) => {
         // don't close when clicking on the menu toggle, let the toggle button handle that
         // this prevents some nasty flickering when the menu is open and the toggle button is clicked

public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { FormApi, FormState } from 'final-form';
 import React from 'react';
 import { Form } from 'react-final-form';
@@ -13,6 +13,8 @@ import { trackingOptions, rdsTrackingOptions } from './FormParts.constants';
 import { LabelsFormPart } from './Labels/Labels';
 import { MainDetailsFormPart } from './MainDetails/MainDetails';
 
+jest.mock('app/percona/inventory/Inventory.service');
+
 const form: Partial<FormApi> = {
   change: jest.fn(),
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -31,7 +33,7 @@ describe('MainDetailsFormPart ::', () => {
     );
 
     const fields = container.querySelectorAll('input');
-    expect(fields.length).toBe(8);
+    await waitFor(() => expect(fields.length).toBe(8));
 
     expect(screen.getByTestId('address-text-input')).toBeDisabled();
     expect(screen.getByTestId('serviceName-text-input')).not.toBeDisabled();
@@ -51,7 +53,7 @@ describe('MainDetailsFormPart ::', () => {
     );
 
     const fields = container.querySelectorAll('input');
-    expect(fields.length).toBe(8);
+    await waitFor(() => expect(fields.length).toBe(8));
 
     expect(screen.getByTestId('address-text-input')).not.toBeDisabled();
     expect(screen.getByTestId('serviceName-text-input')).not.toBeDisabled();

public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MongoDBConnectionDetails/MongoDBConnectionDetails.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import React from 'react';
 import { Form } from 'react-final-form';
 import { Provider } from 'react-redux';
@@ -7,8 +7,10 @@ import { configureStore } from 'app/store/configureStore';
 
 import { MongoDBConnectionDetails } from './MongoDBConnectionDetails';
 
+jest.mock('app/percona/inventory/Inventory.service');
+
 describe('MongoDB connection details:: ', () => {
-  it('should have max query length attribute', () => {
+  it('should have max query length attribute', async () => {
     render(
       <Provider store={configureStore()}>
         <Form onSubmit={jest.fn()} render={() => <MongoDBConnectionDetails remoteInstanceCredentials={{}} />} />
@@ -18,6 +20,6 @@ describe('MongoDB connection details:: ', () => {
     const textInput = screen.getByTestId('maxQueryLength-text-input');
     fireEvent.change(textInput, { target: { value: '1000' } });
 
-    expect(screen.getByTestId('maxQueryLength-text-input')).toHaveValue('1000');
+    await waitFor(() => expect(screen.getByTestId('maxQueryLength-text-input')).toHaveValue('1000'));
   });
 });

public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MySQLConnectionDetails/MySQLConnectionDetails.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import React from 'react';
 import { Form } from 'react-final-form';
 import { Provider } from 'react-redux';
@@ -7,8 +7,10 @@ import { configureStore } from 'app/store/configureStore';
 
 import { MySQLConnectionDetails } from './MySQLConnectionDetails';
 
+jest.mock('app/percona/inventory/Inventory.service');
+
 describe('MySQL connection details:: ', () => {
-  it('should have max query length attribute', () => {
+  it('should have max query length attribute', async () => {
     render(
       <Provider store={configureStore()}>
         <Form onSubmit={jest.fn()} render={() => <MySQLConnectionDetails remoteInstanceCredentials={{}} />} />
@@ -18,6 +20,6 @@ describe('MySQL connection details:: ', () => {
     const textInput = screen.getByTestId('maxQueryLength-text-input');
     fireEvent.change(textInput, { target: { value: '1000' } });
 
-    expect(screen.getByTestId('maxQueryLength-text-input')).toHaveValue('1000');
+    await waitFor(() => expect(screen.getByTestId('maxQueryLength-text-input')).toHaveValue('1000'));
   });
 });

public/app/percona/add-instance/components/AddRemoteInstance/FormParts/NodesAgents/NodesAgents.constants.tsx

@@ -1 +1,2 @@
+export const PMM_SERVER_NODE_ID = 'pmm-server';
 export const PMM_SERVER_NODE_AGENT_ID = 'pmm-server';

public/app/percona/add-instance/components/AddRemoteInstance/FormParts/NodesAgents/NodesAgents.test.tsx

@@ -46,6 +46,16 @@ describe('Nodes Agents:: ', () => {
     submitMock.mockClear();
   });
 
+  it('should pick pmm-server node by default when available', async () => {
+    jest.spyOn(InventoryService, 'getNodes').mockReturnValue(Promise.resolve({ nodes: nodesMock }));
+
+    setup();
+
+    await waitFor(() => expect(fetchNodesActionActionSpy).toHaveBeenCalled());
+
+    await waitFor(() => expect(screen.getByTestId('node')).toHaveTextContent(nodesMock[0].node_id));
+  });
+
   it('should not pick any agent when the selected node is not pmm-server', async () => {
     jest
       .spyOn(InventoryService, 'getNodes')

public/app/percona/add-instance/components/AddRemoteInstance/FormParts/NodesAgents/NodesAgents.tsx

@@ -1,9 +1,13 @@
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { FC, useCallback, useEffect, useMemo } from 'react';
+import { useField } from 'react-final-form';
 
 import { useStyles2 } from '@grafana/ui';
 import { Messages } from 'app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.messages';
 import { getStyles } from 'app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.styles';
-import { PMM_SERVER_NODE_AGENT_ID } from 'app/percona/add-instance/components/AddRemoteInstance/FormParts/NodesAgents/NodesAgents.constants';
+import {
+  PMM_SERVER_NODE_AGENT_ID,
+  PMM_SERVER_NODE_ID,
+} from 'app/percona/add-instance/components/AddRemoteInstance/FormParts/NodesAgents/NodesAgents.constants';
 import { NodesAgentsProps } from 'app/percona/add-instance/components/AddRemoteInstance/FormParts/NodesAgents/NodesAgents.types';
 import { GET_NODES_CANCEL_TOKEN } from 'app/percona/inventory/Inventory.constants';
 import { AgentsOption, NodesOption } from 'app/percona/inventory/Inventory.types';
@@ -14,15 +18,18 @@ import { fetchNodesAction } from 'app/percona/shared/core/reducers/nodes/nodes';
 import { getNodes } from 'app/percona/shared/core/selectors';
 import { isApiCancelError } from 'app/percona/shared/helpers/api';
 import { logger } from 'app/percona/shared/helpers/logger';
+import { validators } from 'app/percona/shared/helpers/validatorsForm';
 import { useAppDispatch } from 'app/store/store';
 import { useSelector } from 'app/types';
 
 export const NodesAgents: FC<NodesAgentsProps> = ({ form }) => {
   const styles = useStyles2(getStyles);
   const dispatch = useAppDispatch();
   const [generateToken] = useCancelToken();
-  const [selectedNode, setSelectedNode] = useState<NodesOption>();
   const { nodes } = useSelector(getNodes);
+  const {
+    input: { value: selectedNode },
+  } = useField('node');
 
   const nodesOptions = useMemo<NodesOption[]>(() => nodesOptionsMapper(nodes), [nodes]);
 
@@ -49,7 +56,7 @@ export const NodesAgents: FC<NodesAgentsProps> = ({ form }) => {
   };
 
   const setNodeAndAgent = (value: NodesOption) => {
-    setSelectedNode(value);
+    form?.change('node', value);
 
     let selectedAgent: AgentsOption | undefined;
     if (value.agents && value.agents?.length > 1) {
@@ -68,6 +75,12 @@ export const NodesAgents: FC<NodesAgentsProps> = ({ form }) => {
   useEffect(() => {
     if (nodesOptions.length === 0) {
       loadData();
+    } else if (!selectedNode) {
+      // preselect pmm-server node
+      const pmmServerNode = nodesOptions.find((node) => node.value === PMM_SERVER_NODE_ID);
+      if (pmmServerNode) {
+        setNodeAndAgent(pmmServerNode);
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [nodesOptions]);
@@ -84,8 +97,8 @@ export const NodesAgents: FC<NodesAgentsProps> = ({ form }) => {
           data-testid="nodes-selectbox"
           onChange={(event) => setNodeAndAgent(event as NodesOption)}
           className={styles.selectField}
-          value={selectedNode}
           aria-label={Messages.form.labels.nodesAgents.nodes}
+          validators={[validators.required]}
         />
       </div>
       <div className={styles.selectFieldWrapper}>
@@ -99,6 +112,7 @@ export const NodesAgents: FC<NodesAgentsProps> = ({ form }) => {
           onChange={(event) => changeAgentValue(event as AgentsOption)}
           className={styles.selectField}
           aria-label={Messages.form.labels.nodesAgents.agents}
+          validators={selectedNode ? [validators.required] : undefined}
         />
       </div>
     </div>

public/app/percona/add-instance/components/AddRemoteInstance/FormParts/PostgreSQLConnectionDetails/PostgreSQLConnectionDetails.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import React from 'react';
 import { Form } from 'react-final-form';
 import { Provider } from 'react-redux';
@@ -7,8 +7,10 @@ import { configureStore } from 'app/store/configureStore';
 
 import { PostgreSQLConnectionDetails } from './PostgreSQLConnectionDetails';
 
+jest.mock('app/percona/inventory/Inventory.service');
+
 describe('PostgreSQL connection details:: ', () => {
-  it('should have database attribute', () => {
+  it('should have database attribute', async () => {
     render(
       <Provider store={configureStore()}>
         <Form onSubmit={jest.fn()} render={() => <PostgreSQLConnectionDetails remoteInstanceCredentials={{}} />} />
@@ -18,10 +20,10 @@ describe('PostgreSQL connection details:: ', () => {
     const textInput = screen.getByTestId('database-text-input');
     fireEvent.change(textInput, { target: { value: 'db1' } });
 
-    expect(screen.getByTestId('database-text-input')).toHaveValue('db1');
+    await waitFor(() => expect(screen.getByTestId('database-text-input')).toHaveValue('db1'));
   });
 
-  it('should have max query length attribute', () => {
+  it('should have max query length attribute', async () => {
     render(
       <Provider store={configureStore()}>
         <Form onSubmit={jest.fn()} render={() => <PostgreSQLConnectionDetails remoteInstanceCredentials={{}} />} />
@@ -31,6 +33,6 @@ describe('PostgreSQL connection details:: ', () => {
     const textInput = screen.getByTestId('maxQueryLength-text-input');
     fireEvent.change(textInput, { target: { value: '1000' } });
 
-    expect(screen.getByTestId('maxQueryLength-text-input')).toHaveValue('1000');
+    await waitFor(() => expect(screen.getByTestId('maxQueryLength-text-input')).toHaveValue('1000'));
   });
 });

public/app/percona/backup/components/BackupInventory/BackupInventory.constants.ts

@@ -1,4 +1,3 @@
-export const DATA_INTERVAL = 5000;
 export const LIST_ARTIFACTS_CANCEL_TOKEN = 'listArtifacts';
 export const BACKUP_CANCEL_TOKEN = 'backup';
 export const RESTORE_CANCEL_TOKEN = 'restore';

public/app/percona/backup/components/BackupInventory/BackupInventory.test.tsx

@@ -10,7 +10,7 @@ import { BackupInventory } from './BackupInventory';
 
 jest.mock('./BackupInventory.service');
 jest.mock('app/percona/backup/components/StorageLocations/StorageLocations.service');
-jest.mock('../../hooks/recurringCall.hook');
+jest.mock('app/percona/shared/core/hooks/recurringCall.hook');
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useLocation: () => ({

public/app/percona/backup/components/BackupInventory/BackupInventory.tsx

@@ -13,7 +13,8 @@ import { DeleteModal } from 'app/percona/shared/components/Elements/DeleteModal'
 import { FeatureLoader } from 'app/percona/shared/components/Elements/FeatureLoader';
 import { ExtendedColumn, FilterFieldTypes, Table } from 'app/percona/shared/components/Elements/Table';
 import { useCancelToken } from 'app/percona/shared/components/hooks/cancelToken.hook';
-import { ApiVerboseError, Databases, DATABASE_LABELS } from 'app/percona/shared/core';
+import { ApiVerboseError, Databases, DATABASE_LABELS, DATA_INTERVAL } from 'app/percona/shared/core';
+import { useRecurringCall } from 'app/percona/shared/core/hooks/recurringCall.hook';
 import { fetchStorageLocations } from 'app/percona/shared/core/reducers/backups/backupLocations';
 import { getBackupLocations, getPerconaSettingFlag } from 'app/percona/shared/core/selectors';
 import { apiErrorParser, isApiCancelError } from 'app/percona/shared/helpers/api';
@@ -24,12 +25,11 @@ import { useSelector } from 'app/types';
 import { NEW_BACKUP_URL, RESTORES_URL } from '../../Backup.constants';
 import { Messages } from '../../Backup.messages';
 import { BackupModeMap, formatBackupMode } from '../../Backup.utils';
-import { useRecurringCall } from '../../hooks/recurringCall.hook';
 import { DetailedDate } from '../DetailedDate';
 import { Status } from '../Status';
 import { LocationType } from '../StorageLocations/StorageLocations.types';
 
-import { DATA_INTERVAL, LIST_ARTIFACTS_CANCEL_TOKEN, RESTORE_CANCEL_TOKEN } from './BackupInventory.constants';
+import { LIST_ARTIFACTS_CANCEL_TOKEN, RESTORE_CANCEL_TOKEN } from './BackupInventory.constants';
 import { BackupInventoryService } from './BackupInventory.service';
 import { getStyles } from './BackupInventory.styles';
 import { BackupRow } from './BackupInventory.types';

public/app/percona/backup/components/ChunkedLogsViewer/ChunkedLogsViewer.tsx

@@ -2,11 +2,11 @@ import React, { FC, useCallback, useEffect, useState, useRef } from 'react';
 
 import { ClipboardButton, useStyles } from '@grafana/ui';
 import { useCancelToken } from 'app/percona/shared/components/hooks/cancelToken.hook';
+import { useRecurringCall } from 'app/percona/shared/core/hooks/recurringCall.hook';
 import { isApiCancelError } from 'app/percona/shared/helpers/api';
 import { logger } from 'app/percona/shared/helpers/logger';
 
 import { BackupLogChunk } from '../../Backup.types';
-import { useRecurringCall } from '../../hooks/recurringCall.hook';
 
 import { LIMIT, LOGS_CANCEL_TOKEN, STREAM_INTERVAL } from './ChunkedLogsViewer.constants';
 import { Messages } from './ChunkedLogsViewer.messages';

public/app/percona/backup/components/RestoreHistory/RestoreHistory.tsx

@@ -9,6 +9,7 @@ import { FeatureLoader } from 'app/percona/shared/components/Elements/FeatureLoa
 import { ExtendedColumn, FilterFieldTypes, Table } from 'app/percona/shared/components/Elements/Table';
 import { useCancelToken } from 'app/percona/shared/components/hooks/cancelToken.hook';
 import { Databases, DATABASE_LABELS } from 'app/percona/shared/core';
+import { useRecurringCall } from 'app/percona/shared/core/hooks/recurringCall.hook';
 import { fetchStorageLocations } from 'app/percona/shared/core/reducers/backups/backupLocations';
 import { getBackupLocations, getPerconaSettingFlag } from 'app/percona/shared/core/selectors';
 import { isApiCancelError } from 'app/percona/shared/helpers/api';
@@ -18,7 +19,6 @@ import { useSelector } from 'app/types';
 
 import { Messages } from '../../Backup.messages';
 import { formatLocationsToMap } from '../../Backup.utils';
-import { useRecurringCall } from '../../hooks/recurringCall.hook';
 import { DetailedDate } from '../DetailedDate';
 import { Status } from '../Status';
 

public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplate.service.ts

@@ -21,7 +21,7 @@ export const AlertRuleTemplateService = {
     return api
       .get<TemplatesListAPI, AlertRuleTemplateGetPayload>(BASE_URL, false, {
         cancelToken: token,
-        params: { ...payload },
+        params: { ...payload, reload: true },
       })
       .then(
         ({ totals, templates = [] }): TemplatesList => ({

public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplate.types.ts

@@ -18,6 +18,7 @@ export interface AlertRuleTemplateGetPayload {
     page_size: number;
     index: number;
   };
+  reload?: boolean;
 }
 
 interface AlertRuleTemplatesTotals {