feat: Updating to Tab UI for bot settings page

Composer/cypress/integration/LuisDeploy.spec.ts

@@ -14,6 +14,7 @@ context('Luis Deploy', () => {
 
   it('can deploy luis success', () => {
     cy.visitPage('Project Settings');
+    cy.findByText('LUIS and QnA').click();
     cy.findAllByTestId('rootLUISAuthoringKey').type('12345678', { delay: 200 });
     cy.findAllByTestId('rootLUISRegion').click();
     cy.findByText('westus').click();

Composer/packages/client/__tests__/components/header.test.tsx

@@ -39,6 +39,6 @@ describe('<Header />', () => {
       return { location: { pathname: 'http://server/bot/1234/settings' } };
     });
     const result = renderWithRecoil(<Header />);
-    expect(result.findAllByDisplayValue('Start all bots')).not.toBeNull();
+    expect(result.findAllByDisplayValue('Start bot')).not.toBeNull();
   });
 });

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

@@ -0,0 +1,80 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { useRecoilValue } from 'recoil';
+import React, { useState, Fragment } from 'react';
+import { RouteComponentProps } from '@reach/router';
+import { DisplayMarkdownDialog } from '@bfc/ui-shared';
+import formatMessage from 'format-message';
+import { Stack, StackItem } from 'office-ui-fabric-react/lib/Stack';
+import { Link } from 'office-ui-fabric-react/lib/Link';
+
+import { projectReadmeState, locationState } from '../../recoilModel/atoms';
+import { localBotsDataSelector } from '../../recoilModel/selectors/project';
+
+const labelStyle = css`
+  font-size: 12px;
+  color: #828282;
+`;
+
+const valueStyle = css`
+  font-size: 14px;
+`;
+
+const headerStyle = css`
+  font-size: 16px;
+  font-weight: 600;
+`;
+
+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(projectReadmeState(projectId));
+  const location = useRecoilValue(locationState(projectId));
+  const [readmeHidden, setReadmeHidden] = useState<boolean>(true);
+
+  return (
+    <div>
+      <h3 css={headerStyle}>{formatMessage('Bot Details')}</h3>
+      <Stack tokens={{ childrenGap: 10 }}>
+        <StackItem>
+          <div css={labelStyle}>{formatMessage('Bot Name')}</div>
+          <div css={valueStyle}>{botProject?.name}</div>
+        </StackItem>
+        <StackItem>
+          <div css={labelStyle}>{formatMessage('File Location')}</div>
+          <div css={valueStyle}>{location}</div>
+        </StackItem>
+        <StackItem styles={{ root: { marginBottom: '10px' } }}>
+          <div css={labelStyle}>{formatMessage('Read Me')}</div>
+          {readme && (
+            <Fragment>
+              <Link
+                onClick={() => {
+                  setReadmeHidden(false);
+                }}
+              >
+                {formatMessage('View project readme')}
+              </Link>
+              <DisplayMarkdownDialog
+                content={readme}
+                hidden={readmeHidden}
+                title={'Project Readme'}
+                onDismiss={() => {
+                  setReadmeHidden(true);
+                }}
+              />
+            </Fragment>
+          )}
+        </StackItem>
+      </Stack>
+    </div>
+  );
+};
+
+export default BotProjectInfo;

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

@@ -10,8 +10,6 @@ import { RouteComponentProps } from '@reach/router';
 import { JsonEditor } from '@bfc/code-editor';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 import { DialogSetting } from '@bfc/shared';
-import { FontSizes, FontWeights } from 'office-ui-fabric-react/lib/Styling';
-import { NeutralColors } from '@uifabric/fluent-theme';
 import { defaultToolbarButtonStyles } from '@bfc/ui-shared';
 
 import TelemetryClient from '../../telemetry/TelemetryClient';
@@ -25,7 +23,7 @@ import { createBotSettingUrl, navigateTo } from '../../utils/navigation';
 import { mergePropertiesManagedByRootBot } from '../../recoilModel/dispatchers/utils/project';
 
 import { openDeleteBotModal } from './DeleteBotButton';
-import BotProjectSettingsTableView from './BotProjectSettingsTableView';
+import { BotProjectSettingsTabView } from './BotProjectsSettingsTabView';
 
 // -------------------- Styles -------------------- //
 
@@ -45,18 +43,6 @@ const container = css`
   height: 100%;
 `;
 
-const botNameStyle = css`
-  font-size: ${FontSizes.xLarge};
-  font-weight: ${FontWeights.semibold};
-  color: ${NeutralColors.black};
-`;
-
-const mainContentHeader = css`
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 15px;
-`;
-
 // -------------------- BotProjectSettings -------------------- //
 
 const BotProjectSettings: React.FC<RouteComponentProps<{ projectId: string; skillId: string }>> = (props) => {
@@ -68,8 +54,6 @@ const BotProjectSettings: React.FC<RouteComponentProps<{ projectId: string; skil
   const botProject = botProjects.find((b) => b.projectId === currentProjectId);
   const { deleteBot } = useRecoilValue(dispatcherState);
 
-  const isRootBot = !!botProject?.isRootBot;
-  const botName = botProject?.name;
   const settings = useRecoilValue(settingsState(currentProjectId));
   const mergedSettings = mergePropertiesManagedByRootBot(currentProjectId, rootBotProjectId, settings);
 
@@ -205,19 +189,6 @@ const BotProjectSettings: React.FC<RouteComponentProps<{ projectId: string; skil
     >
       <Suspense fallback={<LoadingSpinner />}>
         <div css={container}>
-          <div css={mainContentHeader}>
-            <div css={botNameStyle}>
-              {`${botName} (${isRootBot ? formatMessage('Root Bot') : formatMessage('Skill')})`}
-            </div>
-            <Toggle
-              inlineLabel
-              checked={isAdvancedSettingsEnabled}
-              className={'advancedSettingsView'}
-              defaultChecked={false}
-              label={formatMessage('Advanced Settings View (json)')}
-              onChange={() => setAdvancedSettingsEnabled(!isAdvancedSettingsEnabled)}
-            />
-          </div>
           {isAdvancedSettingsEnabled ? (
             <JsonEditor
               key={'settingsjson'}
@@ -227,8 +198,19 @@ const BotProjectSettings: React.FC<RouteComponentProps<{ projectId: string; skil
               onChange={handleChange}
             />
           ) : (
-            <BotProjectSettingsTableView projectId={currentProjectId} scrollToSectionId={props.location?.hash} />
+            <BotProjectSettingsTabView projectId={currentProjectId} scrollToSectionId={props.location?.hash} />
           )}
+          <Toggle
+            inlineLabel
+            checked={isAdvancedSettingsEnabled}
+            className={'advancedSettingsView'}
+            defaultChecked={false}
+            label={formatMessage('Advanced Settings View (json)')}
+            styles={{ root: { position: 'absolute', left: '700px', top: '30px' } }}
+            onChange={() => {
+              setAdvancedSettingsEnabled(!isAdvancedSettingsEnabled);
+            }}
+          />
         </div>
       </Suspense>
     </Page>

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';
@@ -46,6 +47,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/pages/botProject/BotProjectsSettingsTabView.tsx

@@ -0,0 +1,118 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import { useRecoilValue } from 'recoil';
+import React, { useEffect, useState } from 'react';
+import { RouteComponentProps } from '@reach/router';
+import { Pivot, PivotItem } from 'office-ui-fabric-react/lib/components/Pivot';
+import formatMessage from 'format-message';
+
+import { localBotsDataSelector } from '../../recoilModel/selectors/project';
+import { useFeatureFlag } from '../../utils/hooks';
+
+import { SkillHostEndPoint } from './SkillHostEndPoint';
+import { BotProjectInfo } from './BotProjectInfo';
+import { AppIdAndPassword } from './AppIdAndPassword';
+import { ExternalService } from './ExternalService';
+import { BotLanguage } from './BotLanguage';
+import { RuntimeSettings } from './RuntimeSettings';
+import { PublishTargets } from './PublishTargets';
+import AdapterSection from './adapters/AdapterSection';
+
+// -------------------- Styles -------------------- //
+
+const container = css`
+  display: flex;
+  flex-direction: column;
+  max-width: 1000px;
+  height: 100%;
+`;
+
+const publishTargetsWrap = (isLastComponent) => css`
+  margin-bottom: ${isLastComponent ? '120px' : 0};
+`;
+
+const idsInTab: Record<PivotItemKey, string[]> = {
+  Basics: ['runtimeSettings'],
+  LuisQna: [],
+  Connections: ['connections', 'addNewPublishProfile'],
+  SkillConfig: [],
+  Language: [],
+};
+
+enum PivotItemKey {
+  Basics = 'Basics',
+  LuisQna = 'LuisQna',
+  Connections = 'Connections',
+  SkillConfig = 'SkillConfig',
+  Language = 'Language',
+}
+
+// -------------------- BotProjectSettingsTableView -------------------- //
+
+export const BotProjectSettingsTabView: React.FC<RouteComponentProps<{
+  projectId: string;
+  scrollToSectionId: string;
+}>> = (props) => {
+  const { projectId = '', scrollToSectionId = '' } = props;
+  const botProjects = useRecoilValue(localBotsDataSelector);
+  const botProject = botProjects.find((b) => b.projectId === projectId);
+  const isRootBot = !!botProject?.isRootBot;
+  const useAdapters = useFeatureFlag('NEW_CREATION_FLOW');
+  const [selectedKey, setSelectedKey] = useState(PivotItemKey.Basics);
+
+  useEffect(() => {
+    if (scrollToSectionId) {
+      const htmlIdTagName = scrollToSectionId.replace('#', '');
+      for (const key in PivotItemKey) {
+        if (idsInTab[key].includes(htmlIdTagName)) {
+          setSelectedKey(key as PivotItemKey);
+        }
+      }
+    }
+  }, [scrollToSectionId]);
+
+  return (
+    <div css={container}>
+      <Pivot
+        selectedKey={String(selectedKey)}
+        onLinkClick={(item) => {
+          item?.props.itemKey && setSelectedKey(item.props.itemKey as PivotItemKey);
+        }}
+      >
+        <PivotItem data-testid="basicsTab" headerText={formatMessage('Basics')} itemKey={PivotItemKey.Basics}>
+          <BotProjectInfo projectId={projectId} />
+          <AppIdAndPassword projectId={projectId} />
+          <RuntimeSettings projectId={projectId} scrollToSectionId={scrollToSectionId} />
+        </PivotItem>
+        <PivotItem data-testid="luisQnaTab" headerText={formatMessage('LUIS and QnA')} itemKey={PivotItemKey.LuisQna}>
+          <ExternalService projectId={projectId} scrollToSectionId={scrollToSectionId} />
+        </PivotItem>
+        <PivotItem
+          data-testid="connectionsTab"
+          headerText={formatMessage('Connections')}
+          itemKey={PivotItemKey.Connections}
+        >
+          <div css={publishTargetsWrap(!isRootBot)}>
+            <PublishTargets projectId={projectId} scrollToSectionId={scrollToSectionId} />
+            {isRootBot && useAdapters && <AdapterSection projectId={projectId} scrollToSectionId={scrollToSectionId} />}
+          </div>
+        </PivotItem>
+        <PivotItem
+          data-testid="skillsTab"
+          headerText={formatMessage('Skill Configuration')}
+          itemKey={PivotItemKey.SkillConfig}
+        >
+          {isRootBot && <SkillHostEndPoint projectId={projectId} />}
+        </PivotItem>
+        <PivotItem data-testid="languageTab" headerText={formatMessage('Language')} itemKey={PivotItemKey.Language}>
+          <BotLanguage projectId={projectId} />
+        </PivotItem>
+      </Pivot>
+    </div>
+  );
+};
+
+export default BotProjectSettingsTabView;