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/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 };

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

@@ -2,36 +2,57 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React, { useEffect, useState } from 'react';
+import { jsx, css } from '@emotion/core';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 import { RouteComponentProps } from '@reach/router';
 import {
   DetailsListLayoutMode,
+  Selection,
   SelectionMode,
   IColumn,
   CheckboxVisibility,
+  ConstrainMode,
+  DetailsRow,
+  IDetailsRowStyles,
 } from 'office-ui-fabric-react/lib/DetailsList';
+import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 import { ShimmeredDetailsList } from 'office-ui-fabric-react/lib/ShimmeredDetailsList';
-import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import formatMessage from 'format-message';
 import { useRecoilValue, selector } from 'recoil';
+import { NeutralColors } from '@uifabric/fluent-theme';
 
 import { ExtensionConfig } from '../../../recoilModel/types';
 import { Toolbar, IToolbarItem } from '../../../components/Toolbar';
 import { dispatcherState, extensionsState } from '../../../recoilModel';
 
 import { InstallExtensionDialog } from './InstallExtensionDialog';
+import { ExtensionSearchResult } from './ExtensionSearchResults';
 
 const remoteExtensionsState = selector({
   key: 'remoteExtensions',
   get: ({ get }) => get(extensionsState).filter((e) => !e.builtIn),
 });
 
+const noExtensionsStyles = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 const Extensions: React.FC<RouteComponentProps> = () => {
   const { fetchExtensions, toggleExtension, addExtension, removeExtension } = useRecoilValue(dispatcherState);
   const extensions = useRecoilValue(remoteExtensionsState);
-  const [isAdding, setIsAdding] = useState(false);
+  // if a string, its the id of the extension being updated
+  const [isUpdating, setIsUpdating] = useState<string | boolean>(false);
   const [showNewModal, setShowNewModal] = useState(false);
+  const [selectedExtensions, setSelectedExtensions] = useState<ExtensionConfig[]>([]);
+  const selection = useRef(
+    new Selection({
+      onSelectionChanged: () => {
+        setSelectedExtensions(selection.getSelection() as ExtensionConfig[]);
+      },
+    })
+  ).current;
 
   useEffect(() => {
     fetchExtensions();
@@ -42,44 +63,47 @@ const Extensions: React.FC<RouteComponentProps> = () => {
       key: 'name',
       name: formatMessage('Name'),
       minWidth: 100,
-      maxWidth: 150,
-      onRender: (item: ExtensionConfig) => {
-        return <span>{item.name}</span>;
-      },
+      maxWidth: 250,
+      isResizable: true,
+      fieldName: 'name',
+    },
+    {
+      key: 'description',
+      name: formatMessage('Description'),
+      minWidth: 150,
+      maxWidth: 500,
+      isResizable: true,
+      isCollapsible: true,
+      isMultiline: true,
+      fieldName: 'description',
     },
     {
       key: 'version',
       name: formatMessage('Version'),
-      minWidth: 30,
+      minWidth: 100,
       maxWidth: 100,
-      onRender: (item: ExtensionConfig) => {
-        return <span>{item.version}</span>;
-      },
+      isResizable: true,
+      fieldName: 'version',
     },
     {
       key: 'enabled',
       name: formatMessage('Enabled'),
-      minWidth: 30,
-      maxWidth: 150,
-      onRender: (item: ExtensionConfig) => {
-        const text = item.enabled ? formatMessage('Disable') : formatMessage('Enable');
-        return (
-          <DefaultButton disabled={item.builtIn} onClick={() => toggleExtension(item.id, !item.enabled)}>
-            {text}
-          </DefaultButton>
-        );
-      },
-    },
-    {
-      key: 'remove',
-      name: formatMessage('Remove'),
-      minWidth: 30,
+      minWidth: 100,
       maxWidth: 150,
+      isResizable: true,
       onRender: (item: ExtensionConfig) => {
         return (
-          <DefaultButton disabled={item.builtIn} onClick={() => removeExtension(item.id)}>
-            {formatMessage('Remove')}
-          </DefaultButton>
+          <Toggle
+            ariaLabel={formatMessage('Toggle extension')}
+            checked={item.enabled}
+            styles={{ root: { marginBottom: 0 } }}
+            onChange={async () => {
+              const timeout = setTimeout(() => setIsUpdating(item.id), 200);
+              await toggleExtension(item.id, !item.enabled);
+              clearTimeout(timeout);
+              setIsUpdating(false);
+            }}
+          />
         );
       },
     },
@@ -99,31 +123,90 @@ const Extensions: React.FC<RouteComponentProps> = () => {
       },
       align: 'left',
     },
+    {
+      type: 'action',
+      text: formatMessage('Uninstall'),
+      buttonProps: {
+        iconProps: {
+          iconName: 'Trash',
+        },
+        onClick: async () => {
+          const names = selectedExtensions.map((e) => e.name).join('\n');
+          const message = formatMessage('Are you sure you want to uninstall these extensions?');
+          if (confirm(`${message}\n\n${names}`)) {
+            for (const ext of selectedExtensions) {
+              const timeout = setTimeout(() => setIsUpdating(ext.id), 200);
+              await removeExtension(ext.id);
+              clearTimeout(timeout);
+              setIsUpdating(false);
+            }
+          }
+        },
+      },
+      disabled: selectedExtensions.length === 0,
+      align: 'left',
+    },
   ];
 
-  const submit = async (selectedExtension) => {
+  const submit = useCallback(async (selectedExtension?: ExtensionSearchResult) => {
     if (selectedExtension) {
-      setIsAdding(true);
+      setIsUpdating(true);
       setShowNewModal(false);
       await addExtension(selectedExtension.id);
-      setIsAdding(false);
+      setIsUpdating(false);
+    }
+  }, []);
+
+  const shownItems = () => {
+    if (extensions.length === 0) {
+      // render no installed message
+      return [{}];
+    } else if (isUpdating === true) {
+      // extension is being added, render a shimmer row at end of list
+      return [...extensions, null];
+    } else if (typeof isUpdating === 'string') {
+      // extension is being removed or updated, show shimmer for that row
+      return extensions.map((e) => (e.id === isUpdating ? null : e));
+    } else {
+      return extensions;
     }
   };
 
+  const dismissInstallDialog = useCallback(() => setShowNewModal(false), []);
+
   return (
-    <div>
+    <div style={{ maxWidth: '100%' }}>
       <Toolbar toolbarItems={toolbarItems} />
-      {(isAdding || extensions.length > 0) && (
-        <ShimmeredDetailsList
-          checkboxVisibility={CheckboxVisibility.hidden}
-          columns={installedColumns}
-          items={isAdding ? [...extensions, null] : extensions}
-          layoutMode={DetailsListLayoutMode.justified}
-          selectionMode={SelectionMode.single}
-          shimmerLines={1}
-        />
-      )}
-      <InstallExtensionDialog isOpen={showNewModal} onDismiss={() => setShowNewModal(false)} onInstall={submit} />
+      <ShimmeredDetailsList
+        checkboxVisibility={CheckboxVisibility.onHover}
+        columns={installedColumns}
+        constrainMode={ConstrainMode.horizontalConstrained}
+        items={shownItems()}
+        layoutMode={DetailsListLayoutMode.justified}
+        selection={selection}
+        selectionMode={SelectionMode.multiple}
+        onRenderRow={(rowProps, defaultRender) => {
+          if (extensions.length === 0) {
+            return (
+              <div css={noExtensionsStyles}>
+                <p>No extensions installed</p>
+              </div>
+            );
+          }
+
+          if (defaultRender && rowProps) {
+            const customStyles: Partial<IDetailsRowStyles> = {
+              root: {
+                color: rowProps?.item?.enabled ? undefined : NeutralColors.gray90,
+              },
+            };
+            return <DetailsRow {...rowProps} styles={customStyles} />;
+          }
+
+          return null;
+        }}
+      />
+      <InstallExtensionDialog isOpen={showNewModal} onDismiss={dismissInstallDialog} onInstall={submit} />
     </div>
   );
 };