From 59b08776505d4bd852b4ec17a89c88a1dd931a22 Mon Sep 17 00:00:00 2001 From: Mauricio Date: Mon, 19 Jul 2021 13:51:30 -0400 Subject: [PATCH 1/6] Added spinners to dashboard --- .../__snapshots__/spinner.test.js.snap | 30 ++++++++++++++ .../shared/components/dashboard.jsx | 12 +++++- .../shared/components/dashboard.scss | 7 ++++ .../shared/components/layouts/default.scss | 14 +++++++ .../shared/components/spinner.jsx | 30 ++++++++++++++ .../shared/components/spinner.scss | 41 +++++++++++++++++++ .../shared/components/spinner.test.js | 16 ++++++++ yarn.lock | 5 +++ 8 files changed, 154 insertions(+), 1 deletion(-) create mode 100644 packages/app/obojobo-repository/shared/components/__snapshots__/spinner.test.js.snap create mode 100644 packages/app/obojobo-repository/shared/components/spinner.jsx create mode 100644 packages/app/obojobo-repository/shared/components/spinner.scss create mode 100644 packages/app/obojobo-repository/shared/components/spinner.test.js diff --git a/packages/app/obojobo-repository/shared/components/__snapshots__/spinner.test.js.snap b/packages/app/obojobo-repository/shared/components/__snapshots__/spinner.test.js.snap new file mode 100644 index 0000000000..5f988a34e6 --- /dev/null +++ b/packages/app/obojobo-repository/shared/components/__snapshots__/spinner.test.js.snap @@ -0,0 +1,30 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Spinner Spinner component 1`] = ` +
+
+ + + +
+
+`; diff --git a/packages/app/obojobo-repository/shared/components/dashboard.jsx b/packages/app/obojobo-repository/shared/components/dashboard.jsx index 7a0b555398..49c68f1d50 100644 --- a/packages/app/obojobo-repository/shared/components/dashboard.jsx +++ b/packages/app/obojobo-repository/shared/components/dashboard.jsx @@ -14,6 +14,7 @@ const MultiButton = require('./multi-button') const Search = require('./search') const ReactModal = require('react-modal') const AssessmentScoreDataDialog = require('./assessment-score-data-dialog') +const Spinner = require('./spinner') const renderOptionsDialog = props => ( { + setIsLoading(true) + props.createNewModule(useTutorial).then(data => { + setIsLoading(false) data.payload.value.sort(getSortMethod('newest')) setNewModuleId(data.payload.value[0].draftId) }) @@ -208,6 +213,10 @@ function Dashboard(props) { } }, [onKeyUp]) + let itemCollectionMultiWrapperClassName = + 'repository--item-list--collection--item--multi-wrapper ' + itemCollectionMultiWrapperClassName += isLoading ? 'fade' : '' + return (
-
+ {isLoading && } +
{moduleList.sort(getSortMethod(sortOrder)).map((draft, index) => ( +
+ + + +
+
+ ) +} + +module.exports = Spinner diff --git a/packages/app/obojobo-repository/shared/components/spinner.scss b/packages/app/obojobo-repository/shared/components/spinner.scss new file mode 100644 index 0000000000..da0e283971 --- /dev/null +++ b/packages/app/obojobo-repository/shared/components/spinner.scss @@ -0,0 +1,41 @@ +.obojobo-draft--components--spinner { + position: absolute; + width: 1.5em; + height: 1.5em; + display: block; + left: 0; + right: 0; + margin-top: 10%; + margin-left: auto; + margin-right: auto; + z-index: 999; + + > .spinner { + @keyframes obojobo-draft--components--spinner--rotate { + from { + transform: translate(-50%, -50%) rotate(0deg); + } + + to { + transform: translate(-50%, -50%) rotate(360deg); + } + } + + width: 100%; + height: 100%; + display: inline-block; + position: absolute; + left: 50%; + top: 50%; + animation: obojobo-draft--components--spinner--rotate 1.5s linear infinite; + + > svg { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + background: none; + } + } +} diff --git a/packages/app/obojobo-repository/shared/components/spinner.test.js b/packages/app/obojobo-repository/shared/components/spinner.test.js new file mode 100644 index 0000000000..4c3e1f4346 --- /dev/null +++ b/packages/app/obojobo-repository/shared/components/spinner.test.js @@ -0,0 +1,16 @@ +import React from 'react' +import Spinner from './spinner' +import { create, act } from 'react-test-renderer' + +describe('Spinner', () => { + test('Spinner component', async () => { + let component + await act(async () => { + component = create() + }) + + const tree = component.toJSON() + + expect(tree).toMatchSnapshot() + }) +}) diff --git a/yarn.lock b/yarn.lock index f5b9b1ba43..4fa6d8bd51 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14282,6 +14282,11 @@ url@^0.11.0: punycode "1.3.2" querystring "0.2.0" +use-debounce@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-7.0.0.tgz#00a67d23d4fe09905e11145a99278da06c01c880" + integrity sha512-4fvxEEs7ztdNMh+c497HAgysdq2+Ascem6EaDANGlCIap1JzqfL03Xw8xkYc2lShfXm4uO6PA6V5zcXN7gJdFA== + use@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f" From 767fbdbf90a3b8a00e3de13de4b9a533886a9f98 Mon Sep 17 00:00:00 2001 From: Mauricio Date: Thu, 22 Jul 2021 09:11:26 -0400 Subject: [PATCH 2/6] Added spinner for single and bulk delete --- .../app/obojobo-repository/shared/components/dashboard.jsx | 3 ++- .../app/obojobo-repository/shared/components/dashboard.test.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/app/obojobo-repository/shared/components/dashboard.jsx b/packages/app/obojobo-repository/shared/components/dashboard.jsx index 49c68f1d50..7e0f34e0b5 100644 --- a/packages/app/obojobo-repository/shared/components/dashboard.jsx +++ b/packages/app/obojobo-repository/shared/components/dashboard.jsx @@ -181,12 +181,13 @@ function Dashboard(props) { } const deleteModules = draftIds => { + setIsLoading(true) // eslint-disable-next-line no-alert, no-undef const response = prompt( `Are you sure you want to DELETE these ${draftIds.length} selected modules? Type 'DELETE' to confirm.` ) if (response !== 'DELETE') return - props.bulkDeleteModules(draftIds) + props.bulkDeleteModules(draftIds).then(() => setIsLoading(false)) } // Set a cookie when sortOrder changes on the client diff --git a/packages/app/obojobo-repository/shared/components/dashboard.test.js b/packages/app/obojobo-repository/shared/components/dashboard.test.js index 28f048e38d..2e434b6759 100644 --- a/packages/app/obojobo-repository/shared/components/dashboard.test.js +++ b/packages/app/obojobo-repository/shared/components/dashboard.test.js @@ -407,7 +407,7 @@ describe('Dashboard', () => { }) test('"Delete All" button calls functions appropriately', async () => { - dashboardProps.bulkDeleteModules = jest.fn() + dashboardProps.bulkDeleteModules = jest.fn(() => Promise.resolve()) dashboardProps.selectedModules = ['mockId', 'mockId2'] dashboardProps.multiSelectMode = true const reusableComponent = From e76b12c3fa48777ab80e09a09f8d70f3d0de182f Mon Sep 17 00:00:00 2001 From: Mauricio Date: Thu, 22 Jul 2021 10:18:03 -0400 Subject: [PATCH 3/6] Added spinner when a module is deleted through the module-options-dialog --- .../shared/components/dashboard.jsx | 8 +++++++- .../shared/components/module-options-dialog.jsx | 13 ++++++++++--- .../shared/components/module-options-dialog.test.js | 4 +++- .../shared/components/spinner.scss | 2 +- 4 files changed, 21 insertions(+), 6 deletions(-) diff --git a/packages/app/obojobo-repository/shared/components/dashboard.jsx b/packages/app/obojobo-repository/shared/components/dashboard.jsx index 7e0f34e0b5..733c22bbaa 100644 --- a/packages/app/obojobo-repository/shared/components/dashboard.jsx +++ b/packages/app/obojobo-repository/shared/components/dashboard.jsx @@ -25,6 +25,8 @@ const renderOptionsDialog = props => ( onClose={props.closeModal} showVersionHistory={props.showVersionHistory} showAssessmentScoreData={props.showAssessmentScoreData} + startLoadingAnimation={props.startLoadingAnimation} + stopLoadingAnimation={props.stopLoadingAnimation} /> ) @@ -152,6 +154,10 @@ function Dashboard(props) { } } + const modalProps = Object.assign({}, props) + modalProps.startLoadingAnimation = () => setIsLoading(true) + modalProps.stopLoadingAnimation = () => setIsLoading(false) + const handleCreateNewModule = useTutorial => { setIsLoading(true) @@ -293,7 +299,7 @@ function Dashboard(props) {
- {props.dialog ? renderModalDialog(props) : null} + {props.dialog ? renderModalDialog(modalProps) : null} ) } diff --git a/packages/app/obojobo-repository/shared/components/module-options-dialog.jsx b/packages/app/obojobo-repository/shared/components/module-options-dialog.jsx index c3c0928cfb..abb7512659 100644 --- a/packages/app/obojobo-repository/shared/components/module-options-dialog.jsx +++ b/packages/app/obojobo-repository/shared/components/module-options-dialog.jsx @@ -9,10 +9,11 @@ const { downloadDocument } = require('obojobo-document-engine/src/scripts/common/util/download-document') -const deleteModule = (title, draftId, deleteFn) => { +const deleteModule = (title, draftId, deleteFn, startLoadingAnimationFn, stopLoadingAnimationFn) => { const response = confirm(`Delete "${title}" id: ${draftId} ?`) //eslint-disable-line no-alert, no-undef if (!response) return - deleteFn(draftId) + startLoadingAnimationFn() + deleteFn(draftId).then(stopLoadingAnimationFn) } const ModuleOptionsDialog = props => ( @@ -94,7 +95,13 @@ const ModuleOptionsDialog = props => ( id="moduleOptionsDialog-deleteButton" className="dangerous-button delete-button" onClick={() => { - deleteModule(props.title, props.draftId, props.deleteModule) + deleteModule( + props.title, + props.draftId, + props.deleteModule, + props.startLoadingAnimation, + props.stopLoadingAnimation + ) }} > Delete diff --git a/packages/app/obojobo-repository/shared/components/module-options-dialog.test.js b/packages/app/obojobo-repository/shared/components/module-options-dialog.test.js index 8d14cd95fb..1e859b3920 100644 --- a/packages/app/obojobo-repository/shared/components/module-options-dialog.test.js +++ b/packages/app/obojobo-repository/shared/components/module-options-dialog.test.js @@ -111,7 +111,9 @@ describe('ModuleOptionsDialog', () => { }) test('"Delete" button brings up confirmation dialog, confirmed', () => { - defaultProps.deleteModule = jest.fn() + defaultProps.deleteModule = jest.fn(() => Promise.resolve()) + defaultProps.startLoadingAnimation = jest.fn() + defaultProps.stopLoadingAnimation = jest.fn() const component = create() window.confirm = jest.fn() diff --git a/packages/app/obojobo-repository/shared/components/spinner.scss b/packages/app/obojobo-repository/shared/components/spinner.scss index da0e283971..0a59df6b8e 100644 --- a/packages/app/obojobo-repository/shared/components/spinner.scss +++ b/packages/app/obojobo-repository/shared/components/spinner.scss @@ -5,7 +5,7 @@ display: block; left: 0; right: 0; - margin-top: 10%; + top: 15%; margin-left: auto; margin-right: auto; z-index: 999; From 52e408d07825f9fbbb2cf42dd3f19c93fb749e5e Mon Sep 17 00:00:00 2001 From: Mauricio Date: Thu, 22 Jul 2021 10:30:35 -0400 Subject: [PATCH 4/6] Ran prettier on all files --- .../shared/components/module-options-dialog.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/app/obojobo-repository/shared/components/module-options-dialog.jsx b/packages/app/obojobo-repository/shared/components/module-options-dialog.jsx index abb7512659..0af6f2b1bb 100644 --- a/packages/app/obojobo-repository/shared/components/module-options-dialog.jsx +++ b/packages/app/obojobo-repository/shared/components/module-options-dialog.jsx @@ -9,7 +9,13 @@ const { downloadDocument } = require('obojobo-document-engine/src/scripts/common/util/download-document') -const deleteModule = (title, draftId, deleteFn, startLoadingAnimationFn, stopLoadingAnimationFn) => { +const deleteModule = ( + title, + draftId, + deleteFn, + startLoadingAnimationFn, + stopLoadingAnimationFn +) => { const response = confirm(`Delete "${title}" id: ${draftId} ?`) //eslint-disable-line no-alert, no-undef if (!response) return startLoadingAnimationFn() From c69398a82c7d40864e1f801505478a24229308ba Mon Sep 17 00:00:00 2001 From: Mauricio Date: Thu, 22 Jul 2021 11:22:35 -0400 Subject: [PATCH 5/6] Fixed some unit tests to bring coverage up to 100% --- .../shared/components/dashboard.test.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/app/obojobo-repository/shared/components/dashboard.test.js b/packages/app/obojobo-repository/shared/components/dashboard.test.js index 2e434b6759..1204dd8807 100644 --- a/packages/app/obojobo-repository/shared/components/dashboard.test.js +++ b/packages/app/obojobo-repository/shared/components/dashboard.test.js @@ -564,6 +564,8 @@ describe('Dashboard', () => { dashboardProps.showModuleManageCollections = jest.fn() dashboardProps.showModulePermissions = jest.fn() dashboardProps.deleteModule = jest.fn() + dashboardProps.startLoadingAnimation = jest.fn() + dashboardProps.stopLoadingAnimation = jest.fn() dashboardProps.dialog = 'module-more' const component = create() @@ -575,6 +577,12 @@ describe('Dashboard', () => { // draftId for the menu's module would normally be passed here dialogComponent.props.deleteModule('mockDraftId') expectMethodToBeCalledOnceWith(dashboardProps.deleteModule, ['mockDraftId']) + + act(() => { + dialogComponent.props.startLoadingAnimation() + dialogComponent.props.stopLoadingAnimation() + }) + dialogComponent.props.onClose() expectMethodToBeCalledOnceWith(dashboardProps.closeModal) From ed12442dacc15e2524d2bae30501f54e1a0afe2c Mon Sep 17 00:00:00 2001 From: Mauricio Date: Thu, 29 Jul 2021 12:29:14 -0400 Subject: [PATCH 6/6] Removed testing Sass --- .../obojobo-repository/shared/components/dashboard.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/app/obojobo-repository/shared/components/dashboard.scss b/packages/app/obojobo-repository/shared/components/dashboard.scss index d7bb47279b..0f9367e9bf 100644 --- a/packages/app/obojobo-repository/shared/components/dashboard.scss +++ b/packages/app/obojobo-repository/shared/components/dashboard.scss @@ -28,11 +28,4 @@ } } } - - .test { - width: 100px; - height: 100px; - background-color: purple; - color: orange; - } }