From 906afdfd074db87142410e41cf11a17533c2a5e9 Mon Sep 17 00:00:00 2001 From: mmeigs Date: Wed, 31 May 2023 09:18:40 -0400 Subject: [PATCH] DOP-3733: add warning toast on fetch error (#823) --- package-lock.json | 182 +++++++++++++++++- package.json | 1 + .../OpenAPIChangelog/OpenAPIChangelog.js | 18 +- .../OpenAPIChangelog/data/mockData.js | 35 ---- .../OpenAPIChangelog/utils/useFetchDiff.js | 6 +- 5 files changed, 197 insertions(+), 45 deletions(-) delete mode 100644 src/components/OpenAPIChangelog/data/mockData.js diff --git a/package-lock.json b/package-lock.json index 7f77fcd4e..c8b0d6a70 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,6 +38,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", @@ -3924,10 +3925,9 @@ } }, "node_modules/@leafygreen-ui/icon": { - "version": "11.13.1", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/icon/-/icon-11.13.1.tgz", - "integrity": "sha512-yxxSMzq99W8TYjH2PEKcqa6KuMyIk8tKm1CwZdEexIYC44m81f/HjZrSIPq5CEogHFEFns1wHp6dOPHIYsC23Q==", - "license": "Apache-2.0", + "version": "11.16.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/icon/-/icon-11.16.0.tgz", + "integrity": "sha512-sxEeFx65xA3ZUFmlcmPLf9tVqblAbcyISPUtsloVMd7DSTDbLaz6+4ujXwukcrMbFGwJGUY+y1Mkmlg5EPAnHg==", "dependencies": { "@leafygreen-ui/emotion": "^4.0.4", "lodash": "^4.17.21" @@ -4440,6 +4440,95 @@ "lodash": "^4.17.21" } }, + "node_modules/@leafygreen-ui/toast": { + "version": "6.1.4", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/toast/-/toast-6.1.4.tgz", + "integrity": "sha512-v9FN8N10VJV2/c7g+XUtT3cfuCXZ9AGr8ollkqIaB66GAlTKD0It2U7BjheAZbxxoauxrD7ZG1WWsPa03s5BHg==", + "dependencies": { + "@leafygreen-ui/emotion": "^4.0.4", + "@leafygreen-ui/hooks": "^7.7.3", + "@leafygreen-ui/icon": "^11.15.0", + "@leafygreen-ui/icon-button": "^15.0.10", + "@leafygreen-ui/lib": "^10.3.3", + "@leafygreen-ui/palette": "^4.0.4", + "@leafygreen-ui/portal": "^4.1.2", + "@leafygreen-ui/tokens": "^2.1.0", + "@leafygreen-ui/typography": "^16.4.0", + "lodash": "^4.17.21", + "polished": "^4.2.2", + "react-transition-group": "^4.4.1" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^3.1.2" + } + }, + "node_modules/@leafygreen-ui/toast/node_modules/@leafygreen-ui/hooks": { + "version": "7.7.3", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-7.7.3.tgz", + "integrity": "sha512-giAHwLE9ZelQemNHZCZRf5ccBG95Fvehs0Pf6EHLP1Xhpofkqbws4HIKD8OylnHxP6otP1Ciq/rHc2XJ8I0dYQ==", + "dependencies": { + "lodash": "^4.17.21" + } + }, + "node_modules/@leafygreen-ui/toast/node_modules/@leafygreen-ui/icon-button": { + "version": "15.0.10", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/icon-button/-/icon-button-15.0.10.tgz", + "integrity": "sha512-GbMxbPLEIUVOSmzJkVJrpQAfvrKjTgjkM9TSkL06sJ0f7ghcIO6mOpoonML6BLFqOTFXuyUZ/3C0jQQDvO+Glw==", + "dependencies": { + "@leafygreen-ui/a11y": "^1.4.2", + "@leafygreen-ui/box": "^3.1.3", + "@leafygreen-ui/emotion": "^4.0.4", + "@leafygreen-ui/icon": "^11.13.1", + "@leafygreen-ui/lib": "^10.3.3", + "@leafygreen-ui/palette": "^4.0.4", + "@leafygreen-ui/tokens": "^2.0.3" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^3.1.2" + } + }, + "node_modules/@leafygreen-ui/toast/node_modules/@leafygreen-ui/lib": { + "version": "10.3.3", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-10.3.3.tgz", + "integrity": "sha512-n+L4u9TnwXgZlzGniEJ4QdKzeXlFU54AgTjb6a2k4nHLBL6eQgRwrHCL4Dviv6ARFHH0tfLWMqBguMOY33Cw2w==", + "dependencies": { + "@storybook/csf": "^0.0.2-next.10", + "lodash": "^4.17.21", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "^17.0.0" + } + }, + "node_modules/@leafygreen-ui/toast/node_modules/@leafygreen-ui/palette": { + "version": "4.0.4", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/palette/-/palette-4.0.4.tgz", + "integrity": "sha512-nuZy2RtKHAGpIKrDduqC8P8PvajJRT1hQURoisYMiB32NmEEHGEhtHw4MlS+Kv92HFA0jxgMdZUHKTXq83BhjA==" + }, + "node_modules/@leafygreen-ui/toast/node_modules/@leafygreen-ui/tokens": { + "version": "2.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tokens/-/tokens-2.1.0.tgz", + "integrity": "sha512-sn+vveqrWYq0ubKuo5i1q8DS8IVIyApxyjwR0j4QoxW0w1ina9DOgK5KG1XIptw/i1kGQEMCw/5rOfqQWLv3Kw==", + "dependencies": { + "@leafygreen-ui/palette": "^4.0.4" + } + }, + "node_modules/@leafygreen-ui/toast/node_modules/@leafygreen-ui/typography": { + "version": "16.4.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-16.4.0.tgz", + "integrity": "sha512-V6SqmoUwPuib62dFcQnsKn8mi9tOlTQKFy/YC/+IwPPhizG+Ztuqrvh507rUiWDqZkuJXH+xx5gyY3Te2iyfPw==", + "dependencies": { + "@leafygreen-ui/emotion": "^4.0.4", + "@leafygreen-ui/icon": "^11.14.0", + "@leafygreen-ui/lib": "^10.3.3", + "@leafygreen-ui/palette": "^4.0.4", + "@leafygreen-ui/polymorphic": "^1.3.1", + "@leafygreen-ui/tokens": "^2.1.0" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^3.1.2" + } + }, "node_modules/@leafygreen-ui/tokens": { "version": "1.4.1", "license": "Apache-2.0", @@ -25714,9 +25803,9 @@ } }, "@leafygreen-ui/icon": { - "version": "11.13.1", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/icon/-/icon-11.13.1.tgz", - "integrity": "sha512-yxxSMzq99W8TYjH2PEKcqa6KuMyIk8tKm1CwZdEexIYC44m81f/HjZrSIPq5CEogHFEFns1wHp6dOPHIYsC23Q==", + "version": "11.16.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/icon/-/icon-11.16.0.tgz", + "integrity": "sha512-sxEeFx65xA3ZUFmlcmPLf9tVqblAbcyISPUtsloVMd7DSTDbLaz6+4ujXwukcrMbFGwJGUY+y1Mkmlg5EPAnHg==", "requires": { "@leafygreen-ui/emotion": "^4.0.4", "lodash": "^4.17.21" @@ -26147,6 +26236,85 @@ } } }, + "@leafygreen-ui/toast": { + "version": "6.1.4", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/toast/-/toast-6.1.4.tgz", + "integrity": "sha512-v9FN8N10VJV2/c7g+XUtT3cfuCXZ9AGr8ollkqIaB66GAlTKD0It2U7BjheAZbxxoauxrD7ZG1WWsPa03s5BHg==", + "requires": { + "@leafygreen-ui/emotion": "^4.0.4", + "@leafygreen-ui/hooks": "^7.7.3", + "@leafygreen-ui/icon": "^11.15.0", + "@leafygreen-ui/icon-button": "^15.0.10", + "@leafygreen-ui/lib": "^10.3.3", + "@leafygreen-ui/palette": "^4.0.4", + "@leafygreen-ui/portal": "^4.1.2", + "@leafygreen-ui/tokens": "^2.1.0", + "@leafygreen-ui/typography": "^16.4.0", + "lodash": "^4.17.21", + "polished": "^4.2.2", + "react-transition-group": "^4.4.1" + }, + "dependencies": { + "@leafygreen-ui/hooks": { + "version": "7.7.3", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-7.7.3.tgz", + "integrity": "sha512-giAHwLE9ZelQemNHZCZRf5ccBG95Fvehs0Pf6EHLP1Xhpofkqbws4HIKD8OylnHxP6otP1Ciq/rHc2XJ8I0dYQ==", + "requires": { + "lodash": "^4.17.21" + } + }, + "@leafygreen-ui/icon-button": { + "version": "15.0.10", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/icon-button/-/icon-button-15.0.10.tgz", + "integrity": "sha512-GbMxbPLEIUVOSmzJkVJrpQAfvrKjTgjkM9TSkL06sJ0f7ghcIO6mOpoonML6BLFqOTFXuyUZ/3C0jQQDvO+Glw==", + "requires": { + "@leafygreen-ui/a11y": "^1.4.2", + "@leafygreen-ui/box": "^3.1.3", + "@leafygreen-ui/emotion": "^4.0.4", + "@leafygreen-ui/icon": "^11.13.1", + "@leafygreen-ui/lib": "^10.3.3", + "@leafygreen-ui/palette": "^4.0.4", + "@leafygreen-ui/tokens": "^2.0.3" + } + }, + "@leafygreen-ui/lib": { + "version": "10.3.3", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-10.3.3.tgz", + "integrity": "sha512-n+L4u9TnwXgZlzGniEJ4QdKzeXlFU54AgTjb6a2k4nHLBL6eQgRwrHCL4Dviv6ARFHH0tfLWMqBguMOY33Cw2w==", + "requires": { + "@storybook/csf": "^0.0.2-next.10", + "lodash": "^4.17.21", + "prop-types": "^15.7.2" + } + }, + "@leafygreen-ui/palette": { + "version": "4.0.4", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/palette/-/palette-4.0.4.tgz", + "integrity": "sha512-nuZy2RtKHAGpIKrDduqC8P8PvajJRT1hQURoisYMiB32NmEEHGEhtHw4MlS+Kv92HFA0jxgMdZUHKTXq83BhjA==" + }, + "@leafygreen-ui/tokens": { + "version": "2.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tokens/-/tokens-2.1.0.tgz", + "integrity": "sha512-sn+vveqrWYq0ubKuo5i1q8DS8IVIyApxyjwR0j4QoxW0w1ina9DOgK5KG1XIptw/i1kGQEMCw/5rOfqQWLv3Kw==", + "requires": { + "@leafygreen-ui/palette": "^4.0.4" + } + }, + "@leafygreen-ui/typography": { + "version": "16.4.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-16.4.0.tgz", + "integrity": "sha512-V6SqmoUwPuib62dFcQnsKn8mi9tOlTQKFy/YC/+IwPPhizG+Ztuqrvh507rUiWDqZkuJXH+xx5gyY3Te2iyfPw==", + "requires": { + "@leafygreen-ui/emotion": "^4.0.4", + "@leafygreen-ui/icon": "^11.14.0", + "@leafygreen-ui/lib": "^10.3.3", + "@leafygreen-ui/palette": "^4.0.4", + "@leafygreen-ui/polymorphic": "^1.3.1", + "@leafygreen-ui/tokens": "^2.1.0" + } + } + } + }, "@leafygreen-ui/tokens": { "version": "1.4.1", "requires": { diff --git a/package.json b/package.json index 5cbb60892..41b1a8545 100644 --- a/package.json +++ b/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", diff --git a/src/components/OpenAPIChangelog/OpenAPIChangelog.js b/src/components/OpenAPIChangelog/OpenAPIChangelog.js index a6cbc6419..45004709d 100644 --- a/src/components/OpenAPIChangelog/OpenAPIChangelog.js +++ b/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 = () => { ))} )} + + setToastOpen(false)} + /> + ); }; diff --git a/src/components/OpenAPIChangelog/data/mockData.js b/src/components/OpenAPIChangelog/data/mockData.js deleted file mode 100644 index 6a6115e39..000000000 --- a/src/components/OpenAPIChangelog/data/mockData.js +++ /dev/null @@ -1,35 +0,0 @@ -export const mockDiff = [ - { - path: '/api/atlas/v2/federationSettings/{federationSettingsId}/connectedOrgConfigs', - httpMethod: 'GET', - operationId: 'listConnectedOrgConfigs', - tag: 'Federated Authentication', - changeType: 'update', - changes: [ - { - change: "removed the non-success response with the status '400'.", - changeCode: 'response-non-success-status-removed', - backwardCompatible: false, - }, - { - change: "added the new optional 'query' request parameter 'envelope'.", - changeCode: 'new-optional-request-parameter', - backwardCompatible: true, - }, - ], - }, - { - path: '/api/atlas/v2/groups/{groupId}/accessList', - httpMethod: 'POST', - operationId: 'createProjectIpAccessList', - tag: 'Project IP Access List', - changeType: 'removed', - changes: [ - { - change: "removed the required property 'name' from the response with the '200' status.", - changeCode: 'response-required-property-removed', - backwardCompatible: false, - }, - ], - }, -]; diff --git a/src/components/OpenAPIChangelog/utils/useFetchDiff.js b/src/components/OpenAPIChangelog/utils/useFetchDiff.js index 95fb41e12..3f6d2478d 100644 --- a/src/components/OpenAPIChangelog/utils/useFetchDiff.js +++ b/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]; };