feat: add modal and clear alert to index page

src/mqueryfront/src/App.css

@@ -95,6 +95,14 @@
     right: 5vw;
 }
 
+.modal-container-index-page {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: auto;
+}
+
 .modal-block {
     position: relative;
     block-size: "fit-content";

src/mqueryfront/src/indexFiles/IndexClearQueueButton.js

@@ -2,10 +2,6 @@ import React, { Component } from "react";
 import api from "../api";
 
 class IndexClearQueueButton extends Component {
-    onClick() {
-        api.delete(`/queue/${this.props.ursa_id}`);
-    }
-
     render() {
         return (
             <span
@@ -14,9 +10,9 @@ class IndexClearQueueButton extends Component {
             >
                 <button
                     className="btn btn-secondary btn-sm btn-danger my-2"
-                    onClick={() => this.onClick()}
+                    onClick={() => this.props.onClick()}
                 >
-                    Clear queue
+                    {this.props.msg}
                 </button>
             </span>
         );

src/mqueryfront/src/indexFiles/IndexClearedPage.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+const IndexClearedPage = (props) => (
+    <div className="alert alert-danger alert-dismissible fade show">
+        <h2>Cleared!</h2>
+        {props.msg}
+        <button
+            type="button"
+            className="btn-close"
+            data-bs-dismiss="alert"
+            aria-label="Close"
+            onClick={() => props.onClick()}
+        />
+    </div>
+);
+
+export default IndexClearedPage;

src/mqueryfront/src/indexFiles/IndexPage.js

@@ -5,6 +5,8 @@ import api from "../api";
 import ErrorBoundary from "../components/ErrorBoundary";
 import IndexClearQueueButton from "./IndexClearQueueButton";
 import IndexSuccessPage from "./IndexSuccessPage";
+import IndexClearedPage from "./IndexClearedPage";
+import Draggable from "react-draggable";
 
 function getAvailableTaintsListFromDatasets(datasets) {
     var taintList = Object.values(datasets)
@@ -26,12 +28,17 @@ class IndexPageInner extends Component {
             oldestFile: null,
             newestFile: null,
             alertShowFileLen: false,
+            alertShowCleared: false,
+            modalShowClearQueue: false,
         };
         this.handleSubmit = this.handleSubmit.bind(this);
+        this.handleClearQueue = this.handleClearQueue.bind(this);
         this.handleTextareaInput = this.handleTextareaInput.bind(this);
         this.handleNGramSelect = this.handleNGramSelect.bind(this);
         this.handleTaintSelect = this.handleTaintSelect.bind(this);
+        this.handleModalOpen = this.handleModalOpen.bind(this);
         this.handleAlertClose = this.handleAlertClose.bind(this);
+        this.handleAlertClearedClose = this.handleAlertClearedClose.bind(this);
         this.fileOrFiles = this.fileOrFiles.bind(this);
     }
 
@@ -111,12 +118,92 @@ class IndexPageInner extends Component {
             });
     }
 
+    handleClearQueue() {
+        // TODO: include modal before handling closing
+        api.delete(`/queue/${this.ursa_id}`)
+            .then((response) => {
+                this.setState({
+                    modalShowClearQueue: false,
+                });
+                if (response.data.status == "ok") {
+                    this.setState({
+                        alertShowCleared: true,
+                    });
+                } // NOTE: this will not throw error on 'ursa_id not found' status
+            })
+            .catch((error) => this.setState({ error: error }));
+    }
+
     handleAlertClose() {
         this.setState({ alertShowFileLen: false });
     }
 
+    handleModalOpen() {
+        this.setState({ modalShowClearQueue: true });
+    }
+
+    handleAlertClearedClose() {
+        this.setState({ alertShowCleared: false });
+    }
+
     render() {
         const fileLen = this.state.filenames.length;
+
+        const clearQueueModal = (
+            <Draggable handle=".modal-header">
+                <div className="modal-container-index-page">
+                    <div
+                        className="modal modal-block"
+                        style={{
+                            display: this.state.modalShowClearQueue
+                                ? "block"
+                                : "none",
+                        }}
+                    >
+                        <div className="modal-dialog modal-xl">
+                            <div className="modal-content">
+                                <div className="modal-header d-flex justify-content-between">
+                                    <h6 className="modal-title">{`Clear queue alert`}</h6>
+                                    <button
+                                        type="button"
+                                        className="btn-close"
+                                        onClick={() =>
+                                            this.setState({
+                                                modalShowClearQueue: false,
+                                            })
+                                        }
+                                    />
+                                </div>
+                                <div className="modal-body">
+                                    <div>
+                                        Are you sure you want to clear queue at
+                                        UrsaDB: {this.ursa_id}?
+                                    </div>
+                                    <div className="d-flex justify-content-evenly">
+                                        <IndexClearQueueButton
+                                            msg="Yes, clear queue"
+                                            ursa_id={this.props.params.ursa_id}
+                                            onClick={this.handleClearQueue}
+                                        />
+                                        <button
+                                            className="btn btn-secondary btn-sm my-2"
+                                            onClick={() =>
+                                                this.setState({
+                                                    modalShowClearQueue: false,
+                                                })
+                                            }
+                                        >
+                                            Cancel
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Draggable>
+        );
+
         return (
             <ErrorBoundary error={this.state.error}>
                 <div className="container-fluid">
@@ -131,6 +218,16 @@ class IndexPageInner extends Component {
                             onClick={this.handleAlertClose}
                         />
                     )}
+                    {this.state.alertShowCleared && (
+                        <IndexClearedPage
+                            msg={`Successfully cleared ${
+                                this.state.alertShowFileLen
+                            } ${this.fileOrFiles(
+                                this.state.alertShowFileLen
+                            )} from queue ${this.ursa_id}!`}
+                            onClick={this.handleAlertClearedClose}
+                        />
+                    )}
                     <div className="index-form-wrapper">
                         <textarea
                             id="filenames-textarea"
@@ -175,8 +272,11 @@ class IndexPageInner extends Component {
                         <div className="my-2">{`Oldest file in the queue: ${this.state.oldestFile}`}</div>
                     )}
                     <IndexClearQueueButton
+                        msg="Clear queue"
                         ursa_id={this.props.params.ursa_id}
+                        onClick={this.handleModalOpen}
                     />
+                    {this.state.modalShowClearQueue && clearQueueModal}
                 </div>
             </ErrorBoundary>
         );