From d4dfec8eb93a74420d2ec9e893d382781c9b1edd Mon Sep 17 00:00:00 2001
From: nam-singh <nam.singh@ibm.com>
Date: Mon, 30 Dec 2024 21:16:53 +0530
Subject: [PATCH 1/3] truncating url

---
 report-react/src/SavedReport.tsx | 49 ++++++++++++++++++++++++++++----
 1 file changed, 44 insertions(+), 5 deletions(-)

diff --git a/report-react/src/SavedReport.tsx b/report-react/src/SavedReport.tsx
index de0740343..4ebf6f466 100644
--- a/report-react/src/SavedReport.tsx
+++ b/report-react/src/SavedReport.tsx
@@ -20,7 +20,7 @@ import ScoreCard from './ScoreCard';
 import SummScoreCard from './SummScoreCard';
 import ReportChecklist from './report/ReportChecklist';
 import ReportRules from './report/ReportRules';
-import { ComposedModal, ModalHeader, ModalBody, Grid, Column, Theme,Dropdown,MultiSelect} from '@carbon/react';
+import { ComposedModal, ModalHeader, ModalBody, Grid, Column, Theme,Dropdown,MultiSelect,CodeSnippet,CopyButton} from '@carbon/react';
 import { UtilIssueReact } from "./util/UtilIssueReact";
 import { Violation16,NeedsReview16,Recommendation16,ViewOff16 } from "./util/UtilImages";
 import ReportElements from "./report/ReportElements";
@@ -75,6 +75,10 @@ export class SavedReport extends React.Component<SavedReportProps, SavedReportSt
             this.setState({selectedItems:[...this.state.selectedItems,updatedFilter]})
         }
       }
+    copyToClipboard = () => {
+          if(this.props.reportData)
+        navigator.clipboard.writeText(this.props.reportData.tabURL)
+      };
 
     render() {
        
@@ -173,10 +177,45 @@ const filteredReport = {
                     </Grid>
                     <section aria-label="Report overview: score cards">
                         <Grid>
-                            <Column sm={4} md={4} lg={4}>
-                                <div className="time" style={{paddingTop:"12px"}}>{new Date(this.props.reportData.report.timestamp).toLocaleString()}</div>
-                                <div className="url"><strong>Scanned page:</strong> {this.props.reportData.tabURL}</div>
-                            </Column>
+                        <Column sm={4} md={4} lg={4}>
+                        <div className="time" style={{ paddingTop: "12px" }}>
+                            {new Date(this.props.reportData.report.timestamp).toLocaleString()}
+                        </div>
+                        <div
+                            style={{
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: "8px", // Add spacing between elements
+                            }}
+                        >
+                            {/* URL with ellipsis */}
+                            <div
+                            className="url"
+                            style={{
+                                display: "-webkit-box",
+                                WebkitLineClamp: 4, // Limit text to 4 lines
+                                WebkitBoxOrient: "vertical",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                wordBreak: "break-word", // Handle long URLs gracefully
+                            }}
+                            >
+                            <strong>Scanned page:</strong>{" "}
+                            <span title={this.props.reportData.tabURL}>{this.props.reportData.tabURL}</span>
+                            </div>
+
+                            {/* Copy button */}
+                            <CopyButton
+                            onClick={this.copyToClipboard}
+                            feedback="Copied!"
+                            feedbackTimeout={2000} 
+                            style={{
+                                alignSelf: "flex-start", 
+                                marginTop: "4px", 
+                            }}
+                            />
+                        </div>
+                        </Column>
                             <Column sm={4} md={4} lg={4}>
                                 <ScoreCard count={violations} title="Violations" icon={Violation16} checked={this.state.selectedItems.some((item)=>item.text==="Violations")}
                                     handleCardClick={this.handleCardClick}>

From 2a500f306ed161e1f09fa3a868d8f34c679b91d4 Mon Sep 17 00:00:00 2001
From: nam-singh <nam.singh@ibm.com>
Date: Mon, 30 Dec 2024 21:23:01 +0530
Subject: [PATCH 2/3] remove unused import

---
 report-react/src/SavedReport.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/report-react/src/SavedReport.tsx b/report-react/src/SavedReport.tsx
index 4ebf6f466..0fc09cb3e 100644
--- a/report-react/src/SavedReport.tsx
+++ b/report-react/src/SavedReport.tsx
@@ -20,7 +20,7 @@ import ScoreCard from './ScoreCard';
 import SummScoreCard from './SummScoreCard';
 import ReportChecklist from './report/ReportChecklist';
 import ReportRules from './report/ReportRules';
-import { ComposedModal, ModalHeader, ModalBody, Grid, Column, Theme,Dropdown,MultiSelect,CodeSnippet,CopyButton} from '@carbon/react';
+import { ComposedModal, ModalHeader, ModalBody, Grid, Column, Theme,Dropdown,MultiSelect,CopyButton} from '@carbon/react';
 import { UtilIssueReact } from "./util/UtilIssueReact";
 import { Violation16,NeedsReview16,Recommendation16,ViewOff16 } from "./util/UtilImages";
 import ReportElements from "./report/ReportElements";

From 1230593395b151040a85ac523eb66ae5fd3df874 Mon Sep 17 00:00:00 2001
From: Tom Brunet <thbrunet@us.ibm.com>
Date: Thu, 2 Jan 2025 14:31:21 -0600
Subject: [PATCH 3/3] Adjust tooltip location

---
 report-react/src/SavedReport.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/report-react/src/SavedReport.tsx b/report-react/src/SavedReport.tsx
index 0fc09cb3e..740d2dc13 100644
--- a/report-react/src/SavedReport.tsx
+++ b/report-react/src/SavedReport.tsx
@@ -183,9 +183,7 @@ const filteredReport = {
                         </div>
                         <div
                             style={{
-                            display: "flex",
-                            flexDirection: "column",
-                            gap: "8px", // Add spacing between elements
+                                gap: "8px", // Add spacing between elements
                             }}
                         >
                             {/* URL with ellipsis */}
@@ -206,13 +204,15 @@ const filteredReport = {
 
                             {/* Copy button */}
                             <CopyButton
-                            onClick={this.copyToClipboard}
-                            feedback="Copied!"
-                            feedbackTimeout={2000} 
-                            style={{
-                                alignSelf: "flex-start", 
-                                marginTop: "4px", 
-                            }}
+                                align="bottom-left"
+                                iconDescription="Copy page URL to clipboard"
+                                onClick={this.copyToClipboard}
+                                feedback="Copied!"
+                                feedbackTimeout={2000} 
+                                style={{
+                                    alignSelf: "flex-start", 
+                                    marginTop: "4px", 
+                                }}
                             />
                         </div>
                         </Column>