DOP-3733: add warning toast on fetch error (#823)

package.json

@@ -83,6 +83,7 @@
     "@leafygreen-ui/tabs": "^8.0.0",
     "@leafygreen-ui/text-area": "^6.1.0",
     "@leafygreen-ui/text-input": "^10.1.0",
+    "@leafygreen-ui/toast": "^6.1.4",
     "@leafygreen-ui/tooltip": "^7.1.0",
     "@leafygreen-ui/typography": "^13.0.0",
     "@loadable/component": "^5.14.1",

src/components/OpenAPIChangelog/OpenAPIChangelog.js

@@ -1,9 +1,11 @@
 import { useEffect, useMemo, useState } from 'react';
 import Skeleton from 'react-loading-skeleton';
+import { css } from '@leafygreen-ui/emotion';
 import styled from '@emotion/styled';
 import { palette } from '@leafygreen-ui/palette';
 import { Body, H2 } from '@leafygreen-ui/typography';
 import Button from '@leafygreen-ui/button';
+import { Toast, ToastProvider, Variant } from '@leafygreen-ui/toast';
 import { theme } from '../../theme/docsTheme';
 import useChangelogData from '../../utils/use-changelog-data';
 import FiltersPanel from './components/FiltersPanel';
@@ -76,8 +78,9 @@ const OpenAPIChangelog = () => {
   const [resourceVersionOne, setResourceVersionOne] = useState(resourceVersions[0]);
   const [resourceVersionTwo, setResourceVersionTwo] = useState();
   const [isLoading, setIsLoading] = useState(false);
+  const [toastOpen, setToastOpen] = useState(false);
 
-  const [diff] = useFetchDiff(resourceVersionOne, resourceVersionTwo, setIsLoading);
+  const [diff] = useFetchDiff(resourceVersionOne, resourceVersionTwo, setIsLoading, setToastOpen);
   const [diffResourcesList, setDiffResourcesList] = useState(getDiffResourcesList(diff));
 
   const [filteredDiff, setFilteredDiff] = useState(diff);
@@ -166,6 +169,19 @@ const OpenAPIChangelog = () => {
           ))}
         </SkeletonWrapper>
       )}
+      <ToastProvider
+        portalClassName={css`
+          z-index: 3;
+        `}
+      >
+        <Toast
+          title="We've encountered an error fetching this data"
+          description="Please try again at a later time."
+          variant={Variant.Warning}
+          open={toastOpen}
+          onClose={() => setToastOpen(false)}
+        />
+      </ToastProvider>
     </ChangelogPage>
   );
 };

src/components/OpenAPIChangelog/utils/useFetchDiff.js

@@ -3,7 +3,7 @@ import { fetchOADiff } from '../../../utils/realm';
 import useChangelogData from '../../../utils/use-changelog-data';
 import { getDiffRequestFormat } from './getDiffRequestFormat';
 
-export const useFetchDiff = (resourceVersionOne, resourceVersionTwo, setIsLoading) => {
+export const useFetchDiff = (resourceVersionOne, resourceVersionTwo, setIsLoading, setToastOpen) => {
   const { index = {}, mostRecentDiff = {} } = useChangelogData();
   const [diff, setDiff] = useState([]);
 
@@ -26,9 +26,11 @@ export const useFetchDiff = (resourceVersionOne, resourceVersionTwo, setIsLoadin
         .catch((err) => {
           console.error(err);
           setIsLoading(false);
+          setToastOpen(true);
+          setTimeout(() => setToastOpen(false), 5000);
         });
     }
-  }, [resourceVersionOne, resourceVersionTwo, index, setIsLoading, mostRecentDiff]);
+  }, [resourceVersionOne, resourceVersionTwo, index, mostRecentDiff, setIsLoading, setToastOpen]);
 
   return [diff, setDiff];
 };