Wip: first spike to get it working

frontend/src/component/feature/FeatureView/Contributors.tsx

@@ -0,0 +1,46 @@
+import { styled } from '@mui/material';
+import { GroupCardAvatars } from 'component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/NewGroupCardAvatars';
+import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
+import type { IFeatureToggle } from 'interfaces/featureToggle';
+import type { FC } from 'react';
+
+type LastModifiedByProps = {
+    id: number;
+    name: string;
+    imageUrl: string;
+};
+const LastModifiedBy: FC<LastModifiedByProps> = ({ id, name, imageUrl }) => {
+    return <UserAvatar user={{ id, name, imageUrl }} />;
+};
+
+type CollaboratorListProps = {
+    users: Array<{ id: number; name: string; imageUrl: string }>;
+};
+const Collaborators: FC<CollaboratorListProps> = ({ users }) => {
+    return <GroupCardAvatars users={users} avatarLimit={8} />;
+};
+
+const Container = styled('article')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(2),
+}));
+
+type Props = {
+    collaborators: IFeatureToggle['collaborators'];
+};
+
+export const Contributors: FC<Props> = ({ collaborators }) => {
+    if (!collaborators || collaborators.users.length === 0) {
+        return null;
+    }
+
+    const lastModifiedBy = collaborators.users[0];
+
+    return (
+        <Container>
+            <LastModifiedBy {...lastModifiedBy} />
+            <Collaborators users={collaborators.users} />
+        </Container>
+    );
+};

frontend/src/component/feature/FeatureView/FeatureView.tsx

@@ -50,6 +50,7 @@ import copy from 'copy-to-clipboard';
 import useToast from 'hooks/useToast';
 import { useUiFlag } from 'hooks/useUiFlag';
 import type { IFeatureToggle } from 'interfaces/featureToggle';
+import { Contributors as Collaborators } from './Contributors';
 
 const StyledHeader = styled('div')(({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
@@ -113,8 +114,14 @@ const StyledSeparator = styled('div')(({ theme }) => ({
     height: '1px',
 }));
 
+const StyledTabRow = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexFlow: 'row nowrap',
+}));
+
 const StyledTabContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(0, 4),
+    flex: '1',
 }));
 
 const StyledTabButton = styled(Tab)(({ theme }) => ({
@@ -355,6 +362,7 @@ export const FeatureView = () => {
                     </StyledToolbarContainer>
                 </StyledInnerContainer>
                 <StyledSeparator />
+                <StyledTabRow>
                     <StyledTabContainer>
                         <Tabs
                             value={activeTab.path}
@@ -372,6 +380,8 @@ export const FeatureView = () => {
                             ))}
                         </Tabs>
                     </StyledTabContainer>
+                    <Collaborators collaborators={feature.collaborators} />
+                </StyledTabRow>
             </StyledHeader>
             <Routes>
                 <Route path='metrics' element={<FeatureMetrics />} />

frontend/src/hooks/api/getters/useFeature/useFeature.ts

@@ -35,6 +35,8 @@ export const useFeature = (
         mutate().catch(console.warn);
     }, [mutate]);
 
+    console.log('data body ', data?.body);
+
     return {
         feature: data?.body || emptyFeature,
         refetchFeature,

frontend/src/interfaces/featureToggle.ts

@@ -65,6 +65,13 @@ export interface IFeatureToggle {
         name: string;
         imageUrl: string;
     };
+    collaborators?: {
+        users: Array<{
+            id: number;
+            name: string;
+            imageUrl: string;
+        }>;
+    };
 }
 
 export interface IDependency {