From 0e073cc9fc6c461286f5cbe69ecab49b32f78e5a Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Sun, 6 Apr 2025 21:12:08 -0400
Subject: [PATCH 1/2] Update UI for all projects/my projects Updated the UI so
 that instead of having a dropdown to select + a heading on the project
 overview page, the heading becomes the drop down for my projects vs all
 projects

---
 .../SecretManagerOverviewPage.tsx             | 56 +++++++++----------
 .../components/AllProjectView.tsx             | 37 +++++++++---
 .../components/MyProjectView.tsx              | 36 +++++++++---
 .../components/ProjectListToggle.tsx          | 18 ++++--
 4 files changed, 97 insertions(+), 50 deletions(-)

diff --git a/frontend/src/pages/organization/SecretManagerOverviewPage/SecretManagerOverviewPage.tsx b/frontend/src/pages/organization/SecretManagerOverviewPage/SecretManagerOverviewPage.tsx
index 0d49e05f9..24e2b9729 100644
--- a/frontend/src/pages/organization/SecretManagerOverviewPage/SecretManagerOverviewPage.tsx
+++ b/frontend/src/pages/organization/SecretManagerOverviewPage/SecretManagerOverviewPage.tsx
@@ -2,21 +2,20 @@
 import { useState } from "react";
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
-import { faExclamationCircle, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
-import { OrgPermissionCan } from "@app/components/permissions";
 import { NewProjectModal } from "@app/components/projects";
-import { Button, PageHeader } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
+import { PageHeader } from "@app/components/v2";
+import { useSubscription } from "@app/context";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { AllProjectView } from "./components/AllProjectView";
 import { MyProjectView } from "./components/MyProjectView";
-import { ProjectListView } from "./components/ProjectListToggle";
+import { ProjectListToggle, ProjectListView } from "./components/ProjectListToggle";
 
 const formatDescription = (type: ProjectType) => {
   if (type === ProjectType.SecretManager)
@@ -80,33 +79,30 @@ export const ProductOverviewPage = ({ type }: Props) => {
         </div>
       )}
       <div className="mb-4 flex flex-col items-start justify-start">
-        <PageHeader title="Projects" description={formatDescription(type)}>
-          <OrgPermissionCan I={OrgPermissionActions.Create} an={OrgPermissionSubjects.Workspace}>
-            {(isAllowed) => (
-              <Button
-                isDisabled={!isAllowed}
-                colorSchema="primary"
-                leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                onClick={() => {
-                  if (isAddingProjectsAllowed) {
-                    handlePopUpOpen("addNewWs");
-                  } else {
-                    handlePopUpOpen("upgradePlan");
-                  }
-                }}
-                className="ml-2"
-              >
-                Add New Project
-              </Button>
-            )}
-          </OrgPermissionCan>
+        <PageHeader
+          title={
+            <div className="flex items-center gap-4">
+              <ProjectListToggle value={projectListView} onChange={setProjectListView} />
+            </div>
+          }
+          description={formatDescription(type)}
+        >
         </PageHeader>
       </div>
-      {projectListView === ProjectListView.MyProjects && (
-        <MyProjectView type={type} onListViewToggle={setProjectListView} />
-      )}
-      {projectListView === ProjectListView.AllProjects && (
-        <AllProjectView type={type} onListViewToggle={setProjectListView} />
+      {projectListView === ProjectListView.MyProjects ? (
+        <MyProjectView 
+          type={type} 
+          onAddNewProject={() => handlePopUpOpen("addNewWs")}
+          onUpgradePlan={() => handlePopUpOpen("upgradePlan")}
+          isAddingProjectsAllowed={isAddingProjectsAllowed}
+        />
+      ) : (
+        <AllProjectView 
+          type={type} 
+          onAddNewProject={() => handlePopUpOpen("addNewWs")}
+          onUpgradePlan={() => handlePopUpOpen("upgradePlan")}
+          isAddingProjectsAllowed={isAddingProjectsAllowed}
+        />
       )}
       <NewProjectModal
         isOpen={popUp.addNewWs.isOpen}
diff --git a/frontend/src/pages/organization/SecretManagerOverviewPage/components/AllProjectView.tsx b/frontend/src/pages/organization/SecretManagerOverviewPage/components/AllProjectView.tsx
index 5cdaa9c62..eb69f1c38 100644
--- a/frontend/src/pages/organization/SecretManagerOverviewPage/components/AllProjectView.tsx
+++ b/frontend/src/pages/organization/SecretManagerOverviewPage/components/AllProjectView.tsx
@@ -6,13 +6,15 @@ import {
   faCheck,
   faFolderOpen,
   faList,
-  faMagnifyingGlass
+  faMagnifyingGlass,
+  faPlus
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
 import {
   Button,
   FormControl,
@@ -27,13 +29,14 @@ import {
 import { getProjectHomePage } from "@app/helpers/project";
 import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { useRequestProjectAccess, useSearchProjects } from "@app/hooks/api";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { ProjectType, Workspace } from "@app/hooks/api/workspace/types";
 
-import { ProjectListToggle, ProjectListView } from "./ProjectListToggle";
-
 type Props = {
   type: ProjectType;
-  onListViewToggle: (value: ProjectListView) => void;
+  onAddNewProject: () => void;
+  onUpgradePlan: () => void;
+  isAddingProjectsAllowed: boolean;
 };
 
 type RequestAccessModalProps = {
@@ -83,7 +86,7 @@ const RequestAccessModal = ({ projectId, onPopUpToggle }: RequestAccessModalProp
   );
 };
 
-export const AllProjectView = ({ type, onListViewToggle }: Props) => {
+export const AllProjectView = ({ type, onAddNewProject, onUpgradePlan, isAddingProjectsAllowed }: Props) => {
   const navigate = useNavigate();
   const [searchFilter, setSearchFilter] = useState("");
   const [debouncedSearch] = useDebounce(searchFilter);
@@ -119,11 +122,10 @@ export const AllProjectView = ({ type, onListViewToggle }: Props) => {
   return (
     <div>
       <div className="flex w-full flex-row">
-        <ProjectListToggle value={ProjectListView.AllProjects} onChange={onListViewToggle} />
         <div className="flex-grow" />
         <Input
           className="h-[2.3rem] bg-mineshaft-800 text-sm placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
-          containerClassName="max-w-md"
+          containerClassName="w-full"
           placeholder="Search by project name..."
           value={searchFilter}
           onChange={(e) => setSearchFilter(e.target.value)}
@@ -163,6 +165,25 @@ export const AllProjectView = ({ type, onListViewToggle }: Props) => {
             <FontAwesomeIcon icon={faList} />
           </IconButton>
         </div>
+        <OrgPermissionCan I={OrgPermissionActions.Create} an={OrgPermissionSubjects.Workspace}>
+          {(isAllowed) => (
+            <Button
+              isDisabled={!isAllowed}
+              colorSchema="primary"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => {
+                if (isAddingProjectsAllowed) {
+                  onAddNewProject();
+                } else {
+                  onUpgradePlan();
+                }
+              }}
+              className="ml-2"
+            >
+              Add New Project
+            </Button>
+          )}
+        </OrgPermissionCan>
       </div>
       <div className="mt-4 w-full rounded-md">
         {isProjectLoading &&
@@ -266,7 +287,7 @@ export const AllProjectView = ({ type, onListViewToggle }: Props) => {
       >
         <ModalContent
           title="Confirm Access Request"
-          subTitle={`Requesting access to project ${requestedWorkspaceDetails?.name}. You may include a note for the admins.`}
+          subTitle={`Requesting access to project ${requestedWorkspaceDetails?.name}. You may include an optional note for project admins to review your request.`}
         >
           <RequestAccessModal
             onPopUpToggle={() => handlePopUpToggle("requestAccessConfirmation")}
diff --git a/frontend/src/pages/organization/SecretManagerOverviewPage/components/MyProjectView.tsx b/frontend/src/pages/organization/SecretManagerOverviewPage/components/MyProjectView.tsx
index 2eecb540d..fb78b3ac0 100644
--- a/frontend/src/pages/organization/SecretManagerOverviewPage/components/MyProjectView.tsx
+++ b/frontend/src/pages/organization/SecretManagerOverviewPage/components/MyProjectView.tsx
@@ -7,6 +7,7 @@ import {
   faBorderAll,
   faList,
   faMagnifyingGlass,
+  faPlus,
   faSearch,
   faStar as faSolidStar
 } from "@fortawesome/free-solid-svg-icons";
@@ -14,8 +15,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
 
 import { createNotification } from "@app/components/notifications";
-import { IconButton, Input, Pagination, Skeleton, Tooltip } from "@app/components/v2";
-import { useOrganization } from "@app/context";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Button, IconButton, Input, Pagination, Skeleton, Tooltip } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { getProjectHomePage } from "@app/helpers/project";
 import { usePagination, useResetPageHelper } from "@app/hooks";
 import { useGetUserWorkspaces } from "@app/hooks/api";
@@ -24,11 +26,11 @@ import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation";
 import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries";
 import { ProjectType, Workspace } from "@app/hooks/api/workspace/types";
 
-import { ProjectListToggle, ProjectListView } from "./ProjectListToggle";
-
 type Props = {
   type: ProjectType;
-  onListViewToggle: (value: ProjectListView) => void;
+  onAddNewProject: () => void;
+  onUpgradePlan: () => void;
+  isAddingProjectsAllowed: boolean;
 };
 
 enum ProjectOrderBy {
@@ -40,7 +42,7 @@ enum ProjectsViewMode {
   LIST = "list"
 }
 
-export const MyProjectView = ({ type, onListViewToggle }: Props) => {
+export const MyProjectView = ({ type, onAddNewProject, onUpgradePlan, isAddingProjectsAllowed }: Props) => {
   const navigate = useNavigate();
   const { currentOrg } = useOrganization();
 
@@ -318,11 +320,10 @@ export const MyProjectView = ({ type, onListViewToggle }: Props) => {
   return (
     <div>
       <div className="flex w-full flex-row">
-        <ProjectListToggle value={ProjectListView.MyProjects} onChange={onListViewToggle} />
         <div className="flex-grow" />
         <Input
           className="h-[2.3rem] bg-mineshaft-800 text-sm placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
-          containerClassName="max-w-md"
+          containerClassName="w-full"
           placeholder="Search by project name..."
           value={searchFilter}
           onChange={(e) => setSearchFilter(e.target.value)}
@@ -376,6 +377,25 @@ export const MyProjectView = ({ type, onListViewToggle }: Props) => {
             <FontAwesomeIcon icon={faList} />
           </IconButton>
         </div>
+        <OrgPermissionCan I={OrgPermissionActions.Create} an={OrgPermissionSubjects.Workspace}>
+          {(isAllowed) => (
+            <Button
+              isDisabled={!isAllowed}
+              colorSchema="primary"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => {
+                if (isAddingProjectsAllowed) {
+                  onAddNewProject();
+                } else {
+                  onUpgradePlan();
+                }
+              }}
+              className="ml-2"
+            >
+              Add New Project
+            </Button>
+          )}
+        </OrgPermissionCan>
       </div>
       {projectsComponents}
       {!isProjectViewLoading && Boolean(filteredWorkspaces.length) && (
diff --git a/frontend/src/pages/organization/SecretManagerOverviewPage/components/ProjectListToggle.tsx b/frontend/src/pages/organization/SecretManagerOverviewPage/components/ProjectListToggle.tsx
index 4c16f8cfb..2566ee46d 100644
--- a/frontend/src/pages/organization/SecretManagerOverviewPage/components/ProjectListToggle.tsx
+++ b/frontend/src/pages/organization/SecretManagerOverviewPage/components/ProjectListToggle.tsx
@@ -1,4 +1,6 @@
 import { Select, SelectItem } from "@app/components/v2";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
 
 export enum ProjectListView {
   MyProjects = "my-projects",
@@ -11,10 +13,18 @@ type Props = {
 };
 
 export const ProjectListToggle = ({ value, onChange }: Props) => {
+  const getDisplayText = (value: ProjectListView) => {
+    return value === ProjectListView.MyProjects ? "My Projects" : "All Projects";
+  };
+
   return (
-    <Select value={value} onValueChange={onChange}>
-      <SelectItem value={ProjectListView.MyProjects}>My Projects</SelectItem>
-      <SelectItem value={ProjectListView.AllProjects}>All Projects</SelectItem>
-    </Select>
+    <div className="flex items-center gap-2 relative group cursor-pointer">
+      <h1 className="text-3xl font-semibold group-hover:text-gray-500 transition-colors">{getDisplayText(value)}</h1>
+      <Select value={value} onValueChange={onChange} className="absolute left-0 top-0 w-full h-full opacity-0 cursor-pointer">
+        <SelectItem value={ProjectListView.MyProjects}>My Projects</SelectItem>
+        <SelectItem value={ProjectListView.AllProjects}>All Projects</SelectItem>
+      </Select>
+      <FontAwesomeIcon icon={faChevronDown} className="group-hover:text-gray-500 transition-colors text-lg" />
+    </div>
   );
 };

From 5ab853d3e60d3651f3525b1bb4f0bc4fd36b3680 Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Sun, 6 Apr 2025 21:17:51 -0400
Subject: [PATCH 2/2] fix lint

---
 .../SecretManagerOverviewPage.tsx             | 11 ++++----
 .../components/AllProjectView.tsx             |  9 +++++--
 .../components/MyProjectView.tsx              |  7 ++++-
 .../components/ProjectListToggle.tsx          | 26 +++++++++++++------
 4 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/frontend/src/pages/organization/SecretManagerOverviewPage/SecretManagerOverviewPage.tsx b/frontend/src/pages/organization/SecretManagerOverviewPage/SecretManagerOverviewPage.tsx
index 24e2b9729..ebaa64454 100644
--- a/frontend/src/pages/organization/SecretManagerOverviewPage/SecretManagerOverviewPage.tsx
+++ b/frontend/src/pages/organization/SecretManagerOverviewPage/SecretManagerOverviewPage.tsx
@@ -86,19 +86,18 @@ export const ProductOverviewPage = ({ type }: Props) => {
             </div>
           }
           description={formatDescription(type)}
-        >
-        </PageHeader>
+        />
       </div>
       {projectListView === ProjectListView.MyProjects ? (
-        <MyProjectView 
-          type={type} 
+        <MyProjectView
+          type={type}
           onAddNewProject={() => handlePopUpOpen("addNewWs")}
           onUpgradePlan={() => handlePopUpOpen("upgradePlan")}
           isAddingProjectsAllowed={isAddingProjectsAllowed}
         />
       ) : (
-        <AllProjectView 
-          type={type} 
+        <AllProjectView
+          type={type}
           onAddNewProject={() => handlePopUpOpen("addNewWs")}
           onUpgradePlan={() => handlePopUpOpen("upgradePlan")}
           isAddingProjectsAllowed={isAddingProjectsAllowed}
diff --git a/frontend/src/pages/organization/SecretManagerOverviewPage/components/AllProjectView.tsx b/frontend/src/pages/organization/SecretManagerOverviewPage/components/AllProjectView.tsx
index eb69f1c38..5fd4252e3 100644
--- a/frontend/src/pages/organization/SecretManagerOverviewPage/components/AllProjectView.tsx
+++ b/frontend/src/pages/organization/SecretManagerOverviewPage/components/AllProjectView.tsx
@@ -26,10 +26,10 @@ import {
   Skeleton,
   Tooltip
 } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { getProjectHomePage } from "@app/helpers/project";
 import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { useRequestProjectAccess, useSearchProjects } from "@app/hooks/api";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { ProjectType, Workspace } from "@app/hooks/api/workspace/types";
 
 type Props = {
@@ -86,7 +86,12 @@ const RequestAccessModal = ({ projectId, onPopUpToggle }: RequestAccessModalProp
   );
 };
 
-export const AllProjectView = ({ type, onAddNewProject, onUpgradePlan, isAddingProjectsAllowed }: Props) => {
+export const AllProjectView = ({
+  type,
+  onAddNewProject,
+  onUpgradePlan,
+  isAddingProjectsAllowed
+}: Props) => {
   const navigate = useNavigate();
   const [searchFilter, setSearchFilter] = useState("");
   const [debouncedSearch] = useDebounce(searchFilter);
diff --git a/frontend/src/pages/organization/SecretManagerOverviewPage/components/MyProjectView.tsx b/frontend/src/pages/organization/SecretManagerOverviewPage/components/MyProjectView.tsx
index fb78b3ac0..e723e1dfe 100644
--- a/frontend/src/pages/organization/SecretManagerOverviewPage/components/MyProjectView.tsx
+++ b/frontend/src/pages/organization/SecretManagerOverviewPage/components/MyProjectView.tsx
@@ -42,7 +42,12 @@ enum ProjectsViewMode {
   LIST = "list"
 }
 
-export const MyProjectView = ({ type, onAddNewProject, onUpgradePlan, isAddingProjectsAllowed }: Props) => {
+export const MyProjectView = ({
+  type,
+  onAddNewProject,
+  onUpgradePlan,
+  isAddingProjectsAllowed
+}: Props) => {
   const navigate = useNavigate();
   const { currentOrg } = useOrganization();
 
diff --git a/frontend/src/pages/organization/SecretManagerOverviewPage/components/ProjectListToggle.tsx b/frontend/src/pages/organization/SecretManagerOverviewPage/components/ProjectListToggle.tsx
index 2566ee46d..f91d8f578 100644
--- a/frontend/src/pages/organization/SecretManagerOverviewPage/components/ProjectListToggle.tsx
+++ b/frontend/src/pages/organization/SecretManagerOverviewPage/components/ProjectListToggle.tsx
@@ -1,6 +1,7 @@
-import { Select, SelectItem } from "@app/components/v2";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Select, SelectItem } from "@app/components/v2";
 
 export enum ProjectListView {
   MyProjects = "my-projects",
@@ -13,18 +14,27 @@ type Props = {
 };
 
 export const ProjectListToggle = ({ value, onChange }: Props) => {
-  const getDisplayText = (value: ProjectListView) => {
-    return value === ProjectListView.MyProjects ? "My Projects" : "All Projects";
+  const getDisplayText = (listView: ProjectListView) => {
+    return listView === ProjectListView.MyProjects ? "My Projects" : "All Projects";
   };
 
   return (
-    <div className="flex items-center gap-2 relative group cursor-pointer">
-      <h1 className="text-3xl font-semibold group-hover:text-gray-500 transition-colors">{getDisplayText(value)}</h1>
-      <Select value={value} onValueChange={onChange} className="absolute left-0 top-0 w-full h-full opacity-0 cursor-pointer">
+    <div className="group relative flex cursor-pointer items-center gap-2">
+      <h1 className="text-3xl font-semibold transition-colors group-hover:text-gray-500">
+        {getDisplayText(value)}
+      </h1>
+      <Select
+        value={value}
+        onValueChange={onChange}
+        className="absolute left-0 top-0 h-full w-full cursor-pointer opacity-0"
+      >
         <SelectItem value={ProjectListView.MyProjects}>My Projects</SelectItem>
         <SelectItem value={ProjectListView.AllProjects}>All Projects</SelectItem>
       </Select>
-      <FontAwesomeIcon icon={faChevronDown} className="group-hover:text-gray-500 transition-colors text-lg" />
+      <FontAwesomeIcon
+        icon={faChevronDown}
+        className="text-lg transition-colors group-hover:text-gray-500"
+      />
     </div>
   );
 };