fixing history tab in workspace area

Author: esclarsky

__tests__/composerTests.js

@@ -29,7 +29,7 @@ describe('GraphQL Composer', () => {
     newRequestBody: {
       bodyContent: '',
       bodyType: 'raw',
-      rawType: 'Text (text/plain)',
+      rawType: 'text/plain',
       JSONFormatted: true,
       bodyVariables: '',
     },

src/client/components-v2/App.tsx

@@ -12,7 +12,7 @@ import '../../assets/style/App.scss';
 import NavBarContainer from './navbar/NavBarContainer';
 import WorkspaceContainer from './workspace/WorkspaceContainer';
 import MainContainer from './main/MainContainer';
-
+import HistoryOrWorkspaceContainer from './history-workspace-display/HistoryOrWorkspaceContainer';
 
 import { Box, Divider } from '@mui/material';
 
@@ -35,7 +35,7 @@ const App = () => {
         <Divider orientation="horizontal"/>
         <Box sx={{ height: '100%', display: 'flex' }}>
           {/* New MUI workspace. */}
-          <WorkspaceContainer />
+          <HistoryOrWorkspaceContainer />
           {/* Legacy workspace. */}
           <ContentsContainer />
           <Divider orientation="vertical"/>

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

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+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';
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          <Box>{children}</Box>
+        </Box>
+      )}
+    </div>
+  );
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+export default function HistoryOrWorkspaceContainer() {
+  const [value, setValue] = React.useState(0);
+
+  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', }}>
+        <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
+          <Tab icon={<WorkIcon />} label="Current Workspace"  {...a11yProps(0)} sx={{fontSize:'10px', overflowWrap: "break-word", maxWidth: '50%'}}/>
+          <Tab icon={<AccessTimeIcon />} label='View History' {...a11yProps(1)} sx={{fontSize:'10px', overflowWrap: "break-word", maxWidth: '50%'}}/>
+        </Tabs>
+      </Box>
+      <TabPanel value={value} index={0}>
+        <WorkspaceContainer />
+      </TabPanel>
+      <TabPanel value={value} index={1}>
+        <HistoryContainer />
+      </TabPanel>
+    </Box>
+  );
+}

src/client/components-v2/navbar/ProtocolSelect.tsx

@@ -282,7 +282,10 @@ function ProtocolSelect(props) {
             key={page.name}
             variant="contained"
             color="primary"
-            onClick={() => onProtocolSelect(page.value)}
+            onClick={() => {
+              console.log(page.value)
+              onProtocolSelect(page.value)}
+            }
             sx={{
               m: 1
             }}>

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

@@ -33,7 +33,6 @@ export default function WorkspaceContainer(props) {
 
   return (
     <Box sx={{ minWidth: '20%', align: 'center', p: 1.5 }}>
-
       <CurrentWorskpaceDisplay currentWorkspaceId={currentWorkspaceId} handleWorkspaceChange={handleWorkspaceChange}/>
 
       <Box sx={{ p: 1 }}>

src/client/components/composer/NewRequest/TextCodeArea.jsx

@@ -18,6 +18,7 @@ const langs = {
 
 export default function TextCodeArea({ value, mode, onChange, theme = 'dark' , readOnly = false}) {
   const lang = mode.substring(mode.indexOf('/') + 1) // Grab language mode based on value passed in
+  console.log(lang)
   return (
     <div className="is-neutral-200-box">
       <CodeMirror

src/client/components/containers/SingleReqResContainer.jsx

@@ -150,7 +150,7 @@ const SingleReqResContainer = (props) => {
       bodyType: content.request.bodyType || 'raw',
       bodyContent: content.request.body || '',
       bodyVariables: content.request.bodyVariables || '',
-      rawType: content.request.rawType || 'Text (text/plain)',
+      rawType: content.request.rawType || 'text/plain',
       JSONFormatted: true,
       bodyIsNew: false,
     };

src/client/components/display/History.jsx

@@ -173,7 +173,7 @@ const History = ({
       bodyType: bodyType || 'raw',
       bodyContent: body || '',
       bodyVariables: bodyVariables || '',
-      rawType: rawType || 'Text (text/plain)',
+      rawType: rawType || 'text/plain',
       JSONFormatted: JSONFormatted || true,
       bodyIsNew: false,
     };

src/client/components/display/HistoryDate.jsx

@@ -20,13 +20,11 @@ class HistoryDate extends Component {
     let date = parse(current.date, 'MM/dd/yyyy', new Date())
     // let date = parseISO(current.date)
     if (isToday(date)) {
-      console.log('today')
       date = 'Today';
     } // If the date matches todays date render the word "Today"
     else if (isYesterday(date)) {
       date = 'Yesterday';
     } else {
-      log('else')
       date = format(date, 'MMM d, yyyy');
     }
 

src/client/controllers/historyController.ts

@@ -34,13 +34,13 @@ const historyController = {
         return groups;
       }, {});
       const historyGroupsArr = Object.keys(historyGroupsObj)
-        //.sort((a, b) => parse(b, 'MM/dd/yyyy', new Date()).valueOf() - parse(a, 'MM/dd/yyyy', new Date()).valueOf())
-        .sort((a, b) => parseISO(b).valueOf() - parseISO(a).valueOf())
+        .sort((a, b) => parse(b, 'MM/dd/yyyy', new Date()).valueOf() - parse(a, 'MM/dd/yyyy', new Date()).valueOf())
         .map((date: string) => ({ // this returns an array of objects with K:date T:string and K:array of history objects
           date,
           history: historyGroupsObj[date].sort(
             (a: ReqRes, b: ReqRes) => b.createdAt.valueOf() - a.createdAt.valueOf()), 
           }));
+          console.log(historyGroupsArr)
       store.default.dispatch(actions.getHistory(historyGroupsArr));
     } catch {
           ((err: string) => console.log('Error in getHistory', err))