1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Enabling installation controls

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-02-11 11:32:53 +03:00
parent 707c36e276
commit 1473ca4e6f
2 changed files with 34 additions and 26 deletions

View File

@ -83,6 +83,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-clip: content-box; background-clip: content-box;
background-color: #3a404c; background-color: #3a404c;
background-size: 50px;
} }
.install button { .install button {
@ -139,4 +140,10 @@
position: absolute; position: absolute;
right: 0; right: 0;
} }
&.disabledButton {
&:after {
background-color: #ad7c0c;
}
}
} }

View File

@ -21,6 +21,7 @@ import enableExtensionInjectable from "../+extensions/enable-extension/enable-ex
import userExtensionsInjectable from "../+extensions/user-extensions/user-extensions.injectable"; import userExtensionsInjectable from "../+extensions/user-extensions/user-extensions.injectable";
import type { InstalledExtension } from "../../../extensions/extension-discovery/extension-discovery"; import type { InstalledExtension } from "../../../extensions/extension-discovery/extension-discovery";
import type { LensExtensionId } from "../../../extensions/lens-extension"; import type { LensExtensionId } from "../../../extensions/lens-extension";
import { cssNames } from "../../utils";
interface Dependencies { interface Dependencies {
installFromInput: (input: string) => Promise<void>; installFromInput: (input: string) => Promise<void>;
@ -41,16 +42,16 @@ function NonInjectedExtensionCard({
extensionInstallationStateStore: store, extensionInstallationStateStore: store,
installFromInput, installFromInput,
onClick, onClick,
// confirmUninstallExtension, confirmUninstallExtension,
// enableExtension, enableExtension,
// disableExtension, disableExtension,
// userExtensions, userExtensions,
}: Props & Dependencies) { }: Props & Dependencies) {
const { name, version, totalNumberOfInstallations, shortDescription, publisher, githubRepositoryUrl, appIconUrl } = extension; const { name, version, totalNumberOfInstallations, shortDescription, publisher, githubRepositoryUrl, appIconUrl, installationName, rating } = extension;
// const installedExtension = userExtensions.get().find(installed => installed.manifest.name == name); const installedExtension = userExtensions.get().find(installed => installed.manifest.name == installationName);
const [waiting, setWaiting] = useState(false); const [waiting, setWaiting] = useState(false);
const installed = true; const installed = Boolean(installedExtension);
const rating = name.toLowerCase().includes("space") ? 5 : Math.floor(Math.random() * 5) + 1; const rate = rating || 4;
useEffect(() => { useEffect(() => {
if (!store.anyPreInstallingOrInstalling) { if (!store.anyPreInstallingOrInstalling) {
@ -64,20 +65,20 @@ function NonInjectedExtensionCard({
installFromInput(extension.binaryUrl); installFromInput(extension.binaryUrl);
} }
// function onUninstall(evt: React.MouseEvent, extension: InstalledExtension) { function onUninstall(evt: React.MouseEvent) {
// evt.stopPropagation(); evt.stopPropagation();
// confirmUninstallExtension(extension); confirmUninstallExtension(installedExtension);
// } }
// function onStatusToggle(evt: React.MouseEvent, extension: InstalledExtension) { function onStatusToggle(evt: React.MouseEvent) {
// evt.stopPropagation(); evt.stopPropagation();
// if (extension.isEnabled) { if (installedExtension.isEnabled) {
// disableExtension(extension.id); disableExtension(installedExtension.id);
// } else { } else {
// enableExtension(extension.id); enableExtension(installedExtension.id);
// } }
// } }
return ( return (
<div className={styles.extensionCard} onClick={onClick}> <div className={styles.extensionCard} onClick={onClick}>
@ -87,7 +88,7 @@ function NonInjectedExtensionCard({
<div className={styles.nameAndVersion}> <div className={styles.nameAndVersion}>
<div className={styles.name}> <div className={styles.name}>
{name} {name}
<Rating name="read-only" value={rating} readOnly /> <Rating name="read-only" value={rate} readOnly />
</div> </div>
<div className={styles.version}>{version}</div> <div className={styles.version}>{version}</div>
</div> </div>
@ -117,17 +118,17 @@ function NonInjectedExtensionCard({
</Button> </Button>
<Button <Button
className={styles.centerButton} className={styles.centerButton}
onClick={onClick} onClick={onUninstall}
> >
<Icon className="mr-4" material="delete"/> <Icon className="mr-4" material="delete"/>
Uninstall Uninstall
</Button> </Button>
<Button <Button
className={styles.rightButton} className={cssNames(styles.rightButton, { [styles.disabledButton]: !installedExtension.isEnabled } )}
onClick={onClick} onClick={onStatusToggle}
> >
<Icon className="mr-4" material="pause"/> <Icon className="mr-4" material={`${installedExtension.isEnabled ? "pause" : "play_arrow"}`}/>
Disable {installedExtension.isEnabled ? "Disable" : "Enable"}
</Button> </Button>
</div> </div>
) : ( ) : (