search

Parsely / wp-parsely

The official WordPress plugin for Parse.ly - makes it a snap to add the required tracking code to enable Parse.ly on your WordPress site.
https://wordpress.org/plugins/wp-parsely/
GNU General Public License v2.0
64 stars 32 forks source link

Dashboard: Add provider and initial UI #2943

Open vaurdan opened 1 week ago

vaurdan commented 1 week ago

Description

This PR introduces the dashboard provider, to facilitate the communication from the front-end with the WordPress REST API.

As a good way to test and understand the requirements for this provider, I also implemented an initial version of the main dashboard page, that contains a table listing all the recent posts.

I did try to implement some of the code with reusability in mind, however some components such as the PostsTable component, while technically reusable, is still too tied to the Dashboard page. We can make it more generic once we start working on the Traffic Boost UI.

Motivation and context

How has this been tested?

Tested locally.

Screenshots (if appropriate)

https://github.com/user-attachments/assets/e2d32834-3fc3-4b6a-b760-6fa970f1fb47

Summary by CodeRabbit

Release Notes

coderabbitai[bot] commented 1 week ago
📝 Walkthrough ## Walkthrough This pull request introduces several changes across multiple files in the `wp-parsely` project. Key updates include the addition of a new dependency in `package.json`, modifications to the `enqueue_dashboard_page_scripts` method to include WordPress component styles, and the introduction of a new base class for WordPress REST API interactions. Additionally, several new components and styles for the dashboard page are created, enhancing its structure and functionality. The changes aim to improve the dashboard's user interface and data management capabilities. ## Changes | File | Change Summary | |------|----------------| | `package.json` | Added dependency `"@wordpress/date": "^5.11.0"` to `dependencies`. | | `src/UI/class-dashboard-page.php` | Modified `add_dashboard_page_placeholder` method class name from `parsely-dashboard-page` to `parsely-dashboard-container` and updated `enqueue_dashboard_page_scripts` to enqueue `wp-components` stylesheet. | | `src/content-helper/common/base-provider.tsx` | Changed access modifiers for `abortControllers` (private to protected) and `getOrCreateController` method (private to protected). | | `src/content-helper/common/base-wordpress-provider.tsx` | Added new base class for WordPress REST API with methods for data fetching and hydration, including types and interfaces. | | `src/content-helper/dashboard-page/components/index.ts` | Added exports for `PageContainer`, `PageBody`, `PageHeader`, and `PostsTable` components, organized under new comment headers. | | `src/content-helper/dashboard-page/components/posts-table/component.tsx` | Introduced `PostsTable` component with subcomponents for displaying posts, pagination, and actions. | | `src/content-helper/dashboard-page/components/posts-table/style.scss` | Added styles for posts table layout and design. | | `src/content-helper/dashboard-page/components/typography-components.tsx` | Introduced `DashboardHeading` component as a wrapper for WordPress heading styles. | | `src/content-helper/dashboard-page/dashboard-page.scss` | Added import for `posts-table` styles and set background colors for body and dashboard container. | | `src/content-helper/dashboard-page/pages/dashboard/dashboard.scss` | Removed box shadow from `.summary-button button` styles. | | `src/content-helper/dashboard-page/pages/dashboard/header-component.tsx` | Updated import paths for `PageHeader` and stylesheet. | | `src/content-helper/dashboard-page/pages/dashboard/page-component.tsx` | Added `PostsTable` and `DashboardHeading` components, replacing static content with dynamic content. | | `src/content-helper/dashboard-page/provider.tsx` | Introduced `DashboardProvider` class with singleton pattern implementation. | | `src/content-helper/common/css/variables.scss` | Renamed class selector from `.parsely-dashboard-page` to `.parsely-dashboard-container`. | ## Possibly related PRs - **#2540**: The main PR adds a new dependency in `package.json`, which is related to the updates made in this PR that also involves changes to `package.json` for updating WordPress packages. - **#2939**: The main PR introduces a dashboard page that includes user permissions for the Traffic Boost feature, which is directly related to the permissions infrastructure added in this PR. - **#2940**: The main PR implements React routing for the dashboard, which is relevant to the dashboard page functionality discussed in this PR that adds a header and navigation structure. - **#2941**: The main PR enhances the dashboard page by adding a header, which complements the overall dashboard functionality being developed in this PR. - **#2942**: The main PR establishes the infrastructure for Traffic Boost settings, which aligns with the permissions and settings management introduced in this PR. ## Suggested labels `Feature: Traffic Boost`

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?

❤️ Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
🪧 Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` 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 using PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### Documentation and Community - Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.