Fix UX for incompatible plugins (#816)

wulkano · Mar 26, 2020 · 9917c3c · 9917c3c
1 parent 98f3d40
commit 9917c3c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/main/plugin.js b/main/plugin.js
@@ -41,6 +41,7 @@ class InstalledPlugin extends BasePlugin {
     const {homepage, links} = this.json;
     this.link = homepage || (links && links.homepage);
     this.isCompatible = semver.satisfies(app.getVersion(), this.json.kapVersion || '*');
+    this.kapVersion = this.json.kapVersion;
 
     try {
       this.plugin = require(this.pluginPath);

diff --git a/renderer/components/preferences/categories/plugins/index.js b/renderer/components/preferences/categories/plugins/index.js
@@ -33,7 +33,13 @@ class Plugins extends React.Component {
     const allPlugins = [
       ...pluginsInstalled,
       ...pluginsFromNpm
-    ].sort((a, b) => a.prettyName.localeCompare(b.prettyName));
+    ].sort((a, b) => {
+      if (a.isCompatible !== b.isCompatible) {
+        return b.isCompatible - a.isCompatible;
+      }
+
+      return a.prettyName.localeCompare(b.prettyName);
+    });
 
     return (
       <Category>

diff --git a/renderer/components/preferences/categories/plugins/plugin.js b/renderer/components/preferences/categories/plugins/plugin.js
@@ -41,8 +41,10 @@ PluginTitle.propTypes = {
 };
 
 const Plugin = ({plugin, checked, disabled, onTransitionEnd, onClick, loading, openConfig, tabIndex}) => {
+  const requiredVersion = !plugin.isCompatible && `Requires Kap version ${plugin.kapVersion}.`;
+
   const error = !plugin.isCompatible && (
-    <div className="invalid" title={`This plugin is not supported by the current Kap version. Requires ${plugin.kapVersion}`}>
+    <div className="invalid" title={`This plugin is not supported. ${requiredVersion}`}>
       <ErrorIcon fill="#ff6059" hoverFill="#ff6059" onClick={openConfig}/>
       <style jsx>{`
         .invalid {
@@ -94,7 +96,7 @@ const Plugin = ({plugin, checked, disabled, onTransitionEnd, onClick, loading, o
           label={plugin.version}
           onClick={onTitleClick}/>
       }
-      subtitle={plugin.description}
+      subtitle={[plugin.description, requiredVersion].filter(Boolean)}
     >
       {
         openConfig && plugin.isCompatible && (