added button to copy report links to share w/ burnettk

This commit is contained in:
jasquat 2023-10-03 10:43:22 -04:00
parent f754ee1658
commit 3e79fbadf9
3 changed files with 62 additions and 14 deletions

View File

@ -1,5 +1,7 @@
import { Filter } from '@carbon/icons-react';
import { Filter, Link as LinkIcon } from '@carbon/icons-react';
import { Button, Grid, Column } from '@carbon/react';
import { useState } from 'react';
import { Notification } from './Notification';
type OwnProps = {
showFilterOptions: boolean;
@ -7,6 +9,7 @@ type OwnProps = {
filterOptions: Function;
filtersEnabled?: boolean;
reportSearchComponent?: Function | null;
reportHash?: string | null;
};
export default function Filters({
@ -15,16 +18,67 @@ export default function Filters({
filterOptions,
reportSearchComponent = null,
filtersEnabled = true,
reportHash,
}: OwnProps) {
const toggleShowFilterOptions = () => {
setShowFilterOptions(!showFilterOptions);
};
const [copiedReportLinktoClipboard, setCopiedReportLinkToClipboard] =
useState<boolean>(false);
const copyReportLink = () => {
if (reportHash) {
const piShortLink = `${window.location.origin}${window.location.pathname}?report_hash=${reportHash}`;
navigator.clipboard.writeText(piShortLink);
setCopiedReportLinkToClipboard(true);
}
};
const buttonElements = () => {
const elements = [];
if (reportHash && showFilterOptions) {
elements.push(
<Button
onClick={copyReportLink}
kind=""
renderIcon={LinkIcon}
iconDescription="Copy shareable link"
hasIconOnly
size="md"
/>
);
}
elements.push(
<Button
data-qa="filter-section-expand-toggle"
renderIcon={Filter}
iconDescription="Filter Options"
hasIconOnly
size="md"
onClick={toggleShowFilterOptions}
/>
);
if (copiedReportLinktoClipboard) {
elements.push(
<Notification
onClose={() => setCopiedReportLinkToClipboard(false)}
type="success"
title="Copied link to clipboard"
timeout={2000}
hideCloseButton
withBottomMargin={false}
/>
);
}
return elements;
};
if (filtersEnabled) {
let reportSearchSection = null;
if (reportSearchComponent) {
reportSearchSection = (
<Column sm={3} md={7} lg={15}>
<Column sm={2} md={6} lg={14}>
{reportSearchComponent()}
</Column>
);
@ -35,18 +89,11 @@ export default function Filters({
{reportSearchSection}
<Column
className="filter-icon"
sm={{ span: 1, offset: 3 }}
md={{ span: 1, offset: 7 }}
lg={{ span: 1, offset: 15 }}
sm={{ span: 2, offset: 2 }}
md={{ span: 2, offset: 6 }}
lg={{ span: 2, offset: 14 }}
>
<Button
data-qa="filter-section-expand-toggle"
renderIcon={Filter}
iconDescription="Filter Options"
hasIconOnly
size="md"
onClick={toggleShowFilterOptions}
/>
{buttonElements()}
</Column>
</Grid>
{filterOptions()}

View File

@ -1913,6 +1913,7 @@ export default function ProcessInstanceListTable({
setShowFilterOptions={setShowFilterOptions}
reportSearchComponent={reportSearchComponent}
filtersEnabled={filtersEnabled}
reportHash={reportHash}
/>
</Column>
<Column sm={{ span: 4 }} md={{ span: 8 }} lg={{ span: 16 }}>

View File

@ -535,7 +535,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
onClick={copyProcessInstanceShortLink}
kind="ghost"
renderIcon={LinkIcon}
iconDescription="Copy short link for sharing"
iconDescription="Copy shareable short link"
hasIconOnly
size="lg"
/>