diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index e2dbf2de..f61d3a85 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -23,16 +23,26 @@ repos: - flake8-tidy-imports - repo: https://github.com/pre-commit/mirrors-eslint - rev: v7.21.0 + rev: v8.25.0 hooks: - id: eslint - entry: bash -c 'cd grafana-plugin && eslint --fix ${@/grafana-plugin\//}' -- + entry: bash -c 'cd grafana-plugin && eslint --max-warnings=0 --fix ${@/grafana-plugin\//}' -- types: [file] files: ^grafana-plugin/src/.*\.(js|jsx|ts|tsx)$ additional_dependencies: - - eslint@7.21.0 + - eslint@^8.25.0 - eslint-plugin-import@^2.25.4 - eslint-plugin-rulesdir@^0.2.1 + - "@grafana/eslint-config@^5.0.0" + + - repo: https://github.com/pre-commit/mirrors-prettier + rev: "v2.7.1" + hooks: + - id: prettier + types_or: [css, javascript, jsx, ts, tsx, json] + files: ^grafana-plugin/src + additional_dependencies: + - prettier@^2.7.1 - repo: https://github.com/thibaudcolas/pre-commit-stylelint rev: v13.13.1 @@ -43,4 +53,6 @@ repos: files: ^grafana-plugin/src/.*\.css$ additional_dependencies: - stylelint@^13.13.1 + - stylelint-prettier@^2.0.0 - stylelint-config-standard@^22.0.0 + - stylelint-config-prettier@^9.0.3 diff --git a/grafana-plugin/.eslintrc.js b/grafana-plugin/.eslintrc.js index 87f1dd00..9bfe88c0 100644 --- a/grafana-plugin/.eslintrc.js +++ b/grafana-plugin/.eslintrc.js @@ -9,18 +9,7 @@ module.exports = { '^assets|^components|^containers|^declare|^icons|^img|^interceptors|^models|^network|^pages|^services|^state|^utils', }, rules: { - 'no-unused-vars': ['warn', { vars: 'all', args: 'after-used', ignoreRestSiblings: false }], - 'react/prop-types': 'warn', - 'react/display-name': 'warn', - 'react/jsx-key': 'warn', - 'react-hooks/exhaustive-deps': 'off', - 'react/no-unescaped-entities': 'warn', - 'react/jsx-no-target-blank': 'warn', - 'react-hooks/exhaustive-deps': 'warn', - 'no-restricted-imports': 'warn', eqeqeq: 'warn', - 'no-duplicate-imports': 'error', - 'rulesdir/no-relative-import-paths': ['error', { allowSameFolder: true }], 'import/order': [ 'error', { @@ -47,5 +36,33 @@ module.exports = { 'newlines-between': 'always', }, ], + 'no-unused-vars': [ + 'warn', + { + vars: 'all', + args: 'after-used', + argsIgnorePattern: '^_', + destructuredArrayIgnorePattern: '^_', + ignoreRestSiblings: true, + }, + ], + 'no-duplicate-imports': 'error', + 'no-restricted-imports': 'warn', + 'react/display-name': 'warn', + /** + * It appears as though the react/prop-types rule has a bug in it + * when your props extend an interface + * https://github.com/jsx-eslint/eslint-plugin-react/issues/3325 + */ + 'react/prop-types': 'off', + 'react/jsx-key': 'warn', + 'react/jsx-no-target-blank': 'warn', + 'react/no-unescaped-entities': 'off', + /** + * TODO: react-hooks/exhaustive-deps is temporarily disabled + * this will be turned back on, and the warnings fixed, in a forthcoming PR + */ + 'react-hooks/exhaustive-deps': 'off', + 'rulesdir/no-relative-import-paths': ['error', { allowSameFolder: true }], }, }; diff --git a/grafana-plugin/.stylelintrc b/grafana-plugin/.stylelintrc index 7cda5c91..c37d4c08 100644 --- a/grafana-plugin/.stylelintrc +++ b/grafana-plugin/.stylelintrc @@ -1,12 +1,14 @@ { - "extends": "stylelint-config-standard", - "rules": { - "block-no-empty": [true,{ "severity": "warning"}], + "extends": ["stylelint-config-standard", "stylelint-prettier/recommended"], + "plugins": ["stylelint-prettier"], + "rules": { + "block-no-empty": [true, { "severity": "warning" }], "selector-pseudo-class-no-unknown": [ true, { "ignorePseudoClasses": ["global"] } - ] + ], + "prettier/prettier": true } } diff --git a/grafana-plugin/package.json b/grafana-plugin/package.json index 021f0224..9398e5c9 100644 --- a/grafana-plugin/package.json +++ b/grafana-plugin/package.json @@ -3,8 +3,8 @@ "version": "1.0.0", "description": "Grafana OnCall Plugin", "scripts": { - "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx ./src", - "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --quiet ./src", + "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx --max-warnings=0 ./src", + "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --max-warnings=0 --quiet ./src", "stylelint": "stylelint ./src/**/*.css", "stylelint:fix": "stylelint --fix ./src/**/*.css", "build": "grafana-toolkit plugin:build", @@ -52,6 +52,7 @@ "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", "@grafana/data": "^9.1.1", + "@grafana/eslint-config": "^5.0.0", "@grafana/runtime": "^9.1.1", "@grafana/toolkit": "^9.1.1", "@grafana/ui": "^9.1.1", @@ -67,8 +68,13 @@ "@types/react-router-dom": "^5.3.3", "@types/react-test-renderer": "^17.0.2", "@types/throttle-debounce": "^5.0.0", + "@typescript-eslint/eslint-plugin": "^5.40.1", "copy-webpack-plugin": "^11.0.0", "dompurify": "^2.3.12", + "eslint": "^8.25.0", + "eslint-plugin-jsdoc": "^39.3.14", + "eslint-plugin-react": "^7.31.10", + "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-rulesdir": "^0.2.1", "jest": "^27.5.1", "jest-environment-jsdom": "^27.5.1", @@ -78,8 +84,11 @@ "plop": "^2.7.4", "postcss-loader": "^7.0.1", "react-test-renderer": "^17.0.2", + "stylelint-config-prettier": "^9.0.3", + "stylelint-prettier": "^2.0.0", "ts-jest": "^27.1.3", "ts-loader": "^9.3.1", + "typescript": "4.6.4", "webpack-bundle-analyzer": "^4.6.1" }, "engines": { diff --git a/grafana-plugin/src/GrafanaPluginRootPage.tsx b/grafana-plugin/src/GrafanaPluginRootPage.tsx index 4e3f6467..ed69df65 100644 --- a/grafana-plugin/src/GrafanaPluginRootPage.tsx +++ b/grafana-plugin/src/GrafanaPluginRootPage.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useMemo } from 'react'; import { AppRootProps } from '@grafana/data'; -import { Button, HorizontalGroup, LinkButton, VerticalGroup } from '@grafana/ui'; +import { Button, HorizontalGroup, LinkButton } from '@grafana/ui'; import dayjs from 'dayjs'; import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'; import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'; @@ -30,8 +30,6 @@ dayjs.extend(isSameOrBefore); dayjs.extend(isSameOrAfter); dayjs.extend(isoWeek); -// dayjs().weekday(0); - import './style/vars.css'; import './style/index.css'; diff --git a/grafana-plugin/src/README.md b/grafana-plugin/src/README.md index 66e4b915..b3c76bb1 100644 --- a/grafana-plugin/src/README.md +++ b/grafana-plugin/src/README.md @@ -3,6 +3,7 @@ Developer-Friendly Alert Management with Brilliant Slack Integration + - Connect monitoring systems - Collect and analyze data - On-call rotation @@ -10,5 +11,6 @@ with Brilliant Slack Integration - Never miss alerts with calls and SMS ## Documentation + - [On Github](http://github.com/grafana/oncall) - [Grafana OnCall](https://grafana.com/docs/grafana-cloud/oncall/) diff --git a/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.helper.tsx b/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.helper.tsx index e2e01b17..d7bad53f 100644 --- a/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.helper.tsx +++ b/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.helper.tsx @@ -10,7 +10,3 @@ export function getLabelFromTemplateName(templateName: string, group: any) { } return arrayWithNeededValues.join(' '); } - -export function includeTemplateGroup(groupName: string) { - return true; -} diff --git a/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx b/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx index eaecbbfd..782ea07a 100644 --- a/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx +++ b/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx @@ -8,8 +8,7 @@ import cn from 'classnames/bind'; import { omit } from 'lodash-es'; import { templatesToRender, Template } from 'components/AlertTemplates/AlertTemplatesForm.config'; -import { getLabelFromTemplateName, includeTemplateGroup } from 'components/AlertTemplates/AlertTemplatesForm.helper'; -import Collapse from 'components/Collapse/Collapse'; +import { getLabelFromTemplateName } from 'components/AlertTemplates/AlertTemplatesForm.helper'; import Block from 'components/GBlock/Block'; import MonacoJinja2Editor from 'components/MonacoJinja2Editor/MonacoJinja2Editor'; import SourceCode from 'components/SourceCode/SourceCode'; @@ -41,7 +40,6 @@ const AlertTemplatesForm = (props: AlertTemplatesFormProps) => { const { onUpdateTemplates, templates, - errors, alertReceiveChannelId, alertGroupId, demoAlertEnabled, @@ -53,6 +51,8 @@ const AlertTemplatesForm = (props: AlertTemplatesFormProps) => { const [tempValues, setTempValues] = useState<{ [key: string]: string | null; }>({}); + const [activeGroup, setActiveGroup] = useState(); + const [activeTemplate, setActiveTemplate] = useState