Pulling feat/stock-center-pages into develop #663
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
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
|
Important Auto Review SkippedBot user detected. To trigger a single review, invoke the Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## develop #663 +/- ##
========================================
Coverage 94.74% 94.74%
========================================
Files 190 190
Lines 14203 14203
Branches 492 492
========================================
Hits 13456 13456
Misses 747 747 |
…ents This commit adds a new file `ErrorBoundary.tsx` which contains the `ErrorBoundary` component. The `ErrorBoundary` component is a wrapper that catches any JavaScript errors and provides a fallback UI. It renders a grid container with a sad Dicty logo, an error message, and a contact email address. The component also includes Material-UI styling. Additionally, this commit adds several new error-related components: - `ErrorMessage.tsx`: Displays a "contact us" message used on most error pages. - `ErrorNotification.tsx`: Displays a notification snackbar-style message if the user hits some type of error. - `Fallback.tsx`: A simple fallback component that displays a message indicating that something unexpected happened. - `GraphQLErrorPage.tsx`: Displays any errors found when issuing a GraphQL query or mutation. It returns one of the other error components based on the error code. - `NotFoundError.tsx`: UI display when an item was not found. It includes a sad Dicty logo, a "Page Not Found" message, and a link to the homepage. - `OtherError.tsx`: UI display when there is a general error. It includes a sad Dicty logo, an error message, and a contact email address. - `ServerError.tsx`: UI display when there is a server error. It includes a "Sorry! There was a server error" message and an error message. These components are all styled using Material-UI and include appropriate error messages and fallback UIs for different error scenarios. The reason for these changes is to provide a consistent and user-friendly error handling experience throughout the UI components. The `ErrorBoundary` component helps catch and handle any JavaScript errors, while the other error components provide specific UI displays for different error scenarios. This improves the overall user experience by providing clear and informative error messages and fallback UIs.
… errors in AddPage, Edit, Editable, and Show components The changes in the commit include adding the `GraphQLErrorPage` component to the `AddPage.tsx`, `Edit.tsx`, `Editable.tsx`, and `Show.tsx` files in the `EditablePages` feature. This component is used to handle GraphQL errors that may occur during the execution of queries in these components. By adding this component, we improve the error handling and provide a better user experience when encountering GraphQL errors.
The GraphQLErrorPage component was added to the exports in the ui-common package. This allows other modules to import and use the GraphQLErrorPage component.
The BackToHomepageButton component is added to the ui-common package. This component is a simple button that links back to the homepage. It is styled using Material-UI and has a specific width, padding, margin, text color, background color, and hover effect. The button is linked to the "/" route using react-router-dom.
…cty.png image asset The commit adds a declaration file assets.d.ts to the ui-common package, which declares module "*.png" and "*.jpg" to allow importing image assets with those file extensions. Additionally, the commit adds the sad-dicty.png image asset to the src/assets directory in the ui-common package. This image asset can now be used in the application.
…llo errors and return appropriate error components The `contentPageErrorMatcher` utility function is added to handle Apollo errors and return the appropriate error components based on the error type. It takes in an `ApolloError` object and a `notFoundHandler` function as parameters. The function uses pattern matching to match different error cases and return the corresponding error components. If the error is a network error, it returns a `ServerError` component. If the error is a GraphQL error with a specific code, it returns either a `ServerError` or a `NotFound` component. If none of the cases match, it returns an `OtherError` component. This utility function improves error handling and provides a more user-friendly experience.
…e declaration The error prop and its corresponding type declaration (Properties) are no longer used in the NotFoundError component. Removing them improves code readability and eliminates unnecessary code.
The import path for the sadDicty image was incorrect. It was updated to the correct path "../assets/sad-dicty.png" to ensure the image is imported correctly.
…gic in Show component The import statement for the GraphQLErrorPage component from "@dictybase/ui-common" is removed as it is no longer used in the Show component. The error handling logic is updated to use the contentPageErrorMatcher utility function instead of the hasNotFoundError function. This improves the readability and maintainability of the code.
…ling logic The commit removes the unused imports of `pipe` and `GraphQLErrorPage` to improve code cleanliness. The error handling logic is simplified by using the `contentPageErrorMatcher` function instead of the `hasNotFoundError` function. This change improves readability and maintainability of the code.
The imports in the Edit.tsx file have been cleaned up and unused code has been removed to improve code readability and maintainability. Error handling has been added to handle GraphQL errors and navigate to the notFoundAuth page when necessary. This ensures a better user experience by providing appropriate feedback when errors occur.
…error handling logic The commit removes unused imports and variables to improve code cleanliness. The error handling logic is refactored to use a contentPageErrorMatcher utility function, which allows for more flexible error handling.
… and OtherError The commit adds new error components to the ui-common package: ServerError, NotFoundError, and OtherError. These components can be used to display different types of errors in the UI, providing a more comprehensive error handling experience.
…in content pages A new file contentPageErrorMatcher.tsx is added to handle Apollo errors in content pages. This matcher function takes an ApolloError and a notFoundHandler function as parameters to match and handle different types of errors. The contentPageErrorMatcher provides a structured way to handle Apollo errors in content pages, improving error handling and user experience.
…nd Show components The imports in the AddPage, Edit, Editable, and Show components have been updated to include the contentPageErrorMatcher function from the ui-common package. This refactoring improves code organization and ensures consistency in importing necessary components across different files.
The GraphQLErrorPage component has been deleted as it is no longer needed in the project. The removal of this component required updating the index file to remove the export of the GraphQLErrorPage component.
…, and useSlug The getLastPathSegment function extracts the last segment of a given pathname after filtering out empty segments and those matching specific view modes. The getSlug function generates a slug based on route parameters for content pages. The useSlug custom React hook utilizes getLastPathSegment and getSlug to retrieve the slug value based on URL parameters.
…LErrors The error handling logic for graphQLErrors has been fixed by matching any value on graphQLErrors, instead of checking for an object with extensions.code property, since not all elements of the array are guaranteed to have this property.
…lue "dsc" The changes are done to create a new file to define a constant NAMESPACE with the value "dsc". This constant can be used throughout the application to refer to a specific namespace.
…and display it dynamically The Show component has been refactored to fetch content dynamically based on the slug provided. This change allows for more flexibility in displaying content and improves the user experience by showing relevant information based on the slug.
Two new components, FooterWithAuth and NavbarWithAuth, have been added to the auth package. These components provide functionality for displaying a footer and a navbar based on user authorization. The components use data from authFooterData.json and authNavbarData.json respectively.
The FooterWithAuth and NavbarWithAuth components have been removed from the frontpage application. These components were no longer needed and were causing unnecessary complexity in the codebase.
…rWithAuth The NavbarWithAuth and FooterWithAuth components have been moved to the "auth" package.
Added new permissions "write:content", "edit:content", and "delete:content" to the list of permissions in the logtoConfig object. This change allows users to have specific permissions for managing content within the application.
…FooterWithAuth This enables the DSC app to navigate to authorized links.
…unauthorized and authorized users The new files notfound.tsx and notfoundauth.tsx have been added to provide custom 404 error pages for unauthorized and authorized users, respectively. These pages import NotFoundError component from "@dictybase/ui-common" and set the access level and roles accordingly to display the appropriate message to the user.
…lug and display editable view based on result The commit removes unused imports and a temporary content variable. The Editable component is refactored to use the useContentBySlugQuery hook to fetch content by slug. The component now dynamically displays an editable view based on the fetched content, loading display, or error message. The roles array is updated to only include "content-admin" role.
The navbar and footer dependencies have been added to the package.json file in the auth package to enhance the UI consistency across the application. This change ensures that the UI components are uniform and cohesive, providing a better user experience.
The ui-common package has been added as a dependency to the stock-center application. This addition is necessary to provide common UI components and functionality across multiple applications within the project.
…avbar dependencies The @dictybase/footer and @dictybase/navbar dependencies are no longer used in the application, so they have been removed from the package.json file to declutter the dependencies and improve maintainability.
…Typography and Container components from Material-UI for improved readability and consistency. The NotFoundError component has been refactored to use Typography and Container components from Material-UI instead of plain HTML elements for better readability and consistency with the rest of the codebase. This change enhances the maintainability of the component and ensures a more cohesive UI design.
… found error message The NotFoundErrorAuth component is added to the ui-common package to provide a user-friendly display when an item is not found. This component includes relevant text and buttons to guide users on what to do next when encountering a page not found error.
…e/navbar dependencies The @dictybase/footer and @dictybase/navbar dependencies were removed as they are no longer being used in the project. This cleanup helps to reduce unnecessary dependencies and keep the project lean.
…addpage route The AddPageButton component has been added to the ui-common package. This component is a simple button that links to the /addpage route using react-router-dom. It provides a convenient way for users to navigate to the add page functionality within the application.
The export for NotFoundErrorAuth has been added to the index.ts file in the ui-common package. This change allows consumers of the package to access the NotFoundErrorAuth component directly from the package's main entry point.
The import paths for NotFoundError and ACCESS have been updated to reflect the new locations of these components. This change improves code organization and maintainability by using more descriptive and accurate import paths.
… and ACCESS The import paths for NotFoundErrorAuth and ACCESS have been updated to reflect the correct locations of the modules. The access constant value has been changed to ACCESS.private to ensure that the component is only accessible to authenticated users with specific roles.
…toolbar for adding editable pages The createAddPageToolbar component is added to the ui-common package. This component generates a toolbar for adding editable pages with customizable children elements. This addition enhances the modularity and reusability of the codebase by providing a standardized way to create toolbars for adding new pages.
…toolbar creation to a separate function The commit removes unused imports and styles, specifically the makeStyles function and the banner styles. It also extracts the creation of the toolbar for the Editor component into a separate function called createAddPageToolbar for better code organization and readability.
…or to NotFoundErrorAuth The import and export names for NotFoundError have been updated to NotFoundErrorAuth to provide more clarity and consistency in the codebase.
…sing Logto The Edit component has been refactored to improve readability and maintainability by restructuring the code and organizing it into smaller, more manageable parts. Additionally, support has been added for fetching user information and access token using Logto, enhancing the functionality and security of the application.
…rocess pathname The useContentPath custom hook is added to extract and process the pathname from the current location using the react-router-dom library. It utilizes various functions from the fp-ts library to filter, manipulate, and reduce the pathname to derive a content path based on specific view modes. This hook enhances the modularity and reusability of the code by encapsulating the logic for extracting content paths.
…ynamic routing This commit adds a new file `addpage.tsx` which contains a React component for adding content. The component utilizes dynamic routing with the use of React Router's `Navigate` component to redirect to the editable page after successful data retrieval. The component also handles user authentication and access control based on the user's role.
…page The file new.tsx was deleted as it contained unused code related to adding a new information page. This cleanup helps to maintain a cleaner codebase by removing unnecessary and commented-out code.
… access user email and token The user and token props in the match were removed as they were unnecessary. Instead, the user email and token are now directly accessed within the EditView component, simplifying the code and improving readability.
ktun95
force-pushed
the
feat/stock-center-pages
branch
from
fd3b2d1 to
33dfd24
Compare
since we are accessing the user and token variables directly from the component state instead of passing them into the match pattern, we only need to get the content in the variable. Therefore, a name is not necessary since it is the only data being passed.
The destructuring of props in the Edit component has been simplified to improve readability and reduce unnecessary code. The data prop is now directly destructured from the contentBySlug object, removing the need for the unnecessary nesting. The userId and authToken props are now accessed directly from the user and token objects respectively. This simplification improves the overall readability and maintainability of the code.
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.
No description provided.