From d5a987d7ad153ea5f8363c85d5ceb6e349a34d06 Mon Sep 17 00:00:00 2001 From: Fran McDade <18710366+frano-m@users.noreply.github.com> Date: Wed, 20 May 2026 20:49:36 +1000 Subject: [PATCH 1/3] feat: collapsible terrasetupform with opt-in prop (#921) Closes #921. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../components/Button/button.styles.ts | 7 +++ .../components/Button/button.tsx | 23 ++++++++ .../TerraSetUpForm/components/Button/types.ts | 3 + .../components/FormStep/formStep.styles.ts | 22 ++++++- .../components/FormStep/formStep.tsx | 8 +-- .../components/TerraSetUpForm/stories/args.ts | 45 ++++++++++++++ .../TerraSetUpForm/stories/constants.ts | 5 ++ .../stories/terraSetUpForm.stories.tsx | 59 +++++++++++++++++++ .../TerraSetUpForm/terraSetUpForm.styles.ts | 21 ++----- .../TerraSetUpForm/terraSetUpForm.tsx | 55 +++++++++-------- .../components/TerraSetUpForm/types.ts | 3 + .../common/Collapse/provider/context.ts | 11 ++++ .../common/Collapse/provider/hook.ts | 11 ++++ .../common/Collapse/provider/provider.tsx | 18 ++++++ .../common/Collapse/provider/types.ts | 11 ++++ src/terra/provider.tsx | 3 +- src/terra/setUpUI/provider/context.ts | 10 ++++ src/terra/setUpUI/provider/hook.ts | 11 ++++ src/terra/setUpUI/provider/provider.tsx | 29 +++++++++ src/terra/setUpUI/provider/types.ts | 12 ++++ 20 files changed, 319 insertions(+), 48 deletions(-) create mode 100644 src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/Button/button.styles.ts create mode 100644 src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/Button/button.tsx create mode 100644 src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/Button/types.ts create mode 100644 src/components/Export/components/ExportToTerra/components/TerraSetUpForm/stories/args.ts create mode 100644 src/components/Export/components/ExportToTerra/components/TerraSetUpForm/stories/constants.ts create mode 100644 src/components/Export/components/ExportToTerra/components/TerraSetUpForm/stories/terraSetUpForm.stories.tsx create mode 100644 src/components/Export/components/ExportToTerra/components/TerraSetUpForm/types.ts create mode 100644 src/components/common/Collapse/provider/context.ts create mode 100644 src/components/common/Collapse/provider/hook.ts create mode 100644 src/components/common/Collapse/provider/provider.tsx create mode 100644 src/components/common/Collapse/provider/types.ts create mode 100644 src/terra/setUpUI/provider/context.ts create mode 100644 src/terra/setUpUI/provider/hook.ts create mode 100644 src/terra/setUpUI/provider/provider.tsx create mode 100644 src/terra/setUpUI/provider/types.ts diff --git a/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/Button/button.styles.ts b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/Button/button.styles.ts new file mode 100644 index 00000000..242e50cc --- /dev/null +++ b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/Button/button.styles.ts @@ -0,0 +1,7 @@ +import styled from "@emotion/styled"; +import { Button } from "@mui/material"; + +export const StyledButton = styled(Button)` + align-self: center; + text-transform: none; +`; diff --git a/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/Button/button.tsx b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/Button/button.tsx new file mode 100644 index 00000000..0cba58bd --- /dev/null +++ b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/Button/button.tsx @@ -0,0 +1,23 @@ +import { JSX } from "react"; +import { BUTTON_PROPS } from "../../../../../../../../styles/common/mui/button"; +import { useTerraSetUpUI } from "../../../../../../../../terra/setUpUI/provider/hook"; +import { StyledButton } from "./button.styles"; +import { ButtonProps } from "./types"; + +export const Button = ({ + collapsible = false, +}: ButtonProps): JSX.Element | null => { + const { isOpen, onChange } = useTerraSetUpUI(); + + if (!collapsible) return null; + + return ( + + {isOpen ? "Save & continue later" : "Continue"} + + ); +}; diff --git a/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/Button/types.ts b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/Button/types.ts new file mode 100644 index 00000000..a5110f42 --- /dev/null +++ b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/Button/types.ts @@ -0,0 +1,3 @@ +export interface ButtonProps { + collapsible?: boolean; +} diff --git a/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/formStep.styles.ts b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/formStep.styles.ts index cc289e8f..187c4deb 100644 --- a/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/formStep.styles.ts +++ b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/formStep.styles.ts @@ -1,8 +1,26 @@ import styled from "@emotion/styled"; -import { SectionContent as DXSectionContent } from "../../terraSetUpForm.styles"; +import { PALETTE } from "../../../../../../../../styles/common/constants/palette"; +import { sectionPadding } from "../../../../../../../common/Section/section.styles"; -export const SectionContent = styled(DXSectionContent)` +export const Section = styled("div")` + ${sectionPadding}; + background-color: ${PALETTE.COMMON_WHITE}; + border-top: 1px solid ${PALETTE.SMOKE_MAIN}; + display: grid; + gap: 16px; + grid-template-columns: auto 1fr auto; +`; + +export const SectionContent = styled.div` + display: grid; gap: 2px; + grid-row: 1; + + .MuiTypography-body-400-2lines { + p { + margin: 0; + } + } .MuiTypography-body-500 { margin: 2px 0; diff --git a/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/formStep.tsx b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/formStep.tsx index cc995218..3ae1f8f1 100644 --- a/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/formStep.tsx +++ b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/formStep.tsx @@ -2,12 +2,8 @@ import { StepIcon, Typography } from "@mui/material"; import { JSX, ReactNode } from "react"; import { TYPOGRAPHY_PROPS } from "../../../../../../../../styles/common/mui/typography"; import { FormStatusCompletedIcon } from "../../../../../../../common/CustomIcon/components/FormStatusCompletedIcon/formStatusCompletedIcon"; -import { - Section, - SectionActions, - SectionStatus, -} from "../../terraSetUpForm.styles"; -import { SectionContent } from "./formStep.styles"; +import { SectionActions, SectionStatus } from "../../terraSetUpForm.styles"; +import { Section, SectionContent } from "./formStep.styles"; export interface FormStepProps { action: ReactNode; diff --git a/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/stories/args.ts b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/stories/args.ts new file mode 100644 index 00000000..4babfb53 --- /dev/null +++ b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/stories/args.ts @@ -0,0 +1,45 @@ +import { ComponentProps } from "react"; +import { AUTH_STATUS, AuthState } from "../../../../../../../auth/types/auth"; +import { REQUEST_STATUS } from "../../../../../../../terra/types/common"; +import { TerraProfileContextProps } from "../../../../../../../terra/types/context"; +import { TerraSetUpForm } from "../terraSetUpForm"; + +/** + * Authenticated, settled auth state — used so `TerraSetUpForm` doesn't bail + * early on its `isAuthenticated` / status guards. + */ +export const MOCK_AUTH_STATE: AuthState = { + isAuthenticated: true, + status: AUTH_STATUS.SETTLED, +}; + +/** + * Terra profile statuses where every onboarding step is supported but not yet + * complete — produces three incomplete steps in the rendered form. + */ +export const MOCK_TERRA_PROFILE_INCOMPLETE: TerraProfileContextProps = { + terraNIHProfileLoginStatus: { + isSuccess: false, + isSupported: true, + requestStatus: REQUEST_STATUS.COMPLETED, + response: undefined, + }, + terraProfileLoginStatus: { + isSuccess: false, + isSupported: true, + requestStatus: REQUEST_STATUS.COMPLETED, + response: undefined, + }, + terraTOSLoginStatus: { + isSuccess: false, + isSupported: true, + requestStatus: REQUEST_STATUS.COMPLETED, + response: undefined, + }, +}; + +export const DEFAULT_TERRA_SET_UP_FORM_ARGS: ComponentProps< + typeof TerraSetUpForm +> = { + collapsible: true, +}; diff --git a/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/stories/constants.ts b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/stories/constants.ts new file mode 100644 index 00000000..f2fbc3ad --- /dev/null +++ b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/stories/constants.ts @@ -0,0 +1,5 @@ +import { ComponentProps } from "react"; +import { TerraSetUpForm } from "../terraSetUpForm"; + +export const BOOLEAN_CONTROLS: (keyof ComponentProps)[] = + ["collapsible"]; diff --git a/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/stories/terraSetUpForm.stories.tsx b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/stories/terraSetUpForm.stories.tsx new file mode 100644 index 00000000..4771a8aa --- /dev/null +++ b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/stories/terraSetUpForm.stories.tsx @@ -0,0 +1,59 @@ +import { Box } from "@mui/material"; +import type { Meta, StoryObj } from "@storybook/nextjs-vite"; +import { ComponentProps, JSX } from "react"; +import { AuthContext } from "../../../../../../../auth/contexts/auth"; +import { CONTROL_TYPE } from "../../../../../../../storybook/controls/types"; +import { configureControls } from "../../../../../../../storybook/controls/utils"; +import { TerraProfileContext } from "../../../../../../../terra/context"; +import { TerraSetUpUIProvider } from "../../../../../../../terra/setUpUI/provider/provider"; +import { TerraSetUpForm } from "../terraSetUpForm"; +import { + DEFAULT_TERRA_SET_UP_FORM_ARGS, + MOCK_AUTH_STATE, + MOCK_TERRA_PROFILE_INCOMPLETE, +} from "./args"; +import { BOOLEAN_CONTROLS } from "./constants"; + +const meta: Meta = { + argTypes: { + ...configureControls>( + BOOLEAN_CONTROLS, + CONTROL_TYPE.BOOLEAN, + ), + }, + component: TerraSetUpForm, + decorators: [ + (Story): JSX.Element => ( + + + + + + + + + + ), + ], + parameters: { + layout: "fullscreen", + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: DEFAULT_TERRA_SET_UP_FORM_ARGS, +}; + +export const NotCollapsible: Story = { + args: { ...DEFAULT_TERRA_SET_UP_FORM_ARGS, collapsible: false }, +}; diff --git a/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/terraSetUpForm.styles.ts b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/terraSetUpForm.styles.ts index 76f465c5..0c65e0b3 100644 --- a/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/terraSetUpForm.styles.ts +++ b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/terraSetUpForm.styles.ts @@ -1,25 +1,16 @@ import styled from "@emotion/styled"; +import { Stack } from "@mui/material"; import { PALETTE } from "../../../../../../styles/common/constants/palette"; +import { FluidPaper } from "../../../../../common/Paper/components/FluidPaper/fluidPaper"; import { sectionPadding } from "../../../../../common/Section/section.styles"; -export const Section = styled("div")` - ${sectionPadding}; +export const StyledFluidPaper = styled(FluidPaper)` background-color: ${PALETTE.COMMON_WHITE}; - display: grid; - gap: 16px; - grid-template-columns: auto 1fr; `; -export const SectionContent = styled("div")` - display: grid; - gap: 4px; - grid-row: 1; - - .MuiTypography-body-400-2lines { - p { - margin: 0; - } - } +export const StyledStack = styled(Stack)` + ${sectionPadding}; + justify-content: space-between; `; export const SectionStatus = styled("div")` diff --git a/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/terraSetUpForm.tsx b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/terraSetUpForm.tsx index cc44928f..72eb8579 100644 --- a/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/terraSetUpForm.tsx +++ b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/terraSetUpForm.tsx @@ -1,4 +1,4 @@ -import { Typography } from "@mui/material"; +import { Collapse, Stack, Typography } from "@mui/material"; import { JSX } from "react"; import { useAuth } from "../../../../../../auth/hooks/useAuth"; import { AUTH_STATUS } from "../../../../../../auth/types/auth"; @@ -7,39 +7,46 @@ import { OnboardingStatus, useAuthenticationForm, } from "../../../../../../hooks/authentication/terra/useAuthenticationForm"; +import { STACK_PROPS } from "../../../../../../styles/common/mui/stack"; import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography"; -import { - FluidPaper, - GridPaper, -} from "../../../../../common/Paper/paper.styles"; +import { useTerraSetUpUI } from "../../../../../../terra/setUpUI/provider/hook"; import { SectionTitle } from "../../../../../common/Section/components/SectionTitle/sectionTitle"; +import { Button } from "./components/Button/button"; import { AcceptTerraTOS } from "./components/FormStep/components/AcceptTerraTOS/acceptTerraTOS"; import { ConnectTerraToNIHAccount } from "./components/FormStep/components/ConnectTerraToNIHAccount/connectTerraToNIHAccount"; import { CreateTerraAccount } from "./components/FormStep/components/CreateTerraAccount/createTerraAccount"; -import { Section, SectionContent } from "./terraSetUpForm.styles"; +import { StyledFluidPaper, StyledStack } from "./terraSetUpForm.styles"; +import { TerraSetUpFormProps } from "./types"; -export const TerraSetUpForm = (): JSX.Element | null => { +export const TerraSetUpForm = ({ + collapsible = false, +}: TerraSetUpFormProps): JSX.Element | null => { const { authState: { isAuthenticated, status }, } = useAuth(); const { isComplete, onboardingStatusByStep } = useAuthenticationForm(); + const { isOpen } = useTerraSetUpUI(); + if (!isAuthenticated) return null; if (status === AUTH_STATUS.PENDING) return null; - return isComplete ? null : ( - - -
- - - - Follow these steps to unlock the full potential of the data - explorer. - - -
+ if (isComplete) return null; + + return ( + + + + + + Follow these steps to unlock the full potential of the data + explorer. + + + + + ); +} + +describe("TerraSetUpUIProvider", () => { + it("renders children with the initial open state", () => { + render( + + + , + ); + expect(screen.getByTestId(TEST_ID_STATE).textContent).toEqual(TEXT_OPEN); + }); + + it("toggles isOpen when onChange is invoked", () => { + render( + + + , + ); + + expect(screen.getByTestId(TEST_ID_STATE).textContent).toEqual(TEXT_OPEN); + + act(() => { + screen.getByTestId(TEST_ID_TOGGLE).click(); + }); + expect(screen.getByTestId(TEST_ID_STATE).textContent).toEqual(TEXT_CLOSED); + + act(() => { + screen.getByTestId(TEST_ID_TOGGLE).click(); + }); + expect(screen.getByTestId(TEST_ID_STATE).textContent).toEqual(TEXT_OPEN); + }); +}); From 9903c6f6ed2d3ae61affd844f936f670de934a37 Mon Sep 17 00:00:00 2001 From: Fran McDade <18710366+frano-m@users.noreply.github.com> Date: Wed, 20 May 2026 21:25:54 +1000 Subject: [PATCH 3/3] chore: revert unintended third grid column in formstep section (#921) Co-Authored-By: Claude Opus 4.7 (1M context) --- .../TerraSetUpForm/components/FormStep/formStep.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/formStep.styles.ts b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/formStep.styles.ts index 187c4deb..bddea5c7 100644 --- a/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/formStep.styles.ts +++ b/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/formStep.styles.ts @@ -8,7 +8,7 @@ export const Section = styled("div")` border-top: 1px solid ${PALETTE.SMOKE_MAIN}; display: grid; gap: 16px; - grid-template-columns: auto 1fr auto; + grid-template-columns: auto 1fr; `; export const SectionContent = styled.div`