OpenConceptLab/ocl_issues#2576 | Source versions tab

package.json

@@ -30,12 +30,14 @@
     "react-hotjar": "^5.5.0",
     "react-i18next": "^12.1.5",
     "react-image-crop": "^8.6.12",
+    "react-markdown": "^10.1.0",
     "react-material-ui-carousel": "^3.4.2",
     "react-native-rss-parser": "^1.5.1",
     "react-quill": "^2.0.0",
     "react-router-dom": "^5.3.4",
     "react-virtuoso": "^4.18.7",
     "react-window": "^1.8.11",
+    "remark-gfm": "^4.0.1",
     "stacktrace-js": "^2.0.2",
     "xlsx": "^0.18.5"
   },

src/components/common/MarkdownContent.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+const MarkdownContent = ({ markdown }) => (
+  <Box
+    sx={{
+      '& a': { color: 'primary.main' },
+      '& p': { my: 1, lineHeight: 1.6 },
+      '& ul, & ol': { my: 1, pl: 3 },
+      '& li': { lineHeight: 1.6, my: 0.25 },
+      '& hr': {
+        my: 2,
+        border: 0,
+        borderTop: '1px solid',
+        borderColor: 'divider'
+      },
+      '& blockquote': {
+        borderLeft: '3px solid',
+        borderColor: 'primary.main',
+        pl: 1.5,
+        my: 1.5,
+        color: 'text.secondary',
+        ml: 0
+      },
+      '& table': {
+        width: '100%',
+        borderCollapse: 'collapse',
+        my: 2,
+        border: '1px solid',
+        borderColor: 'surface.nv80'
+      },
+      '& th, & td': {
+        border: '1px solid',
+        borderColor: 'surface.nv80',
+        padding: '6px 13px',
+        textAlign: 'left',
+        verticalAlign: 'top'
+      },
+      '& th': {
+        fontWeight: 700,
+        backgroundColor: 'background.paper'
+      },
+      '& tr:nth-of-type(even)': {
+        backgroundColor: 'action.hover'
+      }
+    }}
+  >
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      components={{
+        h1: ({ children }) => <Typography variant="h6" sx={{ mt: 0, mb: 1, fontWeight: 700 }}>{children}</Typography>,
+        h2: ({ children }) => <Typography variant="subtitle1" sx={{ mt: 2.5, mb: 1, fontWeight: 700 }}>{children}</Typography>,
+        h3: ({ children }) => <Typography variant="subtitle2" sx={{ mt: 2.5, mb: 1, fontWeight: 700 }}>{children}</Typography>,
+        p: ({ children }) => <Typography variant="body2">{children}</Typography>,
+        code: ({ inline, children }) => inline ? (
+          <Box component="code" sx={{ fontFamily: 'monospace', px: 0.5, bgcolor: 'surface.main', borderRadius: '3px' }}>
+            {children}
+          </Box>
+        ) : (
+          <Box
+            component="pre"
+            sx={{
+              my: 2,
+              p: 1.5,
+              overflow: 'auto',
+              borderRadius: 1,
+              bgcolor: 'surface.main'
+            }}
+          >
+            <code>{children}</code>
+          </Box>
+        ),
+        a: ({ href, children, ...props }) => {
+          const isExternal = /^https?:\/\//i.test(href || '');
+          return (
+            <a
+              href={href}
+              {...props}
+              {...(isExternal ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+            >
+              {children}
+            </a>
+          );
+        }
+      }}
+    >
+      {markdown || ''}
+    </ReactMarkdown>
+  </Box>
+);
+
+export default MarkdownContent;

src/components/repos/RepoHome.jsx

@@ -26,9 +26,12 @@ import VersionForm from './VersionForm'
 import ReleaseVersion from './ReleaseVersion'
 import RepoHeader from './RepoHeader';
 import CollectionVersionsTab from './CollectionVersionsTab';
+import SourceVersionsTab from './SourceVersionsTab';
 import ReferenceHome from '../references/ReferenceHome'
 import AddReferencesDialog from '../collections/AddReferencesDialog'
 
+const DEFAULT_VERSIONS_PAGE_SIZE = 25
+
 const RepoHome = () => {
   const { t } = useTranslation()
   const location = useLocation()
@@ -39,15 +42,23 @@ const RepoHome = () => {
     {key: 'mappings', label: t('mapping.mappings')},
   ]
   const isCollection = params.repoType === 'collections'
+  const getRepoTabs = React.useCallback(() => {
+    if(isCollection)
+      return [...TABS, {key: 'references', label: t('reference.references')}, {key: 'versions', label: t('repo.versions_expansions')}]
+
+    return [...TABS, {key: 'versions', label: t('repo.versions')}]
+  }, [isCollection, t])
 
-  const [tabs, setTabs] = React.useState(isCollection ? [...TABS, {key: 'references', label: t('reference.references')}, {key: 'versions', label: t('repo.versions_expansions')}] : [...TABS])
+  const [tabs, setTabs] = React.useState(getRepoTabs)
 
   const [status, setStatus] = React.useState(false)
   const [repo, setRepo] = React.useState(false)
   const [owner, setOwner] = React.useState(false)
   const [repoSummary, setRepoSummary] = React.useState(false)
   const [versions, setVersions] = React.useState(false)
   const [versionsCount, setVersionsCount] = React.useState(false)
+  const [versionsPage, setVersionsPage] = React.useState(1)
+  const [versionsPageSize, setVersionsPageSize] = React.useState(DEFAULT_VERSIONS_PAGE_SIZE)
   const [loading, setLoading] = React.useState(true)
   const [showItem, setShowItem] = React.useState(false)
   const [conceptForm, setConceptForm] = React.useState(false)
@@ -81,10 +92,7 @@ const RepoHome = () => {
         setContextRepo(_repo)
       fetchOwner()
       fetchRepoSummary()
-      if(isCollection)
-        setTabs([...TABS, {key: 'references', label: t('reference.references')}, {key: 'versions', label: t('repo.versions_expansions')}])
-      else
-        setTabs([...TABS])
+      setTabs(getRepoTabs())
 
       if(isConceptURL || isMappingURL || isReferenceURL)
         setShowItem(true)
@@ -103,11 +111,11 @@ const RepoHome = () => {
     })
   }
 
-  const fetchVersions = () => {
-    APIService.new().overrideURL(dropVersion(getURL())).appendToUrl('versions/').get(null, null, {verbose:true, includeSummary: true, limit: 100}).then(response => {
+  const fetchVersions = (page=versionsPage, limit=versionsPageSize) => {
+    APIService.new().overrideURL(dropVersion(getURL())).appendToUrl('versions/').get(null, null, {verbose:true, includeSummary: true, limit, page}).then(response => {
       const _versions = Array.isArray(response?.data) ? response.data : []
       setVersions(_versions)
-      setVersionsCount(response?.headers?.['num_found'] || 1)
+      setVersionsCount(parseInt(response?.headers?.['num_found'] || _versions.length || 0))
       if(!repo.version_url && params.repoVersion !== 'HEAD' && !showConceptURL && !showMappingURL) {
         const releasedVersions = filter(_versions, {released: true})
         let version = orderBy(releasedVersions, 'created_on', ['desc'])[0] || orderBy(_versions, 'created_on', ['desc'])[0]
@@ -141,12 +149,21 @@ const RepoHome = () => {
 
 
   const onVersionChange = (version, reload=true) => {
-    if(reload)
-      setLoading(true)
     let url = version.version_url
     if(reload && version?.version === 'HEAD')
       url += 'HEAD/'
-    history.push(url + (tab || 'concepts'))
+    const nextPath = url + (tab || 'concepts')
+    if(nextPath === location.pathname)
+      return
+    if(reload)
+      setLoading(true)
+    history.push(nextPath)
+  }
+
+  const onVersionsPageChange = (page, pageSize=versionsPageSize) => {
+    setVersionsPage(page)
+    setVersionsPageSize(pageSize)
+    fetchVersions(page, pageSize)
   }
 
   const onTabChange = (event, newTab) => {
@@ -321,6 +338,9 @@ const RepoHome = () => {
                       repo={repo}
                       versions={versions}
                       count={versionsCount}
+                      page={versionsPage}
+                      pageSize={versionsPageSize}
+                      onPageChange={onVersionsPageChange}
                       onCreateVersion={onCreateVersionClick}
                       onReleaseVersion={version => setReleaseTarget(version)}
                       onDeleteVersion={version => setDeleteTarget(version)}
@@ -330,6 +350,26 @@ const RepoHome = () => {
                       }}
                     />
                 }
+                {
+                  tab === 'versions' && !isCollection &&
+                    <SourceVersionsTab
+                      repo={repo}
+                      versions={versions}
+                      count={versionsCount}
+                      page={versionsPage}
+                      pageSize={versionsPageSize}
+                      loading={loading}
+                      onPageChange={onVersionsPageChange}
+                      onVersionChange={onVersionChange}
+                      onEditVersion={version => setVersionForm({edit: true, version, expansions: []})}
+                      onReleaseVersion={version => setReleaseTarget(version)}
+                      onDeleteVersion={version => setDeleteTarget(version)}
+                      onDataChange={() => {
+                        fetchRepo()
+                        fetchVersions()
+                      }}
+                    />
+                }
                 {
                   tab === 'about' &&
                     <RepoOverview repo={repo} height='calc(100vh - 300px)' />