Add download link for Glossary (#1727)

* Add download link for Glossary

* Update _glossary.scss

* Increase maximumFileSizeToCacheInBytes

Co-authored-by: SidelineCory24 <55964163+SidelineCory24@users.noreply.github.com>

config/webpack.config.prod.js

@@ -342,6 +342,7 @@ module.exports = {
     // the HTML & assets that are part of the Webpack build.
     new GenerateSW({
       // Config options, if needed.
+      maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
     }),
     // Moment.js is an extremely popular library that bundles large locale files
     // by default due to how Webpack interprets its code. This is a practical

package.json

@@ -115,12 +115,14 @@
     "@babel/runtime-corejs2": "^7.15.3",
     "@epegzz/sass-vars-loader": "^6.1.0",
     "@pmmmwh/react-refresh-webpack-plugin": "pmmmwh/react-refresh-webpack-plugin#main",
+    "@types/axios": "^0.14.0",
     "@types/date-fns": "^2.6.0",
     "@types/jest": "^26.0.24",
     "@types/lodash": "^4.14.172",
     "@types/node": "^16.4.12",
     "@types/react": "^17.0.16",
     "@types/react-dom": "^17.0.9",
+    "@types/react-fontawesome": "^1.6.5",
     "@types/react-responsive": "^8.0.3",
     "@types/react-router-dom": "^5.1.8",
     "@types/shortid": "^0.0.29",

src/Components/Glossary/Glossary.jsx

@@ -8,6 +8,7 @@ import GlossaryListing from './GlossaryListing';
 import Spinner from '../Spinner';
 import BoxShadow from '../BoxShadow';
 import { GLOSSARY_ARRAY } from '../../Constants/PropTypes';
+import GlossaryExport from './GlossaryExport';
 
 const ID = 'glossary-click-container';
 const BYPASS_CLASS = 'bypass-glossary';
@@ -127,6 +128,7 @@ class GlossaryComponent extends Component {
                   changeText={this.changeText}
                   searchTextValue={searchText.value}
                 />
+                <GlossaryExport />
                 <div className="glossary-content">
                   <GlossaryListing glossaryItems={filteredGlossary} />
                 </div>

src/Components/Glossary/GlossaryExport/GlossaryExport.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { AxiosResponse } from 'axios';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFileExcel } from '@fortawesome/free-solid-svg-icons';
+// @ts-ignore
+import InteractiveElement from 'Components/InteractiveElement';
+// @ts-ignore
+import { downloadFromResponse } from 'utilities';
+// @ts-ignore
+import api from '../../../api';
+
+export type Props = {
+};
+
+const GlossaryExport: React.FC<Props> = () => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const onClick = (): void => {
+    if (!isLoading) {
+      setIsLoading(true);
+      api().get('/glossary/export/')
+        .then((res: AxiosResponse) => downloadFromResponse(res, 'TalentMAP-Glossary.csv'))
+        .finally(() => setIsLoading(false));
+    }
+  };
+
+  return (
+    <div className="glossary-export">
+      <InteractiveElement type="span" onClick={onClick} title="Download Glossary as CSV">
+        <FontAwesomeIcon
+          icon={faFileExcel}
+        />
+        Download
+      </InteractiveElement>
+    </div>
+  );
+};
+
+export default GlossaryExport;

src/Components/Glossary/GlossaryExport/index.tsx

@@ -0,0 +1 @@
+export { default } from './GlossaryExport';

src/Components/Glossary/__snapshots__/Glossary.test.jsx.snap

@@ -50,6 +50,7 @@ exports[`GlossaryComponent matches snapshot 1`] = `
           changeText={[Function]}
           searchTextValue=""
         />
+        <GlossaryExport />
         <div
           className="glossary-content"
         >
@@ -161,6 +162,7 @@ exports[`GlossaryComponent matches snapshot when visible is false 1`] = `
           changeText={[Function]}
           searchTextValue=""
         />
+        <GlossaryExport />
         <div
           className="glossary-content"
         >

src/sass/_glossary.scss

@@ -33,7 +33,7 @@
 
   fieldset {
     color: $foreground-color;
-    padding: 0 $padding $padding;
+    padding: 0 $padding;
   }
 
   .glossary {
@@ -80,10 +80,21 @@
   }
 
   .glossary-top,
-  .glossary-fieldset {
+  .glossary-fieldset,
+  .glossary-export {
     background-color: $primary-blue-darkest;
   }
 
+  .glossary-export {
+    color: $primary-alt-lightest;
+    font-size: .8em;
+    padding: $padding / 2 $padding;
+
+    svg {
+      margin-right: .5em;
+    }
+  }
+
   .glossary-content {
     background-color: $primary-blue-darker;
     padding: 1rem $padding;

yarn.lock

@@ -1681,6 +1681,13 @@
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
 
+"@types/axios@^0.14.0":
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/@types/axios/-/axios-0.14.0.tgz#ec2300fbe7d7dddd7eb9d3abf87999964cafce46"
+  integrity sha1-7CMA++fX3d1+udOr+HmZlkyvzkY=
+  dependencies:
+    axios "*"
+
 "@types/babel__core@^7.1.0", "@types/babel__core@^7.1.7":
   version "7.1.7"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.7.tgz#1dacad8840364a57c98d0dd4855c6dd3752c6b89"
@@ -1854,6 +1861,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-fontawesome@^1.6.5":
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/@types/react-fontawesome/-/react-fontawesome-1.6.5.tgz#a5102b086613cf6d6c9ce944e9fb1eee604635b6"
+  integrity sha512-O75ViR81klU7TfVt4TAdEOWzzEf58RM8PVQHUmKsHjhDt/WLMcb+h/k5XxHUv9iYAKI5u81IoMJ20wC+QLe3Dw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-redux@^7.1.16":
   version "7.1.16"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.16.tgz#0fbd04c2500c12105494c83d4a3e45c084e3cb21"
@@ -2707,7 +2721,7 @@ axios-mock-adapter@^1.20.0:
     is-blob "^2.1.0"
     is-buffer "^2.0.5"
 
-axios@0.21.1, axios@^0.21.1:
+axios@*, axios@0.21.1, axios@^0.21.1:
   version "0.21.1"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
   dependencies: