merge from dev

Author: mdtagg

app/components/About/PastContributors.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useStylingContext } from './StylingContext';
 
 const contributors = [
-  'Snow', 'Taylor', 'Tim', 'Roberto', 'Nachiket', 'Tiffany', 'Bruno', 'Danny', 'Vince',
+  'Haoyu', 'Eisha', 'Edwin', 'Tyler', 'Snow', 'Taylor', 'Tim', 'Roberto', 'Nachiket', 'Tiffany', 'Bruno', 'Danny', 'Vince',
   'Matt', 'Derek', 'Kit', 'Grace', 'Jen', 'Patty', 'Stella', 'Michael', 'Ronelle', 'Todd',
   'Greg', 'Brianna', 'Brian', 'Alon', 'Alan', 'Ousman', 'Ben', 'Chris', 'Jenae', 'Tim',
   'Kirk', 'Jess', 'William', 'Alexander', 'Elisa', 'Josh', 'Troy', 'Gahl', 'Brisa', 'Kelsi', 

app/components/About/TeamMembers.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useStylingContext } from './StylingContext';
 
-const names = ['Haoyu', 'Eisha', 'Edwin', 'Tyler'];
+const names = ['Mike', 'Stephen', 'Ted', 'Sofia'];
 
 const TeamMembers: React.FC = () => {
   const currentMode = useStylingContext();

app/components/About/styles.scss

@@ -3,11 +3,11 @@
 .about {
   min-width: 421px;
   max-width: 600px;
-  margin: auto 20px;
+  margin: auto;
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 90%;
+  width: 100%;
   height: 100%;
 }
 
@@ -33,7 +33,7 @@
   font-size: 20px;
   color: $background;
   text-align: left;
-  font-weight: 200;
+  font-weight: 300;
 }
 
 .blurb {

app/components/ApplicationsCard/ApplicationsCard.tsx

@@ -1,65 +1,24 @@
 
-import React, { useContext, useRef } from "react";
-import { useNavigate } from 'react-router-dom';
+import React from "react";
 import { Card,CardHeader,IconButton,CardContent,Typography } from "@mui/material";
-import { DashboardContext } from "../../context/DashboardContext";
-import { ApplicationContext } from "../../context/ApplicationContext";
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import UpdateIcon from '@mui/icons-material/Update';
-import './styles.scss'
-
-type ClickEvent = React.MouseEvent<HTMLElement>;
-
-const ApplicationsCard = (props) => {
-
-  const { application, i, setModal, classes } = props
-  const { deleteApp,user } = useContext(DashboardContext)
-  const { setAppIndex, setApp, setServicesData, app,example,connectToDB,setChart } = useContext(ApplicationContext)
-  const [ cardName,dbType,dbURI,description,serviceType ] = application
+import './styles.scss';
+import { getEventHandlers } from './EventHandlers';
 
-  const navigate = useNavigate();
+interface ApplicationCardProps {
+  application: any[];
+  i: number;
+  setModal: (modalState: { isOpen: boolean; type: string }) => void;
+  classes: any;
+}
 
-  // Handle clicks on Application cards
-  // v10 info: when card is clicked (not on the delete button) if the service is an AWS instance,
-  // you are redirected to AWSGraphsContainer passing in the state object containing typeOfService
-  const handleClick = (
-    selectedApp: string,
-    selectedService: string,
-    i: number
-  ) => {
-    const services = ['auth','client','event-bus','items','inventory','orders']
-    // if (delRef.current[i] && !delRef.current[i].contains(event.target)) {
-      setAppIndex(i);
-      setApp(selectedApp);
-      if (
-        selectedService === 'AWS' ||
-        selectedService === 'AWS/EC2' ||
-        selectedService === 'AWS/ECS' ||
-        selectedService === 'AWS/EKS'
-      ) {
-        navigate(`/aws/:${app}`, { state: { typeOfService: selectedService } });
-      } 
-      else if(example) {
-        setServicesData([]);
-        setChart('all')
+import './styles.scss'
 
-        connectToDB(user, i, app, dbURI, dbType)
-        navigate(`/applications/example/${services.join(' ')}`)
-      }
-      else {
-        setServicesData([]);
-        //When we open the service modal a connection is made to the db in a useEffect inside of the service modal component
-        setModal({isOpen:true,type:'serviceModal'})
-      }
-    // }
-  };
+const ApplicationsCard:React.FC<ApplicationCardProps> = (props) => {
 
-  // Asks user to confirm deletion
-  const confirmDelete = (event: ClickEvent, i: number) => {
-    event.stopPropagation()
-    const message = `The application '${app}' will be permanently deleted. Continue?`;
-    if (confirm(message)) deleteApp(i,"");
-  };
+  const { application, i, setModal, classes } = props
+  const { handleClick, confirmDelete } = getEventHandlers({ application, setModal });
 
   return (
     <div className="card" key={`card-${i}`} id={`card-${application[1]}`}>
@@ -70,8 +29,7 @@ const ApplicationsCard = (props) => {
         onClick={() => handleClick(application[0], application[3], i)}
       >
         <div className="databaseIconContainer">
-          <div className="databaseIconHeader">
-          </div>
+          <div className="databaseIconHeader"></div>
         </div>
 
         <CardHeader
@@ -81,11 +39,9 @@ const ApplicationsCard = (props) => {
               className={classes.iconbutton}
               aria-label="Delete"
               onClick={event => confirmDelete(event, i)}
-              size="large">
-              <HighlightOffIcon
-                className={classes.btnStyle}
-                id="deleteIcon"
-              />
+              size="large"
+            >
+              <HighlightOffIcon className={classes.btnStyle} id="deleteIcon" />
             </IconButton>
           }
         />
@@ -107,6 +63,6 @@ const ApplicationsCard = (props) => {
       </Card>
     </div>
   );
-}
+};
 
-export default ApplicationsCard
+export default ApplicationsCard;

app/components/ApplicationsCard/EventHandlers.ts

@@ -0,0 +1,43 @@
+import { useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { DashboardContext } from '../../context/DashboardContext';
+import { ApplicationContext } from '../../context/ApplicationContext';
+
+type ClickEvent = React.MouseEvent<HTMLElement>;
+
+interface EventHandlersProps {
+  application: any[];
+  setModal: (modalState: { isOpen: boolean; type: string }) => void;
+}
+
+export const getEventHandlers = ({ application, setModal }: EventHandlersProps) => {
+  const { deleteApp, user } = useContext(DashboardContext);
+  const { setAppIndex, setApp, setServicesData, app, example, connectToDB, setChart } =
+    useContext(ApplicationContext);
+  const navigate = useNavigate();
+
+  const handleClick = (selectedApp: string, selectedService: string, i: number) => {
+    const services = ['auth', 'client', 'event-bus', 'items', 'inventory', 'orders'];
+    setAppIndex(i);
+    setApp(selectedApp);
+    if (['AWS', 'AWS/EC2', 'AWS/ECS', 'AWS/EKS'].includes(selectedService)) {
+      navigate(`/aws/:${app}`, { state: { typeOfService: selectedService } });
+    } else if (example) {
+      setServicesData([]);
+      setChart('communications');
+      connectToDB(user, i, app, application[2], application[1]);
+      navigate(`/applications/example/${services.join(' ')}`);
+    } else {
+      setServicesData([]);
+      setModal({ isOpen: true, type: 'serviceModal' });
+    }
+  };
+
+  const confirmDelete = (event: ClickEvent, i: number) => {
+    event.stopPropagation();
+    const message = `The application '${app}' will be permanently deleted. Continue?`;
+    if (confirm(message)) deleteApp(i, '');
+  };
+
+  return { handleClick, confirmDelete };
+};

app/components/Contact/Contact.tsx

@@ -17,7 +17,7 @@ const Contact: React.FC = React.memo(() => {
             <h1>Contact Us</h1>
             <br />
             <p>Please feel free to provide any feedback, concerns, or comments.</p>
-            <p>You can find issues the team is currently working on
+            <p>You can find issues the team is currently working on  <span></span>
               <a id="issueLink" href="https://github.com/open-source-labs/Chronos/issues" target="_blank" rel="noreferrer">
                 here
               </a>.

app/components/Contact/ContactForm.tsx

@@ -26,7 +26,7 @@ const ContactForm = ({ currentMode }) => {
 };
 
 const FormInput: React.FC<FormInputProps> = ({ label, name, placeholder, type = "text", isTextarea = false, accept }) => (
-  <label htmlFor={name}>
+  <label htmlFor={name} style={{ fontWeight: 300 }}>
     {label}:
     {isTextarea ? (
       <textarea id={name} name={name} placeholder={placeholder} />

app/components/Contact/styles.scss

@@ -16,6 +16,7 @@
   justify-content: center;
   align-items: center;
   color: $background;
+  
 }
 .contact-border {
   display: flex;
@@ -102,12 +103,12 @@
 
 #myfile {
   font-size: 16px;
-  color: $background;
+  color: $header;
 }
 
 #contact-submit {
   border: none;
-  color: $background;
+  color: $header;
 
   &:hover {
     border: none;
@@ -147,9 +148,9 @@ input[type='file'] {
   margin-top: 20px;
   margin-left: -4px;
   padding: 10px;
-  border: 1px dotted $background;
+  border: 1px dotted $header;
   outline: none;
-  color: $background;
+  color: $header;
   background-color: transparent;
   border-radius: 8px;
   &:hover {
@@ -165,3 +166,7 @@ input[type='file'] {
     color: blue !important;
   }
 }
+
+.contact-blurb p{
+  font-weight: 300;
+}

app/components/GraphNavBar/GraphNavBar.tsx

@@ -108,8 +108,8 @@ const GraphNavBar = (props) => {
             }}
           />
          Inspect
-      </Link> */}
-      <button onClick={() => { setInspect(!inspect) }}>Inspect</button>
+      </Link>
+      <button onClick={() => { setInspect(!inspect) }}>Inspect</button> */}
     </nav>
   )
 }

app/components/Occupied/helpers/muiHelper.ts

@@ -1,9 +1,8 @@
 
 import { makeStyles } from '@mui/styles';
-// import { BaseCSSProperties } from '@mui/system';
 
  // Conditional Rendering of UI Modals for Light and Dark Mode
-// Theme, StyleProps
+//  StyleProps
 
 export const useStylesDark = makeStyles(theme => ({
   // ALL CARDS