Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Making Group and Summary regular components, only node passed to components #987

Merged
merged 13 commits into from
Mar 10, 2023
Merged

Making Group and Summary regular components, only node passed to components #987

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
e702111
Passing node object to component renderer from GenericComponent (this…
Mar 9, 2023
a99b80d
Fixing NavigationBarComponent test
Mar 9, 2023
f8f3006
Removing the need for `overrideItemProps` in the Likert component, no…
Mar 9, 2023
3209af8
Well, that just sort-of worked. Passing on overridden item properties…
Mar 9, 2023
f4694ba
Resolving some silly hacks I noted and made TODOs for.
Mar 9, 2023
b5a64b1
Adding component classes for Group and Summary as well. Removing the …
Mar 9, 2023
aad4f40
Now that every component type has a class to describe them, we can fa…
Mar 9, 2023
1653654
Getting rid of SummaryComponentSwitch, now that every component type …
Mar 9, 2023
1c4f44a
This cypress test failed when running on github, but it worked locall…
Mar 10, 2023
04db155
Cleaning up the 'change' property that I struggled with. Turns out I …
Mar 10, 2023
1e83a78
Moving the click operation outside the wrapped items assertions. The …
Mar 10, 2023
dc2f654
Update src/layout/AttachmentList/AttachmentListComponent.tsx
olemartinorg Mar 10, 2023
7500991
Update src/layout/FileUploadWithTag/EditWindowComponent.tsx
olemartinorg Mar 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions src/components/message/ErrorReport.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import { Grid, makeStyles } from '@material-ui/core';
import { useAppDispatch } from 'src/common/hooks/useAppDispatch';
import { useAppSelector } from 'src/common/hooks/useAppSelector';
import { FullWidthWrapper } from 'src/features/form/components/FullWidthWrapper';
import { renderLayoutNode } from 'src/features/form/containers/Form';
import { FormLayoutActions } from 'src/features/form/layout/formLayoutSlice';
import { getLanguageFromKey, getParsedLanguageFromText } from 'src/language/sharedLanguage';
import { GenericComponent } from 'src/layout/GenericComponent';
import { AsciiUnitSeparator } from 'src/utils/attachment';
import { useExprContext } from 'src/utils/layout/ExprContext';
import { getMappedErrors, getUnmappedErrors } from 'src/utils/validation/validation';
Expand Down Expand Up @@ -164,7 +164,12 @@ export const ErrorReport = ({ nodes }: IErrorReportProps) => {
))}
</ul>
</Grid>
{nodes.map((n) => renderLayoutNode(n))}
{nodes.map((n) => (
<GenericComponent
key={n.item.id}
node={n}
/>
))}
</Grid>
</Panel>
</FullWidthWrapper>
Expand Down
35 changes: 27 additions & 8 deletions src/components/summary/SummaryComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ import cn from 'classnames';
import { useAppDispatch } from 'src/common/hooks/useAppDispatch';
import { useAppSelector } from 'src/common/hooks/useAppSelector';
import { ErrorPaper } from 'src/components/message/ErrorPaper';
import { SummaryComponentSwitch } from 'src/components/summary/SummaryComponentSwitch';
import { SummaryBoilerplate } from 'src/components/summary/SummaryBoilerplate';
import { FormLayoutActions } from 'src/features/form/layout/formLayoutSlice';
import { GenericComponent } from 'src/layout/GenericComponent';
import { FormComponent } from 'src/layout/LayoutComponent';
import { pageBreakStyles } from 'src/utils/formComponentUtils';
import { useResolvedNode } from 'src/utils/layout/ExprContext';
import { getTextFromAppOrDefault } from 'src/utils/textResource';
Expand Down Expand Up @@ -115,6 +117,9 @@ export function SummaryComponent({ summaryNode, overrides }: ISummaryComponent)
const displayGrid =
display && display.useComponentGrid ? overrides?.grid || targetItem?.grid : overrides?.grid || grid;

const component = targetNode.getComponent();
const RenderSummary = component instanceof FormComponent ? component.renderSummary.bind(component) : null;

return (
<Grid
item={true}
Expand All @@ -132,13 +137,27 @@ export function SummaryComponent({ summaryNode, overrides }: ISummaryComponent)
[classes.border]: !display?.hideBottomBorder,
})}
>
<SummaryComponentSwitch
summaryNode={summaryNode}
targetNode={targetNode}
change={change}
label={label}
overrides={overrides}
/>
{RenderSummary && component instanceof FormComponent ? (
Copy link
Contributor

@framitdavid framitdavid Mar 10, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can just check if RenderSummary is not null. Because RenderSummary is set to null if the component is not an instance of FormComponent at line 116. :D

Suggested change
{RenderSummary && component instanceof FormComponent ? (
{RenderSummary ? (

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, but typescript doesn't agree with that.. 🤷 It complains because it didn't infer that component must be a FormComponent if RenderSummary is set, so the call to component.renderSummaryBoilerplate() below fails without that check.

<>
{component.renderSummaryBoilerplate() ? (
<SummaryBoilerplate
{...change}
framitdavid marked this conversation as resolved.
Show resolved Hide resolved
label={label}
summaryNode={summaryNode}
targetNode={targetNode}
overrides={overrides}
/>
) : null}
<RenderSummary
{...change}
summaryNode={summaryNode}
targetNode={targetNode as any}
framitdavid marked this conversation as resolved.
Show resolved Hide resolved
overrides={overrides}
/>
</>
) : (
<GenericComponent node={targetNode} />
)}
{targetNode?.hasValidationMessages('errors') &&
targetItem.type !== 'Group' &&
!display?.hideValidationMessages && (
Expand Down
57 changes: 0 additions & 57 deletions src/components/summary/SummaryComponentSwitch.tsx
View file
Open in desktop

This file was deleted.

14 changes: 7 additions & 7 deletions src/components/summary/SummaryGroupComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,12 @@ import { FormComponent } from 'src/layout/LayoutComponent';
import { AltinnAppTheme } from 'src/theme/altinnAppTheme';
import { getTextFromAppOrDefault } from 'src/utils/textResource';
import type { ISummaryComponent } from 'src/components/summary/SummaryComponent';
import type { ComponentExceptGroupAndSummary } from 'src/layout/layout';
import type { LayoutNode } from 'src/utils/layout/hierarchy';
import type { LayoutNodeFromType } from 'src/utils/layout/hierarchy.types';

export interface ISummaryGroupComponent {
changeText: string | null;
onChangeClick: () => void;
changeText?: string | null;
onChangeClick?: () => void;
summaryNode: LayoutNodeFromType<'Summary'>;
targetNode: LayoutNodeFromType<'Group'>;
overrides?: ISummaryComponent['overrides'];
Expand Down Expand Up @@ -175,12 +174,12 @@ export function SummaryGroupComponent({
item
xs={2}
>
{!display?.hideChangeButton && (
{!display?.hideChangeButton && onChangeClick && changeText ? (
<EditButton
onClick={onChangeClick}
editText={changeText}
/>
)}
) : null}
</Grid>
<Grid
item
Expand All @@ -199,7 +198,7 @@ export function SummaryGroupComponent({
const childSummaryComponents = targetNode
.children(undefined, idx)
.filter((n) => !inExcludedChildren(n))
.filter((node) => node.getComponent()?.getComponentType() === ComponentType.Form)
.filter((node) => node.getComponent().getComponentType() === ComponentType.Form)
.map((child) => {
const component = child.getComponent();
if (child.isHidden() || !(component instanceof FormComponent)) {
Expand All @@ -209,8 +208,9 @@ export function SummaryGroupComponent({
return (
<RenderCompactSummary
key={child.item.id}
targetNode={child as LayoutNodeFromType<ComponentExceptGroupAndSummary>}
targetNode={child as any}
summaryNode={summaryNode}
overrides={{}}
/>
);
});
Expand Down
9 changes: 7 additions & 2 deletions src/features/customReceipt/containers/CustomReceipt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Grid from '@material-ui/core/Grid';

import { useAppSelector } from 'src/common/hooks/useAppSelector';
import { ErrorReport } from 'src/components/message/ErrorReport';
import { renderLayoutNode } from 'src/features/form/containers/Form';
import { GenericComponent } from 'src/layout/GenericComponent';
import { ReadyForPrint } from 'src/shared/components/ReadyForPrint';
import { extractBottomButtons } from 'src/utils/formLayout';
import { useExprContext } from 'src/utils/layout/ExprContext';
Expand Down Expand Up @@ -40,7 +40,12 @@ export function CustomReceipt() {
spacing={3}
alignItems='flex-start'
>
{mainNodes.map((node) => renderLayoutNode(node))}
{mainNodes.map((node) => (
<GenericComponent
key={node.item.id}
node={node}
/>
))}
<Grid
item={true}
xs={12}
Expand Down
62 changes: 6 additions & 56 deletions src/features/form/containers/Form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,67 +4,12 @@ import Grid from '@material-ui/core/Grid';

import { useAppSelector } from 'src/common/hooks/useAppSelector';
import { ErrorReport } from 'src/components/message/ErrorReport';
import { SummaryComponent } from 'src/components/summary/SummaryComponent';
import { MessageBanner } from 'src/features/form/components/MessageBanner';
import { DisplayGroupContainer } from 'src/features/form/containers/DisplayGroupContainer';
import { GroupContainer } from 'src/features/form/containers/GroupContainer';
import { GenericComponent } from 'src/layout/GenericComponent';
import { PanelGroupContainer } from 'src/layout/Panel/PanelGroupContainer';
import { ReadyForPrint } from 'src/shared/components/ReadyForPrint';
import { extractBottomButtons, hasRequiredFields } from 'src/utils/formLayout';
import { useExprContext } from 'src/utils/layout/ExprContext';
import { getFormHasErrors, missingFieldsInLayoutValidations } from 'src/utils/validation/validation';
import type { ComponentExceptGroupAndSummary } from 'src/layout/layout';
import type { LayoutNode } from 'src/utils/layout/hierarchy';
import type { LayoutNodeFromType } from 'src/utils/layout/hierarchy.types';

export function renderLayoutNode(node: LayoutNode) {
olemartinorg marked this conversation as resolved.
Show resolved Hide resolved
if (node.item.type === 'Group') {
const isRepeatingGroup = node.item.maxCount && node.item.maxCount > 1;
if (isRepeatingGroup) {
return (
<GroupContainer
id={node.item.id}
key={node.item.id}
/>
);
}

if (node.item.panel) {
return (
<PanelGroupContainer
key={node.item.id}
id={node.item.id}
/>
);
}

// Treat as regular components
return (
<DisplayGroupContainer
key={node.item.id}
groupNode={node}
renderLayoutNode={renderLayoutNode}
/>
);
}

if (node.item.type === 'Summary') {
return (
<SummaryComponent
key={node.item.id}
summaryNode={node as LayoutNodeFromType<'Summary'>}
/>
);
}

return (
<GenericComponent
key={node.item.id}
node={node as LayoutNodeFromType<ComponentExceptGroupAndSummary>}
/>
);
}

export function Form() {
const nodes = useExprContext();
Expand Down Expand Up @@ -107,7 +52,12 @@ export function Form() {
spacing={3}
alignItems='flex-start'
>
{mainNodes.map((n) => renderLayoutNode(n))}
{mainNodes.map((n) => (
<GenericComponent
key={n.item.id}
node={n}
/>
))}
<Grid
item={true}
xs={12}
Expand Down
2 changes: 1 addition & 1 deletion src/features/form/containers/RepeatingGroupTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ export function RepeatingGroupTable({
(baseComponentId && container.tableHeaders.includes(baseComponentId))
);
}
return child.getComponent()?.getComponentType() === ComponentType.Form;
return child.getComponent().getComponentType() === ComponentType.Form;
});

const tableNodes = getTableNodes(0);
Expand Down
9 changes: 7 additions & 2 deletions src/features/form/containers/RepeatingGroupsEditContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import { Back, Delete as DeleteIcon, Next } from '@navikt/ds-icons';
import cn from 'classnames';

import { useAppSelector } from 'src/common/hooks/useAppSelector';
import { renderLayoutNode } from 'src/features/form/containers/Form';
import { getLanguageFromKey, getTextResourceByKey } from 'src/language/sharedLanguage';
import { GenericComponent } from 'src/layout/GenericComponent';
import { AltinnStudioTheme } from 'src/theme/altinnStudioTheme';
import { useResolvedNode } from 'src/utils/layout/ExprContext';
import type { ExprResolved } from 'src/features/expressions/types';
Expand Down Expand Up @@ -192,7 +192,12 @@ export function RepeatingGroupsEditContainer({
if (!n) {
return null;
}
return renderLayoutNode(n);
return (
<GenericComponent
key={n.item.id}
node={n}
/>
);
})}
</Grid>
<Grid item={true}>
Expand Down
7 changes: 2 additions & 5 deletions src/features/pdf/PDFView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import { ComponentType } from 'src/layout';
import { GenericComponent } from 'src/layout/GenericComponent';
import { ReadyForPrint } from 'src/shared/components/ReadyForPrint';
import { useExprContext } from 'src/utils/layout/ExprContext';
import type { ComponentExceptGroupAndSummary } from 'src/layout/layout';
import type { LayoutNode } from 'src/utils/layout/hierarchy';
import type { LayoutNodeFromType } from 'src/utils/layout/hierarchy.types';

Expand All @@ -21,8 +20,6 @@ interface PDFViewProps {
}

const PDFComponent = ({ node }: { node: LayoutNode }) => {
const layoutComponent = node.getComponent();

if (node.item.type === 'Group') {
return (
<DisplayGroupContainer
Expand All @@ -45,10 +42,10 @@ const PDFComponent = ({ node }: { node: LayoutNode }) => {
}}
/>
);
} else if (layoutComponent?.getComponentType() === ComponentType.Presentation) {
} else if (node.getComponent().getComponentType() === ComponentType.Presentation) {
return (
<GenericComponent
node={node as LayoutNodeFromType<ComponentExceptGroupAndSummary>}
node={node}
overrideItemProps={{
grid: { xs: 12 },
}}
Expand Down
4 changes: 2 additions & 2 deletions src/features/pdf/data/generatePdfSagas.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,8 @@ function generateAutomaticLayout(pdfFormat: IPdfFormat, uiConfig: IUiConfig, lay

if (
component.type === 'Group' ||
layoutComponent?.getComponentType() === ComponentType.Form ||
layoutComponent?.getComponentType() === ComponentType.Presentation
layoutComponent.getComponentType() === ComponentType.Form ||
layoutComponent.getComponentType() === ComponentType.Presentation
) {
return {
id: `__pdf__${component.id}`,
Expand Down
Loading