EDSC-3762: As a user, I want to download the downloader app if it is not available on my machine

static.config.json

@@ -44,7 +44,10 @@
       "client": "eed-PORTAL-ENV-serverless-client",
       "lambda": "eed-PORTAL-ENV-serverless-lambda"
     },
-    "disableEddDownload": "false"
+    "disableEddDownload": "false",
+    "macOsEDDExecutableSize":130,
+    "windowsEDDExecutableSize":100,
+    "linuxEDDExecutableSize":90
   },
   "environment": {
     "test": {

static/src/js/App.js

@@ -11,6 +11,7 @@ import history from './util/history'
 import { getApplicationConfig, getEnvironmentConfig } from '../../../sharedUtils/config'
 
 import Admin from './routes/Admin/Admin'
+import EarthdataDownload from './routes/EarthdataDownload/EarthdataDownload'
 import ContactInfo from './routes/ContactInfo/ContactInfo'
 import Downloads from './routes/Downloads/Downloads'
 import FooterContainer from './containers/FooterContainer/FooterContainer'
@@ -122,6 +123,12 @@ class App extends Component {
                         </AuthRequiredContainer>
                       )}
                     />
+                    <Route
+                      path={this.portalPaths('/earthdata-download')}
+                      render={() => (
+                        <EarthdataDownload />
+                      )}
+                    />
                     <Route
                       path={this.portalPaths('/preferences')}
                       render={() => (

static/src/js/components/EarthdataDownload/EarthdataDownload.js

@@ -0,0 +1,162 @@
+import React from 'react'
+import { FaDownload } from 'react-icons/fa'
+import { capitalize } from 'lodash'
+import Button from '../Button/Button'
+
+import eddLogo from '../../../assets/images/earthdataDownload-screenshot.png'
+import unavailableImg from '../../../assets/images/image-unavailable.svg'
+import { getOperatingSystem } from '../../util/files/parseUserAgent'
+
+import { getApplicationConfig } from '../../../../../sharedUtils/config'
+
+import './EarthdataDownload.scss'
+
+export const EarthdataDownload = () => {
+  const { userAgent } = navigator
+  let operatingSystem = getOperatingSystem(userAgent)
+  let downloadLink
+
+  let executableSize
+  const windowsDownloadLink = '//github.com/nasa/earthdata-download/releases/latest/download/Earthdata-Download-x64.exe'
+  const macDownloadLink = '//github.com/nasa/earthdata-download/releases/latest/download/Earthdata-Download-x64.dmg'
+  const macSiliconDownloadLink = '//github.com/nasa/earthdata-download/releases/latest/download/Earthdata-Download-arm64.dmg'
+  const linuxDownloadLink = '//github.com/nasa/earthdata-download/releases/latest/download/Earthdata.Download-amd64.deb'
+  const {
+    macOsEDDExecutableSize,
+    windowsEDDExecutableSize,
+    linuxEDDExecutableSize
+  } = getApplicationConfig()
+
+  let isMacOs = false
+  let isLinux = false
+  let isWindows = false
+
+  switch (operatingSystem) {
+    case 'macOs': {
+      // Apple standard is not to capitalize macOs
+      isMacOs = true
+      downloadLink = macDownloadLink
+      executableSize = macOsEDDExecutableSize
+      break
+    }
+    case 'windows': {
+      operatingSystem = capitalize(operatingSystem)
+      isWindows = true
+      downloadLink = windowsDownloadLink
+      executableSize = windowsEDDExecutableSize
+      break
+    }
+    case 'linux': {
+      operatingSystem = capitalize(operatingSystem)
+      isLinux = true
+      downloadLink = linuxDownloadLink
+      executableSize = linuxEDDExecutableSize
+      break
+    }
+    default:
+    {
+      operatingSystem = 'macOs'
+      downloadLink = macDownloadLink
+      isMacOs = true
+      executableSize = macOsEDDExecutableSize
+      break
+    }
+  }
+  const downloaderSize = `${executableSize}mb`
+  const osLinkFileExt = `(.${downloadLink.split('.').pop()})`
+
+  return (
+    <div className="earthdataDownload">
+
+      <div className="earthdataDownload__imageContainer">
+        <img className="earthdataDownload__screenshot" src={eddLogo} alt={unavailableImg} />
+      </div>
+
+      <div className="earthdataDownload__content">
+        <h2 className="earthdataDownload__header-primary">
+          Download your files from Earthdata Search
+          <br />
+          with only one click!
+        </h2>
+        <br />
+        <div className="earthdataDownload__content-container">
+          <h3 className="earthdataDownload__header-secondary">Earthdata Downloader Features</h3>
+          <br />
+          <br />
+          <ul className="earthdataDownload__list-group">
+            <li className="earthdataDownload__list-item">Easily Authenticate with Earthdata login</li>
+            <li className="earthdataDownload__list-item">Manage your downloads and preferences</li>
+            <li className="earthdataDownload__list-item">Works on Mac, Windows, and Linux</li>
+          </ul>
+        </div>
+        <div className="earthdataDownload__install-content">
+          <Button dataTestId="eddDownloadButton" className="earthdataDownload__install-button" type="button" icon={FaDownload} bootstrapVariant="primary" href={downloadLink}>
+            Download for
+            {' '}
+            {operatingSystem}
+          </Button>
+          {' '}
+          <span className="earthdataDownload__downloaderSize">
+            {downloaderSize}
+          </span>
+          {' '}
+          <span className="earthdataDownload__osLinkFileExt">
+            {osLinkFileExt}
+          </span>
+        </div>
+      </div>
+      <div className="earthdataDownload__other-links">
+
+        <div className="other-links__item">
+          Apple silicon?
+          <br />
+          Download for
+          {' '}
+          <a data-testid="earthdataDownload-link-macOsSilicone" download href={macSiliconDownloadLink}>
+            Apple silicon Mac
+          </a>
+          <br />
+        </div>
+        { !isWindows ? (
+          <div className="other-links__item">
+            Windows?
+            <br />
+            Download for
+            {' '}
+            <a data-testid="earthdataDownload-link-windows" download href={windowsDownloadLink}>
+              Windows
+            </a>
+            <br />
+          </div>
+        ) : null}
+        {' '}
+        { !isLinux ? (
+          <div className="other-links__item">
+            Linux?
+            <br />
+            Download for
+            {' '}
+            <a className="eddLinuxLink" data-testid="earthdataDownload-link-linux" download href={linuxDownloadLink}>
+              Linux
+            </a>
+            <br />
+          </div>
+        ) : null}
+        {' '}
+        { !isMacOs ? (
+          <div className="other-links__item">
+            MacOs?
+            <br />
+            Download for
+            {' '}
+            <a className="eddMacOsLink" data-testid="earthdataDownload-link-macosx64" download href={macDownloadLink}>
+              Intel Macs
+            </a>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+export default EarthdataDownload

static/src/js/components/EarthdataDownload/EarthdataDownload.scss

@@ -0,0 +1,94 @@
+.earthdataDownload {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+
+  &__imageContainer{
+    max-width: 100%;
+    max-height: 100%;
+    max-width: 50vw;
+    position: fixed;
+    top: 50%;
+    left: 20%;
+    transform: translate(0, -50%);
+  }
+
+  &__screenshot {
+    height: 500px;
+    width: 500px;
+  }
+
+  &__content {
+    flex: 1;
+    top: 50%;
+    right: 0;
+    width: 50%;
+    padding: 0 20px;
+    max-width: 100%;
+    max-height: 100%;
+    max-width: 50vw;
+    position: fixed;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+
+  &__header-primary {
+    position: absolute;
+    top: 50;
+    left: 0;
+  }
+
+    &__list-group {
+      text-align: left;
+      font-size: larger;
+      margin: 0;
+    }
+
+    &__list-item {
+      text-align: left;
+    }
+
+    &__content-container {
+      position: relative;
+      margin-top: 100px;
+      text-align: left;
+      list-style-position: inside; /* Places the bullets inside the list items */
+      background-color: rgba(204, 204, 204, 0.685);
+      display: inline-block;
+      padding: 15px;
+    }
+
+    &__header-secondary {
+      position: absolute;
+      top: 0;
+      left: 10;
+      margin: 0;
+    }
+
+    &__install_content {
+      bottom: 0;
+      left: 0;
+      position: absolute;
+    }
+
+    &__downloaderSize {
+      font-weight: 400;
+    }
+
+    &__osLinkFileExt {
+      font-weight: 400;
+      color: #6f6e6e;
+      font-style: italic;
+    }
+
+  &__other-links{
+    display: flex;
+    justify-content: space-around;
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    margin-bottom: 250px;
+    width: 50%;
+  }
+}

static/src/js/components/EarthdataDownload/__tests__/EarthdataDownload.test.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import EarthdataDownload from '../EarthdataDownload'
+
+import { getOperatingSystem } from '../../../util/files/parseUserAgent'
+
+const windowsDownloadLink = '//github.com/nasa/earthdata-download/releases/latest/download/Earthdata-Download-x64.exe'
+const macDownloadLink = '//github.com/nasa/earthdata-download/releases/latest/download/Earthdata-Download-x64.dmg'
+const linuxDownloadLink = '//github.com/nasa/earthdata-download/releases/latest/download/Earthdata.Download-amd64.deb'
+
+jest.mock('../../../util/files/parseUserAgent', () => ({
+  getOperatingSystem: jest.fn()
+}))
+
+const setup = () => {
+  render(
+    <EarthdataDownload> </EarthdataDownload>
+  )
+}
+
+describe('EarthdataDownload component', () => {
+  test('Render the download link for windows', () => {
+    getOperatingSystem.mockImplementation(() => 'windows')
+    setup()
+    expect(screen.getByTestId('eddDownloadButton')).toBeInTheDocument()
+    expect(screen.getByTestId('eddDownloadButton')).toHaveAttribute('href', windowsDownloadLink)
+  })
+
+  test('Render the download link for macOs', () => {
+    getOperatingSystem.mockImplementation(() => 'macOs')
+    setup()
+    expect(screen.getByTestId('eddDownloadButton')).toBeInTheDocument()
+    expect(screen.getByTestId('eddDownloadButton')).toHaveAttribute('href', macDownloadLink)
+  })
+
+  test('Render the download link for linux', () => {
+    getOperatingSystem.mockImplementation(() => 'linux')
+    setup()
+    expect(screen.getByTestId('eddDownloadButton')).toBeInTheDocument()
+    expect(screen.getByTestId('eddDownloadButton')).toHaveAttribute('href', linuxDownloadLink)
+  })
+})