SaveQueryDialog

Shell

Save a query with a name, description, and visibility, choosing a statement when the editor contains several.

bun add @reopt-ai/opt-ui

Install and import

bash

bun add @reopt-ai/opt-ui

tsx

import { SaveQueryDialog } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

Give the query a name it can be found by

Usage guidance

Best practices

Pass splitSqlStatements(sql).map(item => item.text) or the selected SQL as candidates. Empty candidates cannot be saved.
Handle asynchronous onSubmit errors in the host and update saving/error. Call onOpenChange(false) only after saving succeeds.
Use mode="update" and initialValues when editing. Save the name, description, and visibility alongside the candidate SQL.

Usage to avoid

The dialog does not provide a save API or authorization checks. The example keeps results only in memory.

Usage examples

Choose a candidate and review the saved result

SaveQueryDialog

Prop	Type	Default	Description
openRequired	boolean	—	열림
onOpenChangeRequired	(open: boolean) => void	—	열림 상태 변경
onSubmitRequired	(values: SaveQueryValues) => void \| Promise<void>	—	저장
candidatesRequired	string[]	—	저장할 SQL 후보. 문장이 여럿이면 여러 개
initialCandidate	number	0	처음 보여줄 후보
candidateIsSelection	boolean	—	후보가 선택 영역인지
initialValues	Partial<Omit<SaveQueryValues, "sql">>	—	기존 저장 쿼리를 수정할 때의 초기값
mode	"create" \| "update"	"create"	새로 저장 / 수정
saving	boolean	—	저장 중
error	string	—	저장 실패 메시지
labels	SaveQueryDialogLabels	—	문구 오버라이드

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

SaveQueryDialog 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Related components

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

PageAside

Shells

Add a sticky, fixed-width page aside with header, body, and footer slots.

EnvPanel

Shells

Browse environment variables with collapsible environment groups and Composite navigation.

BranchSelect

Shells

Choose a Git branch with a wrapper around the Select primitive.

DesignGuidePanel

Shells

Consult six design-system reference sections covering primitives, keyboard patterns, Tailwind selectors, and accessibility attributes.

QuickActions

Shells

Present frequent actions in a grid or list with keyboard shortcut labels.

SaveQueryDialog

Shell

Save a query with a name, description, and visibility, choosing a statement when the editor contains several.

Related docs

bun add @reopt-ai/opt-ui

Install and import

bash

bun add @reopt-ai/opt-ui

tsx

import { SaveQueryDialog } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

Give the query a name it can be found by

Usage guidance

Best practices

Pass splitSqlStatements(sql).map(item => item.text) or the selected SQL as candidates. Empty candidates cannot be saved.
Handle asynchronous onSubmit errors in the host and update saving/error. Call onOpenChange(false) only after saving succeeds.
Use mode="update" and initialValues when editing. Save the name, description, and visibility alongside the candidate SQL.

Usage to avoid

The dialog does not provide a save API or authorization checks. The example keeps results only in memory.

Usage examples

Choose a candidate and review the saved result

SaveQueryDialog

Prop	Type	Default	Description
openRequired	boolean	—	열림
onOpenChangeRequired	(open: boolean) => void	—	열림 상태 변경
onSubmitRequired	(values: SaveQueryValues) => void \| Promise<void>	—	저장
candidatesRequired	string[]	—	저장할 SQL 후보. 문장이 여럿이면 여러 개
initialCandidate	number	0	처음 보여줄 후보
candidateIsSelection	boolean	—	후보가 선택 영역인지
initialValues	Partial<Omit<SaveQueryValues, "sql">>	—	기존 저장 쿼리를 수정할 때의 초기값
mode	"create" \| "update"	"create"	새로 저장 / 수정
saving	boolean	—	저장 중
error	string	—	저장 실패 메시지
labels	SaveQueryDialogLabels	—	문구 오버라이드