Skip to content

refactor: render view-builder components as jsx elements instead of plain function calls (rules-of-hooks) (#4877) #4884

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

Merged
NoopDog merged 2 commits into from
Jul 1, 2026
Merged

refactor: render view-builder components as jsx elements instead of plain function calls (rules-of-hooks) (#4877) #4884

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6df6c49
refactor: render view-builder components as jsx elements instead of p…
frano-m Jul 1, 2026
7f18a63
fix: correct noopener typo in cookie banner eslint-disable comment (#…
frano-m Jul 1, 2026
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
2 changes: 1 addition & 1 deletion ...on/dataSummaryMapper/dataSummaryMapper.ts → ...n/dataSummaryMapper/dataSummaryMapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export function mapProjectDataSummary(
);
details.set(
DATA_SUMMARY.PROJECT_SHORTNAME,
C.TypographyWordBreak({ children: projectShortname })
<C.TypographyWordBreak>{projectShortname}</C.TypographyWordBreak>
);
details.set(
DATA_SUMMARY.GENUS_SPECIES,
Expand Down
234 changes: 127 additions & 107 deletions .../azul/hca-dcp/common/viewModelBuilders.ts → ...azul/hca-dcp/common/viewModelBuilders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,16 +136,14 @@
keyValuePairs.set(`${label}:`, getAccessionsKeyValue(accessions));
}
return {
KeyElType: (props) =>
C.KeyElType({
color: "ink.main",
...props,
}),
KeyElType: (props) => <C.KeyElType color="ink.main" {...props} />,
KeyValueElType: Fragment,
KeyValuesElType: (props) =>
C.Grid({ gap: 1, gridTemplateColumns: "auto 1fr", ...props }),
ValueElType: (props) =>
C.GridItem({ display: "flex", flexWrap: "wrap", ...props }),
KeyValuesElType: (props) => (
<C.Grid gap={1} gridTemplateColumns="auto 1fr" {...props} />
),
ValueElType: (props) => (
<C.GridItem display="flex" flexWrap="wrap" {...props} />
),
keyValuePairs,
};
};
Expand Down Expand Up @@ -570,13 +568,16 @@
KeyElType: Fragment,
KeyValueElType,
KeyValuesElType: Fragment,
ValueElType: (props) =>
C.ValueElType({
variant: analysisPortals
? TYPOGRAPHY_PROPS.VARIANT.BODY_400
: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES,
...props,
}),
ValueElType: (props) => (
<C.ValueElType
variant={
analysisPortals
? TYPOGRAPHY_PROPS.VARIANT.BODY_400
: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES
}
{...props}
/>
),
keyValuePairs,
};
};
Expand Down Expand Up @@ -704,17 +705,21 @@
localStorageKey: "privacy-accepted",
message:
"This website uses cookies for security and analytics purposes. By using this site, you agree to these uses.",
secondaryAction: C.ButtonOutline({
children: "Learn More",
/* eslint-disable sonarjs/link-with-target-blank -- const used for NOOPRNER NOREFERRER */
onClick: () =>
window.open(
"https://data.humancellatlas.org/privacy",
ANCHOR_TARGET.BLANK,
REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
),
/* eslint-enable sonarjs/link-with-target-blank -- check target blank links for the rest of the file */
}),
secondaryAction: (
<C.ButtonOutline
/* eslint-disable sonarjs/link-with-target-blank -- const used for NOOPENER NOREFERRER */
onClick={() =>
window.open(
"https://data.humancellatlas.org/privacy",
ANCHOR_TARGET.BLANK,
REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
)
}
/* eslint-enable sonarjs/link-with-target-blank -- check target blank links for the rest of the file */
>
Learn More
</C.ButtonOutline>
),
};
};

Expand Down Expand Up @@ -1135,15 +1140,16 @@
): React.ComponentProps<typeof C.KeyValuePairs> => {
return {
KeyValueElType: Fragment,
KeyValuesElType: (props) =>
C.Grid({
gridSx: {
KeyValuesElType: (props) => (
<C.Grid
gridSx={{
alignSelf: "stretch",
gap: 2,
gridTemplateColumns: "1fr auto",
},
...props,
}),
}}
{...props}
/>
),
keyValuePairs: getFileCountsKeyValuePairs(projectsResponse),
};
};
Expand Down Expand Up @@ -1566,16 +1572,18 @@
* @returns the KeyValuePair value for the accessions as a ReactElement.
*/
function getAccessionsKeyValue(accessions: Accession[]): ReactElement {
return C.Links({
divider: C.Divider({ children: ", " }),
links: accessions.map(({ id, url }) => {
return {
label: id,
target: ANCHOR_TARGET.BLANK,
url,
};
}),
});
return (
<C.Links
divider={<C.Divider>{", "}</C.Divider>}
links={accessions.map(({ id, url }) => {
return {
label: id,
target: ANCHOR_TARGET.BLANK,
url,
};
})}
/>
);
}

/**
Expand All @@ -1599,11 +1607,7 @@
*/
function getAnalysisPortalKey(analysisPortal: AnalysisPortal): ReactElement {
const { icon, label } = analysisPortal;
return C.StaticImage({
alt: label,
src: icon,
width: 20,
});
return <C.StaticImage alt={label} src={icon} width={20} />;
}

/**
Expand Down Expand Up @@ -1636,16 +1640,20 @@
if (!analysisPortals) {
return Fragment; // No analysis portals for the given projects response.
}
return (props) =>
C.KeyValueElType({
boxSx: {
// Named (rather than an anonymous arrow) so react/display-name is satisfied
// when the component is returned directly instead of assigned to a prop.
const KeyValueElType: ElementType = (props) => (
<C.KeyValueElType
boxSx={{
display: "grid",
gap: 2,
gridTemplateColumns: "auto 1fr",
},
keyValueFn: getAnalysisPortalKeyValueFn(analysisPortals),
...props,
});
}}
keyValueFn={getAnalysisPortalKeyValueFn(analysisPortals)}
{...props}
/>
);
return KeyValueElType;
}

/**
Expand Down Expand Up @@ -1915,17 +1923,20 @@
export function getGeneratedMatricesActionsColumnDef<T>(): ColumnDef<T> {
return {
accessorKey: "",
cell: ({ row }) =>
C.ButtonGroup({
Buttons: [
C.FileLocationDownload({
projectMatrixView: row.original as unknown as ProjectMatrixView,
}),
C.FileLocationCopy({
projectMatrixView: row.original as unknown as ProjectMatrixView,
}),
],
}),
cell: ({ row }) => (
<C.ButtonGroup
Buttons={[
<C.FileLocationDownload
key="download"
projectMatrixView={row.original as unknown as ProjectMatrixView}
/>,
<C.FileLocationCopy
key="copy"
projectMatrixView={row.original as unknown as ProjectMatrixView}
/>,
]}
/>
),
header: "Actions",
};
}
Expand All @@ -1939,14 +1950,15 @@
>(): ColumnDef<T> {
return {
accessorKey: HCA_DCP_CATEGORY_KEY.ORGAN,
cell: ({ column, row }) =>
C.NTagCell(
getNTagCellProps(
cell: ({ column, row }) => (
<C.NTagCell
{...getNTagCellProps(
row.original as unknown as ProjectMatrixTableView, // TODO revisit type assertion here

Check warning on line 1956 in app/viewModelBuilders/azul/hca-dcp/common/viewModelBuilders.tsx

View workflow job for this annotation

GitHub Actions / build 

Complete the task associated to this "TODO" comment
column.id,
METADATA_KEY.ANATOMICAL_ENTITY
)
),
)}
/>
),
header: HCA_DCP_CATEGORY_LABEL.ANATOMICAL_ENTITY,
};
}
Expand All @@ -1960,14 +1972,15 @@
>(): ColumnDef<T> {
return {
accessorKey: HCA_DCP_CATEGORY_KEY.CONTENT_DESCRIPTION,
cell: ({ column, row }) =>
C.NTagCell(
getNTagCellProps(
cell: ({ column, row }) => (
<C.NTagCell
{...getNTagCellProps(
row.original as unknown as ProjectMatrixTableView, // TODO revisit type assertion here

Check warning on line 1978 in app/viewModelBuilders/azul/hca-dcp/common/viewModelBuilders.tsx

View workflow job for this annotation

GitHub Actions / build 

Complete the task associated to this "TODO" comment
column.id,
METADATA_KEY.CONTENT_DESCRIPTION
)
),
)}
/>
),
header: HCA_DCP_CATEGORY_LABEL.CONTENT_DESCRIPTION,
};
}
Expand All @@ -1979,13 +1992,16 @@
export function getGeneratedMatricesFileNameColumnDef<T>(): ColumnDef<T> {
return {
accessorKey: HCA_DCP_CATEGORY_KEY.FILE_NAME,
cell: ({ getValue, row }) =>
C.FileNameCell({
archivePreview: C.FileLocationArchivePreview({
projectMatrixView: row.original as unknown as ProjectMatrixView,
}),
fileName: getValue() as unknown as string,
}),
cell: ({ getValue, row }) => (
<C.FileNameCell
archivePreview={
<C.FileLocationArchivePreview
projectMatrixView={row.original as unknown as ProjectMatrixView}
/>
}
fileName={getValue() as unknown as string}
/>
),
header: HCA_DCP_CATEGORY_LABEL.FILE_NAME,
meta: {
columnPinned: true,
Expand All @@ -2012,14 +2028,15 @@
export function getGeneratedMatricesGenusSpeciesColumnDef<T>(): ColumnDef<T> {
return {
accessorKey: HCA_DCP_CATEGORY_KEY.GENUS_SPECIES,
cell: ({ column, row }) =>
C.NTagCell(
getNTagCellProps(
cell: ({ column, row }) => (
<C.NTagCell
{...getNTagCellProps(
row.original as unknown as ProjectMatrixTableView, // TODO revisit type assertion here
column.id,
METADATA_KEY.SPECIES
)
),
)}
/>
),
header: "Species",
};
}
Expand All @@ -2033,14 +2050,15 @@
>(): ColumnDef<T> {
return {
accessorKey: HCA_DCP_CATEGORY_KEY.LIBRARY_CONSTRUCTION_METHOD,
cell: ({ column, row }) =>
C.NTagCell(
getNTagCellProps(
cell: ({ column, row }) => (
<C.NTagCell
{...getNTagCellProps(
row.original as unknown as ProjectMatrixTableView, // TODO revisit type assertion here
column.id,
METADATA_KEY.LIBRARY_CONSTRUCTION_APPROACH
)
),
)}
/>
),
header: HCA_DCP_CATEGORY_LABEL.LIBRARY_CONSTRUCTION_METHOD,
};
}
Expand Down Expand Up @@ -2158,20 +2176,22 @@
? `https://duos.org/dataset/${duosId}`
: "https://duos.org/datalibrary/HCA";

return C.BackPageHeroActions({
callToActionProps: {
callToAction: {
label: "Request Access",
target: ANCHOR_TARGET.BLANK,
url: ctaUrl,
},
},
linkProps: {
getURL: (origin?: string): string =>
`${origin}/guides/requesting-access-to-controlled-access-data`,
label: "Need Help?",
},
});
return (
<C.BackPageHeroActions
callToActionProps={{
callToAction: {
label: "Request Access",
target: ANCHOR_TARGET.BLANK,
url: ctaUrl,
},
}}
linkProps={{
getURL: (origin?: string): string =>
`${origin}/guides/requesting-access-to-controlled-access-data`,
label: "Need Help?",
}}
/>
);
}

/**
Expand Down
5 changes: 3 additions & 2 deletions .../azul/lungmap/common/viewModelBuilders.ts → ...azul/lungmap/common/viewModelBuilders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,8 +178,9 @@ export const buildTripleColumnGrid = (): Partial<
function getGeneratedMatricesFileNameColumnDef<T>(): ColumnDef<T> {
return {
accessorKey: HCA_DCP_CATEGORY_KEY.FILE_NAME,
cell: ({ getValue }) =>
C.FileNameCell({ fileName: getValue() as unknown as string }),
cell: ({ getValue }) => (
<C.FileNameCell fileName={getValue() as unknown as string} />
),
header: HCA_DCP_CATEGORY_LABEL.FILE_NAME,
meta: {
columnPinned: true,
Expand Down
Loading
Loading