Finished bulk actions connections

Automattic · Oct 21, 2024 · 6807863 · 6807863
1 parent 47959d9
commit 6807863
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 27 deletions.
diff --git a/client/my-sites/plugins/plugins-list/index.jsx b/client/my-sites/plugins/plugins-list/index.jsx
@@ -232,9 +232,8 @@ export class PluginsList extends Component {
 		} );
 	}
 
-	bulkActionDialog = ( actionName, selectedPlugin ) => {
-		const { plugins, allSites, showPluginActionDialog } = this.props;
-		const selectedPlugins = selectedPlugin ? [ selectedPlugin ] : plugins.filter( this.isSelected );
+	bulkActionDialog = ( actionName, selectedPlugins ) => {
+		const { allSites, showPluginActionDialog } = this.props;
 		const isJetpackIncluded = selectedPlugins.some( ( { slug } ) => slug === 'jetpack' );
 
 		const ALL_ACTION_CALLBACKS = {
@@ -361,10 +360,6 @@ export class PluginsList extends Component {
 		this.removePluginStatuses();
 	};
 
-	removePluginDialog = ( selectedPlugin ) => {
-		this.bulkActionDialog( PluginActions.REMOVE, selectedPlugin );
-	};
-
 	maybeShowDisconnectNotice() {
 		if ( ! this.state.disconnectJetpackNotice ) {
 			return;
@@ -409,8 +404,6 @@ export class PluginsList extends Component {
 	}
 
 	render() {
-		const selectedSiteSlug = this.props.selectedSiteSlug ? this.props.selectedSiteSlug : '';
-
 		return (
 			<div className="plugins-list">
 				<PluginsListDataViews
@@ -420,6 +413,7 @@ export class PluginsList extends Component {
 					pluginsWithUpdates={ this.props.pluginsWithUpdates }
 					activePlugins={ this.props.activePlugins }
 					inactivePlugins={ this.props.inactivePlugins }
+					bulkActionDialog={ this.bulkActionDialog }
 				/>
 			</div>
 		);

diff --git a/client/my-sites/plugins/plugins-list/plugins-list-dataviews.tsx b/client/my-sites/plugins/plugins-list/plugins-list-dataviews.tsx
@@ -6,6 +6,7 @@ import { find } from 'lodash';
 import { useEffect, useMemo, useState } from 'react';
 import ItemsDataViews from 'calypso/a8c-for-agencies/components/items-dashboard/items-dataviews';
 import { navigate } from 'calypso/lib/navigate';
+import { PluginActions } from '../hooks/types';
 
 import './style.scss';
 
@@ -16,6 +17,7 @@ interface Props {
 	activePlugins: Array;
 	inactivePlugins: Array;
 	onSearch?: ( search: string ) => void;
+	bulkActionDialog: ( action: string, plugins: Array ) => void;
 }
 
 export const PLUGINS_STATUS = {
@@ -31,9 +33,8 @@ export default function PluginsListDataViews( {
 	activePlugins,
 	inactivePlugins,
 	onSearch,
+	bulkActionDialog,
 }: Props ) {
-	// return <>something</>;
-
 	// Add flags for plugins status: active, inactive, updates
 	// TODO: Check the best way of doind this. We can probably move this to the backend
 	currentPlugins.map( ( plugin ) => {
@@ -100,7 +101,7 @@ export default function PluginsListDataViews( {
 				render: ( { item } ) => {
 					return (
 						<>
-							{ item.icon && <img src={ item.icon } /> }
+							{ item.icon && <img alt={ item.name } src={ item.icon } /> }
 							{ ! item.icon && (
 								<Icon
 									size={ 32 }
@@ -164,8 +165,8 @@ export default function PluginsListDataViews( {
 		},
 		{
 			href: `some-url`,
-			callback: ( data ) => {
-				console.log( 'Activate Plugin, data: ', data );
+			callback: ( plugins ) => {
+				bulkActionDialog( PluginActions.ACTIVATE, plugins );
 			},
 			label: translate( 'Activate' ),
 			isExternalLink: true,
@@ -175,8 +176,8 @@ export default function PluginsListDataViews( {
 		},
 		{
 			href: `some-url`,
-			callback: () => {
-				console.log( 'Deactivate' );
+			callback: ( plugins ) => {
+				bulkActionDialog( PluginActions.DEACTIVATE, plugins );
 			},
 			label: translate( 'Deactivate' ),
 			isExternalLink: true,
@@ -186,8 +187,8 @@ export default function PluginsListDataViews( {
 		},
 		{
 			href: `some-url`,
-			callback: () => {
-				console.log( 'Enable Autoupdate' );
+			callback: ( plugins ) => {
+				bulkActionDialog( PluginActions.ENABLE_AUTOUPDATES, plugins );
 			},
 			label: translate( 'Enable Autoupdate' ),
 			isExternalLink: true,
@@ -196,8 +197,8 @@ export default function PluginsListDataViews( {
 		},
 		{
 			href: `some-url`,
-			callback: () => {
-				console.log( 'Disable Autoupdate' );
+			callback: ( plugins ) => {
+				bulkActionDialog( PluginActions.DISABLE_AUTOUPDATES, plugins );
 			},
 			label: translate( 'Disable Autoupdate' ),
 			isExternalLink: true,
@@ -206,8 +207,8 @@ export default function PluginsListDataViews( {
 		},
 		{
 			href: `some-url`,
-			callback: () => {
-				console.log( 'Remove' );
+			callback: ( plugins ) => {
+				bulkActionDialog( PluginActions.REMOVE, plugins );
 			},
 			label: translate( 'Remove' ),
 			isExternalLink: true,
@@ -225,7 +226,6 @@ export default function PluginsListDataViews( {
 	}, [ dataViewsState.search, onSearch ] );
 
 	const { data, paginationInfo } = useMemo( () => {
-		console.log( 'dataViewsState', dataViewsState );
 		return filterSortAndPaginate( currentPlugins, dataViewsState, fields );
 	}, [ currentPlugins, dataViewsState, fields ] );
 
@@ -242,9 +242,6 @@ export default function PluginsListDataViews( {
 					actions: actions,
 					dataViewsState: dataViewsState,
 					setDataViewsState: setDataViewsState,
-					onSelectionChange: ( items ) => {
-						console.log( 'items: ', items );
-					},
 					defaultLayouts: { table: {} },
 				} }
 			/>

diff --git a/client/my-sites/plugins/plugins-list/style.scss b/client/my-sites/plugins/plugins-list/style.scss
@@ -66,7 +66,7 @@ body.is-section-plugins .plugin-management-wrapper {
             border-radius: 2px;
 
             .dataviews-view-table__row {
-                img, .dataviews-view-table__row svg {
+                img, svg {
                     max-width: 35px;
                     margin-right: 15px;
                 }