From b2146098e24a9097bf9cab8cc979dbd3762e6a3e Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 11 Mar 2024 21:09:16 +0530
Subject: [PATCH] chore: added view less button to the collaborators widget
 (#3928)

---
 .../recent-collaborators/default-list.tsx     | 33 ++++++++++++++-----
 .../widgets/recent-collaborators/root.tsx     |  4 +--
 .../recent-collaborators/search-list.tsx      | 33 ++++++++++++++-----
 .../project/send-project-invitation-modal.tsx |  8 ++---
 4 files changed, 53 insertions(+), 25 deletions(-)

diff --git a/web/components/dashboard/widgets/recent-collaborators/default-list.tsx b/web/components/dashboard/widgets/recent-collaborators/default-list.tsx
index a27534bbf..8fb884c9b 100644
--- a/web/components/dashboard/widgets/recent-collaborators/default-list.tsx
+++ b/web/components/dashboard/widgets/recent-collaborators/default-list.tsx
@@ -37,21 +37,36 @@ export const DefaultCollaboratorsList: React.FC<Props> = (props) => {
       />
     );
 
+  const showViewMoreButton = pageCount < totalPages && resultsCount !== 0;
+  const showViewLessButton = pageCount > 1;
+
   return (
     <>
       <div className="mt-7 mb-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 gap-2 gap-y-8">
         {collaboratorsPages}
       </div>
-      {pageCount < totalPages && resultsCount !== 0 && (
+      {(showViewLessButton || showViewMoreButton) && (
         <div className="flex items-center justify-center text-xs w-full">
-          <Button
-            variant="link-primary"
-            size="sm"
-            className="my-3 hover:bg-custom-primary-100/20"
-            onClick={handleLoadMore}
-          >
-            Load more
-          </Button>
+          {showViewLessButton && (
+            <Button
+              variant="link-primary"
+              size="sm"
+              className="my-3 hover:bg-custom-primary-100/20"
+              onClick={() => setPageCount(1)}
+            >
+              View less
+            </Button>
+          )}
+          {showViewMoreButton && (
+            <Button
+              variant="link-primary"
+              size="sm"
+              className="my-3 hover:bg-custom-primary-100/20"
+              onClick={handleLoadMore}
+            >
+              View more
+            </Button>
+          )}
         </div>
       )}
     </>
diff --git a/web/components/dashboard/widgets/recent-collaborators/root.tsx b/web/components/dashboard/widgets/recent-collaborators/root.tsx
index d65b15db7..f544e0da6 100644
--- a/web/components/dashboard/widgets/recent-collaborators/root.tsx
+++ b/web/components/dashboard/widgets/recent-collaborators/root.tsx
@@ -17,9 +17,9 @@ export const RecentCollaboratorsWidget: React.FC<WidgetProps> = (props) => {
     <div className="w-full rounded-xl border-[0.5px] border-custom-border-200 bg-custom-background-100 duration-300 hover:shadow-custom-shadow-4xl">
       <div className="flex items-start justify-between px-7 pt-6">
         <div>
-          <h4 className="text-lg font-semibold text-custom-text-300">Most active members</h4>
+          <h4 className="text-lg font-semibold text-custom-text-300">Collaborators</h4>
           <p className="mt-2 text-xs font-medium text-custom-text-300">
-            Top eight active members in your project by last activity
+            View and find all members you collaborate with across projects
           </p>
         </div>
         <div className="flex min-w-72 items-center justify-start gap-2 rounded-md border border-custom-border-200 px-2.5 py-1.5 placeholder:text-custom-text-400">
diff --git a/web/components/dashboard/widgets/recent-collaborators/search-list.tsx b/web/components/dashboard/widgets/recent-collaborators/search-list.tsx
index 32baa72ad..7323ad944 100644
--- a/web/components/dashboard/widgets/recent-collaborators/search-list.tsx
+++ b/web/components/dashboard/widgets/recent-collaborators/search-list.tsx
@@ -48,6 +48,9 @@ export const SearchedCollaboratorsList: React.FC<Props> = (props) => {
       />
     );
 
+  const showViewMoreButton = pageCount < totalPages && resultsCount !== 0;
+  const showViewLessButton = pageCount > 1;
+
   const emptyStateImage = resolvedTheme === "dark" ? DarkImage : LightImage;
 
   return (
@@ -63,16 +66,28 @@ export const SearchedCollaboratorsList: React.FC<Props> = (props) => {
           <p className="font-medium text-sm">No matching member</p>
         </div>
       )}
-      {pageCount < totalPages && resultsCount !== 0 && (
+      {(showViewLessButton || showViewMoreButton) && (
         <div className="flex items-center justify-center text-xs w-full">
-          <Button
-            variant="link-primary"
-            size="sm"
-            className="my-3 hover:bg-custom-primary-100/20"
-            onClick={handleLoadMore}
-          >
-            Load more
-          </Button>
+          {showViewLessButton && (
+            <Button
+              variant="link-primary"
+              size="sm"
+              className="my-3 hover:bg-custom-primary-100/20"
+              onClick={() => setPageCount(1)}
+            >
+              View less
+            </Button>
+          )}
+          {showViewMoreButton && (
+            <Button
+              variant="link-primary"
+              size="sm"
+              className="my-3 hover:bg-custom-primary-100/20"
+              onClick={handleLoadMore}
+            >
+              View more
+            </Button>
+          )}
         </div>
       )}
     </>
diff --git a/web/components/project/send-project-invitation-modal.tsx b/web/components/project/send-project-invitation-modal.tsx
index 24fc36521..aa680598e 100644
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@@ -142,8 +142,9 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
       if (!memberDetails?.member) return;
       return {
         value: `${memberDetails?.member.id}`,
-        query: `${memberDetails?.member.first_name} ${memberDetails?.member
-          .last_name} ${memberDetails?.member.display_name.toLowerCase()}`,
+        query: `${memberDetails?.member.first_name} ${
+          memberDetails?.member.last_name
+        } ${memberDetails?.member.display_name.toLowerCase()}`,
         content: (
           <div className="flex w-full items-center gap-2">
             <div className="flex-shrink-0 pt-0.5">
@@ -211,9 +212,6 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                               rules={{ required: "Please select a member" }}
                               render={({ field: { value, onChange } }) => {
                                 const selectedMember = getWorkspaceMemberDetails(value);
-
-                                if (!selectedMember?.member) return <></>;
-
                                 return (
                                   <CustomSearchSelect
                                     value={value}