fix: misc bug fixes in creation (microsoft#6950)

* Added hash to tab routing * Fixing manage profile deep link * Styling changes to remove double scroll bar in package manager * Cleaning up style naming Co-authored-by: Chris Whitten <[email protected]>
lei9444 · Apr 16, 2021 · 0a50f34 · 0a50f34
1 parent 7fe4d13
commit 0a50f34
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 11 deletions.
diff --git a/Composer/packages/client/src/pages/botProject/BotProjectsSettingsTabView.tsx b/Composer/packages/client/src/pages/botProject/BotProjectsSettingsTabView.tsx
@@ -10,6 +10,7 @@ import { Pivot, PivotItem } from 'office-ui-fabric-react/lib/components/Pivot';
 import formatMessage from 'format-message';
 
 import { localBotsDataSelector } from '../../recoilModel/selectors/project';
+import { navigateTo } from '../../utils/navigation';
 
 import { BotSkillConfiguration } from './BotSkillConfiguration';
 import { BotProjectInfo } from './BotProjectInfo';
@@ -72,7 +73,10 @@ export const BotProjectSettingsTabView: React.FC<RouteComponentProps<{
       <Pivot
         selectedKey={String(selectedKey)}
         onLinkClick={(item) => {
-          item?.props.itemKey && setSelectedKey(item.props.itemKey as PivotItemKey);
+          if (item?.props.itemKey) {
+            setSelectedKey(item.props.itemKey as PivotItemKey);
+            navigateTo(`/bot/${projectId}/botProjectsSettings/#${item.props.itemKey}`);
+          }
         }}
       >
         <PivotItem data-testid="basicsTab" headerText={formatMessage('Basics')} itemKey={PivotItemKey.Basics}>

diff --git a/Composer/packages/client/src/pages/botProject/adapters/ABSChannels.tsx b/Composer/packages/client/src/pages/botProject/adapters/ABSChannels.tsx
@@ -116,7 +116,7 @@ export const ABSChannels: React.FC<RuntimeSettingsProps> = (props) => {
   const onSelectProfile = async (_, opt) => {
     if (opt.key === 'manageProfiles') {
       TelemetryClient.track('ConnectionsAddNewProfile');
-      navigateTo(`/bot/${projectId}/botProjectsSettings/#addNewPublishProfile`);
+      navigateTo(`/bot/${projectId}/publish/all/#addNewPublishProfile`);
     } else {
       let newtoken = '';
       if (userShouldProvideTokens()) {

diff --git a/Composer/packages/client/src/pages/publish/Publish.tsx b/Composer/packages/client/src/pages/publish/Publish.tsx
@@ -29,6 +29,7 @@ import { AuthClient } from '../../utils/authClient';
 import TelemetryClient from '../../telemetry/TelemetryClient';
 import { ApiStatus, PublishStatusPollingUpdater, pollingUpdaterList } from '../../utils/publishStatusPollingUpdater';
 import { PublishTargets } from '../botProject/PublishTargets';
+import { navigateTo } from '../../utils/navigation';
 
 import { ProjectList } from './components/projectList/ProjectList';
 import { PublishDialog } from './PublishDialog';
@@ -233,14 +234,14 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
   };
 
   const manageSkillPublishProfile = (skillId: string) => {
-    setActiveTab('provision');
+    setActiveTab('addNewPublishProfile');
     setProvisionProject(skillId);
   };
 
   // pop out get started if #getstarted is in the URL
   useEffect(() => {
     if (location.hash === '#addNewPublishProfile') {
-      setActiveTab('provision');
+      setActiveTab('addNewPublishProfile');
     }
   }, [location]);
 
@@ -426,7 +427,13 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
       <Pivot
         selectedKey={activeTab}
         styles={{ root: { marginLeft: 12 } }}
-        onLinkClick={(link) => setActiveTab(link?.props?.itemKey || '')}
+        onLinkClick={(link) => {
+          setActiveTab(link?.props?.itemKey || '');
+          if (link?.props.itemKey) {
+            setActiveTab(link.props.itemKey);
+            navigateTo(`/bot/${projectId}/publish/all/#${link.props.itemKey}`);
+          }
+        }}
       >
         <PivotItem headerText={formatMessage('Publish')} itemKey={'publish'}>
           <div css={ContentStyle} data-testid="Publish" role="main">
@@ -444,7 +451,7 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
             </div>
           </div>
         </PivotItem>
-        <PivotItem headerText={formatMessage('Publishing Profile')} itemKey={'provision'}>
+        <PivotItem headerText={formatMessage('Publishing Profile')} itemKey={'addNewPublishProfile'}>
           <Stack horizontal verticalFill styles={{ root: { borderTop: '1px solid #CCC' } }}>
             {botProjectData && botProjectData.length > 1 && (
               <Stack.Item styles={{ root: { width: '175px', borderRight: '1px solid #CCC' } }}>

diff --git a/extensions/packageManager/src/components/styles.ts b/extensions/packageManager/src/components/styles.ts
@@ -4,8 +4,15 @@ import { css } from '@emotion/core';
 import { FontWeights, FontSizes } from 'office-ui-fabric-react';
 import { NeutralColors } from '@uifabric/fluent-theme';
 
+export const packageScrollContainerStyle = {
+  root: { borderTop: '1px solid #CCC', height: 'calc(100% - 150px)' },
+};
+
+export const tabAndSearchBarStyles = { root: { paddingLeft: '12px', paddingRight: '20px', height: '48px' } };
+
 export const ContentHeaderStyle = css`
   padding: 5px 20px;
+  height: 95px;
 `;
 export const HeaderText = css`
   font-size: ${FontSizes.xLarge};
@@ -60,6 +67,7 @@ export const targetListTiTle = css`
 `;
 
 export const listRoot = css`
+  height: calc(100% - 48px);
   position: relative;
   overflow-y: auto;
   flex-grow: 1;

diff --git a/extensions/packageManager/src/pages/Library.tsx b/extensions/packageManager/src/pages/Library.tsx
@@ -35,7 +35,12 @@ import {
 import { Toolbar, IToolbarItem, LoadingSpinner, DisplayMarkdownDialog } from '@bfc/ui-shared';
 import ReactMarkdown from 'react-markdown';
 
-import { ContentHeaderStyle, HeaderText } from '../components/styles';
+import {
+  ContentHeaderStyle,
+  HeaderText,
+  packageScrollContainerStyle,
+  tabAndSearchBarStyles,
+} from '../components/styles';
 import { ImportDialog } from '../components/ImportDialog';
 import { LibraryRef, LibraryList, LetterIcon } from '../components/LibraryList';
 import { WorkingModal } from '../components/WorkingModal';
@@ -603,7 +608,7 @@ const Library: React.FC = () => {
           </Link>
         </p>
       </div>
-      <Stack horizontal verticalFill styles={{ root: { borderTop: '1px solid #CCC' } }}>
+      <Stack horizontal verticalFill styles={packageScrollContainerStyle}>
         {projectCollection && projectCollection.length > 1 && (
           <Stack.Item styles={{ root: { width: '175px', borderRight: '1px solid #CCC' } }}>
             <ProjectList
@@ -613,7 +618,7 @@ const Library: React.FC = () => {
             />
           </Stack.Item>
         )}
-        <Stack.Item align="stretch" styles={{ root: { flexGrow: 1, overflow: 'auto', maxHeight: '100%' } }}>
+        <Stack.Item align="stretch" styles={{ root: { flexGrow: 1, overflowX: 'hidden', maxHeight: '100%' } }}>
           {!ejectedRuntime && (
             <MessageBar
               actions={
@@ -632,7 +637,7 @@ const Library: React.FC = () => {
            *  This is the top nav that includes the tabs and search bar
            ****************************************************************************/}
 
-          <Stack horizontal styles={{ root: { paddingLeft: '12px', paddingRight: '20px' } }}>
+          <Stack horizontal styles={tabAndSearchBarStyles}>
             <Stack.Item align="stretch">
               <Pivot aria-label="Library Views" onLinkClick={(item: PivotItem) => setCurrentTab(item.props.itemKey)}>
                 <PivotItem headerText={strings.browseHeader} itemKey={TABS.BROWSE} />
@@ -746,7 +751,7 @@ const Library: React.FC = () => {
               width: '400px',
               padding: '10px 20px',
               borderLeft: '1px solid #CCC',
-              overflow: 'auto',
+              overflowX: 'auto',
               maxHeight: '100%',
             },
           }}