#891 Hide various edit elements when user doesn't have write permissions

Author: Polleps

browser/data-browser/src/components/SideBar/ResourceSideBar/DropEdge.tsx

@@ -3,6 +3,7 @@ import { styled } from 'styled-components';
 import { useState } from 'react';
 import { transition } from '../../../helpers/transition';
 import { SideBarDropData } from '../useSidebarDnd';
+import { useCanWrite, useResource } from '@tomic/react';
 
 interface DropEdgeProps {
   parentHierarchy: string[];
@@ -21,6 +22,9 @@ export function DropEdge({
 
   const parent = parentHierarchy.at(-1)!;
 
+  const parentResource = useResource(parent);
+
+  const [canWrite] = useCanWrite(parentResource);
   useDndMonitor({
     onDragStart: event => setDraggingSubject(event.active.id as string),
     onDragEnd: () => setDraggingSubject(undefined),
@@ -36,6 +40,10 @@ export function DropEdge({
     data,
   });
 
+  if (!canWrite) {
+    return <></>;
+  }
+
   const shouldRender =
     !!activeDraggedSubject && !parentHierarchy.includes(activeDraggedSubject);
 

browser/data-browser/src/components/SideBar/ResourceSideBar/FloatingActions.tsx

@@ -1,4 +1,4 @@
-import { useResource, useTitle } from '@tomic/react';
+import { useCanWrite, useResource, useTitle } from '@tomic/react';
 import { useState } from 'react';
 import { FaEllipsisV, FaPlus } from 'react-icons/fa';
 import { styled, css } from 'styled-components';
@@ -20,18 +20,21 @@ export function FloatingActions({
   const parentResource = useResource(subject);
   const [parentName] = useTitle(parentResource);
   const [dropdownActive, setDropdownActive] = useState(false);
+  const [canWrite] = useCanWrite(parentResource);
 
   const handleAddClick = useNewRoute(subject);
 
   return (
     <Wrapper className={className} dropdownActive={dropdownActive}>
-      <IconButton
-        data-test='add-subresource'
-        onClick={handleAddClick}
-        title={`Create new resource under ${parentName}`}
-      >
-        <FaPlus />
-      </IconButton>
+      {canWrite && (
+        <IconButton
+          data-test='add-subresource'
+          onClick={handleAddClick}
+          title={`Create new resource under ${parentName}`}
+        >
+          <FaPlus />
+        </IconButton>
+      )}
       <ResourceContextMenu
         simple
         subject={subject}

browser/data-browser/src/components/SideBar/ResourceSideBar/ResourceSideBar.tsx

@@ -1,5 +1,13 @@
 import { Fragment, useEffect, useMemo, useState } from 'react';
-import { useString, useResource, useTitle, urls, useArray } from '@tomic/react';
+import {
+  useString,
+  useResource,
+  useTitle,
+  useArray,
+  useCanWrite,
+  core,
+  dataBrowser,
+} from '@tomic/react';
 import { useCurrentSubject } from '../../../helpers/useCurrentSubject';
 import { SideBarItem } from '../SideBarItem';
 import { AtomicLink } from '../../AtomicLink';
@@ -38,12 +46,15 @@ export function ResourceSideBar({
   const resource = useResource(subject, { allowIncomplete: true });
   const [currentUrl] = useCurrentSubject();
   const [title] = useTitle(resource);
-  const [description] = useString(resource, urls.properties.description);
-
+  const [description] = useString(resource, core.properties.description);
+  const [canWrite] = useCanWrite(resource);
   const active = currentUrl === subject;
   const [open, setOpen] = useState(active);
 
-  const [subResources] = useArray(resource, urls.properties.subResources);
+  const [subResources] = useArray(
+    resource,
+    dataBrowser.properties.subResources,
+  );
   const hasSubResources = subResources.length > 0;
 
   const dragData: SideBarDragData = {
@@ -59,6 +70,7 @@ export function ResourceSideBar({
   } = useDraggable({
     id: subject,
     data: dragData,
+    disabled: !canWrite,
   });
 
   const isDragging = draggingNode?.id === subject;

browser/data-browser/src/components/WarningBlock.tsx

@@ -0,0 +1,22 @@
+import type { PropsWithChildren } from 'react';
+import { styled } from 'styled-components';
+import { lighten } from 'polished';
+
+export function WarningBlock({
+  children,
+}: PropsWithChildren): React.JSX.Element {
+  return <Wrapper>{children}</Wrapper>;
+}
+
+const Wrapper = styled.div`
+  background-color: ${p => lighten(0.2, p.theme.colors.warning)};
+  border: 2px solid ${p => p.theme.colors.warning};
+  border-radius: ${p => p.theme.radius};
+  padding: 1rem;
+`;
+
+WarningBlock.Title = styled.p`
+  font-weight: bold;
+  color: ${p => lighten(-1, p.theme.colors.warning)};
+  margin-bottom: 0px;
+`;

browser/data-browser/src/routes/SettingsAgent.tsx

@@ -17,8 +17,9 @@ import { ContainerNarrow } from '../components/Containers';
 import { AtomicLink } from '../components/AtomicLink';
 import { editURL } from '../helpers/navigation';
 import { useNavigate } from 'react-router';
-import { ErrorLook } from '../components/ErrorLook';
 import { Main } from '../components/Main';
+import { Column } from '../components/Row';
+import { WarningBlock } from '../components/WarningBlock';
 
 const SettingsAgent: React.FunctionComponent = () => {
   const { agent, setAgent } = useSettings();
@@ -142,26 +143,26 @@ const SettingsAgent: React.FunctionComponent = () => {
             Key. Together, these can be used to edit data and sign Commits.
           </p>
           {agent ? (
-            <>
+            <Column>
               {agent.subject?.startsWith('http://localhost') && (
-                <p>
-                  <ErrorLook>Warning:</ErrorLook>
+                <WarningBlock>
+                  <WarningBlock.Title>Warning:</WarningBlock.Title>
                   {
                     "You're using a local Agent, which cannot authenticate on other domains, because its URL does not resolve."
                   }
-                </p>
+                </WarningBlock>
               )}
-              <LabelStyled>
-                <FaUser /> You{"'"}re signed in as
-              </LabelStyled>
-              <p>
+              <div>
+                <LabelStyled>
+                  <FaUser /> You{"'"}re signed in as
+                </LabelStyled>
                 <ResourceInline subject={agent.subject!} />
-              </p>
+              </div>
               <Button onClick={() => navigate(editURL(agent.subject!))}>
                 Edit profile
               </Button>
               <Margin />
-            </>
+            </Column>
           ) : (
             <p>
               You can create your own Agent by hosting an{' '}

browser/data-browser/src/views/BookmarkPage/BookmarkPage.tsx

@@ -1,6 +1,6 @@
 import { ResourcePageProps } from '../ResourcePage';
 import { useCallback } from 'react';
-import { urls, useString } from '@tomic/react';
+import { urls, useCanWrite, useString } from '@tomic/react';
 import { EditableTitle } from '../../components/EditableTitle';
 import { styled } from 'styled-components';
 import { ContainerFull, ContainerNarrow } from '../../components/Containers';
@@ -20,6 +20,8 @@ export function BookmarkPage({ resource }: ResourcePageProps): JSX.Element {
 
   const { preview, error, update, loading } = usePreview(resource);
 
+  const [canWrite] = useCanWrite(resource);
+
   const handleUrlChange = useCallback(
     async (e: React.ChangeEvent<HTMLInputElement>) => {
       await setUrl(e.target.value);
@@ -43,6 +45,7 @@ export function BookmarkPage({ resource }: ResourcePageProps): JSX.Element {
                     placeholder='https://example.com'
                     value={url}
                     onChange={handleUrlChange}
+                    disabled={!canWrite}
                   />
                 </InputWrapper>
               </FieldWrapper>

browser/data-browser/src/views/ChatRoomPage.tsx

@@ -4,6 +4,7 @@ import {
   dataBrowser,
   getTimestampNow,
   useArray,
+  useCanWrite,
   useResource,
   useStore,
   useString,
@@ -188,6 +189,7 @@ const Message = memo(function Message({ subject, setReplyTo }: MessageProps) {
   const [lastCommit] = useSubject(resource, commits.properties.lastCommit);
   const [replyTo] = useSubject(resource, dataBrowser.properties.replyTo);
   const navigate = useNavigate();
+  const [canWrite] = useCanWrite(resource);
 
   function handleCopyUrl() {
     navigator.clipboard.writeText(subject);
@@ -205,14 +207,16 @@ const Message = memo(function Message({ subject, setReplyTo }: MessageProps) {
         <CommitDetail commitSubject={lastCommit!} />
         {replyTo && <MessageLine subject={replyTo} />}
         <MessageActions>
-          <Button
-            icon
-            subtle
-            onClick={() => navigate(editURL(subject))}
-            title='Edit message'
-          >
-            <FaPencilAlt />
-          </Button>
+          {canWrite && (
+            <Button
+              icon
+              subtle
+              onClick={() => navigate(editURL(subject))}
+              title='Edit message'
+            >
+              <FaPencilAlt />
+            </Button>
+          )}
           <Button
             icon
             subtle

browser/data-browser/src/views/DocumentPage.tsx

@@ -361,20 +361,23 @@ function DocumentPageShow({
   setEditMode,
 }: DocumentSubPageProps): JSX.Element {
   const [elements] = useArray(resource, dataBrowser.properties.elements);
+  const [canWrite] = useCanWrite(resource);
 
   return (
     <>
       <div style={{ display: 'flex', flexDirection: 'row' }}>
         <h1 style={{ flex: 1 }}>{resource.title}</h1>
-        <Button
-          data-test='document-edit'
-          icon
-          subtle
-          onClick={() => setEditMode(true)}
-          title='Edit mode'
-        >
-          <FaEdit />
-        </Button>
+        {canWrite && (
+          <Button
+            data-test='document-edit'
+            icon
+            subtle
+            onClick={() => setEditMode(true)}
+            title='Edit mode'
+          >
+            <FaEdit />
+          </Button>
+        )}
       </div>
       {elements.map(subject => (
         <ElementShow subject={subject} key={subject} />