Skip to content

Commit b10f569

Browse files
cprussincprussin
committed
feat(insights): improve some minor table search UX items
- Fix column widths so they don't change when the table is empty - Add empty states to some tables that were missing them - Add more useful search placeholders
1 parent e35e701 commit b10f569

File tree

8 files changed

+66
-29
lines changed

8 files changed

+66
-29
lines changed

‎apps/insights/src/components/PriceFeed/publishers-card.tsx

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { useFilter, useCollator } from "react-aria";
1818
import styles from "./publishers-card.module.scss";
1919
import { useQueryParamFilterPagination } from "../../use-query-param-filter-pagination";
2020
import { FormattedNumber } from "../FormattedNumber";
21+
import { NoResults } from "../NoResults";
2122
import { PublisherTag } from "../PublisherTag";
2223
import rootStyles from "../Root/index.module.scss";
2324
import { Score } from "../Score";
@@ -284,7 +285,8 @@ const PriceComponentsCardContents = ({
284285
</Switch>
285286
<SearchInput
286287
size="sm"
287-
width={40}
288+
width={60}
289+
placeholder="Publisher key or name"
288290
{...(props.isLoading
289291
? { isPending: true, isDisabled: true }
290292
: {
@@ -334,35 +336,35 @@ const PriceComponentsCardContents = ({
334336
id: "uptimeScore",
335337
name: "UPTIME SCORE",
336338
alignment: "center",
337-
width: 40,
339+
width: 35,
338340
allowsSorting: true,
339341
},
340342
{
341343
id: "deviationScore",
342344
name: "DEVIATION SCORE",
343345
alignment: "center",
344-
width: 40,
346+
width: 35,
345347
allowsSorting: true,
346348
},
347349
{
348350
id: "deviationPenalty",
349351
name: "DEVIATION PENALTY",
350352
alignment: "center",
351-
width: 40,
353+
width: 35,
352354
allowsSorting: true,
353355
},
354356
{
355357
id: "stalledScore",
356358
name: "STALLED SCORE",
357359
alignment: "center",
358-
width: 40,
360+
width: 35,
359361
allowsSorting: true,
360362
},
361363
{
362364
id: "stalledPenalty",
363365
name: "STALLED PENALTY",
364366
alignment: "center",
365-
width: 40,
367+
width: 35,
366368
allowsSorting: true,
367369
},
368370
]}
@@ -372,6 +374,14 @@ const PriceComponentsCardContents = ({
372374
rows: props.rows,
373375
sortDescriptor: props.sortDescriptor,
374376
onSortChange: props.onSortChange,
377+
renderEmptyState: () => (
378+
<NoResults
379+
query={props.search}
380+
onClearSearch={() => {
381+
props.onSearchChange("");
382+
}}
383+
/>
384+
),
375385
})}
376386
/>
377387
</Card>

‎apps/insights/src/components/PriceFeeds/coming-soon-list.tsx

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { type ReactNode, useMemo, useState } from "react";
88
import { useCollator, useFilter } from "react-aria";
99

1010
import styles from "./coming-soon-list.module.scss";
11+
import { NoResults } from "../NoResults";
1112
import { PriceFeedTag } from "../PriceFeedTag";
1213

1314
type Props = {
@@ -78,9 +79,10 @@ export const ComingSoonList = ({ comingSoonFeeds }: Props) => {
7879
<div className={styles.searchBar}>
7980
<SearchInput
8081
size="sm"
81-
defaultValue={search}
82+
value={search}
8283
onChange={setSearch}
83-
width={40}
84+
width={50}
85+
placeholder="Feed symbol"
8486
/>
8587
<Select
8688
optionGroups={[
@@ -104,15 +106,27 @@ export const ComingSoonList = ({ comingSoonFeeds }: Props) => {
104106
stickyHeader
105107
label="Coming Soon"
106108
className={styles.priceFeeds ?? ""}
109+
renderEmptyState={() => (
110+
<NoResults
111+
query={search}
112+
onClearSearch={() => {
113+
setSearch("");
114+
}}
115+
/>
116+
)}
107117
columns={[
108118
{
109119
id: "priceFeedName",
110120
name: "PRICE FEED",
111121
isRowHeader: true,
112-
fill: true,
113122
alignment: "left",
114123
},
115-
{ id: "assetClass", name: "ASSET CLASS", alignment: "right" },
124+
{
125+
id: "assetClass",
126+
name: "ASSET CLASS",
127+
alignment: "right",
128+
width: 40,
129+
},
116130
]}
117131
rows={rows}
118132
/>

‎apps/insights/src/components/PriceFeeds/price-feeds-card.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,8 @@ const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
261261
/>
262262
<SearchInput
263263
size="sm"
264-
width={40}
264+
width={50}
265+
placeholder="Feed symbol"
265266
{...(props.isLoading
266267
? { isPending: true, isDisabled: true }
267268
: {

‎apps/insights/src/components/Publisher/performance.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export const Performance = async ({ params }: Props) => {
5151
{
5252
id: "ranking",
5353
name: "RANKING",
54-
width: 30,
54+
width: 25,
5555
},
5656
{
5757
id: "name",
@@ -63,13 +63,13 @@ export const Performance = async ({ params }: Props) => {
6363
id: "activeFeeds",
6464
name: "ACTIVE FEEDS",
6565
alignment: "center",
66-
width: 40,
66+
width: 30,
6767
},
6868
{
6969
id: "inactiveFeeds",
7070
name: "INACTIVE FEEDS",
7171
alignment: "center",
72-
width: 45,
72+
width: 30,
7373
},
7474
{
7575
id: "medianScore",
@@ -148,20 +148,19 @@ const feedColumns = [
148148
id: "score" as const,
149149
name: "SCORE",
150150
alignment: "left" as const,
151-
width: 40,
151+
width: PUBLISHER_SCORE_WIDTH,
152152
},
153153
{
154154
id: "asset" as const,
155155
name: "ASSET",
156156
isRowHeader: true,
157157
alignment: "left" as const,
158-
fill: true,
159158
},
160159
{
161160
id: "assetClass" as const,
162161
name: "ASSET CLASS",
163162
alignment: "right" as const,
164-
width: 50,
163+
width: 40,
165164
},
166165
];
167166

‎apps/insights/src/components/Publisher/price-feeds-card.tsx

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { useFilter, useCollator } from "react-aria";
1313

1414
import { useQueryParamFilterPagination } from "../../use-query-param-filter-pagination";
1515
import { FormattedNumber } from "../FormattedNumber";
16+
import { NoResults } from "../NoResults";
1617
import { PriceFeedTag } from "../PriceFeedTag";
1718
import rootStyles from "../Root/index.module.scss";
1819
import { Score } from "../Score";
@@ -222,7 +223,8 @@ const PriceComponentsCardContents = ({
222223
toolbar={
223224
<SearchInput
224225
size="sm"
225-
width={40}
226+
width={60}
227+
placeholder="Feed symbol"
226228
{...(props.isLoading
227229
? { isPending: true, isDisabled: true }
228230
: {
@@ -271,35 +273,35 @@ const PriceComponentsCardContents = ({
271273
id: "uptimeScore",
272274
name: "UPTIME SCORE",
273275
alignment: "center",
274-
width: 40,
276+
width: 35,
275277
allowsSorting: true,
276278
},
277279
{
278280
id: "deviationScore",
279281
name: "DEVIATION SCORE",
280282
alignment: "center",
281-
width: 40,
283+
width: 35,
282284
allowsSorting: true,
283285
},
284286
{
285287
id: "deviationPenalty",
286288
name: "DEVIATION PENALTY",
287289
alignment: "center",
288-
width: 40,
290+
width: 35,
289291
allowsSorting: true,
290292
},
291293
{
292294
id: "stalledScore",
293295
name: "STALLED SCORE",
294296
alignment: "center",
295-
width: 40,
297+
width: 35,
296298
allowsSorting: true,
297299
},
298300
{
299301
id: "stalledPenalty",
300302
name: "STALLED PENALTY",
301303
alignment: "center",
302-
width: 40,
304+
width: 35,
303305
allowsSorting: true,
304306
},
305307
]}
@@ -309,6 +311,14 @@ const PriceComponentsCardContents = ({
309311
rows: props.rows,
310312
sortDescriptor: props.sortDescriptor,
311313
onSortChange: props.onSortChange,
314+
renderEmptyState: () => (
315+
<NoResults
316+
query={props.search}
317+
onClearSearch={() => {
318+
props.onSearchChange("");
319+
}}
320+
/>
321+
),
312322
})}
313323
/>
314324
</Card>

‎apps/insights/src/components/Publishers/publishers-card.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,8 @@ const PublishersCardContents = ({
194194
toolbar={
195195
<SearchInput
196196
size="sm"
197-
width={40}
197+
width={60}
198+
placeholder="Publisher key or name"
198199
{...(props.isLoading
199200
? { isPending: true, isDisabled: true }
200201
: {
@@ -226,7 +227,7 @@ const PublishersCardContents = ({
226227
{
227228
id: "ranking",
228229
name: "RANKING",
229-
width: 30,
230+
width: 25,
230231
loadingSkeleton: <Ranking isLoading />,
231232
allowsSorting: true,
232233
},
@@ -242,14 +243,14 @@ const PublishersCardContents = ({
242243
id: "activeFeeds",
243244
name: "ACTIVE FEEDS",
244245
alignment: "center",
245-
width: 40,
246+
width: 30,
246247
allowsSorting: true,
247248
},
248249
{
249250
id: "inactiveFeeds",
250251
name: "INACTIVE FEEDS",
251252
alignment: "center",
252-
width: 45,
253+
width: 30,
253254
allowsSorting: true,
254255
},
255256
{

‎packages/component-library/src/SearchInput/index.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ type Props = ComponentProps<typeof SearchField> & {
1818
size?: (typeof SIZES)[number] | undefined;
1919
width: number;
2020
isPending?: boolean | undefined;
21+
placeholder?: string;
2122
};
2223

2324
export const SearchInput = ({
@@ -26,6 +27,7 @@ export const SearchInput = ({
2627
width,
2728
className,
2829
isPending,
30+
placeholder = "Search",
2931
...props
3032
}: Props) => (
3133
<SearchField
@@ -36,7 +38,7 @@ export const SearchInput = ({
3638
{...(isPending && { "data-pending": "" })}
3739
{...props}
3840
>
39-
<Input className={styles.input ?? ""} placeholder="Search" />
41+
<Input className={styles.input ?? ""} placeholder={placeholder} />
4042
<MagnifyingGlass className={styles.searchIcon} />
4143
<CircleNotch className={styles.loadingIcon} />
4244
<Button className={styles.clearButton ?? ""}>

‎packages/component-library/src/Table/index.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
white-space: nowrap;
4444
border: 0;
4545
outline: theme.spacing(0.5) solid transparent;
46-
width: calc(theme.spacing(1) * var(--width));
46+
width: calc((theme.spacing(1) * var(--width)) + theme.spacing(8));
4747
outline-offset: -#{theme.spacing(0.5)};
4848
background-color: theme.color("background", "primary");
4949
transition: outline-color 100ms linear;

0 commit comments

Comments
 (0)