Giter VIP home page Giter VIP logo

vip-wp-admin-dashboard's Introduction

VIP Dashboard

This repository has been archived and its code now lives in the vip-dashboard folder within vip-go-mu-plugins.

WordPress plugin that provides a new dashboard for VIP Go clients.

The interface is built with React.js.

Getting Started

Prerequisites

Make sure you have Node.js and NPM installed. Here's a handy installer for Windows, Mac, and Linux.

The repository is a sub-module of the mu-plugins directory.

Gulp

Gulp is required to work on this repository. We use Gulp to compile JSX into valid JavaScript and manage other assets such as CSS and images.

To get setup run the following command in the vip-dashboard directory:

npm install

Once node has completed the install you should set the URL to your local development site in gulpfile.js. Line 50:

proxylocation: 'vip.w.dev'

You can then run the default gulp task by running:

gulp

The default task watches for changes to files and re-compiles assets when a change is detected. Your browser window will also automatically be refreshed with each change. We also check for JS errors so keep an eye on your console and fix any reported issues.

Before deploying you may wish to run:

gulp compress

This will generate minified versions of the JavaScript ready for production.

Testing

Run

make lint

To test your JavaScript for errors.

Directory Structure

├── readme.md
├── gulpfile.js
├── package.json
├── Makefile
├── vip-dashboard.php
├── .travis.yml
├── assets
│   └── css
│   └── img
│   └── js
├── components
│   └── ... react components

assets

Compiled assets, do not edit anything here.

components

Where each react component lives with the relevent JSX and SCSS files.

Git Workflow

  • The Master branch is production code (i.e. completely deployable by the time it gets merged)
  • All branches except Master and Develop get prefixed with something/
  • New features get a add/ prefix
  • Fixes get a fix/ prefix, and have an issue number: e.g. fix/999-fix-fatal-errors where issue 999 describes the bug being fixed
  • All branches get deleted once merged
  • No development takes place on Master or Develop (if Develop exists)
  • Nobody should merge code they’ve written, instead create a Pull Request and ask another colleague to merge it
  • Pull Requests should not be monstrous quantities of code, or they’ll be too daunting to review

vip-wp-admin-dashboard's People

Contributors

chrishardie avatar david-binda avatar dependabot[bot] avatar emrikol avatar ethitter avatar gamebits avatar joshbetz avatar keoshi avatar mjangda avatar nickdaugherty avatar pauarge avatar scottsweb avatar simonwheatley avatar tessaneedham avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vip-wp-admin-dashboard's Issues

Don't load UI enabled plugins from inside the Plugins UI class

Something called Plugins UI should only handle Plugins UI :)

Really confusing that it handles loading the plugins also. Means it needs to be included from the frontend on every request, which is def. sub-optimal.

Refactor that functionality out. Really, it needs to be in mu-plugins directly, not part of VIP Dashboard either.

Plugins activated via wpcom_vip_load_plugin do not appear activated in the UI

To reproduce:

  1. Add a plugin, e.g. Field Manager, to the plugins directory on your repository
  2. Activate the plugin via code, e.g. wpcom_vip_load_plugin( 'fieldmanager/fieldmanager.php' );
  3. Visit the WP Admin > Plugins screen

Expected: Field Manager should show as activated with a message "Enabled via your theme's code"

Actual: Field Manager shows as inactive, BUT is actually active

Filter the 'from' address when sending support requests from dashboard

WP 4.6 made some changes to the underlying email handling, which necessitated this change:

Automattic/vip-go-mu-plugins#277

The need for that will go away in 4.6.1 (we can set Sender again), but in the meantime, we're sending emails from the wrong address when creating tickets from the dashboard.

Instead, we should be using [email protected], which we set via a header...but with the wp_mail_from filter, the header is overridden, which breaks it.

So temporarily, we should filter wp_mail_from here, and remove the filter after sending is complete.

Better 'Community' plugin handling

Right now we've duct-taped the regular plugins list table into the VIP Plugins UI. This is not great because:

  • Activate/deactivate still goes through wp-admin/plugins.php, so you end up on the wrong page
  • Includes Bulk Actions
  • UI does not support loading regular plugins via code - if a plugin has been loaded via code, the UI needs to display that message

We should make a custom list table for regular plugins in the same way we did for shared plugins, and use that here. Currently, we're using the core plugins table, crammed into our VIP plugins page.

That would include replicating some functionality from wp-admin/plugins.php for activation/deactivation, etc.

Adding users to GitHub widget

Our minimum is to add a form to the dashboard to request collaborator access on GitHub. This should look and function like Zendesk ticket form... in fact I am guessing it will generate a Zendesk ticket so this can be actioned manually.

Further down the road we’ll need some kind of mass user management, possibly by converting the VIP Go concept of clients to organisations and allowing many organisations to be associated with a single site… but possibly not. At this point the widget can be removed.

Ticket priority for ZD tickets is not set correctly.

when you submit a ticket through the VIP Dashboard for VIP Go sites, the ticket priority does not get properly set. When they submitted a “high” priority ticket, it turns up as “normal” in our queue. This was tested and confirmed.

Add linting of jsx files via jshint

Currently jsx files aren't being linted by jshint and make lint - we need to tweak the config to make it see them as valid files (and parse / lint them as jsx).

Simplify new ticket form

While this functionality would be better in the new client dashboard we should allow clients to request review of PRs through this form.

Todo:

  • simplify checkboxes in current form (remove current options, have new ticket and review PR options)
  • add $group (currently unused) to email subject

Unauthorised errors on apps request

This might be a dupe, but I'd like to record it for triaging. I sent the Dashboard out to a few clients, and one came back with this error…

image 3

Some errors in the graphql from the main /apps request:

{"operationName":"Apps","variables":{"first":10,"after":null},"query":"query Apps($first: Int, $after: String) {\n  apps(after: $after, first: $first) {\n    total\n    nextCursor\n    edges {\n      id\n      name\n      repo\n      type\n      primaryEnvironment {\n        isMultisite\n        __typename\n      }\n      organization {\n        id\n        name\n        __typename\n      }\n      environments {\n        id\n        name\n        defaultDomain\n        branch\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n}\n"}

VIP Dashboard fails to load admin-activated plugins

In case an action is hooked to load_plugins action at priority 5 form within a plugin or mu-plugin, the VIP Dashboard fails to load plugins due to a bug in WordPress core

Also, as a best practice, we should never hook more actions to the hook from which the callback is called.

The VIP Dashboard basically initialises the WPCOM_VIP_Plugins_UI class from within plugins_loaded at standard priority 10 and that class hooks the plugin loading logic to the same hook ( plugins_loaded ) at priority 5.

In case something else is hooked to plugins_loaded at priority 5, the WPCOM_VIP_Plugins_UI:: include_active_plugins method never gets invoked.

Add documentation

We need a decent readme.md with details about gulp, dependencies etc.

Shared nor FPP plugins are being loaded on frontend

require __DIR__ . '/plugins-ui/plugins-ui.php'; has to happen not only when is_admin() equals true, but also on frontend requests in order to have plugins successfully loaded and working.

It breaks eg. Safe redirect manager

Adjust VIP Dashboard page top-header

  1. There's a random comma that's hard to see, but comes from this line.

Screenshot 2020-10-20 at 22 10 29

  1. The styling of the VIP admin page, to make the top-header full width, removes some default padding on the page.

Here's what the lockout message looks like on the WP default Dashboard page (notice the gap between the right edge of the admin menu, and the left orange strip of the lockout message):

Screenshot 2020-10-20 at 22 13 20

Here's the current view of the lockout message on the VIP Dashboard page (notice there's no gap between the right edge of the admin menu and the orange strip on the left side of the lockout message):

Screenshot 2020-10-20 at 22 00 41

With some amended styling, the top-header could respect the default padding and replicate it on the other side as well:

Screenshot 2020-10-20 at 22 07 13

VIP Go-centric Welcome widget

Is this were I would request the VIP Go sites to have a Go-focused Welcome to VIP widget?

Referring to
https://cldup.com/w41-y16S7Q.png

Links to update for Go sites:
"VIP Go Documentation" -> https://vip.wordpress.com/documentation/vip-go/

"VIP Plugins" - unsure, I'm still thinking on this and "Plugins" link in black bar

"Launch Checklist" -> https://vip.wordpress.com/documentation/vip-go/launch-checklist/

"Your VIP Toolbox" rename to "Accessing VIP Support" -> https://vip.wordpress.com/vip-go-toolbox/ (not yet published)

Activating a plugin with a fatal error is not possible and returns no error

When someone attempts to activate a plugin containing a fatal error in vanilla WordPress, the plugin is not activated and the UI displays an error message explaining why the plugin wasn't activated.

When someone attempts to activate a plugin containing a fatal error in VIP Go, the plugin is not activated but no error message is shown.

An error message should be displayed as it is in vanilla WordPress.

Delete unused image assets

A couple of images that were initially used on the static HTML mock have persisted across commits, which are now completely irrelevant and show be discarded.

Generating a token when not signed in throws silent error

{"operationName":"GenerateTokenMutation","variables":{},"query":"mutation GenerateTokenMutation($input: UserTokenGenerationInput) {\n  generateUserToken(input: $input) {\n    jwt\n    __typename\n  }\n}\n"}

Response with 401 header:

{"status":"error","message":"Unauthorized"}

Browser-specific error on Domains panel

When trying to add a new domain in the App dashboard (https://dashboard.wpvip.com/apps/{site_id}/domains/production) in the Firefox browser, the browser stops accepting new characters and freezes.

This occurred with multiple

  • Site IDs
  • character counts

How to reproduce:

  • Open Firefox (my version is 72.0.1)
  • Navigate to the Domain panel on the App Dashboard
  • Click on plus sign to add domain
  • Begin typing a string of characters into the text field to the left of the "Add Domain" button

This issue seems specific to Firefox and did not occur on Chrome or Safari.

103632-zen

Implement get_columns() in WPCOM_VIP_Plugins_UI_List_Table

Core > 4.3.0 ends up calling WP_List_Table::get_columns() via WP_List_Table::get_column_info() -> WP_List_Table::get_primary_column_name().

If WP_List_Table::get_columns() is not overridden, die() is called:

public function get_columns() {
    die( 'function WP_List_Table::get_columns() must be over-ridden in a sub-class.' );
}

This breaks the plugins UI page (though Featured Plugins still work).

Fix plugins menu page slug

Is currently wpcom-vip-plugins, the Dashboard is linking to vip-plugins. I like the latter, let's just register the plugins page there.

Make stats responsive

For a future iteration, since we're not including Stats right now.

Previously in Stats-land: #24

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.