feat: add extensions page in settings

Composer/packages/client/src/components/PluginHost/PluginHost.tsx

@@ -63,7 +63,7 @@ export const PluginHost: React.FC<PluginHostProps> = (props) => {
             resolve();
           };
           // If plugin bundles end up being too large and block the client thread due to the load, enable the async flag on this call
-          injectScript(iframeDocument, pluginScriptId, `/api/plugins/${pluginName}/view/${pluginType}`, false, cb);
+          injectScript(iframeDocument, pluginScriptId, `/api/extensions/${pluginName}/view/${pluginType}`, false, cb);
         });
       }
     };

Composer/packages/client/src/pages/setting/SettingsPage.tsx

@@ -80,7 +80,7 @@ const SettingPage: React.FC<RouteComponentProps> = () => {
     },
     { id: 'application', name: settingLabels.appSettings, url: getProjectLink('application') },
     { id: 'runtime', name: settingLabels.runtime, url: getProjectLink('runtime', projectId), disabled: !projectId },
-    // { id: 'extensions', name: settingLabels.extensions, url: getProjectLink('extensions') },
+    { id: 'extensions', name: settingLabels.extensions, url: getProjectLink('extensions') },
     { id: 'about', name: settingLabels.about, url: getProjectLink('about') },
   ];
 

Composer/packages/client/src/pages/setting/extensions/ExtensionSearchResults.tsx

@@ -0,0 +1,136 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import React from 'react';
+import formatMessage from 'format-message';
+import {
+  DetailsListLayoutMode,
+  SelectionMode,
+  IColumn,
+  CheckboxVisibility,
+  ConstrainMode,
+} from 'office-ui-fabric-react/lib/DetailsList';
+import { ScrollablePane } from 'office-ui-fabric-react/lib/ScrollablePane';
+import { Sticky } from 'office-ui-fabric-react/lib/Sticky';
+import { ShimmeredDetailsList } from 'office-ui-fabric-react/lib/ShimmeredDetailsList';
+
+// TODO: extract to shared?
+export type ExtensionSearchResult = {
+  id: string;
+  keywords: string[];
+  version: string;
+  description: string;
+  url: string;
+};
+
+type ExtensionSearchResultsProps = {
+  results: ExtensionSearchResult[];
+  isSearching: boolean;
+  onSelect: (extension: ExtensionSearchResult) => void;
+};
+
+const containerStyles = css`
+  position: relative;
+  height: 400px;
+`;
+
+const noResultsStyles = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const ExtensionSearchResults: React.FC<ExtensionSearchResultsProps> = (props) => {
+  const { results, isSearching, onSelect } = props;
+
+  const searchColumns: IColumn[] = [
+    {
+      key: 'name',
+      name: formatMessage('Name'),
+      minWidth: 100,
+      maxWidth: 150,
+      onRender: (item: ExtensionSearchResult) => {
+        return <span>{item.id}</span>;
+      },
+    },
+    {
+      key: 'description',
+      name: formatMessage('Description'),
+      minWidth: 100,
+      maxWidth: 300,
+      isMultiline: true,
+      onRender: (item: ExtensionSearchResult) => {
+        return <div css={{ overflowWrap: 'break-word' }}>{item.description}</div>;
+      },
+    },
+    {
+      key: 'version',
+      name: formatMessage('Version'),
+      minWidth: 30,
+      maxWidth: 100,
+      onRender: (item: ExtensionSearchResult) => {
+        return <span>{item.version}</span>;
+      },
+    },
+    {
+      key: 'url',
+      name: formatMessage('Url'),
+      minWidth: 100,
+      maxWidth: 100,
+      onRender: (item: ExtensionSearchResult) => {
+        return item.url ? (
+          <a href={item.url} rel="noopener noreferrer" target="_blank">
+            {formatMessage('View on npm')}
+          </a>
+        ) : null;
+      },
+    },
+  ];
+
+  const noResultsFound = !isSearching && results.length === 0;
+
+  return (
+    <div css={containerStyles}>
+      <ScrollablePane>
+        <ShimmeredDetailsList
+          checkboxVisibility={CheckboxVisibility.always}
+          columns={searchColumns}
+          constrainMode={ConstrainMode.horizontalConstrained}
+          enableShimmer={isSearching}
+          items={noResultsFound ? [{}] : results}
+          layoutMode={DetailsListLayoutMode.justified}
+          selectionMode={SelectionMode.single}
+          shimmerLines={8}
+          onActiveItemChanged={(item) => onSelect(item)}
+          onRenderDetailsHeader={(headerProps, defaultRender) => {
+            if (defaultRender) {
+              return <Sticky>{defaultRender(headerProps)}</Sticky>;
+            }
+
+            return <div />;
+          }}
+          onRenderRow={(rowProps, defaultRender) => {
+            // there are no search results
+            if (!isSearching && results.length === 0) {
+              return (
+                <div css={noResultsStyles}>
+                  <p>No search results</p>
+                </div>
+              );
+            }
+
+            if (defaultRender) {
+              return defaultRender(rowProps);
+            }
+
+            return null;
+          }}
+        />
+      </ScrollablePane>
+    </div>
+  );
+};
+
+export { ExtensionSearchResults };