[Synthetics] Remove buffer usage

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]);
 

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,

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;
 

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'
     );
   });
 });

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"
         />

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>
       ),
     },
     {

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;