From e80230db15d4751c31775e22849ffbddb9d0794b Mon Sep 17 00:00:00 2001 From: Luca Casonato Date: Fri, 10 May 2024 12:32:41 +0200 Subject: [PATCH] fix: disallow editing on the new page when coming from CLI --- frontend/islands/new.tsx | 101 ++++++++++++++++++++++--------------- frontend/routes/new.tsx | 9 +++- frontend/static/styles.css | 12 +++-- 3 files changed, 77 insertions(+), 45 deletions(-) diff --git a/frontend/islands/new.tsx b/frontend/islands/new.tsx index b9ac6115..88e313f6 100644 --- a/frontend/islands/new.tsx +++ b/frontend/islands/new.tsx @@ -33,6 +33,7 @@ interface ScopeSelectProps { initialScope: string | undefined; scopeUsage: number; scopeLimit: number; + locked: boolean; } export function ScopeSelect( @@ -42,6 +43,7 @@ export function ScopeSelect( initialScope, scopeLimit: initialScopeLimit, scopeUsage: initialScopeUsage, + locked, }: ScopeSelectProps, ) { const scopeUsage = useSignal(initialScopeUsage); @@ -63,6 +65,7 @@ export function ScopeSelect( scopes.value = [...scopes.value, newScope]; scope.value = newScope; }} + locked={locked} /> ); @@ -81,16 +84,19 @@ export function ScopeSelect( scope.value = newScope; scopeUsage.value++; }} + locked={locked} /> -

- or{" "} - -

+ {!locked && ( +

+ or{" "} + +

+ )}

You can create {scopesLeft === 0 ? "no" : scopesLeft}{" "} more scope{scopesLeft !== 1 && "s"}.{" "} @@ -107,24 +113,29 @@ export function ScopeSelect( class="w-full mt-4 block py-2 px-4 input-container input select" onChange={(e) => scope.value = e.currentTarget.value} value={scope} + disabled={locked} + data-locked={locked || undefined} > {scopes.value.map((scope) => )} -

- or{" "} - -

+ + {!locked && ( +

+ or{" "} + +

+ )} ); } @@ -133,6 +144,7 @@ function CreateScope( props: { initialValue: string | undefined; onCreate: (scope: string) => void; + locked: boolean; }, ) { const newScope = useSignal(props.initialValue ?? ""); @@ -178,6 +190,8 @@ function CreateScope( type="text" name="scope" placeholder="foo" + disabled={props.locked} + data-locked={props.locked || undefined} value={newScope} onInput={(e) => { newScope.value = e.currentTarget.value; @@ -197,14 +211,16 @@ function CreateScope( ? (

Scope names can not contain _, use - instead.{" "} - + {!props.locked && ( + + )}

) : message.value &&

{message}

} @@ -213,10 +229,11 @@ function CreateScope( } export function PackageName( - { scope, name, pkg }: { + { scope, name, pkg, locked }: { scope: Signal; name: Signal; pkg: Signal; + locked: boolean; }, ) { const error = useSignal(""); @@ -283,6 +300,8 @@ export function PackageName( type="text" name="package" placeholder="bar" + disabled={locked} + data-locked={locked || undefined} value={name} onInput={(e) => { name.value = e.currentTarget.value; @@ -299,15 +318,16 @@ export function PackageName( {name.value.includes("_") ? (

- Package names can not contain _, use - instead.{" "} - + Package names can not contain _, use - instead. {!locked && ( + + )}

) : message.value &&

{message}

} @@ -390,7 +410,8 @@ export function CreatePackage({ scope, name, pkg, fromCli }: {

{fromCli && (

- Go back to your terminal to continue publishing. + You can now close this page and go back to your terminal to + continue publishing.

)} diff --git a/frontend/routes/new.tsx b/frontend/routes/new.tsx index ad728152..e44a4895 100644 --- a/frontend/routes/new.tsx +++ b/frontend/routes/new.tsx @@ -77,6 +77,7 @@ export default function New(props: PageProps) { initialScope={props.data.initialScope} scopeUsage={props.state.user.scopeUsage} scopeLimit={props.state.user.scopeLimit} + locked={props.data.fromCli} /> ) : ( @@ -104,8 +105,12 @@ export default function New(props: PageProps) { The name of your package must be unique within the scope you selected.

- - + ') no-repeat; background-position: center right 0.5rem;