feat: Updating to Tab UI for bot settings page

Composer/packages/client/src/pages/botProject/BotProjectInfo.tsx

@@ -0,0 +1,65 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { useRecoilValue } from 'recoil';
+import React, { useState, Fragment } from 'react';
+import { RouteComponentProps } from '@reach/router';
+import { DisplayReadme } from '@bfc/ui-shared';
+import formatMessage from 'format-message';
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
+
+import { readmeState, locationState } from '../../recoilModel/atoms';
+import { localBotsDataSelector } from '../../recoilModel/selectors/project';
+
+export const BotProjectInfo: React.FC<RouteComponentProps<{
+  projectId: string;
+}>> = (props) => {
+  const { projectId = '' } = props;
+  const botProjects = useRecoilValue(localBotsDataSelector);
+  const botProject = botProjects.find((b) => b.projectId === projectId);
+  const readme = useRecoilValue(readmeState(projectId));
+  const location = useRecoilValue(locationState(projectId));
+  const [readmeHidden, setReadmeHidden] = useState<boolean>(true);
+
+  return (
+    <div>
+      <h1>{botProject?.name}</h1>
+      <p>
+        {formatMessage('File Location:')}
+        <span
+          style={{
+            display: 'inline-block',
+            overflowWrap: 'break-word',
+            maxWidth: '100%',
+            fontSize: 12,
+          }}
+        >
+          {location}
+        </span>
+      </p>
+      {readme && (
+        <Fragment>
+          <DefaultButton
+            onClick={() => {
+              setReadmeHidden(false);
+            }}
+          >
+            {formatMessage('View project readme')}
+          </DefaultButton>
+          <DisplayReadme
+            hidden={readmeHidden}
+            readme={readme}
+            title={'Project Readme'}
+            onDismiss={() => {
+              setReadmeHidden(true);
+            }}
+          />
+        </Fragment>
+      )}
+    </div>
+  );
+};
+
+export default BotProjectInfo;

Composer/packages/client/src/pages/botProject/BotProjectSettingsTableView.tsx

@@ -10,6 +10,7 @@ import { RouteComponentProps } from '@reach/router';
 import { localBotsDataSelector } from '../../recoilModel/selectors/project';
 import { useFeatureFlag } from '../../utils/hooks';
 
+import { BotProjectInfo } from './BotProjectInfo';
 import { SkillHostEndPoint } from './SkillHostEndPoint';
 import { AppIdAndPassword } from './AppIdAndPassword';
 import { ExternalService } from './ExternalService';
@@ -47,6 +48,7 @@ export const BotProjectSettingsTableView: React.FC<RouteComponentProps<{
 
   return (
     <div css={container}>
+      <BotProjectInfo projectId={projectId} />
       {isRootBot && <SkillHostEndPoint projectId={projectId} />}
       <AppIdAndPassword projectId={projectId} />
       <ExternalService projectId={projectId} scrollToSectionId={scrollToSectionId} />

Composer/packages/client/src/recoilModel/atoms/botState.ts

@@ -177,6 +177,13 @@ export const locationState = atomFamily<string, string>({
   },
 });
 
+export const readmeState = atomFamily<string, string>({
+  key: getFullyQualifiedKey('readme'),
+  default: (id) => {
+    return '';
+  },
+});
+
 export const botEnvironmentState = atomFamily<string, string>({
   key: getFullyQualifiedKey('botEnvironment'),
   default: (id) => {

Composer/packages/client/src/recoilModel/dispatchers/utils/project.ts

@@ -53,6 +53,7 @@ import {
   botProjectIdsState,
   botProjectSpaceLoadedState,
   botStatusState,
+  readmeState,
   currentProjectIdState,
   dialogSchemasState,
   dialogState,
@@ -433,7 +434,7 @@ export const initQnaFilesStatus = (projectId: string, qnaFiles: QnAFile[], dialo
 
 export const initBotState = async (callbackHelpers: CallbackInterface, data: any, botFiles: any) => {
   const { set } = callbackHelpers;
-  const { botName, botEnvironment, location, schemas, settings, id: projectId, diagnostics } = data;
+  const { botName, botEnvironment, location, readme, schemas, settings, id: projectId, diagnostics } = data;
   const {
     dialogs,
     dialogSchemas,
@@ -500,6 +501,7 @@ export const initBotState = async (callbackHelpers: CallbackInterface, data: any
   set(botDiagnosticsState(projectId), diagnostics);
   refreshLocalStorage(projectId, settings);
   set(settingsState(projectId), mergedSettings);
+  set(readmeState(projectId), readme);
 
   set(filePersistenceState(projectId), new FilePersistence(projectId));
   set(undoHistoryState(projectId), new UndoHistory(projectId));

Composer/packages/lib/ui-shared/package.json

@@ -29,6 +29,7 @@
   "dependencies": {
     "@emotion/core": "^10.0.27",
     "@emotion/styled": "^10.0.27",
+    "react-markdown": "^5.0.3",
     "office-ui-fabric-react": "7.71.0"
   },
   "devDependencies": {

Composer/packages/lib/ui-shared/src/components/DisplayReadme/DisplayReadme.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
+import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import { ScrollablePane } from 'office-ui-fabric-react/lib/ScrollablePane';
+import formatMessage from 'format-message';
+import ReactMarkdown from 'react-markdown';
+
+import { DialogTypes, DialogWrapper } from '../DialogWrapper';
+
+type DisplayReadmeProps = {
+  title: string;
+  readme: string;
+  hidden: boolean;
+  onBack?: () => void;
+  onDismiss: () => void;
+};
+
+export const DisplayReadme = (props: DisplayReadmeProps) => {
+  return (
+    <DialogWrapper
+      dialogType={DialogTypes.CreateFlow}
+      isOpen={!props.hidden}
+      title={props.title}
+      onDismiss={props.onDismiss}
+    >
+      <div css={{ height: 500, position: 'relative', border: '1px solid #333' }}>
+        <ScrollablePane>
+          <ReactMarkdown css={{ padding: 20 }} linkTarget="_blank">
+            {props.readme}
+          </ReactMarkdown>
+        </ScrollablePane>
+      </div>
+      <DialogFooter>
+        {props.onBack && <DefaultButton text={formatMessage('Back')} onClick={props.onBack} />}
+        <PrimaryButton text={formatMessage('Okay')} onClick={props.onDismiss} />
+      </DialogFooter>
+    </DialogWrapper>
+  );
+};

Composer/packages/lib/ui-shared/src/components/index.ts

@@ -7,3 +7,4 @@ export * from './LoadingSpinner';
 export * from './ConfirmDialog';
 export * from './PropertyAssignment';
 export * from './Toolbar';
+export * from './DisplayReadme/DisplayReadme';

Composer/packages/server/src/locales/en-US.json

@@ -3635,6 +3635,9 @@
   "view_on_npm_2051324d": {
     "message": "View on npm"
   },
+  "view_project_readme_ff079d2e": {
+    "message": "View project readme"
+  },
   "vishwac_sena_45910bf0": {
     "message": "Vishwac Sena"
   },

Composer/packages/server/src/models/bot/botProject.ts

@@ -54,6 +54,7 @@ export class BotProject implements IBotProject {
   public id: string | undefined;
   public name: string;
   public dir: string;
+  public readme: string;
   public dataDir: string;
   public eTag?: string;
   public fileStorage: IFileStorage;
@@ -83,6 +84,7 @@ export class BotProject implements IBotProject {
     this.settingManager = new DefaultSettingManager(this.dir);
     this.fileStorage = StorageService.getStorageClient(this.ref.storageId, user);
     this.builder = new Builder(this.dir, this.fileStorage, defaultLanguage);
+    this.readme = '';
   }
 
   public get dialogFiles() {
@@ -181,12 +183,14 @@ export class BotProject implements IBotProject {
     this.diagnostics = [];
     this.settings = await this.getEnvSettings(false);
     this.files = await this._getFiles();
+    this.readme = await this._getReadme();
   };
 
   public getProject = () => {
     return {
       botName: this.name,
       files: Array.from(this.files.values()),
+      readme: this.readme,
       location: this.dir,
       schemas: this.getSchemas(),
       diagnostics: this.diagnostics,
@@ -773,6 +777,19 @@ export class BotProject implements IBotProject {
     }
   };
 
+  private _getReadme = async (): Promise<string> => {
+    const variants = ['readme.md', 'README.md', 'README.MD'];
+
+    for (const v in variants) {
+      const readmePath = Path.join(this.dir, variants[v]);
+      if (await this.fileStorage.exists(readmePath)) {
+        return await this.fileStorage.readFile(readmePath);
+      }
+    }
+
+    return '';
+  };
+
   private _getFiles = async () => {
     if (!(await this.exists())) {
       throw new Error(`${this.dir} is not a valid path`);

extensions/packageManager/src/components/LibraryList.tsx

@@ -33,6 +33,7 @@ export interface LibraryRef {
   language: string;
   source?: string;
   isCompatible?: boolean;
+  readme?: string;
 }
 
 export interface ILibraryListProps {

extensions/packageManager/src/node/index.ts

@@ -2,6 +2,8 @@
 // Licensed under the MIT License.
 
 import * as path from 'path';
+import * as fs from 'fs';
+import { DH_CHECK_P_NOT_SAFE_PRIME } from 'constants';
 
 import axios from 'axios';
 import { IExtensionRegistration } from '@botframework-composer/types';
@@ -26,6 +28,26 @@ const isAdaptiveComponent = (c) => {
   return hasSchema(c) || c.includesExports;
 };
 
+const loadReadme = async (components) => {
+  const variants = ['readme.md', 'README.md', 'README.MD'];
+  for (const c in components) {
+    if (components[c].path) {
+      const rootFolder = path.dirname(components[c].path);
+      for (const v in variants) {
+        const readmePath = path.join(rootFolder, variants[v]);
+        // eslint-disable-next-line security/detect-non-literal-fs-filename
+        if (fs.existsSync(readmePath)) {
+          // eslint-disable-next-line security/detect-non-literal-fs-filename
+          components[c].readme = fs.readFileSync(readmePath, 'utf-8');
+          continue;
+        }
+      }
+    }
+  }
+
+  return components;
+};
+
 export default async (composer: IExtensionRegistration): Promise<void> => {
   const updateRecentlyUsed = (componentList, runtimeLanguage) => {
     const recentlyUsed = (composer.store.read('recentlyUsed') as any[]) || [];
@@ -216,7 +238,7 @@ export default async (composer: IExtensionRegistration): Promise<void> => {
         if (dryRunMergeResults) {
           res.json({
             projectId,
-            components: dryRunMergeResults.components.filter(isAdaptiveComponent),
+            components: await loadReadme(dryRunMergeResults.components.filter(isAdaptiveComponent)),
           });
         } else {
           res.status(500).json({
@@ -304,7 +326,7 @@ export default async (composer: IExtensionRegistration): Promise<void> => {
             );
 
             const mergeResults = await realMerge.merge();
-            const installedComponents = mergeResults.components.filter(isAdaptiveComponent);
+            const installedComponents = await loadReadme(mergeResults.components.filter(isAdaptiveComponent));
             if (mergeResults) {
               res.json({
                 success: true,
@@ -406,7 +428,7 @@ export default async (composer: IExtensionRegistration): Promise<void> => {
 
           res.json({
             success: true,
-            components: mergeResults.components.filter(isAdaptiveComponent),
+            components: await loadReadme(mergeResults.components.filter(isAdaptiveComponent)),
           });
 
           // update the settings.plugins array

extensions/packageManager/src/pages/Library.tsx

@@ -32,7 +32,7 @@ import {
   useTelemetryClient,
   TelemetryClient,
 } from '@bfc/extension-client';
-import { Toolbar, IToolbarItem, LoadingSpinner } from '@bfc/ui-shared';
+import { Toolbar, IToolbarItem, LoadingSpinner, DisplayReadme } from '@bfc/ui-shared';
 import ReactMarkdown from 'react-markdown';
 
 import { ContentHeaderStyle, HeaderText } from '../components/styles';
@@ -78,6 +78,7 @@ const Library: React.FC = () => {
   const [readmeContent, setReadmeContent] = useState<string>('');
   const [versionOptions, setVersionOptions] = useState<IContextualMenuProps | undefined>(undefined);
   const [isUpdate, setIsUpdate] = useState<boolean>(false);
+  const [readmeHidden, setReadmeHidden] = useState<boolean>(true);
   const httpClient = useHttpClient();
   const API_ROOT = '';
   const TABS = {
@@ -399,6 +400,14 @@ const Library: React.FC = () => {
         setWorking('');
         updateInstalledComponents(results.data.components);
 
+        // find newly installed item
+        // and pop up the readme if one exists.
+        const newItem = results.data.components.find((i) => i.name === packageName);
+        if (newItem?.readme) {
+          setSelectedItem(newItem);
+          setReadmeHidden(false);
+        }
+
         // reload modified content
         await reloadProject();
       }
@@ -571,6 +580,16 @@ const Library: React.FC = () => {
         hidden={!isModalVisible}
         onUpdateFeed={updateFeed}
       />
+      {selectedItem && (
+        <DisplayReadme
+          hidden={readmeHidden}
+          readme={selectedItem?.readme}
+          title={'Project Readme'}
+          onDismiss={() => {
+            setReadmeHidden(true);
+          }}
+        />
+      )}
       <Toolbar toolbarItems={toolbarItems} />
       <div css={ContentHeaderStyle}>
         <h1 css={HeaderText}>{strings.title}</h1>
@@ -826,6 +845,18 @@ const Library: React.FC = () => {
                 </p>
               )}
 
+              {selectedItem.readme && (
+                <Fragment>
+                  <DefaultButton
+                    onClick={() => {
+                      setReadmeHidden(false);
+                    }}
+                  >
+                    View readme
+                  </DefaultButton>
+                  &nbsp;
+                </Fragment>
+              )}
               {isInstalled(selectedItem) && <DefaultButton onClick={removeComponent}>Uninstall</DefaultButton>}
             </Fragment>
           ) : (

extensions/packageManager/yarn.lock

@@ -82,6 +82,7 @@
     "@emotion/core" "^10.0.27"
     "@emotion/styled" "^10.0.27"
     office-ui-fabric-react "7.71.0"
+    react-markdown "^5.0.3"
 
 "@botframework-composer/types@*", "@botframework-composer/types@file:../../Composer/packages/types":
   version "0.0.2"