feat(explorer): polish validators view and bring back actions in Table (

#4153) * fix action in table and remove validators count * polish validators view * fix import --------- Co-authored-by: cpl121 <[email protected]>
iotaledger · Nov 25, 2024 · 16292bc · 16292bc
1 parent 1a54b01
commit 16292bc
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 52 deletions.
diff --git a/apps/explorer/src/components/top-validators-card/TopValidatorsCard.tsx b/apps/explorer/src/components/top-validators-card/TopValidatorsCard.tsx
@@ -59,7 +59,6 @@ export function TopValidatorsCard({ limit, showIcon }: TopValidatorsCardProps):
                             data={data.activeValidators}
                             columns={tableColumns}
                             viewAll="/validators"
-                            totalLabel={data ? data.activeValidators.length.toString() : '--'}
                         />
                     </ErrorBoundary>
                 )}

diff --git a/apps/explorer/src/pages/validators/Validators.tsx b/apps/explorer/src/pages/validators/Validators.tsx
@@ -11,7 +11,8 @@ import {
     InfoBox,
     InfoBoxStyle,
     InfoBoxType,
-    TableHeader,
+    Panel,
+    Title,
     TooltipPosition,
 } from '@iota/apps-ui-kit';
 import { useIotaClientQuery } from '@iota/dapp-kit';
@@ -155,26 +156,27 @@ function ValidatorPageResult(): JSX.Element {
                                 />
                             ))}
                         </div>
-                        <div>
-                            <ErrorBoundary>
-                                <TableHeader>All Validators</TableHeader>
-                                {(isPending || validatorsEventsLoading) && (
-                                    <PlaceholderTable
-                                        rowCount={20}
-                                        rowHeight="13px"
-                                        colHeadings={['Name', 'Address', 'Stake']}
-                                    />
-                                )}
-
-                                {isSuccess && tableData && tableColumns && (
-                                    <TableCard
-                                        data={tableData}
-                                        columns={tableColumns}
-                                        areHeadersCentered={false}
-                                    />
-                                )}
-                            </ErrorBoundary>
-                        </div>
+                        <Panel>
+                            <Title title="All Validators" />
+                            <div className="p-md">
+                                <ErrorBoundary>
+                                    {(isPending || validatorsEventsLoading) && (
+                                        <PlaceholderTable
+                                            rowCount={20}
+                                            rowHeight="13px"
+                                            colHeadings={['Name', 'Address', 'Stake']}
+                                        />
+                                    )}
+                                    {isSuccess && tableData && tableColumns && (
+                                        <TableCard
+                                            data={tableData}
+                                            columns={tableColumns}
+                                            areHeadersCentered={false}
+                                        />
+                                    )}
+                                </ErrorBoundary>
+                            </div>
+                        </Panel>
                     </div>
                 )
             }

diff --git a/apps/ui-kit/src/lib/components/organisms/table/Table.tsx b/apps/ui-kit/src/lib/components/organisms/table/Table.tsx
@@ -99,37 +99,41 @@ export function Table({
                         'justify-end': !paginationOptions && action,
                     })}
                 >
-                    {paginationOptions && (
+                    {(paginationOptions || action) && (
                         <div className="flex gap-2">
-                            <Button
-                                type={ButtonType.Secondary}
-                                size={ButtonSize.Small}
-                                icon={<DoubleArrowLeft />}
-                                disabled={!paginationOptions.hasFirst}
-                                onClick={paginationOptions.onFirst}
-                            />
-                            <Button
-                                type={ButtonType.Secondary}
-                                size={ButtonSize.Small}
-                                icon={<ArrowLeft />}
-                                disabled={!paginationOptions.hasPrev}
-                                onClick={paginationOptions.onPrev}
-                            />
-                            <Button
-                                type={ButtonType.Secondary}
-                                size={ButtonSize.Small}
-                                icon={<ArrowRight />}
-                                disabled={!paginationOptions.hasNext}
-                                onClick={paginationOptions.onNext}
-                            />
-                            <Button
-                                type={ButtonType.Secondary}
-                                size={ButtonSize.Small}
-                                icon={<DoubleArrowRight />}
-                                disabled={!paginationOptions.hasLast}
-                                onClick={paginationOptions.onLast}
-                            />
-                            {action}
+                            {paginationOptions && (
+                                <>
+                                    <Button
+                                        type={ButtonType.Secondary}
+                                        size={ButtonSize.Small}
+                                        icon={<DoubleArrowLeft />}
+                                        disabled={!paginationOptions.hasFirst}
+                                        onClick={paginationOptions.onFirst}
+                                    />
+                                    <Button
+                                        type={ButtonType.Secondary}
+                                        size={ButtonSize.Small}
+                                        icon={<ArrowLeft />}
+                                        disabled={!paginationOptions.hasPrev}
+                                        onClick={paginationOptions.onPrev}
+                                    />
+                                    <Button
+                                        type={ButtonType.Secondary}
+                                        size={ButtonSize.Small}
+                                        icon={<ArrowRight />}
+                                        disabled={!paginationOptions.hasNext}
+                                        onClick={paginationOptions.onNext}
+                                    />
+                                    <Button
+                                        type={ButtonType.Secondary}
+                                        size={ButtonSize.Small}
+                                        icon={<DoubleArrowRight />}
+                                        disabled={!paginationOptions.hasLast}
+                                        onClick={paginationOptions.onLast}
+                                    />
+                                </>
+                            )}
+                            {action && action}
                         </div>
                     )}
                     {supportingLabel || pageSizeSelector ? (