diff --git a/services/web/frontend/js/features/ide-redesign/components/errors.tsx b/services/web/frontend/js/features/ide-redesign/components/errors.tsx new file mode 100644 index 0000000000..73b3ae4bc1 --- /dev/null +++ b/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 ( + 0 ? 'danger' : 'warning'}>{totalCount} + ) +} + +export const ErrorPane = () => { + return ( + + + + ) +} diff --git a/services/web/frontend/js/features/ide-redesign/components/rail.tsx b/services/web/frontend/js/features/ide-redesign/components/rail.tsx index a5ffa47089..80e117ccb3 100644 --- a/services/web/frontend/js/features/ide-redesign/components/rail.tsx +++ b/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: , + indicator: , }, ] @@ -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 }) => ( ))}
@@ -126,10 +130,12 @@ const RailTab = ({ icon, eventKey, active, + indicator, }: { icon: AvailableUnfilledIcon eventKey: string active: boolean + indicator?: ReactElement }) => { return ( @@ -138,6 +144,7 @@ const RailTab = ({ ) : ( )} + {indicator} ) } diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-logs-viewer.jsx b/services/web/frontend/js/features/pdf-preview/components/pdf-logs-viewer.jsx index 7996044284..fcdea5fe80 100644 --- a/services/web/frontend/js/features/pdf-preview/components/pdf-logs-viewer.jsx +++ b/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 (
@@ -80,6 +81,10 @@ function PdfLogsViewer() { ) } +PdfLogsViewer.propTypes = { + alwaysVisible: PropTypes.bool, +} + export default withErrorBoundary(memo(PdfLogsViewer), () => ( )) diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/logs.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/logs.scss index 98dd16856d..7f792ffe2d 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/logs.scss +++ b/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; diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss index a0a7a1e707..0b2577d0cd 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss +++ b/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 {