Go to extension page from extension list

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+preferences/extension-card.tsx

@@ -20,10 +20,11 @@ interface Dependencies {
 }
 
 interface Props {
-  extension: Extension
+  extension: Extension;
+  onClick?: () => void;
 }
 
-function NonInjectedExtensionCard({ extension, extensionInstallationStateStore, installFromInput }: Props & Dependencies) {
+function NonInjectedExtensionCard({ extension, extensionInstallationStateStore, installFromInput, onClick }: Props & Dependencies) {
   const { name, version, totalNumberOfInstallations, shortDescription, publisher, githubRepositoryUrl, appIconUrl } = extension;
 
   function onInstall() {
@@ -31,7 +32,7 @@ function NonInjectedExtensionCard({ extension, extensionInstallationStateStore,
   }
 
   return (
-    <div className={styles.extensionCard}>
+    <div className={styles.extensionCard} onClick={onClick}>
       <div className={styles.icon} style={{ backgroundImage: `url(${appIconUrl})` }}/>
       <div className={styles.contents}>
         <div className={styles.head}>
@@ -60,7 +61,7 @@ function NonInjectedExtensionCard({ extension, extensionInstallationStateStore,
               waiting={extensionInstallationStateStore.anyPreInstallingOrInstalling}
               onClick={onInstall}
             >
-              <Icon className={styles.installButtonIco} material="cloud_download"/> 
+              <Icon className={styles.installButtonIco} material="cloud_download"/>
               Install
             </Button>
           </div>

src/renderer/components/+preferences/install.tsx

@@ -4,6 +4,7 @@
  */
 
 import React, { useEffect, useState } from "react";
+import { useHistory } from "react-router-dom";
 import { Icon } from "../icon";
 import { SearchInput } from "../input";
 import { Spinner } from "../spinner";
@@ -45,16 +46,24 @@ export function Install() {
 
       <hr />
 
-      <h2 style={{ marginTop: "30px", display: "flex", alignItems: "center" }}><Icon material="star" small style={{ opacity: ".3" }}/> Featured Extensions</h2>
+      <h2 style={{ marginTop: "30px", display: "flex", alignItems: "center" }}><Icon material="star" small style={{ opacity: ".3" }}/>&nbsp;Featured Extensions</h2>
       {renderExtensionsOrSpinner()}
     </section>
   );
 }
 
 function ExtensionList({ extensions }: { extensions: Extension[] }) {
+  const history = useHistory();
+
+  function handleClick(extensionId: string) {
+    history.push(`extension/${extensionId}`);
+  }
+
   return (
     <>
-      {extensions.map(extension => <ExtensionCard key={extension.id} extension={extension}/>)}
+      {extensions.map(extension => (
+        <ExtensionCard key={extension.id} extension={extension} onClick={() => handleClick(extension.id)}/>
+      ))}
     </>
   );
 }

src/renderer/components/+preferences/preferences.tsx

@@ -26,6 +26,7 @@ import {
   terminalURL,
   installURL,
   installRoute,
+  extensionPageURL,
 } from "../../../common/routes";
 import { navigateWithoutHistoryChange, navigation } from "../../navigation";
 import { SettingLayout } from "../layout/setting-layout";
@@ -42,6 +43,7 @@ import { withInjectables } from "@ogre-tools/injectable-react";
 import type { RegisteredAppPreference } from "./app-preferences/app-preference-registration";
 import appPreferencesInjectable from "./app-preferences/app-preferences.injectable";
 import { Install } from "./install";
+import { ExtensionPage } from "./extension-page";
 
 interface Dependencies {
   appPreferenceItems: IComputedValue<RegisteredAppPreference[]>
@@ -93,6 +95,7 @@ const NonInjectedPreferences: React.FC<Dependencies> = ({ appPreferenceItems })
         <Route path={telemetryURL()} component={Telemetry}/>
         <Route path={extensionURL()} component={Extensions}/>
         <Route path={installURL()} component={Install}/>
+        <Route path={extensionPageURL()} component={ExtensionPage}/>
         <Redirect exact from={`${preferencesURL()}/`} to={appURL()}/>
       </Switch>
     </SettingLayout>