PluginExtensions: Returns a clone of moment objects in context (#77238)

* Fixed so we always return momentjs as UTC iso string.

* Creating a clone of the moment object instead of returing a string.

* fixed linting issue.

public/app/features/plugins/extensions/utils.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { type Unsubscribable } from 'rxjs';
 
-import { type PluginExtensionLinkConfig, PluginExtensionTypes } from '@grafana/data';
+import { type PluginExtensionLinkConfig, PluginExtensionTypes, dateTime } from '@grafana/data';
 import appEvents from 'app/core/app_events';
 import { ShowModalReactEvent } from 'app/types/events';
 
@@ -312,6 +312,16 @@ describe('Plugin Extensions / Utils', () => {
 
       expect(proxy.a()).toBe('testing');
     });
+
+    it('should return a clone of moment/datetime in context', () => {
+      const source = dateTime('2023-10-26T18:25:01Z');
+      const proxy = getReadOnlyProxy({
+        a: source,
+      });
+
+      expect(source.isSame(proxy.a)).toBe(true);
+      expect(source).not.toBe(proxy.a);
+    });
   });
 
   describe('getEventHelpers', () => {

public/app/features/plugins/extensions/utils.tsx

@@ -9,6 +9,8 @@ import {
   type PluginExtensionEventHelpers,
   PluginExtensionTypes,
   type PluginExtensionOpenModalOptions,
+  isDateTime,
+  dateTime,
 } from '@grafana/data';
 import { Modal } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
@@ -159,6 +161,13 @@ export function getReadOnlyProxy<T extends object>(obj: T): T {
 
       const value = Reflect.get(target, prop, receiver);
 
+      // This will create a clone of the date time object
+      // instead of creating a proxy because the underlying
+      // momentjs object needs to be able to mutate itself.
+      if (isDateTime(value)) {
+        return dateTime(value);
+      }
+
       if (isObject(value) || isArray(value)) {
         if (!cache.has(value)) {
           cache.set(value, getReadOnlyProxy(value));