Add prompt() plugin API (#121)

src-web/hooks/Prompt.tsx

@@ -1,30 +1,25 @@
-import type { FormEvent } from 'react';
+import type { ShowPromptRequest } from '@yaakapp-internal/plugin';
+import type { FormEvent, ReactNode } from 'react';
 import { useCallback, useState } from 'react';
 import { Button } from '../components/core/Button';
-import type { InputProps } from '../components/core/Input';
 import { PlainInput } from '../components/core/PlainInput';
 import { HStack } from '../components/core/Stacks';
 
-export interface PromptProps {
+export type PromptProps = Omit<ShowPromptRequest, 'id' | 'title' | 'description'> & {
+  description?: ReactNode;
   onHide: () => void;
   onResult: (value: string) => void;
-  label: InputProps['label'];
-  name: InputProps['name'];
-  defaultValue: InputProps['defaultValue'];
-  placeholder: InputProps['placeholder'];
-  require?: InputProps['require'];
-  confirmLabel?: string;
-}
+};
 
 export function Prompt({
   onHide,
   label,
-  name,
   defaultValue,
   placeholder,
   onResult,
-  require = true,
-  confirmLabel = 'Save',
+  require,
+  confirmText,
+  cancelText,
 }: PromptProps) {
   const [value, setValue] = useState<string>(defaultValue ?? '');
   const handleSubmit = useCallback(
@@ -45,18 +40,17 @@ export function Prompt({
         hideLabel
         autoSelect
         require={require}
-        placeholder={placeholder}
+        placeholder={placeholder ?? 'Enter text'}
         label={label}
-        name={name}
         defaultValue={defaultValue}
         onChange={setValue}
       />
       <HStack space={2} justifyContent="end">
         <Button onClick={onHide} variant="border" color="secondary">
-          Cancel
+          {cancelText || 'Cancel'}
         </Button>
         <Button type="submit" color="primary">
-          {confirmLabel}
+          {confirmText || 'Done'}
         </Button>
       </HStack>
     </form>

src-web/hooks/useCreateCookieJar.ts

@@ -17,9 +17,9 @@ export function useCreateCookieJar() {
       }
       const name = await prompt({
         id: 'new-cookie-jar',
-        name: 'name',
         title: 'New CookieJar',
         placeholder: 'My Jar',
+        confirmText: 'Create',
         label: 'Name',
         defaultValue: 'My Jar',
       });

src-web/hooks/useCreateEnvironment.ts

@@ -16,12 +16,12 @@ export function useCreateEnvironment() {
     mutationFn: async () => {
       const name = await prompt({
         id: 'new-environment',
-        name: 'name',
         title: 'New Environment',
         description: 'Create multiple environments with different sets of variables',
         label: 'Name',
         placeholder: 'My Environment',
         defaultValue: 'My Environment',
+        confirmText: 'Create',
       });
       return invokeCmd('cmd_create_environment', {
         name,

src-web/hooks/useCreateFolder.ts

@@ -19,11 +19,10 @@ export function useCreateFolder() {
         patch.name ||
         (await prompt({
           id: 'new-folder',
-          name: 'name',
           label: 'Name',
           defaultValue: 'Folder',
           title: 'New Folder',
-          confirmLabel: 'Create',
+          confirmText: 'Create',
           placeholder: 'Name',
         }));
       patch.sortPriority = patch.sortPriority || -Date.now();

src-web/hooks/useCreateWorkspace.ts

@@ -12,12 +12,11 @@ export function useCreateWorkspace() {
     mutationFn: async () => {
       const name = await prompt({
         id: 'new-workspace',
-        name: 'name',
         label: 'Name',
         defaultValue: 'My Workspace',
         title: 'New Workspace',
-        confirmLabel: 'Create',
         placeholder: 'My Workspace',
+        confirmText: 'Create',
       });
       return invokeCmd('cmd_create_workspace', { name });
     },

src-web/hooks/useHttpRequestActions.ts

@@ -16,6 +16,7 @@ export function useHttpRequestActions() {
       const responses = (await invokeCmd(
         'cmd_http_request_actions',
       )) as GetHttpRequestActionsResponse[];
+      console.log('REQUEST ACTIONS', responses);
       return responses;
     },
   });

src-web/hooks/usePrompt.ts

@@ -3,20 +3,12 @@ import { useDialog } from '../components/DialogContext';
 import type { PromptProps } from './Prompt';
 import { Prompt } from './Prompt';
 
+type Props = Pick<DialogProps, 'title' | 'description'> &
+  Omit<PromptProps, 'onResult' | 'onHide'> & { id: string };
+
 export function usePrompt() {
   const dialog = useDialog();
-  return ({
-    id,
-    title,
-    description,
-    name,
-    label,
-    defaultValue,
-    placeholder,
-    confirmLabel,
-    require,
-  }: Pick<DialogProps, 'title' | 'description'> &
-    Omit<PromptProps, 'onResult' | 'onHide'> & { id: string }) =>
+  return ({ id, title, description, ...props }: Props) =>
     new Promise((onResult: PromptProps['onResult']) => {
       dialog.show({
         id,
@@ -24,17 +16,7 @@ export function usePrompt() {
         description,
         hideX: true,
         size: 'sm',
-        render: ({ hide }) =>
-          Prompt({
-            onHide: hide,
-            onResult,
-            name,
-            label,
-            defaultValue,
-            placeholder,
-            confirmLabel,
-            require,
-          }),
+        render: ({ hide: onHide }) => Prompt({ onHide, onResult, ...props }),
       });
     });
 }

src-web/hooks/useRenameRequest.tsx

@@ -28,10 +28,10 @@ export function useRenameRequest(requestId: string | null) {
               Enter a new name for <InlineCode>{request.name}</InlineCode>
             </>
           ),
-        name: 'name',
         label: 'Name',
         placeholder: 'New Name',
         defaultValue: request.name,
+        confirmText: 'Save',
       });
       if (request.model === 'http_request') {
         updateHttpRequest.mutate({ id: request.id, update: (r: HttpRequest) => ({ ...r, name }) });