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

fix(ui): avoid overflows on silence collapse toggle

Browse Source
This commit is contained in:
Łukasz Mierzwa
2019-10-27 11:28:23 +00:00
parent f470ba98d5
commit 16f2d74603
7 changed files with 243 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
View File

@@ -288,61 +288,57 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
</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=\\"card-header border-bottom-0\\">
<div class=\\"d-flex flex-row justify-content-between mw-100\\">
<div class=\\"flex-grow-1 flex-shrink-1 mr-2\\">
<div class=\\"my-1\\">
<div class=\\"d-flex flex-row\\">
<div class=\\"flex-shrink-0 flex-grow-0 mr-2\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"bell-slash\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 640 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
>
</path>
</svg>
</div>
<div class=\\"flex-shrink-1 flex-grow-1\\">
<span class=\\"font-italic\\"
width=\\"0\\"
>
<span>
</span>
<span>
Mocked Silence
</span>
<span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
…
</span>
</span>
<span class=\\"blockquote-footer pt-1\\">
<cite class=\\"components-grid-alertgroup-silences mr-2\\">
me@example.com
</cite>
<span class=\\"badge badge-danger align-text-bottom p-1\\">
Expired
<time datetime=\\"946688400000\\">
14 hours ago
</time>
</span>
</span>
</div>
</div>
</div>
<div class=\\"card-header border-bottom-0 px-3\\">
<div class=\\"d-flex flex-row\\">
<div class=\\"flex-shrink-0 flex-grow-0 mr-2\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"bell-slash\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 640 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
>
</path>
</svg>
</div>
<div class=\\"flex-shrink-1 flex-grow-1\\">
<span class=\\"font-italic\\"
width=\\"0\\"
>
<span>
</span>
<span>
Mocked Silence
</span>
<span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
…
</span>
</span>
</div>
</div>
<div class=\\"pt-1 d-flex flex-row justify-content-between\\">
<div class=\\"flex-shrink-1 flex-grow-1 components-managed-silence-cite\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
<span class=\\"badge badge-danger align-text-bottom p-1\\">
Expired
<time datetime=\\"946688400000\\">
14 hours ago
</time>
</span>
</div>
<div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 text-muted cursor-pointer\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 ml-2 text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"

43
ui/src/Components/ManagedSilence/SilenceComment.js
View File

@@ -4,13 +4,20 @@ import PropTypes from "prop-types";
import Truncate from "react-truncate";
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 { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
import { faBellSlash } from "@fortawesome/free-solid-svg-icons/faBellSlash";
import { APISilence } from "Models/API";
import { SilenceProgress } from "./SilenceProgress";
const SilenceComment = ({ silence, collapsed, afterUpdate }) => {
const SilenceComment = ({
silence,
collapsed,
collapseToggle,
afterUpdate
}) => {
const commentBody = (
<Truncate className="font-italic" lines={collapsed ? 2 : false}>
{silence.comment}
@@ -26,25 +33,35 @@ const SilenceComment = ({ silence, collapsed, afterUpdate }) => {
);
return (
<div className="d-flex flex-row">
<div className="flex-shrink-0 flex-grow-0 mr-2">
<FontAwesomeIcon icon={faBellSlash} className="text-muted" />
<React.Fragment>
<div className="d-flex flex-row">
<div className="flex-shrink-0 flex-grow-0 mr-2">
<FontAwesomeIcon icon={faBellSlash} className="text-muted" />
</div>
<div className="flex-shrink-1 flex-grow-1">{comment}</div>
</div>
<div className="flex-shrink-1 flex-grow-1">
{comment}
<span className="blockquote-footer pt-1">
<cite className="components-grid-alertgroup-silences mr-2">
{silence.createdBy}
</cite>
<div className="pt-1 d-flex flex-row justify-content-between">
<div className="flex-shrink-1 flex-grow-1 components-managed-silence-cite">
<span className="text-muted mr-2 font-italic">
&mdash; {silence.createdBy}
</span>
{collapsed ? <SilenceProgress silence={silence} /> : null}
</span>
</div>
<div className="flex-grow-0 flex-shrink-0 mt-auto mb-0">
<FontAwesomeIcon
icon={collapsed ? faChevronUp : faChevronDown}
className="ml-2 text-muted cursor-pointer"
onClick={collapseToggle}
/>
</div>
</div>
</div>
</React.Fragment>
);
};
SilenceComment.propTypes = {
silence: APISilence.isRequired,
collapsed: PropTypes.bool.isRequired
collapsed: PropTypes.bool.isRequired,
collapseToggle: PropTypes.func.isRequired
};
export { SilenceComment };

17
ui/src/Components/ManagedSilence/SilenceComment.test.js
View File

@@ -18,8 +18,16 @@ afterEach(() => {
fetch.resetMocks();
});
const CollapseMock = jest.fn();
const MountedSilenceComment = collapsed => {
return mount(<SilenceComment silence={silence} collapsed={collapsed} />);
return mount(
<SilenceComment
silence={silence}
collapsed={collapsed}
collapseToggle={CollapseMock}
/>
);
};
describe("<SilenceComment />", () => {
@@ -46,4 +54,11 @@ describe("<SilenceComment />", () => {
const tree = MountedSilenceComment(false);
expect(tree.find("a[href='http://localhost/1234']")).toHaveLength(1);
});
it("collapseToggle is called when collapse icon is clicked", () => {
const tree = MountedSilenceComment(true);
const collapse = tree.find("svg.fa-chevron-up");
collapse.simulate("click");
expect(CollapseMock).toHaveBeenCalled();
});
});

64
ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
View File

@@ -32,17 +32,35 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
…
</span>
</span>
<span class=\\"blockquote-footer pt-1\\">
<cite class=\\"components-grid-alertgroup-silences mr-2\\">
me@example.com
</cite>
<span class=\\"badge badge-danger align-text-bottom p-1\\">
Expired
<time datetime=\\"946688400000\\">
20 years ago
</time>
</span>
</div>
</div>
<div class=\\"pt-1 d-flex flex-row justify-content-between\\">
<div class=\\"flex-shrink-1 flex-grow-1 components-managed-silence-cite\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
<span class=\\"badge badge-danger align-text-bottom p-1\\">
Expired
<time datetime=\\"946688400000\\">
20 years ago
</time>
</span>
</div>
<div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 ml-2 text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z\\"
>
</path>
</svg>
</div>
</div>
"
@@ -80,12 +98,30 @@ exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
…
</span>
</span>
<span class=\\"blockquote-footer pt-1\\">
<cite class=\\"components-grid-alertgroup-silences mr-2\\">
me@example.com
</cite>
</div>
</div>
<div class=\\"pt-1 d-flex flex-row justify-content-between\\">
<div class=\\"flex-shrink-1 flex-grow-1 components-managed-silence-cite\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
</div>
<div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 ml-2 text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
>
<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>
</div>
</div>
"
`;

192
ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
View File

@@ -3,71 +3,67 @@
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=\\"card-header border-bottom-0\\">
<div class=\\"d-flex flex-row justify-content-between mw-100\\">
<div class=\\"flex-grow-1 flex-shrink-1 mr-2\\">
<div class=\\"my-1\\">
<div class=\\"d-flex flex-row\\">
<div class=\\"flex-shrink-0 flex-grow-0 mr-2\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"bell-slash\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 640 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
>
</path>
</svg>
</div>
<div class=\\"flex-shrink-1 flex-grow-1\\">
<span class=\\"font-italic\\"
width=\\"0\\"
>
<span>
</span>
<span>
Mocked Silence
</span>
<span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
…
</span>
</span>
<span class=\\"blockquote-footer pt-1\\">
<cite class=\\"components-grid-alertgroup-silences mr-2\\">
me@example.com
</cite>
<span class=\\"badge badge-light nmb-05 align-text-bottom p-1\\">
Expires
<time datetime=\\"946688400000\\">
in 30 minutes
</time>
<div class=\\"progress silence-progress bg-white\\">
<div class=\\"progress-bar bg-success\\"
role=\\"progressbar\\"
style=\\"width: 50%;\\"
aria-valuenow=\\"50\\"
aria-valuemin=\\"0\\"
aria-valuemax=\\"100\\"
>
</div>
</div>
</span>
</span>
<div class=\\"card-header border-bottom-0 px-3\\">
<div class=\\"d-flex flex-row\\">
<div class=\\"flex-shrink-0 flex-grow-0 mr-2\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"bell-slash\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 640 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
>
</path>
</svg>
</div>
<div class=\\"flex-shrink-1 flex-grow-1\\">
<span class=\\"font-italic\\"
width=\\"0\\"
>
<span>
</span>
<span>
Mocked Silence
</span>
<span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
…
</span>
</span>
</div>
</div>
<div class=\\"pt-1 d-flex flex-row justify-content-between\\">
<div class=\\"flex-shrink-1 flex-grow-1 components-managed-silence-cite\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
<span class=\\"badge badge-light nmb-05 align-text-bottom p-1\\">
Expires
<time datetime=\\"946688400000\\">
in 30 minutes
</time>
<div class=\\"progress silence-progress bg-white\\">
<div class=\\"progress-bar bg-success\\"
role=\\"progressbar\\"
style=\\"width: 50%;\\"
aria-valuenow=\\"50\\"
aria-valuemin=\\"0\\"
aria-valuemax=\\"100\\"
>
</div>
</div>
</div>
</span>
</div>
<div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 text-muted cursor-pointer\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 ml-2 text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
@@ -87,55 +83,51 @@ 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=\\"card-header border-bottom-0\\">
<div class=\\"d-flex flex-row justify-content-between mw-100\\">
<div class=\\"flex-grow-1 flex-shrink-1 mr-2\\">
<div class=\\"my-1\\">
<div class=\\"d-flex flex-row\\">
<div class=\\"flex-shrink-0 flex-grow-0 mr-2\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"bell-slash\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 640 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
>
</path>
</svg>
</div>
<div class=\\"flex-shrink-1 flex-grow-1\\">
<span class=\\"font-italic\\"
width=\\"0\\"
>
<span>
</span>
<span>
Mocked Silence
</span>
<span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
…
</span>
</span>
<span class=\\"blockquote-footer pt-1\\">
<cite class=\\"components-grid-alertgroup-silences mr-2\\">
me@example.com
</cite>
</span>
</div>
</div>
</div>
<div class=\\"card-header border-bottom-0 px-3\\">
<div class=\\"d-flex flex-row\\">
<div class=\\"flex-shrink-0 flex-grow-0 mr-2\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"bell-slash\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 640 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
>
</path>
</svg>
</div>
<div class=\\"flex-shrink-1 flex-grow-1\\">
<span class=\\"font-italic\\"
width=\\"0\\"
>
<span>
</span>
<span>
Mocked Silence
</span>
<span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
…
</span>
</span>
</div>
</div>
<div class=\\"pt-1 d-flex flex-row justify-content-between\\">
<div class=\\"flex-shrink-1 flex-grow-1 components-managed-silence-cite\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
</div>
<div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 text-muted cursor-pointer\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 ml-2 text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"

28
ui/src/Components/ManagedSilence/index.js
View File

@@ -4,10 +4,6 @@ import PropTypes from "prop-types";
import { observable, action } from "mobx";
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 { APISilence } from "Models/API";
import { AlertStore } from "Stores/AlertStore";
import { SilenceFormStore, SilenceTabNames } from "Stores/SilenceFormStore";
@@ -73,24 +69,12 @@ const ManagedSilence = observer(
return (
<MountFade in={true}>
<div className="card my-1 components-managed-silence">
<div className="card-header border-bottom-0">
<div className="d-flex flex-row justify-content-between mw-100">
<div className="flex-grow-1 flex-shrink-1 mr-2">
<div className="my-1">
<SilenceComment
silence={silence}
collapsed={this.collapse.value}
/>
</div>
</div>
<div className="flex-grow-0 flex-shrink-0 mt-auto mb-0">
<FontAwesomeIcon
icon={this.collapse.value ? faChevronUp : faChevronDown}
className="text-muted cursor-pointer"
onClick={this.collapse.toggle}
/>
</div>
</div>
<div className="card-header border-bottom-0 px-3">
<SilenceComment
silence={silence}
collapsed={this.collapse.value}
collapseToggle={this.collapse.toggle}
/>
</div>
{this.collapse.value ? null : (

4
ui/src/Components/ManagedSilence/index.scss
View File

@@ -12,3 +12,7 @@
border-left-color: $gray-700;
}
}
.components-managed-silence-cite {
font-size: 85%;
}