From f45d9679e3141468b7fc81a6cd4b498278c94c67 Mon Sep 17 00:00:00 2001 From: Todorka Halacheva Date: Tue, 5 Nov 2024 17:53:15 +0200 Subject: [PATCH 1/2] Fix VC host to be clickable and add tooltip --- src/core/apollo/generated/apollo-hooks.ts | 15 +++- src/core/apollo/generated/graphql-schema.ts | 73 ++++++++++++++++++- .../VirtualContributor.graphql | 13 +++- .../components/HostCard.tsx | 41 +++-------- .../virtualContributor/vcProfilePage/model.ts | 9 ++- 5 files changed, 112 insertions(+), 39 deletions(-) diff --git a/src/core/apollo/generated/apollo-hooks.ts b/src/core/apollo/generated/apollo-hooks.ts index bd0ce5ac85..a2b7b80218 100644 --- a/src/core/apollo/generated/apollo-hooks.ts +++ b/src/core/apollo/generated/apollo-hooks.ts @@ -14080,7 +14080,18 @@ export const VirtualContributorDocument = gql` profile { id displayName - description + url + location { + country + city + } + avatar: visual(type: AVATAR) { + ...VisualFull + } + tagsets { + id + tags + } } } searchVisibility @@ -14107,8 +14118,8 @@ export const VirtualContributorDocument = gql` } } } - ${TagsetDetailsFragmentDoc} ${VisualFullFragmentDoc} + ${TagsetDetailsFragmentDoc} `; /** diff --git a/src/core/apollo/generated/graphql-schema.ts b/src/core/apollo/generated/graphql-schema.ts index 41db7a9412..ad8d1edff6 100644 --- a/src/core/apollo/generated/graphql-schema.ts +++ b/src/core/apollo/generated/graphql-schema.ts @@ -948,6 +948,7 @@ export enum AuthorizationPrivilege { CommunityAddMember = 'COMMUNITY_ADD_MEMBER', CommunityAddMemberVcFromAccount = 'COMMUNITY_ADD_MEMBER_VC_FROM_ACCOUNT', CommunityApply = 'COMMUNITY_APPLY', + CommunityApplyAccept = 'COMMUNITY_APPLY_ACCEPT', CommunityInvite = 'COMMUNITY_INVITE', CommunityInviteAccept = 'COMMUNITY_INVITE_ACCEPT', CommunityJoin = 'COMMUNITY_JOIN', @@ -18450,17 +18451,83 @@ export type VirtualContributorQuery = { | { __typename?: 'Organization'; id: string; - profile: { __typename?: 'Profile'; id: string; displayName: string; description?: string | undefined }; + profile: { + __typename?: 'Profile'; + id: string; + displayName: string; + url: string; + location?: { __typename?: 'Location'; country?: string | undefined; city?: string | undefined } | undefined; + avatar?: + | { + __typename?: 'Visual'; + id: string; + uri: string; + name: string; + allowedTypes: Array; + aspectRatio: number; + maxHeight: number; + maxWidth: number; + minHeight: number; + minWidth: number; + alternativeText?: string | undefined; + } + | undefined; + tagsets?: Array<{ __typename?: 'Tagset'; id: string; tags: Array }> | undefined; + }; } | { __typename?: 'User'; id: string; - profile: { __typename?: 'Profile'; id: string; displayName: string; description?: string | undefined }; + profile: { + __typename?: 'Profile'; + id: string; + displayName: string; + url: string; + location?: { __typename?: 'Location'; country?: string | undefined; city?: string | undefined } | undefined; + avatar?: + | { + __typename?: 'Visual'; + id: string; + uri: string; + name: string; + allowedTypes: Array; + aspectRatio: number; + maxHeight: number; + maxWidth: number; + minHeight: number; + minWidth: number; + alternativeText?: string | undefined; + } + | undefined; + tagsets?: Array<{ __typename?: 'Tagset'; id: string; tags: Array }> | undefined; + }; } | { __typename?: 'VirtualContributor'; id: string; - profile: { __typename?: 'Profile'; id: string; displayName: string; description?: string | undefined }; + profile: { + __typename?: 'Profile'; + id: string; + displayName: string; + url: string; + location?: { __typename?: 'Location'; country?: string | undefined; city?: string | undefined } | undefined; + avatar?: + | { + __typename?: 'Visual'; + id: string; + uri: string; + name: string; + allowedTypes: Array; + aspectRatio: number; + maxHeight: number; + maxWidth: number; + minHeight: number; + minWidth: number; + alternativeText?: string | undefined; + } + | undefined; + tagsets?: Array<{ __typename?: 'Tagset'; id: string; tags: Array }> | undefined; + }; }; aiPersona?: | { diff --git a/src/domain/community/virtualContributor/VirtualContributor.graphql b/src/domain/community/virtualContributor/VirtualContributor.graphql index db66f46ea0..51d8491ea4 100644 --- a/src/domain/community/virtualContributor/VirtualContributor.graphql +++ b/src/domain/community/virtualContributor/VirtualContributor.graphql @@ -11,7 +11,18 @@ query VirtualContributor($id: UUID_NAMEID!) { profile { id displayName - description + url + location { + country + city + } + avatar: visual(type: AVATAR) { + ...VisualFull + } + tagsets { + id + tags + } } } searchVisibility diff --git a/src/domain/community/virtualContributor/components/HostCard.tsx b/src/domain/community/virtualContributor/components/HostCard.tsx index ca2203bde7..a22a6e64e9 100644 --- a/src/domain/community/virtualContributor/components/HostCard.tsx +++ b/src/domain/community/virtualContributor/components/HostCard.tsx @@ -1,13 +1,8 @@ -import React, { FC } from 'react'; +import { FC } from 'react'; +import { useTranslation } from 'react-i18next'; +import ContributorCardHorizontal from '../../../../core/ui/card/ContributorCardHorizontal'; import PageContentBlock from '../../../../core/ui/content/PageContentBlock'; import PageContentBlockHeader from '../../../../core/ui/content/PageContentBlockHeader'; -import BadgeCardView from '../../../../core/ui/list/BadgeCardView'; -import Avatar from '../../../../core/ui/avatar/Avatar'; -import { BlockSectionTitle } from '../../../../core/ui/typography'; -import getLocationString from '../../../../core/ui/location/getLocationString'; -import { useTranslation } from 'react-i18next'; -import { LocationIcon } from '../../../timeline/calendar/icons/LocationIcon'; -import { theme } from '../../../../core/ui/themes/default/Theme'; interface HostProps { hostProfile?: { @@ -19,6 +14,8 @@ interface HostProps { city?: string; country?: string; }; + url?: string; + tagsets?: { tags: string[] }[]; }; } @@ -37,32 +34,12 @@ const HostCard: FC = ({ hostProfile }) => { const { t } = useTranslation(); const profile = hostProfile || DEFAULT_PROFILE; - const hasLocation = profile.location && (profile.location.city || profile.location.country); return ( - <> - - - - {profile.displayName[0]} - - } - > - {profile.displayName} - {hasLocation && ( - - - { - //@ts-ignore already checked with hasLocation - getLocationString(profile.location) - } - - )} - - - + + + + ); }; diff --git a/src/domain/community/virtualContributor/vcProfilePage/model.ts b/src/domain/community/virtualContributor/vcProfilePage/model.ts index 35c98f2f4d..951d6aedf3 100644 --- a/src/domain/community/virtualContributor/vcProfilePage/model.ts +++ b/src/domain/community/virtualContributor/vcProfilePage/model.ts @@ -15,7 +15,14 @@ type VirtualContributor = { provider: { profile: { displayName: string; - description?: string; + avatar?: { + uri: string; + }; + location?: { + city?: string; + country?: string; + }; + url: string; }; }; }; From 18807e7b4bc68d103a1fa3c64edac585a337d2f5 Mon Sep 17 00:00:00 2001 From: Todorka Halacheva Date: Wed, 6 Nov 2024 12:56:06 +0200 Subject: [PATCH 2/2] Inline the HostCard component As the DEFAULT_PROFILE is not needed any more, the component seems useless as other components are used to display the card. --- .../components/HostCard.tsx | 46 ------------------- .../vcProfilePage/VCProfilePageView.tsx | 26 ++++++----- 2 files changed, 14 insertions(+), 58 deletions(-) delete mode 100644 src/domain/community/virtualContributor/components/HostCard.tsx diff --git a/src/domain/community/virtualContributor/components/HostCard.tsx b/src/domain/community/virtualContributor/components/HostCard.tsx deleted file mode 100644 index a22a6e64e9..0000000000 --- a/src/domain/community/virtualContributor/components/HostCard.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { FC } from 'react'; -import { useTranslation } from 'react-i18next'; -import ContributorCardHorizontal from '../../../../core/ui/card/ContributorCardHorizontal'; -import PageContentBlock from '../../../../core/ui/content/PageContentBlock'; -import PageContentBlockHeader from '../../../../core/ui/content/PageContentBlockHeader'; - -interface HostProps { - hostProfile?: { - avatar?: { - uri: string; - }; - displayName: string; - location?: { - city?: string; - country?: string; - }; - url?: string; - tagsets?: { tags: string[] }[]; - }; -} - -const DEFAULT_PROFILE = { - avatar: { - uri: 'https://alkem.io/api/private/rest/storage/document/e58662b2-50f1-4c33-a8b4-40d601000afd', - }, - displayName: 'Alkemio Foundation', - location: { - city: 'Hague', - country: 'NL', - }, -}; - -const HostCard: FC = ({ hostProfile }) => { - const { t } = useTranslation(); - - const profile = hostProfile || DEFAULT_PROFILE; - - return ( - - - - - ); -}; - -export default HostCard; diff --git a/src/domain/community/virtualContributor/vcProfilePage/VCProfilePageView.tsx b/src/domain/community/virtualContributor/vcProfilePage/VCProfilePageView.tsx index 59d7855a4d..435c0b4e3a 100644 --- a/src/domain/community/virtualContributor/vcProfilePage/VCProfilePageView.tsx +++ b/src/domain/community/virtualContributor/vcProfilePage/VCProfilePageView.tsx @@ -1,22 +1,22 @@ import BookIcon from '@mui/icons-material/Book'; +import CloudDownloadIcon from '@mui/icons-material/CloudDownload'; +import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver'; import ShieldIcon from '@mui/icons-material/Shield'; import useTheme from '@mui/material/styles/useTheme'; import { Trans, useTranslation } from 'react-i18next'; -import CloudDownloadIcon from '@mui/icons-material/CloudDownload'; -import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver'; - -import HostCard from '../components/HostCard'; -import Spacer from '../../../../core/ui/content/Spacer'; -import BasicSpaceCard from '../components/BasicSpaceCard'; import PageContent from '../../../../core/ui/content/PageContent'; -import { Text, BlockTitle } from '../../../../core/ui/typography'; -import ProfileDetail from '../../profile/ProfileDetail/ProfileDetail'; -import WrapperMarkdown from '../../../../core/ui/markdown/WrapperMarkdown'; import PageContentBlock from '../../../../core/ui/content/PageContentBlock'; import PageContentColumn from '../../../../core/ui/content/PageContentColumn'; +import Spacer from '../../../../core/ui/content/Spacer'; +import WrapperMarkdown from '../../../../core/ui/markdown/WrapperMarkdown'; +import { BlockTitle, Text } from '../../../../core/ui/typography'; +import ProfileDetail from '../../profile/ProfileDetail/ProfileDetail'; +import BasicSpaceCard from '../components/BasicSpaceCard'; -import { type VCProfilePageViewProps } from './model'; +import ContributorCardHorizontal from '../../../../core/ui/card/ContributorCardHorizontal'; +import PageContentBlockHeader from '../../../../core/ui/content/PageContentBlockHeader'; import { gutters } from '../../../../core/ui/grid/utils'; +import { type VCProfilePageViewProps } from './model'; export const VCProfilePageView = ({ hasBokId, @@ -47,8 +47,10 @@ export const VCProfilePageView = ({ aria-label="description" /> - - + + + +