fix(ui): collapse Code Execution settings when toggle is disabled (#25970)
This commit is contained in:
1 file changed
+98
-93
@@ -41,7 +41,7 @@
|
|||||||
{#if config}
|
{#if config}
|
||||||
<div>
|
<div>
|
||||||
<div class="mb-3.5">
|
<div class="mb-3.5">
|
||||||
<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('General')}</div>
|
<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('Code Execution')}</div>
|
||||||
|
|
||||||
<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
|
<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
|
||||||
|
|
||||||
@@ -55,112 +55,117 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mb-2.5">
|
{#if config.ENABLE_CODE_EXECUTION}
|
||||||
<div class="flex w-full justify-between">
|
<div class="mb-2.5">
|
||||||
<div class=" self-center text-xs font-medium">{$i18n.t('Code Execution Engine')}</div>
|
<div class="flex w-full justify-between">
|
||||||
<div class="flex items-center relative">
|
<div class=" self-center text-xs font-medium">
|
||||||
<select
|
{$i18n.t('Code Execution Engine')}
|
||||||
class="w-fit pr-8 rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
|
|
||||||
bind:value={config.CODE_EXECUTION_ENGINE}
|
|
||||||
placeholder={$i18n.t('Select a engine')}
|
|
||||||
required
|
|
||||||
>
|
|
||||||
<option disabled selected value="">{$i18n.t('Select a engine')}</option>
|
|
||||||
{#each engines as engine}
|
|
||||||
<option value={engine}>{engine}{engine === 'jupyter' ? ' (Legacy)' : ''}</option
|
|
||||||
>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if config.CODE_EXECUTION_ENGINE === 'jupyter'}
|
|
||||||
<div class="text-gray-500 text-xs">
|
|
||||||
{$i18n.t(
|
|
||||||
'Warning: Jupyter execution enables arbitrary code execution, posing severe security risks—proceed with extreme caution.'
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if config.CODE_EXECUTION_ENGINE === 'jupyter'}
|
|
||||||
<div class="mb-2.5 flex flex-col gap-1.5 w-full">
|
|
||||||
<div class="text-xs font-medium">
|
|
||||||
{$i18n.t('Jupyter URL')}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex w-full">
|
|
||||||
<div class="flex-1">
|
|
||||||
<input
|
|
||||||
class="w-full text-sm py-0.5 placeholder:text-gray-300 dark:placeholder:text-gray-700 bg-transparent outline-hidden"
|
|
||||||
type="text"
|
|
||||||
placeholder={$i18n.t('Enter Jupyter URL')}
|
|
||||||
bind:value={config.CODE_EXECUTION_JUPYTER_URL}
|
|
||||||
autocomplete="off"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="flex items-center relative">
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-2.5 flex flex-col gap-1.5 w-full">
|
|
||||||
<div class=" flex gap-2 w-full items-center justify-between">
|
|
||||||
<div class="text-xs font-medium">
|
|
||||||
{$i18n.t('Jupyter Auth')}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<select
|
<select
|
||||||
class="w-fit pr-8 rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-left"
|
class="w-fit pr-8 rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
|
||||||
bind:value={config.CODE_EXECUTION_JUPYTER_AUTH}
|
bind:value={config.CODE_EXECUTION_ENGINE}
|
||||||
placeholder={$i18n.t('Select an auth method')}
|
placeholder={$i18n.t('Select a engine')}
|
||||||
|
required
|
||||||
>
|
>
|
||||||
<option selected value="">{$i18n.t('None')}</option>
|
<option disabled selected value="">{$i18n.t('Select a engine')}</option>
|
||||||
<option value="token">{$i18n.t('Token')}</option>
|
{#each engines as engine}
|
||||||
<option value="password">{$i18n.t('Password')}</option>
|
<option value={engine}
|
||||||
|
>{engine}{engine === 'jupyter' ? ' (Legacy)' : ''}</option
|
||||||
|
>
|
||||||
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if config.CODE_EXECUTION_JUPYTER_AUTH}
|
{#if config.CODE_EXECUTION_ENGINE === 'jupyter'}
|
||||||
<div class="flex w-full gap-2">
|
<div class="text-gray-500 text-xs">
|
||||||
<div class="flex-1">
|
{$i18n.t(
|
||||||
{#if config.CODE_EXECUTION_JUPYTER_AUTH === 'password'}
|
'Warning: Jupyter execution enables arbitrary code execution, posing severe security risks—proceed with extreme caution.'
|
||||||
<SensitiveInput
|
)}
|
||||||
type="text"
|
|
||||||
placeholder={$i18n.t('Enter Jupyter Password')}
|
|
||||||
bind:value={config.CODE_EXECUTION_JUPYTER_AUTH_PASSWORD}
|
|
||||||
autocomplete="off"
|
|
||||||
/>
|
|
||||||
{:else}
|
|
||||||
<SensitiveInput
|
|
||||||
type="text"
|
|
||||||
placeholder={$i18n.t('Enter Jupyter Token')}
|
|
||||||
bind:value={config.CODE_EXECUTION_JUPYTER_AUTH_TOKEN}
|
|
||||||
autocomplete="off"
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex gap-2 w-full items-center justify-between">
|
{#if config.CODE_EXECUTION_ENGINE === 'jupyter'}
|
||||||
<div class="text-xs font-medium">
|
<div class="mb-2.5 flex flex-col gap-1.5 w-full">
|
||||||
{$i18n.t('Code Execution Timeout')}
|
<div class="text-xs font-medium">
|
||||||
|
{$i18n.t('Jupyter URL')}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex w-full">
|
||||||
|
<div class="flex-1">
|
||||||
|
<input
|
||||||
|
class="w-full text-sm py-0.5 placeholder:text-gray-300 dark:placeholder:text-gray-700 bg-transparent outline-hidden"
|
||||||
|
type="text"
|
||||||
|
placeholder={$i18n.t('Enter Jupyter URL')}
|
||||||
|
bind:value={config.CODE_EXECUTION_JUPYTER_URL}
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="">
|
<div class="mb-2.5 flex flex-col gap-1.5 w-full">
|
||||||
<Tooltip content={$i18n.t('Enter timeout in seconds')}>
|
<div class=" flex gap-2 w-full items-center justify-between">
|
||||||
<input
|
<div class="text-xs font-medium">
|
||||||
class="w-fit rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
|
{$i18n.t('Jupyter Auth')}
|
||||||
type="number"
|
</div>
|
||||||
bind:value={config.CODE_EXECUTION_JUPYTER_TIMEOUT}
|
|
||||||
placeholder={$i18n.t('e.g. 60')}
|
<div>
|
||||||
autocomplete="off"
|
<select
|
||||||
/>
|
class="w-fit pr-8 rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-left"
|
||||||
</Tooltip>
|
bind:value={config.CODE_EXECUTION_JUPYTER_AUTH}
|
||||||
|
placeholder={$i18n.t('Select an auth method')}
|
||||||
|
>
|
||||||
|
<option selected value="">{$i18n.t('None')}</option>
|
||||||
|
<option value="token">{$i18n.t('Token')}</option>
|
||||||
|
<option value="password">{$i18n.t('Password')}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if config.CODE_EXECUTION_JUPYTER_AUTH}
|
||||||
|
<div class="flex w-full gap-2">
|
||||||
|
<div class="flex-1">
|
||||||
|
{#if config.CODE_EXECUTION_JUPYTER_AUTH === 'password'}
|
||||||
|
<SensitiveInput
|
||||||
|
type="text"
|
||||||
|
placeholder={$i18n.t('Enter Jupyter Password')}
|
||||||
|
bind:value={config.CODE_EXECUTION_JUPYTER_AUTH_PASSWORD}
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
{:else}
|
||||||
|
<SensitiveInput
|
||||||
|
type="text"
|
||||||
|
placeholder={$i18n.t('Enter Jupyter Token')}
|
||||||
|
bind:value={config.CODE_EXECUTION_JUPYTER_AUTH_TOKEN}
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div class="flex gap-2 w-full items-center justify-between">
|
||||||
|
<div class="text-xs font-medium">
|
||||||
|
{$i18n.t('Code Execution Timeout')}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<Tooltip content={$i18n.t('Enter timeout in seconds')}>
|
||||||
|
<input
|
||||||
|
class="w-fit rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
|
||||||
|
type="number"
|
||||||
|
bind:value={config.CODE_EXECUTION_JUPYTER_TIMEOUT}
|
||||||
|
placeholder={$i18n.t('e.g. 60')}
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user