Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Adding DataViews to Plugin Management #95561

Draft
wants to merge 5 commits into
base: trunk
Choose a base branch
from
+356 −775
Draft

Adding DataViews to Plugin Management #95561

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
84e23d2
Connected DataViews to /plugins/manage
paulopmt1 Oct 21, 2024
47959d9
Removed unnecessary filters
paulopmt1 Oct 21, 2024
6807863
Finished bulk actions connections
paulopmt1 Oct 21, 2024
b991f56
Remove the unnecessary code and making sure the actions work as expected
paulopmt1 Oct 21, 2024
d6138b0
Add a global load state for plugin actions
paulopmt1 Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 11 additions & 103 deletions client/my-sites/plugins/main.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ import {
WPCOM_FEATURES_UPLOAD_PLUGINS,
} from '@automattic/calypso-products/src';
import page from '@automattic/calypso-router';
import { Button, Count } from '@automattic/components';
import { Button } from '@automattic/components';
import { subscribeIsWithinBreakpoint, isWithinBreakpoint } from '@automattic/viewport';
import { Icon, upload } from '@wordpress/icons';
import clsx from 'clsx';
import { localize } from 'i18n-calypso';
import { capitalize, find, flow, isEmpty } from 'lodash';
import { capitalize, flow, isEmpty } from 'lodash';
import { Component } from 'react';
import { connect } from 'react-redux';
import DocumentHead from 'calypso/components/data/document-head';
Expand All @@ -18,10 +18,6 @@ import QueryPlugins from 'calypso/components/data/query-plugins';
import QuerySiteFeatures from 'calypso/components/data/query-site-features';
import EmptyContent from 'calypso/components/empty-content';
import NavigationHeader from 'calypso/components/navigation-header';
import Search from 'calypso/components/search';
import SectionNav from 'calypso/components/section-nav';
import NavItem from 'calypso/components/section-nav/item';
import NavTabs from 'calypso/components/section-nav/tabs';
import MissingPaymentNotification from 'calypso/jetpack-cloud/components/missing-payment-notification';
import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
import urlSearch from 'calypso/lib/url-search';
Expand Down Expand Up @@ -186,38 +182,6 @@ export class PluginsMain extends Component {
);
}

getFilters() {
const { translate, search } = this.props;
const siteFilter = `${ this.props.selectedSiteSlug ? '/' + this.props.selectedSiteSlug : '' }${
search ? '?s=' + search : ''
}`;

return [
{
title: isWithinBreakpoint( '<480px' )
? translate( 'All Plugins', { context: 'Filter label for plugins list' } )
: translate( 'All', { context: 'Filter label for plugins list' } ),
path: '/plugins/manage' + siteFilter,
id: 'all',
},
{
title: translate( 'Active', { context: 'Filter label for plugins list' } ),
path: '/plugins/active' + siteFilter,
id: 'active',
},
{
title: translate( 'Inactive', { context: 'Filter label for plugins list' } ),
path: '/plugins/inactive' + siteFilter,
id: 'inactive',
},
{
title: translate( 'Updates', { context: 'Filter label for plugins list' } ),
path: '/plugins/updates' + siteFilter,
id: 'updates',
},
];
}

isFetchingPlugins() {
return this.props.requestingPluginsForSites;
}
Expand All @@ -236,15 +200,6 @@ export class PluginsMain extends Component {
return count;
}

getSelectedText() {
const found = find( this.getFilters(), ( filterItem ) => this.props.filter === filterItem.id );
if ( 'undefined' !== typeof found ) {
const count = this.getPluginCount( found.id );
return { title: found.title, count };
}
return '';
}

getEmptyContentUpdateData() {
const { translate } = this.props;
const emptyContentData = { illustration: '/calypso/images/illustrations/illustration-ok.svg' };
Expand Down Expand Up @@ -385,6 +340,10 @@ export class PluginsMain extends Component {
searchTerm={ search }
filter={ this.props.filter }
requestPluginsError={ this.props.requestPluginsError }
pluginsWithUpdates={ this.props.pluginsWithUpdates }
activePlugins={ this.props.activePlugins }
inactivePlugins={ this.props.inactivePlugins }
onSearch={ this.props.doSearch }
/>
);

Expand Down Expand Up @@ -432,21 +391,6 @@ export class PluginsMain extends Component {
return <NoPermissionsError title={ this.props.translate( 'Plugins', { textOnly: true } ) } />;
}

const navItems = this.getFilters().map( ( filterItem ) => {
if ( 'updates' === filterItem.id && ! this.getUpdatesTabVisibility() ) {
return null;
}

const attr = {
key: filterItem.id,
path: filterItem.path,
selected: filterItem.id === this.props.filter,
count: this.getPluginCount( filterItem.id ),
};

return <NavItem { ...attr }>{ filterItem.title }</NavItem>;
} );

const { isJetpackCloud, selectedSite } = this.props;

let pageTitle;
Expand All @@ -456,15 +400,6 @@ export class PluginsMain extends Component {
pageTitle = this.props.translate( 'Installed Plugins', { textOnly: true } );
}

const { title, count } = this.getSelectedText();

const selectedTextContent = (
<span>
{ title }
{ count ? <Count count={ count } compact /> : null }
</span>
);

const currentPlugins = this.getCurrentPlugins();

return (
Expand Down Expand Up @@ -528,45 +463,14 @@ export class PluginsMain extends Component {
</div>
</div>
) }
<div className="plugins__main plugins__main-updated">
<div className="plugins__main-header">
<SectionNav
applyUpdatedStyles
selectedText={ selectedTextContent }
className="plugins-section-nav"
>
<NavTabs selectedText={ title } selectedCount={ count }>
{ navItems }
</NavTabs>
</SectionNav>
</div>
</div>
</div>
</div>
<div
className={ clsx( 'plugins__main-content', {
'plugins__main-content-jc': isJetpackCloud,
} ) }
>
<div className="plugins__content-wrapper">
{
// Hide the search box only when the request to fetch plugins fail, and there are no sites.
! ( this.props.requestPluginsError && ! currentPlugins?.length ) && (
<div className="plugins__search">
<Search
hideFocus
isOpen
onSearch={ this.props.doSearch }
initialValue={ this.props.search }
hideClose={ ! this.props.search }
analyticsGroup="Plugins"
placeholder={ this.props.translate( 'Search plugins' ) }
/>
</div>
)
}
{ this.renderPluginsContent() }
</div>
<div className="plugins__content-wrapper">{ this.renderPluginsContent() }</div>
</div>
</div>
</>
Expand All @@ -585,6 +489,8 @@ export default flow(
const visibleSiteIds = siteObjectsToSiteIds( getVisibleSites( sites ) ) ?? [];
const siteIds = siteObjectsToSiteIds( sites ) ?? [];
const pluginsWithUpdates = getPlugins( state, siteIds, 'updates' );
const activePlugins = getPlugins( state, siteIds, 'active' );
const inactivePlugins = getPlugins( state, siteIds, 'inactive' );
const allPlugins = getPlugins( state, siteIds, 'all' );
const jetpackNonAtomic =
isJetpackSite( state, selectedSiteId ) && ! isAtomicSite( state, selectedSiteId );
Expand Down Expand Up @@ -614,6 +520,8 @@ export default flow(
currentPluginsOnVisibleSites: getPlugins( state, visibleSiteIds, filter ),
pluginUpdateCount: pluginsWithUpdates && pluginsWithUpdates.length,
pluginsWithUpdates,
activePlugins,
inactivePlugins,
allPluginsCount: allPlugins && allPlugins.length,
requestingPluginsForSites:
isRequestingForSites( state, siteIds ) || isRequestingForAllSites( state ),
Expand Down
Loading
Loading