@overmap-ai/core 1.0.43-projects-licensing.5 → 1.0.43-tiptap.1

package/dist/overmap-core.umd.cjs

@@ -1505,8 +1505,44 @@ var __publicField = (obj, key, value) => {
     return hiddenCategoryCount;
   };
   const categoryReducer = categorySlice.reducer;
+  function setAttachments(state, action) {
+    for (const attachment of action.payload) {
+      state.attachments[attachment.offline_id] = attachment;
+    }
+  }
+  function addAttachment(state, action) {
+    if (action.payload.offline_id in state.attachments) {
+      throw new Error(`Attachment ${action.payload.offline_id} already exists.`);
+    }
+    state.attachments[action.payload.offline_id] = action.payload;
+  }
+  function addAttachments(state, action) {
+    for (const attachment of action.payload) {
+      state.attachments[attachment.offline_id] = attachment;
+    }
+  }
+  function updateAttachment(state, action) {
+    if (action.payload.offline_id in state.attachments) {
+      state.attachments[action.payload.offline_id] = action.payload;
+    } else {
+      throw new Error(`Attachment ${action.payload.offline_id} does not exist.`);
+    }
+  }
+  function removeAttachment(state, action) {
+    if (action.payload in state.attachments) {
+      delete state.attachments[action.payload];
+    } else {
+      throw new Error(`Attachment ${action.payload} does not exist.`);
+    }
+  }
+  function removeAttachments(state, action) {
+    for (const attachmentId of action.payload) {
+      delete state.attachments[attachmentId];
+    }
+  }
   const initialState$k = {
-    components: {}
+    components: {},
+    attachments: {}
   };
   const componentSlice = toolkit.createSlice({
     name: "components",
@@ -1525,6 +1561,12 @@ var __publicField = (obj, key, value) => {
         state.components = toOfflineIdRecord(action.payload);
         prevComponents = null;
       },
+      setComponentAttachments: setAttachments,
+      addComponentAttachment: addAttachment,
+      addComponentAttachments: addAttachments,
+      updateComponentAttachment: updateAttachment,
+      removeComponentAttachment: removeAttachment,
+      removeComponentAttachments: removeAttachments,
       updateComponent: (state, action) => {
         if (action.payload.offline_id in state.components) {
           state.components[action.payload.offline_id] = action.payload;
@@ -1614,12 +1656,48 @@ var __publicField = (obj, key, value) => {
       return acc;
     }, []);
   };
+  const selectComponentAttachmentMapping = (state) => state.componentReducer.attachments;
+  const selectAllComponentAttachments = toolkit.createSelector(
+    [selectComponentAttachmentMapping],
+    (mapping) => Object.values(mapping)
+  );
+  const selectAttachmentsOfComponent = restructureCreateSelectorWithArgs(
+    toolkit.createSelector(
+      [selectAllComponentAttachments, (_state, componentId) => componentId],
+      (attachments, componentId) => {
+        return attachments.filter(({ component }) => componentId === component);
+      }
+    )
+  );
+  const selectAttachmentsOfComponentByType = restructureCreateSelectorWithArgs(
+    toolkit.createSelector(
+      [selectAllComponentAttachments, (_state, componentId) => componentId],
+      (attachments, componentId) => {
+        const attachmentsOfComponent = attachments.filter(({ component }) => componentId === component);
+        const fileAttachments = attachmentsOfComponent.filter(
+          // this null check here is necessary, there are cases where file_type is null or undefined
+          ({ file_type }) => !file_type || !file_type.startsWith("image/")
+        );
+        const imageAttachments = attachmentsOfComponent.filter(
+          // this null check here is necessary, there are cases where file_type is null or undefined
+          ({ file_type }) => file_type && file_type.startsWith("image/")
+        );
+        return { fileAttachments, imageAttachments };
+      }
+    )
+  );
   const {
     addComponent,
     updateComponent,
     removeComponent,
     addComponentsInBatches,
     setComponents,
+    setComponentAttachments,
+    addComponentAttachment,
+    addComponentAttachments,
+    updateComponentAttachment,
+    removeComponentAttachment,
+    removeComponentAttachments,
     removeAllComponentsOfType
   } = componentSlice.actions;
   const componentReducer = componentSlice.reducer;
@@ -1779,7 +1857,8 @@ var __publicField = (obj, key, value) => {
   const componentStageReducer = componentStageSlice.reducer;
   const initialState$h = {
     componentTypes: {},
-    hiddenComponentTypeIds: {}
+    hiddenComponentTypeIds: {},
+    attachments: {}
   };
   const componentTypeSlice = toolkit.createSlice({
     name: "componentTypes",
@@ -1792,6 +1871,12 @@ var __publicField = (obj, key, value) => {
       setComponentTypes: (state, action) => {
         state.componentTypes = toOfflineIdRecord(action.payload);
       },
+      setComponentTypeAttachments: setAttachments,
+      addComponentTypeAttachment: addAttachment,
+      addComponentTypeAttachments: addAttachments,
+      updateComponentTypeAttachment: updateAttachment,
+      removeComponentTypeAttachment: removeAttachment,
+      removeComponentTypeAttachments: removeAttachments,
       toggleComponentTypeVisibility: (state, action) => {
         state.hiddenComponentTypeIds[action.payload] = !state.hiddenComponentTypeIds[action.payload];
       },
@@ -1841,7 +1926,50 @@ var __publicField = (obj, key, value) => {
     )
   );
   const selectHiddenComponentTypeIds = (state) => state.componentTypeReducer.hiddenComponentTypeIds;
-  const { addComponentType, setComponentTypes, toggleComponentTypeVisibility, deleteComponentType } = componentTypeSlice.actions;
+  const selectComponentTypeAttachmentMapping = (state) => state.componentTypeReducer.attachments;
+  const selectAllComponentTypeAttachments = toolkit.createSelector(
+    [selectComponentTypeAttachmentMapping],
+    (mapping) => Object.values(mapping)
+  );
+  const selectAttachmentsOfComponentType = restructureCreateSelectorWithArgs(
+    toolkit.createSelector(
+      [selectAllComponentTypeAttachments, (_state, componentTypeId) => componentTypeId],
+      (attachments, componentTypeId) => {
+        return attachments.filter(({ component_type }) => componentTypeId === component_type);
+      }
+    )
+  );
+  const selectAttachmentsOfComponentTypeByType = restructureCreateSelectorWithArgs(
+    toolkit.createSelector(
+      [selectAllComponentTypeAttachments, (_state, componentTypeId) => componentTypeId],
+      (attachments, componentTypeId) => {
+        const attachmentsOfComponent = attachments.filter(
+          ({ component_type }) => component_type === componentTypeId
+        );
+        const fileAttachments = attachmentsOfComponent.filter(
+          // this null check here is necessary, there are cases where file_type is null or undefined
+          ({ file_type }) => !file_type || !file_type.startsWith("image/")
+        );
+        const imageAttachments = attachmentsOfComponent.filter(
+          // this null check here is necessary, there are cases where file_type is null or undefined
+          ({ file_type }) => file_type && file_type.startsWith("image/")
+        );
+        return { fileAttachments, imageAttachments };
+      }
+    )
+  );
+  const {
+    addComponentType,
+    setComponentTypes,
+    setComponentTypeAttachments,
+    addComponentTypeAttachment,
+    addComponentTypeAttachments,
+    updateComponentTypeAttachment,
+    removeComponentTypeAttachment,
+    removeComponentTypeAttachments,
+    toggleComponentTypeVisibility,
+    deleteComponentType
+  } = componentTypeSlice.actions;
   const componentTypeReducer = componentTypeSlice.reducer;
   const initialState$g = {
     workspaces: {},
@@ -1931,11 +2059,7 @@ var __publicField = (obj, key, value) => {
         });
       },
       // TODO: Reusable function
-      setAttachments: (state, action) => {
-        for (const attachment of action.payload) {
-          state.attachments[attachment.offline_id] = attachment;
-        }
-      },
+      setIssueAttachments: setAttachments,
       setActiveIssueId: (state, action) => {
         state.activeIssueId = action.payload;
       },
@@ -1946,17 +2070,8 @@ var __publicField = (obj, key, value) => {
         state.issues[action.payload.offline_id] = action.payload;
       },
       // TODO: Reusable function
-      addAttachment: (state, action) => {
-        if (action.payload.offline_id in state.attachments) {
-          throw new Error(`Attachment ${action.payload.offline_id} already exists.`);
-        }
-        state.attachments[action.payload.offline_id] = action.payload;
-      },
-      addAttachments: (state, action) => {
-        for (const attachment of action.payload) {
-          state.attachments[attachment.offline_id] = attachment;
-        }
-      },
+      addIssueAttachment: addAttachment,
+      addIssueAttachments: addAttachments,
       updateIssue: (state, action) => {
         if (action.payload.offline_id in state.issues) {
           state.issues[action.payload.offline_id] = {
@@ -1968,13 +2083,7 @@ var __publicField = (obj, key, value) => {
         }
       },
       // TODO: Reusable function
-      updateAttachment: (state, action) => {
-        if (action.payload.offline_id in state.attachments) {
-          state.attachments[action.payload.offline_id] = action.payload;
-        } else {
-          throw new Error(`Attachment ${action.payload.offline_id} does not exist.`);
-        }
-      },
+      updateIssueAttachment: updateAttachment,
       removeIssue: (state, action) => {
         if (action.payload in state.issues) {
           delete state.issues[action.payload];
@@ -1982,15 +2091,9 @@ var __publicField = (obj, key, value) => {
           throw new Error(`Failed to remove issue because ID doesn't exist: ${action.payload}`);
         }
       },
-      removeAttachment: (state, action) => {
-        if (action.payload in state.attachments) {
-          delete state.attachments[action.payload];
-        } else {
-          throw new Error(`Attachment ${action.payload} does not exist.`);
-        }
-      },
+      removeIssueAttachment: removeAttachment,
       removeAttachmentsOfIssue: (state, action) => {
-        const attachments = Object.values(state.attachments).filter((a) => a.issue_id === action.payload);
+        const attachments = Object.values(state.attachments).filter((a) => a.issue === action.payload);
         for (const attachment of attachments) {
           delete state.attachments[attachment.offline_id];
         }
@@ -2042,25 +2145,25 @@ var __publicField = (obj, key, value) => {
     }
   });
   const {
-    addAttachment,
-    addAttachments,
+    addIssueAttachment,
+    addIssueAttachments,
     addIssue,
     addOrReplaceIssueComment,
     addToRecentIssues,
     cleanRecentIssues,
-    removeAttachment,
+    removeIssueAttachment,
     removeAttachmentsOfIssue,
     removeIssue,
     removeIssueComment,
     removeRecentIssue,
     resetRecentIssues,
     setActiveIssueId,
-    setAttachments,
+    setIssueAttachments,
     setIssueComments,
     setIssues,
     setVisibleStatuses,
     setVisibleUserIds,
-    updateAttachment,
+    updateIssueAttachment,
     updateIssue
   } = issueSlice.actions;
   const selectIssueMapping = (state) => state.issueReducer.issues;
@@ -2120,10 +2223,8 @@ var __publicField = (obj, key, value) => {
     toolkit.createSelector(
       [selectIssueAttachmentMapping, (_state, issueId) => issueId],
       (attachmentMapping, issueId) => {
-        if (!issueId)
-          return void 0;
         return Object.values(attachmentMapping).filter(
-          (attachment) => attachment.issue_id === issueId && attachment.file_type && attachment.file_type.startsWith("image/")
+          (attachment) => attachment.issue === issueId && attachment.file_type && attachment.file_type.startsWith("image/")
         );
       }
     )
@@ -2134,6 +2235,31 @@ var __publicField = (obj, key, value) => {
       return Object.values(commentMapping).filter((comment) => comment.issue === issueId);
     })
   );
+  const selectAttachmentsOfIssue = restructureCreateSelectorWithArgs(
+    toolkit.createSelector(
+      [selectIssueAttachments, (_state, issueId) => issueId],
+      (attachments, issueId) => {
+        return attachments.filter(({ issue }) => issueId === issue);
+      }
+    )
+  );
+  const selectAttachmentsOfIssueByType = restructureCreateSelectorWithArgs(
+    toolkit.createSelector(
+      [selectIssueAttachments, (_state, issueId) => issueId],
+      (attachments, issueId) => {
+        const attachmentsOfIssue = attachments.filter(({ issue }) => issue === issueId);
+        const fileAttachments = attachmentsOfIssue.filter(
+          // this null check here is necessary, there are cases where file_type is null or undefined
+          ({ file_type }) => !file_type || !file_type.startsWith("image/")
+        );
+        const imageAttachments = attachmentsOfIssue.filter(
+          // this null check here is necessary, there are cases where file_type is null or undefined
+          ({ file_type }) => file_type && file_type.startsWith("image/")
+        );
+        return { fileAttachments, imageAttachments };
+      }
+    )
+  );
   const selectFileAttachmentsOfIssue = restructureCreateSelectorWithArgs(
     toolkit.createSelector(
       [selectIssueAttachmentMapping, (_state, issueId) => issueId],
@@ -2143,7 +2269,7 @@ var __publicField = (obj, key, value) => {
         return Object.values(attachmentMapping).filter(
           (attachment) => (
             // Files with file_type that is null or not an image file
-            attachment.issue_id === issueId && (!attachment.file_type || !attachment.file_type.startsWith("image/"))
+            attachment.issue === issueId && (!attachment.file_type || !attachment.file_type.startsWith("image/"))
           )
         );
       }
@@ -4072,12 +4198,50 @@ var __publicField = (obj, key, value) => {
         blocks: [],
         blockers: []
       });
-      const allAttachments = Object.values(this.client.store.getState().issueReducer.attachments);
+      const allAttachments = {
+        issue_attachments: Object.values(this.client.store.getState().issueReducer.attachments),
+        component_attachments: Object.values(this.client.store.getState().componentReducer.attachments),
+        component_type_attachments: Object.values(this.client.store.getState().componentTypeReducer.attachments)
+      };
       return [allAttachments, promise];
     }
     // Attachments aren't models, so we use the OptimisticGenericResult type instead
-    async add(attachmentPayload) {
-      const { description: description2, issue_id, file_sha1, offline_id } = attachmentPayload;
+    async addIssueAttachment(attachmentPayload) {
+      const { description: description2, issue, file_sha1, offline_id } = attachmentPayload;
+      if (!attachmentPayload.file.objectURL) {
+        throw new Error("Expected attachmentPayload.file.objectURL to be defined.");
+      }
+      const offlineAttachment = {
+        ...attachmentPayload,
+        file: attachmentPayload.file.objectURL,
+        file_name: attachmentPayload.file.name,
+        file_type: attachmentPayload.file.type
+      };
+      await this.client.files.addCache(attachmentPayload.file, file_sha1);
+      this.client.store.dispatch(addIssueAttachment(offlineAttachment));
+      const [fileProps] = await this.client.files.uploadFileToS3(file_sha1);
+      const promise = this.enqueueRequest({
+        description: "Create attachment",
+        method: HttpMethod.POST,
+        url: `/issues/${issue}/attach/`,
+        blocks: [offline_id, issue],
+        blockers: [file_sha1],
+        payload: {
+          offline_id,
+          issue,
+          description: description2 ?? "",
+          submitted_at: (/* @__PURE__ */ new Date()).getTime() / 1e3,
+          ...fileProps
+        }
+      });
+      promise.catch((error2) => {
+        this.client.store.dispatch(removeIssueAttachment(offlineAttachment.offline_id));
+        throw error2;
+      });
+      return [offlineAttachment, promise];
+    }
+    async addComponentAttachment(attachmentPayload) {
+      const { description: description2, component, file_sha1, offline_id } = attachmentPayload;
       if (!attachmentPayload.file.objectURL) {
         throw new Error("Expected attachmentPayload.file.objectURL to be defined.");
       }
@@ -4088,45 +4252,123 @@ var __publicField = (obj, key, value) => {
         file_type: attachmentPayload.file.type
       };
       await this.client.files.addCache(attachmentPayload.file, file_sha1);
-      this.client.store.dispatch(addAttachment(offlineAttachment));
+      this.client.store.dispatch(addComponentAttachment(offlineAttachment));
       const [fileProps] = await this.client.files.uploadFileToS3(file_sha1);
       const promise = this.enqueueRequest({
         description: "Create attachment",
         method: HttpMethod.POST,
-        url: `/issues/${issue_id}/attach/`,
-        blocks: [offline_id, issue_id],
+        url: `/components/${component}/attach/`,
+        blocks: [offline_id, component],
         blockers: [file_sha1],
         payload: {
           offline_id,
-          issue: issue_id,
+          component,
           description: description2 ?? "",
           submitted_at: (/* @__PURE__ */ new Date()).getTime() / 1e3,
           ...fileProps
         }
       });
+      promise.catch((error2) => {
+        this.client.store.dispatch(removeComponentAttachment(offlineAttachment.offline_id));
+        throw error2;
+      });
       return [offlineAttachment, promise];
     }
-    async attachFilesToIssue(filesToSubmit, issueId) {
-      return Promise.allSettled(
-        filesToSubmit.map((file) => {
-          if (!(file instanceof File)) {
-            throw new Error("Expected a File instance.");
-          }
-          const photoAttachmentPromise = async (file2) => {
-            const hash = await hashFile(file2);
-            const attachment = offline({
-              file: file2,
-              // No description for now
-              issue_id: issueId,
-              file_sha1: hash
-            });
-            return await this.add(attachment);
-          };
-          return photoAttachmentPromise(file);
-        })
-      );
+    async addComponentTypeAttachment(attachmentPayload) {
+      const { description: description2, component_type, file_sha1, offline_id } = attachmentPayload;
+      if (!attachmentPayload.file.objectURL) {
+        throw new Error("Expected attachmentPayload.file.objectURL to be defined.");
+      }
+      const offlineAttachment = {
+        ...attachmentPayload,
+        file: attachmentPayload.file.objectURL,
+        file_name: attachmentPayload.file.name,
+        file_type: attachmentPayload.file.type
+      };
+      await this.client.files.addCache(attachmentPayload.file, file_sha1);
+      this.client.store.dispatch(addComponentTypeAttachment(offlineAttachment));
+      const [fileProps] = await this.client.files.uploadFileToS3(file_sha1);
+      const promise = this.enqueueRequest({
+        description: "Create attachment",
+        method: HttpMethod.POST,
+        url: `/components/types/${component_type}/attach/`,
+        blocks: [offline_id, component_type],
+        blockers: [file_sha1],
+        payload: {
+          offline_id,
+          component_type,
+          description: description2 ?? "",
+          submitted_at: (/* @__PURE__ */ new Date()).getTime() / 1e3,
+          ...fileProps
+        }
+      });
+      promise.catch((error2) => {
+        this.client.store.dispatch(removeComponentTypeAttachment(offlineAttachment.offline_id));
+        throw error2;
+      });
+      return [offlineAttachment, promise];
     }
-    async replaceFile(attachmentId, newFile) {
+    /** the outer Promise is needed to await the hashing of each file, which is required before offline use. If wanting to
+     * attach promise handlers to the request to add the attachment in the backend, apply it on the promise returned from the
+     * OptimisticModelResult. */
+    attachFilesToIssue(filesToSubmit, issueId) {
+      return filesToSubmit.map((file) => {
+        if (!(file instanceof File)) {
+          throw new Error("Expected a File instance.");
+        }
+        const photoAttachmentPromise = async (file2) => {
+          const hash = await hashFile(file2);
+          const attachment = offline({
+            file: file2,
+            file_name: file2.name,
+            file_type: file2.type,
+            issue: issueId,
+            file_sha1: hash
+          });
+          return this.addIssueAttachment(attachment);
+        };
+        return photoAttachmentPromise(file);
+      });
+    }
+    attachFilesToComponent(filesToSubmit, componentId) {
+      return filesToSubmit.map((file) => {
+        if (!(file instanceof File)) {
+          throw new Error("Expected a File instance.");
+        }
+        const photoAttachmentPromise = async (file2) => {
+          const hash = await hashFile(file2);
+          const attachment = offline({
+            file: file2,
+            file_name: file2.name,
+            file_type: file2.type,
+            component: componentId,
+            file_sha1: hash
+          });
+          return this.addComponentAttachment(attachment);
+        };
+        return photoAttachmentPromise(file);
+      });
+    }
+    attachFilesToComponentType(filesToSubmit, componentTypeId) {
+      return filesToSubmit.map((file) => {
+        if (!(file instanceof File)) {
+          throw new Error("Expected a File instance.");
+        }
+        const photoAttachmentPromise = async (file2) => {
+          const hash = await hashFile(file2);
+          const attachment = offline({
+            file: file2,
+            file_name: file2.name,
+            file_type: file2.type,
+            component_type: componentTypeId,
+            file_sha1: hash
+          });
+          return this.addComponentTypeAttachment(attachment);
+        };
+        return photoAttachmentPromise(file);
+      });
+    }
+    async replaceIssueAttachmentFile(attachmentId, newFile) {
       const { store } = this.client;
       const attachment = store.getState().issueReducer.attachments[attachmentId];
       if (!attachment)
@@ -4141,16 +4383,18 @@ var __publicField = (obj, key, value) => {
         if (!newFile.objectURL) {
           throw new Error(`newFile["objectURL"] is unexpectedly ${newFile.objectURL}`);
         }
-        store.dispatch(updateAttachment({ ...attachment, file_sha1: newSha1, file: URL.createObjectURL(newFile) }));
+        store.dispatch(
+          updateIssueAttachment({ ...attachment, file_sha1: newSha1, file: URL.createObjectURL(newFile) })
+        );
         await this.client.files.addCache(newFile, newSha1);
         const [fileProps] = await this.client.files.uploadFileToS3(newSha1).catch((e) => {
-          store.dispatch(updateAttachment(attachment));
+          store.dispatch(updateIssueAttachment(attachment));
           throw e;
         });
         const promise2 = this.enqueueRequest({
           description: "Edit attachment",
           method: HttpMethod.PATCH,
-          url: `/attachments/${attachment.offline_id}/`,
+          url: `/attachments/issues/${attachment.offline_id}/`,
           isResponseBlob: false,
           payload: fileProps,
           blockers: [attachmentId, newSha1],
@@ -4163,7 +4407,125 @@ var __publicField = (obj, key, value) => {
         } catch (e) {
           if (oldFile) {
             store.dispatch(
-              updateAttachment({
+              updateIssueAttachment({
+                ...attachment,
+                file_sha1: attachment.file_sha1,
+                file: URL.createObjectURL(oldFile)
+              })
+            );
+          }
+          throw e;
+        }
+      };
+      const offlineAttachment = {
+        ...attachment,
+        file_sha1: newSha1,
+        file: URL.createObjectURL(newFile)
+      };
+      const promise = performRequest2();
+      return [offlineAttachment, promise];
+    }
+    async replaceComponentAttachmentFile(attachmentId, newFile) {
+      const { store } = this.client;
+      const attachment = store.getState().componentReducer.attachments[attachmentId];
+      if (!attachment)
+        throw new Error(`Attachment ${attachmentId} not found`);
+      let oldFile = void 0;
+      const newSha1 = await hashFile(newFile);
+      const performRequest2 = async () => {
+        oldFile = await this.client.files.fetchCache(attachment.file_sha1);
+        if (!oldFile) {
+          console.error(`Failed to fetch old file from cache for sha1 ${attachment.file_sha1}.`);
+        }
+        if (!newFile.objectURL) {
+          throw new Error(`newFile["objectURL"] is unexpectedly ${newFile.objectURL}`);
+        }
+        store.dispatch(
+          updateComponentAttachment({ ...attachment, file_sha1: newSha1, file: URL.createObjectURL(newFile) })
+        );
+        await this.client.files.addCache(newFile, newSha1);
+        const [fileProps] = await this.client.files.uploadFileToS3(newSha1).catch((e) => {
+          store.dispatch(updateComponentAttachment(attachment));
+          throw e;
+        });
+        const promise2 = this.enqueueRequest({
+          description: "Edit attachment",
+          method: HttpMethod.PATCH,
+          url: `/attachments/components/${attachment.offline_id}/`,
+          isResponseBlob: false,
+          payload: fileProps,
+          blockers: [attachmentId, newSha1],
+          blocks: [attachmentId, newSha1]
+        });
+        try {
+          const result = await promise2;
+          void this.client.files.removeCache(attachment.file_sha1);
+          return result;
+        } catch (e) {
+          if (oldFile) {
+            store.dispatch(
+              updateComponentAttachment({
+                ...attachment,
+                file_sha1: attachment.file_sha1,
+                file: URL.createObjectURL(oldFile)
+              })
+            );
+          }
+          throw e;
+        }
+      };
+      const offlineAttachment = {
+        ...attachment,
+        file_sha1: newSha1,
+        file: URL.createObjectURL(newFile)
+      };
+      const promise = performRequest2();
+      return [offlineAttachment, promise];
+    }
+    async replaceComponentTypeAttachmentFile(attachmentId, newFile) {
+      const { store } = this.client;
+      const attachment = store.getState().componentTypeReducer.attachments[attachmentId];
+      if (!attachment)
+        throw new Error(`Attachment ${attachmentId} not found`);
+      let oldFile = void 0;
+      const newSha1 = await hashFile(newFile);
+      const performRequest2 = async () => {
+        oldFile = await this.client.files.fetchCache(attachment.file_sha1);
+        if (!oldFile) {
+          console.error(`Failed to fetch old file from cache for sha1 ${attachment.file_sha1}.`);
+        }
+        if (!newFile.objectURL) {
+          throw new Error(`newFile["objectURL"] is unexpectedly ${newFile.objectURL}`);
+        }
+        store.dispatch(
+          updateComponentTypeAttachment({
+            ...attachment,
+            file_sha1: newSha1,
+            file: URL.createObjectURL(newFile)
+          })
+        );
+        await this.client.files.addCache(newFile, newSha1);
+        const [fileProps] = await this.client.files.uploadFileToS3(newSha1).catch((e) => {
+          store.dispatch(updateComponentTypeAttachment(attachment));
+          throw e;
+        });
+        const promise2 = this.enqueueRequest({
+          description: "Edit attachment",
+          method: HttpMethod.PATCH,
+          url: `/attachments/component_types/${attachment.offline_id}/`,
+          isResponseBlob: false,
+          payload: fileProps,
+          blockers: [attachmentId, newSha1],
+          blocks: [attachmentId, newSha1]
+        });
+        try {
+          const result = await promise2;
+          void this.client.files.removeCache(attachment.file_sha1);
+          return result;
+        } catch (e) {
+          if (oldFile) {
+            store.dispatch(
+              updateComponentTypeAttachment({
                 ...attachment,
                 file_sha1: attachment.file_sha1,
                 file: URL.createObjectURL(oldFile)
@@ -4183,23 +4545,54 @@ var __publicField = (obj, key, value) => {
     }
     /**
      * Deletes an attachment and associated data in the cloud, in the Redux store and the cache.
-     * @param attachmentId
+     * @param issueAttachmentId
      */
-    delete(attachmentId) {
+    deleteIssueAttachment(issueAttachmentId) {
       const { store } = this.client;
-      const storeStateIssueReducer = store.getState().issueReducer;
-      const attachment = storeStateIssueReducer.attachments[attachmentId];
+      const attachment = selectIssueAttachmentMapping(store.getState())[issueAttachmentId];
       if (!attachment) {
-        throw new Error(`Attachment ${attachmentId} not found`);
+        throw new Error(`Attachment ${issueAttachmentId} not found`);
+      }
+      store.dispatch(removeIssueAttachment(issueAttachmentId));
+      void this.client.files.removeCache(attachment.file_sha1);
+      return this.enqueueRequest({
+        description: "Delete attachment",
+        method: HttpMethod.DELETE,
+        url: `/attachments/issues/${issueAttachmentId}/`,
+        blockers: [issueAttachmentId],
+        blocks: [issueAttachmentId]
+      });
+    }
+    deleteComponentAttachment(componentAttachmentId) {
+      const { store } = this.client;
+      const attachment = selectComponentAttachmentMapping(store.getState())[componentAttachmentId];
+      if (!attachment) {
+        throw new Error(`Attachment ${componentAttachmentId} not found`);
       }
-      store.dispatch(removeAttachment(attachmentId));
+      store.dispatch(removeComponentAttachment(componentAttachmentId));
       void this.client.files.removeCache(attachment.file_sha1);
       return this.enqueueRequest({
         description: "Delete attachment",
         method: HttpMethod.DELETE,
-        url: `/attachments/${attachmentId}/`,
-        blockers: [attachmentId],
-        blocks: [attachmentId]
+        url: `/attachments/components/${componentAttachmentId}/`,
+        blockers: [componentAttachmentId],
+        blocks: [componentAttachmentId]
+      });
+    }
+    deleteComponentTypeAttachment(componentTypeAttachmentId) {
+      const { store } = this.client;
+      const attachment = selectComponentTypeAttachmentMapping(store.getState())[componentTypeAttachmentId];
+      if (!attachment) {
+        throw new Error(`Attachment ${componentTypeAttachmentId} not found`);
+      }
+      store.dispatch(removeComponentTypeAttachment(componentTypeAttachmentId));
+      void this.client.files.removeCache(attachment.file_sha1);
+      return this.enqueueRequest({
+        description: "Delete attachment",
+        method: HttpMethod.DELETE,
+        url: `/attachments/component_types/${componentTypeAttachmentId}/`,
+        blockers: [componentTypeAttachmentId],
+        blocks: [componentTypeAttachmentId]
       });
     }
   }
@@ -4591,13 +4984,26 @@ var __publicField = (obj, key, value) => {
       return [component, promise];
     }
     async remove(id) {
-      this.client.store.dispatch(removeComponent(id));
+      const { store } = this.client;
+      const backupComponent = selectComponent(id)(store.getState());
+      if (!backupComponent)
+        throw new Error(`No component with id ${id} found in the store`);
+      const attachmentsOfComponent = selectAttachmentsOfComponent(id)(store.getState());
+      store.dispatch(removeComponent(id));
+      if (attachmentsOfComponent.length > 0) {
+        const attachmentsOfComponentIds = attachmentsOfComponent.map(({ offline_id }) => offline_id);
+        store.dispatch(removeComponentAttachments(attachmentsOfComponentIds));
+      }
       return this.enqueueRequest({
         description: "Delete issue",
         method: HttpMethod.DELETE,
         url: `/components/${id}/`,
         blockers: [id],
         blocks: []
+      }).catch((err) => {
+        store.dispatch(addComponent(backupComponent));
+        store.dispatch(addComponentAttachments(attachmentsOfComponent));
+        throw err;
       });
     }
     async deleteAllByComponentType(componentTypeId) {
@@ -4908,13 +5314,19 @@ var __publicField = (obj, key, value) => {
       if (!componentType) {
         throw new Error("Expected componentType to exist");
       }
-      const componentTypeStages = selectStagesFromComponentType(componentTypeId)(state) ?? [];
-      store.dispatch(
-        removeStages(
-          componentTypeStages.map((componentTypeStage) => componentTypeStage.offline_id)
-        )
-      );
+      const stagesOfComponentType = selectStagesFromComponentType(componentTypeId)(state) ?? [];
+      const attachmentsOfComponentType = selectAttachmentsOfComponentType(componentTypeId)(state);
       store.dispatch(deleteComponentType(componentTypeId));
+      if (stagesOfComponentType.length > 0) {
+        const stagesOfComponentTypeIds = stagesOfComponentType.map(
+          (componentTypeStage) => componentTypeStage.offline_id
+        );
+        store.dispatch(removeStages(stagesOfComponentTypeIds));
+      }
+      if (attachmentsOfComponentType.length > 0) {
+        const attachmentsOfComponentTypeIds = attachmentsOfComponentType.map(({ offline_id }) => offline_id);
+        store.dispatch(removeComponentTypeAttachments(attachmentsOfComponentTypeIds));
+      }
       return this.enqueueRequest({
         description: "Delete ComponentType",
         method: HttpMethod.DELETE,
@@ -4923,7 +5335,8 @@ var __publicField = (obj, key, value) => {
         blocks: []
       }).catch((e) => {
         store.dispatch(addComponentType(componentType));
-        store.dispatch(addStages(componentTypeStages));
+        store.dispatch(addStages(stagesOfComponentType));
+        store.dispatch(addComponentTypeAttachments(attachmentsOfComponentType));
         throw e;
       });
     }
@@ -5101,12 +5514,12 @@ var __publicField = (obj, key, value) => {
       if (!backup) {
         throw new Error(`No issue with id ${id} found in the store`);
       }
-      const attachments = Object.values(state.issueReducer.attachments).filter((a) => a.issue_id === id);
-      const attachmentsOfIssue = selectPhotoAttachmentsOfIssue(id)(state);
-      store.dispatch(removeIssue(id));
+      const attachments = Object.values(state.issueReducer.attachments).filter((a) => a.issue === id);
+      const attachmentsOfIssue = selectAttachmentsOfIssue(id)(state);
+      this.client.store.dispatch(removeIssue(id));
       store.dispatch(addActiveProjectIssuesCount(-1));
-      if (attachmentsOfIssue) {
-        store.dispatch(removeAttachmentsOfIssue(id));
+      if (attachmentsOfIssue.length > 0) {
+        this.client.store.dispatch(removeAttachmentsOfIssue(id));
       }
       try {
         return await this.enqueueRequest({
@@ -5117,8 +5530,8 @@ var __publicField = (obj, key, value) => {
           blocks: []
         });
       } catch (e) {
-        store.dispatch(addIssue(backup));
-        store.dispatch(addAttachments(attachments));
+        this.client.store.dispatch(addIssue(backup));
+        this.client.store.dispatch(addIssueAttachments(attachments));
         store.dispatch(addActiveProjectIssuesCount(1));
         throw e;
       }
@@ -5294,7 +5707,10 @@ var __publicField = (obj, key, value) => {
       if (currentProjectId) {
         const [_offlineAttachments, promise] = this.client.attachments.fetchAll(currentProjectId);
         void promise.then((result) => {
-          store.dispatch(setAttachments(result));
+          const { issue_attachments, component_type_attachments, component_attachments } = result;
+          store.dispatch(setIssueAttachments(issue_attachments));
+          store.dispatch(setComponentAttachments(component_attachments));
+          store.dispatch(setComponentTypeAttachments(component_type_attachments));
         });
       }
       store.dispatch(setIsFetchingInitialData(false));
@@ -6272,17 +6688,22 @@ var __publicField = (obj, key, value) => {
       let promise = cachedRequestPromises[requestCacheKey];
       let isFirstRequest = true;
       if (!promise) {
-        promise = this.enqueueRequest({
-          description: "Download file",
-          method: HttpMethod.GET,
-          url,
-          // If in development, we should assume the files are saved at localhost by the Django development server.
-          // Setting this to true will lead to localhost:8000 being prepended to the URL.
-          isExternalUrl: true,
-          isResponseBlob: true,
-          isAuthNeeded: false,
-          blockers: [expectedSha1],
-          blocks: [expectedSha1]
+        promise = new Promise((resolve) => {
+          void this.enqueueRequest({
+            description: "Download file",
+            method: HttpMethod.GET,
+            url,
+            // If in development, we should assume the files are saved at localhost by the Django development server.
+            // Setting this to true will lead to localhost:8000 being prepended to the URL.
+            isExternalUrl: true,
+            isResponseBlob: true,
+            isAuthNeeded: false,
+            blockers: [expectedSha1],
+            blocks: [expectedSha1]
+          }).then((blob) => {
+            const blobToFile = new File([blob], downloadedName ?? expectedSha1, { type: blob.type });
+            resolve(blobToFile);
+          });
         });
         cachedRequestPromises[requestCacheKey] = promise;
       } else {
@@ -6688,8 +7109,8 @@ var __publicField = (obj, key, value) => {
     }
   }
   const emptyBaseField = {
-    label: "Question",
-    description: "Optional description",
+    label: "",
+    description: "",
     required: false
   };
   class BaseField extends BaseFormElement {
@@ -12392,7 +12813,7 @@ var __publicField = (obj, key, value) => {
         gap: "0",
         ...rest,
         children: [
-          !file && /* @__PURE__ */ jsxRuntime.jsx(Flex, { width: "100%", height: "100%", align: "center", justify: "center", position: "absolute", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Spinner, {}) }),
+          !file && !error2 && /* @__PURE__ */ jsxRuntime.jsx(Flex, { width: "100%", height: "100%", align: "center", justify: "center", position: "absolute", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Spinner, {}) }),
           /* @__PURE__ */ jsxRuntime.jsx(Inset, { className: styles$4.ImageInset, ref: imageInsetRef, clip: "padding-box", side: "y", pb: "0", children: file && !error2 && /* @__PURE__ */ jsxRuntime.jsx("img", { className: styles$4.Image, src: URL.createObjectURL(file), alt: alt ?? file.name }) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             blocks.OvermapItem,
@@ -13485,14 +13906,16 @@ var __publicField = (obj, key, value) => {
           key: "duplicate",
           text: "Duplicate",
           buttonProps: { onClick: duplicate }
-        },
-        {
+        }
+      ];
+      if (index2 === 0) {
+        actions2.push({
           Icon: TrashIcon,
           key: "delete",
           text: "Delete",
           buttonProps: { onClick: remove2 }
-        }
-      ];
+        });
+      }
       if (type !== "section") {
         actions2.unshift({
           Icon: ImageIcon,
@@ -14665,15 +15088,19 @@ var __publicField = (obj, key, value) => {
   exports2.acceptProjectInvite = acceptProjectInvite;
   exports2.addActiveProjectFormSubmissionsCount = addActiveProjectFormSubmissionsCount;
   exports2.addActiveProjectIssuesCount = addActiveProjectIssuesCount;
-  exports2.addAttachment = addAttachment;
-  exports2.addAttachments = addAttachments;
   exports2.addCategory = addCategory;
   exports2.addComponent = addComponent;
+  exports2.addComponentAttachment = addComponentAttachment;
+  exports2.addComponentAttachments = addComponentAttachments;
   exports2.addComponentType = addComponentType;
+  exports2.addComponentTypeAttachment = addComponentTypeAttachment;
+  exports2.addComponentTypeAttachments = addComponentTypeAttachments;
   exports2.addComponentsInBatches = addComponentsInBatches;
   exports2.addEmailDomain = addEmailDomain;
   exports2.addFavouriteProjectId = addFavouriteProjectId;
   exports2.addIssue = addIssue;
+  exports2.addIssueAttachment = addIssueAttachment;
+  exports2.addIssueAttachments = addIssueAttachments;
   exports2.addLicenses = addLicenses;
   exports2.addOrReplaceCategories = addOrReplaceCategories;
   exports2.addOrReplaceIssueComment = addOrReplaceIssueComment;
@@ -14814,14 +15241,18 @@ var __publicField = (obj, key, value) => {
   exports2.rehydratedReducer = rehydratedReducer;
   exports2.rehydratedSlice = rehydratedSlice;
   exports2.removeAllComponentsOfType = removeAllComponentsOfType;
-  exports2.removeAttachment = removeAttachment;
   exports2.removeAttachmentsOfIssue = removeAttachmentsOfIssue;
   exports2.removeCategory = removeCategory;
   exports2.removeColor = removeColor;
   exports2.removeComponent = removeComponent;
+  exports2.removeComponentAttachment = removeComponentAttachment;
+  exports2.removeComponentAttachments = removeComponentAttachments;
+  exports2.removeComponentTypeAttachment = removeComponentTypeAttachment;
+  exports2.removeComponentTypeAttachments = removeComponentTypeAttachments;
   exports2.removeEmailDomain = removeEmailDomain;
   exports2.removeFavouriteProjectId = removeFavouriteProjectId;
   exports2.removeIssue = removeIssue;
+  exports2.removeIssueAttachment = removeIssueAttachment;
   exports2.removeIssueComment = removeIssueComment;
   exports2.removeOrganizationAccess = removeOrganizationAccess;
   exports2.removeProjectAccess = removeProjectAccess;
@@ -14857,7 +15288,15 @@ var __publicField = (obj, key, value) => {
   exports2.selectActiveWorkspace = selectActiveWorkspace;
   exports2.selectActiveWorkspaceId = selectActiveWorkspaceId;
   exports2.selectAllAttachments = selectAllAttachments;
+  exports2.selectAllComponentAttachments = selectAllComponentAttachments;
+  exports2.selectAllComponentTypeAttachments = selectAllComponentTypeAttachments;
   exports2.selectAppearance = selectAppearance;
+  exports2.selectAttachmentsOfComponent = selectAttachmentsOfComponent;
+  exports2.selectAttachmentsOfComponentByType = selectAttachmentsOfComponentByType;
+  exports2.selectAttachmentsOfComponentType = selectAttachmentsOfComponentType;
+  exports2.selectAttachmentsOfComponentTypeByType = selectAttachmentsOfComponentTypeByType;
+  exports2.selectAttachmentsOfIssue = selectAttachmentsOfIssue;
+  exports2.selectAttachmentsOfIssueByType = selectAttachmentsOfIssueByType;
   exports2.selectCategories = selectCategories;
   exports2.selectCategoriesOfWorkspace = selectCategoriesOfWorkspace;
   exports2.selectCategory = selectCategory;
@@ -14869,7 +15308,9 @@ var __publicField = (obj, key, value) => {
   exports2.selectCompletedStageIdsForComponent = selectCompletedStageIdsForComponent;
   exports2.selectCompletedStages = selectCompletedStages;
   exports2.selectComponent = selectComponent;
+  exports2.selectComponentAttachmentMapping = selectComponentAttachmentMapping;
   exports2.selectComponentType = selectComponentType;
+  exports2.selectComponentTypeAttachmentMapping = selectComponentTypeAttachmentMapping;
   exports2.selectComponentTypeForm = selectComponentTypeForm;
   exports2.selectComponentTypeFromComponent = selectComponentTypeFromComponent;
   exports2.selectComponentTypeFromComponents = selectComponentTypeFromComponents;
@@ -14981,9 +15422,10 @@ var __publicField = (obj, key, value) => {
   exports2.setActiveProjectId = setActiveProjectId;
   exports2.setActiveWorkspaceId = setActiveWorkspaceId;
   exports2.setAppearance = setAppearance;
-  exports2.setAttachments = setAttachments;
   exports2.setCategories = setCategories;
   exports2.setCenterMapToProject = setCenterMapToProject;
+  exports2.setComponentAttachments = setComponentAttachments;
+  exports2.setComponentTypeAttachments = setComponentTypeAttachments;
   exports2.setComponentTypes = setComponentTypes;
   exports2.setComponents = setComponents;
   exports2.setCreateProjectType = setCreateProjectType;
@@ -14995,6 +15437,7 @@ var __publicField = (obj, key, value) => {
   exports2.setIsFetchingInitialData = setIsFetchingInitialData;
   exports2.setIsImportingProjectFile = setIsImportingProjectFile;
   exports2.setIsLoading = setIsLoading;
+  exports2.setIssueAttachments = setIssueAttachments;
   exports2.setIssueComments = setIssueComments;
   exports2.setIssues = setIssues;
   exports2.setLicenses = setLicenses;
@@ -15034,9 +15477,11 @@ var __publicField = (obj, key, value) => {
   exports2.unhideCategory = unhideCategory;
   exports2.unlinkStageToForm = unlinkStageToForm;
   exports2.updateActiveOrganization = updateActiveOrganization;
-  exports2.updateAttachment = updateAttachment;
   exports2.updateComponent = updateComponent;
+  exports2.updateComponentAttachment = updateComponentAttachment;
+  exports2.updateComponentTypeAttachment = updateComponentTypeAttachment;
   exports2.updateIssue = updateIssue;
+  exports2.updateIssueAttachment = updateIssueAttachment;
   exports2.updateLicense = updateLicense;
   exports2.updateOrCreateProject = updateOrCreateProject;
   exports2.updateOrCreateUserFormSubmission = updateOrCreateUserFormSubmission;