From 54a954f8c32258dbd702aa129b598473aa7648ea Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Sat, 3 Dec 2022 15:07:58 +0100
Subject: [PATCH] feat(riot-mui): upgrade tag-list components (table, list,
 remove image and tag history button)

---
 .../tag-list/copy-to-clipboard.riot           |  6 +++--
 src/components/tag-list/remove-image.riot     |  6 +++--
 .../tag-list/tag-history-button.riot          | 10 +++++----
 src/components/tag-list/tag-list.riot         |  9 +++++++-
 src/components/tag-list/tag-table.riot        | 22 ++++++++++---------
 src/scripts/router.js                         |  4 ++--
 6 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/src/components/tag-list/copy-to-clipboard.riot b/src/components/tag-list/copy-to-clipboard.riot
index 75ac13a..7bc0daa 100644
--- a/src/components/tag-list/copy-to-clipboard.riot
+++ b/src/components/tag-list/copy-to-clipboard.riot
@@ -18,11 +18,13 @@
   <div class="copy-to-clipboard">
     <input style="display: none; width: 1px; height: 1px" value="{ getDockerCmd(props) }" />
     <material-button
-      waves-center="true"
-      rounded="true"
+      color="rgba(0,0,0,0)"
+      text-color="#777"
       waves-color="#ddd"
+      waves-center="true"
       onClick="{ copy }"
       title="Copy pull command."
+      icon
     >
       <i class="material-icons">content_copy</i>
     </material-button>
diff --git a/src/components/tag-list/remove-image.riot b/src/components/tag-list/remove-image.riot
index f518ab5..8eefc65 100644
--- a/src/components/tag-list/remove-image.riot
+++ b/src/components/tag-list/remove-image.riot
@@ -16,13 +16,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <remove-image>
   <material-button
-    waves-center="true"
-    rounded="true"
+    color="rgba(0,0,0,0)"
+    text-color="#777"
     waves-color="#ddd"
+    waves-center="true"
     title="This will delete the image."
     if="{ !props.multiDelete }"
     disabled="{ !state.contentDigest }"
     onClick="{ deleteImage }"
+    icon
   >
     <i class="material-icons">delete</i>
   </material-button>
diff --git a/src/components/tag-list/tag-history-button.riot b/src/components/tag-list/tag-history-button.riot
index 8595f18..8a6692d 100644
--- a/src/components/tag-list/tag-history-button.riot
+++ b/src/components/tag-list/tag-history-button.riot
@@ -17,11 +17,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <tag-history-button>
   <material-button
     title="{ buttonTittle() }"
-    waves-center="true"
-    rounded="true"
+    color="rgba(0,0,0,0)"
+    text-color="#777"
     waves-color="#ddd"
-    onClick="{ routeToHistory }"
+    waves-center="true"
+    href="{ routeToHistory() }"
     disabled="{ props.image.ociImage }"
+    icon
   >
     <i class="material-icons">history</i>
   </material-button>
@@ -40,7 +42,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       },
       routeToHistory() {
         if (!this.props.image.ociImage) {
-          router.history(this.props.image.name, this.props.image.tag);
+          return router.history(this.props.image.name, this.props.image.tag);
         }
       },
     };
diff --git a/src/components/tag-list/tag-list.riot b/src/components/tag-list/tag-list.riot
index 65ddf18..7c8c1c7 100644
--- a/src/components/tag-list/tag-list.riot
+++ b/src/components/tag-list/tag-list.riot
@@ -17,7 +17,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <tag-list>
   <material-card class="header">
     <div class="material-card-title-action">
-      <material-button waves-center="true" rounded="true" waves-color="#ddd" onClick="{ router.home }">
+      <material-button
+        color="#fff"
+        text-color="#777"
+        waves-color="#ddd"
+        waves-center="true"
+        href="{ router.home() }"
+        icon
+      >
         <i class="material-icons">arrow_back</i>
       </material-button>
       <h2>
diff --git a/src/components/tag-list/tag-table.riot b/src/components/tag-list/tag-table.riot
index 795d3b9..3fa6e22 100644
--- a/src/components/tag-list/tag-table.riot
+++ b/src/components/tag-list/tag-table.riot
@@ -63,12 +63,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             >
             </material-checkbox>
             <material-button
+              if="{ state.toDelete.size > 0 && !state.singleDeleteAction }"
               waves-center="true"
-              rounded="true"
+              color="#fff"
+              text-color="#777"
               waves-color="#ddd"
               title="This will delete selected images."
               onClick="{ deleteImages }"
-              if="{ state.toDelete.size > 0 && !state.singleDeleteAction }"
+              icon
             >
               <i class="material-icons">delete</i>
             </material-button>
@@ -78,31 +80,31 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       <tbody>
         <tr each="{ image in getPage(props.tags, props.page) }" if="{ matchSearch(props.filterResults, image.tag) }">
           <td class="creation-date">
-            <image-date image="{ image }" />
+            <image-date image="{ image }"></image-date>
           </td>
           <td class="image-size">
-            <image-size image="{ image }" />
+            <image-size image="{ image }"></image-size>
           </td>
           <td if="{ props.showContentDigest }">
-            <image-content-digest image="{ image }" />
+            <image-content-digest image="{ image }"></image-content-digest>
             <copy-to-clipboard
               target="digest"
               image="{ image }"
               pull-url="{ props.pullUrl }"
               on-notify="{ props.onNotify }"
-            />
+            ></copy-to-clipboard>
           </td>
           <td>
-            <image-tag image="{ image }" />
+            <image-tag image="{ image }"></image-tag>
             <copy-to-clipboard
               target="tag"
               image="{ image }"
               pull-url="{ props.pullUrl }"
               on-notify="{ props.onNotify }"
-            />
+            ></copy-to-clipboard>
           </td>
           <td class="show-tag-history">
-            <tag-history-button image="{ image }" />
+            <tag-history-button image="{ image }"></tag-history-button>
           </td>
           <td if="{ props.isImageRemoveActivated }" class="remove-tag">
             <remove-image
@@ -113,7 +115,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
               checked="{ state.toDelete.has(image) }"
               on-notify="{ props.onNotify }"
               on-authentication="{ props.onAuthentication }"
-            />
+            ></remove-image>
           </td>
         </tr>
       </tbody>
diff --git a/src/scripts/router.js b/src/scripts/router.js
index e8fc42e..99534ee 100644
--- a/src/scripts/router.js
+++ b/src/scripts/router.js
@@ -59,7 +59,7 @@ function baseUrl(qs) {
 
 export default {
   home() {
-    router.push(baseUrl({ page: null }));
+    return baseUrl({ page: null });
   },
   taglist(image) {
     router.push(`${baseUrl({ page: null })}#!/taglist/${image}`);
@@ -68,7 +68,7 @@ export default {
     return getCurrentRoute().replace(/^.*(#!)?\/?taglist\//, '');
   },
   history(image, tag) {
-    router.push(`${baseUrl({ page: null })}#!/taghistory/image/${image}/tag/${tag}`);
+    return `${baseUrl({ page: null })}#!/taghistory/image/${image}/tag/${tag}`;
   },
   getTagHistoryImage() {
     return getCurrentRoute().replace(/^.*(#!)?\/?taghistory\/image\/(.*)\/tag\/(.*)\/?$/, '$2');