feat(ui): adopt searchable column selector with Select/Deselect all across console

This commit is contained in:
Harsh Mahajan
2025-09-07 16:44:30 +05:30
parent 13a0f5e2be
commit 48b1463179
15 changed files with 28 additions and 13 deletions
+1 -1
View File
@@ -35,7 +35,7 @@
{#if !hideColumns && $columns?.length}
<Layout.Stack gap="xs">
<Typography.Text>Columns</Typography.Text>
<ColumnSelector {columns} {isCustomTable}>
<ColumnSelector ui="new" {columns} {isCustomTable}>
{#snippet children(toggle, selectedColumnsNumber)}
<Button.Button
size="s"
+8 -1
View File
@@ -17,7 +17,14 @@
<header class="grid-header">
<Typography.Title size="m">{title}</Typography.Title>
<div class="u-flex u-gap-16 u-contents-mobile">
<ViewSelector {view} {columns} {isCustomTable} {hideView} {hideColumns} {allowNoColumns} />
<ViewSelector
ui="new"
{view}
{columns}
{isCustomTable}
{hideView}
{hideColumns}
{allowNoColumns} />
<div class="grid-header-col-2">
<slot />
</div>
@@ -112,7 +112,7 @@
</Layout.Stack>
<Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
{#if hasDisplaySettings}
<ViewSelector {view} {columns} {hideView} {hideColumns} />
<ViewSelector ui="new" {view} {columns} {hideView} {hideColumns} />
{/if}
{#if children}
{@render children()}
@@ -49,7 +49,7 @@
<Layout.Stack direction="row" justifyContent="space-between">
<SearchQuery placeholder="Search domains" />
<Layout.Stack direction="row" gap="m" inline>
<ViewSelector view={View.Table} {columns} hideView />
<ViewSelector ui="new" view={View.Table} {columns} hideView />
<Button
on:click={() => {
trackEvent(Click.DomainCreateClick, {
@@ -84,7 +84,7 @@
</Tooltip>
</Layout.Stack>
<Layout.Stack direction="row" gap="s" inline>
<ViewSelector view={View.Table} {columns} hideView />
<ViewSelector ui="new" view={View.Table} {columns} hideView />
<Popover let:toggle padding="none">
<Button secondary on:click={toggle}>Add preset</Button>
<svelte:fragment slot="tooltip" let:toggle>
@@ -59,7 +59,7 @@
<SearchQuery placeholder="Search by name, email, phone, or ID" />
</Layout.Stack>
<Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
<ViewSelector view={View.Table} {columns} hideView />
<ViewSelector ui="new" view={View.Table} {columns} hideView />
<Button on:click={() => ($showCreateUser = true)} event="create_user" size="s">
<Icon size="s" icon={IconPlus} slot="start" />
<span class="text">Create user</span>
@@ -52,13 +52,13 @@
<div class="u-flex u-main-end u-gap-16 is-not-mobile">
<Filters query={data.query} {columns} />
<div>
<ViewSelector view={View.Table} {columns} hideView />
<ViewSelector ui="new" view={View.Table} {columns} hideView />
</div>
</div>
</div>
<div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
<div class="u-flex-basis-50-percent">
<ViewSelector view={View.Table} {columns} hideView />
<ViewSelector ui="new" view={View.Table} {columns} hideView />
</div>
<div class="u-flex-basis-50-percent">
<Filters query={data.query} {columns} fullWidthMobile />
@@ -33,7 +33,7 @@
<div class="u-flex u-main-end u-gap-16 is-not-mobile">
<Filters query={data.query} {columns} />
<ViewSelector view={View.Table} {columns} hideView />
<ViewSelector ui="new" view={View.Table} {columns} hideView />
</div>
</div>
</div>
@@ -52,6 +52,7 @@
</Layout.Stack>
<Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
<ViewSelector
ui="new"
{columns}
view={data.view}
hideColumns={!data.databases.total}
@@ -26,6 +26,7 @@
<Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
<ViewSelector
ui="new"
view={data.view}
columns={tableViewColumns}
hideColumns={!data.tables.total}
@@ -29,7 +29,7 @@
</Layout.Stack>
<Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
<Filters query={data.query} {columns} analyticsSource="messaging_providers" />
<ViewSelector view={View.Table} {columns} hideView />
<ViewSelector ui="new" view={View.Table} {columns} hideView />
{#if $canWriteProviders}
<CreateProviderDropdown let:toggle>
<Button on:click={toggle} event="create_provider">
@@ -92,7 +92,7 @@
<SearchQuery placeholder="Search by type or IDs"></SearchQuery>
<Layout.Stack direction="row" inline>
<Filters query={data.query} {columns} analyticsSource="messaging_topics" />
<ViewSelector view={View.Table} {columns} hideView />
<ViewSelector ui="new" view={View.Table} {columns} hideView />
<Button
on:click={() => {
showAdd = true;
@@ -27,7 +27,7 @@
<Container>
<Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
<ViewSelector {columns} view={View.Table} hideView />
<ViewSelector ui="new" {columns} view={View.Table} hideView />
{#if $canWriteWebhooks}
<Button
href={`${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/create`}
@@ -63,7 +63,12 @@
<SearchQuery placeholder="Search by name" />
</Layout.Stack>
<Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
<ViewSelector {columns} view={data.view} hideColumns hideView={!data.siteList.total} />
<ViewSelector
ui="new"
{columns}
view={data.view}
hideColumns
hideView={!data.siteList.total} />
{#if $canWriteSites}
<Button on:mousedown={() => (show = true)} event="create_site" size="s">
<Icon icon={IconPlus} slot="start" size="s" />
@@ -39,6 +39,7 @@
</Layout.Stack>
<Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
<ViewSelector
ui="new"
{columns}
view={data.view}
hideColumns={!data.buckets.total}