SONAR-26378 Create the new sidebar for the project/portfolio space (#3933)

GitOrigin-RevId: 74ace2c3648f55f67ce3cd84d6ab7dee1a4b15c9

Author: gregaubert

apps/sq-server/src/main/js/app/components/ComponentContainer.tsx

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { Spinner } from '@sonarsource/echoes-react';
+import { Layout, Spinner } from '@sonarsource/echoes-react';
 import { differenceBy } from 'lodash';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
@@ -31,6 +31,7 @@ import { useLocation, useRouter } from '~shared/components/hoc/withRouter';
 import { isFile, isPortfolioLike } from '~shared/helpers/component';
 import { isDefined } from '~shared/helpers/types';
 import { getProjectOverviewUrl } from '~shared/helpers/urls';
+import { useNewUI } from '~shared/helpers/useNewUI';
 import { ComponentQualifier } from '~shared/types/component';
 import { HttpStatus } from '~shared/types/request';
 import { validateProjectAlmBinding } from '~sq-server-commons/api/alm-settings';
@@ -51,22 +52,26 @@ import { Task, TaskStatuses, TaskTypes } from '~sq-server-commons/types/tasks';
 import { Component } from '~sq-server-commons/types/types';
 import handleRequiredAuthorization from '../utils/handleRequiredAuthorization';
 import ComponentContainerNotFound from './ComponentContainerNotFound';
-import ComponentNav from './nav/component/ComponentNav';
+import { ComponentNav } from './nav/component/ComponentNav';
+import {
+  LegacyComponentNav,
+  LegacyComponentNavCompatibleWithNewLayout,
+} from './nav/component/legacy/ComponentNav';
 
 const FETCH_STATUS_WAIT_TIME = 3000;
 
 function ComponentContainer({ hasFeature }: Readonly<WithAvailableFeaturesProps>) {
   const watchStatusTimer = React.useRef<number>();
-  const portalAnchor = React.useRef<Element | null>(null);
+  const legacyComponentNavAnchor = React.useRef<Element | null>(); // undefined means it wansn't loaded yet, if not found it will be null
   const oldTasksInProgress = React.useRef<Task[]>();
   const oldCurrentTask = React.useRef<Task>();
   const {
     query: { id: key, branch, pullRequest, fixedInPullRequest },
     pathname,
   } = useLocation();
   const router = useRouter();
-
   const intl = useIntl();
+  const [newUI] = useNewUI();
 
   const [component, setComponent] = React.useState<Component>();
   const [projectComponent, setProjectComponent] = React.useState<Component>();
@@ -318,7 +323,7 @@ function ComponentContainer({ hasFeature }: Readonly<WithAvailableFeaturesProps>
 
   // Set portal anchor on mount
   React.useEffect(() => {
-    portalAnchor.current = document.querySelector('#component-nav-portal');
+    legacyComponentNavAnchor.current = document.querySelector('#component-nav-portal');
   }, []);
 
   const isInProgress = tasksInProgress && tasksInProgress.length > 0;
@@ -349,6 +354,44 @@ function ComponentContainer({ hasFeature }: Readonly<WithAvailableFeaturesProps>
     return <ComponentContainerNotFound isPortfolioLike={pathname.includes('portfolio')} />;
   }
 
+  // TODO drop this once project scope migration is done
+  const isLegacyLayout = legacyComponentNavAnchor.current !== null;
+  if (isLegacyLayout) {
+    return (
+      <>
+        <Helmet
+          defer={false}
+          titleTemplate={intl.formatMessage(
+            { id: 'page_title.template.with_instance' },
+            { project: component?.name ?? '' },
+          )}
+        />
+        {component &&
+          !isFile(component.qualifier) &&
+          legacyComponentNavAnchor.current &&
+          /* Use a portal to fix positioning until we can fully review the layout */
+          createPortal(
+            <LegacyComponentNav
+              component={component}
+              isInProgress={isInProgress}
+              isPending={isPending}
+              projectBindingErrors={projectBindingErrors}
+            />,
+            legacyComponentNavAnchor.current,
+          )}
+        {loading ? (
+          <CenteredLayout>
+            <Spinner className="sw-mt-10" />
+          </CenteredLayout>
+        ) : (
+          <ComponentContext.Provider value={componentProviderProps}>
+            <Outlet />
+          </ComponentContext.Provider>
+        )}
+      </>
+    );
+  }
+
   return (
     <>
       <Helmet
@@ -358,28 +401,28 @@ function ComponentContainer({ hasFeature }: Readonly<WithAvailableFeaturesProps>
           { project: component?.name ?? '' },
         )}
       />
-      {component &&
-        !isFile(component.qualifier) &&
-        portalAnchor.current &&
-        /* Use a portal to fix positioning until we can fully review the layout */
-        createPortal(
-          <ComponentNav
+      {newUI && component && !isFile(component.qualifier) && <ComponentNav component={component} />}
+      <Layout.ContentGrid>
+        {!newUI && component && !isFile(component.qualifier) && (
+          <LegacyComponentNavCompatibleWithNewLayout
             component={component}
             isInProgress={isInProgress}
             isPending={isPending}
             projectBindingErrors={projectBindingErrors}
-          />,
-          portalAnchor.current,
+          />
         )}
-      {loading ? (
-        <CenteredLayout>
-          <Spinner className="sw-mt-10" />
-        </CenteredLayout>
-      ) : (
-        <ComponentContext.Provider value={componentProviderProps}>
-          <Outlet />
-        </ComponentContext.Provider>
-      )}
+        <Layout.PageGrid>
+          <Layout.PageContent>
+            {loading ? (
+              <Spinner className="sw-mt-10" />
+            ) : (
+              <ComponentContext.Provider value={componentProviderProps}>
+                <Outlet />
+              </ComponentContext.Provider>
+            )}
+          </Layout.PageContent>
+        </Layout.PageGrid>
+      </Layout.ContentGrid>
     </>
   );
 }

apps/sq-server/src/main/js/app/components/GlobalContainer.tsx

@@ -38,7 +38,7 @@ import NonProductionDatabaseWarning from './NonProductionDatabaseWarning';
 import SystemAnnouncement from './SystemAnnouncement';
 import EnableAiCodeFixMessage from './ai-codefix-notification/EnableAiCodeFixMessage';
 import CalculationChangeMessage from './calculation-notification/CalculationChangeMessage';
-import GlobalNav from './nav/global/GlobalNav';
+import { GlobalNav, GlobalNavLegacy } from './nav/global/GlobalNav';
 import PromotionNotification from './promotion-notification/PromotionNotification';
 import { UpdateNotification } from './update-notification/UpdateNotification';
 
@@ -130,7 +130,7 @@ export default function GlobalContainer() {
               <SQSTemporaryRelativeBannerContainer>
                 <Banners />
               </SQSTemporaryRelativeBannerContainer>
-              <GlobalNav />
+              <GlobalNavLegacy />
               {hasFeature(Feature.Architecture) && canAdmin && addons.architecture?.spotlight({})}
               <ModeTour />
               {/* The following is the portal anchor point for the component nav

apps/sq-server/src/main/js/app/components/Landing.tsx

@@ -20,7 +20,7 @@
 
 import { Navigate, To } from 'react-router-dom';
 import withCurrentUserContext from '~sq-server-commons/context/current-user/withCurrentUserContext';
-import { getHomePageUrl } from '~sq-server-commons/helpers/urls';
+import { getHomePageUrl, getProjectsUrl } from '~sq-server-commons/helpers/urls';
 import { CurrentUser, isLoggedIn } from '~sq-server-commons/types/users';
 
 export interface LandingProps {
@@ -32,7 +32,7 @@ export function Landing({ currentUser }: LandingProps) {
   if (isLoggedIn(currentUser) && currentUser.homepage) {
     redirectUrl = getHomePageUrl(currentUser.homepage);
   } else {
-    redirectUrl = '/projects';
+    redirectUrl = getProjectsUrl();
   }
 
   return <Navigate replace to={redirectUrl} />;

apps/sq-server/src/main/js/app/components/NonAdminPagesContainer.tsx

@@ -18,34 +18,34 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import * as React from 'react';
+import { MessageCallout } from '@sonarsource/echoes-react';
+import { useContext } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { Outlet } from 'react-router-dom';
-import { CenteredLayout, FlagMessage } from '~design-system';
+import { CenteredLayout } from '~design-system';
 import { isApplication } from '~shared/helpers/component';
 import { ComponentContext } from '~sq-server-commons/context/componentContext/ComponentContext';
-import { translate } from '~sq-server-commons/helpers/l10n';
 
 export default function NonAdminPagesContainer() {
-  const { component } = React.useContext(ComponentContext);
+  const { component } = useContext(ComponentContext);
 
   /*
    * Catch Applications for which the user does not have access to all child projects
    * and prevent displaying whatever page was requested.
    * This doesn't apply to admin pages (those are not within this container)
    */
-  if (component && isApplication(component.qualifier) && !component.canBrowseAllChildProjects) {
+
+  const isApplicationChildInaccessible =
+    component && isApplication(component.qualifier) && !component.canBrowseAllChildProjects;
+
+  if (isApplicationChildInaccessible) {
     return (
-      <CenteredLayout
-        className="sw-py-8 sw-typo-lg sw-flex sw-flex-col sw-items-center"
-        id="code-page"
-      >
-        <FlagMessage className="it__alert-no-access-all-child-project sw-mt-10" variant="error">
-          <p>
-            {translate('application.cannot_access_all_child_projects1')}
-            <br />
-            {translate('application.cannot_access_all_child_projects2')}
-          </p>
-        </FlagMessage>
+      <CenteredLayout className="sw-py-8 sw-typo-lg sw-flex sw-flex-col sw-items-center">
+        <MessageCallout className="it__alert-no-access-all-child-project sw-mt-10" variety="danger">
+          <FormattedMessage id="application.cannot_access_all_child_projects1" />
+          <br />
+          <FormattedMessage id="application.cannot_access_all_child_projects2" />
+        </MessageCallout>
       </CenteredLayout>
     );
   }

apps/sq-server/src/main/js/app/components/__tests__/ComponentContainer-test.tsx

@@ -223,7 +223,7 @@ describe('getTasksForComponent', () => {
     });
 
     // getTasksForComponent updated the tasks, which triggers the setTimeout
-    expect(jest.getTimerCount()).toBe(1);
+    expect(jest.getTimerCount()).toBeGreaterThan(0);
     // we run the timer to trigger the next getTasksForComponent call
     jest.runOnlyPendingTimers();
 
@@ -270,7 +270,7 @@ describe('getTasksForComponent', () => {
     });
 
     // Despite the fact taht we don't have any tasks in the queue, the component.analysisDate is undefined, so we trigger setTimeout
-    expect(jest.getTimerCount()).toBe(1);
+    expect(jest.getTimerCount()).toBeGreaterThan(0);
     jest.runOnlyPendingTimers();
 
     // Second round, nothing in the queue, BUT a success task is current. This
@@ -283,12 +283,14 @@ describe('getTasksForComponent', () => {
     await waitFor(() => {
       expect(getComponentNavigation).toHaveBeenCalledTimes(2);
     });
+
+    // Make sure the timeout was cleared
+    jest.runOnlyPendingTimers();
+    expect(jest.getTimerCount()).toBe(0);
+
     // The status API call will be called 1 final time after the component is
     // fully loaded, so the total will be 3.
     expect(getTasksForComponent).toHaveBeenCalledTimes(3);
-
-    // Make sure the timeout was cleared. It should not be called again.
-    expect(jest.getTimerCount()).toBe(0);
   });
 
   it('only fully loads a non-empty component once', async () => {
@@ -310,7 +312,9 @@ describe('getTasksForComponent', () => {
     });
 
     // Since the component has analysisDate, and the queue is empty, the setTimeout will not be triggered
+    jest.runOnlyPendingTimers();
     expect(jest.getTimerCount()).toBe(0);
+    expect(getTasksForComponent).toHaveBeenCalledTimes(1);
   });
 
   it('only fully reloads a non-empty component if there was previously some task in progress', async () => {
@@ -336,7 +340,7 @@ describe('getTasksForComponent', () => {
       expect(getTasksForComponent).toHaveBeenCalledTimes(1);
     });
 
-    expect(jest.getTimerCount()).toBe(1);
+    expect(jest.getTimerCount()).toBeGreaterThan(0);
     jest.runOnlyPendingTimers();
 
     // Second round, nothing in the queue, and a success task is current. This
@@ -350,12 +354,13 @@ describe('getTasksForComponent', () => {
       expect(getComponentNavigation).toHaveBeenCalledTimes(2);
     });
 
+    // Make sure the timeout was cleared.
+    jest.runOnlyPendingTimers();
+    expect(jest.getTimerCount()).toBe(0);
+
     // The status API call will be called 1 final time after the component is
     // fully loaded, so the total will be 3.
     expect(getTasksForComponent).toHaveBeenCalledTimes(3);
-
-    // Make sure the timeout was cleared. It should not be called again.
-    expect(jest.getTimerCount()).toBe(0);
   });
 });
 
@@ -520,7 +525,7 @@ describe('tutorials', () => {
     expect(mockedReplace).not.toHaveBeenCalled();
 
     // Since component.analysisDate is undefined we trigger setTimeout
-    expect(jest.getTimerCount()).toBe(1);
+    expect(jest.getTimerCount()).toBeGreaterThan(0);
     jest.runOnlyPendingTimers();
     expect(getTasksForComponent).toHaveBeenCalledTimes(2);
 
@@ -572,7 +577,7 @@ describe('tutorials', () => {
     expect(mockedReplace).not.toHaveBeenCalled();
 
     // Since component.analysisDate is undefined we trigger setTimeout
-    expect(jest.getTimerCount()).toBe(1);
+    expect(jest.getTimerCount()).toBeGreaterThan(0);
     jest.runOnlyPendingTimers();
     expect(getTasksForComponent).toHaveBeenCalledTimes(2);
 
@@ -626,7 +631,7 @@ describe('tutorials', () => {
     expect(mockedReplace).not.toHaveBeenCalled();
 
     // Since component.analysisDate is undefined we trigger setTimeout
-    expect(jest.getTimerCount()).toBe(1);
+    expect(jest.getTimerCount()).toBeGreaterThan(0);
     jest.runOnlyPendingTimers();
     expect(getTasksForComponent).toHaveBeenCalledTimes(2);
 
@@ -662,7 +667,14 @@ function renderComponentContainer(
   renderAppRoutes(
     path,
     () => (
-      <Route element={<ComponentContainer />}>
+      <Route
+        element={
+          <>
+            <div id="component-nav-portal" />
+            <ComponentContainer />
+          </>
+        }
+      >
         <Route element={<TestComponent />} path="*" />
         <Route element={<div>portfolio</div>} path="portfolio" />
         <Route element={<div>project</div>} path="dashboard" />

apps/sq-server/src/main/js/app/components/__tests__/ModeTour-test.tsx

@@ -29,7 +29,7 @@ import { EditionKey } from '~sq-server-commons/types/editions';
 import { Permissions } from '~sq-server-commons/types/permissions';
 import { NoticeType } from '~sq-server-commons/types/users';
 import ModeTour from '../ModeTour';
-import GlobalNav from '../nav/global/GlobalNav';
+import { GlobalNavLegacy } from '../nav/global/GlobalNav';
 
 const ui = {
   close: byRole('button', { name: 'modal.close' }),
@@ -219,7 +219,7 @@ function renderGlobalNav(currentUser = mockCurrentUser()) {
   renderApp(
     '/',
     <>
-      <GlobalNav />
+      <GlobalNavLegacy />
       <ModeTour />
     </>,
     {

apps/sq-server/src/main/js/app/components/global-search/GlobalSearch.tsx

@@ -24,6 +24,7 @@ import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { DEBOUNCE_DELAY, DropdownMenu, Popup, PopupZLevel } from '~design-system';
 import { withRouter } from '~shared/components/hoc/withRouter';
+import { RecentHistory } from '~shared/helpers/recent-history';
 import { ComponentQualifier } from '~shared/types/component';
 import { Router } from '~shared/types/router';
 import { getSuggestions } from '~sq-server-commons/api/components';
@@ -35,7 +36,6 @@ import { KeyboardKeys } from '~sq-server-commons/helpers/keycodes';
 import { getIntl } from '~sq-server-commons/helpers/l10nBundle';
 import { getKeyboardShortcutEnabled } from '~sq-server-commons/helpers/preferences';
 import { getComponentOverviewUrl } from '~sq-server-commons/helpers/urls';
-import RecentHistory from '../RecentHistory';
 import { GlobalSearchResult } from './GlobalSearchResult';
 import GlobalSearchResults from './GlobalSearchResults';
 import { ComponentResult, More, Results, sortQualifiers } from './utils';