Update rule-authoring UI to the draft-table API

The backend pivoted from git submission backends to a rule_drafts table
(roostorg#402), so the editor's submit/pending calls no longer exist. Rewire the
UI to the new endpoints:

- submit (POST rule-drafts/submit) -> create (POST rule-drafts)
- pending (GET rule-drafts/pending) -> list (GET rule-drafts)
- add a Deploy action (POST rule-drafts/<id>/deploy) carrying wire_into_main

The editor is now save-draft then deploy rather than open-a-PR, and the
Rules page lists in-progress drafts (status tag, link to edit) instead of
pending-review pull requests. The source/validate/vocabulary/parse
endpoints were unchanged, so those calls stay.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TEcfpqhza3dPepZUVWw36X

Author: julietshen

osprey_ui/src/actions/RulesActions.tsx

@@ -1,9 +1,10 @@
 import HTTPUtils, { HTTPResponse } from '../utils/HTTPUtils';
 import {
+  DeployRuleDraftResponse,
   ParseIntoBuilderResponse,
-  PendingDraftsResponse,
+  RuleDraft,
   RuleDraftSourceResponse,
-  RuleDraftSubmitResponse,
+  RuleDraftsListResponse,
   RuleDraftValidationResponse,
   RuleDraftVocabulary,
   RulesListResponse,
@@ -54,35 +55,48 @@ export async function getRuleDraftVocabulary(): Promise<RuleDraftVocabulary> {
   throw new Error(response.error.message ?? 'Failed to fetch rule vocabulary');
 }
 
-export interface SubmitRuleDraftBody {
+export interface CreateRuleDraftBody {
   path: string;
   source: string;
   rule_name: string;
   summary: string;
-  is_new_rule: boolean;
+}
+
+// Saves a draft into the rule_drafts table (upserted by path). The draft is staged,
+// not live; deployRuleDraft writes it into the rules directory.
+export async function createRuleDraft(body: CreateRuleDraftBody): Promise<RuleDraft> {
+  const response: HTTPResponse = await HTTPUtils.post('rule-drafts', body);
+  if (response.ok) {
+    return response.data;
+  }
+  const errPayload = response.error.response?.data as { error?: string } | undefined;
+  throw new Error(errPayload?.error ?? response.error.message ?? 'Failed to save rule draft');
+}
+
+export interface DeployRuleDraftBody {
+  // Also append a Require line to main.sml so the rule takes effect.
   wire_into_main?: boolean;
-  branch?: string;
 }
 
-export async function submitRuleDraft(body: SubmitRuleDraftBody): Promise<RuleDraftSubmitResponse> {
-  const response: HTTPResponse = await HTTPUtils.post('rule-drafts/submit', body);
+export async function deployRuleDraft(id: number, body: DeployRuleDraftBody = {}): Promise<DeployRuleDraftResponse> {
+  const response: HTTPResponse = await HTTPUtils.post(`rule-drafts/${id}/deploy`, body);
   if (response.ok) {
     return response.data;
   }
   const errPayload = response.error.response?.data as { error?: string } | undefined;
-  throw new Error(errPayload?.error ?? response.error.message ?? 'Failed to submit rule draft');
+  throw new Error(errPayload?.error ?? response.error.message ?? 'Failed to deploy rule draft');
 }
 
-export async function getPendingRuleDrafts(): Promise<PendingDraftsResponse> {
+export async function getRuleDrafts(): Promise<RuleDraftsListResponse> {
   // Returns an empty list rather than throwing on failure so the RulesPage still renders
-  // when GitHub isn't configured.
-  const response: HTTPResponse = await HTTPUtils.get('rule-drafts/pending');
+  // when the caller lacks the rule-drafts ability.
+  const response: HTTPResponse = await HTTPUtils.get('rule-drafts');
   if (response.ok) {
     return response.data;
   }
-  const errPayload = response.error.response?.data as PendingDraftsResponse | undefined;
-  if (errPayload && Array.isArray(errPayload.pending)) {
+  const errPayload = response.error.response?.data as RuleDraftsListResponse | undefined;
+  if (errPayload && Array.isArray(errPayload.drafts)) {
     return errPayload;
   }
-  return { pending: [], error: response.error.message ?? 'Failed to fetch pending drafts' };
+  return { drafts: [] };
 }

osprey_ui/src/components/rules/RuleEditorPage.tsx

@@ -14,19 +14,21 @@ import {
   Typography,
   message,
 } from 'antd';
-import { DeleteOutlined, PlusOutlined, SaveOutlined } from '@ant-design/icons';
+import { CloudUploadOutlined, DeleteOutlined, PlusOutlined, SaveOutlined } from '@ant-design/icons';
 import { useHistory, useLocation } from 'react-router-dom';
 
 import {
+  createRuleDraft,
+  deployRuleDraft,
   getRuleDraftSource,
   getRuleDraftVocabulary,
   parseRuleDraftIntoBuilder,
-  submitRuleDraft,
   validateRuleDraft,
 } from '../../actions/RulesActions';
 import usePromiseResult from '../../hooks/usePromiseResult';
 import {
   ParseIntoBuilderResponse,
+  RuleDraft,
   RuleDraftValidationMessage,
   RuleDraftValidationResponse,
   RuleDraftVocabulary,
@@ -53,6 +55,16 @@ const { Title, Text, Paragraph } = Typography;
 
 type EditorMode = 'builder' | 'code';
 
+// Saving stages a draft in the rule_drafts table; deploying writes it into the
+// rules directory. The saved draft's id is what a subsequent deploy targets.
+type SubmitState =
+  | { kind: 'idle' }
+  | { kind: 'saving' }
+  | { kind: 'saved'; draft: RuleDraft }
+  | { kind: 'deploying'; draft: RuleDraft }
+  | { kind: 'deployed'; draft: RuleDraft; mainSmlUpdated: boolean; pathOnDisk: string }
+  | { kind: 'error'; message: string };
+
 const VALIDATE_DEBOUNCE_MS = 600;
 
 interface BootstrapData {
@@ -118,17 +130,12 @@ const RuleEditorView: React.FC<{ data: BootstrapData }> = ({ data }) => {
     return EMPTY_BUILDER_MODEL;
   });
   const [summary, setSummary] = React.useState<string>('');
-  // Off by default: turning a rule on is a deliberate opt-in, so a submit never
+  // Off by default: turning a rule on is a deliberate opt-in, so a deploy never
   // wires a new rule into the live ruleset unless the author checks the box.
   const [wireIntoMain, setWireIntoMain] = React.useState<boolean>(false);
   const [validation, setValidation] = React.useState<RuleDraftValidationResponse | null>(null);
   const [isValidating, setIsValidating] = React.useState<boolean>(false);
-  const [submitState, setSubmitState] = React.useState<
-    | { kind: 'idle' }
-    | { kind: 'submitting' }
-    | { kind: 'done'; title: string; prUrl: string | null }
-    | { kind: 'error'; message: string }
-  >({ kind: 'idle' });
+  const [submitState, setSubmitState] = React.useState<SubmitState>({ kind: 'idle' });
 
   const effectiveSource = mode === 'builder' ? generateSmlFromBuilder(builder, data.vocabulary.features) : codeSource;
 
@@ -174,11 +181,14 @@ const RuleEditorView: React.FC<{ data: BootstrapData }> = ({ data }) => {
 
   const ruleNameForSubmit = mode === 'builder' ? builder.ruleName : guessRuleNameFromSource(codeSource);
 
-  const canSubmit =
-    !!validation?.ok &&
-    SML_IDENTIFIER_RE.test(ruleNameForSubmit) &&
-    submitState.kind !== 'submitting' &&
-    !!effectiveSource.trim();
+  const isBusy = submitState.kind === 'saving' || submitState.kind === 'deploying';
+  const canSave = !!validation?.ok && SML_IDENTIFIER_RE.test(ruleNameForSubmit) && !isBusy && !!effectiveSource.trim();
+  // A draft must exist (be saved) before it can be deployed; the deploy targets its id.
+  const savedDraft =
+    submitState.kind === 'saved' || submitState.kind === 'deployed' || submitState.kind === 'deploying'
+      ? submitState.draft
+      : null;
+  const canDeploy = savedDraft !== null && !isBusy;
 
   // The builder and code editor hold independent state, so a tab switch has to
   // carry content across: builder -> code dumps the generated SML into the
@@ -208,21 +218,37 @@ const RuleEditorView: React.FC<{ data: BootstrapData }> = ({ data }) => {
     }
   };
 
-  const onSubmit = async () => {
-    if (!canSubmit) return;
-    setSubmitState({ kind: 'submitting' });
+  const onSave = async () => {
+    if (!canSave) return;
+    setSubmitState({ kind: 'saving' });
     try {
-      const res = await submitRuleDraft({
+      const draft = await createRuleDraft({
         path,
         source: effectiveSource,
         rule_name: ruleNameForSubmit,
         summary,
-        is_new_rule: data.isNewRule,
-        wire_into_main: wireIntoMain,
       });
-      setSubmitState({ kind: 'done', title: res.title, prUrl: res.url });
+      setSubmitState({ kind: 'saved', draft });
+      message.success('Draft saved.');
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : String(e);
+      setSubmitState({ kind: 'error', message: msg });
+    }
+  };
+
+  const onDeploy = async () => {
+    if (savedDraft === null || isBusy) return;
+    setSubmitState({ kind: 'deploying', draft: savedDraft });
+    try {
+      const res = await deployRuleDraft(savedDraft.id, { wire_into_main: wireIntoMain });
+      setSubmitState({
+        kind: 'deployed',
+        draft: res,
+        mainSmlUpdated: res.main_sml_updated,
+        pathOnDisk: res.path_on_disk,
+      });
       const wiredMsg = res.main_sml_updated ? ' (main.sml updated)' : '';
-      message.success(`${res.title}${wiredMsg}.`);
+      message.success(`Deployed to ${res.path_on_disk}${wiredMsg}.`);
     } catch (e) {
       const msg = e instanceof Error ? e.message : String(e);
       setSubmitState({ kind: 'error', message: msg });
@@ -238,8 +264,8 @@ const RuleEditorView: React.FC<{ data: BootstrapData }> = ({ data }) => {
               {data.isNewRule ? 'Add rule' : 'Edit rule'}
             </Title>
             <Text type="secondary">
-              Drafts open a pull request against the rules repo. Nothing applies until the PR is merged and the engine
-              reloads.
+              Save stages this rule in the drafts table. Deploy writes it into the rules directory; nothing applies
+              until the engine reloads.
             </Text>
           </div>
           <div className={styles.headerActions}>
@@ -262,9 +288,25 @@ const RuleEditorView: React.FC<{ data: BootstrapData }> = ({ data }) => {
               />
             </Tooltip>
             <Button onClick={() => history.push('/rules')}>Cancel</Button>
-            <Button type="primary" icon={<SaveOutlined />} disabled={!canSubmit} onClick={onSubmit}>
-              Submit for review
+            <Button
+              icon={<SaveOutlined />}
+              disabled={!canSave}
+              onClick={onSave}
+              loading={submitState.kind === 'saving'}
+            >
+              Save draft
             </Button>
+            <Tooltip title={canDeploy ? '' : 'Save the draft first, then deploy it.'}>
+              <Button
+                type="primary"
+                icon={<CloudUploadOutlined />}
+                disabled={!canDeploy}
+                onClick={onDeploy}
+                loading={submitState.kind === 'deploying'}
+              >
+                Deploy
+              </Button>
+            </Tooltip>
           </div>
         </div>
 
@@ -274,12 +316,12 @@ const RuleEditorView: React.FC<{ data: BootstrapData }> = ({ data }) => {
           <div>
             <Card size="small" style={{ marginBottom: 12 }}>
               <Form layout="vertical" size="small">
-                <Form.Item label="File path" tooltip="Path inside the rules repo where this file will live.">
+                <Form.Item label="File path" tooltip="Path inside the rules directory where this file will live.">
                   <Input value={path} onChange={(e) => setPath(e.target.value)} disabled={!data.isNewRule} />
                 </Form.Item>
                 <Form.Item
-                  label={data.isNewRule ? 'Why this rule? (for reviewers)' : "What's changing? (for reviewers)"}
-                  tooltip="Becomes the pull request description. Not saved into the rule file itself."
+                  label={data.isNewRule ? 'Why this rule?' : "What's changing?"}
+                  tooltip="Saved alongside the draft. Not written into the rule file itself."
                 >
                   <Input.TextArea
                     value={summary}
@@ -294,11 +336,11 @@ const RuleEditorView: React.FC<{ data: BootstrapData }> = ({ data }) => {
                 </Form.Item>
                 <Form.Item style={{ marginBottom: 0 }}>
                   <Checkbox checked={wireIntoMain} onChange={(e) => setWireIntoMain(e.target.checked)}>
-                    Turn this rule on once the review is approved.
+                    Turn this rule on when I deploy it.
                   </Checkbox>
                   <div className={styles.footnote}>
-                    Adds your rule to the list Osprey runs, as part of the same review. If it&apos;s already on the
-                    list, nothing changes.
+                    Adds your rule to the list Osprey runs (a Require line in main.sml) as part of the deploy. If
+                    it&apos;s already on the list, nothing changes.
                   </div>
                 </Form.Item>
               </Form>
@@ -339,8 +381,7 @@ const RuleEditorView: React.FC<{ data: BootstrapData }> = ({ data }) => {
               <Card size="small" title="Generated SML preview" style={{ marginTop: 12 }}>
                 <pre className={styles.previewBlock}>{effectiveSource}</pre>
                 <div className={styles.footnote}>
-                  This is the code that will be submitted in a pull request on Github. Make further changes in the Code
-                  Editor view.
+                  This is the code that will be saved as the draft. Make further changes in the Code Editor view.
                 </div>
               </Card>
             )}
@@ -356,42 +397,42 @@ const RuleEditorView: React.FC<{ data: BootstrapData }> = ({ data }) => {
   );
 };
 
-const SubmitBanner: React.FC<{
-  submitState:
-    | { kind: 'idle' }
-    | { kind: 'submitting' }
-    | { kind: 'done'; title: string; prUrl: string | null }
-    | { kind: 'error'; message: string };
-}> = ({ submitState }) => {
+const SubmitBanner: React.FC<{ submitState: SubmitState }> = ({ submitState }) => {
   if (submitState.kind === 'idle') return null;
-  if (submitState.kind === 'submitting') {
-    return <Alert type="info" message="Submitting draft..." showIcon style={{ marginBottom: 12 }} />;
+  if (submitState.kind === 'saving') {
+    return <Alert type="info" message="Saving draft..." showIcon style={{ marginBottom: 12 }} />;
+  }
+  if (submitState.kind === 'deploying') {
+    return <Alert type="info" message="Deploying..." showIcon style={{ marginBottom: 12 }} />;
+  }
+  if (submitState.kind === 'saved') {
+    return (
+      <Alert
+        type="success"
+        showIcon
+        style={{ marginBottom: 12 }}
+        message="Draft saved"
+        description="Staged in the drafts table. Deploy it to write it into the rules directory."
+      />
+    );
   }
-  if (submitState.kind === 'done') {
+  if (submitState.kind === 'deployed') {
     return (
       <Alert
         type="success"
         showIcon
         style={{ marginBottom: 12 }}
-        message={submitState.title}
+        message={`Deployed to ${submitState.pathOnDisk}`}
         description={
-          submitState.prUrl ? (
-            <a href={submitState.prUrl} target="_blank" rel="noopener noreferrer">
-              {submitState.prUrl}
-            </a>
-          ) : null
+          submitState.mainSmlUpdated
+            ? 'Added to main.sml. Takes effect when the engine reloads.'
+            : 'Takes effect once something requires it and the engine reloads.'
         }
       />
     );
   }
   return (
-    <Alert
-      type="error"
-      showIcon
-      style={{ marginBottom: 12 }}
-      message="Submit failed"
-      description={submitState.message}
-    />
+    <Alert type="error" showIcon style={{ marginBottom: 12 }} message="Failed" description={submitState.message} />
   );
 };