Dashboard views have Aspects section

src/components/composite/aspect/DashboardSectionAspects/DashboardSectionAspects.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import DashboardSection from '../../sections/DashboardSection/DashboardSection';
+import AspectCard, { AspectCardAspect } from '../../common/cards/AspectCard/AspectCard';
+import { CardLayoutContainer, CardLayoutItem } from '../../../core/CardLayoutContainer/CardLayoutContainer';
+
+interface DashboardSectionAspectsProps {
+  aspects: AspectCardAspect[];
+  aspectsCount?: number;
+  hubNameId?: string;
+  challengeNameId?: string;
+  opportunityNameId?: string;
+}
+
+const DashboardSectionAspects: FC<DashboardSectionAspectsProps> = ({ aspects, aspectsCount, ...parentEntityIds }) => {
+  const { t } = useTranslation();
+
+  const headerText = aspectsCount ? `${t('common.aspects')} (${aspectsCount})` : t('common.aspects');
+
+  return (
+    <DashboardSection headerText={headerText} navText={t('buttons.see-all')} navLink="contribute">
+      <CardLayoutContainer>
+        {aspects.map(aspect => (
+          <CardLayoutItem key={aspect.id}>
+            <AspectCard aspect={aspect} {...parentEntityIds} />
+          </CardLayoutItem>
+        ))}
+      </CardLayoutContainer>
+    </DashboardSection>
+  );
+};
+
+export default DashboardSectionAspects;

src/components/composite/common/cards/AspectCard/AspectCard.tsx

@@ -38,9 +38,9 @@ const Root = styled('div')(({ theme }) => ({
 }));
 
 type NeededFields = 'id' | 'nameID' | 'displayName' | 'description' | 'type' | 'tagset';
-type AspectType = Pick<Aspect, NeededFields> & { bannerNarrow?: VisualUriFragment };
+export type AspectCardAspect = Pick<Aspect, NeededFields> & { bannerNarrow?: VisualUriFragment };
 export interface AspectCardProps {
-  aspect?: AspectType;
+  aspect?: AspectCardAspect;
   hubNameId?: string;
   challengeNameId?: string;
   opportunityNameId?: string;
@@ -56,7 +56,7 @@ const AspectCard: FC<AspectCardProps> = ({
   opportunityNameId,
   onDelete,
 }) => {
-  const { id, nameID = '', displayName = '', description = '', type = '', tagset } = (aspect || {}) as AspectType;
+  const { id, nameID = '', displayName = '', description = '', type = '', tagset } = (aspect || {}) as AspectCardAspect;
   const bannerNarrow = aspect?.bannerNarrow?.uri;
 
   return (

src/components/composite/sections/ContextSection.tsx

@@ -2,16 +2,18 @@ import MenuBookIcon from '@mui/icons-material/MenuBook';
 import PeopleAltIcon from '@mui/icons-material/PeopleAlt';
 import PublicIcon from '@mui/icons-material/Public';
 import SchoolIcon from '@mui/icons-material/School';
-import { Box, Grid, Typography } from '@mui/material';
+import { Grid, Typography } from '@mui/material';
 import React, { FC, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Reference } from '../../../models/graphql-schema';
 import Markdown from '../../core/Markdown';
 import { SectionSpacer } from '../../core/Section/Section';
 import SectionHeader from '../../core/Section/SectionHeader';
-import DashboardGenericSection from '../common/sections/DashboardGenericSection';
 import TagsComponent from '../common/TagsComponent/TagsComponent';
 import References from '../common/References/References';
+import DashboardSection from './DashboardSection/DashboardSection';
+import ContextSectionIcon from './ContextSectionIcon';
+import DashboardColumn from './DashboardSection/DashboardColumn';
 
 export interface ContextSectionProps {
   contextId?: string;
@@ -45,74 +47,51 @@ const ContextSection: FC<ContextSectionProps> = ({
   return (
     <>
       <Grid container spacing={2}>
-        <Grid item xs={12} lg={6}>
-          <DashboardGenericSection
+        <DashboardColumn>
+          <DashboardSection
             primaryAction={primaryAction}
             bannerUrl={banner}
             headerText={displayName}
             subHeaderText={<Typography component={Markdown} variant="h5" children={tagline} color="primary" />}
-            headerSpacing={'none'}
-            options={{ collapsible: { maxHeight: 240 } }}
+            size="large"
+            collapsible
           >
             <TagsComponent tags={keywords} count={10} />
             <SectionSpacer />
             <SectionHeader text={t('components.contextSegment.vision.title')} />
             <Typography component={Markdown} variant="body1" children={vision} />
-          </DashboardGenericSection>
-          <SectionSpacer />
-          <DashboardGenericSection
+          </DashboardSection>
+          <DashboardSection
             headerText={t('components.contextSegment.background.title')}
-            headerSpacing={'none'}
-            primaryAction={
-              <Box color="grey.main" fontSize={48} display="flex">
-                <MenuBookIcon fontSize="inherit" color="inherit" />
-              </Box>
-            }
-            options={{ collapsible: { maxHeight: 192 } }}
+            primaryAction={<ContextSectionIcon component={MenuBookIcon} />}
+            collapsible
           >
             <Typography component={Markdown} variant="body1" children={background} />
-          </DashboardGenericSection>
-        </Grid>
-        <Grid item xs={12} lg={6} zeroMinWidth>
-          <DashboardGenericSection
+          </DashboardSection>
+        </DashboardColumn>
+        <DashboardColumn zeroMinWidth>
+          <DashboardSection
             headerText={t('components.referenceSegment.title')}
-            headerSpacing={'none'}
-            primaryAction={
-              <Box color="grey.main" fontSize={48} display="flex">
-                <SchoolIcon fontSize="inherit" color="inherit" />
-              </Box>
-            }
-            options={{ collapsible: { maxHeight: 192 } }}
+            primaryAction={<ContextSectionIcon component={SchoolIcon} />}
+            collapsible
           >
             <References references={references} />
-          </DashboardGenericSection>
-          <SectionSpacer />
-          <DashboardGenericSection
+          </DashboardSection>
+          <DashboardSection
             headerText={t('components.contextSegment.impact.title')}
-            headerSpacing={'none'}
-            primaryAction={
-              <Box color="grey.main" fontSize={48} display="flex">
-                <PublicIcon fontSize="inherit" color="inherit" />
-              </Box>
-            }
-            options={{ collapsible: { maxHeight: 192 } }}
+            primaryAction={<ContextSectionIcon component={PublicIcon} />}
+            collapsible
           >
             <Typography component={Markdown} variant="body1" children={impact} />
-          </DashboardGenericSection>
-          <SectionSpacer />
-          <DashboardGenericSection
+          </DashboardSection>
+          <DashboardSection
             headerText={t('components.contextSegment.who.title')}
-            headerSpacing={'none'}
-            primaryAction={
-              <Box color="grey.main" fontSize={48} display="flex">
-                <PeopleAltIcon fontSize="inherit" color="inherit" />
-              </Box>
-            }
-            options={{ collapsible: { maxHeight: 192 } }}
+            primaryAction={<ContextSectionIcon component={PeopleAltIcon} />}
+            collapsible
           >
             <Typography component={Markdown} variant="body1" children={who} />
-          </DashboardGenericSection>
-        </Grid>
+          </DashboardSection>
+        </DashboardColumn>
       </Grid>
     </>
   );

src/components/composite/sections/ContextSectionIcon.tsx

@@ -0,0 +1,18 @@
+import React, { ComponentType, FC } from 'react';
+import { Box, SvgIconProps } from '@mui/material';
+
+interface ComponentProps extends SvgIconProps {}
+
+interface ContextSectionIconProps {
+  component: ComponentType<ComponentProps>;
+}
+
+const ContextSectionIcon: FC<ContextSectionIconProps> = ({ component: Component }) => {
+  return (
+    <Box color="grey.main" fontSize={48} display="flex">
+      <Component fontSize="inherit" color="inherit" />
+    </Box>
+  );
+};
+
+export default ContextSectionIcon;

src/components/composite/sections/DashboardSection/DashboardColumn.tsx

@@ -0,0 +1,32 @@
+import React, { cloneElement, FC, ReactElement } from 'react';
+import { SectionSpacer } from '../../../core/Section/Section';
+import { Grid, GridProps } from '@mui/material';
+
+// TODO use ReactNode
+type Child = ReactElement | false;
+type ChildrenType = Child | Child[];
+
+const insertSpacers = (children: ChildrenType) => {
+  const [firstChild, ...childrenTail] = React.Children.toArray(children) as ReactElement[];
+
+  return childrenTail.reduce(
+    (spacedChildren, child, i) => {
+      return [...spacedChildren, <SectionSpacer key={`spacer_${i}`} />, cloneElement(child, { key: `item_${i + 1}` })];
+    },
+    [cloneElement(firstChild, { key: 'item_0' })]
+  );
+};
+
+interface ContextSectionColumnProps extends Omit<GridProps, 'children'> {
+  children: ChildrenType;
+}
+
+const DashboardColumn: FC<ContextSectionColumnProps> = ({ children }) => {
+  return (
+    <Grid item xs={12} lg={6} zeroMinWidth>
+      {insertSpacers(children)}
+    </Grid>
+  );
+};
+
+export default DashboardColumn;

src/components/composite/sections/DashboardSection/DashboardSection.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+import DashboardGenericSection, { DashboardGenericSectionProps } from '../../common/sections/DashboardGenericSection';
+
+type ContextSectionSectionSize = 'medium' | 'large';
+
+interface ContextSectionSectionProps extends DashboardGenericSectionProps {
+  size?: ContextSectionSectionSize;
+  collapsible?: boolean;
+}
+
+const maxHeightPerSize: Record<ContextSectionSectionSize, number> = {
+  medium: 192,
+  large: 240,
+};
+
+const EMPTY = {};
+
+const DashboardSection: FC<ContextSectionSectionProps> = ({
+  size = 'medium',
+  collapsible = false,
+  ...genericSectionProps
+}) => {
+  const maxHeight = maxHeightPerSize[size];
+
+  return (
+    <DashboardGenericSection
+      headerSpacing="none"
+      options={collapsible ? { collapsible: { maxHeight } } : EMPTY}
+      {...genericSectionProps}
+    />
+  );
+};
+
+export default DashboardSection;

src/containers/ContributeTabContainer/ContributeTabContainerQueries.graphql

@@ -10,7 +10,7 @@ query HubAspects($hubNameId: UUID_NAMEID!) {
   hub(ID: $hubNameId) {
     id
     context {
-      ...ApsectsOnContext
+      ...AspectsOnContext
     }
   }
 }
@@ -32,7 +32,7 @@ query ChallengeAspects($hubNameId: UUID_NAMEID!, $challengeNameId: UUID_NAMEID!)
     challenge(ID: $challengeNameId) {
       id
       context {
-        ...ApsectsOnContext
+        ...AspectsOnContext
       }
     }
   }
@@ -55,13 +55,13 @@ query OpportunityAspects($hubNameId: UUID_NAMEID!, $opportunityNameId: UUID_NAME
     opportunity(ID: $opportunityNameId) {
       id
       context {
-        ...ApsectsOnContext
+        ...AspectsOnContext
       }
     }
   }
 }
 
-fragment ApsectsOnContext on Context {
+fragment AspectsOnContext on Context {
   id
   aspects {
     ...AspectCard

src/containers/challenge/ChallengePageContainer.tsx

@@ -7,7 +7,7 @@ import { useChallenge, useHub, useUserContext } from '../../hooks';
 import { useChallengePageQuery } from '../../hooks/generated/graphql';
 import { ContainerChildProps } from '../../models/container';
 import { Discussion } from '../../models/discussion/discussion';
-import { AuthorizationPrivilege, ChallengeProfileFragment } from '../../models/graphql-schema';
+import { AspectCardFragment, AuthorizationPrivilege, ChallengeProfileFragment } from '../../models/graphql-schema';
 import getActivityCount from '../../utils/get-activity-count';
 import { ActivityType } from '../../models/constants';
 
@@ -17,6 +17,8 @@ export interface ChallengeContainerEntities {
   hubDisplayName: string;
   challenge?: ChallengeProfileFragment;
   activity: ActivityItem[];
+  aspects: AspectCardFragment[];
+  aspectsCount: number | undefined;
   permissions: {
     canEdit: boolean;
     communityReadAccess: boolean;
@@ -33,6 +35,8 @@ export interface ChallengeContainerState {
   error?: ApolloError;
 }
 
+const EMPTY = [];
+
 export interface ChallengePageContainerProps
   extends ContainerChildProps<ChallengeContainerEntities, ChallengeContainerActions, ChallengeContainerState> {}
 
@@ -81,6 +85,14 @@ export const ChallengePageContainer: FC<ChallengePageContainerProps> = ({ childr
     ];
   }, [_challenge]);
 
+  const aspects = _challenge?.hub.challenge.context?.aspects || EMPTY;
+  const aspectsCount = useMemo(() => {
+    const stringValue = _challenge?.hub.challenge.activity?.find(
+      activity => activity.name === ActivityType.Aspect
+    )?.value;
+    return Number(stringValue);
+  }, [_challenge?.hub.challenge.activity]);
+
   return (
     <>
       {children(
@@ -90,6 +102,8 @@ export const ChallengePageContainer: FC<ChallengePageContainerProps> = ({ childr
           hubDisplayName: hub?.displayName || '',
           challenge: _challenge?.hub.challenge,
           activity,
+          aspects,
+          aspectsCount,
           permissions,
           isAuthenticated,
           isMember: user?.ofChallenge(challengeId) || false,

src/containers/challenge/ChallengePageQueries.graphql

@@ -38,6 +38,9 @@ fragment ChallengeProfile on Challenge {
     visuals {
       ...VisualFull
     }
+    aspects(limit: 2, shuffle: true) {
+      ...AspectCard
+    }
   }
   community {
     id

src/containers/hub/HubPage.graphql

@@ -35,6 +35,9 @@ fragment HubPage on Hub {
       anonymousReadAccess
       myPrivileges
     }
+    aspects(limit: 2, shuffle: true) {
+      ...AspectCard
+    }
   }
   community {
     id