User immer, Disable share permission in Space header

Author: dineshsingh1

apps/webapp/src/Components/EditorInfobar/Metadata.tsx

@@ -12,7 +12,6 @@ import { DataGroup, DataWrapper, MetadataWrapper } from '@mexit/shared'
 import { RelativeTime } from '@mexit/shared'
 
 import { useMentions } from '../../Hooks/useMentions'
-import { usePermissions } from '../../Hooks/usePermissions'
 import { useContentStore } from '../../Stores/useContentStore'
 import { useEditorStore } from '../../Stores/useEditorStore'
 import { useMentionStore } from '../../Stores/useMentionsStore'
@@ -53,7 +52,6 @@ const Metadata = ({
   const mentionable = useMentionStore((s) => s.mentionable)
   const activeUsers = useRouteStore((s) => s.routes[location.pathname]?.users ?? [])
   const { getSharedUsersOfNodeOfSpace } = useMentions()
-  const { accessWhenShared } = usePermissions()
 
   const isEmpty =
     metadata &&

apps/webapp/src/Components/Mentions/PermissionModal.tsx

@@ -15,7 +15,7 @@ import { useNodeShareAPI } from '../../Hooks/API/useNodeShareAPI'
 import { useFetchShareData } from '../../Hooks/useFetchShareData'
 import { getAccessValue, useMentions } from '../../Hooks/useMentions'
 import { useNamespaces } from '../../Hooks/useNamespaces'
-import { compareAccessLevel, getUserAccess, usePermissions } from '../../Hooks/usePermissions'
+import { getUserAccess, usePermissions } from '../../Hooks/usePermissions'
 import { useAuthStore } from '../../Stores/useAuth'
 import { useEditorStore } from '../../Stores/useEditorStore'
 import { useMentionStore } from '../../Stores/useMentionsStore'
@@ -86,7 +86,7 @@ export const PermissionModalContent = () => {
   useEffect(() => {
     if (open) {
       // Fetch all user details for the space
-      fetchSharedUsers(id, 'space')
+      fetchSharedUsers(context === 'space' ? id : node.namespace, 'space')
     }
   }, [open, context, id])
 

apps/webapp/src/Components/Sidebar/Space/header.tsx

@@ -109,9 +109,16 @@ const Header = ({ space, readOnly }: { space: SidebarSpace; readOnly?: boolean }
   const isNamespaceIconDisabled = isNamespaceReserved || isNamespaceReadonly || readOnly
   const isShared = space?.data?.granterID !== undefined
   const isReadonly = space?.data?.access === 'READ'
+  const isWriteOnly = space?.data?.access === 'WRITE'
   const showTags = space?.popularTags && space?.popularTags.length > 0
   const showSeparator = showTags
 
+  const shareSpaceTooltip = () => {
+    if (isWriteOnly) return "You don't have share permission"
+    if (isReadonly) return 'You can only read the contents!'
+    return 'Share Space'
+  }
+
   return (
     <>
       <SpaceHeader>
@@ -135,9 +142,10 @@ const Header = ({ space, readOnly }: { space: SidebarSpace; readOnly?: boolean }
           </SpaceTitle>
           {!isNamespaceReserved && (
             <IconButton
-              highlight={isShared && !isReadonly}
-              title={isReadonly ? 'You can only read the contents!' : 'Share Space'}
+              highlight={isShared && !isReadonly && !isWriteOnly}
+              title={shareSpaceTooltip()}
               icon={isReadonly ? 'ri:eye-line' : 'ri:share-line'}
+              disabled={isWriteOnly}
               onClick={isReadonly ? undefined : onShareSpace}
             />
           )}

apps/webapp/src/Stores/useRouteStore.ts

@@ -34,8 +34,11 @@ const useRouteStore = create<RouteStoreType>(
       routes: {},
       setRoute: (routes) => set({ routes }),
       addRouteInfo: (route, info) => {
-        const routes = get().routes
-        set({ routes: { ...routes, [route]: info } })
+        set(
+          produce((draft) => {
+            draft.routes[route] = info
+          })
+        )
       },
       removePreviousRouteInfo: () => {
         const routes = get().routes
@@ -55,22 +58,23 @@ const useRouteStore = create<RouteStoreType>(
         if (routes[route]) {
           const users = routes[route].users
           const banners = routes[route].banners
-          set({
-            routes: {
-              ...routes,
-              [route]: {
-                users: [...users, userId],
-                banners: [...banners.filter((f) => f !== BannerType.editor), BannerType.editor]
-              }
-            }
-          })
+          set(
+            produce((draft) => {
+              draft.routes[route]['users'] = [...users, userId]
+              draft.routes[route]['banners'] = [...banners.filter((f) => f !== BannerType.editor), BannerType.editor]
+            })
+          )
         } else {
           const routeInfo: RouteInformation = {
             users: [userId],
             banners: [BannerType.editor]
           }
 
-          set({ routes: { ...routes, [route]: routeInfo } })
+          set(
+            produce((draft) => {
+              draft.routes[route] = routeInfo
+            })
+          )
         }
       },
       removeUserFromRoute: (route, userId) => {

libs/shared/src/Style/Buttons.tsx

@@ -41,26 +41,12 @@ export const Button = styled.button<ButtonProps>`
   }
 
   &:disabled {
-    background-color: ${({ theme }) => theme.colors.form.button.bg};
+    /* background-color: ${({ theme }) => theme.colors.form.button.bg}; */
     color: ${({ theme }) => transparentize(0.5, theme.colors.form.button.fg)};
     cursor: not-allowed;
     pointer-events: none;
   }
 
-  ${({ primary, transparent, theme }) =>
-    !primary &&
-    transparent &&
-    css`
-      background-color: transparent;
-      &:hover {
-        background-color: ${theme.colors.form.button.bg};
-      }
-      &:disabled {
-        background-color: ${({ theme }) => theme.colors.gray[6]};
-        cursor: default;
-      }
-    `}
-
   ${({ theme: { spacing }, large }) =>
     large
       ? css`
@@ -108,6 +94,20 @@ export const Button = styled.button<ButtonProps>`
           }
         `
       : ''}
+
+       ${({ primary, transparent, theme }) =>
+    !primary &&
+    transparent &&
+    css`
+      background-color: transparent;
+      &:hover {
+        background-color: ${theme.colors.form.button.bg};
+      }
+      &:disabled {
+        background-color: ${({ theme }) => theme.colors.gray[6]};
+        cursor: default;
+      }
+    `}
 `
 
 export type IconButtonProps = {
@@ -147,14 +147,16 @@ export const IconButton = ({
       }
       singleton={singleton}
     >
-      <Button
-        transparent={transparent !== undefined ? transparent : true}
-        disabled={disabled}
-        onClick={onClick}
-        highlight={highlight}
-      >
-        <Icon color={color} icon={icon} height={size} />
-      </Button>
+      <span>
+        <Button
+          transparent={transparent !== undefined ? transparent : true}
+          disabled={disabled}
+          onClick={onClick}
+          highlight={highlight}
+        >
+          <Icon color={color} icon={icon} height={size} />
+        </Button>
+      </span>
     </ToolbarTooltip>
   )
 }