-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Plugin Management: Implement multi-site(large screen) view for the pl…
…ugin management (#66219) * Implement large screen view for multi-site plugins page * Redirect to plugin details when clicked on sites count * Update types * Minor code refactor * Fix all sites count * Update page subtitle and link the plugin name to details page * Append search term when switching tabs * Update nav tab for mobile view
- Loading branch information
Showing
18 changed files
with
690 additions
and
82 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
client/jetpack-cloud/sections/plugin-management/plugins-overview/style.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { useTranslate } from 'i18n-calypso'; | ||
| import { ReactElement } from 'react'; | ||
| import PluginsTable from './plugins-table'; | ||
| import type { Plugin } from './types'; | ||
| import type { SiteData } from 'calypso/state/ui/selectors/site-data'; | ||
|
|
||
| import './style.scss'; | ||
|
|
||
| interface Props { | ||
| plugins: Array< Plugin >; | ||
| isLoading: boolean; | ||
| selectedSite: SiteData; | ||
| searchTerm: string; | ||
| } | ||
| export default function PluginManagementV2( { | ||
| plugins, | ||
| isLoading, | ||
| selectedSite, | ||
| searchTerm, | ||
| }: Props ): ReactElement { | ||
| const translate = useTranslate(); | ||
| const columns = [ | ||
| { | ||
| key: 'plugin', | ||
| title: translate( 'Installed Plugins' ), | ||
| }, | ||
| { | ||
| key: 'sites', | ||
| title: translate( 'Sites' ), | ||
| smallColumn: true, | ||
| colSpan: 2, | ||
| }, | ||
| ]; | ||
|
|
||
| if ( ! plugins.length && ! isLoading ) { | ||
| let emptyStateMessage = translate( 'No plugins found' ); | ||
| if ( searchTerm ) { | ||
| emptyStateMessage = translate( 'No results found. Please try refining your search.' ); | ||
| } | ||
| return <div className="plugin-management-v2__no-sites">{ emptyStateMessage }</div>; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="plugin-management-v2__main-content-container"> | ||
| <PluginsTable | ||
| items={ plugins } | ||
| columns={ columns } | ||
| isLoading={ isLoading } | ||
| selectedSite={ selectedSite } | ||
| /> | ||
| </div> | ||
| ); | ||
| } |
43 changes: 43 additions & 0 deletions
43
client/my-sites/plugins/plugin-management-v2/plugin-row-formatter/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { Gridicon, Button } from '@automattic/components'; | ||
| import type { Plugin } from '../types'; | ||
| import type { ReactChild, ReactElement } from 'react'; | ||
|
|
||
| import './style.scss'; | ||
|
|
||
| interface Props { | ||
| item: Plugin; | ||
| columnKey: string; | ||
| } | ||
|
|
||
| export default function PluginRowFormatter( { item, columnKey }: Props ): ReactElement | any { | ||
| const PluginDetailsButton = ( props: { className: string; children: ReactChild } ) => { | ||
| return <Button borderless compact href={ `/plugins/${ item.slug }` } { ...props } />; | ||
| }; | ||
|
|
||
| switch ( columnKey ) { | ||
| case 'plugin': | ||
| return ( | ||
| <span className="plugin-row-formatter__plugin-name-container"> | ||
| { item.icon ? ( | ||
| <img | ||
| className="plugin-row-formatter__plugin-icon" | ||
| src={ item.icon } | ||
| alt={ item.name } | ||
| /> | ||
| ) : ( | ||
| <Gridicon className="plugin-row-formatter__plugin-icon has-opacity" icon="plugins" /> | ||
| ) } | ||
| <PluginDetailsButton className="plugin-row-formatter__plugin-name"> | ||
| { item.name } | ||
| </PluginDetailsButton> | ||
| <span className="plugin-row-formatter__overlay"></span> | ||
| </span> | ||
| ); | ||
| case 'sites': | ||
| return ( | ||
| <PluginDetailsButton className="plugin-row-formatter__sites-count-button"> | ||
| { Object.keys( item.sites ).length } | ||
| </PluginDetailsButton> | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.