Work required to support the JWT plugin

src-web/components/core/Editor/Editor.tsx

@@ -51,7 +51,7 @@ export interface EditorProps {
   type?: 'text' | 'password';
   className?: string;
   heightMode?: 'auto' | 'full';
-  language?: EditorLanguage | 'pairs';
+  language?: EditorLanguage | 'pairs' | 'url';
   forceUpdateKey?: string | number;
   autoFocus?: boolean;
   autoSelect?: boolean;

src-web/components/core/InlineCode.tsx

@@ -6,7 +6,7 @@ export function InlineCode({ className, ...props }: HTMLAttributes<HTMLSpanEleme
     <code
       className={classNames(
         className,
-        'font-mono text-shrink bg-surface-highlight border border-border-subtle',
+        'font-mono text-shrink bg-surface-highlight border border-border-subtle flex-grow-0',
         'px-1.5 py-0.5 rounded text shadow-inner break-words',
       )}
       {...props}

src-web/components/core/Input.tsx

@@ -42,7 +42,7 @@ export type InputProps = Pick<
   className?: string;
   placeholder?: string;
   validate?: boolean | ((v: string) => boolean);
-  require?: boolean;
+  required?: boolean;
   wrapLines?: boolean;
   stateKey: EditorProps['stateKey'];
 };
@@ -65,7 +65,7 @@ export const Input = forwardRef<EditorView, InputProps>(function Input(
     onPaste,
     onPasteOverwrite,
     placeholder,
-    require,
+    required,
     rightSlot,
     wrapLines,
     size = 'md',
@@ -102,11 +102,11 @@ export const Input = forwardRef<EditorView, InputProps>(function Input(
   );
 
   const isValid = useMemo(() => {
-    if (require && !validateRequire(currentValue)) return false;
+    if (required && !validateRequire(currentValue)) return false;
     if (typeof validate === 'boolean') return validate;
     if (typeof validate === 'function' && !validate(currentValue)) return false;
     return true;
-  }, [require, currentValue, validate]);
+  }, [required, currentValue, validate]);
 
   const handleChange = useCallback(
     (value: string) => {
@@ -141,7 +141,11 @@ export const Input = forwardRef<EditorView, InputProps>(function Input(
         labelPosition === 'top' && 'flex-row gap-0.5',
       )}
     >
-      <Label htmlFor={id.current} className={classNames(labelClassName, hideLabel && 'sr-only')}>
+      <Label
+        htmlFor={id.current}
+        optional={!required}
+        className={classNames(labelClassName, hideLabel && 'sr-only')}
+      >
         {label}
       </Label>
       <HStack

src-web/components/core/Label.tsx

@@ -4,13 +4,23 @@ import type { HTMLAttributes } from 'react';
 export function Label({
   htmlFor,
   className,
+  optional,
+  children,
   ...props
-}: HTMLAttributes<HTMLLabelElement> & { htmlFor: string }) {
+}: HTMLAttributes<HTMLLabelElement> & { htmlFor: string; optional?: boolean }) {
   return (
     <label
-      className={classNames(className, 'text-text-subtle whitespace-nowrap')}
+      className={classNames(className, 'text-text-subtle whitespace-nowrap flex items-center gap-1')}
       htmlFor={htmlFor}
       {...props}
-    />
+    >
+      {children}
+      {optional ? (
+        <>
+          {' '}
+          <span className="text-xs text-text-subtlest">(optional)</span>
+        </>
+      ) : null}
+    </label>
   );
 }

src-web/components/core/PairEditor.tsx

@@ -466,7 +466,7 @@ function PairEditorRow({
             wrapLines={false}
             readOnly={pair.readOnlyName}
             size="sm"
-            require={!isLast && !!pair.enabled && !!pair.value}
+            required={!isLast && !!pair.enabled && !!pair.value}
             validate={nameValidate}
             forceUpdateKey={forceUpdateKey}
             containerClassName={classNames(isLast && 'border-dashed')}
@@ -577,7 +577,6 @@ function FileActionsDropdown({
         onSelect: async () => {
           const contentType = await showPrompt({
             id: 'content-type',
-            require: false,
             title: 'Override Content-Type',
             label: 'Content-Type',
             placeholder: 'text/plain',

src-web/components/core/PlainInput.tsx

@@ -29,7 +29,7 @@ export function PlainInput({
   onChange,
   onFocus,
   onPaste,
-  require,
+  required,
   rightSlot,
   size = 'md',
   type = 'text',
@@ -72,11 +72,11 @@ export function PlainInput({
   );
 
   const isValid = useMemo(() => {
-    if (require && !validateRequire(currentValue)) return false;
+    if (required && !validateRequire(currentValue)) return false;
     if (typeof validate === 'boolean') return validate;
     if (typeof validate === 'function' && !validate(currentValue)) return false;
     return true;
-  }, [require, currentValue, validate]);
+  }, [required, currentValue, validate]);
 
   const handleChange = useCallback(
     (value: string) => {
@@ -137,7 +137,7 @@ export function PlainInput({
             className={classNames(commonClassName, 'h-auto')}
             onFocus={handleFocus}
             onBlur={handleBlur}
-            required={require}
+            required={required}
             autoFocus={autoFocus}
             placeholder={placeholder}
             onKeyDownCapture={onKeyDownCapture}

src-web/components/core/Prompt.tsx

@@ -17,7 +17,7 @@ export function Prompt({
   defaultValue,
   placeholder,
   onResult,
-  require,
+  required,
   confirmText,
   cancelText,
 }: PromptProps) {
@@ -38,7 +38,7 @@ export function Prompt({
       <Input
         hideLabel
         autoSelect
-        require={require}
+        required={required}
         placeholder={placeholder ?? 'Enter text'}
         label={label}
         defaultValue={defaultValue}