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

ref: MANAGER-16358 Signed-off-by: Maxime Bajeux <[email protected]>
ovh · Dec 18, 2024 · 5d5c730 · 5d5c730
1 parent 263817e
commit 5d5c730
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 54 deletions.
diff --git a/...er/apps/container/src/container/nav-reshuffle/sidebar/ProjectSelector/ProjectSelector.tsx b/...er/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(

diff --git a/...s/manager/apps/container/src/container/nav-reshuffle/sidebar/SubTree/PublicCloudPanel.tsx b/...s/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,38 @@ 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}
+          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>
+          ))}
     </>
   );
 };
diff --git a/yarn.lock b/yarn.lock
@@ -6006,6 +6006,15 @@
   dependencies:
     lodash "^4.17.15"
 
+"@ovh-ux/ovh-at-internet@^0.17.0":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@ovh-ux/ovh-at-internet/-/ovh-at-internet-0.17.0.tgz#464c5230e672b35b9dff95bf89dfd85ce806da2e"
+  integrity sha512-sSiJ4zI94WdofCvEC6/cUmL1jgBIyQkZ+JQqXm5X2ux8WeLZH0p2TsULhn/sjEY/TbHFmkEWmuIijp5hNoXOaw==
+  dependencies:
+    "@ovh-ux/manager-config" "^8.0.1"
+    "@types/lodash-es" "^4.17.5"
+    lodash-es "^4.17.15"
+
 "@ovh-ux/rollup-plugin-less-inject@^1.0.5":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@ovh-ux/rollup-plugin-less-inject/-/rollup-plugin-less-inject-1.0.6.tgz#8db90747f02d2bb95e3a5563d1c5a77a25edd0ad"
@@ -6099,9 +6108,9 @@
     tslib "2.6.3"
     vanillajs-datepicker "1.3.4"
 
-"@ovhcloud/ods-components@^18.4.0":
+"@ovhcloud/ods-components@^18.4.1":
   version "18.4.1"
-  resolved "https://registry.yarnpkg.com/@ovhcloud/ods-components/-/ods-components-18.4.1.tgz#44e21d23fbf844348e94b966d2aa5c38d8376dc8"
+  resolved "https://artifactory.ovhcloud.tools:443/artifactory/api/npm/digital-tools-manager-aapi-npm/@ovhcloud/ods-components/-/ods-components-18.4.1.tgz#44e21d23fbf844348e94b966d2aa5c38d8376dc8"
   integrity sha512-aS7BArn0691hyHAn2/ND/7XYIX01gAmVCSvEl8uT9umT4iDDvodipkWRtGxBUin6ndvyED1Jx0BfCbtYsrKPeQ==
   dependencies:
     "@floating-ui/dom" "1.6.11"
@@ -6130,9 +6139,9 @@
   resolved "https://registry.yarnpkg.com/@ovhcloud/ods-themes/-/ods-themes-18.3.0.tgz#804e3502e6791f7ec2efc24abb107d27cd4e02e0"
   integrity sha512-mTxtcM4tCUPk98x65PeslXqGONJraTryXgkbgbZuvtOYf9SgVl+zFJfyisD2sYGuJvVf6hJP1NvJkyrxOUqtSw==
 
-"@ovhcloud/ods-themes@^18.4.0":
+"@ovhcloud/ods-themes@^18.4.1":
   version "18.4.1"
-  resolved "https://registry.yarnpkg.com/@ovhcloud/ods-themes/-/ods-themes-18.4.1.tgz#1c8dfeff1ba0b829fd61e8dea41af4cdbed46912"
+  resolved "https://artifactory.ovhcloud.tools:443/artifactory/api/npm/digital-tools-manager-aapi-npm/@ovhcloud/ods-themes/-/ods-themes-18.4.1.tgz#1c8dfeff1ba0b829fd61e8dea41af4cdbed46912"
   integrity sha512-bezBp/Bgbo19IFPJ/+a/bFt2IArjq8wGrHPshpk/bVVZsxkgpAiUfRERmftU+l7gYU3e+yvFdopNL6eRaJDPWQ==
 
 "@ovhcloud/reket-axios-client@^0.2.1":