feat(container): move the public cloud create project button

packages/manager/apps/container/src/container/nav-reshuffle/sidebar/ProjectSelector/ProjectSelector.test.tsx

@@ -15,7 +15,6 @@ const pciProjects : Array<Partial<PciProject>> = [
 ];
 
 const onProjectChange = vi.fn();
-const onProjectCreate = vi.fn();
 const onSeeAllProjects = vi.fn();
 const onMenuOpen = vi.fn();
 
@@ -24,10 +23,8 @@ const props: Props = {
   projects: pciProjects as Array<PciProject>,
   selectedProject: pciProjects[0] as PciProject,
   onProjectChange: onProjectChange,
-  onProjectCreate: onProjectCreate,
   onSeeAllProjects: onSeeAllProjects,
   onMenuOpen: onMenuOpen,
-  createLabel: "Créer un projet",
   seeAllButton: true,
   seeAllLabel: "Tous mes projets Public Cloud",
 }
@@ -38,9 +35,7 @@ const renderProjectSelector = (props: Props) => {
     projects={props.projects}
     selectedProject={props.projects[0]}
     onProjectChange={props.onProjectChange}
-    onProjectCreate={props.onProjectCreate}
     onSeeAllProjects={props.onSeeAllProjects}
-    createLabel={props.createLabel}
     seeAllButton={props.seeAllButton}
     seeAllLabel={props.seeAllLabel}
   />);

packages/manager/apps/container/src/container/nav-reshuffle/sidebar/ProjectSelector/ProjectSelector.tsx

@@ -33,10 +33,8 @@ export type Props = {
   projects: PciProject[];
   selectedProject: PciProject;
   onProjectChange: CallableFunction;
-  onProjectCreate: CallableFunction;
   onSeeAllProjects: CallableFunction;
   onMenuOpen?: CallableFunction;
-  createLabel: string;
   seeAllButton: boolean;
   seeAllLabel: string;
 };
@@ -45,10 +43,8 @@ const ProjectSelector: React.FC<ComponentProps<Props>> = ({
   projects,
   selectedProject,
   onProjectChange,
-  onProjectCreate,
   onSeeAllProjects,
   onMenuOpen,
-  createLabel,
   seeAllButton,
   seeAllLabel,
 }: Props): JSX.Element => {
@@ -87,16 +83,8 @@ const ProjectSelector: React.FC<ComponentProps<Props>> = ({
   };
   const [options, setOptions] = useState([]);
   const [value, setValue] = useState(null);
-  const [createProjectOption, setCreateProjectOption] = useState(null);
   const [seeAllProjectsOption, setSeeAllProjectsOption] = useState(null);
 
-  useEffect(() => {
-    setCreateProjectOption({
-      new: true,
-      label: createLabel,
-    });
-  }, [createLabel]);
-
   useEffect(() => {
     setSeeAllProjectsOption(
       seeAllButton
@@ -111,26 +99,23 @@ const ProjectSelector: React.FC<ComponentProps<Props>> = ({
   useEffect(() => {
     setOptions([
       ...(seeAllProjectsOption ? [seeAllProjectsOption] : []),
-      ...(createProjectOption ? [createProjectOption] : []),
       ...(projects
         ? projects.map(({ project_id: projectId, description }) => ({
             id: projectId,
             label: description || projectId,
           }))
         : [])
     ]);
-  }, [projects, createProjectOption]);
+  }, [projects]);
 
   useEffect(() => {
     if (selectedProject) {
       setValue({
         id: selectedProject.project_id,
         label: selectedProject.description || selectedProject.project_id,
       });
-    } else if (createProjectOption) {
-      setValue(createProjectOption);
     }
-  }, [selectedProject, options, createProjectOption]);
+  }, [selectedProject, options]);
 
   return (
     <>
@@ -145,9 +130,7 @@ const ProjectSelector: React.FC<ComponentProps<Props>> = ({
         value={value}
         data-testid="project-selector"
         onChange={(option) => {
-          if (option.new) {
-            onProjectCreate();
-          } else if (option.seeAll) {
+          if (option.seeAll) {
             onSeeAllProjects();
           } else {
             onProjectChange(

packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/PublicCloudPanel.test.tsx

@@ -1,8 +1,8 @@
 import { vi, it, describe, expect } from 'vitest';
-import { render, waitFor } from '@testing-library/react';
+import { render, act, fireEvent } from '@testing-library/react';
 import { Node } from '../navigation-tree/node';
 import { PublicCloudPanel, PublicCloudPanelProps } from './PublicCloudPanel';
-import { mockShell } from '../mocks/sidebarMocks';
+import { mockShell, mockPlugins } from '../mocks/sidebarMocks';
 import { PciProject } from '../ProjectSelector/PciProject';
 import { Props as ProjectSelectorProps } from '../ProjectSelector/ProjectSelector';
 import { pciNode } from '../navigation-tree/services/publicCloud';
@@ -105,4 +105,12 @@ describe('PublicCloudPanel.component', () => {
     expect(projectSelector).not.toBeNull();
     expect(projectSelector.innerHTML).toBe('12345');
   });
+
+  it('should navigate to project creation when the button is clicked', async () => {
+    const { queryByTestId } = renderPublicCloudPanelComponent(props);
+    const createButton = queryByTestId('pci-create-project');
+    await act(() => fireEvent.click(createButton));
+
+    expect(mockPlugins.navigation.navigateTo).toHaveBeenCalled();
+  })
 });

packages/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/PublicCloudPanel.tsx

@@ -1,6 +1,7 @@
 import ProjectSelector from '../ProjectSelector/ProjectSelector';
 import { PciProject } from '../ProjectSelector/PciProject';
 import { fetchIcebergV6 } from '@ovh-ux/manager-core-api';
+import { OsdsButton } from '@ovhcloud/ods-components/react';
 import { useQuery } from '@tanstack/react-query';
 import { useState, useEffect } from 'react';
 import { Node } from '../navigation-tree/node';
@@ -11,9 +12,13 @@ import { Location, useLocation } from 'react-router-dom';
 import style from '../style.module.scss';
 import SubTreeSection from '@/container/nav-reshuffle/sidebar/SubTree/SubTreeSection';
 import { PUBLICCLOUD_UNIVERSE_ID } from '../navigation-tree/services/publicCloud';
+import { useDefaultPublicCloudProject } from '@/container/nav-reshuffle/data/hooks/defaultPublicCloudProject/useDefaultPublicCloudProject';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import {
-  useDefaultPublicCloudProject
-} from '@/container/nav-reshuffle/data/hooks/defaultPublicCloudProject/useDefaultPublicCloudProject';
+  ODS_BUTTON_SIZE,
+  ODS_BUTTON_TYPE,
+  ODS_BUTTON_VARIANT,
+} from '@ovhcloud/ods-components';
 
 export interface PublicCloudPanelProps {
   rootNode: Node;
@@ -65,16 +70,22 @@ export const PublicCloudPanel: React.FC<ComponentProps<
     },
   });
 
-  const { data: defaultPciProject, status: defaultPciProjectStatus } = useDefaultPublicCloudProject(
-    {
-      select: (defaultProjectId: string | null): PciProject | null => {
-        return defaultProjectId !== null
-          ? pciProjects?.find((project: PciProject) => project.project_id === defaultProjectId) || null
-          : null;
-      },
-      enabled: rootNode.id === PUBLICCLOUD_UNIVERSE_ID && !selectedPciProject && !pciProjects,
+  const {
+    data: defaultPciProject,
+    status: defaultPciProjectStatus,
+  } = useDefaultPublicCloudProject({
+    select: (defaultProjectId: string | null): PciProject | null => {
+      return defaultProjectId !== null
+        ? pciProjects?.find(
+            (project: PciProject) => project.project_id === defaultProjectId,
+          ) || null
+        : null;
     },
-  );
+    enabled:
+      rootNode.id === PUBLICCLOUD_UNIVERSE_ID &&
+      !selectedPciProject &&
+      !pciProjects,
+  });
 
   /** Watch URL changes to update selected menu dynamically */
   useEffect(() => {
@@ -103,12 +114,10 @@ export const PublicCloudPanel: React.FC<ComponentProps<
       }
       if (project) {
         setSelectedPciProject(project);
-      }
-      else {
+      } else {
         if (defaultPciProject !== null) {
           setSelectedPciProject(defaultPciProject);
-        }
-        else {
+        } else {
           setSelectedPciProject(pciProjects[0]);
         }
       }
@@ -140,21 +149,21 @@ export const PublicCloudPanel: React.FC<ComponentProps<
           selectedProject={selectedPciProject}
           onProjectChange={(option: typeof selectedPciProject) => {
             if (selectedPciProject !== option) {
-              trackingPlugin.trackClick({ name: 'navbar_v3_entry_home::pci::specific_project_from_listing', type: 'navigation' });
+              trackingPlugin.trackClick({
+                name:
+                  'navbar_v3_entry_home::pci::specific_project_from_listing',
+                type: 'navigation',
+              });
               setSelectedPciProject(option);
               navigationPlugin.navigateTo(
                 'public-cloud',
                 `#/pci/projects/${option.project_id}`,
               );
             }
           }}
-          onProjectCreate={() => {
-            navigationPlugin.navigateTo('public-cloud', `#/pci/projects/new`);
-          }}
           onSeeAllProjects={() => {
             navigationPlugin.navigateTo('public-cloud', `#/pci/projects`);
           }}
-          createLabel={t('sidebar_pci_new')}
           seeAllButton={true}
           seeAllLabel={t('sidebar_pci_all')}
         />
@@ -188,23 +197,39 @@ export const PublicCloudPanel: React.FC<ComponentProps<
           </button>
         )}
       </li>
+      <li className="px-3 mt-3 flex">
+        <OsdsButton
+          color={ODS_THEME_COLOR_INTENT.primary}
+          type={ODS_BUTTON_TYPE.button}
+          size={ODS_BUTTON_SIZE.sm}
+          data-testid="pci-create-project"
+          variant={ODS_BUTTON_VARIANT.flat}
+          onClick={() =>
+            navigationPlugin.navigateTo('public-cloud', `#/pci/projects/new`)
+          }
+        >
+          {t('sidebar_pci_new')} +
+        </OsdsButton>
+      </li>
       {selectedPciProject !== null &&
-        rootNode.children?.filter((childNode) => !shouldHideElement(childNode, 1)).map((node) => (
-          <li
-            key={node.id}
-            id={node.id}
-            className={style.sidebar_pciEntry}
-            role="menuitem"
-          >
+        rootNode.children
+          ?.filter((childNode) => !shouldHideElement(childNode, 1))
+          .map((node) => (
+            <li
+              key={node.id}
+              id={node.id}
+              className={style.sidebar_pciEntry}
+              role="menuitem"
+            >
               <SubTreeSection
                 node={node}
                 selectedNode={selectedNode}
                 selectedPciProject={selectedPciProject?.project_id}
                 handleOnSubMenuClick={handleOnSubMenuClick}
               />
-            {node.separator && <hr role="separator" />}
-          </li>
-        ))}
+              {node.separator && <hr role="separator" />}
+            </li>
+          ))}
     </>
   );
 };