-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merge to Prod - 23 Dec 2020 #287
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* chore: remove unused Pages layout * fix: "Can't perform state update on unmounted component" error Previously, if you tried to navigate away from a layout / component while it was still performing an async operation, we would receive the following error in the console: ``` Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function ``` This is slightly differently-phrased if the component is a class component but the idea is the same. The solution to this is to specify a cleanup function. To execute this, we define an `_isMounted` variable, and only set state updates when this variable is set to true. In our cleanup function, we set this variable back to false so that state updates are not performed on unmounted components. Reference: https://stackoverflow.com/questions/53949393/cant-perform-a-react-state-update-on-an-unmounted-component * refactor: LoadingButton callback This commit refactors the LoadingButton so that it runs the callback in the proper order. Previously, we would attempt to set the button to a loading state, await on the callback function, and then set the button back to its non-loading state. The problem is that the setState functions are not asynchronous so they do not run on the same event loop as the callback. This commit refactors the code so that the code is run more reactively using a useEffect. * fix: memory leak in LoadingButton component Previously, React throws an error complaining about a memory leak whenever we select an image in the EditPage layout. It turns out this is because we attempt to set the LoadingButton component's loading state to false even after the component has unmounted. This is fixed by applying the same fix from a couple commits ago to the LoadingButton component. Co-authored-by: Jie Hao Kwa <[email protected]>
* Fix: allow resource titles to contain numbers * Fix: convert new category names to lowercase on submission * Feat: change permalink to be completely user determined * Fix: update save function to handle file movement between categories
* feat: add Help button in CMS sidebar * fix: add loading text to Sites layout This commit adds a loading text to the Sites layout as a form of feedback to the user. * fix: prevent infinite loading text on Resources layout Currently on the Resources layout, if the api call to retrieve resource room name and resource categories fail, then the page continues to display loading text, which is misleading to users as they'll continue waiting for a result. This commit fixes that by setting the load state to be false if there is an error in the API call. * fix: stop loading text on Collections in Workspace layout Similar to the the Resources layout, if the api call to retrieve collections fails, the page continues to display misleading loading text This commit fixes that by setting the load state to be false if there is an error in the API call. * fix: css for Sites loading text Co-authored-by: Jie Hao Kwa <[email protected]>
* chore: install Sentry for react * chore: add new env var to determine dev environment This commit adds a new ENV environment variable which determines whether the environment is a local development environment, staging, or production * feat: initialize Sentry This commit initializes Sentry for our app if the environment is not a local dev environment * feat: add Sentry error boundaries for each route component This commit adds Sentry error boundaries for each route component (such as Workspace, Files, etc.). Note that the Sentry error boundary is simply a wrapper over the built-in React error boundary, and so does not catch errors for the following events: - Event handlers - Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks) - Server side rendering - Errors thrown in the error boundary itself (rather than its children) Source: - https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries - https://stackoverflow.com/questions/46835391/react-16-error-boundary-component-using-componentdidcatch-shows-uncaught-error Error boundaries are meant to catch errors during rendering or lifecycle methods. * chore: initialize sentry only if staging or production env * chore: restore scripts command * chore: rename env var * chore: rename env vars to begin with REACT_APP_ Reference: https://create-react-app.dev/docs/adding-custom-environment-variables/ * chore: typo Co-authored-by: Jie Hao Kwa <[email protected]>
Co-authored-by: Jie Hao Kwa <[email protected]>
* Feat: create handler for toggle * Feat: update HeroSection to use radio buttons for toggle * Fix: styling * Fix: typo causing error with dropdownElems * Fix: folderCard deleteHandler apiUrl * Fix: add check for save details when toggled This PR fixes a bug where toggling the dropdown would cause the dropdown options to be toggled as well. The reason for this bug is an inconsistent behaviour involving onChange on the radio buttons - for some reason, onChange is firing for the Dropdown option even when the actual value is not being changed. To fix this behaviour, we implement an additional check when handling the toggle, to only perform the changes if the sections are being swapped. * Fix: standardize hero dropdown format with hero highlights * Fix: loosen prop type validation requirement * Fix: initialize dropdownElemErrors to empty array instead of empty string * Fix: add missing HeroSection proptypes * Fix: update required proptypes for HeroDropdown * Fix: radio button value to defaultValue Previously, we were getting a warning that `A component is changing an uncontrolled input of type radio to be controlled.` The reason for this was that radio buttons should not be using value, but defaultValue instead. This commit makes that change to prevent us from getting that error. * Fix: pass dropdown and highlights only if they exist to HeroSection
* Fix: reorder deletion and creation of new pages This commit adjusts the order of file creation/deletion when moving files. Originally, we deleted files before creating a new file, but this caused issues where if problems arose when creating a new file, the old file would still be deleted. This commit changes the deletion to take place after the new file has been created to avoid this loss of data. * Feat: add new generic AlertModal * Feat: add error handling in OverviewCard and ComponentSettingsModal * Fix: close dropdown when alertModal is triggered * Feat: add warning message when moving files between categories * Fix: swap button positions on GenericWarningModal * Install dependencies * feat: modify GenericWarningModal to allow for customizable button text * Feat: add ToastContainer to app * Feat: add Toast component and styling * Feat: change alert modal to toast notification * Feat: fix toast styling * Fix: dropdown modal at the bottom of screen no longer pushes items upwards * Feat: position dropdown within container if it would exceed to the right * Nit: rename warning modal hook * Feat: add propTypes to Toast * Fix: remove unused AlertModal class * Fix: prevent flickering of dropdown modal This commit fixes an issue where the dropdown modal would briefly flicker in the wrong position before it could be determined to be out of the viewport. To fix this, we allow the div containing the ref to be initialized first, but prevent the actual menu content from showing up until the position of the menu has been determined. * Fix: convert filenames to lowercase when saving * Feat: add error toast for image and file upload
* fix: put section creation buttons outside of droppable area in EditHomepage This commit resolves issue #259 #259. Previously, when dragging subsections (hero key highlights or hero dropdown options), when dragging the last element in the section, the "Create" button would be dragged with it because it existed within the droppable/draggable area in the component. This commit fixes that by removing it from that droppable/draggable area. * fix: Create key highlights button Currently, the "Create highlight" button doesn't work when the homepage does not have either a dropdown or key highlights hero section defined. This is possible because we allow users to make their hero section blank if they do not define any key highlights. However, this leads to a problem when attempting to create key highlights in such a situation, because the key highlights array in the front matter hero section doesn't exist. This leads our code to attempt to splice something which doesn't exist. This commit fixes that by creating a new key highlights array in the front matter hero section if it doesn't already exist. Co-authored-by: Jie Hao Kwa <[email protected]>
* feat: add fields for shareicon, google analytics, and facebook pixel * feat: add field for agency logo This commit adds a field for the agency logo, which is retrieved from the `navigation.yml` file instead of the usual config file, so the state is stored in a separate `navigationSettings` attribute * feat: re-add `title` field * feat: add is_government field to Settings * feat: introduce a new FormFieldDropdown component There are certain fields in the Settings page, such as show_reach, or is_government, which should only accept `true` or `false` values. In such cases, we should limit the user's options instead of allowing them to enter plain text. This commit introduces a new FormFieldDropdown component which does just that. * fix: code cleanup * chore: add custom placeholder field for FormFieldHorizontal This commit also adds custom placeholder values for Facebook pixel and Google analytics for clarity. * chore: misc. code cleanup This commit does two things: - remove unused default props for FormFieldDropdown - convert the CreatableSelect component to a Select component since we do not want users to create any new options Co-authored-by: Jie Hao Kwa <[email protected]>
* fix: set state directly in EditHomepage There were multiple instances in the EditHomepage layout where state was being indirectly set by referencing the state object directly. Refer to issue #239 for more details. This commit fixes that by referencing a deep-copied version of the state object instead of the state object itself. * refactor: switch to use immutability-helper to update state This commit switches the code in EditHomepage to update state using immutability-helper instead of deep cloning every object Co-authored-by: Jie Hao Kwa <[email protected]>
* feat: add template components for contact-us page (Contact, Location, Feedback Sections) * feat: refactors Breadcrumb into a separate component for reuse in contact-us template page, renames old Breadcrumb as PageHeader and updates Breadcrumb references in LeftNavPage and SimplePage as well as isomer-template.scss * feat: adds Contact Us button to Workspace, changes page type booleans isHomepage and isCollection to a single page type string as there are 4 different page types to consider now, updates references to isHomepage and isCollection in Workspace, FolderCard and Resources, adds contact-us route to App * feat: refactors Dropdown into a separate component for reuse, originally intended for reuse in contact contents; updates NewSectionCreator to use Dropdown component * fix: makes FormField title non-compulsory so that component can be reused as a series of fields without each having a title such as the address fields in Contact Us * feat: add editor components for Contact Us page (LocationCards, ContactCards, Section, Fields) * feat: add util functions for contact us * feat: add contact us editor page * feat: add data sanitisers for contact us * fix: show/hides Contact Us button from Workspace depending on if contact-us.md file exists * fix: loop through contacts, locations arrays only if arrays are defined * fix: fix typo in dataSanitisers equality check * fix: updates AgencyName to use theme color * fix: fix class warning error, changes class to className * fix: removes empty operating hours objects upon saving * fix: changes contact-us templates structure to be consistent with homepage templates structure * fix: fixes class warning errors, replaces class with className * feat: adds validation and error checking to edit contact us page * Feat/contact us page 2 (#266) * fix: suppresses dropdown for Contact Us Folder Card dropdown options * fix: removes hardcoded sectionId, passing sectionId as argument * fix: updates displaySections to use locations, contacts as key values, simplifies indexing updates for OnDragEnd, createHandler, deleteHandler, displayHandler * fix: adds check if frontMatter.contacts or frontMatter.locations array is empty, if empty the key-value pair is removed and not saved * fix: updates templates to use forwarded react references * fix: updates scrollRefs to use React.createRef() and forward references to templates, also updates scroll behavior for onFieldChange, onDragEnd, deleteHandler, createHandler and displayHandler * fix: fixes error in operatingHours validation, adds case for validating map links * fix: clean up comments, whitespace * fix: checks whether content has been edited and shows navigate away warning accordingly * fix: uses deep cloning to sanitise frontMatter * fix: sets background color for contactUs edit preview * fix: buffs up email validation * fix: add packages for DOMPurify * fix: uses DOMPurify to prevent XSS scripts from rendering on Contacts descriptions * fix: fixes paragraph stylistic formatting on Contacts description * fix: fixes form field width for operating hours to not resize with error length * fix: resolves stylistic differences in links and span text * fix: adds parent style around links in ContactSection Templates * fix: cleans up scrollIntoView * fix: adds key to dropdown options to resolve unique id warning * install: adds packages for react-input-mask * feat: creates InputMaskFormField using react-input-mask for FormFields that can use masked input styling, for example dates, phone numbers and so on * feat: adds state hook to Contact Fields to support masked input styling for the Phone Number field, uses Dropdown to set state * fix: simplifies validation for Contact Fields phone number as masked input provides user cues for length of phone number already * fix: rectifies relative imports * fix: cleans up warning errors in validation * fix: fix initialized state in state hook * fix: filters dropdown before mapping to remove arrow function warning * fix: sets font size for error and info messages since span has been set by default to inherit parent font-size * fix: uses info message style for notes * fix: removes extraneous terms from automated url generation and sets View Map link to open in a new page * fix: adds Delete modal for each Location and Contact * feat: add styling for error cards * feat: uses red border to highlight sections and cards that contain errors, border is only highlighted when section/card is minimized * fix: fix title overflow bug * fix: removes default value if user does not select phone number field * fix: clean up dataSanitisers and add initial values for maps_links and titles * fix: removes min length for title * fix: sets min length of titles to 1 * fix: change Add button to singular form instead of plural as in Contact and Location not contacts and locations * fix: fixes link size on sidebar * fix: line height for card header overflow * fix: fix page type on foldercard
* feat: add error toasts when saving and deleting images/files This commit adds error toast notifications when the api call to save or delete an image or file fails. * feat: add error toasts when saving settings This commit adds error toast notifications when the api call to save a repo's setting config fails. * feat: add error toasts for FolderCard This commit adds error toast notifications when the api call to rename or to delete a folder (collection or resource category) fails * feat: add error toasts for OverviewCard This commit adds error toast notifications when the api call to delete or to move a page (normal page, collection page, or resource page) fails * feat: add error toast notifications to ComponentSettingsModal operations This commit adds error toast notifications when the ComponentSettingsModal tries but fails to retrieve page setting information. It also modifies the component so that an error toast is displayed when the api call to save page settings or to delete the page fails. * feat: add error toast when we fail to retrieve third nav options This commit adds an error toast when we fail to retrieve third nav options in the ComponentSettingsModal * feat: add error toasts for EditPage and EditHomepage This commit adds error toasts when the api calls to save EditHomepage fails, or when the api calls to save or delete the EditPage fails. * fix: undefined exception when handling errors When handling errors in some cases, we attempt to check for a http error response status. However, since the error might not come from a http error, the `status` attribute might not be present in the error object, which leads to an undefined attribute exception. This commit fixes that bug by using optional chaining. * chore: typo * chore: store default error toast message as a constant This commit modifies all applicable existing usage of the Toast component to use the default error toast message that is now defined as a constant in the main utils file. This is so that if we need to reword our error message, we only need to do it in one place, instead of in every single file. Co-authored-by: Jie Hao Kwa <[email protected]>
* Feat: update fallback component with generic error page * Feat: add 404 page and set direct all unknown urls there * Feat: add error handling for site pages This commit fixes the issue of infinitely loading pages when a page does not exist. It also shows the error page if users attempt to edit a page they do not have access to. * Fix: only show 404 page if backend throws 404 error * Fix: error in redirect for resource page * Feat: add access check to ProtectedRoute This commit adds a check in the ProtectedRoute for whether the user has access to a given site - if the site does not exist or the user does not have the appropriate permissions, they are redirected to a 404 page. This allows us to revert the individual redirections done in most pages, which will be removed in a later commit. * Fix: revert redirect in individual pages * Nit: rename variable for redirect * Fix: remove redirect when page fails to save The use case covered by these instances on save and delete have now been covered by ProtectedRoute. * Feat: update NotFoundPage to redirect to workspace if user is on a site * Feat: add redirect to contact us page
* chore: save original settings state This commit saves the original settings configuration as a state variable so that we can compare the current settings fields with the original state to see if any changes were made. This allows us to warn the user if they attempt to navigate away from the page without saving their changes. This commit also removes the `footerSha` attribute from state since it is no longer required after PR #85 on the backend. * chore: list out config fields when setting Settings state * feat: util function for deep comparing objects This commit introduces a util function i found on stack overflow, https://stackoverflow.com/a/39813128, which deep compares two objects and identifies which attributes have changed. * feat: display warnings if there are unsaved changes on settings page This commit deep compares the current settings values with the original loaded settings values and displays a warning if the user attempts to navigate away from the page when there are unsaved changes. * feat: send only settings field which have been changed (#286) This commit modifies the behavior of the Settings layout save handler so that only fields which have been changed are sent in the request. Previously, we would send all state fields, regardless of whether the fields have changed in value. The problem is that this results in wasteful writes to the GitHub repo on the backend. It also leads to slow performance since the writes to the GitHub repo are sequential. Co-authored-by: Jie Hao Kwa <[email protected]> * chore: code cleanup Co-authored-by: Jie Hao Kwa <[email protected]>
* Fix: Prettify retrieval of title from resource file name and modify special character * Fix: typo in folder delete endpoint * Fix: bug when creating new collectons where new collections were not being identified correctly * Fix: update title of delete warning modal when deleting pages * Fix: convert only dollar followed by a number * Fix: check for unlinked page when moving pages between collections
* Fix: redirect only if page not found for editPage and editContactUs * Fix: Toast notification for failure to load home page * Fix: prevent contact us from showing up as an unlinked page * Fix: update permalink regex failure error message * Fix: only update contact us and footer if content has been changed * Fix: collapse accordion of non active elements in editHomePage * Fix: Collapse other fields when new section is created in Contact Us * Fix: initialization of new highlight sections This commit fixes a bug introduced in a previous commit which changed the behaviour of newErrors. * Fix: increased max length for infobar and infopic descriptions * Feat: add additional info on maximum file size * Fix: rearrange try catch blocks when loading EditPages and ContactUs * Fix: unnest try catch blocks for better readability
* Feat: update util functions This commit accomplishes 3 things: it allows the existing retrieveResourceFileMetadata function to return the type of the resource file, if it is present, splits the prettifying of the date into a separate util function, and adds the resource type to the generation of the names of resource files. * Feat: add resource type to OverviewCard and prettify dates * Feat: disable link for downloadable file resources * Feat: disable editing for downloadable file pages * Fix: properly differentiate between case where collections are loading and no collections exist * Feat: retain editor styles for file resources but disable editor * Fix: remove unnecessary retrieval of date from frontMatter
* Feat: update error handler to account for nginx rejection * Fix: update error message for large file size * Nit: fix placeholder text for collections in OverviewCard * Fix: set placeholders for creatable selects * Fix: prevent error message from appearing on the same line as title * Fix: update toast error message * Fix: also add new line after error message in title * Fix: update field titles * Nit: update field header for componentSettingsModal
* Fix: change oauth to access private repos as well * Fix: clarify what unlinked pages are in workspace * Feat: add divider between unlinked page and categories in page moving modal * Feat: add toast when images are successfully changed in field * Fix: check for existence of images * Fix: expand clickable area for chevron * Fix: prevent automatic redirection to editPage if resource created is a file
alexanderleegs
previously approved these changes
Dec 23, 2020
* feat: experiment - please ignore this commit This commit introduces the `primaryColors` and `secondaryColors` state hook at the application root, `App.jsx`. By keeping track of colors at the root level, we can supply this colors to the `EditPage` components directly, so we only need to retrieve settings data for each repository once. The state hook is stored as an object, where the key is the repo name and the value is the hex color string. The reason for this is so that we can keep track of the color of each repo. If we used the state hook to store only the current repo's color, if the user redirected to another repo, then that repo's `EditPage` would be rendered with another repo's colors, which would just be wrong. We also modify the `EditPage` component to retrieve color settings data ONLY if the state hook does not have color data for that repo. No data is fetched if the state hook already has color data for that repo. Therefore, for each repo, we only need to fetch color data once. If the user opens up another page on `EditPage`, we would already have color data for that repo and so we can send it as a prop. * feat: add util function for modifying EditPage color theme This commit adds a util function, createPageStyleSheet, which creates a custom style sheet based on the primary and secondary colors of a given repo. This will allow us to customize the color appearance of the EditPage live preview. For now, this function only modifies the html elements associated with the EditPage layout. This will be expanded to the EditContactUs and EditHomepage layouts in the future. This commit also introduces a getSiteColors function which retrieves a repo's settings file and retrieves the primary and secondary colors for that repo. * feat: introduce siteColors state hook on App level This commit introduces a `siteColors` state hook object at the App level. This state keeps track of all the primary and secondary colors of each repo, and the `siteColors` state hook and its respective setter function are passed as props to every route. This commit also makes modifications to the Workspace layout so that we retrieve a repo's color settings when we reach the Workspace layout, only if we have not already done so before. Ideally, we would have used a React context to store the siteColors object instead of a state hook at the App level. However, since some of the components (EditPage, EditHomepage, EditContactUs) are class components, we are not able to use the React Context API unless we refactor these class components into hooks, which would take significant engineering effort. * feat: modify EditPage color scheme This commit modifies the EditPage mounting process. If the site colors for the repo are already available, we simply generate the custom style sheet and apply it to the layout, which will give us the new color scheme. If the site colors are not yet available, we make an API call to retrieve them and subsequently apply them to the layout. We do not implement a toast notification if the call to retrieve the color settings fail - we simply let it fail silently. This is because the core function of the page is to display page content, and the color of the preview is only a secondary function. However, if anyone else feels strongly otherwise we can discuss and implement a toast notification instead. * feat: update style sheet creation function for EditHomepage This commit updates the createPageStyleSheet util function to account for HTML elements on the EditHomepage layout * feat: update EditHomepage to implement custom style sheet This commit implements a custom style sheet so that the live preview's colors match that of the actual site. This is done in the same way that we previously did for the EditPage layout. * fix: minor bug in custom style sheet creation * chore: prevent memory leaks for EditContactUs * feat: implement custom styles for EditContactUs * fix: equality check * feat: update resources section in the EditHomepage layout This commit updates the resources section in the EditHomepage layout by modifying the watermark to include a more informative message which lets the user know that the resource tiles displayed are just samples. The styles of the watermark have also been updated, and the opacity of the resource tiles decreased so that the message is in greater contrast and more readable. * fix: align resource placeholder text to center Co-authored-by: Jie Hao Kwa <[email protected]>
Currently, when saving data for resource pages, we enquote the title in anticipation of special characters in the title. However, this turns out to be unnecessary, and in fact, detrimental because our yaml library automatically enquotes strings which contains special characters. This manual enquoting results in a title string with two double quotes. This commit fixes that by removing the use of enquote string and letting the library do its work. Co-authored-by: Jie Hao Kwa <[email protected]>
LoneRifle
approved these changes
Dec 23, 2020
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Release level approval, relying on due diligence done on dependant PRs
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This release to production contains the following changes:
Migrate resource file names
Features
Edit-
pages (PR Feat/use site colors #296)Bugs
Error-handling
New layout
EditContactUs
layout is released (Feat/contact us page #260, Feat/contact us page 2 #266)Performance optimization
Settings
page to send only changed fields (feat: send only settings field which have been changed #286)