Update outlet information icons to navigate to report pages
Modify MediaOutlet and Report components to change the functionality of the info icon button. Previously, clicking the icon displayed a tooltip with outlet information. Now, it navigates the user to the report page associated with that outlet, utilizing the setLocation function to update the browser's URL based on the outlet's slug. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 0fb68265-c270-4198-9584-3d9be9bddb41 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/0fb68265-c270-4198-9584-3d9be9bddb41/g8mUCzT
This commit is contained in:
4
.replit
4
.replit
@ -22,10 +22,6 @@ externalPort = 3002
|
||||
localPort = 37531
|
||||
externalPort = 3001
|
||||
|
||||
[[ports]]
|
||||
localPort = 37709
|
||||
externalPort = 4200
|
||||
|
||||
[[ports]]
|
||||
localPort = 38387
|
||||
externalPort = 3003
|
||||
|
||||
@ -216,26 +216,20 @@ export default function MediaOutlet() {
|
||||
<span className="text-lg font-bold text-gray-900" data-testid="text-outlet-name-header">
|
||||
{outlet.name}
|
||||
</span>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="inline-flex items-center"
|
||||
aria-label="View outlet information"
|
||||
>
|
||||
<Info
|
||||
className="h-4 w-4 text-gray-500 cursor-pointer hover:text-gray-700"
|
||||
data-testid="icon-info-header"
|
||||
/>
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p className="max-w-xs">{outlet.description || "Media Outlet"}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setLocation(`/media/${outlet.slug}/report`);
|
||||
}}
|
||||
className="inline-flex items-center"
|
||||
aria-label="View reports"
|
||||
>
|
||||
<Info
|
||||
className="h-4 w-4 text-gray-500 cursor-pointer hover:text-gray-700"
|
||||
data-testid="icon-info-header"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -140,26 +140,20 @@ export default function Report() {
|
||||
<span className="text-lg font-bold text-gray-900" data-testid="text-outlet-name-header">
|
||||
{outlet.name}
|
||||
</span>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="inline-flex items-center"
|
||||
aria-label="View outlet information"
|
||||
>
|
||||
<Info
|
||||
className="h-4 w-4 text-gray-500 cursor-pointer hover:text-gray-700"
|
||||
data-testid="icon-info-header"
|
||||
/>
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p className="max-w-xs">{outlet.description || "Media Outlet"}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setLocation(`/media/${outlet.slug}/report`);
|
||||
}}
|
||||
className="inline-flex items-center"
|
||||
aria-label="View reports"
|
||||
>
|
||||
<Info
|
||||
className="h-4 w-4 text-gray-500 cursor-pointer hover:text-gray-700"
|
||||
data-testid="icon-info-header"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user