feat: add an icon field (#52)

sourcegraph · Sep 24, 2018 · b875c08 · b875c08
1 parent 7cdb591
commit b875c08
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 22 deletions.
diff --git a/src/extensions/manager/ExtensionCard.css b/src/extensions/manager/ExtensionCard.css
@@ -8,6 +8,11 @@
     color: var(--body-color) !important;
 }
 
+.extension-card .extension-card__icon {
+    width: 6rem;
+    height: 6rem;
+}
+
 .extension-card .extension-card-spacer {
     flex: 1;
 }

diff --git a/src/extensions/manager/ExtensionCard.tsx b/src/extensions/manager/ExtensionCard.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import { Link } from 'react-router-dom'
 import { ExtensionsProps } from '../../context'
 import { isErrorLike } from '../../errors'
+import { ExtensionManifest } from '../../schema/extension.schema'
 import { ConfigurationCascadeProps, ConfigurationSubject, Settings } from '../../settings'
 import { LinkOrSpan } from '../../ui/generic/LinkOrSpan'
 import { ConfiguredExtension, isExtensionAdded, isExtensionEnabled } from '../extension'
@@ -22,35 +23,56 @@ export class ExtensionCard<S extends ConfigurationSubject, C extends Settings> e
 > {
     public render(): JSX.Element | null {
         const { node, ...props } = this.props
+        const manifest: ExtensionManifest | undefined =
+            node.manifest && !isErrorLike(node.manifest) ? node.manifest : undefined
+        let iconURL: URL | undefined
+        try {
+            if (manifest && manifest.icon) {
+                iconURL = new URL(manifest.icon)
+            }
+        } catch (e) {
+            // noop
+        }
+
         return (
             <div className="d-flex col-sm-6 col-md-6 col-lg-4 pb-4">
                 <div className="extension-card card">
                     <LinkOrSpan
                         to={node.registryExtension && node.registryExtension.url}
                         className="card-body extension-card-body d-flex flex-column"
                     >
-                        <h4 className="card-title extension-card-body-title mb-0">
-                            {node.manifest && !isErrorLike(node.manifest) && node.manifest.title
-                                ? node.manifest.title
-                                : node.id}
-                        </h4>
-                        <div className="extension-card-body-text d-inline-block mt-1">
-                            {node.manifest ? (
-                                isErrorLike(node.manifest) ? (
-                                    <span className="text-danger small" title={node.manifest.message}>
-                                        <props.extensions.context.icons.Warning className="icon-inline" /> Invalid
-                                        manifest
-                                    </span>
-                                ) : (
-                                    node.manifest.description && (
-                                        <span className="text-muted">{node.manifest.description}</span>
-                                    )
-                                )
-                            ) : (
-                                <span className="text-warning small">
-                                    <props.extensions.context.icons.Warning className="icon-inline" /> No manifest
-                                </span>
-                            )}
+                        <div className="d-flex">
+                            {manifest &&
+                                manifest.icon &&
+                                iconURL &&
+                                iconURL.protocol === 'data:' &&
+                                /^data:image\/png(;base64)?,/.test(manifest.icon) && (
+                                    <img className="extension-card__icon mr-2" src={manifest.icon} />
+                                )}
+                            <div>
+                                <h4 className="card-title extension-card-body-title mb-0">
+                                    {manifest && manifest.title ? manifest.title : node.id}
+                                </h4>
+                                <div className="extension-card-body-text d-inline-block mt-1">
+                                    {node.manifest ? (
+                                        isErrorLike(node.manifest) ? (
+                                            <span className="text-danger small" title={node.manifest.message}>
+                                                <props.extensions.context.icons.Warning className="icon-inline" />{' '}
+                                                Invalid manifest
+                                            </span>
+                                        ) : (
+                                            node.manifest.description && (
+                                                <span className="text-muted">{node.manifest.description}</span>
+                                            )
+                                        )
+                                    ) : (
+                                        <span className="text-warning small">
+                                            <props.extensions.context.icons.Warning className="icon-inline" /> No
+                                            manifest
+                                        </span>
+                                    )}
+                                </div>
+                            </div>
                         </div>
                     </LinkOrSpan>
                     <div className="card-footer extension-card-footer py-0 pl-0">

diff --git a/src/schema/extension.schema.json b/src/schema/extension.schema.json
@@ -16,6 +16,11 @@
       "type": "string",
       "maxLength": 280
     },
+    "icon": {
+      "description": "The extension icon in data URI format (must begin with data:image/png).",
+      "type": "string",
+      "format": "^data:image/png"
+    },
     "readme": {
       "description": "The extension's README, which should describe (in detail) the extension's purpose, features, and usage instructions. Markdown formatting is supported.",
       "type": "string",

diff --git a/src/schema/extension.schema.ts b/src/schema/extension.schema.ts
@@ -19,6 +19,7 @@ export interface ExtensionManifest {
         type?: string
         url: string
     }
+    icon?: string
     activationEvents: string[]
     args?: {
         [k: string]: any