Merge pull request #185 from CivicDataLab/179-bring-all-the-dataspaces-changes-under-a-feature-flag

move dataspace features under the feature flag

Author: bhavabhuthi

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

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { useParams } from 'next/navigation';
+import { notFound, useParams } from 'next/navigation';
 import { SidebarNavItem } from '@/types';
 
 import { cn } from '@/lib/utils';
@@ -16,9 +16,15 @@ interface DashboardLayoutProps {
 
 export default function OrgDashboardLayout({ children }: DashboardLayoutProps) {
   const [isOpened, setIsOpened] = React.useState(false);
-
   const params = useParams<{ entityType: string; entitySlug: string }>();
 
+  if (
+    process.env.NEXT_PUBLIC_DATASPACE_FEATURE_ENABLED !== 'true' &&
+    params.entityType === 'dataspace'
+  ) {
+    return notFound();
+  }
+
   const orgSidebarNav: Array<SidebarNavItem> = [
     {
       title: 'Datasets',
@@ -32,8 +38,6 @@ export default function OrgDashboardLayout({ children }: DashboardLayoutProps) {
     },
   ];
 
-  const entitySlug = params.entitySlug;
-
   return (
     <>
       <BreadCrumbs
@@ -62,7 +66,7 @@ export default function OrgDashboardLayout({ children }: DashboardLayoutProps) {
           ' bg-surfaceDefault p-4 md:flex'
         )}
       >
-        <DashboardNav items={orgSidebarNav} entitySlug={entitySlug} />
+        <DashboardNav items={orgSidebarNav} entitySlug={params.entitySlug} />
 
         <div className="z-1 basis-2 md:hidden">
           <MobileDashboardNav

app/[locale]/dashboard/[entityType]/page.tsx

@@ -2,7 +2,7 @@
 
 import Image from 'next/image';
 import Link from 'next/link';
-import { useParams, usePathname } from 'next/navigation';
+import { notFound, useParams, usePathname } from 'next/navigation';
 import { useQuery } from '@tanstack/react-query';
 import { Icon, Text } from 'opub-ui';
 
@@ -58,6 +58,13 @@ const Page = () => {
     )
   );
 
+  if (
+    process.env.NEXT_PUBLIC_DATASPACE_FEATURE_ENABLED !== 'true' &&
+    params.entityType === 'dataspace'
+  ) {
+    return notFound();
+  }
+
   return (
     <div className=" bg-surfaceDefault">
       <div>

app/[locale]/dashboard/components/dashboard-header.tsx

@@ -9,12 +9,16 @@ export function DashboardHeader({ currentPath }: { currentPath: string }) {
       selected: currentPath.indexOf('user') >= 0,
       disabled: false,
     },
-    {
-      label: 'My Data Spaces',
-      url: `/dashboard/dataspace`,
-      selected: currentPath.indexOf('dataspace') >= 0,
-      disabled: false,
-    },
+    ...(process.env.NEXT_PUBLIC_DATASPACE_FEATURE_ENABLED === 'true'
+      ? [
+          {
+            label: 'My Data Spaces',
+            url: `/dashboard/dataspace`,
+            selected: currentPath.indexOf('dataspace') >= 0,
+            disabled: false,
+          },
+        ]
+      : []),
     {
       label: 'My Organizations',
       url: `/dashboard/organization`,
@@ -29,7 +33,7 @@ export function DashboardHeader({ currentPath }: { currentPath: string }) {
   };
 
   const initialTabLabel =
-    userDashboardOptions.find((option) => option.selected)?.label ||
+    userDashboardOptions.find((option) => option?.selected)?.label ||
     'My Datasets';
 
   return (
@@ -41,16 +45,18 @@ export function DashboardHeader({ currentPath }: { currentPath: string }) {
         <div>
           <Tabs defaultValue={initialTabLabel}>
             <TabList fitted>
-              {userDashboardOptions.map((item, index) => (
-                <Tab
-                  value={item.label}
-                  key={index}
-                  onClick={() => handleTabClick(item.url)}
-                  disabled={item.disabled}
-                >
-                  {item.label}
-                </Tab>
-              ))}
+              {userDashboardOptions
+                .filter((item) => item !== null)
+                .map((item, index) => (
+                  <Tab
+                    value={item.label}
+                    key={index}
+                    onClick={() => handleTabClick(item.url)}
+                    disabled={item.disabled}
+                  >
+                    {item.label}
+                  </Tab>
+                ))}
             </TabList>
           </Tabs>
         </div>

app/[locale]/dashboard/not-found.tsx

@@ -4,7 +4,7 @@ import { Button, Text } from 'opub-ui';
 
 export default function NotFound() {
   return (
-    <div className="flex h-full flex-col items-center justify-center gap-2">
+    <div className="flex h-[90lvh] flex-col items-center justify-center gap-2">
       <Text variant="heading3xl">404</Text>
       <Text variant="headingMd">Page not found</Text>
       <div className="mt-2">