Accession: Display notice for historical accessions

src/accession/AccessionDetailsPage.tsx

@@ -85,7 +85,7 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
 
     const canAdd = canAddToCart(accession.details);
 
-    return <button
+    return !accession.details.historic && <button
       type="button"
       disabled={ !canAdd }
       name={ `button-add-${accession.details.uuid}` }
@@ -137,15 +137,14 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
             }
           </div>
 
+          { details.historic && <div className="bg-warning p-2 mb-2">{ t('accession.historicalNote') }</div> }
+
           { details.doi && <Property title={ t('accession.doi') } value={ <a href={ `https://doi.org/${details.doi}` } target="_blank">{ details.doi }</a> } index={ propertyIndex++ }/> }
           { details.accessionName && <Property title={ t('accession.accessionName') } value={ <b>{ details.accessionName }</b> } index={ propertyIndex++ }/> }
           <Property title={ t('accession.acceNumb') } value={ details.accessionNumber } index={ propertyIndex++ } />
           { details.institute && details.institute.fullName &&
             <Property title={ t('accession.holdingInstitute') } value={ details.institute.fullName } index={ propertyIndex++ }/>
           }
-          { details.historic &&
-            <Property title="Historic accession" value={ 'This is a historic record of an accession' } index={ propertyIndex++ }/>
-          }
           { details.institute && details.institute.code &&
             <Property title={ t('accession.instituteCode') } value={ details.institute.code } index={ propertyIndex++ }/>
           }

src/accession/AccessionListPage.tsx

@@ -216,7 +216,7 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
               </thead>
               <tbody>
                 { accessions.content.map((a, i) => (
-                  <tr key={ a.id } className={ selectedUUIDs.has(a.uuid) ? 'table-primary' : '' }>
+                  <tr key={ a.id } className={ a.historic ? 'table-historical' : selectedUUIDs.has(a.uuid) ? 'table-primary' : '' }>
                     { shoppingCart.enabled && (
                       <td>
                         { canAddToCart(a) &&

src/genesys.css

+tr.table-historical {
+  opacity: 50%;
+}

src/locales/en/translations.json

@@ -31,6 +31,7 @@
   "accession": {
     "model": "Accession",
     "model_plural": "Accessions",
+    "historicalNote": "This is a historical record of an accession.",
     "doi": "Accession DOI",
     "crop": "Crop",
     "cropName": "Crop name",

src/ui/core/App.tsx

@@ -18,6 +18,7 @@ import MapPage from 'map/MapPage';
 import ApiInfo from '@genesys/client/model/ApiInfo';
 
 import 'leaflet/dist/leaflet.css';
+import 'genesys.css';
 
 const hashHistory = createHashHistory({});