Skip to content

Commit da04b7c

Browse files
robertpiosikrobertpiosik
committed
Replace single Notice component with Notices component supporting multiple notices and add port forwarding notice to Web section
- in settings, add another note to chatbots: [Pasted text] (word forwarding link to https://code.visualstudio.com/docs/debugtest/port-forwarding) - add translations to [Fragment] and [Fragment] - Notice should be named Notices and accept multiple notices of various types. This will make us ditch such wrapper [Fragment] ├── apps │ └── editor │ └── src │ └── views │ ├── settings │ │ └── frontend │ │ ├── App.tsx │ │ ├── Home │ │ │ └── sections │ │ │ ├── ApiSection.tsx │ │ │ ├── CliSection.tsx │ │ │ └── WebSection.tsx │ │ ├── Settings.tsx │ │ └── i18n │ │ ├── translations │ │ │ └── web.ts │ │ └── use-translation.tsx │ └── shared │ └── hooks │ └── use-translation.tsx └── packages └── ui └── src └── components └── editor └── settings └── Notices ├── Notices.module.scss ├── Notices.tsx └── index.ts
1 parent dac2a14 commit da04b7c

9 files changed

Lines changed: 176 additions & 83 deletions

File tree

‎apps/editor/src/views/settings/frontend/Home/sections/ApiSection.tsx‎

Lines changed: 51 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { forwardRef } from 'react'
22
import { Section as UiSection } from '@ui/components/editor/settings/Section'
33
import { Group as UiGroup } from '@ui/components/editor/settings/Group/Group'
4-
import { Notice as UiNotice } from '@ui/components/editor/settings/Notice'
4+
import { Notices as UiNotices } from '@ui/components/editor/settings/Notices'
55
import { Item as UiItem } from '@ui/components/editor/settings/Item'
66
import { Button } from '@ui/components/editor/common/Button'
77
import { DefaultConfigurationSelector } from '@ui/components/editor/settings/DefaultConfigurationSelector'
@@ -66,43 +66,53 @@ export const ApiSection = forwardRef<HTMLDivElement, Props>((props, ref) => {
6666

6767
return (
6868
<UiSection ref={ref} title={t('api.title')} subtitle={t('api.subtitle')}>
69-
<UiNotice type="info">
70-
<Translation
71-
id="api.notice.credentials"
72-
components={{
73-
link: (
74-
<a
75-
href="#"
76-
onClick={(e) => {
77-
e.preventDefault()
78-
props.on_open_external_url(
79-
'https://code.visualstudio.com/api/references/vscode-api#SecretStorage'
69+
<UiNotices
70+
notices={[
71+
{
72+
type: 'info',
73+
message: (
74+
<Translation
75+
id="api.notice.credentials"
76+
components={{
77+
link: (
78+
<a
79+
href="#"
80+
onClick={(e) => {
81+
e.preventDefault()
82+
props.on_open_external_url(
83+
'https://code.visualstudio.com/api/references/vscode-api#SecretStorage'
84+
)
85+
}}
86+
>
87+
SecretStorage
88+
</a>
8089
)
8190
}}
82-
>
83-
SecretStorage
84-
</a>
91+
/>
8592
)
86-
}}
87-
/>
88-
</UiNotice>
93+
}
94+
]}
95+
/>
8996
<div
9097
ref={(el) => props.set_section_ref('section:api:group:providers', el)}
9198
>
9299
<UiGroup
93100
title={t('api.providers.title')}
94101
notice_slot={
95102
!props.providers.length ? (
96-
<UiNotice
97-
type="warning"
98-
slot_right={
99-
<Button on_click={() => props.on_add_provider()}>
100-
{t('action.add-new')}
101-
</Button>
102-
}
103-
>
104-
{t('api.providers.missing-provider')}
105-
</UiNotice>
103+
<UiNotices
104+
notices={[
105+
{
106+
type: 'warning',
107+
slot_right: (
108+
<Button on_click={() => props.on_add_provider()}>
109+
{t('action.add-new')}
110+
</Button>
111+
),
112+
message: t('api.providers.missing-provider')
113+
}
114+
]}
115+
/>
106116
) : null
107117
}
108118
>
@@ -198,16 +208,19 @@ export const ApiSection = forwardRef<HTMLDivElement, Props>((props, ref) => {
198208
is_disabled={props.providers.length === 0}
199209
notice_slot={
200210
!props.api_configurations.length ? (
201-
<UiNotice
202-
type="warning"
203-
slot_right={
204-
<Button on_click={() => props.on_add_api_configuration()}>
205-
{t('action.add-new')}
206-
</Button>
207-
}
208-
>
209-
{t('api.configurations.missing-model')}
210-
</UiNotice>
211+
<UiNotices
212+
notices={[
213+
{
214+
type: 'warning',
215+
slot_right: (
216+
<Button on_click={() => props.on_add_api_configuration()}>
217+
{t('action.add-new')}
218+
</Button>
219+
),
220+
message: t('api.configurations.missing-model')
221+
}
222+
]}
223+
/>
211224
) : null
212225
}
213226
>

‎apps/editor/src/views/settings/frontend/Home/sections/CliSection.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { forwardRef } from 'react'
22
import { Section as UiSection } from '@ui/components/editor/settings/Section'
33
import { Group as UiGroup } from '@ui/components/editor/settings/Group/Group'
4-
import { Notice as UiNotice } from '@ui/components/editor/settings/Notice'
4+
import { Notices as UiNotices } from '@ui/components/editor/settings/Notices'
55
import { SortableList } from '@ui/components/editor/settings/SortableList'
66
import { IconButton } from '@ui/components/editor/common/IconButton'
77
import { DefaultConfigurationSelector } from '@ui/components/editor/settings/DefaultConfigurationSelector'
@@ -34,7 +34,14 @@ export const CliSection = forwardRef<HTMLDivElement, Props>((props, ref) => {
3434

3535
return (
3636
<UiSection ref={ref} title={t('cli.title')} subtitle={t('cli.subtitle')}>
37-
<UiNotice type="info">{t('cli.notice')}</UiNotice>
37+
<UiNotices
38+
notices={[
39+
{
40+
type: 'info',
41+
message: t('cli.notice')
42+
}
43+
]}
44+
/>
3845
<div ref={(el) => props.set_section_ref('section:cli:group:agents', el)}>
3946
<UiGroup title={t('agents.configurations.title')}>
4047
<SortableList

‎apps/editor/src/views/settings/frontend/Home/sections/WebSection.tsx‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { forwardRef, useEffect, useState } from 'react'
22
import { Section as UiSection } from '@ui/components/editor/settings/Section'
33
import { Group as UiGroup } from '@ui/components/editor/settings/Group/Group'
4-
import { Notice as UiNotice } from '@ui/components/editor/settings/Notice'
4+
import { Notices as UiNotices } from '@ui/components/editor/settings/Notices'
55
import { Input as UiInput } from '@ui/components/editor/common/Input'
66
import { Item as UiItem } from '@ui/components/editor/settings/Item'
77
import { SortableList } from '@ui/components/editor/settings/SortableList'
88
import { IconButton } from '@ui/components/editor/common/IconButton'
99
import { WebConfiguration } from '@/types/web-configuration'
1010
import { Icon } from '@ui/components/editor/common/Icon'
1111
import { CHATBOTS } from '@shared/constants/chatbots'
12-
import { use_translation } from '../../i18n/use-translation'
12+
import { use_translation, Translation } from '../../i18n/use-translation'
1313
import { NavItem } from '../Home'
1414

1515
type Props = {
@@ -100,9 +100,29 @@ export const WebSection = forwardRef<HTMLDivElement, Props>((props, ref) => {
100100

101101
return (
102102
<UiSection ref={ref} title={t('web.title')} subtitle={t('web.subtitle')}>
103-
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
104-
<UiNotice type="info">{t('web.notice')}</UiNotice>
105-
</div>
103+
<UiNotices
104+
notices={[
105+
{
106+
type: 'info',
107+
message: t('web.notice-websockets')
108+
},
109+
{
110+
type: 'info',
111+
message: (
112+
<Translation
113+
id="web.notice-forwarding"
114+
components={{
115+
forwarding: (
116+
<a href="https://code.visualstudio.com/docs/debugtest/port-forwarding">
117+
{t('web.forwarding')}
118+
</a>
119+
)
120+
}}
121+
/>
122+
)
123+
}
124+
]}
125+
/>
106126
<div
107127
ref={(el) => props.set_section_ref('section:web:group:chatbots', el)}
108128
>

‎apps/editor/src/views/settings/frontend/i18n/translations/web.ts‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const translations = {
2121
hu: 'Promptek automatikus kitöltése a böngészőbővítményen keresztül.',
2222
bg: 'Автоматично попълване на промптове чрез разширението за браузър.'
2323
},
24-
'web.notice': {
24+
'web.notice-websockets': {
2525
en: 'Communication with the browser uses local WebSockets.',
2626
pl: 'Komunikacja z przeglądarką odbywa się przez lokalne WebSockety.',
2727
'zh-cn': '与浏览器的通信使用本地 WebSocket.',
@@ -39,6 +39,42 @@ export const translations = {
3939
hu: 'A böngészővel való kommunikáció helyi WebSocketeket használ.',
4040
bg: 'Комуникацията с браузъра използва локални WebSocket.'
4141
},
42+
'web.notice-forwarding': {
43+
en: 'Use {forwarding} of port 55155 when using remote machine via SSH.',
44+
pl: 'Użyj {forwarding} portu 55155 podczas korzystania ze zdalnej maszyny przez SSH.',
45+
'zh-cn': '通过 SSH 使用远程机器时，使用端口 55155 的 {forwarding}。',
46+
ja: 'SSH 経由でリモートマシンを使用する場合は、ポート 55155 の {forwarding} を使用してください。',
47+
'zh-tw': '透過 SSH 使用遠端機器時，使用連接埠 55155 的 {forwarding}。',
48+
de: 'Verwenden Sie die {forwarding} für Port 55155, wenn Sie eine Remotemaschine über SSH nutzen.',
49+
es: 'Utiliza el {forwarding} del puerto 55155 cuando uses una máquina remota a través de SSH.',
50+
fr: 'Utilisez la {forwarding} du port 55155 lors de l\'utilisation d\'une machine distante via SSH.',
51+
'pt-br': 'Use o {forwarding} da porta 55155 ao usar uma máquina remota via SSH.',
52+
ru: 'Используйте {forwarding} порта 55155 при использовании удаленной машины через SSH.',
53+
ko: 'SSH를 통해 원격 머신을 사용할 때는 포트 55155의 {forwarding}을 사용하세요.',
54+
it: 'Usa il {forwarding} della porta 55155 quando usi una macchina remota tramite SSH.',
55+
tr: 'SSH üzerinden uzak makine kullanırken 55155 numaralı bağlantı noktasının {forwarding} özelliğini kullanın.',
56+
cs: 'Při použití vzdáleného počítače přes SSH použijte {forwarding} portu 55155.',
57+
hu: 'Használja az 55155-ös port {forwarding} funkcióját, ha SSH-n keresztül távoli gépet használ.',
58+
bg: 'Използвайте {forwarding} на порт 55155, когато използвате отдалечена машина чрез SSH.'
59+
},
60+
'web.forwarding': {
61+
en: 'forwarding',
62+
pl: 'przekierowania',
63+
'zh-cn': '端口转发',
64+
ja: 'ポートフォワーディング',
65+
'zh-tw': '通訊埠轉發',
66+
de: 'Portweiterleitung',
67+
es: 'reenvío de puertos',
68+
fr: 'redirection de port',
69+
'pt-br': 'encaminhamento de porta',
70+
ru: 'переадресации',
71+
ko: '포트 포워딩',
72+
it: 'port forwarding',
73+
tr: 'yönlendirme',
74+
cs: 'přesměrování',
75+
hu: 'porttovábbítás',
76+
bg: 'пренасочване'
77+
},
4278
'chatbots.configurations.title': {
4379
en: 'Chatbots',
4480
pl: 'Chatboty',

‎packages/ui/src/components/editor/settings/Notice/Notice.tsx‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎packages/ui/src/components/editor/settings/Notice/index.ts‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

packages/ui/src/components/editor/settings/Notice/Notice.module.scss renamed to packages/ui/src/components/editor/settings/Notices/Notices.module.scss

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
.wrapper {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 8px;
5+
}
6+
17
.container {
28
display: flex;
39
align-items: center;
@@ -45,4 +51,4 @@
4551
align-self: flex-start;
4652
padding-top: 1px;
4753
}
48-
}
54+
}

‎packages/ui/src/components/editor/settings/Notices/Notices.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import styles from './Notices.module.scss'
2+
import React from 'react'
3+
import cn from 'classnames'
4+
5+
type NoticeProps = {
6+
message: React.ReactNode
7+
type: 'info' | 'warning'
8+
slot_right?: React.ReactNode
9+
}
10+
11+
type Props = {
12+
notices: NoticeProps[]
13+
}
14+
15+
export const Notices: React.FC<Props> = (props) => {
16+
if (!props.notices || props.notices.length === 0) return null
17+
18+
return (
19+
<div className={styles.wrapper}>
20+
{props.notices.map((notice, index) => (
21+
<div
22+
key={index}
23+
className={cn(styles.container, {
24+
[styles['container--info']]: notice.type == 'info',
25+
[styles['container--warning']]: notice.type == 'warning'
26+
})}
27+
>
28+
<div
29+
className={cn(styles.left, {
30+
[styles['left--warning']]: notice.type == 'warning'
31+
})}
32+
>
33+
<span
34+
className={cn(
35+
'codicon',
36+
notice.type == 'info' ? 'codicon-info' : 'codicon-warning'
37+
)}
38+
/>
39+
<span>{notice.message}</span>
40+
</div>
41+
{notice.slot_right && <div>{notice.slot_right}</div>}
42+
</div>
43+
))}
44+
</div>
45+
)
46+
}

‎packages/ui/src/components/editor/settings/Notices/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './Notices'

0 commit comments

Comments
 (0)