From d93c4c95c5ac23ec4520800c9bdbad84f965dd9a Mon Sep 17 00:00:00 2001
From: c-r-dev <crangavajha1@bloomberg.net>
Date: Tue, 7 Jan 2025 13:16:53 -0500
Subject: [PATCH] fixed linting

Signed-off-by: c-r-dev <crangavajha1@bloomberg.net>
---
 .../components/dataTable/SortedDataTable.tsx  | 72 +++++++++----------
 web/vtadmin/src/components/routes/Schemas.tsx | 62 +++++++++-------
 2 files changed, 73 insertions(+), 61 deletions(-)

diff --git a/web/vtadmin/src/components/dataTable/SortedDataTable.tsx b/web/vtadmin/src/components/dataTable/SortedDataTable.tsx
index f74e81c9c3c..b856ee7f7c6 100644
--- a/web/vtadmin/src/components/dataTable/SortedDataTable.tsx
+++ b/web/vtadmin/src/components/dataTable/SortedDataTable.tsx
@@ -24,9 +24,9 @@ import { useCallback, useMemo, useState } from 'react';
 
 export interface ColumnProps {
     // Coulmn display name string | JSX.Element
-    display: string| JSX.Element,
-    // Column data accessor 
-    accessor: string
+    display: string | JSX.Element;
+    // Column data accessor
+    accessor: string;
 }
 
 interface Props<T> {
@@ -79,53 +79,53 @@ export const SortedDataTable = <T extends object>({
     const [sortColumn, setSortColumn] = useState(null);
     const [sortOrder, setSortOrder] = useState('asc');
 
-    const handleSort = useCallback((column: any) => {
-        if (sortColumn === column) {
-          setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
-        } else {
-          setSortColumn(column);
-          setSortOrder('asc');
-        }
-      }, [sortColumn, sortOrder]);
-    
-      const sortedData = useMemo(() => {
+    const handleSort = useCallback(
+        (column: any) => {
+            if (sortColumn === column) {
+                setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
+            } else {
+                setSortColumn(column);
+                setSortOrder('asc');
+            }
+        },
+        [sortColumn, sortOrder]
+    );
+
+    const sortedData = useMemo(() => {
         if (!sortColumn) return data;
-      
-        const compare = (a: { [x: string]: any; }, b: { [x: string]: any; }) => {
-          const valueA = a[sortColumn];
-          const valueB = b[sortColumn];
-    
-          if (valueA < valueB) {
-            return sortOrder === 'asc' ? -1 : 1;
-          } else if (valueA > valueB) {
-            return sortOrder === 'asc' ? 1 : -1;
-          } else {
-            return 0;
-          }
+
+        const compare = (a: { [x: string]: any }, b: { [x: string]: any }) => {
+            const valueA = a[sortColumn];
+            const valueB = b[sortColumn];
+
+            if (valueA < valueB) {
+                return sortOrder === 'asc' ? -1 : 1;
+            } else if (valueA > valueB) {
+                return sortOrder === 'asc' ? 1 : -1;
+            } else {
+                return 0;
+            }
         };
-    
+
         return [...data].sort(compare);
-      }, [data, sortColumn, sortOrder]);
+    }, [data, sortColumn, sortOrder]);
 
     const dataPage = sortedData.slice(startIndex, endIndex);
 
-
     return (
         <div>
             <table>
                 {title && <caption>{title}</caption>}
                 <thead>
                     <tr>
-                    {columns.map((col, cdx) => (
-                        <th key={cdx} onClick={()=> handleSort(col.accessor)}>
+                        {columns.map((col, cdx) => (
+                            <th key={cdx} onClick={() => handleSort(col.accessor)}>
                                 <div style={{ display: 'flex' }}>
-                                {col.display}
-                                {sortColumn === col.accessor && (
-                                <span>{sortOrder === 'asc' ? '▲' : '▼'}</span>
-                                )}
+                                    {col.display}
+                                    {sortColumn === col.accessor && <span>{sortOrder === 'asc' ? '▲' : '▼'}</span>}
                                 </div>
-                        </th>
-                    ))}
+                            </th>
+                        ))}
                     </tr>
                 </thead>
                 <tbody>{renderRows(dataPage)}</tbody>
diff --git a/web/vtadmin/src/components/routes/Schemas.tsx b/web/vtadmin/src/components/routes/Schemas.tsx
index d7ac9f4a708..e1a9f2031da 100644
--- a/web/vtadmin/src/components/routes/Schemas.tsx
+++ b/web/vtadmin/src/components/routes/Schemas.tsx
@@ -33,31 +33,43 @@ import { KeyspaceLink } from '../links/KeyspaceLink';
 import { QueryLoadingPlaceholder } from '../placeholders/QueryLoadingPlaceholder';
 import { HelpTooltip } from '../tooltip/HelpTooltip';
 
-const TABLE_COLUMNS : Array<ColumnProps> = [
-    {display: 'Keyspace', accessor : 'keyspace'},
-    {display: 'Table' , accessor : 'table'},
-    {display : <div className="text-right">
-        Approx. Size{' '}
-        <HelpTooltip
-            text={
-                <span>
-                    Size is an approximate value derived from <span className="font-mono">INFORMATION_SCHEMA</span>.
-                </span>
-            }
-        />
-    </div>, accessor : '_tableSize'},
-    {display: <div className="text-right">
-        Approx. Rows{' '}
-        <HelpTooltip
-            text={
-                // c.f. https://dev.mysql.com/doc/refman/5.7/en/information-schema-tables-table.html
-                <span>
-                    Row count is an approximate value derived from <span className="font-mono">INFORMATION_SCHEMA</span>
-                    . Actual values may vary by as much as 40% to 50%.
-                </span>
-            }
-        />
-    </div>, accessor : '_tableRowCount'},
+const TABLE_COLUMNS: Array<ColumnProps> = [
+    { display: 'Keyspace', accessor: 'keyspace' },
+    { display: 'Table', accessor: 'table' },
+    {
+        display: (
+            <div className="text-right">
+                Approx. Size{' '}
+                <HelpTooltip
+                    text={
+                        <span>
+                            Size is an approximate value derived from{' '}
+                            <span className="font-mono">INFORMATION_SCHEMA</span>.
+                        </span>
+                    }
+                />
+            </div>
+        ),
+        accessor: '_tableSize',
+    },
+    {
+        display: (
+            <div className="text-right">
+                Approx. Rows{' '}
+                <HelpTooltip
+                    text={
+                        // c.f. https://dev.mysql.com/doc/refman/5.7/en/information-schema-tables-table.html
+                        <span>
+                            Row count is an approximate value derived from{' '}
+                            <span className="font-mono">INFORMATION_SCHEMA</span>. Actual values may vary by as much as
+                            40% to 50%.
+                        </span>
+                    }
+                />
+            </div>
+        ),
+        accessor: '_tableRowCount',
+    },
 ];
 
 export const Schemas = () => {