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,23 +362,26 @@ export const FeatureView = () => {
                     </StyledToolbarContainer>
                 </StyledInnerContainer>
                 <StyledSeparator />
-                <StyledTabContainer>
+                <StyledTabRow>
-                    <Tabs
+                    <StyledTabContainer>
-                        value={activeTab.path}
+                        <Tabs
-                        indicatorColor='primary'
+                            value={activeTab.path}
-                        textColor='primary'
+                            indicatorColor='primary'
-                    >
+                            textColor='primary'
-                        {tabData.map((tab) => (
+                        >
-                            <StyledTabButton
+                            {tabData.map((tab) => (
-                                key={tab.title}
+                                <StyledTabButton
-                                label={tab.title}
+                                    key={tab.title}
-                                value={tab.path}
+                                    label={tab.title}
-                                onClick={() => navigate(tab.path)}
+                                    value={tab.path}
-                                data-testid={`TAB-${tab.title}`}
+                                    onClick={() => navigate(tab.path)}
-                            />
+                                    data-testid={`TAB-${tab.title}`}
-                        ))}
+                                />
-                    </Tabs>
+                            ))}
-                </StyledTabContainer>
+                        </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 {