fix: disallow editing on the new page when coming from CLI (#500)

![image](https://github.com/jsr-io/jsr/assets/7829205/44759e8d-4c6c-4e8d-8d82-03027a70e954) Note how the "or create a new scope" text is gone, and how you can no longer edit the text fields. Fixes #478
jsr-io · May 14, 2024 · e243ea0 · e243ea0
1 parent 1aa2aad
commit e243ea0
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 45 deletions.
diff --git 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}
  />
  </div>
  );
@@ -81,16 +84,19 @@ export function ScopeSelect(
  scope.value = newScope;
  scopeUsage.value++;
  }}
+ locked={locked}
  />
- <p>
- or{" "}
- <button
- class="inline link"
- onClick={() => explicitCreateScope.value = false}
- >
- select an existing scope
- </button>
- </p>
+ {!locked && (
+ <p>
+ or{" "}
+ <button
+ class="inline link"
+ onClick={() => explicitCreateScope.value = false}
+ >
+ select an existing scope
+ </button>
+ </p>
+ )}
  <p class="text-gray-700 text-sm mt-2">
  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}
  >
  <option value="" disabled selected class="hidden text-gray-100">
  ---
  </option>
  {scopes.value.map((scope) => <option value={scope}>{scope}</option>)}
  </select>
- <p class="text-gray-500">
- or{" "}
- <button
- class="inline link mt-2"
- onClick={() => {
- explicitCreateScope.value = true;
- scope.value = "";
- }}
- >
- create a new scope
- </button>
- </p>
+
+ {!locked && (
+ <p class="text-gray-500">
+ or{" "}
+ <button
+ class="inline link mt-2"
+ onClick={() => {
+ explicitCreateScope.value = true;
+ scope.value = "";
+ }}
+ >
+ create a new scope
+ </button>
+ </p>
+ )}
  </>
  );
 }
@@ -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(
  ? (
  <p class="text-sm text-yellow-600">
  Scope names can not contain _, use - instead.{" "}
- <button
- class="text-cyan-700 hover:underline hover:text-blue-400"
- onClick={() => {
- newScope.value = newScope.value.replace(/_/g, "-");
- }}
- >
- Click to replace
- </button>
+ {!props.locked && (
+ <button
+ class="text-cyan-700 hover:underline hover:text-blue-400"
+ onClick={() => {
+ newScope.value = newScope.value.replace(/_/g, "-");
+ }}
+ >
+ Click to replace
+ </button>
+ )}
  </p>
  )
  : message.value && <p class="text-sm text-yellow-600">{message}</p>}
@@ -213,10 +229,11 @@ function CreateScope(
 }
 
 export function PackageName(
- { scope, name, pkg }: {
+ { scope, name, pkg, locked }: {
  scope: Signal<string>;
  name: Signal<string>;
  pkg: Signal<Package | null | undefined>;
+ 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("_")
  ? (
  <p class="text-sm text-yellow-600">
- Package names can not contain _, use - instead.{" "}
- <button
- class="text-cyan-700 hover:underline hover:text-blue-400"
- onClick={() => {
- name.value = name.value.replace(/_/g, "-");
- }}
- >
- Click to replace
- </button>
+ Package names can not contain _, use - instead. {!locked && (
+ <button
+ class="text-cyan-700 hover:underline hover:text-blue-400"
+ onClick={() => {
+ name.value = name.value.replace(/_/g, "-");
+ }}
+ >
+ Click to replace
+ </button>
+ )}
  </p>
  )
  : message.value && <p class="text-sm text-yellow-600">{message}</p>}
@@ -390,7 +410,8 @@ export function CreatePackage({ scope, name, pkg, fromCli }: {
  </p>
  {fromCli && (
  <p class="mt-2 text-gray-500">
- Go back to your terminal to continue publishing.
+ You can now close this page and go back to your terminal to
+ continue publishing.
  </p>
  )}
  </div>

diff --git a/frontend/routes/new.tsx b/frontend/routes/new.tsx
@@ -77,6 +77,7 @@ export default function New(props: PageProps<Data, State>) {
  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<Data, State>) {
  The name of your package must be unique within the scope you
  selected.
  </p>
- <PackageName scope={scope} name={name} pkg={pkg} />
-
+ <PackageName
+ scope={scope}
+ name={name}
+ pkg={pkg}
+ locked={props.data.fromCli}
+ />
  <CreatePackage
  scope={scope}
  name={name}

diff --git a/frontend/static/styles.css b/frontend/static/styles.css
@@ -154,8 +154,14 @@
  .input-container {
  @apply bg-white rounded-md leading-snug
  border-1.5 border-jsr-cyan-900/30 focus-within:border-jsr-cyan-500
- has-[input:disabled,select:disabled]:border-gray-300 has-[input:disabled,select:disabled]:text-jsr-gray-300 has-[input:disabled,select:disabled]:cursor-not-allowed
- has-[input:disabled,select:disabled]:bg-gray-100;
+ }
+
+ select:not([data-locked="true"]):disabled.input-container, input:not([data-locked="true"]):disabled.input-container, .input-container input:not([data-locked="true"]):disabled, .input-container select:not([data-locked="true"]):disabled {
+ @apply border-gray-300 text-jsr-gray-300 cursor-not-allowed bg-jsr-gray-100;
+ }
+
+ select[data-locked="true"].input-container, input[data-locked="true"].input-container, .input-container input[data-locked="true"], .input-container select[data-locked="true"] {
+ @apply text-jsr-gray-500 cursor-not-allowed bg-gray-50;
  }
 
  .input {
@@ -167,7 +173,7 @@
  }
 
  .select {
- @apply appearance-none outline-none;
+ @apply appearance-none outline-none opacity-100;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="evenodd" d="M.47 3.97a.75.75 0 0 1 1.06 0L6 8.44l4.47-4.47a.75.75 0 0 1 1.06 1.06l-5 5a.75.75 0 0 1-1.06 0l-5-5a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/></svg>')
  no-repeat;
  background-position: center right 0.5rem;