Skip to content

Commit

Permalink
Feature flag for Jetpack cloud added (#96027)
Browse files Browse the repository at this point in the history 
* Feature flag for Jetpack cloud added

* Compatibility adjustments

* Add siteObjectsToSiteIds computing to the old interface only
  • Loading branch information
@paulopmt1
paulopmt1 authored Nov 5, 2024
1 parent 7a96cd3 commit cafd06d
Show file tree
Hide file tree
Showing 6 changed files with 1,036 additions and 29 deletions.
197 changes: 186 additions & 11 deletions client/my-sites/plugins/main.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import config from '@automattic/calypso-config';
import {
WPCOM_FEATURES_INSTALL_PURCHASED_PLUGINS,
WPCOM_FEATURES_MANAGE_PLUGINS,
WPCOM_FEATURES_UPLOAD_PLUGINS,
} from '@automattic/calypso-products/src';
import page from '@automattic/calypso-router';
import { Button } from '@automattic/components';
import { Button, Count } from '@automattic/components';
import { subscribeIsWithinBreakpoint, isWithinBreakpoint } from '@automattic/viewport';
import { Icon, upload } from '@wordpress/icons';
import clsx from 'clsx';
Expand All @@ -16,11 +17,16 @@ import DocumentHead from 'calypso/components/data/document-head';
import QueryJetpackSitesFeatures from 'calypso/components/data/query-jetpack-sites-features';
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';
import { siteObjectsToSiteIds } from 'calypso/my-sites/plugins/utils';
import { getVisibleSites, siteObjectsToSiteIds } from 'calypso/my-sites/plugins/utils';
import { recordGoogleEvent, recordTracksEvent } from 'calypso/state/analytics/actions';
import { appendBreadcrumb, updateBreadcrumbs } from 'calypso/state/breadcrumb/actions';
import { getBreadcrumbs } from 'calypso/state/breadcrumb/selectors';
Expand Down Expand Up @@ -64,6 +70,12 @@ export class PluginsMain extends Component {
};
}

componentWillMount() {
if ( ! config.isEnabled( 'bulk-plugin-management' ) ) {
import( './style-compatibilty.scss' );
}
}

componentDidUpdate( prevProps ) {
const {
currentPlugins,
Expand Down Expand Up @@ -152,7 +164,63 @@ export class PluginsMain extends Component {
}

getCurrentPlugins() {
return this.addWporgDataToPlugins( this.props.currentPlugins );
if ( config.isEnabled( 'bulk-plugin-management' ) ) {
return this.addWporgDataToPlugins( this.props.currentPlugins );
}

const { currentPlugins, currentPluginsOnVisibleSites, search, selectedSiteSlug } = this.props;
let plugins = selectedSiteSlug ? currentPlugins : currentPluginsOnVisibleSites;

if ( ! plugins ) {
return plugins;
}

if ( search ) {
plugins = plugins.filter( this.matchSearchTerms.bind( this, search ) );
}

return this.addWporgDataToPlugins( plugins );
}

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',
},
];
}

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 '';
}

// plugins for Jetpack sites require additional data from the wporg-data store
Expand Down Expand Up @@ -299,21 +367,78 @@ export class PluginsMain extends Component {
}

renderPluginsContent() {
return (
if ( config.isEnabled( 'bulk-plugin-management' ) ) {
return (
<PluginsList
header={ this.props.translate( 'Manage Plugins' ) }
plugins={ this.getCurrentPlugins() }
isPlaceholder={ this.shouldShowPluginListPlaceholders() }
isLoading={ this.props.requestingPluginsForSites }
isJetpackCloud={ this.props.isJetpackCloud }
searchTerm={ this.props.search }
filter={ this.props.filter }
requestPluginsError={ this.props.requestPluginsError }
activePlugins={ this.props.activePlugins }
inactivePlugins={ this.props.inactivePlugins }
onSearch={ this.props.doSearch }
/>
);
}

const currentPlugins = this.getCurrentPlugins();

// Hide the search box only when the request to fetch plugins fail, and there are no sites.
const searchPlugins = ! ( 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>
);

const { search, isJetpackCloud } = this.props;

const showInstalledPluginList =
isJetpackCloud || ! isEmpty( currentPlugins ) || this.isFetchingPlugins();

if ( ! showInstalledPluginList && ! search && ! this.props.requestPluginsError ) {
const emptyContentData = this.getEmptyContentData();
if ( emptyContentData ) {
return (
<EmptyContent
title={ emptyContentData.title }
illustration={ emptyContentData.illustration }
actionURL={ emptyContentData.actionURL }
action={ emptyContentData.action }
/>
);
}
}

const installedPluginsList = showInstalledPluginList && (
<PluginsList
header={ this.props.translate( 'Manage Plugins' ) }
plugins={ this.getCurrentPlugins() }
plugins={ currentPlugins }
isPlaceholder={ this.shouldShowPluginListPlaceholders() }
isLoading={ this.props.requestingPluginsForSites }
isJetpackCloud={ this.props.isJetpackCloud }
searchTerm={ this.props.search }
searchTerm={ search }
filter={ this.props.filter }
requestPluginsError={ this.props.requestPluginsError }
activePlugins={ this.props.activePlugins }
inactivePlugins={ this.props.inactivePlugins }
onSearch={ this.props.doSearch }
/>
);

return (
<div>
{ searchPlugins } { installedPluginsList }
</div>
);
}

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

let navItems = null;
let selectedTextContent = null;
const { title, count } = this.getSelectedText();

if ( ! config.isEnabled( 'bulk-plugin-management' ) ) {
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>;
} );

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

const { isJetpackCloud, selectedSite } = this.props;

let pageTitle;
Expand Down Expand Up @@ -429,6 +582,22 @@ export class PluginsMain extends Component {
</div>
</div>
) }

{ ! config.isEnabled( 'bulk-plugin-management' ) && (
<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
Expand All @@ -448,7 +617,7 @@ export default flow(
localize,
urlSearch,
connect(
( state, { isJetpackCloud } ) => {
( state, { filter, isJetpackCloud } ) => {
const sites = getSelectedOrAllSitesWithPlugins( state );
const selectedSite = getSelectedSite( state );
const selectedSiteId = getSelectedSiteId( state );
Expand Down Expand Up @@ -489,7 +658,13 @@ export default flow(
selectedSite && canJetpackSiteUpdateFiles( state, selectedSiteId ),
wporgPlugins: getAllWporgPlugins( state ),
isRequestingSites: isRequestingSites( state ),
currentPlugins: pluginsWithUpdatesAndStatuses,
currentPlugins: config.isEnabled( 'bulk-plugin-management' )
? pluginsWithUpdatesAndStatuses
: getPlugins( state, siteIds, filter ),
currentPluginsOnVisibleSites: config.isEnabled( 'bulk-plugin-management' )
? []
: getPlugins( state, siteObjectsToSiteIds( getVisibleSites( sites ) ) ?? [], filter ),
pluginsWithUpdates,
pluginUpdateCount: pluginsWithUpdates && pluginsWithUpdates.length,
activePlugins,
inactivePlugins,
Expand Down
Loading

0 comments on commit cafd06d

Please sign in to comment.