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{" "}
- explicitCreateScope.value = false}
- >
- select an existing scope
-
-
+ {!locked && (
+
+ or{" "}
+ explicitCreateScope.value = false}
+ >
+ select an existing scope
+
+
+ )}
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) => {scope} )}
-
- or{" "}
- {
- explicitCreateScope.value = true;
- scope.value = "";
- }}
- >
- create a new scope
-
-
+
+ {!locked && (
+
+ or{" "}
+ {
+ explicitCreateScope.value = true;
+ scope.value = "";
+ }}
+ >
+ create a new scope
+
+
+ )}
>
);
}
@@ -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.{" "}
- {
- newScope.value = newScope.value.replace(/_/g, "-");
- }}
- >
- Click to replace
-
+ {!props.locked && (
+ {
+ newScope.value = newScope.value.replace(/_/g, "-");
+ }}
+ >
+ Click to replace
+
+ )}
)
: 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.{" "}
- {
- name.value = name.value.replace(/_/g, "-");
- }}
- >
- Click to replace
-
+ Package names can not contain _, use - instead. {!locked && (
+ {
+ name.value = name.value.replace(/_/g, "-");
+ }}
+ >
+ Click to replace
+
+ )}
)
: 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;