fix: align ops ai workspace settings ui
This commit is contained in:
DCCONSTRUCTIONS
@@ -4,8 +4,9 @@
|
||||
* See the LICENSE file for details.
|
||||
*/
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import type { FormEvent, MouseEvent } from "react";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import type { FormEvent, MouseEvent as ReactMouseEvent } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
// plane imports
|
||||
import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
|
||||
// services
|
||||
@@ -17,6 +18,10 @@ import type {
|
||||
} from "@/services/workspace-ai-workspace.service";
|
||||
|
||||
const DEFAULT_WINDOWS_AGENT_PORT = "8787";
|
||||
const connectionModeSelectOptions: Array<{ value: TAIWorkspaceExecutorConnectionMode; label: string }> = [
|
||||
{ value: "hub", label: "Cloud Hub" },
|
||||
{ value: "direct", label: "Прямое подключение" },
|
||||
];
|
||||
const capabilityOptions = [
|
||||
{ value: "chat", label: "Chat" },
|
||||
{ value: "code", label: "Code" },
|
||||
@@ -62,7 +67,7 @@ function emptyDraft(): TExecutorDraft {
|
||||
endpoint: "",
|
||||
workspacePath: "",
|
||||
agentPort: DEFAULT_WINDOWS_AGENT_PORT,
|
||||
accountLabel: "",
|
||||
accountLabel: "OpenAI account",
|
||||
capabilities: ["ops"],
|
||||
};
|
||||
}
|
||||
@@ -108,6 +113,151 @@ function errorText(error: unknown) {
|
||||
return String((error as any)?.message || (error as any)?.error || error);
|
||||
}
|
||||
|
||||
function AIWorkspaceGlassSelect<T extends string>({
|
||||
value,
|
||||
options,
|
||||
ariaLabel,
|
||||
disabled = false,
|
||||
onChange,
|
||||
}: {
|
||||
value: T;
|
||||
options: Array<{ value: T; label: string; disabled?: boolean }>;
|
||||
ariaLabel: string;
|
||||
disabled?: boolean;
|
||||
onChange: (value: T) => void;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [menuRect, setMenuRect] = useState({ top: 0, left: 0, width: 0 });
|
||||
const rootRef = useRef<HTMLDivElement | null>(null);
|
||||
const menuRef = useRef<HTMLDivElement | null>(null);
|
||||
const selectId = useMemo(() => `ops-ai-select-${Math.random().toString(16).slice(2)}`, []);
|
||||
const selected = options.find((option) => option.value === value) ?? options[0];
|
||||
|
||||
const updateMenuRect = () => {
|
||||
const root = rootRef.current;
|
||||
if (!root) return;
|
||||
const rect = root.getBoundingClientRect();
|
||||
const valueRect = root.querySelector<HTMLElement>(".nodedc-select__value")?.getBoundingClientRect();
|
||||
const menuMaxHeight = 232;
|
||||
const bottomTop = rect.bottom + 6;
|
||||
const top =
|
||||
bottomTop + menuMaxHeight > window.innerHeight - 12 ? Math.max(12, rect.top - menuMaxHeight - 6) : bottomTop;
|
||||
setMenuRect({
|
||||
top,
|
||||
left: valueRect?.left ?? rect.left,
|
||||
width: Math.max(180, valueRect?.width ?? rect.width),
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
updateMenuRect();
|
||||
|
||||
const handlePointerDown = (event: MouseEvent) => {
|
||||
const root = rootRef.current;
|
||||
const menu = menuRef.current;
|
||||
if (
|
||||
event.target instanceof Node &&
|
||||
root &&
|
||||
!root.contains(event.target) &&
|
||||
(!menu || !menu.contains(event.target))
|
||||
) {
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") setOpen(false);
|
||||
};
|
||||
const handleOtherSelectOpen = (event: Event) => {
|
||||
const detail = (event as CustomEvent<{ id?: string }>).detail;
|
||||
if (detail?.id !== selectId) setOpen(false);
|
||||
};
|
||||
const handleViewportChange = () => updateMenuRect();
|
||||
|
||||
document.addEventListener("mousedown", handlePointerDown);
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
window.addEventListener("nodedc-select-open", handleOtherSelectOpen as EventListener);
|
||||
window.addEventListener("resize", handleViewportChange);
|
||||
window.addEventListener("scroll", handleViewportChange, true);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handlePointerDown);
|
||||
document.removeEventListener("keydown", handleKeyDown);
|
||||
window.removeEventListener("nodedc-select-open", handleOtherSelectOpen as EventListener);
|
||||
window.removeEventListener("resize", handleViewportChange);
|
||||
window.removeEventListener("scroll", handleViewportChange, true);
|
||||
};
|
||||
}, [open, selectId]);
|
||||
|
||||
const toggleOpen = () => {
|
||||
if (disabled) return;
|
||||
setOpen((current) => {
|
||||
if (!current) {
|
||||
updateMenuRect();
|
||||
window.dispatchEvent(new CustomEvent("nodedc-select-open", { detail: { id: selectId } }));
|
||||
}
|
||||
return !current;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={rootRef} className="nodedc-select">
|
||||
<div className="nodedc-select__control">
|
||||
<div className="nodedc-select__value">{selected?.label}</div>
|
||||
<button
|
||||
type="button"
|
||||
className="nodedc-select__toggle"
|
||||
aria-label={ariaLabel}
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={open}
|
||||
disabled={disabled}
|
||||
onClick={toggleOpen}
|
||||
>
|
||||
<span className="nodedc-select__chevron" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{open && typeof document !== "undefined"
|
||||
? createPortal(
|
||||
<div
|
||||
ref={menuRef}
|
||||
className="nodedc-dropdown-surface nodedc-select__menu nodedc-ai-workspace-settings-select-menu"
|
||||
role="listbox"
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: menuRect.top,
|
||||
left: menuRect.left,
|
||||
width: menuRect.width,
|
||||
}}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
className="nodedc-dropdown-option nodedc-select__option"
|
||||
data-selected={option.value === value ? "true" : undefined}
|
||||
data-value={option.value}
|
||||
role="option"
|
||||
aria-selected={option.value === value}
|
||||
aria-disabled={option.disabled === true}
|
||||
disabled={option.disabled === true}
|
||||
onClick={() => {
|
||||
if (option.disabled) return;
|
||||
onChange(option.value);
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>,
|
||||
document.body
|
||||
)
|
||||
: null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function AIWorkspaceProductSettingsModal({
|
||||
isOpen,
|
||||
executors,
|
||||
@@ -178,7 +328,11 @@ export function AIWorkspaceProductSettingsModal({
|
||||
if (detailsMode === "new") {
|
||||
const payload = await onCreate(input);
|
||||
if (!payload) return;
|
||||
const next = payload?.executors.find((executor) => executor.name === input.name) ?? payload?.executors[0] ?? null;
|
||||
const next =
|
||||
payload?.executors.find((executor) => executor.id === payload.selectedExecutorId) ??
|
||||
payload?.executors.find((executor) => executor.name === input.name) ??
|
||||
payload?.executors[0] ??
|
||||
null;
|
||||
setEditingId(next?.id || "");
|
||||
setDetailsMode(next ? "edit" : "context");
|
||||
return;
|
||||
@@ -203,7 +357,7 @@ export function AIWorkspaceProductSettingsModal({
|
||||
});
|
||||
};
|
||||
|
||||
const downloadAgent = async (event: MouseEvent<HTMLAnchorElement>) => {
|
||||
const downloadAgent = async (event: ReactMouseEvent<HTMLAnchorElement>) => {
|
||||
if (!editingExecutor) return;
|
||||
event.preventDefault();
|
||||
await onDownloadAgent(editingExecutor.id, toInput(draft), draft.agentPort || DEFAULT_WINDOWS_AGENT_PORT);
|
||||
@@ -214,8 +368,8 @@ export function AIWorkspaceProductSettingsModal({
|
||||
isOpen={isOpen}
|
||||
handleClose={onClose}
|
||||
position={EModalPosition.CENTER}
|
||||
width={EModalWidth.XXL}
|
||||
className="overflow-visible"
|
||||
width={EModalWidth.VIIXL}
|
||||
className="ai-workspace-settings-portal overflow-visible"
|
||||
>
|
||||
<div className="nodedc-glass-modal ai-settings-modal ai-settings-modal--workspace nodedc-ai-workspace-product-modal">
|
||||
<div className="nodedc-glass-modal__head">
|
||||
@@ -388,19 +542,12 @@ export function AIWorkspaceProductSettingsModal({
|
||||
|
||||
<label className="ai-settings-field">
|
||||
<span>Подключение</span>
|
||||
<select
|
||||
className="ai-settings-input"
|
||||
<AIWorkspaceGlassSelect
|
||||
value={draft.connectionMode}
|
||||
onChange={(event) =>
|
||||
setDraft((current) => ({
|
||||
...current,
|
||||
connectionMode: event.target.value as TAIWorkspaceExecutorConnectionMode,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<option value="hub">Cloud Hub</option>
|
||||
<option value="direct">Прямое подключение</option>
|
||||
</select>
|
||||
options={connectionModeSelectOptions}
|
||||
ariaLabel="Тип подключения"
|
||||
onChange={(value) => setDraft((current) => ({ ...current, connectionMode: value }))}
|
||||
/>
|
||||
</label>
|
||||
|
||||
{draft.connectionMode === "hub" && detailsMode === "edit" && editingExecutor ? (
|
||||
@@ -441,26 +588,6 @@ export function AIWorkspaceProductSettingsModal({
|
||||
</label>
|
||||
) : null}
|
||||
|
||||
<label className="ai-settings-field">
|
||||
<span>Workspace path</span>
|
||||
<input
|
||||
className="ai-settings-input"
|
||||
value={draft.workspacePath}
|
||||
placeholder="C:\\Projects\\NODEDC"
|
||||
onChange={(event) => setDraft((current) => ({ ...current, workspacePath: event.target.value }))}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="ai-settings-field">
|
||||
<span>Порт агента</span>
|
||||
<input
|
||||
className="ai-settings-input"
|
||||
value={draft.agentPort}
|
||||
inputMode="numeric"
|
||||
onChange={(event) => setDraft((current) => ({ ...current, agentPort: event.target.value }))}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="ai-settings-field">
|
||||
<span>Аккаунт</span>
|
||||
<input
|
||||
|
||||
Reference in New Issue
Block a user