wip

libs/pages/application/src/lib/feature/tabs-feature/tabs-feature.tsx

@@ -19,7 +19,7 @@ import {
   ButtonStyle,
   Icon,
   IconAwesomeEnum,
-  MenuItemProps,
+  MenuData,
   Skeleton,
   StatusChip,
   Tabs,
@@ -102,13 +102,7 @@ export function TabsFeature() {
     APPLICATION_URL(organizationId, projectId, environmentId, applicationId) + APPLICATION_VARIABLES_URL
   )
 
-  let menuForContentRight: {
-    items: MenuItemProps[]
-    title?: string
-    button?: string
-    buttonLink?: string
-    search?: boolean
-  }[] = []
+  let menuForContentRight: MenuData = []
 
   if (matchEnvVariableRoute) {
     menuForContentRight = [

libs/shared/console-shared/src/lib/create-project-modal/feature/create-project-modal-feature.tsx

@@ -3,23 +3,17 @@ import { FieldValues, FormProvider, useForm } from 'react-hook-form'
 import { useDispatch } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
 import { postProject } from '@qovery/domains/projects'
-import {
-  ENVIRONMENTS_URL,
-  SETTINGS_PROJECT_GENERAL_URL,
-  SETTINGS_PROJECT_URL,
-  SETTINGS_URL,
-} from '@qovery/shared/router'
+import { ENVIRONMENTS_GENERAL_URL, ENVIRONMENTS_URL } from '@qovery/shared/router'
 import { AppDispatch } from '@qovery/store'
 import CreateProjectModal from '../ui/create-project-modal'
 
 export interface CreateProjectModalFeatureProps {
   onClose: () => void
   organizationId: string
-  goToEnvironment?: boolean
 }
 
 export function CreateProjectModalFeature(props: CreateProjectModalFeatureProps) {
-  const { onClose, organizationId, goToEnvironment } = props
+  const { onClose, organizationId } = props
 
   const navigate = useNavigate()
   const dispatch = useDispatch<AppDispatch>()
@@ -40,11 +34,7 @@ export function CreateProjectModalFeature(props: CreateProjectModalFeatureProps)
     )
       .unwrap()
       .then((project) => {
-        if (goToEnvironment) {
-          navigate(ENVIRONMENTS_URL(organizationId, project.id))
-        } else {
-          navigate(SETTINGS_URL(organizationId) + SETTINGS_PROJECT_URL(project.id) + SETTINGS_PROJECT_GENERAL_URL)
-        }
+        navigate(ENVIRONMENTS_URL(organizationId, project.id) + ENVIRONMENTS_GENERAL_URL)
         setLoading(false)
         onClose()
       })

libs/shared/ui/src/lib/components/buttons/button-action/button-action.tsx

@@ -2,8 +2,7 @@ import { useState } from 'react'
 import { Link } from 'react-router-dom'
 import { IconEnum } from '@qovery/shared/enums'
 import { ButtonSize, Icon } from '@qovery/shared/ui'
-import Menu, { MenuAlign } from '../../menu/menu'
-import { MenuItemProps } from '../../menu/menu-item/menu-item'
+import Menu, { MenuAlign, MenuData } from '../../menu/menu'
 
 export enum ButtonActionStyle {
   BASIC = 'basic',
@@ -21,7 +20,7 @@ export interface ButtonActionProps {
   disabled?: boolean
   className?: string
   onClick?: () => void
-  menus?: { items: MenuItemProps[]; title?: string; button?: string; buttonLink?: string; search?: boolean }[]
+  menus?: MenuData
   size?: ButtonSize
 }
 

libs/shared/ui/src/lib/components/layouts/breadcrumb-item/breadcrumb-item.tsx

@@ -1,13 +1,12 @@
 import ButtonIcon, { ButtonIconStyle } from '../../buttons/button-icon/button-icon'
-import Menu, { MenuAlign } from '../../menu/menu'
-import { MenuItemProps } from '../../menu/menu-item/menu-item'
+import Menu, { MenuAlign, MenuData } from '../../menu/menu'
 import BreadcrumbItemValue from './breadcrumb-item-value/breadcrumb-item-value'
 
 export interface BreadcrumbItemProps {
   data: Array<any> | undefined
   label?: string
   paramId: string
-  menuItems: { items: MenuItemProps[]; title?: string; button?: string; buttonLink?: string; search?: boolean }[]
+  menuItems: MenuData
   link: string
   logo?: React.ReactElement
   isLast?: boolean

libs/shared/ui/src/lib/components/layouts/breadcrumb/breadcrumb.tsx

@@ -2,6 +2,7 @@ import equal from 'fast-deep-equal'
 import { Application, Database, Environment, Organization, Project } from 'qovery-typescript-axios'
 import React, { useEffect } from 'react'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
+import { CreateProjectModalFeature } from '@qovery/shared/console-shared'
 import { IconEnum } from '@qovery/shared/enums'
 import { ApplicationEntity, ClusterEntity, DatabaseEntity, EnvironmentEntity } from '@qovery/shared/interfaces'
 import {
@@ -25,6 +26,7 @@ import { ButtonSize } from '../../buttons/button/button'
 import Icon from '../../icon/icon'
 import { IconAwesomeEnum } from '../../icon/icon-awesome.enum'
 import { MenuItemProps } from '../../menu/menu-item/menu-item'
+import useModal from '../../modal/use-modal/use-modal'
 import StatusChip from '../../status-chip/status-chip'
 import BreadcrumbItem from '../breadcrumb-item/breadcrumb-item'
 
@@ -43,6 +45,7 @@ export function BreadcrumbMemo(props: BreadcrumbProps) {
 
   const location = useLocation()
   const navigate = useNavigate()
+  const { openModal, closeModal } = useModal()
   const currentOrganization = organizations?.find((organization) => organizationId === organization.id)
 
   const locationIsApplicationLogs = location.pathname.includes(
@@ -91,6 +94,19 @@ export function BreadcrumbMemo(props: BreadcrumbProps) {
     {
       title: 'Projects',
       search: true,
+      button: {
+        label: (
+          <span>
+            New <Icon name={IconAwesomeEnum.CIRCLE_PLUS} className="ml-0.5" />
+          </span>
+        ),
+        onClick: () => {
+          organizationId &&
+            openModal({
+              content: <CreateProjectModalFeature onClose={closeModal} organizationId={organizationId} />,
+            })
+        },
+      },
       items: projects
         ? projects?.map((project: Project) => ({
             name: project.name,

libs/shared/ui/src/lib/components/menu/menu-group/menu-group.tsx

@@ -1,15 +1,17 @@
 import { MenuDivider } from '@szhsin/react-menu'
-import { useEffect, useState } from 'react'
-import { Link } from 'react-router-dom'
+import { ReactNode, useEffect, useState } from 'react'
 import InputSearch from '../../inputs/input-search/input-search'
 import { MenuItem, MenuItemProps } from '../menu-item/menu-item'
 
 export interface MenuGroupProps {
   menu: {
     items: MenuItemProps[]
+    label?: string
     title?: string
-    button?: string
-    buttonLink?: string
+    button?: {
+      label?: string | ReactNode
+      onClick?: () => void
+    }
     search?: boolean
   }
   isLast: boolean
@@ -56,12 +58,10 @@ export function MenuGroup(props: MenuGroupProps) {
               {menu?.title}
             </p>
           )}
-          {menu?.button && menu?.buttonLink ? (
-            <Link className="text-sm text-brand-400" to={menu?.buttonLink}>
-              {menu?.button}
-            </Link>
-          ) : (
-            ''
+          {menu?.button && (
+            <span className="link text-sm text-brand-500 cursor-pointer font-medium" onClick={menu?.button.onClick}>
+              {menu?.button.label}
+            </span>
           )}
         </div>
       )}

libs/shared/ui/src/lib/components/menu/menu.stories.tsx

@@ -27,9 +27,13 @@ const menus: MenuData = [
       { name: 'Test 3', link: { url: '/', external: false }, copy: 'Test 3' },
     ],
     title: 'Test',
-    button: 'Link',
-    buttonLink: '/',
     search: true,
+    button: {
+      label: 'Create',
+      onClick: () => {
+        alert('Create')
+      },
+    },
   },
   {
     items: [

libs/shared/ui/src/lib/components/menu/menu.tsx

@@ -1,5 +1,5 @@
 import { ControlledMenu, MenuCloseEvent } from '@szhsin/react-menu'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { ReactNode, useEffect, useRef, useState } from 'react'
 import Tooltip from '../tooltip/tooltip'
 import MenuGroup from './menu-group/menu-group'
 import { MenuItemProps } from './menu-item/menu-item'
@@ -21,8 +21,10 @@ export type MenuData = {
   items: MenuItemProps[]
   label?: string
   title?: string
-  button?: string
-  buttonLink?: string
+  button?: {
+    label: string | ReactNode
+    onClick: () => void
+  }
   search?: boolean
 }[]