chore: added view less button to the collaborators widget (#3928)

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>
       )}
     </>

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">

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>
       )}
     </>

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}