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

package/dist/overmap-core.js

@@ -1515,8 +1515,44 @@ const selectHiddenCategoryCount = (state) => {
   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 = createSlice({
   name: "components",
@@ -1535,6 +1571,12 @@ const componentSlice = createSlice({
       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;
@@ -1624,12 +1666,48 @@ const selectComponentTypesFromIds = (componentTypeIds) => (state) => {
     return acc;
   }, []);
 };
+const selectComponentAttachmentMapping = (state) => state.componentReducer.attachments;
+const selectAllComponentAttachments = createSelector(
+  [selectComponentAttachmentMapping],
+  (mapping) => Object.values(mapping)
+);
+const selectAttachmentsOfComponent = restructureCreateSelectorWithArgs(
+  createSelector(
+    [selectAllComponentAttachments, (_state, componentId) => componentId],
+    (attachments, componentId) => {
+      return attachments.filter(({ component }) => componentId === component);
+    }
+  )
+);
+const selectAttachmentsOfComponentByType = restructureCreateSelectorWithArgs(
+  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;
@@ -1789,7 +1867,8 @@ const { addStages, updateStages, removeStages, linkStageToForm, unlinkStageToFor
 const componentStageReducer = componentStageSlice.reducer;
 const initialState$h = {
   componentTypes: {},
-  hiddenComponentTypeIds: {}
+  hiddenComponentTypeIds: {},
+  attachments: {}
 };
 const componentTypeSlice = createSlice({
   name: "componentTypes",
@@ -1802,6 +1881,12 @@ const componentTypeSlice = createSlice({
     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];
     },
@@ -1851,7 +1936,50 @@ const selectComponentTypesByName = restructureCreateSelectorWithArgs(
   )
 );
 const selectHiddenComponentTypeIds = (state) => state.componentTypeReducer.hiddenComponentTypeIds;
-const { addComponentType, setComponentTypes, toggleComponentTypeVisibility, deleteComponentType } = componentTypeSlice.actions;
+const selectComponentTypeAttachmentMapping = (state) => state.componentTypeReducer.attachments;
+const selectAllComponentTypeAttachments = createSelector(
+  [selectComponentTypeAttachmentMapping],
+  (mapping) => Object.values(mapping)
+);
+const selectAttachmentsOfComponentType = restructureCreateSelectorWithArgs(
+  createSelector(
+    [selectAllComponentTypeAttachments, (_state, componentTypeId) => componentTypeId],
+    (attachments, componentTypeId) => {
+      return attachments.filter(({ component_type }) => componentTypeId === component_type);
+    }
+  )
+);
+const selectAttachmentsOfComponentTypeByType = restructureCreateSelectorWithArgs(
+  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: {},
@@ -1941,11 +2069,7 @@ const issueSlice = createSlice({
       });
     },
     // 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;
     },
@@ -1956,17 +2080,8 @@ const issueSlice = createSlice({
       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] = {
@@ -1978,13 +2093,7 @@ const issueSlice = createSlice({
       }
     },
     // 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];
@@ -1992,15 +2101,9 @@ const issueSlice = createSlice({
         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];
       }
@@ -2052,25 +2155,25 @@ const issueSlice = createSlice({
   }
 });
 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;
@@ -2130,10 +2233,8 @@ const selectPhotoAttachmentsOfIssue = restructureCreateSelectorWithArgs(
   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/")
       );
     }
   )
@@ -2144,6 +2245,31 @@ const selectCommentsOfIssue = restructureCreateSelectorWithArgs(
     return Object.values(commentMapping).filter((comment) => comment.issue === issueId);
   })
 );
+const selectAttachmentsOfIssue = restructureCreateSelectorWithArgs(
+  createSelector(
+    [selectIssueAttachments, (_state, issueId) => issueId],
+    (attachments, issueId) => {
+      return attachments.filter(({ issue }) => issueId === issue);
+    }
+  )
+);
+const selectAttachmentsOfIssueByType = restructureCreateSelectorWithArgs(
+  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(
   createSelector(
     [selectIssueAttachmentMapping, (_state, issueId) => issueId],
@@ -2153,7 +2279,7 @@ const selectFileAttachmentsOfIssue = restructureCreateSelectorWithArgs(
       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/"))
         )
       );
     }
@@ -4082,12 +4208,16 @@ class AttachmentService extends BaseApiService {
       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.");
     }
@@ -4098,45 +4228,157 @@ class AttachmentService extends BaseApiService {
       file_type: attachmentPayload.file.type
     };
     await this.client.files.addCache(attachmentPayload.file, file_sha1);
-    this.client.store.dispatch(addAttachment(offlineAttachment));
+    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_id}/attach/`,
-      blocks: [offline_id, issue_id],
+      url: `/issues/${issue}/attach/`,
+      blocks: [offline_id, issue],
       blockers: [file_sha1],
       payload: {
         offline_id,
-        issue: issue_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 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 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.");
+    }
+    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(addComponentAttachment(offlineAttachment));
+    const [fileProps] = await this.client.files.uploadFileToS3(file_sha1);
+    const promise = this.enqueueRequest({
+      description: "Create attachment",
+      method: HttpMethod.POST,
+      url: `/components/${component}/attach/`,
+      blocks: [offline_id, component],
+      blockers: [file_sha1],
+      payload: {
+        offline_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 replaceFile(attachmentId, newFile) {
+  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];
+  }
+  /** 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)
@@ -4151,16 +4393,75 @@ class AttachmentService extends BaseApiService {
       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(updateIssueAttachment(attachment));
+        throw e;
+      });
+      const promise2 = this.enqueueRequest({
+        description: "Edit attachment",
+        method: HttpMethod.PATCH,
+        url: `/attachments/issues/${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(
+            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(updateAttachment(attachment));
+        store.dispatch(updateComponentAttachment(attachment));
         throw e;
       });
       const promise2 = this.enqueueRequest({
         description: "Edit attachment",
         method: HttpMethod.PATCH,
-        url: `/attachments/${attachment.offline_id}/`,
+        url: `/attachments/components/${attachment.offline_id}/`,
         isResponseBlob: false,
         payload: fileProps,
         blockers: [attachmentId, newSha1],
@@ -4173,7 +4474,68 @@ class AttachmentService extends BaseApiService {
       } catch (e) {
         if (oldFile) {
           store.dispatch(
-            updateAttachment({
+            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)
@@ -4193,23 +4555,54 @@ class AttachmentService extends BaseApiService {
   }
   /**
    * 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(removeAttachment(attachmentId));
+    store.dispatch(removeIssueAttachment(issueAttachmentId));
     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/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(removeComponentAttachment(componentAttachmentId));
+    void this.client.files.removeCache(attachment.file_sha1);
+    return this.enqueueRequest({
+      description: "Delete attachment",
+      method: HttpMethod.DELETE,
+      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]
     });
   }
 }
@@ -4601,13 +4994,26 @@ class ComponentService extends BaseApiService {
     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) {
@@ -4918,13 +5324,19 @@ class ComponentTypeService extends BaseApiService {
     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,
@@ -4933,7 +5345,8 @@ class ComponentTypeService extends BaseApiService {
       blocks: []
     }).catch((e) => {
       store.dispatch(addComponentType(componentType));
-      store.dispatch(addStages(componentTypeStages));
+      store.dispatch(addStages(stagesOfComponentType));
+      store.dispatch(addComponentTypeAttachments(attachmentsOfComponentType));
       throw e;
     });
   }
@@ -5111,12 +5524,12 @@ class IssueService extends BaseApiService {
     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({
@@ -5127,8 +5540,8 @@ class IssueService extends BaseApiService {
         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;
     }
@@ -5304,7 +5717,10 @@ class MainService extends BaseApiService {
     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));
@@ -6282,17 +6698,22 @@ class FileService extends BaseApiService {
     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 {
@@ -6698,8 +7119,8 @@ class BaseFormElement {
   }
 }
 const emptyBaseField = {
-  label: "Question",
-  description: "Optional description",
+  label: "",
+  description: "",
   required: false
 };
 class BaseField extends BaseFormElement {
@@ -12402,7 +12823,7 @@ const ImageCard = memo((props) => {
       gap: "0",
       ...rest,
       children: [
-        !file && /* @__PURE__ */ jsx(Flex, { width: "100%", height: "100%", align: "center", justify: "center", position: "absolute", children: /* @__PURE__ */ jsx(Spinner, {}) }),
+        !file && !error2 && /* @__PURE__ */ jsx(Flex, { width: "100%", height: "100%", align: "center", justify: "center", position: "absolute", children: /* @__PURE__ */ jsx(Spinner, {}) }),
         /* @__PURE__ */ jsx(Inset, { className: styles$4.ImageInset, ref: imageInsetRef, clip: "padding-box", side: "y", pb: "0", children: file && !error2 && /* @__PURE__ */ jsx("img", { className: styles$4.Image, src: URL.createObjectURL(file), alt: alt ?? file.name }) }),
         /* @__PURE__ */ jsx(
           OvermapItem,
@@ -13495,14 +13916,16 @@ const FieldActions = memo((props) => {
         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,
@@ -14676,15 +15099,19 @@ export {
   acceptProjectInvite,
   addActiveProjectFormSubmissionsCount,
   addActiveProjectIssuesCount,
-  addAttachment,
-  addAttachments,
   addCategory,
   addComponent,
+  addComponentAttachment,
+  addComponentAttachments,
   addComponentType,
+  addComponentTypeAttachment,
+  addComponentTypeAttachments,
   addComponentsInBatches,
   addEmailDomain,
   addFavouriteProjectId,
   addIssue,
+  addIssueAttachment,
+  addIssueAttachments,
   addLicenses,
   addOrReplaceCategories,
   addOrReplaceIssueComment,
@@ -14825,14 +15252,18 @@ export {
   rehydratedReducer,
   rehydratedSlice,
   removeAllComponentsOfType,
-  removeAttachment,
   removeAttachmentsOfIssue,
   removeCategory,
   removeColor,
   removeComponent,
+  removeComponentAttachment,
+  removeComponentAttachments,
+  removeComponentTypeAttachment,
+  removeComponentTypeAttachments,
   removeEmailDomain,
   removeFavouriteProjectId,
   removeIssue,
+  removeIssueAttachment,
   removeIssueComment,
   removeOrganizationAccess,
   removeProjectAccess,
@@ -14868,7 +15299,15 @@ export {
   selectActiveWorkspace,
   selectActiveWorkspaceId,
   selectAllAttachments,
+  selectAllComponentAttachments,
+  selectAllComponentTypeAttachments,
   selectAppearance,
+  selectAttachmentsOfComponent,
+  selectAttachmentsOfComponentByType,
+  selectAttachmentsOfComponentType,
+  selectAttachmentsOfComponentTypeByType,
+  selectAttachmentsOfIssue,
+  selectAttachmentsOfIssueByType,
   selectCategories,
   selectCategoriesOfWorkspace,
   selectCategory,
@@ -14880,7 +15319,9 @@ export {
   selectCompletedStageIdsForComponent,
   selectCompletedStages,
   selectComponent,
+  selectComponentAttachmentMapping,
   selectComponentType,
+  selectComponentTypeAttachmentMapping,
   selectComponentTypeForm,
   selectComponentTypeFromComponent,
   selectComponentTypeFromComponents,
@@ -14992,9 +15433,10 @@ export {
   setActiveProjectId,
   setActiveWorkspaceId,
   setAppearance,
-  setAttachments,
   setCategories,
   setCenterMapToProject,
+  setComponentAttachments,
+  setComponentTypeAttachments,
   setComponentTypes,
   setComponents,
   setCreateProjectType,
@@ -15006,6 +15448,7 @@ export {
   setIsFetchingInitialData,
   setIsImportingProjectFile,
   setIsLoading,
+  setIssueAttachments,
   setIssueComments,
   setIssues,
   setLicenses,
@@ -15045,9 +15488,11 @@ export {
   unhideCategory,
   unlinkStageToForm,
   updateActiveOrganization,
-  updateAttachment,
   updateComponent,
+  updateComponentAttachment,
+  updateComponentTypeAttachment,
   updateIssue,
+  updateIssueAttachment,
   updateLicense,
   updateOrCreateProject,
   updateOrCreateUserFormSubmission,