@reqquest/ui 1.17.0 → 1.18.0

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

@@ -0,0 +1,37 @@
+<script lang="ts">
+  /**
+   * Shown on the reviewer screen for a program with nothing to review: no PREAPPROVAL, APPROVAL,
+   * ACCEPTANCE or workflow requirements. Its eligibility was decided by the system at submission.
+   */
+  export let programTitle: string
+</script>
+
+<section class="system-determination-notice">
+  <h3>Nothing to review for {programTitle}</h3>
+  <p>
+    There are no remaining questions to answer for this program.<br>
+    A system determination was made regarding the applicant's eligibility.
+  </p>
+</section>
+
+<style>
+  .system-determination-notice {
+    background: var(--background-cool-light, #d6f1ff);
+    padding: 1rem 1.5rem;
+    margin-bottom: 0.5rem;
+    text-align: center;
+  }
+  .system-determination-notice h3 {
+    margin: 0 0 0.5rem;
+    font-size: 1.25rem;
+    font-weight: 600;
+    line-height: 1.75rem;
+    color: var(--cds-text-01, #161616);
+  }
+  .system-determination-notice p {
+    margin: 0;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: var(--cds-text-02, #525252);
+  }
+</style>

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

@@ -0,0 +1,265 @@
+<!--
+  @component
+  Local replacement for `TabLinks` from `@txstate-mws/carbon-svelte`, adding support for tabs that
+  are not destinations. A tab with an `href` behaves exactly like the library's - a link that
+  highlights itself when it matches the current path. A tab **without** an `href` renders as a
+  disclosure button that toggles a dropdown panel.
+
+  The dropdown content travels with the item itself, as its `panel` snippet, which is handed a
+  `close` callback. Snippets can only be declared in markup, so a consumer that builds its tab array
+  in `<script>` composes the snippet onto the entry at the point of use:
+
+  ```svelte
+  {#snippet ineligibleList(close)}
+    <ul>...</ul>
+  {/snippet}
+  <TabLinks tabs={[...others, { label: 'Ineligible programs', panel: ineligibleList }]} />
+  ```
+
+  The panel is positioned absolutely over the page content, left-aligned to the tab that opened it,
+  shifted left as needed to stay within the tab strip, and wraps its content when wider than the strip.
+  It closes on outside click, Escape, navigation, and horizontal scrolling of the tab strip.
+-->
+<script context="module" lang="ts">
+  import type { Snippet } from 'svelte'
+
+  /**
+   * One tab in a `TabLinks` set. Superset of the library's `TabLinkItem`, where `href` is required.
+   */
+  export interface TabLinkItem {
+    /** The label text for the tab. */
+    label: string
+    /** Optional icon component to display before the label. */
+    icon?: any
+    /**
+     * The URL the tab points to. Omit to make this tab a disclosure button that toggles its
+     * `panel` instead of navigating.
+     */
+    href?: string
+    /** Whether the tab is disabled. */
+    disabled?: boolean
+    /**
+     * Force the selected state, for when the active route is not this tab's own href. Defaults to
+     * whether `href` matches the current path.
+     */
+    selected?: boolean
+    /**
+     * Content revealed in a dropdown when this tab is clicked, passed a `close` callback. Only
+     * used when `href` is omitted, since a tab with an `href` navigates instead of opening.
+     */
+    panel?: Snippet<[close: () => void]>
+  }
+
+  let uidCounter = 0
+</script>
+
+<script lang="ts">
+  import { ScrollOverflow } from '@txstate-mws/carbon-svelte'
+  import ChevronDown from 'carbon-icons-svelte/lib/ChevronDown.svelte'
+  import { onMount, tick } from 'svelte'
+  import { browser } from '$app/environment'
+  import { afterNavigate } from '$app/navigation'
+  import { page } from '$app/stores'
+
+  /**
+   * Array of TabLinkItem's included in the set.
+   * @type {TabLinkItem[]}
+   */
+  export let tabs: TabLinkItem[] = []
+
+  /**
+   * Index of the tab whose dropdown panel is open, or -1 when none is open. Only tabs without an
+   * `href` can be open.
+   * @type {number}
+   * @default -1
+   */
+  export let openIndex = -1
+
+  const uid = `tablinks-${++uidCounter}`
+  const tabElements: HTMLElement[] = []
+  let scrollOverflow: ScrollOverflow
+  let wrapperEl: HTMLElement
+  let panelEl: HTMLElement | undefined
+  let panelLeft = 0
+  let mounted = false
+
+  $: activeIdx = tabs.findIndex(tab => tab.href != null && tab.href === $page.url.pathname)
+  // a tab with an href can never be open, so shifting indices can't strand an open panel
+  $: openTab = tabs[openIndex]?.href == null ? tabs[openIndex] : undefined
+
+  onMount(async () => {
+    await tick()
+    if (activeIdx >= 0 && tabElements[activeIdx]) {
+      scrollOverflow?.scrollToElement(tabElements[activeIdx], 'auto')
+    }
+    mounted = true
+  })
+
+  afterNavigate(() => { close() })
+
+  $: if (mounted && $page.url.pathname) {
+    if (activeIdx >= 0 && tabElements[activeIdx]) {
+      void tick().then(() => {
+        scrollOverflow?.scrollToElement(tabElements[activeIdx])
+      })
+    }
+  }
+
+  function positionPanel () {
+    const tabEl = tabElements[openIndex]
+    if (!wrapperEl || !tabEl) return
+    const tabLeft = tabEl.getBoundingClientRect().left - wrapperEl.getBoundingClientRect().left
+    const maxLeft = wrapperEl.clientWidth - (panelEl?.offsetWidth ?? 0)
+    panelLeft = Math.max(0, Math.min(tabLeft, maxLeft))
+  }
+
+  async function toggle (idx: number) {
+    openIndex = openIndex === idx ? -1 : idx
+    await tick()
+    positionPanel()
+  }
+
+  function close (returnFocus = false) {
+    if (openIndex < 0) return
+    const tabEl = tabElements[openIndex]
+    openIndex = -1
+    if (returnFocus) tabEl?.querySelector('button')?.focus()
+  }
+
+  function onScroll (e: Event) {
+    if (panelEl?.contains(e.target as Node)) return
+    close()
+  }
+
+  function onWindowClick (e: MouseEvent) {
+    if (openIndex < 0) return
+    if (!wrapperEl?.contains(e.target as Node)) close()
+  }
+
+  function onWindowKeyDown (e: KeyboardEvent) {
+    if (openIndex < 0 || e.key !== 'Escape') return
+    e.preventDefault()
+    close(true)
+  }
+</script>
+
+<svelte:window on:click={onWindowClick} on:keydown={onWindowKeyDown} on:resize={positionPanel} />
+
+{#if tabs.length}
+  <!-- scroll doesn't bubble but does capture; the tab strip scrolling would drift the panel anchor -->
+  <div bind:this={wrapperEl} class="cs-tabs tab-links" on:scroll|capture={onScroll}>
+    <div {...$$restProps} role="navigation" class="[ w-full ] {$$restProps.class ?? ''}" class:bx--tabs={true}><ScrollOverflow bind:this={scrollOverflow}><div role="list" class:bx--tabs__nav={true}>
+      {#each tabs as tab, i}
+        {@const selected = browser && (tab.selected ?? (tab.href != null && tab.href === $page.url.pathname))}
+        <div bind:this={tabElements[i]} role="listitem"
+          class:bx--tabs__nav-item={true}
+          class:bx--tabs__nav-item--disabled={tab.disabled}
+          class:bx--tabs__nav-item--selected={selected || openIndex === i}
+        >
+          {#if tab.href != null}
+            <a
+              href={tab.href}
+              aria-disabled={tab.disabled}
+              class:bx--tabs__nav-link={true}
+              class:auto-width={true}
+            >
+              {#if tab.icon}
+                <span class="icon">
+                  <svelte:component this={tab.icon} />
+                </span>
+              {/if}
+              {tab.label}
+            </a>
+          {:else}
+            <button
+              type="button"
+              id={`${uid}-tab-${i}`}
+              disabled={tab.disabled}
+              aria-expanded={openIndex === i}
+              aria-controls={`${uid}-panel`}
+              class:bx--tabs__nav-link={true}
+              class:auto-width={true}
+              on:click={() => { void toggle(i) }}
+            >
+              {#if tab.icon}
+                <span class="icon">
+                  <svelte:component this={tab.icon} />
+                </span>
+              {/if}
+              {tab.label}
+              <span class="caret" class:open={openIndex === i}>
+                <ChevronDown aria-hidden={true} />
+              </span>
+            </button>
+          {/if}
+        </div>
+      {/each}
+    </div></ScrollOverflow></div>
+    {#if openTab?.panel}
+      <div
+        bind:this={panelEl}
+        id={`${uid}-panel`}
+        class="tab-panel"
+        style:left="{panelLeft}px"
+        role="group"
+        aria-labelledby={`${uid}-tab-${openIndex}`}
+      >
+        {@render openTab.panel!(() => { close() })}
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .cs-tabs.tab-links {
+    position: relative;
+  }
+  .icon {
+    display: inline-block;
+    margin-right: 8px;
+    vertical-align: text-bottom;
+  }
+  /* carbon styles bx--tabs__nav-link for an anchor, so undo the button chrome */
+  button.bx--tabs__nav-link {
+    display: flex;
+    align-items: center;
+    background: none;
+    border: 0;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+  button.bx--tabs__nav-link:disabled {
+    cursor: default;
+  }
+  /*
+    Mark the disclosure tab as a menu. Carbon colors the tab link per state with selectors up to
+    (0,6,0) - hover, :focus, and selected+:focus all repaint it - so this has to outrank them to
+    hold one colour across every state. Excluding disabled twice (item class and :disabled) leaves
+    carbon's disabled grey in charge.
+  */
+  .cs-tabs.tab-links .bx--tabs__nav-item:not(.bx--tabs__nav-item--disabled) button.bx--tabs__nav-link:not(:disabled) {
+    color: var(--cds-link-01, #0071ad);
+  }
+  .caret {
+    display: inline-flex;
+    margin-left: 4px;
+    transition: transform 110ms;
+  }
+  .caret.open {
+    transform: rotate(180deg);
+  }
+  .tab-panel {
+    position: absolute;
+    top: 100%;
+    z-index: 100;
+    /* natural width, capped at the strip so long labels wrap instead of running off-screen */
+    width: -moz-max-content;
+    width: max-content;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+    background-color: var(--cds-ui-01, #f4f4f4);
+    border: 1px solid var(--cds-ui-03, #e0e0e0);
+    box-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
+  }
+</style>

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { WarningAltFilled } from 'carbon-icons-svelte'
+  import type { ComponentProps } from 'svelte'
+
+  interface $$Props extends ComponentProps<typeof WarningAltFilled> {}
+
+  export let size = 20
+</script>
+
+<div>
+  <WarningAltFilled {size} {...$$restProps} />
+</div>
+
+<style>
+  div :global(svg) {
+    fill: var(--cds-support-03, #f1c21b) !important;
+  }
+
+  div :global([data-icon-path="inner-path"]) {
+    fill: black;
+  }
+</style>

package/app/src/internal/components/index.ts

@@ -0,0 +1,19 @@
+export { default as AnnouncementBanner } from './AnnouncementBanner.svelte'
+export { default as ApplicantProgramList } from './ApplicantProgramList.svelte'
+export { default as ApplicantPromptPage } from './ApplicantPromptPage.svelte'
+export { default as ApplicationDetailsView } from './ApplicationDetailsView.svelte'
+export { default as AppRequestCard } from './AppRequestCard.svelte'
+export { default as ButtonLoadingIcon } from './ButtonLoadingIcon.svelte'
+export { default as FieldNestedMultiselect } from './FieldNestedMultiselect.svelte'
+export type { NestedMultiselectItem, NestedMultiselectChild } from './FieldNestedMultiselect.svelte'
+export { default as IntroPanel } from './IntroPanel.svelte'
+export { default as MissingDefinitionNotification } from './MissingDefinitionNotification.svelte'
+export { default as PeriodPanel } from './PeriodPanel.svelte'
+export { default as ProgramStatusCell } from './ProgramStatusCell.svelte'
+export type { ProgramStatusRow } from './ProgramStatusCell.svelte'
+export { default as RenderDisplayComponent } from './RenderDisplayComponent.svelte'
+export { default as ReviewerQuestions } from './ReviewerQuestions.svelte'
+export { default as SystemDeterminationNotice } from './SystemDeterminationNotice.svelte'
+export { default as AppRequestActions } from './ReviewerActions.svelte'
+export { default as TabLinks } from './TabLinks.svelte'
+export type { TabLinkItem } from './TabLinks.svelte'

package/app/src/internal/csv.ts

@@ -0,0 +1,30 @@
+function convertJsonToCsv (jsonData: any[]) {
+  const headers = Object.keys(jsonData[0])
+
+  let csvContent = headers.join(',') + '\n'
+
+  jsonData.forEach(item => {
+    const values = Object.values(item)
+    csvContent += values.join(',') + '\n'
+  })
+
+  return csvContent
+}
+
+export function downloadCsv (data: any[], title = 'App_Requests') {
+  const csvString = convertJsonToCsv(data)
+
+  const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8,' })
+
+  const url = URL.createObjectURL(blob)
+
+  const link = document.createElement('a')
+  link.setAttribute('href', url)
+  link.setAttribute('download', title + '.csv')
+
+  document.body.appendChild(link)
+  link.click()
+
+  document.body.removeChild(link)
+  URL.revokeObjectURL(url)
+}

package/app/src/internal/index.ts

@@ -0,0 +1,8 @@
+export * from './api.js'
+export * from './components/index.js'
+export * from './csv.js'
+export * from './util.js'
+export * from './status-utils.js'
+export * from './prompt-utils.js'
+export * from './prompt-save-queue.js'
+export * from './appreq-utils.js'

package/app/src/internal/prompt-save-queue.ts

@@ -0,0 +1,91 @@
+import { type FormStore, type Feedback, type SubmitResponse } from '@txstate-mws/svelte-forms'
+import { get } from 'svelte/store'
+
+/** What api.updatePrompt gives back: the usual form response plus the appRequest's version after the write. */
+export interface PromptSaveResponse extends SubmitResponse<any> {
+  dataVersion?: number
+}
+
+/**
+ * A queue that runs the reviewer approve screen's prompt saves one at a time. That screen saves from
+ * several forms at once - an inline autosave form for each reviewer question, plus the edit modal - and
+ * every one of those saves writes the same appRequest row, whose optimistic concurrency is a single
+ * dataVersion. Sequencing the saves lets them agree on it: each save carries the version the save ahead
+ * of it just returned, instead of the stale one every form started the page with. The API serializes
+ * concurrent updates on a FOR UPDATE row lock anyway, so the queue costs no throughput.
+ *
+ * When a save does come back with a conflict, nothing queued behind it could succeed either - it is all
+ * built on a version another session has already moved past - so the queue freezes instead of sending it.
+ * Every later save fails locally, replaying the message the API sent us, until the user reloads the page.
+ */
+export class PromptSaveQueue {
+  /** the version every save from this screen carries, kept current from each save's response */
+  private version: number | undefined
+  private chain: Promise<unknown> = Promise.resolve()
+  /** the conflict that froze us, held so later saves can repeat what the API said */
+  private conflict: Feedback[] | undefined
+  /**
+   * The inline forms' FormStores, keyed by prompt id, so drain() can see which ones hold unsaved typing
+   * and flush them. Each inline Form registers its own store here with `bind:store={queue.stores[prompt.id]}`.
+   */
+  stores: Record<string, FormStore<any> | undefined> = {}
+
+  /** true while any inline form holds typing that has not reached the API yet */
+  private get hasUnsavedChanges () {
+    return Object.values(this.stores).some(store => store != null && get(store).hasUnsavedChanges)
+  }
+
+  /**
+   * Take the version that came with freshly loaded page data. Two things can make that version the wrong
+   * one to take: a refresh that was already in flight when a save landed comes back describing the older
+   * version we have since moved past, and a version adopted while a form is dirty would let that form's
+   * next save pass the concurrency check with data typed against what somebody else has already replaced -
+   * the exact case the check exists to catch. Skip both.
+   */
+  adopt (version: number | undefined) {
+    if (version == null || this.conflict != null) return
+    if (this.version != null && version <= this.version) return
+    if (this.hasUnsavedChanges) return
+    this.version = version
+  }
+
+  /**
+   * Run a save when the saves ahead of it have settled. The modal pins the version it fetched when it
+   * opened and passes it as pinnedVersion, because the data it is editing is that version's data no matter
+   * what has been saved since.
+   */
+  async save (send: (dataVersion?: number) => Promise<PromptSaveResponse>, pinnedVersion?: number): Promise<PromptSaveResponse> {
+    const attempt = this.chain.then(async () => {
+      if (this.conflict != null) return { success: false, messages: this.conflict }
+      const sent = pinnedVersion ?? this.version
+      const response = await send(sent)
+      // a save the API refused while reporting a version other than the one we sent is a concurrency
+      // conflict; a save it refused on the version we sent is just bad data and we can try again
+      if (response.success) this.version = response.dataVersion ?? this.version
+      else if (sent != null && response.dataVersion != null && response.dataVersion !== sent) this.conflict = response.messages
+      return response
+    })
+    this.chain = attempt.catch(() => {}) // a save that throws must not break the chain for the saves behind it
+    return await attempt
+  }
+
+  /**
+   * Empty the queue: save any inline form that is holding typing, then wait for everything in flight to
+   * settle. Calling submit directly cancels the form's autosave debounce and saves immediately, so a
+   * reviewer who types and then opens the modal within the debounce window still gets a modal pinned to a
+   * version that includes what they typed.
+   *
+   * A form whose save fails still counts as settled - it round-tripped and came back with feedback, so it
+   * cannot stall us here; it simply stays unsaved and carries whatever version we hold when the user fixes it.
+   */
+  async drain () {
+    for (const store of Object.values(this.stores)) {
+      if (store != null && get(store).hasUnsavedChanges) await store.submit({ autoSave: true })
+    }
+    let settled: Promise<unknown>
+    do {
+      settled = this.chain
+      await settled
+    } while (settled !== this.chain)
+  }
+}

package/app/src/internal/prompt-utils.ts

@@ -0,0 +1,40 @@
+import { uiRegistry } from '$local'
+import { reviewerRequirementTypes, type PromptDataLegion, type ReviewData } from '$internal'
+import type { PromptDefinition, RequirementType } from '@reqquest/ui'
+
+export type CoalescedAppRequest = ReturnType<typeof coalesceAppRequestPrompts>
+
+export const getInlineReviewerEditPrompts = (appRequest: ReviewData) => {
+  const prompts = appRequest?.applications.flatMap(application => application.requirements.filter(
+    req => reviewerRequirementTypes.has(req.type))).flatMap(req => req.prompts.filter(prompt => {      
+      const def = uiRegistry.getPrompt(prompt.key)
+      return isInlineReviewerEditPrompt(def, req.type, prompt)
+    }))    
+  return prompts
+}
+
+export const isInlineReviewerEditPrompt = (def?: PromptDefinition, type?: RequirementType, prompt?: CoalescedAppRequest['applications'][0]['requirements'][0]['prompts'][0]): boolean => {
+  const isReviewerQuestion = type && reviewerRequirementTypes.has(type) && !def?.automation
+  return !!(def != null && isReviewerQuestion && prompt?.actions.update && def.formMode !== 'full' && !(prompt.invalidated && prompt.answered))
+}
+
+type ReviewPrompt = CoalescedAppRequest['applications'][0]['requirements'][0]['prompts'][0]
+
+export const isDisplayablePrompt = (prompt: Pick<ReviewPrompt, 'optOut' | 'noDisplay'>) => !prompt.optOut && !prompt.noDisplay
+export const hasDisplayablePrompts = (requirement: { prompts: Pick<ReviewPrompt, 'optOut' | 'noDisplay'>[] }) => requirement.prompts.some(isDisplayablePrompt)
+export const coalesceAppRequestPrompts =(appRequest: NonNullable<ReviewData>, prompts?: PromptDataLegion) => {
+  const coalescedApplications = appRequest.applications.map(application => ({
+    ...application,
+    requirements: application.requirements.map(requirement => ({
+      ...requirement,
+      prompts: requirement.prompts.map(reqPrompt => {
+        const updatedPrompt = prompts?.find(prompt => prompt.id === reqPrompt.id)
+        return { ...reqPrompt, ...updatedPrompt}
+      })
+    }))
+  }))
+  return {
+    ...appRequest,
+    applications: coalescedApplications ?? []
+  }
+}