Skip to content

fix: render select labels before dropdown opens #212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
reatang wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: render select labels before dropdown opens #212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion app/(dashboard)/sse/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -936,6 +936,13 @@ export default function SSEPage() {
: t("Changing KMS service state may briefly interrupt SSE requests.")
const isPendingDefaultKey = pendingKeyAction?.key.key_id === status?.config_summary?.default_key_id

const backendTypeLabels: Record<ConfigFormState["backendType"], string> = {
unsupported: t("Unsupported KMS backend"),
local: t("Local filesystem"),
"vault-kv2": t("HashiCorp Vault KV2"),
"vault-transit": t("HashiCorp Vault Transit Engine"),
static: t("Static single-key (built-in)"),
}
const mutationLocked = Boolean(activeMutation || statusError || loadingStatus)
const unsupportedKmsReadOnly = formState.backendType === "unsupported"
const staticKmsReadOnly = hasConfiguration && formState.backendType === "static"
Expand Down Expand Up @@ -1160,7 +1167,9 @@ export default function SSEPage() {
disabled={formDisabled || localKmsConfigured}
>
<SelectTrigger id="kmsBackend" className="w-full" aria-label={t("KMS Backend")}>
<SelectValue placeholder={t("Select backend type")} />
<SelectValue placeholder={t("Select backend type")}>
{backendTypeLabels[formState.backendType] ?? null}
</SelectValue>
</SelectTrigger>
<SelectContent>
{formState.backendType === "unsupported" ? (
Expand Down
26 changes: 23 additions & 3 deletions components/buckets/info.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -714,6 +714,17 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
{ href: "#automation", label: t("Automation") },
]

const policyLabels: Partial<Record<BucketPolicyType | "custom", string>> = {
public: t("Public"),
private: t("Private"),
custom: t("Custom"),
}
const encryptionTypeLabels: Record<string, string> = {
disabled: t("Disabled"),
"SSE-KMS": "SSE-KMS",
"SSE-S3": "SSE-S3",
}

if (initialLoading) {
return (
<div className="flex items-center justify-center py-16" role="status" aria-live="polite">
Expand Down Expand Up @@ -1074,7 +1085,9 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
}}
>
<SelectTrigger id="bucket-policy-type" className="w-full" aria-label={t("Policy")}>
<SelectValue placeholder={t("Please select policy")} />
<SelectValue placeholder={t("Please select policy")}>
{policyLabels[policyFormPolicy] ?? policyFormPolicy}
</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectItem value="public">{t("Public")}</SelectItem>
Expand Down Expand Up @@ -1150,7 +1163,9 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
<FieldContent>
<Select value={encryptFormType} onValueChange={(value) => setEncryptFormType(value ?? "")}>
<SelectTrigger id="bucket-encryption-type" className="w-full" aria-label={t("Encryption Type")}>
<SelectValue placeholder={t("Please select encryption type")} />
<SelectValue placeholder={t("Please select encryption type")}>
{encryptionTypeLabels[encryptFormType] ?? null}
</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectItem value="disabled">{t("Disabled")}</SelectItem>
Expand Down Expand Up @@ -1186,7 +1201,12 @@ export function BucketInfo({ bucketName }: BucketInfoProps) {
aria-label="KMS Key ID"
disabled={kmsKeyLoading || Boolean(kmsKeyError)}
>
<SelectValue placeholder={t("Please select KMS key")} />
<SelectValue placeholder={t("Please select KMS key")}>
{encryptFormKmsKeyId
? (kmsKeyOptions.find((opt) => opt.value === encryptFormKmsKeyId)?.label ??
encryptFormKmsKeyId)
: null}
</SelectValue>
</SelectTrigger>
<SelectContent>
{kmsKeyOptions.map((opt) => (
Expand Down
8 changes: 6 additions & 2 deletions components/lifecycle/new-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,7 +360,9 @@ export function LifecycleNewForm({ open, onOpenChange, bucketName, onSuccess }:
<FieldContent>
<Select value={versionType} onValueChange={(value) => setVersionType(value ?? "")}>
<SelectTrigger className="w-full" aria-label={t("Object Version")}>
<SelectValue />
<SelectValue>
{versionOptions.find((opt) => opt.value === versionType)?.label ?? null}
</SelectValue>
</SelectTrigger>
<SelectContent>
{versionOptions.map((opt) => (
Expand Down Expand Up @@ -548,7 +550,9 @@ export function LifecycleNewForm({ open, onOpenChange, bucketName, onSuccess }:
<FieldContent>
<Select value={versionType} onValueChange={(value) => setVersionType(value ?? "")}>
<SelectTrigger className="w-full" aria-label={t("Object Version")}>
<SelectValue />
<SelectValue>
{versionOptions.find((opt) => opt.value === versionType)?.label ?? null}
</SelectValue>
</SelectTrigger>
<SelectContent>
{versionOptions.map((opt) => (
Expand Down
12 changes: 9 additions & 3 deletions components/replication/edit-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -435,6 +435,12 @@ export function ReplicationEditForm({
onOpenChange(false)
}

const tlsModeLabels: Record<BucketReplicationTlsMode, string> = {
verify: t("Default certificate verification"),
"custom-ca": t("Custom CA certificate"),
skip: t("Skip TLS verification"),
}

return (
<Dialog
open={open}
Expand Down Expand Up @@ -500,7 +506,7 @@ export function ReplicationEditForm({
disabled={controlsLocked || !canEditTargetField("replicationSync")}
>
<SelectTrigger className="w-full" aria-label={t("Mode")}>
<SelectValue />
<SelectValue>{modeOptions.find((opt) => opt.value === modeType)?.label ?? null}</SelectValue>
</SelectTrigger>
<SelectContent>
{modeOptions.map((opt) => (
Expand Down Expand Up @@ -773,7 +779,7 @@ export function ReplicationEditForm({
disabled={controlsLocked || !canEditTargetField("skipTlsVerify")}
>
<SelectTrigger id="replication-edit-tls-verification" className="w-full">
<SelectValue />
<SelectValue>{tlsModeLabels[tlsMode]}</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectItem value="verify">{t("Default certificate verification")}</SelectItem>
Expand Down Expand Up @@ -929,7 +935,7 @@ export function ReplicationEditForm({
disabled={controlsLocked || !canEditTargetField("bandwidth")}
>
<SelectTrigger className="w-28" aria-label={t("Bandwidth Unit")}>
<SelectValue />
<SelectValue>{unitOptions.find((opt) => opt.value === unit)?.label ?? null}</SelectValue>
</SelectTrigger>
<SelectContent>
{unitOptions.map((opt) => (
Expand Down
12 changes: 9 additions & 3 deletions components/replication/new-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -397,6 +397,12 @@ export function ReplicationNewForm({ open, onOpenChange, bucketName, onSuccess }
resetForm()
}

const tlsModeLabels: Record<BucketReplicationTlsMode, string> = {
verify: t("Default certificate verification"),
"custom-ca": t("Custom CA certificate"),
skip: t("Skip TLS verification"),
}

return (
<Dialog
open={open}
Expand Down Expand Up @@ -462,7 +468,7 @@ export function ReplicationNewForm({ open, onOpenChange, bucketName, onSuccess }
disabled={controlsLocked || !canEditTargetField("replicationSync")}
>
<SelectTrigger className="w-full" aria-label={t("Mode")}>
<SelectValue />
<SelectValue>{modeOptions.find((opt) => opt.value === modeType)?.label ?? null}</SelectValue>
</SelectTrigger>
<SelectContent>
{modeOptions.map((opt) => (
Expand Down Expand Up @@ -724,7 +730,7 @@ export function ReplicationNewForm({ open, onOpenChange, bucketName, onSuccess }
disabled={controlsLocked || !canEditTargetField("skipTlsVerify")}
>
<SelectTrigger id="replication-tls-verification" className="w-full">
<SelectValue />
<SelectValue>{tlsModeLabels[tlsMode]}</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectItem value="verify">{t("Default certificate verification")}</SelectItem>
Expand Down Expand Up @@ -878,7 +884,7 @@ export function ReplicationNewForm({ open, onOpenChange, bucketName, onSuccess }
disabled={controlsLocked || !canEditTargetField("bandwidth")}
>
<SelectTrigger className="w-28" aria-label={t("Bandwidth Unit")}>
<SelectValue />
<SelectValue>{unitOptions.find((opt) => opt.value === unit)?.label ?? null}</SelectValue>
</SelectTrigger>
<SelectContent>
{unitOptions.map((opt) => (
Expand Down
14 changes: 12 additions & 2 deletions components/site-replication/edit-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,16 @@ export function SiteReplicationEditForm({ open, onOpenChange, peer, onSuccess }:
return null
}

const syncStateLabels: Partial<Record<SiteReplicationSyncState, string>> = {
enable: t("Enabled"),
disable: t("Disabled"),
}
const tlsModeLabels: Record<SiteReplicationTlsMode, string> = {
verify: t("Default certificate verification"),
"custom-ca": t("Custom CA certificate"),
skip: t("Skip TLS verification"),
}

return (
<Dialog
open={open}
Expand Down Expand Up @@ -152,7 +162,7 @@ export function SiteReplicationEditForm({ open, onOpenChange, peer, onSuccess }:
<Label htmlFor="site-edit-sync">{t("Sync")}</Label>
<Select value={syncState} onValueChange={(value) => setSyncState(value as SiteReplicationSyncState)}>
<SelectTrigger id="site-edit-sync" className="w-full" aria-label={t("Sync")} disabled={saving}>
<SelectValue placeholder={t("Select")} />
<SelectValue placeholder={t("Select")}>{syncStateLabels[syncState] ?? null}</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectItem value="enable">{t("Enabled")}</SelectItem>
Expand Down Expand Up @@ -202,7 +212,7 @@ export function SiteReplicationEditForm({ open, onOpenChange, peer, onSuccess }:
disabled={saving}
>
<SelectTrigger id="site-edit-tls-verification" className="w-full">
<SelectValue />
<SelectValue>{tlsModeLabels[tlsMode]}</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectItem value="verify">{t("Default certificate verification")}</SelectItem>
Expand Down
8 changes: 7 additions & 1 deletion components/site-replication/new-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,12 @@ export function SiteReplicationNewForm({
resetForm()
}

const tlsModeLabels: Record<SiteReplicationTlsMode, string> = {
verify: t("Default certificate verification"),
"custom-ca": t("Custom CA certificate"),
skip: t("Skip TLS verification"),
}

return (
<Dialog
open={open}
Expand Down Expand Up @@ -454,7 +460,7 @@ export function SiteReplicationNewForm({
disabled={saving}
>
<SelectTrigger id={`site-tls-verification-${index}`} className="w-full">
<SelectValue />
<SelectValue>{tlsModeLabels[tlsModes[index] ?? "verify"]}</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectItem value="verify">{t("Default certificate verification")}</SelectItem>
Expand Down