added button to copy report links to share w/ burnettk

spiffworkflow-frontend/src/components/Filters.tsx

@@ -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 }}
+            sm={{ span: 2, offset: 2 }}
-            md={{ span: 1, offset: 7 }}
+            md={{ span: 2, offset: 6 }}
-            lg={{ span: 1, offset: 15 }}
+            lg={{ span: 2, offset: 14 }}
           >
-            <Button
+            {buttonElements()}
-              data-qa="filter-section-expand-toggle"
-              renderIcon={Filter}
-              iconDescription="Filter Options"
-              hasIconOnly
-              size="md"
-              onClick={toggleShowFilterOptions}
-            />
           </Column>
         </Grid>
         {filterOptions()}

spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx

@@ -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 }}>

spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx

@@ -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"
       />