From 0b4b9250de151657cd6634f5e5eee24d5f761940 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Fri, 20 Jan 2023 13:13:12 +0100
Subject: [PATCH 01/32] PMM-1148 initial inventory management rework

---
 .../AddInstance/AddInstance.messages.ts       |   2 +
 .../AddInstance/AddInstance.styles.ts         |  52 ++----
 .../AddInstance/AddInstance.test.tsx          |  18 +-
 .../components/AddInstance/AddInstance.tsx    |  52 +++---
 .../AddInstance/AddInstance.types.ts          |  18 +-
 .../AddRemoteInstance.messages.ts             |  11 ++
 .../AddRemoteInstance.styles.ts               |   2 +-
 .../AddRemoteInstance.test.tsx                |   6 +-
 .../AddRemoteInstance/AddRemoteInstance.tsx   |  29 +---
 .../AddRemoteInstance.types.ts                |   1 +
 .../AdditionalOptions/AdditionalOptions.tsx   |  41 +++--
 .../ExternalServiceConnectionDetails.tsx      | 162 +++++++++---------
 .../FormParts/FormParts.messages.ts           |   9 +-
 .../FormParts/FormParts.styles.tsx            |  47 ++++-
 .../HAProxyConnectionDetails.tsx              |  99 +++++------
 .../FormParts/Labels/Labels.tsx               |  93 ++++++----
 .../FormParts/Labels/Labels.types.ts          |   3 +
 .../FormParts/MainDetails/MainDetails.tsx     |  92 +++++-----
 .../MongoDBConnectionDetails.tsx              | 112 ++++++------
 .../MySQLConnectionDetails.tsx                | 113 ++++++------
 .../PostgreSQLConnectionDetails.tsx           | 129 +++++++-------
 .../AzureDiscovery/Discovery.test.tsx         |   2 +-
 .../components/AzureDiscovery/Discovery.tsx   |   2 +-
 .../AzureDiscovery/Discovery.types.ts         |   1 +
 .../components/Credentials/Credentials.tsx    |   8 +-
 .../components/Discovery/Discovery.test.tsx   |   2 +-
 .../components/Discovery/Discovery.tsx        |   4 +-
 .../components/Discovery/Discovery.types.ts   |   1 +
 .../Credentials/Credentials.test.tsx          |   4 +-
 .../components/Credentials/Credentials.tsx    |  20 +--
 .../Credentials/Credentials.types.ts          |   3 -
 .../app/percona/add-instance/panel.styles.ts  |  10 +-
 public/app/percona/add-instance/panel.tsx     | 119 +++++++++----
 .../app/percona/add-instance/panel.types.ts   |   4 +
 .../edit-instance/EditInstance.messages.ts    |   6 +
 .../edit-instance/EditInstance.test.tsx       |  35 ++++
 .../percona/edit-instance/EditInstance.tsx    |  79 +++++++++
 .../edit-instance/EditInstance.types.ts       |  23 +++
 .../edit-instance/EditInstance.utils.ts       |  54 ++++++
 .../ColumnRenderers/ColumnRenderers.tsx       |   5 +
 .../percona/inventory/Inventory.constants.ts  |  58 ++++++-
 .../percona/inventory/Inventory.service.ts    |   6 +
 .../app/percona/inventory/Tabs/Services.tsx   |  40 +++--
 .../app/percona/inventory/Tabs/Tabs.styles.ts |   3 +
 .../inventory/__mocks__/Inventory.service.ts  |  31 +++-
 .../inventory/__mocks__/Services.service.ts   |  10 ++
 .../DeleteServiceModal.messages.ts            |  13 ++
 .../DeleteServiceModal.styles.ts              |   7 +
 .../DeleteServiceModal.test.tsx               |  77 +++++++++
 .../DeleteServiceModal/DeleteServiceModal.tsx |  69 ++++++++
 .../ServicesOptions.messages.ts               |   7 +
 .../ServicesOptions/ServicesOptions.styles.ts |   9 +
 .../ServicesOptions/ServicesOptions.test.tsx  |  70 ++++++++
 .../ServicesOptions/ServicesOptions.tsx       |  50 ++++++
 .../ServicesOptions/ServicesOptions.types.ts  |   5 +
 .../PerconaNavigation.constants.ts            |   8 +
 .../PerconaNavigation/PerconaNavigation.tsx   |   2 +
 .../shared/core/reducers/services/services.ts |  17 +-
 public/app/routes/routes.tsx                  |  12 ++
 59 files changed, 1390 insertions(+), 577 deletions(-)
 create mode 100644 public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.types.ts
 create mode 100644 public/app/percona/edit-instance/EditInstance.messages.ts
 create mode 100644 public/app/percona/edit-instance/EditInstance.test.tsx
 create mode 100644 public/app/percona/edit-instance/EditInstance.tsx
 create mode 100644 public/app/percona/edit-instance/EditInstance.types.ts
 create mode 100644 public/app/percona/edit-instance/EditInstance.utils.ts
 create mode 100644 public/app/percona/inventory/__mocks__/Services.service.ts
 create mode 100644 public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.messages.ts
 create mode 100644 public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.styles.ts
 create mode 100644 public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.test.tsx
 create mode 100644 public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx
 create mode 100644 public/app/percona/inventory/components/ServicesOptions/ServicesOptions.messages.ts
 create mode 100644 public/app/percona/inventory/components/ServicesOptions/ServicesOptions.styles.ts
 create mode 100644 public/app/percona/inventory/components/ServicesOptions/ServicesOptions.test.tsx
 create mode 100644 public/app/percona/inventory/components/ServicesOptions/ServicesOptions.tsx
 create mode 100644 public/app/percona/inventory/components/ServicesOptions/ServicesOptions.types.ts

diff --git a/public/app/percona/add-instance/components/AddInstance/AddInstance.messages.ts b/public/app/percona/add-instance/components/AddInstance/AddInstance.messages.ts
index 3f8b44e707235..10c8645b2f1cc 100644
--- a/public/app/percona/add-instance/components/AddInstance/AddInstance.messages.ts
+++ b/public/app/percona/add-instance/components/AddInstance/AddInstance.messages.ts
@@ -1,4 +1,6 @@
 export const Messages = {
+  sectionTitle: 'Select service type',
+  description: 'Select the service type you want to configure and then add to your inventory.',
   titles: {
     rds: 'Amazon RDS',
     azure: 'Microsoft Azure MySQL or PostgreSQL',
diff --git a/public/app/percona/add-instance/components/AddInstance/AddInstance.styles.ts b/public/app/percona/add-instance/components/AddInstance/AddInstance.styles.ts
index 7a68c6d2aa1df..d53786ce51856 100644
--- a/public/app/percona/add-instance/components/AddInstance/AddInstance.styles.ts
+++ b/public/app/percona/add-instance/components/AddInstance/AddInstance.styles.ts
@@ -1,52 +1,30 @@
 import { css } from '@emotion/css';
 
-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
-export const getStyles = ({ border, colors, spacing, typography }: GrafanaTheme) => ({
-  navigationButton: css`
+export const getStyles = (theme: GrafanaTheme2) => ({
+  Content: css`
     display: flex;
     flex-direction: column;
-    justify-content: flex-end;
-    align-items: center;
-    padding-bottom: 1.2em;
-    margin: ${spacing.sm};
-    border-radius: ${border.radius.md};
-    width: 230px;
-    height: 160px;
-    text-align: center;
-    background-color: transparent;
-    border: ${border.width.sm} dashed ${colors.border2};
-
-    :hover {
-      cursor: pointer;
-      background-color: ${colors.dropdownOptionHoverBg};
-      border: ${border.width.sm} solid ${colors.border2};
-    }
+    align-items: flex-start;
   `,
-  navigationPanel: css`
+  NavigationPanel: css`
     display: flex;
     flex-direction: row;
-    justify-content: center;
+    justify-content: flex-start;
     flex-wrap: wrap;
-    max-width: 800px;
+    max-width: 825px;
     width: 100%;
     overflow: hidden;
+    gap: ${theme.spacing(2)};
+    padding: 3px;
+    margin: -3px;
   `,
-  content: css`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 2em;
+  InstanceCard: css`
+    width: 375px;
+    margin: 0;
   `,
-  addInstance: css`
-    margin-top: ${spacing.sm};
-    font-size: ${typography.size.sm};
-  `,
-  addInstanceTitle: css`
-    margin-top: ${spacing.sm};
-    overflow: hidden;
-    line-height: ${typography.lineHeight.md};
-    width: 65%;
-    height: 3em;
+  Description: css`
+    color: ${theme.colors.text.secondary};
   `,
 });
diff --git a/public/app/percona/add-instance/components/AddInstance/AddInstance.test.tsx b/public/app/percona/add-instance/components/AddInstance/AddInstance.test.tsx
index 1b84d63c09f2e..b1f64f3acc96d 100644
--- a/public/app/percona/add-instance/components/AddInstance/AddInstance.test.tsx
+++ b/public/app/percona/add-instance/components/AddInstance/AddInstance.test.tsx
@@ -1,14 +1,22 @@
 import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import React from 'react';
 
+import { InstanceAvailable } from '../../panel.types';
+
 import { AddInstance } from './AddInstance';
 import { instanceList } from './AddInstance.constants';
 
 jest.mock('app/percona/settings/Settings.service');
 
+const selectedInstanceType: InstanceAvailable = { type: '' };
+
 describe('AddInstance page::', () => {
   it('should render a given number of links', async () => {
-    await waitFor(() => render(<AddInstance showAzure={false} onSelectInstanceType={() => {}} />));
+    await waitFor(() =>
+      render(
+        <AddInstance showAzure={false} onSelectInstanceType={() => {}} selectedInstanceType={selectedInstanceType} />
+      )
+    );
 
     expect(screen.getAllByRole('button')).toHaveLength(instanceList.length);
     instanceList.forEach((item) => {
@@ -17,7 +25,9 @@ describe('AddInstance page::', () => {
   });
 
   it('should render azure option', async () => {
-    await waitFor(() => render(<AddInstance showAzure onSelectInstanceType={() => {}} />));
+    await waitFor(() =>
+      render(<AddInstance showAzure onSelectInstanceType={() => {}} selectedInstanceType={selectedInstanceType} />)
+    );
 
     expect(screen.getAllByRole('button')).toHaveLength(instanceList.length + 1);
     instanceList.forEach((item) => {
@@ -29,7 +39,9 @@ describe('AddInstance page::', () => {
   it('should invoke a callback with a proper instance type', async () => {
     const onSelectInstanceType = jest.fn();
 
-    render(<AddInstance showAzure onSelectInstanceType={onSelectInstanceType} />);
+    render(
+      <AddInstance showAzure onSelectInstanceType={onSelectInstanceType} selectedInstanceType={selectedInstanceType} />
+    );
 
     expect(onSelectInstanceType).toBeCalledTimes(0);
 
diff --git a/public/app/percona/add-instance/components/AddInstance/AddInstance.tsx b/public/app/percona/add-instance/components/AddInstance/AddInstance.tsx
index 12e228e18e4d4..06d8eb0613d29 100644
--- a/public/app/percona/add-instance/components/AddInstance/AddInstance.tsx
+++ b/public/app/percona/add-instance/components/AddInstance/AddInstance.tsx
@@ -1,59 +1,65 @@
 import React, { FC, useMemo } from 'react';
 
-import { useStyles } from '@grafana/ui';
-import { Database } from 'app/percona/shared/components/Elements/Icons/Database';
+import { Card, Icon, useStyles2 } from '@grafana/ui';
 import { Databases } from 'app/percona/shared/core';
 
 import { InstanceTypesExtra, InstanceAvailableType } from '../../panel.types';
 
 import { Messages } from './AddInstance.messages';
 import { getStyles } from './AddInstance.styles';
-import { AddInstanceProps, SelectInstanceProps } from './AddInstance.types';
+import { AddInstanceProps, InstanceListItem, SelectInstanceProps } from './AddInstance.types';
 
-export const SelectInstance: FC<SelectInstanceProps> = ({ type, selectInstanceType, title }) => {
-  const styles = useStyles(getStyles);
+export const SelectInstance: FC<SelectInstanceProps> = ({ type, isSelected, icon, selectInstanceType, title }) => {
+  const styles = useStyles2(getStyles);
 
   return (
-    <button
-      className={styles.navigationButton}
+    <Card
       data-testid={`${type}-instance`}
+      isSelected={isSelected}
       onClick={selectInstanceType(type)}
-      type="button"
+      className={styles.InstanceCard}
     >
-      <Database />
-      <span className={styles.addInstanceTitle}>{title}</span>
-      <span className={styles.addInstance}>{Messages.titles.addInstance}</span>
-    </button>
+      <Card.Heading>{title}</Card.Heading>
+      <Card.Description>{Messages.titles.addInstance}</Card.Description>
+      <Card.Figure>
+        <Icon size="xxxl" name={icon ? icon : 'database'} />
+      </Card.Figure>
+    </Card>
   );
 };
 
-export const AddInstance: FC<AddInstanceProps> = ({ onSelectInstanceType, showAzure }) => {
-  const styles = useStyles(getStyles);
-  const instanceList = useMemo(
+export const AddInstance: FC<AddInstanceProps> = ({ selectedInstanceType, onSelectInstanceType, showAzure }) => {
+  const styles2 = useStyles2(getStyles);
+  const instanceList = useMemo<InstanceListItem[]>(
     () => [
+      { type: Databases.postgresql, title: Messages.titles.postgresql, icon: 'percona-database-postgresql' },
+      { type: Databases.mysql, title: Messages.titles.mysql, icon: 'percona-database-mysql' },
+      { type: Databases.mongodb, title: Messages.titles.mongodb, icon: 'percona-database-mongodb' },
+      { type: Databases.proxysql, title: Messages.titles.proxysql, icon: 'percona-database-proxysql' },
+      { type: Databases.haproxy, title: Messages.titles.haproxy, icon: 'percona-database-haproxy' },
       { type: InstanceTypesExtra.rds, title: Messages.titles.rds },
-      { type: InstanceTypesExtra.azure, title: Messages.titles.azure, isHidden: !showAzure },
-      { type: Databases.postgresql, title: Messages.titles.postgresql },
-      { type: Databases.mysql, title: Messages.titles.mysql },
-      { type: Databases.mongodb, title: Messages.titles.mongodb },
-      { type: Databases.proxysql, title: Messages.titles.proxysql },
       { type: InstanceTypesExtra.external, title: Messages.titles.external },
-      { type: Databases.haproxy, title: Messages.titles.haproxy },
+      { type: InstanceTypesExtra.azure, title: Messages.titles.azure, isHidden: !showAzure },
     ],
     [showAzure]
   );
 
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
   const selectInstanceType = (type: string) => () => onSelectInstanceType({ type: type as InstanceAvailableType });
 
   return (
-    <section className={styles.content}>
-      <nav className={styles.navigationPanel}>
+    <section className={styles2.Content}>
+      <h2>{Messages.sectionTitle}</h2>
+      <p className={styles2.Description}>{Messages.description}</p>
+      <nav className={styles2.NavigationPanel}>
         {instanceList
           .filter(({ isHidden }) => !isHidden)
           .map((item) => (
             <SelectInstance
+              isSelected={item.type === selectedInstanceType.type}
               selectInstanceType={selectInstanceType}
               type={item.type}
+              icon={item.icon}
               title={item.title}
               key={item.type}
             />
diff --git a/public/app/percona/add-instance/components/AddInstance/AddInstance.types.ts b/public/app/percona/add-instance/components/AddInstance/AddInstance.types.ts
index 01305b9320052..0ba96101ee070 100644
--- a/public/app/percona/add-instance/components/AddInstance/AddInstance.types.ts
+++ b/public/app/percona/add-instance/components/AddInstance/AddInstance.types.ts
@@ -1,12 +1,22 @@
-import { InstanceAvailable } from '../../panel.types';
+import { IconName } from '@grafana/data';
+import { Databases } from 'app/percona/shared/core';
 
-export interface SelectInstanceProps {
-  type: string;
-  title: string;
+import { InstanceAvailable, InstanceTypesExtra } from '../../panel.types';
+
+export interface SelectInstanceProps extends InstanceListItem {
+  isSelected: boolean;
   selectInstanceType: (type: string) => () => void;
 }
 
 export interface AddInstanceProps {
+  selectedInstanceType: InstanceAvailable;
   onSelectInstanceType: (arg: InstanceAvailable) => void;
   showAzure: boolean;
 }
+
+export interface InstanceListItem {
+  type: InstanceTypesExtra | Databases;
+  icon?: IconName;
+  title: string;
+  isHidden?: boolean;
+}
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.messages.ts b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.messages.ts
index 2f5b4055c7f5f..6d4c71c125f01 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.messages.ts
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.messages.ts
@@ -1,4 +1,15 @@
 export const Messages = {
+  pageTitleSelection: 'Inventory / Add service / Step 1 of 2',
+  pageTitleConfiguration: 'Inventory / Add service / Step 2 of 2',
+  selectionStep: {
+    cancel: 'Cancel',
+    next: 'Next step: Configuration',
+  },
+  configurationStep: {
+    cancel: 'Cancel',
+    next: 'Add service',
+    discover: 'Discover',
+  },
   form: {
     trackingOptions: {
       none: "Don't track",
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.styles.ts b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.styles.ts
index 9a4945cbd192e..a94714ccf2d2c 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.styles.ts
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.styles.ts
@@ -31,7 +31,7 @@ export const getStyles = ({ spacing }: GrafanaTheme) => ({
     white-space: nowrap;
   `,
   addRemoteInstanceTitle: css`
-    text-align: center;
+    text-align: left;
   `,
   addRemoteInstanceButtons: css`
     margin-top: ${spacing.md};
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.test.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.test.tsx
index 95d5ab2d1621c..795738cccda6f 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.test.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.test.tsx
@@ -20,7 +20,7 @@ jest.mock('@percona/platform-core', () => {
 describe('Add remote instance:: ', () => {
   it('should render correct for mysql and postgres and highlight empty mandatory fields on submit', async () => {
     const type = Databases.mysql;
-    render(<AddRemoteInstance instance={{ type, credentials: {} }} selectInstance={jest.fn()} />);
+    render(<AddRemoteInstance onSubmit={jest.fn()} instance={{ type, credentials: {} }} selectInstance={jest.fn()} />);
 
     expect(screen.getByTestId('address-text-input').classList.contains('invalid')).toBe(false);
     expect(screen.getByTestId('username-text-input').classList.contains('invalid')).toBe(false);
@@ -35,7 +35,7 @@ describe('Add remote instance:: ', () => {
 
   it('should render for external service and highlight empty mandatory fields on submit', async () => {
     const type = InstanceTypesExtra.external;
-    render(<AddRemoteInstance instance={{ type, credentials: {} }} selectInstance={jest.fn()} />);
+    render(<AddRemoteInstance onSubmit={jest.fn()} instance={{ type, credentials: {} }} selectInstance={jest.fn()} />);
 
     expect(screen.getByTestId('address-text-input').classList.contains('invalid')).toBe(false);
     expect(screen.getByTestId('metrics_path-text-input').classList.contains('invalid')).toBe(false);
@@ -55,7 +55,7 @@ describe('Add remote instance:: ', () => {
   it('should render correct for HAProxy and highlight empty mandatory fields on submit', async () => {
     const type = Databases.haproxy;
 
-    render(<AddRemoteInstance instance={{ type, credentials: {} }} selectInstance={jest.fn()} />);
+    render(<AddRemoteInstance onSubmit={jest.fn()} instance={{ type, credentials: {} }} selectInstance={jest.fn()} />);
 
     expect(screen.getByTestId('address-text-input').classList.contains('invalid')).toBe(false);
     expect(screen.getByTestId('username-text-input').classList.contains('invalid')).toBe(false);
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.tsx
index b70744326bb81..7424dae58395c 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.tsx
@@ -5,7 +5,7 @@ import { FormApi } from 'final-form';
 import React, { FC, useCallback, useMemo, useState } from 'react';
 import { Form as FormFinal } from 'react-final-form';
 
-import { Button, useStyles } from '@grafana/ui';
+import { useStyles } from '@grafana/ui';
 import { useCancelToken } from 'app/percona/shared/components/hooks/cancelToken.hook';
 import { Databases } from 'app/percona/shared/core';
 import { isApiCancelError } from 'app/percona/shared/helpers/api';
@@ -35,7 +35,10 @@ import {
 import { ExternalServiceConnectionDetails } from './FormParts/ExternalServiceConnectionDetails/ExternalServiceConnectionDetails';
 import { HAProxyConnectionDetails } from './FormParts/HAProxyConnectionDetails/HAProxyConnectionDetails';
 
-const AddRemoteInstance: FC<AddRemoteInstanceProps> = ({ instance: { type, credentials }, selectInstance }) => {
+const AddRemoteInstance: FC<AddRemoteInstanceProps> = ({
+  instance: { type, credentials },
+  onSubmit: submitWrapper,
+}) => {
   const styles = useStyles(getStyles);
 
   const { remoteInstanceCredentials, discoverName } = getInstanceData(type, credentials);
@@ -128,13 +131,13 @@ const AddRemoteInstance: FC<AddRemoteInstanceProps> = ({ instance: { type, crede
     if (databaseType === '') {
       return Messages.form.titles.addRemoteInstance;
     }
-    return `Add remote ${INSTANCE_TYPES_LABELS[databaseType]} Instance`;
+    return `Configuring ${INSTANCE_TYPES_LABELS[databaseType]} service`;
   };
 
   return (
     <div className={styles.formWrapper}>
       <FormFinal
-        onSubmit={onSubmit}
+        onSubmit={(values) => submitWrapper(onSubmit(values))}
         initialValues={initialValues}
         mutators={{
           setValue: ([field, value], state, { changeValue }) => {
@@ -142,23 +145,9 @@ const AddRemoteInstance: FC<AddRemoteInstanceProps> = ({ instance: { type, crede
           },
         }}
         render={({ form, handleSubmit }) => (
-          <form onSubmit={handleSubmit} data-testid="add-remote-instance-form">
-            <h4 className={styles.addRemoteInstanceTitle}>{getHeader(type)}</h4>
+          <form id="add-instance-form" onSubmit={handleSubmit} data-testid="add-remote-instance-form">
+            <h3 className={styles.addRemoteInstanceTitle}>{getHeader(type)}</h3>
             {formParts(form)}
-            <div className={styles.addRemoteInstanceButtons}>
-              <Button id="addInstance" disabled={loading} type="submit">
-                {Messages.form.buttons.addService}
-              </Button>
-              <Button
-                variant="secondary"
-                onClick={() => selectInstance({ type: '' })}
-                disabled={loading}
-                className={styles.returnButton}
-                icon="arrow-left"
-              >
-                {Messages.form.buttons.toMenu}
-              </Button>
-            </div>
           </form>
         )}
       />
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.types.ts b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.types.ts
index 0e71ec7965dee..c7832989b7dfa 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.types.ts
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.types.ts
@@ -21,6 +21,7 @@ export interface InstanceData {
 export interface AddRemoteInstanceProps {
   instance: InstanceAvailable;
   selectInstance: SelectInstance;
+  onSubmit: (submitPromise: Promise<void>) => void;
 }
 
 export enum DefaultPorts {
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/AdditionalOptions/AdditionalOptions.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/AdditionalOptions/AdditionalOptions.tsx
index 0f77909824ef9..233f530a4d44c 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/AdditionalOptions/AdditionalOptions.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/AdditionalOptions/AdditionalOptions.tsx
@@ -7,7 +7,7 @@ import {
 import { FormApi } from 'final-form';
 import React, { FC, useEffect, useState } from 'react';
 
-import { useStyles } from '@grafana/ui';
+import { useStyles2 } from '@grafana/ui';
 import { InstanceAvailableType, RemoteInstanceCredentials } from 'app/percona/add-instance/panel.types';
 import { Databases } from 'app/percona/shared/core';
 
@@ -27,12 +27,12 @@ export const AdditionalOptionsFormPart: FC<AdditionalOptionsFormPartProps> = ({
   remoteInstanceCredentials,
   form,
 }) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
 
   return (
     <div className={styles.groupWrapper}>
       <h4 className={styles.sectionHeader}>{Messages.form.titles.additionalOptions}</h4>
-      <div>
+      <div className={styles.additionalOptions}>
         <CheckboxField
           label={Messages.form.labels.additionalOptions.skipConnectionCheck}
           name="skip_connection_check"
@@ -45,11 +45,11 @@ export const AdditionalOptionsFormPart: FC<AdditionalOptionsFormPartProps> = ({
 
 export const PostgreSQLAdditionalOptions: FC<PostgreSQLAdditionalOptionsProps> = ({ isRDS, isAzure }) => (
   <>
+    <h4>{Messages.form.labels.trackingOptions}</h4>
     <RadioButtonGroupField
       name="tracking"
       data-testid="tracking-options-radio-button-group"
       options={isRDS || isAzure ? rdsTrackingOptions : trackingOptions}
-      label={Messages.form.labels.trackingOptions}
     />
   </>
 );
@@ -66,6 +66,7 @@ const getTablestatValues = (type: TablestatOptionsInterface) => {
 const MySQLOptions = ({ form }: { form: FormApi }) => {
   const selectedOption = form.getState().values && form.getState().values['tablestat-options'];
   const [selectedValue, setSelectedValue] = useState<string>(selectedOption || TablestatOptionsInterface.disabled);
+  const styles = useStyles2(getStyles);
 
   useEffect(() => {
     setSelectedValue(selectedOption);
@@ -74,19 +75,25 @@ const MySQLOptions = ({ form }: { form: FormApi }) => {
 
   return (
     <>
-      <RadioButtonGroupField
-        name="tablestat-options"
-        data-testid="tablestat-options-radio-button-group"
-        defaultValue={selectedValue}
-        options={tablestatOptions}
-        label={Messages.form.labels.additionalOptions.tablestatOptions}
-      />
-      <NumberInputField
-        name="tablestats_group_table_limit"
-        defaultValue={-1}
-        disabled={selectedValue !== TablestatOptionsInterface.custom}
-        validate={platformCoreValidators.containsNumber}
-      />
+      <h4>{Messages.form.labels.additionalOptions.tablestatOptions}</h4>
+      <div className={styles.group}>
+        <RadioButtonGroupField
+          name="tablestat-options"
+          data-testid="tablestat-options-radio-button-group"
+          defaultValue={selectedValue}
+          options={tablestatOptions}
+          className={styles.radioField}
+          label={Messages.form.labels.additionalOptions.tablestatOptionsState}
+          fullWidth
+        />
+        <NumberInputField
+          name="tablestats_group_table_limit"
+          defaultValue={-1}
+          disabled={selectedValue !== TablestatOptionsInterface.custom}
+          validate={platformCoreValidators.containsNumber}
+          label={Messages.form.labels.additionalOptions.tablestatOptionsLimit}
+        />
+      </div>
     </>
   );
 };
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/ExternalServiceConnectionDetails/ExternalServiceConnectionDetails.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/ExternalServiceConnectionDetails/ExternalServiceConnectionDetails.tsx
index 99371f7943b87..b9d7618eb18c0 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/ExternalServiceConnectionDetails/ExternalServiceConnectionDetails.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/ExternalServiceConnectionDetails/ExternalServiceConnectionDetails.tsx
@@ -1,8 +1,7 @@
 import { PasswordInputField, RadioButtonGroupField, TextInputField, validators } from '@percona/platform-core';
 import React, { FC, useCallback, useEffect, useMemo } from 'react';
 
-import { useStyles } from '@grafana/ui';
-import { LinkTooltip } from 'app/percona/shared/components/Elements/LinkTooltip/LinkTooltip';
+import { useStyles2 } from '@grafana/ui';
 import Validators from 'app/percona/shared/helpers/validators';
 
 import { metricsParametersOptions, schemaOptions } from '../FormParts.constants';
@@ -11,7 +10,7 @@ import { getStyles } from '../FormParts.styles';
 import { FormPartProps, MetricsParameters, Schema } from '../FormParts.types';
 
 export const ExternalServiceConnectionDetails: FC<FormPartProps> = ({ form }) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
   const formValues = form.getState().values;
   const selectedOption = formValues?.metricsParameters;
   const urlValue = formValues?.url;
@@ -45,91 +44,100 @@ export const ExternalServiceConnectionDetails: FC<FormPartProps> = ({ form }) =>
   return (
     <div className={styles.groupWrapper}>
       <h4 className={styles.sectionHeader}>{Messages.form.titles.connectionDetails}</h4>
-      <div className={styles.labelWrapper} data-testid="username-label">
-        <span>{Messages.form.labels.externalService.serviceName}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.externalService.serviceName} icon="info-circle" />
+      <div className={styles.group}>
+        <TextInputField
+          name="serviceName"
+          label={Messages.form.labels.externalService.serviceName}
+          tooltipText={Messages.form.tooltips.externalService.serviceName}
+          placeholder={Messages.form.placeholders.externalService.serviceName}
+        />
+        <div />
       </div>
-      <TextInputField name="serviceName" placeholder={Messages.form.placeholders.externalService.serviceName} />
-      <div className={styles.labelWrapper} data-testid="username-label">
-        <span>{Messages.form.labels.externalService.group}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.externalService.group} icon="info-circle" />
+      <div className={styles.group}>
+        <TextInputField
+          name="group"
+          label={Messages.form.labels.externalService.group}
+          tooltipText={Messages.form.tooltips.externalService.group}
+        />
+        <div />
       </div>
-      <TextInputField name="group" />
-      <div className={styles.labelWrapper} data-testid="address-label">
-        <span>{Messages.form.labels.externalService.connectionParameters}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.externalService.url} icon="info-circle" />
+      <div className={styles.group}>
+        <RadioButtonGroupField
+          name="metricsParameters"
+          data-testid="metrics-parameters-field"
+          label={Messages.form.labels.externalService.connectionParameters}
+          tooltipText={Messages.form.tooltips.externalService.url}
+          options={metricsParametersOptions}
+        />
       </div>
-      <RadioButtonGroupField
-        name="metricsParameters"
-        data-testid="metrics-parameters-field"
-        options={metricsParametersOptions}
-      />
       {selectedOption === MetricsParameters.parsed && (
-        <>
-          <div className={styles.labelWrapper} data-testid="address-label">
-            <span>{Messages.form.labels.externalService.url}</span>
-            <LinkTooltip tooltipContent={Messages.form.tooltips.externalService.url} icon="info-circle" />
-          </div>
-          <div className={styles.urlFieldWrapper}>
-            <TextInputField
-              name="url"
-              placeholder={Messages.form.placeholders.externalService.url}
-              validators={[Validators.validateUrl, validators.required]}
-            />
-          </div>
-        </>
+        <div className={styles.urlFieldWrapper}>
+          <TextInputField
+            name="url"
+            label={Messages.form.labels.externalService.url}
+            tooltipText={Messages.form.tooltips.externalService.url}
+            placeholder={Messages.form.placeholders.externalService.url}
+            validators={[Validators.validateUrl, validators.required]}
+          />
+        </div>
       )}
       {selectedOption === MetricsParameters.manually && (
         <>
-          <div className={styles.labelWrapper} data-testid="address-label">
-            <span>{Messages.form.labels.externalService.schema}</span>
-            <LinkTooltip tooltipContent={Messages.form.tooltips.externalService.schema} icon="info-circle" />
-          </div>
-          <RadioButtonGroupField name="schema" data-testid="http-schema-field" options={schemaOptions} />
-          <div className={styles.labelWrapper} data-testid="address-label">
-            <span>{Messages.form.labels.externalService.address}</span>
-            <LinkTooltip tooltipContent={Messages.form.tooltips.externalService.address} icon="info-circle" />
-          </div>
-          <TextInputField
-            name="address"
-            initialValue=""
-            placeholder={Messages.form.placeholders.externalService.address}
-            validators={[validators.required]}
-          />
-          <div className={styles.labelWrapper} data-testid="service-name-label">
-            <span>{Messages.form.labels.externalService.metricsPath}</span>
-            <LinkTooltip tooltipContent={Messages.form.tooltips.externalService.metricsPath} icon="info-circle" />
+          <div className={styles.group}>
+            <RadioButtonGroupField
+              name="schema"
+              data-testid="http-schema-field"
+              label={Messages.form.labels.externalService.schema}
+              tooltipText={Messages.form.tooltips.externalService.schema}
+              options={schemaOptions}
+            />
+            <div />
           </div>
-          <TextInputField
-            name="metrics_path"
-            initialValue=""
-            placeholder={Messages.form.placeholders.externalService.metricsPath}
-          />
-          <div className={styles.labelWrapper} data-testid="port-label">
-            <span>{Messages.form.labels.externalService.port}</span>
-            <LinkTooltip tooltipContent={Messages.form.tooltips.externalService.port} icon="info-circle" />
+          <div className={styles.group}>
+            <TextInputField
+              name="address"
+              initialValue=""
+              label={Messages.form.labels.externalService.address}
+              tooltipText={Messages.form.tooltips.externalService.address}
+              placeholder={Messages.form.placeholders.externalService.address}
+              validators={[validators.required]}
+            />
+            <TextInputField
+              name="metrics_path"
+              initialValue=""
+              label={Messages.form.labels.externalService.metricsPath}
+              tooltipText={Messages.form.tooltips.externalService.metricsPath}
+              placeholder={Messages.form.placeholders.externalService.metricsPath}
+            />
           </div>
-          <TextInputField name="port" placeholder="Port" validators={portValidators} />
-          <div className={styles.labelWrapper} data-testid="username-label">
-            <span>{Messages.form.labels.externalService.username}</span>
-            <LinkTooltip tooltipContent={Messages.form.tooltips.externalService.username} icon="info-circle" />
+          <div className={styles.group}>
+            <TextInputField
+              name="port"
+              placeholder="Port"
+              label={Messages.form.labels.externalService.port}
+              tooltipText={Messages.form.tooltips.externalService.port}
+              validators={portValidators}
+            />
+            <div />
           </div>
-          <TextInputField
-            name="username"
-            initialValue=""
-            placeholder={Messages.form.placeholders.externalService.username}
-            format={trim}
-          />
-          <div className={styles.labelWrapper} data-testid="password-label">
-            <span>{Messages.form.labels.externalService.password}</span>
-            <LinkTooltip tooltipContent={Messages.form.tooltips.externalService.password} icon="info-circle" />
+          <div className={styles.group}>
+            <TextInputField
+              name="username"
+              initialValue=""
+              label={Messages.form.labels.externalService.username}
+              tooltipText={Messages.form.tooltips.externalService.username}
+              placeholder={Messages.form.placeholders.externalService.username}
+              format={trim}
+            />
+            <PasswordInputField
+              name="password"
+              initialValue=""
+              label={Messages.form.labels.externalService.password}
+              tooltipText={Messages.form.tooltips.externalService.password}
+              placeholder={Messages.form.placeholders.externalService.password}
+              format={trim}
+            />
           </div>
-          <PasswordInputField
-            name="password"
-            initialValue=""
-            placeholder={Messages.form.placeholders.externalService.password}
-            format={trim}
-          />
         </>
       )}
     </div>
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.messages.ts b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.messages.ts
index 1eba3735029a3..03502340fd0c7 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.messages.ts
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.messages.ts
@@ -63,6 +63,8 @@ export const Messages = {
         disableBasicMetrics: 'Disable Basic Metrics',
         disableEnchancedMetrics: 'Disable Enhanced Metrics',
         tablestatOptions: 'Table statistics limit',
+        tablestatOptionsState: 'State',
+        tablestatOptionsLimit: 'Limit value',
         azureDatabaseExporter: 'Enable Monitoring by Azure Metrics Exporter',
       },
     },
@@ -97,7 +99,7 @@ export const Messages = {
         az: 'Availability Zone',
         replicationSet: 'Replication set',
         cluster: 'Cluster',
-        customLabels: '"Custom labels\n Format:\n      key1:value1\n      key2:value2"',
+        customLabels: 'key1:value1\nkey2:value2',
       },
       additionalOptions: {},
     },
@@ -147,5 +149,10 @@ export const Messages = {
       parseURL: 'Parse URL',
       connectionDetails: 'External service connection details',
     },
+    descriptions: {
+      labels:
+        'Please choose some labels for help identify your services. Labels can be useful, for example, to help define groupings and segment access to build custom user roles. Editing existing labels may affect your inventory and its data.',
+      customLabels: 'Follow the format as exemplified below, one label per line.',
+    },
   },
 };
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.styles.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.styles.tsx
index 40e6656cafb10..c14adf02fbeaa 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.styles.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.styles.tsx
@@ -1,10 +1,10 @@
 import { css } from '@emotion/css';
 
-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
-export const getStyles = ({ spacing }: GrafanaTheme) => ({
+export const getStyles = ({ breakpoints, spacing, colors }: GrafanaTheme2) => ({
   groupWrapper: css`
-    width: 50%;
+    width: ${breakpoints.values.md}px;
   `,
   addServiceButton: css`
     margin-top: 30px;
@@ -19,9 +19,9 @@ export const getStyles = ({ spacing }: GrafanaTheme) => ({
     font-weight: 500;
     color: rgb(159, 167, 179);
     svg {
-      margin-left: ${spacing.xs};
+      margin-left: ${spacing(1)};
     }
-    margin-bottom: ${spacing.xs};
+    margin-bottom: ${spacing(1)};
   `,
   urlFieldGroupWrapper: css`
     display: flex;
@@ -32,4 +32,41 @@ export const getStyles = ({ spacing }: GrafanaTheme) => ({
     width: 100%;
     margin-right: 5px;
   `,
+  group: css`
+    display: flex;
+    flex-direction: row;
+    gap: ${spacing(2)};
+
+    ${breakpoints.down('md')} {
+      flex-wrap: wrap;
+    }
+
+    & > * {
+      width: 50%;
+      margin-bottom: ${spacing(1)} !important;
+    }
+  `,
+  radioField: css`
+    label {
+      /* match radio field height with inputs */
+      margin-top: -3px;
+      padding-bottom: 3px;
+      padding-top: 3px;
+      height: auto;
+    }
+  `,
+  description: css`
+    color: ${colors.text.secondary};
+    font-weight: normal;
+    margin-bottom: 0;
+  `,
+  additionalOptions: css`
+    & > div:not(:last-child) {
+      margin-bottom: -${spacing(2)} !important;
+    }
+
+    h4 {
+      margin: ${spacing(2)} 0;
+    }
+  `,
 });
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/HAProxyConnectionDetails/HAProxyConnectionDetails.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/HAProxyConnectionDetails/HAProxyConnectionDetails.tsx
index d05242ec20fb9..b7bc5ee8e50d7 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/HAProxyConnectionDetails/HAProxyConnectionDetails.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/HAProxyConnectionDetails/HAProxyConnectionDetails.tsx
@@ -1,8 +1,7 @@
 import { PasswordInputField, TextInputField, validators } from '@percona/platform-core';
 import React, { FC, useCallback, useMemo } from 'react';
 
-import { useStyles } from '@grafana/ui';
-import { LinkTooltip } from 'app/percona/shared/components/Elements/LinkTooltip/LinkTooltip';
+import { useStyles2 } from '@grafana/ui';
 import Validators from 'app/percona/shared/helpers/validators';
 
 import { Messages } from '../FormParts.messages';
@@ -10,7 +9,7 @@ import { getStyles } from '../FormParts.styles';
 import { MainDetailsFormPartProps } from '../FormParts.types';
 
 export const HAProxyConnectionDetails: FC<MainDetailsFormPartProps> = ({ remoteInstanceCredentials }) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
 
   const portValidators = useMemo(() => [validators.required, Validators.validatePort], []);
   const trim = useCallback((value) => (value ? value.trim() : value), []);
@@ -18,55 +17,57 @@ export const HAProxyConnectionDetails: FC<MainDetailsFormPartProps> = ({ remoteI
   return (
     <div className={styles.groupWrapper}>
       <h4 className={styles.sectionHeader}>{Messages.form.titles.mainDetails}</h4>
-      <div className={styles.labelWrapper} data-testid="address-label">
-        <span>{Messages.form.labels.mainDetails.address}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.address} icon="info-circle" />
+      <div className={styles.group}>
+        <TextInputField
+          name="serviceName"
+          initialValue=""
+          label={Messages.form.labels.mainDetails.serviceName}
+          tooltipText={Messages.form.tooltips.mainDetails.serviceName}
+          tooltipIcon="info-circle"
+          placeholder={Messages.form.placeholders.mainDetails.serviceName}
+        />
+        <div />
       </div>
-      <TextInputField
-        name="address"
-        initialValue=""
-        placeholder={Messages.form.placeholders.mainDetails.address}
-        validators={[validators.required]}
-      />
-      <div className={styles.labelWrapper} data-testid="service-name-label">
-        <span>{Messages.form.labels.mainDetails.serviceName}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.serviceName} icon="info-circle" />
+      <div className={styles.group}>
+        <TextInputField
+          name="address"
+          initialValue=""
+          label={Messages.form.labels.mainDetails.address}
+          tooltipText={Messages.form.tooltips.mainDetails.address}
+          tooltipIcon="info-circle"
+          placeholder={Messages.form.placeholders.mainDetails.address}
+          validators={[validators.required]}
+        />
+        <TextInputField
+          name="port"
+          initialValue=""
+          label={Messages.form.labels.mainDetails.port}
+          tooltipText={Messages.form.tooltips.haproxy.port}
+          tooltipIcon="info-circle"
+          placeholder={`Port (default: ${remoteInstanceCredentials.port} )`}
+          validators={portValidators}
+        />
       </div>
-      <TextInputField
-        name="serviceName"
-        initialValue=""
-        placeholder={Messages.form.placeholders.mainDetails.serviceName}
-      />
-      <div className={styles.labelWrapper} data-testid="port-label">
-        <span>{Messages.form.labels.mainDetails.port}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.haproxy.port} icon="info-circle" />
+      <div className={styles.group}>
+        <TextInputField
+          name="username"
+          initialValue=""
+          label={Messages.form.labels.mainDetails.username}
+          tooltipText={Messages.form.tooltips.haproxy.username}
+          tooltipIcon="info-circle"
+          placeholder={Messages.form.placeholders.mainDetails.username}
+          format={trim}
+        />
+        <PasswordInputField
+          name="password"
+          initialValue=""
+          label={Messages.form.labels.mainDetails.password}
+          tooltipText={Messages.form.tooltips.haproxy.password}
+          tooltipIcon="info-circle"
+          placeholder={Messages.form.placeholders.mainDetails.password}
+          format={trim}
+        />
       </div>
-      <TextInputField
-        name="port"
-        initialValue=""
-        placeholder={`Port (default: ${remoteInstanceCredentials.port} )`}
-        validators={portValidators}
-      />
-      <div className={styles.labelWrapper} data-testid="username-label">
-        <span>{Messages.form.labels.mainDetails.username}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.haproxy.username} icon="info-circle" />
-      </div>
-      <TextInputField
-        name="username"
-        initialValue=""
-        placeholder={Messages.form.placeholders.mainDetails.username}
-        format={trim}
-      />
-      <div className={styles.labelWrapper} data-testid="password-label">
-        <span>{Messages.form.labels.mainDetails.password}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.haproxy.password} icon="info-circle" />
-      </div>
-      <PasswordInputField
-        name="password"
-        initialValue=""
-        placeholder={Messages.form.placeholders.mainDetails.password}
-        format={trim}
-      />
     </div>
   );
 };
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.tsx
index baecc62abcba8..4c2c77b32960f 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.tsx
@@ -1,51 +1,78 @@
 import { TextareaInputField, TextInputField } from '@percona/platform-core';
 import React, { FC, useMemo } from 'react';
 
-import { useStyles } from '@grafana/ui';
-import { LinkTooltip } from 'app/percona/shared/components/Elements/LinkTooltip/LinkTooltip';
+import { useStyles2 } from '@grafana/ui';
 import Validators from 'app/percona/shared/helpers/validators';
 
 import { Messages } from '../FormParts.messages';
 import { getStyles } from '../FormParts.styles';
 
-export const LabelsFormPart: FC = () => {
-  const styles = useStyles(getStyles);
+import { LabelsProps } from './Labels.types';
+
+export const LabelsFormPart: FC<LabelsProps> = ({ showNodeFields = true }) => {
+  const styles = useStyles2(getStyles);
   const customLabelsValidators = useMemo(() => [Validators.validateKeyValue], []);
 
   return (
     <div className={styles.groupWrapper}>
       <h4 className={styles.sectionHeader}>{Messages.form.titles.labels}</h4>
-      <TextInputField
-        name="environment"
-        label={Messages.form.labels.labels.environment}
-        placeholder={Messages.form.placeholders.labels.environment}
-      />
-      <div className={styles.labelWrapper} data-testid="username-label">
-        <span>{Messages.form.labels.labels.region}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.labels.region} icon="info-circle" />
+      <p>{Messages.form.descriptions.labels}</p>
+      <div className={styles.group}>
+        <TextInputField
+          name="environment"
+          label={Messages.form.labels.labels.environment}
+          placeholder={Messages.form.placeholders.labels.environment}
+        />
+        <TextInputField
+          name="cluster"
+          label={Messages.form.labels.labels.cluster}
+          placeholder={Messages.form.placeholders.labels.cluster}
+        />
+      </div>
+      <div className={styles.group}>
+        <TextInputField
+          name="replication_set"
+          label={Messages.form.labels.labels.replicationSet}
+          placeholder={Messages.form.placeholders.labels.replicationSet}
+        />
+        {showNodeFields ? (
+          <TextInputField
+            name="region"
+            placeholder={Messages.form.placeholders.labels.region}
+            label={Messages.form.labels.labels.region}
+            tooltipIcon="info-circle"
+            tooltipText={Messages.form.tooltips.labels.region}
+          />
+        ) : (
+          <div />
+        )}
       </div>
-      <TextInputField name="region" placeholder={Messages.form.placeholders.labels.region} />
-      <div className={styles.labelWrapper} data-testid="username-label">
-        <span>{Messages.form.labels.labels.az}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.labels.az} icon="info-circle" />
+      {showNodeFields && (
+        <div className={styles.group}>
+          <TextInputField
+            name="az"
+            placeholder={Messages.form.placeholders.labels.az}
+            label={Messages.form.labels.labels.az}
+            tooltipText={Messages.form.tooltips.labels.az}
+            tooltipIcon="info-circle"
+          />
+          <div />
+        </div>
+      )}
+      <div className={styles.group}>
+        <TextareaInputField
+          name="custom_labels"
+          label={
+            <div>
+              <div>{Messages.form.labels.labels.customLabels}</div>
+              <p className={styles.description}>{Messages.form.descriptions.customLabels}</p>
+            </div>
+          }
+          placeholder={Messages.form.placeholders.labels.customLabels}
+          validators={customLabelsValidators}
+        />
+        <div />
       </div>
-      <TextInputField name="az" placeholder={Messages.form.placeholders.labels.az} />
-      <TextInputField
-        name="replication_set"
-        label={Messages.form.labels.labels.replicationSet}
-        placeholder={Messages.form.placeholders.labels.replicationSet}
-      />
-      <TextInputField
-        name="cluster"
-        label={Messages.form.labels.labels.cluster}
-        placeholder={Messages.form.placeholders.labels.cluster}
-      />
-      <TextareaInputField
-        name="custom_labels"
-        label={Messages.form.labels.labels.customLabels}
-        placeholder={Messages.form.placeholders.labels.customLabels}
-        validators={customLabelsValidators}
-      />
     </div>
   );
 };
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.types.ts b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.types.ts
new file mode 100644
index 0000000000000..ebfea74c82b5f
--- /dev/null
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.types.ts
@@ -0,0 +1,3 @@
+export interface LabelsProps {
+  showNodeFields?: boolean;
+}
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MainDetails/MainDetails.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MainDetails/MainDetails.tsx
index c61889e933128..147775fee51a5 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MainDetails/MainDetails.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MainDetails/MainDetails.tsx
@@ -1,8 +1,7 @@
 import { PasswordInputField, TextInputField, validators } from '@percona/platform-core';
 import React, { FC, useMemo } from 'react';
 
-import { useStyles } from '@grafana/ui';
-import { LinkTooltip } from 'app/percona/shared/components/Elements/LinkTooltip/LinkTooltip';
+import { useStyles2 } from '@grafana/ui';
 import Validators from 'app/percona/shared/helpers/validators';
 
 import { Messages } from '../FormParts.messages';
@@ -10,7 +9,7 @@ import { getStyles } from '../FormParts.styles';
 import { MainDetailsFormPartProps } from '../FormParts.types';
 
 export const MainDetailsFormPart: FC<MainDetailsFormPartProps> = ({ form, remoteInstanceCredentials }) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
   const formValues = form && form.getState().values;
   const tlsFlag = formValues && formValues['tls'];
 
@@ -20,50 +19,55 @@ export const MainDetailsFormPart: FC<MainDetailsFormPartProps> = ({ form, remote
   return (
     <div className={styles.groupWrapper}>
       <h4 className={styles.sectionHeader}>{Messages.form.titles.mainDetails}</h4>
-      <div className={styles.labelWrapper} data-testid="address-label">
-        <span>{Messages.form.labels.mainDetails.address}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.address} icon="info-circle" />
+      <div className={styles.group}>
+        <TextInputField
+          name="serviceName"
+          label={Messages.form.labels.mainDetails.serviceName}
+          tooltipText={Messages.form.tooltips.mainDetails.serviceName}
+          tooltipIcon="info-circle"
+          placeholder={Messages.form.placeholders.mainDetails.serviceName}
+        />
+        <div />
       </div>
-      <TextInputField
-        name="address"
-        placeholder={Messages.form.placeholders.mainDetails.address}
-        validators={[validators.required]}
-        disabled={remoteInstanceCredentials.isRDS}
-      />
-      <div className={styles.labelWrapper} data-testid="service-name-label">
-        <span>{Messages.form.labels.mainDetails.serviceName}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.serviceName} icon="info-circle" />
+      <div className={styles.group}>
+        <TextInputField
+          name="address"
+          label={Messages.form.labels.mainDetails.address}
+          tooltipText={Messages.form.tooltips.mainDetails.address}
+          tooltipIcon="info-circle"
+          placeholder={Messages.form.placeholders.mainDetails.address}
+          validators={[validators.required]}
+          disabled={remoteInstanceCredentials.isRDS}
+        />
+        <TextInputField
+          name="port"
+          label={Messages.form.labels.mainDetails.port}
+          tooltipText={Messages.form.tooltips.mainDetails.port}
+          tooltipIcon="info-circle"
+          placeholder={`Port (default: ${remoteInstanceCredentials.port} )`}
+          validators={portValidators}
+        />
       </div>
-      <TextInputField name="serviceName" placeholder={Messages.form.placeholders.mainDetails.serviceName} />
-      <div className={styles.labelWrapper} data-testid="port-label">
-        <span>{Messages.form.labels.mainDetails.port}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.port} icon="info-circle" />
+      <div className={styles.group}>
+        <TextInputField
+          key={`username-${tlsFlag}`}
+          name="username"
+          label={Messages.form.labels.mainDetails.username}
+          tooltipText={Messages.form.tooltips.mainDetails.username}
+          tooltipIcon="info-circle"
+          placeholder={Messages.form.placeholders.mainDetails.username}
+          validators={userPassValidators}
+        />
+        <PasswordInputField
+          key={`password-${tlsFlag}`}
+          name="password"
+          label={Messages.form.labels.mainDetails.password}
+          tooltipText={Messages.form.tooltips.mainDetails.password}
+          tooltipIcon="info-circle"
+          placeholder={Messages.form.placeholders.mainDetails.password}
+          validators={userPassValidators}
+        />
       </div>
-      <TextInputField
-        name="port"
-        placeholder={`Port (default: ${remoteInstanceCredentials.port} )`}
-        validators={portValidators}
-      />
-      <div className={styles.labelWrapper} data-testid="username-label">
-        <span>{Messages.form.labels.mainDetails.username}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.username} icon="info-circle" />
-      </div>
-      <TextInputField
-        key={`username-${tlsFlag}`}
-        name="username"
-        placeholder={Messages.form.placeholders.mainDetails.username}
-        validators={userPassValidators}
-      />
-      <div className={styles.labelWrapper} data-testid="password-label">
-        <span>{Messages.form.labels.mainDetails.password}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.password} icon="info-circle" />
-      </div>
-      <PasswordInputField
-        key={`password-${tlsFlag}`}
-        name="password"
-        placeholder={Messages.form.placeholders.mainDetails.password}
-        validators={userPassValidators}
-      />
     </div>
   );
 };
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MongoDBConnectionDetails/MongoDBConnectionDetails.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MongoDBConnectionDetails/MongoDBConnectionDetails.tsx
index 6f372d005f1c7..0c0f3b3cf6805 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MongoDBConnectionDetails/MongoDBConnectionDetails.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MongoDBConnectionDetails/MongoDBConnectionDetails.tsx
@@ -1,8 +1,7 @@
 import { PasswordInputField, TextInputField, validators } from '@percona/platform-core';
 import React, { FC, useMemo } from 'react';
 
-import { useStyles } from '@grafana/ui';
-import { LinkTooltip } from 'app/percona/shared/components/Elements/LinkTooltip/LinkTooltip';
+import { useStyles2 } from '@grafana/ui';
 import Validators from 'app/percona/shared/helpers/validators';
 
 import { Messages } from '../FormParts.messages';
@@ -10,7 +9,7 @@ import { getStyles } from '../FormParts.styles';
 import { MainDetailsFormPartProps } from '../FormParts.types';
 
 export const MongoDBConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, remoteInstanceCredentials }) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
   const formValues = form && form.getState().values;
   const tlsFlag = formValues && formValues['tls'];
 
@@ -21,60 +20,67 @@ export const MongoDBConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, r
   return (
     <div className={styles.groupWrapper}>
       <h4 className={styles.sectionHeader}>{Messages.form.titles.mainDetails}</h4>
-      <div className={styles.labelWrapper} data-testid="address-label">
-        <span>{Messages.form.labels.mainDetails.address}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.address} icon="info-circle" />
+      <div className={styles.group}>
+        <TextInputField
+          name="serviceName"
+          label={Messages.form.labels.mainDetails.serviceName}
+          tooltipLinkText={Messages.form.tooltips.mainDetails.serviceName}
+          tooltipIcon="info-circle"
+          placeholder={Messages.form.placeholders.mainDetails.serviceName}
+        />
+        <div />
       </div>
-      <TextInputField
-        name="address"
-        placeholder={Messages.form.placeholders.mainDetails.address}
-        validators={[validators.required]}
-        disabled={remoteInstanceCredentials.isRDS}
-      />
-      <div className={styles.labelWrapper} data-testid="service-name-label">
-        <span>{Messages.form.labels.mainDetails.serviceName}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.serviceName} icon="info-circle" />
+      <div className={styles.group}>
+        <TextInputField
+          name="address"
+          label={Messages.form.labels.mainDetails.address}
+          tooltipText={Messages.form.tooltips.mainDetails.address}
+          tooltipIcon="info-circle"
+          placeholder={Messages.form.placeholders.mainDetails.address}
+          validators={[validators.required]}
+          disabled={remoteInstanceCredentials.isRDS}
+        />
+        <TextInputField
+          name="port"
+          label={Messages.form.labels.mainDetails.port}
+          tooltipText={Messages.form.tooltips.mainDetails.port}
+          tooltipIcon="info-circle"
+          placeholder={`Port (default: ${remoteInstanceCredentials.port} )`}
+          validators={portValidators}
+        />
       </div>
-      <TextInputField name="serviceName" placeholder={Messages.form.placeholders.mainDetails.serviceName} />
-      <div className={styles.labelWrapper} data-testid="port-label">
-        <span>{Messages.form.labels.mainDetails.port}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.port} icon="info-circle" />
+      <div className={styles.group}>
+        <TextInputField
+          key={`username-${tlsFlag}`}
+          name="username"
+          label={Messages.form.labels.mainDetails.username}
+          tooltipText={Messages.form.tooltips.mainDetails.username}
+          tooltipIcon="info-circle"
+          placeholder={Messages.form.placeholders.mainDetails.username}
+          validators={userPassValidators}
+        />
+        <PasswordInputField
+          key={`password-${tlsFlag}`}
+          name="password"
+          label={Messages.form.labels.mainDetails.password}
+          tooltipText={Messages.form.tooltips.mainDetails.password}
+          tooltipIcon="info-circle"
+          placeholder={Messages.form.placeholders.mainDetails.password}
+          validators={userPassValidators}
+        />
       </div>
-      <TextInputField
-        name="port"
-        placeholder={`Port (default: ${remoteInstanceCredentials.port} )`}
-        validators={portValidators}
-      />
-      <div className={styles.labelWrapper} data-testid="username-label">
-        <span>{Messages.form.labels.mainDetails.username}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.username} icon="info-circle" />
+      <div className={styles.group}>
+        <TextInputField
+          key="maxQueryLength"
+          name="maxQueryLength"
+          label={Messages.form.labels.mongodbDetails.maxQueryLength}
+          tooltipText={Messages.form.tooltips.mongodbDetails.maxQueryLength}
+          tooltipIcon="info-circle"
+          placeholder={Messages.form.placeholders.mongodbDetails.maxQueryLength}
+          validators={maxQueryLengthValidators}
+        />
+        <div />
       </div>
-      <TextInputField
-        key={`username-${tlsFlag}`}
-        name="username"
-        placeholder={Messages.form.placeholders.mainDetails.username}
-        validators={userPassValidators}
-      />
-      <div className={styles.labelWrapper} data-testid="password-label">
-        <span>{Messages.form.labels.mainDetails.password}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.password} icon="info-circle" />
-      </div>
-      <PasswordInputField
-        key={`password-${tlsFlag}`}
-        name="password"
-        placeholder={Messages.form.placeholders.mainDetails.password}
-        validators={userPassValidators}
-      />
-      <div className={styles.labelWrapper} data-testid="max-query-length-label">
-        <span>{Messages.form.labels.mongodbDetails.maxQueryLength}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mongodbDetails.maxQueryLength} icon="info-circle" />
-      </div>
-      <TextInputField
-        key="maxQueryLength"
-        name="maxQueryLength"
-        placeholder={Messages.form.placeholders.mongodbDetails.maxQueryLength}
-        validators={maxQueryLengthValidators}
-      />
     </div>
   );
 };
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MySQLConnectionDetails/MySQLConnectionDetails.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MySQLConnectionDetails/MySQLConnectionDetails.tsx
index fbdfb5276e537..8722c983d3464 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MySQLConnectionDetails/MySQLConnectionDetails.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MySQLConnectionDetails/MySQLConnectionDetails.tsx
@@ -1,8 +1,7 @@
 import { PasswordInputField, TextInputField, validators } from '@percona/platform-core';
 import React, { FC, useMemo } from 'react';
 
-import { useStyles } from '@grafana/ui';
-import { LinkTooltip } from 'app/percona/shared/components/Elements/LinkTooltip/LinkTooltip';
+import { useStyles2 } from '@grafana/ui';
 import Validators from 'app/percona/shared/helpers/validators';
 
 import { Messages } from '../FormParts.messages';
@@ -10,7 +9,7 @@ import { getStyles } from '../FormParts.styles';
 import { MainDetailsFormPartProps } from '../FormParts.types';
 
 export const MySQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, remoteInstanceCredentials }) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
   const formValues = form && form.getState().values;
   const tlsFlag = formValues && formValues['tls'];
 
@@ -21,60 +20,68 @@ export const MySQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, rem
   return (
     <div className={styles.groupWrapper}>
       <h4 className={styles.sectionHeader}>{Messages.form.titles.mainDetails}</h4>
-      <div className={styles.labelWrapper} data-testid="address-label">
-        <span>{Messages.form.labels.mainDetails.address}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.address} icon="info-circle" />
+      <div className={styles.group}>
+        <TextInputField
+          data-testid="service-name-label"
+          name="serviceName"
+          label={Messages.form.labels.mainDetails.serviceName}
+          tooltipIcon="info-circle"
+          tooltipText={Messages.form.tooltips.mainDetails.serviceName}
+          placeholder={Messages.form.placeholders.mainDetails.serviceName}
+        />
+        <div />
       </div>
-      <TextInputField
-        name="address"
-        placeholder={Messages.form.placeholders.mainDetails.address}
-        validators={[validators.required]}
-        disabled={remoteInstanceCredentials.isRDS}
-      />
-      <div className={styles.labelWrapper} data-testid="service-name-label">
-        <span>{Messages.form.labels.mainDetails.serviceName}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.serviceName} icon="info-circle" />
+      <div className={styles.group}>
+        <TextInputField
+          name="address"
+          label={Messages.form.labels.mainDetails.address}
+          tooltipText={Messages.form.tooltips.mainDetails.address}
+          tooltipIcon="info-circle"
+          placeholder={Messages.form.placeholders.mainDetails.address}
+          validators={[validators.required]}
+          disabled={remoteInstanceCredentials.isRDS}
+        />
+        <TextInputField
+          name="port"
+          label={Messages.form.labels.mainDetails.port}
+          tooltipText={Messages.form.tooltips.mainDetails.port}
+          tooltipIcon="info-circle"
+          placeholder={`Port (default: ${remoteInstanceCredentials.port} )`}
+          validators={portValidators}
+        />
       </div>
-      <TextInputField name="serviceName" placeholder={Messages.form.placeholders.mainDetails.serviceName} />
-      <div className={styles.labelWrapper} data-testid="port-label">
-        <span>{Messages.form.labels.mainDetails.port}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.port} icon="info-circle" />
+      <div className={styles.group}>
+        <TextInputField
+          key={`username-${tlsFlag}`}
+          name="username"
+          label={Messages.form.labels.mainDetails.username}
+          tooltipText={Messages.form.tooltips.mainDetails.username}
+          tooltipIcon="info-circle"
+          placeholder={Messages.form.placeholders.mainDetails.username}
+          validators={userPassValidators}
+        />
+        <PasswordInputField
+          key={`password-${tlsFlag}`}
+          name="password"
+          label={Messages.form.labels.mainDetails.password}
+          tooltipText={Messages.form.tooltips.mainDetails.password}
+          tooltipIcon="info-circle"
+          placeholder={Messages.form.placeholders.mainDetails.password}
+          validators={userPassValidators}
+        />
       </div>
-      <TextInputField
-        name="port"
-        placeholder={`Port (default: ${remoteInstanceCredentials.port} )`}
-        validators={portValidators}
-      />
-      <div className={styles.labelWrapper} data-testid="username-label">
-        <span>{Messages.form.labels.mainDetails.username}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.username} icon="info-circle" />
+      <div className={styles.group}>
+        <TextInputField
+          key="maxQueryLength"
+          name="maxQueryLength"
+          label={Messages.form.labels.mysqlDetails.maxQueryLength}
+          tooltipText={Messages.form.tooltips.mysqlDetails.maxQueryLength}
+          tooltipIcon="info-circle"
+          placeholder={Messages.form.placeholders.mysqlDetails.maxQueryLength}
+          validators={maxQueryLengthValidators}
+        />
+        <div />
       </div>
-      <TextInputField
-        key={`username-${tlsFlag}`}
-        name="username"
-        placeholder={Messages.form.placeholders.mainDetails.username}
-        validators={userPassValidators}
-      />
-      <div className={styles.labelWrapper} data-testid="password-label">
-        <span>{Messages.form.labels.mainDetails.password}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.password} icon="info-circle" />
-      </div>
-      <PasswordInputField
-        key={`password-${tlsFlag}`}
-        name="password"
-        placeholder={Messages.form.placeholders.mainDetails.password}
-        validators={userPassValidators}
-      />
-      <div className={styles.labelWrapper} data-testid="max-query-length-label">
-        <span>{Messages.form.labels.mysqlDetails.maxQueryLength}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mysqlDetails.maxQueryLength} icon="info-circle" />
-      </div>
-      <TextInputField
-        key="maxQueryLength"
-        name="maxQueryLength"
-        placeholder={Messages.form.placeholders.mysqlDetails.maxQueryLength}
-        validators={maxQueryLengthValidators}
-      />
     </div>
   );
 };
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/PostgreSQLConnectionDetails/PostgreSQLConnectionDetails.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/PostgreSQLConnectionDetails/PostgreSQLConnectionDetails.tsx
index 147f7c6a54292..51f16570564c6 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/PostgreSQLConnectionDetails/PostgreSQLConnectionDetails.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/PostgreSQLConnectionDetails/PostgreSQLConnectionDetails.tsx
@@ -1,8 +1,7 @@
 import { PasswordInputField, TextInputField, validators } from '@percona/platform-core';
 import React, { FC, useMemo } from 'react';
 
-import { useTheme } from '@grafana/ui';
-import { LinkTooltip } from 'app/percona/shared/components/Elements/LinkTooltip/LinkTooltip';
+import { useStyles2 } from '@grafana/ui';
 import Validators from 'app/percona/shared/helpers/validators';
 
 import { Messages } from '../FormParts.messages';
@@ -10,8 +9,7 @@ import { getStyles } from '../FormParts.styles';
 import { MainDetailsFormPartProps } from '../FormParts.types';
 
 export const PostgreSQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, remoteInstanceCredentials }) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useStyles2(getStyles);
   const formValues = form && form.getState().values;
   const tlsFlag = formValues && formValues['tls'];
 
@@ -22,69 +20,74 @@ export const PostgreSQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form
   return (
     <div className={styles.groupWrapper}>
       <h4 className={styles.sectionHeader}>{Messages.form.titles.mainDetails}</h4>
-      <div className={styles.labelWrapper} data-testid="address-label">
-        <span>{Messages.form.labels.mainDetails.address}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.address} icon="info-circle" />
+      <div className={styles.group}>
+        <TextInputField
+          name="serviceName"
+          placeholder={Messages.form.placeholders.mainDetails.serviceName}
+          label={Messages.form.labels.mainDetails.serviceName}
+          tooltipText={Messages.form.tooltips.mainDetails.serviceName}
+          tooltipIcon="info-circle"
+        />
+        <div />
       </div>
-      <TextInputField
-        name="address"
-        placeholder={Messages.form.placeholders.mainDetails.address}
-        validators={[validators.required]}
-        disabled={remoteInstanceCredentials.isRDS}
-      />
-      <div className={styles.labelWrapper} data-testid="service-name-label">
-        <span>{Messages.form.labels.mainDetails.serviceName}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.serviceName} icon="info-circle" />
+      <div className={styles.group}>
+        <TextInputField
+          name="address"
+          placeholder={Messages.form.placeholders.mainDetails.address}
+          validators={[validators.required]}
+          disabled={remoteInstanceCredentials.isRDS}
+          label={Messages.form.labels.mainDetails.address}
+          tooltipText={Messages.form.tooltips.mainDetails.address}
+          tooltipIcon="info-circle"
+        />
+        <TextInputField
+          name="port"
+          placeholder={`Port (default: ${remoteInstanceCredentials.port} )`}
+          validators={portValidators}
+          label={Messages.form.labels.mainDetails.port}
+          tooltipText={Messages.form.tooltips.mainDetails.port}
+          tooltipIcon="info-circle"
+        />
       </div>
-      <TextInputField name="serviceName" placeholder={Messages.form.placeholders.mainDetails.serviceName} />
-      <div className={styles.labelWrapper} data-testid="port-label">
-        <span>{Messages.form.labels.mainDetails.port}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.port} icon="info-circle" />
+      <div className={styles.group}>
+        <TextInputField
+          key={`username-${tlsFlag}`}
+          name="username"
+          placeholder={Messages.form.placeholders.mainDetails.username}
+          validators={userPassValidators}
+          label={Messages.form.labels.mainDetails.username}
+          tooltipText={Messages.form.tooltips.mainDetails.username}
+          tooltipIcon="info-circle"
+        />
+        <PasswordInputField
+          key={`password-${tlsFlag}`}
+          name="password"
+          placeholder={Messages.form.placeholders.mainDetails.password}
+          validators={userPassValidators}
+          label={Messages.form.labels.mainDetails.password}
+          tooltipText={Messages.form.tooltips.mainDetails.password}
+          tooltipIcon="info-circle"
+        />
       </div>
-      <TextInputField
-        name="port"
-        placeholder={`Port (default: ${remoteInstanceCredentials.port} )`}
-        validators={portValidators}
-      />
-      <div className={styles.labelWrapper} data-testid="username-label">
-        <span>{Messages.form.labels.mainDetails.username}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.username} icon="info-circle" />
+      <div className={styles.group}>
+        <TextInputField
+          key="database"
+          name="database"
+          placeholder={Messages.form.placeholders.postgresqlDetails.database}
+          label={Messages.form.labels.postgresqlDetails.database}
+          tooltipText={Messages.form.tooltips.postgresqlDetails.database}
+          tooltipIcon="info-circle"
+        />
+        <TextInputField
+          key="maxQueryLength"
+          name="maxQueryLength"
+          placeholder={Messages.form.placeholders.postgresqlDetails.maxQueryLength}
+          validators={maxQueryLengthValidators}
+          label={Messages.form.labels.postgresqlDetails.maxQueryLength}
+          tooltipText={Messages.form.tooltips.postgresqlDetails.maxQueryLength}
+          tooltipIcon="info-circle"
+        />
       </div>
-      <TextInputField
-        key={`username-${tlsFlag}`}
-        name="username"
-        placeholder={Messages.form.placeholders.mainDetails.username}
-        validators={userPassValidators}
-      />
-      <div className={styles.labelWrapper} data-testid="password-label">
-        <span>{Messages.form.labels.mainDetails.password}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.mainDetails.password} icon="info-circle" />
-      </div>
-      <PasswordInputField
-        key={`password-${tlsFlag}`}
-        name="password"
-        placeholder={Messages.form.placeholders.mainDetails.password}
-        validators={userPassValidators}
-      />
-      <div className={styles.labelWrapper} data-testid="database-label">
-        <span>{Messages.form.labels.postgresqlDetails.database}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.postgresqlDetails.database} icon="info-circle" />
-      </div>
-      <TextInputField
-        key="database"
-        name="database"
-        placeholder={Messages.form.placeholders.postgresqlDetails.database}
-      />
-      <div className={styles.labelWrapper} data-testid="max-query-length-label">
-        <span>{Messages.form.labels.postgresqlDetails.maxQueryLength}</span>
-        <LinkTooltip tooltipContent={Messages.form.tooltips.postgresqlDetails.maxQueryLength} icon="info-circle" />
-      </div>
-      <TextInputField
-        key="maxQueryLength"
-        name="maxQueryLength"
-        placeholder={Messages.form.placeholders.postgresqlDetails.maxQueryLength}
-        validators={maxQueryLengthValidators}
-      />
     </div>
   );
 };
diff --git a/public/app/percona/add-instance/components/AzureDiscovery/Discovery.test.tsx b/public/app/percona/add-instance/components/AzureDiscovery/Discovery.test.tsx
index ef46a128ce23f..89a563ac96a40 100644
--- a/public/app/percona/add-instance/components/AzureDiscovery/Discovery.test.tsx
+++ b/public/app/percona/add-instance/components/AzureDiscovery/Discovery.test.tsx
@@ -7,7 +7,7 @@ describe('Discovery instance:: ', () => {
   it('Should render correct', () => {
     const selectInstance = jest.fn();
 
-    render(<Discovery selectInstance={selectInstance} />);
+    render(<Discovery onSubmit={jest.fn()} selectInstance={selectInstance} />);
     expect(screen.getByTestId('azure_client_id-text-input')).toBeInTheDocument();
     expect(screen.getByTestId('azure_client_secret-password-input')).toBeInTheDocument();
     expect(screen.getByTestId('azure_tenant_id-text-input')).toBeInTheDocument();
diff --git a/public/app/percona/add-instance/components/AzureDiscovery/Discovery.tsx b/public/app/percona/add-instance/components/AzureDiscovery/Discovery.tsx
index 9570ae2b937c7..34cd390b269e6 100644
--- a/public/app/percona/add-instance/components/AzureDiscovery/Discovery.tsx
+++ b/public/app/percona/add-instance/components/AzureDiscovery/Discovery.tsx
@@ -13,7 +13,7 @@ import Credentials from './components/Credentials/Credentials';
 import { AzureCredentialsForm } from './components/Credentials/Credentials.types';
 import Instances from './components/Instances/Instances';
 
-const Discovery: FC<DiscoverySearchPanelProps> = ({ selectInstance }) => {
+const Discovery: FC<DiscoverySearchPanelProps> = ({ onSubmit, selectInstance }) => {
   const styles = useStyles(getStyles);
 
   const [instances, setInstances] = useState<Instance[]>([]);
diff --git a/public/app/percona/add-instance/components/AzureDiscovery/Discovery.types.ts b/public/app/percona/add-instance/components/AzureDiscovery/Discovery.types.ts
index df068febc96e4..8aa2898049e8b 100644
--- a/public/app/percona/add-instance/components/AzureDiscovery/Discovery.types.ts
+++ b/public/app/percona/add-instance/components/AzureDiscovery/Discovery.types.ts
@@ -2,6 +2,7 @@ import { SelectInstance } from '../../panel.types';
 
 export interface DiscoverySearchPanelProps {
   selectInstance: SelectInstance;
+  onSubmit: (submitPromise: Promise<void>) => void;
 }
 
 export interface Instance {
diff --git a/public/app/percona/add-instance/components/AzureDiscovery/components/Credentials/Credentials.tsx b/public/app/percona/add-instance/components/AzureDiscovery/components/Credentials/Credentials.tsx
index 60dbd089f21dd..8f7f3115e0556 100644
--- a/public/app/percona/add-instance/components/AzureDiscovery/components/Credentials/Credentials.tsx
+++ b/public/app/percona/add-instance/components/AzureDiscovery/components/Credentials/Credentials.tsx
@@ -21,7 +21,7 @@ const Credentials: FC<CredentialsProps> = ({ onSetCredentials, selectInstance })
     <FormFinal
       onSubmit={onSubmit}
       render={({ handleSubmit }) => (
-        <form onSubmit={handleSubmit} className={styles.instanceForm}>
+        <form id="add-instance-form" onSubmit={handleSubmit} className={styles.instanceForm}>
           <div className={styles.searchPanel}>
             <TextInputField
               name={Messages.form.fields.clientId.name}
@@ -55,12 +55,6 @@ const Credentials: FC<CredentialsProps> = ({ onSetCredentials, selectInstance })
             />
           </div>
           <div className={styles.searchPanel}>
-            <Button variant="secondary" onClick={() => selectInstance({ type: '' })} icon="arrow-left">
-              {Messages.form.toMenuButton}
-            </Button>
-            <Button type="submit" data-testid="credentials-search-button" className={styles.credentialsSubmit}>
-              {Messages.form.submitButton}
-            </Button>
             <Button type="button" fill="text" onClick={() => window.open(SECURITY_CREDENTIALS_DOC_LINK, '_blank')}>
               {Messages.form.credentialsDocLink}
             </Button>
diff --git a/public/app/percona/add-instance/components/Discovery/Discovery.test.tsx b/public/app/percona/add-instance/components/Discovery/Discovery.test.tsx
index ac9d399c78499..64f43b4624834 100644
--- a/public/app/percona/add-instance/components/Discovery/Discovery.test.tsx
+++ b/public/app/percona/add-instance/components/Discovery/Discovery.test.tsx
@@ -5,7 +5,7 @@ import Discovery from './Discovery';
 
 describe('Discovery:: ', () => {
   it('should render credentials, instances and docs', async () => {
-    await waitFor(() => render(<Discovery selectInstance={jest.fn()} />));
+    await waitFor(() => render(<Discovery onSubmit={jest.fn()} selectInstance={jest.fn()} />));
 
     expect(screen.getByTestId('credentials-form')).toBeInTheDocument();
     expect(screen.getByTestId('instances-table-wrapper')).toBeInTheDocument();
diff --git a/public/app/percona/add-instance/components/Discovery/Discovery.tsx b/public/app/percona/add-instance/components/Discovery/Discovery.tsx
index ff30a20d65f8c..20be10309b034 100644
--- a/public/app/percona/add-instance/components/Discovery/Discovery.tsx
+++ b/public/app/percona/add-instance/components/Discovery/Discovery.tsx
@@ -14,7 +14,7 @@ import { RDSCredentialsForm } from './components/Credentials/Credentials.types';
 import { DiscoveryDocs } from './components/DiscoveryDocs/DiscoveryDocs';
 import Instances from './components/Instances/Instances';
 
-const Discovery: FC<DiscoverySearchPanelProps> = ({ selectInstance }) => {
+const Discovery: FC<DiscoverySearchPanelProps> = ({ onSubmit, selectInstance }) => {
   const styles = useStyles(getStyles);
 
   const [instances, setInstances] = useState<Instance[]>([]);
@@ -58,7 +58,7 @@ const Discovery: FC<DiscoverySearchPanelProps> = ({ selectInstance }) => {
   return (
     <>
       <div className={styles.content}>
-        <Credentials discover={discover} selectInstance={selectInstance} />
+        <Credentials discover={(credentials) => onSubmit(discover(credentials))} />
         <Instances instances={instances} selectInstance={selectInstance} credentials={credentials} loading={loading} />
         <DiscoveryDocs />
       </div>
diff --git a/public/app/percona/add-instance/components/Discovery/Discovery.types.ts b/public/app/percona/add-instance/components/Discovery/Discovery.types.ts
index 2a8ca2cd5e237..774ab4575a0aa 100644
--- a/public/app/percona/add-instance/components/Discovery/Discovery.types.ts
+++ b/public/app/percona/add-instance/components/Discovery/Discovery.types.ts
@@ -1,6 +1,7 @@
 import { SelectInstance } from '../../panel.types';
 export interface DiscoverySearchPanelProps {
   selectInstance: SelectInstance;
+  onSubmit: (submitPromise: Promise<void>) => void;
 }
 
 export interface Instance {
diff --git a/public/app/percona/add-instance/components/Discovery/components/Credentials/Credentials.test.tsx b/public/app/percona/add-instance/components/Discovery/components/Credentials/Credentials.test.tsx
index ad5f5aae7c9f1..b2c6956362f59 100644
--- a/public/app/percona/add-instance/components/Discovery/components/Credentials/Credentials.test.tsx
+++ b/public/app/percona/add-instance/components/Discovery/components/Credentials/Credentials.test.tsx
@@ -5,7 +5,7 @@ import Credentials from './Credentials';
 
 describe('Credentials:: ', () => {
   it('should render access and secret keys fields', () => {
-    render(<Credentials discover={jest.fn()} selectInstance={jest.fn()} />);
+    render(<Credentials discover={jest.fn()} />);
 
     expect(screen.getByTestId('aws_access_key-text-input')).toBeInTheDocument();
     expect(screen.getByTestId('aws_secret_key-password-input')).toBeInTheDocument();
@@ -13,7 +13,7 @@ describe('Credentials:: ', () => {
 
   it('should call discover on submit', () => {
     const discover = jest.fn();
-    render(<Credentials discover={discover} selectInstance={jest.fn()} />);
+    render(<Credentials discover={discover} />);
 
     const form = screen.getByTestId('credentials-form');
     fireEvent.submit(form);
diff --git a/public/app/percona/add-instance/components/Discovery/components/Credentials/Credentials.tsx b/public/app/percona/add-instance/components/Discovery/components/Credentials/Credentials.tsx
index bd56467197000..147ddd5787597 100644
--- a/public/app/percona/add-instance/components/Discovery/components/Credentials/Credentials.tsx
+++ b/public/app/percona/add-instance/components/Discovery/components/Credentials/Credentials.tsx
@@ -2,13 +2,13 @@ import { TextInputField, PasswordInputField } from '@percona/platform-core';
 import React, { FC, useCallback } from 'react';
 import { Form as FormFinal } from 'react-final-form';
 
-import { Button, useStyles } from '@grafana/ui';
+import { useStyles } from '@grafana/ui';
 
 import { Messages } from './Credentials.messages';
 import { getStyles } from './Credentials.styles';
 import { CredentialsProps, RDSCredentialsForm } from './Credentials.types';
 
-const Credentials: FC<CredentialsProps> = ({ discover, selectInstance }) => {
+const Credentials: FC<CredentialsProps> = ({ discover }) => {
   const styles = useStyles(getStyles);
 
   const onSubmit = useCallback(
@@ -22,7 +22,12 @@ const Credentials: FC<CredentialsProps> = ({ discover, selectInstance }) => {
     <FormFinal
       onSubmit={onSubmit}
       render={({ handleSubmit }) => (
-        <form onSubmit={handleSubmit} className={styles.instanceForm} data-testid="credentials-form">
+        <form
+          id="add-instance-form"
+          onSubmit={handleSubmit}
+          className={styles.instanceForm}
+          data-testid="credentials-form"
+        >
           <div className={styles.fieldsWrapper}>
             <TextInputField
               name={Messages.form.fields.awsAccessKey.name}
@@ -37,15 +42,6 @@ const Credentials: FC<CredentialsProps> = ({ discover, selectInstance }) => {
               fieldClassName={styles.credentialsField}
             />
           </div>
-          <div className={styles.buttonsWrapper}>
-            <Button variant="secondary" onClick={() => selectInstance({ type: '' })} icon="arrow-left">
-              {Messages.form.toMenuButton}
-            </Button>
-            <Button type="submit" data-testid="credentials-search-button" className={styles.credentialsSubmit}>
-              {Messages.form.submitButton}
-            </Button>
-          </div>
-          <div></div>
         </form>
       )}
     />
diff --git a/public/app/percona/add-instance/components/Discovery/components/Credentials/Credentials.types.ts b/public/app/percona/add-instance/components/Discovery/components/Credentials/Credentials.types.ts
index 20895a9ad2dde..aec06bc772d17 100644
--- a/public/app/percona/add-instance/components/Discovery/components/Credentials/Credentials.types.ts
+++ b/public/app/percona/add-instance/components/Discovery/components/Credentials/Credentials.types.ts
@@ -1,5 +1,3 @@
-import { SelectInstance } from 'app/percona/add-instance/panel.types';
-
 export interface RDSCredentialsForm {
   aws_access_key: string;
   aws_secret_key: string;
@@ -7,5 +5,4 @@ export interface RDSCredentialsForm {
 
 export interface CredentialsProps {
   discover: (credentials: RDSCredentialsForm) => void;
-  selectInstance: SelectInstance;
 }
diff --git a/public/app/percona/add-instance/panel.styles.ts b/public/app/percona/add-instance/panel.styles.ts
index edbd6c9a1bd25..c51723eaf7072 100644
--- a/public/app/percona/add-instance/panel.styles.ts
+++ b/public/app/percona/add-instance/panel.styles.ts
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-export const getStyles = ({ v1: { spacing } }: GrafanaTheme2) => ({
+export const getStyles = ({ breakpoints, v1: { spacing } }: GrafanaTheme2) => ({
   content: css`
     display: flex;
     flex-direction: column;
@@ -14,4 +14,12 @@ export const getStyles = ({ v1: { spacing } }: GrafanaTheme2) => ({
     align-self: flex-start;
     margin-bottom: ${spacing.md};
   `,
+  page: css`
+    ${breakpoints.up('md')} {
+      width: auto !important;
+      max-width: none !important;
+      margin-left: 16px !important;
+      margin-right: 16px !important;
+    }
+  `,
 });
diff --git a/public/app/percona/add-instance/panel.tsx b/public/app/percona/add-instance/panel.tsx
index 0b1504560367b..a0bf57c92a87e 100644
--- a/public/app/percona/add-instance/panel.tsx
+++ b/public/app/percona/add-instance/panel.tsx
@@ -1,15 +1,13 @@
 /* eslint-disable react/display-name,@typescript-eslint/consistent-type-assertions,@typescript-eslint/no-explicit-any */
-import { cx } from '@emotion/css';
-import React, { useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
+import React, { MouseEventHandler, useMemo, useState } from 'react';
+import { useHistory, useParams } from 'react-router-dom';
 
-import { Button, useStyles2 } from '@grafana/ui';
-import { OldPage } from 'app/core/components/Page/Page';
-import { usePerconaNavModel } from 'app/percona/shared/components/hooks/perconaNavModel';
+import { PageToolbar, ToolbarButton, useStyles2 } from '@grafana/ui';
+import { Page } from 'app/core/components/Page/Page';
 import { getPerconaSettings } from 'app/percona/shared/core/selectors';
+import { useSelector } from 'app/types';
 
 import { Databases } from '../../percona/shared/core';
-import { FeatureLoader } from '../shared/components/Elements/FeatureLoader';
 
 import { AddInstance } from './components/AddInstance/AddInstance';
 import AddRemoteInstance from './components/AddRemoteInstance/AddRemoteInstance';
@@ -17,7 +15,7 @@ import { Messages } from './components/AddRemoteInstance/AddRemoteInstance.messa
 import AzureDiscovery from './components/AzureDiscovery/Discovery';
 import Discovery from './components/Discovery/Discovery';
 import { getStyles } from './panel.styles';
-import { InstanceTypesExtra, InstanceAvailable, AvailableTypes } from './panel.types';
+import { InstanceTypesExtra, InstanceAvailable, AvailableTypes, AddInstanceRouteParams } from './panel.types';
 
 const availableInstanceTypes: AvailableTypes[] = [
   InstanceTypesExtra.rds,
@@ -31,53 +29,100 @@ const availableInstanceTypes: AvailableTypes[] = [
 ];
 
 const AddInstancePanel = () => {
-  const styles = useStyles2(getStyles);
   const { result: settings } = useSelector(getPerconaSettings);
   const { azureDiscoverEnabled } = settings!;
-  const instanceType = '';
+  const { instanceType = '' } = useParams<AddInstanceRouteParams>();
+  console.log(instanceType);
   const [selectedInstance, selectInstance] = useState<InstanceAvailable>({
     type: availableInstanceTypes.includes(instanceType as AvailableTypes) ? instanceType : '',
   });
-  const navModel = usePerconaNavModel('add-instance');
+  const [formName, setFormName] = useState('');
+  const [showSelection, setShowSelection] = useState(!instanceType);
+  const [submitting, setSubmitting] = useState(false);
+  const history = useHistory();
+  const styles = useStyles2(getStyles);
+
+  const handleSubmit = async (submitPromise: Promise<void>) => {
+    setSubmitting(true);
+    await submitPromise;
+    setSubmitting(false);
+  };
 
   const InstanceForm = useMemo(
     () => () =>
       (
         <>
-          {selectedInstance.type !== InstanceTypesExtra.rds && selectedInstance.type !== InstanceTypesExtra.azure && (
-            <Button
-              variant="secondary"
-              className={styles.returnButton}
-              onClick={() => selectInstance({ type: '' })}
-              icon="arrow-left"
-            >
-              {Messages.form.buttons.toMenu}
-            </Button>
+          {selectedInstance.type === InstanceTypesExtra.rds && (
+            <Discovery onSubmit={handleSubmit} selectInstance={selectInstance} />
+          )}
+          {selectedInstance.type === InstanceTypesExtra.azure && (
+            <AzureDiscovery onSubmit={handleSubmit} selectInstance={selectInstance} />
           )}
-          {selectedInstance.type === InstanceTypesExtra.rds && <Discovery selectInstance={selectInstance} />}
-          {selectedInstance.type === InstanceTypesExtra.azure && <AzureDiscovery selectInstance={selectInstance} />}
           {selectedInstance.type !== InstanceTypesExtra.rds && selectedInstance.type !== InstanceTypesExtra.azure && (
-            <AddRemoteInstance instance={selectedInstance} selectInstance={selectInstance} />
+            <AddRemoteInstance onSubmit={handleSubmit} instance={selectedInstance} selectInstance={selectInstance} />
           )}
         </>
       ),
-    [selectedInstance, styles.returnButton]
+    [selectedInstance]
   );
 
+  const submitLabel = useMemo(
+    () =>
+      showSelection
+        ? Messages.selectionStep.next
+        : selectedInstance.type === InstanceTypesExtra.rds || selectedInstance.type === InstanceTypesExtra.azure
+        ? Messages.configurationStep.discover
+        : Messages.configurationStep.next,
+    [showSelection, selectedInstance]
+  );
+
+  const handleCancel: MouseEventHandler = (e) => {
+    history.push('/add-instance');
+    selectInstance({ type: '' });
+    setShowSelection(true);
+    setFormName('');
+  };
+
+  const handleShowConfiguration: MouseEventHandler = (e) => {
+    setShowSelection(false);
+    history.push('/add-instance/' + selectedInstance.type);
+
+    if (showSelection) {
+      e.preventDefault();
+      setFormName('add-instance-form');
+    }
+  };
+
   return (
-    <OldPage navModel={navModel}>
-      <OldPage.Contents>
-        <FeatureLoader>
-          <div className={cx(styles.content)}>
-            {!selectedInstance.type ? (
-              <AddInstance showAzure={!!azureDiscoverEnabled} onSelectInstanceType={selectInstance} />
-            ) : (
-              <InstanceForm />
-            )}
-          </div>
-        </FeatureLoader>
-      </OldPage.Contents>
-    </OldPage>
+    <Page>
+      <PageToolbar
+        title={showSelection ? Messages.pageTitleSelection : Messages.pageTitleConfiguration}
+        onGoBack={history.goBack}
+      >
+        <ToolbarButton onClick={handleCancel}>
+          {showSelection ? Messages.selectionStep.cancel : Messages.configurationStep.cancel}
+        </ToolbarButton>
+        <ToolbarButton
+          form={formName}
+          disabled={!selectedInstance.type || submitting}
+          variant="primary"
+          onClick={handleShowConfiguration}
+        >
+          {submitLabel}
+        </ToolbarButton>
+      </PageToolbar>
+      <Page.Contents className={styles.page}>
+        {showSelection ? (
+          <AddInstance
+            showAzure={!!azureDiscoverEnabled}
+            selectedInstanceType={selectedInstance}
+            onSelectInstanceType={selectInstance}
+          />
+        ) : (
+          <InstanceForm />
+        )}
+      </Page.Contents>
+    </Page>
   );
 };
 
diff --git a/public/app/percona/add-instance/panel.types.ts b/public/app/percona/add-instance/panel.types.ts
index 70cae7d02494b..c0b7621bff8e4 100644
--- a/public/app/percona/add-instance/panel.types.ts
+++ b/public/app/percona/add-instance/panel.types.ts
@@ -70,3 +70,7 @@ export interface Instance {
 }
 
 export type SelectInstance = (instance: InstanceAvailable) => void;
+
+export interface AddInstanceRouteParams {
+  instanceType?: AvailableTypes;
+}
diff --git a/public/app/percona/edit-instance/EditInstance.messages.ts b/public/app/percona/edit-instance/EditInstance.messages.ts
new file mode 100644
index 0000000000000..c06556273ec73
--- /dev/null
+++ b/public/app/percona/edit-instance/EditInstance.messages.ts
@@ -0,0 +1,6 @@
+export const Messages = {
+  title: 'Inventory / Edit Service',
+  cancel: 'Cancel',
+  saveChanges: 'Save Changes',
+  formTitle: (service: string) => `Editing "${service}" service`,
+};
diff --git a/public/app/percona/edit-instance/EditInstance.test.tsx b/public/app/percona/edit-instance/EditInstance.test.tsx
new file mode 100644
index 0000000000000..39eaf113e3c55
--- /dev/null
+++ b/public/app/percona/edit-instance/EditInstance.test.tsx
@@ -0,0 +1,35 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+
+import { configureStore } from 'app/store/configureStore';
+
+import { stubWithLabels } from '../inventory/__mocks__/Inventory.service';
+
+import EditInstancePage from './EditInstance';
+import { fromPayload } from './EditInstance.utils';
+
+jest.mock('app/percona/inventory/Inventory.service');
+
+const renderWithDefaults = () =>
+  render(
+    <MemoryRouter initialEntries={['/edit-instance/service_id']}>
+      <Provider store={configureStore()}>
+        <EditInstancePage />
+      </Provider>
+    </MemoryRouter>
+  );
+
+describe('EditInstance::', () => {
+  it('prefills current values', async () => {
+    renderWithDefaults();
+
+    await waitFor(() => expect(screen.queryByLabelText('Environment')).toHaveValue(stubWithLabels.environment));
+    await waitFor(() => expect(screen.queryByLabelText('Cluster')).toHaveValue(stubWithLabels.cluster));
+    await waitFor(() => expect(screen.queryByLabelText('Replication set')).toHaveValue(stubWithLabels.replication_set));
+    await waitFor(() =>
+      expect(screen.queryByLabelText('Custom labels')).toHaveValue(fromPayload(stubWithLabels.custom_labels))
+    );
+  });
+});
diff --git a/public/app/percona/edit-instance/EditInstance.tsx b/public/app/percona/edit-instance/EditInstance.tsx
new file mode 100644
index 0000000000000..3ef8bd3d3ab7c
--- /dev/null
+++ b/public/app/percona/edit-instance/EditInstance.tsx
@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import { Form } from 'react-final-form';
+import { useHistory, useParams } from 'react-router-dom';
+
+import { PageToolbar, ToolbarButton, ToolbarButtonRow } from '@grafana/ui';
+import { Page } from 'app/core/components/Page/Page';
+import { InventoryService } from 'app/percona/inventory/Inventory.service';
+
+import { Labels } from '../add-instance/components/AddRemoteInstance/FormParts';
+
+import { Messages } from './EditInstance.messages';
+import { EditInstanceFormValues, EditInstanceRouteParams, Instance } from './EditInstance.types';
+import {
+  getCustomLabelsToAddEdit,
+  getCustomLabelKeysToRemove,
+  getInitialValues,
+  getServiceType,
+} from './EditInstance.utils';
+
+const EditInstancePage: React.FC = () => {
+  const history = useHistory();
+  const { serviceId } = useParams<EditInstanceRouteParams>();
+  const [isLoading, setIsLoading] = useState(true);
+  const [service, setService] = useState<Instance>();
+
+  useEffect(() => {
+    fetchService(serviceId);
+  }, [serviceId]);
+
+  const fetchService = async (serviceId: string) => {
+    setIsLoading(true);
+    const result = await InventoryService.getService('/service_id/' + serviceId);
+    const serviceType = getServiceType(result);
+    const service = result[serviceType];
+
+    setService(service);
+    setIsLoading(false);
+  };
+
+  const handleCancel = () => {
+    history.push('/inventory/services');
+  };
+
+  const handleSubmit = (values: EditInstanceFormValues) => {
+    const toAddEdit = getCustomLabelsToAddEdit(service?.custom_labels || {}, values.custom_labels || '');
+    const toRemove = getCustomLabelKeysToRemove(service?.custom_labels || {}, values.custom_labels || '');
+
+    // todo: actually submit data
+    console.log('add-edit', toAddEdit);
+    console.log('remove', toRemove);
+  };
+
+  return (
+    <Form
+      initialValues={getInitialValues(service)}
+      onSubmit={handleSubmit}
+      render={({ handleSubmit }) => (
+        <Page>
+          <PageToolbar title={Messages.title} onGoBack={handleCancel}>
+            <ToolbarButtonRow>
+              <ToolbarButton onClick={handleCancel}>{Messages.cancel}</ToolbarButton>
+              <ToolbarButton onClick={handleSubmit} variant="primary">
+                {Messages.saveChanges}
+              </ToolbarButton>
+            </ToolbarButtonRow>
+          </PageToolbar>
+          <Page.Contents isLoading={isLoading}>
+            <h3>{Messages.formTitle(service?.service_name || '')}</h3>
+            <form>
+              <Labels showNodeFields={false} />
+            </form>
+          </Page.Contents>
+        </Page>
+      )}
+    />
+  );
+};
+
+export default EditInstancePage;
diff --git a/public/app/percona/edit-instance/EditInstance.types.ts b/public/app/percona/edit-instance/EditInstance.types.ts
new file mode 100644
index 0000000000000..984f207317df6
--- /dev/null
+++ b/public/app/percona/edit-instance/EditInstance.types.ts
@@ -0,0 +1,23 @@
+export interface EditInstanceRouteParams {
+  serviceId: string;
+}
+
+export interface Instance {
+  service_id: string;
+  service_name: string;
+  environment: string;
+  cluster: string;
+  replication_set: string;
+  region: string;
+  availability_zone: string;
+  custom_labels: Record<string, string>;
+}
+
+export interface EditInstanceFormValues {
+  environment: string;
+  cluster: string;
+  replication_set: string;
+  region: string;
+  availability_zone: string;
+  custom_labels: string;
+}
diff --git a/public/app/percona/edit-instance/EditInstance.utils.ts b/public/app/percona/edit-instance/EditInstance.utils.ts
new file mode 100644
index 0000000000000..7acf9b8e476b2
--- /dev/null
+++ b/public/app/percona/edit-instance/EditInstance.utils.ts
@@ -0,0 +1,54 @@
+import { Databases } from '../shared/core';
+
+import { EditInstanceFormValues, Instance } from './EditInstance.types';
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+export const getServiceType = (result: Record<Databases, Instance>): Databases => Object.keys(result)[0] as Databases;
+
+export const getInitialValues = (service?: Instance): EditInstanceFormValues => {
+  if (service) {
+    return {
+      ...service,
+      custom_labels: fromPayload(service.custom_labels || {}),
+    };
+  }
+
+  return {
+    environment: '',
+    cluster: '',
+    replication_set: '',
+    region: '',
+    availability_zone: '',
+    custom_labels: '',
+  };
+};
+
+export const fromPayload = (customLabels: Record<string, string>): string =>
+  Object.entries(customLabels)
+    .map(([label, value]) => label + ':' + value)
+    .join('\n');
+
+export const customLabelstoObject = (customLabels: string): Record<string, string> =>
+  customLabels
+    .split(/[\n\s]/)
+    .filter(Boolean)
+    .reduce((acc: Record<string, string>, val: string) => {
+      const [key, value] = val.split(':');
+
+      acc[key] = value;
+
+      return acc;
+    }, {});
+
+// todo: refactor functions to be more performant
+export const getCustomLabelsToAddEdit = (current: Record<string, string>, updated: string): Record<string, string> => {
+  const updatedMap = customLabelstoObject(updated);
+  const toRemove = getCustomLabelKeysToRemove(current, updated);
+  const filtered = Object.entries(updatedMap).filter(([label]) => !toRemove.includes(label));
+  return Object.fromEntries(filtered);
+};
+
+export const getCustomLabelKeysToRemove = (current: Record<string, string>, updated: string): string[] => {
+  const updatedMap = customLabelstoObject(updated);
+  return Object.keys(current).filter((label) => updatedMap[label] === undefined);
+};
diff --git a/public/app/percona/inventory/ColumnRenderers/ColumnRenderers.tsx b/public/app/percona/inventory/ColumnRenderers/ColumnRenderers.tsx
index 4d471b4332b68..91b63064c2b50 100644
--- a/public/app/percona/inventory/ColumnRenderers/ColumnRenderers.tsx
+++ b/public/app/percona/inventory/ColumnRenderers/ColumnRenderers.tsx
@@ -1,8 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 
 import { MAIN_COLUMN } from 'app/percona/inventory/Inventory.constants';
 import { CustomLabel } from 'app/percona/inventory/Inventory.types';
 
+import ServicesOptions from '../components/ServicesOptions/ServicesOptions';
+
 import * as styles from './ColumnRenderers.styles';
 
 export const servicesDetailsRender = (element: any) => {
@@ -18,6 +21,8 @@ export const servicesDetailsRender = (element: any) => {
   );
 };
 
+export const servicesOptionsRender = (element: any) => <ServicesOptions service={element} />;
+
 export const agentsDetailsRender = (element: any) => {
   const mainColumns = ['agent_id', 'type', 'isDeleted', 'service_ids', 'custom_labels'];
   const labels = Object.keys(element).filter((label) => !mainColumns.includes(label));
diff --git a/public/app/percona/inventory/Inventory.constants.ts b/public/app/percona/inventory/Inventory.constants.ts
index f7c0e0363c31d..2aa63a4b51185 100644
--- a/public/app/percona/inventory/Inventory.constants.ts
+++ b/public/app/percona/inventory/Inventory.constants.ts
@@ -1,26 +1,66 @@
-import { servicesDetailsRender, agentsDetailsRender, nodesDetailsRender } from './ColumnRenderers';
+import {
+  servicesDetailsRender,
+  agentsDetailsRender,
+  nodesDetailsRender,
+  servicesOptionsRender,
+} from './ColumnRenderers';
 
 export const MAIN_COLUMN = ['service_id', 'type', 'service_name', 'custom_labels', 'node_id', 'address', 'port'];
 
-export const SERVICES_COLUMNS = [
+export const getServicesColumns = () => [
+  {
+    Header: 'Name',
+    accessor: 'service_name',
+  },
+  {
+    Header: 'Type',
+    accessor: 'type',
+  },
   {
     Header: 'ID',
     accessor: 'service_id',
   },
   {
-    Header: 'Service Type',
-    accessor: 'type',
+    Header: 'Node ID',
+    accessor: 'node_id',
+  },
+  {
+    Header: 'Address',
+    accessor: 'address',
+  },
+  {
+    Header: 'Port',
+    accessor: 'port',
+  },
+  {
+    Header: 'Labels',
+    accessor: servicesDetailsRender,
   },
   {
-    Header: 'Service name',
+    Header: 'Options',
+    accessor: servicesOptionsRender,
+  },
+];
+
+export const SERVICES_COLUMNS = [
+  {
+    Header: 'Name',
     accessor: 'service_name',
   },
+  {
+    Header: 'Type',
+    accessor: 'type',
+  },
+  {
+    Header: 'ID',
+    accessor: 'service_id',
+  },
   {
     Header: 'Node ID',
     accessor: 'node_id',
   },
   {
-    Header: 'Addresses',
+    Header: 'Address',
     accessor: 'address',
   },
   {
@@ -28,9 +68,13 @@ export const SERVICES_COLUMNS = [
     accessor: 'port',
   },
   {
-    Header: 'Other Details',
+    Header: 'Labels',
     accessor: servicesDetailsRender,
   },
+  {
+    Header: 'Options',
+    accessor: servicesOptionsRender,
+  },
 ];
 
 export const AGENTS_COLUMNS = [
diff --git a/public/app/percona/inventory/Inventory.service.ts b/public/app/percona/inventory/Inventory.service.ts
index 9131a54fc7f29..ead6f4209da51 100644
--- a/public/app/percona/inventory/Inventory.service.ts
+++ b/public/app/percona/inventory/Inventory.service.ts
@@ -1,3 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+
 import { CancelToken } from 'axios';
 
 import { api } from 'app/percona/shared/helpers/api';
@@ -58,4 +61,7 @@ export const InventoryService = {
   removeNode(body: RemoveNodeBody, token?: CancelToken) {
     return api.post<any, any>(`${BASE_URL}/Nodes/Remove`, body, false, token);
   },
+  getService(serviceId: string, token?: CancelToken) {
+    return api.post<any, any>(`${BASE_URL}/Services/Get`, { service_id: serviceId }, false, token);
+  },
 };
diff --git a/public/app/percona/inventory/Tabs/Services.tsx b/public/app/percona/inventory/Tabs/Services.tsx
index 9b827da19354a..6e6a500b080cd 100644
--- a/public/app/percona/inventory/Tabs/Services.tsx
+++ b/public/app/percona/inventory/Tabs/Services.tsx
@@ -5,6 +5,7 @@ import { Form } from 'react-final-form';
 import { Row } from 'react-table';
 
 import { AppEvents } from '@grafana/data';
+import { locationService } from '@grafana/runtime';
 import { Button, HorizontalGroup, Modal } from '@grafana/ui';
 import { OldPage } from 'app/core/components/Page/Page';
 import { FeatureLoader } from 'app/percona/shared/components/Elements/FeatureLoader';
@@ -93,24 +94,37 @@ export const Services = () => {
     setSelectedRows(rows);
   }, []);
 
+  const handleAddService = useCallback(() => {
+    locationService.push('/add-instance');
+  }, []);
+
   return (
     <OldPage navModel={navModel}>
       <OldPage.Contents>
         <FeatureLoader>
           <div className={styles.tableWrapper}>
-            <div className={styles.actionPanel}>
-              <Button
-                size="md"
-                disabled={selected.length === 0}
-                onClick={() => {
-                  setModalVisible(!modalVisible);
-                }}
-                icon="trash-alt"
-                variant="destructive"
-                className={styles.destructiveButton}
-              >
-                Delete
-              </Button>
+            <div className={styles.servicesActionPanel}>
+              <HorizontalGroup justify="space-between">
+                <Button
+                  size="md"
+                  disabled={selected.length === 0}
+                  onClick={() => {
+                    setModalVisible(!modalVisible);
+                  }}
+                  icon="trash-alt"
+                  variant="destructive"
+                  className={styles.destructiveButton}
+                >
+                  {selected.length === 1
+                    ? `Delete ${selected.length} service`
+                    : selected.length > 1
+                    ? `Delete ${selected.length} services`
+                    : 'Delete'}
+                </Button>
+                <Button size="md" onClick={handleAddService} icon="plus" variant="primary">
+                  Add service
+                </Button>
+              </HorizontalGroup>
             </div>
             <Modal
               title={
diff --git a/public/app/percona/inventory/Tabs/Tabs.styles.ts b/public/app/percona/inventory/Tabs/Tabs.styles.ts
index d3733532cc539..d39c85c28a387 100644
--- a/public/app/percona/inventory/Tabs/Tabs.styles.ts
+++ b/public/app/percona/inventory/Tabs/Tabs.styles.ts
@@ -6,6 +6,9 @@ export const styles = {
     justify-content: flex-end;
     margin-bottom: 5px;
   `,
+  servicesActionPanel: css`
+    margin-bottom: 15px;
+  `,
   tableWrapper: css`
     padding: 10px;
     display: flex;
diff --git a/public/app/percona/inventory/__mocks__/Inventory.service.ts b/public/app/percona/inventory/__mocks__/Inventory.service.ts
index d776f26bd276a..e624b03ea9844 100644
--- a/public/app/percona/inventory/__mocks__/Inventory.service.ts
+++ b/public/app/percona/inventory/__mocks__/Inventory.service.ts
@@ -1,5 +1,20 @@
-import * as service from '../Inventory.service';
-import { DBServiceList } from '../Inventory.types';
+import * as service from 'app/percona/inventory/Inventory.service';
+import { DBServiceList } from 'app/percona/inventory/Inventory.types';
+
+export const stubWithLabels = {
+  service_id: 'service_id',
+  service_name: 'mysql-with-labels',
+  node_id: 'node_id',
+  address: 'mysql',
+  port: 3306,
+  environment: 'Env',
+  cluster: 'Clu',
+  replication_set: 'Repl',
+  custom_labels: {
+    label: 'value',
+    label2: 'value2',
+  },
+};
 
 export const stubs: DBServiceList = {
   mysql: [
@@ -14,5 +29,15 @@ export const stubs: DBServiceList = {
   ],
 };
 
-export const InventoryService = jest.genMockFromModule<typeof service>('../InventoryService.service').InventoryService;
+export const InventoryService = jest.genMockFromModule<typeof service>(
+  'app/percona/inventory/Inventory.service'
+).InventoryService;
+
+InventoryService.removeService = () => Promise.resolve();
+
 InventoryService.getDbServices = () => Promise.resolve(stubs);
+
+InventoryService.getService = () =>
+  Promise.resolve({
+    mysql: stubWithLabels,
+  });
diff --git a/public/app/percona/inventory/__mocks__/Services.service.ts b/public/app/percona/inventory/__mocks__/Services.service.ts
new file mode 100644
index 0000000000000..358e4808ca22e
--- /dev/null
+++ b/public/app/percona/inventory/__mocks__/Services.service.ts
@@ -0,0 +1,10 @@
+import * as service from 'app/percona/shared/services/services/Services.service';
+
+export const ServicesService = jest.genMockFromModule<typeof service>(
+  'app/percona/shared/services/services/Services.service'
+).ServicesService;
+
+ServicesService.getActive = () =>
+  Promise.resolve({
+    service_types: [],
+  });
diff --git a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.messages.ts b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.messages.ts
new file mode 100644
index 0000000000000..b63924574e3af
--- /dev/null
+++ b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.messages.ts
@@ -0,0 +1,13 @@
+export const Messages = {
+  title: 'Confirmation required',
+  warning: 'Attention! This action is irreversible!',
+  forceMode: {
+    label: 'Force mode',
+    description: 'Force mode is going to delete all associated agents.',
+  },
+  description: (service: string) =>
+    `By deleting service “${service}” you will not be able to recover it. Are you sure you want to delete it?`,
+  submit: 'Yes, delete service',
+  cancel: 'Cancel',
+  success: (service: string) => `Service “${service}” was removed effectively`,
+};
diff --git a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.styles.ts b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.styles.ts
new file mode 100644
index 0000000000000..6b6e65ea587b7
--- /dev/null
+++ b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.styles.ts
@@ -0,0 +1,7 @@
+import { css } from '@emotion/css';
+
+export const styles = {
+  Modal: css`
+    width: 480px;
+  `,
+};
diff --git a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.test.tsx b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.test.tsx
new file mode 100644
index 0000000000000..3a16dd95a1344
--- /dev/null
+++ b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.test.tsx
@@ -0,0 +1,77 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import * as ServicesReducer from 'app/percona/shared/core/reducers/services/services';
+import { configureStore } from 'app/store/configureStore';
+
+import DeleteServiceModal from './DeleteServiceModal';
+import { Messages } from './DeleteServiceModal.messages';
+
+const cancelFn = jest.fn();
+
+jest.mock('app/percona/inventory/Inventory.service');
+jest.mock('app/percona/shared/services/services/Services.service');
+
+const renderDefaults = (isOpen = true) =>
+  render(
+    <Provider store={configureStore()}>
+      <DeleteServiceModal onCancel={cancelFn} isOpen={isOpen} serviceId="service_id" serviceName="service_name" />
+    </Provider>
+  );
+
+describe('DeleteServiceModal::', () => {
+  beforeEach(() => {
+    cancelFn.mockClear();
+  });
+
+  it("doesn't render if not opened", () => {
+    renderDefaults(false);
+    expect(screen.queryByText(Messages.description('service_name'))).toBe(null);
+  });
+
+  it('renders when opened', () => {
+    renderDefaults();
+    expect(screen.queryByText(Messages.description('service_name'))).toBeInTheDocument();
+  });
+
+  it('can be cancelled', () => {
+    renderDefaults();
+
+    const cancelButton = screen.getByTestId('delete-service-cancel');
+    fireEvent.click(cancelButton);
+
+    expect(cancelFn).toHaveBeenCalled();
+  });
+
+  it('calls delete', () => {
+    const removeServiceActionSpy = jest.spyOn(ServicesReducer, 'removeServiceAction');
+
+    renderDefaults();
+
+    const confirmButton = screen.getByTestId('delete-service-confirm');
+    fireEvent.click(confirmButton);
+
+    expect(removeServiceActionSpy).toHaveBeenCalledWith({
+      force: false,
+      serviceId: 'service_id',
+    });
+  });
+
+  it('calls delete with force mode', async () => {
+    const removeServiceActionSpy = jest.spyOn(ServicesReducer, 'removeServiceAction');
+
+    renderDefaults();
+
+    const forceModeCheck = screen.getByTestId('delete-service-force-mode');
+    await waitFor(() => fireEvent.click(forceModeCheck));
+
+    const confirmButton = screen.getByTestId('delete-service-confirm');
+    fireEvent.click(confirmButton);
+
+    expect(removeServiceActionSpy).toHaveBeenCalledWith({
+      force: true,
+      serviceId: 'service_id',
+    });
+  });
+});
diff --git a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx
new file mode 100644
index 0000000000000..df70b680f96e1
--- /dev/null
+++ b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx
@@ -0,0 +1,69 @@
+import { logger } from '@percona/platform-core';
+import React, { useState } from 'react';
+
+import { AppEvents } from '@grafana/data';
+import { Alert, Button, Checkbox, Modal } from '@grafana/ui';
+import { appEvents } from 'app/core/core';
+import { removeServiceAction, RemoveServiceParams } from 'app/percona/shared/core/reducers/services';
+import { isApiCancelError } from 'app/percona/shared/helpers/api';
+import { useAppDispatch } from 'app/store/store';
+
+import { Messages } from './DeleteServiceModal.messages';
+import { styles } from './DeleteServiceModal.styles';
+
+interface DeleteServiceModalProps {
+  serviceId: string;
+  serviceName: string;
+  isOpen: boolean;
+  onCancel: () => void;
+}
+
+const DeleteServiceModal: React.FC<DeleteServiceModalProps> = ({ serviceId, serviceName, isOpen, onCancel }) => {
+  const [forceModeActive, setForceActive] = useState(false);
+  const dispatch = useAppDispatch();
+
+  const handleDelete = async () => {
+    try {
+      const params: RemoveServiceParams = {
+        serviceId: serviceId,
+        force: forceModeActive,
+      };
+
+      await dispatch(removeServiceAction(params)).unwrap();
+
+      appEvents.emit(AppEvents.alertSuccess, [Messages.success(serviceName)]);
+      onCancel();
+    } catch (e) {
+      if (isApiCancelError(e)) {
+        return;
+      }
+      logger.error(e);
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} title={Messages.title} onDismiss={onCancel} className={styles.Modal}>
+      <Alert title={Messages.warning} severity="warning" />
+      <p>{Messages.description(serviceName)}</p>
+      <div>
+        <Checkbox
+          data-testid="delete-service-force-mode"
+          label={Messages.forceMode.label}
+          description={Messages.forceMode.description}
+          value={forceModeActive}
+          onChange={() => setForceActive(!forceModeActive)}
+        />
+      </div>
+      <Modal.ButtonRow>
+        <Button data-testid="delete-service-confirm" onClick={handleDelete}>
+          {Messages.submit}
+        </Button>
+        <Button data-testid="delete-service-cancel" variant="secondary" onClick={onCancel}>
+          {Messages.cancel}
+        </Button>
+      </Modal.ButtonRow>
+    </Modal>
+  );
+};
+
+export default DeleteServiceModal;
diff --git a/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.messages.ts b/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.messages.ts
new file mode 100644
index 0000000000000..1212d2b15d002
--- /dev/null
+++ b/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.messages.ts
@@ -0,0 +1,7 @@
+export const Messages = {
+  optionsAriaLabel: 'Open service options',
+  edit: 'Edit',
+  editAria: 'Edit service',
+  delete: 'Delete',
+  deleteAria: 'Delete service',
+};
diff --git a/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.styles.ts b/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.styles.ts
new file mode 100644
index 0000000000000..b7b27bc58fe84
--- /dev/null
+++ b/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.styles.ts
@@ -0,0 +1,9 @@
+import { css } from '@emotion/css';
+
+export const styles = {
+  Cell: css`
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  `,
+};
diff --git a/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.test.tsx b/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.test.tsx
new file mode 100644
index 0000000000000..942631aa17403
--- /dev/null
+++ b/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.test.tsx
@@ -0,0 +1,70 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import { HistoryWrapper, locationService, setLocationService } from '@grafana/runtime';
+import { configureStore } from 'app/store/configureStore';
+
+import ServicesOptions from './ServicesOptions';
+import { Messages } from './ServicesOptions.messages';
+
+const serviceStub = {
+  service_id: 'service_id',
+  service_name: 'service_name',
+};
+
+const renderWithDefaults = () =>
+  render(
+    <Provider store={configureStore()}>
+      <ServicesOptions service={serviceStub} />
+    </Provider>
+  );
+
+describe('ServicesOptions::', () => {
+  beforeEach(() => {
+    setLocationService(new HistoryWrapper());
+  });
+
+  it('renders options button', () => {
+    renderWithDefaults();
+    expect(screen.getByLabelText(Messages.optionsAriaLabel)).toBeInTheDocument();
+  });
+
+  it('opens menu after clicking', async () => {
+    renderWithDefaults();
+
+    const optionsButton = screen.getByLabelText(Messages.optionsAriaLabel);
+    fireEvent.click(optionsButton);
+
+    await waitFor(() => expect(screen.queryByLabelText(Messages.editAria)).toBeInTheDocument());
+    await waitFor(() => expect(screen.queryByLabelText(Messages.deleteAria)).toBeInTheDocument());
+  });
+
+  it('navigates to edit page', async () => {
+    renderWithDefaults();
+
+    const optionsButton = screen.getByLabelText(Messages.optionsAriaLabel);
+    await waitFor(() => fireEvent.click(optionsButton));
+
+    await waitFor(() => expect(screen.queryByLabelText(Messages.editAria)).toBeInTheDocument());
+
+    const editOption = screen.getByLabelText(Messages.editAria);
+    await waitFor(() => editOption.click());
+
+    expect(locationService.getLocation().pathname).toBe('/edit-instance/service_id');
+  });
+
+  it('opens delete modal', async () => {
+    renderWithDefaults();
+
+    const optionsButton = screen.getByLabelText(Messages.optionsAriaLabel);
+    await waitFor(() => fireEvent.click(optionsButton));
+
+    await waitFor(() => expect(screen.queryByLabelText(Messages.editAria)).toBeInTheDocument());
+
+    const deleteOption = screen.getByLabelText(Messages.deleteAria);
+    await waitFor(() => deleteOption.click());
+
+    await waitFor(() => expect(screen.getByTestId('delete-service-confirm')).toBeInTheDocument());
+  });
+});
diff --git a/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.tsx b/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.tsx
new file mode 100644
index 0000000000000..fbd104a1ea358
--- /dev/null
+++ b/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.tsx
@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+
+import { locationService } from '@grafana/runtime';
+import { Menu, Dropdown, IconButton } from '@grafana/ui';
+
+import DeleteServiceModal from '../DeleteServiceModal/DeleteServiceModal';
+
+import { Messages } from './ServicesOptions.messages';
+import { styles } from './ServicesOptions.styles';
+import { ServicesOptionsProps } from './ServicesOptions.types';
+
+const ServicesOptions: React.FC<ServicesOptionsProps> = ({ service }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleEdit = () => {
+    const serviceId = service.service_id.split('/').pop();
+    locationService.push(`/edit-instance/${serviceId}`);
+  };
+
+  const menu = () => (
+    <Menu>
+      <Menu.Item ariaLabel={Messages.editAria} label={Messages.edit} icon="pen" onClick={handleEdit} />
+      <Menu.Item ariaLabel={Messages.deleteAria} label={Messages.delete} icon="trash-alt" onClick={openModal} />
+    </Menu>
+  );
+
+  return (
+    <div className={styles.Cell}>
+      <DeleteServiceModal
+        serviceId={service.service_id}
+        serviceName={service.service_name}
+        isOpen={isModalOpen}
+        onCancel={closeModal}
+      />
+      <Dropdown overlay={menu}>
+        <IconButton ariaLabel={Messages.optionsAriaLabel} name="ellipsis-v" />
+      </Dropdown>
+    </div>
+  );
+};
+
+export default ServicesOptions;
diff --git a/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.types.ts b/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.types.ts
new file mode 100644
index 0000000000000..f9f9bf37c7541
--- /dev/null
+++ b/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.types.ts
@@ -0,0 +1,5 @@
+export interface ServicesOptionsProps {
+  // todo: add type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  service: any;
+}
diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaNavigation/PerconaNavigation.constants.ts b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNavigation/PerconaNavigation.constants.ts
index 8ac1ad0ff92fa..5332bf583f332 100644
--- a/public/app/percona/shared/components/PerconaBootstrapper/PerconaNavigation/PerconaNavigation.constants.ts
+++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNavigation/PerconaNavigation.constants.ts
@@ -160,6 +160,14 @@ export const PMM_ADD_INSTANCE_PAGE: NavModelItem = {
   showIconInNavbar: true,
 };
 
+export const PMM_EDIT_INSTANCE_PAGE: NavModelItem = {
+  id: 'edit-instance',
+  url: `${config.appSubUrl}/edit-instance`,
+  text: 'Edit Instance',
+  hideFromTabs: true,
+  showIconInNavbar: false,
+};
+
 export const getPmmSettingsPage = (alertingEnabled = false): NavModelItem => {
   const children: NavModelItem[] = [
     {
diff --git a/public/app/percona/shared/components/PerconaBootstrapper/PerconaNavigation/PerconaNavigation.tsx b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNavigation/PerconaNavigation.tsx
index 1689369fdf516..f0f346371832a 100644
--- a/public/app/percona/shared/components/PerconaBootstrapper/PerconaNavigation/PerconaNavigation.tsx
+++ b/public/app/percona/shared/components/PerconaBootstrapper/PerconaNavigation/PerconaNavigation.tsx
@@ -17,6 +17,7 @@ import {
   PMM_ADD_INSTANCE_PAGE,
   PMM_BACKUP_PAGE,
   PMM_DBAAS_PAGE,
+  PMM_EDIT_INSTANCE_PAGE,
   PMM_ENTITLEMENTS_PAGE,
   PMM_ENVIRONMENT_OVERVIEW_PAGE,
   PMM_INVENTORY_PAGE,
@@ -46,6 +47,7 @@ const PerconaNavigation: React.FC = () => {
   dispatch(updateNavIndex(PMM_BACKUP_PAGE));
   dispatch(updateNavIndex(PMM_INVENTORY_PAGE));
   dispatch(updateNavIndex(PMM_ADD_INSTANCE_PAGE));
+  dispatch(updateNavIndex(PMM_EDIT_INSTANCE_PAGE));
   dispatch(updateNavIndex(PMM_TICKETS_PAGE));
   dispatch(updateNavIndex(PMM_ENTITLEMENTS_PAGE));
   dispatch(updateNavIndex(PMM_ENVIRONMENT_OVERVIEW_PAGE));
diff --git a/public/app/percona/shared/core/reducers/services/services.ts b/public/app/percona/shared/core/reducers/services/services.ts
index 89942be9bfcd4..4e86100c513b0 100644
--- a/public/app/percona/shared/core/reducers/services/services.ts
+++ b/public/app/percona/shared/core/reducers/services/services.ts
@@ -1,12 +1,13 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
+import { withSerializedError } from 'app/features/alerting/unified/utils/redux';
 import { ServicesService } from 'app/percona/shared/services/services/Services.service';
 import { ServiceListPayload, ServiceType } from 'app/percona/shared/services/services/Services.types';
 import { createAsyncThunk } from 'app/types';
 
 import { filterFulfilled, processPromiseResults } from '../../../helpers/promises';
 
-import { ListServicesParams, RemoveServicesParams, ServicesState } from './services.types';
+import { ListServicesParams, RemoveServiceParams, RemoveServicesParams, ServicesState } from './services.types';
 import { toListServicesBody, toRemoveServiceBody } from './services.utils';
 
 const initialState: ServicesState = {
@@ -77,4 +78,18 @@ export const removeServicesAction = createAsyncThunk(
   }
 );
 
+export const removeServiceAction = createAsyncThunk(
+  'percona/removeServices',
+  async (params: RemoveServiceParams, thunkAPI): Promise<void> =>
+    withSerializedError(
+      (async () => {
+        const body = toRemoveServiceBody(params);
+        await ServicesService.removeService(body);
+
+        thunkAPI.dispatch(fetchServicesAction({}));
+        thunkAPI.dispatch(fetchActiveServiceTypesAction());
+      })()
+    )
+);
+
 export default servicesSlice.reducer;
diff --git a/public/app/routes/routes.tsx b/public/app/routes/routes.tsx
index 2691dbfe73f1c..a28f1e7bef485 100644
--- a/public/app/routes/routes.tsx
+++ b/public/app/routes/routes.tsx
@@ -742,6 +742,18 @@ export function getAppRoutes(): RouteDescriptor[] {
         () => import(/* webpackChunkName: "AddInstancePage" */ 'app/percona/add-instance/panel')
       ),
     },
+    {
+      path: '/add-instance/:instanceType',
+      component: SafeDynamicImport(
+        () => import(/* webpackChunkName: "AddInstancePage" */ 'app/percona/add-instance/panel')
+      ),
+    },
+    {
+      path: '/edit-instance/:serviceId',
+      component: SafeDynamicImport(
+        () => import(/* webpackChunkName: "AddInstancePage" */ 'app/percona/edit-instance/EditInstance')
+      ),
+    },
     {
       path: '/add-instance/:tab',
       component: SafeDynamicImport(

From c645b965f12d4ee944c9c9f016f9e2b241498aec Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Fri, 20 Jan 2023 14:21:29 +0100
Subject: [PATCH 02/32] PMM-11148 Refactor AddInstance

---
 .../components/AddInstance/AddInstance.test.tsx            | 4 ++--
 .../add-instance/components/AddInstance/AddInstance.tsx    | 3 +--
 .../components/AddInstance/AddInstance.types.ts            | 7 +++----
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/public/app/percona/add-instance/components/AddInstance/AddInstance.test.tsx b/public/app/percona/add-instance/components/AddInstance/AddInstance.test.tsx
index b1f64f3acc96d..801aa4c9f9e1e 100644
--- a/public/app/percona/add-instance/components/AddInstance/AddInstance.test.tsx
+++ b/public/app/percona/add-instance/components/AddInstance/AddInstance.test.tsx
@@ -45,8 +45,8 @@ describe('AddInstance page::', () => {
 
     expect(onSelectInstanceType).toBeCalledTimes(0);
 
-    const button = await screen.findByTestId('rds-instance');
-    fireEvent.click(button);
+    const button = (await screen.findByTestId('rds-instance')).querySelector('button');
+    fireEvent.click(button!);
 
     expect(onSelectInstanceType).toBeCalledTimes(1);
     expect(onSelectInstanceType.mock.calls[0][0]).toStrictEqual({ type: 'rds' });
diff --git a/public/app/percona/add-instance/components/AddInstance/AddInstance.tsx b/public/app/percona/add-instance/components/AddInstance/AddInstance.tsx
index 06d8eb0613d29..6245d383880a3 100644
--- a/public/app/percona/add-instance/components/AddInstance/AddInstance.tsx
+++ b/public/app/percona/add-instance/components/AddInstance/AddInstance.tsx
@@ -44,8 +44,7 @@ export const AddInstance: FC<AddInstanceProps> = ({ selectedInstanceType, onSele
     [showAzure]
   );
 
-  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-  const selectInstanceType = (type: string) => () => onSelectInstanceType({ type: type as InstanceAvailableType });
+  const selectInstanceType = (type: InstanceAvailableType) => () => onSelectInstanceType({ type });
 
   return (
     <section className={styles2.Content}>
diff --git a/public/app/percona/add-instance/components/AddInstance/AddInstance.types.ts b/public/app/percona/add-instance/components/AddInstance/AddInstance.types.ts
index 0ba96101ee070..0b1f0927fbf0a 100644
--- a/public/app/percona/add-instance/components/AddInstance/AddInstance.types.ts
+++ b/public/app/percona/add-instance/components/AddInstance/AddInstance.types.ts
@@ -1,11 +1,10 @@
 import { IconName } from '@grafana/data';
-import { Databases } from 'app/percona/shared/core';
 
-import { InstanceAvailable, InstanceTypesExtra } from '../../panel.types';
+import { InstanceAvailable, InstanceAvailableType } from '../../panel.types';
 
 export interface SelectInstanceProps extends InstanceListItem {
   isSelected: boolean;
-  selectInstanceType: (type: string) => () => void;
+  selectInstanceType: (type: InstanceAvailableType) => () => void;
 }
 
 export interface AddInstanceProps {
@@ -15,7 +14,7 @@ export interface AddInstanceProps {
 }
 
 export interface InstanceListItem {
-  type: InstanceTypesExtra | Databases;
+  type: InstanceAvailableType;
   icon?: IconName;
   title: string;
   isHidden?: boolean;

From b830536de95544b5b02f657e235f3891eecbdbe6 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Fri, 20 Jan 2023 15:06:04 +0100
Subject: [PATCH 03/32] PMM-11148 remove unnecessary tooltip icon

---
 .../HAProxyConnectionDetails/HAProxyConnectionDetails.tsx  | 5 -----
 .../AddRemoteInstance/FormParts/Labels/Labels.tsx          | 2 --
 .../FormParts/MainDetails/MainDetails.tsx                  | 5 -----
 .../MongoDBConnectionDetails/MongoDBConnectionDetails.tsx  | 6 ------
 .../MySQLConnectionDetails/MySQLConnectionDetails.tsx      | 6 ------
 .../PostgreSQLConnectionDetails.tsx                        | 7 -------
 6 files changed, 31 deletions(-)

diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/HAProxyConnectionDetails/HAProxyConnectionDetails.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/HAProxyConnectionDetails/HAProxyConnectionDetails.tsx
index b7bc5ee8e50d7..946e46a448f87 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/HAProxyConnectionDetails/HAProxyConnectionDetails.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/HAProxyConnectionDetails/HAProxyConnectionDetails.tsx
@@ -23,7 +23,6 @@ export const HAProxyConnectionDetails: FC<MainDetailsFormPartProps> = ({ remoteI
           initialValue=""
           label={Messages.form.labels.mainDetails.serviceName}
           tooltipText={Messages.form.tooltips.mainDetails.serviceName}
-          tooltipIcon="info-circle"
           placeholder={Messages.form.placeholders.mainDetails.serviceName}
         />
         <div />
@@ -34,7 +33,6 @@ export const HAProxyConnectionDetails: FC<MainDetailsFormPartProps> = ({ remoteI
           initialValue=""
           label={Messages.form.labels.mainDetails.address}
           tooltipText={Messages.form.tooltips.mainDetails.address}
-          tooltipIcon="info-circle"
           placeholder={Messages.form.placeholders.mainDetails.address}
           validators={[validators.required]}
         />
@@ -43,7 +41,6 @@ export const HAProxyConnectionDetails: FC<MainDetailsFormPartProps> = ({ remoteI
           initialValue=""
           label={Messages.form.labels.mainDetails.port}
           tooltipText={Messages.form.tooltips.haproxy.port}
-          tooltipIcon="info-circle"
           placeholder={`Port (default: ${remoteInstanceCredentials.port} )`}
           validators={portValidators}
         />
@@ -54,7 +51,6 @@ export const HAProxyConnectionDetails: FC<MainDetailsFormPartProps> = ({ remoteI
           initialValue=""
           label={Messages.form.labels.mainDetails.username}
           tooltipText={Messages.form.tooltips.haproxy.username}
-          tooltipIcon="info-circle"
           placeholder={Messages.form.placeholders.mainDetails.username}
           format={trim}
         />
@@ -63,7 +59,6 @@ export const HAProxyConnectionDetails: FC<MainDetailsFormPartProps> = ({ remoteI
           initialValue=""
           label={Messages.form.labels.mainDetails.password}
           tooltipText={Messages.form.tooltips.haproxy.password}
-          tooltipIcon="info-circle"
           placeholder={Messages.form.placeholders.mainDetails.password}
           format={trim}
         />
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.tsx
index 4c2c77b32960f..3f500dee9bdc1 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.tsx
@@ -40,7 +40,6 @@ export const LabelsFormPart: FC<LabelsProps> = ({ showNodeFields = true }) => {
             name="region"
             placeholder={Messages.form.placeholders.labels.region}
             label={Messages.form.labels.labels.region}
-            tooltipIcon="info-circle"
             tooltipText={Messages.form.tooltips.labels.region}
           />
         ) : (
@@ -54,7 +53,6 @@ export const LabelsFormPart: FC<LabelsProps> = ({ showNodeFields = true }) => {
             placeholder={Messages.form.placeholders.labels.az}
             label={Messages.form.labels.labels.az}
             tooltipText={Messages.form.tooltips.labels.az}
-            tooltipIcon="info-circle"
           />
           <div />
         </div>
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MainDetails/MainDetails.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MainDetails/MainDetails.tsx
index 147775fee51a5..13019166a86a1 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MainDetails/MainDetails.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MainDetails/MainDetails.tsx
@@ -24,7 +24,6 @@ export const MainDetailsFormPart: FC<MainDetailsFormPartProps> = ({ form, remote
           name="serviceName"
           label={Messages.form.labels.mainDetails.serviceName}
           tooltipText={Messages.form.tooltips.mainDetails.serviceName}
-          tooltipIcon="info-circle"
           placeholder={Messages.form.placeholders.mainDetails.serviceName}
         />
         <div />
@@ -34,7 +33,6 @@ export const MainDetailsFormPart: FC<MainDetailsFormPartProps> = ({ form, remote
           name="address"
           label={Messages.form.labels.mainDetails.address}
           tooltipText={Messages.form.tooltips.mainDetails.address}
-          tooltipIcon="info-circle"
           placeholder={Messages.form.placeholders.mainDetails.address}
           validators={[validators.required]}
           disabled={remoteInstanceCredentials.isRDS}
@@ -43,7 +41,6 @@ export const MainDetailsFormPart: FC<MainDetailsFormPartProps> = ({ form, remote
           name="port"
           label={Messages.form.labels.mainDetails.port}
           tooltipText={Messages.form.tooltips.mainDetails.port}
-          tooltipIcon="info-circle"
           placeholder={`Port (default: ${remoteInstanceCredentials.port} )`}
           validators={portValidators}
         />
@@ -54,7 +51,6 @@ export const MainDetailsFormPart: FC<MainDetailsFormPartProps> = ({ form, remote
           name="username"
           label={Messages.form.labels.mainDetails.username}
           tooltipText={Messages.form.tooltips.mainDetails.username}
-          tooltipIcon="info-circle"
           placeholder={Messages.form.placeholders.mainDetails.username}
           validators={userPassValidators}
         />
@@ -63,7 +59,6 @@ export const MainDetailsFormPart: FC<MainDetailsFormPartProps> = ({ form, remote
           name="password"
           label={Messages.form.labels.mainDetails.password}
           tooltipText={Messages.form.tooltips.mainDetails.password}
-          tooltipIcon="info-circle"
           placeholder={Messages.form.placeholders.mainDetails.password}
           validators={userPassValidators}
         />
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MongoDBConnectionDetails/MongoDBConnectionDetails.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MongoDBConnectionDetails/MongoDBConnectionDetails.tsx
index 0c0f3b3cf6805..fa7b4fec4e411 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MongoDBConnectionDetails/MongoDBConnectionDetails.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MongoDBConnectionDetails/MongoDBConnectionDetails.tsx
@@ -25,7 +25,6 @@ export const MongoDBConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, r
           name="serviceName"
           label={Messages.form.labels.mainDetails.serviceName}
           tooltipLinkText={Messages.form.tooltips.mainDetails.serviceName}
-          tooltipIcon="info-circle"
           placeholder={Messages.form.placeholders.mainDetails.serviceName}
         />
         <div />
@@ -35,7 +34,6 @@ export const MongoDBConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, r
           name="address"
           label={Messages.form.labels.mainDetails.address}
           tooltipText={Messages.form.tooltips.mainDetails.address}
-          tooltipIcon="info-circle"
           placeholder={Messages.form.placeholders.mainDetails.address}
           validators={[validators.required]}
           disabled={remoteInstanceCredentials.isRDS}
@@ -44,7 +42,6 @@ export const MongoDBConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, r
           name="port"
           label={Messages.form.labels.mainDetails.port}
           tooltipText={Messages.form.tooltips.mainDetails.port}
-          tooltipIcon="info-circle"
           placeholder={`Port (default: ${remoteInstanceCredentials.port} )`}
           validators={portValidators}
         />
@@ -55,7 +52,6 @@ export const MongoDBConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, r
           name="username"
           label={Messages.form.labels.mainDetails.username}
           tooltipText={Messages.form.tooltips.mainDetails.username}
-          tooltipIcon="info-circle"
           placeholder={Messages.form.placeholders.mainDetails.username}
           validators={userPassValidators}
         />
@@ -64,7 +60,6 @@ export const MongoDBConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, r
           name="password"
           label={Messages.form.labels.mainDetails.password}
           tooltipText={Messages.form.tooltips.mainDetails.password}
-          tooltipIcon="info-circle"
           placeholder={Messages.form.placeholders.mainDetails.password}
           validators={userPassValidators}
         />
@@ -75,7 +70,6 @@ export const MongoDBConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, r
           name="maxQueryLength"
           label={Messages.form.labels.mongodbDetails.maxQueryLength}
           tooltipText={Messages.form.tooltips.mongodbDetails.maxQueryLength}
-          tooltipIcon="info-circle"
           placeholder={Messages.form.placeholders.mongodbDetails.maxQueryLength}
           validators={maxQueryLengthValidators}
         />
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MySQLConnectionDetails/MySQLConnectionDetails.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MySQLConnectionDetails/MySQLConnectionDetails.tsx
index 8722c983d3464..60f2cd3791bdf 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MySQLConnectionDetails/MySQLConnectionDetails.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/MySQLConnectionDetails/MySQLConnectionDetails.tsx
@@ -25,7 +25,6 @@ export const MySQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, rem
           data-testid="service-name-label"
           name="serviceName"
           label={Messages.form.labels.mainDetails.serviceName}
-          tooltipIcon="info-circle"
           tooltipText={Messages.form.tooltips.mainDetails.serviceName}
           placeholder={Messages.form.placeholders.mainDetails.serviceName}
         />
@@ -36,7 +35,6 @@ export const MySQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, rem
           name="address"
           label={Messages.form.labels.mainDetails.address}
           tooltipText={Messages.form.tooltips.mainDetails.address}
-          tooltipIcon="info-circle"
           placeholder={Messages.form.placeholders.mainDetails.address}
           validators={[validators.required]}
           disabled={remoteInstanceCredentials.isRDS}
@@ -45,7 +43,6 @@ export const MySQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, rem
           name="port"
           label={Messages.form.labels.mainDetails.port}
           tooltipText={Messages.form.tooltips.mainDetails.port}
-          tooltipIcon="info-circle"
           placeholder={`Port (default: ${remoteInstanceCredentials.port} )`}
           validators={portValidators}
         />
@@ -56,7 +53,6 @@ export const MySQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, rem
           name="username"
           label={Messages.form.labels.mainDetails.username}
           tooltipText={Messages.form.tooltips.mainDetails.username}
-          tooltipIcon="info-circle"
           placeholder={Messages.form.placeholders.mainDetails.username}
           validators={userPassValidators}
         />
@@ -65,7 +61,6 @@ export const MySQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, rem
           name="password"
           label={Messages.form.labels.mainDetails.password}
           tooltipText={Messages.form.tooltips.mainDetails.password}
-          tooltipIcon="info-circle"
           placeholder={Messages.form.placeholders.mainDetails.password}
           validators={userPassValidators}
         />
@@ -76,7 +71,6 @@ export const MySQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form, rem
           name="maxQueryLength"
           label={Messages.form.labels.mysqlDetails.maxQueryLength}
           tooltipText={Messages.form.tooltips.mysqlDetails.maxQueryLength}
-          tooltipIcon="info-circle"
           placeholder={Messages.form.placeholders.mysqlDetails.maxQueryLength}
           validators={maxQueryLengthValidators}
         />
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/PostgreSQLConnectionDetails/PostgreSQLConnectionDetails.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/PostgreSQLConnectionDetails/PostgreSQLConnectionDetails.tsx
index 51f16570564c6..ec8b8e517971d 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/PostgreSQLConnectionDetails/PostgreSQLConnectionDetails.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/PostgreSQLConnectionDetails/PostgreSQLConnectionDetails.tsx
@@ -26,7 +26,6 @@ export const PostgreSQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form
           placeholder={Messages.form.placeholders.mainDetails.serviceName}
           label={Messages.form.labels.mainDetails.serviceName}
           tooltipText={Messages.form.tooltips.mainDetails.serviceName}
-          tooltipIcon="info-circle"
         />
         <div />
       </div>
@@ -38,7 +37,6 @@ export const PostgreSQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form
           disabled={remoteInstanceCredentials.isRDS}
           label={Messages.form.labels.mainDetails.address}
           tooltipText={Messages.form.tooltips.mainDetails.address}
-          tooltipIcon="info-circle"
         />
         <TextInputField
           name="port"
@@ -46,7 +44,6 @@ export const PostgreSQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form
           validators={portValidators}
           label={Messages.form.labels.mainDetails.port}
           tooltipText={Messages.form.tooltips.mainDetails.port}
-          tooltipIcon="info-circle"
         />
       </div>
       <div className={styles.group}>
@@ -57,7 +54,6 @@ export const PostgreSQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form
           validators={userPassValidators}
           label={Messages.form.labels.mainDetails.username}
           tooltipText={Messages.form.tooltips.mainDetails.username}
-          tooltipIcon="info-circle"
         />
         <PasswordInputField
           key={`password-${tlsFlag}`}
@@ -66,7 +62,6 @@ export const PostgreSQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form
           validators={userPassValidators}
           label={Messages.form.labels.mainDetails.password}
           tooltipText={Messages.form.tooltips.mainDetails.password}
-          tooltipIcon="info-circle"
         />
       </div>
       <div className={styles.group}>
@@ -76,7 +71,6 @@ export const PostgreSQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form
           placeholder={Messages.form.placeholders.postgresqlDetails.database}
           label={Messages.form.labels.postgresqlDetails.database}
           tooltipText={Messages.form.tooltips.postgresqlDetails.database}
-          tooltipIcon="info-circle"
         />
         <TextInputField
           key="maxQueryLength"
@@ -85,7 +79,6 @@ export const PostgreSQLConnectionDetails: FC<MainDetailsFormPartProps> = ({ form
           validators={maxQueryLengthValidators}
           label={Messages.form.labels.postgresqlDetails.maxQueryLength}
           tooltipText={Messages.form.tooltips.postgresqlDetails.maxQueryLength}
-          tooltipIcon="info-circle"
         />
       </div>
     </div>

From 89f5dad814ab5cf7e2704260a541f893757cebdc Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Fri, 20 Jan 2023 15:29:00 +0100
Subject: [PATCH 04/32] PMM-11148 Fix discovery tests

---
 .../components/AzureDiscovery/Discovery.test.tsx       |  3 ++-
 .../components/Discovery/Discovery.test.tsx            |  2 ++
 .../Discovery/__mocks__/Discovery.service.ts           | 10 ++++++++++
 3 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 public/app/percona/add-instance/components/Discovery/__mocks__/Discovery.service.ts

diff --git a/public/app/percona/add-instance/components/AzureDiscovery/Discovery.test.tsx b/public/app/percona/add-instance/components/AzureDiscovery/Discovery.test.tsx
index 89a563ac96a40..cdab4cccadb1c 100644
--- a/public/app/percona/add-instance/components/AzureDiscovery/Discovery.test.tsx
+++ b/public/app/percona/add-instance/components/AzureDiscovery/Discovery.test.tsx
@@ -3,6 +3,8 @@ import React from 'react';
 
 import Discovery from './Discovery';
 
+jest.mock('app/percona/add-instance/components/Discovery/Discovery.service');
+
 describe('Discovery instance:: ', () => {
   it('Should render correct', () => {
     const selectInstance = jest.fn();
@@ -12,6 +14,5 @@ describe('Discovery instance:: ', () => {
     expect(screen.getByTestId('azure_client_secret-password-input')).toBeInTheDocument();
     expect(screen.getByTestId('azure_tenant_id-text-input')).toBeInTheDocument();
     expect(screen.getByTestId('azure_subscription_id-text-input')).toBeInTheDocument();
-    expect(screen.getByTestId('credentials-search-button')).toBeInTheDocument();
   });
 });
diff --git a/public/app/percona/add-instance/components/Discovery/Discovery.test.tsx b/public/app/percona/add-instance/components/Discovery/Discovery.test.tsx
index 64f43b4624834..f0339e98860cc 100644
--- a/public/app/percona/add-instance/components/Discovery/Discovery.test.tsx
+++ b/public/app/percona/add-instance/components/Discovery/Discovery.test.tsx
@@ -3,6 +3,8 @@ import React from 'react';
 
 import Discovery from './Discovery';
 
+jest.mock('app/percona/add-instance/components/Discovery/Discovery.service');
+
 describe('Discovery:: ', () => {
   it('should render credentials, instances and docs', async () => {
     await waitFor(() => render(<Discovery onSubmit={jest.fn()} selectInstance={jest.fn()} />));
diff --git a/public/app/percona/add-instance/components/Discovery/__mocks__/Discovery.service.ts b/public/app/percona/add-instance/components/Discovery/__mocks__/Discovery.service.ts
new file mode 100644
index 0000000000000..71ce66adb7384
--- /dev/null
+++ b/public/app/percona/add-instance/components/Discovery/__mocks__/Discovery.service.ts
@@ -0,0 +1,10 @@
+import * as service from '../Discovery.service';
+
+const DiscoveryService = jest.genMockFromModule<typeof service>('../Discovery.service').default;
+
+DiscoveryService.discoveryRDS = () =>
+  Promise.resolve({
+    rds_instances: [],
+  });
+
+export default DiscoveryService;

From b5abf95ef1a0aa68866ea785989712cb8dcb729c Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Fri, 20 Jan 2023 15:36:09 +0100
Subject: [PATCH 05/32] PMM-11148 Fix add instance submission

---
 .../components/AddRemoteInstance/AddRemoteInstance.tsx      | 3 ++-
 .../Discovery/components/Credentials/Credentials.tsx        | 3 ++-
 public/app/percona/add-instance/panel.constants.ts          | 1 +
 public/app/percona/add-instance/panel.tsx                   | 6 +++---
 4 files changed, 8 insertions(+), 5 deletions(-)
 create mode 100644 public/app/percona/add-instance/panel.constants.ts

diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.tsx
index 7424dae58395c..2443e41cdd5dd 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.tsx
@@ -10,6 +10,7 @@ import { useCancelToken } from 'app/percona/shared/components/hooks/cancelToken.
 import { Databases } from 'app/percona/shared/core';
 import { isApiCancelError } from 'app/percona/shared/helpers/api';
 
+import { ADD_INSTANCE_FORM_NAME } from '../../panel.constants';
 import { InstanceTypesExtra, InstanceTypes, INSTANCE_TYPES_LABELS, InstanceAvailableType } from '../../panel.types';
 
 import { ADD_AZURE_CANCEL_TOKEN, ADD_RDS_CANCEL_TOKEN } from './AddRemoteInstance.constants';
@@ -145,7 +146,7 @@ const AddRemoteInstance: FC<AddRemoteInstanceProps> = ({
           },
         }}
         render={({ form, handleSubmit }) => (
-          <form id="add-instance-form" onSubmit={handleSubmit} data-testid="add-remote-instance-form">
+          <form id={ADD_INSTANCE_FORM_NAME} onSubmit={handleSubmit} data-testid="add-remote-instance-form">
             <h3 className={styles.addRemoteInstanceTitle}>{getHeader(type)}</h3>
             {formParts(form)}
           </form>
diff --git a/public/app/percona/add-instance/components/Discovery/components/Credentials/Credentials.tsx b/public/app/percona/add-instance/components/Discovery/components/Credentials/Credentials.tsx
index 147ddd5787597..257b4e8c7c460 100644
--- a/public/app/percona/add-instance/components/Discovery/components/Credentials/Credentials.tsx
+++ b/public/app/percona/add-instance/components/Discovery/components/Credentials/Credentials.tsx
@@ -3,6 +3,7 @@ import React, { FC, useCallback } from 'react';
 import { Form as FormFinal } from 'react-final-form';
 
 import { useStyles } from '@grafana/ui';
+import { ADD_INSTANCE_FORM_NAME } from 'app/percona/add-instance/panel.constants';
 
 import { Messages } from './Credentials.messages';
 import { getStyles } from './Credentials.styles';
@@ -23,7 +24,7 @@ const Credentials: FC<CredentialsProps> = ({ discover }) => {
       onSubmit={onSubmit}
       render={({ handleSubmit }) => (
         <form
-          id="add-instance-form"
+          id={ADD_INSTANCE_FORM_NAME}
           onSubmit={handleSubmit}
           className={styles.instanceForm}
           data-testid="credentials-form"
diff --git a/public/app/percona/add-instance/panel.constants.ts b/public/app/percona/add-instance/panel.constants.ts
new file mode 100644
index 0000000000000..9350a46cec487
--- /dev/null
+++ b/public/app/percona/add-instance/panel.constants.ts
@@ -0,0 +1 @@
+export const ADD_INSTANCE_FORM_NAME = 'add-instance-form';
diff --git a/public/app/percona/add-instance/panel.tsx b/public/app/percona/add-instance/panel.tsx
index a0bf57c92a87e..b0c5254d975f5 100644
--- a/public/app/percona/add-instance/panel.tsx
+++ b/public/app/percona/add-instance/panel.tsx
@@ -14,6 +14,7 @@ import AddRemoteInstance from './components/AddRemoteInstance/AddRemoteInstance'
 import { Messages } from './components/AddRemoteInstance/AddRemoteInstance.messages';
 import AzureDiscovery from './components/AzureDiscovery/Discovery';
 import Discovery from './components/Discovery/Discovery';
+import { ADD_INSTANCE_FORM_NAME } from './panel.constants';
 import { getStyles } from './panel.styles';
 import { InstanceTypesExtra, InstanceAvailable, AvailableTypes, AddInstanceRouteParams } from './panel.types';
 
@@ -32,11 +33,10 @@ const AddInstancePanel = () => {
   const { result: settings } = useSelector(getPerconaSettings);
   const { azureDiscoverEnabled } = settings!;
   const { instanceType = '' } = useParams<AddInstanceRouteParams>();
-  console.log(instanceType);
   const [selectedInstance, selectInstance] = useState<InstanceAvailable>({
     type: availableInstanceTypes.includes(instanceType as AvailableTypes) ? instanceType : '',
   });
-  const [formName, setFormName] = useState('');
+  const [formName, setFormName] = useState(instanceType ? ADD_INSTANCE_FORM_NAME : '');
   const [showSelection, setShowSelection] = useState(!instanceType);
   const [submitting, setSubmitting] = useState(false);
   const history = useHistory();
@@ -89,7 +89,7 @@ const AddInstancePanel = () => {
 
     if (showSelection) {
       e.preventDefault();
-      setFormName('add-instance-form');
+      setFormName(ADD_INSTANCE_FORM_NAME);
     }
   };
 

From 8d388082bdee00e3afd27af1e51433aee77aba0d Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Mon, 23 Jan 2023 15:28:42 +0100
Subject: [PATCH 06/32] PMM-11148 Integrate service editing api

---
 .../edit-instance/EditInstance.constants.ts   |   1 +
 .../edit-instance/EditInstance.messages.ts    |  15 ++-
 .../edit-instance/EditInstance.styles.ts      |   9 ++
 .../percona/edit-instance/EditInstance.tsx    | 126 +++++++++++++-----
 .../edit-instance/EditInstance.types.ts       |  21 +--
 .../edit-instance/EditInstance.utils.ts       |  27 +---
 .../shared/core/reducers/services/services.ts |  44 +++++-
 .../core/reducers/services/services.types.ts  |  14 +-
 .../core/reducers/services/services.utils.ts  |  83 +++++++++++-
 .../services/services/Services.service.ts     |  19 ++-
 .../services/services/Services.types.ts       |  20 ++-
 11 files changed, 299 insertions(+), 80 deletions(-)
 create mode 100644 public/app/percona/edit-instance/EditInstance.constants.ts
 create mode 100644 public/app/percona/edit-instance/EditInstance.styles.ts

diff --git a/public/app/percona/edit-instance/EditInstance.constants.ts b/public/app/percona/edit-instance/EditInstance.constants.ts
new file mode 100644
index 0000000000000..aa3d3fac12d0e
--- /dev/null
+++ b/public/app/percona/edit-instance/EditInstance.constants.ts
@@ -0,0 +1 @@
+export const FETCH_SERVICE_CANCEL_TOKEN = 'fetchService';
diff --git a/public/app/percona/edit-instance/EditInstance.messages.ts b/public/app/percona/edit-instance/EditInstance.messages.ts
index c06556273ec73..968b3f04805b2 100644
--- a/public/app/percona/edit-instance/EditInstance.messages.ts
+++ b/public/app/percona/edit-instance/EditInstance.messages.ts
@@ -2,5 +2,18 @@ export const Messages = {
   title: 'Inventory / Edit Service',
   cancel: 'Cancel',
   saveChanges: 'Save Changes',
-  formTitle: (service: string) => `Editing "${service}" service`,
+  formTitle: (service: string) => `Editing “${service}” service`,
+  success: {
+    title: (service: string) => `Service “${service}” was changed`,
+    description: 'It is now ready to continue monitoring.',
+  },
+  modal: {
+    description:
+      'Changing existing labels can affect other parts of PMM dependent on it, such as: alerting, data in dashboards, etc. ',
+    details: 'Find more details about it in ',
+    detailsLink: 'our documentation',
+    dot: '.',
+    confirm: 'Confirm and save changes',
+    cancel: 'Cancel',
+  },
 };
diff --git a/public/app/percona/edit-instance/EditInstance.styles.ts b/public/app/percona/edit-instance/EditInstance.styles.ts
new file mode 100644
index 0000000000000..6a94dc2828bd0
--- /dev/null
+++ b/public/app/percona/edit-instance/EditInstance.styles.ts
@@ -0,0 +1,9 @@
+import { css } from '@emotion/css';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+export const getStyles = (theme: GrafanaTheme2) => ({
+  link: css`
+    color: ${theme.colors.text.link};
+  `,
+});
diff --git a/public/app/percona/edit-instance/EditInstance.tsx b/public/app/percona/edit-instance/EditInstance.tsx
index 3ef8bd3d3ab7c..3b0a4826fed9b 100644
--- a/public/app/percona/edit-instance/EditInstance.tsx
+++ b/public/app/percona/edit-instance/EditInstance.tsx
@@ -1,37 +1,48 @@
+import { logger } from '@percona/platform-core';
 import React, { useEffect, useState } from 'react';
 import { Form } from 'react-final-form';
 import { useHistory, useParams } from 'react-router-dom';
 
-import { PageToolbar, ToolbarButton, ToolbarButtonRow } from '@grafana/ui';
+import { AppEvents } from '@grafana/data';
+import { Button, Modal, PageToolbar, ToolbarButton, ToolbarButtonRow, useStyles2 } from '@grafana/ui';
+import appEvents from 'app/core/app_events';
 import { Page } from 'app/core/components/Page/Page';
 import { InventoryService } from 'app/percona/inventory/Inventory.service';
+import { useAppDispatch } from 'app/store/store';
 
 import { Labels } from '../add-instance/components/AddRemoteInstance/FormParts';
+import { useCancelToken } from '../shared/components/hooks/cancelToken.hook';
+import { updateServiceAction } from '../shared/core/reducers/services';
+import { DbServicePayload } from '../shared/services/services/Services.types';
 
+import { FETCH_SERVICE_CANCEL_TOKEN } from './EditInstance.constants';
 import { Messages } from './EditInstance.messages';
-import { EditInstanceFormValues, EditInstanceRouteParams, Instance } from './EditInstance.types';
-import {
-  getCustomLabelsToAddEdit,
-  getCustomLabelKeysToRemove,
-  getInitialValues,
-  getServiceType,
-} from './EditInstance.utils';
+import { getStyles } from './EditInstance.styles';
+import { EditInstanceFormValues, EditInstanceRouteParams } from './EditInstance.types';
+import { getInitialValues, getService, toPayload } from './EditInstance.utils';
 
 const EditInstancePage: React.FC = () => {
   const history = useHistory();
+  const dispatch = useAppDispatch();
+  const styles = useStyles2(getStyles);
   const { serviceId } = useParams<EditInstanceRouteParams>();
   const [isLoading, setIsLoading] = useState(true);
-  const [service, setService] = useState<Instance>();
+  const [service, setService] = useState<DbServicePayload>();
+  const [generateToken] = useCancelToken();
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   useEffect(() => {
     fetchService(serviceId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [serviceId]);
 
   const fetchService = async (serviceId: string) => {
     setIsLoading(true);
-    const result = await InventoryService.getService('/service_id/' + serviceId);
-    const serviceType = getServiceType(result);
-    const service = result[serviceType];
+    const result = await InventoryService.getService(
+      '/service_id/' + serviceId,
+      generateToken(FETCH_SERVICE_CANCEL_TOKEN)
+    );
+    const service = getService(result);
 
     setService(service);
     setIsLoading(false);
@@ -41,36 +52,81 @@ const EditInstancePage: React.FC = () => {
     history.push('/inventory/services');
   };
 
-  const handleSubmit = (values: EditInstanceFormValues) => {
-    const toAddEdit = getCustomLabelsToAddEdit(service?.custom_labels || {}, values.custom_labels || '');
-    const toRemove = getCustomLabelKeysToRemove(service?.custom_labels || {}, values.custom_labels || '');
+  const handleSubmit = async (values: EditInstanceFormValues) => {
+    if (!service) {
+      return;
+    }
 
-    // todo: actually submit data
-    console.log('add-edit', toAddEdit);
-    console.log('remove', toRemove);
+    try {
+      await dispatch(
+        updateServiceAction({
+          current: service,
+          serviceId: service.service_id,
+          labels: {
+            cluster: values.cluster,
+            environment: values.environment,
+            replication_set: values.replication_set,
+          },
+          custom_labels: toPayload(values.custom_labels || ''),
+        })
+      ).unwrap();
+      appEvents.emit(AppEvents.alertSuccess, [
+        Messages.success.title(service.service_name),
+        Messages.success.description,
+      ]);
+      history.push('/inventory/services');
+    } catch (error) {
+      logger.log(error);
+    }
+  };
+
+  const handleCancelModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleOpenModal = () => {
+    setIsModalOpen(true);
   };
 
   return (
     <Form
       initialValues={getInitialValues(service)}
       onSubmit={handleSubmit}
-      render={({ handleSubmit }) => (
-        <Page>
-          <PageToolbar title={Messages.title} onGoBack={handleCancel}>
-            <ToolbarButtonRow>
-              <ToolbarButton onClick={handleCancel}>{Messages.cancel}</ToolbarButton>
-              <ToolbarButton onClick={handleSubmit} variant="primary">
-                {Messages.saveChanges}
-              </ToolbarButton>
-            </ToolbarButtonRow>
-          </PageToolbar>
-          <Page.Contents isLoading={isLoading}>
-            <h3>{Messages.formTitle(service?.service_name || '')}</h3>
-            <form>
-              <Labels showNodeFields={false} />
-            </form>
-          </Page.Contents>
-        </Page>
+      render={({ handleSubmit, submitting }) => (
+        <>
+          <Modal isOpen={isModalOpen} title={Messages.formTitle(service?.service_name || '')}>
+            <p>
+              {Messages.modal.description}
+              {Messages.modal.details}
+              <a className={styles.link} href="">
+                {Messages.modal.detailsLink}
+              </a>
+              {Messages.modal.dot}
+            </p>
+            <Modal.ButtonRow>
+              <Button onClick={handleSubmit}>{Messages.modal.confirm}</Button>
+              <Button variant="secondary" onClick={handleCancelModal}>
+                {Messages.modal.cancel}
+              </Button>
+            </Modal.ButtonRow>
+          </Modal>
+          <Page>
+            <PageToolbar title={Messages.title} onGoBack={handleCancel}>
+              <ToolbarButtonRow>
+                <ToolbarButton onClick={handleCancel}>{Messages.cancel}</ToolbarButton>
+                <ToolbarButton onClick={handleOpenModal} variant="primary" disabled={submitting}>
+                  {Messages.saveChanges}
+                </ToolbarButton>
+              </ToolbarButtonRow>
+            </PageToolbar>
+            <Page.Contents isLoading={isLoading}>
+              <h3>{Messages.formTitle(service?.service_name || '')}</h3>
+              <form>
+                <Labels showNodeFields={false} />
+              </form>
+            </Page.Contents>
+          </Page>
+        </>
       )}
     />
   );
diff --git a/public/app/percona/edit-instance/EditInstance.types.ts b/public/app/percona/edit-instance/EditInstance.types.ts
index 984f207317df6..46c05226fe3e9 100644
--- a/public/app/percona/edit-instance/EditInstance.types.ts
+++ b/public/app/percona/edit-instance/EditInstance.types.ts
@@ -2,22 +2,9 @@ export interface EditInstanceRouteParams {
   serviceId: string;
 }
 
-export interface Instance {
-  service_id: string;
-  service_name: string;
-  environment: string;
-  cluster: string;
-  replication_set: string;
-  region: string;
-  availability_zone: string;
-  custom_labels: Record<string, string>;
-}
-
 export interface EditInstanceFormValues {
-  environment: string;
-  cluster: string;
-  replication_set: string;
-  region: string;
-  availability_zone: string;
-  custom_labels: string;
+  environment?: string;
+  cluster?: string;
+  replication_set?: string;
+  custom_labels?: string;
 }
diff --git a/public/app/percona/edit-instance/EditInstance.utils.ts b/public/app/percona/edit-instance/EditInstance.utils.ts
index 7acf9b8e476b2..12bc9252e2307 100644
--- a/public/app/percona/edit-instance/EditInstance.utils.ts
+++ b/public/app/percona/edit-instance/EditInstance.utils.ts
@@ -1,11 +1,13 @@
 import { Databases } from '../shared/core';
+import { DbServicePayload } from '../shared/services/services/Services.types';
 
-import { EditInstanceFormValues, Instance } from './EditInstance.types';
+import { EditInstanceFormValues } from './EditInstance.types';
 
-// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-export const getServiceType = (result: Record<Databases, Instance>): Databases => Object.keys(result)[0] as Databases;
+export const getService = (result: Record<Databases, DbServicePayload>): DbServicePayload =>
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  result[Object.keys(result)[0] as Databases];
 
-export const getInitialValues = (service?: Instance): EditInstanceFormValues => {
+export const getInitialValues = (service?: DbServicePayload): EditInstanceFormValues => {
   if (service) {
     return {
       ...service,
@@ -17,8 +19,6 @@ export const getInitialValues = (service?: Instance): EditInstanceFormValues =>
     environment: '',
     cluster: '',
     replication_set: '',
-    region: '',
-    availability_zone: '',
     custom_labels: '',
   };
 };
@@ -28,7 +28,7 @@ export const fromPayload = (customLabels: Record<string, string>): string =>
     .map(([label, value]) => label + ':' + value)
     .join('\n');
 
-export const customLabelstoObject = (customLabels: string): Record<string, string> =>
+export const toPayload = (customLabels: string): Record<string, string> =>
   customLabels
     .split(/[\n\s]/)
     .filter(Boolean)
@@ -39,16 +39,3 @@ export const customLabelstoObject = (customLabels: string): Record<string, strin
 
       return acc;
     }, {});
-
-// todo: refactor functions to be more performant
-export const getCustomLabelsToAddEdit = (current: Record<string, string>, updated: string): Record<string, string> => {
-  const updatedMap = customLabelstoObject(updated);
-  const toRemove = getCustomLabelKeysToRemove(current, updated);
-  const filtered = Object.entries(updatedMap).filter(([label]) => !toRemove.includes(label));
-  return Object.fromEntries(filtered);
-};
-
-export const getCustomLabelKeysToRemove = (current: Record<string, string>, updated: string): string[] => {
-  const updatedMap = customLabelstoObject(updated);
-  return Object.keys(current).filter((label) => updatedMap[label] === undefined);
-};
diff --git a/public/app/percona/shared/core/reducers/services/services.ts b/public/app/percona/shared/core/reducers/services/services.ts
index 4e86100c513b0..9eb535bea3c23 100644
--- a/public/app/percona/shared/core/reducers/services/services.ts
+++ b/public/app/percona/shared/core/reducers/services/services.ts
@@ -7,8 +7,22 @@ import { createAsyncThunk } from 'app/types';
 
 import { filterFulfilled, processPromiseResults } from '../../../helpers/promises';
 
-import { ListServicesParams, RemoveServiceParams, RemoveServicesParams, ServicesState } from './services.types';
-import { toListServicesBody, toRemoveServiceBody } from './services.utils';
+import {
+  ListServicesParams,
+  RemoveServiceParams,
+  RemoveServicesParams,
+  ServicesState,
+  UpdateServiceParams,
+} from './services.types';
+import {
+  didStandardLabelsChange,
+  hasLabelsToAddOrUpdate,
+  hasLabelsToRemove,
+  toCustomLabelsBodies,
+  toListServicesBody,
+  toRemoveServiceBody,
+  toUpdateServiceBody,
+} from './services.utils';
 
 const initialState: ServicesState = {
   activeTypes: [],
@@ -92,4 +106,30 @@ export const removeServiceAction = createAsyncThunk(
     )
 );
 
+export const updateServiceAction = createAsyncThunk('percona/updateService', (params: UpdateServiceParams, thunkAPI) =>
+  withSerializedError(
+    (async (): Promise<void> => {
+      const updateBody = toUpdateServiceBody(params);
+      const [addLabelsBody, removeLabelsBody] = toCustomLabelsBodies(params);
+      const requests: Array<Promise<{}>> = [];
+
+      if (didStandardLabelsChange(params)) {
+        requests.push(ServicesService.updateService(updateBody));
+      }
+
+      if (hasLabelsToAddOrUpdate(addLabelsBody)) {
+        requests.push(ServicesService.addCustomLabels(addLabelsBody));
+      }
+
+      if (hasLabelsToRemove(removeLabelsBody)) {
+        requests.push(ServicesService.removeCustomLabels(removeLabelsBody));
+      }
+
+      await Promise.all(requests);
+
+      thunkAPI.dispatch(fetchServicesAction({}));
+    })()
+  )
+);
+
 export default servicesSlice.reducer;
diff --git a/public/app/percona/shared/core/reducers/services/services.types.ts b/public/app/percona/shared/core/reducers/services/services.types.ts
index e74a9de62a681..a0b1343635ab8 100644
--- a/public/app/percona/shared/core/reducers/services/services.types.ts
+++ b/public/app/percona/shared/core/reducers/services/services.types.ts
@@ -1,6 +1,6 @@
 import { CancelToken } from 'axios';
 
-import { ServiceListPayload, ServiceType } from 'app/percona/shared/services/services/Services.types';
+import { DbServicePayload, ServiceListPayload, ServiceType } from 'app/percona/shared/services/services/Services.types';
 
 export interface ServicesState {
   activeTypes: ServiceType[];
@@ -24,3 +24,15 @@ export interface RemoveServicesParams {
   services: RemoveServiceParams[];
   cancelToken?: CancelToken;
 }
+
+export interface UpdateServiceParams {
+  serviceId: string;
+  labels: {
+    environment?: string;
+    cluster?: string;
+    replication_set?: string;
+    external_group?: string;
+  };
+  custom_labels: Record<string, string>;
+  current: DbServicePayload;
+}
diff --git a/public/app/percona/shared/core/reducers/services/services.utils.ts b/public/app/percona/shared/core/reducers/services/services.utils.ts
index 4c3f7bfafd3c4..43b5e6e22dbf1 100644
--- a/public/app/percona/shared/core/reducers/services/services.utils.ts
+++ b/public/app/percona/shared/core/reducers/services/services.utils.ts
@@ -1,6 +1,12 @@
-import { ListServicesBody, RemoveServiceBody } from 'app/percona/shared/services/services/Services.types';
+import {
+  AddCustomLabelsBody,
+  ListServicesBody,
+  RemoveCustomLabelsBody,
+  RemoveServiceBody,
+  UpdateServiceBody,
+} from 'app/percona/shared/services/services/Services.types';
 
-import { ListServicesParams, RemoveServiceParams } from './services.types';
+import { ListServicesParams, RemoveServiceParams, UpdateServiceParams } from './services.types';
 
 export const toRemoveServiceBody = (params: RemoveServiceParams): RemoveServiceBody => ({
   service_id: params.serviceId,
@@ -12,3 +18,76 @@ export const toListServicesBody = (params: Partial<ListServicesParams>): Partial
   service_type: params.serviceType,
   external_group: params.externalGroup,
 });
+
+export const toLabelValue = (original?: string, current?: string): string | undefined => {
+  if (original === current) {
+    return undefined;
+  }
+
+  // to clear a value set it's value to an empty string
+  if (original !== undefined && current === undefined) {
+    return '';
+  }
+
+  return current;
+};
+
+export const toUpdateServiceBody = ({ serviceId, labels, current }: UpdateServiceParams): UpdateServiceBody => ({
+  service_id: serviceId,
+  environment: toLabelValue(current.environment, labels.environment),
+  cluster: toLabelValue(current.cluster, labels.cluster),
+  replication_set: toLabelValue(current.replication_set, labels.replication_set),
+});
+
+export const toCustomLabelsBodies = (params: UpdateServiceParams): [AddCustomLabelsBody, RemoveCustomLabelsBody] => {
+  const original = params.current.custom_labels;
+
+  if (!original) {
+    return [
+      {
+        service_id: params.serviceId,
+        custom_labels: params.custom_labels,
+      },
+      {
+        service_id: params.serviceId,
+        custom_label_keys: [],
+      },
+    ];
+  }
+
+  const toAddOrUpdate: Record<string, string> = {};
+  const toRemove: string[] = [];
+
+  for (const label of Object.keys({
+    ...original,
+    ...params.custom_labels,
+  })) {
+    if (original[label] !== undefined && params.custom_labels[label] === undefined) {
+      toRemove.push(label);
+    } else if (original[label] === undefined && params.custom_labels[label] !== undefined) {
+      toAddOrUpdate[label] = params.custom_labels[label];
+    } else if (original[label] !== params.custom_labels[label]) {
+      toAddOrUpdate[label] = params.custom_labels[label];
+    }
+  }
+
+  return [
+    {
+      service_id: params.serviceId,
+      custom_labels: toAddOrUpdate,
+    },
+    {
+      service_id: params.serviceId,
+      custom_label_keys: toRemove,
+    },
+  ];
+};
+
+export const didStandardLabelsChange = ({ current, labels }: UpdateServiceParams): boolean =>
+  current.environment !== labels.environment ||
+  current.cluster !== labels.cluster ||
+  current.replication_set !== labels.replication_set;
+
+export const hasLabelsToAddOrUpdate = (body: AddCustomLabelsBody): boolean => !!Object.keys(body.custom_labels).length;
+
+export const hasLabelsToRemove = (body: RemoveCustomLabelsBody): boolean => !!body.custom_label_keys.length;
diff --git a/public/app/percona/shared/services/services/Services.service.ts b/public/app/percona/shared/services/services/Services.service.ts
index a86b7e1195f3f..b865a1a0eee38 100644
--- a/public/app/percona/shared/services/services/Services.service.ts
+++ b/public/app/percona/shared/services/services/Services.service.ts
@@ -2,7 +2,15 @@ import { CancelToken } from 'axios';
 
 import { api } from 'app/percona/shared/helpers/api';
 
-import { ListServicesBody, ListTypesPayload, RemoveServiceBody, ServiceListPayload } from './Services.types';
+import {
+  AddCustomLabelsBody,
+  ListServicesBody,
+  ListTypesPayload,
+  RemoveCustomLabelsBody,
+  RemoveServiceBody,
+  ServiceListPayload,
+  UpdateServiceBody,
+} from './Services.types';
 
 const BASE_URL = `/v1/inventory/Services`;
 
@@ -16,4 +24,13 @@ export const ServicesService = {
   removeService(body: RemoveServiceBody, token?: CancelToken) {
     return api.post<{}, RemoveServiceBody>(`${BASE_URL}/Remove`, body, false, token);
   },
+  updateService(body: UpdateServiceBody, token?: CancelToken) {
+    return api.post<{}, UpdateServiceBody>(`${BASE_URL}/Update`, body, false, token);
+  },
+  addCustomLabels(body: AddCustomLabelsBody, token?: CancelToken) {
+    return api.post<{}, UpdateServiceBody>(`${BASE_URL}/CustomLabels/Add`, body, false, token);
+  },
+  removeCustomLabels(body: RemoveCustomLabelsBody, token?: CancelToken) {
+    return api.post<{}, UpdateServiceBody>(`${BASE_URL}/CustomLabels/Remove`, body, false, token);
+  },
 };
diff --git a/public/app/percona/shared/services/services/Services.types.ts b/public/app/percona/shared/services/services/Services.types.ts
index 70e8f4092e414..4a1ec82a213d9 100644
--- a/public/app/percona/shared/services/services/Services.types.ts
+++ b/public/app/percona/shared/services/services/Services.types.ts
@@ -20,7 +20,7 @@ export interface DbServicePayload {
   service_id: string;
   service_name: string;
   node_id: string;
-  enviroment?: string;
+  environment?: string;
   cluster?: string;
   replication_set?: string;
   custom_labels?: Record<string, string>;
@@ -57,3 +57,21 @@ export interface RemoveServiceBody {
 export interface ListTypesPayload {
   service_types?: ServiceType[];
 }
+
+export interface UpdateServiceBody {
+  service_id: string;
+  environment?: string;
+  cluster?: string;
+  replication_set?: string;
+  external_group?: string;
+}
+
+export interface AddCustomLabelsBody {
+  service_id: string;
+  custom_labels: Record<string, string>;
+}
+
+export interface RemoveCustomLabelsBody {
+  service_id: string;
+  custom_label_keys: string[];
+}

From 220a29c48bef6e7a612ae6e87ca00132556c4cfd Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Mon, 23 Jan 2023 15:58:25 +0100
Subject: [PATCH 07/32] PMM-11148 fix custom labels field

---
 .../AddRemoteInstance/FormParts/Labels/Labels.tsx      |  2 +-
 public/app/percona/edit-instance/EditInstance.tsx      | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.tsx
index 3f500dee9bdc1..c2456752fe5fe 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.tsx
@@ -62,7 +62,7 @@ export const LabelsFormPart: FC<LabelsProps> = ({ showNodeFields = true }) => {
           name="custom_labels"
           label={
             <div>
-              <div>{Messages.form.labels.labels.customLabels}</div>
+              <label htmlFor="input-custom_labels-id">{Messages.form.labels.labels.customLabels}</label>
               <p className={styles.description}>{Messages.form.descriptions.customLabels}</p>
             </div>
           }
diff --git a/public/app/percona/edit-instance/EditInstance.tsx b/public/app/percona/edit-instance/EditInstance.tsx
index 3b0a4826fed9b..ba809dfa2fce6 100644
--- a/public/app/percona/edit-instance/EditInstance.tsx
+++ b/public/app/percona/edit-instance/EditInstance.tsx
@@ -80,7 +80,7 @@ const EditInstancePage: React.FC = () => {
     }
   };
 
-  const handleCancelModal = () => {
+  const handleCloseModal = () => {
     setIsModalOpen(false);
   };
 
@@ -94,7 +94,11 @@ const EditInstancePage: React.FC = () => {
       onSubmit={handleSubmit}
       render={({ handleSubmit, submitting }) => (
         <>
-          <Modal isOpen={isModalOpen} title={Messages.formTitle(service?.service_name || '')}>
+          <Modal
+            isOpen={isModalOpen}
+            title={Messages.formTitle(service?.service_name || '')}
+            onDismiss={handleCloseModal}
+          >
             <p>
               {Messages.modal.description}
               {Messages.modal.details}
@@ -105,7 +109,7 @@ const EditInstancePage: React.FC = () => {
             </p>
             <Modal.ButtonRow>
               <Button onClick={handleSubmit}>{Messages.modal.confirm}</Button>
-              <Button variant="secondary" onClick={handleCancelModal}>
+              <Button variant="secondary" onClick={handleCloseModal}>
                 {Messages.modal.cancel}
               </Button>
             </Modal.ButtonRow>

From f617393688febd12e0c33bf6e7b5f1c43e6173ba Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Mon, 23 Jan 2023 16:17:39 +0100
Subject: [PATCH 08/32] PMM-11148 add success modal

---
 .../AddRemoteInstance/AddRemoteInstance.messages.ts        | 4 ++++
 .../components/AddRemoteInstance/AddRemoteInstance.tsx     | 7 ++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.messages.ts b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.messages.ts
index 6d4c71c125f01..d3f5b1102c6a0 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.messages.ts
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.messages.ts
@@ -33,4 +33,8 @@ export const Messages = {
       addRemoteInstance: 'Add remote instance',
     },
   },
+  success: {
+    title: (service: string) => `Service “${service}” added to your inventory`,
+    description: 'Your MongoDB service instance is now ready to be monitored.',
+  },
 };
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.tsx
index 2443e41cdd5dd..cce99693c7c80 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.tsx
@@ -5,7 +5,9 @@ import { FormApi } from 'final-form';
 import React, { FC, useCallback, useMemo, useState } from 'react';
 import { Form as FormFinal } from 'react-final-form';
 
+import { AppEvents } from '@grafana/data';
 import { useStyles } from '@grafana/ui';
+import appEvents from 'app/core/app_events';
 import { useCancelToken } from 'app/percona/shared/components/hooks/cancelToken.hook';
 import { Databases } from 'app/percona/shared/core';
 import { isApiCancelError } from 'app/percona/shared/helpers/api';
@@ -72,7 +74,10 @@ const AddRemoteInstance: FC<AddRemoteInstanceProps> = ({
         } else {
           await AddRemoteInstanceService.addRemote(type, values, generateToken(remoteToken(type)));
         }
-
+        appEvents.emit(AppEvents.alertSuccess, [
+          Messages.success.title(values.serviceName || values.address || ''),
+          Messages.success.description,
+        ]);
         window.location.href = '/graph/inventory/';
       } catch (e) {
         if (isApiCancelError(e)) {

From 067069f8bcbfa2f6370728677b7a4c8eadeb1485 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Mon, 23 Jan 2023 16:31:00 +0100
Subject: [PATCH 09/32] PMM-11148 fix inventory test

---
 .../app/percona/inventory/Inventory.test.tsx  | 107 ++++++++++--------
 1 file changed, 61 insertions(+), 46 deletions(-)

diff --git a/public/app/percona/inventory/Inventory.test.tsx b/public/app/percona/inventory/Inventory.test.tsx
index f07dc8e2ab5a9..6339422b9d3ed 100644
--- a/public/app/percona/inventory/Inventory.test.tsx
+++ b/public/app/percona/inventory/Inventory.test.tsx
@@ -1,13 +1,18 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Table } from '@percona/platform-core';
 import { render, waitFor } from '@testing-library/react';
-import React from 'react';
+import React, { ReactElement } from 'react';
+import { Provider } from 'react-redux';
+
+import { configureStore } from 'app/store/configureStore';
 
 import { AGENTS_COLUMNS, NODES_COLUMNS, SERVICES_COLUMNS } from './Inventory.constants';
 import { InventoryDataService } from './Inventory.tools';
 
 jest.mock('app/percona/settings/Settings.service');
 
+const wrap = (component: ReactElement) => <Provider store={configureStore()}>{component}</Provider>;
+
 // FIXME: types
 describe('Inventory tables', () => {
   it('Agents table renders correct with right data', () => {
@@ -44,15 +49,17 @@ describe('Inventory tables', () => {
     const data = InventoryDataService.getAgentModel(response as any);
 
     const { container } = render(
-      <Table
-        data={data}
-        totalItems={data.length}
-        rowSelection
-        columns={AGENTS_COLUMNS}
-        pendingRequest={false}
-        showPagination
-        pageSize={25}
-      />
+      wrap(
+        <Table
+          data={data}
+          totalItems={data.length}
+          rowSelection
+          columns={AGENTS_COLUMNS}
+          pendingRequest={false}
+          showPagination
+          pageSize={25}
+        />
+      )
     );
 
     // length is 5 because header is also tr
@@ -117,15 +124,17 @@ describe('Inventory tables', () => {
     };
     const data = InventoryDataService.getServiceModel(response as any);
     const { container } = render(
-      <Table
-        data={data}
-        totalItems={data.length}
-        columns={SERVICES_COLUMNS}
-        pendingRequest={false}
-        rowSelection
-        showPagination
-        pageSize={25}
-      />
+      wrap(
+        <Table
+          data={data}
+          totalItems={data.length}
+          columns={SERVICES_COLUMNS}
+          pendingRequest={false}
+          rowSelection
+          showPagination
+          pageSize={25}
+        />
+      )
     );
 
     // length is 2 because header is also tr
@@ -144,15 +153,17 @@ describe('Inventory tables', () => {
     };
     const data = InventoryDataService.getServiceModel(response as any);
     const { container } = render(
-      <Table
-        data={data}
-        totalItems={data.length}
-        columns={SERVICES_COLUMNS}
-        pendingRequest={false}
-        rowSelection
-        showPagination
-        pageSize={25}
-      />
+      wrap(
+        <Table
+          data={data}
+          totalItems={data.length}
+          columns={SERVICES_COLUMNS}
+          pendingRequest={false}
+          rowSelection
+          showPagination
+          pageSize={25}
+        />
+      )
     );
 
     // default page size is 25
@@ -168,15 +179,17 @@ describe('Inventory tables', () => {
     };
     const data = InventoryDataService.getNodeModel(response as any);
     const { container } = render(
-      <Table
-        data={data}
-        totalItems={data.length}
-        columns={NODES_COLUMNS}
-        pendingRequest={false}
-        rowSelection
-        showPagination
-        pageSize={25}
-      />
+      wrap(
+        <Table
+          data={data}
+          totalItems={data.length}
+          columns={NODES_COLUMNS}
+          pendingRequest={false}
+          rowSelection
+          showPagination
+          pageSize={25}
+        />
+      )
     );
 
     // length is 3 because header is also tr
@@ -189,15 +202,17 @@ describe('Inventory tables', () => {
     };
     const data = InventoryDataService.getNodeModel(response as any);
     const { container } = render(
-      <Table
-        data={data}
-        totalItems={data.length}
-        columns={NODES_COLUMNS}
-        pendingRequest={false}
-        rowSelection
-        showPagination
-        pageSize={25}
-      />
+      wrap(
+        <Table
+          data={data}
+          totalItems={data.length}
+          columns={NODES_COLUMNS}
+          pendingRequest={false}
+          rowSelection
+          showPagination
+          pageSize={25}
+        />
+      )
     );
 
     // default page size is 25

From 807e0ee8a9989ea05c5136c7d906644b587a0634 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Tue, 24 Jan 2023 09:33:35 +0100
Subject: [PATCH 10/32] PMM-11148 add labels tooltip & fix description

---
 .../AddRemoteInstance/AddRemoteInstance.messages.ts    |  2 +-
 .../components/AddRemoteInstance/AddRemoteInstance.tsx |  2 +-
 .../inventory/ColumnRenderers/ColumnRenderers.tsx      | 10 ++++++++++
 public/app/percona/inventory/Inventory.constants.ts    | 10 +++++++---
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.messages.ts b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.messages.ts
index d3f5b1102c6a0..c6778edbfdb88 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.messages.ts
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.messages.ts
@@ -35,6 +35,6 @@ export const Messages = {
   },
   success: {
     title: (service: string) => `Service “${service}” added to your inventory`,
-    description: 'Your MongoDB service instance is now ready to be monitored.',
+    description: (serviceType: string) => `Your ${serviceType} service instance is now ready to be monitored.`,
   },
 };
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.tsx
index cce99693c7c80..6e0dba80cc8b5 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.tsx
@@ -76,7 +76,7 @@ const AddRemoteInstance: FC<AddRemoteInstanceProps> = ({
         }
         appEvents.emit(AppEvents.alertSuccess, [
           Messages.success.title(values.serviceName || values.address || ''),
-          Messages.success.description,
+          Messages.success.description(INSTANCE_TYPES_LABELS[type as Databases]),
         ]);
         window.location.href = '/graph/inventory/';
       } catch (e) {
diff --git a/public/app/percona/inventory/ColumnRenderers/ColumnRenderers.tsx b/public/app/percona/inventory/ColumnRenderers/ColumnRenderers.tsx
index 91b63064c2b50..fe616d97522b8 100644
--- a/public/app/percona/inventory/ColumnRenderers/ColumnRenderers.tsx
+++ b/public/app/percona/inventory/ColumnRenderers/ColumnRenderers.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 
+import { HorizontalGroup, Icon, Tooltip } from '@grafana/ui';
 import { MAIN_COLUMN } from 'app/percona/inventory/Inventory.constants';
 import { CustomLabel } from 'app/percona/inventory/Inventory.types';
 
@@ -21,6 +22,15 @@ export const servicesDetailsRender = (element: any) => {
   );
 };
 
+export const servicesLabelsHeaderRender = (): React.ReactElement => (
+  <HorizontalGroup>
+    <span>Labels</span>
+    <Tooltip content=" Useful to define groupings and segment access to build custom user roles.">
+      <Icon name="info-circle" />
+    </Tooltip>
+  </HorizontalGroup>
+);
+
 export const servicesOptionsRender = (element: any) => <ServicesOptions service={element} />;
 
 export const agentsDetailsRender = (element: any) => {
diff --git a/public/app/percona/inventory/Inventory.constants.ts b/public/app/percona/inventory/Inventory.constants.ts
index 2aa63a4b51185..b77e5d0dc392b 100644
--- a/public/app/percona/inventory/Inventory.constants.ts
+++ b/public/app/percona/inventory/Inventory.constants.ts
@@ -1,8 +1,11 @@
+import { Column } from 'react-table';
+
 import {
   servicesDetailsRender,
   agentsDetailsRender,
   nodesDetailsRender,
   servicesOptionsRender,
+  servicesLabelsHeaderRender,
 } from './ColumnRenderers';
 
 export const MAIN_COLUMN = ['service_id', 'type', 'service_name', 'custom_labels', 'node_id', 'address', 'port'];
@@ -33,7 +36,7 @@ export const getServicesColumns = () => [
     accessor: 'port',
   },
   {
-    Header: 'Labels',
+    Header: servicesLabelsHeaderRender(),
     accessor: servicesDetailsRender,
   },
   {
@@ -42,7 +45,7 @@ export const getServicesColumns = () => [
   },
 ];
 
-export const SERVICES_COLUMNS = [
+export const SERVICES_COLUMNS: Column[] = [
   {
     Header: 'Name',
     accessor: 'service_name',
@@ -68,7 +71,8 @@ export const SERVICES_COLUMNS = [
     accessor: 'port',
   },
   {
-    Header: 'Labels',
+    id: 'labels',
+    Header: servicesLabelsHeaderRender(),
     accessor: servicesDetailsRender,
   },
   {

From 9c89f749e2e06ffd9d50ea7314730aaf0bf80439 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Tue, 24 Jan 2023 14:20:59 +0100
Subject: [PATCH 11/32] PMM-11148 refactor

---
 .../percona/inventory/Inventory.constants.ts  | 35 -------------------
 .../ServicesOptions/ServicesOptions.types.ts  |  6 ++--
 2 files changed, 3 insertions(+), 38 deletions(-)

diff --git a/public/app/percona/inventory/Inventory.constants.ts b/public/app/percona/inventory/Inventory.constants.ts
index b77e5d0dc392b..13b833f319ef7 100644
--- a/public/app/percona/inventory/Inventory.constants.ts
+++ b/public/app/percona/inventory/Inventory.constants.ts
@@ -10,41 +10,6 @@ import {
 
 export const MAIN_COLUMN = ['service_id', 'type', 'service_name', 'custom_labels', 'node_id', 'address', 'port'];
 
-export const getServicesColumns = () => [
-  {
-    Header: 'Name',
-    accessor: 'service_name',
-  },
-  {
-    Header: 'Type',
-    accessor: 'type',
-  },
-  {
-    Header: 'ID',
-    accessor: 'service_id',
-  },
-  {
-    Header: 'Node ID',
-    accessor: 'node_id',
-  },
-  {
-    Header: 'Address',
-    accessor: 'address',
-  },
-  {
-    Header: 'Port',
-    accessor: 'port',
-  },
-  {
-    Header: servicesLabelsHeaderRender(),
-    accessor: servicesDetailsRender,
-  },
-  {
-    Header: 'Options',
-    accessor: servicesOptionsRender,
-  },
-];
-
 export const SERVICES_COLUMNS: Column[] = [
   {
     Header: 'Name',
diff --git a/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.types.ts b/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.types.ts
index f9f9bf37c7541..33a3d48a94f98 100644
--- a/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.types.ts
+++ b/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.types.ts
@@ -1,5 +1,5 @@
+import { DbServicePayload } from 'app/percona/shared/services/services/Services.types';
+
 export interface ServicesOptionsProps {
-  // todo: add type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  service: any;
+  service: DbServicePayload;
 }

From 4427d62c335fd5ab5e63227cd357590f9a8c3027 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Tue, 24 Jan 2023 14:58:49 +0100
Subject: [PATCH 12/32] PMM-11148 add required property

---
 .../components/ServicesOptions/ServicesOptions.test.tsx          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.test.tsx b/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.test.tsx
index 942631aa17403..187de6fe40f0e 100644
--- a/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.test.tsx
+++ b/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.test.tsx
@@ -10,6 +10,7 @@ import { Messages } from './ServicesOptions.messages';
 
 const serviceStub = {
   service_id: 'service_id',
+  node_id: 'node_id',
   service_name: 'service_name',
 };
 

From 51e6ab2c57a2e6e3da909f9e441c076facb8a7d1 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Wed, 25 Jan 2023 13:31:57 +0100
Subject: [PATCH 13/32] PMM-11148 add feature check

---
 public/app/percona/add-instance/panel.tsx | 29 ++++++++++++++---------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/public/app/percona/add-instance/panel.tsx b/public/app/percona/add-instance/panel.tsx
index b0c5254d975f5..56914908f7650 100644
--- a/public/app/percona/add-instance/panel.tsx
+++ b/public/app/percona/add-instance/panel.tsx
@@ -8,6 +8,7 @@ import { getPerconaSettings } from 'app/percona/shared/core/selectors';
 import { useSelector } from 'app/types';
 
 import { Databases } from '../../percona/shared/core';
+import { FeatureLoader } from '../shared/components/Elements/FeatureLoader';
 
 import { AddInstance } from './components/AddInstance/AddInstance';
 import AddRemoteInstance from './components/AddRemoteInstance/AddRemoteInstance';
@@ -76,8 +77,12 @@ const AddInstancePanel = () => {
     [showSelection, selectedInstance]
   );
 
-  const handleCancel: MouseEventHandler = (e) => {
-    history.push('/add-instance');
+  const handleCancel: MouseEventHandler = () => {
+    if (showSelection) {
+      history.push('/inventory/services');
+    } else {
+      history.push('/add-instance');
+    }
     selectInstance({ type: '' });
     setShowSelection(true);
     setFormName('');
@@ -112,15 +117,17 @@ const AddInstancePanel = () => {
         </ToolbarButton>
       </PageToolbar>
       <Page.Contents className={styles.page}>
-        {showSelection ? (
-          <AddInstance
-            showAzure={!!azureDiscoverEnabled}
-            selectedInstanceType={selectedInstance}
-            onSelectInstanceType={selectInstance}
-          />
-        ) : (
-          <InstanceForm />
-        )}
+        <FeatureLoader>
+          {showSelection ? (
+            <AddInstance
+              showAzure={!!azureDiscoverEnabled}
+              selectedInstanceType={selectedInstance}
+              onSelectInstanceType={selectInstance}
+            />
+          ) : (
+            <InstanceForm />
+          )}
+        </FeatureLoader>
       </Page.Contents>
     </Page>
   );

From 7dba3637a273790e6cbde361afc9d95f97768e59 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Wed, 25 Jan 2023 16:42:54 +0100
Subject: [PATCH 14/32] PMM-11148 adjust services delete

---
 public/app/percona/inventory/Tabs/Agents.tsx  |  5 ++-
 public/app/percona/inventory/Tabs/Nodes.tsx   |  5 ++-
 .../app/percona/inventory/Tabs/Services.tsx   | 41 +++++++++++--------
 .../app/percona/inventory/Tabs/Tabs.styles.ts |  9 +++-
 4 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/public/app/percona/inventory/Tabs/Agents.tsx b/public/app/percona/inventory/Tabs/Agents.tsx
index a519e0e65e050..39ff95577d3a2 100644
--- a/public/app/percona/inventory/Tabs/Agents.tsx
+++ b/public/app/percona/inventory/Tabs/Agents.tsx
@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Form } from 'react-final-form';
 
 import { AppEvents } from '@grafana/data';
-import { Button, HorizontalGroup, Modal } from '@grafana/ui';
+import { Button, HorizontalGroup, Modal, useStyles2 } from '@grafana/ui';
 import { OldPage } from 'app/core/components/Page/Page';
 import { InventoryDataService, Model } from 'app/percona/inventory/Inventory.tools';
 import { AgentsList } from 'app/percona/inventory/Inventory.types';
@@ -20,7 +20,7 @@ import { appEvents } from '../../../core/app_events';
 import { AGENTS_COLUMNS, GET_AGENTS_CANCEL_TOKEN } from '../Inventory.constants';
 import { InventoryService } from '../Inventory.service';
 
-import { styles } from './Tabs.styles';
+import { getStyles } from './Tabs.styles';
 
 interface Agent {
   agent_id: string;
@@ -34,6 +34,7 @@ export const Agents = () => {
   const [selected, setSelectedRows] = useState<any[]>([]);
   const navModel = usePerconaNavModel('inventory-agents');
   const [generateToken] = useCancelToken();
+  const styles = useStyles2(getStyles);
 
   const loadData = useCallback(async () => {
     setLoading(true);
diff --git a/public/app/percona/inventory/Tabs/Nodes.tsx b/public/app/percona/inventory/Tabs/Nodes.tsx
index 8450739d01dcf..06590afd6044c 100644
--- a/public/app/percona/inventory/Tabs/Nodes.tsx
+++ b/public/app/percona/inventory/Tabs/Nodes.tsx
@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Form } from 'react-final-form';
 
 import { AppEvents } from '@grafana/data';
-import { Button, HorizontalGroup, Modal } from '@grafana/ui';
+import { Button, HorizontalGroup, Modal, useStyles2 } from '@grafana/ui';
 import { OldPage } from 'app/core/components/Page/Page';
 import { InventoryDataService, Model } from 'app/percona/inventory/Inventory.tools';
 import { FeatureLoader } from 'app/percona/shared/components/Elements/FeatureLoader';
@@ -20,7 +20,7 @@ import { GET_NODES_CANCEL_TOKEN, NODES_COLUMNS } from '../Inventory.constants';
 import { InventoryService } from '../Inventory.service';
 import { NodesList } from '../Inventory.types';
 
-import { styles } from './Tabs.styles';
+import { getStyles } from './Tabs.styles';
 
 interface Node {
   node_id: string;
@@ -36,6 +36,7 @@ export const NodesTab = () => {
   const [selected, setSelectedRows] = useState<any[]>([]);
   const navModel = usePerconaNavModel('inventory-nodes');
   const [generateToken] = useCancelToken();
+  const styles = useStyles2(getStyles);
 
   const loadData = useCallback(async () => {
     setLoading(true);
diff --git a/public/app/percona/inventory/Tabs/Services.tsx b/public/app/percona/inventory/Tabs/Services.tsx
index 6e6a500b080cd..02daa8b5a3412 100644
--- a/public/app/percona/inventory/Tabs/Services.tsx
+++ b/public/app/percona/inventory/Tabs/Services.tsx
@@ -6,7 +6,7 @@ import { Row } from 'react-table';
 
 import { AppEvents } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
-import { Button, HorizontalGroup, Modal } from '@grafana/ui';
+import { Button, HorizontalGroup, Modal, useStyles2 } from '@grafana/ui';
 import { OldPage } from 'app/core/components/Page/Page';
 import { FeatureLoader } from 'app/percona/shared/components/Elements/FeatureLoader';
 import { SelectedTableRows } from 'app/percona/shared/components/Elements/Table/Table.types';
@@ -28,7 +28,7 @@ import { appEvents } from '../../../core/app_events';
 import { GET_SERVICES_CANCEL_TOKEN, SERVICES_COLUMNS } from '../Inventory.constants';
 import { InventoryDataService } from '../Inventory.tools';
 
-import { styles } from './Tabs.styles';
+import { getStyles } from './Tabs.styles';
 
 interface Service {
   service_id: string;
@@ -47,6 +47,7 @@ export const Services = () => {
   const dispatch = useAppDispatch();
   const { isLoading, services } = useSelector(getServices);
   const data = useMemo(() => InventoryDataService.getServiceModel(services), [services]);
+  const styles = useStyles2(getStyles);
 
   const loadData = useCallback(async () => {
     try {
@@ -105,22 +106,26 @@ export const Services = () => {
           <div className={styles.tableWrapper}>
             <div className={styles.servicesActionPanel}>
               <HorizontalGroup justify="space-between">
-                <Button
-                  size="md"
-                  disabled={selected.length === 0}
-                  onClick={() => {
-                    setModalVisible(!modalVisible);
-                  }}
-                  icon="trash-alt"
-                  variant="destructive"
-                  className={styles.destructiveButton}
-                >
-                  {selected.length === 1
-                    ? `Delete ${selected.length} service`
-                    : selected.length > 1
-                    ? `Delete ${selected.length} services`
-                    : 'Delete'}
-                </Button>
+                {selected.length === 0 ? (
+                  <div className={styles.description}>Select services to bulk edit them</div>
+                ) : (
+                  <Button
+                    size="md"
+                    disabled={selected.length === 0}
+                    onClick={() => {
+                      setModalVisible(!modalVisible);
+                    }}
+                    icon="trash-alt"
+                    variant="destructive"
+                    className={styles.destructiveButton}
+                  >
+                    {selected.length === 1
+                      ? `Delete ${selected.length} service`
+                      : selected.length > 1
+                      ? `Delete ${selected.length} services`
+                      : 'Delete'}
+                  </Button>
+                )}
                 <Button size="md" onClick={handleAddService} icon="plus" variant="primary">
                   Add service
                 </Button>
diff --git a/public/app/percona/inventory/Tabs/Tabs.styles.ts b/public/app/percona/inventory/Tabs/Tabs.styles.ts
index d39c85c28a387..d4e51398665aa 100644
--- a/public/app/percona/inventory/Tabs/Tabs.styles.ts
+++ b/public/app/percona/inventory/Tabs/Tabs.styles.ts
@@ -1,6 +1,8 @@
 import { css } from '@emotion/css';
 
-export const styles = {
+import { GrafanaTheme2 } from '@grafana/data';
+
+export const getStyles = (theme: GrafanaTheme2) => ({
   actionPanel: css`
     display: flex;
     justify-content: flex-end;
@@ -53,4 +55,7 @@ export const styles = {
     align-items: center;
     background-color: transparent;
   `,
-};
+  description: css`
+    color: ${theme.colors.text.secondary};
+  `,
+});

From d8d2ca48523a636723b4696cae4ffba89345daa9 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Wed, 25 Jan 2023 17:00:53 +0100
Subject: [PATCH 15/32] PMM-11148 remove documentation links

---
 .../AddRemoteInstance/FormParts/FormParts.messages.ts |  6 +++++-
 .../AddRemoteInstance/FormParts/FormParts.styles.tsx  |  3 +++
 .../AddRemoteInstance/FormParts/Labels/Labels.tsx     |  9 ++++++++-
 public/app/percona/edit-instance/EditInstance.tsx     | 11 +++++------
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.messages.ts b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.messages.ts
index 03502340fd0c7..7cb40662a6291 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.messages.ts
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.messages.ts
@@ -150,8 +150,12 @@ export const Messages = {
       connectionDetails: 'External service connection details',
     },
     descriptions: {
+      dot: '. ',
       labels:
-        'Please choose some labels for help identify your services. Labels can be useful, for example, to help define groupings and segment access to build custom user roles. Editing existing labels may affect your inventory and its data.',
+        'Please choose some labels for help identify your services. Labels can be useful, for example, to help define groupings',
+      labelsRoles: ' and segment access to build custom user roles ',
+      labelsRolesLink: 'custom user roles',
+      labelsExisting: 'Editing existing labels may affect your inventory and its data.',
       customLabels: 'Follow the format as exemplified below, one label per line.',
     },
   },
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.styles.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.styles.tsx
index c14adf02fbeaa..d62ed18323f3e 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.styles.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.styles.tsx
@@ -69,4 +69,7 @@ export const getStyles = ({ breakpoints, spacing, colors }: GrafanaTheme2) => ({
       margin: ${spacing(2)} 0;
     }
   `,
+  link: css`
+    color: ${colors.text.link};
+  `,
 });
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.tsx
index c2456752fe5fe..4b3f4e141f8d4 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.tsx
@@ -16,7 +16,14 @@ export const LabelsFormPart: FC<LabelsProps> = ({ showNodeFields = true }) => {
   return (
     <div className={styles.groupWrapper}>
       <h4 className={styles.sectionHeader}>{Messages.form.titles.labels}</h4>
-      <p>{Messages.form.descriptions.labels}</p>
+      <p>
+        {Messages.form.descriptions.labels}
+        {/* todo: add back in when documentation is available  */}
+        {/* {Messages.form.descriptions.labelsRoles}
+        <a className={styles.link}>{Messages.form.descriptions.labelsRolesLink}</a> */}
+        {Messages.form.descriptions.dot}
+        {Messages.form.descriptions.labelsExisting}
+      </p>
       <div className={styles.group}>
         <TextInputField
           name="environment"
diff --git a/public/app/percona/edit-instance/EditInstance.tsx b/public/app/percona/edit-instance/EditInstance.tsx
index ba809dfa2fce6..97766103e9898 100644
--- a/public/app/percona/edit-instance/EditInstance.tsx
+++ b/public/app/percona/edit-instance/EditInstance.tsx
@@ -4,7 +4,7 @@ import { Form } from 'react-final-form';
 import { useHistory, useParams } from 'react-router-dom';
 
 import { AppEvents } from '@grafana/data';
-import { Button, Modal, PageToolbar, ToolbarButton, ToolbarButtonRow, useStyles2 } from '@grafana/ui';
+import { Button, Modal, PageToolbar, ToolbarButton, ToolbarButtonRow } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
 import { Page } from 'app/core/components/Page/Page';
 import { InventoryService } from 'app/percona/inventory/Inventory.service';
@@ -17,14 +17,12 @@ import { DbServicePayload } from '../shared/services/services/Services.types';
 
 import { FETCH_SERVICE_CANCEL_TOKEN } from './EditInstance.constants';
 import { Messages } from './EditInstance.messages';
-import { getStyles } from './EditInstance.styles';
 import { EditInstanceFormValues, EditInstanceRouteParams } from './EditInstance.types';
 import { getInitialValues, getService, toPayload } from './EditInstance.utils';
 
 const EditInstancePage: React.FC = () => {
   const history = useHistory();
   const dispatch = useAppDispatch();
-  const styles = useStyles2(getStyles);
   const { serviceId } = useParams<EditInstanceRouteParams>();
   const [isLoading, setIsLoading] = useState(true);
   const [service, setService] = useState<DbServicePayload>();
@@ -101,11 +99,12 @@ const EditInstancePage: React.FC = () => {
           >
             <p>
               {Messages.modal.description}
-              {Messages.modal.details}
-              <a className={styles.link} href="">
+              {/* todo: add back in when docs are available */}
+              {/* {Messages.modal.details}
+              <a className={styles.link}>
                 {Messages.modal.detailsLink}
               </a>
-              {Messages.modal.dot}
+              {Messages.modal.dot} */}
             </p>
             <Modal.ButtonRow>
               <Button onClick={handleSubmit}>{Messages.modal.confirm}</Button>

From 32aec8a0a5cf98186b31acec4489b6a10d835202 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Fri, 27 Jan 2023 11:27:15 +0100
Subject: [PATCH 16/32] PMM-11148 Wording, boolean state, etc.

---
 .../components/AddInstance/AddInstance.messages.ts       | 2 +-
 .../AddRemoteInstance/FormParts/FormParts.messages.ts    | 2 +-
 public/app/percona/edit-instance/EditInstance.tsx        | 2 +-
 .../inventory/ColumnRenderers/ColumnRenderers.tsx        | 2 +-
 public/app/percona/inventory/Tabs/Services.tsx           | 9 ++-------
 .../components/DeleteServiceModal/DeleteServiceModal.tsx | 2 +-
 6 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/public/app/percona/add-instance/components/AddInstance/AddInstance.messages.ts b/public/app/percona/add-instance/components/AddInstance/AddInstance.messages.ts
index 10c8645b2f1cc..6ce0866fce218 100644
--- a/public/app/percona/add-instance/components/AddInstance/AddInstance.messages.ts
+++ b/public/app/percona/add-instance/components/AddInstance/AddInstance.messages.ts
@@ -1,6 +1,6 @@
 export const Messages = {
   sectionTitle: 'Select service type',
-  description: 'Select the service type you want to configure and then add to your inventory.',
+  description: 'Select the service type you want to configure and then add it to your inventory.',
   titles: {
     rds: 'Amazon RDS',
     azure: 'Microsoft Azure MySQL or PostgreSQL',
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.messages.ts b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.messages.ts
index 7cb40662a6291..3b36a55270e29 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.messages.ts
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/FormParts.messages.ts
@@ -152,7 +152,7 @@ export const Messages = {
     descriptions: {
       dot: '. ',
       labels:
-        'Please choose some labels for help identify your services. Labels can be useful, for example, to help define groupings',
+        'Please choose some labels to help identify your services. Labels can be useful, for example, to help define groupings',
       labelsRoles: ' and segment access to build custom user roles ',
       labelsRolesLink: 'custom user roles',
       labelsExisting: 'Editing existing labels may affect your inventory and its data.',
diff --git a/public/app/percona/edit-instance/EditInstance.tsx b/public/app/percona/edit-instance/EditInstance.tsx
index 97766103e9898..f38124dbbf35b 100644
--- a/public/app/percona/edit-instance/EditInstance.tsx
+++ b/public/app/percona/edit-instance/EditInstance.tsx
@@ -74,7 +74,7 @@ const EditInstancePage: React.FC = () => {
       ]);
       history.push('/inventory/services');
     } catch (error) {
-      logger.log(error);
+      logger.error(error);
     }
   };
 
diff --git a/public/app/percona/inventory/ColumnRenderers/ColumnRenderers.tsx b/public/app/percona/inventory/ColumnRenderers/ColumnRenderers.tsx
index fe616d97522b8..81f0d0270e593 100644
--- a/public/app/percona/inventory/ColumnRenderers/ColumnRenderers.tsx
+++ b/public/app/percona/inventory/ColumnRenderers/ColumnRenderers.tsx
@@ -25,7 +25,7 @@ export const servicesDetailsRender = (element: any) => {
 export const servicesLabelsHeaderRender = (): React.ReactElement => (
   <HorizontalGroup>
     <span>Labels</span>
-    <Tooltip content=" Useful to define groupings and segment access to build custom user roles.">
+    <Tooltip content="Useful to define groupings and segment access to build custom user roles.">
       <Icon name="info-circle" />
     </Tooltip>
   </HorizontalGroup>
diff --git a/public/app/percona/inventory/Tabs/Services.tsx b/public/app/percona/inventory/Tabs/Services.tsx
index 02daa8b5a3412..36c6a0bccebb2 100644
--- a/public/app/percona/inventory/Tabs/Services.tsx
+++ b/public/app/percona/inventory/Tabs/Services.tsx
@@ -111,19 +111,14 @@ export const Services = () => {
                 ) : (
                   <Button
                     size="md"
-                    disabled={selected.length === 0}
                     onClick={() => {
-                      setModalVisible(!modalVisible);
+                      setModalVisible((visible) => !visible);
                     }}
                     icon="trash-alt"
                     variant="destructive"
                     className={styles.destructiveButton}
                   >
-                    {selected.length === 1
-                      ? `Delete ${selected.length} service`
-                      : selected.length > 1
-                      ? `Delete ${selected.length} services`
-                      : 'Delete'}
+                    {selected.length === 1 ? `Delete ${selected.length} service` : `Delete ${selected.length} services`}
                   </Button>
                 )}
                 <Button size="md" onClick={handleAddService} icon="plus" variant="primary">
diff --git a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx
index df70b680f96e1..6c58678a11b8d 100644
--- a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx
+++ b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx
@@ -51,7 +51,7 @@ const DeleteServiceModal: React.FC<DeleteServiceModalProps> = ({ serviceId, serv
           label={Messages.forceMode.label}
           description={Messages.forceMode.description}
           value={forceModeActive}
-          onChange={() => setForceActive(!forceModeActive)}
+          onChange={() => setForceActive((active) => !active)}
         />
       </div>
       <Modal.ButtonRow>

From f62ac96c6da2918dd7a3d5ede2e68b527d9dd274 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Fri, 27 Jan 2023 11:35:17 +0100
Subject: [PATCH 17/32] PMM-11148 update tablestat options name

---
 .../FormParts/AdditionalOptions/AdditionalOptions.tsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/AdditionalOptions/AdditionalOptions.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/AdditionalOptions/AdditionalOptions.tsx
index 233f530a4d44c..21ab99b42143b 100644
--- a/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/AdditionalOptions/AdditionalOptions.tsx
+++ b/public/app/percona/add-instance/components/AddRemoteInstance/FormParts/AdditionalOptions/AdditionalOptions.tsx
@@ -64,7 +64,7 @@ const getTablestatValues = (type: TablestatOptionsInterface) => {
 };
 
 const MySQLOptions = ({ form }: { form: FormApi }) => {
-  const selectedOption = form.getState().values && form.getState().values['tablestat-options'];
+  const selectedOption = form.getState().values && form.getState().values.tablestatOptions;
   const [selectedValue, setSelectedValue] = useState<string>(selectedOption || TablestatOptionsInterface.disabled);
   const styles = useStyles2(getStyles);
 
@@ -78,7 +78,7 @@ const MySQLOptions = ({ form }: { form: FormApi }) => {
       <h4>{Messages.form.labels.additionalOptions.tablestatOptions}</h4>
       <div className={styles.group}>
         <RadioButtonGroupField
-          name="tablestat-options"
+          name="tablestatOptions"
           data-testid="tablestat-options-radio-button-group"
           defaultValue={selectedValue}
           options={tablestatOptions}

From 357f8e28abe93f5831974e28604e271fa1136266 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Mon, 6 Feb 2023 14:46:33 +0100
Subject: [PATCH 18/32] PMM-11148 Extract messages for service tab

---
 .../ColumnRenderers/ColumnRenderers.tsx       |  5 +--
 .../percona/inventory/Inventory.constants.ts  | 15 +++++----
 .../percona/inventory/Inventory.messages.ts   | 33 +++++++++++++++++++
 .../app/percona/inventory/Tabs/Services.tsx   | 24 +++++++-------
 4 files changed, 56 insertions(+), 21 deletions(-)
 create mode 100644 public/app/percona/inventory/Inventory.messages.ts

diff --git a/public/app/percona/inventory/ColumnRenderers/ColumnRenderers.tsx b/public/app/percona/inventory/ColumnRenderers/ColumnRenderers.tsx
index 81f0d0270e593..f565f7849cdcf 100644
--- a/public/app/percona/inventory/ColumnRenderers/ColumnRenderers.tsx
+++ b/public/app/percona/inventory/ColumnRenderers/ColumnRenderers.tsx
@@ -5,6 +5,7 @@ import { HorizontalGroup, Icon, Tooltip } from '@grafana/ui';
 import { MAIN_COLUMN } from 'app/percona/inventory/Inventory.constants';
 import { CustomLabel } from 'app/percona/inventory/Inventory.types';
 
+import { Messages } from '../Inventory.messages';
 import ServicesOptions from '../components/ServicesOptions/ServicesOptions';
 
 import * as styles from './ColumnRenderers.styles';
@@ -24,8 +25,8 @@ export const servicesDetailsRender = (element: any) => {
 
 export const servicesLabelsHeaderRender = (): React.ReactElement => (
   <HorizontalGroup>
-    <span>Labels</span>
-    <Tooltip content="Useful to define groupings and segment access to build custom user roles.">
+    <span>{Messages.services.table.labels}</span>
+    <Tooltip content={Messages.services.table.labelsTooltip}>
       <Icon name="info-circle" />
     </Tooltip>
   </HorizontalGroup>
diff --git a/public/app/percona/inventory/Inventory.constants.ts b/public/app/percona/inventory/Inventory.constants.ts
index 13b833f319ef7..2de2a0c27db59 100644
--- a/public/app/percona/inventory/Inventory.constants.ts
+++ b/public/app/percona/inventory/Inventory.constants.ts
@@ -7,32 +7,33 @@ import {
   servicesOptionsRender,
   servicesLabelsHeaderRender,
 } from './ColumnRenderers';
+import { Messages } from './Inventory.messages';
 
 export const MAIN_COLUMN = ['service_id', 'type', 'service_name', 'custom_labels', 'node_id', 'address', 'port'];
 
 export const SERVICES_COLUMNS: Column[] = [
   {
-    Header: 'Name',
+    Header: Messages.services.table.name,
     accessor: 'service_name',
   },
   {
-    Header: 'Type',
+    Header: Messages.services.table.type,
     accessor: 'type',
   },
   {
-    Header: 'ID',
+    Header: Messages.services.table.id,
     accessor: 'service_id',
   },
   {
-    Header: 'Node ID',
+    Header: Messages.services.table.nodeId,
     accessor: 'node_id',
   },
   {
-    Header: 'Address',
+    Header: Messages.services.table.address,
     accessor: 'address',
   },
   {
-    Header: 'Port',
+    Header: Messages.services.table.port,
     accessor: 'port',
   },
   {
@@ -41,7 +42,7 @@ export const SERVICES_COLUMNS: Column[] = [
     accessor: servicesDetailsRender,
   },
   {
-    Header: 'Options',
+    Header: Messages.services.table.options,
     accessor: servicesOptionsRender,
   },
 ];
diff --git a/public/app/percona/inventory/Inventory.messages.ts b/public/app/percona/inventory/Inventory.messages.ts
new file mode 100644
index 0000000000000..11c2bed91e210
--- /dev/null
+++ b/public/app/percona/inventory/Inventory.messages.ts
@@ -0,0 +1,33 @@
+export const Messages = {
+  services: {
+    tab: {
+      add: 'Add service',
+      selectBulk: 'Select services to bulk edit them',
+      delete: (count: number) => `Delete ${count} ${count === 1 ? 'service' : 'services'}`,
+      deleteSuccess: (success: number, count: number) => `${success} of ${count} services successfully deleted`,
+    },
+    table: {
+      name: 'Name',
+      type: 'Type',
+      id: 'ID',
+      nodeId: 'Node ID',
+      address: 'Address',
+      port: 'Port',
+      options: 'Options',
+      labels: 'Labels',
+      labelsTooltip: 'Useful to define groupings and segment access to build custom user roles.',
+      empty: 'No services available',
+    },
+    multiDelete: {
+      title: 'Confirm action',
+      description: (count: number) =>
+        `Are you sure that you want to permanently delete ${count} ${count === 1 ? 'service' : 'services'}?`,
+      forceMode: {
+        label: 'Force mode',
+        description: 'Force mode is going to delete all associated agents',
+      },
+      cancel: 'Cancel',
+      confirm: 'Proceed',
+    },
+  },
+};
diff --git a/public/app/percona/inventory/Tabs/Services.tsx b/public/app/percona/inventory/Tabs/Services.tsx
index 36c6a0bccebb2..18eff71e88dfb 100644
--- a/public/app/percona/inventory/Tabs/Services.tsx
+++ b/public/app/percona/inventory/Tabs/Services.tsx
@@ -26,6 +26,7 @@ import { useSelector } from 'app/types';
 
 import { appEvents } from '../../../core/app_events';
 import { GET_SERVICES_CANCEL_TOKEN, SERVICES_COLUMNS } from '../Inventory.constants';
+import { Messages } from '../Inventory.messages';
 import { InventoryDataService } from '../Inventory.tools';
 
 import { getStyles } from './Tabs.styles';
@@ -77,7 +78,7 @@ export const Services = () => {
         const successfullyDeleted = await dispatch(removeServicesAction({ services: params })).unwrap();
 
         appEvents.emit(AppEvents.alertSuccess, [
-          `${successfullyDeleted} of ${services.length} services successfully deleted`,
+          Messages.services.tab.deleteSuccess(successfullyDeleted, services.length),
         ]);
       } catch (e) {
         if (isApiCancelError(e)) {
@@ -107,7 +108,7 @@ export const Services = () => {
             <div className={styles.servicesActionPanel}>
               <HorizontalGroup justify="space-between">
                 {selected.length === 0 ? (
-                  <div className={styles.description}>Select services to bulk edit them</div>
+                  <div className={styles.description}>{Messages.services.tab.selectBulk}</div>
                 ) : (
                   <Button
                     size="md"
@@ -118,18 +119,18 @@ export const Services = () => {
                     variant="destructive"
                     className={styles.destructiveButton}
                   >
-                    {selected.length === 1 ? `Delete ${selected.length} service` : `Delete ${selected.length} services`}
+                    {Messages.services.tab.delete(selected.length)}
                   </Button>
                 )}
                 <Button size="md" onClick={handleAddService} icon="plus" variant="primary">
-                  Add service
+                  {Messages.services.tab.add}
                 </Button>
               </HorizontalGroup>
             </div>
             <Modal
               title={
                 <div className="modal-header-title">
-                  <span className="p-l-1">Confirm action</span>
+                  <span className="p-l-1">{Messages.services.multiDelete.title}</span>
                 </div>
               }
               isOpen={modalVisible}
@@ -141,19 +142,18 @@ export const Services = () => {
                   <form onSubmit={handleSubmit}>
                     <>
                       <h4 className={styles.confirmationText}>
-                        Are you sure that you want to permanently delete {selected.length}{' '}
-                        {selected.length === 1 ? 'service' : 'services'}?
+                        {Messages.services.multiDelete.description(selected.length)}
                       </h4>
                       <FormElement
                         dataTestId="form-field-force"
-                        label="Force mode"
+                        label={Messages.services.multiDelete.forceMode.label}
                         element={
-                          <CheckboxField label="Force mode is going to delete all associated agents" name="force" />
+                          <CheckboxField label={Messages.services.multiDelete.forceMode.description} name="force" />
                         }
                       />
                       <HorizontalGroup justify="space-between" spacing="md">
                         <Button variant="secondary" size="md" onClick={() => setModalVisible(false)}>
-                          Cancel
+                          {Messages.services.multiDelete.cancel}
                         </Button>
                         <Button
                           variant="destructive"
@@ -164,7 +164,7 @@ export const Services = () => {
                           }}
                           className={styles.destructiveButton}
                         >
-                          Proceed
+                          {Messages.services.multiDelete.confirm}
                         </Button>
                       </HorizontalGroup>
                     </>
@@ -182,7 +182,7 @@ export const Services = () => {
                 showPagination
                 pageSize={25}
                 allRowsSelectionMode="page"
-                emptyMessage="No services Available"
+                emptyMessage={Messages.services.table.empty}
                 emptyMessageClassName={styles.emptyMessage}
                 pendingRequest={isLoading}
                 overlayClassName={styles.overlay}

From 870955190f0a573de944d119f4700b04d9bd95d8 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Fri, 10 Feb 2023 13:07:35 +0100
Subject: [PATCH 19/32] PMM-11148 Add warning when changing cluster label

---
 .../edit-instance/EditInstance.messages.ts    |  7 ++++++
 .../edit-instance/EditInstance.styles.ts      |  3 +++
 .../percona/edit-instance/EditInstance.tsx    | 24 +++++++++++++++----
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/public/app/percona/edit-instance/EditInstance.messages.ts b/public/app/percona/edit-instance/EditInstance.messages.ts
index 968b3f04805b2..0ebc8e9b560fd 100644
--- a/public/app/percona/edit-instance/EditInstance.messages.ts
+++ b/public/app/percona/edit-instance/EditInstance.messages.ts
@@ -15,5 +15,12 @@ export const Messages = {
     dot: '.',
     confirm: 'Confirm and save changes',
     cancel: 'Cancel',
+    cluster: {
+      title: 'Cluster label changed',
+      description:
+        'Changing the cluster label will remove all scheduled backups for the impacted service/cluster. Make sure to recreate your backups after finishing the cluster configuration. For  more information, see ',
+      descriptionLink: 'TODO',
+      dot: '.',
+    },
   },
 };
diff --git a/public/app/percona/edit-instance/EditInstance.styles.ts b/public/app/percona/edit-instance/EditInstance.styles.ts
index 6a94dc2828bd0..bcda613e5862b 100644
--- a/public/app/percona/edit-instance/EditInstance.styles.ts
+++ b/public/app/percona/edit-instance/EditInstance.styles.ts
@@ -6,4 +6,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({
   link: css`
     color: ${theme.colors.text.link};
   `,
+  hidden: css`
+    display: none;
+  `,
 });
diff --git a/public/app/percona/edit-instance/EditInstance.tsx b/public/app/percona/edit-instance/EditInstance.tsx
index f38124dbbf35b..ae289e9508fec 100644
--- a/public/app/percona/edit-instance/EditInstance.tsx
+++ b/public/app/percona/edit-instance/EditInstance.tsx
@@ -1,10 +1,10 @@
 import { logger } from '@percona/platform-core';
-import React, { useEffect, useState } from 'react';
+import React, { FormEvent, useEffect, useState } from 'react';
 import { Form } from 'react-final-form';
 import { useHistory, useParams } from 'react-router-dom';
 
 import { AppEvents } from '@grafana/data';
-import { Button, Modal, PageToolbar, ToolbarButton, ToolbarButtonRow } from '@grafana/ui';
+import { Alert, Button, Modal, PageToolbar, ToolbarButton, ToolbarButtonRow, useStyles2 } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
 import { Page } from 'app/core/components/Page/Page';
 import { InventoryService } from 'app/percona/inventory/Inventory.service';
@@ -17,6 +17,7 @@ import { DbServicePayload } from '../shared/services/services/Services.types';
 
 import { FETCH_SERVICE_CANCEL_TOKEN } from './EditInstance.constants';
 import { Messages } from './EditInstance.messages';
+import { getStyles } from './EditInstance.styles';
 import { EditInstanceFormValues, EditInstanceRouteParams } from './EditInstance.types';
 import { getInitialValues, getService, toPayload } from './EditInstance.utils';
 
@@ -28,6 +29,7 @@ const EditInstancePage: React.FC = () => {
   const [service, setService] = useState<DbServicePayload>();
   const [generateToken] = useCancelToken();
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const styles = useStyles2(getStyles);
 
   useEffect(() => {
     fetchService(serviceId);
@@ -82,15 +84,16 @@ const EditInstancePage: React.FC = () => {
     setIsModalOpen(false);
   };
 
-  const handleOpenModal = () => {
+  const handleOpenModal = (e?: FormEvent<HTMLFormElement | HTMLButtonElement>) => {
     setIsModalOpen(true);
+    e?.preventDefault();
   };
 
   return (
     <Form
       initialValues={getInitialValues(service)}
       onSubmit={handleSubmit}
-      render={({ handleSubmit, submitting }) => (
+      render={({ handleSubmit, submitting, values }) => (
         <>
           <Modal
             isOpen={isModalOpen}
@@ -106,6 +109,15 @@ const EditInstancePage: React.FC = () => {
               </a>
               {Messages.modal.dot} */}
             </p>
+            {service?.cluster !== values?.cluster && (
+              <Alert title={Messages.modal.cluster.title} severity="warning">
+                {Messages.modal.cluster.description}
+                <a target="_blank" rel="noopener noreferrer" href="todo" className={styles.link}>
+                  {Messages.modal.cluster.descriptionLink}
+                </a>
+                {Messages.modal.cluster.dot}
+              </Alert>
+            )}
             <Modal.ButtonRow>
               <Button onClick={handleSubmit}>{Messages.modal.confirm}</Button>
               <Button variant="secondary" onClick={handleCloseModal}>
@@ -124,8 +136,10 @@ const EditInstancePage: React.FC = () => {
             </PageToolbar>
             <Page.Contents isLoading={isLoading}>
               <h3>{Messages.formTitle(service?.service_name || '')}</h3>
-              <form>
+              <form onSubmit={handleOpenModal}>
                 <Labels showNodeFields={false} />
+                {/* enable submit by keyboard */}
+                <input type="submit" className={styles.hidden} />
               </form>
             </Page.Contents>
           </Page>

From 71f196e4dad42d3804a3e3d3b07c8a091f32192d Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Thu, 16 Feb 2023 18:17:14 +0100
Subject: [PATCH 20/32] PMM-11148 Add docs link to confirm edit service dialog

---
 .../percona/edit-instance/EditInstance.constants.ts   |  2 ++
 .../percona/edit-instance/EditInstance.messages.ts    |  2 +-
 public/app/percona/edit-instance/EditInstance.tsx     | 11 +++++------
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/public/app/percona/edit-instance/EditInstance.constants.ts b/public/app/percona/edit-instance/EditInstance.constants.ts
index aa3d3fac12d0e..2d764da2cb7fd 100644
--- a/public/app/percona/edit-instance/EditInstance.constants.ts
+++ b/public/app/percona/edit-instance/EditInstance.constants.ts
@@ -1 +1,3 @@
 export const FETCH_SERVICE_CANCEL_TOKEN = 'fetchService';
+export const EDIT_INSTANCE_DOCS_LINK =
+  'https://docs.percona.com/percona-monitoring-and-management/get-started/roles-and-permissions/lbac.html#editing-labels-in-pmm';
diff --git a/public/app/percona/edit-instance/EditInstance.messages.ts b/public/app/percona/edit-instance/EditInstance.messages.ts
index 0ebc8e9b560fd..ddc5acc9bb49d 100644
--- a/public/app/percona/edit-instance/EditInstance.messages.ts
+++ b/public/app/percona/edit-instance/EditInstance.messages.ts
@@ -19,7 +19,7 @@ export const Messages = {
       title: 'Cluster label changed',
       description:
         'Changing the cluster label will remove all scheduled backups for the impacted service/cluster. Make sure to recreate your backups after finishing the cluster configuration. For  more information, see ',
-      descriptionLink: 'TODO',
+      descriptionLink: 'Editing Labels',
       dot: '.',
     },
   },
diff --git a/public/app/percona/edit-instance/EditInstance.tsx b/public/app/percona/edit-instance/EditInstance.tsx
index ae289e9508fec..333480d1b1530 100644
--- a/public/app/percona/edit-instance/EditInstance.tsx
+++ b/public/app/percona/edit-instance/EditInstance.tsx
@@ -15,7 +15,7 @@ import { useCancelToken } from '../shared/components/hooks/cancelToken.hook';
 import { updateServiceAction } from '../shared/core/reducers/services';
 import { DbServicePayload } from '../shared/services/services/Services.types';
 
-import { FETCH_SERVICE_CANCEL_TOKEN } from './EditInstance.constants';
+import { EDIT_INSTANCE_DOCS_LINK, FETCH_SERVICE_CANCEL_TOKEN } from './EditInstance.constants';
 import { Messages } from './EditInstance.messages';
 import { getStyles } from './EditInstance.styles';
 import { EditInstanceFormValues, EditInstanceRouteParams } from './EditInstance.types';
@@ -102,17 +102,16 @@ const EditInstancePage: React.FC = () => {
           >
             <p>
               {Messages.modal.description}
-              {/* todo: add back in when docs are available */}
-              {/* {Messages.modal.details}
-              <a className={styles.link}>
+              {Messages.modal.details}
+              <a target="_blank" rel="noopener noreferrer" className={styles.link} href={EDIT_INSTANCE_DOCS_LINK}>
                 {Messages.modal.detailsLink}
               </a>
-              {Messages.modal.dot} */}
+              {Messages.modal.dot}
             </p>
             {service?.cluster !== values?.cluster && (
               <Alert title={Messages.modal.cluster.title} severity="warning">
                 {Messages.modal.cluster.description}
-                <a target="_blank" rel="noopener noreferrer" href="todo" className={styles.link}>
+                <a target="_blank" rel="noopener noreferrer" href={EDIT_INSTANCE_DOCS_LINK} className={styles.link}>
                   {Messages.modal.cluster.descriptionLink}
                 </a>
                 {Messages.modal.cluster.dot}

From 43473b81a10374d5732045ca63ad4befe5022462 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Wed, 22 Feb 2023 10:02:38 +0100
Subject: [PATCH 21/32] PMM-11148 Update api endpoint name

---
 public/app/percona/shared/services/services/Services.service.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/percona/shared/services/services/Services.service.ts b/public/app/percona/shared/services/services/Services.service.ts
index b865a1a0eee38..00fd53e9b1b62 100644
--- a/public/app/percona/shared/services/services/Services.service.ts
+++ b/public/app/percona/shared/services/services/Services.service.ts
@@ -25,7 +25,7 @@ export const ServicesService = {
     return api.post<{}, RemoveServiceBody>(`${BASE_URL}/Remove`, body, false, token);
   },
   updateService(body: UpdateServiceBody, token?: CancelToken) {
-    return api.post<{}, UpdateServiceBody>(`${BASE_URL}/Update`, body, false, token);
+    return api.post<{}, UpdateServiceBody>(`${BASE_URL}/Change`, body, false, token);
   },
   addCustomLabels(body: AddCustomLabelsBody, token?: CancelToken) {
     return api.post<{}, UpdateServiceBody>(`${BASE_URL}/CustomLabels/Add`, body, false, token);

From 9fe8f883d5c14484c8f0f38ff4d57c2b343143f8 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Mon, 17 Apr 2023 13:59:36 +0200
Subject: [PATCH 22/32] PMM-11148 Move delete services modal to component

---
 .../percona/inventory/Inventory.messages.ts   |   1 +
 .../app/percona/inventory/Tabs/Services.tsx   | 125 ++++---------
 .../app/percona/inventory/Tabs/Tabs.styles.ts |   2 +-
 .../inventory/__mocks__/Inventory.service.ts  |   2 -
 .../DeleteServiceModal.test.tsx               |  35 +++-
 .../DeleteServiceModal/DeleteServiceModal.tsx |  14 +-
 .../components/DeleteServiceModal/index.ts    |   3 +
 .../DeleteServicesModal.messages.ts           |  14 ++
 .../DeleteServicesModal.test.tsx              | 175 ++++++++++++++++++
 .../DeleteServicesModal.tsx                   |  74 ++++++++
 .../DeleteServicesModal.types.ts              |  10 +
 .../components/DeleteServicesModal/index.ts   |   3 +
 .../ServicesOptions.messages.ts               |   7 -
 .../ServicesOptions/ServicesOptions.styles.ts |   9 -
 .../ServicesOptions/ServicesOptions.test.tsx  |  71 -------
 .../ServicesOptions/ServicesOptions.tsx       |  50 -----
 .../ServicesOptions/ServicesOptions.types.ts  |   5 -
 .../shared/core/reducers/services/services.ts |  19 +-
 .../core/reducers/services/services.utils.ts  |   4 +-
 .../services/services/Services.service.ts     |   6 +-
 .../services}/__mocks__/Services.service.ts   |   2 +
 21 files changed, 383 insertions(+), 248 deletions(-)
 create mode 100644 public/app/percona/inventory/components/DeleteServiceModal/index.ts
 create mode 100644 public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.messages.ts
 create mode 100644 public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.test.tsx
 create mode 100644 public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.tsx
 create mode 100644 public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.types.ts
 create mode 100644 public/app/percona/inventory/components/DeleteServicesModal/index.ts
 delete mode 100644 public/app/percona/inventory/components/ServicesOptions/ServicesOptions.messages.ts
 delete mode 100644 public/app/percona/inventory/components/ServicesOptions/ServicesOptions.styles.ts
 delete mode 100644 public/app/percona/inventory/components/ServicesOptions/ServicesOptions.test.tsx
 delete mode 100644 public/app/percona/inventory/components/ServicesOptions/ServicesOptions.tsx
 delete mode 100644 public/app/percona/inventory/components/ServicesOptions/ServicesOptions.types.ts
 rename public/app/percona/{inventory => shared/services/services}/__mocks__/Services.service.ts (84%)

diff --git a/public/app/percona/inventory/Inventory.messages.ts b/public/app/percona/inventory/Inventory.messages.ts
index 155d5fc5396a4..ad04b66680e37 100644
--- a/public/app/percona/inventory/Inventory.messages.ts
+++ b/public/app/percona/inventory/Inventory.messages.ts
@@ -59,6 +59,7 @@ export const Messages = {
       `${deletedItems} of ${totalItems} nodes successfully deleted`,
   },
   delete: 'Delete',
+  edit: 'Edit',
   cancel: 'Cancel',
   proceed: 'Proceed',
   forceMode: 'Force mode',
diff --git a/public/app/percona/inventory/Tabs/Services.tsx b/public/app/percona/inventory/Tabs/Services.tsx
index 332d32e84aeb1..9134af69dd00b 100644
--- a/public/app/percona/inventory/Tabs/Services.tsx
+++ b/public/app/percona/inventory/Tabs/Services.tsx
@@ -1,12 +1,10 @@
 /* eslint-disable @typescript-eslint/consistent-type-assertions,@typescript-eslint/no-explicit-any */
-import { CheckboxField, logger } from '@percona/platform-core';
+import { logger } from '@percona/platform-core';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Form } from 'react-final-form';
 import { Column, Row } from 'react-table';
 
-import { AppEvents } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
-import { Badge, Button, HorizontalGroup, Icon, Modal, TagList, useStyles2 } from '@grafana/ui';
+import { Badge, Button, HorizontalGroup, Icon, TagList, useStyles2 } from '@grafana/ui';
 import { OldPage } from 'app/core/components/Page/Page';
 import { stripServiceId } from 'app/percona/check/components/FailedChecksTab/FailedChecksTab.utils';
 import { Action } from 'app/percona/dbaas/components/MultipleActions';
@@ -14,14 +12,9 @@ import { Table } from 'app/percona/integrated-alerting/components/Table';
 import { DetailsRow } from 'app/percona/shared/components/Elements/DetailsRow/DetailsRow';
 import { FeatureLoader } from 'app/percona/shared/components/Elements/FeatureLoader';
 import { ServiceIconWithText } from 'app/percona/shared/components/Elements/ServiceIconWithText/ServiceIconWithText';
-import { FormElement } from 'app/percona/shared/components/Form';
 import { useCancelToken } from 'app/percona/shared/components/hooks/cancelToken.hook';
 import { usePerconaNavModel } from 'app/percona/shared/components/hooks/perconaNavModel';
-import {
-  fetchServicesAction,
-  removeServicesAction,
-  fetchActiveServiceTypesAction,
-} from 'app/percona/shared/core/reducers/services';
+import { fetchServicesAction, fetchActiveServiceTypesAction } from 'app/percona/shared/core/reducers/services';
 import { getServices } from 'app/percona/shared/core/selectors';
 import { isApiCancelError } from 'app/percona/shared/helpers/api';
 import { capitalizeText } from 'app/percona/shared/helpers/capitalizeText';
@@ -31,9 +24,10 @@ import { Service, ServiceStatus } from 'app/percona/shared/services/services/Ser
 import { useAppDispatch } from 'app/store/store';
 import { useSelector } from 'app/types';
 
-import { appEvents } from '../../../core/app_events';
 import { GET_SERVICES_CANCEL_TOKEN } from '../Inventory.constants';
 import { Messages } from '../Inventory.messages';
+import DeleteServiceModal from '../components/DeleteServiceModal';
+import DeleteServicesModal from '../components/DeleteServicesModal';
 import { StatusBadge } from '../components/StatusBadge/StatusBadge';
 import { StatusLink } from '../components/StatusLink/StatusLink';
 
@@ -56,7 +50,7 @@ export const Services = () => {
         content: (
           <HorizontalGroup spacing="sm">
             <Icon name="trash-alt" />
-            <span className={styles.deleteItemTxtSpan}>{Messages.delete}</span>
+            <span className={styles.actionItemTxtSpan}>{Messages.delete}</span>
           </HorizontalGroup>
         ),
         action: () => {
@@ -64,6 +58,18 @@ export const Services = () => {
           setModalVisible(true);
         },
       },
+      {
+        content: (
+          <HorizontalGroup spacing="sm">
+            <Icon name="pen" />
+            <span className={styles.actionItemTxtSpan}>{Messages.edit}</span>
+          </HorizontalGroup>
+        ),
+        action: () => {
+          const serviceId = row.original.params.serviceId.split('/').pop();
+          locationService.push(`/edit-instance/${serviceId}`);
+        },
+      },
       {
         content: Messages.services.actions.dashboard,
         action: () => {
@@ -77,7 +83,7 @@ export const Services = () => {
         },
       },
     ],
-    [styles.deleteItemTxtSpan]
+    [styles.actionItemTxtSpan]
   );
 
   const columns = useMemo(
@@ -126,12 +132,6 @@ export const Services = () => {
     [getActions]
   );
 
-  const deletionMsg = useMemo(() => {
-    const servicesToDelete = actionItem ? [actionItem] : selected;
-
-    return Messages.services.deleteConfirmation(servicesToDelete.length);
-  }, [actionItem, selected]);
-
   const loadData = useCallback(async () => {
     try {
       await dispatch(fetchServicesAction({ token: generateToken(GET_SERVICES_CANCEL_TOKEN) }));
@@ -154,39 +154,6 @@ export const Services = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const removeServices = useCallback(
-    async (forceMode) => {
-      const servicesToDelete = actionItem ? [actionItem] : selected.map((s) => s.original);
-
-      try {
-        const params = servicesToDelete.map((s) => ({
-          serviceId: s.params.serviceId,
-          force: forceMode,
-        }));
-        const successfullyDeleted = await dispatch(removeServicesAction({ services: params })).unwrap();
-
-        if (successfullyDeleted > 0) {
-          appEvents.emit(AppEvents.alertSuccess, [
-            Messages.services.servicesDeleted(successfullyDeleted, servicesToDelete.length),
-          ]);
-        }
-
-        if (actionItem) {
-          setActionItem(null);
-        } else {
-          setSelectedRows([]);
-        }
-        loadData();
-      } catch (e) {
-        if (isApiCancelError(e)) {
-          return;
-        }
-        logger.error(e);
-      }
-    },
-    [actionItem, dispatch, loadData, selected]
-  );
-
   const handleSelectionChange = useCallback((rows: Array<Row<Service>>) => {
     setSelectedRows(rows);
   }, []);
@@ -230,6 +197,12 @@ export const Services = () => {
     setActionItem(null);
   }, []);
 
+  const onDeleteSuccess = useCallback(() => {
+    setModalVisible(false);
+    setSelectedRows([]);
+    loadData();
+  }, [loadData]);
+
   return (
     <OldPage navModel={navModel}>
       <OldPage.Contents>
@@ -250,46 +223,20 @@ export const Services = () => {
               {Messages.services.add}
             </Button>
           </HorizontalGroup>
-          <Modal
-            title={
-              <div className="modal-header-title">
-                <span className="p-l-1">{Messages.confirmAction}</span>
-              </div>
-            }
+          <DeleteServicesModal
+            services={selected}
             isOpen={modalVisible}
+            onSuccess={onDeleteSuccess}
             onDismiss={onModalClose}
-          >
-            <Form
-              onSubmit={() => {}}
-              render={({ values, handleSubmit }) => (
-                <form onSubmit={handleSubmit}>
-                  <>
-                    <h4 className={styles.confirmationText}>{deletionMsg}</h4>
-                    <FormElement
-                      dataTestId="form-field-force"
-                      label={Messages.forceMode}
-                      element={<CheckboxField label={Messages.services.forceConfirmation} name="force" />}
-                    />
-                    <HorizontalGroup justify="space-between" spacing="md">
-                      <Button variant="secondary" size="md" onClick={onModalClose}>
-                        {Messages.cancel}
-                      </Button>
-                      <Button
-                        variant="destructive"
-                        size="md"
-                        onClick={() => {
-                          removeServices(values.force);
-                          setModalVisible(false);
-                        }}
-                      >
-                        {Messages.proceed}
-                      </Button>
-                    </HorizontalGroup>
-                  </>
-                </form>
-              )}
+          />
+          {!!actionItem && (
+            <DeleteServiceModal
+              serviceId={actionItem.params.serviceId}
+              serviceName={actionItem.params.serviceName}
+              isOpen={modalVisible}
+              onCancel={onModalClose}
             />
-          </Modal>
+          )}
           <Table
             columns={columns}
             data={services}
diff --git a/public/app/percona/inventory/Tabs/Tabs.styles.ts b/public/app/percona/inventory/Tabs/Tabs.styles.ts
index 8cba75c57dd8e..4687a7667cd51 100644
--- a/public/app/percona/inventory/Tabs/Tabs.styles.ts
+++ b/public/app/percona/inventory/Tabs/Tabs.styles.ts
@@ -36,7 +36,7 @@ export const getStyles = ({ spacing }: GrafanaTheme2) => ({
     align-items: center;
     background-color: transparent;
   `,
-  deleteItemTxtSpan: css`
+  actionItemTxtSpan: css`
     line-height: 15px;
   `,
   agentBreadcrumb: css`
diff --git a/public/app/percona/inventory/__mocks__/Inventory.service.ts b/public/app/percona/inventory/__mocks__/Inventory.service.ts
index e624b03ea9844..e4874e2f61203 100644
--- a/public/app/percona/inventory/__mocks__/Inventory.service.ts
+++ b/public/app/percona/inventory/__mocks__/Inventory.service.ts
@@ -33,8 +33,6 @@ export const InventoryService = jest.genMockFromModule<typeof service>(
   'app/percona/inventory/Inventory.service'
 ).InventoryService;
 
-InventoryService.removeService = () => Promise.resolve();
-
 InventoryService.getDbServices = () => Promise.resolve(stubs);
 
 InventoryService.getService = () =>
diff --git a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.test.tsx b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.test.tsx
index 3a16dd95a1344..2c5077f78040a 100644
--- a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.test.tsx
+++ b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.test.tsx
@@ -6,7 +6,6 @@ import * as ServicesReducer from 'app/percona/shared/core/reducers/services/serv
 import { configureStore } from 'app/store/configureStore';
 
 import DeleteServiceModal from './DeleteServiceModal';
-import { Messages } from './DeleteServiceModal.messages';
 
 const cancelFn = jest.fn();
 
@@ -27,12 +26,12 @@ describe('DeleteServiceModal::', () => {
 
   it("doesn't render if not opened", () => {
     renderDefaults(false);
-    expect(screen.queryByText(Messages.description('service_name'))).toBe(null);
+    expect(screen.queryByTestId('delete-service-description')).toBe(null);
   });
 
   it('renders when opened', () => {
     renderDefaults();
-    expect(screen.queryByText(Messages.description('service_name'))).toBeInTheDocument();
+    expect(screen.queryByTestId('delete-service-description')).toBeInTheDocument();
   });
 
   it('can be cancelled', () => {
@@ -67,11 +66,39 @@ describe('DeleteServiceModal::', () => {
     await waitFor(() => fireEvent.click(forceModeCheck));
 
     const confirmButton = screen.getByTestId('delete-service-confirm');
-    fireEvent.click(confirmButton);
+    await waitFor(() => fireEvent.click(confirmButton));
 
     expect(removeServiceActionSpy).toHaveBeenCalledWith({
       force: true,
       serviceId: 'service_id',
     });
   });
+
+  it('resets force mode after submit', async () => {
+    renderDefaults();
+
+    const forceModeCheck = screen.getByTestId('delete-service-force-mode');
+    await waitFor(() => fireEvent.click(forceModeCheck));
+
+    expect(forceModeCheck).toBeChecked();
+
+    const confirmButton = screen.getByTestId('delete-service-confirm');
+    fireEvent.click(confirmButton);
+
+    await waitFor(() => expect(forceModeCheck).not.toBeChecked());
+  });
+
+  it('resets force mode after dismiss', async () => {
+    renderDefaults();
+
+    const forceModeCheck = screen.getByTestId('delete-service-force-mode');
+    await waitFor(() => fireEvent.click(forceModeCheck));
+
+    expect(forceModeCheck).toBeChecked();
+
+    const cancelButton = screen.getByTestId('delete-service-cancel');
+    fireEvent.click(cancelButton);
+
+    await waitFor(() => expect(forceModeCheck).not.toBeChecked());
+  });
 });
diff --git a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx
index 6c58678a11b8d..b840092ff1290 100644
--- a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx
+++ b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx
@@ -32,6 +32,8 @@ const DeleteServiceModal: React.FC<DeleteServiceModalProps> = ({ serviceId, serv
       await dispatch(removeServiceAction(params)).unwrap();
 
       appEvents.emit(AppEvents.alertSuccess, [Messages.success(serviceName)]);
+
+      setForceActive(false);
       onCancel();
     } catch (e) {
       if (isApiCancelError(e)) {
@@ -41,15 +43,21 @@ const DeleteServiceModal: React.FC<DeleteServiceModalProps> = ({ serviceId, serv
     }
   };
 
+  const handleDismiss = () => {
+    setForceActive(false);
+    onCancel();
+  };
+
   return (
-    <Modal isOpen={isOpen} title={Messages.title} onDismiss={onCancel} className={styles.Modal}>
+    <Modal isOpen={isOpen} title={Messages.title} onDismiss={handleDismiss} className={styles.Modal}>
       <Alert title={Messages.warning} severity="warning" />
-      <p>{Messages.description(serviceName)}</p>
+      <p data-testid="delete-service-description">{Messages.description(serviceName)}</p>
       <div>
         <Checkbox
           data-testid="delete-service-force-mode"
           label={Messages.forceMode.label}
           description={Messages.forceMode.description}
+          checked={forceModeActive}
           value={forceModeActive}
           onChange={() => setForceActive((active) => !active)}
         />
@@ -58,7 +66,7 @@ const DeleteServiceModal: React.FC<DeleteServiceModalProps> = ({ serviceId, serv
         <Button data-testid="delete-service-confirm" onClick={handleDelete}>
           {Messages.submit}
         </Button>
-        <Button data-testid="delete-service-cancel" variant="secondary" onClick={onCancel}>
+        <Button data-testid="delete-service-cancel" variant="secondary" onClick={handleDismiss}>
           {Messages.cancel}
         </Button>
       </Modal.ButtonRow>
diff --git a/public/app/percona/inventory/components/DeleteServiceModal/index.ts b/public/app/percona/inventory/components/DeleteServiceModal/index.ts
new file mode 100644
index 0000000000000..ee2e9cb2d5844
--- /dev/null
+++ b/public/app/percona/inventory/components/DeleteServiceModal/index.ts
@@ -0,0 +1,3 @@
+import DeleteServiceModal from './DeleteServiceModal';
+
+export default DeleteServiceModal;
diff --git a/public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.messages.ts b/public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.messages.ts
new file mode 100644
index 0000000000000..0735b975a94ef
--- /dev/null
+++ b/public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.messages.ts
@@ -0,0 +1,14 @@
+export const Messages = {
+  title: 'Confirmation required',
+  warning: 'Attention! This action is irreversible!',
+  forceMode: {
+    label: 'Force mode',
+    description: 'Force mode is going to delete all associated agents.',
+  },
+  submit: (nrItems: number) => `Yes, delete service${nrItems > 1 ? 's' : ''}`,
+  cancel: 'Cancel',
+  deleteConfirmation: (nrItems: number) =>
+    `Are you sure that you want to permanently delete ${nrItems} service${nrItems > 1 ? 's' : ''}`,
+  servicesDeleted: (deletedItems: number, totalItems: number) =>
+    `${deletedItems} of ${totalItems} services successfully deleted`,
+};
diff --git a/public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.test.tsx b/public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.test.tsx
new file mode 100644
index 0000000000000..a9c99eae37623
--- /dev/null
+++ b/public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.test.tsx
@@ -0,0 +1,175 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { Row } from 'react-table';
+
+import * as ServicesReducer from 'app/percona/shared/core/reducers/services/services';
+import { Service, ServiceStatus } from 'app/percona/shared/services/services/Services.types';
+import { configureStore } from 'app/store/configureStore';
+
+import DeleteServiceModal from './DeleteServicesModal';
+
+const cancelFn = jest.fn();
+const successFn = jest.fn();
+const removeServicesActionSpy = jest.spyOn(ServicesReducer, 'removeServicesAction');
+
+jest.mock('app/percona/inventory/Inventory.service');
+jest.mock('app/percona/shared/services/services/Services.service');
+
+const serviceStub: Service = {
+  params: {
+    nodeId: 'Node #1',
+    nodeName: 'Node #1',
+    serviceId: 'Service #1',
+    serviceName: 'Service #1',
+    status: ServiceStatus.NA,
+  },
+  type: 'external',
+};
+
+const serviceStub2: Service = {
+  params: {
+    nodeId: 'Node #2',
+    nodeName: 'Node #2',
+    serviceId: 'Service #2',
+    serviceName: 'Service #2',
+    status: ServiceStatus.NA,
+  },
+  type: 'external',
+};
+
+const servicesStub = [
+  {
+    original: serviceStub,
+  },
+];
+
+const servicesStubMulti = [
+  {
+    original: serviceStub,
+  },
+  {
+    original: serviceStub2,
+  },
+];
+
+const renderDefaults = (isOpen = true, services = servicesStub) =>
+  render(
+    <Provider store={configureStore()}>
+      <DeleteServiceModal
+        onDismiss={cancelFn}
+        isOpen={isOpen}
+        onSuccess={successFn}
+        services={services as unknown as Array<Row<Service>>}
+      />
+    </Provider>
+  );
+
+describe('DeleteServicesModal::', () => {
+  beforeEach(() => {
+    cancelFn.mockClear();
+    removeServicesActionSpy.mockClear();
+  });
+
+  it("doesn't render if not opened", () => {
+    renderDefaults(false);
+    expect(screen.queryByTestId('delete-services-description')).toBe(null);
+  });
+
+  it('renders when opened', () => {
+    renderDefaults();
+    expect(screen.queryByTestId('delete-services-description')).toBeInTheDocument();
+  });
+
+  it('can be cancelled', () => {
+    renderDefaults();
+
+    const cancelButton = screen.getByTestId('delete-services-cancel');
+    fireEvent.click(cancelButton);
+
+    expect(cancelFn).toHaveBeenCalled();
+  });
+
+  it('calls delete', () => {
+    renderDefaults();
+
+    const confirmButton = screen.getByTestId('delete-services-confirm');
+    fireEvent.click(confirmButton);
+
+    expect(removeServicesActionSpy).toHaveBeenCalledWith({
+      services: [
+        {
+          serviceId: serviceStub.params.serviceId,
+          force: false,
+        },
+      ],
+    });
+  });
+
+  it('calls delete for all services', async () => {
+    renderDefaults(true, servicesStubMulti);
+
+    const confirmButton = screen.getByTestId('delete-services-confirm');
+    fireEvent.click(confirmButton);
+
+    expect(removeServicesActionSpy).toHaveBeenCalledWith({
+      services: [
+        {
+          serviceId: serviceStub.params.serviceId,
+          force: false,
+        },
+        {
+          serviceId: serviceStub2.params.serviceId,
+          force: false,
+        },
+      ],
+    });
+  });
+
+  it('calls delete with force mode', async () => {
+    renderDefaults();
+
+    const forceModeCheck = screen.getByTestId('delete-services-force-mode');
+    await waitFor(() => fireEvent.click(forceModeCheck));
+
+    const confirmButton = screen.getByTestId('delete-services-confirm');
+    await waitFor(() => fireEvent.click(confirmButton));
+
+    expect(removeServicesActionSpy).toHaveBeenCalledWith({
+      services: [
+        {
+          serviceId: serviceStub.params.serviceId,
+          force: true,
+        },
+      ],
+    });
+  });
+
+  it('resets force mode after submit', async () => {
+    renderDefaults();
+
+    const forceModeCheck = screen.getByTestId('delete-services-force-mode');
+    await waitFor(() => fireEvent.click(forceModeCheck));
+
+    expect(forceModeCheck).toBeChecked();
+
+    const confirmButton = screen.getByTestId('delete-services-confirm');
+    fireEvent.click(confirmButton);
+
+    await waitFor(() => expect(forceModeCheck).not.toBeChecked());
+  });
+
+  it('resets force mode after dismiss', async () => {
+    renderDefaults();
+
+    const forceModeCheck = screen.getByTestId('delete-services-force-mode');
+    await waitFor(() => fireEvent.click(forceModeCheck));
+
+    expect(forceModeCheck).toBeChecked();
+
+    const cancelButton = screen.getByTestId('delete-services-cancel');
+    fireEvent.click(cancelButton);
+
+    await waitFor(() => expect(forceModeCheck).not.toBeChecked());
+  });
+});
diff --git a/public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.tsx b/public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.tsx
new file mode 100644
index 0000000000000..2af3481a7946b
--- /dev/null
+++ b/public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.tsx
@@ -0,0 +1,74 @@
+import { logger } from '@percona/platform-core';
+import React, { FC, useState } from 'react';
+
+import { AppEvents } from '@grafana/data';
+import { Alert, Button, Checkbox, Modal } from '@grafana/ui';
+import { appEvents } from 'app/core/core';
+import { removeServicesAction } from 'app/percona/shared/core/reducers/services';
+import { isApiCancelError } from 'app/percona/shared/helpers/api';
+import { useAppDispatch } from 'app/store/store';
+
+import { Messages } from './DeleteServicesModal.messages';
+import { DeleteServicesModalProps } from './DeleteServicesModal.types';
+
+const DeleteServicesModal: FC<DeleteServicesModalProps> = ({ isOpen, onDismiss, onSuccess, services }) => {
+  const [forceModeActive, setForceActive] = useState(false);
+  const dispatch = useAppDispatch();
+
+  const handleDelete = async () => {
+    const servicesToDelete = services.map((s) => s.original);
+
+    try {
+      const params = servicesToDelete.map((s) => ({
+        serviceId: s.params.serviceId,
+        force: forceModeActive,
+      }));
+      const successfullyDeleted = await dispatch(removeServicesAction({ services: params })).unwrap();
+
+      if (successfullyDeleted > 0) {
+        appEvents.emit(AppEvents.alertSuccess, [
+          Messages.servicesDeleted(successfullyDeleted, servicesToDelete.length),
+        ]);
+      }
+
+      setForceActive(false);
+      onSuccess();
+    } catch (e) {
+      if (isApiCancelError(e)) {
+        return;
+      }
+      logger.error(e);
+    }
+  };
+
+  const handleDismiss = () => {
+    setForceActive(false);
+    onDismiss();
+  };
+
+  return (
+    <Modal title={Messages.title} isOpen={isOpen} onDismiss={handleDismiss}>
+      <Alert title={Messages.warning} severity="warning" />
+      <p data-testid="delete-services-description">{Messages.deleteConfirmation(services.length)}</p>
+      <div>
+        <Checkbox
+          data-testid="delete-services-force-mode"
+          label={Messages.forceMode.label}
+          description={Messages.forceMode.description}
+          value={forceModeActive}
+          onChange={() => setForceActive((active) => !active)}
+        />
+      </div>
+      <Modal.ButtonRow>
+        <Button data-testid="delete-services-confirm" onClick={handleDelete}>
+          {Messages.submit(services.length)}
+        </Button>
+        <Button data-testid="delete-services-cancel" variant="secondary" onClick={handleDismiss}>
+          {Messages.cancel}
+        </Button>
+      </Modal.ButtonRow>
+    </Modal>
+  );
+};
+
+export default DeleteServicesModal;
diff --git a/public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.types.ts b/public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.types.ts
new file mode 100644
index 0000000000000..b3925d7a4b6ed
--- /dev/null
+++ b/public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.types.ts
@@ -0,0 +1,10 @@
+import { Row } from 'react-table';
+
+import { Service } from 'app/percona/shared/services/services/Services.types';
+
+export interface DeleteServicesModalProps {
+  isOpen: boolean;
+  onDismiss: () => void;
+  onSuccess: () => void;
+  services: Array<Row<Service>>;
+}
diff --git a/public/app/percona/inventory/components/DeleteServicesModal/index.ts b/public/app/percona/inventory/components/DeleteServicesModal/index.ts
new file mode 100644
index 0000000000000..7c8df88ba62db
--- /dev/null
+++ b/public/app/percona/inventory/components/DeleteServicesModal/index.ts
@@ -0,0 +1,3 @@
+import DeleteServicesModal from './DeleteServicesModal';
+
+export default DeleteServicesModal;
diff --git a/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.messages.ts b/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.messages.ts
deleted file mode 100644
index 1212d2b15d002..0000000000000
--- a/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.messages.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const Messages = {
-  optionsAriaLabel: 'Open service options',
-  edit: 'Edit',
-  editAria: 'Edit service',
-  delete: 'Delete',
-  deleteAria: 'Delete service',
-};
diff --git a/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.styles.ts b/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.styles.ts
deleted file mode 100644
index b7b27bc58fe84..0000000000000
--- a/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.styles.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { css } from '@emotion/css';
-
-export const styles = {
-  Cell: css`
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  `,
-};
diff --git a/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.test.tsx b/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.test.tsx
deleted file mode 100644
index 187de6fe40f0e..0000000000000
--- a/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.test.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
-import { Provider } from 'react-redux';
-
-import { HistoryWrapper, locationService, setLocationService } from '@grafana/runtime';
-import { configureStore } from 'app/store/configureStore';
-
-import ServicesOptions from './ServicesOptions';
-import { Messages } from './ServicesOptions.messages';
-
-const serviceStub = {
-  service_id: 'service_id',
-  node_id: 'node_id',
-  service_name: 'service_name',
-};
-
-const renderWithDefaults = () =>
-  render(
-    <Provider store={configureStore()}>
-      <ServicesOptions service={serviceStub} />
-    </Provider>
-  );
-
-describe('ServicesOptions::', () => {
-  beforeEach(() => {
-    setLocationService(new HistoryWrapper());
-  });
-
-  it('renders options button', () => {
-    renderWithDefaults();
-    expect(screen.getByLabelText(Messages.optionsAriaLabel)).toBeInTheDocument();
-  });
-
-  it('opens menu after clicking', async () => {
-    renderWithDefaults();
-
-    const optionsButton = screen.getByLabelText(Messages.optionsAriaLabel);
-    fireEvent.click(optionsButton);
-
-    await waitFor(() => expect(screen.queryByLabelText(Messages.editAria)).toBeInTheDocument());
-    await waitFor(() => expect(screen.queryByLabelText(Messages.deleteAria)).toBeInTheDocument());
-  });
-
-  it('navigates to edit page', async () => {
-    renderWithDefaults();
-
-    const optionsButton = screen.getByLabelText(Messages.optionsAriaLabel);
-    await waitFor(() => fireEvent.click(optionsButton));
-
-    await waitFor(() => expect(screen.queryByLabelText(Messages.editAria)).toBeInTheDocument());
-
-    const editOption = screen.getByLabelText(Messages.editAria);
-    await waitFor(() => editOption.click());
-
-    expect(locationService.getLocation().pathname).toBe('/edit-instance/service_id');
-  });
-
-  it('opens delete modal', async () => {
-    renderWithDefaults();
-
-    const optionsButton = screen.getByLabelText(Messages.optionsAriaLabel);
-    await waitFor(() => fireEvent.click(optionsButton));
-
-    await waitFor(() => expect(screen.queryByLabelText(Messages.editAria)).toBeInTheDocument());
-
-    const deleteOption = screen.getByLabelText(Messages.deleteAria);
-    await waitFor(() => deleteOption.click());
-
-    await waitFor(() => expect(screen.getByTestId('delete-service-confirm')).toBeInTheDocument());
-  });
-});
diff --git a/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.tsx b/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.tsx
deleted file mode 100644
index fbd104a1ea358..0000000000000
--- a/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, { useState } from 'react';
-
-import { locationService } from '@grafana/runtime';
-import { Menu, Dropdown, IconButton } from '@grafana/ui';
-
-import DeleteServiceModal from '../DeleteServiceModal/DeleteServiceModal';
-
-import { Messages } from './ServicesOptions.messages';
-import { styles } from './ServicesOptions.styles';
-import { ServicesOptionsProps } from './ServicesOptions.types';
-
-const ServicesOptions: React.FC<ServicesOptionsProps> = ({ service }) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  const openModal = () => {
-    setIsModalOpen(true);
-  };
-
-  const closeModal = () => {
-    setIsModalOpen(false);
-  };
-
-  const handleEdit = () => {
-    const serviceId = service.service_id.split('/').pop();
-    locationService.push(`/edit-instance/${serviceId}`);
-  };
-
-  const menu = () => (
-    <Menu>
-      <Menu.Item ariaLabel={Messages.editAria} label={Messages.edit} icon="pen" onClick={handleEdit} />
-      <Menu.Item ariaLabel={Messages.deleteAria} label={Messages.delete} icon="trash-alt" onClick={openModal} />
-    </Menu>
-  );
-
-  return (
-    <div className={styles.Cell}>
-      <DeleteServiceModal
-        serviceId={service.service_id}
-        serviceName={service.service_name}
-        isOpen={isModalOpen}
-        onCancel={closeModal}
-      />
-      <Dropdown overlay={menu}>
-        <IconButton ariaLabel={Messages.optionsAriaLabel} name="ellipsis-v" />
-      </Dropdown>
-    </div>
-  );
-};
-
-export default ServicesOptions;
diff --git a/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.types.ts b/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.types.ts
deleted file mode 100644
index 33a3d48a94f98..0000000000000
--- a/public/app/percona/inventory/components/ServicesOptions/ServicesOptions.types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { DbServicePayload } from 'app/percona/shared/services/services/Services.types';
-
-export interface ServicesOptionsProps {
-  service: DbServicePayload;
-}
diff --git a/public/app/percona/shared/core/reducers/services/services.ts b/public/app/percona/shared/core/reducers/services/services.ts
index 3990399886e93..5a6b314a01bb7 100644
--- a/public/app/percona/shared/core/reducers/services/services.ts
+++ b/public/app/percona/shared/core/reducers/services/services.ts
@@ -7,8 +7,23 @@ import { createAsyncThunk } from 'app/types';
 
 import { filterFulfilled, processPromiseResults } from '../../../helpers/promises';
 
-import { ListServicesParams, RemoveServiceParams, RemoveServicesParams, ServicesState, UpdateServiceParams } from './services.types';
-import { didStandardLabelsChange, hasLabelsToAddOrUpdate, hasLabelsToRemove, toCustomLabelsBodies, toDbServicesModel, toListServicesBody, toRemoveServiceBody, toUpdateServiceBody } from './services.utils';
+import {
+  ListServicesParams,
+  RemoveServiceParams,
+  RemoveServicesParams,
+  ServicesState,
+  UpdateServiceParams,
+} from './services.types';
+import {
+  didStandardLabelsChange,
+  hasLabelsToAddOrUpdate,
+  hasLabelsToRemove,
+  toCustomLabelsBodies,
+  toDbServicesModel,
+  toListServicesBody,
+  toRemoveServiceBody,
+  toUpdateServiceBody,
+} from './services.utils';
 
 const initialState: ServicesState = {
   activeTypes: [],
diff --git a/public/app/percona/shared/core/reducers/services/services.utils.ts b/public/app/percona/shared/core/reducers/services/services.utils.ts
index a849e2575755f..ff50cba690b0e 100644
--- a/public/app/percona/shared/core/reducers/services/services.utils.ts
+++ b/public/app/percona/shared/core/reducers/services/services.utils.ts
@@ -51,7 +51,7 @@ export const toLabelValue = (original?: string, current?: string): string | unde
 
 export const toUpdateServiceBody = ({ serviceId, labels, current }: UpdateServiceParams): UpdateServiceBody => ({
   service_id: serviceId,
-  environment: toLabelValue(current.environment, labels.environment),
+  environment: toLabelValue(current.enviroment, labels.environment),
   cluster: toLabelValue(current.cluster, labels.cluster),
   replication_set: toLabelValue(current.replication_set, labels.replication_set),
 });
@@ -101,7 +101,7 @@ export const toCustomLabelsBodies = (params: UpdateServiceParams): [AddCustomLab
 };
 
 export const didStandardLabelsChange = ({ current, labels }: UpdateServiceParams): boolean =>
-  current.environment !== labels.environment ||
+  current.enviroment !== labels.environment ||
   current.cluster !== labels.cluster ||
   current.replication_set !== labels.replication_set;
 
diff --git a/public/app/percona/shared/services/services/Services.service.ts b/public/app/percona/shared/services/services/Services.service.ts
index f6256b318b7ea..35ada739dbf0c 100644
--- a/public/app/percona/shared/services/services/Services.service.ts
+++ b/public/app/percona/shared/services/services/Services.service.ts
@@ -23,12 +23,12 @@ export const ServicesService = {
     return api.post<{}, RemoveServiceBody>('/v1/inventory/Services/Remove', body, false, token);
   },
   updateService(body: UpdateServiceBody, token?: CancelToken) {
-    return api.post<{}, UpdateServiceBody>(`${BASE_URL}/Change`, body, false, token);
+    return api.post<{}, UpdateServiceBody>('/v1/inventory/Change', body, false, token);
   },
   addCustomLabels(body: AddCustomLabelsBody, token?: CancelToken) {
-    return api.post<{}, UpdateServiceBody>(`${BASE_URL}/CustomLabels/Add`, body, false, token);
+    return api.post<{}, UpdateServiceBody>('/v1/inventory/CustomLabels/Add', body, false, token);
   },
   removeCustomLabels(body: RemoveCustomLabelsBody, token?: CancelToken) {
-    return api.post<{}, UpdateServiceBody>(`${BASE_URL}/CustomLabels/Remove`, body, false, token);
+    return api.post<{}, UpdateServiceBody>('/v1/inventory/CustomLabels/Remove', body, false, token);
   },
 };
diff --git a/public/app/percona/inventory/__mocks__/Services.service.ts b/public/app/percona/shared/services/services/__mocks__/Services.service.ts
similarity index 84%
rename from public/app/percona/inventory/__mocks__/Services.service.ts
rename to public/app/percona/shared/services/services/__mocks__/Services.service.ts
index 358e4808ca22e..de3e38be28ddd 100644
--- a/public/app/percona/inventory/__mocks__/Services.service.ts
+++ b/public/app/percona/shared/services/services/__mocks__/Services.service.ts
@@ -8,3 +8,5 @@ ServicesService.getActive = () =>
   Promise.resolve({
     service_types: [],
   });
+
+ServicesService.removeService = () => Promise.resolve({});

From 5fe4bb2167b2f1e78492833ca1b19b1393640cfa Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Tue, 18 Apr 2023 09:23:40 +0200
Subject: [PATCH 23/32] PMM-11148 Fix bugs

---
 .../app/percona/inventory/Tabs/Services.tsx   | 19 ++++++++++---------
 .../DeleteServiceModal.styles.ts              |  7 -------
 .../DeleteServiceModal/DeleteServiceModal.tsx |  3 +--
 3 files changed, 11 insertions(+), 18 deletions(-)
 delete mode 100644 public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.styles.ts

diff --git a/public/app/percona/inventory/Tabs/Services.tsx b/public/app/percona/inventory/Tabs/Services.tsx
index 9134af69dd00b..b3950696fdcb4 100644
--- a/public/app/percona/inventory/Tabs/Services.tsx
+++ b/public/app/percona/inventory/Tabs/Services.tsx
@@ -198,10 +198,10 @@ export const Services = () => {
   }, []);
 
   const onDeleteSuccess = useCallback(() => {
-    setModalVisible(false);
     setSelectedRows([]);
+    onModalClose();
     loadData();
-  }, [loadData]);
+  }, [onModalClose, loadData]);
 
   return (
     <OldPage navModel={navModel}>
@@ -223,19 +223,20 @@ export const Services = () => {
               {Messages.services.add}
             </Button>
           </HorizontalGroup>
-          <DeleteServicesModal
-            services={selected}
-            isOpen={modalVisible}
-            onSuccess={onDeleteSuccess}
-            onDismiss={onModalClose}
-          />
-          {!!actionItem && (
+          {actionItem ? (
             <DeleteServiceModal
               serviceId={actionItem.params.serviceId}
               serviceName={actionItem.params.serviceName}
               isOpen={modalVisible}
               onCancel={onModalClose}
             />
+          ) : (
+            <DeleteServicesModal
+              services={selected}
+              isOpen={modalVisible}
+              onSuccess={onDeleteSuccess}
+              onDismiss={onModalClose}
+            />
           )}
           <Table
             columns={columns}
diff --git a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.styles.ts b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.styles.ts
deleted file mode 100644
index 6b6e65ea587b7..0000000000000
--- a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.styles.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { css } from '@emotion/css';
-
-export const styles = {
-  Modal: css`
-    width: 480px;
-  `,
-};
diff --git a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx
index b840092ff1290..0cf5b3c7bd67c 100644
--- a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx
+++ b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx
@@ -9,7 +9,6 @@ import { isApiCancelError } from 'app/percona/shared/helpers/api';
 import { useAppDispatch } from 'app/store/store';
 
 import { Messages } from './DeleteServiceModal.messages';
-import { styles } from './DeleteServiceModal.styles';
 
 interface DeleteServiceModalProps {
   serviceId: string;
@@ -49,7 +48,7 @@ const DeleteServiceModal: React.FC<DeleteServiceModalProps> = ({ serviceId, serv
   };
 
   return (
-    <Modal isOpen={isOpen} title={Messages.title} onDismiss={handleDismiss} className={styles.Modal}>
+    <Modal isOpen={isOpen} title={Messages.title} onDismiss={handleDismiss}>
       <Alert title={Messages.warning} severity="warning" />
       <p data-testid="delete-service-description">{Messages.description(serviceName)}</p>
       <div>

From a13c2394476355441696d305d83436794be24500 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Tue, 18 Apr 2023 10:19:16 +0200
Subject: [PATCH 24/32] PMM-11148 Call onSucces when single service is deleted

---
 .../app/percona/inventory/Tabs/Services.tsx   |  1 +
 .../DeleteServiceModal.test.tsx               | 25 +++++++++++++++----
 .../DeleteServiceModal/DeleteServiceModal.tsx | 18 ++++++-------
 .../DeleteServiceModal.types.ts               |  7 ++++++
 4 files changed, 37 insertions(+), 14 deletions(-)
 create mode 100644 public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.types.ts

diff --git a/public/app/percona/inventory/Tabs/Services.tsx b/public/app/percona/inventory/Tabs/Services.tsx
index b3950696fdcb4..fbe1cadad1327 100644
--- a/public/app/percona/inventory/Tabs/Services.tsx
+++ b/public/app/percona/inventory/Tabs/Services.tsx
@@ -229,6 +229,7 @@ export const Services = () => {
               serviceName={actionItem.params.serviceName}
               isOpen={modalVisible}
               onCancel={onModalClose}
+              onSuccess={onDeleteSuccess}
             />
           ) : (
             <DeleteServicesModal
diff --git a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.test.tsx b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.test.tsx
index 2c5077f78040a..c58d4a9ddd74f 100644
--- a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.test.tsx
+++ b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.test.tsx
@@ -8,6 +8,8 @@ import { configureStore } from 'app/store/configureStore';
 import DeleteServiceModal from './DeleteServiceModal';
 
 const cancelFn = jest.fn();
+const successFn = jest.fn();
+const removeServiceActionSpy = jest.spyOn(ServicesReducer, 'removeServiceAction');
 
 jest.mock('app/percona/inventory/Inventory.service');
 jest.mock('app/percona/shared/services/services/Services.service');
@@ -15,13 +17,21 @@ jest.mock('app/percona/shared/services/services/Services.service');
 const renderDefaults = (isOpen = true) =>
   render(
     <Provider store={configureStore()}>
-      <DeleteServiceModal onCancel={cancelFn} isOpen={isOpen} serviceId="service_id" serviceName="service_name" />
+      <DeleteServiceModal
+        onCancel={cancelFn}
+        onSuccess={successFn}
+        isOpen={isOpen}
+        serviceId="service_id"
+        serviceName="service_name"
+      />
     </Provider>
   );
 
 describe('DeleteServiceModal::', () => {
   beforeEach(() => {
+    removeServiceActionSpy.mockClear();
     cancelFn.mockClear();
+    successFn.mockClear();
   });
 
   it("doesn't render if not opened", () => {
@@ -44,8 +54,6 @@ describe('DeleteServiceModal::', () => {
   });
 
   it('calls delete', () => {
-    const removeServiceActionSpy = jest.spyOn(ServicesReducer, 'removeServiceAction');
-
     renderDefaults();
 
     const confirmButton = screen.getByTestId('delete-service-confirm');
@@ -57,9 +65,16 @@ describe('DeleteServiceModal::', () => {
     });
   });
 
-  it('calls delete with force mode', async () => {
-    const removeServiceActionSpy = jest.spyOn(ServicesReducer, 'removeServiceAction');
+  it('call on success after deletion', async () => {
+    renderDefaults();
 
+    const confirmButton = screen.getByTestId('delete-service-confirm');
+    fireEvent.click(confirmButton);
+
+    await waitFor(() => expect(successFn).toHaveBeenCalled());
+  });
+
+  it('calls delete with force mode', async () => {
     renderDefaults();
 
     const forceModeCheck = screen.getByTestId('delete-service-force-mode');
diff --git a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx
index 0cf5b3c7bd67c..a171d38ca6933 100644
--- a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx
+++ b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx
@@ -9,15 +9,15 @@ import { isApiCancelError } from 'app/percona/shared/helpers/api';
 import { useAppDispatch } from 'app/store/store';
 
 import { Messages } from './DeleteServiceModal.messages';
+import { DeleteServiceModalProps } from './DeleteServiceModal.types';
 
-interface DeleteServiceModalProps {
-  serviceId: string;
-  serviceName: string;
-  isOpen: boolean;
-  onCancel: () => void;
-}
-
-const DeleteServiceModal: React.FC<DeleteServiceModalProps> = ({ serviceId, serviceName, isOpen, onCancel }) => {
+const DeleteServiceModal: React.FC<DeleteServiceModalProps> = ({
+  serviceId,
+  serviceName,
+  isOpen,
+  onCancel,
+  onSuccess,
+}) => {
   const [forceModeActive, setForceActive] = useState(false);
   const dispatch = useAppDispatch();
 
@@ -33,7 +33,7 @@ const DeleteServiceModal: React.FC<DeleteServiceModalProps> = ({ serviceId, serv
       appEvents.emit(AppEvents.alertSuccess, [Messages.success(serviceName)]);
 
       setForceActive(false);
-      onCancel();
+      onSuccess();
     } catch (e) {
       if (isApiCancelError(e)) {
         return;
diff --git a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.types.ts b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.types.ts
new file mode 100644
index 0000000000000..0c95ba83539ee
--- /dev/null
+++ b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.types.ts
@@ -0,0 +1,7 @@
+export interface DeleteServiceModalProps {
+  serviceId: string;
+  serviceName: string;
+  isOpen: boolean;
+  onCancel: () => void;
+  onSuccess: () => void;
+}

From 101f1e4ff3eb827e91899f671463883aa2127017 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Tue, 18 Apr 2023 10:51:08 +0200
Subject: [PATCH 25/32] PMM-11148 Import FC directly

---
 .../DeleteServiceModal/DeleteServiceModal.tsx          | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx
index a171d38ca6933..254c4eb6dee31 100644
--- a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx
+++ b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx
@@ -1,5 +1,5 @@
 import { logger } from '@percona/platform-core';
-import React, { useState } from 'react';
+import React, { FC, useState } from 'react';
 
 import { AppEvents } from '@grafana/data';
 import { Alert, Button, Checkbox, Modal } from '@grafana/ui';
@@ -11,13 +11,7 @@ import { useAppDispatch } from 'app/store/store';
 import { Messages } from './DeleteServiceModal.messages';
 import { DeleteServiceModalProps } from './DeleteServiceModal.types';
 
-const DeleteServiceModal: React.FC<DeleteServiceModalProps> = ({
-  serviceId,
-  serviceName,
-  isOpen,
-  onCancel,
-  onSuccess,
-}) => {
+const DeleteServiceModal: FC<DeleteServiceModalProps> = ({ serviceId, serviceName, isOpen, onCancel, onSuccess }) => {
   const [forceModeActive, setForceActive] = useState(false);
   const dispatch = useAppDispatch();
 

From f3384e13641b5bd1fbee1431d08db02653c1fe18 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Mon, 12 Jun 2023 16:14:11 +0200
Subject: [PATCH 26/32] PMM-11148 Fix spacing

---
 public/app/percona/inventory/Tabs/Tabs.styles.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/public/app/percona/inventory/Tabs/Tabs.styles.ts b/public/app/percona/inventory/Tabs/Tabs.styles.ts
index 4687a7667cd51..46502f4b42a61 100644
--- a/public/app/percona/inventory/Tabs/Tabs.styles.ts
+++ b/public/app/percona/inventory/Tabs/Tabs.styles.ts
@@ -43,6 +43,10 @@ export const getStyles = ({ spacing }: GrafanaTheme2) => ({
     margin-top: ${spacing(4)};
     display: flex;
 
+    span {
+      white-space: pre;
+    }
+
     & > span:first-child {
       max-width: 70%;
       overflow: hidden;

From 28586dd729285f41121cbd1de6e4c41760492bd4 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Mon, 12 Jun 2023 16:16:31 +0200
Subject: [PATCH 27/32] PMM-11148 Fix errors from component library integration

---
 .../percona/edit-instance/EditInstance.tsx    |  2 +-
 public/app/percona/inventory/Tabs/Nodes.tsx   |  4 +-
 .../app/percona/inventory/Tabs/Services.tsx   | 41 +------------------
 .../DeleteServiceModal/DeleteServiceModal.tsx |  2 +-
 .../DeleteServicesModal.test.tsx              |  4 +-
 5 files changed, 8 insertions(+), 45 deletions(-)

diff --git a/public/app/percona/edit-instance/EditInstance.tsx b/public/app/percona/edit-instance/EditInstance.tsx
index 333480d1b1530..4ed2bba3541f3 100644
--- a/public/app/percona/edit-instance/EditInstance.tsx
+++ b/public/app/percona/edit-instance/EditInstance.tsx
@@ -1,4 +1,3 @@
-import { logger } from '@percona/platform-core';
 import React, { FormEvent, useEffect, useState } from 'react';
 import { Form } from 'react-final-form';
 import { useHistory, useParams } from 'react-router-dom';
@@ -13,6 +12,7 @@ import { useAppDispatch } from 'app/store/store';
 import { Labels } from '../add-instance/components/AddRemoteInstance/FormParts';
 import { useCancelToken } from '../shared/components/hooks/cancelToken.hook';
 import { updateServiceAction } from '../shared/core/reducers/services';
+import { logger } from '../shared/helpers/logger';
 import { DbServicePayload } from '../shared/services/services/Services.types';
 
 import { EDIT_INSTANCE_DOCS_LINK, FETCH_SERVICE_CANCEL_TOKEN } from './EditInstance.constants';
diff --git a/public/app/percona/inventory/Tabs/Nodes.tsx b/public/app/percona/inventory/Tabs/Nodes.tsx
index 29ca68d2b00ed..e25bbdaa6eb05 100644
--- a/public/app/percona/inventory/Tabs/Nodes.tsx
+++ b/public/app/percona/inventory/Tabs/Nodes.tsx
@@ -53,7 +53,7 @@ export const NodesTab = () => {
         content: (
           <HorizontalGroup spacing="sm">
             <Icon name="trash-alt" />
-            <span className={styles.deleteItemTxtSpan}>{Messages.delete}</span>
+            <span className={styles.actionItemTxtSpan}>{Messages.delete}</span>
           </HorizontalGroup>
         ),
         action: () => {
@@ -62,7 +62,7 @@ export const NodesTab = () => {
         },
       },
     ],
-    [styles.deleteItemTxtSpan]
+    [styles.actionItemTxtSpan]
   );
 
   const columns = useMemo(
diff --git a/public/app/percona/inventory/Tabs/Services.tsx b/public/app/percona/inventory/Tabs/Services.tsx
index aca8e41de6359..054dc3013bb9e 100644
--- a/public/app/percona/inventory/Tabs/Services.tsx
+++ b/public/app/percona/inventory/Tabs/Services.tsx
@@ -2,10 +2,8 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Row } from 'react-table';
 
-import { AppEvents } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
 import { Badge, Button, HorizontalGroup, Icon, TagList, useStyles2 } from '@grafana/ui';
-import appEvents from 'app/core/app_events';
 import { OldPage } from 'app/core/components/Page/Page';
 import { stripServiceId } from 'app/percona/check/components/FailedChecksTab/FailedChecksTab.utils';
 import { Action } from 'app/percona/dbaas/components/MultipleActions';
@@ -15,11 +13,7 @@ import { ServiceIconWithText } from 'app/percona/shared/components/Elements/Serv
 import { ExtendedColumn, FilterFieldTypes, Table } from 'app/percona/shared/components/Elements/Table';
 import { useCancelToken } from 'app/percona/shared/components/hooks/cancelToken.hook';
 import { usePerconaNavModel } from 'app/percona/shared/components/hooks/perconaNavModel';
-import {
-  fetchActiveServiceTypesAction,
-  fetchServicesAction,
-  removeServicesAction,
-} from 'app/percona/shared/core/reducers/services';
+import { fetchActiveServiceTypesAction, fetchServicesAction } from 'app/percona/shared/core/reducers/services';
 import { getServices } from 'app/percona/shared/core/selectors';
 import { isApiCancelError } from 'app/percona/shared/helpers/api';
 import { getDashboardLinkForService } from 'app/percona/shared/helpers/getDashboardLinkForService';
@@ -212,39 +206,6 @@ export const Services = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const removeServices = useCallback(
-    async (forceMode) => {
-      const servicesToDelete = actionItem ? [actionItem] : selected.map((s) => s.original);
-
-      try {
-        const params = servicesToDelete.map((s) => ({
-          serviceId: s.serviceId,
-          force: forceMode,
-        }));
-        const successfullyDeleted = await dispatch(removeServicesAction({ services: params })).unwrap();
-
-        if (successfullyDeleted > 0) {
-          appEvents.emit(AppEvents.alertSuccess, [
-            Messages.services.servicesDeleted(successfullyDeleted, servicesToDelete.length),
-          ]);
-        }
-
-        if (actionItem) {
-          setActionItem(null);
-        } else {
-          setSelectedRows([]);
-        }
-        loadData();
-      } catch (e) {
-        if (isApiCancelError(e)) {
-          return;
-        }
-        logger.error(e);
-      }
-    },
-    [actionItem, dispatch, loadData, selected]
-  );
-
   const handleSelectionChange = useCallback((rows: Array<Row<FlattenService>>) => {
     setSelectedRows(rows);
   }, []);
diff --git a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx
index 254c4eb6dee31..4ef957aa70d57 100644
--- a/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx
+++ b/public/app/percona/inventory/components/DeleteServiceModal/DeleteServiceModal.tsx
@@ -1,4 +1,3 @@
-import { logger } from '@percona/platform-core';
 import React, { FC, useState } from 'react';
 
 import { AppEvents } from '@grafana/data';
@@ -6,6 +5,7 @@ import { Alert, Button, Checkbox, Modal } from '@grafana/ui';
 import { appEvents } from 'app/core/core';
 import { removeServiceAction, RemoveServiceParams } from 'app/percona/shared/core/reducers/services';
 import { isApiCancelError } from 'app/percona/shared/helpers/api';
+import { logger } from 'app/percona/shared/helpers/logger';
 import { useAppDispatch } from 'app/store/store';
 
 import { Messages } from './DeleteServiceModal.messages';
diff --git a/public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.test.tsx b/public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.test.tsx
index a9c99eae37623..41de1e4145ceb 100644
--- a/public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.test.tsx
+++ b/public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.test.tsx
@@ -7,6 +7,8 @@ import * as ServicesReducer from 'app/percona/shared/core/reducers/services/serv
 import { Service, ServiceStatus } from 'app/percona/shared/services/services/Services.types';
 import { configureStore } from 'app/store/configureStore';
 
+import { FlattenService } from '../../Inventory.types';
+
 import DeleteServiceModal from './DeleteServicesModal';
 
 const cancelFn = jest.fn();
@@ -60,7 +62,7 @@ const renderDefaults = (isOpen = true, services = servicesStub) =>
         onDismiss={cancelFn}
         isOpen={isOpen}
         onSuccess={successFn}
-        services={services as unknown as Array<Row<Service>>}
+        services={services as unknown as Array<Row<FlattenService>>}
       />
     </Provider>
   );

From b621a2b39fa797b850a188a209d3517e368476d6 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Tue, 13 Jun 2023 15:06:43 +0200
Subject: [PATCH 28/32] PMM-11148 Fix DeleteServicesModal tests

---
 .../DeleteServicesModal.test.tsx              | 40 +++++++++----------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.test.tsx b/public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.test.tsx
index 41de1e4145ceb..d4e885f77c446 100644
--- a/public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.test.tsx
+++ b/public/app/percona/inventory/components/DeleteServicesModal/DeleteServicesModal.test.tsx
@@ -4,7 +4,7 @@ import { Provider } from 'react-redux';
 import { Row } from 'react-table';
 
 import * as ServicesReducer from 'app/percona/shared/core/reducers/services/services';
-import { Service, ServiceStatus } from 'app/percona/shared/services/services/Services.types';
+import { ServiceStatus } from 'app/percona/shared/services/services/Services.types';
 import { configureStore } from 'app/store/configureStore';
 
 import { FlattenService } from '../../Inventory.types';
@@ -18,25 +18,23 @@ const removeServicesActionSpy = jest.spyOn(ServicesReducer, 'removeServicesActio
 jest.mock('app/percona/inventory/Inventory.service');
 jest.mock('app/percona/shared/services/services/Services.service');
 
-const serviceStub: Service = {
-  params: {
-    nodeId: 'Node #1',
-    nodeName: 'Node #1',
-    serviceId: 'Service #1',
-    serviceName: 'Service #1',
-    status: ServiceStatus.NA,
-  },
+const serviceStub: FlattenService = {
+  nodeId: 'Node #1',
+  nodeName: 'Node #1',
+  serviceId: 'Service #1',
+  serviceName: 'Service #1',
+  status: ServiceStatus.NA,
+  agentsStatus: 'N/A',
   type: 'external',
 };
 
-const serviceStub2: Service = {
-  params: {
-    nodeId: 'Node #2',
-    nodeName: 'Node #2',
-    serviceId: 'Service #2',
-    serviceName: 'Service #2',
-    status: ServiceStatus.NA,
-  },
+const serviceStub2: FlattenService = {
+  nodeId: 'Node #2',
+  nodeName: 'Node #2',
+  serviceId: 'Service #2',
+  serviceName: 'Service #2',
+  status: ServiceStatus.NA,
+  agentsStatus: 'N/A',
   type: 'external',
 };
 
@@ -101,7 +99,7 @@ describe('DeleteServicesModal::', () => {
     expect(removeServicesActionSpy).toHaveBeenCalledWith({
       services: [
         {
-          serviceId: serviceStub.params.serviceId,
+          serviceId: serviceStub.serviceId,
           force: false,
         },
       ],
@@ -117,11 +115,11 @@ describe('DeleteServicesModal::', () => {
     expect(removeServicesActionSpy).toHaveBeenCalledWith({
       services: [
         {
-          serviceId: serviceStub.params.serviceId,
+          serviceId: serviceStub.serviceId,
           force: false,
         },
         {
-          serviceId: serviceStub2.params.serviceId,
+          serviceId: serviceStub2.serviceId,
           force: false,
         },
       ],
@@ -140,7 +138,7 @@ describe('DeleteServicesModal::', () => {
     expect(removeServicesActionSpy).toHaveBeenCalledWith({
       services: [
         {
-          serviceId: serviceStub.params.serviceId,
+          serviceId: serviceStub.serviceId,
           force: true,
         },
       ],

From 97257a9f3b22721d8e75f68c8a7f8e460b3445d2 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Wed, 19 Jul 2023 11:59:39 +0200
Subject: [PATCH 29/32] PMM-11148 Use correct urls for services

---
 .../percona/shared/services/services/Services.service.ts    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/app/percona/shared/services/services/Services.service.ts b/public/app/percona/shared/services/services/Services.service.ts
index f88f550fc40d6..a39373c8a5b2d 100644
--- a/public/app/percona/shared/services/services/Services.service.ts
+++ b/public/app/percona/shared/services/services/Services.service.ts
@@ -23,12 +23,12 @@ export const ServicesService = {
     return api.post<{}, RemoveServiceBody>('/v1/inventory/Services/Remove', body, false, token);
   },
   updateService(body: UpdateServiceBody, token?: CancelToken) {
-    return api.post<{}, UpdateServiceBody>('/v1/inventory/Change', body, false, token);
+    return api.post<{}, UpdateServiceBody>('/v1/inventory/Services/Change', body, false, token);
   },
   addCustomLabels(body: AddCustomLabelsBody, token?: CancelToken) {
-    return api.post<{}, UpdateServiceBody>('/v1/inventory/CustomLabels/Add', body, false, token);
+    return api.post<{}, UpdateServiceBody>('/v1/inventory/Services/CustomLabels/Add', body, false, token);
   },
   removeCustomLabels(body: RemoveCustomLabelsBody, token?: CancelToken) {
-    return api.post<{}, UpdateServiceBody>('/v1/inventory/CustomLabels/Remove', body, false, token);
+    return api.post<{}, UpdateServiceBody>('/v1/inventory/Services/CustomLabels/Remove', body, false, token);
   },
 };

From ba3674a4e7e623f35a9435ec7ca28c3c2ebde13c Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Wed, 2 Aug 2023 15:25:43 +0200
Subject: [PATCH 30/32] PMM-11148 Use shortened docs link

---
 public/app/percona/edit-instance/EditInstance.constants.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/public/app/percona/edit-instance/EditInstance.constants.ts b/public/app/percona/edit-instance/EditInstance.constants.ts
index 2d764da2cb7fd..c3abe510c0cf7 100644
--- a/public/app/percona/edit-instance/EditInstance.constants.ts
+++ b/public/app/percona/edit-instance/EditInstance.constants.ts
@@ -1,3 +1,2 @@
 export const FETCH_SERVICE_CANCEL_TOKEN = 'fetchService';
-export const EDIT_INSTANCE_DOCS_LINK =
-  'https://docs.percona.com/percona-monitoring-and-management/get-started/roles-and-permissions/lbac.html#editing-labels-in-pmm';
+export const EDIT_INSTANCE_DOCS_LINK = 'https://per.co.na/editing_labels';

From 66372643d04331c8f02b5e86a5283f9afcd02713 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Wed, 16 Aug 2023 10:03:21 +0200
Subject: [PATCH 31/32] PMM-11148 Increase width for azure instance form

---
 .../AzureDiscovery/components/Credentials/Credentials.styles.ts  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/app/percona/add-instance/components/AzureDiscovery/components/Credentials/Credentials.styles.ts b/public/app/percona/add-instance/components/AzureDiscovery/components/Credentials/Credentials.styles.ts
index d1fd4d67e4952..8e555f7d16c1a 100644
--- a/public/app/percona/add-instance/components/AzureDiscovery/components/Credentials/Credentials.styles.ts
+++ b/public/app/percona/add-instance/components/AzureDiscovery/components/Credentials/Credentials.styles.ts
@@ -6,6 +6,7 @@ export const getStyles = ({ spacing }: GrafanaTheme) => ({
   instanceForm: css`
     padding: 0px;
     margin-bottom: ${spacing.sm};
+    width: 100%;
   `,
   searchPanel: css`
     display: flex;

From 3511995fd64b15cb0d74f9a206492665ec89a0be Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Tue, 22 Aug 2023 12:57:05 +0200
Subject: [PATCH 32/32] PMM-11148 Jump straight to add instance page & reorder

---
 .../components/AddInstance/AddInstance.tsx    | 11 ++-----
 public/app/percona/add-instance/panel.tsx     | 29 +++++++------------
 2 files changed, 13 insertions(+), 27 deletions(-)

diff --git a/public/app/percona/add-instance/components/AddInstance/AddInstance.tsx b/public/app/percona/add-instance/components/AddInstance/AddInstance.tsx
index 7f87cd7b97d42..19f5d4b9b95e0 100644
--- a/public/app/percona/add-instance/components/AddInstance/AddInstance.tsx
+++ b/public/app/percona/add-instance/components/AddInstance/AddInstance.tsx
@@ -17,12 +17,7 @@ export const SelectInstance: FC<SelectInstanceProps> = ({ type, isSelected, icon
   const styles = useStyles2(getStyles);
 
   return (
-    <Card
-      data-testid={`${type}-instance`}
-      isSelected={isSelected}
-      onClick={selectInstanceType(type)}
-      className={styles.InstanceCard}
-    >
+    <Card data-testid={`${type}-instance`} onClick={selectInstanceType(type)} className={styles.InstanceCard}>
       <Card.Heading>{title}</Card.Heading>
       <Card.Description>{Messages.titles.addInstance}</Card.Description>
       <Card.Figure>
@@ -36,12 +31,12 @@ export const AddInstance: FC<AddInstanceProps> = ({ selectedInstanceType, onSele
   const styles2 = useStyles2(getStyles);
   const instanceList = useMemo<InstanceListItem[]>(
     () => [
-      { type: Databases.postgresql, title: Messages.titles.postgresql, icon: 'percona-database-postgresql' },
+      { type: InstanceTypesExtra.rds, title: Messages.titles.rds },
       { type: Databases.mysql, title: Messages.titles.mysql, icon: 'percona-database-mysql' },
       { type: Databases.mongodb, title: Messages.titles.mongodb, icon: 'percona-database-mongodb' },
+      { type: Databases.postgresql, title: Messages.titles.postgresql, icon: 'percona-database-postgresql' },
       { type: Databases.proxysql, title: Messages.titles.proxysql, icon: 'percona-database-proxysql' },
       { type: Databases.haproxy, title: Messages.titles.haproxy, icon: 'percona-database-haproxy' },
-      { type: InstanceTypesExtra.rds, title: Messages.titles.rds },
       { type: InstanceTypesExtra.external, title: Messages.titles.external },
       { type: InstanceTypesExtra.azure, title: Messages.titles.azure, isHidden: !showAzure },
     ],
diff --git a/public/app/percona/add-instance/panel.tsx b/public/app/percona/add-instance/panel.tsx
index 56914908f7650..7551a91a16b28 100644
--- a/public/app/percona/add-instance/panel.tsx
+++ b/public/app/percona/add-instance/panel.tsx
@@ -37,7 +37,6 @@ const AddInstancePanel = () => {
   const [selectedInstance, selectInstance] = useState<InstanceAvailable>({
     type: availableInstanceTypes.includes(instanceType as AvailableTypes) ? instanceType : '',
   });
-  const [formName, setFormName] = useState(instanceType ? ADD_INSTANCE_FORM_NAME : '');
   const [showSelection, setShowSelection] = useState(!instanceType);
   const [submitting, setSubmitting] = useState(false);
   const history = useHistory();
@@ -77,7 +76,7 @@ const AddInstancePanel = () => {
     [showSelection, selectedInstance]
   );
 
-  const handleCancel: MouseEventHandler = () => {
+  const handleCancel: MouseEventHandler = (e) => {
     if (showSelection) {
       history.push('/inventory/services');
     } else {
@@ -85,17 +84,12 @@ const AddInstancePanel = () => {
     }
     selectInstance({ type: '' });
     setShowSelection(true);
-    setFormName('');
   };
 
-  const handleShowConfiguration: MouseEventHandler = (e) => {
+  const handleSelectInstance = (instance: InstanceAvailable) => {
+    history.push('/add-instance/' + instance.type);
+    selectInstance(instance);
     setShowSelection(false);
-    history.push('/add-instance/' + selectedInstance.type);
-
-    if (showSelection) {
-      e.preventDefault();
-      setFormName(ADD_INSTANCE_FORM_NAME);
-    }
   };
 
   return (
@@ -107,14 +101,11 @@ const AddInstancePanel = () => {
         <ToolbarButton onClick={handleCancel}>
           {showSelection ? Messages.selectionStep.cancel : Messages.configurationStep.cancel}
         </ToolbarButton>
-        <ToolbarButton
-          form={formName}
-          disabled={!selectedInstance.type || submitting}
-          variant="primary"
-          onClick={handleShowConfiguration}
-        >
-          {submitLabel}
-        </ToolbarButton>
+        {!showSelection && (
+          <ToolbarButton form={ADD_INSTANCE_FORM_NAME} disabled={submitting} variant="primary">
+            {submitLabel}
+          </ToolbarButton>
+        )}
       </PageToolbar>
       <Page.Contents className={styles.page}>
         <FeatureLoader>
@@ -122,7 +113,7 @@ const AddInstancePanel = () => {
             <AddInstance
               showAzure={!!azureDiscoverEnabled}
               selectedInstanceType={selectedInstance}
-              onSelectInstanceType={selectInstance}
+              onSelectInstanceType={handleSelectInstance}
             />
           ) : (
             <InstanceForm />