feat(folders): implemented ui for folders in dashboard

frontend/src/components/navigation/NavHeader.tsx

@@ -1,12 +1,23 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
+import { faAngleRight, faHome } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import { useOrganization, useWorkspace } from '@app/context';
 
 import { Select, SelectItem, Tooltip } from '../v2';
 
+type Props = {
+  pageName: string;
+  isProjectRelated?: boolean;
+  isOrganizationRelated?: boolean;
+  currentEnv?: string;
+  userAvailableEnvs?: any[];
+  onEnvChange?: (slug: string) => void;
+  folders?: Array<{ id: string; name: string }>;
+  isFolderMode?: boolean;
+};
+
 // TODO: make links clickable and clean up
 
 /**
@@ -29,15 +40,10 @@ export default function NavHeader({
   isOrganizationRelated,
   currentEnv,
   userAvailableEnvs,
-  onEnvChange
-}: {
-  pageName: string;
-  isProjectRelated?: boolean;
-  isOrganizationRelated?: boolean;
-  currentEnv?: string;
-  userAvailableEnvs?: any[];
-  onEnvChange?: (slug: string) => void;
-}): JSX.Element {
+  onEnvChange,
+  folders,
+  isFolderMode
+}: Props): JSX.Element {
   const { currentWorkspace } = useWorkspace();
   const { currentOrg } = useOrganization();
   const router = useRouter();
@@ -95,6 +101,26 @@ export default function NavHeader({
           </div>
         </>
       )}
+      {isFolderMode &&
+        folders?.map(({ id, name }, index) => {
+          const query = { ...router.query };
+          if (name !== 'root') query.folderId = id;
+          else delete query.folderId;
+          return (
+            <div className="flex items-center space-x-3" key={`breadcrumb-folder-${id}`}>
+              <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
+              {index + 1 === folders?.length ? (
+                <span className="text-sm font-semibold text-bunker-300">{name}</span>
+              ) : (
+                <Link passHref legacyBehavior href={{ pathname: '/dashboard/[id]', query }}>
+                  <a className="text-sm font-semibold text-primary/80 hover:text-primary">
+                    {name === 'root' ? <FontAwesomeIcon icon={faHome} /> : name}
+                  </a>
+                </Link>
+              )}
+            </div>
+          );
+        })}
     </div>
   );
 }

frontend/src/components/v2/EmptyState/EmptyState.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { SizeProp } from '@fortawesome/fontawesome-svg-core';
 import { faCubesStacked, IconDefinition } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { twMerge } from 'tailwind-merge';
@@ -8,13 +9,25 @@ type Props = {
   className?: string;
   children?: ReactNode;
   icon?: IconDefinition;
+  iconSize?: SizeProp;
 };
 
-export const EmptyState = ({ title, className, children, icon = faCubesStacked }: Props) => (
-  <div className={twMerge('flex w-full bg-bunker-700 flex-col items-center px-2 pt-6 text-bunker-300', className)}>
-    <FontAwesomeIcon icon={icon} size="2x" className='mr-4' />
-    <div className='flex flex-row items-center py-4'>
-      <div className="text-bunker-300 text-sm">{title}</div>
+export const EmptyState = ({
+  title,
+  className,
+  children,
+  icon = faCubesStacked,
+  iconSize = '2x'
+}: Props) => (
+  <div
+    className={twMerge(
+      'flex w-full flex-col items-center bg-bunker-700 px-2 pt-6 text-bunker-300',
+      className
+    )}
+  >
+    <FontAwesomeIcon icon={icon} size={iconSize} className="mr-4" />
+    <div className="flex flex-row items-center py-4">
+      <div className="text-sm text-bunker-300">{title}</div>
       <div>{children}</div>
     </div>
   </div>

frontend/src/components/v2/Tooltip/Tooltip.tsx

@@ -35,7 +35,7 @@ export const Tooltip = ({
       sideOffset={5}
       {...props}
       className={twMerge(
-        `z-20 select-none max-w-[15rem] rounded-md bg-mineshaft-800 border border-mineshaft-600 py-2 px-4 font-light text-sm text-bunker-200 shadow-md 
+        `z-50 max-w-[15rem] select-none rounded-md border border-mineshaft-600 bg-mineshaft-800 py-2 px-4 text-sm font-light text-bunker-200 shadow-md 
 data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade
 data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade
 data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade