update contributors image for unauth user (#7410)

alkem-io · Jan 9, 2025 · afe2800 · afe2800
1 parent f55420c
commit afe2800
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 16 deletions.
diff --git a/src/core/ui/content/PageContentBlockHeaderWithDialogAction.tsx b/src/core/ui/content/PageContentBlockHeaderWithDialogAction.tsx
@@ -10,6 +10,7 @@ interface PageContentBlockHeaderWithDialogActionProps extends PageContentBlockHe
   onDialogOpen?: () => void;
   onDialogClose?: () => void;
   expanded?: boolean;
+  showExpand?: boolean;
 }
 
 const iconSize = (theme: Theme) => theme.spacing(2);
@@ -19,19 +20,23 @@ const PageContentBlockHeaderWithDialogAction = ({
   onDialogOpen,
   onDialogClose,
   actions,
+  showExpand = true,
   ...headerProps
 }: PropsWithChildren<PageContentBlockHeaderWithDialogActionProps>) => {
   const { t } = useTranslation();
   const dialogAction = (
     <>
       {actions}
-      <IconButton
-        onClick={expanded ? onDialogClose : onDialogOpen}
-        sx={{ svg: { width: iconSize, height: iconSize } }}
-        aria-label={t('buttons.expandWindow')}
-      >
-        {expanded ? <Close /> : <ExpandContentIcon />}
-      </IconButton>
+
+      {showExpand && (
+        <IconButton
+          onClick={expanded ? onDialogClose : onDialogOpen}
+          sx={{ svg: { width: iconSize, height: iconSize } }}
+          aria-label={t('buttons.expandWindow')}
+        >
+          {expanded ? <Close /> : <ExpandContentIcon />}
+        </IconButton>
+      )}
     </>
   );
 

diff --git a/...n/community/contributor/CommunityContributorsBlockWide/CommunityContributorsBlockWide.tsx b/...n/community/contributor/CommunityContributorsBlockWide/CommunityContributorsBlockWide.tsx
@@ -16,12 +16,17 @@ import { Theme } from '@mui/material/styles';
 import { gutters } from '@/core/ui/grid/utils';
 import PageContentBlockHeader from '@/core/ui/content/PageContentBlockHeader';
 import Loading from '@/core/ui/loading/Loading';
+import ImageBackdrop from '@/domain/shared/components/Backdrops/ImageBackdrop';
+import Gutters from '@/core/ui/grid/Gutters';
+
+const grayedOutUsersImgSrc = '/contributors/users-grayed.png';
 
 type CommunityContributorsBlockWideProps = {
   users: ContributorCardSquareProps[] | undefined;
   organizations: ContributorCardSquareProps[] | undefined;
   isDialogView?: boolean;
   isLoading?: boolean;
+  showUsers: boolean;
 };
 
 const config = [
@@ -37,6 +42,7 @@ const config = [
 
 const CommunityContributorsBlockWide = ({
   users,
+  showUsers,
   organizations,
   isDialogView = false,
   isLoading = false,
@@ -105,6 +111,7 @@ const CommunityContributorsBlockWide = ({
     <>
       <PageContentBlock>
         <PageContentBlockHeaderWithDialogAction
+          showExpand={false}
           title={t('pages.generic.sections.community.contributors')}
           onDialogOpen={() => setIsDialogOpen(true)}
           actions={
@@ -122,14 +129,31 @@ const CommunityContributorsBlockWide = ({
         >
           {contributorTypeToggle()}
         </PageContentBlockHeaderWithDialogAction>
-        <CommunityContributorsBlockWideContent
-          users={users}
-          organizations={organizations}
-          contributorType={contributorType}
-          filter={filter}
-          nested
-          compactView
-        />
+
+        {showUsers ? (
+          <CommunityContributorsBlockWideContent
+            users={users}
+            organizations={organizations}
+            contributorType={contributorType}
+            filter={filter}
+            nested
+            compactView
+          />
+        ) : (
+          <Gutters disablePadding>
+            <ImageBackdrop
+              src={grayedOutUsersImgSrc}
+              backdropMessage="login"
+              blockName="all-contributing-users"
+              messageSx={theme => ({
+                [theme.breakpoints.up('sm')]: {
+                  fontWeight: 'bold',
+                },
+              })}
+            />
+          </Gutters>
+        )}
+
         <Actions justifyContent="end">
           <ButtonBase component={CaptionSmall} onClick={() => setIsDialogOpen(true)}>
             {t('common.show-all')}

diff --git a/src/domain/journey/space/SpaceCommunityPage/SpaceCommunityPage.tsx b/src/domain/journey/space/SpaceCommunityPage/SpaceCommunityPage.tsx
@@ -121,7 +121,12 @@ const SpaceCommunityPage = () => {
               <CommunityGuidelinesBlock communityId={communityId} journeyUrl={data?.space.profile.url} />
             </InfoColumn>
             <ContentColumn>
-              <CommunityContributorsBlockWide users={memberUsers} organizations={memberOrganizations} />
+              <CommunityContributorsBlockWide
+                users={memberUsers}
+                showUsers={isAuthenticated}
+                organizations={memberOrganizations}
+              />
+
               <CalloutsGroupView
                 journeyId={spaceId}
                 calloutsSetId={calloutsSetId}

diff --git a/src/domain/journey/subspace/dialogs/ContributorsToggleDialog.tsx b/src/domain/journey/subspace/dialogs/ContributorsToggleDialog.tsx
@@ -62,6 +62,7 @@ const ContributorsToggleDialog = ({ open = false, journeyId, onClose }: Contribu
         {isAuthenticated && (
           <Gutters disablePadding>
             <CommunityContributorsBlockWide
+              showUsers
               users={users}
               organizations={organizations}
               isLoading={loading}