From 185c9852165f71c5140746c2cae08f70e22ee40b Mon Sep 17 00:00:00 2001 From: bobbykolev Date: Fri, 20 Sep 2024 11:22:42 +0300 Subject: [PATCH] update admin tables with avatars, fix VC table --- src/core/apollo/generated/apollo-hooks.ts | 294 +++++++++--------- src/core/apollo/generated/graphql-schema.ts | 200 ++++++------ .../adminGlobalOrganizationsList.graphql | 4 + .../useAdminGlobalOrganizationsList.ts | 1 + .../adminUsers/useAdminGlobalUserList.tsx | 1 + .../user/adminUsers/userList.graphql | 4 + .../JourneyCardHorizontal.tsx | 19 +- .../VirtualContributorsPage.tsx | 81 +++-- .../SearchableList/SimpleSearchableTable.tsx | 29 +- 9 files changed, 364 insertions(+), 269 deletions(-) diff --git a/src/core/apollo/generated/apollo-hooks.ts b/src/core/apollo/generated/apollo-hooks.ts index 6327e9e12c..acf3d52d78 100644 --- a/src/core/apollo/generated/apollo-hooks.ts +++ b/src/core/apollo/generated/apollo-hooks.ts @@ -11573,6 +11573,10 @@ export const AdminGlobalOrganizationsListDocument = gql` id url displayName + visual(type: AVATAR) { + id + uri + } } verification { id @@ -12921,6 +12925,10 @@ export const UserListDocument = gql` id url displayName + visual(type: AVATAR) { + id + uri + } } email } @@ -17460,149 +17468,6 @@ export function refetchSpaceAccountQuery(variables: SchemaTypes.SpaceAccountQuer return { query: SpaceAccountDocument, variables: variables }; } -export const AdminSpaceSubspacesPageDocument = gql` - query AdminSpaceSubspacesPage($spaceId: UUID_NAMEID!) { - space(ID: $spaceId) { - id - subspaces { - id - profile { - id - displayName - url - cardBanner: visual(type: CARD) { - ...VisualUri - } - } - } - defaults { - id - innovationFlowTemplate { - id - profile { - ...InnovationFlowProfile - } - innovationFlow { - id - states { - displayName - description - } - } - } - } - } - } - ${VisualUriFragmentDoc} - ${InnovationFlowProfileFragmentDoc} -`; - -/** - * __useAdminSpaceSubspacesPageQuery__ - * - * To run a query within a React component, call `useAdminSpaceSubspacesPageQuery` and pass it any options that fit your needs. - * When your component renders, `useAdminSpaceSubspacesPageQuery` returns an object from Apollo Client that contains loading, error, and data properties - * you can use to render your UI. - * - * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; - * - * @example - * const { data, loading, error } = useAdminSpaceSubspacesPageQuery({ - * variables: { - * spaceId: // value for 'spaceId' - * }, - * }); - */ -export function useAdminSpaceSubspacesPageQuery( - baseOptions: Apollo.QueryHookOptions< - SchemaTypes.AdminSpaceSubspacesPageQuery, - SchemaTypes.AdminSpaceSubspacesPageQueryVariables - > -) { - const options = { ...defaultOptions, ...baseOptions }; - return Apollo.useQuery( - AdminSpaceSubspacesPageDocument, - options - ); -} - -export function useAdminSpaceSubspacesPageLazyQuery( - baseOptions?: Apollo.LazyQueryHookOptions< - SchemaTypes.AdminSpaceSubspacesPageQuery, - SchemaTypes.AdminSpaceSubspacesPageQueryVariables - > -) { - const options = { ...defaultOptions, ...baseOptions }; - return Apollo.useLazyQuery< - SchemaTypes.AdminSpaceSubspacesPageQuery, - SchemaTypes.AdminSpaceSubspacesPageQueryVariables - >(AdminSpaceSubspacesPageDocument, options); -} - -export type AdminSpaceSubspacesPageQueryHookResult = ReturnType; -export type AdminSpaceSubspacesPageLazyQueryHookResult = ReturnType; -export type AdminSpaceSubspacesPageQueryResult = Apollo.QueryResult< - SchemaTypes.AdminSpaceSubspacesPageQuery, - SchemaTypes.AdminSpaceSubspacesPageQueryVariables ->; -export function refetchAdminSpaceSubspacesPageQuery(variables: SchemaTypes.AdminSpaceSubspacesPageQueryVariables) { - return { query: AdminSpaceSubspacesPageDocument, variables: variables }; -} - -export const UpdateSpaceDefaultInnovationFlowTemplateDocument = gql` - mutation UpdateSpaceDefaultInnovationFlowTemplate($spaceDefaultsID: UUID!, $innovationFlowTemplateId: UUID!) { - updateSpaceDefaults( - spaceDefaultsData: { spaceDefaultsID: $spaceDefaultsID, flowTemplateID: $innovationFlowTemplateId } - ) { - id - } - } -`; -export type UpdateSpaceDefaultInnovationFlowTemplateMutationFn = Apollo.MutationFunction< - SchemaTypes.UpdateSpaceDefaultInnovationFlowTemplateMutation, - SchemaTypes.UpdateSpaceDefaultInnovationFlowTemplateMutationVariables ->; - -/** - * __useUpdateSpaceDefaultInnovationFlowTemplateMutation__ - * - * To run a mutation, you first call `useUpdateSpaceDefaultInnovationFlowTemplateMutation` within a React component and pass it any options that fit your needs. - * When your component renders, `useUpdateSpaceDefaultInnovationFlowTemplateMutation` returns a tuple that includes: - * - A mutate function that you can call at any time to execute the mutation - * - An object with fields that represent the current status of the mutation's execution - * - * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2; - * - * @example - * const [updateSpaceDefaultInnovationFlowTemplateMutation, { data, loading, error }] = useUpdateSpaceDefaultInnovationFlowTemplateMutation({ - * variables: { - * spaceDefaultsID: // value for 'spaceDefaultsID' - * innovationFlowTemplateId: // value for 'innovationFlowTemplateId' - * }, - * }); - */ -export function useUpdateSpaceDefaultInnovationFlowTemplateMutation( - baseOptions?: Apollo.MutationHookOptions< - SchemaTypes.UpdateSpaceDefaultInnovationFlowTemplateMutation, - SchemaTypes.UpdateSpaceDefaultInnovationFlowTemplateMutationVariables - > -) { - const options = { ...defaultOptions, ...baseOptions }; - return Apollo.useMutation< - SchemaTypes.UpdateSpaceDefaultInnovationFlowTemplateMutation, - SchemaTypes.UpdateSpaceDefaultInnovationFlowTemplateMutationVariables - >(UpdateSpaceDefaultInnovationFlowTemplateDocument, options); -} - -export type UpdateSpaceDefaultInnovationFlowTemplateMutationHookResult = ReturnType< - typeof useUpdateSpaceDefaultInnovationFlowTemplateMutation ->; -export type UpdateSpaceDefaultInnovationFlowTemplateMutationResult = - Apollo.MutationResult; -export type UpdateSpaceDefaultInnovationFlowTemplateMutationOptions = Apollo.BaseMutationOptions< - SchemaTypes.UpdateSpaceDefaultInnovationFlowTemplateMutation, - SchemaTypes.UpdateSpaceDefaultInnovationFlowTemplateMutationVariables ->; export const SpaceSettingsDocument = gql` query SpaceSettings($spaceId: UUID!) { lookup { @@ -17932,6 +17797,149 @@ export type DeleteVirtualContributorOnAccountMutationOptions = Apollo.BaseMutati SchemaTypes.DeleteVirtualContributorOnAccountMutation, SchemaTypes.DeleteVirtualContributorOnAccountMutationVariables >; +export const AdminSpaceSubspacesPageDocument = gql` + query AdminSpaceSubspacesPage($spaceId: UUID_NAMEID!) { + space(ID: $spaceId) { + id + subspaces { + id + profile { + id + displayName + url + cardBanner: visual(type: CARD) { + ...VisualUri + } + } + } + defaults { + id + innovationFlowTemplate { + id + profile { + ...InnovationFlowProfile + } + innovationFlow { + id + states { + displayName + description + } + } + } + } + } + } + ${VisualUriFragmentDoc} + ${InnovationFlowProfileFragmentDoc} +`; + +/** + * __useAdminSpaceSubspacesPageQuery__ + * + * To run a query within a React component, call `useAdminSpaceSubspacesPageQuery` and pass it any options that fit your needs. + * When your component renders, `useAdminSpaceSubspacesPageQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useAdminSpaceSubspacesPageQuery({ + * variables: { + * spaceId: // value for 'spaceId' + * }, + * }); + */ +export function useAdminSpaceSubspacesPageQuery( + baseOptions: Apollo.QueryHookOptions< + SchemaTypes.AdminSpaceSubspacesPageQuery, + SchemaTypes.AdminSpaceSubspacesPageQueryVariables + > +) { + const options = { ...defaultOptions, ...baseOptions }; + return Apollo.useQuery( + AdminSpaceSubspacesPageDocument, + options + ); +} + +export function useAdminSpaceSubspacesPageLazyQuery( + baseOptions?: Apollo.LazyQueryHookOptions< + SchemaTypes.AdminSpaceSubspacesPageQuery, + SchemaTypes.AdminSpaceSubspacesPageQueryVariables + > +) { + const options = { ...defaultOptions, ...baseOptions }; + return Apollo.useLazyQuery< + SchemaTypes.AdminSpaceSubspacesPageQuery, + SchemaTypes.AdminSpaceSubspacesPageQueryVariables + >(AdminSpaceSubspacesPageDocument, options); +} + +export type AdminSpaceSubspacesPageQueryHookResult = ReturnType; +export type AdminSpaceSubspacesPageLazyQueryHookResult = ReturnType; +export type AdminSpaceSubspacesPageQueryResult = Apollo.QueryResult< + SchemaTypes.AdminSpaceSubspacesPageQuery, + SchemaTypes.AdminSpaceSubspacesPageQueryVariables +>; +export function refetchAdminSpaceSubspacesPageQuery(variables: SchemaTypes.AdminSpaceSubspacesPageQueryVariables) { + return { query: AdminSpaceSubspacesPageDocument, variables: variables }; +} + +export const UpdateSpaceDefaultInnovationFlowTemplateDocument = gql` + mutation UpdateSpaceDefaultInnovationFlowTemplate($spaceDefaultsID: UUID!, $innovationFlowTemplateId: UUID!) { + updateSpaceDefaults( + spaceDefaultsData: { spaceDefaultsID: $spaceDefaultsID, flowTemplateID: $innovationFlowTemplateId } + ) { + id + } + } +`; +export type UpdateSpaceDefaultInnovationFlowTemplateMutationFn = Apollo.MutationFunction< + SchemaTypes.UpdateSpaceDefaultInnovationFlowTemplateMutation, + SchemaTypes.UpdateSpaceDefaultInnovationFlowTemplateMutationVariables +>; + +/** + * __useUpdateSpaceDefaultInnovationFlowTemplateMutation__ + * + * To run a mutation, you first call `useUpdateSpaceDefaultInnovationFlowTemplateMutation` within a React component and pass it any options that fit your needs. + * When your component renders, `useUpdateSpaceDefaultInnovationFlowTemplateMutation` returns a tuple that includes: + * - A mutate function that you can call at any time to execute the mutation + * - An object with fields that represent the current status of the mutation's execution + * + * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2; + * + * @example + * const [updateSpaceDefaultInnovationFlowTemplateMutation, { data, loading, error }] = useUpdateSpaceDefaultInnovationFlowTemplateMutation({ + * variables: { + * spaceDefaultsID: // value for 'spaceDefaultsID' + * innovationFlowTemplateId: // value for 'innovationFlowTemplateId' + * }, + * }); + */ +export function useUpdateSpaceDefaultInnovationFlowTemplateMutation( + baseOptions?: Apollo.MutationHookOptions< + SchemaTypes.UpdateSpaceDefaultInnovationFlowTemplateMutation, + SchemaTypes.UpdateSpaceDefaultInnovationFlowTemplateMutationVariables + > +) { + const options = { ...defaultOptions, ...baseOptions }; + return Apollo.useMutation< + SchemaTypes.UpdateSpaceDefaultInnovationFlowTemplateMutation, + SchemaTypes.UpdateSpaceDefaultInnovationFlowTemplateMutationVariables + >(UpdateSpaceDefaultInnovationFlowTemplateDocument, options); +} + +export type UpdateSpaceDefaultInnovationFlowTemplateMutationHookResult = ReturnType< + typeof useUpdateSpaceDefaultInnovationFlowTemplateMutation +>; +export type UpdateSpaceDefaultInnovationFlowTemplateMutationResult = + Apollo.MutationResult; +export type UpdateSpaceDefaultInnovationFlowTemplateMutationOptions = Apollo.BaseMutationOptions< + SchemaTypes.UpdateSpaceDefaultInnovationFlowTemplateMutation, + SchemaTypes.UpdateSpaceDefaultInnovationFlowTemplateMutationVariables +>; export const SpaceDashboardNavigationChallengesDocument = gql` query SpaceDashboardNavigationChallenges($spaceId: UUID!) { lookup { diff --git a/src/core/apollo/generated/graphql-schema.ts b/src/core/apollo/generated/graphql-schema.ts index 658994cbd5..421dc4e4b1 100644 --- a/src/core/apollo/generated/graphql-schema.ts +++ b/src/core/apollo/generated/graphql-schema.ts @@ -16309,7 +16309,13 @@ export type AdminGlobalOrganizationsListQuery = { subscriptions: Array<{ __typename?: 'AccountSubscription'; name: LicenseCredential }>; } | undefined; - profile: { __typename?: 'Profile'; id: string; url: string; displayName: string }; + profile: { + __typename?: 'Profile'; + id: string; + url: string; + displayName: string; + visual?: { __typename?: 'Visual'; id: string; uri: string } | undefined; + }; verification: { __typename?: 'OrganizationVerification'; id: string; @@ -17164,7 +17170,13 @@ export type UserListQuery = { subscriptions: Array<{ __typename?: 'AccountSubscription'; name: LicenseCredential }>; } | undefined; - profile: { __typename?: 'Profile'; id: string; url: string; displayName: string }; + profile: { + __typename?: 'Profile'; + id: string; + url: string; + displayName: string; + visual?: { __typename?: 'Visual'; id: string; uri: string } | undefined; + }; }>; pageInfo: { __typename?: 'PageInfo'; endCursor?: string | undefined; hasNextPage: boolean }; }; @@ -21915,98 +21927,6 @@ export type SpaceAccountQuery = { }; }; -export type AdminSpaceSubspacesPageQueryVariables = Exact<{ - spaceId: Scalars['UUID_NAMEID']; -}>; - -export type AdminSpaceSubspacesPageQuery = { - __typename?: 'Query'; - space: { - __typename?: 'Space'; - id: string; - subspaces: Array<{ - __typename?: 'Space'; - id: string; - profile: { - __typename?: 'Profile'; - id: string; - displayName: string; - url: string; - cardBanner?: { __typename?: 'Visual'; id: string; uri: string; name: string } | undefined; - }; - }>; - defaults?: - | { - __typename?: 'SpaceDefaults'; - id: string; - innovationFlowTemplate?: - | { - __typename?: 'Template'; - id: string; - profile: { - __typename?: 'Profile'; - id: string; - displayName: string; - description?: string | undefined; - tagsets?: - | Array<{ - __typename?: 'Tagset'; - id: string; - name: string; - tags: Array; - allowedValues: Array; - type: TagsetType; - }> - | undefined; - references?: - | Array<{ - __typename?: 'Reference'; - id: string; - name: string; - description?: string | undefined; - uri: string; - }> - | undefined; - bannerNarrow?: - | { - __typename?: 'Visual'; - id: string; - uri: string; - name: string; - allowedTypes: Array; - aspectRatio: number; - maxHeight: number; - maxWidth: number; - minHeight: number; - minWidth: number; - alternativeText?: string | undefined; - } - | undefined; - }; - innovationFlow?: - | { - __typename?: 'InnovationFlow'; - id: string; - states: Array<{ __typename?: 'InnovationFlowState'; displayName: string; description: string }>; - } - | undefined; - } - | undefined; - } - | undefined; - }; -}; - -export type UpdateSpaceDefaultInnovationFlowTemplateMutationVariables = Exact<{ - spaceDefaultsID: Scalars['UUID']; - innovationFlowTemplateId: Scalars['UUID']; -}>; - -export type UpdateSpaceDefaultInnovationFlowTemplateMutation = { - __typename?: 'Mutation'; - updateSpaceDefaults: { __typename?: 'SpaceDefaults'; id: string }; -}; - export type SpaceProfileFragment = { __typename?: 'Space'; id: string; @@ -22390,6 +22310,98 @@ export type DeleteVirtualContributorOnAccountMutation = { deleteVirtualContributor: { __typename?: 'VirtualContributor'; id: string }; }; +export type AdminSpaceSubspacesPageQueryVariables = Exact<{ + spaceId: Scalars['UUID_NAMEID']; +}>; + +export type AdminSpaceSubspacesPageQuery = { + __typename?: 'Query'; + space: { + __typename?: 'Space'; + id: string; + subspaces: Array<{ + __typename?: 'Space'; + id: string; + profile: { + __typename?: 'Profile'; + id: string; + displayName: string; + url: string; + cardBanner?: { __typename?: 'Visual'; id: string; uri: string; name: string } | undefined; + }; + }>; + defaults?: + | { + __typename?: 'SpaceDefaults'; + id: string; + innovationFlowTemplate?: + | { + __typename?: 'Template'; + id: string; + profile: { + __typename?: 'Profile'; + id: string; + displayName: string; + description?: string | undefined; + tagsets?: + | Array<{ + __typename?: 'Tagset'; + id: string; + name: string; + tags: Array; + allowedValues: Array; + type: TagsetType; + }> + | undefined; + references?: + | Array<{ + __typename?: 'Reference'; + id: string; + name: string; + description?: string | undefined; + uri: string; + }> + | undefined; + bannerNarrow?: + | { + __typename?: 'Visual'; + id: string; + uri: string; + name: string; + allowedTypes: Array; + aspectRatio: number; + maxHeight: number; + maxWidth: number; + minHeight: number; + minWidth: number; + alternativeText?: string | undefined; + } + | undefined; + }; + innovationFlow?: + | { + __typename?: 'InnovationFlow'; + id: string; + states: Array<{ __typename?: 'InnovationFlowState'; displayName: string; description: string }>; + } + | undefined; + } + | undefined; + } + | undefined; + }; +}; + +export type UpdateSpaceDefaultInnovationFlowTemplateMutationVariables = Exact<{ + spaceDefaultsID: Scalars['UUID']; + innovationFlowTemplateId: Scalars['UUID']; +}>; + +export type UpdateSpaceDefaultInnovationFlowTemplateMutation = { + __typename?: 'Mutation'; + updateSpaceDefaults: { __typename?: 'SpaceDefaults'; id: string }; +}; + export type SpaceDashboardNavigationChallengesQueryVariables = Exact<{ spaceId: Scalars['UUID']; }>; diff --git a/src/domain/community/contributor/organization/adminOrganizations/adminGlobalOrganizationsList.graphql b/src/domain/community/contributor/organization/adminOrganizations/adminGlobalOrganizationsList.graphql index 31bb5ad856..8e4bec3f47 100644 --- a/src/domain/community/contributor/organization/adminOrganizations/adminGlobalOrganizationsList.graphql +++ b/src/domain/community/contributor/organization/adminOrganizations/adminGlobalOrganizationsList.graphql @@ -12,6 +12,10 @@ query adminGlobalOrganizationsList($first: Int!, $after: UUID, $filter: Organiza id url displayName + visual(type: AVATAR) { + id + uri + } } verification { id diff --git a/src/domain/community/contributor/organization/adminOrganizations/useAdminGlobalOrganizationsList.ts b/src/domain/community/contributor/organization/adminOrganizations/useAdminGlobalOrganizationsList.ts index 8918f769b1..761c583a41 100644 --- a/src/domain/community/contributor/organization/adminOrganizations/useAdminGlobalOrganizationsList.ts +++ b/src/domain/community/contributor/organization/adminOrganizations/useAdminGlobalOrganizationsList.ts @@ -150,6 +150,7 @@ export const useAdminGlobalOrganizationsList = () => { value: org.profile.displayName, url: buildSettingsUrl(org.profile.url), verified: org.verification.lifecycle.state === OrgVerificationLifecycleStates.manuallyVerified, + avatar: org.profile.visual, activeLicensePlanIds: data?.platform.licensing.plans .filter(({ licenseCredential }) => org.account?.subscriptions.map(subscription => subscription.name).includes(licenseCredential) diff --git a/src/domain/community/user/adminUsers/useAdminGlobalUserList.tsx b/src/domain/community/user/adminUsers/useAdminGlobalUserList.tsx index 2cf91d92f9..46a5216c65 100644 --- a/src/domain/community/user/adminUsers/useAdminGlobalUserList.tsx +++ b/src/domain/community/user/adminUsers/useAdminGlobalUserList.tsx @@ -82,6 +82,7 @@ const useAdminGlobalUserList = ({ accountId: account?.id, value: `${profile.displayName} (${email})`, url: buildSettingsUrl(profile.url), + avatar: profile.visual, activeLicensePlanIds: data?.platform.licensing.plans .filter(({ licenseCredential }) => account?.subscriptions.map(subscription => subscription.name).includes(licenseCredential) diff --git a/src/domain/community/user/adminUsers/userList.graphql b/src/domain/community/user/adminUsers/userList.graphql index be9e985bda..0eba21b09c 100644 --- a/src/domain/community/user/adminUsers/userList.graphql +++ b/src/domain/community/user/adminUsers/userList.graphql @@ -12,6 +12,10 @@ query userList($first: Int!, $after: UUID, $filter: UserFilterInput) { id url displayName + visual(type: AVATAR) { + id + uri + } } email } diff --git a/src/domain/journey/common/JourneyCardHorizontal/JourneyCardHorizontal.tsx b/src/domain/journey/common/JourneyCardHorizontal/JourneyCardHorizontal.tsx index 6b2d8ddf25..0d14b2acc4 100644 --- a/src/domain/journey/common/JourneyCardHorizontal/JourneyCardHorizontal.tsx +++ b/src/domain/journey/common/JourneyCardHorizontal/JourneyCardHorizontal.tsx @@ -1,11 +1,20 @@ import React, { ReactNode } from 'react'; import { gutters } from '../../../../core/ui/grid/utils'; import BadgeCardView from '../../../../core/ui/list/BadgeCardView'; -import { Chip, Paper, PaperProps, Skeleton, Typography } from '@mui/material'; +import { + Chip, + ListItemButton, + ListItemButtonProps, + ListItemButtonTypeMap, + Paper, + PaperProps, + Skeleton, + Typography, +} from '@mui/material'; import { Caption } from '../../../../core/ui/typography'; import { Visual } from '../../../common/visual/Visual'; import withElevationOnHover from '../../../shared/components/withElevationOnHover'; -import RouterLink from '../../../../core/ui/link/RouterLink'; +import RouterLink, { RouterLinkProps } from '../../../../core/ui/link/RouterLink'; import { JourneyTypeName } from '../../JourneyTypeName'; import JourneyIcon from '../../../shared/components/JourneyIcon/JourneyIcon'; import BlockTitleWithIcon from '../../../../core/ui/content/BlockTitleWithIcon'; @@ -53,6 +62,10 @@ const ElevatedPaper = withElevationOnHover(Paper) as typeof Paper; const VISIBLE_COMMUNITY_ROLES = [CommunityRole.Admin, CommunityRole.Lead] as const; +const Wrapper = ( + props: ListItemButtonProps & RouterLinkProps +) => ; + const JourneyCardHorizontal = ({ journey, journeyTypeName, @@ -79,7 +92,7 @@ const JourneyCardHorizontal = ({ } - component={RouterLink} + component={Wrapper} to={journey.profile.url} actions={actions && {actions}} > diff --git a/src/domain/platform/admin/virtual-contributors/VirtualContributorsPage.tsx b/src/domain/platform/admin/virtual-contributors/VirtualContributorsPage.tsx index f3b72a879c..357fdb4fe5 100644 --- a/src/domain/platform/admin/virtual-contributors/VirtualContributorsPage.tsx +++ b/src/domain/platform/admin/virtual-contributors/VirtualContributorsPage.tsx @@ -3,12 +3,12 @@ import AdminLayout from '../layout/toplevel/AdminLayout'; import { AdminSection } from '../layout/toplevel/constants'; import { useAdminVirtualContributorsQuery } from '../../../../core/apollo/generated/apollo-hooks'; import Avatar from '../../../../core/ui/avatar/Avatar'; -import { BlockTitle } from '../../../../core/ui/typography'; +import { BlockTitle, CardTitle } from '../../../../core/ui/typography'; import { useTranslation } from 'react-i18next'; import BadgeCardView from '../../../../core/ui/list/BadgeCardView'; -import PageContentBlockSeamless from '../../../../core/ui/content/PageContentBlockSeamless'; import RouterLink from '../../../../core/ui/link/RouterLink'; import Loading from '../../../../core/ui/loading/Loading'; +import { Grid, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'; const VirtualContributorsPage: FC = () => { const { t } = useTranslation(); @@ -16,26 +16,63 @@ const VirtualContributorsPage: FC = () => { return ( - - {t('pages.admin.virtualContributors.title')} - {loadingVCs && } - {data?.virtualContributors.map(virtualContributor => ( - - } - component={RouterLink} - to={virtualContributor.profile.url} - > - {virtualContributor.profile.displayName} - - ))} - + + + {loadingVCs && } + + + + theme.palette.primary.main, + }} + > + + Name + + +   + + + + + {data?.virtualContributors.map((virtualContributor, i) => ( + + + + } + component={RouterLink} + to={virtualContributor.profile.url} + > + {virtualContributor.profile.displayName} + + + + ))} + +
+ + + ); }; diff --git a/src/domain/shared/components/SearchableList/SimpleSearchableTable.tsx b/src/domain/shared/components/SearchableList/SimpleSearchableTable.tsx index 3c28f91bdc..5ccb0a6485 100644 --- a/src/domain/shared/components/SearchableList/SimpleSearchableTable.tsx +++ b/src/domain/shared/components/SearchableList/SimpleSearchableTable.tsx @@ -18,10 +18,11 @@ import RemoveModal from '../../../../core/ui/dialogs/RemoveModal'; import useLazyLoading from '../../pagination/useLazyLoading'; import LoadingListItem from './LoadingListItem'; import { times } from 'lodash'; -import RouterLink from '../../../../core/ui/link/RouterLink'; -import { BlockTitle, CardTitle } from '../../../../core/ui/typography'; import { Actions } from '../../../../core/ui/actions/Actions'; import PageContent from '../../../../core/ui/content/PageContent'; +import ContributorCardHorizontal from '../../../../core/ui/card/ContributorCardHorizontal'; +import { BlockTitle, CardTitle } from '../../../../core/ui/typography'; +import RouterLink from '../../../../core/ui/link/RouterLink'; export interface SearchableListProps { data: Item[] | undefined; @@ -45,6 +46,9 @@ export interface SearchableListItem { url: string; verified?: boolean; activeLicensePlanIds?: string[]; + avatar?: { + uri: string; + }; } const SimpleSearchableList = ({ @@ -157,12 +161,23 @@ const SimpleSearchableList = ({ justifyContent: 'space-between', }} > - - - {item.value} - + + {item.avatar ? ( + + ) : ( + + {item.value} + + )} - + {renderItemActions(item)} {onDelete && (