#179: updated delete modal to include id property

fabric-testbed · May 25, 2023 · d146d8d · d146d8d
1 parent 4360558
commit d146d8d
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 39 deletions.
diff --git a/src/components/Experiment/Slices.jsx b/src/components/Experiment/Slices.jsx
@@ -281,6 +281,7 @@ class Slices extends React.Component {
                 <DeleteModal
                   name={"Delete All"}
                   text={"Are you sure you want to delete all the active slices? This process cannot be undone."}
+                  id={"delete-all-slices"}
                   onDelete={() => this.handleDeleteAllSlices()}
                 />
               }

diff --git a/src/components/Project/ProjectBasicInfoTable.jsx b/src/components/Project/ProjectBasicInfoTable.jsx
@@ -75,6 +75,7 @@ class ProjectBasicInfoTable extends Component {
                   <DeleteModal
                     name={"Delete Project"}
                     text={"Are you sure you want to delete the project? This process cannot be undone."}
+                    id={"delete-project"}
                     onDelete={() => onDeleteProject(project)}
                   />
                 </td>

diff --git a/src/components/SshKey/KeyCard.jsx b/src/components/SshKey/KeyCard.jsx
@@ -57,7 +57,7 @@ const KeyCard = ({ data, disableKeyDelete }) => {
             <DeleteModal
               name={"Delete SSH Key"}
               text={`Are you sure you want to delete the key ${data.comment}? This process cannot be undone.`}
-              id={data.uuid}
+              id={`delete-ssh-key-${data.uuid}`}
               onDelete={() => handleDelete(data.uuid, data.fabric_key_type)}
             />
           }

diff --git a/src/components/common/DeleteModal.jsx b/src/components/common/DeleteModal.jsx
@@ -18,7 +18,7 @@ class DeleteModal extends React.Component {
           id={`delete-modal-${id}`}
           tabIndex="-1"
           role="dialog"
-          aria-labelledby={`#delete-ssh-key-modal-${id}`}
+          aria-labelledby={`#delete-modal-${id}`}
           aria-hidden="true"
         >
           <div className="modal-dialog modal-dialog-centered" role="document">

diff --git a/src/pages/ProjectForm.jsx b/src/pages/ProjectForm.jsx
@@ -77,7 +77,7 @@ class ProjectForm extends Form {
       isJupterhubUser: false,
     },
     errors: {},
-    activeIndex: 3,
+    activeIndex: 0,
     SideNavItems: [
       { name: "BASIC INFORMATION", active: true },
       { name: "PROJECT OWNERS", active: false },

diff --git a/src/pages/SliceViewer.jsx b/src/pages/SliceViewer.jsx
@@ -176,46 +176,14 @@ class SliceViewer extends Component {
                     <i className="fa fa-question-circle mx-2" />
                   </a>
                 </h2>
-                <div className="d-flex flex-row align-items-center">
-                  <h4>
-                    <span className="badge badge-light font-weight-normal p-2 mt-1 mr-2">Lease End: 
-                    {
-                      slice.state !=="StableOK" && utcToLocalTimeParser(leaseEndTime)
-                    }
-                    </span>
-                  </h4>
-                  {
-                    leaseEndTime !== "" && slice.state ==="StableOK" && <Calendar
-                      id="sliceViewerCalendar"
-                      name="sliceViewerCalendar"
-                      currentTime={new Date(utcToLocalTimeParser(leaseEndTime))}
-                      onTimeChange={this.handleTimeChange}
-                    />
-                  }
-                  {
-                    slice.state ==="StableOK" &&
-                    <button
-                      className="btn btn-sm btn-outline-primary m1-3 mr-3"
-                      onClick={this.handleSliceExtend}
-                     >
-                      Extend
-                     </button>
-                  }
-                  </div>
-                {
-                  slice.project_name && <h4>
-                    <span className="badge badge-light font-weight-normal p-2 mt-1">
-                      Project: <Link to={`/projects/${slice.project_id}`}>{slice.project_name}</Link>
-                    </span>
-                  </h4>
-                }
               </div>
               <div className="d-flex flex-row justify-content-between align-items-center">
                 {
                   ["StableOK", "ModifyOK", "StableError", "ModifyError"].includes(slice.state) &&
                   <DeleteModal
                     name={"Delete Slice"}
                     text={'Are you sure you want to delete this slice? This process cannot be undone but you can find deleted slices by checking the "Include Dead Slices" radio button on Experiments -> Slices page.'}
+                    id={"delete-a-slice"}
                     onDelete={() => this.handleDeleteSlice(slice.slice_id)}
                   />
                 }
@@ -229,6 +197,41 @@ class SliceViewer extends Component {
                 </Link>
               </div>
             </div>
+            <div className="d-flex flex-row justify-content-between align-items-center mt-2">
+              <div className="d-flex flex-row align-items-center">
+                <h4>
+                  <span className="badge badge-light font-weight-normal p-2 mt-1 mr-2">Lease End: 
+                  {
+                    slice.state !=="StableOK" && utcToLocalTimeParser(leaseEndTime)
+                  }
+                  </span>
+                </h4>
+                {
+                  leaseEndTime !== "" && slice.state ==="StableOK" && <Calendar
+                    id="sliceViewerCalendar"
+                    name="sliceViewerCalendar"
+                    currentTime={new Date(utcToLocalTimeParser(leaseEndTime))}
+                    onTimeChange={this.handleTimeChange}
+                  />
+                }
+                {
+                  slice.state ==="StableOK" &&
+                  <button
+                    className="btn btn-sm btn-outline-primary m1-3 mr-3"
+                    onClick={this.handleSliceExtend}
+                    >
+                    Extend
+                    </button>
+                }
+              </div>
+              {
+                slice.project_name && <h4>
+                  <span className="badge badge-light font-weight-normal p-2 mt-1">
+                    Project: <Link to={`/projects/${slice.project_id}`}>{slice.project_name}</Link>
+                  </span>
+                </h4>
+              }
+            </div>
             {
               ["Configuring", "Modifying"].includes(slice.state)  && 
               <CountdownTimer

diff --git a/src/services/sliceService.js b/src/services/sliceService.js
@@ -58,8 +58,6 @@ export function deleteSlice(id) {
 
 export function extendSlice(id, lease_end_time) {
   return http.post(`${apiEndpoint}/renew/${id}?lease_end_time=${lease_end_time}`, {
-    headers: {
-    'Content-Type': 'text/plain',
-    'Authorization': `Bearer ${localStorage.getItem("idToken")}`}
+    headers: {'Authorization': `Bearer ${localStorage.getItem("idToken")}`}
   });
 }