Skip to content

feat: Search Run List by User via Click #2342

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
camielvs wants to merge 1 commit into
base: master
Choose a base branch
from
+29 −17
Open

feat: Search Run List by User via Click #2342

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 22 additions & 13 deletions src/components/Home/RunSection/RunRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import useToastNotification from "@/hooks/useToastNotification";
import { Text } from "@/components/ui/typography";
import { useBackend } from "@/providers/BackendProvider";
import { APP_ROUTES } from "@/routes/router";
import { fetchRunAnnotations } from "@/services/pipelineRunService";
Expand All @@ -29,9 +29,13 @@ import { TWENTY_FOUR_HOURS_IN_MS } from "@/utils/constants";
import { formatDate } from "@/utils/date";
import { getOverallExecutionStatusFromStats } from "@/utils/executionStatus";

const RunRow = ({ run }: { run: PipelineRunResponse }) => {
interface RunRowProps {
run: PipelineRunResponse;
onFilterByUser?: (createdBy: string) => void;
}

const RunRow = ({ run, onFilterByUser }: RunRowProps) => {
const navigate = useNavigate();
const notify = useToastNotification();
const { backendUrl } = useBackend();

const runId = `${run.id}`;
Expand All @@ -52,10 +56,9 @@ const RunRow = ({ run }: { run: PipelineRunResponse }) => {
const truncatedCreatedBy = truncateMiddle(createdBy);
const isTruncated = createdBy !== truncatedCreatedBy;

const handleCopy = (e: MouseEvent) => {
const handleFilterByUser = (e: MouseEvent) => {
e.stopPropagation();
navigator.clipboard.writeText(createdBy);
notify(`"${createdBy}" copied to clipboard`, "success");
onFilterByUser?.(createdBy);
};

const overallStatus = getOverallExecutionStatusFromStats(
Expand All @@ -77,20 +80,26 @@ const RunRow = ({ run }: { run: PipelineRunResponse }) => {
navigate({ to: clickThroughUrl });
};

const createdByButton = (
const createdByContent = onFilterByUser ? (
<Button
className="truncate underline"
onClick={handleCopy}
className="underline"
onClick={handleFilterByUser}
tabIndex={0}
variant="ghost"
>
{truncatedCreatedBy}
<Text size="xs" tone="subdued" className="truncate">
{truncatedCreatedBy}
</Text>
</Button>
) : (
<Text size="xs" tone="subdued" className="truncate">
{truncatedCreatedBy}
</Text>
);

const createdByButtonWithTooltip = (
const createdByContentWithTooltip = (
<Tooltip>
<TooltipTrigger asChild>{createdByButton}</TooltipTrigger>
<TooltipTrigger asChild>{createdByContent}</TooltipTrigger>
<TooltipContent>
<span>{createdBy}</span>
</TooltipContent>
Expand Down Expand Up @@ -131,7 +140,7 @@ const RunRow = ({ run }: { run: PipelineRunResponse }) => {
{run.created_at ? formatDate(run.created_at) : "Data not found..."}
</TableCell>
<TableCell>
{isTruncated ? createdByButtonWithTooltip : createdByButton}
{isTruncated ? createdByContentWithTooltip : createdByContent}
</TableCell>
<TableCell className="max-w-64">
{tags && tags.length > 0 && <TagList tags={tags} />}
Expand Down
11 changes: 7 additions & 4 deletions src/components/Home/RunSection/RunSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
TableRow,
} from "@/components/ui/table";
import { Text } from "@/components/ui/typography";
import { useRunSearchParams } from "@/hooks/useRunSearchParams";
import { useBackend } from "@/providers/BackendProvider";
import { getBackendStatusString } from "@/utils/backend";
import { fetchWithErrorHandling } from "@/utils/fetchWithErrorHandling";
Expand All @@ -41,11 +42,8 @@ type RunSectionSearch = { page_token?: string; filter?: string };

interface RunSectionProps {
onEmptyList?: () => void;
/** When true, hides the built-in filter UI (used when new filter bar is enabled) */
hideFilters?: boolean;
/** When provided, overrides the URL filter param (e.g. "created_by:me") */
forcedFilter?: string;
/** When provided, limits the number of rows shown (pagination still works per backend page) */
maxItems?: number;
}

Expand All @@ -60,8 +58,13 @@ export const RunSection = ({
const { pathname } = useLocation();
const search = useSearch({ strict: false }) as RunSectionSearch;
const isCreatedByMeDefault = useFlagValue("created-by-me-default");
const { setFilter } = useRunSearchParams();
const dataVersion = useRef(0);

const onFilterByUser = forcedFilter
? undefined
: (createdBy: string) => setFilter("created_by", createdBy);

// Supports both JSON (new) and key:value (legacy) URL formats
const filters = parseFilterParam(forcedFilter ?? search.filter);
const createdByValue = filters.created_by;
Expand Down Expand Up @@ -294,7 +297,7 @@ export const RunSection = ({
? data.pipeline_runs?.slice(0, maxItems)
: data.pipeline_runs
)?.map((run) => (
<RunRow key={run.id} run={run} />
<RunRow key={run.id} run={run} onFilterByUser={onFilterByUser} />
))}
</TableBody>
</Table>
Expand Down
Loading