Merge pull request #22630 from overleaf/td-ds-nav-system-messages

Add system messages to DS nav version of project dashboard

GitOrigin-RevId: 85830d58242300a40148190f8a18204666a3065c

services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx

@@ -18,6 +18,7 @@ import getMeta from '@/utils/meta'
 import DefaultNavbar from '@/features/ui/components/bootstrap-5/navbar/default-navbar'
 import FatFooter from '@/features/ui/components/bootstrap-5/footer/fat-footer'
 import SidebarDsNav from '@/features/project-list/components/sidebar/sidebar-ds-nav'
+import SystemMessages from '@/shared/components/system-messages'
 
 export function ProjectListDsNav() {
   const navbarProps = getMeta('ol-navbar')
@@ -59,66 +60,71 @@ export function ProjectListDsNav() {
       />
       <main className="project-list-wrapper">
         <SidebarDsNav />
-        <div className="project-ds-nav-content">
-          <div className="project-ds-nav-main">
-            {error ? <DashApiError /> : ''}
-            <UserNotifications />
-            <div className="project-list-header-row">
-              <ProjectListTitle
-                filter={filter}
-                selectedTag={selectedTag}
-                selectedTagId={selectedTagId}
-                className="text-truncate d-none d-md-block"
-              />
-              <div className="project-tools">
-                <div className="d-none d-md-block">
-                  {selectedProjects.length === 0 ? (
+        <div className="project-ds-nav-content-and-messages">
+          <div className="project-ds-nav-content">
+            <div className="project-ds-nav-main">
+              {error ? <DashApiError /> : ''}
+              <UserNotifications />
+              <div className="project-list-header-row">
+                <ProjectListTitle
+                  filter={filter}
+                  selectedTag={selectedTag}
+                  selectedTagId={selectedTagId}
+                  className="text-truncate d-none d-md-block"
+                />
+                <div className="project-tools">
+                  <div className="d-none d-md-block">
+                    {selectedProjects.length === 0 ? (
+                      <CurrentPlanWidget />
+                    ) : (
+                      <ProjectTools />
+                    )}
+                  </div>
+                  <div className="d-md-none">
                     <CurrentPlanWidget />
-                  ) : (
-                    <ProjectTools />
-                  )}
+                  </div>
                 </div>
-                <div className="d-md-none">
-                  <CurrentPlanWidget />
-                </div>
-              </div>
-            </div>
-            <div className="project-ds-nav-project-list">
-              <OLRow className="d-none d-md-block">
-                <OLCol lg={7}>
-                  <SearchForm
-                    inputValue={searchText}
-                    setInputValue={setSearchText}
-                    filter={filter}
-                    selectedTag={selectedTag}
-                  />
-                </OLCol>
-              </OLRow>
-              <div className="project-list-sidebar-survey-wrapper d-md-none">
-                {/* Omit the survey card in mobile view for now */}
               </div>
-              <div className="mt-1 d-md-none">
-                <div
-                  role="toolbar"
-                  className="projects-toolbar"
-                  aria-label={t('projects')}
-                >
-                  <ProjectsDropdown />
-                  <SortByDropdown />
+              <div className="project-ds-nav-project-list">
+                <OLRow className="d-none d-md-block">
+                  <OLCol lg={7}>
+                    <SearchForm
+                      inputValue={searchText}
+                      setInputValue={setSearchText}
+                      filter={filter}
+                      selectedTag={selectedTag}
+                    />
+                  </OLCol>
+                </OLRow>
+                <div className="project-list-sidebar-survey-wrapper d-md-none">
+                  {/* Omit the survey card in mobile view for now */}
+                </div>
+                <div className="mt-1 d-md-none">
+                  <div
+                    role="toolbar"
+                    className="projects-toolbar"
+                    aria-label={t('projects')}
+                  >
+                    <ProjectsDropdown />
+                    <SortByDropdown />
+                  </div>
+                </div>
+                <div className="mt-3">
+                  <TableContainer bordered>
+                    {tableTopArea}
+                    <ProjectListTable />
+                  </TableContainer>
+                </div>
+                <div className="mt-3">
+                  <LoadMore />
                 </div>
-              </div>
-              <div className="mt-3">
-                <TableContainer bordered>
-                  {tableTopArea}
-                  <ProjectListTable />
-                </TableContainer>
-              </div>
-              <div className="mt-3">
-                <LoadMore />
               </div>
             </div>
+            <FatFooter />
+          </div>
+          <div>
+            <SystemMessages />
           </div>
-          <FatFooter />
         </div>
       </main>
     </div>

services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss

@@ -249,16 +249,22 @@
       }
     }
 
-    .project-ds-nav-content {
+    .project-ds-nav-content-and-messages {
       flex-grow: 1;
-      overflow-y: auto;
-      position: relative;
-      background-color: var(--bg-light-secondary);
+      display: flex;
+      flex-direction: column;
 
-      @include media-breakpoint-up(md) {
-        border-top-left-radius: var(--border-radius-large);
-        border-left: 1px solid var(--border-divider);
-        border-top: 1px solid var(--border-divider);
+      .project-ds-nav-content {
+        flex-grow: 1;
+        overflow-y: auto;
+        position: relative;
+        background-color: var(--bg-light-secondary);
+
+        @include media-breakpoint-up(md) {
+          border-top-left-radius: var(--border-radius-large);
+          border-left: 1px solid var(--border-divider);
+          border-top: 1px solid var(--border-divider);
+        }
       }
     }
   }