fix(ui): Changed button appearance and fixed tooltip (#222)

* fix: Added a button to cancel tasks * fix: Added missing word "start" in title, snapshots.jsx * fix: Tab snapshot, policies, and tasks are disabled when repo is not connected. A tooltip is shown that the repository is not connected.
kopia · Dec 9, 2023 · e5c3d3e · e5c3d3e
1 parent f256cf1
commit e5c3d3e
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -27,6 +27,7 @@ export default class App extends Component {
       runningTaskCount: 0,
       isFetching: false,
       repoDescription: "",
+      isRepositoryConnected: false
     };
 
     this.fetchTaskSummary = this.fetchTaskSummary.bind(this);
@@ -58,6 +59,7 @@ export default class App extends Component {
       if (result.data.description) {
         this.setState({
           repoDescription: result.data.description,
+          isRepositoryConnected: result.data.connected
         });
       }
     }).catch(error => { /* ignore */ });
@@ -80,6 +82,7 @@ export default class App extends Component {
 
   // this is invoked via AppContext whenever repository is connected, disconnected, etc.
   repositoryUpdated(isConnected) {
+    this.setState({ isRepositoryConnected: isConnected })
     if (isConnected) {
       window.location.replace("/snapshots");
     } else {
@@ -94,7 +97,7 @@ export default class App extends Component {
   }
 
   render() {
-    const { uiPrefs, runningTaskCount } = this.state;
+    const { uiPrefs, runningTaskCount, isRepositoryConnected } = this.state;
 
     return (
       <Router>
@@ -105,14 +108,19 @@ export default class App extends Component {
               <Navbar.Toggle aria-controls="basic-navbar-nav" />
               <Navbar.Collapse id="basic-navbar-nav">
                 <Nav className="me-auto">
-                  <NavLink data-testid="tab-snapshots" data-title="Snapshots" className="nav-link" activeClassName="active" to="/snapshots">Snapshots</NavLink>
-                  <NavLink data-testid="tab-policies" data-title="Policies" className="nav-link" activeClassName="active" to="/policies">Policies</NavLink>
-                  <NavLink data-testid="tab-tasks" data-title="Tasks" className="nav-link" activeClassName="active" to="/tasks">Tasks <>
-                    {runningTaskCount > 0 && <>({runningTaskCount})</>}
-                  </>
-                  </NavLink>
-                  <NavLink data-testid="tab-repo" data-title="Repository" className="nav-link" activeClassName="active" to="/repo">Repository</NavLink>
-                  <NavLink data-testid="tab-preferences" data-title="Preferences" className="nav-link" activeClassName="active" to="/preferences">Preferences</NavLink>
+                  <span className="d-inline-block" data-toggle="tooltip" title="Repository is not connected">
+                    <NavLink data-testid="tab-snapshots" title="" data-title="Snapshots" className={isRepositoryConnected ? "nav-link" : "nav-link disabled"} to="/snapshots">Snapshots</NavLink>
+                  </span>
+                  <span className="d-inline-block" data-toggle="tooltip" title="Repository is not connected">
+                    <NavLink data-testid="tab-policies" title="" data-title="Policies" className={isRepositoryConnected ? "nav-link" : "nav-link disabled"} to="/policies">Policies</NavLink>
+                  </span>
+                  <span className="d-inline-block" data-toggle="tooltip" title="Repository is not connected">
+                    <NavLink data-testid="tab-tasks" title="" data-title="Tasks" className={isRepositoryConnected ? "nav-link" : "nav-link disabled"} to="/tasks">Tasks
+                      <>{runningTaskCount > 0 && <>({runningTaskCount})</>}</>
+                    </NavLink>
+                  </span>
+                  <NavLink data-testid="tab-repo" data-title="Repository" className="nav-link" to="/repo">Repository</NavLink>
+                  <NavLink data-testid="tab-preferences" data-title="Preferences" className="nav-link" to="/preferences">Preferences</NavLink>
                 </Nav>
               </Navbar.Collapse>
             </Navbar>

diff --git a/src/pages/Snapshots.jsx b/src/pages/Snapshots.jsx
@@ -140,7 +140,7 @@ export class Snapshots extends Component {
 
             case "PENDING":
                 return <>
-                    <Spinner data-testid="snapshot-pending" animation="border" variant="secondary" size="sm" title="Snapshot will after the previous snapshot completes" />
+                    <Spinner data-testid="snapshot-pending" animation="border" variant="secondary" size="sm" title="Snapshot will start after the previous snapshot completes" />
                     &nbsp;Pending
                 </>;
 

diff --git a/src/utils/uiutil.jsx b/src/utils/uiutil.jsx
@@ -1,4 +1,4 @@
-import { faBan, faCheck, faChevronLeft, faCopy, faExclamationCircle, faExclamationTriangle, faFolderOpen, faTerminal, faWindowClose } from '@fortawesome/free-solid-svg-icons';
+import { faBan, faCheck, faChevronLeft, faCopy, faExclamationCircle, faExclamationTriangle, faFolderOpen, faTerminal, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import axios from 'axios';
 import React, { useState } from 'react';
@@ -274,10 +274,10 @@ export function taskStatusSymbol(task) {
         case "RUNNING":
             return <>
                 <Spinner animation="border" variant="primary" size="sm" /> Running for {dur}
-                &nbsp;
-                <FontAwesomeIcon size="sm" color="red" icon={faWindowClose} title="Cancel task" onClick={() => cancelTask(task.id)} />
-            </>;
-
+                <button className="btn btn-sm btn-link" type="button" onClick={() => cancelTask(task.id)}>
+                    <FontAwesomeIcon color="red" size='lg' title="Cancel task" icon={faXmark} />
+                </button>
+            </>
         case "SUCCESS":
             return <p title={dur}><FontAwesomeIcon icon={faCheck} color="green" /> Finished in {dur}</p>;