Skip to content

Commit

Permalink
🐛 Wrap long file paths in issues drawer (#1761)
Browse files Browse the repository at this point in the history
Resolves https://issues.redhat.com/browse/MTA-1961?filter=12422675

---------

Signed-off-by: Ian Bolton <ibolton@redhat.com>
Signed-off-by: Cherry Picker <noreply@github.com>
  • Loading branch information
ibolton336 authored and web-flow committed Mar 22, 2024
1 parent dfe4ac3 commit ee97b36
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
import { SimplePagination } from "@app/components/SimplePagination";
import { FileIncidentsDetailModal } from "./file-incidents-detail-modal";
import { FilterToolbar, FilterType } from "@app/components/FilterToolbar";
import PathDisplay from "./path-display";

export interface IIssueAffectedFilesTableProps {
issue: AnalysisIssue;
Expand Down Expand Up @@ -152,17 +153,13 @@ export const IssueAffectedFilesTable: React.FC<
item={fileReport}
rowIndex={rowIndex}
>
<Td
width={70}
{...getTdProps({ columnKey: "file" })}
modifier="truncate"
>
<Td {...getTdProps({ columnKey: "file" })}>
<Button
variant="link"
isInline
onClick={() => setSelectedFileForDetailModal(fileReport)}
>
{fileReport?.file || "<unknown>"}
<PathDisplay path={fileReport?.file || "<unknown>"} />
</Button>
</Td>
<Td
Expand Down
23 changes: 23 additions & 0 deletions client/src/app/pages/issues/issue-detail-drawer/path-display.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from "react";

interface PathDisplayProps {
path: string;
}

const PathDisplay: React.FC<PathDisplayProps> = ({ path }) => {
const normalizedPath = path.replace(/\\/g, "/");
const formattedPath = normalizedPath
.split("/")
.reduce<React.ReactNode[]>((acc, segment, index, array) => {
acc.push(segment);
if (index < array.length - 1) {
acc.push(<wbr key={`wbr-${index}`} />);
acc.push(<span key={`slash-${index}`}>/</span>);
}
return acc;
}, []);

return <>{formattedPath}</>;
};

export default PathDisplay;

0 comments on commit ee97b36

Please sign in to comment.