Fix: reverted back to import * as module instead of using namespaces (#23069)

* Removed namespace declaration to prevent issues with external plugins.

* fixed imports and tests.

packages/grafana-data/src/datetime/datemath.test.ts

@@ -1,7 +1,7 @@
 import sinon, { SinonFakeTimers } from 'sinon';
 import each from 'lodash/each';
 
-import { dateMath } from './datemath';
+import * as dateMath from './datemath';
 import { dateTime, DurationUnit, DateTime } from './moment_wrapper';
 
 describe('DateMath', () => {

packages/grafana-data/src/datetime/datemath.ts

@@ -5,8 +5,6 @@ import { TimeZone } from '../types/index';
 
 const units: DurationUnit[] = ['y', 'M', 'w', 'd', 'h', 'm', 's'];
 
-// eslint-disable-next-line @typescript-eslint/no-namespace
-export namespace dateMath {
 export function isMathString(text: string | DateTime | Date): boolean {
   if (!text) {
     return false;
@@ -162,4 +160,3 @@ export namespace dateMath {
   }
   return dateTime;
 }
-}

packages/grafana-data/src/datetime/index.ts

@@ -1,6 +1,7 @@
 // Names are too general to export globally
-export { dateMath } from './datemath';
+import * as dateMath from './datemath';
-export { rangeUtil } from './rangeutil';
+import * as rangeUtil from './rangeutil';
 export * from './moment_wrapper';
 export * from './timezones';
 export * from './formats';
+export { dateMath, rangeUtil };

packages/grafana-data/src/datetime/rangeutil.ts

@@ -3,11 +3,9 @@ import groupBy from 'lodash/groupBy';
 
 import { RawTimeRange } from '../types/time';
 
-import { dateMath } from './datemath';
+import * as dateMath from './datemath';
 import { isDateTime, DateTime } from './moment_wrapper';
 
-// eslint-disable-next-line @typescript-eslint/no-namespace
-export namespace rangeUtil {
 const spans: { [key: string]: { display: string; section?: number } } = {
   s: { display: 'second' },
   m: { display: 'minute' },
@@ -182,4 +180,3 @@ export namespace rangeUtil {
   const info = describeTextRange(value);
   return info.invalid !== true;
 };
-}

packages/grafana-data/src/types/appEvents.ts

@@ -5,11 +5,8 @@ export interface AppEvent<T> {
   payload?: T;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-namespace
-export namespace AppEvents {
 export type AlertPayload = [string, string?];
 
 export const alertSuccess = eventFactory<AlertPayload>('alert-success');
 export const alertWarning = eventFactory<AlertPayload>('alert-warning');
 export const alertError = eventFactory<AlertPayload>('alert-error');
-}

packages/grafana-data/src/types/index.ts

@@ -24,5 +24,9 @@ export * from './theme';
 export * from './orgs';
 export * from './flot';
 
-export { AppEvent, AppEvents } from './appEvents';
+import * as AppEvents from './appEvents';
-export { PanelEvents } from './panelEvents';
+import { AppEvent } from './appEvents';
+export { AppEvent, AppEvents };
+
+import * as PanelEvents from './panelEvents';
+export { PanelEvents };

packages/grafana-data/src/types/panelEvents.ts

@@ -2,8 +2,6 @@ import { eventFactory } from './utils';
 import { DataQueryError, DataQueryResponseData } from './datasource';
 import { AngularPanelMenuItem } from './panel';
 
-// eslint-disable-next-line @typescript-eslint/no-namespace
-export namespace PanelEvents {
 /** Payloads */
 export interface PanelChangeViewPayload {
   fullscreen?: boolean;
@@ -26,4 +24,3 @@ export namespace PanelEvents {
 export const panelTeardown = eventFactory('panel-teardown');
 export const render = eventFactory<any>('render');
 export const viewModeChanged = eventFactory('view-mode-changed');
-}

packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx

@@ -2,7 +2,7 @@ import React, { ChangeEvent } from 'react';
 import { HorizontalGroup } from '../Layout/Layout';
 import Forms from '../Forms';
 import { MappingType, RangeMap, ValueMap, ValueMapping } from '@grafana/data';
-import { styleMixins } from '../../themes/mixins';
+import * as styleMixins from '../../themes/mixins';
 import { useTheme } from '../../themes';
 import { FieldConfigItemHeaderTitle } from '../FieldConfigs/FieldConfigItemHeaderTitle';
 

packages/grafana-ui/src/themes/index.ts

@@ -3,4 +3,6 @@ import { getTheme, mockTheme } from './getTheme';
 import { selectThemeVariant } from './selectThemeVariant';
 export { stylesFactory } from './stylesFactory';
 export { ThemeContext, withTheme, mockTheme, getTheme, selectThemeVariant, useTheme, mockThemeContext };
-export { styleMixins } from './mixins';
+
+import * as styleMixins from './mixins';
+export { styleMixins };

packages/grafana-ui/src/themes/mixins.ts

@@ -3,8 +3,6 @@ import { selectThemeVariant } from './selectThemeVariant';
 import { css } from 'emotion';
 import { stylesFactory } from './stylesFactory';
 
-// eslint-disable-next-line @typescript-eslint/no-namespace
-export namespace styleMixins {
 export function cardChrome(theme: GrafanaTheme): string {
   if (theme.isDark) {
     return `
@@ -98,4 +96,3 @@ export namespace styleMixins {
     `,
   };
 });
-}

packages/grafana-ui/src/utils/dom.ts

@@ -1,5 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-namespace
-export namespace DOMUtil {
 // Node.closest() polyfill
 if ('Element' in window && !Element.prototype.closest) {
   Element.prototype.closest = function(this: any, s: string) {
@@ -41,4 +39,3 @@ export namespace DOMUtil {
   const offset = range.startOffset;
   return text!.substr(offset, 1);
 }
-}

packages/grafana-ui/src/utils/index.ts

@@ -6,5 +6,5 @@ export * from './tags';
 export * from './measureText';
 export { default as ansicolor } from './ansicolor';
 
-// Export with a namespace
+import * as DOMUtil from './dom'; // includes Element.closest polyfil
-export { DOMUtil } from './dom'; // includes Element.closest polyfil
+export { DOMUtil };