Merge pull request #881 from prymitive/prettier

feat(test): add prettier to eslint rules

Makefile

@@ -131,6 +131,10 @@ test-js: .build/deps-build-node.ok
 .PHONY: test
 test: lint test-go test-js
 
+.PHONY: format-js
+format-js:
+	cd ui && ./node_modules/.bin/prettier --write 'src/**/*.js'
+
 .PHONY: show-version
 show-version:
 	@echo $(VERSION)

ui/.eslintrc.yaml

@@ -1,2 +1,3 @@
 extends:
   - react-app
+  - plugin:prettier/recommended

ui/package-lock.json

@@ -5888,6 +5888,15 @@
         }
       }
     },
+    "eslint-plugin-prettier": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.0.tgz",
+      "integrity": "sha512-XWX2yVuwVNLOUhQijAkXz+rMPPoCr7WFiAl8ig6I7Xn+pPVhDhzg4DxHpmbeb0iqjO9UronEA3Tb09ChnFVHHA==",
+      "dev": true,
+      "requires": {
+        "prettier-linter-helpers": "^1.0.0"
+      }
+    },
     "eslint-plugin-react": {
       "version": "7.14.3",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.14.3.tgz",
@@ -6240,6 +6249,12 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
       "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
     },
+    "fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+      "dev": true
+    },
     "fast-glob": {
       "version": "2.2.7",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
@@ -11891,6 +11906,21 @@
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
       "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ="
     },
+    "prettier": {
+      "version": "1.18.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.18.2.tgz",
+      "integrity": "sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==",
+      "dev": true
+    },
+    "prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "requires": {
+        "fast-diff": "^1.1.2"
+      }
+    },
     "pretty-bytes": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz",

ui/package.json

@@ -64,11 +64,13 @@
     "diffable-html": "4.0.0",
     "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "1.14.0",
+    "eslint-plugin-prettier": "3.1.0",
     "jest-canvas-mock": "2.1.0",
     "jest-date-mock": "1.0.7",
     "jest-fetch-mock": "2.1.2",
     "markdownlint-cli": "0.17.0",
-    "node-sass": "4.12.0"
+    "node-sass": "4.12.0",
+    "prettier": "1.18.2"
   },
   "browserslist": [
     ">= 1%",

ui/src/Components/Labels/FilteringCounterBadge/index.js

@@ -38,22 +38,22 @@ const FilteringCounterBadge = inject("alertStore")(
           <TooltipWrapper
             title={`Click to only show ${value} alerts or Alt+Click to hide them`}
           >
-          <Flash spy={counter}>
-            <span
-              className={
-                themed
-                  ? cs.className
-                  : [
-                      "badge-light badge-pill components-label-with-hover",
-                      ...cs.baseClassNames
-                    ].join(" ")
-              }
-              style={themed ? {} : cs.style}
-              onClick={e => this.handleClick(e)}
-            >
-              {counter}
-            </span>
-          </Flash>
+            <Flash spy={counter}>
+              <span
+                className={
+                  themed
+                    ? cs.className
+                    : [
+                        "badge-light badge-pill components-label-with-hover",
+                        ...cs.baseClassNames
+                      ].join(" ")
+                }
+                style={themed ? {} : cs.style}
+                onClick={e => this.handleClick(e)}
+              >
+                {counter}
+              </span>
+            </Flash>
           </TooltipWrapper>
         );
       }

ui/src/Components/Labels/FilteringCounterBadge/index.test.js

@@ -36,7 +36,7 @@ const validateStyle = (value, themed) => {
     />
   );
   // opacity=>1 is set by react-reveal/Flash
-  expect(tree.find("span").prop("style")).toEqual({"opacity": 1});
+  expect(tree.find("span").prop("style")).toEqual({ opacity: 1 });
 };
 
 const validateOnClick = (value, themed) => {

ui/src/Components/SilenceModal/SilenceMatch/MatchCounter.js

@@ -88,9 +88,7 @@ const MatchCounter = observer(
       if (this.matchedAlerts.error !== null) {
         return (
           <TooltipWrapper
-            title={`Failed to fetch alerts matching this label: ${
-              this.matchedAlerts.error
-            }`}
+            title={`Failed to fetch alerts matching this label: ${this.matchedAlerts.error}`}
           >
             <FontAwesomeIcon
               className="text-danger"

ui/src/Components/SilenceModal/SilenceModalContent.js

@@ -37,8 +37,8 @@ const SilenceModalContent = observer(
                   ? "Add new silence"
                   : silenceFormStore.data.currentStage ===
                     SilenceFormStage.Preview
-                    ? "Preview silenced alerts"
-                    : "Silence submitted"
+                  ? "Preview silenced alerts"
+                  : "Silence submitted"
                 : `Editing silence ${silenceFormStore.data.silenceID}`}
             </h5>
             <button type="button" className="close" onClick={onHide}>
@@ -54,7 +54,7 @@ const SilenceModalContent = observer(
                 settingsStore={settingsStore}
               />
             ) : silenceFormStore.data.currentStage ===
-            SilenceFormStage.Preview ? (
+              SilenceFormStage.Preview ? (
               <SilencePreview
                 alertStore={alertStore}
                 silenceFormStore={silenceFormStore}

ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitProgress.test.js

@@ -214,7 +214,12 @@ describe("<SilenceSubmitProgress />", () => {
     const tree = MountedSilenceSubmitProgress();
     await expect(tree.instance().submitState.fetch).resolves.toBe("success");
     tree.update();
-    expect(tree.find("a").getDOMNode().getAttribute("href")).toBe("file:///mock/#/silences/123");
+    expect(
+      tree
+        .find("a")
+        .getDOMNode()
+        .getAttribute("href")
+    ).toBe("file:///mock/#/silences/123");
   });
 
   it("[v2] renders success icon on successful fetch", async () => {
@@ -233,7 +238,12 @@ describe("<SilenceSubmitProgress />", () => {
     const tree = MountedSilenceSubmitProgress();
     await expect(tree.instance().submitState.fetch).resolves.toBe("123");
     tree.update();
-    expect(tree.find("a").getDOMNode().getAttribute("href")).toBe("file:///mock/#/silences/123");
+    expect(
+      tree
+        .find("a")
+        .getDOMNode()
+        .getAttribute("href")
+    ).toBe("file:///mock/#/silences/123");
   });
 
   it("[v1] renders error icon on failed fetch", async () => {

ui/src/index.js

@@ -1,7 +1,7 @@
 // MUST be first thing we import
 // https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md
 // IE is not supported (lacks Proxy) but that pollyfill provides fetch and other needed features
-import 'react-app-polyfill/ie11';
+import "react-app-polyfill/ie11";
 import "react-app-polyfill/stable";
 
 import React from "react";