Move ExtensionCard to its own component

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

src/renderer/components/+preferences/extension-card.module.scss

@@ -3,10 +3,6 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
- .hr {
-   padding: 80px 0;
- }
-
 .extensionCard {
   margin-bottom: 16px;
   border-radius: 4px;

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

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import styles from "./extension-card.module.scss";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import { observer } from "mobx-react";
+import React from "react";
+
+import installFromInputInjectable from "../+extensions/install-from-input/install-from-input.injectable";
+import { Button } from "../button";
+import { Icon } from "../icon";
+import type { Extension } from "./extension-list";
+import type { ExtensionInstallationStateStore } from "../../../extensions/extension-installation-state-store/extension-installation-state-store";
+import extensionInstallationStateStoreInjectable from "../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
+
+interface Dependencies {
+  installFromInput: (input: string) => Promise<void>;
+  extensionInstallationStateStore: ExtensionInstallationStateStore;
+}
+
+interface Props {
+  extension: Extension
+}
+
+function NonInjectedExtensionCard({ extension, extensionInstallationStateStore, installFromInput }: Props & Dependencies) {
+  const { name, version, totalNumberOfInstallations, shortDescription, publisher, githubRepositoryUrl, appIconUrl } = extension;
+
+  function onInstall() {
+    installFromInput(extension.binaryUrl);
+  }
+
+  return (
+    <div className={styles.extensionCard}>
+      <div className={styles.icon} style={{ backgroundImage: `url(${appIconUrl})` }}/>
+      <div className={styles.contents}>
+        <div className={styles.head}>
+          <div className={styles.nameAndVersion}>
+            <div className={styles.name}>{name}</div>
+            <div className={styles.version}>{version}</div>
+          </div>
+
+          <div className={styles.downloads}>
+            <Icon material="cloud_download"/> {totalNumberOfInstallations}
+          </div>
+        </div>
+
+        <div className={styles.description}>
+          {shortDescription}
+        </div>
+
+        <div className={styles.footer}>
+          <div className={styles.author}>
+            <a href={githubRepositoryUrl} rel="noreferrer" target="_blank">{publisher.username}</a>
+          </div>
+          <div className={styles.install}>
+            <Button
+              primary
+              disabled={extensionInstallationStateStore.anyPreInstallingOrInstalling}
+              waiting={extensionInstallationStateStore.anyPreInstallingOrInstalling}
+              onClick={onInstall}
+            >
+              <Icon className={styles.installButtonIco} material="cloud_download"/> 
+              Install
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const ExtensionCard = withInjectables<Dependencies, Props>(
+  observer(NonInjectedExtensionCard),
+  {
+    getProps: (di, props) => ({
+      installFromInput: di.inject(installFromInputInjectable),
+      extensionInstallationStateStore: di.inject(extensionInstallationStateStoreInjectable),
+
+      ...props,
+    }),
+  },
+);

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

@@ -3,19 +3,12 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import styles from "./install.module.scss";
-
 import React, { useEffect, useState } from "react";
-import { Button } from "../button";
 import { Icon } from "../icon";
 import { SearchInput } from "../input";
 import { Spinner } from "../spinner";
+import { ExtensionCard } from "./extension-card";
 import { Extension, getExtensions } from "./extension-list";
-import { withInjectables } from "@ogre-tools/injectable-react";
-import type { ExtensionInstallationStateStore } from "../../../extensions/extension-installation-state-store/extension-installation-state-store";
-import installFromInputInjectable from "../+extensions/install-from-input/install-from-input.injectable";
-import extensionInstallationStateStoreInjectable from "../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
-import { observer } from "mobx-react";
 
 export function Install() {
   const [extensions, setExtensions] = useState([]);
@@ -65,73 +58,3 @@ function ExtensionList({ extensions }: { extensions: Extension[] }) {
     </>
   );
 }
-
-
-
-interface Dependencies {
-  installFromInput: (input: string) => Promise<void>;
-  extensionInstallationStateStore: ExtensionInstallationStateStore;
-}
-
-interface CardProps {
-  extension: Extension
-}
-
-function NonInjectedExtensionCard({ extension, extensionInstallationStateStore, installFromInput }: CardProps & Dependencies) {
-  const { name, version, totalNumberOfInstallations, shortDescription, publisher, githubRepositoryUrl, appIconUrl } = extension;
-
-  function onInstall() {
-    installFromInput(extension.binaryUrl);
-  }
-
-  return (
-    <div className={styles.extensionCard}>
-      <div className={styles.icon} style={{ backgroundImage: `url(${appIconUrl})` }}/>
-      <div className={styles.contents}>
-        <div className={styles.head}>
-          <div className={styles.nameAndVersion}>
-            <div className={styles.name}>{name}</div>
-            <div className={styles.version}>{version}</div>
-          </div>
-
-          <div className={styles.downloads}>
-            <Icon material="cloud_download"/> {totalNumberOfInstallations}
-          </div>
-        </div>
-
-        <div className={styles.description}>
-          {shortDescription}
-        </div>
-
-        <div className={styles.footer}>
-          <div className={styles.author}>
-            <a href={githubRepositoryUrl} rel="noreferrer" target="_blank">{publisher.username}</a>
-          </div>
-          <div className={styles.install}>
-            <Button
-              primary
-              disabled={extensionInstallationStateStore.anyPreInstallingOrInstalling}
-              waiting={extensionInstallationStateStore.anyPreInstallingOrInstalling}
-              onClick={onInstall}
-            >
-              <Icon className={styles.installButtonIco} material="cloud_download"/> 
-              Install
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export const ExtensionCard = withInjectables<Dependencies, CardProps>(
-  observer(NonInjectedExtensionCard),
-  {
-    getProps: (di, props) => ({
-      installFromInput: di.inject(installFromInputInjectable),
-      extensionInstallationStateStore: di.inject(extensionInstallationStateStoreInjectable),
-
-      ...props,
-    }),
-  },
-);