github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-05 03:16:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): upgrade toast shouldn't have close icon

Browse Source
This commit is contained in:
Łukasz Mierzwa
2021-02-28 13:59:38 +00:00
committed by Łukasz Mierzwa
parent 3f1e3e420b
commit 0ab58b86f2
4 changed files with 42 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/Components/Toast/AppToasts.tsx
View File

@@ -56,6 +56,7 @@ const AppToasts: FC<{
message={upstream.error}
/>
}
hasClose
/>
))}
{alertStore.info.upgradeReady ? (
@@ -64,6 +65,7 @@ const AppToasts: FC<{
icon={faArrowUp}
iconClass="text-success"
message={<UpgradeToastMessage alertStore={alertStore} />}
hasClose={false}
/>
) : null}
</ToastContainer>

18
ui/src/Components/Toast/__snapshots__/AppToasts.test.tsx.snap
View File

@@ -99,24 +99,6 @@ 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 cursor-pointer with-click with-click-dark\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"times\\"
class=\\"svg-inline--fa fa-times fa-w-11 \\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 352 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"
>
</path>
</svg>
</span>
</div>
</div>
</div>
</div>

28
ui/src/Components/Toast/index.test.tsx
View File

@@ -17,6 +17,7 @@ describe("<Toast />", () => {
icon={faExclamation}
iconClass="text-danger"
message="fake error"
hasClose
/>
);
expect(toDiffableHtml(tree.html())).toMatch(/fake error/);
@@ -28,6 +29,7 @@ describe("<Toast />", () => {
icon={faExclamation}
iconClass="text-danger"
message="fake error"
hasClose
/>
);
expect(toDiffableHtml(tree.html())).toMatch(/fake error/);
@@ -42,6 +44,7 @@ describe("<Toast />", () => {
icon={faExclamation}
iconClass="text-danger"
message="fake error"
hasClose
/>
);
expect(toDiffableHtml(tree.html())).toMatch(/fake error/);
@@ -57,12 +60,37 @@ describe("<Toast />", () => {
expect(toDiffableHtml(tree.html())).toMatch(/fake error/);
});
it("renders close icon when hasClose=true", () => {
const tree = mount(
<Toast
icon={faExclamation}
iconClass="text-danger"
message="fake error"
hasClose={true}
/>
);
expect(toDiffableHtml(tree.html())).toMatch(/fa-times/);
});
it("doesn't render close icon when hasClose=false", () => {
const tree = mount(
<Toast
icon={faExclamation}
iconClass="text-danger"
message="fake error"
hasClose={false}
/>
);
expect(toDiffableHtml(tree.html())).not.toMatch(/fa-times/);
});
it("unmounts cleanly", () => {
const tree = mount(
<Toast
icon={faExclamation}
iconClass="text-danger"
message="fake error"
hasClose
/>
);
tree.unmount();

21
ui/src/Components/Toast/index.tsx
View File

@@ -15,7 +15,8 @@ const Toast: FC<{
icon: IconDefinition;
iconClass: string;
message: ReactNode;
}> = ({ icon, iconClass, message }) => {
hasClose: boolean;
}> = ({ icon, iconClass, message, hasClose }) => {
const [isOpen, setIsOpen] = useState(true);
useEffect(() => {
@@ -41,14 +42,16 @@ const Toast: FC<{
<div className="flex-shrink-1 flex-grow-1 align-self-center ml-1 mr-3 text-break text-wrap">
{message}
</div>
<div className="flex-shrink-0 flex-grow-0 align-self-top">
<span
className="badge components-label cursor-pointer with-click with-click-dark"
onClick={() => setIsOpen(false)}
>
<FontAwesomeIcon icon={faTimes} />
</span>
</div>
{hasClose ? (
<div className="flex-shrink-0 flex-grow-0 align-self-top">
<span
className="badge components-label cursor-pointer with-click with-click-dark"
onClick={() => setIsOpen(false)}
>
<FontAwesomeIcon icon={faTimes} />
</span>
</div>
) : null}
</div>
</div>
);