huge package update + sass support

grafana-plugin/.babelrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  presets: ['@babel/preset-env'],
+  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
+};

grafana-plugin/package.json

@@ -39,22 +39,39 @@
   "author": "Grafana Labs",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@grafana/data": "7.5.7",
-    "@grafana/runtime": "7.5.7",
-    "@grafana/toolkit": "7.5.7",
-    "@grafana/ui": "8.2.1",
-    "@types/dompurify": "^2.0.2",
-    "@types/lodash-es": "^4.17.3",
-    "@types/moment-timezone": "^0.5.12",
-    "@types/react-copy-to-clipboard": "^4.3.0",
-    "@types/react-responsive": "^8.0.2",
-    "@types/react-router-dom": "^5.1.5",
-    "@types/throttle-debounce": "^2.1.0",
-    "copy-webpack-plugin": "5.1.2",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.18.10",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
+    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
+    "@babel/plugin-syntax-decorators": "^7.18.6",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-react-constant-elements": "^7.18.12",
+    "@babel/plugin-transform-typescript": "^7.18.12",
+    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@grafana/data": "^9.1.1",
+    "@grafana/runtime": "^9.1.1",
+    "@grafana/toolkit": "^9.1.1",
+    "@grafana/ui": "^9.1.1",
+    "@types/dompurify": "^2.3.4",
+    "@types/lodash-es": "^4.17.6",
+    "@types/react-copy-to-clipboard": "^5.0.4",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-responsive": "^8.0.5",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/throttle-debounce": "^5.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "dompurify": "^2.3.12",
     "eslint-plugin-rulesdir": "^0.2.1",
+    "less-loader": "5.0.0",
     "lint-staged": "^10.2.11",
+    "lodash-es": "^4.17.21",
+    "moment-timezone": "^0.5.35",
     "plop": "^2.7.4",
-    "webpack-bundle-analyzer": "^4.4.2"
+    "ts-loader": "^9.3.1",
+    "webpack-bundle-analyzer": "^4.6.1"
   },
   "engines": {
     "node": ">=14"
@@ -63,12 +80,9 @@
     "@types/query-string": "^6.3.0",
     "change-case": "^4.1.1",
     "circular-dependency-plugin": "^5.2.2",
-    "dompurify": "^2.0.12",
     "eslint-plugin-import": "^2.25.4",
-    "lodash-es": "^4.17.15",
-    "mobx": "^5.13.0",
-    "mobx-react": "^6.1.1",
-    "moment-timezone": "^0.5.34",
+    "mobx": "5.13.0",
+    "mobx-react": "6.1.1",
     "rc-table": "^7.17.1",
     "react-copy-to-clipboard": "^5.0.2",
     "react-emoji-render": "^1.2.4",
@@ -76,6 +90,7 @@
     "react-router-dom": "^5.2.0",
     "react-sortable-hoc": "^1.11.0",
     "react-string-replace": "^0.4.4",
+    "sass-loader": "^13.0.2",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
     "throttle-debounce": "^2.1.0"

grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx

@@ -111,15 +111,6 @@ const AlertTemplatesForm = (props: AlertTemplatesFormProps) => {
     return groups;
   }, [filteredTemplatesToRender]);
 
-  const handleChangeActiveTemplate = useCallback(
-    (templateName) => {
-      const template = groups[activeGroup].find((template: Template) => template.name === templateName);
-
-      setActiveTemplate(template);
-    },
-    [groups, activeGroup]
-  );
-
   const getGroupByTemplateName = (templateName: string) => {
     Object.values(groups).find((group) => {
       const foundTemplate = group.find((obj: any) => {

grafana-plugin/src/components/Collapse/Collapse.tsx

@@ -15,6 +15,7 @@ interface CollapseProps {
   className?: string;
   contentClassName?: string;
   headerWithBackground?: boolean;
+  children?: any
 }
 
 const cx = cn.bind(styles);

grafana-plugin/src/components/PluginLink/PluginLink.tsx

@@ -11,6 +11,7 @@ interface PluginLinkProps extends LocationUpdate {
   disabled?: boolean;
   className?: string;
   wrap?: boolean;
+  children: any
 }
 
 const cx = cn.bind(styles);

grafana-plugin/src/components/Policy/PolicyNote.tsx

@@ -10,6 +10,7 @@ const cx = cn.bind(styles);
 
 interface PolicyNoteProps {
   type?: 'success' | 'info' | 'danger';
+  children?: any;
 }
 
 function getIcon(type: PolicyNoteProps['type']) {

grafana-plugin/src/components/SourceCode/SourceCode.tsx

@@ -12,6 +12,7 @@ const cx = cn.bind(styles);
 
 interface SourceCodeProps {
   noMaxHeight?: boolean;
+  children?: any
 }
 
 const SourceCode: FC<SourceCodeProps> = (props) => {

grafana-plugin/src/components/Tag/Tag.tsx

@@ -7,6 +7,7 @@ import styles from 'components/Tag/Tag.module.css';
 interface TagProps {
   color: string;
   className?: string;
+  children?: any
 }
 
 const cx = cn.bind(styles);

grafana-plugin/src/components/Text/Text.module.css

@@ -1,70 +0,0 @@
-.root {
-  display: inline;
-}
-
-.type_secondary {
-  color: var(--secondary-text-color);
-}
-
-.type_primary {
-  color: var(--primary-text-color);
-}
-
-.type_disabled {
-  color: var(--disabled-text-color);
-}
-
-.type_warning {
-  color: var(--warning-text-color);
-}
-
-.type_link {
-  color: var(--primary-text-link);
-  cursor: pointer;
-}
-
-.type_success {
-  color: #6ccf8e;
-}
-
-.strong {
-  font-weight: bold;
-}
-
-.underline {
-  text-decoration: underline;
-}
-
-.no-wrap {
-  white-space: nowrap;
-}
-
-.keyboard {
-  margin: 0 0.2em;
-  padding: 0.15em 0.4em 0.1em;
-  font-size: 90%;
-  background: hsla(0, 0%, 58.8%, 0.06);
-  border: solid hsla(0, 0%, 39.2%, 0.2);
-  border-width: 1px 1px 2px;
-  border-radius: 3px;
-}
-
-.link {
-  text-decoration: underline;
-}
-
-.size_small {
-  font-size: 12px;
-}
-
-.title {
-  margin: 0;
-}
-
-.icon-button {
-  margin-left: 4px;
-}
-
-.size_large {
-  font-size: 20px;
-}

grafana-plugin/src/components/Text/Text.module.scss

@@ -0,0 +1,61 @@
+.root {
+  display: inline;
+}
+
+.text {
+  &--primary {
+    color: var(--primary-text-color);
+  }
+  &--secondary {
+    color: var(--secondary-text-color);
+  }
+  &--disabled {
+    color: var(--disabled-text-color);
+  }
+  &--warning {
+    color: var(--warning-text-color);
+  }
+  &--link {
+    color: var(--primary-text-link);
+    text-decoration: underline;
+  }
+  &--success {
+    color: var(--green-5);
+  }
+
+  &--strong {
+    font-weight: bold;
+  }
+  &--underline {
+    text-decoration: underline;
+  }
+
+  &--smal {
+    font-size: 12px;
+  }
+  &--large {
+    font-size: 20px;
+  }
+}
+
+.no-wrap {
+  white-space: nowrap;
+}
+
+.keyboard {
+  margin: 0 0.2em;
+  padding: 0.15em 0.4em 0.1em;
+  font-size: 90%;
+  background: hsla(0, 0%, 58.8%, 0.06);
+  border: solid hsla(0, 0%, 39.2%, 0.2);
+  border-width: 1px 1px 2px;
+  border-radius: 3px;
+}
+
+.title {
+  margin: 0;
+}
+
+.icon-button {
+  margin-left: 4px;
+}

grafana-plugin/src/components/Text/Text.tsx

@@ -1,15 +1,12 @@
 import React, { FC, HTMLAttributes, ChangeEvent, useState, useCallback } from 'react';
 
-import { IconButton, Modal, Field, Input, HorizontalGroup, Button, Icon, VerticalGroup } from '@grafana/ui';
+import { IconButton, Modal, Input, HorizontalGroup, Button, VerticalGroup } from '@grafana/ui';
 import cn from 'classnames/bind';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
-import { TimelineProps } from 'components/Timeline/Timeline';
-import { TimelineItemProps } from 'components/Timeline/TimelineItem';
-import { useStore } from 'state/useStore';
 import { openNotification } from 'utils';
 
-import styles from './Text.module.css';
+import styles from './Text.module.scss';
 
 interface TextProps extends HTMLAttributes<HTMLElement> {
   type?: 'primary' | 'secondary' | 'disabled' | 'link' | 'success' | 'warning';
@@ -78,13 +75,13 @@ const Text: TextType = (props) => {
   return (
     <span
       onClick={onClick}
-      className={cx('root', className, {
-        [`type_${type}`]: true,
-        [`size_${size}`]: true,
-        strong,
-        underline,
-        keyboard,
+      className={cx('root', 'text', className, {
+        [`text--${type}`]: true,
+        [`text--${size}`]: true,
+        'text--strong': strong,
+        'text--underline': underline,
         'no-wrap': !wrap,
+        keyboard
       })}
     >
       {hidden ? PLACEHOLDER : children}

grafana-plugin/src/components/TimeRange/TimeRange.tsx

@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { HorizontalGroup, TimeOfDayPicker } from '@grafana/ui';
 import cn from 'classnames/bind';
-import { Moment } from 'moment';
 import moment from 'moment-timezone';
 
 import styles from './TimeRange.module.css';
@@ -39,7 +38,7 @@ function getMoments(from: string, to: string) {
   return [fromMoment, toMoment];
 }
 
-function getRangeStrings(from: Moment, to: Moment) {
+function getRangeStrings(from: moment.Moment, to: moment.Moment) {
   const fromString = from.clone().utc().format('HH:mm:00');
   const toString = to.clone().utc().format('HH:mm:00');
 
@@ -49,8 +48,10 @@ function getRangeStrings(from: Moment, to: Moment) {
 const TimeRange = (props: TimeRangeProps) => {
   const { className, from: f, to: t, onChange, disabled } = props;
 
-  const [from, setFrom] = useState<Moment>(getMoments(f, t)[0]);
-  const [to, setTo] = useState<Moment>(getMoments(f, t)[1]);
+  // @ts-ignore
+  const [from, setFrom] = useState<moment.Moment>(getMoments(f, t)[0]);
+  // @ts-ignore
+  const [to, setTo] = useState<moment.Moment>(getMoments(f, t)[1]);
 
   useEffect(() => {
     if (!f || !t) {
@@ -59,7 +60,7 @@ const TimeRange = (props: TimeRangeProps) => {
   }, []);
 
   const handleChangeFrom = useCallback(
-    (value: Moment) => {
+    (value: moment.Moment) => {
       setFrom(value);
 
       if (value.isSame(to, 'minute')) {
@@ -74,7 +75,7 @@ const TimeRange = (props: TimeRangeProps) => {
   );
 
   const handleChangeTo = useCallback(
-    (value: Moment) => {
+    (value: moment.Moment) => {
       setTo(value);
 
       if (value.isSame(from, 'minute')) {

grafana-plugin/src/components/Timeline/Timeline.tsx

@@ -10,6 +10,7 @@ const cx = cn.bind(styles);
 
 export interface TimelineProps {
   className?: string;
+  children?: any;
 }
 
 interface TimelineType extends React.FC<TimelineProps> {

grafana-plugin/src/components/Timeline/TimelineItem.tsx

@@ -12,6 +12,7 @@ export interface TimelineItemProps {
   color?: string;
   number?: number;
   badge?: number;
+  children?: any;
 }
 
 const TimelineItem: React.FC<TimelineItemProps> = (props) => {

grafana-plugin/src/components/VerticalTabsBar/VerticalTabsBar.tsx

@@ -41,6 +41,7 @@ export default VerticalTabsBar;
 
 interface TabProps {
   id: string;
+  children?: any
 }
 
 export const VerticalTab: FC<TabProps> = ({ children }) => {

grafana-plugin/src/containers/DefaultPageLayout/DefaultPageLayout.tsx

@@ -21,7 +21,9 @@ import styles from './DefaultPageLayout.module.css';
 
 const cx = cn.bind(styles);
 
-interface DefaultPageLayoutProps extends AppRootProps {}
+interface DefaultPageLayoutProps extends AppRootProps {
+  children?: any;
+}
 
 enum AlertID {
   CONNECTIVITY_WARNING = 'Connectivity Warning',

grafana-plugin/src/containers/EscalationChainSteps/EscalationChainSteps.tsx

@@ -55,9 +55,9 @@ const EscalationChainSteps = observer((props: EscalationChainStepsProps) => {
 
   const escalationPolicyIds = escalationPolicyStore.escalationChainToEscalationPolicy[id];
   const isSlackInstalled = Boolean(store.teamStore.currentTeam?.slack_team_identity);
-  const isTelegramInstalled = Boolean(store.telegramChannelStore?.currentTeamToTelegramChannel?.length > 0);
 
   return (
+    // @ts-ignore
     <SortableList useDragHandle className={cx('steps')} axis="y" lockAxis="y" onSortEnd={handleSortEnd}>
       {addonBefore}
       {escalationPolicyIds ? (
@@ -79,6 +79,7 @@ const EscalationChainSteps = observer((props: EscalationChainStepsProps) => {
             <EscalationPolicy
               key={`item-${escalationPolicy.id}`}
               index={index}
+              // @ts-ignore
               data={escalationPolicy}
               number={index + offset + 1}
               color={STEP_COLORS[index] || COLOR_RED}

grafana-plugin/src/containers/IncidentsFilters/IncidentsFilters.tsx

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 
 import { SelectableValue, TimeRange } from '@grafana/data';
 import {
-  HorizontalGroup,
   IconButton,
   InlineSwitch,
   MultiSelect,
@@ -10,14 +9,13 @@ import {
   Select,
   LoadingPlaceholder,
   Input,
-  VerticalGroup,
   Icon,
 } from '@grafana/ui';
 import { capitalCase } from 'change-case';
 import cn from 'classnames/bind';
-import { debounce, isEmpty, isUndefined, omit, omitBy, pickBy } from 'lodash-es';
+import { debounce, isEmpty, isUndefined, omitBy } from 'lodash-es';
 import { observer } from 'mobx-react';
-import moment from 'moment';
+import moment from 'moment-timezone';
 import Emoji from 'react-emoji-render';
 
 import CardButton from 'components/CardButton/CardButton';

grafana-plugin/src/containers/IntegrationSettings/parts/Autoresolve.tsx

@@ -55,6 +55,7 @@ const Autoresolve = ({ alertReceiveChannelId, onSwitchToTemplate, alertGroupId }
       store.alertReceiveChannelStore.templates[alertReceiveChannelId],
       'resolve_condition_template'
     );
+    // @ts-ignore
     if (autoresolveCondition == ['invalid template']) {
       setAutoresolveConditionInvalid(true);
     }

grafana-plugin/src/containers/PersonalNotificationSettings/PersonalNotificationSettings.tsx

@@ -116,6 +116,7 @@ const PersonalNotificationSettings = observer((props: PersonalNotificationSettin
   return (
     <div className={cx('root')}>
       {title}
+      {/* @ts-ignore */}
       <SortableList
         helperClass={cx('sortable-helper')}
         className={cx('steps')}
@@ -126,6 +127,7 @@ const PersonalNotificationSettings = observer((props: PersonalNotificationSettin
       >
         {notificationPolicies.map((notificationPolicy: NotificationPolicyType, index: number) => (
           <NotificationPolicy
+            // @ts-ignore
             userAction={userAction}
             key={notificationPolicy.id}
             index={index}

grafana-plugin/src/index.d.ts

@@ -11,3 +11,8 @@ declare module '*.css';
 declare module '*.jpg';
 declare module '*.png';
 declare module '*.svg';
+
+declare module '*.scss' {
+  const content: Record<string, string>;
+  export default content;
+}

grafana-plugin/src/pages/incidents/parts/SilenceDropdown.tsx

@@ -1,12 +1,13 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 
-import { IconButton, ValuePicker, WithContextMenu, ButtonCascader } from '@grafana/ui';
+import { ButtonCascader } from '@grafana/ui';
 import { observer } from 'mobx-react';
 
 import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl';
 import { SelectOption } from 'state/types';
 import { useStore } from 'state/useStore';
 import { UserAction } from 'state/userAction';
+import { ComponentSize } from '@grafana/ui/types/size';
 
 interface SilenceDropdownProps {
   onSelect: (value: number) => void;
@@ -19,7 +20,7 @@ const SilenceDropdown = observer((props: SilenceDropdownProps) => {
   const { onSelect, className, disabled = false, buttonSize } = props;
 
   const onSelectCallback = useCallback(
-    ([value, ...rest]) => {
+    ([value]) => {
       onSelect(Number(value));
     },
     [onSelect]
@@ -44,7 +45,7 @@ const SilenceDropdown = observer((props: SilenceDropdownProps) => {
           label: silenceOption.display_name,
         }))}
         value={undefined}
-        buttonProps={{ size: buttonSize }}
+        buttonProps={{ size: buttonSize as ComponentSize }}
       >
         Silence
       </ButtonCascader>

grafana-plugin/src/pages/schedules/Schedules.helpers.ts

@@ -1,19 +1,18 @@
-import { Moment } from 'moment';
 import moment from 'moment-timezone';
 
 import { Schedule } from 'models/schedule/schedule.types';
 
 const DATE_FORMAT = 'HH:mm YYYY-MM-DD';
 
-function isToday(m: Moment, currentMoment: Moment) {
+function isToday(m: moment.Moment) {
   return m.isSame('day');
 }
 
-function isYesterday(m: Moment, currentMoment: Moment) {
+function isYesterday(m: moment.Moment, currentMoment: moment.Moment) {
   return m.diff(currentMoment, 'days') === -1;
 }
 
-function isTomorrow(m: Moment, currentMoment: Moment) {
+function isTomorrow(m: moment.Moment, currentMoment: moment.Moment) {
   return m.diff(currentMoment, 'days') === 1;
 }
 
@@ -25,8 +24,8 @@ export function prepareForEdit(schedule: Schedule) {
   };
 }
 
-function humanize(m: Moment, currentMoment: Moment) {
-  if (isToday(m, currentMoment)) {
+function humanize(m: moment.Moment, currentMoment: moment.Moment) {
+  if (isToday(m)) {
     return 'Today';
   }
   if (isYesterday(m, currentMoment)) {

grafana-plugin/src/vars.css

@@ -1,5 +1,6 @@
 :root {
   --maintenance-background: repeating-linear-gradient(45deg, #f6ba52, #f6ba52 20px, #ffd180 20px, #ffd180 40px);
+  --gren-5: #6ccf8e;
   --green-6: #73d13d;
   --red-5: #ff4d4f;
   --orange-5: #ffa940;

grafana-plugin/tsconfig.json

@@ -9,5 +9,6 @@
     "noUnusedLocals": false,
     "strict": false,
     "resolveJsonModule": true,
+    "noImplicitAny": false
   }
 }

grafana-plugin/webpack.config.js

@@ -1,9 +1,7 @@
 const path = require('path');
 const fs = require('fs');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const CircularDependencyPlugin = require('circular-dependency-plugin');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 const MONACO_DIR = path.resolve(__dirname, './node_modules/monaco-editor');
 
@@ -13,7 +11,6 @@ Object.defineProperty(RegExp.prototype, 'toJSON', {
 
 module.exports.getWebpackConfig = (config, options) => {
   const cssLoader = config.module.rules.find((rule) => rule.test.toString() === '/\\.css$/');
-  const tsxLoader = config.module.rules.find((rule) => rule.test.toString() === '/\\.tsx?$/');
 
   cssLoader.exclude.push(/\.module\.css$/, MONACO_DIR);
 
@@ -23,10 +20,61 @@ module.exports.getWebpackConfig = (config, options) => {
       ...config.module,
       rules: [
         ...config.module.rules,
+
         {
-          test: /\.module\.css$/,
+          test: /\.(ts|tsx)$/,
+          exclude: /node_modules/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {
+                cacheDirectory: true,
+                cacheCompression: false,
+                presets: [
+                  [
+                    '@babel/preset-env',
+                    {
+                      modules: false,
+                    },
+                  ],
+                  [
+                    '@babel/preset-typescript',
+                    {
+                      allowNamespaces: true,
+                      allowDeclareFields: true,
+                    },
+                  ],
+                  ['@babel/preset-react'],
+                ],
+                plugins: [
+                  [
+                    '@babel/plugin-transform-typescript',
+                    {
+                      allowNamespaces: true,
+                      allowDeclareFields: true,
+                    },
+                  ],
+                  '@babel/plugin-proposal-class-properties',
+                  [
+                    '@babel/plugin-proposal-object-rest-spread',
+                    {
+                      loose: true,
+                    },
+                  ],
+                  '@babel/plugin-transform-react-constant-elements',
+                  '@babel/plugin-proposal-nullish-coalescing-operator',
+                  '@babel/plugin-proposal-optional-chaining',
+                  '@babel/plugin-syntax-dynamic-import',
+                ],
+              },
+            },
+            'ts-loader',
+          ],
+        },
+
+        {
+          test: /\.module\.(css|less)$/,
           exclude: /node_modules/,
-          //use: ['style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'],
           use: [
             'style-loader',
             {
@@ -38,11 +86,12 @@ module.exports.getWebpackConfig = (config, options) => {
                   localIdentName: options.production ? '[name]__[hash:base64]' : '[path][name]__[local]',
                 },
               },
-            },
+            }
           ],
         },
       ],
     },
+
     plugins: [
       ...config.plugins,
       new CircularDependencyPlugin({
@@ -57,8 +106,9 @@ module.exports.getWebpackConfig = (config, options) => {
         // set the current working directory for displaying module paths
         cwd: process.cwd(),
       }),
-      //new BundleAnalyzerPlugin(),
+      // new BundleAnalyzerPlugin(),
     ],
+
     resolve: {
       ...config.resolve,
       symlinks: false,
@@ -66,12 +116,12 @@ module.exports.getWebpackConfig = (config, options) => {
     },
   };
 
-  /* fs.writeFile('webpack-conf.json', JSON.stringify(newConfig.resolve, null, 2), function (err) {
-    if (err) {
-      return console.log(err);
-    }
-    console.log('config > webpack-conf.json');
-  }); */
+  // fs.writeFile('webpack-conf.json', JSON.stringify(newConfig, null, 2), function (err) {
+  //   if (err) {
+  //     return console.log(err);
+  //   }
+  //   console.log('config > webpack-conf.json');
+  // });
 
   return newConfig;
 };