mirror of
https://github.com/prymitive/karma
synced 2026-05-07 03:26:52 +00:00
feat(ui): add a toggle to toast notifications
This commit is contained in:
Łukasz Mierzwa
committed by
Łukasz Mierzwa
Łukasz Mierzwa
parent
f8cc8f6ee1
commit
c67bdc6f44
@@ -77,6 +77,25 @@ exports[`<AppToasts /> renders UpgradeToastMessage when alertStore.info.upgradeR
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=\\"flex-shrink-0 flex-grow-0 align-self-top\\">
|
||||
<span class=\\"badge components-label with-click with-click-dark\\">
|
||||
<svg aria-hidden=\\"true\\"
|
||||
focusable=\\"false\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"chevron-down\\"
|
||||
class=\\"svg-inline--fa fa-chevron-down fa-w-14 cursor-pointer m-2\\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 448 512\\"
|
||||
style=\\"transition: transform 0.25s ease-in-out;\\"
|
||||
>
|
||||
<path fill=\\"currentColor\\"
|
||||
d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -130,6 +149,25 @@ exports[`<AppToasts /> renders upstream error toasts for each unhealthy upstream
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=\\"flex-shrink-0 flex-grow-0 align-self-top\\">
|
||||
<span class=\\"badge components-label with-click with-click-dark\\">
|
||||
<svg aria-hidden=\\"true\\"
|
||||
focusable=\\"false\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"chevron-down\\"
|
||||
class=\\"svg-inline--fa fa-chevron-down fa-w-14 cursor-pointer m-2\\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 448 512\\"
|
||||
style=\\"transition: transform 0.25s ease-in-out;\\"
|
||||
>
|
||||
<path fill=\\"currentColor\\"
|
||||
d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=\\"m-1 bg-toast text-white rounded shadow components-animation-fade-appear components-animation-fade-appear-active\\">
|
||||
@@ -176,6 +214,25 @@ exports[`<AppToasts /> renders upstream error toasts for each unhealthy upstream
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=\\"flex-shrink-0 flex-grow-0 align-self-top\\">
|
||||
<span class=\\"badge components-label with-click with-click-dark\\">
|
||||
<svg aria-hidden=\\"true\\"
|
||||
focusable=\\"false\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"chevron-down\\"
|
||||
class=\\"svg-inline--fa fa-chevron-down fa-w-14 cursor-pointer m-2\\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 448 512\\"
|
||||
style=\\"transition: transform 0.25s ease-in-out;\\"
|
||||
>
|
||||
<path fill=\\"currentColor\\"
|
||||
d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
39
ui/src/Components/Toast/index.test.tsx
Normal file
39
ui/src/Components/Toast/index.test.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import React from "react";
|
||||
|
||||
import { mount } from "enzyme";
|
||||
|
||||
import toDiffableHtml from "diffable-html";
|
||||
|
||||
import { faExclamation } from "@fortawesome/free-solid-svg-icons/faExclamation";
|
||||
|
||||
import { Toast } from ".";
|
||||
|
||||
describe("<Toast />", () => {
|
||||
it("renders body by default", () => {
|
||||
const tree = mount(
|
||||
<Toast
|
||||
icon={faExclamation}
|
||||
iconClass="text-danger"
|
||||
message="fake error"
|
||||
/>
|
||||
);
|
||||
expect(toDiffableHtml(tree.html())).toMatch(/fake error/);
|
||||
});
|
||||
|
||||
it("toggles body on toggle icon click", () => {
|
||||
const tree = mount(
|
||||
<Toast
|
||||
icon={faExclamation}
|
||||
iconClass="text-danger"
|
||||
message="fake error"
|
||||
/>
|
||||
);
|
||||
expect(toDiffableHtml(tree.html())).toMatch(/fake error/);
|
||||
|
||||
tree.find("svg.cursor-pointer").simulate("click");
|
||||
expect(toDiffableHtml(tree.html())).not.toMatch(/fake error/);
|
||||
|
||||
tree.find("svg.cursor-pointer").simulate("click");
|
||||
expect(toDiffableHtml(tree.html())).toMatch(/fake error/);
|
||||
});
|
||||
});
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { FC, ReactNode } from "react";
|
||||
import React, { FC, ReactNode, useState } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
import TransitionGroup from "react-transition-group/TransitionGroup";
|
||||
@@ -9,12 +9,15 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faCircle } from "@fortawesome/free-solid-svg-icons/faCircle";
|
||||
|
||||
import { ThemeContext } from "Components/Theme";
|
||||
import { ToggleIcon } from "Components/ToggleIcon";
|
||||
|
||||
const Toast: FC<{
|
||||
icon: IconDefinition;
|
||||
iconClass: string;
|
||||
message: ReactNode;
|
||||
}> = ({ icon, iconClass, message }) => {
|
||||
const [isOpen, setIsOpen] = useState(true);
|
||||
|
||||
return (
|
||||
<div className="m-1 bg-toast text-white rounded shadow">
|
||||
<div className="d-flex flex-row p-1">
|
||||
@@ -26,7 +29,16 @@ const Toast: FC<{
|
||||
<FontAwesomeIcon icon={icon} className="fa-stack-1x text-white" />
|
||||
</div>
|
||||
<div className="flex-shrink-1 flex-grow-1 align-self-center ml-1 mr-3 text-break text-wrap">
|
||||
{message}
|
||||
{isOpen ? message : null}
|
||||
</div>
|
||||
<div className="flex-shrink-0 flex-grow-0 align-self-top">
|
||||
<span className="badge components-label with-click with-click-dark">
|
||||
<ToggleIcon
|
||||
isOpen={isOpen}
|
||||
className={`cursor-pointer ${isOpen ? "m-2" : "mr-2"}`}
|
||||
onClick={() => setIsOpen((v) => !v)}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user