fix(navigation): glitch switch between project and organization (#1634)

fix(navigation): glitch switch between project
Qovery · Sep 3, 2024 · a6aa8e4 · a6aa8e4
1 parent 383bb33
commit a6aa8e4
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 16 deletions.
diff --git a/apps/console/src/app/components/redirect-overview.tsx b/apps/console/src/app/components/redirect-overview.tsx
@@ -6,6 +6,14 @@ import { NotFoundPage } from '@qovery/pages/layout'
 import { ENVIRONMENTS_GENERAL_URL, ENVIRONMENTS_URL, SETTINGS_GENERAL_URL, SETTINGS_URL } from '@qovery/shared/routes'
 import { LoaderSpinner, ToastEnum, toast } from '@qovery/shared/ui'
 
+function LoadingScreen() {
+  return (
+    <div className="flex min-h-page-container items-center justify-center rounded-t bg-neutral-50">
+      <LoaderSpinner />
+    </div>
+  )
+}
+
 export function RedirectOverview() {
   const { organizationId = '' } = useParams()
   const navigate = useNavigate()
@@ -19,12 +27,8 @@ export function RedirectOverview() {
     }
   }, [organizationId, organizations, navigate, projects])
 
-  if (isLoading) {
-    return (
-      <div className="flex min-h-page-container items-center justify-center rounded-t bg-neutral-50">
-        <LoaderSpinner />
-      </div>
-    )
+  if (isLoading || !isFetched) {
+    return <LoadingScreen />
   }
 
   if (error) {
@@ -39,7 +43,7 @@ export function RedirectOverview() {
     return <Navigate to={SETTINGS_URL(organizationId) + SETTINGS_GENERAL_URL} />
   }
 
-  return null
+  return <LoadingScreen />
 }
 
 export default RedirectOverview
diff --git a/libs/pages/environments/src/lib/feature/page-general-feature/page-general-feature.tsx b/libs/pages/environments/src/lib/feature/page-general-feature/page-general-feature.tsx
@@ -11,7 +11,7 @@ export function PageGeneralFeature() {
   const { data: clusters = [] } = useClusters({ organizationId })
   const { data: project } = useProject({ organizationId, projectId })
 
-  return project && <PageGeneral project={project} clusterAvailable={clusters.length > 0} />
+  return <PageGeneral project={project} clusterAvailable={clusters.length > 0} />
 }
 
 export default PageGeneralFeature
diff --git a/libs/pages/environments/src/lib/ui/container/container.tsx b/libs/pages/environments/src/lib/ui/container/container.tsx
@@ -7,6 +7,7 @@ import { ShowAllVariablesToggle, VariablesActionToolbar, VariablesProvider } fro
 import {
   ENVIRONMENTS_DEPLOYMENT_RULES_CREATE_URL,
   ENVIRONMENTS_DEPLOYMENT_RULES_URL,
+  ENVIRONMENTS_GENERAL_URL,
   ENVIRONMENTS_URL,
   ENVIRONMENTS_VARIABLES_URL,
 } from '@qovery/shared/routes'
@@ -29,8 +30,8 @@ export function Container({ children }: PropsWithChildren) {
     {
       icon: <Icon iconName="layer-group" iconStyle="regular" />,
       name: 'Environments',
-      active: pathname === `${ENVIRONMENTS_URL(organizationId, projectId)}/general`,
-      link: `${ENVIRONMENTS_URL(organizationId, projectId)}/general`,
+      active: pathname === `${ENVIRONMENTS_URL(organizationId, projectId)}${ENVIRONMENTS_GENERAL_URL}`,
+      link: `${ENVIRONMENTS_URL(organizationId, projectId)}${ENVIRONMENTS_GENERAL_URL}`,
     },
     {
       icon: <Icon iconName="browsers" iconStyle="regular" />,

diff --git a/libs/pages/environments/src/lib/ui/page-general/page-general.tsx b/libs/pages/environments/src/lib/ui/page-general/page-general.tsx
@@ -3,7 +3,7 @@ import { EnvironmentList } from '@qovery/domains/environments/feature'
 
 export interface PageGeneralProps {
   clusterAvailable: boolean
-  project: Project
+  project?: Project
 }
 
 export function PageGeneral({ clusterAvailable, project }: PageGeneralProps) {

diff --git a/libs/pages/layout/src/lib/ui/breadcrumb/breadcrumb.tsx b/libs/pages/layout/src/lib/ui/breadcrumb/breadcrumb.tsx
@@ -18,7 +18,6 @@ import {
   ENVIRONMENTS_URL,
   ENVIRONMENT_LOGS_URL,
   INFRA_LOGS_URL,
-  OVERVIEW_URL,
   SERVICES_GENERAL_URL,
   SERVICES_URL,
   SETTINGS_URL,
@@ -100,7 +99,7 @@ export function Breadcrumb(props: BreadcrumbProps) {
         ? projects?.map((project: Project) => ({
             name: project.name,
             link: {
-              url: OVERVIEW_URL(project.organization?.id, project.id),
+              url: ENVIRONMENTS_URL(project.organization?.id, project.id) + ENVIRONMENTS_GENERAL_URL,
             },
             contentLeft: (
               <Icon

diff --git a/libs/pages/layout/src/lib/ui/navigation/navigation.tsx b/libs/pages/layout/src/lib/ui/navigation/navigation.tsx
@@ -4,11 +4,12 @@ import {
   AUDIT_LOGS_URL,
   CLUSTERS_URL,
   CLUSTER_URL,
+  ENVIRONMENTS_GENERAL_URL,
+  ENVIRONMENTS_URL,
   INFRA_LOGS_URL,
   ORGANIZATION_AUDIT_LOGS_URL,
   ORGANIZATION_PROJECT_URL,
   ORGANIZATION_URL,
-  OVERVIEW_URL,
   SETTINGS_URL,
 } from '@qovery/shared/routes'
 import { Icon, Link, Tooltip } from '@qovery/shared/ui'
@@ -55,7 +56,11 @@ export function Navigation({ defaultOrganizationId, clusterNotification }: Navig
                     'bg-neutral-100 text-brand-500 dark:bg-brand-500 dark:text-neutral-100': matchOrganizationRoute,
                   }
                 )}
-                to={projectId ? OVERVIEW_URL(organizationId, projectId) : ORGANIZATION_URL(organizationId)}
+                to={
+                  projectId
+                    ? ENVIRONMENTS_URL(organizationId, projectId) + ENVIRONMENTS_GENERAL_URL
+                    : ORGANIZATION_URL(organizationId)
+                }
               >
                 <Icon iconName="layer-group" className="text-[18px]" />
               </Link>

diff --git a/libs/shared/ui/src/lib/components/header/header.tsx b/libs/shared/ui/src/lib/components/header/header.tsx
@@ -11,7 +11,7 @@ export interface HeaderProps extends PropsWithChildren {
 
 export function Header({ title, buttons, actions, children }: HeaderProps) {
   return (
-    <div className="flex shrink-0 items-center justify-between rounded-t border-b border-neutral-200 bg-white px-5 py-6">
+    <div className="flex min-h-[125px] shrink-0 items-center justify-between rounded-t border-b border-neutral-200 bg-white px-5 py-6">
       <div className="ml-4 flex items-center gap-5">
         {children}
         <div className="flex flex-col gap-3">