fix: add extension overview page download button (#308)

* fix: add extension overview page download button

* fix: change extension onInstall return type

Author: yantze

packages/extension-manager/src/browser/extension-overview/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { ReactEditorComponent } from '@opensumi/ide-editor/lib/browser';
 import { Icon, getKaitianIcon, Button, Tabs } from '@opensumi/ide-components';
 import { localize, replaceLocalizePlaceholder } from '@opensumi/ide-core-common';
@@ -7,8 +7,8 @@ import { ProgressBar } from '@opensumi/ide-core-browser/lib/components/progressb
 import { useInjectable } from '@opensumi/ide-core-browser/lib/react-hooks/injectable-hooks';
 
 import { VSXExtensionRaw } from '../../common/vsx-registry-types';
-import * as styles from './overview.module.less';
 import { InstallState, IVSXExtensionService, VSXExtension, VSXExtensionServiceToken } from '../../common';
+import styles from './overview.module.less';
 
 enum TabActiveKey {
   details = 'Details',
@@ -30,18 +30,19 @@ export const ExtensionOverview: ReactEditorComponent<
   VSXExtensionRaw & VSXExtension & { state: string; extensionId: string }
 > = ({ resource }) => {
   const vsxExtensionService = useInjectable<IVSXExtensionService>(VSXExtensionServiceToken);
-  const [loading, setLoading] = React.useState(true);
-  const [activateKey, setActivateKey] = React.useState(TabActiveKey.details);
-  const [metadata, setMetadata] = React.useState<IExtensionMetadata>({});
+  const [loading, setLoading] = useState(true);
+  const [installing, setInstalling] = useState<boolean>(false);
+  const [activateKey, setActivateKey] = useState(TabActiveKey.details);
+  const [metadata, setMetadata] = useState<IExtensionMetadata>({});
 
-  const onDidTabChange = React.useCallback((index: number) => {
+  const onDidTabChange = useCallback((index: number) => {
     const activeKey = tabMap[index];
     if (activeKey) {
       setActivateKey(activeKey);
     }
   }, []);
 
-  const getExtensonMetadata = React.useCallback(
+  const getExtensionMetadata = useCallback(
     ({ readme, changelog }: { [prop: string]: string | undefined }) =>
       [
         readme && fetch(readme).then((res) => res.text()),
@@ -50,16 +51,30 @@ export const ExtensionOverview: ReactEditorComponent<
     [],
   );
 
-  const initExtensionMetadata = React.useCallback(async () => {
+  const initExtensionMetadata = useCallback(async () => {
     const extension = await vsxExtensionService.getRemoteRawExtension(resource.metadata!.extensionId);
     if (extension) {
-      const tasks = getExtensonMetadata({ readme: extension.files.readme, changelog: extension.files.changelog });
+      const tasks = getExtensionMetadata({ readme: extension.files.readme, changelog: extension.files.changelog });
       const [readme, changelog] = await Promise.all(tasks);
       setMetadata({ readme, changelog, downloadCount: extension.downloadCount });
     }
     setLoading(false);
   }, [resource]);
 
+  const onInstallCallback = useCallback(
+    async (e: React.MouseEvent) => {
+      e.stopPropagation();
+      const extension = await vsxExtensionService.getLocalExtension(resource.metadata!.extensionId);
+      if (extension) {
+        setInstalling(true);
+        vsxExtensionService.install(extension).finally(() => {
+          setInstalling(false);
+        });
+      }
+    },
+    [resource],
+  );
+
   React.useEffect(() => {
     initExtensionMetadata();
   }, [resource]);
@@ -88,7 +103,7 @@ export const ExtensionOverview: ReactEditorComponent<
               {resource.metadata?.namespace.toLowerCase() + '.' + resource.metadata?.name.toLowerCase()}
             </span>
           </div>
-          <div className={styles.mainfest}>
+          <div className={styles.manifest}>
             <span>
               <a href={resource.metadata?.namespaceUrl} target='_blank' rel='noopener noreferrer'>
                 {resource.metadata?.namespace}
@@ -109,7 +124,7 @@ export const ExtensionOverview: ReactEditorComponent<
             {resource.metadata?.license && (
               <span>
                 <a href={resource.metadata?.files.license} target='blank'>
-                  Lisense
+                  License
                 </a>
               </span>
             )}
@@ -118,13 +133,16 @@ export const ExtensionOverview: ReactEditorComponent<
           <div className={styles.description}>
             {replaceLocalizePlaceholder(resource.metadata?.description, resource.metadata?.extensionId)}
           </div>
-          {resource.metadata?.state === InstallState.NOT_INSTALLED && (
-            <div>
-              <Button size='small' onClick={() => {}}>
-                {localize('marketplace.extension.install')}
+          <div>
+            {resource.metadata?.state === InstallState.NOT_INSTALLED && (
+              <Button size='small' onClick={onInstallCallback} disabled={installing}>
+                {localize(installing ? 'marketplace.extension.installing' : 'marketplace.extension.install')}
               </Button>
-            </div>
-          )}
+            )}
+            {resource.metadata?.state === InstallState.INSTALLED && (
+              <span>{localize('marketplace.extension.installed')}</span>
+            )}
+          </div>
         </div>
       </div>
       <div className={styles.extension_overview_body}>

packages/extension-manager/src/browser/extension-overview/overview.module.less

@@ -50,7 +50,7 @@
       }
     }
 
-    .mainfest {
+    .manifest {
       margin-top: 6px;
       display: flex;
       align-items: center;

packages/extension-manager/src/browser/extension/index.tsx

@@ -1,15 +1,14 @@
-import * as React from 'react';
-import { useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { localize, replaceLocalizePlaceholder } from '@opensumi/ide-core-common';
 import { Button, Icon, getKaitianIcon } from '@opensumi/ide-components';
 
 import { InstallState, VSXExtension } from '../../common';
 
-import * as styles from './extension.module.less';
+import styles from './extension.module.less';
 
 interface IExtensionViewProps {
   extension: VSXExtension;
-  onInstall(extension: VSXExtension): Promise<string | undefined>;
+  onInstall(extension: VSXExtension): Promise<void>;
   onClick(extension: VSXExtension, state: InstallState): void;
   installed: boolean;
 }

packages/extension-manager/src/browser/vsx-extension.service.ts

@@ -67,7 +67,7 @@ export class VSXExtensionService implements IVSXExtensionService {
     }
   }
 
-  async install(extension: VSXExtension): Promise<string | undefined> {
+  async install(extension: VSXExtension): Promise<void> {
     const id = extension?.namespace?.toLowerCase() + '.' + extension?.name?.toLowerCase();
     if (this.tasks.has(id) || !extension.downloadUrl) {
       return;
@@ -81,12 +81,11 @@ export class VSXExtensionService implements IVSXExtensionService {
     });
     this.tasks.set(id, task);
     this.updateStatusBar();
-    task.then((res) => {
+    return task.then((res) => {
       this.tasks.delete(id);
       this.updateStatusBar();
       this.extensionManagementService.postChangedExtension(false, res);
     });
-    return task;
   }
 
   private asExtensionId(extension: VSXExtension) {

packages/extension-manager/src/common/index.ts

@@ -70,7 +70,7 @@ export const VSXExtensionServiceToken = Symbol('VSXExtensionSerivceToken');
 
 export interface IVSXExtensionService {
   search(keyword: string): Promise<void>;
-  install(extension: VSXExtension): Promise<string | undefined>;
+  install(extension: VSXExtension): Promise<void>;
   getLocalExtension(extensionId: string): Promise<VSXExtension | undefined>;
   getRemoteRawExtension(extensionId: string): Promise<VSXExtensionRaw | undefined>;
   openExtensionEditor(extensionId: string, state: InstallState): Promise<void>;