Add StepNavigation component to EditLayout and UseCase layout for improved navigation

Author: sanjaypinna

app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/components/EditLayout.tsx

@@ -10,6 +10,7 @@ import { Tab, TabList, Tabs, toast } from 'opub-ui';
 import { GraphQL } from '@/lib/api';
 import TitleBar from '../../../../components/title-bar';
 import { useDatasetEditStatus } from '../context';
+import StepNavigation from '../../../../components/StepNavigation';
 
 const datasetQueryDoc: any = graphql(`
   query datasetTitleQuery($filters: DatasetFilter) {
@@ -146,6 +147,9 @@ export function EditLayout({ children, params }: LayoutProps) {
         <div className="bg-surface border-l-divider rounded-tl-none  my-6  flex-grow">
           {children}
         </div>
+      <div>
+        <StepNavigation steps={['metadata','resources','publish']}/>
+      </div>
       </div>
     </div>
   );

app/[locale]/dashboard/[entityType]/[entitySlug]/usecases/edit/[id]/details/page.tsx

@@ -210,7 +210,6 @@ const Details = () => {
   }, [editMutationLoading]);
 
   return (
-    <div>
       <div className=" flex flex-col gap-6">
         <div>
           <TextField
@@ -308,7 +307,6 @@ const Details = () => {
           />
         </div> */}
       </div>
-    </div>
   );
 };
 

app/[locale]/dashboard/[entityType]/[entitySlug]/usecases/edit/layout.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import React from 'react';
 import { useParams, usePathname, useRouter } from 'next/navigation';
 import { graphql } from '@/gql';
 import { UseCaseInputPartial } from '@/gql/generated/graphql';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { Tab, TabList, Tabs, toast } from 'opub-ui';
 
 import { GraphQL } from '@/lib/api';
+import StepNavigation from '../../components/StepNavigation';
 import TitleBar from '../../components/title-bar';
 import { EditStatusProvider, useEditStatus } from './context';
 
@@ -40,6 +40,7 @@ const TabsAndChildren = ({ children }: { children: React.ReactNode }) => {
   const pathItem = layoutList.find(function (v) {
     return pathName.indexOf(v) >= 0;
   });
+
   const UseCaseData: { data: any; isLoading: boolean; refetch: any } = useQuery(
     [`fetch_UseCaseData`],
     () =>
@@ -57,6 +58,7 @@ const TabsAndChildren = ({ children }: { children: React.ReactNode }) => {
       refetchOnReconnect: true,
     }
   );
+
   const { mutate, isLoading: editMutationLoading } = useMutation(
     (data: { data: UseCaseInputPartial }) =>
       GraphQL(UpdateUseCaseTitleMutation, {}, data),
@@ -100,7 +102,7 @@ const TabsAndChildren = ({ children }: { children: React.ReactNode }) => {
   };
 
   const initialTabLabel =
-    links.find((option) => option.selected)?.label || 'Details';
+    links.find((option) => option.selected)?.label || 'Use Case Details';
 
   const { status, setStatus } = useEditStatus();
 
@@ -115,7 +117,14 @@ const TabsAndChildren = ({ children }: { children: React.ReactNode }) => {
         status={status}
         setStatus={setStatus}
       />
-      <Tabs defaultValue={initialTabLabel}>
+      <Tabs
+        value={initialTabLabel}
+        onValueChange={(newValue) =>
+          handleTabClick(
+            links.find((link) => link.label === newValue)?.url || ''
+          )
+        }
+      >
         <TabList fitted border>
           {links.map((item, index) => (
             <Tab
@@ -130,8 +139,11 @@ const TabsAndChildren = ({ children }: { children: React.ReactNode }) => {
           ))}
         </TabList>
       </Tabs>
-      <div className="bg-surface border-l-divider rounded-tl-none flex-grow">
-        {children}
+      <div className="">{children}</div>
+      <div className="mb-6">
+        <StepNavigation
+          steps={['details', 'assign', 'contributors', 'publish']}
+        />
       </div>
     </div>
   );