add viewers and collabs in participants List

apps/photos/src/components/Collections/CollectionShare/ShareControl/CollaboratorParticipants.tsx

@@ -9,24 +9,18 @@ import { EnteMenuItem } from 'components/Menu/EnteMenuItem';
 // import AvatarCollectionShare from '../AvatarCollectionShare';
 // import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import MenuItemDivider from 'components/Menu/MenuItemDivider';
+import ManageAddCollab from './MangeAddCollab';
 
 interface Iprops {
     collection: Collection;
+    onRootClose: () => void;
 }
 
-export function CollaboratorParticipants({ collection }: Iprops) {
+export function CollaboratorParticipants({ collection, onRootClose }: Iprops) {
     if (!collection.sharees?.length) {
         return <></>;
     }
 
-    const shareExpireOption = [
-        'Never',
-        '1 day',
-        '1 week',
-        '1 month',
-        '1 year',
-        'Custom',
-    ];
     const [collaborators, setCollaborators] = useState([]);
 
     useEffect(() => {
@@ -51,11 +45,15 @@ export function CollaboratorParticipants({ collection }: Iprops) {
                             onClick={() => console.log('clicked')}
                             label={item}
                         />
-                        {index !== shareExpireOption.length - 1 && (
+                        {index !== collaborators.length - 1 && (
                             <MenuItemDivider />
                         )}
                     </>
                 ))}
+                <ManageAddCollab
+                    collection={collection}
+                    onRootClose={onRootClose}
+                />
             </MenuItemGroup>
         </Box>
     );

apps/photos/src/components/Collections/CollectionShare/ShareControl/ManageParticipantsList.tsx

@@ -9,9 +9,10 @@ import { CollaboratorParticipants } from './CollaboratorParticipants';
 
 interface Iprops {
     collection: Collection;
+    onRootClose: () => void;
 }
 
-export function ManageParticipantsList({ collection }: Iprops) {
+export function ManageParticipantsList({ collection, onRootClose }: Iprops) {
     if (!collection.sharees?.length) {
         return <></>;
     }
@@ -20,8 +21,11 @@ export function ManageParticipantsList({ collection }: Iprops) {
         <Box mb={3}>
             <OwnerParticipant collection={collection}></OwnerParticipant>
             <CollaboratorParticipants
-                collection={collection}></CollaboratorParticipants>
+                collection={collection}
-            <ViewerParticipants collection={collection}></ViewerParticipants>
+                onRootClose={onRootClose}></CollaboratorParticipants>
+            <ViewerParticipants
+                collection={collection}
+                onRootClose={onRootClose}></ViewerParticipants>
         </Box>
     );
 }

apps/photos/src/components/Collections/CollectionShare/ShareControl/MangeAddCollab.tsx

@@ -28,7 +28,7 @@ export default function ManageAddCollab({ collection, onRootClose }: Iprops) {
                     <EnteMenuItem
                         startIcon={<AddIcon />}
                         onClick={openManageShare}
-                        label={t('Add Collaborator')}
+                        label={t('Add Collaborators')}
                     />
                 </MenuItemGroup>
             </Stack>

apps/photos/src/components/Collections/CollectionShare/ShareControl/ViewerParticipants.tsx

@@ -7,12 +7,14 @@ import { EnteMenuItem } from 'components/Menu/EnteMenuItem';
 import MenuItemDivider from 'components/Menu/MenuItemDivider';
 import MenuSectionTitle from 'components/Menu/MenuSectionTitle';
 import AvatarCollectionShare from '../AvatarCollectionShare';
+import ManageAddViewer from './ManageAddViewer';
 
 interface Iprops {
     collection: Collection;
+    onRootClose: () => void;
 }
 
-export function ViewerParticipants({ collection }: Iprops) {
+export function ViewerParticipants({ collection, onRootClose }: Iprops) {
     if (!collection.sharees?.length) {
         return <></>;
     }
@@ -30,6 +32,7 @@ export function ViewerParticipants({ collection }: Iprops) {
         <Box mb={3}>
             <MenuSectionTitle title={t('Viewers')} />
             <MenuItemGroup>
+                <>
                     {Viewers.map((item, index) => (
                         <>
                             <EnteMenuItem
@@ -37,11 +40,20 @@ export function ViewerParticipants({ collection }: Iprops) {
                                 key={item}
                                 onClick={() => console.log('clicked')}
                                 label={item}
-                            startIcon={<AvatarCollectionShare email={item} />}
+                                startIcon={
+                                    <AvatarCollectionShare email={item} />
+                                }
                             />
-                        {index !== Viewers.length - 1 && <MenuItemDivider />}
+                            {index !== Viewers.length - 1 && (
+                                <MenuItemDivider />
+                            )}
                         </>
                     ))}
+                    <ManageAddViewer
+                        collection={collection}
+                        onRootClose={onRootClose}
+                    />
+                </>
             </MenuItemGroup>
         </Box>
     );