github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-08-23 11:56:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): replace MountFade with react-reveal Fade

Browse Source
This commit is contained in:
Łukasz Mierzwa
2020-04-16 10:06:33 +01:00
committed by Łukasz Mierzwa
parent 55c3bd460e
commit c8dfeb7a66
19 changed files with 149 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/Components/Animations/MountFade/index.js
-20
View File
@@ -1,20 +0,0 @@
import React from "react";
import PropTypes from "prop-types";
import { CSSTransition } from "react-transition-group";
const MountFade = ({ children, duration, ...props }) => (
<CSSTransition
classNames="components-animation-fade"
timeout={300}
appear={true}
{...props}
>
{children}
</CSSTransition>
);
MountFade.propTypes = {
children: PropTypes.node.isRequired,
};
export { MountFade };
ui/src/Components/CenteredMessage/__snapshots__/index.test.js.snap
+4 -2
View File
@@ -3,8 +3,10 @@
exports[`<CenteredMessage /> matches snapshot 1`] = `
"
<h1 class=\\"display-1 text-placeholder screen-center\\">
<div>
Foo
<div class=\\"react-reveal\\">
<div>
Foo
</div>
</div>
</h1>
"
ui/src/Components/CenteredMessage/index.js
+4 -2
View File
@@ -1,6 +1,6 @@
import React from "react";
import { MountFade } from "Components/Animations/MountFade";
import { Fade } from "react-reveal";
const CenteredMessage = ({ children, className }) => (
<h1
@@ -8,7 +8,9 @@ const CenteredMessage = ({ children, className }) => (
className ? className : "display-1 text-placeholder"
} screen-center`}
>
<MountFade in={true}>{children}</MountFade>
<Fade in={true} duration={500}>
{children}
</Fade>
</h1>
);
ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
+3 -1
View File
@@ -287,7 +287,9 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
link
</a>
<div class=\\"components-grid-alertgrid-alertgroup-shared-silence rounded-0 border-0\\">
<div class=\\"card my-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
<div class=\\"react-reveal card my-1 components-managed-silence\\"
style=\\"opacity: 1;\\"
>
<div class=\\"card-header rounded-0 border-bottom-0 px-3\\">
<div class=\\"d-flex flex-row\\">
<div class=\\"flex-shrink-0 flex-grow-0\\">
ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
+22 -7
View File
@@ -6,6 +6,8 @@ import { observable, action, toJS } from "mobx";
import hash from "object-hash";
import { Fade } from "react-reveal";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus } from "@fortawesome/free-solid-svg-icons/faPlus";
import { faMinus } from "@fortawesome/free-solid-svg-icons/faMinus";
@@ -15,7 +17,6 @@ import { Settings } from "Stores/Settings";
import { AlertStore } from "Stores/AlertStore";
import { SilenceFormStore } from "Stores/SilenceFormStore";
import { BackgroundClassMap } from "Common/Colors";
import { MountFade } from "Components/Animations/MountFade";
import { TooltipWrapper } from "Components/TooltipWrapper";
import { GroupHeader } from "./GroupHeader";
import { Alert } from "./Alert";
@@ -72,12 +73,17 @@ const AlertGroup = observer(
{
alertsToRender: this.defaultRenderCount,
isMenuOpen: false,
animationDone: false,
setIsMenuOpen(val) {
this.isMenuOpen = val;
},
setAnimationDone() {
this.animationDone = true;
},
},
{
setIsMenuOpen: action.bound,
setAnimationDone: action.bound,
}
);
@@ -222,10 +228,19 @@ const AlertGroup = observer(
}
return (
<MountFade in={true}>
<div
className="components-grid-alertgrid-alertgroup"
style={{ ...style, ...extraStyle }}
<div
className={`components-grid-alertgrid-alertgroup ${
this.renderConfig.animationDone
? "components-animation-fade-appear-done"
: ""
}`}
style={{ ...style, ...extraStyle }}
>
<Fade
in={true}
duration={500}
wait={500}
onReveal={this.renderConfig.setAnimationDone}
>
<div className={`card ${cardBackgroundClass}`}>
<GroupHeader
@@ -292,8 +307,8 @@ const AlertGroup = observer(
/>
) : null}
</div>
</div>
</MountFade>
</Fade>
</div>
);
}
}
ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js
+20
View File
@@ -29,6 +29,8 @@ const MockGroup = (groupName) => {
let originalInnerWidth;
beforeAll(() => {
jest.useFakeTimers();
originalInnerWidth = global.innerWidth;
});
@@ -91,6 +93,24 @@ describe("<AlertGroup />", () => {
tree.unmount();
});
it("appends components-animation-fade-appear-done class after 1s", () => {
MockAlerts(5);
const tree = MountedAlertGroup(jest.fn(), true);
expect(
tree
.find("div.components-grid-alertgrid-alertgroup")
.hasClass("components-animation-fade-appear-done")
).toBe(false);
tree.instance().renderConfig.setAnimationDone();
tree.update();
expect(
tree
.find("div.components-grid-alertgrid-alertgroup")
.hasClass("components-animation-fade-appear-done")
).toBe(true);
});
it("renders Alertmanager labels in footer if showAlertmanagersInFooter=true", () => {
MockAlerts(2);
const tree = MountedAlertGroup(jest.fn(), true).find("AlertGroup");
ui/src/Components/Grid/AlertGrid/Grid.js
+55 -50
View File
@@ -6,6 +6,8 @@ import { observer } from "mobx-react";
import debounce from "lodash/debounce";
import { Fade } from "react-reveal";
import FontFaceObserver from "fontfaceobserver";
import MasonryInfiniteScroller from "react-masonry-infinite";
@@ -23,7 +25,6 @@ import { APIGrid } from "Models/API";
import { FilteringLabel } from "Components/Labels/FilteringLabel";
import { FilteringCounterBadge } from "Components/Labels/FilteringCounterBadge";
import { TooltipWrapper } from "Components/TooltipWrapper";
import { MountFade } from "Components/Animations/MountFade";
import { DefaultDetailsCollapseValue } from "./AlertGroup/DetailsToggle";
import { AlertGroup } from "./AlertGroup";
@@ -180,59 +181,63 @@ const Grid = observer(
return (
<React.Fragment>
<MountFade in={grid.labelName !== ""} unmountOnExit>
<h5 className="components-grid-swimlane d-flex flex-row justify-content-between rounded px-2 py-1 mt-2 mb-0 border border-dark">
<span
className="flex-shrink-1 flex-grow-1"
style={{ minWidth: "0px" }}
>
<span className="badge components-label px-0 ml-0 mr-3">
<FontAwesomeIcon icon={faTh} className="text-muted" />
{grid.labelName !== "" && (
<Fade in={true} duration={500}>
<h5 className="components-grid-swimlane d-flex flex-row justify-content-between rounded px-2 py-1 mt-2 mb-0 border border-dark">
<span
className="flex-shrink-1 flex-grow-1"
style={{ minWidth: "0px" }}
>
<span className="badge components-label px-0 ml-0 mr-3">
<FontAwesomeIcon icon={faTh} className="text-muted" />
</span>
{grid.labelName !== "" && grid.labelValue !== "" && (
<FilteringLabel
key={grid.labelValue}
name={grid.labelName}
value={grid.labelValue}
alertStore={alertStore}
/>
)}
</span>
{grid.labelName !== "" && grid.labelValue !== "" && (
<FilteringLabel
key={grid.labelValue}
name={grid.labelName}
value={grid.labelValue}
<span className="flex-shrink-0 flex-grow-0 ml-2 mr-0">
<FilteringCounterBadge
name="@state"
value="unprocessed"
counter={grid.stateCount.unprocessed}
themed={true}
alertStore={alertStore}
/>
)}
</span>
<span className="flex-shrink-0 flex-grow-0 ml-2 mr-0">
<FilteringCounterBadge
name="@state"
value="unprocessed"
counter={grid.stateCount.unprocessed}
themed={true}
alertStore={alertStore}
/>
<FilteringCounterBadge
name="@state"
value="suppressed"
counter={grid.stateCount.suppressed}
themed={true}
alertStore={alertStore}
/>
<FilteringCounterBadge
name="@state"
value="active"
counter={grid.stateCount.active}
themed={true}
alertStore={alertStore}
/>
<span
className="text-muted cursor-pointer badge px-0 components-label ml-2 mr-0"
onClick={this.onCollapseClick}
>
<TooltipWrapper title="Click to toggle this grid details or Alt+Click to toggle all grids">
<FontAwesomeIcon
icon={this.gridToggle.show ? faChevronDown : faChevronUp}
/>
</TooltipWrapper>
<FilteringCounterBadge
name="@state"
value="suppressed"
counter={grid.stateCount.suppressed}
themed={true}
alertStore={alertStore}
/>
<FilteringCounterBadge
name="@state"
value="active"
counter={grid.stateCount.active}
themed={true}
alertStore={alertStore}
/>
<span
className="text-muted cursor-pointer badge px-0 components-label ml-2 mr-0"
onClick={this.onCollapseClick}
>
<TooltipWrapper title="Click to toggle this grid details or Alt+Click to toggle all grids">
<FontAwesomeIcon
icon={
this.gridToggle.show ? faChevronDown : faChevronUp
}
/>
</TooltipWrapper>
</span>
</span>
</span>
</h5>
</MountFade>
</h5>
</Fade>
)}
<MasonryInfiniteScroller
key={settingsStore.gridConfig.config.groupWidth}
ref={this.storeMasonryRef}
ui/src/Components/Grid/EmptyGrid/__snapshots__/index.test.js.snap
+15 -13
View File
@@ -3,20 +3,22 @@
exports[`<EmptyGrid /> matches snapshot 1`] = `
"
<h1 class=\\"display-1 text-placeholder screen-center\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"mug-hot\\"
class=\\"svg-inline--fa fa-mug-hot fa-w-16 screen-center-icon-big text-placeholder\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M127.1 146.5c1.3 7.7 8 13.5 16 13.5h16.5c9.8 0 17.6-8.5 16.3-18-3.8-28.2-16.4-54.2-36.6-74.7-14.4-14.7-23.6-33.3-26.4-53.5C111.8 5.9 105 0 96.8 0H80.4C70.6 0 63 8.5 64.1 18c3.9 31.9 18 61.3 40.6 84.4 12 12.2 19.7 27.5 22.4 44.1zm112 0c1.3 7.7 8 13.5 16 13.5h16.5c9.8 0 17.6-8.5 16.3-18-3.8-28.2-16.4-54.2-36.6-74.7-14.4-14.7-23.6-33.3-26.4-53.5C223.8 5.9 217 0 208.8 0h-16.4c-9.8 0-17.5 8.5-16.3 18 3.9 31.9 18 61.3 40.6 84.4 12 12.2 19.7 27.5 22.4 44.1zM400 192H32c-17.7 0-32 14.3-32 32v192c0 53 43 96 96 96h192c53 0 96-43 96-96h16c61.8 0 112-50.2 112-112s-50.2-112-112-112zm0 160h-16v-96h16c26.5 0 48 21.5 48 48s-21.5 48-48 48z\\"
<div class=\\"react-reveal\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"mug-hot\\"
class=\\"svg-inline--fa fa-mug-hot fa-w-16 screen-center-icon-big text-placeholder\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
</path>
</svg>
<path fill=\\"currentColor\\"
d=\\"M127.1 146.5c1.3 7.7 8 13.5 16 13.5h16.5c9.8 0 17.6-8.5 16.3-18-3.8-28.2-16.4-54.2-36.6-74.7-14.4-14.7-23.6-33.3-26.4-53.5C111.8 5.9 105 0 96.8 0H80.4C70.6 0 63 8.5 64.1 18c3.9 31.9 18 61.3 40.6 84.4 12 12.2 19.7 27.5 22.4 44.1zm112 0c1.3 7.7 8 13.5 16 13.5h16.5c9.8 0 17.6-8.5 16.3-18-3.8-28.2-16.4-54.2-36.6-74.7-14.4-14.7-23.6-33.3-26.4-53.5C223.8 5.9 217 0 208.8 0h-16.4c-9.8 0-17.5 8.5-16.3 18 3.9 31.9 18 61.3 40.6 84.4 12 12.2 19.7 27.5 22.4 44.1zM400 192H32c-17.7 0-32 14.3-32 32v192c0 53 43 96 96 96h192c53 0 96-43 96-96h16c61.8 0 112-50.2 112-112s-50.2-112-112-112zm0 160h-16v-96h16c26.5 0 48 21.5 48 48s-21.5 48-48 48z\\"
>
</path>
</svg>
</div>
</h1>
"
`;
ui/src/Components/Grid/FatalError/__snapshots__/index.test.js.snap
+1 -1
View File
@@ -3,7 +3,7 @@
exports[`<FatalError /> matches snapshot 1`] = `
"
<h1 class=\\"display-1 text-placeholder screen-center\\">
<div class=\\"container-fluid text-center\\">
<div class=\\"react-reveal container-fluid text-center\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
ui/src/Components/Grid/ReloadNeeded/__snapshots__/index.test.js.snap
+1 -1
View File
@@ -3,7 +3,7 @@
exports[`<ReloadNeeded /> matches snapshot 1`] = `
"
<h1 class=\\"display-1 text-placeholder screen-center\\">
<div class=\\"container-fluid text-center\\">
<div class=\\"react-reveal container-fluid text-center\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.js.snap
+1 -1
View File
@@ -3,7 +3,7 @@
exports[`<UpgradeNeeded /> matches snapshot 1`] = `
"
<h1 class=\\"display-1 text-placeholder screen-center\\">
<div class=\\"container-fluid text-center\\">
<div class=\\"react-reveal container-fluid text-center\\">
<div class=\\"shake-slow shake-constant mb-4\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
+6 -2
View File
@@ -2,7 +2,9 @@
exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
"
<div class=\\"card my-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
<div class=\\"react-reveal card my-1 components-managed-silence\\"
style=\\"opacity: 1;\\"
>
<div class=\\"card-header rounded-0 border-bottom-0 px-3\\">
<div class=\\"d-flex flex-row\\">
<div class=\\"flex-shrink-0 flex-grow-0\\">
@@ -85,7 +87,9 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
"
<div class=\\"card my-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
<div class=\\"react-reveal card my-1 components-managed-silence\\"
style=\\"opacity: 1;\\"
>
<div class=\\"card-header rounded-0 border-bottom-0 px-3\\">
<div class=\\"d-flex flex-row\\">
<div class=\\"flex-shrink-0 flex-grow-0\\">
ui/src/Components/ManagedSilence/index.js
+4 -3
View File
@@ -4,10 +4,11 @@ import PropTypes from "prop-types";
import { observable, action } from "mobx";
import { observer } from "mobx-react";
import { Fade } from "react-reveal";
import { APISilence } from "Models/API";
import { AlertStore } from "Stores/AlertStore";
import { SilenceFormStore, SilenceTabNames } from "Stores/SilenceFormStore";
import { MountFade } from "Components/Animations/MountFade";
import { SilenceComment } from "./SilenceComment";
import { SilenceDetails } from "./SilenceDetails";
@@ -77,7 +78,7 @@ const ManagedSilence = observer(
} = this.props;
return (
<MountFade in={true}>
<Fade in={true} duration={500}>
<div className="card my-1 components-managed-silence">
<div className="card-header rounded-0 border-bottom-0 px-3">
<SilenceComment
@@ -104,7 +105,7 @@ const ManagedSilence = observer(
</div>
)}
</div>
</MountFade>
</Fade>
);
}
}
ui/src/Components/SilenceModal/Browser/index.js
+4 -3
View File
@@ -6,6 +6,8 @@ import { observer } from "mobx-react";
import debounce from "lodash/debounce";
import { Fade } from "react-reveal";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSpinner } from "@fortawesome/free-solid-svg-icons/faSpinner";
import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle";
@@ -16,7 +18,6 @@ import { AlertStore, FormatBackendURI } from "Stores/AlertStore";
import { SilenceFormStore } from "Stores/SilenceFormStore";
import { Settings } from "Stores/Settings";
import { FetchGet } from "Common/Fetch";
import { MountFade } from "Components/Animations/MountFade";
import { ManagedSilence } from "Components/ManagedSilence";
import { PageSelect } from "Components/Pagination";
@@ -33,11 +34,11 @@ FetchError.propTypes = {
};
const Placeholder = ({ content }) => (
<MountFade in={true}>
<Fade in={true} duration={500}>
<div className="jumbotron bg-transparent">
<h1 className="display-5 text-placeholder text-center">{content}</h1>
</div>
</MountFade>
</Fade>
);
Placeholder.propTypes = {
content: PropTypes.node.isRequired,
ui/src/Styles/Components/AlertGrid.scss
-9
View File
@@ -1,12 +1,3 @@
.components-grid-alertgrid-alertgroup.components-animation-fade-appear-done {
will-change: transform;
transform: translateZ(0);
transition-property: transform;
transition-duration: 0.4s;
transition-timing-function: ease;
}
.components-grid-swimlane {
font-size: 1.4rem;
background-color: $grid-swimlane-bg;
ui/src/Styles/Components/AlertGroup.scss
+9
View File
@@ -1,3 +1,12 @@
.components-grid-alertgrid-alertgroup.components-animation-fade-appear-done {
will-change: transform;
transform: translateZ(0);
transition-property: transform;
transition-duration: 0.4s;
transition-timing-function: ease;
}
.components-grid-alertgrid-alertgroup {
padding: 0.3rem;
}
ui/src/Styles/Components/MountFade.scss
-12
View File
@@ -1,12 +0,0 @@
.components-animation-fade {
will-change: opacity;
transform: translateZ(0);
}
.components-animation-fade-appear {
opacity: 0.01;
}
.components-animation-fade-appear-active {
opacity: 1;
transition: opacity 0.3s ease-in;
}
ui/src/Styles/DarkTheme.scss
-1
View File
@@ -122,7 +122,6 @@ $color-default: #708090;
@import "Styles/Components/DropdownSlide";
@import "Styles/Components/History";
@import "Styles/Components/HistoryLabel";
@import "Styles/Components/MountFade";
@import "Styles/Components/NavBarSlide";
@import "Styles/Components/SilenceModal";
@import "Styles/Components/Pagination";
ui/src/Styles/LightTheme.scss
-1
View File
@@ -104,7 +104,6 @@ $color-default: #708090;
@import "Styles/Components/DropdownSlide";
@import "Styles/Components/History";
@import "Styles/Components/HistoryLabel";
@import "Styles/Components/MountFade";
@import "Styles/Components/NavBarSlide";
@import "Styles/Components/SilenceModal";
@import "Styles/Components/Pagination";