From 03b740437d9fe331db6f602c201dd73a62903ee3 Mon Sep 17 00:00:00 2001
From: shahzad31 <shahzad.muhammad@elastic.co>
Date: Mon, 2 May 2022 14:05:15 +0200
Subject: [PATCH 1/2] Remove buffer ussage

---
 .../components/monitor_management/action_bar/action_bar.tsx | 2 +-
 .../monitor_management/monitor_config/use_monitor_name.ts   | 4 ++--
 .../components/monitor_management/monitor_list/actions.tsx  | 2 +-
 .../monitor_management/monitor_list/monitor_list.tsx        | 6 +-----
 .../legacy_uptime/pages/monitor_management/edit_monitor.tsx | 2 +-
 5 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx
index 3bd6be5eb9750..80e614eb4d77f 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx
@@ -65,7 +65,7 @@ export const ActionBar = ({
     }
     return setMonitor({
       monitor,
-      id: monitorId ? Buffer.from(monitorId, 'base64').toString('utf8') : undefined,
+      id: monitorId,
     });
   }, [monitor, monitorId, isValid, isSaving]);
 
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_config/use_monitor_name.ts b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_config/use_monitor_name.ts
index c72c266bb6939..e8d3848856a2b 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_config/use_monitor_name.ts
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_config/use_monitor_name.ts
@@ -8,8 +8,8 @@
 import { useEffect, useState } from 'react';
 import { useFetcher } from '@kbn/observability-plugin/public';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { useParams } from 'react-router-dom';
 import { syntheticsMonitorType } from '../../../../../common/types/saved_objects';
-import { useMonitorId } from '../../../hooks';
 
 interface AggsResponse {
   monitorNames: {
@@ -22,7 +22,7 @@ interface AggsResponse {
 export const useMonitorName = ({ search = '' }: { search?: string }) => {
   const [values, setValues] = useState<string[]>([]);
 
-  const monitorId = useMonitorId();
+  const { monitorId } = useParams<{ monitorId: string }>();
 
   const { savedObjects } = useKibana().services;
 
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_list/actions.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_list/actions.tsx
index a6fa489be89ca..ddd0d0cc0a63e 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_list/actions.tsx
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_list/actions.tsx
@@ -45,7 +45,7 @@ export const Actions = ({ id, name, onUpdate, isDisabled, errorSummaries, monito
         <EuiButtonIcon
           isDisabled={isDisabled}
           iconType="pencil"
-          href={`${basePath}/app/uptime/edit-monitor/${Buffer.from(id, 'utf8').toString('base64')}`}
+          href={`${basePath}/app/uptime/edit-monitor/${id}`}
           aria-label={EDIT_MONITOR_LABEL}
           data-test-subj="monitorManagementEditMonitor"
         />
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_list/monitor_list.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_list/monitor_list.tsx
index 37a23bdcff83b..fbd21fe09c1ec 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_list/monitor_list.tsx
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_list/monitor_list.tsx
@@ -120,11 +120,7 @@ export const MonitorManagementList = ({
       }),
       sortable: true,
       render: (name: string, { id }: EncryptedSyntheticsMonitorWithId) => (
-        <EuiLink
-          href={`${basePath}/app/uptime/monitor/${Buffer.from(id, 'utf8').toString('base64')}`}
-        >
-          {name}
-        </EuiLink>
+        <EuiLink href={`${basePath}/app/uptime/monitor/${btoa(id)}`}>{name}</EuiLink>
       ),
     },
     {
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/pages/monitor_management/edit_monitor.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/pages/monitor_management/edit_monitor.tsx
index cb92de595d378..d0397de8be960 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/pages/monitor_management/edit_monitor.tsx
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/pages/monitor_management/edit_monitor.tsx
@@ -31,7 +31,7 @@ export const EditMonitorPage: React.FC = () => {
   const { data, status } = useFetcher<
     Promise<DecryptedSyntheticsMonitorSavedObject | undefined>
   >(() => {
-    return getMonitor({ id: Buffer.from(monitorId, 'base64').toString('utf8') });
+    return getMonitor({ id: monitorId });
   }, [monitorId]);
 
   const monitor = data?.attributes as MonitorFields;

From b751df0845ae25252f0984457e0c841116a4205d Mon Sep 17 00:00:00 2001
From: shahzad31 <shahzad.muhammad@elastic.co>
Date: Mon, 2 May 2022 14:49:48 +0200
Subject: [PATCH 2/2] update test

---
 .../monitor_config/use_monitor_name.test.tsx        | 13 +++++++++++--
 .../monitor_list/actions.test.tsx                   |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_config/use_monitor_name.test.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_config/use_monitor_name.test.tsx
index ccfc1312cbf25..04879cd0da65b 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_config/use_monitor_name.test.tsx
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_config/use_monitor_name.test.tsx
@@ -9,7 +9,16 @@ import { defaultCore, WrappedHelper } from '../../../lib/helper/rtl_helpers';
 import { renderHook } from '@testing-library/react-hooks';
 import { useMonitorName } from './use_monitor_name';
 
-import * as hooks from '../../../hooks/use_monitor';
+import * as reactRouter from 'react-router-dom';
+
+const mockRouter = {
+  ...reactRouter,
+};
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: jest.fn().mockReturnValue({}),
+}));
 
 describe('useMonitorName', () => {
   it('returns expected results', () => {
@@ -56,7 +65,7 @@ describe('useMonitorName', () => {
       },
     });
 
-    jest.spyOn(hooks, 'useMonitorId').mockReturnValue('test-id');
+    jest.spyOn(mockRouter, 'useParams').mockReturnValue({ monitorId: 'test-id' });
 
     const { result, waitForNextUpdate } = renderHook(() => useMonitorName({ search: 'Test' }), {
       wrapper: WrappedHelper,
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_list/actions.test.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_list/actions.test.tsx
index f60d54e9cb4f6..af2e54503d0b1 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_list/actions.test.tsx
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_list/actions.test.tsx
@@ -19,7 +19,7 @@ describe('<Actions />', () => {
 
     expect(screen.getByLabelText('Edit monitor')).toHaveAttribute(
       'href',
-      '/app/uptime/edit-monitor/dGVzdC1pZA=='
+      '/app/uptime/edit-monitor/test-id'
     );
   });
 });