feat: add extensions page in settings

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/Extensions.tsx

@@ -3,72 +3,48 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState } from 'react';
 import { RouteComponentProps } from '@reach/router';
 import {
-  DetailsList,
   DetailsListLayoutMode,
   SelectionMode,
   IColumn,
   CheckboxVisibility,
 } from 'office-ui-fabric-react/lib/DetailsList';
-import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
+import { ShimmeredDetailsList } from 'office-ui-fabric-react/lib/ShimmeredDetailsList';
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import formatMessage from 'format-message';
-import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import axios from 'axios';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValue, selector } from 'recoil';
 
 import { ExtensionConfig } from '../../../recoilModel/types';
 import { Toolbar, IToolbarItem } from '../../../components/Toolbar';
-import httpClient from '../../../utils/httpUtil';
 import { dispatcherState, extensionsState } from '../../../recoilModel';
 
+import { InstallExtensionDialog } from './InstallExtensionDialog';
+
+const remoteExtensionsState = selector({
+  key: 'remoteExtensions',
+  get: ({ get }) => get(extensionsState).filter((e) => !e.builtIn),
+});
+
 const Extensions: React.FC<RouteComponentProps> = () => {
   const { fetchExtensions, toggleExtension, addExtension, removeExtension } = useRecoilValue(dispatcherState);
-  const extensions = useRecoilValue(extensionsState);
+  const extensions = useRecoilValue(remoteExtensionsState);
+  const [isAdding, setIsAdding] = useState(false);
   const [showNewModal, setShowNewModal] = useState(false);
-  const [extensionName, setExtensionName] = useState<string | null>(null);
-  const [extensionVersion, setExtensionVersion] = useState<string | null>(null);
-  const [matchingExtensions, setMatchingExtensions] = useState<ExtensionConfig[]>([]);
-  const [selectedExtension, setSelectedExtension] = useState<any>();
 
   useEffect(() => {
     fetchExtensions();
   }, []);
 
-  useEffect(() => {
-    if (extensionName !== null) {
-      const source = axios.CancelToken.source();
-
-      const timer = setTimeout(() => {
-        httpClient
-          .get(`/extensions/search?q=${extensionName}`, { cancelToken: source.token })
-          .then((res) => {
-            setMatchingExtensions(res.data);
-          })
-          .catch((err) => {
-            if (!axios.isCancel(err)) {
-              console.error(err);
-            }
-          });
-      }, 200);
-
-      return () => {
-        source.cancel('User interruption');
-        clearTimeout(timer);
-      };
-    }
-  }, [extensionName]);
-
   const installedColumns: IColumn[] = [
     {
       key: 'name',
       name: formatMessage('Name'),
       minWidth: 100,
       maxWidth: 150,
       onRender: (item: ExtensionConfig) => {
-        return <span>{item.id}</span>;
+        return <span>{item.name}</span>;
       },
     },
     {
@@ -109,53 +85,8 @@ const Extensions: React.FC<RouteComponentProps> = () => {
     },
   ];
 
-  const matchingColumns: IColumn[] = [
-    {
-      key: 'name',
-      name: formatMessage('Name'),
-      minWidth: 100,
-      maxWidth: 150,
-      onRender: (item: any) => {
-        return <span>{item.id}</span>;
-      },
-    },
-    {
-      key: 'description',
-      name: formatMessage('Description'),
-      minWidth: 100,
-      maxWidth: 300,
-      isMultiline: true,
-      onRender: (item: any) => {
-        return <div css={{ overflowWrap: 'break-word' }}>{item.description}</div>;
-      },
-    },
-    {
-      key: 'version',
-      name: formatMessage('Version'),
-      minWidth: 30,
-      maxWidth: 100,
-      onRender: (item: any) => {
-        return <span>{item.version}</span>;
-      },
-    },
-    {
-      key: 'url',
-      name: formatMessage('Url'),
-      minWidth: 100,
-      maxWidth: 100,
-      onRender: (item: any) => {
-        return item.url ? (
-          <a href={item.url} rel="noopener noreferrer" target="_blank">
-            View on npm
-          </a>
-        ) : null;
-      },
-    },
-  ];
-
   const toolbarItems: IToolbarItem[] = [
-    // TODO (toanzian / abrown): re-enable once remote extensions are supported
-    /*{
+    {
       type: 'action',
       text: formatMessage('Add'),
       buttonProps: {
@@ -167,61 +98,32 @@ const Extensions: React.FC<RouteComponentProps> = () => {
         },
       },
       align: 'left',
-    },*/
+    },
   ];
 
-  const submit = useCallback(() => {
-    if (selectedExtension && extensionVersion) {
-      addExtension(selectedExtension.id, extensionVersion);
+  const submit = async (selectedExtension) => {
+    if (selectedExtension) {
+      setIsAdding(true);
       setShowNewModal(false);
-      setExtensionName(null);
-      setExtensionVersion(null);
-      setSelectedExtension(null);
+      await addExtension(selectedExtension.id);
+      setIsAdding(false);
     }
-  }, [selectedExtension, extensionVersion]);
+  };
 
   return (
     <div>
       <Toolbar toolbarItems={toolbarItems} />
-      <DetailsList
-        checkboxVisibility={CheckboxVisibility.hidden}
-        columns={installedColumns}
-        items={extensions}
-        layoutMode={DetailsListLayoutMode.justified}
-        selectionMode={SelectionMode.single}
-      />
-      <Dialog
-        dialogContentProps={{
-          type: DialogType.close,
-          title: formatMessage('Add new extension'),
-          subText: formatMessage('Search for extensions'),
-        }}
-        hidden={!showNewModal}
-        minWidth="600px"
-        onDismiss={() => setShowNewModal(false)}
-      >
-        <div>
-          <TextField
-            label={formatMessage('Extension name')}
-            value={extensionName ?? ''}
-            onChange={(_e, val) => setExtensionName(val ?? null)}
-          />
-          <DetailsList
-            checkboxVisibility={CheckboxVisibility.always}
-            columns={matchingColumns}
-            items={matchingExtensions}
-            layoutMode={DetailsListLayoutMode.justified}
-            selectionMode={SelectionMode.single}
-            onActiveItemChanged={(item) => setSelectedExtension(item)}
-          />
-        </div>
-        <DialogFooter>
-          <DefaultButton onClick={() => setShowNewModal(false)}>Cancel</DefaultButton>
-          <PrimaryButton disabled={false} onClick={submit}>
-            {formatMessage('Add')}
-          </PrimaryButton>
-        </DialogFooter>
-      </Dialog>
+      {(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} />
     </div>
   );
 };

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

@@ -0,0 +1,165 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { useState, useEffect } from 'react';
+import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
+import {
+  DetailsListLayoutMode,
+  SelectionMode,
+  IColumn,
+  CheckboxVisibility,
+} from 'office-ui-fabric-react/lib/DetailsList';
+import { ShimmeredDetailsList } from 'office-ui-fabric-react/lib/ShimmeredDetailsList';
+import axios from 'axios';
+import formatMessage from 'format-message';
+
+import httpClient from '../../../utils/httpUtil';
+
+// TODO: extract to shared?
+type ExtensionSearchResult = {
+  id: string;
+  keywords: string[];
+  version: string;
+  description: string;
+  url: string;
+};
+
+type InstallExtensionDialogProps = {
+  isOpen: boolean;
+  onDismiss: () => void;
+  onInstall: (selectedExtension: ExtensionSearchResult) => Promise<void>;
+};
+
+const InstallExtensionDialog: React.FC<InstallExtensionDialogProps> = (props) => {
+  const { isOpen, onDismiss, onInstall } = props;
+  const [searchQuery, setSearchQuery] = useState<string | null>(null);
+  const [matchingExtensions, setMatchingExtensions] = useState<ExtensionSearchResult[]>([]);
+  const [selectedExtension, setSelectedExtension] = useState<ExtensionSearchResult | null>(null);
+  const [isSearching, setIsSearching] = useState(false);
+
+  useEffect(() => {
+    if (searchQuery !== null) {
+      const source = axios.CancelToken.source();
+
+      const timer = setTimeout(() => {
+        setIsSearching(true);
+        httpClient
+          .get(`/extensions/search?q=${searchQuery}`, { cancelToken: source.token })
+          .then((res) => {
+            setMatchingExtensions(res.data);
+            setIsSearching(false);
+          })
+          .catch((err) => {
+            setIsSearching(false);
+            if (!axios.isCancel(err)) {
+              // TODO: abrown - what to do on error?
+              // eslint-disable-next-line no-console
+              console.error(err);
+            }
+          });
+      }, 200);
+
+      return () => {
+        source.cancel('User interruption');
+        clearTimeout(timer);
+      };
+    }
+  }, [searchQuery]);
+
+  const matchingColumns: 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">
+            View on npm
+          </a>
+        ) : null;
+      },
+    },
+  ];
+
+  const onSubmit = async () => {
+    if (selectedExtension) {
+      await onInstall(selectedExtension);
+      setSearchQuery(null);
+      setMatchingExtensions([]);
+      setSelectedExtension(null);
+    }
+  };
+
+  return (
+    <Dialog
+      dialogContentProps={{
+        type: DialogType.close,
+        title: formatMessage('Add new extension'),
+      }}
+      hidden={!isOpen}
+      minWidth="800px"
+      onDismiss={onDismiss}
+    >
+      <div>
+        <TextField
+          label={formatMessage('Search for extensions on npm')}
+          value={searchQuery ?? ''}
+          onChange={(_e, val) => setSearchQuery(val ?? null)}
+        />
+        {(matchingExtensions.length > 0 || isSearching) && (
+          <ShimmeredDetailsList
+            checkboxVisibility={CheckboxVisibility.always}
+            columns={matchingColumns}
+            enableShimmer={isSearching}
+            items={matchingExtensions}
+            layoutMode={DetailsListLayoutMode.justified}
+            selectionMode={SelectionMode.single}
+            shimmerLines={5}
+            onActiveItemChanged={(item) => setSelectedExtension(item)}
+          />
+        )}
+      </div>
+      <DialogFooter>
+        <DefaultButton onClick={onDismiss}>Cancel</DefaultButton>
+        <PrimaryButton disabled={false} onClick={onSubmit}>
+          {formatMessage('Add')}
+        </PrimaryButton>
+      </DialogFooter>
+    </Dialog>
+  );
+};
+
+export { InstallExtensionDialog };