Feat/page dropdown api #388

gweiying · 2021-03-23T10:47:54Z

This PR adds the functionality to support:

Move
Delete
Edit settings

For folder/subfolder pages, unlinked pages and resources.

This PR is a continuation of #380, and cleans up the getPage, createPage, updatePage APIs added in #380 to resemble those in #379 for better uniformity.

Background

This PR focuses on the API integrations above, and should be reviewed with #139 on the backend. The visual appearance and UX of the Dropdown modal will be refined in a subsequent PR. There is also some buggy behavior on the Dropdown back button behavior, where clicking this series of buttons (Move To > > [folderName] > > ← Move To ) will lead to Edit Page rather than triggering the previous Move To dropdown menu as expected. This will also be fixed in a subsequent PR. Fixed in
d697a01

As part of this PR, OverviewCard, ComponentSettingsModal and CollectionPagesSection and Resources have been refactored to remove unused functionality and to use ReactQuery.

~~Lastly, the APIs introduced may require some cleanup as there is quite a fair bit of reused variables and flag checks. This will also be done in a subsequent PR.~~ Fixed in 7911b8d

Details

Below, we summarise some key changes to each file.

`ComponentSettingsModal`

This component is now only used for settings on resource pages, so all functionality for collections and third-nav retrieval has been removed. The only API handler that runs here is Save, while the delete API handler is abstracted into CollectionPagesSection. The query call to retrieve the page details is abstracted into CollectionPagesSection so that the page details can be reused for deleting functionality.

Since we plan for the resource creation behavior to match that of page creation behavior, users will be expected to navigate to the category before creating the resource. Hence, the resource category dropdown has also been removed. See below for the new UX:

`PageSettingsModal`

Similar to ComponentSettingsModal, the only API handler that runs here is Save, while the delete API handler is abstracted into CollectionPagesSection. The delete, create, and update APIs from #380 have been updated. The query call to retrieve the page details is abstracted into Folders so that the page details can be reused for deleting functionality.

The UX has been updated to match that of ComponentSettingsModal. See below for the new UX:

`CollectionPagesSection` and `Folders`

The query call to retrieve the page details is added into CollectionPagesSection and Folders. The query fires when the user clicks on the ⋮ Options dropdown for any page. The new delete and move API ReactQuery handlers have been added to CollectionPagesSection and to Folders.

Note: CollectionPagesSection is actually used for all sections (unlinked pages and resources) apart from collections, so we should rename this during cleanup.

`OverviewCard` and `FolderContent`

The delete and the move handlers are abstracted into CollectionPagesSection and Folders respectively, and the logic for accessing Move To folders and subfolders have been added. This logic will be further refined based on designers input.

Changes to `Resources`

Since we plan for the resource creation behavior to match that of page creation behavior, users will be expected to navigate to the category before creating the resource. Hence, the option to create a new file from the Resources folder is removed, and should be replaced by the functionality to create a new resource folder #384. See below for the new UX:

Subsequent work

To highlight the changes that will be accomplished in a separate PR:

Improve visual appearance and UX behavior of the Dropdown modal, waiting on designers' finalised input

For Move To, dropdown should start from location of file e.g. if it is a file in a subfolder, the dropdown should start at that subfolder
Users should not be able to move the file to the same subfolder as the file is currently in, so disabled? vs filtered out?

~~Fix buggy behavior on the Dropdown back button behaviour with Back button (depending on UX flow, may not be necessary, waiting on designers' input)~~ Fixed in d697a01
~~Clean up introduced APIs for duplicated flag checking and redundant variables~~ Fixed in 7911b8d
Fix Resource ComponentSettingsModal to automatically generate file_url when resource is a file

kwajiehao

Left some comments. Additionally, there is another bug related to Move to > subfolder > Move to for unlinked pages. Steps to reproduce:

Go to the Workspace layout
Scroll down to the Unlinked Pages section. Click on the options button for one of the pages and click on Move to
Click on the right caret button to view the selected folder's subfolders
Click on the <- Move to button to go back (this brings you back to the main modal, instead of the modal screen with all the folders)
Clicking on Move to again brings you directly to the subfolders view, instead of the folders view

We don't need to fix this ^ bug in this PR, just wanted to point it out so that we are aware we need to fix this in subsequent PRs

src/components/OverviewCard.jsx

src/api.js

alexanderleegs

Left some comments.

There's a bug involving the page moving modal not closing on blur - if you click Move to, then click anywhere else (even another file's options), the Move to menu persists

Also, when moving pages into subfolders, the page is automatically created as the first item in the collection.yml file.

src/api.js

gweiying · 2021-03-29T14:21:14Z

Left some comments.

There's a bug involving the page moving modal not closing on blur - if you click Move to, then click anywhere else (even another file's options), the Move to menu persists

Also, when moving pages into subfolders, the page is automatically created as the first item in the collection.yml file.

Above was a side effect caused by not using handleBlur.

Left some comments. Additionally, there is another bug related to Move to > subfolder > Move to for unlinked pages. Steps to reproduce:

Go to the Workspace layout

Scroll down to the Unlinked Pages section. Click on the options button for one of the pages and click on Move to

Click on the right caret button to view the selected folder's subfolders

Click on the <- Move to button to go back (this brings you back to the main modal, instead of the modal screen with all the folders)

Clicking on Move to again brings you directly to the subfolders view, instead of the folders view

We don't need to fix this ^ bug in this PR, just wanted to point it out so that we are aware we need to fix this in subsequent PRs

Above was caused by the queryFolderName not being cleared when a user navigates away from the dropdown modal, so on subsequent searches the subfolder view is accessed instead of the folders view. queryFolderName is now being cleared in handleBlur

Both bugs fixed in d697a01

…ctivated

…checking

This commit accomplishes several changes: 1) changes ComponentSettingModal to take pageData as input from CollectionPagesSection and removes the current API call to retrieve page data 2) changes ComponentSettingModal to use useMutation for updating the resource page settings (used for creating new page, renaming a page and changing the url of a page) 3) removes dropdown for selecting page resource category during page resource creation, so that the behavior of creating resources pages will be similar to that of folder pages, where a page can only be created after a user navigates to that location where the new file should be created

This commit refactors CollectionPagesSection with the following key changes: 1) Adding Move To functionality to Unlinked pages and restoring Move To functionality to resources 2) cleaning up variables passed to ComponentSettingsModal since ComponentSettingsModal has been refactored 3) removing unused functionality for retrieving allCategories and improving display of pages prior to completion of loading

…avigates between folders and subfolders

This commit pushes several changes: Firstly, UX of titles and buttons have been improved, including the display of a loading icon while query categories are being retrieved. Secondly, the bug identified earlier where the user would be redirected to the link after returning from the subfolder has been fixed. This means that the user is able to navigate between the subfolder layer and the folders layer, and return to the general dropdown menu if they would like. This fix also fixes the bug behaviors identified by Alex and Jie Hao where dropdown modals are not closed when a user clicks elsewhere on a page, and where queryFolderName is not cleared when a user navigates away from the dropdown modal

alexanderleegs

Left some comments.

Also one small comment - the cursor on page cards turns into a normal one instead of a pointer - we might want to change them to always show the pointer

src/layouts/Folders.jsx

src/components/folders/FolderContent.jsx

kwajiehao

Lgtm

alexanderleegs

lgtm!

gweiying force-pushed the feat/page-dropdown-api branch from a3e933e to 24fe76e Compare March 24, 2021 09:32

gweiying marked this pull request as ready for review March 24, 2021 11:52

This was referenced Mar 25, 2021

Fix/clean up of ComponentSettingsModal and OverviewCard #385

Closed

Refactor/ ResourcePageSettingsModal and OverviewCard to use react query #386

Closed

gweiying force-pushed the feat/page-dropdown-api branch from e921fff to a1896fe Compare March 25, 2021 04:14

kwajiehao suggested changes Mar 25, 2021

View reviewed changes

src/components/OverviewCard.jsx Outdated Show resolved Hide resolved

src/api.js Outdated Show resolved Hide resolved

kwajiehao mentioned this pull request Mar 26, 2021

Fix/fine-tune react-query settings #389

Merged

alexanderleegs requested changes Mar 26, 2021

View reviewed changes

src/api.js Outdated Show resolved Hide resolved

src/api.js Outdated Show resolved Hide resolved

gweiying added 21 commits March 29, 2021 22:26

fix: refactor PageSettingsModal to use getEditPageData

7dc2ff1

fix: removes getPage from api.js file

df14b4a

fix: disables Saving PageSettingsModal when no changes

ce87658

feat: creates rename and create API calls

025e319

feat: refactors PageSettingsModals saveHandler to use new API calls

c545021

fix: refactor to query for EditPage details once dropdown toggle is a…

092a5df

…ctivated

fix: modifies updatePageData to return null when successful

b9d66fe

fix: add delete functionality to FolderPages

5d9fbc3

fix: add delete functionality to unlinked pages

12b1cd8

fix: removes SettingsToggle from CollectionPagesSection

0626f9e

fix: refactors ComponentSettingsModal to remove unused page setting code

6d00fee

fix: refactor validation for resourceSettings

81795a1

fix: refactors ComponentSettingsModal to remove type === 'resources' …

3b01279

…checking

fix: fix code bugs and removes unused declarations in PageSettingsModal

6dc0e77

fix: generateResourceFileName to slugify lower

f7cd608

fix: clean up PageSettingsModal

26b0453

feat: adds Move To dropdown functionality to folders

33bdc9a

fix: tidy up Folders

2a3ba94

fix: minor tweak to resourceFileName generation

39ed3de

gweiying added 15 commits March 29, 2021 22:33

fix: rebase typo with missing } in api.js

37793a8

fix: return error for resources

219a0fa

fix: disables handleBlur

382823f

fix: clean up after settled mutations

6710f3e

fix: disables handleBlur

ab285a0

fix: removes unlinked pages from OverviewCard

d033c4b

fix: removes filter for folder dropdown

c1d6f44

fix: simplifying api endpoints

70fa02c

fix: returns null from getCategories when query has not returned

c82e6d0

fix: adds variable to disable blurring, used when fileModalDropdown n…

3809add

…avigates between folders and subfolders

fix: changes opacity of dropdownItemChildButton background to 0%

4967fd3

fix: creates componentTitleLink

4e53e09

fix: remove encoding for redirectUrl

fc10ea9

fix: removes unused variables

d2fa8d0

gweiying force-pushed the feat/page-dropdown-api branch from 7b92c6c to d2fa8d0 Compare March 29, 2021 14:34

gweiying requested review from alexanderleegs and kwajiehao March 30, 2021 01:11

alexanderleegs requested changes Mar 30, 2021

View reviewed changes

src/layouts/Folders.jsx Outdated Show resolved Hide resolved

src/components/folders/FolderContent.jsx Outdated Show resolved Hide resolved

gweiying added 2 commits March 30, 2021 16:24

fix: rebase error with file filtering

5213f6a

fix: change numItems check to check for null

46ee954

kwajiehao approved these changes Mar 31, 2021

View reviewed changes

gweiying requested a review from alexanderleegs March 31, 2021 07:19

alexanderleegs approved these changes Mar 31, 2021

View reviewed changes

gweiying merged commit 8de2372 into staging Mar 31, 2021

gweiying deleted the feat/page-dropdown-api branch March 31, 2021 09:37

gweiying linked an issue Apr 6, 2021 that may be closed by this pull request

Broken Move to functionality for Resource pages #387

Closed

gweiying mentioned this pull request Apr 6, 2021

Broken Move to functionality for Resource pages #387

Closed

gweiying linked an issue Apr 6, 2021 that may be closed by this pull request

Update page-moving behavior #345

Closed

snyk-bot mentioned this pull request Jan 17, 2022

[Snyk] Fix for 2 vulnerabilities #730

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/page dropdown api #388

Feat/page dropdown api #388

gweiying commented Mar 23, 2021 •

edited

Loading

kwajiehao left a comment •

edited

Loading

alexanderleegs left a comment

gweiying commented Mar 29, 2021 •

edited

Loading

alexanderleegs left a comment •

edited

Loading

kwajiehao left a comment

alexanderleegs left a comment

Feat/page dropdown api #388

Feat/page dropdown api #388

Conversation

gweiying commented Mar 23, 2021 • edited Loading

Background

Details

ComponentSettingsModal

PageSettingsModal

CollectionPagesSection and Folders

OverviewCard and FolderContent

Changes to Resources

Subsequent work

kwajiehao left a comment • edited Loading

Choose a reason for hiding this comment

alexanderleegs left a comment

Choose a reason for hiding this comment

gweiying commented Mar 29, 2021 • edited Loading

alexanderleegs left a comment • edited Loading

Choose a reason for hiding this comment

kwajiehao left a comment

Choose a reason for hiding this comment

alexanderleegs left a comment

Choose a reason for hiding this comment

gweiying commented Mar 23, 2021 •

edited

Loading

`ComponentSettingsModal`

`PageSettingsModal`

`CollectionPagesSection` and `Folders`

`OverviewCard` and `FolderContent`

Changes to `Resources`

kwajiehao left a comment •

edited

Loading

gweiying commented Mar 29, 2021 •

edited

Loading

alexanderleegs left a comment •

edited

Loading