Merge pull request #23045 from overleaf/mj-errors-tab

[web] Add errors to rail

GitOrigin-RevId: 484e28b1ff1578ec46aa6811f1d1bd1d03a02f59

services/web/frontend/js/features/ide-redesign/components/errors.tsx

@@ -0,0 +1,32 @@
+import PdfLogsViewer from '@/features/pdf-preview/components/pdf-logs-viewer'
+import { PdfPreviewProvider } from '@/features/pdf-preview/components/pdf-preview-provider'
+import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
+import OLBadge from '@/features/ui/components/ol/ol-badge'
+
+export const ErrorIndicator = () => {
+  const { logEntries } = useCompileContext()
+
+  if (!logEntries) {
+    return null
+  }
+
+  const errorCount = Number(logEntries.errors?.length)
+  const warningCount = Number(logEntries.warnings?.length)
+  const totalCount = errorCount + warningCount
+
+  if (totalCount === 0) {
+    return null
+  }
+
+  return (
+    <OLBadge bg={errorCount > 0 ? 'danger' : 'warning'}>{totalCount}</OLBadge>
+  )
+}
+
+export const ErrorPane = () => {
+  return (
+    <PdfPreviewProvider>
+      <PdfLogsViewer alwaysVisible />
+    </PdfPreviewProvider>
+  )
+}

services/web/frontend/js/features/ide-redesign/components/rail.tsx

@@ -6,11 +6,13 @@ import MaterialIcon, {
 import { Panel } from 'react-resizable-panels'
 import { useLayoutContext } from '@/shared/context/layout-context'
 import { FileTree } from '@/features/ide-react/components/file-tree'
+import { ErrorIndicator, ErrorPane } from './errors'
 
 type RailElement = {
   icon: AvailableUnfilledIcon
   key: string
   component: ReactElement
+  indicator?: ReactElement
 }
 
 type RailActionLink = { key: string; icon: AvailableUnfilledIcon; href: string }
@@ -52,7 +54,8 @@ const RAIL_TABS: RailElement[] = [
   {
     key: 'errors',
     icon: 'report',
-    component: <>Errors</>,
+    component: <ErrorPane />,
+    indicator: <ErrorIndicator />,
   },
 ]
 
@@ -87,12 +90,13 @@ export const RailLayout = () => {
           defaultActiveKey={RAIL_TABS[0]?.key}
           className="d-flex flex-column ide-rail-tabs-nav"
         >
-          {RAIL_TABS.map(({ icon, key }) => (
+          {RAIL_TABS.map(({ icon, key, indicator }) => (
             <RailTab
               active={selectedTab === key}
               key={key}
               eventKey={key}
               icon={icon}
+              indicator={indicator}
             />
           ))}
           <div className="flex-grow-1" />
@@ -126,10 +130,12 @@ const RailTab = ({
   icon,
   eventKey,
   active,
+  indicator,
 }: {
   icon: AvailableUnfilledIcon
   eventKey: string
   active: boolean
+  indicator?: ReactElement
 }) => {
   return (
     <NavLink eventKey={eventKey} className="ide-rail-tab-link">
@@ -138,6 +144,7 @@ const RailTab = ({
       ) : (
         <MaterialIcon className="ide-rail-tab-link-icon" type={icon} unfilled />
       )}
+      {indicator}
     </NavLink>
   )
 }

services/web/frontend/js/features/pdf-preview/components/pdf-logs-viewer.jsx

@@ -14,8 +14,9 @@ import PdfCodeCheckFailedNotice from './pdf-code-check-failed-notice'
 import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
 import PdfLogEntry from './pdf-log-entry'
 import { usePdfPreviewContext } from '@/features/pdf-preview/components/pdf-preview-provider'
+import PropTypes from 'prop-types'
 
-function PdfLogsViewer() {
+function PdfLogsViewer({ alwaysVisible = false }) {
   const {
     codeCheckFailed,
     error,
@@ -34,7 +35,7 @@ function PdfLogsViewer() {
   return (
     <div
       className={classnames('logs-pane', {
-        hidden: !showLogs && !loadingError,
+        hidden: !showLogs && !alwaysVisible && !loadingError,
       })}
     >
       <div className="logs-pane-content">
@@ -80,6 +81,10 @@ function PdfLogsViewer() {
   )
 }
 
+PdfLogsViewer.propTypes = {
+  alwaysVisible: PropTypes.bool,
+}
+
 export default withErrorBoundary(memo(PdfLogsViewer), () => (
   <PdfPreviewErrorBoundaryFallback type="logs" />
 ))

services/web/frontend/stylesheets/bootstrap-5/pages/editor/logs.scss

@@ -6,6 +6,10 @@
   --logs-pane-bg: var(--bg-light-secondary);
 }
 
+.ide-redesign-main {
+  --logs-pane-bg: #fff;
+}
+
 .logs-pane {
   position: absolute;
   inset: 0;

services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss

@@ -48,6 +48,12 @@
       background-color: var(--ide-rail-link-active-indicator-background);
     }
   }
+
+  .badge {
+    position: absolute;
+    top: var(--spacing-02);
+    right: var(--spacing-02);
+  }
 }
 
 .ide-rail {
@@ -59,6 +65,16 @@
 
 .ide-rail-content {
   height: 100%;
+
+  .logs-pane {
+    top: 0;
+  }
+
+  .tab-content {
+    height: 100%;
+    width: 100%;
+    position: relative;
+  }
 }
 
 .ide-rail-tabs-nav {