Delete confirmation dialog (#63)

* add deprovision

* add confirmDialog component

* remove delete url

* integrate confirmDialog with deprovision button

* setting modal style

* add apprepolistitem and confirm dialog for apprepolist

* danger!

* review changes

Author: sozercan

package.json

@@ -54,7 +54,7 @@
     "@types/react-router-dom": "^4.2.3",
     "@types/react-router-redux": "^5.0.11",
     "@types/react-test-renderer": "^16.0.0",
-    "husky": "^0.14.3",
+    "husky": "0.14.3",
     "lint-staged": "^6.1.0",
     "prettier": "^1.10.2",
     "tslint": "^5.9.1",

src/components/AppRepoList/AppRepoListItem.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { IAppRepository } from "shared/types";
+import ConfirmDialog from "../ConfirmDialog";
+
+interface IAppRepoListItemProps {
+  repo: IAppRepository;
+  deleteRepo: (name: string) => Promise<any>;
+  resyncRepo: (name: string) => Promise<any>;
+}
+
+interface IAppRepoListItemState {
+  modalIsOpen: boolean;
+}
+
+export class AppRepoListItem extends React.Component<IAppRepoListItemProps, IAppRepoListItemState> {
+  public state: IAppRepoListItemState = {
+    modalIsOpen: false,
+  };
+
+  public render() {
+    const { repo } = this.props;
+    return (
+      <tr key={repo.metadata.name}>
+        <td>{repo.metadata.name}</td>
+        <td>{repo.spec && repo.spec.url}</td>
+        <td>
+          <ConfirmDialog
+            onConfirm={this.handleDeleteClick(repo.metadata.name)}
+            modalIsOpen={this.state.modalIsOpen}
+            closeModal={this.closeModal}
+          />
+
+          <button className="button button-secondary" onClick={this.openModel}>
+            Delete
+          </button>
+
+          <button
+            className="button button-secondary"
+            onClick={this.handleResyncClick(repo.metadata.name)}
+          >
+            Refresh
+          </button>
+        </td>
+      </tr>
+    );
+  }
+
+  public openModel = () => {
+    this.setState({
+      modalIsOpen: true,
+    });
+  };
+
+  public closeModal = async () => {
+    this.setState({
+      modalIsOpen: false,
+    });
+  };
+
+  private handleDeleteClick(repoName: string) {
+    return async () => {
+      this.props.deleteRepo(repoName);
+      this.setState({ modalIsOpen: false });
+    };
+  }
+
+  private handleResyncClick(repoName: string) {
+    return () => {
+      this.props.resyncRepo(repoName);
+    };
+  }
+}

src/components/AppRepoList/index.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 
 import { IAppRepository } from "../../shared/types";
 import { AppRepoAddButton } from "./AppRepoButton";
+import { AppRepoListItem } from "./AppRepoListItem";
 
 export interface IAppRepoListProps {
   repos: IAppRepository[];
@@ -17,7 +18,7 @@ export class AppRepoList extends React.Component<IAppRepoListProps> {
   }
 
   public render() {
-    const { repos, install } = this.props;
+    const { repos, install, deleteRepo, resyncRepo } = this.props;
     return (
       <div className="app-repo-list">
         <h1>App Repositories</h1>
@@ -30,35 +31,18 @@ export class AppRepoList extends React.Component<IAppRepoListProps> {
             </tr>
           </thead>
           <tbody>
-            {repos.map(repo => {
-              return (
-                <tr key={repo.metadata.name}>
-                  <td>{repo.metadata.name}</td>
-                  <td>{repo.spec && repo.spec.url}</td>
-                  <td>
-                    <button
-                      className="button button-secondary"
-                      onClick={this.handleDeleteClick(repo.metadata.name)}
-                    >
-                      Delete
-                    </button>
-                    <button
-                      className="button button-secondary"
-                      onClick={this.handleResyncClick(repo.metadata.name)}
-                    >
-                      Refresh
-                    </button>
-                  </td>
-                </tr>
-              );
-            })}
+            {repos.map(repo => (
+              <AppRepoListItem
+                key={repo.metadata.uid}
+                deleteRepo={deleteRepo}
+                resyncRepo={resyncRepo}
+                repo={repo}
+              />
+            ))}
           </tbody>
         </table>
         <AppRepoAddButton install={install} />
       </div>
     );
   }
-
-  private handleDeleteClick = (repoName: string) => () => this.props.deleteRepo(repoName);
-  private handleResyncClick = (repoName: string) => () => this.props.resyncRepo(repoName);
 }

src/components/ConfirmDialog/index.tsx

@@ -0,0 +1,73 @@
+import * as React from "react";
+import * as Modal from "react-modal";
+
+interface IConfirmDialogProps {
+  modalIsOpen: boolean;
+  onConfirm: () => Promise<any>;
+  closeModal: () => Promise<any>;
+}
+
+interface IConfirmDialogState {
+  error?: string;
+  modalIsOpen: boolean;
+}
+
+class ConfirmDialog extends React.Component<IConfirmDialogProps, IConfirmDialogState> {
+  public state: IConfirmDialogState = {
+    error: undefined,
+    modalIsOpen: this.props.modalIsOpen,
+  };
+
+  public render() {
+    return (
+      <div className="ConfirmDialog">
+        <Modal
+          style={{
+            content: {
+              bottom: "auto",
+              left: "50%",
+              marginRight: "-50%",
+              right: "auto",
+              top: "50%",
+              transform: "translate(-50%, -50%)",
+            },
+          }}
+          isOpen={this.props.modalIsOpen}
+          onRequestClose={this.closeModal}
+          contentLabel="Modal"
+        >
+          {this.state.error && (
+            <div className="container padding-v-small bg-action">{this.state.error}</div>
+          )}
+          <div>Are you sure you want to delete this?</div>
+          <div>
+            <button className="button" onClick={this.props.closeModal}>
+              Cancel
+            </button>
+            <button
+              className="button button-primary button-danger"
+              type="submit"
+              onClick={this.props.onConfirm}
+            >
+              Delete
+            </button>
+          </div>
+        </Modal>
+      </div>
+    );
+  }
+
+  public openModel = () => {
+    this.setState({
+      modalIsOpen: true,
+    });
+  };
+
+  public closeModal = () => {
+    this.setState({
+      modalIsOpen: false,
+    });
+  };
+}
+
+export default ConfirmDialog;

src/components/DeprovisionButton/index.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { IServiceInstance } from "../../shared/ServiceInstance";
+import ConfirmDialog from "../ConfirmDialog";
 
 interface IDeprovisionButtonProps {
   instance: IServiceInstance;
@@ -10,18 +11,20 @@ interface IDeprovisionButtonState {
   error: string | undefined;
   instance: IServiceInstance | undefined;
   isDeprovisioning: boolean;
+  modalIsOpen: boolean;
 }
 
 class DeprovisionButton extends React.Component<IDeprovisionButtonProps, IDeprovisionButtonState> {
   public state: IDeprovisionButtonState = {
     error: undefined,
     instance: this.props.instance,
     isDeprovisioning: false,
+    modalIsOpen: false,
   };
 
   public handleDeprovision = async () => {
     const { deprovision, instance } = this.props;
-    this.setState({ isDeprovisioning: true });
+    this.setState({ isDeprovisioning: true, modalIsOpen: false });
 
     try {
       await deprovision(instance);
@@ -35,16 +38,34 @@ class DeprovisionButton extends React.Component<IDeprovisionButtonProps, IDeprov
     return (
       <div className="DeprovisionButton">
         {this.state.isDeprovisioning && <div>Deprovisioning...</div>}
+        <ConfirmDialog
+          onConfirm={this.handleDeprovision}
+          modalIsOpen={this.state.modalIsOpen}
+          closeModal={this.closeModal}
+        />
+
         <button
           className="button button-primary button-small button-danger"
           disabled={this.state.isDeprovisioning}
-          onClick={this.handleDeprovision}
+          onClick={this.openModel}
         >
           Deprovision
         </button>
       </div>
     );
   }
+
+  public openModel = () => {
+    this.setState({
+      modalIsOpen: true,
+    });
+  };
+
+  public closeModal = async () => {
+    this.setState({
+      modalIsOpen: false,
+    });
+  };
 }
 
 export default DeprovisionButton;

yarn.lock

@@ -2829,7 +2829,7 @@ https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
 
-husky@^0.14.3:
+[email protected]:
   version "0.14.3"
   resolved "https://registry.yarnpkg.com/husky/-/husky-0.14.3.tgz#c69ed74e2d2779769a17ba8399b54ce0b63c12c3"
   dependencies: