Merge pull request #1017 from rainlanguage/22/11/24-bug-fixes-new

22/11/24 bug fixes
rainlanguage · Nov 22, 2024 · db828aa · db828aa
2 parents 8ffe39d + ea6b770
commit db828aa
Show file tree

Hide file tree

Showing 13 changed files with 89 additions and 44 deletions.
diff --git a/packages/ui-components/eslint.config.js b/packages/ui-components/eslint.config.js
@@ -16,6 +16,10 @@ export default ts.config(
 				...globals.browser,
 				...globals.node
 			}
+		},
+		rules: {
+			'no-console': process.env.NODE_ENV === 'production' || process.env.CI ? 'error' : 'off',
+			'no-trailing-spaces': 'error'
 		}
 	},
 	{

diff --git a/packages/ui-components/src/__tests__/ListViewOrderbookFilters.test.ts b/packages/ui-components/src/__tests__/ListViewOrderbookFilters.test.ts
@@ -3,9 +3,7 @@ import { writable } from 'svelte/store';
 import { beforeEach, expect, test, describe } from 'vitest';
 import ListViewOrderbookFilters from '../lib/components/ListViewOrderbookFilters.svelte';
 import type { ConfigSource } from '../lib/typeshare/config';
-import userEvent from '@testing-library/user-event';
 import { createResolvableInfiniteQuery } from '../lib/__mocks__/queries';
-import type { CreateInfiniteQueryResult, InfiniteData } from '@tanstack/svelte-query';
 import type { ComponentProps } from 'svelte';
 
 // Get the props type from the component
@@ -105,27 +103,4 @@ describe('ListViewOrderbookFilters', () => {
 		expect(screen.queryByTestId('order-hash-input')).not.toBeInTheDocument();
 		expect(screen.queryByTestId('order-status-dropdown')).not.toBeInTheDocument();
 	});
-
-	test('refetches data when refresh button is clicked', async () => {
-		const mockRefetch = vi.fn();
-		const mockQuery = writable({
-			status: 'success',
-			fetchStatus: 'idle',
-			refetch: mockRefetch
-			// ... other required properties
-		});
-
-		render(ListViewOrderbookFilters, {
-			...defaultProps,
-			query: mockQuery as unknown as CreateInfiniteQueryResult<
-				InfiniteData<unknown[], unknown>,
-				Error
-			>
-		});
-
-		const refreshButton = screen.getByTestId('refresh-button');
-		await userEvent.click(refreshButton);
-
-		expect(mockRefetch).toHaveBeenCalled();
-	});
 });
diff --git a/packages/ui-components/src/__tests__/TanstackAppTable.test.ts b/packages/ui-components/src/__tests__/TanstackAppTable.test.ts
@@ -3,6 +3,8 @@ import { test, expect } from 'vitest';
 import TanstackAppTableTest from './TanstackAppTable.test.svelte';
 import userEvent from '@testing-library/user-event';
 import { createResolvableInfiniteQuery } from '../lib/__mocks__/queries';
+import { writable } from 'svelte/store';
+import type { CreateInfiniteQueryResult, InfiniteData } from '@tanstack/svelte-query';
 
 test('shows head and title', async () => {
 	const { query, resolve } = createResolvableInfiniteQuery((pageParam) => {
@@ -132,3 +134,44 @@ test('load more button message changes when loading', async () => {
 		expect(screen.getByTestId('loadMoreButton')).toHaveTextContent('Load More');
 	});
 });
+
+test('shows refresh icon', async () => {
+	const { query, resolve } = createResolvableInfiniteQuery((pageParam) => {
+		return ['page' + pageParam];
+	});
+
+	render(TanstackAppTableTest, {
+		query,
+		emptyMessage: 'No rows',
+		title: 'Test Table',
+		head: 'Test head'
+	});
+
+	resolve();
+
+	await waitFor(() => expect(screen.getByTestId('refreshButton')).toBeInTheDocument());
+});
+
+test('refetches data when refresh button is clicked', async () => {
+	const mockRefetch = vi.fn();
+	const mockQuery = writable({
+		status: 'success',
+		fetchStatus: 'idle',
+		refetch: mockRefetch
+	});
+
+	render(TanstackAppTableTest, {
+		query: mockQuery as unknown as CreateInfiniteQueryResult<
+			InfiniteData<unknown[], unknown>,
+			Error
+		>,
+		emptyMessage: 'No rows',
+		title: 'Test Table',
+		head: 'Test head'
+	});
+
+	const refreshButton = screen.getByTestId('refreshButton');
+	await userEvent.click(refreshButton);
+
+	expect(mockRefetch).toHaveBeenCalled();
+});
diff --git a/packages/ui-components/src/lib/components/ListViewOrderbookFilters.svelte b/packages/ui-components/src/lib/components/ListViewOrderbookFilters.svelte
@@ -1,15 +1,13 @@
 <script lang="ts" generics="T">
 	import { isEmpty } from 'lodash';
 	import { Alert } from 'flowbite-svelte';
-	import Refresh from './icon/Refresh.svelte';
 	import DropdownActiveSubgraphs from './dropdown/DropdownActiveSubgraphs.svelte';
 	import DropdownOrderStatus from './dropdown/DropdownOrderStatus.svelte';
 	import DropdownOrderListAccounts from './dropdown/DropdownOrderListAccounts.svelte';
 	import InputOrderHash from './input/InputOrderHash.svelte';
 	import CheckboxZeroBalanceVault from './CheckboxZeroBalanceVault.svelte';
 	import type { Readable, Writable } from 'svelte/store';
 	import type { ConfigSource } from '../typeshare/config';
-	import type { CreateInfiniteQueryResult, InfiniteData } from '@tanstack/svelte-query';
 
 	export let settings: Writable<ConfigSource | undefined>;
 	export let accounts: Readable<Record<string, string>>;
@@ -20,18 +18,9 @@
 	export let orderHash: Writable<string>;
 	export let isVaultsPage: boolean;
 	export let isOrdersPage: boolean;
-	export let query: CreateInfiniteQueryResult<InfiniteData<unknown[], unknown>, Error>;
 </script>
 
 <div class="flex min-w-[600px] items-center justify-end gap-x-2">
-	<Refresh
-		data-testid="refresh-button"
-		class="mr-2 mt-4 h-6 w-6 cursor-pointer text-gray-400 dark:text-gray-400"
-		spin={$query.isLoading || $query.isFetching}
-		on:click={() => {
-			$query.refetch();
-		}}
-	/>
 	{#if isEmpty($settings?.networks)}
 		<Alert color="gray" data-testid="no-networks-alert">
 			No networks added to <a class="underline" href="/settings">settings</a>

diff --git a/packages/ui-components/src/lib/components/TanstackAppTable.svelte b/packages/ui-components/src/lib/components/TanstackAppTable.svelte
@@ -1,4 +1,6 @@
 <script lang="ts" generics="T">
+	import Refresh from './icon/Refresh.svelte';
+
 	import type { CreateInfiniteQueryResult, InfiniteData } from '@tanstack/svelte-query';
 	import { Button, Table, TableBody, TableBodyRow, TableHead } from 'flowbite-svelte';
 	import { createEventDispatcher } from 'svelte';
@@ -15,6 +17,14 @@
 	<slot name="info" />
 	<slot name="timeFilter" />
 	<slot name="title" />
+	<Refresh
+		data-testid="refreshButton"
+		class="ml-2 h-8 w-5 cursor-pointer text-gray-400 dark:text-gray-400"
+		spin={$query.isLoading || $query.isFetching}
+		on:click={() => {
+			$query.refetch();
+		}}
+	/>
 </div>
 {#if $query.data?.pages[0].length === 0}
 	<div data-testid="emptyMessage" class="text-center text-gray-900 dark:text-white">

diff --git a/packages/ui-components/src/lib/components/tables/OrdersListTable.svelte b/packages/ui-components/src/lib/components/tables/OrdersListTable.svelte
@@ -1,4 +1,6 @@
 <script lang="ts" generics="T">
+	import { goto } from '$app/navigation';
+
 	import { DotsVerticalOutline } from 'flowbite-svelte-icons';
 	import { type OrderWithSubgraphName } from '@rainlanguage/orderbook/js_api';
 	import { createInfiniteQuery } from '@tanstack/svelte-query';
@@ -34,6 +36,8 @@
 	export let orderHash: AppStoresInterface['orderHash'];
 	export let hideZeroBalanceVaults: AppStoresInterface['hideZeroBalanceVaults'];
 	export let currentRoute: string;
+	export let activeNetworkRef: AppStoresInterface['activeNetworkRef'];
+	export let activeOrderbookRef: AppStoresInterface['activeOrderbookRef'];
 
 	$: multiSubgraphArgs = Object.entries(
 		Object.keys($activeSubgraphs ?? {}).length ? $activeSubgraphs : ($settings?.subgraphs ?? {})
@@ -76,14 +80,11 @@
 
 	const AppTable = TanstackAppTable<OrderWithSubgraphName>;
 
-	$: console.log($query);
-
 	$: isVaultsPage = currentRoute.startsWith('/vaults');
 	$: isOrdersPage = currentRoute.startsWith('/orders');
 </script>
 
 <ListViewOrderbookFilters
-	{query}
 	{activeSubgraphs}
 	{settings}
 	{accounts}
@@ -95,7 +96,15 @@
 	{isOrdersPage}
 />
 
-<AppTable {query}>
+<AppTable
+	{query}
+	emptyMessage="No Orders Found"
+	on:clickRow={(e) => {
+		activeNetworkRef.set(e.detail.item.subgraphName);
+		activeOrderbookRef.set(e.detail.item.subgraphName);
+		goto(`/orders/${e.detail.item.order.id}`);
+	}}
+>
 	<svelte:fragment slot="title">
 		<slot name="filters" />
 	</svelte:fragment>

diff --git a/packages/ui-components/src/lib/types/appStores.ts b/packages/ui-components/src/lib/types/appStores.ts
@@ -8,4 +8,6 @@ export interface AppStoresInterface {
 	activeOrderStatus: Writable<boolean | undefined>;
 	orderHash: Writable<string>;
 	hideZeroBalanceVaults: Writable<boolean>;
+	activeNetworkRef: Writable<string | undefined>;
+	activeOrderbookRef: Writable<string | undefined>;
 }
diff --git a/packages/webapp/eslint.config.js b/packages/webapp/eslint.config.js
@@ -16,6 +16,10 @@ export default ts.config(
 				...globals.browser,
 				...globals.node
 			}
+		},
+		rules: {
+			'no-console': process.env.NODE_ENV === 'production' || process.env.CI ? 'error' : 'off',
+			'no-trailing-spaces': 'error'
 		}
 	},
 	{

diff --git a/packages/webapp/src/routes/+layout.ts b/packages/webapp/src/routes/+layout.ts
@@ -17,7 +17,9 @@ export const load = () => {
 			activeAccountsItems: writable<Record<string, string>>({}),
 			activeOrderStatus: writable<boolean | undefined>(undefined),
 			orderHash: writable<string>(''),
-			hideZeroBalanceVaults: writable<boolean>(false)
+			hideZeroBalanceVaults: writable<boolean>(false),
+			activeNetworkRef: writable<string>(''),
+			activeOrderbookRef: writable<string>('')
 		}
 	};
 };

diff --git a/packages/webapp/src/routes/orders/+page.svelte b/packages/webapp/src/routes/orders/+page.svelte
@@ -10,13 +10,17 @@
 		activeAccountsItems,
 		activeOrderStatus,
 		orderHash,
-		hideZeroBalanceVaults
+		hideZeroBalanceVaults,
+		activeNetworkRef,
+		activeOrderbookRef
 	}: AppStoresInterface = $page.data.stores;
 
 	$: currentRoute = $page.url.pathname;
 </script>
 
 <OrdersListTable
+	{activeNetworkRef}
+	{activeOrderbookRef}
 	{activeSubgraphs}
 	{settings}
 	{accounts}

diff --git a/tauri-app/.eslintrc.cjs b/tauri-app/.eslintrc.cjs
@@ -29,7 +29,7 @@ module.exports = {
     },
   ],
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+		'no-console': process.env.NODE_ENV === 'production' || process.env.CI ? 'error' : 'off',
     'no-trailing-spaces': 'error',
     "@typescript-eslint/no-unused-vars": [
       "error",

diff --git a/tauri-app/src/lib/components/tables/VaultListTable.svelte b/tauri-app/src/lib/components/tables/VaultListTable.svelte
@@ -95,7 +95,6 @@
         </div>
         <div class="flex flex-col items-end gap-y-2">
           <ListViewOrderbookFilters
-            {query}
             {activeSubgraphs}
             {settings}
             {accounts}

diff --git a/tauri-app/src/routes/orders/+page.svelte b/tauri-app/src/routes/orders/+page.svelte
@@ -17,6 +17,8 @@
     resetActiveNetworkRef,
     resetActiveOrderbookRef,
     activeOrderbook,
+    activeNetworkRef,
+    activeOrderbookRef,
   } from '$lib/stores/settings';
   import { page } from '$app/stores';
 
@@ -33,6 +35,8 @@
 <PageHeader title="Orders" />
 
 <OrdersListTable
+  {activeNetworkRef}
+  {activeOrderbookRef}
   {walletAddressMatchesOrBlank}
   {handleOrderRemoveModal}
   {activeSubgraphs}