diff --git a/ui/src/Components/Accordion/index.tsx b/ui/src/Components/Accordion/index.tsx index 61a267ad1..0152f5453 100644 --- a/ui/src/Components/Accordion/index.tsx +++ b/ui/src/Components/Accordion/index.tsx @@ -2,9 +2,7 @@ import React, { FunctionComponent, ReactNode } from "react"; import Collapsible from "react-collapsible"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp"; -import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown"; +import { ToggleIcon } from "Components/ToggleIcon"; const Trigger: FunctionComponent<{ text: string; isOpen: boolean }> = ({ text, @@ -13,10 +11,7 @@ const Trigger: FunctionComponent<{ text: string; isOpen: boolean }> = ({
{text}
- +
); diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap index 58fbc435d..e5a3ee632 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap @@ -329,14 +329,15 @@ exports[` mathes snapshot when silence is rendered 1`] = ` diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js index b6fea031e..ac646c01c 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js @@ -3,10 +3,6 @@ import PropTypes from "prop-types"; import { observer } from "mobx-react"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp"; -import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown"; - import { APIGroup } from "Models/API"; import { AlertStore } from "Stores/AlertStore"; import { SilenceFormStore } from "Stores/SilenceFormStore"; @@ -14,6 +10,7 @@ import { FilteringLabel } from "Components/Labels/FilteringLabel"; import { FilteringCounterBadge } from "Components/Labels/FilteringCounterBadge"; import { TooltipWrapper } from "Components/TooltipWrapper"; import { AlertAck } from "Components/AlertAck"; +import { ToggleIcon } from "Components/ToggleIcon"; import { GroupMenu } from "./GroupMenu"; const GroupHeader = observer( @@ -121,9 +118,7 @@ const GroupHeader = observer( onClick={this.onCollapseClick} > - + diff --git a/ui/src/Components/Grid/AlertGrid/Grid.js b/ui/src/Components/Grid/AlertGrid/Grid.js index 0e94547b6..8c418ad30 100644 --- a/ui/src/Components/Grid/AlertGrid/Grid.js +++ b/ui/src/Components/Grid/AlertGrid/Grid.js @@ -14,8 +14,6 @@ import MasonryInfiniteScroller from "react-masonry-infinite"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faTh } from "@fortawesome/free-solid-svg-icons/faTh"; -import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp"; -import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown"; import { faAngleDoubleDown } from "@fortawesome/free-solid-svg-icons/faAngleDoubleDown"; import { AlertStore } from "Stores/AlertStore"; @@ -26,6 +24,7 @@ import { FilteringLabel } from "Components/Labels/FilteringLabel"; import { FilteringCounterBadge } from "Components/Labels/FilteringCounterBadge"; import { TooltipWrapper } from "Components/TooltipWrapper"; import { ThemeContext } from "Components/Theme"; +import { ToggleIcon } from "Components/ToggleIcon"; import { DefaultDetailsCollapseValue } from "./AlertGroup/DetailsToggle"; import { AlertGroup } from "./AlertGroup"; @@ -231,11 +230,7 @@ const Grid = observer( onClick={this.onCollapseClick} > - + diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap index 51384fb23..4f6adf74c 100644 --- a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap +++ b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap @@ -18,6 +18,7 @@ exports[` matches snapshot 1`] = ` role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition: transform 0.25s ease-in-out;\\" > matches snapshot 1`] = ` role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition: transform 0.25s ease-in-out;\\" > matches snapshot 1`] = ` role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition: transform 0.25s ease-in-out;\\" > matches snapshot 1`] = ` role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition: transform 0.25s ease-in-out;\\" > matches snapshot 1`] = ` role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition: transform 0.25s ease-in-out;\\" > matches snapshot 1`] = ` role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition: transform 0.25s ease-in-out;\\" > matches snapshot 1`] = ` role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition: transform 0.25s ease-in-out;\\" > matches snapshot 1`] = ` role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition: transform 0.25s ease-in-out;\\" > matches snapshot 1`] = ` role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition:transform 0.25s ease-in-out\\" > matches snapshot 1`] = ` role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition:transform 0.25s ease-in-out\\" > matches snapshot 1`] = ` role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition:transform 0.25s ease-in-out\\" > matches snapshot 1`] = ` role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition: transform 0.25s ease-in-out;\\" > matches snapshot 1`] = ` role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition: transform 0.25s ease-in-out;\\" > matches snapshot 1`] = ` role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition: transform 0.25s ease-in-out;\\" > matches snapshot 1`] = ` role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition: transform 0.25s ease-in-out;\\" > matches snapshot 1`] = ` role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition: transform 0.25s ease-in-out;\\" > matches snapshot 1`] = ` role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition: transform 0.25s ease-in-out;\\" > matches snapshot 1`] = ` role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition: transform 0.25s ease-in-out;\\" > matches snapshot 1`] = ` role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition: transform 0.25s ease-in-out;\\" > - ", () => { it("collapseToggle is called when collapse icon is clicked", () => { const tree = MountedSilenceComment(true); - const collapse = tree.find("svg.fa-chevron-up"); + const collapse = tree.find("svg.fa-chevron-down"); collapse.simulate("click"); expect(CollapseMock).toHaveBeenCalled(); }); diff --git a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap index e6ad918af..3d7e27380 100644 --- a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap +++ b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap @@ -52,14 +52,15 @@ exports[` Matches snapshot when collapsed 1`] = ` @@ -127,14 +128,15 @@ exports[` Matches snapshot when collapsed and multiple cluster @@ -195,6 +197,7 @@ exports[` Matches snapshot when collapsed and multiple cluster role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition: transform 0.25s ease-in-out;\\" > Matches snapshot when expanded 1`] = ` role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition: transform 0.25s ease-in-out;\\" > matches snapshot when collapsed 1`] = ` @@ -140,6 +141,7 @@ exports[` matches snapshot with expaned details 1`] = ` role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\" + style=\\"transition: transform 0.25s ease-in-out;\\" > nameStats.map((nameStats) => ( @@ -72,8 +69,8 @@ const LabelsTable = observer( title="Toggle all / only common labels" delay={[3000, 100]} > - diff --git a/ui/src/Components/SilenceModal/SilenceForm.js b/ui/src/Components/SilenceModal/SilenceForm.js index 49d36e0e3..2c6c5e5d1 100644 --- a/ui/src/Components/SilenceModal/SilenceForm.js +++ b/ui/src/Components/SilenceModal/SilenceForm.js @@ -10,13 +10,12 @@ import { faUser } from "@fortawesome/free-solid-svg-icons/faUser"; import { faCommentDots } from "@fortawesome/free-solid-svg-icons/faCommentDots"; import { faUndoAlt } from "@fortawesome/free-solid-svg-icons/faUndoAlt"; import { faSearch } from "@fortawesome/free-solid-svg-icons/faSearch"; -import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp"; -import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown"; import { AlertStore } from "Stores/AlertStore"; import { SilenceFormStore, SilenceFormStage } from "Stores/SilenceFormStore"; import { Settings } from "Stores/Settings"; import { TooltipWrapper } from "Components/TooltipWrapper"; +import { ToggleIcon } from "Components/ToggleIcon"; import { AlertManagerInput } from "./AlertManagerInput"; import { SilenceMatch } from "./SilenceMatch"; import { DateTimeSelect } from "./DateTimeSelect"; @@ -169,9 +168,7 @@ const SilenceForm = observer( className="btn px-0 cursor-pointer text-muted" onClick={this.previewCollapse.toggle} > - + {silenceFormStore.data.silenceID === null ? null : ( diff --git a/ui/src/Components/ToggleIcon/__snapshots__/index.test.js.snap b/ui/src/Components/ToggleIcon/__snapshots__/index.test.js.snap new file mode 100644 index 000000000..f2eb75cd8 --- /dev/null +++ b/ui/src/Components/ToggleIcon/__snapshots__/index.test.js.snap @@ -0,0 +1,41 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` matches snapshot when closed 1`] = ` +" + + + + +" +`; + +exports[` matches snapshot when open 1`] = ` +" + + + + +" +`; diff --git a/ui/src/Components/ToggleIcon/index.test.js b/ui/src/Components/ToggleIcon/index.test.js new file mode 100644 index 000000000..65d8d9755 --- /dev/null +++ b/ui/src/Components/ToggleIcon/index.test.js @@ -0,0 +1,19 @@ +import React from "react"; + +import { shallow } from "enzyme"; + +import toDiffableHtml from "diffable-html"; + +import { ToggleIcon } from "."; + +describe("", () => { + it("matches snapshot when open", () => { + const tree = shallow(); + expect(toDiffableHtml(tree.html())).toMatchSnapshot(); + }); + + it("matches snapshot when closed", () => { + const tree = shallow(); + expect(toDiffableHtml(tree.html())).toMatchSnapshot(); + }); +}); diff --git a/ui/src/Components/ToggleIcon/index.tsx b/ui/src/Components/ToggleIcon/index.tsx new file mode 100644 index 000000000..90b24cc6f --- /dev/null +++ b/ui/src/Components/ToggleIcon/index.tsx @@ -0,0 +1,22 @@ +import React, { FunctionComponent } from "react"; + +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown"; + +const ToggleIcon: FunctionComponent<{ + isOpen: boolean; + className?: string; + onClick?: any; +}> = ({ className, isOpen, onClick }) => { + return ( + + ); +}; + +export { ToggleIcon };