Merge branch 'tom/socket-refactor'

app/hooks/useAuthorizedSettingsConfig.ts

@@ -69,7 +69,7 @@ type ConfigType = {
 
 const useAuthorizedSettingsConfig = () => {
   const team = useCurrentTeam();
-  const can = usePolicy(team.id);
+  const can = usePolicy(team);
   const { t } = useTranslation();
 
   const config: ConfigType = React.useMemo(

app/hooks/usePolicy.ts

@@ -1,12 +1,34 @@
+import * as React from "react";
+import BaseModel from "~/models/BaseModel";
 import useStores from "./useStores";
 
 /**
- * Quick access to retrieve the abilities of a policy for a given entity
+ * Retrieve the abilities of a policy for a given entity, if the policy is not
+ * located in the store, it will be fetched from the server.
  *
- * @param entityId The entity id
- * @returns The available abilities
+ * @param entity The model or model id
+ * @returns The policy for the model
  */
-export default function usePolicy(entityId: string) {
+export default function usePolicy(entity: string | BaseModel | undefined) {
   const { policies } = useStores();
+  const triggered = React.useRef(false);
+  const entityId = entity
+    ? typeof entity === "string"
+      ? entity
+      : entity.id
+    : "";
+
+  React.useEffect(() => {
+    if (entity && typeof entity !== "string") {
+      // The policy for this model is missing and we haven't tried to fetch it
+      // yet, go ahead and do that now. The force flag is needed otherwise the
+      // network request will be skipped due to the model existing in the store
+      if (!policies.get(entity.id) && !triggered.current) {
+        triggered.current = true;
+        void entity.store.fetch(entity.id, { force: true });
+      }
+    }
+  }, [policies, entity]);
+
   return policies.abilities(entityId);
 }