Skip to content

Commit edf5911

Browse files
authored
feat: namespace and document Toast components (#1216)
1 parent 2a904df commit edf5911

File tree

9 files changed

+373
-95
lines changed

9 files changed

+373
-95
lines changed

apps/gitness/src/App.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
import { QueryClientProvider } from '@tanstack/react-query'
1313

1414
import { CodeServiceAPIClient } from '@harnessio/code-service-client'
15-
import { ToastProvider, Tooltip } from '@harnessio/ui/components'
15+
import { Toast, Tooltip } from '@harnessio/ui/components'
1616
import { RouterContextProvider } from '@harnessio/ui/context'
1717

1818
import { ExitConfirmProvider } from './framework/context/ExitConfirmContext'
@@ -44,7 +44,7 @@ export default function App() {
4444
<I18nextProvider i18n={i18n}>
4545
<ThemeProvider defaultTheme="dark-std-std">
4646
<QueryClientProvider client={queryClient}>
47-
<ToastProvider>
47+
<Toast.Provider>
4848
<Tooltip.Provider>
4949
<ExitConfirmProvider>
5050
<NavigationProvider routes={routes}>
@@ -62,7 +62,7 @@ export default function App() {
6262
</NavigationProvider>
6363
</ExitConfirmProvider>
6464
</Tooltip.Provider>
65-
</ToastProvider>
65+
</Toast.Provider>
6666
</QueryClientProvider>
6767
</ThemeProvider>
6868
</I18nextProvider>

apps/gitness/src/AppMFE.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
import { QueryClientProvider } from '@tanstack/react-query'
1919

2020
import { CodeServiceAPIClient } from '@harnessio/code-service-client'
21-
import { ToastProvider, Tooltip } from '@harnessio/ui/components'
21+
import { Toast, Tooltip } from '@harnessio/ui/components'
2222
import { PortalProvider, RouterContextProvider } from '@harnessio/ui/context'
2323

2424
import ShadowRootWrapper from './components-v2/shadow-root-wrapper'
@@ -183,7 +183,7 @@ export default function AppMFE({
183183
<I18nextProvider i18n={i18n}>
184184
<ThemeProvider defaultTheme={theme === 'Light' ? 'light-std-std' : 'dark-std-std'}>
185185
<QueryClientProvider client={queryClient}>
186-
<ToastProvider>
186+
<Toast.Provider>
187187
<Tooltip.Provider>
188188
<ExitConfirmProvider>
189189
<NavigationProvider routes={routesToRender}>
@@ -201,7 +201,7 @@ export default function AppMFE({
201201
</NavigationProvider>
202202
</ExitConfirmProvider>
203203
</Tooltip.Provider>
204-
</ToastProvider>
204+
</Toast.Provider>
205205
</QueryClientProvider>
206206
</ThemeProvider>
207207
</I18nextProvider>
Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
1-
import { Toast, ToastClose, ToastDescription, ToastTitle, ToastViewport, useToast } from '@harnessio/ui/components'
1+
import { Toast, useToast } from '@harnessio/ui/components'
22

33
export function Toaster() {
44
const { toasts } = useToast()
55

66
return (
77
<>
8-
{toasts.map(function ({ id, title, description, action, ...props }) {
9-
return (
10-
<Toast key={id} {...props}>
11-
<div className="grid gap-1">
12-
{title && <ToastTitle>{title}</ToastTitle>}
13-
{description && <ToastDescription>{description}</ToastDescription>}
14-
</div>
15-
{action}
16-
<ToastClose />
17-
</Toast>
18-
)
19-
})}
20-
<ToastViewport />
8+
{toasts.map(({ id, title, description, action, ...props }) => (
9+
<Toast.Root key={id} {...props}>
10+
<div className="grid gap-1">
11+
{!!title && <Toast.Title>{title}</Toast.Title>}
12+
{!!description && <Toast.Description>{description}</Toast.Description>}
13+
</div>
14+
{action}
15+
<Toast.Close />
16+
</Toast.Root>
17+
))}
18+
<Toast.Viewport />
2119
</>
2220
)
2321
}

apps/gitness/src/framework/hooks/useRepoImportEvent.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react'
22
import { Link, useParams } from 'react-router-dom'
33

44
import { RepoRepositoryOutput } from '@harnessio/code-service-client'
5-
import { ToastAction, useToast } from '@harnessio/ui/components'
5+
import { Toast, useToast } from '@harnessio/ui/components'
66

77
import { useRepoStore } from '../../pages-v2/repo/stores/repo-list-store'
88
import { transformRepoList } from '../../pages-v2/repo/transform-utils/repo-list-transform'
@@ -29,7 +29,7 @@ export const useRepoImportEvents = () => {
2929
duration: 5000,
3030
action: (
3131
<Link to={routes.toRepoSummary({ spaceId, repoId: importRepoIdentifier ?? '' })}>
32-
<ToastAction altText="View repository">View</ToastAction>
32+
<Toast.Action altText="View repository">View</Toast.Action>
3333
</Link>
3434
),
3535
variant: 'success'

apps/gitness/src/pages-v2/repo/repo-list.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useEffect } from 'react'
22
import { useParams } from 'react-router-dom'
33

44
import { useDeleteRepositoryMutation, useListReposQuery } from '@harnessio/code-service-client'
5-
import { ToastAction, useToast } from '@harnessio/ui/components'
5+
import { Toast, useToast } from '@harnessio/ui/components'
66
import { RepositoryType, SandboxRepoListPage } from '@harnessio/ui/views'
77

88
import { useRoutes } from '../../framework/context/NavigationContext'
@@ -85,7 +85,7 @@ export default function ReposListPage() {
8585
description: importRepoIdentifier,
8686
duration: Infinity,
8787
action: (
88-
<ToastAction
88+
<Toast.Action
8989
onClick={() => {
9090
deleteRepository({
9191
queryParams: {},
@@ -95,7 +95,7 @@ export default function ReposListPage() {
9595
altText="Cancel import"
9696
>
9797
{isCancellingImport ? 'Canceling...' : 'Cancel'}
98-
</ToastAction>
98+
</Toast.Action>
9999
)
100100
})
101101

0 commit comments

Comments
 (0)