diff --git a/frontend/src/component/feature/FeatureView/Contributors.tsx b/frontend/src/component/feature/FeatureView/Contributors.tsx new file mode 100644 index 0000000000..f26dd8de53 --- /dev/null +++ b/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 = ({ id, name, imageUrl }) => { + return ; +}; + +type CollaboratorListProps = { + users: Array<{ id: number; name: string; imageUrl: string }>; +}; +const Collaborators: FC = ({ users }) => { + return ; +}; + +const Container = styled('article')(({ theme }) => ({ + display: 'flex', + flexDirection: 'row', + gap: theme.spacing(2), +})); + +type Props = { + collaborators: IFeatureToggle['collaborators']; +}; + +export const Contributors: FC = ({ collaborators }) => { + if (!collaborators || collaborators.users.length === 0) { + return null; + } + + const lastModifiedBy = collaborators.users[0]; + + return ( + + + + + ); +}; diff --git a/frontend/src/component/feature/FeatureView/FeatureView.tsx b/frontend/src/component/feature/FeatureView/FeatureView.tsx index 94430d25c6..0779f503fe 100644 --- a/frontend/src/component/feature/FeatureView/FeatureView.tsx +++ b/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 = () => { - - - {tabData.map((tab) => ( - navigate(tab.path)} - data-testid={`TAB-${tab.title}`} - /> - ))} - - + + + + {tabData.map((tab) => ( + navigate(tab.path)} + data-testid={`TAB-${tab.title}`} + /> + ))} + + + + } /> diff --git a/frontend/src/hooks/api/getters/useFeature/useFeature.ts b/frontend/src/hooks/api/getters/useFeature/useFeature.ts index 10f4ecaad7..9a14eeb717 100644 --- a/frontend/src/hooks/api/getters/useFeature/useFeature.ts +++ b/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, diff --git a/frontend/src/interfaces/featureToggle.ts b/frontend/src/interfaces/featureToggle.ts index 3b97ce95d7..43da4015a9 100644 --- a/frontend/src/interfaces/featureToggle.ts +++ b/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 {