mokhtar
e656670dd4
selected states stop changing font weight, buttons gain a pressed scale and scoped 120ms transitions with a reduced-motion override, every loading and empty state reserves its height, charts measure before first paint, hit targets rise to the 44px enhanced target where layout permits, long domains clamp to two lines on an unpadded inner span, chips and name cells truncate, tabular figures on counts and time columns, a z-index layer scale replaces magic numbers and fixes the dialog-over-confirm tie, history's empty state gains a clear-filters action, page headings balance, font smoothing and color-scheme land on the html reset.
88 lines
2.5 KiB
TypeScript
88 lines
2.5 KiB
TypeScript
import { ArrowLeft } from "@phosphor-icons/react/dist/icons/ArrowLeft";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { Link, useParams, useSearch } from "@tanstack/react-router";
|
|
import * as stylex from "@stylexjs/stylex";
|
|
import InlineError from "@/lib/InlineError";
|
|
import { queryDetailQuery } from "@/lib/queries";
|
|
import type { QueryDetail } from "@/lib/types";
|
|
import { styles as shared } from "@/ui/styles";
|
|
import { colors } from "@/ui/tokens.stylex";
|
|
import ProvenanceDetail from "./ProvenanceDetail";
|
|
import RelatedActions from "./RelatedActions";
|
|
import type { ActivitySearch } from "./search";
|
|
|
|
const styles = stylex.create({
|
|
back: {
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
gap: "0.25rem",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
color: colors.primaryOnSurface,
|
|
textDecorationLine: "none",
|
|
},
|
|
backIcon: {
|
|
display: "inline-flex",
|
|
},
|
|
/** About the height of the filled detail surface, so it does not jump in. */
|
|
loading: {
|
|
marginTop: "1rem",
|
|
minHeight: "20rem",
|
|
color: colors.textMuted,
|
|
},
|
|
});
|
|
|
|
/**
|
|
* The way back to the investigation, not to a bare list. The originating
|
|
* Activity search rides in this route's own search, so the reader returns to
|
|
* the mode, the filters and the absolute window they left — a plain `/activity`
|
|
* would silently widen the range they had chosen.
|
|
*/
|
|
function BackLink({ origin }: { origin: ActivitySearch }) {
|
|
return (
|
|
<Link to="/activity" search={origin} {...stylex.props(styles.back, shared.focusRing)}>
|
|
<span aria-hidden="true" {...stylex.props(styles.backIcon)}>
|
|
<ArrowLeft size={12} />
|
|
</span>
|
|
Activity
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
export default function ActivityDetailPage() {
|
|
const { id } = useParams({ from: "/shell/activity/queries/$id" });
|
|
const origin = useSearch({ from: "/shell/activity/queries/$id" });
|
|
const rowId = Number(id);
|
|
const { data, error, isPending, refetch } = useQuery(queryDetailQuery(rowId));
|
|
|
|
if (isPending) {
|
|
return (
|
|
<p {...stylex.props(styles.loading, shared.pulse)} role="status">
|
|
Loading query…
|
|
</p>
|
|
);
|
|
}
|
|
if (data === undefined) {
|
|
return (
|
|
<section>
|
|
<BackLink origin={origin} />
|
|
<InlineError error={error} onRetry={() => void refetch()} />
|
|
</section>
|
|
);
|
|
}
|
|
|
|
const detail: QueryDetail = data;
|
|
const { domain, client, time } = detail.request;
|
|
|
|
return (
|
|
<section>
|
|
<BackLink origin={origin} />
|
|
<ProvenanceDetail
|
|
provenance={detail}
|
|
persistedId={detail.id}
|
|
relatedActions={<RelatedActions domain={domain} client={client} ts={time} origin={origin} />}
|
|
/>
|
|
</section>
|
|
);
|
|
}
|