Merge pull request #49 from oslabs-beta/alex/workspace-fix

Alex/workspace fix

Author: evelingoldin

src/client/components-v2/App.tsx

@@ -39,9 +39,9 @@ const App = () => {
         <Box sx={{ height: '100%', display: 'flex' }}>
           {/* New MUI workspace. */}
           {/* <WorkspaceContainer currentWorkspaceId={currentWorkspaceId} setWorkspace={setWorkspace} /> */}
-          {/* <HistoryOrWorkspaceContainer currentWorkspaceId={currentWorkspaceId} setWorkspace={setWorkspace} /> */}
+          <HistoryOrWorkspaceContainer currentWorkspaceId={currentWorkspaceId} setWorkspace={setWorkspace} />
           {/* Legacy workspace. */}
-          <ContentsContainer />
+          {/* <ContentsContainer /> */}
           <Divider orientation="vertical"/>
           {/* New MUI main container. */}
           <MainContainer currentWorkspaceId={currentWorkspaceId} />

src/client/components-v2/history-workspace-display/HistoryOrWorkspaceContainer.tsx

@@ -1,12 +1,17 @@
 import * as React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
+import BarGraph from '../../components/display/BarGraph';
+import ScheduleContainer from '../../components/containers/ScheduleContainer';
 import WorkspaceContainer from "../workspace/WorkspaceContainer";
 import HistoryContainer from '../../components/containers/HistoryContainer';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import WorkIcon from '@mui/icons-material/Work';
+import ScheduleSendRoundedIcon from '@mui/icons-material/ScheduleSendRounded';
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -42,24 +47,55 @@ function a11yProps(index: number) {
 }
 
 export default function HistoryOrWorkspaceContainer(props) {
+  const [showGraph, setShowGraph] = React.useState(false);
   const [value, setValue] = React.useState(0);
 
+  const currentResponse = useSelector((store: any) => store.business.currentResponse);
+
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
   };
 
   return (
-    <Box sx={{ minWidth: '25%', overflow: 'auto', maxHeight: '100%', overflowX: 'auto' }}>
-      <Box sx={{ borderBottom: 1, borderColor: 'divider', }}>
+    <Box sx={{ minWidth: '25%', overflow: 'auto', maxHeight: '100%', overflowX: 'auto', overflowY: 'scroll' }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
         <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
           <Tab icon={<WorkIcon fontSize='small'/>} {...a11yProps(0)} sx={{fontSize:'10px', overflowWrap: "break-word", maxWidth: '50%'}}/>
-          <Tab icon={<AccessTimeIcon fontSize='small'/>} {...a11yProps(1)} sx={{fontSize:'10px', overflowWrap: "break-word", maxWidth: '50%'}}/>
+          <Tab icon={<ScheduleSendRoundedIcon fontSize='small'/>} {...a11yProps(1)} sx={{fontSize:'10px', overflowWrap: "break-word", maxWidth: '50%'}}/>
+          <Tab icon={<AccessTimeIcon fontSize='small'/>} {...a11yProps(2)} sx={{fontSize:'10px', overflowWrap: "break-word", maxWidth: '50%'}}/>
         </Tabs>
       </Box>
+      {value === 1 && (<Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          px: 1,
+          py: 1
+        }}
+      >
+        <Button
+          className={`is-flex is-align-items-center is-justify-content-center is-graph-footer is-clickable`}
+          variant='outlined'
+          onClick={() => setShowGraph(showGraph === false)}
+        >
+          {showGraph && 'Hide Response Metrics'}
+          {!showGraph && 'View Response Metrics'}
+        </Button>
+        {( showGraph && <Box sx={{
+          py: 1
+        }}>
+          <BarGraph />
+        </Box>
+        )}
+        </Box>
+      )}
       <TabPanel value={value} index={0}>
         <WorkspaceContainer {...props} />
       </TabPanel>
       <TabPanel value={value} index={1}>
+        <ScheduleContainer />
+      </TabPanel>
+      <TabPanel value={value} index={2}>
         <HistoryContainer />
       </TabPanel>
     </Box>

src/client/components-v2/workspace/CollectionTree.tsx

@@ -1,27 +1,64 @@
 import React from "react";
+import { connect, useSelector, useDispatch } from 'react-redux';
+import * as actions from '../../features/business/businessSlice';
+
+// import RequestCard from "./RequestCard";
+import SingleReqResContainer from "../../components/containers/SingleReqResContainer";
+import ReqResContainer from "../../components/containers/ReqResContainer";
 
-import RequestCard from "./RequestCard";
 
 import TreeView from '@mui/lab/TreeView';
 import TreeItem from '@mui/lab/TreeItem';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { Box, Typography } from '@mui/material';
 
-export default function CollectionTree({ currentWorkspace }) {
+const mapStateToProps = (store) => ({
+  reqResArray: store.business.reqResArray,
+  currentTab: store.business.currentTab,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  reqResDelete: (reqRes) => {
+    dispatch(actions.reqResDelete(reqRes));
+  },
+  reqResUpdate: (reqRes) => {
+    dispatch(actions.reqResUpdate(reqRes));
+  },
+});
+
+function CollectionTree({ currentWorkspace, reqResDelete, reqResUpdate }) {
 
   const { reqResArray } = currentWorkspace;
   const requestTreeItems = []
-  for (let content of reqResArray) {
+  for (let i = 0; i < reqResArray.length; i+=1) {
     requestTreeItems.push(
-      <RequestCard
-        key={content.id}
-        content={content}
-      />
+      <TreeItem
+        key={reqResArray[i].id}
+        nodeId={reqResArray[i].id}
+        label={
+          <SingleReqResContainer
+            className="reqResChild"
+            content={reqResArray[i]}
+            key={reqResArray[i].id}
+            index={i}
+            reqResDelete={reqResDelete}
+            reqResUpdate={reqResUpdate}
+          />
+        }
+    />
     )
   }
   // key={request.id} request={request}
 
+        // <RequestCard
+      //   key={reqResArray[i].id}
+      //   content={reqResArray[i]}
+      //   index={i}
+      //   reqResDelete={reqResDelete}
+      //   reqResUpdate={reqResUpdate}
+      // />
+
   return (
     <Box
       className="collection-tree"
@@ -37,17 +74,21 @@ export default function CollectionTree({ currentWorkspace }) {
               Start this Workspace by adding a request from the composer.
           </Typography>
         // If there are requests in the current workspace, render the collection tree.
-        : <TreeView
-            aria-label="collection navigator"
-            defaultCollapseIcon={<ExpandMoreIcon />}
-            defaultExpandIcon={<ChevronRightIcon />}
-            sx={{ flexGrow: 1, overflowY: 'auto' }}
-          >
-            <TreeItem nodeId={currentWorkspace.id} label={currentWorkspace.name}>
-              {requestTreeItems}
-            </TreeItem>
-          </TreeView>
+        : <ReqResContainer displaySchedule />
+        // : <TreeView
+        //     aria-label="collection navigator"
+        //     defaultCollapseIcon={<ExpandMoreIcon />}
+        //     defaultExpandIcon={<ChevronRightIcon />}
+        //     sx={{ flexGrow: 1, overflowY: 'auto' }}
+        //   >
+        //     <TreeItem nodeId={currentWorkspace.id} label={currentWorkspace.name}>
+        //       {requestTreeItems}
+        //     </TreeItem>
+        //   </TreeView>
       }
     </Box>
   );
 }
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(CollectionTree);

src/client/components-v2/workspace/CurrentWorkspaceDisplay.tsx

@@ -1,18 +1,28 @@
 import React from "react";
+import { connect } from "react-redux";
 import { Box } from '@mui/material';
 import WorkspaceSelect from './WorkspaceSelect';
-import SaveWorkspaceButton from "./buttons/SaveWorkspaceButton";
+import DeleteWorkspaceButton from "./buttons/DeleteWorkspaceButton"
 import ExportWorkspaceButton from "./buttons/ExportWorkspaceButton";
 import InviteToWorkspaceButton from "./buttons/InviteToWorkspaceButton";
 
-export default function CurrentWorkspaceDisplay(props) {
+const mapStateToProps = (store) => {
+  return {
+    workspaces: store.business.collections,
+  };
+};
+
+function CurrentWorkspaceDisplay(props) {
   return (
     <Box sx={{ display: 'flex', flexGrow: 1, alignItems: 'center', pb: 1 }}>
       {/* The below select menu should contain all saved workspaces in the Swell app. */}
       <WorkspaceSelect {...props} />
-      <SaveWorkspaceButton />
+      {/* <SaveWorkspaceButton /> */}
+      <DeleteWorkspaceButton id={props.currentWorkspaceId} currentWorkspace={props.currentWorkspace} />
       <ExportWorkspaceButton />
       <InviteToWorkspaceButton />
     </Box>
   )
 }
+
+export default connect(mapStateToProps)(CurrentWorkspaceDisplay);

src/client/components-v2/workspace/WorkspaceContainer.tsx

@@ -1,24 +1,25 @@
-import React from "react";
+import React, { useState } from "react";
 import { useSelector } from 'react-redux';
 
 // Local components
 import CurrentWorskpaceDisplay from "./CurrentWorkspaceDisplay";
+import LegacyWorkspace from "../../components/containers/WorkspaceContainer";
+import BarGraph from "../../components/display/BarGraph";
+// import CollectionsContainer from "../../components/containers/CollectionsContainer";
 import CollectionTree from './CollectionTree';
 
 // MUI components and SVG icons
 import { Box, Button, Typography, SelectChangeEvent, Divider } from '@mui/material';
 import { AddRounded } from '@mui/icons-material';
 
 export default function WorkspaceContainer({ currentWorkspaceId, setWorkspace }) {
+
   /**
    * TODO: change the workspace container to have adjustable width sizing via user dragging
    * TODO: reimplement the "Schedule" functionality somehow
    * TODO: refactor store to remove explicit any
    */
 
-  // // currentWorkspace is the current Workspace's UUID. It is only altered in WorkspaceSelect.tsx, which is rendered by CurrentWorskpaceDisplay.tsx
-  // const [currentWorkspaceId, setWorkspace] = React.useState('');
-
   const handleWorkspaceChange = (event: SelectChangeEvent) => {
     setWorkspace(event.target.value as string);
   }
@@ -34,22 +35,32 @@ export default function WorkspaceContainer({ currentWorkspaceId, setWorkspace })
   return (
     <Box className="workspace-container" sx={{ minWidth: '20%', align: 'center', p: 1.5 }}>
       {/* The display for your current workspace. Contains functionality for saving, importing, exporting, and adding other GitHub users to your workspace. */}
-      <CurrentWorskpaceDisplay currentWorkspaceId={currentWorkspaceId} handleWorkspaceChange={handleWorkspaceChange}/>
+      <CurrentWorskpaceDisplay currentWorkspaceId={currentWorkspaceId} currentWorkspace={currentWorkspace} handleWorkspaceChange={handleWorkspaceChange}/>
+      <Box className="collections-container">
+        <Typography>Requests</Typography>
+        <Divider orientation="horizontal" />
+        <LegacyWorkspace />
+      </Box>
+
       {/* Conditionally render either a message or collection tree depending on if a workspace is selected */}
-      {currentWorkspace === undefined
-        ? <Typography variant="caption">Get started by selecting, importing, or creating a new workspace.</Typography>
-        : <Box className="collections-container">
-            <Typography>Collections</Typography>
-            <Divider orientation="horizontal" />
-            <CollectionTree currentWorkspace={currentWorkspace}/>
-          </Box>
+      {
+        // currentWorkspace === undefined
+        // ? <Typography variant="caption">Get started by selecting, importing, or creating a new workspace.</Typography>
+        // : <Box className="collections-container">
+        //     <Typography>Requests</Typography>
+        //     <Divider orientation="horizontal" />
+        //     <LegacyWorkspace />
+        //     {/* <CollectionTree currentWorkspace={currentWorkspace}/> */}
+        //   </Box>
       }
+
       {/**
        * TODO:
        * Below button is not ready to be added. Would eventually be used to add another collection to a workspace.
        * However, workspaces are currently only built to handle 1 collection max.
        * Need to refactor Redux store to get this button to work.
        */}
+
       {/* <Button variant="text" sx={{ width: 1, maxHeight: '24px', minHeight: '24px' }}>
         <AddRounded fontSize="small"/>
       </Button> */}

src/client/components-v2/workspace/WorkspaceContextMenu.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import * as actions from '../../features/business/businessSlice';
+
+export default function WorkspaceContextMenu({ id, name, reqResArray }) {
+  const [contextMenu, setContextMenu] = React.useState<{
+    mouseX: number;
+    mouseY: number;
+  } | null>(null);
+
+  const handleContextMenu = (event: React.MouseEvent) => {
+    event.preventDefault();
+    setContextMenu(
+      contextMenu === null
+        ? {
+            mouseX: event.clientX + 2,
+            mouseY: event.clientY - 6,
+          }
+        : // repeated contextmenu when it is already open closes it with Chrome 84 on Ubuntu
+          // Other native context menus might behave different.
+          // With this behavior we prevent contextmenu from the backdrop to re-locale existing context menus.
+          null,
+    );
+  };
+
+  const handleClose = () => {
+    setContextMenu(null);
+  };
+
+  const dispatch = useDispatch();
+  const collectionToReqRes = (reqResArray) => {
+    dispatch(actions.collectionToReqRes(reqResArray));
+  }
+
+  // <MenuItem
+  //   key={workspace.id}
+  //   value={workspace.id}
+  //   onClick={() => collectionToReqRes(workspace.reqResArray)}
+  // >
+  //   {workspace.name}
+  // </MenuItem>
+
+  return(
+    <MenuItem
+      key={id}
+      value={id}
+      onClick={() => collectionToReqRes(reqResArray)}
+    >
+      <div onContextMenu={handleContextMenu} style={{ cursor: 'context-menu', width: '100%' }}>
+        <Typography>{name}</Typography>
+        <Menu
+          open={contextMenu !== null}
+          onClose={handleClose}
+          anchorReference="anchorPosition"
+          anchorPosition={
+            contextMenu !== null
+              ? { top: contextMenu.mouseY, left: contextMenu.mouseX }
+              : undefined
+          }
+        >
+          <MenuItem onClick={handleClose}>Delete</MenuItem>
+        </Menu>
+      </div>
+    </MenuItem>
+  )
+}