Tweak extensions page texts (#1550)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

docs/extensions/usage/README.md

@@ -1,3 +1,23 @@
 # Using Extensions
 
-TBD
+The features that Lens includes out-of-the-box are just the start.
+Lens extensions let you add new features to your installation to support your workflow.
+Rich extensibility model lets extension authors plug directly into the Lens UI and contribute functionality through the same APIs used by Lens itself.
+
+![Extensions](images/extensions.png)
+
+## Installing an Extension
+
+You can install a dowloaded extension .tgz package by going to **File** > **Extensions** (**Lens** > **Extensions** on Mac). Alternatively you can point an URL to .tgz file. An installed extension is enabled automatically.
+
+## Enabling an Extension
+
+Go to **File** > **Extensions** (**Lens** > **Extensions** on Mac) and click "Enable" button.
+
+## Disabling an Extension
+
+Go to **File** > **Extensions** (**Lens** > **Extensions** on Mac) and click "Disable" button.
+
+## Uninstalling an Extension
+
+Go to **File** > **Extensions** (**Lens** > **Extensions** on Mac) and click "Uninstall" button.

src/renderer/components/+extensions/extensions.tsx

@@ -379,7 +379,7 @@ export class Extensions extends React.Component {
   }
 
   renderExtensions() {
-    const { extensions, extensionsPath, search } = this;
+    const { extensions, search } = this;
 
     if (!extensions.length) {
       return (
@@ -387,7 +387,7 @@ export class Extensions extends React.Component {
           <Icon material="info"/>
           <div>
             {search && <p>No search results found</p>}
-            {!search && <p>There are no extensions in <code>{extensionsPath}</code></p>}
+            {!search && <p>There are no installed extensions. See list of <a href="https://github.com/lensapp/lens-extensions/blob/main/README.md" target="_blank" rel="noreferrer">available extensions</a>.</p>}
           </div>
         </div>
       );
@@ -444,10 +444,8 @@ export class Extensions extends React.Component {
         <PageLayout showOnTop className="Extensions flex column gaps" header={topHeader} contentGaps={false}>
           <h2>Lens Extensions</h2>
           <div>
-            The features that Lens includes out-of-the-box are just the start.
+            Add new features and functionality via Lens Extensions.
-            Lens extensions let you add new features to your installation to support your workflow.
+            Check out documentation to <a href={`${docsUrl}/latest/extensions/usage/`} target="_blank" rel="noreferrer">learn more</a> or see the list of <a href="https://github.com/lensapp/lens-extensions/blob/main/README.md" target="_blank" rel="noreferrer">available extensions</a>.
-            Rich extensibility model lets extension authors plug directly into the Lens UI and contribute functionality through the same APIs used by Lens itself.
-            Check out documentation to <a href={`${docsUrl}/latest/extensions/usage/`} target="_blank" rel="noreferrer">learn more</a>.
           </div>
 
           <div className="install-extension flex column gaps">
@@ -489,7 +487,7 @@ export class Extensions extends React.Component {
           <h2>Installed Extensions</h2>
           <div className="installed-extensions flex column gaps">
             <SearchInput
-              placeholder="Search extensions by name or description"
+              placeholder="Search installed extensions by name or description"
               value={this.search}
               onChange={(value) => this.search = value}
             />