feat: collapsible terrasetupform with opt-in prop (#921)

[frano-m]

Summary

Closes #921.

Adds an opt-in collapse/dismiss affordance to TerraSetUpForm. Consumers pass collapsible: true to render a "Save & continue later" / "Continue" toggle in the form header; the wizard's step list collapses via MUI <Collapse>. State is held in-memory in a React provider (no sessionStorage / localStorage), so it survives SPA navigation within a session and resets on full page reload, new tab, or browser close — matches the consuming app's session-only requirement.

What changed

New generic CollapseProvider (src/components/common/Collapse/provider/)

Reusable collapse context — { isIn, onChange } shape with optional render-prop children. Mountable around any UI that needs in-memory collapse state.

New TerraSetUpUIProvider (src/terra/setUpUI/provider/)

Terra-specific wrapper around CollapseProvider that exposes { isOpen, onChange } semantically aligned with the form's open/closed UX. Mounted automatically inside TerraProfileProvider (src/terra/provider.tsx), so consumers don't wire it themselves.

TerraSetUpForm (src/components/Export/.../TerraSetUpForm/)

• New collapsible?: boolean prop (default false, non-breaking).
• Switched the section header from a grid to a <Stack direction="row" justify-content="space-between"> housing the title block + toggle button.
• Step list wrapped in <Collapse in={collapsible ? isOpen : true}> — non-collapsible consumers see no behavioural change.
• New Button subcomponent renders the "Save & continue later" / "Continue" toggle; returns null when collapsible is false.
• TerraSetUpFormProps moved to a local types.ts.

Stories

• Default story renders the form with collapsible: true.
• NotCollapsible story renders with collapsible: false.
• Decorators wrap the form in mock AuthContext (isAuthenticated: true, status: SETTLED), TerraProfileContext with three incomplete login statuses, and TerraSetUpUIProvider.

Acceptance criteria

• collapsible defaults to false → existing render unchanged.
• collapsible: true: toggle button visible, collapse/expand works.
• Collapse state survives SPA navigation within the session.
• Collapse state resets on full reload, tab close, browser close.
• No sessionStorage / localStorage.
• Provider mounted automatically inside TerraProfileProvider.
• Stories cover both collapsible: true and collapsible: false variants.

Out of scope

• Consumer (data-biosphere AnVIL) site-config opt-in — separate ticket on that repo.
• Persisting across full reloads — explicitly NOT desired.

Related

• [AnVIL Explorer] Collapsible registration completion reminder data-browser#4816 (consumer driver).
• clevercanary/cc-design#308 (design spec).

🤖 Generated with Claude Code

[Copilot]

Pull request overview

Adds an opt-in “collapse/dismiss” affordance for the Terra onboarding wizard (TerraSetUpForm) by introducing an in-memory UI state provider and wiring it into the existing Terra provider tree. This keeps collapse state across SPA navigation while resetting on full reload (no browser storage).

Changes:

• Introduces a reusable CollapseProvider context with { isIn, onChange } state shape.
• Adds TerraSetUpUIProvider (Terra-specific wrapper) and mounts it inside TerraProfileProvider.
• Updates TerraSetUpForm to accept a collapsible?: boolean prop, render a toggle button, and wrap steps in MUI <Collapse>; adds Storybook stories for both modes.

Reviewed changes

Copilot reviewed 20 out of 20 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/components/common/Collapse/provider/context.ts	Adds generic collapse context defaults.
src/components/common/Collapse/provider/hook.ts	Adds useCollapse hook for consuming collapse state.
src/components/common/Collapse/provider/provider.tsx	Adds CollapseProvider to manage in-memory collapse state (render-prop supported).
src/components/common/Collapse/provider/types.ts	Adds types for collapse context/provider props.
src/terra/provider.tsx	Wraps TerraProfileProvider children with TerraSetUpUIProvider.
src/terra/setUpUI/provider/context.ts	Adds Terra set-up UI context defaults.
src/terra/setUpUI/provider/hook.ts	Adds useTerraSetUpUI hook.
src/terra/setUpUI/provider/provider.tsx	Adds Terra set-up UI provider backed by CollapseProvider.
src/terra/setUpUI/provider/types.ts	Defines TerraSetUpUIContextValue shape.
src/components/Export/components/ExportToTerra/components/TerraSetUpForm/types.ts	Introduces TerraSetUpFormProps with collapsible flag.
src/components/Export/components/ExportToTerra/components/TerraSetUpForm/terraSetUpForm.tsx	Implements collapsible behavior + header toggle integration.
src/components/Export/components/ExportToTerra/components/TerraSetUpForm/terraSetUpForm.styles.ts	Refactors layout styles to support new header structure.
src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/Button/types.ts	Defines props for the new toggle button.
src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/Button/button.tsx	Implements “Save & continue later” / “Continue” toggle button.
src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/Button/button.styles.ts	Adds styling for the toggle button.
src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/formStep.tsx	Adjusts imports to match refactored step styling structure.
src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/formStep.styles.ts	Reworks step container styling after removing the old shared section styles.
src/components/Export/components/ExportToTerra/components/TerraSetUpForm/stories/args.ts	Adds mock auth/profile args for Storybook.
src/components/Export/components/ExportToTerra/components/TerraSetUpForm/stories/constants.ts	Adds Storybook boolean control list.
src/components/Export/components/ExportToTerra/components/TerraSetUpForm/stories/terraSetUpForm.stories.tsx	Adds stories for collapsible vs non-collapsible form variants.

Comments suppressed due to low confidence (1)

src/components/common/Collapse/provider/provider.tsx:16

• New collapse state behavior is being introduced here but there are no accompanying Jest tests. There are existing tests for similar context providers (e.g. tests/toggleButtonGroupProvider.test.tsx) that cover default state, initial state overrides, and toggling; adding analogous tests for CollapseProvider would help prevent regressions.

export function CollapseProvider({
  children,
  initialState = false,
}: CollapseProviderProps): JSX.Element {
  const [isIn, setIsIn] = useState<boolean>(initialState);

  const onChange = useCallback(() => setIsIn((prev) => !prev), []);

  return (
    <CollapseContext.Provider value={{ isIn, onChange }}>
      {typeof children === "function" ? children({ isIn, onChange }) : children}
    </CollapseContext.Provider>

[Copilot]

Pull request overview

Copilot reviewed 22 out of 22 changed files in this pull request and generated 1 comment.