Multiple Fixes

Resource context menu in workspace tree Open in document in new tab Update modified when operation is received Fix deleting workspace tree descendants Create resources in top-level of tree
NoteSpaceTeam · May 25, 2024 · 68d896d · 68d896d
1 parent ad3d91c
commit 68d896d
Show file tree

Hide file tree

Showing 35 changed files with 306 additions and 195 deletions.
diff --git a/code/client/package.json b/code/client/package.json
@@ -19,20 +19,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@mui/material": "^5.15.16",
-    "@mui/styles": "^5.15.18",
     "@notespace/shared": "file:..\\shared",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
+    "react-router-dom": "^6.23.0",
+    "@mui/material": "^5.15.16",
     "@testing-library/jest-dom": "^6.4.5",
     "dotenv": "^16.4.5",
     "eslint-plugin-playwright": "^1.6.0",
     "lodash": "^4.17.21",
     "msw": "^2.2.14",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-icons": "^5.2.1",
-    "react-router-dom": "^6.23.0",
     "slate": "^0.103.0",
     "slate-history": "^0.100.0",
     "slate-react": "^0.102.0",
@@ -69,9 +66,7 @@
     "typescript": "^5.4.5",
     "vite": "^5.2.11",
     "vite-plugin-pwa": "^0.20.0",
-    "vite-plugin-qrcode": "^0.2.3",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.6.0"
-  },
-  "packageManager": "[email protected]+sha256.22e36fba7f4880ecf749a5ca128b8435da085ecd49575e7fb9e64d6bf4fad394"
+  }
 }
diff --git a/code/client/src/App.scss b/code/client/src/App.scss
@@ -52,3 +52,9 @@
   font-size: 16px;
   font-weight: 500;
 }
+
+.text-field * {
+  outline: none;
+  border-color: rgba(0, 0, 0, 0.2) !important;
+  color: rgba(0, 0, 0, 0.7) !important;
+}
diff --git a/code/client/src/domain/workspaces/tree/useWorkspaceTree.ts b/code/client/src/domain/workspaces/tree/useWorkspaceTree.ts
@@ -27,10 +27,24 @@ function useWorkspaceTree() {
 
     if (!parentNode) throw new Error('Invalid parent id: ' + parent);
     const newNodes = { ...nodes };
+
+    const deleteDescendants = (node: Resource) => {
+      node.children.forEach(childId => {
+        const childNode = newNodes[childId];
+        if (childNode) {
+          deleteDescendants(childNode);
+        }
+      });
+      delete newNodes[node.id];
+    };
+
+    // delete node and its descendants recursively
+    deleteDescendants(node);
+
+    // remove the node from its parent's children array
     const index = parentNode.children.indexOf(id);
     if (index !== -1) parentNode.children.splice(index, 1);
 
-    delete newNodes[id];
     newNodes[parent] = parentNode;
     setNodes(newNodes);
   }

diff --git a/...src/ui/contexts/workspace/useResources.ts → ...ent/src/domain/workspaces/useResources.ts b/...src/ui/contexts/workspace/useResources.ts → ...ent/src/domain/workspaces/useResources.ts
diff --git a/...i/pages/workspaces/hooks/useWorkspaces.ts → ...nt/src/domain/workspaces/useWorkspaces.ts b/...i/pages/workspaces/hooks/useWorkspaces.ts → ...nt/src/domain/workspaces/useWorkspaces.ts
@@ -19,8 +19,15 @@ function useWorkspaces() {
     setWorkspaces(workspaces.filter(workspace => workspace.id !== id));
   }
 
-  function onUpdateWorkspace(workspace: WorkspaceMeta) {
-    setWorkspaces(workspaces.map(w => (w.id === workspace.id ? workspace : w)));
+  function onUpdateWorkspace(newProps: Partial<WorkspaceMeta>) {
+    setWorkspaces(
+      workspaces.map(workspace => {
+        if (workspace.id === newProps.id) {
+          return { ...workspace, ...newProps };
+        }
+        return workspace;
+      })
+    );
   }
 
   async function createWorkspace(workspace: WorkspaceInputModel) {

diff --git a/code/client/src/index.css b/code/client/src/index.css
@@ -54,12 +54,39 @@ button {
 
 .MuiCheckbox-root {
   transition: background-color 0.2s;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.MuiCheckbox-root:focus {
+  outline: none;
+  box-shadow: none;
 }
 
 .MuiCheckbox-root:hover {
   background-color: rgba(0, 0, 0, 0.05) !important;
 }
 
+.root .MuiOutlinedInput-root:focus-within {
+  outline: none;
+  box-shadow: none;
+  border-color: black !important;
+}
+
+.Mui-focused {
+  color: black;
+}
+
+.MuiInput-underline:after {
+  border-bottom-color: black;
+}
+
+.MuiOutlinedInput-root.Mui-focused fieldset {
+  border-color: black;
+}
+
 ::selection {
   background-color: grey;
   color: white;

diff --git a/code/client/src/ui/components/dialog/Dialog.tsx b/code/client/src/ui/components/dialog/Dialog.tsx
@@ -8,7 +8,6 @@ import {
   Checkbox,
   FormControlLabel,
 } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import './Dialog.scss';
 
 interface Field {
@@ -21,27 +20,11 @@ interface DialogProps {
   title: string;
   fields: Field[];
   onSubmit: (values: { [key: string]: any }) => void;
+  submitText?: string;
   children: React.ReactNode;
 }
 
-const useStyles = makeStyles({
-  root: {
-    '& label.Mui-focused': {
-      color: 'black',
-    },
-    '& .MuiInput-underline:after': {
-      borderBottomColor: 'black',
-    },
-    '& .MuiOutlinedInput-root': {
-      '&.Mui-focused fieldset': {
-        borderColor: 'black',
-      },
-    },
-  },
-});
-
-function Dialog({ title, fields, onSubmit, children }: DialogProps) {
-  const classes = useStyles();
+function Dialog({ title, fields, onSubmit, submitText, children }: DialogProps) {
   const [open, setOpen] = useState(false);
   const [values, setValues] = useState<{ [key: string]: any }>(
     fields.reduce((obj, item) => ({ ...obj, [item.name]: item.type === 'checkbox' ? false : '' }), {})
@@ -87,7 +70,7 @@ function Dialog({ title, fields, onSubmit, children }: DialogProps) {
               />
             ) : (
               <TextField
-                className={classes.root}
+                className="text-field"
                 key={field.name}
                 autoFocus
                 margin="dense"
@@ -102,7 +85,7 @@ function Dialog({ title, fields, onSubmit, children }: DialogProps) {
         </DialogContent>
         <DialogActions>
           <button onClick={handleClose}>Cancel</button>
-          <button onClick={handleSubmit}>Submit</button>
+          <button onClick={handleSubmit}>{submitText || 'Submit'}</button>
         </DialogActions>
       </MaterialDialog>
     </div>

diff --git a/code/client/src/ui/components/sidebar/Sidebar.scss b/code/client/src/ui/components/sidebar/Sidebar.scss
@@ -45,6 +45,22 @@
     }
   }
 
+  .workspace-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 90%;
+
+    button {
+      background-color: transparent;
+      color: black;
+      font-size: 3vh;
+      padding: 0;
+      margin: 0;
+    }
+  }
+
   a {
     text-decoration: none !important;
   }

diff --git a/code/client/src/ui/components/sidebar/Sidebar.tsx b/code/client/src/ui/components/sidebar/Sidebar.tsx
@@ -7,6 +7,9 @@ import './Sidebar.scss';
 import WorkspaceTree from '@ui/components/sidebar/components/workspace-tree/WorkspaceTree';
 import { IoMdSettings } from 'react-icons/io';
 import { TiHome } from 'react-icons/ti';
+import { GoPlus } from 'react-icons/go';
+import { ResourceType } from '@notespace/shared/src/workspace/types/resource';
+import CreateResourceMenu from '@ui/components/sidebar/components/CreateResourceMenu';
 
 function Sidebar() {
   const { isOpen, isLocked, isLoaded, handleClick, handleMouseEnter, handleMouseLeave } = useSidebarState();
@@ -52,9 +55,19 @@ function Sidebar() {
         <hr />
         {workspace && operations && resources && (
           <>
-            <h3>
-              <Link to={`/workspaces/${workspace.id}`}>{workspace.name}</Link>
-            </h3>
+            <div className="workspace-header">
+              <h3>
+                <Link to={`/workspaces/${workspace.id}`}>{workspace.name}</Link>
+              </h3>
+              <CreateResourceMenu
+                onCreateNew={(type: ResourceType) => operations.createResource('Untitled', type, workspace.id)}
+                trigger="sidebar-create-resource"
+              />
+              <button id="sidebar-create-resource">
+                <GoPlus />
+              </button>
+            </div>
+
             <WorkspaceTree workspace={workspace} resources={resources} operations={operations} />
           </>
         )}

diff --git a/.../components/CreateResourceContextMenu.tsx → ...sidebar/components/CreateResourceMenu.tsx b/.../components/CreateResourceContextMenu.tsx → ...sidebar/components/CreateResourceMenu.tsx
@@ -1,18 +1,16 @@
 import PopupMenu from '@ui/components/popup-menu/PopupMenu';
-import { ReactNode } from 'react';
 import { MdCreateNewFolder } from 'react-icons/md';
 import { ResourceType } from '@notespace/shared/src/workspace/types/resource';
 import { BsFileEarmarkPlusFill } from 'react-icons/bs';
 
-type CreateResourceContextMenuProps = {
+type CreateResourceMenuProps = {
   onCreateNew: (type: ResourceType) => void;
   trigger: string;
-  children: ReactNode;
 };
 
-function CreateResourceContextMenu({ children, onCreateNew, trigger }: CreateResourceContextMenuProps) {
+function CreateResourceMenu({ onCreateNew, trigger }: CreateResourceMenuProps) {
   return (
-    <PopupMenu item={children} trigger={trigger}>
+    <PopupMenu item={<></>} trigger={trigger}>
       <button onClick={() => onCreateNew(ResourceType.FOLDER)}>
         <MdCreateNewFolder />
         Folder
@@ -25,4 +23,4 @@ function CreateResourceContextMenu({ children, onCreateNew, trigger }: CreateRes
   );
 }
 
-export default CreateResourceContextMenu;
+export default CreateResourceMenu;
diff --git a/code/client/src/ui/components/sidebar/components/CreateResourcePopup.tsx b/code/client/src/ui/components/sidebar/components/CreateResourcePopup.tsx