Merge pull request #52 from oslabs-beta/ev/export-ui

Ev/export UI

Author: ywy-w

src/client/components-v2/main/http2-composer/Http2Composer.tsx

@@ -62,7 +62,7 @@ export default function Http2Composer(props) {
     warningMessage,
   } = props;
 
-  console.log(newRequestBody)
+  // console.log(newRequestBody)
 
   const {
     gRPC,

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

@@ -72,7 +72,12 @@ export default function LoginContainer(props) {
           flexDirection: 'row',
           alignItems: 'center',
         }}>
-          <MoreVertRoundedIcon fontSize='small' onClick={handleSignOut}/>
+          <Button
+            sx={{ maxWidth: '24px', maxHeight: '24px', minWidth: '24px', minHeight: '24px' }}
+            onClick={handleSignOut}
+          >
+            <LogoutRoundedIcon fontSize='small' />
+          </Button>
           <StyledBadge
             sx={{
               m: 1,
@@ -82,7 +87,7 @@ export default function LoginContainer(props) {
             variant="dot">
             <Avatar alt={session.username} src={session.avatar}/>
           </StyledBadge>
-          <Button variant="outlined">Invite +</Button>
+          {/* <Button variant="outlined">Invite +</Button> */}
         </Box>
         :
         <Box sx={{

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

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { Box } from '@mui/material';
 import WorkspaceSelect from './WorkspaceSelect';
 import DeleteWorkspaceButton from "./buttons/DeleteWorkspaceButton"
-import ExportWorkspaceButton from "./buttons/ExportWorkspaceButton";
+import ImportExportWorkspaceButton from "./buttons/ImportExportWorkspaceButton";
 import InviteToWorkspaceButton from "./buttons/InviteToWorkspaceButton";
 
 const mapStateToProps = (store) => {
@@ -19,7 +19,7 @@ function CurrentWorkspaceDisplay(props) {
       <WorkspaceSelect {...props} />
       {/* <SaveWorkspaceButton /> */}
       <DeleteWorkspaceButton id={props.currentWorkspaceId} currentWorkspace={props.currentWorkspace} />
-      <ExportWorkspaceButton />
+      <ImportExportWorkspaceButton />
       <InviteToWorkspaceButton />
     </Box>
   )

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

@@ -51,7 +51,7 @@ export default function WorkspaceSelect({ currentWorkspaceId, handleWorkspaceCha
         </Select>
         <FormHelperText>Current Workspace</FormHelperText>
       </FormControl>
-      <ImportWorkspaceModal open={open} handleClose={handleClose}/>
+      {/* <ImportWorkspaceModal open={open} handleClose={handleClose}/> */}
     </Box>
   )
 }

src/client/components-v2/workspace/buttons/ExportWorkspaceButton.tsx

@@ -1,22 +1,22 @@
-import React from "react";
-import { Button } from '@mui/material';
-import { IosShareRounded } from "@mui/icons-material";
-import ExportWorkspaceModal from "../modals/export-workspace/ExportWorkspaceModal";
+// import React from "react";
+// import { Button } from '@mui/material';
+// import { IosShareRounded } from "@mui/icons-material";
+// import ExportWorkspaceModal from "../modals/export-workspace/ExportWorkspaceModal";
 
-export default function ExportWorkspaceButton() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
+// export default function ExportWorkspaceButton() {
+//   const [open, setOpen] = React.useState(false);
+//   const handleOpen = () => setOpen(true);
+//   const handleClose = () => setOpen(false);
 
-  return(
-    <div>
-      <Button
-        variant="text"
-        sx={{ maxWidth: '24px', maxHeight: '24px', minWidth: '24px', minHeight: '24px' }}
-        onClick={handleOpen}>
-        <IosShareRounded fontSize="small"/>
-      </Button>
-      <ExportWorkspaceModal open={open} handleClose={handleClose}/>
-    </div>
-  )
-}
+//   return(
+//     <div>
+//       <Button
+//         variant="text"
+//         sx={{ maxWidth: '24px', maxHeight: '24px', minWidth: '24px', minHeight: '24px' }}
+//         onClick={handleOpen}>
+//         <IosShareRounded fontSize="small"/>
+//       </Button>
+//       <ExportWorkspaceModal open={open} handleClose={handleClose}/>
+//     </div>
+//   )
+// }

src/client/components-v2/workspace/buttons/ImportExportWorkspaceButton.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Button } from '@mui/material';
+import ImportExportIcon from '@mui/icons-material/ImportExport';
+import ImportExportWorkspaceModal from "../modals/import-export-workspace/ImportExportWorkspaceModal";
+import { styled } from '@mui/material/styles';
+import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
+
+
+//creates the formatting for the little button that appears when you hover over the import/export icon
+const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
+    <Tooltip {...props} classes={{ popper: className }} />
+  ))(({ theme }) => ({
+    [`& .${tooltipClasses.tooltip}`]: {
+      backgroundColor: theme.palette.common.white,
+      color: 'rgba(0, 0, 0, 0.87)',
+      boxShadow: theme.shadows[1],
+      fontSize: 11,
+      fontWeight: 'bold',
+    },
+  }));
+
+
+export default function ImportExportWorkspaceButton() {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return(
+    <div>
+    <LightTooltip title="Import/Export">
+        <Button
+        variant="text"
+        sx={{ maxWidth: '24px', maxHeight: '24px', minWidth: '24px', minHeight: '24px' }}
+        onClick={handleOpen}>
+        <ImportExportIcon fontSize="small"/>
+        </Button>
+    </LightTooltip> 
+    <ImportExportWorkspaceModal open={open} handleClose={handleClose}/>     
+    </div>
+  )
+}

src/client/components-v2/workspace/modals/export-workspace/ExportWorkspaceModal.tsx

@@ -10,6 +10,8 @@ import collectionsController from '../../../../controllers/collectionsController
 import githubController from '../../../../controllers/githubController';
 import db from '../../../../db';
 import { useLiveQuery } from 'dexie-react-hooks';
+import * as actions from '../../../../features/business/businessSlice';
+import * as uiactions from '../../../../features/ui/uiSlice';
 
 const style = {
   display: 'flex',
@@ -61,6 +63,9 @@ export default function ExportWorkspaceModal({ open, handleClose }) {
           {/* <Box id="import-workspace-modal-description" sx={{ m: 1, webkitJustifyContent: 'space-around', minWidth: 200 }}> */}
               <Button
                 variant="contained" size="small" 
+                onClick={() =>
+                  collectionsController.exportCollection(localWorkspaces)
+                  }
                 >Files
               </Button>
               <Button
@@ -72,4 +77,4 @@ export default function ExportWorkspaceModal({ open, handleClose }) {
       </Fade>
     </Modal>
   );
-}
+};

src/client/components-v2/workspace/modals/import-export-workspace/ExportToGitHubDialog.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+// Import controllers
+import collectionsController from '../../../../controllers/collectionsController'
+// Import MUI components
+import DialogTitle from '@mui/material/DialogTitle';
+import Dialog from '@mui/material/Dialog';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemButton from '@mui/material/ListItemButton';
+
+
+// export interface SimpleDialogProps {
+//   open: boolean;
+//   selectedValue: string;
+//   onClose: (value: string) => void;
+// }
+
+export default function ExportToGithubDialog({ allUserRepos, workspace, selectedRepo, open, onClose}) {
+  // const { onClose, selectedValue, open } = props;
+  
+  const handleClose = () => {
+    onClose(selectedRepo);
+  };
+
+  const handleListItemClick = (value: string) => {
+    onClose(value);
+  };
+
+  const handleExportToRepo = (repo) => {
+    console.log('need to export this specific file to this clicked-on repo.')
+    console.log('workspace to export:', workspace)
+    console.log('repo metadata:', repo.repository)
+    collectionsController.exportToGithub(workspace.id, repo.repository.name, repo.sha)
+    // 
+  }
+
+  console.log(
+    'all user repos:', allUserRepos
+  )
+  const repoListItems = []
+  for (let repo of allUserRepos) {
+    // console.log('sha', repo.sha);
+    repoListItems.push(
+      <ListItemButton 
+        key={repo.repository.id}
+        onClick={() => handleExportToRepo(repo)}
+      >
+        <ListItem>
+          <ListItemText primary={repo.repository.full_name} />
+        </ListItem>
+      </ListItemButton>
+    )
+  }
+
+  
+  return (
+    <Dialog onClose={handleClose} open={open}>
+      <DialogTitle>Select a repository to export to.</DialogTitle>
+      <List sx={{ pt: 0 }}>
+        {repoListItems}
+        {/* <ListItem autoFocus button onClick={() => handleListItemClick}>
+          <ListItemText primary="repo" />
+        </ListItem > */}
+      </List>
+    </Dialog>
+  );
+}

src/client/components-v2/workspace/modals/import-export-workspace/ExportToGithubListItem.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+// Import MUI components
+import Box from '@mui/material/Box';
+import List from '@mui/material/ListItem';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import Collapse from '@mui/material/Collapse';
+import ListItemText from '@mui/material/ListItemText';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+
+export default function ExportToGithubList({ workspaces }) {
+  const [expand, setExpand] = useState(false);
+  const handleListButtonClick = () => {
+    setExpand(!expand);
+  }
+
+  console.log('workspaces', workspaces)
+  const workspacesList = [];
+  for (let workspace of workspaces) {
+    workspacesList.push(
+      <ListItem disablePadding>
+        <ListItemButton onClick={handleListButtonClick}>
+          <ListItemText primary={workspace.name}/>
+            {expand ? <ExpandLess /> : <ExpandMore />}
+        </ListItemButton>
+        <Collapse in={expand} timeout="auto" unmountOnExit>
+          hello
+        </Collapse>
+      </ListItem>  
+    )
+  }
+
+  return(
+    {workspacesList}
+  )
+  
+}
+
+{/* <ListItem disablePadding>
+<ListItemButton onClick={handleExportToGithubListClick}>
+  <ListItemIcon>
+    <GitHubIcon/>
+  </ListItemIcon>
+  <ListItemText primary="Export to GitHub"/>
+  {exportToGithubList ? <ExpandLess /> : <ExpandMore />}
+</ListItemButton>
+</ListItem>
+<Collapse in={exportToLocalFilesList} timeout="auto" unmountOnExit>
+{dbWorkspaces}
+</Collapse> */}