From e5c3d3eb6f355b2387dbf11ec4741f552f06a76d Mon Sep 17 00:00:00 2001
From: Christoph Anderson <37236531+lupusA@users.noreply.github.com>
Date: Sat, 9 Dec 2023 11:52:53 +0100
Subject: [PATCH] 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.
---
 src/App.jsx             | 26 +++++++++++++++++---------
 src/pages/Snapshots.jsx |  2 +-
 src/utils/uiutil.jsx    | 10 +++++-----
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 573c24c..6669ff9 100644
--- 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
index de4de36..ffabeaa 100644
--- 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
index 09562c1..ddcee21 100644
--- 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>;