dashboard: address issues with UX of log page output messages (#41956)

- Allows selecting text within LogListItem and DeploymentEventListItem so multiple logs can be copied at once - If text is selected on the page, disable the copy override on the logs page so multiple logs can be copied - Adds a vertical resizable panel between the log message and metadata tabs in LogDrilldown - Various styling improvements - Filters out an event type for deployment events that we no longer want to display (build_indexes which overlaps with push_config) GitOrigin-RevId: c6bb33c235b2e17d68309e3b39325801bfe7a037

Author: atrakh

npm-packages/dashboard-common/src/features/logs/components/DeploymentEventListItem.tsx

@@ -9,28 +9,20 @@ import { DeploymentInfoContext } from "@common/lib/deploymentContext";
 
 export function DeploymentEventListItem({
  event,
- inline = false,
  focused = false,
  hitBoundary,
  setShownLog,
  logKey,
 }: {
  event: DeploymentAuditLogEvent;
- inline?: boolean;
  focused?: boolean;
  hitBoundary?: "top" | "bottom" | null;
- setShownLog?: () => void;
+ setShownLog: () => void;
  logKey?: string;
 }) {
  const { TeamMemberLink } = useContext(DeploymentInfoContext);
  const timestamp = formatDateTime(new Date(event._creationTime));
 
- const handleClick = () => {
- if (setShownLog) {
- setShownLog();
- }
- };
-
  // Only show boundary animation on the focused item
  const showBoundary = focused && hitBoundary;
 
@@ -47,21 +39,26 @@ export function DeploymentEventListItem({
  data-log-key={logKey}
  className={classNames(
  "animate-fadeInFromLoading",
- "group pl-3 flex items-center gap-3 w-full text-xs",
- inline ? "items-start" : "pl-1 items-center",
- setShownLog && "hover:bg-background-tertiary/70",
- setShownLog &&
- "focus:outline-none focus:border focus:border-border-selected",
+ "group flex items-center gap-3 w-full text-xs items-center",
+ "hover:bg-background-tertiary/70",
+ "focus:outline-none focus:border-y focus:border-border-selected",
  focused && "bg-background-highlight",
+ "select-text",
  )}
  style={{
  height: ITEM_SIZE,
  }}
- onClick={handleClick}
- onFocus={handleClick}
- tabIndex={setShownLog ? 0 : -1}
+ onClick={setShownLog}
+ onFocus={(e) => {
+ // Only set shown log if focus is on the button itself,
+ // not on child elements (like links)
+ if (e.target === e.currentTarget) {
+ setShownLog();
+ }
+ }}
+ tabIndex={0}
  >
- <div className="min-w-[9.25rem] text-left font-mono whitespace-nowrap text-content-primary">
+ <div className="min-w-[9.25rem] pl-3 text-left font-mono whitespace-nowrap text-content-primary">
  {timestamp}
  <span className="text-content-secondary">
  .
@@ -72,8 +69,7 @@ export function DeploymentEventListItem({
  </span>
  </div>
 
- {/* Blank lines for when deployment event list items are displayed as items in the logs page */}
- {!inline && <hr className="min-w-[10.375rem] bg-background-tertiary" />}
+ <hr className="min-w-[10.375rem] bg-background-tertiary" />
 
  <div className="flex h-6 items-center gap-2 truncate">
  <GearIcon className="shrink-0" />