From 9250c2bd58667fb3470cd8eee53308ac1a497a9b Mon Sep 17 00:00:00 2001
From: Sny <sny.aggarwal@gmail.com>
Date: Tue, 29 Oct 2024 07:56:17 +0530
Subject: [PATCH] OpenConceptLab/ocl_issues#1955 | added 403/401 on repo home

---
 src/components/errors/Error403.jsx     | 22 ++++++++-----
 src/components/errors/Error40X.jsx     | 17 ++++++++++
 src/components/repos/RepoHome.jsx      | 43 +++++++++++++-------------
 src/components/repos/VersionsTable.jsx | 21 +++++++++----
 src/i18n/locales/en/translations.json  |  2 ++
 5 files changed, 71 insertions(+), 34 deletions(-)
 create mode 100644 src/components/errors/Error40X.jsx

diff --git a/src/components/errors/Error403.jsx b/src/components/errors/Error403.jsx
index f867f099..172727e2 100644
--- a/src/components/errors/Error403.jsx
+++ b/src/components/errors/Error403.jsx
@@ -1,10 +1,12 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom'
 import SvgIcon from '@mui/material/SvgIcon';
-import { useTranslation } from 'react-i18next'
-import { startCase } from 'lodash'
-import { BLACK, PRIMARY_COLORS } from '../../common/colors';
+import { Trans, useTranslation } from 'react-i18next'
+import { BLACK} from '../../common/colors';
+import Link from '../common/Link'
 
-const Error401 = () => {
+const Error403 = () => {
+  const history = useHistory()
   const { t } = useTranslation()
   return (
     <div style={{display: 'flex', height: 'calc(100vh - 100px)', alignItems: 'center', justifyContent: 'center', textAlign: 'center', flexDirection: 'column'}}>
@@ -59,12 +61,18 @@ const Error401 = () => {
         </p>
       </div>
       <div className='col-xs-12'>
-        <p style={{color: BLACK, fontSize: '16px', margin: 0}}>
-          {startCase(t('common.go_to_your'))} <a className='no-anchor-styles' href='#/' style={{cursor: 'pointer', color: PRIMARY_COLORS.main}}>{t('dashboard.name')}</a>.
+        <p style={{color: BLACK, fontSize: '16px', margin: 0, display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+          <Trans
+            i18nKey='common.go_back_or_to_your_dashboard'
+            components={[
+              <Link key='back' sx={{minWidth: 'auto', fontSize: '16px', padding: '0 4px'}} label={t('common.back')} onClick={() => history.goBack()} />,
+              <Link key='dashboard' sx={{minWidth: 'auto', fontSize: '16px', paddingLeft: '4px'}} label={t('dashboard.name')} href='/#/' />,
+            ]}
+          />
         </p>
       </div>
     </div>
   )
 }
 
-export default Error401;
+export default Error403;
diff --git a/src/components/errors/Error40X.jsx b/src/components/errors/Error40X.jsx
new file mode 100644
index 00000000..1b4c6c72
--- /dev/null
+++ b/src/components/errors/Error40X.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import Error401 from './Error401';
+import Error403 from './Error403';
+import Error404 from './Error404';
+
+const Error40X = ({ status }) => {
+  if(status === 401)
+    return <Error401 />
+  if(status === 403)
+    return <Error403 />
+  if(status === 404)
+    return <Error404 />
+
+  return null
+}
+
+export default Error40X;
diff --git a/src/components/repos/RepoHome.jsx b/src/components/repos/RepoHome.jsx
index 28104073..0e52eac2 100644
--- a/src/components/repos/RepoHome.jsx
+++ b/src/components/repos/RepoHome.jsx
@@ -12,7 +12,7 @@ import { WHITE } from '../../common/colors';
 import ConceptHome from '../concepts/ConceptHome';
 import MappingHome from '../mappings/MappingHome';
 import ConceptForm from '../concepts/ConceptForm';
-import Error404 from '../errors/Error404';
+import Error40X from '../errors/Error40X';
 import RepoSummary from './RepoSummary'
 
 const RepoHome = () => {
@@ -43,8 +43,10 @@ const RepoHome = () => {
   const getURL = () => ((toParentURI(location.pathname) + '/').replace('//', '/') + versionFromURL + '/').replace('//', '/')
   const fetchRepo = () => {
     setLoading(true)
+    setStatus(false)
     APIService.new().overrideURL(getURL()).get(null, null, {includeSummary: true}, true).then(response => {
-      setStatus(response?.status || response?.response.status)
+      const newStatus = response?.status || response?.response.status
+      setStatus(newStatus)
       setLoading(false)
       const _repo = response?.data || response?.response?.data || {}
       setRepo(_repo)
@@ -117,31 +119,30 @@ const RepoHome = () => {
             <React.Fragment>
               <RepoHeader owner={owner} repo={repo} versions={versions} onVersionChange={onVersionChange} onCreateConceptClick={onCreateConceptClick} onCloseConceptForm={() => setConceptForm(false)} />
               <div className='padding-0 col-xs-12' style={{width: 'calc(100% - 272px)'}}>
-              <CommonTabs TABS={TABS} value={tab} onChange={onTabChange} />
-              {
-                repo?.id && ['concepts', 'mappings'].includes(tab) &&
-                  <Search
-                    resource={tab}
-                    url={getURL() + tab + '/'}
-                    defaultFiltersOpen={false}
-                    nested
-                    noTabs
-                    onShowItem={onShowItem}
-                    showItem={showItem}
-                    filtersHeight='calc(100vh - 300px)'
-                    resultContainerStyle={{height: isSplitView ? 'calc(100vh - 440px)' : 'calc(100vh - 400px)', overflow: 'auto'}}
-                    containerStyle={{padding: 0}}
-                  />
-              }
-        </div>
+                <CommonTabs TABS={TABS} value={tab} onChange={onTabChange} />
+                {
+                  repo?.id && ['concepts', 'mappings'].includes(tab) &&
+                    <Search
+                      resource={tab}
+                      url={getURL() + tab + '/'}
+                      defaultFiltersOpen={false}
+                      nested
+                      noTabs
+                      onShowItem={onShowItem}
+                      showItem={showItem}
+                      filtersHeight='calc(100vh - 300px)'
+                      resultContainerStyle={{height: isSplitView ? 'calc(100vh - 440px)' : 'calc(100vh - 400px)', overflow: 'auto'}}
+                      containerStyle={{padding: 0}}
+                    />
+                }
+              </div>
               <Paper component="div" className='col-xs-12' sx={{backgroundColor: 'surface.main', boxShadow: 'none', padding: '16px', borderLeft: 'solid 0.3px', borderTop: 'solid 0.3px', borderColor: 'surface.n90', width: '272px !important', height: 'calc(100vh - 250px)', borderRadius: 0}}>
                 <RepoSummary repo={repo} summary={repoSummary} />
               </Paper>
             </React.Fragment>
         }
         {
-          !loading && status === 404 &&
-            <Error404 />
+          !loading && status && <Error40X status={status} />
         }
       </Paper>
       <div className={'col-xs-5 padding-0' + (isSplitView ? ' split-appear' : '')} style={{marginLeft: '16px', width: isSplitView ? 'calc(41.66666667% - 16px)' : 0, backgroundColor: WHITE, borderRadius: '10px', height: isSplitView ? 'calc(100vh - 100px)' : 0, opacity: isSplitView ? 1 : 0}}>
diff --git a/src/components/repos/VersionsTable.jsx b/src/components/repos/VersionsTable.jsx
index 5e92f5cf..d812ae29 100644
--- a/src/components/repos/VersionsTable.jsx
+++ b/src/components/repos/VersionsTable.jsx
@@ -12,6 +12,7 @@ import Checkbox from '@mui/material/Checkbox';
 import Tooltip from '@mui/material/Tooltip';
 import ReleaseIcon from '@mui/icons-material/VerifiedOutlined';
 import DraftIcon from '@mui/icons-material/EditOutlined';
+import isNumber from 'lodash/isNumber'
 import without from 'lodash/without'
 import ConceptIcon from '../concepts/ConceptIcon'
 import AccessIcon from '../common/AccessIcon'
@@ -41,12 +42,20 @@ const Row = ({ version, disabled, checkbox, bodyCellStyle, onCheck, checked, onV
       </TableCell>
       <TableCell sx={{...bodyCellStyle}} onClick={() => onVersionChange(version)}>
         <span style={{display: 'flex', alignItems: 'center'}}>
-          <span style={{marginRight: '8px', display: 'flex', alignItems: 'center'}}>
-            <ConceptIcon selected color='secondary' sx={{width: '9px', height: '9px', marginRight: '4px'}} /> {version.summary.active_concepts?.toLocaleString()}
-          </span>
-          <span style={{display: 'flex', alignItems: 'center'}}>
-            <MappingIcon width="15px" height='13px' fill='secondary.main' color='secondary' sx={{width: '15px', height: '13px', marginRight: '4px'}} /> {version.summary.active_mappings?.toLocaleString()}
-          </span>
+          {
+            isNumber(version?.summary?.active_concepts) &&
+              <span style={{marginRight: '8px', display: 'flex', alignItems: 'center'}}>
+                <ConceptIcon selected color='secondary' sx={{width: '9px', height: '9px', marginRight: '4px'}} />
+                {version.summary.active_concepts.toLocaleString()}
+              </span>
+          }
+          {
+            isNumber(version?.summary?.active_mappings) &&
+              <span style={{display: 'flex', alignItems: 'center'}}>
+                <MappingIcon width="15px" height='13px' fill='secondary.main' color='secondary' sx={{width: '15px', height: '13px', marginRight: '4px'}} />
+                {version.summary.active_mappings.toLocaleString()}
+              </span>
+          }
         </span>
       </TableCell>
         <TableCell sx={{...bodyCellStyle}} onClick={() => onVersionChange(version)}>
diff --git a/src/i18n/locales/en/translations.json b/src/i18n/locales/en/translations.json
index c0b7d7d7..03e15dbc 100644
--- a/src/i18n/locales/en/translations.json
+++ b/src/i18n/locales/en/translations.json
@@ -22,7 +22,9 @@
     "refresh": "refresh",
     "go_to": "go to",
     "go_to_your": "go to your ",
+    "go_back_or_to_your_dashboard": "Go <0/> or to your <1/>.",
     "for_a_new_account": "for a new account",
+    "back": "back",
     "retired": "Retired",
     "id": "ID",
     "name": "Name",