Merge branch 'zhoufang/dev/421' into 'dev'

#419 #421 - Add governance documents for quick links and view more for rep representatives list

See merge request !451

src/main/www/public/membership_data/test_org_rep.json

@@ -19,5 +19,12 @@
     "last_name": "Test",
     "email": "873c6fef@ec516ea0.com",
     "relations": ["DE", "MA"]
+  },
+  {
+    "id": "f81d34323",
+    "first_name": "Test",
+    "last_name": "Test",
+    "email": "dfesdfe@ec516ea0.com",
+    "relations": ["DE", "MA"]
   }
 ]

src/main/www/src/components/Portal/Dashboard/DashboardIntro.tsx

 import {
   Avatar,
+  Button,
   Card,
-  CardContent,
   CardMedia,
   CircularProgress,
   Container,
@@ -20,8 +20,10 @@ import { useContext, useEffect, useState } from 'react';
 import NoteIcon from '@material-ui/icons/Note';
 import GroupIcon from '@material-ui/icons/Group';
 import EmailIcon from '@material-ui/icons/Email';
+import AssignmentIcon from '@material-ui/icons/Assignment';
 import { OrgRep } from '../../../Interfaces/portal_interface';
 import PortalContext from '../../../Context/PortalContext';
+import ModalWindow from '../../UIComponents/Notifications/ModalWindow';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -59,10 +61,12 @@ const useStyles = makeStyles((theme: Theme) =>
       margin: theme.spacing(0, 'auto'),
     },
     companyRepCard: {
+      position: 'relative',
       backgroundColor: '#D0D0D0',
+      padding: theme.spacing(2, 0, 3.5),
     },
     repPrimary: {
-      fontSize: 20,
+      fontSize: 18,
       textAlign: 'center',
     },
     repSecondary: {
@@ -87,7 +91,7 @@ const useStyles = makeStyles((theme: Theme) =>
       width: '100%',
     },
     contentItemCtn: {
-      padding: theme.spacing(2, 0),
+      padding: theme.spacing(1.5, 0),
     },
     contentAvatar: {
       width: 35,
@@ -104,6 +108,19 @@ const useStyles = makeStyles((theme: Theme) =>
     contentItemTextSub: {
       color: 'hsl(0, 0%, 75%)',
     },
+    viewAllBtnCtn: {
+      position: 'absolute',
+      bottom: 15,
+      left: 15,
+      right: 15,
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'end',
+      alignItems: 'end',
+    },
+    viewAllBtn: {
+      padding: theme.spacing(0.5, 1.5),
+    },
   })
 );
 
@@ -112,6 +129,7 @@ export default function DashboardIntro(props: { orgRepData: Array<OrgRep> | null
   const { orgRepData } = props;
   const { orgInfo } = useContext(PortalContext);
   const [orgIntro, setOrgIntro] = useState({ imageURL: '', name: '', website: '' });
+  const [open, setOpen] = useState(false);
 
   const renderOrgRep = orgRepData?.map((rep, index) => (
     <ListItem key={index}>
@@ -155,9 +173,12 @@ export default function DashboardIntro(props: { orgRepData: Array<OrgRep> | null
       </Card>
 
       <Card className={classNames(classes.card, classes.companyRepCard)}>
-        <CardContent>
-          <List>{orgRepData ? renderOrgRep : <CircularProgress />}</List>
-        </CardContent>
+        <List>{orgRepData ? renderOrgRep?.slice(0, 3) : <CircularProgress />}</List>
+        <Container className={classes.viewAllBtnCtn}>
+          <Button className={classes.viewAllBtn} onClick={() => setOpen(true)}>
+            View more
+          </Button>
+        </Container>
       </Card>
 
       <Card className={classNames(classes.card, classes.companyContentCard)}>
@@ -209,8 +230,35 @@ export default function DashboardIntro(props: { orgRepData: Array<OrgRep> | null
             </Avatar>
             <Container className={classes.contentItemText}>Contact Us</Container>
           </ListItem>
+
+          <Divider className={classes.divider} />
+
+          <ListItem
+            button
+            component="a"
+            href="https://www.eclipse.org/org/documents/"
+            target="_blank"
+            rel="noopener"
+            className={classes.contentItemCtn}
+          >
+            <Avatar className={classes.contentAvatar}>
+              <AssignmentIcon />
+            </Avatar>
+            <Container className={classes.contentItemText}>Governance Documents</Container>
+          </ListItem>
         </List>
       </Card>
+
+      <ModalWindow
+        title="Key Representatives"
+        content=""
+        customContent={() => renderOrgRep}
+        handleProceed={''}
+        shouldOpen={open}
+        setShouldOpen={setOpen}
+        cancelText={'Close'}
+        yesText={false}
+      />
     </Container>
   );
 }