Merge pull request #1401 from ral-facilities/fix-help-page-top-of-pag…

…e-links-#1400

Fix help page top of page links #1400

public/res/default.json

@@ -76,7 +76,7 @@
   "help-page": {
     "title": "Help",
     "table-of-contents": "Table of contents",
-    "top-of-page-icon": "<a href=#scigateway>&#11014;</a>",
+    "top-of-page-icon": "<a href=#help-page>&#11014;</a>",
     "contents": "<h2 id='logging-in'> Logging in</h2>When you first access DataGateway, you will be presented with a login page.<br><img width=\"270\" height=\"210\" src='/res/images/login.png'><br>You can login by entering your username and password provided by the <a href='http://www.diamond.ac.uk/Users/'>Diamond User Office</a>. Alternatively, to view only public data, select <strong>Anonymous</strong> from the <strong>Authentication Type</strong> drop down menu and click login.<br><br>Once you've successfully logged in, you will see a page with three tabs.<br><img width=\"299\" height=\"70\" src='/res/images/tabs.png'><h2 id='my-data'> My Data</h2>The <a href='#'>My Data</a> tab gives you quick access to all your visits and is presented in a grid.<br><img width=\"1001\" height=\"533\" src='/res/images/my-data-grid.png'><br><strong>Meta Data</strong><br>If you click on a row (make sure it is not a hyperlink), tabs will appear on the bottom half of the page. Each tab gives you more information about the visit.<h2 id='browse'> Browse</h2>The <a href='#'>Browse</a> tab allows you to browse your data and any public data.<br><br>The grid works the same as in the My Data tab. You can sort and filter as well as drill drown the data hierarchy using the hyperlinks on each row. You can use the breadcrumb to go up the hierarchy. The breadcrumb is a useful reference to tell you where you are in the data hierarchy.<br><img width=\"701\" height=\"63\" src='/res/images/breadcrumb.png'><br>If the first column of the grid is a tick box, you can click the box to add the item to your cart. Please note if you select a dataset, all datafiles belonging to that dataset will be selected. It is not possible for example to unselect one datafile if the parent visit is already selected. Similar to My Data, clicking on a row (not hyperlink) will display its meta data information in the panel at the bottom of the page.<h2 id='search'> Search</h2>The search tabs contains an interface the allows you search across all the visits, datasets and datafiles.<h2 id='cart'> The Cart</h2>On the very first column of each row on a grid (at the dataset or datafile level), you will see tick boxes.<br><img width=\"509\" height=\"95\" src='/res/images/tickbox.png'><br>Clicking this box will add or remove the selected visit to your cart. Multiple items can be added using the 'Shift' key.<br><br>You can use the Cart items counter on the top right corner to check if an item was added or removed.<br><img width=\"86\" height=\"40\" src='/res/images/cart-button.png'><br>Clicking on the above will open up the cart window:<br><img width=\"959\" height=\"464\" src='/res/images/cart.png'><br>Here you can remove already added items or request download of the items in the cart by clicking the <strong>Download Cart</strong> button. When the button is clicked, you will be presented with a window with several options.<br><img width=\"957\" height=\"451\" src='/res/images/cart-download.png'><br>The <strong>Download Name</strong> is a name that identifies your particular download. It is used as the filename when your download becomes ready.<br><br>The <strong>Access Method</strong> selection option determines whether you would like to download your files or whether you want them restored to another location.<br><br>You can optionally enter your email address. When your download is available, an email will be sent notifying you that your download is available.<br>Clicking the <strong>OK</strong> button on the window will submit your download request to be processed. You should see a <strong>Cart successfully submitted</strong> notification popup on the right corner. The request will be added inside the downloads window.<h2 id='download'> Download</h2>Clicking on the above will open up the downloads window:<br><img width=\"267\" height=\"69\" src='/res/images/downloads-button.png'><br>The Downloads window is a grid that list all your download requests.<br><img width=\"954\" height=\"448\" src='/res/images/downloads.png'><br>The <strong>Status</strong> column gives you the current status of your download. Possible values are <strong>Restoring from Tape</strong> and <strong>Available</strong>. The <strong>Download</strong> button is disabled when the status is restoring. Once available, you can click the download button to download the file via the browser if <strong>Https</strong> transport type was used for that request.<br><br>Please note that download pausing and resuming is not supported. Multi-part download managers are also not supported.<br><br>For downloads using Globus as the transport type, when the status is complete, you can login to <a href='https://www.globus.org/SignIn'>Globus Online</a> and initiate file transfer to your endpoint."
   },
   "admin": {

src/helpPage/__snapshots__/helpPage.component.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`Help page component should back to top elements next to each header 1`]
 <DocumentFragment>
   <div
     class="css-18rbhl5"
+    id="help-page"
   >
     <h3
       class="MuiTypography-root MuiTypography-h3 css-nxx1w0-MuiTypography-root"
@@ -134,6 +135,7 @@ exports[`Help page component should render correctly 1`] = `
 <DocumentFragment>
   <div
     class="css-18rbhl5"
+    id="help-page"
   >
     <h3
       class="MuiTypography-root MuiTypography-h3 css-nxx1w0-MuiTypography-root"

src/helpPage/helpPage.component.tsx

@@ -117,7 +117,7 @@ const HelpPage = (props: CombinedHelpPageProps): React.ReactElement => {
   useAnchor();
 
   return (
-    <RootDiv>
+    <RootDiv id="help-page">
       <Typography
         variant="h3"
         sx={{ fontWeight: 'bold', color: 'secondary.main' }}