@reqquest/ui 1.18.0 → 1.19.0

package/app/src/internal/components/ReviewerQuestions.svelte

@@ -2,11 +2,11 @@
   import { Form } from '@txstate-mws/svelte-forms'
   import MachineLearning from 'carbon-icons-svelte/lib/MachineLearning.svelte'
   import WarningFilled from 'carbon-icons-svelte/lib/WarningFilled.svelte'
-  import WatsonHealthStackedMove from 'carbon-icons-svelte/lib/WatsonHealthStackedMove.svelte'
   import Edit from 'carbon-icons-svelte/lib/Edit.svelte'
+  import SidePanelOpenFilled from 'carbon-icons-svelte/lib/SidePanelOpenFilled.svelte'
   import { enumRequirementStatus, enumRequirementType, PromptIndicators, statusReasonsToFeedback, translateMutations, type PhaseChangeMutations, type StatusReason } from '@reqquest/ui'
   import { isInlineReviewerEditPrompt, isDisplayablePrompt, hasDisplayablePrompts, RenderDisplayComponent, applicantRequirementTypes, reviewerRequirementTypes, api, PromptSaveQueue, type BasicRequestData } from '$internal'
-  import { FormInlineNotification, Panel, PanelFormDialog } from '@txstate-mws/carbon-svelte'
+  import { FormInlineNotification, Panel, PanelFormDialog, TagSet } from '@txstate-mws/carbon-svelte'
   import { Tooltip } from 'carbon-components-svelte'
   import { uiRegistry } from '$local';
   import { Button } from 'carbon-components-svelte'
@@ -36,6 +36,7 @@
   type PromptWithExtra = Prompt & PromptExtraData & { allowSaveWithoutChanges?: boolean }
   let editingPromptWithData: PromptWithExtra | undefined = undefined
   let promptBeingEdited: Prompt | undefined = undefined
+  let editingViaReviewDialog = false
   let showPromptDialog = false
   let fetchingEditPrompt = false
 
@@ -51,10 +52,11 @@
     saveQueue.adopt(appRequest.dataVersion)
   }
 
-  function editPrompt (prompt: Prompt, allowSaveWithoutChanges: boolean = false) {
+  function editPrompt (prompt: Prompt, allowSaveWithoutChanges: boolean = false, viaReviewDialog: boolean = false) {
     return async () => {
       if (fetchingEditPrompt) return
       promptBeingEdited = prompt
+      editingViaReviewDialog = viaReviewDialog
       fetchingEditPrompt = true
       showPromptDialog = true
       try {
@@ -88,6 +90,7 @@
     showPromptDialog = false
     editingPromptWithData = undefined
     promptBeingEdited = undefined
+    editingViaReviewDialog = false
   }
   function onPromptSubmit (prompt: any, modal = false) {
     return async (data: any) => {
@@ -183,9 +186,28 @@
     }
   }
 
+  // answered/total reviewer questions in a section
+  function reviewerQuestionTally (section: { requirements: ApplicationRequirement[] }) {
+    const questions = new Map<string, ApplicationRequirement['prompts'][number]>()
+    for (const requirement of section.requirements) {
+      if (!reviewerRequirementTypes.has(requirement.type)) continue
+      for (const prompt of requirement.prompts.filter(isDisplayablePrompt)) {
+        if (!uiRegistry.getPrompt(prompt.key)?.automation) questions.set(prompt.id, prompt)
+      }
+    }
+    const answered = [...questions.values()].filter(p => p.answered && !p.invalidated).length
+    return { answered, total: questions.size }
+  }
+  $: reviewerQuestionTallies = Object.fromEntries(sections.map(section => [section.key, reviewerQuestionTally(section)]))
+
   $: readyForWorkflow = !application.nextWorkflowStage && application.phase === 'READY_FOR_WORKFLOW' ? lastStageKey : undefined
   // otherwise the button sits on the last non-stage panel on the page, wherever the layout put it
   $: latestWorkflow = readyForWorkflow ?? sections.filter(section => section.requirements.every(r => !r.workflowStage?.key)).pop()?.key
+  // the one panel "Edit answers" sits on: the stage being reversed onto, or the last review panel when reversing back into review.
+  // Requirement statuses don't matter here - a disqualified review must be reversible, and the API decides via actions.reverseWorkflow
+  $: reverseTarget = application.previousWorkflowStage
+    ? sections.find(section => section.requirements[0]?.workflowStage?.key === application.previousWorkflowStage?.key)?.key
+    : sections.filter(section => section.requirements.every(r => !r.workflowStage?.key)).pop()?.key
 
   /** inline autoSave forms: refresh statuses/indicators only, never touch the live form */
   async function onPromptAutoSaved () {
@@ -202,6 +224,18 @@
 </script>
 {#each sections as section (section.key)}
   <Panel title={section.title} expandable expanded>
+    <svelte:fragment slot="headerRight">
+      {@const tally = reviewerQuestionTallies[section.key]}
+      {#if tally?.total}
+        <!-- visible pill is hidden from screen readers in favor of the spelled-out text, and the status role announces changes politely on autosave -->
+        <span role="status" class="reviewer-question-tally">
+          <span aria-hidden="true">
+            <TagSet small tags={[{ label: `${tally.answered}/${tally.total} answered`, type: tally.answered === tally.total ? 'green' : 'yellow' }]} />
+          </span>
+          <span class="bx--visually-hidden">{tally.answered} of {tally.total} questions answered</span>
+        </span>
+      {/if}
+    </svelte:fragment>
     {#if section.requirements.some(hasDisplayablePrompts)}
       <dl class="prompts">
         {#each section.requirements as requirement (requirement.id)}
@@ -210,6 +244,7 @@
             {@const isReviewerQuestion = reviewerRequirementTypes.has(requirement.type) && !def?.automation}
             {@const isAutomation = !!def?.automation}
             {@const editMode = isInlineReviewerEditPrompt(def, requirement.type, prompt)}
+            {@const opensReviewDialog = isReviewerQuestion && def?.formMode === 'full'}
             {@const small = editMode && def?.formMode !== 'full' ? def?.formMode !== 'large' : def?.displayMode !== 'large'}
             {@const large = editMode && def?.formMode !== 'full' ? def?.formMode === 'large' : def?.displayMode === 'large'}
             {@const dtid = `dt-title-${prompt.id}`}
@@ -219,13 +254,15 @@
               {#if prompt.actions.update}
                 {#if prompt.invalidated && !applicantRequirementTypes.has(requirement.type)}
                   <Button kind="primary" size="field" class="prompt-edit mr-2" icon={Review} iconDescription="Review corrections" id="edit-btn-{prompt.id}" aria-labelledby="edit-btn-{prompt.id} {dtid}" on:click={editPrompt(prompt, true)} />
+                {:else if opensReviewDialog}
+                  <Button kind="secondary" size="field" icon={SidePanelOpenFilled} class="prompt-dialog-open" id="edit-btn-{prompt.id}" aria-labelledby="edit-btn-{prompt.id} {dtid}" on:click={editPrompt(prompt, false, true)}>{uiRegistry.reviewerDialogButtonText(prompt.key)}</Button>
                 {:else}
                   <Button kind="ghost" size="field" icon={Edit} iconDescription="Edit" class="prompt-edit" id="edit-btn-{prompt.id}" aria-labelledby="edit-btn-{prompt.id} {dtid}" on:click={editPrompt(prompt)} />
                 {/if}
               {/if}
             {/snippet}
             <dt class:small class:large class:isReviewerQuestion class:disabled={disabled} class:bg-tagyellow-200={isAutomation}>
-            {#if promptIndicator[prompt.key]?.indicator}
+            {#if promptIndicator[prompt.key]?.indicator && (promptIndicator[prompt.key].indicator !== PromptIndicators.PENDING || editMode)}
                 <div class="indicator-tooltip">
                 <Tooltip align="start" direction="bottom">
                     <svelte:fragment slot="icon">
@@ -236,7 +273,9 @@
                     {:else if promptIndicator[prompt.key]?.indicator === PromptIndicators.DISQUALIFYING}
                         <WarningFilled size={20} class="disqualifying-icon" style="fill: var(--cds-support-01, #da1e28)" />
                     {:else if promptIndicator[prompt.key]?.indicator === PromptIndicators.PENDING}
-                        <WatsonHealthStackedMove size={20} class="pending-icon" style="fill: var(--cds-support-04, #0043ce)" />
+                        <svg class="pending-dot" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none" aria-hidden="true">
+                          <circle cx="4" cy="4" r="4" />
+                        </svg>
                     {/if}
                     </svelte:fragment>
                     {promptIndicator[prompt.key]?.reason}
@@ -291,7 +330,7 @@
       <div class="flex justify-end mt-8">
         {#if application.actions?.advanceWorkflow && (application.workflowStage?.key ? application.workflowStage?.key === section.requirements[0]?.workflowStage?.key : section.key === latestWorkflow)}
           <Button size="small" on:click={advanceWorkflow}>{'Send to ' + (application.nextWorkflowStage?.title ?? (!application.workflowStage?.blocking ? 'Complete' : 'Review Complete'))}</Button>
-        {:else if application.actions?.reverseWorkflow && section.requirements.every(r => r.status === enumRequirementStatus.MET || r.status === enumRequirementStatus.NOT_APPLICABLE) && application.previousWorkflowStage?.key === section.requirements[0]?.workflowStage?.key}
+        {:else if application.actions?.reverseWorkflow && section.key === reverseTarget}
           <Button kind='secondary' size="small" on:click={reverseWorkflow}>Edit answers</Button>
         {/if}
       </div>
@@ -303,7 +342,7 @@
 {@const formMode = uiRegistry.getPrompt(promptBeingEdited.key)?.formMode === 'full' ? 'large' : undefined}
   <PanelFormDialog
     id={editDialogFormId}
-    title={editingPromptWithData?.invalidated ? `Review correction "${editingPromptWithData?.title}"` : 'Edit Prompt'}
+    title={editingPromptWithData?.invalidated ? `Review correction "${editingPromptWithData?.title}"` : editingViaReviewDialog ? uiRegistry.reviewerDialogButtonText(promptBeingEdited.key) : 'Edit Prompt'}
     bind:open={showPromptDialog}
     on:cancel={closePromptDialog}
     submit={onPromptSubmit(editingPromptWithData, true)}
@@ -419,6 +458,28 @@
     right: 0;
     margin: 0;
   }
+  .prompts dt .dt-title {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+  }
+  /* a large prompt's open-in-dialog button sits at the start of the answer column, so the dt borrows
+     the prompt list's column tracks */
+  .prompts dt.large:has(> :global(.prompt-dialog-open)) {
+    display: grid;
+    grid-template-columns: subgrid;
+    padding: 0;
+  }
+  .prompts dt.large:has(> :global(.prompt-dialog-open)) > .dt-title {
+    padding: 1rem 15px 1rem 32px;
+  }
+  .prompts dt.large > :global(.bx--btn.prompt-dialog-open) {
+    grid-column: 2;
+    justify-self: start;
+    align-self: center;
+    margin: 0.5rem 15px;
+  }
   .prompts dt .indicator-tooltip {
     display: inline-block;
     margin-left: -24px;
@@ -435,8 +496,11 @@
   :global(.disqualifying-icon) {
     fill: var(--cds-support-01, #da1e28);
   }
-  :global(.pending-icon) {
-    fill: var(--cds-support-04, #0043ce);
+  .pending-dot {
+    width: 8px;
+    height: 8px;
+    aspect-ratio: 1/1;
+    fill: var(--cds-support-01, #da1e28);
   }
   :global(.panel:has(.isReviewerQuestion.disabled) .panel-header) {
     background-color: #8C8C8C !important;

package/app/src/routes/requests/[id]/apply/programs/+page.svelte

@@ -30,7 +30,7 @@
   })
 </script>
 
-<ProgressNavContainer title="Your potential benefits" subtitle={noProgramsToList ? (uiRegistry.config.applicantNoProgramsMessage ?? DEFAULT_APPLICANT_NO_PROGRAMS_MESSAGE) : 'Based on your responses so far, you may be eligible for the benefits listed below.  If you believe you qualify for additional benefits, you may need to review your answers, complete additional questions, or provides supporting documentation before eligibility can be confirmed.'}>
+<ProgressNavContainer title="Your potential benefits" subtitle={noProgramsToList ? (uiRegistry.config.applicantNoProgramsMessage ?? DEFAULT_APPLICANT_NO_PROGRAMS_MESSAGE) : 'Based on your responses so far, you may be eligible for the benefits listed below.  If you believe you qualify for additional benefits, you may need to review your answers, complete additional questions, or provide supporting documentation before eligibility can be confirmed.'}>
   <div class="max-w-screen-md mx-auto">    
     {#if eligibleApplicationsForNav.length > 0} 
       <ApplicantProgramList applications={eligibleApplicationsForNav} appRequest={appRequestForExport} />

package/dist/components.md

@@ -194,6 +194,11 @@ export const uiRegistry = new UIRegistry(config)
   `'small'` is about 8 lines at 320px; `'large'` about 32 lines at 800px; `'full'` is a full-screen
   modal, which also **disables autosave in the reviewer UI** and is what supplies `appRequestId` to
   the reviewer form. All three must stay responsive down to 320px.
+- **`reviewerDialogButtonText`** `string` (default `'Review'`) - a reviewer question registered with
+  `formMode: 'full'` gets a labeled button on the reviewer screen that opens its form in the
+  full-height side dialog. This is that button's text and the dialog's title; name what the reviewer
+  will look at, e.g. `'Review course information'`. Automation prompts and applicant prompts keep the
+  edit pencil. The global fallback of the same setting lives on `UIConfig`.
 - **`displayMode`** `'small' | 'large'` (default `'small'`) - there is deliberately no `'full'`,
   because the whole prompt list has to print on one page. Use `'large'` together with
   `PromptDisplayGrid` when one prompt collects several question/answer pairs.

package/dist/registry.d.ts

@@ -93,6 +93,15 @@ export interface PromptDefinition {
      * Defaults to 'small'.
      */
     formMode?: 'small' | 'large' | 'full';
+    /**
+     * Text of the button on the reviewer screen that opens this prompt's form in the full-height side
+     * dialog, also used as that dialog's title. Only applies to reviewer questions registered with
+     * `formMode: 'full'`; automation prompts and applicant prompts keep the edit pencil. Name what the
+     * reviewer will look at, e.g. "Review course information".
+     *
+     * Falls back to `UIConfig.reviewerDialogButtonText`, then to "Review".
+     */
+    reviewerDialogButtonText?: string;
     /**
      * Set this to true to make the prompt visually distinct as something that is meant to
      * be filled in by an automation. If you provide a formComponent, humans with permission
@@ -307,6 +316,13 @@ export interface UIConfig<PK extends string = PromptKey, RK extends string = Req
      * render nothing anywhere and handle the `statusReasons` prop inside your own form components.
      */
     statusReasonNotifications?: StatusReasonNotificationConfig;
+    /**
+     * Global layer of `PromptDefinition.reviewerDialogButtonText`: the text of the reviewer screen's button
+     * that opens a `formMode: 'full'` reviewer question in the full-height side dialog, and that dialog's
+     * title. A prompt's own value
+     * overrides this one. Defaults to "Review".
+     */
+    reviewerDialogButtonText?: string;
     /**
      * Applicant Review submission page title and subtitle text.
      */
@@ -434,6 +450,7 @@ export declare class UIRegistry {
     getWord(key: keyof Terminologies, count?: number, inclusive?: boolean): string;
     getPlural(key: keyof Terminologies): string;
     getPrompt(key: string): PromptDefinition | undefined;
+    reviewerDialogButtonText(key: string): string;
     protected statusReasonStatusCache: Map<string, Set<RequirementStatus>>;
     statusReasonNotificationStatuses(key: string, audience: StatusReasonAudience): Set<RequirementStatus>;
     getRequirement(key: string): RequirementDefinition | undefined;

package/dist/registry.js

@@ -104,6 +104,9 @@ export class UIRegistry {
     getPrompt(key) {
         return this.warnIfMissing('prompt', key, this.promptMap[key]);
     }
+    reviewerDialogButtonText(key) {
+        return this.promptMap[key]?.reviewerDialogButtonText ?? this.config.reviewerDialogButtonText ?? 'Review';
+    }
     statusReasonStatusCache = new Map();
     // The statuses whose requirement reasons the framework renders below this prompt's edit form for the given
     statusReasonNotificationStatuses(key, audience) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reqquest/ui",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "overrides": {
     "esrap": "2.3.2"
   },