This commit is contained in:
Timothy Jaeryang Baek
2026-03-13 16:28:01 -05:00
parent d85b52bfc2
commit 157ff57c40
3 changed files with 81 additions and 48 deletions
+26 -13
View File
@@ -14,6 +14,7 @@
import SensitiveInput from '$lib/components/common/SensitiveInput.svelte'; import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import Switch from '$lib/components/common/Switch.svelte'; import Switch from '$lib/components/common/Switch.svelte';
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import Tags from './common/Tags.svelte'; import Tags from './common/Tags.svelte';
import Spinner from '$lib/components/common/Spinner.svelte'; import Spinner from '$lib/components/common/Spinner.svelte';
import XMark from '$lib/components/icons/XMark.svelte'; import XMark from '$lib/components/icons/XMark.svelte';
@@ -52,6 +53,7 @@
let modelIds = []; let modelIds = [];
let loading = false; let loading = false;
let showDeleteConfirmDialog = false;
const verifyOllamaHandler = async () => { const verifyOllamaHandler = async () => {
// remove trailing slash from url // remove trailing slash from url
@@ -684,19 +686,20 @@
</div> </div>
</div> </div>
<div class="flex justify-end pt-3 text-sm font-medium gap-1.5"> <div class="flex justify-between items-center pt-3 text-sm font-medium">
{#if edit} <div>
<button {#if edit}
class="px-3.5 py-1.5 text-sm font-medium dark:bg-black dark:hover:bg-gray-900 dark:text-white bg-white text-black hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center" <button
type="button" class="px-1 py-1.5 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:underline transition"
on:click={() => { type="button"
onDelete(); on:click={() => {
show = false; showDeleteConfirmDialog = true;
}} }}
> >
{$i18n.t('Delete')} {$i18n.t('Delete')}
</button> </button>
{/if} {/if}
</div>
<button <button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
@@ -719,3 +722,13 @@
</div> </div>
</div> </div>
</Modal> </Modal>
<ConfirmDialog
bind:show={showDeleteConfirmDialog}
message={$i18n.t('Are you sure you want to delete this connection? This action cannot be undone.')}
confirmLabel={$i18n.t('Delete')}
on:confirm={() => {
onDelete();
show = false;
}}
/>
@@ -11,6 +11,7 @@
import AccessControlModal from '$lib/components/workspace/common/AccessControlModal.svelte'; import AccessControlModal from '$lib/components/workspace/common/AccessControlModal.svelte';
import LockClosed from '$lib/components/icons/LockClosed.svelte'; import LockClosed from '$lib/components/icons/LockClosed.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import { detectTerminalServerType, putOrchestratorPolicy } from '$lib/apis/configs'; import { detectTerminalServerType, putOrchestratorPolicy } from '$lib/apis/configs';
import { getTerminalConfig } from '$lib/apis/terminal'; import { getTerminalConfig } from '$lib/apis/terminal';
@@ -31,6 +32,7 @@
let enabled = false; let enabled = false;
let showAdvanced = false; let showAdvanced = false;
let showAccessControlModal = false; let showAccessControlModal = false;
let showDeleteConfirmDialog = false;
let accessGrants: any[] = []; let accessGrants: any[] = [];
// Policy / auto-detect state // Policy / auto-detect state
@@ -698,29 +700,27 @@
</div> </div>
</div> </div>
<div class="flex justify-between pt-3 text-sm font-medium gap-1.5"> <div class="flex justify-between items-center pt-3 text-sm font-medium">
<div></div> <div>
<div class="flex gap-1.5">
{#if edit} {#if edit}
<button <button
class="px-3.5 py-1.5 text-sm font-medium dark:bg-black dark:hover:bg-gray-900 dark:text-white bg-white text-black hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center" class="px-1 py-1.5 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:underline transition"
type="button" type="button"
on:click={() => { on:click={() => {
onDelete(); showDeleteConfirmDialog = true;
show = false;
}} }}
> >
{$i18n.t('Delete')} {$i18n.t('Delete')}
</button> </button>
{/if} {/if}
<button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center"
type="submit"
>
{$i18n.t('Save')}
</button>
</div> </div>
<button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center"
type="submit"
>
{$i18n.t('Save')}
</button>
</div> </div>
</div> </div>
</form> </form>
@@ -730,3 +730,13 @@
</Modal> </Modal>
<AccessControlModal bind:show={showAccessControlModal} bind:accessGrants /> <AccessControlModal bind:show={showAccessControlModal} bind:accessGrants />
<ConfirmDialog
bind:show={showDeleteConfirmDialog}
message={$i18n.t('Are you sure you want to delete this connection? This action cannot be undone.')}
confirmLabel={$i18n.t('Delete')}
on:confirm={() => {
onDelete();
show = false;
}}
/>
+32 -22
View File
@@ -24,6 +24,7 @@
import Spinner from '$lib/components/common/Spinner.svelte'; import Spinner from '$lib/components/common/Spinner.svelte';
import XMark from '$lib/components/icons/XMark.svelte'; import XMark from '$lib/components/icons/XMark.svelte';
import Textarea from './common/Textarea.svelte'; import Textarea from './common/Textarea.svelte';
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
export let onSubmit: Function = () => {}; export let onSubmit: Function = () => {};
export let onDelete: Function = () => {}; export let onDelete: Function = () => {};
@@ -61,6 +62,7 @@
let loading = false; let loading = false;
let showAdvanced = false; let showAdvanced = false;
let showAccessControlModal = false; let showAccessControlModal = false;
let showDeleteConfirmDialog = false;
const registerOAuthClientHandler = async () => { const registerOAuthClientHandler = async () => {
if (url === '') { if (url === '') {
@@ -881,38 +883,36 @@
</div> </div>
{/if} {/if}
<div class="flex justify-between pt-3 text-sm font-medium gap-1.5"> <div class="flex justify-between items-center pt-3 text-sm font-medium">
<div></div> <div>
<div class="flex gap-1.5">
{#if edit} {#if edit}
<button <button
class="px-3.5 py-1.5 text-sm font-medium dark:bg-black dark:hover:bg-gray-900 dark:text-white bg-white text-black hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center" class="px-1 py-1.5 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:underline transition"
type="button" type="button"
on:click={() => { on:click={() => {
onDelete(); showDeleteConfirmDialog = true;
show = false;
}} }}
> >
{$i18n.t('Delete')} {$i18n.t('Delete')}
</button> </button>
{/if} {/if}
<button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
? ' cursor-not-allowed'
: ''}"
type="submit"
disabled={loading}
>
{$i18n.t('Save')}
{#if loading}
<span class="shrink-0">
<Spinner />
</span>
{/if}
</button>
</div> </div>
<button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
? ' cursor-not-allowed'
: ''}"
type="submit"
disabled={loading}
>
{$i18n.t('Save')}
{#if loading}
<span class="shrink-0">
<Spinner />
</span>
{/if}
</button>
</div> </div>
</form> </form>
</div> </div>
@@ -921,3 +921,13 @@
</Modal> </Modal>
<AccessControlModal bind:show={showAccessControlModal} bind:accessGrants /> <AccessControlModal bind:show={showAccessControlModal} bind:accessGrants />
<ConfirmDialog
bind:show={showDeleteConfirmDialog}
message={$i18n.t('Are you sure you want to delete this connection? This action cannot be undone.')}
confirmLabel={$i18n.t('Delete')}
on:confirm={() => {
onDelete();
show = false;
}}
/>