Skip to content

Commit 629c94a

Browse files
charlieparkdavid-crespo
charliepark
and
david-crespo
authored
Add plus icon to all "new" buttons above tables (#2168)
* Add plus icon to all table control buttons and links * Switch to CreateButton and CreateLink * text-accent-secondary on icon * must save 2 lines --------- Co-authored-by: David Crespo <[email protected]>
1 parent c008d36 commit 629c94a

19 files changed

+78
-95
lines changed

‎app/pages/ProjectsPage.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88
import { createColumnHelper } from '@tanstack/react-table'
99
import { useCallback, useMemo } from 'react'
10-
import { Link, Outlet, useNavigate } from 'react-router-dom'
10+
import { Outlet, useNavigate } from 'react-router-dom'
1111

1212
import {
1313
apiQueryClient,
@@ -23,7 +23,7 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
2323
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
2424
import { Columns } from '~/table/columns/common'
2525
import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
26-
import { buttonStyle } from '~/ui/lib/Button'
26+
import { CreateLink } from '~/ui/lib/CreateButton'
2727
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
2828
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
2929
import { TableActions } from '~/ui/lib/Table'
@@ -123,9 +123,7 @@ export function ProjectsPage() {
123123
<PageTitle icon={<Folder24Icon />}>Projects</PageTitle>
124124
</PageHeader>
125125
<TableActions>
126-
<Link to={pb.projectsNew()} className={buttonStyle({ size: 'sm' })}>
127-
New Project
128-
</Link>
126+
<CreateLink to={pb.projectsNew()}>New Project</CreateLink>
129127
</TableActions>
130128
<Table columns={columns} emptyState={<EmptyState />} />
131129
<Outlet />

‎app/pages/SiloAccessPage.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import { confirmDelete } from '~/stores/confirm-delete'
3131
import { getActionsCol } from '~/table/columns/action-col'
3232
import { Table } from '~/table/Table'
3333
import { Badge } from '~/ui/lib/Badge'
34-
import { Button } from '~/ui/lib/Button'
34+
import { CreateButton } from '~/ui/lib/CreateButton'
3535
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
3636
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
3737
import { TableActions, TableEmptyBox } from '~/ui/lib/Table'
@@ -165,9 +165,7 @@ export function SiloAccessPage() {
165165
</PageHeader>
166166

167167
<TableActions>
168-
<Button size="sm" onClick={() => setAddModalOpen(true)}>
169-
Add user or group
170-
</Button>
168+
<CreateButton onClick={() => setAddModalOpen(true)}>Add user or group</CreateButton>
171169
</TableActions>
172170
{siloPolicy && addModalOpen && (
173171
<SiloAccessAddUserSideModal

‎app/pages/project/access/ProjectAccessPage.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ import { confirmDelete } from '~/stores/confirm-delete'
3535
import { getActionsCol } from '~/table/columns/action-col'
3636
import { Table } from '~/table/Table'
3737
import { Badge } from '~/ui/lib/Badge'
38-
import { Button } from '~/ui/lib/Button'
38+
import { CreateButton } from '~/ui/lib/CreateButton'
3939
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
4040
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
4141
import { TableActions, TableEmptyBox } from '~/ui/lib/Table'
@@ -199,9 +199,7 @@ export function ProjectAccessPage() {
199199
</PageHeader>
200200

201201
<TableActions>
202-
<Button size="sm" onClick={() => setAddModalOpen(true)}>
203-
Add user or group
204-
</Button>
202+
<CreateButton onClick={() => setAddModalOpen(true)}>Add user or group</CreateButton>
205203
</TableActions>
206204
{projectPolicy && addModalOpen && (
207205
<ProjectAccessAddUserSideModal

‎app/pages/project/disks/DisksPage.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88
import { createColumnHelper } from '@tanstack/react-table'
99
import { useCallback } from 'react'
10-
import { Link, Outlet, type LoaderFunctionArgs } from 'react-router-dom'
10+
import { Outlet, type LoaderFunctionArgs } from 'react-router-dom'
1111

1212
import {
1313
apiQueryClient,
@@ -27,7 +27,7 @@ import { InstanceLinkCell } from '~/table/cells/InstanceLinkCell'
2727
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
2828
import { Columns } from '~/table/columns/common'
2929
import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
30-
import { buttonStyle } from '~/ui/lib/Button'
30+
import { CreateLink } from '~/ui/lib/CreateButton'
3131
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
3232
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
3333
import { TableActions } from '~/ui/lib/Table'
@@ -164,9 +164,7 @@ export function DisksPage() {
164164
<PageTitle icon={<Storage24Icon />}>Disks</PageTitle>
165165
</PageHeader>
166166
<TableActions>
167-
<Link to={pb.disksNew({ project })} className={buttonStyle({ size: 'sm' })}>
168-
New Disk
169-
</Link>
167+
<CreateLink to={pb.disksNew({ project })}>New Disk</CreateLink>
170168
</TableActions>
171169
<Table columns={columns} emptyState={<EmptyState />} />
172170
<Outlet />

‎app/pages/project/floating-ips/FloatingIpsPage.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,13 @@ import { InstanceLinkCell } from '~/table/cells/InstanceLinkCell'
3030
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
3131
import { Columns } from '~/table/columns/common'
3232
import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
33+
import { CreateLink } from '~/ui/lib/CreateButton'
3334
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
3435
import { Listbox } from '~/ui/lib/Listbox'
3536
import { Message } from '~/ui/lib/Message'
3637
import { Modal } from '~/ui/lib/Modal'
3738
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
38-
import { TableControls, TableControlsLink, TableControlsText } from '~/ui/lib/Table'
39+
import { TableControls, TableControlsText } from '~/ui/lib/Table'
3940
import { links } from '~/util/links'
4041
import { pb } from '~/util/path-builder'
4142

@@ -192,9 +193,7 @@ export function FloatingIpsPage() {
192193
your instances to be reachable from the internet. Learn more about{' '}
193194
<ExternalLink href={links.floatingIpsDocs}>managing floating IPs</ExternalLink>.
194195
</TableControlsText>
195-
<TableControlsLink to={pb.floatingIpsNew({ project })}>
196-
New Floating IP
197-
</TableControlsLink>
196+
<CreateLink to={pb.floatingIpsNew({ project })}>New Floating IP</CreateLink>
198197
</TableControls>
199198
<Table columns={columns} emptyState={<EmptyState />} />
200199
<Outlet />

‎app/pages/project/images/ImagesPage.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88
import { createColumnHelper } from '@tanstack/react-table'
99
import { useCallback, useMemo, useState } from 'react'
10-
import { Link, Outlet, type LoaderFunctionArgs } from 'react-router-dom'
10+
import { Outlet, type LoaderFunctionArgs } from 'react-router-dom'
1111

1212
import { apiQueryClient, useApiMutation, useApiQueryClient, type Image } from '@oxide/api'
1313
import { Images24Icon } from '@oxide/design-system/icons/react'
@@ -19,7 +19,7 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
1919
import { getActionsCol, type MenuAction } from '~/table/columns/action-col'
2020
import { Columns } from '~/table/columns/common'
2121
import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
22-
import { buttonStyle } from '~/ui/lib/Button'
22+
import { CreateLink } from '~/ui/lib/CreateButton'
2323
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
2424
import { Message } from '~/ui/lib/Message'
2525
import { Modal } from '~/ui/lib/Modal'
@@ -100,9 +100,7 @@ export function ImagesPage() {
100100
<PageTitle icon={<Images24Icon />}>Images</PageTitle>
101101
</PageHeader>
102102
<TableActions>
103-
<Link to={pb.projectImagesNew({ project })} className={buttonStyle({ size: 'sm' })}>
104-
Upload image
105-
</Link>
103+
<CreateLink to={pb.projectImagesNew({ project })}>Upload image</CreateLink>
106104
</TableActions>
107105
<Table columns={columns} emptyState={<EmptyState />} />
108106
{promoteImageName && (

‎app/pages/project/instances/InstancesPage.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88
import { createColumnHelper } from '@tanstack/react-table'
99
import { useMemo } from 'react'
10-
import { Link, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
10+
import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
1111

1212
import {
1313
apiQueryClient,
@@ -25,7 +25,7 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
2525
import { getActionsCol } from '~/table/columns/action-col'
2626
import { Columns } from '~/table/columns/common'
2727
import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
28-
import { buttonStyle } from '~/ui/lib/Button'
28+
import { CreateLink } from '~/ui/lib/CreateButton'
2929
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
3030
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
3131
import { TableActions } from '~/ui/lib/Table'
@@ -127,9 +127,7 @@ export function InstancesPage() {
127127
</PageHeader>
128128
<TableActions>
129129
<RefreshButton onClick={refetchInstances} />
130-
<Link to={pb.instancesNew({ project })} className={buttonStyle({ size: 'sm' })}>
131-
New Instance
132-
</Link>
130+
<CreateLink to={pb.instancesNew({ project })}>New Instance</CreateLink>
133131
</TableActions>
134132
<Table columns={columns} emptyState={<EmptyState />} rowHeight="large" />
135133
</>

‎app/pages/project/instances/instance/tabs/NetworkingTab.tsx

+5-7
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
3535
import { Columns, DescriptionCell } from '~/table/columns/common'
3636
import { Table } from '~/table/Table'
3737
import { Badge } from '~/ui/lib/Badge'
38-
import { Button } from '~/ui/lib/Button'
38+
import { CreateButton } from '~/ui/lib/CreateButton'
3939
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
4040
import { TableControls, TableEmptyBox, TableTitle } from '~/ui/lib/Table'
4141
import { TipIcon } from '~/ui/lib/TipIcon'
@@ -323,14 +323,13 @@ export function NetworkingTab() {
323323
<>
324324
<TableControls>
325325
<TableTitle id="attached-ips-label">External IPs</TableTitle>
326-
<Button
327-
size="sm"
326+
<CreateButton
328327
onClick={() => setAttachModalOpen(true)}
329328
disabled={!!disabledReason}
330329
disabledReason={disabledReason}
331330
>
332331
Attach floating IP
333-
</Button>
332+
</CreateButton>
334333
{attachModalOpen && (
335334
<AttachFloatingIpModal
336335
floatingIps={availableIps}
@@ -344,8 +343,7 @@ export function NetworkingTab() {
344343

345344
<TableControls className="mt-8">
346345
<TableTitle id="nics-label">Network interfaces</TableTitle>
347-
<Button
348-
size="sm"
346+
<CreateButton
349347
onClick={() => setCreateModalOpen(true)}
350348
disabled={!canUpdateNic}
351349
disabledReason={
@@ -356,7 +354,7 @@ export function NetworkingTab() {
356354
}
357355
>
358356
Add network interface
359-
</Button>
357+
</CreateButton>
360358
{createModalOpen && (
361359
<CreateNetworkInterfaceForm
362360
onDismiss={() => setCreateModalOpen(false)}

‎app/pages/project/snapshots/SnapshotsPage.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88
import { createColumnHelper } from '@tanstack/react-table'
99
import { useCallback } from 'react'
10-
import { Link, Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
10+
import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
1111

1212
import {
1313
apiQueryClient,
@@ -26,7 +26,7 @@ import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
2626
import { Columns } from '~/table/columns/common'
2727
import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
2828
import { Badge } from '~/ui/lib/Badge'
29-
import { buttonStyle } from '~/ui/lib/Button'
29+
import { CreateLink } from '~/ui/lib/CreateButton'
3030
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
3131
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
3232
import { TableActions } from '~/ui/lib/Table'
@@ -136,9 +136,7 @@ export function SnapshotsPage() {
136136
<PageTitle icon={<Snapshots24Icon />}>Snapshots</PageTitle>
137137
</PageHeader>
138138
<TableActions>
139-
<Link to={pb.snapshotsNew({ project })} className={buttonStyle({ size: 'sm' })}>
140-
New Snapshot
141-
</Link>
139+
<CreateLink to={pb.snapshotsNew({ project })}>New snapshot</CreateLink>
142140
</TableActions>
143141
<Table columns={columns} emptyState={<EmptyState />} />
144142
<Outlet />

‎app/pages/project/vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { TypeValueCell } from '~/table/cells/TypeValueCell'
2626
import { getActionsCol } from '~/table/columns/action-col'
2727
import { Columns } from '~/table/columns/common'
2828
import { Table } from '~/table/Table'
29-
import { Button } from '~/ui/lib/Button'
29+
import { CreateButton } from '~/ui/lib/CreateButton'
3030
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
3131
import { TableEmptyBox } from '~/ui/lib/Table'
3232
import { sortBy } from '~/util/array'
@@ -134,9 +134,7 @@ export const VpcFirewallRulesTab = () => {
134134
return (
135135
<>
136136
<div className="mb-3 flex justify-end space-x-2">
137-
<Button size="sm" onClick={() => setCreateModalOpen(true)}>
138-
New rule
139-
</Button>
137+
<CreateButton onClick={() => setCreateModalOpen(true)}>New rule</CreateButton>
140138
{createModalOpen && (
141139
<CreateFirewallRuleForm
142140
existingRules={rules}

‎app/pages/project/vpcs/VpcPage/tabs/VpcSubnetsTab.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { TwoLineCell } from '~/table/cells/TwoLineCell'
1818
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
1919
import { Columns } from '~/table/columns/common'
2020
import { useQueryTable } from '~/table/QueryTable'
21-
import { Button } from '~/ui/lib/Button'
21+
import { CreateButton } from '~/ui/lib/CreateButton'
2222
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
2323

2424
const colHelper = createColumnHelper<VpcSubnet>()
@@ -77,9 +77,7 @@ export const VpcSubnetsTab = () => {
7777
return (
7878
<>
7979
<div className="mb-3 flex justify-end space-x-2">
80-
<Button size="sm" onClick={() => setCreating(true)}>
81-
New subnet
82-
</Button>
80+
<CreateButton onClick={() => setCreating(true)}>New subnet</CreateButton>
8381
{creating && <CreateSubnetForm onDismiss={() => setCreating(false)} />}
8482
{editing && <EditSubnetForm editing={editing} onDismiss={() => setEditing(null)} />}
8583
</div>

‎app/pages/project/vpcs/VpcsPage.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88
import { createColumnHelper } from '@tanstack/react-table'
99
import { useCallback, useMemo } from 'react'
10-
import { Link, Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
10+
import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
1111

1212
import {
1313
apiQueryClient,
@@ -24,7 +24,7 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
2424
import { getActionsCol, type MenuAction } from '~/table/columns/action-col'
2525
import { Columns } from '~/table/columns/common'
2626
import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
27-
import { buttonStyle } from '~/ui/lib/Button'
27+
import { CreateLink } from '~/ui/lib/CreateButton'
2828
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
2929
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
3030
import { TableActions } from '~/ui/lib/Table'
@@ -122,9 +122,7 @@ export function VpcsPage() {
122122
<PageTitle icon={<Networking24Icon />}>VPCs</PageTitle>
123123
</PageHeader>
124124
<TableActions>
125-
<Link to={pb.vpcsNew({ project })} className={buttonStyle({ size: 'sm' })}>
126-
New Vpc
127-
</Link>
125+
<CreateLink to={pb.vpcsNew({ project })}>New Vpc</CreateLink>
128126
</TableActions>
129127
<Table columns={columns} emptyState={<EmptyState />} />
130128
<Outlet />

‎app/pages/system/networking/IpPoolPage.tsx

+5-9
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
import { createColumnHelper } from '@tanstack/react-table'
1010
import { useCallback, useMemo, useState } from 'react'
11-
import { Link, Outlet, type LoaderFunctionArgs } from 'react-router-dom'
11+
import { Outlet, type LoaderFunctionArgs } from 'react-router-dom'
1212

1313
import {
1414
apiQueryClient,
@@ -36,12 +36,12 @@ import { LinkCell } from '~/table/cells/LinkCell'
3636
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
3737
import { Columns } from '~/table/columns/common'
3838
import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
39-
import { buttonStyle } from '~/ui/lib/Button'
39+
import { CreateButton, CreateLink } from '~/ui/lib/CreateButton'
4040
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
4141
import { Message } from '~/ui/lib/Message'
4242
import { Modal } from '~/ui/lib/Modal'
4343
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
44-
import { TableControls, TableControlsButton, TableControlsText } from '~/ui/lib/Table'
44+
import { TableControls, TableControlsText } from '~/ui/lib/Table'
4545
import { Tabs } from '~/ui/lib/Tabs'
4646
import { links } from '~/util/links'
4747
import { pb } from '~/util/path-builder'
@@ -192,9 +192,7 @@ function IpRangesTable() {
192192
return (
193193
<>
194194
<div className="mb-3 flex justify-end space-x-2">
195-
<Link to={pb.ipPoolRangeAdd({ pool })} className={buttonStyle({ size: 'sm' })}>
196-
Add range
197-
</Link>
195+
<CreateLink to={pb.ipPoolRangeAdd({ pool })}>Add range</CreateLink>
198196
</div>
199197
<Table columns={columns} emptyState={emptyState} />
200198
</>
@@ -286,9 +284,7 @@ function LinkedSilosTable() {
286284
learn more about{' '}
287285
<ExternalLink href={links.ipPoolsDocs}>managing IP pools</ExternalLink>.
288286
</TableControlsText>
289-
<TableControlsButton onClick={() => setShowLinkModal(true)}>
290-
Link silo
291-
</TableControlsButton>
287+
<CreateButton onClick={() => setShowLinkModal(true)}>Link silo</CreateButton>
292288
</TableControls>
293289
<Table columns={columns} emptyState={emptyState} />
294290
{showLinkModal && <LinkSiloModal onDismiss={() => setShowLinkModal(false)} />}

‎app/pages/system/networking/IpPoolsPage.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
import { createColumnHelper } from '@tanstack/react-table'
1010
import { useCallback, useMemo } from 'react'
11-
import { Link, Outlet, useNavigate } from 'react-router-dom'
11+
import { Outlet, useNavigate } from 'react-router-dom'
1212

1313
import {
1414
apiQueryClient,
@@ -27,7 +27,7 @@ import { makeLinkCell } from '~/table/cells/LinkCell'
2727
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
2828
import { Columns } from '~/table/columns/common'
2929
import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
30-
import { buttonStyle } from '~/ui/lib/Button'
30+
import { CreateLink } from '~/ui/lib/CreateButton'
3131
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
3232
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
3333
import { TableActions } from '~/ui/lib/Table'
@@ -127,9 +127,7 @@ export function IpPoolsPage() {
127127
<PageTitle icon={<Networking24Icon />}>IP Pools</PageTitle>
128128
</PageHeader>
129129
<TableActions>
130-
<Link to={pb.ipPoolsNew()} className={buttonStyle({ size: 'sm' })}>
131-
New IP Pool
132-
</Link>
130+
<CreateLink to={pb.ipPoolsNew()}>New IP Pool</CreateLink>
133131
</TableActions>
134132
<Table columns={columns} emptyState={<EmptyState />} />
135133
<Outlet />

0 commit comments

Comments
 (0)