feat(forms): migrate to DS Tabs + CollapsibleFieldset #4928

sgendre · 2023-10-10T13:36:01Z

What is the problem this PR is trying to solve?
DFD-121

TalendReactBootstrap TabBar rely on legacy ContextApi that is not supported anymore by React

What is the chosen solution to this problem?
Use Tabs from DesignSystem instead
Implement Error state in DS Tabs

Check with frontends

CollapsiblePanel from DS accept only one action in the header. Old CollapsiblePanel accepted several. Check if it is an issue or not.
CollapsiblePanel from DS call the onToggleExpanded only in managed mode. Old CollapsiblePanel always called the onToggle

Check with UX

How to display errors on tabs from design system https://www.figma.com/file/bSesPlHPWLPA66wySm8VYV/branch/BGELBgEPsVcQcgMDdlQnEk/Tabs?type=design&node-id=2802%3A1722&mode=design&t=GIwOiUrAcZfViItz-1

Please check if the PR fulfills these requirements

The PR have used yarn changeset to a request a release from the CI if wanted.
The PR commit message follows our guidelines
Tests for the changes have been added (for bug fixes / features) And non reg done before need review
Docs have been added / updated (for bug fixes / features)
Related design / discussions / pages (not in jira), if any, are all linked or available in the PR

[ ] This PR introduces a breaking change

github-actions · 2023-10-10T13:57:57Z

4928

Demo is available here

github-actions · 2023-10-10T13:59:23Z

Title	Statements	Branches	Functions
assets-api	28.4% (25/88)	30.76% (16/52)	21.42% (3/14)
cmf	89.19% (1271/1425)	80.36% (618/769)	88.91% (361/406)
cmf-cqrs	87.43% (160/183)	70.23% (59/84)	84.21% (48/57)
cmf-router	69.23% (135/195)	55.71% (78/140)	56.81% (25/44)
components	90.39% (5607/6203)	81.62% (3221/3946)	87.63% (1418/1618)
containers	83.53% (1385/1658)	74.67% (687/920)	75.17% (327/435)
dataviz	85.6% (321/375)	66.66% (160/240)	75.64% (118/156)
design-system	66.59% (899/1350)	48.82% (437/895)	53.18% (192/361)
faceted-search	85.03% (693/815)	76.63% (269/351)	81.75% (242/296)
flow-designer	70.07% (651/929)	66.72% (355/532)	70.92% (200/282)
forms	85.67% (1675/1955)	75.29% (908/1206)	84.58% (472/558)
http	100% (85/85)	98.07% (51/52)	100% (34/34)
sagas	92.3% (24/26)	66.66% (4/6)	50% (2/4)
stepper	81.52% (150/184)	59.34% (54/91)	80.85% (38/47)
utils	100% (62/62)	90.9% (10/11)	100% (16/16)

github-actions · 2023-10-10T14:08:13Z

Size Change: -3.05 kB (0%)

Total Size: 13.4 MB

Filename	Size	Change
`./packages/design-system/dist/TalendDesignSystem.css`	282 kB	+561 B (0%)
`./packages/design-system/dist/TalendDesignSystem.js`	1.19 MB	+361 B (0%)
`./packages/design-system/dist/TalendDesignSystem.min.css`	173 kB	+505 B (0%)
`./packages/design-system/dist/TalendDesignSystem.min.js`	237 kB	+211 B (0%)
`./packages/forms/dist/TalendReactForms.css`	37.6 kB	-1.73 kB (-4%)
`./packages/forms/dist/TalendReactForms.js`	776 kB	-2.16 kB (0%)
`./packages/forms/dist/TalendReactForms.min.css`	12.8 kB	-583 B (-4%)
`./packages/forms/dist/TalendReactForms.min.js`	205 kB	-215 B (0%)

ℹ️ View Unchanged

Filename	Size
`./packages/assets-api/dist/TalendAssetsApi.js`	7.21 kB
`./packages/assets-api/dist/TalendAssetsApi.js.dependencies.json`	2 B
`./packages/assets-api/dist/TalendAssetsApi.min.js`	3.34 kB
`./packages/assets-api/dist/TalendAssetsApi.min.js.dependencies.json`	2 B
`./packages/cmf-cqrs/dist/TalendReactCmfCqrs.js`	103 kB
`./packages/cmf-cqrs/dist/TalendReactCmfCqrs.js.dependencies.json`	672 B
`./packages/cmf-cqrs/dist/TalendReactCmfCqrs.min.js`	21.3 kB
`./packages/cmf-cqrs/dist/TalendReactCmfCqrs.min.js.dependencies.json`	695 B
`./packages/cmf-router/dist/TalendReactCmfRouter.js`	164 kB
`./packages/cmf-router/dist/TalendReactCmfRouter.js.dependencies.json`	1.25 kB
`./packages/cmf-router/dist/TalendReactCmfRouter.min.js`	13 kB
`./packages/cmf-router/dist/TalendReactCmfRouter.min.js.dependencies.json`	1.29 kB
`./packages/cmf/dist/TalendReactCmf.js`	636 kB
`./packages/cmf/dist/TalendReactCmf.js.dependencies.json`	1.31 kB
`./packages/cmf/dist/TalendReactCmf.min.js`	121 kB
`./packages/cmf/dist/TalendReactCmf.min.js.dependencies.json`	1.35 kB
`./packages/components/dist/TalendReactComponents.css`	403 kB
`./packages/components/dist/TalendReactComponents.js`	2.98 MB
`./packages/components/dist/TalendReactComponents.js.dependencies.json`	3.21 kB
`./packages/components/dist/TalendReactComponents.min.css`	210 kB
`./packages/components/dist/TalendReactComponents.min.js`	662 kB
`./packages/components/dist/TalendReactComponents.min.js.dependencies.json`	3.29 kB
`./packages/containers/dist/TalendReactContainers.css`	3.01 kB
`./packages/containers/dist/TalendReactContainers.js`	539 kB
`./packages/containers/dist/TalendReactContainers.js.dependencies.json`	1.55 kB
`./packages/containers/dist/TalendReactContainers.min.css`	1.74 kB
`./packages/containers/dist/TalendReactContainers.min.js`	105 kB
`./packages/containers/dist/TalendReactContainers.min.js.dependencies.json`	1.6 kB
`./packages/dataviz/dist/TalendReactDataviz.css`	28.9 kB
`./packages/dataviz/dist/TalendReactDataviz.js`	372 kB
`./packages/dataviz/dist/TalendReactDataviz.js.dependencies.json`	1.15 kB
`./packages/dataviz/dist/TalendReactDataviz.min.css`	12 kB
`./packages/dataviz/dist/TalendReactDataviz.min.js`	63.6 kB
`./packages/dataviz/dist/TalendReactDataviz.min.js.dependencies.json`	1.19 kB
`./packages/design-system/dist/TalendDesignSystem.js.dependencies.json`	1.43 kB
`./packages/design-system/dist/TalendDesignSystem.min.js.dependencies.json`	1.48 kB
`./packages/design-tokens/dist/TalendDesignTokens.css`	44.6 kB
`./packages/design-tokens/dist/TalendDesignTokens.js`	39.6 kB
`./packages/design-tokens/dist/TalendDesignTokens.js.dependencies.json`	2 B
`./packages/design-tokens/dist/TalendDesignTokens.min.css`	41.5 kB
`./packages/design-tokens/dist/TalendDesignTokens.min.js`	33.3 kB
`./packages/design-tokens/dist/TalendDesignTokens.min.js.dependencies.json`	2 B
`./packages/faceted-search/dist/TalendReactFacetedSearch.css`	37.8 kB
`./packages/faceted-search/dist/TalendReactFacetedSearch.js`	452 kB
`./packages/faceted-search/dist/TalendReactFacetedSearch.js.dependencies.json`	1.5 kB
`./packages/faceted-search/dist/TalendReactFacetedSearch.min.css`	17.1 kB
`./packages/faceted-search/dist/TalendReactFacetedSearch.min.js`	102 kB
`./packages/faceted-search/dist/TalendReactFacetedSearch.min.js.dependencies.json`	1.55 kB
`./packages/flow-designer/dist/TalendReactFlowDesigner.min.js`	51.5 kB
`./packages/flow-designer/dist/TalendReactFlowDesigner.min.js.dependencies.json`	1.25 kB
`./packages/forms/dist/TalendReactForms.js.dependencies.json`	1.35 kB
`./packages/forms/dist/TalendReactForms.min.js.dependencies.json`	1.39 kB
`./packages/http/dist/TalendHttp.js`	24.9 kB
`./packages/http/dist/TalendHttp.js.dependencies.json`	2 B
`./packages/http/dist/TalendHttp.min.js`	5.33 kB
`./packages/http/dist/TalendHttp.min.js.dependencies.json`	2 B
`./packages/icons/dist/bundle.js`	1.26 kB
`./packages/icons/dist/info.js`	26.1 kB
`./packages/icons/dist/react.esm.js`	585 kB
`./packages/icons/dist/react.js`	623 kB
`./packages/icons/dist/talend-icons-webfont.css`	17.4 kB
`./packages/icons/dist/talendicons.css`	334 B
`./packages/icons/dist/TalendIcons.js`	752 kB
`./packages/icons/dist/TalendIcons.js.dependencies.json`	128 B
`./packages/icons/dist/TalendIcons.min.js`	606 kB
`./packages/icons/dist/TalendIcons.min.js.dependencies.json`	131 B
`./packages/icons/dist/typeUtils.js`	14.4 kB
`./packages/jsfc/dist/index.js`	86.8 kB
`./packages/jsfc/dist/index.js.dependencies.json`	2 B
`./packages/router-bridge/dist/TalendRouterBridge.js`	134 kB
`./packages/router-bridge/dist/TalendRouterBridge.js.dependencies.json`	1.05 kB
`./packages/router-bridge/dist/TalendRouterBridge.min.js`	21 kB
`./packages/router-bridge/dist/TalendRouterBridge.min.js.dependencies.json`	1.07 kB
`./packages/sagas/dist/TalendReactSagas.js`	10.9 kB
`./packages/sagas/dist/TalendReactSagas.js.dependencies.json`	348 B
`./packages/sagas/dist/TalendReactSagas.min.js`	1.41 kB
`./packages/sagas/dist/TalendReactSagas.min.js.dependencies.json`	360 B
`./packages/stepper/dist/TalendReactStepper.css`	2.4 kB
`./packages/stepper/dist/TalendReactStepper.js`	97.4 kB
`./packages/stepper/dist/TalendReactStepper.js.dependencies.json`	1.27 kB
`./packages/stepper/dist/TalendReactStepper.min.css`	1.19 kB
`./packages/stepper/dist/TalendReactStepper.min.js`	9.64 kB
`./packages/stepper/dist/TalendReactStepper.min.js.dependencies.json`	1.31 kB
`./packages/storybook-docs/dist/globalStyles.js`	0 B	🆕
`./packages/storybook-docs/dist/globalStyles.min.css`	398 B
`./packages/storybook-docs/dist/managerStyles.js`	0 B	🆕
`./packages/storybook-docs/dist/managerStyles.min.css`	1.53 kB
`./packages/theme/dist/bootstrap.css`	172 kB
`./packages/theme/dist/bootstrap.js`	2.51 kB
`./packages/theme/dist/bootstrap.js.dependencies.json`	3 B

_{compressed-size-action}

- form tab using DS ones

…orms

jmainguytalend · 2023-11-27T16:28:07Z

packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.test.js

-			{ id: 'action1', label: 'Action1', onClick: jest.fn() },
-			{ id: 'action2', label: 'Action 2', onClick: jest.fn() },
-		];
+		const actions = [{ id: 'action1', label: 'Action1', onClick: jest.fn(), icon: 'talend-trash' }];


Why did you remove one action ?

impl

89a959f

sgendre temporarily deployed to pull_request_unsafe October 10, 2023 13:36 — with GitHub Actions Inactive

sgendre had a problem deploying to pull_request_unsafe October 10, 2023 13:36 — with GitHub Actions Error

snap

c131b33

sgendre temporarily deployed to pull_request_unsafe October 10, 2023 13:36 — with GitHub Actions Inactive

sgendre temporarily deployed to pull_request_unsafe October 10, 2023 13:37 — with GitHub Actions Inactive

error on tab title

699144c

sgendre temporarily deployed to pull_request_unsafe October 10, 2023 14:18 — with GitHub Actions Inactive

- DS tab error style

489ad41

- form tab using DS ones

sgendre temporarily deployed to pull_request_unsafe October 11, 2023 13:37 — with GitHub Actions Inactive

error DS story

d0fd20d

sgendre temporarily deployed to pull_request_unsafe October 11, 2023 14:30 — with GitHub Actions Inactive

sgendre had a problem deploying to pull_request_unsafe October 11, 2023 14:30 — with GitHub Actions Error

lightweight

e219468

sgendre temporarily deployed to pull_request_unsafe October 11, 2023 14:34 — with GitHub Actions Inactive

better syntax

9709da2

sgendre temporarily deployed to pull_request_unsafe October 26, 2023 10:35 — with GitHub Actions Inactive

move managed props in ui schema

4aa0b40

mhuchet temporarily deployed to pull_request_unsafe October 27, 2023 14:52 — with GitHub Actions Inactive

Merge branch 'master' into sgendre/feat/TFD-16325/use-ds-tabs-in-ui-f…

f00d12e

…orms

sgendre temporarily deployed to pull_request_unsafe November 27, 2023 08:44 — with GitHub Actions Inactive

Merge branch 'master' into sgendre/feat/TFD-16325/use-ds-tabs-in-ui-f…

df94796

…orms

sgendre temporarily deployed to pull_request_unsafe November 27, 2023 13:56 — with GitHub Actions Inactive

update failing snapshot

5c959b2

sgendre temporarily deployed to pull_request_unsafe November 27, 2023 15:03 — with GitHub Actions Inactive

jmainguytalend approved these changes Nov 27, 2023

View reviewed changes

mhuchet approved these changes Nov 27, 2023

View reviewed changes

romainseb merged commit ea026ec into master Nov 28, 2023
10 checks passed

romainseb deleted the sgendre/feat/TFD-16325/use-ds-tabs-in-ui-forms branch November 28, 2023 09:26

romainseb had a problem deploying to pull_request_unsafe November 28, 2023 09:26 — with GitHub Actions Failure

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(forms): migrate to DS Tabs + CollapsibleFieldset #4928

feat(forms): migrate to DS Tabs + CollapsibleFieldset #4928

sgendre commented Oct 10, 2023 •

edited by mhuchet

Loading

github-actions bot commented Oct 10, 2023

github-actions bot commented Oct 10, 2023 •

edited

Loading

github-actions bot commented Oct 10, 2023 •

edited

Loading

jmainguytalend Nov 27, 2023

feat(forms): migrate to DS Tabs + CollapsibleFieldset #4928

feat(forms): migrate to DS Tabs + CollapsibleFieldset #4928

Conversation

sgendre commented Oct 10, 2023 • edited by mhuchet Loading

github-actions bot commented Oct 10, 2023

github-actions bot commented Oct 10, 2023 • edited Loading

github-actions bot commented Oct 10, 2023 • edited Loading

jmainguytalend Nov 27, 2023

Choose a reason for hiding this comment

sgendre commented Oct 10, 2023 •

edited by mhuchet

Loading

github-actions bot commented Oct 10, 2023 •

edited

Loading

github-actions bot commented Oct 10, 2023 •

edited

Loading