From e8f93602fdb2df88e2fa28b5f2465a789d3ed67d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Fri, 17 Jul 2020 12:56:25 +0100 Subject: [PATCH] chore(tests): rewrite storybook stories as typescript --- ui/Makefile | 2 +- .../{index.stories.js => index.stories.tsx} | 2 +- .../{index.stories.js => index.stories.tsx} | 6 ++--- .../{index.stories.js => index.stories.tsx} | 2 ++ .../{index.stories.js => index.stories.tsx} | 16 ++++++++---- .../{index.stories.js => index.stories.tsx} | 4 +-- .../{index.stories.js => index.stories.tsx} | 26 ++++++++++++++----- 7 files changed, 38 insertions(+), 20 deletions(-) rename ui/src/Components/Grid/{index.stories.js => index.stories.tsx} (97%) rename ui/src/Components/MainModal/{index.stories.js => index.stories.tsx} (91%) rename ui/src/Components/ManagedSilence/{index.stories.js => index.stories.tsx} (97%) rename ui/src/Components/NavBar/{index.stories.js => index.stories.tsx} (92%) rename ui/src/Components/OverviewModal/{index.stories.js => index.stories.tsx} (91%) rename ui/src/Components/SilenceModal/{index.stories.js => index.stories.tsx} (92%) diff --git a/ui/Makefile b/ui/Makefile index b98c62c60..015c96d19 100644 --- a/ui/Makefile +++ b/ui/Makefile @@ -43,7 +43,7 @@ lint-deps: node_modules/depcheck/bin/depcheck.js .PHONY: lint-typescript lint-typescript: - @$(eval JSFILES := $(shell find $(CURDIR)/src/Components -name \*.js -not -name \*.test.js -not -name \*.stories.js)) + @$(eval JSFILES := $(shell find $(CURDIR)/src/Components -name \*.js -not -name \*.test.js)) @if [ "$(JSFILES)" != "" ]; then echo "$(JSFILES)" | tr " " "\n"; exit 1 ; fi .PHONY: format diff --git a/ui/src/Components/Grid/index.stories.js b/ui/src/Components/Grid/index.stories.tsx similarity index 97% rename from ui/src/Components/Grid/index.stories.js rename to ui/src/Components/Grid/index.stories.tsx index e4f977ad7..4733981d0 100644 --- a/ui/src/Components/Grid/index.stories.js +++ b/ui/src/Components/Grid/index.stories.tsx @@ -45,7 +45,7 @@ storiesOf("Grid", module) }) .add("AlertGrid", () => { const alertStore = new AlertStore([]); - const settingsStore = new Settings(); + const settingsStore = new Settings(null); const silenceFormStore = new SilenceFormStore(); MockGrid(alertStore); diff --git a/ui/src/Components/MainModal/index.stories.js b/ui/src/Components/MainModal/index.stories.tsx similarity index 91% rename from ui/src/Components/MainModal/index.stories.js rename to ui/src/Components/MainModal/index.stories.tsx index 60bb0883f..fecf56f66 100644 --- a/ui/src/Components/MainModal/index.stories.js +++ b/ui/src/Components/MainModal/index.stories.tsx @@ -20,7 +20,7 @@ storiesOf("MainModal", module) )) .add("Configuration", () => { const alertStore = new AlertStore([]); - const settingsStore = new Settings(); + const settingsStore = new Settings(null); fetchMock.mock( "begin:/label", @@ -41,20 +41,18 @@ storiesOf("MainModal", module) alertStore={alertStore} settingsStore={settingsStore} onHide={() => {}} - isVisible={true} expandAllOptions={true} /> ); }) .add("Help", () => { const alertStore = new AlertStore([]); - const settingsStore = new Settings(); + const settingsStore = new Settings(null); return ( {}} - isVisible={true} openTab={"help"} expandAllOptions={true} /> diff --git a/ui/src/Components/ManagedSilence/index.stories.js b/ui/src/Components/ManagedSilence/index.stories.tsx similarity index 97% rename from ui/src/Components/ManagedSilence/index.stories.js rename to ui/src/Components/ManagedSilence/index.stories.tsx index 5996c2e38..86ae5c50a 100644 --- a/ui/src/Components/ManagedSilence/index.stories.js +++ b/ui/src/Components/ManagedSilence/index.stories.tsx @@ -23,6 +23,7 @@ storiesOf("ManagedSilence", module) const cluster = "am"; alertStore.data.upstreams = { + counters: { healthy: 1, failed: 0, total: 1 }, instances: [ { name: "am1", @@ -42,6 +43,7 @@ storiesOf("ManagedSilence", module) const alertStoreReadOnly = new AlertStore([]); alertStoreReadOnly.data.upstreams = { + counters: { healthy: 1, failed: 0, total: 1 }, clusters: { ro: ["readonly"] }, instances: [ { diff --git a/ui/src/Components/NavBar/index.stories.js b/ui/src/Components/NavBar/index.stories.tsx similarity index 92% rename from ui/src/Components/NavBar/index.stories.js rename to ui/src/Components/NavBar/index.stories.tsx index 704096f16..9715e10cb 100644 --- a/ui/src/Components/NavBar/index.stories.js +++ b/ui/src/Components/NavBar/index.stories.tsx @@ -2,7 +2,7 @@ import React from "react"; import { storiesOf } from "@storybook/react"; -import { AlertStore, NewUnappliedFilter } from "Stores/AlertStore"; +import { AlertStore, NewUnappliedFilter, FilterT } from "Stores/AlertStore"; import { Settings } from "Stores/Settings"; import { SilenceFormStore } from "Stores/SilenceFormStore"; import { HistoryMenu } from "./FilterInput/History"; @@ -10,7 +10,15 @@ import { NavBar } from "."; import "Styles/Percy.scss"; -const NewFilter = (raw, name, matcher, value, applied, isValid, hits) => { +const NewFilter = ( + raw: string, + name: string, + matcher: string, + value: string, + applied: boolean, + isValid: boolean, + hits: number +): FilterT => { const filter = NewUnappliedFilter(raw); filter.name = name; filter.matcher = matcher; @@ -23,7 +31,7 @@ const NewFilter = (raw, name, matcher, value, applied, isValid, hits) => { storiesOf("NavBar", module).add("NavBar", () => { const alertStore = new AlertStore([]); - const settingsStore = new Settings(); + const settingsStore = new Settings(null); const silenceFormStore = new SilenceFormStore(); alertStore.info.totalAlerts = 197; @@ -113,8 +121,6 @@ storiesOf("NavBar", module).add("NavBar", () => { alertStore={alertStore} settingsStore={settingsStore} afterClick={() => {}} - handleClickOutside={() => {}} - outsideClickIgnoreClass="components-navbar-history" /> ); diff --git a/ui/src/Components/OverviewModal/index.stories.js b/ui/src/Components/OverviewModal/index.stories.tsx similarity index 91% rename from ui/src/Components/OverviewModal/index.stories.js rename to ui/src/Components/OverviewModal/index.stories.tsx index 002bb937d..d49a4c9e5 100644 --- a/ui/src/Components/OverviewModal/index.stories.js +++ b/ui/src/Components/OverviewModal/index.stories.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { FC } from "react"; import { storiesOf } from "@storybook/react"; @@ -9,7 +9,7 @@ import { OverviewModalContent } from "./OverviewModalContent"; import "Styles/Percy.scss"; storiesOf("OverviewModal", module).add("OverviewModal", () => { - const Modal = ({ children }) => ( + const Modal: FC = ({ children }) => (
{children}
diff --git a/ui/src/Components/SilenceModal/index.stories.js b/ui/src/Components/SilenceModal/index.stories.tsx similarity index 92% rename from ui/src/Components/SilenceModal/index.stories.js rename to ui/src/Components/SilenceModal/index.stories.tsx index bd69ffe57..f0b912a6d 100644 --- a/ui/src/Components/SilenceModal/index.stories.js +++ b/ui/src/Components/SilenceModal/index.stories.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { FC } from "react"; import fetchMock from "fetch-mock"; @@ -10,14 +10,22 @@ import addDays from "date-fns/addDays"; import { MockSilence } from "__mocks__/Alerts"; import { AlertStore } from "Stores/AlertStore"; import { Settings } from "Stores/Settings"; -import { SilenceFormStore, NewEmptyMatcher } from "Stores/SilenceFormStore"; +import { + SilenceFormStore, + NewEmptyMatcher, + MatcherWithIDT, +} from "Stores/SilenceFormStore"; import { StringToOption } from "Common/Select"; import { DateTimeSelect } from "./DateTimeSelect"; import { SilenceModalContent } from "./SilenceModalContent"; import "Styles/Percy.scss"; -const MockMatcher = (name, values, isRegex) => { +const MockMatcher = ( + name: string, + values: string[], + isRegex: boolean +): MatcherWithIDT => { const matcher = NewEmptyMatcher(); matcher.name = name; matcher.values = values.map((v) => StringToOption(v)); @@ -25,7 +33,7 @@ const MockMatcher = (name, values, isRegex) => { return matcher; }; -const Modal = ({ children }) => ( +const Modal: FC = ({ children }) => (
{children}
@@ -36,13 +44,14 @@ const Modal = ({ children }) => ( storiesOf("SilenceModal", module) .add("Editor", () => { const alertStore = new AlertStore([]); - const settingsStore = new Settings(); + const settingsStore = new Settings(null); const silenceFormStore = new SilenceFormStore(); alertStore.info.authentication.enabled = true; alertStore.info.authentication.username = "me@example.com"; alertStore.data.upstreams = { + counters: { healthy: 3, failed: 0, total: 3 }, clusters: { default: ["default"], HA: ["ha1", "ha2"] }, instances: [ { @@ -146,6 +155,7 @@ storiesOf("SilenceModal", module) const alertStoreReadOnly = new AlertStore([]); alertStoreReadOnly.data.upstreams = { + counters: { healthy: 1, failed: 0, total: 1 }, clusters: { default: ["readonly"] }, instances: [ { @@ -204,12 +214,13 @@ storiesOf("SilenceModal", module) }) .add("Browser", () => { const alertStore = new AlertStore([]); - const settingsStore = new Settings(); + const settingsStore = new Settings(null); const silenceFormStore = new SilenceFormStore(); silenceFormStore.tab.current = "browser"; alertStore.data.upstreams = { + counters: { healthy: 1, failed: 0, total: 1 }, instances: [ { name: "am1", @@ -267,12 +278,13 @@ storiesOf("SilenceModal", module) }) .add("Empty Browser", () => { const alertStore = new AlertStore([]); - const settingsStore = new Settings(); + const settingsStore = new Settings(null); const silenceFormStore = new SilenceFormStore(); silenceFormStore.tab.current = "browser"; alertStore.data.upstreams = { + counters: { healthy: 1, failed: 0, total: 1 }, instances: [ { name: "am1",