Merge remote-tracking branch 'grafana/master' into all-data-as-table

* grafana/master:
  reuse deprecationWarning
  move to string.ts
  move stringToJsRegex
  minor storybook cleanup
  docs: update slack alert notification settings

packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx

@@ -8,7 +8,7 @@ import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
 import { UseState } from '../../utils/storybook/UseState';
 
 const BasicGreen = getColorDefinitionByName('green');
-const BasicBlue = getColorDefinitionByName('blue');
+const BasicRed = getColorDefinitionByName('red');
 const LightBlue = getColorDefinitionByName('light-blue');
 
 const NamedColorsPaletteStories = storiesOf('UI/ColorPicker/Palettes/NamedColorsPalette', module);
@@ -41,7 +41,7 @@ NamedColorsPaletteStories.add('Named colors swatch - support for named colors',
     'Selected color',
     {
       Green: BasicGreen.variants.dark,
-      Red: BasicBlue.variants.dark,
+      Red: BasicRed.variants.dark,
       'Light blue': LightBlue.variants.dark,
     },
     'red'

packages/grafana-ui/src/components/ColorPicker/warnAboutColorPickerPropsDeprecation.ts

@@ -1,9 +1,9 @@
-import propDeprecationWarning from '../../utils/propDeprecationWarning';
+import deprecationWarning from '../../utils/deprecationWarning';
 import { ColorPickerProps } from './ColorPickerPopover';
 
 export const warnAboutColorPickerPropsDeprecation = (componentName: string, props: ColorPickerProps) => {
   const { onColorChange } = props;
   if (onColorChange) {
-    propDeprecationWarning(componentName, 'onColorChange', 'onChange');
+    deprecationWarning(componentName, 'onColorChange', 'onChange');
   }
 };

packages/grafana-ui/src/components/DeleteButton/DeleteButton.story.tsx

@@ -1,24 +1,17 @@
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { DeleteButton } from './DeleteButton';
-
-const CenteredStory: FunctionComponent<{}> = ({ children }) => {
-  return (
-    <div
-      style={{
-        height: '100vh  ',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      {children}
-    </div>
-  );
-};
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { action } from '@storybook/addon-actions';
 
 storiesOf('UI/DeleteButton', module)
-  .addDecorator(story => <CenteredStory>{story()}</CenteredStory>)
+  .addDecorator(withCenteredStory)
   .add('default', () => {
-    return <DeleteButton onConfirm={() => {}} />;
+    return (
+      <DeleteButton
+        onConfirm={() => {
+          action('Delete Confirmed')('delete!');
+        }}
+      />
+    );
   });

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

@@ -0,0 +1,6 @@
+const deprecationWarning = (file: string, oldName: string, newName: string) => {
+  const message = `[Deprecation warning] ${file}: ${oldName} is deprecated. Use ${newName} instead`;
+  console.warn(message);
+};
+
+export default deprecationWarning;

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

@@ -2,4 +2,6 @@ export * from './processTimeSeries';
 export * from './valueFormats/valueFormats';
 export * from './colors';
 export * from './namedColorsPalette';
+export * from './string';
+export * from './deprecationWarning';
 export { getMappedValue } from './valueMappings';

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

@@ -1,6 +0,0 @@
-const propDeprecationWarning = (componentName: string, propName: string, newPropName: string) => {
-  const message = `[Deprecation warning] ${componentName}: ${propName} is deprecated. Use ${newPropName} instead`;
-  console.warn(message);
-};
-
-export default propDeprecationWarning;

packages/grafana-ui/src/utils/string.test.ts

@@ -0,0 +1,15 @@
+import { stringToJsRegex } from '@grafana/ui';
+
+describe('stringToJsRegex', () => {
+  it('should parse the valid regex value', () => {
+    const output = stringToJsRegex('/validRegexp/');
+    expect(output).toBeInstanceOf(RegExp);
+  });
+
+  it('should throw error on invalid regex value', () => {
+    const input = '/etc/hostname';
+    expect(() => {
+      stringToJsRegex(input);
+    }).toThrow();
+  });
+});

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

@@ -0,0 +1,13 @@
+export function stringToJsRegex(str: string): RegExp {
+  if (str[0] !== '/') {
+    return new RegExp('^' + str + '$');
+  }
+
+  const match = str.match(new RegExp('^/(.*?)/(g?i?m?y?)$'));
+
+  if (!match) {
+    throw new Error(`'${str}' is not a valid regular expression.`);
+  }
+
+  return new RegExp(match[1], match[2]);
+}