getPendingPlugins,
getPluginUpdates,
Plugin,
- PluginPending
+ PluginPending,
+ getInstalledPlugins
} from '../../api/plugins';
import { Edition, EditionStatus } from '../../api/marketplace';
import { RawQuery } from '../../helpers/query';
fetchQueryPlugins = () => {
const query = parseQuery(this.props.location.query);
+ let fetchFunction = this.fetchAllPlugins;
+
if (query.filter === 'updates') {
- this.fetchUpdatesOnly();
- } else {
- this.fetchAllPlugins();
+ fetchFunction = getPluginUpdates;
+ } else if (query.filter === 'installed') {
+ fetchFunction = getInstalledPlugins;
}
- };
-
- fetchAllPlugins = () => {
- this.setState({ loadingPlugins: true });
- Promise.all([getInstalledPluginsWithUpdates(), getAvailablePlugins()]).then(
- ([installed, available]) => {
- if (this.mounted) {
- this.setState({
- loadingPlugins: false,
- plugins: sortBy(uniqBy([...installed, ...available.plugins], 'key'), 'name')
- });
- }
- },
- this.stopLoadingPlugins
- );
- };
- fetchUpdatesOnly = () => {
this.setState({ loadingPlugins: true });
- getPluginUpdates().then(plugins => {
+ fetchFunction().then((plugins: Plugin[]) => {
if (this.mounted) {
- this.setState({ loadingPlugins: false, plugins });
+ this.setState({
+ loadingPlugins: false,
+ plugins: sortBy(plugins, 'name')
+ });
}
}, this.stopLoadingPlugins);
};
+ fetchAllPlugins = (): Promise<Plugin[] | void> => {
+ return Promise.all([getInstalledPluginsWithUpdates(), getAvailablePlugins()]).then(
+ ([installed, available]) => uniqBy([...installed, ...available.plugins], 'key'),
+ this.stopLoadingPlugins
+ );
+ };
+
fetchPendingPlugins = () =>
getPendingPlugins().then(
pending => {
<Helmet title={translate('marketplace.page')} />
<div className="page-notifs">
{standaloneMode && (
- <PendingActions refreshPending={this.fetchPendingPlugins} pending={pending} />
+ <PendingActions pending={pending} refreshPending={this.fetchPendingPlugins} />
)}
</div>
<Header />
<EditionBoxes
canInstall={standaloneMode && !this.props.editionsReadOnly}
canUninstall={standaloneMode}
+ editionStatus={editionStatus}
editions={editions}
loading={this.props.loadingEditions}
- editionStatus={editionStatus}
updateCenterActive={this.props.updateCenterActive}
updateEditionStatus={this.props.setEditionStatus}
/>
{loadingPlugins && <i className="spinner" />}
{!loadingPlugins && (
<PluginsList
- plugins={filteredPlugins}
pending={pending}
+ plugins={filteredPlugins}
readOnly={!standaloneMode}
refreshPending={this.fetchPendingPlugins}
updateQuery={this.updateQuery}
return (
<PluginInstalled
plugin={plugin}
- status={status}
readOnly={this.props.readOnly}
refreshPending={this.props.refreshPending}
+ status={status}
updateQuery={this.props.updateQuery}
/>
);
return (
<PluginAvailable
plugin={plugin}
- status={status}
readOnly={this.props.readOnly}
refreshPending={this.props.refreshPending}
+ status={status}
updateQuery={this.props.updateQuery}
/>
);
<div className="boxed-group boxed-group-inner" id="marketplace-plugins">
<ul>
{this.props.plugins.map(plugin => (
- <li key={plugin.key} className="panel panel-vertical">
+ <li className="panel panel-vertical" key={plugin.key}>
<table className="marketplace-plugin-table">
<tbody>{this.renderPlugin(plugin)}</tbody>
</table>
const { query, updateCenterActive } = this.props;
const radioOptions = [
{ label: translate('marketplace.all'), value: 'all' },
+ { label: translate('marketplace.installed'), value: 'installed' },
{
disabled: !updateCenterActive,
label: translate('marketplace.updates_only'),
}
];
return (
- <div id="marketplace-search" className="big-spacer-bottom">
- <div className="display-inline-block text-top nowrap abs-width-150 spacer-right">
+ <div className="big-spacer-bottom" id="marketplace-search">
+ <div className="display-inline-block text-top nowrap abs-width-240 spacer-right">
<RadioToggle
name="marketplace-filter"
onCheck={this.handleFilterChange}
<div className="spacer-top">
{plugin.updates.map((update, idx) => (
<PluginUpdateButton
+ disabled={this.state.loading}
key={idx}
onClick={this.handleUpdate}
update={update}
- disabled={this.state.loading}
/>
))}
</div>
</a>
</p>
)}
- {loading && <i className="spinner spacer-right" />}
+ {loading && <i className="spinner spacer-right little-spacer-top little-spacer-bottom" />}
{isPluginInstalled(plugin) && (
<div className="display-inlin-block">
{plugin.updates &&
plugin.updates.map((update, idx) => (
<PluginUpdateButton
+ disabled={loading}
key={idx}
onClick={this.handleUpdate}
update={update}
- disabled={loading}
/>
))}
<button
className="js-uninstall button-red little-spacer-left"
disabled={loading}
- onClick={this.handleUninstall}>
+ onClick={this.handleUninstall}
+ type="button">
{translate('marketplace.uninstall')}
</button>
</div>
<button
className="js-install"
disabled={loading || (plugin.termsAndConditionsUrl != null && !this.state.acceptTerms)}
- onClick={this.handleInstall}>
+ onClick={this.handleInstall}
+ type="button">
{translate('marketplace.install')}
</button>
)}