Merge pull request #26389 from overleaf/dp-last-suggested-fix

Update ui for previous suggested ai fix in new editor

GitOrigin-RevId: 2f4edbcb0614d560bad28f862408ed73d39e988c

services/web/frontend/js/features/ide-redesign/components/error-logs/log-entry-header.tsx

@@ -29,6 +29,8 @@ function LogEntryHeader({
   onToggleCollapsed,
   id,
   logEntry,
+  actionButtonsOverride,
+  openCollapseIconOverride,
 }: {
   headerTitle: string | React.ReactNode
   level: ErrorLevel
@@ -40,6 +42,8 @@ function LogEntryHeader({
   onToggleCollapsed: () => void
   id?: string
   logEntry?: LogEntryData
+  actionButtonsOverride?: React.ReactNode
+  openCollapseIconOverride?: string
 }) {
   const { t } = useTranslation()
   const logLocationSpanRef = useRef<HTMLSpanElement>(null)
@@ -101,7 +105,10 @@ function LogEntryHeader({
         <OLIconButton
           size="sm"
           variant="ghost"
-          icon={collapsed ? 'chevron_right' : 'expand_more'}
+          icon={
+            openCollapseIconOverride ??
+            (collapsed ? 'chevron_right' : 'expand_more')
+          }
           onClick={onToggleCollapsed}
           accessibilityLabel={collapsed ? t('expand') : t('collapse')}
         />
@@ -121,31 +128,33 @@ function LogEntryHeader({
           formattedLocationText
         )}
       </div>
-      <div className="log-entry-header-actions">
-        {showSourceLocationLink && (
-          <OLTooltip
-            id={`go-to-location-${locationText}`}
-            description={t('go_to_code_location')}
-            overlayProps={{ placement: 'bottom' }}
-          >
-            <OLIconButton
-              onClick={onSourceLocationClick}
-              variant="ghost"
-              icon="my_location"
-              accessibilityLabel={t('go_to_code_location')}
+      {actionButtonsOverride ?? (
+        <div className="log-entry-header-actions">
+          {showSourceLocationLink && (
+            <OLTooltip
+              id={`go-to-location-${locationText}`}
+              description={t('go_to_code_location')}
+              overlayProps={{ placement: 'bottom' }}
+            >
+              <OLIconButton
+                onClick={onSourceLocationClick}
+                variant="ghost"
+                icon="my_location"
+                accessibilityLabel={t('go_to_code_location')}
+              />
+            </OLTooltip>
+          )}
+          {actionComponents.map(({ import: { default: Component }, path }) => (
+            <Component
+              key={path}
+              collapsed={collapsed}
+              onToggleCollapsed={onToggleCollapsed}
+              logEntry={logEntry}
+              id={id}
             />
-          </OLTooltip>
-        )}
-        {actionComponents.map(({ import: { default: Component }, path }) => (
-          <Component
-            key={path}
-            collapsed={collapsed}
-            onToggleCollapsed={onToggleCollapsed}
-            logEntry={logEntry}
-            id={id}
-          />
-        ))}
-      </div>
+          ))}
+        </div>
+      )}
     </header>
   )
 }

services/web/frontend/js/features/ide-redesign/components/error-logs/log-entry.tsx

@@ -1,4 +1,11 @@
-import { memo, MouseEventHandler, useCallback, useState } from 'react'
+import {
+  Dispatch,
+  MouseEventHandler,
+  useCallback,
+  memo,
+  SetStateAction,
+  useState,
+} from 'react'
 import HumanReadableLogsHints from '../../../../ide/human-readable-logs/HumanReadableLogsHints'
 import { sendMB } from '@/infrastructure/event-tracking'
 import {
@@ -10,24 +17,7 @@ import LogEntryHeader from './log-entry-header'
 import PdfLogEntryContent from '@/features/pdf-preview/components/pdf-log-entry-content'
 import classNames from 'classnames'
 
-function LogEntry({
-  ruleId,
-  headerTitle,
-  rawContent,
-  logType,
-  formattedContent,
-  extraInfoURL,
-  level,
-  sourceLocation,
-  showSourceLocationLink = true,
-  entryAriaLabel = undefined,
-  contentDetails,
-  onSourceLocationClick,
-  index,
-  logEntry,
-  id,
-  alwaysExpandRawContent = false,
-}: {
+type LogEntryProps = {
   headerTitle: string | React.ReactNode
   level: ErrorLevel
   ruleId?: string
@@ -44,9 +34,49 @@ function LogEntry({
   logEntry?: LogEntryData
   id?: string
   alwaysExpandRawContent?: boolean
-}) {
+  className?: string
+  actionButtonsOverride?: React.ReactNode
+  openCollapseIconOverride?: string
+}
+
+function LogEntry(props: LogEntryProps) {
   const [collapsed, setCollapsed] = useState(true)
 
+  return (
+    <ControlledLogEntry
+      {...props}
+      collapsed={collapsed}
+      setCollapsed={setCollapsed}
+    />
+  )
+}
+
+export function ControlledLogEntry({
+  ruleId,
+  headerTitle,
+  rawContent,
+  logType,
+  formattedContent,
+  extraInfoURL,
+  level,
+  sourceLocation,
+  showSourceLocationLink = true,
+  entryAriaLabel = undefined,
+  contentDetails,
+  onSourceLocationClick,
+  index,
+  logEntry,
+  id,
+  alwaysExpandRawContent = false,
+  className,
+  collapsed,
+  setCollapsed,
+  actionButtonsOverride,
+  openCollapseIconOverride,
+}: LogEntryProps & {
+  collapsed: boolean
+  setCollapsed: Dispatch<SetStateAction<boolean>>
+}) {
   if (ruleId && HumanReadableLogsHints[ruleId]) {
     const hint = HumanReadableLogsHints[ruleId]
     formattedContent = hint.formattedContent(contentDetails)
@@ -72,7 +102,7 @@ function LogEntry({
 
   return (
     <div
-      className="log-entry"
+      className={classNames('log-entry', className)}
       data-ruleid={ruleId}
       data-log-entry-id={id}
       aria-label={entryAriaLabel}
@@ -88,6 +118,8 @@ function LogEntry({
         onToggleCollapsed={() => setCollapsed(collapsed => !collapsed)}
         id={id}
         logEntry={logEntry}
+        actionButtonsOverride={actionButtonsOverride}
+        openCollapseIconOverride={openCollapseIconOverride}
       />
       <div
         className={classNames('horizontal-divider', { hidden: collapsed })}