OpenConceptLab/ocl_issues#2576 | Source versions tab by snyaggarwal · Pull Request #28 · OpenConceptLab/oclweb3

snyaggarwal · 2026-06-22T11:45:05Z

Linked Issue

…translations

…ternal export

jamlung-ri · 2026-06-23T15:47:16Z

A couple of quick fixes made:

Explore Version on the currently selected version caused a loading loop. This should be fixed now.
I feel like "Created" value should show date only, not time. @snyaggarwal please correct this if you think it should show the time.

I noted that CIEL, which has 51 versions, seems to display all of the versions with no "Show More" action. If there needs to be that "Show More", let's consider adding it.

Otherwise, the behavior works very well, and it looks nice and streamlined!

paynejd

Feature meets the ticket's AC (exports, changelogs, version comparison) and exceeds it. Comments are inline as one-click suggestions. Two things worth doing before merge:

Changelog renderer — reuse react-markdown+remark-gfm like TBv2 (see comment on MarkdownContent.jsx); the hand-rolled parser drops lists and breaks in-page anchor links.
Duplication — commit 6bdceeb is titled "extracting common component," but SourceVersionsTab re-implements the toolbar, sticky table, action menu, and a local isHeadVersion already in CollectionVersionsTab. Consider a shared VersionsTable so the two don't drift (follow-up, not a blocker).

paynejd · 2026-06-23T16:20:55Z

+  Typography
+} from '@mui/material';
+
+const renderInlineMarkdown = text => {


Main ask before merge — reuse a real markdown renderer for the changelog. TBv2 renders this exact /sources/$changelog/ output via react-markdown + remark-gfm (oclweb2/src/components/common/CustomMarkdown.jsx). oclweb3 has no client-side markdown component yet, so this PR hand-rolls one — but it misses constructs the changelog generator actually emits: bullet lists (oclapi2/core/sources/changelog_markdown.py:254) and in-page anchor links to table rows (:449).

Recommend adding react-markdown+remark-gfm and porting CustomMarkdown into a shared <Markdown> component — and flagging this as a design-system gap (no shared markdown component exists in oclweb3). The three suggestions below are stop-gaps if the hand-rolled parser stays.

paynejd · 2026-06-23T16:20:55Z

+    else if(match[5])
+      tokens.push(<a key={tokens.length} href={match[6]} target="_blank" rel="noopener noreferrer">{match[5]}</a>);


In-page anchor links from the changelog (changelog_markdown.py:449) open a blank tab to a broken URL because every link gets target="_blank". Only force a new tab for external links:

Suggested change

else if(match[5])

tokens.push(<a key={tokens.length} href={match[6]} target="_blank" rel="noopener noreferrer">{match[5]}</a>);

else if(match[5]) {

const isExternal = /^https?:\/\//i.test(match[6]);

tokens.push(<a key={tokens.length} href={match[6]} {...(isExternal ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>{match[5]}</a>);

}

paynejd · 2026-06-23T16:20:56Z

+
+    const heading = trimmed.match(/^(#{1,6})\s+(.+)$/);
+    if(heading) {
+      const variant = heading[1].length <= 1 ? 'h6' : 'subtitle1';


## and ### both collapse to subtitle1, but the generator emits #/##/###. Preserve the hierarchy:

Suggested change

const variant = heading[1].length <= 1 ? 'h6' : 'subtitle1';

const variant = { 1: 'h6', 2: 'subtitle1', 3: 'subtitle2' }[heading[1].length] || 'subtitle2';

paynejd · 2026-06-23T16:20:56Z

+    elements.push(
+      <Typography key={elements.length} variant="body2" sx={{ my: 1, lineHeight: 1.6 }}>
+        {renderInlineMarkdown(trimmed)}
+      </Typography>
+    );
+    index += 1;


Bullet/ordered lists (the generator emits - items at changelog_markdown.py:254) fall through to the paragraph branch and render with a literal leading dash. Add a list branch before the paragraph fallthrough:

Suggested change

elements.push(

<Typography key={elements.length} variant="body2" sx={{ my: 1, lineHeight: 1.6 }}>

{renderInlineMarkdown(trimmed)}

</Typography>

);

index += 1;

if(/^([-*]|\d+\.)\s+/.test(trimmed)) {

const ordered = /^\d+\.\s+/.test(trimmed);

const items = [];

while(index < lines.length && /^\s*([-*]|\d+\.)\s+/.test(lines[index])) {

items.push(lines[index].trim().replace(/^([-*]|\d+\.)\s+/, ''));

index += 1;

}

elements.push(

<Box key={elements.length} component={ordered ? 'ol' : 'ul'} sx={{ my: 1, pl: 3 }}>

{items.map((item, itemIndex) => (

<Typography key={itemIndex} component="li" variant="body2" sx={{ lineHeight: 1.6 }}>

{renderInlineMarkdown(item)}

</Typography>

))}

</Box>

);

continue;

}

elements.push(

<Typography key={elements.length} variant="body2" sx={{ my: 1, lineHeight: 1.6 }}>

{renderInlineMarkdown(trimmed)}

</Typography>

);

index += 1;

paynejd · 2026-06-23T16:20:56Z

+};
+
+const headerCellSx = {
+  backgroundColor: 'white',


Use a theme token instead of hardcoded 'white' (must stay opaque so the sticky header covers scrolling rows):

Suggested change

backgroundColor: 'white',

backgroundColor: 'background.paper',

paynejd · 2026-06-23T16:20:56Z

+    : t('repo.source_versions_count', { count: versionsCount.toLocaleString() });
+
+  return (
+    <Box sx={{ height: 'calc(100vh - 285px)', overflow: 'hidden', backgroundColor: '#FFF' }}>


Token instead of hardcoded #FFF:

Suggested change

<Box sx={{ height: 'calc(100vh - 285px)', overflow: 'hidden', backgroundColor: '#FFF' }}>

<Box sx={{ height: 'calc(100vh - 285px)', overflow: 'hidden', backgroundColor: 'background.paper' }}>

paynejd · 2026-06-23T16:20:56Z

+          bgcolor: '#FFF',
+          borderBottom: '1px solid rgba(224, 224, 224, 1)',


Token-ize the toolbar background and border (the rest of the file uses surface.*/divider):

Suggested change

bgcolor: '#FFF',

borderBottom: '1px solid rgba(224, 224, 224, 1)',

bgcolor: 'background.paper',

borderBottom: '1px solid',

borderColor: 'divider',

paynejd · 2026-06-23T16:20:56Z

+      >
+        <Typography
+          sx={{ flex: '1 1 100%', whiteSpace: 'nowrap' }}
+          variant="h7"


h7 isn't a standard MUI Typography variant (renders unstyled). Use h6:

Suggested change

variant="h7"

variant="h6"

OpenConceptLab/ocl_issues#2576 | Source versions tab

a9e39bc

snyaggarwal requested a review from jamlung-ri June 22, 2026 11:45

snyaggarwal self-assigned this Jun 22, 2026

snyaggarwal mentioned this pull request Jun 22, 2026

TBv3 Sources: Add Versions tab OpenConceptLab/ocl_issues#2576

Open

snyaggarwal and others added 4 commits June 22, 2026 17:21

OpenConceptLab/ocl_issues#2576 | extracting common component | using …

6bdceeb

…translations

OpenConceptLab/ocl_issues#2576 | HEAD delete not possible

00c094f

OpenConceptLab/ocl_issues#2576 | using more translations | updated ex…

04ca4ce

…ternal export

Quick fixes

8c24414

paynejd reviewed Jun 23, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

OpenConceptLab/ocl_issues#2576 | Source versions tab#28

OpenConceptLab/ocl_issues#2576 | Source versions tab#28
snyaggarwal wants to merge 5 commits into
mainfrom
issues#2576

snyaggarwal commented Jun 22, 2026

Uh oh!

jamlung-ri commented Jun 23, 2026

Uh oh!

paynejd left a comment

Uh oh!

paynejd Jun 23, 2026

Uh oh!

paynejd Jun 23, 2026

Uh oh!

paynejd Jun 23, 2026

Uh oh!

paynejd Jun 23, 2026

Uh oh!

paynejd Jun 23, 2026

Uh oh!

paynejd Jun 23, 2026

Uh oh!

paynejd Jun 23, 2026

Uh oh!

paynejd Jun 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		else if(match[5])
		tokens.push(<a key={tokens.length} href={match[6]} target="_blank" rel="noopener noreferrer">{match[5]}</a>);

-    else if(match[5])
-      tokens.push(<a key={tokens.length} href={match[6]} target="_blank" rel="noopener noreferrer">{match[5]}</a>);
+    else if(match[5]) {
+      const isExternal = /^https?:\/\//i.test(match[6]);
+      tokens.push(<a key={tokens.length} href={match[6]} {...(isExternal ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>{match[5]}</a>);
+    }

	const variant = heading[1].length <= 1 ? 'h6' : 'subtitle1';
	const variant = { 1: 'h6', 2: 'subtitle1', 3: 'subtitle2' }[heading[1].length] \|\| 'subtitle2';

	backgroundColor: 'white',
	backgroundColor: 'background.paper',

	<Box sx={{ height: 'calc(100vh - 285px)', overflow: 'hidden', backgroundColor: '#FFF' }}>
	<Box sx={{ height: 'calc(100vh - 285px)', overflow: 'hidden', backgroundColor: 'background.paper' }}>

		bgcolor: '#FFF',
		borderBottom: '1px solid rgba(224, 224, 224, 1)',

-          bgcolor: '#FFF',
-          borderBottom: '1px solid rgba(224, 224, 224, 1)',
+          bgcolor: 'background.paper',
+          borderBottom: '1px solid',
+          borderColor: 'divider',

Conversation

snyaggarwal commented Jun 22, 2026

Linked Issue

Uh oh!

jamlung-ri commented Jun 23, 2026

Uh oh!

paynejd left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants