fix(ui): fix typescript warnings

ui/.eslintrc.yaml

@@ -6,8 +6,10 @@ plugins:
 extends:
   - react-app
   - react-app/jest
-  - "plugin:@typescript-eslint/recommended"
-  - "prettier"
+  - eslint:recommended
+  - plugin:@typescript-eslint/eslint-recommended
+  - plugin:@typescript-eslint/recommended
+  - prettier
 settings:
   react:
     version: detect

ui/.storybook/preview.js

@@ -1,4 +1,3 @@
-import React from "react";
 import {
   configure,
   getStorybook,

ui/Makefile

@@ -45,6 +45,7 @@ test-percy: $(NODE_PATH)/react-scripts $(NODE_PATH)/build-storybook $(NODE_PATH)
 lint-js: $(NODE_PATH)/eslint
 	@rm -fr node_modules/.cache/eslint-loader
 	eslint --ext .js,.jsx,.ts,.tsx src
+	tsc --noEmit -p .
 
 .PHONY: lint-deps
 lint-deps: $(NODE_PATH)/depcheck

ui/package.json

@@ -81,8 +81,8 @@
   },
   "devDependencies": {
     "@percy-io/percy-storybook": "2.1.0",
-    "@storybook/react": "6.2.5",
     "@storybook/preset-create-react-app": "3.1.7",
+    "@storybook/react": "6.2.5",
     "@testing-library/react-hooks": "5.1.1",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.0",
     "depcheck": "1.4.0",

ui/src/App.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import { mockMatchMedia } from "__fixtures__/matchMedia";

ui/src/Common/Fetch.test.ts

@@ -6,7 +6,7 @@ import fetchMock from "fetch-mock";
 
 beforeEach(() => {
   fetchMock.reset();
-  fetchMock.any({
+  fetchMock.mock("*", {
     status: 200,
     body: "ok",
   });
@@ -22,7 +22,7 @@ describe("Fetch", () => {
     FetchGet: FetchGet,
   };
 
-  const methodOptions = {
+  const methodOptions: { [key: string]: RequestInit } = {
     FetchGet: { method: "GET", mode: "cors" },
   };
 
@@ -40,14 +40,20 @@ describe("Fetch", () => {
       const request = func(
         "http://example.com/",
         {
-          foo: "bar",
+          keepalive: false,
         },
         () => {}
       );
       await expect(request).resolves.toMatchObject({ status: 200 });
       expect(fetchMock.lastUrl()).toBe("http://example.com/");
       expect(fetchMock.lastOptions()).toEqual(
-        merge({}, CommonOptions, methodOptions[name], { foo: "bar" }, () => {})
+        merge(
+          {},
+          CommonOptions,
+          methodOptions[name],
+          { keepalive: false },
+          () => {}
+        )
       );
     });
 
@@ -73,7 +79,7 @@ describe("Fetch", () => {
 
   it("FetchGet switches to no-cors for the last retry", async () => {
     fetchMock.reset();
-    fetchMock.any({
+    fetchMock.mock("*", {
       throws: new Error("Fetch error"),
     });
 
@@ -101,7 +107,7 @@ describe("Fetch", () => {
 
   it("FetchGet calls beforeRetry before each retry", async () => {
     fetchMock.reset();
-    fetchMock.any({
+    fetchMock.mock("*", {
       throws: new Error("Fetch error"),
     });
 

ui/src/Components/Accordion/index.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import { Accordion } from ".";

ui/src/Components/Accordion/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useState } from "react";
+import { FC, ReactNode, useState } from "react";
 
 import { ToggleIcon } from "Components/ToggleIcon";
 

ui/src/Components/AlertAck/index.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { act } from "react-dom/test-utils";
 
 import { mount } from "enzyme";

ui/src/Components/AlertAck/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from "react";
+import { FC, useEffect, useState } from "react";
 
 import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";

ui/src/Components/DateFromNow/index.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import addSeconds from "date-fns/addSeconds";

ui/src/Components/DateFromNow/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, useEffect } from "react";
+import { FC, useState, useEffect } from "react";
 
 import parseISO from "date-fns/parseISO";
 import differenceInSeconds from "date-fns/differenceInSeconds";
@@ -26,5 +26,5 @@ export const DateFromNow: FC<{ timestamp: string }> = ({ timestamp }) => {
     return () => clearInterval(timer);
   }, [timestamp]);
 
-  return <React.Fragment>{label}</React.Fragment>;
+  return <>{label}</>;
 };

ui/src/Components/FaviconBadge/index.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import Favico from "favico.js";

ui/src/Components/FetchPauser/index.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { act } from "react-dom/test-utils";
 
 import { mount } from "enzyme";

ui/src/Components/Fetcher/index.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { act } from "react-dom/test-utils";
 
 import { mount } from "enzyme";

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { act } from "react-dom/test-utils";
 
 import { mount } from "enzyme";

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx

@@ -1,11 +1,4 @@
-import React, {
-  FC,
-  Ref,
-  CSSProperties,
-  useRef,
-  useState,
-  useCallback,
-} from "react";
+import { FC, Ref, CSSProperties, useRef, useState, useCallback } from "react";
 
 import { observer } from "mobx-react-lite";
 
@@ -108,7 +101,7 @@ const MenuContent: FC<{
           />
         ))}
         {actions.length ? (
-          <React.Fragment>
+          <>
             <div className="dropdown-divider" />
             <h6 className="dropdown-header">Actions:</h6>
             {actions.map((action) => (
@@ -120,7 +113,7 @@ const MenuContent: FC<{
                 afterClick={afterClick}
               />
             ))}
-          </React.Fragment>
+          </>
         ) : null}
         <div className="dropdown-divider" />
         <div

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { act } from "react-dom/test-utils";
 
 import { mount } from "enzyme";

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { observer } from "mobx-react-lite";
 

ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { shallow, mount } from "enzyme";
 
 import toDiffableHtml from "diffable-html";

ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useRef, useState, memo } from "react";
+import { FC, useEffect, useRef, useState, memo } from "react";
 
 import Linkify from "react-linkify";
 
@@ -42,7 +42,7 @@ const RenderNonLinkAnnotation: FC<{
         onClick={isVisible ? undefined : () => setIsVisible(!isVisible)}
       >
         {isVisible ? (
-          <React.Fragment>
+          <>
             <span
               onClick={() => setIsVisible(false)}
               className="cursor-pointer"
@@ -60,12 +60,12 @@ const RenderNonLinkAnnotation: FC<{
                 <span ref={ref}>{value}</span>
               </CSSTransition>
             </Linkify>
-          </React.Fragment>
+          </>
         ) : (
-          <React.Fragment>
+          <>
             <FontAwesomeIcon icon={faSearchPlus} className="mr-1" />
             {name}
-          </React.Fragment>
+          </>
         )}
       </div>
     </TooltipWrapper>

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import toDiffableHtml from "diffable-html";

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { observer } from "mobx-react-lite";
 

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { act } from "react-dom/test-utils";
 
 import { mount } from "enzyme";

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx

@@ -1,11 +1,4 @@
-import React, {
-  FC,
-  useRef,
-  useState,
-  useCallback,
-  Ref,
-  CSSProperties,
-} from "react";
+import { FC, useRef, useState, useCallback, Ref, CSSProperties } from "react";
 
 import copy from "copy-to-clipboard";
 
@@ -106,7 +99,7 @@ const MenuContent: FC<{
         data-placement={popperPlacement}
       >
         {actions.length ? (
-          <React.Fragment>
+          <>
             <h6 className="dropdown-header">Actions:</h6>
             {actions.map((action) => (
               <MenuLink
@@ -118,7 +111,7 @@ const MenuContent: FC<{
               />
             ))}
             <div className="dropdown-divider" />
-          </React.Fragment>
+          </>
         ) : null}
         <div
           className="dropdown-item cursor-pointer"

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent } from "react";
+import { FC, MouseEvent } from "react";
 
 import { observer } from "mobx-react-lite";
 

ui/src/Components/Grid/AlertGrid/AlertGroup/MenuLink.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

ui/src/Components/Grid/AlertGrid/AlertGroup/Silences.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import toDiffableHtml from "diffable-html";

ui/src/Components/Grid/AlertGrid/AlertGroup/Silences.tsx

@@ -1,4 +1,4 @@
-import React, { FC, memo } from "react";
+import { FC, memo } from "react";
 
 import { APISilenceT } from "Models/APITypes";
 import { AlertStore } from "Stores/AlertStore";

ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { act } from "react-dom/test-utils";
 
 import { mount } from "enzyme";

ui/src/Components/Grid/AlertGrid/AlertGroup/index.tsx

@@ -236,7 +236,7 @@ const AlertGroup: FC<{
                       className="text-muted"
                     />
                   ) : (
-                    <React.Fragment>
+                    <>
                       <LoadButton
                         icon={faMinus}
                         action={loadLess}
@@ -252,7 +252,7 @@ const AlertGroup: FC<{
                         action={loadMore}
                         tooltip="Show more alerts in this group"
                       />
-                    </React.Fragment>
+                    </>
                   )}
                 </li>
               ) : null}

ui/src/Components/Grid/AlertGrid/Grid.tsx

@@ -116,7 +116,7 @@ const Grid: FC<{
   });
 
   return (
-    <React.Fragment>
+    <>
       <CSSTransition
         key={grid.labelValue}
         in={grid.labelName !== ""}
@@ -200,7 +200,7 @@ const Grid: FC<{
           </CSSTransition>
         )}
       </TransitionGroup>
-    </React.Fragment>
+    </>
   );
 };
 

ui/src/Components/Grid/AlertGrid/GridLabelSelect.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { act } from "react-dom/test-utils";
 
 import { mount } from "enzyme";

ui/src/Components/Grid/AlertGrid/Swimlane.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent } from "react";
+import { FC, MouseEvent } from "react";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTh } from "@fortawesome/free-solid-svg-icons/faTh";

ui/src/Components/Grid/AlertGrid/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState, useRef } from "react";
+import { FC, useEffect, useState, useRef } from "react";
 
 import { autorun } from "mobx";
 import { observer } from "mobx-react-lite";
@@ -58,7 +58,7 @@ const AlertGrid: FC<{
   useHotkeys("alt+space", alertStore.status.togglePause);
 
   return (
-    <React.Fragment>
+    <>
       <div
         ref={(el) => {
           observe(el as HTMLElement);
@@ -77,7 +77,7 @@ const AlertGrid: FC<{
           outerPadding={alertStore.data.gridPadding}
         />
       ))}
-    </React.Fragment>
+    </>
   );
 };
 

ui/src/Components/Grid/EmptyGrid/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMugHot } from "@fortawesome/free-solid-svg-icons/faMugHot";

ui/src/Components/Grid/FatalError/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle";

ui/src/Components/Grid/ReloadNeeded/index.test.tsx

@@ -8,6 +8,8 @@ import toDiffableHtml from "diffable-html";
 import { MockThemeContext } from "__fixtures__/Theme";
 import { ReloadNeeded } from ".";
 
+declare let window: any;
+
 beforeEach(() => {
   jest.useFakeTimers();
   jest.clearAllTimers();

ui/src/Components/Grid/ReloadNeeded/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from "react";
+import { FC, useEffect } from "react";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle";

ui/src/Components/Grid/UpgradeNeeded/index.test.tsx

@@ -8,6 +8,8 @@ import toDiffableHtml from "diffable-html";
 import { MockThemeContext } from "__fixtures__/Theme";
 import { UpgradeNeeded } from ".";
 
+declare let window: any;
+
 beforeEach(() => {
   jest.useFakeTimers();
   jest.clearAllTimers();

ui/src/Components/Grid/UpgradeNeeded/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from "react";
+import { FC, useEffect } from "react";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faRocket } from "@fortawesome/free-solid-svg-icons/faRocket";

ui/src/Components/Grid/index.stories.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { storiesOf } from "@storybook/react";
 
 import { MockGrid } from "__fixtures__/Stories";

ui/src/Components/Grid/index.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { shallow } from "enzyme";
 
 import { AlertStore } from "Stores/AlertStore";

ui/src/Components/Grid/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { observer } from "mobx-react-lite";
 

ui/src/Components/InhibitedByModal/InhibitedByModalContent.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { AlertStore } from "Stores/AlertStore";
 import { FormatQuery, QueryOperators, StaticLabels } from "Common/Query";
@@ -10,7 +10,7 @@ const InhibitedByModalContent: FC<{
   onHide: () => void;
 }> = ({ alertStore, fingerprints, onHide }) => {
   return (
-    <React.Fragment>
+    <>
       <div className="modal-header">
         <h5 className="modal-title">Inhibiting alerts</h5>
         <button type="button" className="close" onClick={onHide}>
@@ -29,7 +29,7 @@ const InhibitedByModalContent: FC<{
           ]}
         />
       </div>
-    </React.Fragment>
+    </>
   );
 };
 

ui/src/Components/InhibitedByModal/index.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { act } from "react-dom/test-utils";
 
 import { mount } from "enzyme";

ui/src/Components/InhibitedByModal/index.tsx

@@ -24,7 +24,7 @@ const InhibitedByModal: FC<{
   const toggle = useCallback(() => setIsVisible(!isVisible), [isVisible]);
 
   return (
-    <React.Fragment>
+    <>
       <TooltipWrapper title="This alert is inhibited by other alerts, click to see details">
         <span
           className="badge badge-light components-label components-label-with-hover cursor-pointer"
@@ -48,7 +48,7 @@ const InhibitedByModal: FC<{
           />
         </React.Suspense>
       </Modal>
-    </React.Fragment>
+    </>
   );
 };
 

ui/src/Components/InlineEdit/index.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { act } from "react-dom/test-utils";
 
 import { mount } from "enzyme";

ui/src/Components/InlineEdit/index.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   FC,
   useState,
   useRef,

ui/src/Components/LabelSetList/index.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import toDiffableHtml from "diffable-html";

ui/src/Components/LabelSetList/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react";
+import { FC, useState } from "react";
 
 import { AlertStore } from "Stores/AlertStore";
 import { APIAlertGroupT } from "Models/APITypes";

ui/src/Components/Labels/FilterInputLabel/index.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { shallow, mount } from "enzyme";
 
 import { AlertStore, NewUnappliedFilter } from "Stores/AlertStore";

ui/src/Components/Labels/FilterInputLabel/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { observer } from "mobx-react-lite";
 

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

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount, render } from "enzyme";
 
 import { AlertStore, NewUnappliedFilter } from "Stores/AlertStore";

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

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, MouseEvent } from "react";
+import { FC, useCallback, MouseEvent } from "react";
 
 import { observer } from "mobx-react-lite";
 

ui/src/Components/Labels/FilteringLabel/index.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import toDiffableHtml from "diffable-html";

ui/src/Components/Labels/FilteringLabel/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, MouseEvent } from "react";
+import { FC, useCallback, MouseEvent } from "react";
 
 import { observer } from "mobx-react-lite";
 

ui/src/Components/Labels/HistoryLabel/index.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { shallow } from "enzyme";
 
 import { AlertStore } from "Stores/AlertStore";

ui/src/Components/Labels/HistoryLabel/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { observer } from "mobx-react-lite";
 

ui/src/Components/Labels/LabelWithPercent/index.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import toDiffableHtml from "diffable-html";

ui/src/Components/Labels/LabelWithPercent/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, MouseEvent } from "react";
+import { FC, useCallback, MouseEvent } from "react";
 
 import { observer } from "mobx-react-lite";
 

ui/src/Components/Labels/StaticLabel/index.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import toDiffableHtml from "diffable-html";

ui/src/Components/Labels/StaticLabel/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { observer } from "mobx-react-lite";
 

ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import toDiffableHtml from "diffable-html";

ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import toDiffableHtml from "diffable-html";

ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react";
+import { FC, useState } from "react";
 
 import { Range } from "react-range";
 

ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import toDiffableHtml from "diffable-html";

ui/src/Components/MainModal/Configuration/AlertGroupTitleBarColor.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import toDiffableHtml from "diffable-html";

ui/src/Components/MainModal/Configuration/AlertGroupTitleBarColor.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { observer } from "mobx-react-lite";
 

ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import toDiffableHtml from "diffable-html";

ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react";
+import { FC, useState } from "react";
 
 import debounce from "lodash.debounce";
 

ui/src/Components/MainModal/Configuration/AnimationsConfiguration.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import toDiffableHtml from "diffable-html";

ui/src/Components/MainModal/Configuration/AnimationsConfiguration.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { observer } from "mobx-react-lite";
 

ui/src/Components/MainModal/Configuration/FetchConfiguration.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import toDiffableHtml from "diffable-html";

ui/src/Components/MainModal/Configuration/FetchConfiguration.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react";
+import { FC, useState } from "react";
 
 import { Range } from "react-range";
 

ui/src/Components/MainModal/Configuration/FilterBarConfiguration.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import toDiffableHtml from "diffable-html";

ui/src/Components/MainModal/Configuration/FilterBarConfiguration.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { observer } from "mobx-react-lite";
 

ui/src/Components/MainModal/Configuration/MultiGridConfiguration.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import fetchMock from "fetch-mock";

ui/src/Components/MainModal/Configuration/MultiGridConfiguration.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { observer } from "mobx-react-lite";
 

ui/src/Components/MainModal/Configuration/ThemeConfiguration.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import toDiffableHtml from "diffable-html";

ui/src/Components/MainModal/Configuration/index.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import fetchMock from "fetch-mock";

ui/src/Components/MainModal/Configuration/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { Settings } from "Stores/Settings";
 import { Accordion } from "Components/Accordion";
@@ -31,11 +31,11 @@ const Configuration: FC<{
     <Accordion
       text="Theme"
       content={
-        <React.Fragment>
+        <>
           <ThemeConfiguration settingsStore={settingsStore} />
           <AlertGroupTitleBarColor settingsStore={settingsStore} />
           <AnimationsConfiguration settingsStore={settingsStore} />
-        </React.Fragment>
+        </>
       }
       defaultIsOpen={defaultIsOpen}
     />

ui/src/Components/MainModal/Help.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { shallow } from "enzyme";
 
 import toDiffableHtml from "diffable-html";

ui/src/Components/MainModal/Help.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from "react";
+import { FC, ReactNode } from "react";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
@@ -9,7 +9,7 @@ const FilterOperatorHelp: FC<{
   operator: string;
   description: string;
 }> = ({ operator, description, children }) => (
-  <React.Fragment>
+  <>
     <dt>
       <kbd>{operator}</kbd> {description}
     </dt>
@@ -24,7 +24,7 @@ const FilterOperatorHelp: FC<{
       </div>
       <div>{children}</div>
     </dd>
-  </React.Fragment>
+  </>
 );
 
 const QueryHelp: FC<{
@@ -32,7 +32,7 @@ const QueryHelp: FC<{
   operators: string[];
   warning?: ReactNode;
 }> = ({ title, operators, warning, children }) => (
-  <React.Fragment>
+  <>
     <dt>{title}</dt>
     <dd className="mb-5">
       <div>
@@ -52,7 +52,7 @@ const QueryHelp: FC<{
       <div>Examples:</div>
       <ul>{children}</ul>
     </dd>
-  </React.Fragment>
+  </>
 );
 
 const FilterExample: FC<{

ui/src/Components/MainModal/MainModalContent.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import fetchMock from "fetch-mock";

ui/src/Components/MainModal/MainModalContent.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react";
+import { FC, useState } from "react";
 
 import { Observer } from "mobx-react-lite";
 
@@ -26,7 +26,7 @@ const MainModalContent: FC<{
   const [tab, setTab] = useState<OpenTabT>(openTab);
 
   return (
-    <React.Fragment>
+    <>
       <div className="modal-header py-2">
         <nav className="nav nav-pills nav-justified w-100">
           <Tab
@@ -71,7 +71,7 @@ const MainModalContent: FC<{
           )}
         </Observer>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 

ui/src/Components/MainModal/index.stories.tsx

@@ -4,8 +4,8 @@ import { storiesOf } from "@storybook/react";
 
 import fetchMock from "fetch-mock";
 
-import { AlertStore } from "Stores/AlertStore";
-import { Settings } from "Stores/Settings";
+import { AlertStore } from "../../Stores/AlertStore";
+import { Settings } from "../../Stores/Settings";
 import { MainModalContent } from "./MainModalContent";
 
 import "Styles/Percy.scss";

ui/src/Components/MainModal/index.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { act } from "react-dom/test-utils";
 
 import { mount } from "enzyme";

ui/src/Components/MainModal/index.tsx

@@ -25,7 +25,7 @@ const MainModal: FC<{
   const toggle = useCallback(() => setIsVisible(!isVisible), [isVisible]);
 
   return (
-    <React.Fragment>
+    <>
       <li
         className={`nav-item components-navbar-button ${
           isVisible ? "border-info" : ""
@@ -57,7 +57,7 @@ const MainModal: FC<{
           />
         </React.Suspense>
       </Modal>
-    </React.Fragment>
+    </>
   );
 };
 

ui/src/Components/ManagedSilence/DeleteSilence.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { act } from "react-dom/test-utils";
 
 import { mount } from "enzyme";

ui/src/Components/ManagedSilence/DeleteSilence.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState, ReactNode } from "react";
+import { FC, useEffect, useState, ReactNode } from "react";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTrash } from "@fortawesome/free-solid-svg-icons/faTrash";
@@ -78,7 +78,7 @@ const DeleteResult: FC<{
   );
 
   return (
-    <React.Fragment>
+    <>
       {isDeleting ? (
         <ProgressMessage />
       ) : error ? (
@@ -102,7 +102,7 @@ const DeleteResult: FC<{
           </button>
         </div>
       ) : null}
-    </React.Fragment>
+    </>
   );
 };
 
@@ -121,7 +121,7 @@ const DeleteSilenceModalContent: FC<{
   }, [silenceFormStore.toggle]);
 
   return (
-    <React.Fragment>
+    <>
       <div className="modal-header">
         <h5 className="modal-title">Delete silence</h5>
         <button type="button" className="close" onClick={onHide}>
@@ -136,7 +136,7 @@ const DeleteSilenceModalContent: FC<{
             silence={silence}
           />
         ) : (
-          <React.Fragment>
+          <>
             <PaginatedAlertList
               alertStore={alertStore}
               filters={[
@@ -159,10 +159,10 @@ const DeleteSilenceModalContent: FC<{
                 Confirm
               </button>
             </div>
-          </React.Fragment>
+          </>
         )}
       </div>
-    </React.Fragment>
+    </>
   );
 };
 
@@ -180,7 +180,7 @@ const DeleteSilence: FC<{
   );
 
   return (
-    <React.Fragment>
+    <>
       <button
         className="btn btn-danger btn-sm"
         disabled={members.length === 0}
@@ -207,7 +207,7 @@ const DeleteSilence: FC<{
           onHide={() => setVisible(false)}
         />
       </Modal>
-    </React.Fragment>
+    </>
   );
 };
 

ui/src/Components/ManagedSilence/SilenceComment.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import { advanceTo, clear } from "jest-date-mock";

ui/src/Components/ManagedSilence/SilenceComment.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
@@ -46,7 +46,7 @@ const SilenceComment: FC<{
   );
 
   return (
-    <React.Fragment>
+    <>
       <div className="d-flex flex-row">
         <div className="flex-shrink-0 flex-grow-0">
           <FontAwesomeIcon
@@ -97,7 +97,7 @@ const SilenceComment: FC<{
           </div>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 

ui/src/Components/ManagedSilence/SilenceDetails.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import toDiffableHtml from "diffable-html";

ui/src/Components/ManagedSilence/SilenceDetails.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react";
+import { FC, useState } from "react";
 
 import parseISO from "date-fns/parseISO";
 

ui/src/Components/ManagedSilence/SilenceProgress.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { act } from "react-dom/test-utils";
 
 import { mount } from "enzyme";

ui/src/Components/ManagedSilence/SilenceProgress.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from "react";
+import { FC, useEffect, useState } from "react";
 
 import { observer } from "mobx-react-lite";
 

ui/src/Components/ManagedSilence/index.stories.tsx

@@ -2,9 +2,9 @@ import React from "react";
 
 import { storiesOf } from "@storybook/react";
 
-import { MockSilence } from "__fixtures__/Alerts";
-import { AlertStore } from "Stores/AlertStore";
-import { SilenceFormStore } from "Stores/SilenceFormStore";
+import { MockSilence } from "../../__fixtures__/Alerts";
+import { AlertStore } from "../../Stores/AlertStore";
+import { SilenceFormStore } from "../../Stores/SilenceFormStore";
 import { ManagedSilence } from ".";
 
 import "Styles/Percy.scss";
@@ -70,7 +70,7 @@ storiesOf("ManagedSilence", module)
     expiredSilence.endsAt = "2018-08-14T11:00:00Z";
 
     return (
-      <React.Fragment>
+      <>
         <ManagedSilence
           cluster={cluster}
           alertCount={123}
@@ -129,6 +129,6 @@ storiesOf("ManagedSilence", module)
           onDidUpdate={() => {}}
           isOpen={true}
         />
-      </React.Fragment>
+      </>
     );
   });

ui/src/Components/ManagedSilence/index.test.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { mount } from "enzyme";
 
 import toDiffableHtml from "diffable-html";

ui/src/Components/ManagedSilence/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from "react";
+import { FC, useEffect, useState } from "react";
 
 import { APISilenceT, APIAlertmanagerUpstreamT } from "Models/APITypes";
 import { AlertStore } from "Stores/AlertStore";