[DUOS-2987] Add request access button on statistics page (#2519)

src/pages/DatasetStatistics.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { useState, useEffect } from 'react';
-import { DataSet, Metrics } from '../libs/ajax';
+import { DataSet, Metrics, DAR } from '../libs/ajax';
 import { Notifications } from '../libs/utils';
 import { Styles, Theme } from '../libs/theme';
 import { get, find } from 'lodash';
 import { ReadMore } from '../components/ReadMore';
 import { formatDate } from '../libs/utils';
+import { Button } from '@mui/material';
 
 const LINE = <div style={{ borderTop: '1px solid #BABEC1', height: 0 }} />;
 
@@ -19,10 +20,17 @@ const extractIdentifier = (params) => {
 
 export default function DatasetStatistics(props) {
   const datasetIdentifier = extractIdentifier(props.match.params);
+  const history = props.history;
+  const [datasetId, setDatasetId] = useState();
   const [dataset, setDataset] = useState();
   const [dars, setDars] = useState();
   const [isLoading, setIsLoading] = useState(true);
 
+  const applyForAccess = async () => {
+    const darDraft = await DAR.postDarDraft({ datasetId: [ datasetId ]  });
+    history.push(`/dar_application/${darDraft.referenceId}`);
+  };
+
   useEffect(() => {
     DataSet.getDatasetByDatasetIdentifier(datasetIdentifier).then((dataset) => {
       setData(dataset.dataSetId);
@@ -35,6 +43,7 @@ export default function DatasetStatistics(props) {
     try {
       setIsLoading(true);
       const metrics = await Metrics.getDatasetStats(datasetId);
+      setDatasetId(datasetId);
       setDataset(metrics.dataset);
       setDars(metrics.dars);
       setIsLoading(false);
@@ -66,6 +75,11 @@ export default function DatasetStatistics(props) {
                 )}
               </div>
             </div>
+            <div style={{ paddingTop: '20px', paddingLeft: '30px' }}>
+              <Button variant="contained" onClick={applyForAccess} sx={{ transform: 'scale(1.5)' }} >
+                Apply for Access
+              </Button>
+            </div>
           </div>
           <div style={Styles.SUB_HEADER}>Dataset Information</div>
           <div style={{ display: 'flex' }}>