fix: Assorted fixes from group memberships branch (tom/document-group-permissions)

app/components/DocumentBreadcrumb.tsx

@@ -8,6 +8,7 @@ import Document from "~/models/Document";
 import Breadcrumb from "~/components/Breadcrumb";
 import Icon from "~/components/Icon";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
+import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import { MenuInternalLink } from "~/types";
 import {
@@ -67,6 +68,7 @@ const DocumentBreadcrumb: React.FC<Props> = ({
   const collection = document.collectionId
     ? collections.get(document.collectionId)
     : undefined;
+  const can = usePolicy(collection);
 
   React.useEffect(() => {
     void document.loadRelations();
@@ -74,7 +76,7 @@ const DocumentBreadcrumb: React.FC<Props> = ({
 
   let collectionNode: MenuInternalLink | undefined;
 
-  if (collection) {
+  if (collection && can.readDocument) {
     collectionNode = {
       type: "route",
       title: collection.name,

app/components/PlaceholderText.tsx

@@ -5,8 +5,9 @@ import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 import { pulsate } from "~/styles/animations";
 
-export type Props = {
+export type Props = React.ComponentProps<typeof Flex> & {
   header?: boolean;
+  width?: number;
   height?: number;
   minWidth?: number;
   maxWidth?: number;
@@ -17,16 +18,22 @@ function PlaceholderText({ minWidth, maxWidth, ...restProps }: Props) {
   // We only want to compute the width once so we are storing it inside ref
   const widthRef = React.useRef(randomInteger(minWidth || 75, maxWidth || 100));
 
-  return <Mask width={widthRef.current} {...restProps} />;
+  return (
+    <Mask
+      width={`${widthRef.current / (restProps.header ? 2 : 1)}%`}
+      {...restProps}
+    />
+  );
 }
 
 const Mask = styled(Flex)<{
-  width: number;
+  width: number | string;
   height?: number;
   delay?: number;
   header?: boolean;
 }>`
-  width: ${(props) => (props.header ? props.width / 2 : props.width)}%;
+  width: ${(props) =>
+    typeof props.width === "number" ? `${props.width}px` : props.width};
   height: ${(props) =>
     props.height ? props.height : props.header ? 24 : 18}px;
   margin-bottom: 6px;

app/models/base/Model.ts

@@ -58,7 +58,10 @@ export default abstract class Model {
         properties.relationClassResolver().modelName
       );
       if ("fetch" in store) {
-        promises.push(store.fetch(this[properties.idKey]));
+        const id = this[properties.idKey];
+        if (id) {
+          promises.push(store.fetch(id));
+        }
       }
     }
 

app/scenes/Collection/index.tsx

@@ -113,10 +113,7 @@ function CollectionScene() {
     void fetchData();
   }, [collections, isFetching, collection, error, id, can]);
 
-  useCommandBarActions(
-    [editCollection],
-    ui.activeCollectionId ? [ui.activeCollectionId] : undefined
-  );
+  useCommandBarActions([editCollection], [ui.activeCollectionId ?? "none"]);
 
   if (!collection && error) {
     return <Search notFound />;

app/stores/base/Store.ts

@@ -104,6 +104,11 @@ export default abstract class Store<T extends Model> {
 
   @action
   remove(id: string): void {
+    const model = this.data.get(id);
+    if (!model) {
+      return;
+    }
+
     const inverseRelations = getInverseRelationsForModelClass(this.model);
 
     inverseRelations.forEach((relation) => {
@@ -134,12 +139,9 @@ export default abstract class Store<T extends Model> {
       this.rootStore.policies.remove(id);
     }
 
-    const model = this.data.get(id);
-    if (model) {
-      LifecycleManager.executeHooks(model.constructor, "beforeRemove", model);
-      this.data.delete(id);
-      LifecycleManager.executeHooks(model.constructor, "afterRemove", model);
-    }
+    LifecycleManager.executeHooks(model.constructor, "beforeRemove", model);
+    this.data.delete(id);
+    LifecycleManager.executeHooks(model.constructor, "afterRemove", model);
   }
 
   /**