Merge branch 'enhancement-update-frontend-docs' into Enhancement-Stor…

…ybook-Docs

src/components/AuthProvider/AuthProvider.md

@@ -1,14 +1 @@
-AuthProvider
-
-Description
-
----
-
-```jsx
-import AuthProvider from "./AuthProvider";
-
-<AuthProvider />
-```
-```jsx static
-<AuthProvider />
-```
+The AuthProvider component purpose is to give users access tokens on login and to refresh the tokens at set intervals of time. The users career account login information is used to determine if user can be authenticated.

src/components/ItemBodyView/ItemBodyView.md

@@ -10,11 +10,18 @@ The ItemBodyView displays the seven actions possible in an item:
 
 ```jsx
 import ItemBodyView from "./ItemBodyView";
+import webqueue2Theme from "../../theme";
+import { ThemeProvider } from "@material-ui/core/styles";
+
+const theme = webqueue2Theme(false);
 
 const demoItem = {"queue": "ce", "number": 100, "lastUpdated": "09-28-20 01:26 PM", "headers": [{"type": "Merged-Time", "content": "Tue, 23 Jun 2020 13:31:53 -0400"}, {"type": "Merged-By", "content": "campb303"}, {"type": "QTime", "content": "1"}, {"type": "QTime-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "QTime-Updated-By", "content": "campb303"}, {"type": "Time", "content": "1"}, {"type": "Time-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "Time-Updated-By", "content": "campb303"}, {"type": "Replied-Time", "content": "Tue, 23 Jun 2020 13:28:48 -0400"}, {"type": "Replied-By", "content": "campb303"}, {"type": "Edited-Time", "content": "Tue, 23 Jun 2020 13:27:56 -0400"}, {"type": "Edited-By", "content": "campb303"}, {"type": "QAssigned-To", "content": "campb303"}, {"type": "QAssigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "QAssigned-To-Updated-By", "content": "campb303"}, {"type": "Assigned-To", "content": "campb303"}, {"type": "Assigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "Assigned-To-Updated-By", "content": "campb303"}, {"type": "QStatus", "content": "Dont Delete"}, {"type": "QStatus-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "QStatus-Updated-By", "content": "campb303"}, {"type": "Status", "content": "Dont Delete"}, {"type": "Status-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "Status-Updated-By", "content": "campb303"}, {"type": "Date", "content": "Tue, 23 Jun 2020 13:25:51 -0400"}, {"type": "From", "content": "Justin Campbell <campb303@purdue.edu>"}, {"type": "Message-ID", "content": "<911CE050-3240-4980-91DD-9C3EBB8DBCF8@purdue.edu>"}, {"type": "Subject", "content": "Beepboop"}, {"type": "To", "content": "cesite@ecn.purdue.edu"}, {"type": "Content-Type", "content": "text/plain; charset=\"utf-8\""}, {"type": "X-ECN-Queue-Original-Path", "content": "/home/pier/e/queue/Attachments/inbox/2020-06-23/208-original.txt"}, {"type": "X-ECN-Queue-Original-URL", "content": "https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/208-original.txt"}], "content": [{"type": "directory_information", "Name": "Heyi Feng", "Login": "feng293", "Computer": "civil4147pc2.ecn", "Location": "HAMP 4147", "Email": "feng293@purdue.edu", "Phone": "5039154835", "Office": "", "UNIX Dir": "None", "Zero Dir": "U=\\\\myhome.itap.purdue.edu\\myhome\\%username%", "User ECNDB": "http://eng.purdue.edu/jump/2e29495", "Host ECNDB": "http://eng.purdue.edu/jump/2eccc3f", "Subject": "Upgrade system and Abaqus"}, {"type": "assignment", "datetime": "2020-06-23T13:27:00-0400", "by": "campb303", "to": "campb303"}, {"type": "initial_message", "datetime": "2020-06-23T13:25:51-0400", "from_name": "Justin Campbell", "user_email": "campb303@purdue.edu", "to": [{"name": "", "email": "cesite@ecn.purdue.edu"}], "cc": [], "content": ["Testtest\n"]}, {"type": "status", "datetime": "2020-06-23T13:26:55", "by": "campb303", "content": ["Dont Delete\n"]}, {"type": "edit", "datetime": "2020-06-23T13:27:56", "by": "campb303", "content": ["This be an edit my boy\n"]}, {"type": "reply_to_user", "datetime": "2020-06-23T13:28:18", "by": "campb303", "content": ["This be a reply my son\n", "\n", "Justin\n", "ECN\n"]}, {"type": "reply_from_user", "datetime": "2020-06-23T13:30:45-0400", "from_name": "Justin Campbell", "from_email": "campb303@purdue.edu", "cc": [], "content": ["X-ECN-Queue-Original-Path: /home/pier/e/queue/Attachments/inbox/2020-06-23/212-original.txt\n", "X-ECN-Queue-Original-URL: https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/212-original.txt\n", "\n", "Huzzah!\n"]}], "isLocked": "ce 100 is locked by knewell using qvi", "userEmail": "campb303@purdue.edu", "userName": "Justin Campbell", "userAlias": "campb303", "assignedTo": "campb303", "subject": "Beepboop", "status": "Dont Delete", "priority": "", "department": "", "building": "", "dateReceived": "2020-06-23T13:25:51-0400"};
+
+<ThemeProvider theme={theme}>
 <div style={{backgroundColor: "white", padding: "1em"}}>
 	<ItemBodyView item={demoItem} />
 </div>
+</ThemeProvider>
 ```
 
 ```jsx static

src/components/ItemHeaderView/ItemHeaderView.md

@@ -0,0 +1,23 @@
+The ItemHeader displays item metadata for items of selected queues and allows for filtering by field and opening an item by clicking. Items are passed in as a required parameter. It is to be used with the [ItemTableAppBar](/#/Components/ItemTableAppBar).
+
+It is based on [react-table](https://react-table.tanstack.com/).
+```jsx
+import React, { useState, useEffect } from "react";
+
+
+const [itemData, setItemData] = useState([]);
+
+const testItems = [{"queue": "ce", "number": 9, "lastUpdated": "09-11-20 12:14 PM", "isLocked": false, "userEmail": "lslusher@purdue.edu", "userName": "Slusher, Laura M", "userAlias": "lslusher", "assignedTo": "bekuma", "subject": "RE: New laptop", "status": "waiting on reply/time to call", "priority": "deploy", "department": "che", "building": "frny", "dateReceived": "2020-03-12T18:07:27+0000"}, {"queue": "ce", "number": 42, "lastUpdated": "09-11-20 12:14 PM", "isLocked": false, "userEmail": "feng293@purdue.edu", "userName": "", "userAlias": "feng293", "assignedTo": "schmid22", "subject": "Upgrade system and Abaqus", "status": "", "priority": "", "department": "", "building": "", "dateReceived": "2020-05-14T10:21:32-0400"}, {"queue": "ce", "number": 51, "lastUpdated": "09-11-20 12:14 PM", "isLocked": false, "userEmail": "jclauso@purdue.edu", "userName": "", "userAlias": "jclauso", "assignedTo": "schmid22", "subject": "ECN privileges for future grad student", "status": "Waiting for reply", "priority": "", "department": "", "building": "", "dateReceived": "2020-05-14T15:03:07-0400"}];
+
+
+useEffect(() => {
+
+		setItemData(testItems)
+
+}, []);
+
+<ItemHeaderView data={itemData} />
+```
+```jsx static
+<ItemHeaderView data={someArray} />
+```

src/components/ItemTable/ItemTable.js

@@ -22,7 +22,7 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
         },
         hoverBackgroundColor: {
             "&:hover": {
-                // The !important is placed here to enforce CSS specificity. 
+                // The !important is placed here to enforce CSS specificity.
                 // See: https://material-ui.com/styles/advanced/#css-injection-order
                 backgroundColor: `${theme.palette.primary[200]} !important`,
             },
@@ -59,7 +59,6 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
             { Header: 'Department', accessor: 'department' },
             { Header: 'Building', accessor: 'building' },
             { Header: 'Date Received', accessor: 'dateReceived', sortInverted: true, Cell: ({ value }) => <RelativeTime value={value} /> },
-
         ], []);
     const tableInstance = useTable(
         {
@@ -90,7 +89,7 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
     const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance;
 
     return (
-        loading 
+        loading
         ? (
             <Box className={classes.loadingAnnimation}>
                 <img src={jester} alt="Items are loading." />
@@ -159,7 +158,7 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
                                         history.push(`/${row.original.queue}/${row.original.number}`);
                                         setSelectedRow({ queue: row.original.queue, number: row.original.number });
                                     }}
-                                    // This functionality should be achieved by using the selected prop and 
+                                    // This functionality should be achieved by using the selected prop and
                                     // overriding the selected class but this applied the secondary color at 0.08% opacity.
                                     // Overridding the root class is a workaround.
                                     classes={{

src/components/ItemTable/ItemTable.md

@@ -1,6 +1,6 @@
 The ItemTable is the primary view for webqueue2. It displays item metadata for items of selected queues and allows for filtering by field and opening an item by clicking. Items are passed in as a required parameter. It is to be used with the [ItemTableAppBar](/#/Components/ItemTableAppBar).
 
-It is based on [material-table](https://material-table.com/).
+It is based on [react-table](https://react-table.tanstack.com/).
 ```jsx
 import React, { useState, useEffect } from "react";
 
@@ -17,9 +17,9 @@ useEffect(() => {
 
 }, []);
 
-<ItemTable items={itemQueue} />
+<ItemTable data={itemQueue}  />
 ```
 
 ```jsx static
-<ItemTable items={someArray} />
+<ItemTable data={someArray}  />
 ```

src/components/ItemViewAppBar/ItemViewAppBar.js

@@ -21,8 +21,7 @@ export default function ItemViewAppBar({ title, setSidebarOpen }){
 			flexGrow: "1"
 		},
 		appBarRoot: {
-			width: "inherit",
-
+			width: "100%"
 		},
 	}));
 	const classes = useStyles(theme);
@@ -31,7 +30,7 @@ export default function ItemViewAppBar({ title, setSidebarOpen }){
 
 	return(
 		<>
-			<AppBar position="fixed" color="secondary" elevation={2} classes={{root: classes.appBarRoot}}>
+			<AppBar position="sticky" color="secondary" elevation={2} classes={{root: classes.appBarRoot}}>
 
 				<Toolbar variant="dense">
                     <Tooltip title={"Close Item"} 

src/components/QueueSelector/QueueSelector.md

@@ -22,6 +22,7 @@ const queues = [
     }
 ];
 
+
 const useStyles = makeStyles({
     root: {
         padding: "16px",
@@ -30,9 +31,11 @@ const useStyles = makeStyles({
 const classes = useStyles();
 
 <Paper classes={{ root: classes.root }}>
-    <QueueSelector queues={queues} selectedQueues={selectedQueues} setSelectedQueues={setSelectedQueues} />
+    <QueueSelector  value={queues} setValue={selectedQueues
+    }/>
 </Paper>
 ```
 ```jsx static
-<QueueSelector queues={queues} selectedQueues={selectedQueues} setSelectedQueues={setSelectedQueues} />
+    <QueueSelector open={someBoolean} setOpen={someFunction()} value={someArray} setValue={someFunction()}/>
+
 ```

src/components/TeamMemberCard/TeamMemberCard.md

@@ -1,4 +1,6 @@
-The ItemTable is the primary view for webqueue2. It displays item metadata for items of selected queues and allows for filtering by field and opening an item by clicking. By default, it is pre-configured to fetch data from the webqueue2 API. 
+The TeamMemberCard is used to give a quick summary on people that have worked on webqueue2. It displays a image of the team member, the person's first and last name, a brief professional summary, and a link to their personal portfolio(if applicable).
+
+If no image is provided the profile image is replaced with the first initial of the team memebers first name.
 
 ```jsx
 import React, { useState } from "react";