From 175834efa95e1ab78379b9dde67b187b30ea603b Mon Sep 17 00:00:00 2001
From: Opender Singh <opender94@gmail.com>
Date: Tue, 3 Nov 2020 13:30:43 +1300
Subject: [PATCH] Unsafe deletion of a protofile (#2798)

---
 .../ui/components/modals/proto-files-modal.js | 24 +++++++++++++++----
 .../proto-file/proto-file-list-item.js        | 14 ++++-------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/packages/insomnia-app/app/ui/components/modals/proto-files-modal.js b/packages/insomnia-app/app/ui/components/modals/proto-files-modal.js
index 1a1d6b901..9a33136b0 100644
--- a/packages/insomnia-app/app/ui/components/modals/proto-files-modal.js
+++ b/packages/insomnia-app/app/ui/components/modals/proto-files-modal.js
@@ -10,7 +10,7 @@ import type { Workspace } from '../../../models/workspace';
 import Modal from '../base/modal';
 import ProtoFileList from '../proto-file/proto-file-list';
 import FileInputButton from '../base/file-input-button';
-import { showError } from './index';
+import { showAlert, showError } from './index';
 import fs from 'fs';
 import path from 'path';
 
@@ -72,9 +72,25 @@ class ProtoFilesModal extends React.PureComponent<Props, State> {
     this.setState({ selectedProtoFileId: id });
   }
 
-  _handleDelete(protoFile: ProtoFile) {
-    // TODO: to be built in INS-209
-    console.log(`delete ${protoFile._id}`);
+  async _handleDelete(protoFile: ProtoFile) {
+    showAlert({
+      title: `Delete ${protoFile.name}`,
+      message: (
+        <span>
+          Really delete <strong>{protoFile.name}</strong>? All requests that use this proto file
+          will stop working.
+        </span>
+      ),
+      addCancel: true,
+      onConfirm: async () => {
+        await models.protoFile.remove(protoFile);
+
+        // if the deleted protoFile was previously selected, clear the selection
+        if (this.state.selectedProtoFileId === protoFile._id) {
+          this.setState({ selectedProtoFileId: '' });
+        }
+      },
+    });
   }
 
   async _handleProtoFileUpload(filePath: string) {
diff --git a/packages/insomnia-app/app/ui/components/proto-file/proto-file-list-item.js b/packages/insomnia-app/app/ui/components/proto-file/proto-file-list-item.js
index 8a4204984..684e37e14 100644
--- a/packages/insomnia-app/app/ui/components/proto-file/proto-file-list-item.js
+++ b/packages/insomnia-app/app/ui/components/proto-file/proto-file-list-item.js
@@ -2,13 +2,12 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import type { ProtoFile } from '../../../models/proto-file';
-import PromptButton from '../base/prompt-button';
 import type {
   DeleteProtoFileHandler,
   RenameProtoFileHandler,
   SelectProtoFileHandler,
 } from './proto-file-list';
-import { ListGroupItem } from '../../../../../insomnia-components';
+import { ListGroupItem, Button } from '../../../../../insomnia-components';
 import Editable from '../base/editable';
 
 type Props = {
@@ -55,15 +54,10 @@ const ProtoFileListItem = ({
   return (
     <SelectableListItem isSelected={isSelected} onClick={handleSelectCallback}>
       <div className="row-spaced">
-        <Editable onSubmit={handleRenameCallback} value={name} preventBlank />
-        <PromptButton
-          className="btn btn--super-compact btn--outlined"
-          addIcon
-          confirmMessage=""
-          onClick={handleDeleteCallback}
-          title="Delete Proto File">
+        <Editable className="wide" onSubmit={handleRenameCallback} value={name} preventBlank />
+        <Button size="small" title="Delete Proto File" onClick={handleDeleteCallback}>
           <i className="fa fa-trash-o" />
-        </PromptButton>
+        </Button>
       </div>
     </SelectableListItem>
   );