From 1b25005b84be1b73a6270cd68d455ae56f03b67a Mon Sep 17 00:00:00 2001
From: Stan Bondi <sdbondi@users.noreply.github.com>
Date: Fri, 5 Jan 2024 17:26:56 +0400
Subject: [PATCH] add name to templates list

---
 .../src/routes/VN/Components/Templates.tsx    | 136 +++++++++---------
 1 file changed, 70 insertions(+), 66 deletions(-)

diff --git a/applications/tari_validator_node_web_ui/src/routes/VN/Components/Templates.tsx b/applications/tari_validator_node_web_ui/src/routes/VN/Components/Templates.tsx
index 4302eabda0..8db2d04886 100644
--- a/applications/tari_validator_node_web_ui/src/routes/VN/Components/Templates.tsx
+++ b/applications/tari_validator_node_web_ui/src/routes/VN/Components/Templates.tsx
@@ -20,32 +20,32 @@
 //  WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE
 //  USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import { useEffect, useState } from 'react';
-import { getTemplates } from '../../../utils/json_rpc';
-import { shortenString } from './helpers';
-import './Templates.css';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
+import { useEffect, useState } from "react";
+import { getTemplates } from "../../../utils/json_rpc";
+import { shortenString } from "./helpers";
+import "./Templates.css";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
 import {
   DataTableCell,
   BoxHeading2,
-} from '../../../Components/StyledComponents';
-import { Link } from 'react-router-dom';
-import CopyToClipboard from '../../../Components/CopyToClipboard';
-import IconButton from '@mui/material/IconButton';
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-import HeadingMenu from '../../../Components/HeadingMenu';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import TablePagination from '@mui/material/TablePagination';
-import SearchFilter from '../../../Components/SearchFilter';
-import Typography from '@mui/material/Typography';
-import Fade from '@mui/material/Fade';
-import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
+} from "../../../Components/StyledComponents";
+import { Link } from "react-router-dom";
+import CopyToClipboard from "../../../Components/CopyToClipboard";
+import IconButton from "@mui/material/IconButton";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import HeadingMenu from "../../../Components/HeadingMenu";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import TablePagination from "@mui/material/TablePagination";
+import SearchFilter from "../../../Components/SearchFilter";
+import Typography from "@mui/material/Typography";
+import Fade from "@mui/material/Fade";
+import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
 
 export interface ITemplate {
   id: string;
@@ -62,7 +62,7 @@ type ColumnKey = keyof ITemplate;
 
 function Templates() {
   const [templates, setTemplates] = useState<ITemplate[]>([]);
-  const [lastSort, setLastSort] = useState({ column: '', order: -1 });
+  const [lastSort, setLastSort] = useState({ column: "", order: -1 });
 
   useEffect(() => {
     getTemplates(10).then((response) => {
@@ -86,18 +86,18 @@ function Templates() {
               name,
               url,
               show,
-            })
-          )
+            }),
+          ),
       );
     });
   }, []);
 
   const toHex = (str: Uint8Array) => {
     return (
-      '0x' +
+      "0x" +
       Array.prototype.map
-        .call(str, (x: number) => ('00' + x.toString(16)).slice(-2))
-        .join('')
+        .call(str, (x: number) => ("00" + x.toString(16)).slice(-2))
+        .join("")
     );
   };
 
@@ -109,8 +109,12 @@ function Templates() {
     if (column) {
       setTemplates(
         [...templates].sort((r0: any, r1: any) =>
-          r0[column] > r1[column] ? order : r0[column] < r1[column] ? -order : 0
-        )
+          r0[column] > r1[column]
+            ? order
+            : r0[column] < r1[column]
+            ? -order
+            : 0,
+        ),
       );
       setLastSort({ column, order });
     }
@@ -128,7 +132,7 @@ function Templates() {
   };
 
   const handleChangeRowsPerPage = (
-    event: React.ChangeEvent<HTMLInputElement>
+    event: React.ChangeEvent<HTMLInputElement>,
   ) => {
     setRowsPerPage(parseInt(event.target.value, 10));
     setPage(0);
@@ -143,14 +147,14 @@ function Templates() {
           setPage={setPage}
           filterItems={[
             {
-              title: 'Template Address',
-              value: 'id',
+              title: "Template Address",
+              value: "id",
               filterFn: (value: string, row: ITemplate) =>
                 row.id.toLowerCase().includes(value.toLowerCase()),
             },
             {
-              title: 'Mined Height',
-              value: 'height',
+              title: "Mined Height",
+              value: "height",
               filterFn: (value: string, row: ITemplate) =>
                 row.height.toString().includes(value),
             },
@@ -162,18 +166,18 @@ function Templates() {
         <Table>
           <TableHead>
             <TableRow>
-              <TableCell style={{ minWidth: '300px' }}>
+              <TableCell style={{ minWidth: "300px" }}>
                 <HeadingMenu
                   menuTitle="Address"
                   menuItems={[
                     {
-                      title: 'Sort Ascending',
-                      fn: () => sort('id', 1),
+                      title: "Sort Ascending",
+                      fn: () => sort("id", 1),
                       icon: <KeyboardArrowUpIcon />,
                     },
                     {
-                      title: 'Sort Descending',
-                      fn: () => sort('id', -1),
+                      title: "Sort Descending",
+                      fn: () => sort("id", -1),
                       icon: <KeyboardArrowDownIcon />,
                     },
                   ]}
@@ -183,19 +187,20 @@ function Templates() {
                   sortFunction={sort}
                 />
               </TableCell>
+              <TableCell>Name</TableCell>
               <TableCell>Download URL</TableCell>
-              <TableCell style={{ textAlign: 'center', width: '210px' }}>
+              <TableCell style={{ textAlign: "center", width: "210px" }}>
                 <HeadingMenu
                   menuTitle="Mined Height"
                   menuItems={[
                     {
-                      title: 'Sort Ascending',
-                      fn: () => sort('height', 1),
+                      title: "Sort Ascending",
+                      fn: () => sort("height", 1),
                       icon: <KeyboardArrowUpIcon />,
                     },
                     {
-                      title: 'Sort Descending',
-                      fn: () => sort('height', -1),
+                      title: "Sort Descending",
+                      fn: () => sort("height", -1),
                       icon: <KeyboardArrowDownIcon />,
                     },
                   ]}
@@ -205,26 +210,27 @@ function Templates() {
                   sortFunction={sort}
                 />
               </TableCell>
-              <TableCell style={{ textAlign: 'center' }}>Status</TableCell>
-              <TableCell style={{ textAlign: 'center' }}>Functions</TableCell>
+              <TableCell style={{ textAlign: "center" }}>Status</TableCell>
+              <TableCell style={{ textAlign: "center" }}>Functions</TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
             {templates
-              .filter(({ show }) => show === true)
+              .filter(({ show }) => show)
               .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-              .map(({ address, binary_sha, height, url, id }) => (
+              .map(({ address, binary_sha, height, url, id, name }) => (
                 <TableRow key={id}>
                   <DataTableCell>
                     <Link
                       to={`/templates/${toHex(address)}`}
                       state={[address]}
-                      style={{ textDecoration: 'none' }}
+                      style={{ textDecoration: "none" }}
                     >
                       {shortenString(toHex(address))}
                     </Link>
                     <CopyToClipboard copy={toHex(address)} />
                   </DataTableCell>
+                  <DataTableCell>{name}</DataTableCell>
                   <DataTableCell>
                     {url && (
                       <>
@@ -233,10 +239,10 @@ function Templates() {
                           target="_blank"
                           rel="noreferrer"
                           style={{
-                            textDecoration: 'none',
-                            display: 'inline-flex',
-                            gap: '10px',
-                            alignItems: 'center',
+                            textDecoration: "none",
+                            display: "inline-flex",
+                            gap: "10px",
+                            alignItems: "center",
                           }}
                         >
                           Download
@@ -244,8 +250,8 @@ function Templates() {
                             <FileDownloadOutlinedIcon
                               color="primary"
                               style={{
-                                width: '18px',
-                                height: '18px',
+                                width: "18px",
+                                height: "18px",
                               }}
                             />
                           </IconButton>
@@ -253,13 +259,13 @@ function Templates() {
                       </>
                     )}
                   </DataTableCell>
-                  <DataTableCell style={{ textAlign: 'center' }}>
+                  <DataTableCell style={{ textAlign: "center" }}>
                     {height}
                   </DataTableCell>
-                  <DataTableCell style={{ textAlign: 'center' }}>
+                  <DataTableCell style={{ textAlign: "center" }}>
                     Active
                   </DataTableCell>
-                  <DataTableCell style={{ textAlign: 'center' }}>
+                  <DataTableCell style={{ textAlign: "center" }}>
                     <Link to={`/templates/${toHex(address)}`} state={[address]}>
                       <IconButton>
                         <KeyboardArrowRightIcon color="primary" />
@@ -268,13 +274,11 @@ function Templates() {
                   </DataTableCell>
                 </TableRow>
               ))}
-            {templates.filter(({ show }) => show === true).length === 0 && (
+            {templates.filter(({ show }) => show).length === 0 && (
               <TableRow>
-                <TableCell colSpan={4} style={{ textAlign: 'center' }}>
+                <TableCell colSpan={4} style={{ textAlign: "center" }}>
                   <Fade
-                    in={
-                      templates.filter(({ show }) => show === true).length === 0
-                    }
+                    in={templates.filter(({ show }) => show).length === 0}
                     timeout={500}
                   >
                     <Typography variant="h5">No results found</Typography>
@@ -296,7 +300,7 @@ function Templates() {
         <TablePagination
           rowsPerPageOptions={[10, 25, 50]}
           component="div"
-          count={templates.filter((template) => template.show === true).length}
+          count={templates.filter((template) => template.show).length}
           rowsPerPage={rowsPerPage}
           page={page}
           onPageChange={handleChangePage}