diff --git a/src/renderer/components/+extensions/extensions.scss b/src/renderer/components/+extensions/extensions.scss index c2c1a3a331..5e5ae50cee 100644 --- a/src/renderer/components/+extensions/extensions.scss +++ b/src/renderer/components/+extensions/extensions.scss @@ -1,11 +1,13 @@ .Extensions { - .extension-list { - .extension { - display: flex; - margin-bottom: $margin; - padding: $padding $padding * 2; - background: $colorVague; - } + .extension { + --flex-gap: $padding / 3; + padding: $padding $padding * 2; + background: $colorVague; + border-radius: $radius; + } + + .extensions-path { + word-break: break-all; } .info-col { diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx index d98384d873..88a3bc2662 100644 --- a/src/renderer/components/+extensions/extensions.tsx +++ b/src/renderer/components/+extensions/extensions.tsx @@ -1,5 +1,7 @@ import "./extensions.scss"; -import React, { Fragment } from "react"; + +import { shell } from "electron"; +import React from "react"; import { computed, observable } from "mobx"; import { observer } from "mobx-react"; import { t, Trans } from "@lingui/macro"; @@ -7,6 +9,7 @@ import { _i18n } from "../../i18n"; import { Button } from "../button"; import { WizardLayout } from "../layout/wizard-layout"; import { Input } from "../input"; +import { Icon } from "../icon"; import { extensionLoader } from "../../../extensions/extension-loader"; import { extensionManager } from "../../../extensions/extension-manager"; @@ -19,32 +22,43 @@ export class Extensions extends React.Component { return extensions.filter(ext => ext.name.includes(this.search)) } - disable(name: string) { + get extensionsPath() { + return extensionManager.localFolderPath; } renderInfo() { return ( - +

Lens Extension API

-

+

The Extensions API in Lens allows users to customize and enhance the Lens experience by creating their own menus or page content that is extended from the existing pages. Many of the core features of Lens are built as extensions and use the same Extension API. -

-

+

+
+ Extensions loaded from: +
+ {this.extensionsPath} + shell.openPath(this.extensionsPath)} + /> +
+
+
Check out documentation to learn more -

- +
+
) } renderExtensions() { - const extensionsPath = extensionManager.localFolderPath; - const { extensions, search } = this; + const { extensions, extensionsPath, search } = this; if (!extensions.length) { return (
{search && No search results found} - {!search &&

There are no extensions in {extensionsPath}

} + {!search &&

There are no extensions in {extensionsPath}

}
) } @@ -52,10 +66,10 @@ export class Extensions extends React.Component { return (
- {name} - {description} +
Package: {name}
+
Description: {description}
-
@@ -67,16 +81,15 @@ export class Extensions extends React.Component { return (

Extensions

-
- {/* TODO: Use generic search input after https://github.com/lensapp/lens/pull/1114 will be pushed */} - this.search = value} - /> + this.search = value} + /> +
{this.renderExtensions()}