fix: Notification toast should have higher/highest Z order

Composer/packages/client/src/components/GetStarted/GetStarted.tsx

@@ -5,8 +5,9 @@
 import { jsx } from '@emotion/core';
 import React from 'react';
 import formatMessage from 'format-message';
-import { Panel, IPanelStyles } from 'office-ui-fabric-react/lib/Panel';
-import { Pivot, PivotItem, IPivotStyles } from 'office-ui-fabric-react/lib/Pivot';
+import { Panel, IPanelStyles, PanelType } from 'office-ui-fabric-react/lib/Panel';
+import { Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
 
 import { GetStartedNextSteps } from './GetStartedNextSteps';
 import { GetStartedLearn } from './GetStartedLearn';
@@ -25,45 +26,35 @@ const panelStyles = {
   root: {
     marginTop: 50,
   },
-  navigation: {
-    display: 'block',
-    height: 'auto',
-  },
 } as IPanelStyles;
 
-const pivotStyles = { root: { paddingLeft: 20, paddingTop: 10, width: '100%' } } as IPivotStyles;
-
 export const GetStarted: React.FC<GetStartedProps> = (props) => {
   const { projectId, onDismiss } = props;
 
   const renderTabs = () => {
     return (
-      <Pivot styles={pivotStyles}>
-        <PivotItem headerText={formatMessage('Next steps')}>
-          <GetStartedNextSteps {...props} />
-        </PivotItem>
-        <PivotItem headerText={formatMessage('Learning')}>
-          <GetStartedLearn projectId={projectId} onDismiss={onDismiss} />
-        </PivotItem>
-      </Pivot>
+      <Stack grow styles={{ root: { alignSelf: 'flex-start', padding: '0 20px' } }}>
+        <Pivot>
+          <PivotItem headerText={formatMessage('Next steps')}>
+            <GetStartedNextSteps {...props} />
+          </PivotItem>
+          <PivotItem headerText={formatMessage('Learning')}>
+            <GetStartedLearn projectId={projectId} onDismiss={onDismiss} />
+          </PivotItem>
+        </Pivot>
+      </Stack>
     );
   };
 
-  const onRenderNavigationContent = React.useCallback(
-    (props, defaultRender) => (
-      <div css={{ position: 'absolute', top: 15, right: 0, zIndex: 1 }}>{defaultRender(props)}</div>
-    ),
-    []
-  );
-
   return (
     <Panel
+      customWidth="395px"
       isBlocking={false}
       isOpen={props.isOpen}
       styles={panelStyles}
+      type={PanelType.custom}
       onDismiss={props.onDismiss}
       onRenderHeader={renderTabs}
-      onRenderNavigationContent={onRenderNavigationContent}
     />
   );
 };

Composer/packages/client/src/components/Header.tsx

@@ -158,7 +158,7 @@ export const Header = () => {
   const locale = useRecoilValue(localeState(projectId));
   const appUpdate = useRecoilValue(appUpdateState);
   const [teachingBubbleVisibility, setTeachingBubbleVisibility] = useState<boolean>();
-  const [showGetStartedTeachingBubble, setshowGetStartedTeachingBubble] = useState<boolean>(false);
+  const [showGetStartedTeachingBubble, setShowGetStartedTeachingBubble] = useState<boolean>(false);
   const settings = useRecoilValue(settingsState(projectId));
   const isWebChatPanelVisible = useRecoilValue(isWebChatPanelVisibleState);
   const botProjectSolutionLoaded = useRecoilValue(botProjectSpaceLoadedState);
@@ -213,10 +213,10 @@ export const Header = () => {
   // pop out get started if #getstarted is in the URL
   useEffect(() => {
     if (location.hash === '#getstarted') {
-      setshowGetStartedTeachingBubble(true);
+      setShowGetStartedTeachingBubble(true);
       setShowGetStarted(true);
     } else {
-      setshowGetStartedTeachingBubble(false);
+      setShowGetStartedTeachingBubble(false);
     }
   }, [location]);
 
@@ -386,7 +386,7 @@ export const Header = () => {
       <Panel
         isHiddenOnDismiss
         closeButtonAriaLabel={formatMessage('Close')}
-        customWidth={'395px'}
+        customWidth="395px"
         headerText={projectName}
         isBlocking={false}
         isOpen={isWebChatPanelVisible}
@@ -418,20 +418,21 @@ export const Header = () => {
             isWebChatPanelVisible={isWebChatPanelVisible}
           />
         ) : null}
-        <GetStarted
-          isOpen={botProjectSolutionLoaded && showGetStarted}
-          projectId={rootBotProjectId}
-          requiresLUIS={requiresLUIS}
-          requiresQNA={requiresQNA}
-          showTeachingBubble={botProjectSolutionLoaded && showGetStartedTeachingBubble}
-          onBotReady={() => {
-            setShowTeachingBubble(true);
-          }}
-          onDismiss={() => {
-            toggleGetStarted(false);
-          }}
-        />
       </Panel>
+
+      <GetStarted
+        isOpen={botProjectSolutionLoaded && showGetStarted}
+        projectId={rootBotProjectId}
+        requiresLUIS={requiresLUIS}
+        requiresQNA={requiresQNA}
+        showTeachingBubble={botProjectSolutionLoaded && showGetStartedTeachingBubble}
+        onBotReady={() => {
+          setShowTeachingBubble(true);
+        }}
+        onDismiss={() => {
+          toggleGetStarted(false);
+        }}
+      />
     </div>
   );
 };

Composer/packages/client/src/components/Notifications/NotificationContainer.tsx

@@ -4,23 +4,28 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 import isEmpty from 'lodash/isEmpty';
+import { Layer } from 'office-ui-fabric-react/lib/Layer';
 import { useRecoilValue } from 'recoil';
 
 import { dispatcherState } from '../../recoilModel';
 import { notificationsSelector } from '../../recoilModel/selectors/notifications';
+import { zIndices } from '../../utils/zIndices';
 
 import { NotificationCard } from './NotificationCard';
 
 // -------------------- Styles -------------------- //
 
 const container = css`
   cursor: default;
+  top: 50px;
+  height: calc(100vh - 50px);
   position: absolute;
   right: 0px;
   padding: 6px;
-  z-index: 1;
 `;
 
+const layerStyles = { root: { zIndex: zIndices.notificationContainer } };
+
 // -------------------- NotificationContainer -------------------- //
 
 export const NotificationContainer = () => {
@@ -30,18 +35,20 @@ export const NotificationContainer = () => {
   if (isEmpty(notifications)) return null;
 
   return (
-    <div css={container} role="presentation">
-      {notifications.map((item) => {
-        return (
-          <NotificationCard
-            key={item.id}
-            cardProps={item}
-            id={item.id}
-            onDismiss={deleteNotification}
-            onHide={hideNotification}
-          />
-        );
-      })}
-    </div>
+    <Layer styles={layerStyles}>
+      <div css={container} role="presentation">
+        {notifications.map((item) => {
+          return (
+            <NotificationCard
+              key={item.id}
+              cardProps={item}
+              id={item.id}
+              onDismiss={deleteNotification}
+              onHide={hideNotification}
+            />
+          );
+        })}
+      </div>
+    </Layer>
   );
 };

Composer/packages/client/src/components/Notifications/NotificationPanel.tsx

@@ -57,7 +57,7 @@ const NotificationPanel: React.FC<NotificationPanelProps> = ({
         <ActionButton styles={{ root: { color: SharedColors.cyanBlue10 } }} onClick={handleClearAll}>
           {formatMessage('Clear all')}
         </ActionButton>
-        {defaultRender!(props)}
+        {defaultRender?.(props)}
       </div>
     ),
     [handleClearAll]
@@ -67,7 +67,7 @@ const NotificationPanel: React.FC<NotificationPanelProps> = ({
     <Panel
       isLightDismiss
       closeButtonAriaLabel={formatMessage('Close')}
-      customWidth={'390px'}
+      customWidth="395px"
       headerText={formatMessage('Notifications')}
       isBlocking={false}
       isOpen={isOpen}

Composer/packages/client/src/utils/zIndices.ts

@@ -0,0 +1,13 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { ZIndexes } from 'office-ui-fabric-react/lib/Styling';
+
+/**
+ * This object keeps track of zIndices use in the app.
+ * This will help prevent zIndices competing with each other.
+ * Add your z-index value here and use it in the component.
+ */
+export const zIndices = {
+  notificationContainer: ZIndexes.Layer + 1,
+};