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" />