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,9 +5,7 @@ import { TimeZone } from '../types/index';
 
 const units: DurationUnit[] = ['y', 'M', 'w', 'd', 'h', 'm', 's'];
 
-// eslint-disable-next-line @typescript-eslint/no-namespace
+export function isMathString(text: string | DateTime | Date): boolean {
-export namespace dateMath {
-  export function isMathString(text: string | DateTime | Date): boolean {
   if (!text) {
     return false;
   }
@@ -17,20 +15,20 @@ export namespace dateMath {
   } else {
     return false;
   }
-  }
+}
 
-  /**
+/**
  * Parses different types input to a moment instance. There is a specific formatting language that can be used
  * if text arg is string. See unit tests for examples.
  * @param text
  * @param roundUp See parseDateMath function.
  * @param timezone Only string 'utc' is acceptable here, for anything else, local timezone is used.
  */
-  export function parse(
+export function parse(
   text?: string | DateTime | Date | null,
   roundUp?: boolean,
   timezone?: TimeZone
-  ): DateTime | undefined {
+): DateTime | undefined {
   if (!text) {
     return undefined;
   }
@@ -72,14 +70,14 @@ export namespace dateMath {
 
     return parseDateMath(mathString, time, roundUp);
   }
-  }
+}
 
-  /**
+/**
  * Checks if text is a valid date which in this context means that it is either a Moment instance or it can be parsed
  * by parse function. See parse function to see what is considered acceptable.
  * @param text
  */
-  export function isValid(text: string | DateTime): boolean {
+export function isValid(text: string | DateTime): boolean {
   const date = parse(text);
   if (!date) {
     return false;
@@ -90,16 +88,16 @@ export namespace dateMath {
   }
 
   return false;
-  }
+}
 
-  /**
+/**
  * Parses math part of the time string and shifts supplied time according to that math. See unit tests for examples.
  * @param mathString
  * @param time
  * @param roundUp If true it will round the time to endOf time unit, otherwise to startOf time unit.
  */
-  // TODO: Had to revert Andrejs `time: moment.Moment` to `time: any`
+// TODO: Had to revert Andrejs `time: moment.Moment` to `time: any`
-  export function parseDateMath(mathString: string, time: any, roundUp?: boolean): DateTime | undefined {
+export function parseDateMath(mathString: string, time: any, roundUp?: boolean): DateTime | undefined {
   const strippedMathString = mathString.replace(/\s/g, '');
   const dateTime = time;
   let i = 0;
@@ -161,5 +159,4 @@ 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,12 +3,10 @@ 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
+const spans: { [key: string]: { display: string; section?: number } } = {
-export namespace rangeUtil {
-  const spans: { [key: string]: { display: string; section?: number } } = {
   s: { display: 'second' },
   m: { display: 'minute' },
   h: { display: 'hour' },
@@ -16,9 +14,9 @@ export namespace rangeUtil {
   w: { display: 'week' },
   M: { display: 'month' },
   y: { display: 'year' },
-  };
+};
 
-  const rangeOptions = [
+const rangeOptions = [
   { from: 'now/d', to: 'now/d', display: 'Today', section: 2 },
   { from: 'now/d', to: 'now', display: 'Today so far', section: 2 },
   { from: 'now/w', to: 'now/w', display: 'This week', section: 2 },
@@ -61,16 +59,16 @@ export namespace rangeUtil {
   { from: 'now-1y', to: 'now', display: 'Last 1 year', section: 0 },
   { from: 'now-2y', to: 'now', display: 'Last 2 years', section: 0 },
   { from: 'now-5y', to: 'now', display: 'Last 5 years', section: 0 },
-  ];
+];
 
-  const absoluteFormat = 'YYYY-MM-DD HH:mm:ss';
+const absoluteFormat = 'YYYY-MM-DD HH:mm:ss';
 
-  const rangeIndex: any = {};
+const rangeIndex: any = {};
-  each(rangeOptions, (frame: any) => {
+each(rangeOptions, (frame: any) => {
   rangeIndex[frame.from + ' to ' + frame.to] = frame;
-  });
+});
 
-  export function getRelativeTimesList(timepickerSettings: any, currentDisplay: any) {
+export function getRelativeTimesList(timepickerSettings: any, currentDisplay: any) {
   const groups = groupBy(rangeOptions, (option: any) => {
     option.active = option.display === currentDisplay;
     return option.section;
@@ -84,19 +82,19 @@ export namespace rangeUtil {
   // });
 
   return groups;
-  }
+}
 
-  function formatDate(date: DateTime) {
+function formatDate(date: DateTime) {
   return date.format(absoluteFormat);
-  }
+}
 
-  // handles expressions like
+// handles expressions like
-  // 5m
+// 5m
-  // 5m to now/d
+// 5m to now/d
-  // now/d to now
+// now/d to now
-  // now/d
+// now/d
-  // if no to <expr> then to now is assumed
+// if no to <expr> then to now is assumed
-  export function describeTextRange(expr: any) {
+export function describeTextRange(expr: any) {
   const isLast = expr.indexOf('+') !== 0;
   if (expr.indexOf('now') === -1) {
     expr = (isLast ? 'now-' : 'now') + expr;
@@ -132,9 +130,9 @@ export namespace rangeUtil {
   }
 
   return opt;
-  }
+}
 
-  /**
+/**
  * Use this function to get a properly formatted string representation of a {@link @grafana/data:RawTimeRange | range}.
  *
  * @example
@@ -146,7 +144,7 @@ export namespace rangeUtil {
  * @param range - a time range (usually specified by the TimePicker)
  * @alpha
  */
-  export function describeTimeRange(range: RawTimeRange): string {
+export function describeTimeRange(range: RawTimeRange): string {
   const option = rangeIndex[range.from.toString() + ' to ' + range.to.toString()];
   if (option) {
     return option.display;
@@ -172,14 +170,13 @@ export namespace rangeUtil {
   }
 
   return range.from.toString() + ' to ' + range.to.toString();
-  }
+}
 
-  export const isValidTimeSpan = (value: string) => {
+export const isValidTimeSpan = (value: string) => {
   if (value.indexOf('$') === 0 || value.indexOf('+$') === 0) {
     return true;
   }
 
   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 type AlertPayload = [string, string?];
-export namespace AppEvents {
-  export type AlertPayload = [string, string?];
 
-  export const alertSuccess = eventFactory<AlertPayload>('alert-success');
+export const alertSuccess = eventFactory<AlertPayload>('alert-success');
-  export const alertWarning = eventFactory<AlertPayload>('alert-warning');
+export const alertWarning = eventFactory<AlertPayload>('alert-warning');
-  export const alertError = eventFactory<AlertPayload>('alert-error');
+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,28 +2,25 @@ import { eventFactory } from './utils';
 import { DataQueryError, DataQueryResponseData } from './datasource';
 import { AngularPanelMenuItem } from './panel';
 
-// eslint-disable-next-line @typescript-eslint/no-namespace
+/** Payloads */
-export namespace PanelEvents {
+export interface PanelChangeViewPayload {
-  /** Payloads */
-  export interface PanelChangeViewPayload {
   fullscreen?: boolean;
   edit?: boolean;
   panelId?: number;
   toggle?: boolean;
-  }
-
-  /** Events */
-  export const refresh = eventFactory('refresh');
-  export const componentDidMount = eventFactory('component-did-mount');
-  export const dataError = eventFactory<DataQueryError>('data-error');
-  export const dataReceived = eventFactory<DataQueryResponseData[]>('data-received');
-  export const dataSnapshotLoad = eventFactory<DataQueryResponseData[]>('data-snapshot-load');
-  export const editModeInitialized = eventFactory('init-edit-mode');
-  export const initPanelActions = eventFactory<AngularPanelMenuItem[]>('init-panel-actions');
-  export const panelChangeView = eventFactory<PanelChangeViewPayload>('panel-change-view');
-  export const panelInitialized = eventFactory('panel-initialized');
-  export const panelSizeChanged = eventFactory('panel-size-changed');
-  export const panelTeardown = eventFactory('panel-teardown');
-  export const render = eventFactory<any>('render');
-  export const viewModeChanged = eventFactory('view-mode-changed');
 }
+
+/** Events */
+export const refresh = eventFactory('refresh');
+export const componentDidMount = eventFactory('component-did-mount');
+export const dataError = eventFactory<DataQueryError>('data-error');
+export const dataReceived = eventFactory<DataQueryResponseData[]>('data-received');
+export const dataSnapshotLoad = eventFactory<DataQueryResponseData[]>('data-snapshot-load');
+export const editModeInitialized = eventFactory('init-edit-mode');
+export const initPanelActions = eventFactory<AngularPanelMenuItem[]>('init-panel-actions');
+export const panelChangeView = eventFactory<PanelChangeViewPayload>('panel-change-view');
+export const panelInitialized = eventFactory('panel-initialized');
+export const panelSizeChanged = eventFactory('panel-size-changed');
+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,9 +3,7 @@ import { selectThemeVariant } from './selectThemeVariant';
 import { css } from 'emotion';
 import { stylesFactory } from './stylesFactory';
 
-// eslint-disable-next-line @typescript-eslint/no-namespace
+export function cardChrome(theme: GrafanaTheme): string {
-export namespace styleMixins {
-  export function cardChrome(theme: GrafanaTheme): string {
   if (theme.isDark) {
     return `
        background: linear-gradient(135deg, ${theme.colors.dark8}, ${theme.colors.dark6});
@@ -25,9 +23,9 @@ export namespace styleMixins {
        box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
        border-radius: ${theme.border.radius.md};
     `;
-  }
+}
 
-  export function listItem(theme: GrafanaTheme): string {
+export function listItem(theme: GrafanaTheme): string {
   if (theme.isDark) {
     return `
        background: ${theme.colors.dark7};
@@ -47,9 +45,9 @@ export namespace styleMixins {
        box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
        border-radius: ${theme.border.radius.md};
     `;
-  }
+}
 
-  export const panelEditorNestedListStyles = stylesFactory((theme: GrafanaTheme) => {
+export const panelEditorNestedListStyles = stylesFactory((theme: GrafanaTheme) => {
   const borderColor = selectThemeVariant(
     {
       light: theme.colors.gray85,
@@ -97,5 +95,4 @@ export namespace styleMixins {
       padding: ${theme.spacing.xs} ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm};
     `,
   };
-  });
+});
-}

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

@@ -1,7 +1,5 @@
-// eslint-disable-next-line @typescript-eslint/no-namespace
+// Node.closest() polyfill
-export namespace DOMUtil {
+if ('Element' in window && !Element.prototype.closest) {
-  // Node.closest() polyfill
-  if ('Element' in window && !Element.prototype.closest) {
   Element.prototype.closest = function(this: any, s: string) {
     const matches = (this.document || this.ownerDocument).querySelectorAll(s);
     let el = this;
@@ -15,9 +13,9 @@ export namespace DOMUtil {
     } while (i < 0 && el);
     return el;
   };
-  }
+}
 
-  export function getPreviousCousin(node: any, selector: string) {
+export function getPreviousCousin(node: any, selector: string) {
   let sibling = node.parentElement.previousSibling;
   let el;
   while (sibling) {
@@ -28,9 +26,9 @@ export namespace DOMUtil {
     sibling = sibling.previousSibling;
   }
   return undefined;
-  }
+}
 
-  export function getNextCharacter(global?: any) {
+export function getNextCharacter(global?: any) {
   const selection = (global || window).getSelection();
   if (!selection || !selection.anchorNode) {
     return null;
@@ -40,5 +38,4 @@ export namespace DOMUtil {
   const text = selection.anchorNode.textContent;
   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 };